.type-large-title { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 2.5rem; line-height: 3rem; font-weight: 600; color: #403840 } @media(min-width:48em) { .type-large-title { font-size: 3.875rem; line-height: 4.375rem } } .type-title-1 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 2rem; line-height: 2.375rem; font-weight: 600; color: #403840 } @media(min-width:48em) { .type-title-1 { font-size: 2.625rem; line-height: 3rem } } .type-title-2 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.375rem; line-height: 1.75rem; font-weight: 600; color: #403840 } @media(min-width:48em) { .type-title-2 { font-size: 2rem; line-height: 2.25rem } } .type-title-3 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; color: #403840 } @media(min-width:48em) { .type-title-3 { font-size: 1.5rem; line-height: 2rem } } .type-headline { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1rem; line-height: 1.375rem; font-weight: 600; color: #403840 } @media(min-width:48em) { .type-headline { font-size: 1.125rem; line-height: 1.5rem } } .type-body { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.25rem; color: #403840 } @media(min-width:48em) { .type-body { font-size: 1rem; line-height: 1.375rem } } .type-button { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1rem; line-height: 1.125rem; color: #403840 } @media(min-width:48em) { .type-button { line-height: 1.375rem } } .type-text-link { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.25rem; color: #da291c } @media(min-width:48em) { .type-text-link { font-size: 1rem; line-height: 1.375rem } } .type-small-text { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1rem; color: #403840 } @media(min-width:48em) { .type-small-text { font-size: .875rem; line-height: 1.25rem } } .type-text-link-2 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1rem; color: #da291c } @media(min-width:48em) { .type-text-link-2 { font-size: .875rem; line-height: 1.25rem } } .marketing-tile-dismiss__confirm { padding: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center } .marketing-tile-dismiss__heading { height: 30px; display: flex; align-items: center; padding: 0 20px } .marketing-tile-dismiss__heading svg { width: 40px; height: 30px } .marketing-tile-dismiss__text { font-weight: 700; margin-left: 10px; font-size: 1rem } .marketing-tile-dismiss__actions { margin-top: 20px } .marketing-tile-dismiss__cancel-link { margin-left: 20px } .marketing-tile-dismiss__first-try { padding: 20px; display: flex; flex-direction: column; align-items: center } .marketing-tile-dismiss__first-try button { margin-top: 20px; display: flex; justify-content: center; align-items: center } .marketing-tile-dismiss__first-try button svg { margin-right: 10px } .marketing-tile-dismiss__first-try-headingheading { height: 30px; display: inline-flex; align-items: center } .marketing-tile { box-sizing: border-box; font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; overflow: hidden; border-radius: 8px; transition: box-shadow .3s ease-in-out; box-shadow: 0 1px 5px rgba(158, 147, 166, .2), 0 3px 4px rgba(158, 147, 166, .12), 0 2px 4px rgba(158, 147, 166, .14) } .marketing-tile:focus, .marketing-tile:focus-within, .marketing-tile:hover { box-shadow: 0 8px 10px rgba(158, 147, 166, .3), 0 6px 30px rgba(158, 147, 166, .12), 0 16px 24px rgba(158, 147, 166, .14) } .marketing-tile__main { display: flex; flex-direction: column; justify-content: space-between; align-items: center; position: relative; width: 100% } @media(min-width:64.0625em) { .marketing-tile__main { flex-direction: row } } .marketing-tile__header { display: flex; flex-direction: column; height: 100%; width: 100%; order: 1 } @media(min-width:64em) { .marketing-tile__header { order: 1 } } @media(min-width:64.0625em) { .marketing-tile__header { order: 0; min-height: 310px } } .marketing-tile__content { padding: 20px 20px 14px; flex-grow: 1; display: flex; flex-direction: column } @media(min-width:64em) { .marketing-tile__content { padding: 20px 30px } } .marketing-tile__title { font-size: 1.125rem; font-weight: 700; line-height: 1.333; margin: 0; padding: 0 } @media(min-width:64em) { .marketing-tile__title { font-size: 1.5rem; line-height: 1.2 } } .marketing-tile__description { margin: 4px 0; line-height: 1.4 } @media(min-width:64em) { .marketing-tile__description { margin: 10px 0; line-height: 1.5 } } .marketing-tile__learn-more { line-height: 1.333; margin: 0 } @media(min-width:64em) { .marketing-tile__learn-more { line-height: 1.5 } } .marketing-tile__view-details { flex-grow: 0; display: flex; align-items: center; flex-direction: column; text-align: center; padding: 10px 18px } @media(min-width:64em) { .marketing-tile__view-details { flex-direction: row; justify-content: space-between; padding: 10px 30px } } .marketing-tile__show-details-button { order: 1; font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-weight: 400; font-size: .875rem; height: 1rem; display: inline-flex; align-self: center; background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline } @media(min-width:64em) { .marketing-tile__show-details-button { order: 0; font-size: 1rem; line-height: 1.5 } } .marketing-tile__logo { display: flex; align-items: center; justify-content: center; order: 0; margin-top: 10px; max-width: 95px } @media(min-width:64em) { .marketing-tile__logo { margin-top: 0; order: 1 } } .marketing-tile__logo img { width: 100%; height: auto } .marketing-tile__img-container { display: flex; justify-content: center; align-items: stretch; overflow: hidden; z-index: 10; order: 0; height: 190px } @media(min-width:34.375em) { .marketing-tile__img-container { height: 310px } } @media(min-width:64em) { .marketing-tile__img-container { flex: auto } } @media(min-width:64.0625em) { .marketing-tile__img-container { order: 1; flex: 0 0 434px; align-self: flex-start } } .marketing-tile__img { height: 100% } .marketing-tile__img.image--error { width: 64px; height: 64px; margin: auto } .marketing-tile__details { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #fff } .marketing-tile__additional-info-wrapper { width: 100%; padding: 20px 0 } .marketing-tile__additional-info, .marketing-tile__date { padding: 0 20px; margin: 0; text-align: center } @media(min-width:48em) { .marketing-tile__additional-info, .marketing-tile__date { text-align: left } } .marketing-tile__additional-info:first-child, .marketing-tile__date:first-child { margin-bottom: 20px } .marketing-tile--theme-esso, .marketing-tile--theme-mobil, .marketing-tile--theme-pco_standard { background: #fff } .marketing-tile--theme-esso .marketing-tile__title, .marketing-tile--theme-mobil .marketing-tile__title, .marketing-tile--theme-pco_standard .marketing-tile__title { color: #f86457 } .marketing-tile--theme-esso .marketing-tile-dismiss__text, .marketing-tile--theme-esso .marketing-tile__description, .marketing-tile--theme-mobil .marketing-tile-dismiss__text, .marketing-tile--theme-mobil .marketing-tile__description, .marketing-tile--theme-pco_standard .marketing-tile-dismiss__text, .marketing-tile--theme-pco_standard .marketing-tile__description { color: #191919 } .marketing-tile--theme-esso .marketing-tile__details, .marketing-tile--theme-esso .marketing-tile__view-details, .marketing-tile--theme-mobil .marketing-tile__details, .marketing-tile--theme-mobil .marketing-tile__view-details, .marketing-tile--theme-pco_standard .marketing-tile__details, .marketing-tile--theme-pco_standard .marketing-tile__view-details { border-top: 1px solid rgba(25, 25, 25, .19) } .marketing-tile--theme-esso .marketing-tile__learn-more, .marketing-tile--theme-esso .marketing-tile__view-details-button, .marketing-tile--theme-mobil .marketing-tile__learn-more, .marketing-tile--theme-mobil .marketing-tile__view-details-button, .marketing-tile--theme-pco_standard .marketing-tile__learn-more, .marketing-tile--theme-pco_standard .marketing-tile__view-details-button { color: #da291c } .marketing-tile--theme-pco_red { background: #f86457 } .marketing-tile--theme-pco_red .marketing-tile__title { color: #fff } .marketing-tile--theme-pco_red .marketing-tile-dismiss__text, .marketing-tile--theme-pco_red .marketing-tile__description { color: #191919 } .marketing-tile--theme-pco_red .marketing-tile__details, .marketing-tile--theme-pco_red .marketing-tile__view-details { border-top: 1px solid rgba(25, 25, 25, .19) } .marketing-tile--theme-pco_red .marketing-tile__learn-more, .marketing-tile--theme-pco_red .marketing-tile__view-details-button { color: #191919 } .marketing-tile--theme-pco_pink { background: #ffd9d9 } .marketing-tile--theme-pco_pink .marketing-tile__title { color: #f86457 } .marketing-tile--theme-pco_pink .marketing-tile-dismiss__text, .marketing-tile--theme-pco_pink .marketing-tile__description, .marketing-tile--theme-pco_pink .marketing-tile__learn-more, .marketing-tile--theme-pco_pink .marketing-tile__view-details-button { color: #191919 } .marketing-tile--theme-pco_pink .marketing-tile__details, .marketing-tile--theme-pco_pink .marketing-tile__view-details { border-top: 1px solid rgba(25, 25, 25, .19) } .marketing-tile--theme-pco_black { background: #000 } .marketing-tile--theme-pco_black .marketing-tile__title { color: #f86457 } .marketing-tile--theme-pco_black .marketing-tile-dismiss__text, .marketing-tile--theme-pco_black .marketing-tile__description, .marketing-tile--theme-pco_black .marketing-tile__learn-more, .marketing-tile--theme-pco_black .marketing-tile__view-details-button { color: #fff } .marketing-tile--theme-pco_black .marketing-tile__details, .marketing-tile--theme-pco_black .marketing-tile__view-details { border-top: 1px solid #fff } .marketing-tile--theme-dominion, .marketing-tile--theme-fortinos, .marketing-tile--theme-freshmart, .marketing-tile--theme-independent-citymarket, .marketing-tile--theme-loblaws, .marketing-tile--theme-loblaws_citymarket, .marketing-tile--theme-provigo, .marketing-tile--theme-rass, .marketing-tile--theme-supervalue, .marketing-tile--theme-valumart, .marketing-tile--theme-yig, .marketing-tile--theme-zehrs { background: #121212 } .marketing-tile--theme-dominion .marketing-tile-dismiss__text, .marketing-tile--theme-dominion .marketing-tile__description, .marketing-tile--theme-dominion .marketing-tile__title, .marketing-tile--theme-dominion .marketing-tile__view-details-button, .marketing-tile--theme-fortinos .marketing-tile-dismiss__text, .marketing-tile--theme-fortinos .marketing-tile__description, .marketing-tile--theme-fortinos .marketing-tile__title, .marketing-tile--theme-fortinos .marketing-tile__view-details-button, .marketing-tile--theme-freshmart .marketing-tile-dismiss__text, .marketing-tile--theme-freshmart .marketing-tile__description, .marketing-tile--theme-freshmart .marketing-tile__title, .marketing-tile--theme-freshmart .marketing-tile__view-details-button, .marketing-tile--theme-independent-citymarket .marketing-tile-dismiss__text, .marketing-tile--theme-independent-citymarket .marketing-tile__description, .marketing-tile--theme-independent-citymarket .marketing-tile__title, .marketing-tile--theme-independent-citymarket .marketing-tile__view-details-button, .marketing-tile--theme-loblaws .marketing-tile-dismiss__text, .marketing-tile--theme-loblaws .marketing-tile__description, .marketing-tile--theme-loblaws .marketing-tile__title, .marketing-tile--theme-loblaws .marketing-tile__view-details-button, .marketing-tile--theme-loblaws_citymarket .marketing-tile-dismiss__text, .marketing-tile--theme-loblaws_citymarket .marketing-tile__description, .marketing-tile--theme-loblaws_citymarket .marketing-tile__title, .marketing-tile--theme-loblaws_citymarket .marketing-tile__view-details-button, .marketing-tile--theme-provigo .marketing-tile-dismiss__text, .marketing-tile--theme-provigo .marketing-tile__description, .marketing-tile--theme-provigo .marketing-tile__title, .marketing-tile--theme-provigo .marketing-tile__view-details-button, .marketing-tile--theme-rass .marketing-tile-dismiss__text, .marketing-tile--theme-rass .marketing-tile__description, .marketing-tile--theme-rass .marketing-tile__title, .marketing-tile--theme-rass .marketing-tile__view-details-button, .marketing-tile--theme-supervalue .marketing-tile-dismiss__text, .marketing-tile--theme-supervalue .marketing-tile__description, .marketing-tile--theme-supervalue .marketing-tile__title, .marketing-tile--theme-supervalue .marketing-tile__view-details-button, .marketing-tile--theme-valumart .marketing-tile-dismiss__text, .marketing-tile--theme-valumart .marketing-tile__description, .marketing-tile--theme-valumart .marketing-tile__title, .marketing-tile--theme-valumart .marketing-tile__view-details-button, .marketing-tile--theme-yig .marketing-tile-dismiss__text, .marketing-tile--theme-yig .marketing-tile__description, .marketing-tile--theme-yig .marketing-tile__title, .marketing-tile--theme-yig .marketing-tile__view-details-button, .marketing-tile--theme-zehrs .marketing-tile-dismiss__text, .marketing-tile--theme-zehrs .marketing-tile__description, .marketing-tile--theme-zehrs .marketing-tile__title, .marketing-tile--theme-zehrs .marketing-tile__view-details-button { color: #fff } .marketing-tile--theme-dominion .marketing-tile__details, .marketing-tile--theme-dominion .marketing-tile__view-details, .marketing-tile--theme-fortinos .marketing-tile__details, .marketing-tile--theme-fortinos .marketing-tile__view-details, .marketing-tile--theme-freshmart .marketing-tile__details, .marketing-tile--theme-freshmart .marketing-tile__view-details, .marketing-tile--theme-independent-citymarket .marketing-tile__details, .marketing-tile--theme-independent-citymarket .marketing-tile__view-details, .marketing-tile--theme-loblaws .marketing-tile__details, .marketing-tile--theme-loblaws .marketing-tile__view-details, .marketing-tile--theme-loblaws_citymarket .marketing-tile__details, .marketing-tile--theme-loblaws_citymarket .marketing-tile__view-details, .marketing-tile--theme-provigo .marketing-tile__details, .marketing-tile--theme-provigo .marketing-tile__view-details, .marketing-tile--theme-rass .marketing-tile__details, .marketing-tile--theme-rass .marketing-tile__view-details, .marketing-tile--theme-supervalue .marketing-tile__details, .marketing-tile--theme-supervalue .marketing-tile__view-details, .marketing-tile--theme-valumart .marketing-tile__details, .marketing-tile--theme-valumart .marketing-tile__view-details, .marketing-tile--theme-yig .marketing-tile__details, .marketing-tile--theme-yig .marketing-tile__view-details, .marketing-tile--theme-zehrs .marketing-tile__details, .marketing-tile--theme-zehrs .marketing-tile__view-details { border-top: 1px solid #fff } .marketing-tile--theme-dominion .marketing-tile__learn-more, .marketing-tile--theme-fortinos .marketing-tile__learn-more, .marketing-tile--theme-freshmart .marketing-tile__learn-more, .marketing-tile--theme-independent-citymarket .marketing-tile__learn-more, .marketing-tile--theme-loblaws .marketing-tile__learn-more, .marketing-tile--theme-loblaws_citymarket .marketing-tile__learn-more, .marketing-tile--theme-provigo .marketing-tile__learn-more, .marketing-tile--theme-rass .marketing-tile__learn-more, .marketing-tile--theme-supervalue .marketing-tile__learn-more, .marketing-tile--theme-valumart .marketing-tile__learn-more, .marketing-tile--theme-yig .marketing-tile__learn-more, .marketing-tile--theme-zehrs .marketing-tile__learn-more { color: #ee3929 } .marketing-tile--theme-extra_foods, .marketing-tile--theme-maxi, .marketing-tile--theme-superstore, .marketing-tile--theme-wholesale { background: #fff } .marketing-tile--theme-extra_foods .marketing-tile__title, .marketing-tile--theme-maxi .marketing-tile__title, .marketing-tile--theme-superstore .marketing-tile__title, .marketing-tile--theme-wholesale .marketing-tile__title { color: #194b9f } .marketing-tile--theme-extra_foods .marketing-tile-dismiss__text, .marketing-tile--theme-extra_foods .marketing-tile__description, .marketing-tile--theme-maxi .marketing-tile-dismiss__text, .marketing-tile--theme-maxi .marketing-tile__description, .marketing-tile--theme-superstore .marketing-tile-dismiss__text, .marketing-tile--theme-superstore .marketing-tile__description, .marketing-tile--theme-wholesale .marketing-tile-dismiss__text, .marketing-tile--theme-wholesale .marketing-tile__description { color: #000 } .marketing-tile--theme-extra_foods .marketing-tile__details, .marketing-tile--theme-extra_foods .marketing-tile__view-details, .marketing-tile--theme-maxi .marketing-tile__details, .marketing-tile--theme-maxi .marketing-tile__view-details, .marketing-tile--theme-superstore .marketing-tile__details, .marketing-tile--theme-superstore .marketing-tile__view-details, .marketing-tile--theme-wholesale .marketing-tile__details, .marketing-tile--theme-wholesale .marketing-tile__view-details { border-top: 1px solid #000 } .marketing-tile--theme-extra_foods .marketing-tile__learn-more, .marketing-tile--theme-extra_foods .marketing-tile__view-details-button, .marketing-tile--theme-maxi .marketing-tile__learn-more, .marketing-tile--theme-maxi .marketing-tile__view-details-button, .marketing-tile--theme-superstore .marketing-tile__learn-more, .marketing-tile--theme-superstore .marketing-tile__view-details-button, .marketing-tile--theme-wholesale .marketing-tile__learn-more, .marketing-tile--theme-wholesale .marketing-tile__view-details-button { color: #ee3131 } .marketing-tile--theme-nofrills { background: #fd0 } .marketing-tile--theme-nofrills .marketing-tile__title { color: #ee3131 } .marketing-tile--theme-nofrills .marketing-tile-dismiss__text, .marketing-tile--theme-nofrills .marketing-tile__description, .marketing-tile--theme-nofrills .marketing-tile__learn-more, .marketing-tile--theme-nofrills .marketing-tile__view-details-button { color: #000 } .marketing-tile--theme-nofrills .marketing-tile__details, .marketing-tile--theme-nofrills .marketing-tile__view-details { border-top: 1px solid #000 } .marketing-tile--theme-joe_fresh { background: #fff } .marketing-tile--theme-joe_fresh .marketing-tile__learn-more, .marketing-tile--theme-joe_fresh .marketing-tile__title, .marketing-tile--theme-joe_fresh .marketing-tile__view-details-button { color: #ac342a } .marketing-tile--theme-joe_fresh .marketing-tile-dismiss__text, .marketing-tile--theme-joe_fresh .marketing-tile__description { color: #000 } .marketing-tile--theme-joe_fresh .marketing-tile__details, .marketing-tile--theme-joe_fresh .marketing-tile__view-details { border-top: 1px solid #000 } .marketing-tile--theme-sdm_phx { background: #fff } .marketing-tile--theme-sdm_phx .marketing-tile-dismiss__text, .marketing-tile--theme-sdm_phx .marketing-tile__description, .marketing-tile--theme-sdm_phx .marketing-tile__learn-more, .marketing-tile--theme-sdm_phx .marketing-tile__title, .marketing-tile--theme-sdm_phx .marketing-tile__view-details-button { color: #000 } .marketing-tile--theme-sdm_phx .marketing-tile__details, .marketing-tile--theme-sdm_phx .marketing-tile__view-details { border-top: 1px solid #000 } .marketing-tile--theme-sdm_beauty { background: #d3eef8 } .marketing-tile--theme-sdm_beauty .marketing-tile-dismiss__text, .marketing-tile--theme-sdm_beauty .marketing-tile__description, .marketing-tile--theme-sdm_beauty .marketing-tile__learn-more, .marketing-tile--theme-sdm_beauty .marketing-tile__title, .marketing-tile--theme-sdm_beauty .marketing-tile__view-details-button { color: #000 } .marketing-tile--theme-sdm_beauty .marketing-tile__details, .marketing-tile--theme-sdm_beauty .marketing-tile__view-details { border-top: 1px solid #000 } .marketing-tile--theme-pc_financial { background: #ee2e24 } .marketing-tile--theme-pc_financial .marketing-tile-dismiss__text, .marketing-tile--theme-pc_financial .marketing-tile__description, .marketing-tile--theme-pc_financial .marketing-tile__learn-more, .marketing-tile--theme-pc_financial .marketing-tile__title, .marketing-tile--theme-pc_financial .marketing-tile__view-details-button { color: #fff } .marketing-tile--theme-pc_financial .marketing-tile__details, .marketing-tile--theme-pc_financial .marketing-tile__view-details { border-top: 1px solid #fff } .marketing-tile--theme-pc_insiders { background: #fff } .marketing-tile--theme-pc_insiders .marketing-tile__learn-more, .marketing-tile--theme-pc_insiders .marketing-tile__title, .marketing-tile--theme-pc_insiders .marketing-tile__view-details-button { color: #ee3124 } .marketing-tile--theme-pc_insiders .marketing-tile-dismiss__text, .marketing-tile--theme-pc_insiders .marketing-tile__description { color: #000 } .marketing-tile--theme-pc_insiders .marketing-tile__details, .marketing-tile--theme-pc_insiders .marketing-tile__view-details { border-top: 1px solid #000 } .image-set img { max-width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; margin: 0 auto } .points-days-header { display: flex; flex-direction: column; align-items: center } @media(min-width:48em) { .points-days-header { flex-direction: row; justify-content: center } } .points-days-header__header { background-size: contain; background-position: center 100%; background-repeat: no-repeat; background-color: #fbf1f1; min-height: 334px; padding-top: 21px } @media(min-width:48em) { .points-days-header__header { background-size: contain; background-position: center 100%; padding-top: 0; min-height: 220px } } @media(min-width:64em) { .points-days-header__header { background-size: 100%; min-height: 290px } } .points-days-header__image { width: 136px; height: 94px } @media(min-width:48em) { .points-days-header__image { width: 144px; height: 100px } } @media(min-width:64em) { .points-days-header__image { width: 282px; height: 194px } } .points-days-header__logo { text-align: right; margin-bottom: 31px } @media(min-width:48em) { .points-days-header__logo { margin-bottom: 0 } } .points-days-header__text-section { padding: 0 16px } @media(min-width:48em) { .points-days-header__text-section { display: flex; flex-direction: column; padding-left: 24px } } .points-days-header__text-section-block { display: block } .points-days-header__title { color: #ac342a; text-align: center; margin: 0 0 16px } @media(min-width:48em) { .points-days-header__title { text-align: left; margin: 0 0 7px } } @media(min-width:64em) { .points-days-header__title { margin: -1.25em 0 16px } } .points-days-header__subtitle { text-align: center; color: #403840; padding-bottom: 35px; margin-bottom: 0 } @media(min-width:48em) { .points-days-header__subtitle { text-align: left; width: 420px; padding-bottom: 0; margin-top: 0 } } .layoutCard { box-sizing: border-box; margin: 0 auto; border-radius: 1rem; font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; position: relative; overflow: hidden; display: flex } @media(max-width:47.99em) { .layoutCard { flex-direction: column; min-height: 492px; width: 100%; max-width: 390px } } .layoutCard__bg-dark { background-color: #ac342a } .layoutCard__bg-medium { background-color: #df6c46 } .layoutCard__bg-light { background-color: #fbf1f1 } .layoutCard__bg-off-white { background-color: #fdfdfd } .layoutCard__text-dark { color: #403840 } .layoutCard__text-light { color: #fff } @media(min-width:48em) { .layoutCard__horizontal { width: 100%; flex-direction: row; max-width: 996px; min-height: 364px } } @media(min-width:48em) { .layoutCard__horizontal .layoutCard__text-container { padding-right: 3.5rem } } @media(min-width:64em) { .layoutCard__horizontal .layoutCard__text-container { padding-right: 5rem } } @media(min-width:48em) { .layoutCard__horizontal .layoutCard__image-container { max-width: 456px } } @media(max-width:47.99em) { .layoutCard__horizontal .layoutCard__image-container img { right: -174px; bottom: -50px } } @media(min-width:48em) { .layoutCard__vertical { width: calc(50% - 1rem); max-width: 482px; min-height: 590px; flex-direction: column } .layoutCard__vertical .layoutCard__title { margin-bottom: 1.5rem } .layoutCard__vertical .layoutCard__image-container { position: absolute; bottom: 0; right: -20px; max-width: 337px } } @media(min-width:64em) { .layoutCard__vertical .layoutCard__image-container { bottom: 0; right: 0 } } .layoutCard__image-container { position: relative } .layoutCard__image-container img { display: block; max-width: 100% } @media(max-width:47.99em) { .layoutCard__image-container img { position: absolute; right: -41px; bottom: -105px } } @media only screen and (max-width:374px) { .layoutCard__image-container img { right: -110px; bottom: -105px } } .layoutCard__text-container { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; flex-grow: 1; padding: 1.875rem; position: relative; z-index: 1 } @media(min-width:48em) { .layoutCard__text-container { padding: 2rem } } @media(min-width:64em) { .layoutCard__text-container { padding: 2.5rem } } .layoutCard__text-body { display: flex; flex-direction: column; align-items: flex-start } .layoutCard__title { margin: 0 0 1rem } @media(min-width:48em)and (max-width:63.99em) { .layoutCard__title { font-size: 1.75rem; line-height: 2rem } } .layoutCard__body { margin: 0 0 1rem; max-width: 415px } @media(min-width:48em)and (max-width:63.99em) { .layoutCard__body { font-size: 1.25rem; line-height: 1.5rem } } .layoutCard__button { border-radius: 100px; padding: 12px 20px; font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-weight: 600; transition: all .1s } .layoutCard__button-light { color: #fff; border-color: #fff } .layoutCard__button-light:hover { border-color: #fff; background: #fff; color: #403840 } .layoutCard__button-dark { color: #403840; border-color: #403840 } .layoutCard__button-dark:hover { border-color: #403840; background: #403840; color: #fff } .layoutCard__logo-list { margin: 0; padding: 0; list-style: none; line-height: 0 } .accordion { display: flex; flex-direction: column } .accordion__button { margin: 0 auto } .accordion__button-contents { display: flex; align-items: center } .accordion__button-sprite { height: 8px; width: 14px; margin-left: 8px; transform: rotate(90deg) } .accordion__button-sprite--expanded { transform: rotate(-90deg) } .screen-cards { padding: 24px; margin-bottom: 50px } @media(min-width:46.25em) { .screen-cards { padding: 40px 24px; margin-bottom: 56px } } @media(min-width:61.25em) { .screen-cards { padding: 48px 32px; margin-bottom: 100px } } .screen-cards__title { margin: 0 auto; text-align: center } @media(min-width:61.25em) { .screen-cards__title { max-width: 992px } } .screen-cards__subtitle { margin: 16px auto 0; text-align: center } @media(min-width:61.25em) { .screen-cards__subtitle { max-width: 540px } } .screen-cards__list { align-items: center; display: flex; flex-direction: column; margin: 32px 0 -74px } @media(min-width:46.25em) { .screen-cards__list { align-items: flex-start; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 20px -12px -108px } } @media(min-width:61.25em) { .screen-cards__list { margin: 28px -12px -160px } } .screen-cards__card { margin-top: 16px } .screen-cards__card:first-child { margin-top: 0 } @media(min-width:46.25em) { .screen-cards__card:first-child { margin-top: 12px } } @media(min-width:46.25em) { .screen-cards__card { margin: 12px } } .pc-card { background-color: #fff; border-radius: 8px; box-shadow: 0 8px 10px rgba(158, 147, 166, .3), 0 6px 30px rgba(158, 147, 166, .12), 0 16px 24px rgba(158, 147, 166, .14); text-align: center } .pc-card-sm { width: 310px } @media(min-width:48em) { .pc-card-sm { min-height: 398px } } @media(min-width:64em) { .pc-card-sm { min-height: 362px; width: 362px } } .pc-card-sm .pc-card__image-section-image { height: 156px; width: 310px } .pc-card__image-section { padding: 24px 0; border-bottom: 1px solid #9e93a6 } @media(min-width:64em) { .pc-card__image-section { padding: 24px } } .pc-card__image-section-image { display: block } .pc-card__content { display: flex; flex-direction: column; padding: 24px } .pc-card__title { margin: 0 } .pc-card__body { margin-top: 8px } .pc-card__body p { margin: 0 } .cta-section { padding: 30px 24px 24px } @media(min-width:46.25em) { .cta-section { padding: 40px } } @media(min-width:61.25em) { .cta-section { padding: 40px 142px } } .cta-section__header { margin: 0 } .cta-section__subheader { margin: 24px 0 0 } @media(min-width:46.25em) { .cta-section__subheader { margin: 16px 0 0; max-width: 564px } } @media(min-width:61.25em) { .cta-section__subheader { margin: 16px 0 0; max-width: 660px } } .cta-section__tiles-container { margin-top: 32px } @media(min-width:61.25em) { .cta-section__tiles-container { margin-top: 40px } } .cta-section__tiles { display: flex; flex-direction: column; margin-bottom: -24px } @media(min-width:46.25em) { .cta-section__tiles { flex-direction: row; flex-wrap: wrap; margin: -16px -15px } } @media(min-width:61.25em) { .cta-section__tiles { margin: -20px -32px } } .cta-section__tile { margin: 0 0 24px } @media(min-width:46.25em) { .cta-section__tile { width: 284px; margin: 16px 15px } } @media(min-width:61.25em) { .cta-section__tile { width: 340px; margin: 20px 32px } } .cta-section__tile--header { margin: 0 } .cta-section__tile--subheader { margin: 4px 0 0 } @media(min-width:46.25em) { .cta-section__tile--subheader { margin: 16px 0 0 } } .cta-section__link { display: inline-block; margin-top: 32px } @media(min-width:46.25em) { .cta-section__link { margin-top: 40px } } .points-days-mobile__text-section-block ol li::marker, .type-ds-title-3 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; color: #403840 } @media(min-width:48em) { .points-days-mobile__text-section-block ol li::marker, .type-ds-title-3 { font-size: 1.5rem; line-height: 2rem } } .points-days-mobile__text-section-block ol p, .type-ds-body { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.428571429; color: #403840 } @media(min-width:48em) { .points-days-mobile__text-section-block ol p, .type-ds-body { font-size: 1rem; line-height: 1.375rem } } .container, .points-days-mobile { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px } @media(min-width:48em) { .container, .points-days-mobile { padding-left: 40px; padding-right: 40px } } .points-days-mobile { display: flex; flex-direction: column; align-items: center } @media(min-width:48em) { .points-days-mobile { flex-direction: row; justify-content: center } } .points-days-mobile__mobile { min-height: 375px; padding-bottom: 21px; background-size: 120% } @media(min-width:48em) { .points-days-mobile__mobile { background-size: 100%; background-position: center -10px; min-height: 220px; padding-bottom: 0 } } @media(min-width:64em) { .points-days-mobile__mobile { background-position-y: 25%; min-height: 290px } } .points-days-mobile__logo { text-align: right } @media(min-width:48em) { .points-days-mobile__logo { display: flex; flex-direction: column } } .points-days-mobile__image { width: 286px; height: 412px } @media(min-width:48em) { .points-days-mobile__image { width: 235px; height: 337px } } @media(min-width:64em) { .points-days-mobile__image { width: 372px; height: 536px } } .points-days-mobile__text-section { padding: 0 16px } @media(min-width:48em) { .points-days-mobile__text-section { display: flex; flex-direction: column; padding: 1em 0 1em 24px } } .points-days-mobile__text-section-block { display: block; margin-block-start: 1em } .points-days-mobile__text-section-block-social { align-items: center; display: flex; justify-content: space-around; width: 100% } @media(min-width:48em) { .points-days-mobile__text-section-block-social { justify-content: flex-start; padding-inline-start: 22px } } .points-days-mobile__text-section-block-social svg { height: 40px; width: 121px } @media(min-width:48em) { .points-days-mobile__text-section-block-social svg { margin-right: 24px; padding: 0 } } @media(min-width:64em) { .points-days-mobile__text-section-block-social svg { margin-right: 40px; padding: 0 } } .points-days-mobile__text-section-block-social img { height: 40px; width: 138px } .points-days-mobile__text-section-block ol { padding-inline-start: 5px } .points-days-mobile__text-section-block ol li { counter-increment: li } .points-days-mobile__text-section-block ol li::marker { content: counter(li) } .points-days-mobile__text-section-block ol p { padding-inline-start: 25px } @media(min-width:48em) { .points-days-mobile__text-section-block ol { padding-inline-start: 40px } } .points-days-mobile__title { color: #ac342a; text-align: center; font-size: 22px; line-height: 28px; margin: 0 } @media(min-width:48em) { .points-days-mobile__title { text-align: left; padding-inline-start: 25px; font-size: 32px; line-height: 36px } } .points-days-mobile__subtitle { text-align: center; color: #403840; padding-bottom: 24px; margin: 0 } @media(min-width:48em) { .points-days-mobile__subtitle { text-align: left; width: 420px; padding-bottom: 0; padding-inline-start: 25px } } @media(min-width:48em) { .points-days-mobile p { padding-inline-start: 25px } } .logo-section__logos { display: flex; flex-wrap: wrap; justify-content: center; padding: 32px } @media(min-width:34.375em) { .logo-section__logos { justify-content: space-between } } @media(min-width:48em) { .logo-section__logos { padding: 76px } } @media(min-width:64em) { .logo-section__logos { padding: 48px } } .logo-section__logos-logo { width: 130px } @media(min-width:48em) { .logo-section__logos-logo { width: 258px } } .logo-section__body-text { padding: 0 32px; text-align: center } @media(min-width:48em) { .logo-section__body-text { padding: 0 76px } } @media(min-width:64em) { .logo-section__body-text { padding: 0 48px } } .type-ds-title-1 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 2rem; line-height: 2.375rem; font-weight: 600; color: #403840 } @media(min-width:48em) { .type-ds-title-1 { font-size: 2.625rem; line-height: 3rem } } .type-ds-title-2 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.375rem; line-height: 1.75rem; font-weight: 600; color: #403840 } @media(min-width:48em) { .type-ds-title-2 { font-size: 2rem; line-height: 2.25rem } } .type-ds-title-3 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; color: #403840 } @media(min-width:48em) { .type-ds-title-3 { font-size: 1.5rem; line-height: 2rem } } .type-ds-headline { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1rem; line-height: 1.375rem; font-weight: 600; color: #403840 } @media(min-width:48em) { .type-ds-headline { font-size: 1.125rem; line-height: 1.5rem } } .type-ds-body { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.428571429; color: #403840 } @media(min-width:48em) { .type-ds-body { font-size: 1rem; line-height: 1.375rem } } .type-ds-button { font-size: 1rem; line-height: 1.375rem; font-weight: 600; color: #403840 } .type-ds-button, .type-ds-text-link { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif } .type-ds-text-link { font-size: .9375rem; line-height: 1.428571429; color: #da291c } @media(min-width:48em) { .type-ds-text-link { font-size: 1rem; line-height: 1.5rem } } .type-ds-small-text { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1rem; color: #403840 } @media(min-width:48em) { .type-ds-small-text { font-size: .875rem; line-height: 1.25rem } } .type-ds-small-text-bold, .type-ds-small-text-strong { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1rem; font-weight: 600; color: #403840 } @media(min-width:48em) { .type-ds-small-text-bold, .type-ds-small-text-strong { font-size: .875rem; line-height: 1.25rem } } .type-ds-text-link-2 { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1.333333333; color: #da291c } @media(min-width:48em) { .type-ds-text-link-2 { font-size: .875rem; line-height: 1.25rem } } .type-ds-text-link-2-new { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1.333333333; color: #157a77 } @media(min-width:48em) { .type-ds-text-link-2-new { font-size: .875rem; line-height: 1.25rem } } .type-h1 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 3.125rem; line-height: 1.1; letter-spacing: -.02rem; font-weight: 700; color: #191919 } @media(min-width:48em) { .type-h1 { font-size: 4.5rem; line-height: 1.108108108 } } .type-h2 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 2rem; line-height: 1.125; letter-spacing: -.02rem; font-weight: 700; color: #191919 } @media(min-width:48em) { .type-h2 { font-size: 3rem; line-height: 1.166666666 } } .type-h3 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.25rem; line-height: 1.4; font-weight: 400; color: #191919 } @media(min-width:48em) { .type-h3 { font-size: 2rem; line-height: 1.3125 } } .type-h4 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.5rem; line-height: 1.166666666; letter-spacing: -.02rem; font-weight: 700; color: #191919 } @media(min-width:48em) { .type-h4 { font-size: 2rem; line-height: 1.25 } } .type-p2 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.125rem; line-height: 1.333333333; letter-spacing: -.02rem; font-weight: 700; color: #191919 } @media(min-width:48em) { .type-p2 { font-size: 1.5rem; line-height: 1.333333333 } } .type-p3 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.125rem; line-height: 1.333333333; letter-spacing: -.02rem; font-weight: 700; color: #191919 } @media(min-width:48em) { .type-p3 { font-size: 1.125rem; line-height: 1.555555556 } } .type-p4 { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.4; font-weight: 400; color: #191919 } @media(min-width:48em) { .type-p4 { font-size: 1.125rem; line-height: 1.555555556 } } .type-offer-header { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.375rem; line-height: 1.28; font-weight: 700; color: #403840 } @media(min-width:48em) { .type-offer-header { font-size: 2rem; line-height: 1.125 } } .type-offer-header-copy { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.4; font-weight: 400; color: #f86457 } @media(min-width:48em) { .type-offer-header-copy { font-size: 1; line-height: 1.3333 } } .type-offer-header-error { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.125rem; line-height: 1.333333333; font-weight: 700; color: #191919 } @media(min-width:48em) { .type-offer-header-error { font-size: 1.5rem; line-height: 1.166666666 } } .type-body1 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.4; font-weight: 400; color: #191919 } @media(min-width:48em) { .type-body1 { font-size: 1rem; line-height: 1.5 } } .type-offer-body1 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.4; font-weight: 400; color: #403840 } @media(min-width:48em) { .type-offer-body1 { font-size: 1rem; line-height: 1.5 } } .type-body2 { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.4; font-weight: 400; color: #191919 } @media(min-width:48em) { .type-body2 { font-size: 1rem; line-height: 1.5 } } .type-subcopy { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1.333333333; font-weight: 400; color: #585858 } @media(min-width:48em) { .type-subcopy { font-size: .875rem; line-height: 1.428571429 } } .type-offer-subcopy { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1.333333333; font-weight: 400; color: #655c6c } @media(min-width:48em) { .type-offer-subcopy { font-size: .875rem; line-height: 1.428571429 } } .type-subcopy-bold { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1.333333333; font-weight: 600; color: #191919 } @media(min-width:48em) { .type-subcopy-bold { font-size: .875rem; line-height: 1.428571429 } } .type-link1 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.4; font-weight: 400; color: #ee3124; text-decoration: underline } @media(min-width:48em) { .type-link1 { font-size: 1rem; line-height: 1.75 } } .type-link2 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1.333333333; font-weight: 400; color: #585858; text-decoration: underline } .type-link2:hover { color: #191919 } @media(min-width:48em) { .type-link2 { font-size: .875rem; line-height: 1.428571429 } } .type-footertitle { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.4; font-weight: 700; color: #191919 } @media(min-width:48em) { .type-footertitle { font-size: 1rem; line-height: 1.5 } } .type-eyebrow { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1.333333333; letter-spacing: .03rem; font-weight: 700; color: #191919; text-transform: uppercase } @media(min-width:48em) { .type-eyebrow { font-size: .875rem; line-height: 1.428571429; letter-spacing: .05rem } } .type-offer-eyebrow { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1.333333333; font-weight: 400; text-transform: uppercase } @media(min-width:48em) { .type-offer-eyebrow { font-size: .875rem; line-height: 1.428571429 } } .type-form-label { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1.333333333; letter-spacing: .05em; font-weight: 400; color: #191919 } @media(min-width:48em) { .type-form-label { font-size: .875rem; line-height: 1.428571429 } } .type-form-subtext { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1.333333333; font-weight: 400; color: #585858 } @media(min-width:48em) { .type-form-subtext { font-size: .875rem; line-height: 1.428571429 } } .type-homepage-title { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 2rem; line-height: 1.176470588; letter-spacing: -.02rem; font-weight: 700; color: #ee3124 } @media(min-width:48em) { .type-homepage-title { font-size: 3rem; line-height: 1.166666666 } } .type-homepage-subtitle { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.375rem; line-height: 1.363636364; font-weight: 400; color: #191919 } @media(min-width:48em) { .type-homepage-subtitle { font-size: 1.5625rem; line-height: 1.2 } } .container, .content-card { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px } @media(min-width:48em) { .container, .content-card { padding-left: 40px; padding-right: 40px } } .content-card { display: flex; flex-direction: column; justify-content: center; width: 100% } @media(min-width:48em) { .content-card { flex-direction: row } } .content-card__image { display: block; width: 295px; height: 295px; margin: 0 auto } @media(min-width:48em) { .content-card__image { width: 242px; height: 242px; margin: 0 } } @media(min-width:64em) { .content-card__image { width: 384px; height: 384px } } .content-card__content { display: flex; flex-direction: column; justify-content: center; text-align: center; padding-top: 40px; width: 100% } @media(min-width:48em) { .content-card__content { margin-left: 64px; align-items: flex-start; text-align: left; padding-top: 0; width: calc(100% - 306px) } } @media(min-width:64em) { .content-card__content { width: calc(100% - 448px) } } .content-card__content-title { margin: 0; width: 100% } .content-card__content-sub-title { margin-top: 8px; margin-bottom: 0; width: 100% } .content-card__content-body { margin: 32px 0 40px; width: 100% } .content-card__content-body p { margin-top: 0; margin-bottom: 0 } .content-card__content-primary-button { width: 100% } @media(min-width:48em) { .content-card__content-primary-button { width: 276px } } .container { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px } @media(min-width:48em) { .container { padding-left: 40px; padding-right: 40px } } .pco-offers-container { max-width: 688px; margin-left: auto; margin-right: auto } @media(min-width:64em) { .pco-offers-container { max-width: 780px } } .error-card { text-align: center; background-position: bottom; padding: 25px; border: 1px solid #f4f1f6; box-sizing: border-box; border-radius: 8px; box-shadow: 0 1px 5px rgba(158, 147, 166, .2), 0 3px 4px rgba(158, 147, 166, .12), 0 2px 4px rgba(158, 147, 166, .14) } .error-card h1, .error-card h2, .error-card h3, .error-card h4, .error-card h5, .error-card h6, .error-card p { padding: 0; margin: 0 } @media(min-width:48em) { .error-card { padding: 35px 40px 40px } } .error-card-title { margin: 8px 0 } /*! normalize.css v9.0.1 | MIT License | github.com/csstools/normalize.css */ html { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% } h1 { font-size: 2em; margin: .67em 0 } hr { box-sizing: content-box; height: 0; overflow: visible } pre { font-family: monospace, monospace; font-size: 1em } abbr[title] { text-decoration: underline; text-decoration: underline dotted } b, strong { font-weight: bolder } code, kbd, samp { font-family: monospace, monospace; font-size: 1em } small { font-size: 80% } button, input, select { margin: 0 } button { text-transform: none } [type=button], [type=reset], [type=submit], button { -webkit-appearance: button } fieldset { padding: .35em .75em .625em } input { overflow: visible } legend { box-sizing: border-box; display: table; max-width: 100%; white-space: normal } progress { display: inline-block; vertical-align: baseline } select { text-transform: none } textarea { margin: 0 } [type=search] { -webkit-appearance: textfield; outline-offset: -2px } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto } ::-webkit-input-placeholder { color: inherit; opacity: .54 } ::-webkit-search-decoration { -webkit-appearance: none } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit } ::-moz-focus-inner { border-style: none; padding: 0 } :-moz-focusring { outline: 1px dotted ButtonText } details, dialog { display: block } dialog { background-color: #fff; border: solid; color: #000; height: -moz-fit-content; height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; padding: 1em; position: absolute; right: 0; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content } dialog:not([open]) { display: none } summary { display: list-item } @keyframes enterFromBottom { 0% { transform: translateY(100%) } to { transform: translateY(0) } } .lds__privacy-policy { box-sizing: border-box; background-color: #666; color: #efefef; font-size: 1em; line-height: 1.1875em; font-family: Noir Std, Helvetica, -system-ui, Calibri, Arial; font-weight: 300 } .lds__privacy-policy__innerWrapper { box-sizing: border-box; padding: 16px } .lds__privacy-policy__innerWrapper p { margin-top: 0 } .lds__privacy-policy__btnClose, .lds__privacy-policy__link:link, .lds__privacy-policy__link:visited { text-decoration: underline; color: #efefef } .lds__privacy-policy__btnClose { display: inline-block; position: relative; left: 50%; padding: 0 1em; border: none; background-color: transparent; font-size: 1em; line-height: 1.1875em; font-family: Noir Std, Helvetica, -system-ui, Calibri, Arial; font-weight: 300; transform: translateX(-50%); cursor: pointer } .lds__privacy-policy__positionBottom { position: fixed; z-index: 9999; left: 0; right: 0; bottom: 0; transition: transform 1.5s ease-in-out 0s; animation-duration: 1.5s; animation-timing-function: ease-in-out; animation-delay: 0s; animation-iteration-count: 1; animation-name: enterFromBottom } .lds__privacy-policy__positionBottom.lds__privacy-policy__closed { transform: translateY(100%) } .lds__privacy-policy__positionBottom.lds__privacy-policy__closed--init { animation: none } @media screen and (min-width:641px) { .lds__privacy-policy { line-height: 1.5em } } @media screen and (min-width:1280px) { .lds__privacy-policy__innerWrapper { margin: auto; max-width: 1280px } } @font-face { font-display: swap; font-family: Noir; font-weight: 400; src: url(/static/fonts/noirpro-regular.otf) } @font-face { font-display: swap; font-family: Noir; font-weight: 400; font-style: italic; src: url(/static/fonts/noirpro-italic.otf) } @font-face { font-display: swap; font-family: Noir; font-weight: 700; src: url(/static/fonts/noirpro-semibold.otf) } @font-face { font-display: swap; font-family: Noir; font-weight: 700; font-style: italic; src: url(/static/fonts/noirpro-semibolditalic.otf) } .esso-redemption-header__title, .type-ds-large-title { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 2.5rem; line-height: 3rem; font-weight: 600; color: #403840 } @media(min-width:48em) { .esso-redemption-header__title, .type-ds-large-title { font-size: 3.875rem; line-height: 4.375rem } } .enrol-flow .flow-header__title, .type-ds-title-1 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 2rem; line-height: 2.375rem; font-weight: 600; color: #403840 } @media(min-width:48em) { .enrol-flow .flow-header__title, .type-ds-title-1 { font-size: 2.625rem; line-height: 3rem } } .account-header__title, .activation-card-display__points, .download-app__title, .esso-redemption-earning-card__title, .modal-content .offer__reward--carousel, .type-ds-title-2, .your-pco-section__heading { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.375rem; line-height: 1.75rem; font-weight: 600; color: #403840 } @media(min-width:48em) { .account-header__title, .activation-card-display__points, .download-app__title, .esso-redemption-earning-card__title, .modal-content .offer__reward--carousel, .type-ds-title-2, .your-pco-section__heading { font-size: 2rem; line-height: 2.25rem } } .billing-history-empty-state__message h4, .deals-for-you__subtitle, .download-app__subtitle, .esso-redemption-header__subtitle, .esso-redemption-pcf__title, .esso-redemption-redeem-cards__text-divider, .esso-redemption-redeem-cards__title, .loadToCard-brand-banner .layoutCard__title, .modal-content .offer__text--carousel, .offer-standalone__heading, .offer__reward--carousel, .slider-header__text--heading, .type-ds-title-3, .your-pco-error__tile-content-title { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; color: #403840 } @media(min-width:48em) { .billing-history-empty-state__message h4, .deals-for-you__subtitle, .download-app__subtitle, .esso-redemption-header__subtitle, .esso-redemption-pcf__title, .esso-redemption-redeem-cards__text-divider, .esso-redemption-redeem-cards__title, .loadToCard-brand-banner .layoutCard__title, .modal-content .offer__text--carousel, .offer-standalone__heading, .offer__reward--carousel, .slider-header__text--heading, .type-ds-title-3, .your-pco-error__tile-content-title { font-size: 1.5rem; line-height: 2rem } } .activation-card-display__points-label, .billing-history__date, .cancel-subscription__modal-content .pcoi-error-tile p:first-of-type, .category-btn, .deals-for-you-tile__item, .enrol-flow .flow-progress-bar__title, .esso-redemption-earning-card__subtitle, .esso-redemption-pcf__money-subtitle, .esso-redemption-redeem-cards__text, .expandable-form-wrapper__title, .initial-offers-slider__slider-container__slide-content--screen-1--button-imageHolder, .initial-offers-slider__slider-container__slide-content--screen-1--button-textHolder, .initial-offers-slider__slider-container__slide-content--screen-rest--button-imageHolder, .initial-offers-slider__slider-container__slide-content--screen-rest--button-textHolder, .initial-offers-slider__slider-container__slide-content__question, .no-subscription-plan__content h3, .offer-content-group-carousel--faded.offer-content-group-carousel--modal .offer__reward--earned, .offer-content-group-carousel .offer__text, .offer__text--carousel, .quest-offer-child-offer .continuity-offer__content-group .offer__reward, .quest-offer-child-offer .hero-continuity-offer__content-group .offer__reward, .quest-offer-child-offer .hero-product-offer__content-group .offer__reward, .quest-offer-child-offer.offer--faded .offer__reward--earned, .quest-offer-child-offer .product-offer__content-group .offer__reward, .subscription-plan__content h3, .type-ds-headline { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1rem; line-height: 1.375rem; font-weight: 600; color: #403840 } @media(min-width:48em) { .activation-card-display__points-label, .billing-history__date, .cancel-subscription__modal-content .pcoi-error-tile p:first-of-type, .category-btn, .deals-for-you-tile__item, .enrol-flow .flow-progress-bar__title, .esso-redemption-earning-card__subtitle, .esso-redemption-pcf__money-subtitle, .esso-redemption-redeem-cards__text, .expandable-form-wrapper__title, .initial-offers-slider__slider-container__slide-content--screen-1--button-imageHolder, .initial-offers-slider__slider-container__slide-content--screen-1--button-textHolder, .initial-offers-slider__slider-container__slide-content--screen-rest--button-imageHolder, .initial-offers-slider__slider-container__slide-content--screen-rest--button-textHolder, .initial-offers-slider__slider-container__slide-content__question, .no-subscription-plan__content h3, .offer-content-group-carousel--faded.offer-content-group-carousel--modal .offer__reward--earned, .offer-content-group-carousel .offer__text, .offer__text--carousel, .quest-offer-child-offer .continuity-offer__content-group .offer__reward, .quest-offer-child-offer .hero-continuity-offer__content-group .offer__reward, .quest-offer-child-offer .hero-product-offer__content-group .offer__reward, .quest-offer-child-offer.offer--faded .offer__reward--earned, .quest-offer-child-offer .product-offer__content-group .offer__reward, .subscription-plan__content h3, .type-ds-headline { font-size: 1.125rem; line-height: 1.5rem } } .activation-card-display__redeemable-value, .activation-card-display__redeemable-value-section, .billing-history__amount p, .billing-history__card--number p, .billing-history__type, .checkbox-group-new-ds__label, .enrol-flow .flow-header__sub-title, .enrol-form__expanded-legal-copy, .esso-redemption-earning-card__text, .esso-redemption-redeem-cards__subtext, .flow-faq--new-design-system .flow-faq__subtitle, .header-points__redeemable, .hero-quest-offer .offer__text, .initial-offers-slider__slider-container__slide-content__title, .load-to-card-section-header .checkbox-group-new-ds__label, .loadToCard-brand-banner .layoutCard__body, .loadToCard-header__subtitle, .messages__all-read, .quest-offer .offer__text, .redemption-perk-details .dropdown-group__dropdown, .text-group--new-design-system .text-group__input-container--with-addon .flyers-header__input, .text-group--new-design-system .text-group__input-container--with-addon .homepage-stores__input, .text-group--new-design-system .text-group__input-container--with-addon .search-box__input, .text-group--new-design-system .text-group__input-container--with-addon .text-group__input, .text-group--new-design-system .text-group__input-container--with-addon .text-group__input-addon, .type-ds-body, .your-pco-error__tile-content-subtitle, .your-pco-section__description, .your-pco-section__heading+p { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.25rem; color: #403840 } @media(min-width:48em) { .activation-card-display__redeemable-value, .activation-card-display__redeemable-value-section, .billing-history__amount p, .billing-history__card--number p, .billing-history__type, .checkbox-group-new-ds__label, .enrol-flow .flow-header__sub-title, .enrol-form__expanded-legal-copy, .esso-redemption-earning-card__text, .esso-redemption-redeem-cards__subtext, .flow-faq--new-design-system .flow-faq__subtitle, .header-points__redeemable, .hero-quest-offer .offer__text, .initial-offers-slider__slider-container__slide-content__title, .load-to-card-section-header .checkbox-group-new-ds__label, .loadToCard-brand-banner .layoutCard__body, .loadToCard-header__subtitle, .messages__all-read, .quest-offer .offer__text, .redemption-perk-details .dropdown-group__dropdown, .text-group--new-design-system .text-group__input-container--with-addon .flyers-header__input, .text-group--new-design-system .text-group__input-container--with-addon .homepage-stores__input, .text-group--new-design-system .text-group__input-container--with-addon .search-box__input, .text-group--new-design-system .text-group__input-container--with-addon .text-group__input, .text-group--new-design-system .text-group__input-container--with-addon .text-group__input-addon, .type-ds-body, .your-pco-error__tile-content-subtitle, .your-pco-section__description, .your-pco-section__heading+p { font-size: 1rem; line-height: 1.375rem } } .esso-redemption-earning-card__cta, .esso-redemption-faq__faq-link-button, .load-to-card-tile__checkbox-container .checkbox-group-new-ds__label, .offer-footer--carousel .shoppable-offer-link, .type-ds-button { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1rem; line-height: 1.125rem; font-weight: 600; color: #403840 } @media(min-width:48em) { .esso-redemption-earning-card__cta, .esso-redemption-faq__faq-link-button, .load-to-card-tile__checkbox-container .checkbox-group-new-ds__label, .offer-footer--carousel .shoppable-offer-link, .type-ds-button { line-height: 1.375rem } } .deals-for-you-tile__shop-now, .type-ds-button-3 { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1rem; line-height: 1.375rem; font-weight: 600; color: #157a77; text-decoration: underline; transition: all .2s } .deals-for-you-tile__shop-now:focus, .deals-for-you-tile__shop-now:hover, .type-ds-button-3:focus, .type-ds-button-3:hover { color: #615395 } .deals-for-you-tile__shop-now:active, .type-ds-button-3:active { color: #403840 } .account-setting--security .redeemable-perk-content__cta.account-setting__turn-off-button, .account-setting--security .redeemable-perk-content__cta.account-setting__turn-on-button, .deals-for-you__header-cta, .points-days-cta-section__content .redeemable-perk-content__cta.cta-section__link, .redeemable-perk-content__cta.button, .redeemable-perk-content__cta.household-grid__invite-button, .redeemable-perk-content__cta.link--theme-button, .redeemable-perk-content__cta.link--theme-button--large-primary, .redeemable-perk-content__cta.link--theme-button--large-secondary, .redeemable-perk-content__cta.link--theme-button--small-primary, .redeemable-perk-content__cta.link--theme-button--small-secondary, .redeemable-perk-content__cta.link--theme-button-gray, .redeemable-perk-content__cta.link--theme-button-red, .redeemable-perk-content__cta.link--theme-button-transparent, .redeemable-perk-content__cta.link--theme-button-transparent-white, .redeemable-perk-content__cta.link--theme-button-white, .redeemable-perk-content__cta.load-shop-pay-header__link, .redeemable-perk-content__cta.load-shop-pay-module__link, .redeemable-perk-content__cta.marketing-page-header__link, .redeemable-perk-content__cta.marketing-page-module__link, .redeemable-perk-content__cta.partnership-perk-details__cta, .redeemable-perk-content__cta.partnership-perk-redeemed-success__cta, .redeemable-perk-content__cta.points-days__cta, .type-ds-text-link { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.25rem; color: #da291c } @media(min-width:48em) { .account-setting--security .redeemable-perk-content__cta.account-setting__turn-off-button, .account-setting--security .redeemable-perk-content__cta.account-setting__turn-on-button, .deals-for-you__header-cta, .points-days-cta-section__content .redeemable-perk-content__cta.cta-section__link, .redeemable-perk-content__cta.button, .redeemable-perk-content__cta.household-grid__invite-button, .redeemable-perk-content__cta.link--theme-button, .redeemable-perk-content__cta.link--theme-button--large-primary, .redeemable-perk-content__cta.link--theme-button--large-secondary, .redeemable-perk-content__cta.link--theme-button--small-primary, .redeemable-perk-content__cta.link--theme-button--small-secondary, .redeemable-perk-content__cta.link--theme-button-gray, .redeemable-perk-content__cta.link--theme-button-red, .redeemable-perk-content__cta.link--theme-button-transparent, .redeemable-perk-content__cta.link--theme-button-transparent-white, .redeemable-perk-content__cta.link--theme-button-white, .redeemable-perk-content__cta.load-shop-pay-header__link, .redeemable-perk-content__cta.load-shop-pay-module__link, .redeemable-perk-content__cta.marketing-page-header__link, .redeemable-perk-content__cta.marketing-page-module__link, .redeemable-perk-content__cta.partnership-perk-details__cta, .redeemable-perk-content__cta.partnership-perk-redeemed-success__cta, .redeemable-perk-content__cta.points-days__cta, .type-ds-text-link { font-size: 1rem; line-height: 1.375rem } } .ad-unit__sponsored-label, .base-form input, .base-form label, .base-form label .link.primary, .base-form select, .billing-history-empty-state__message p, .checklist-polling__answered-message, .checklist-polling__not-answered-dash, .checklist-polling__not-answered-message, .deals-for-you-tile__text-subcopy, .enrol-form__firstname-helper-text, .enrol-form__privacy-copy, .esso-redemption-ts-and-cs__accordion p, .expandable-form-wrapper .billing-info__summary, .expandable-form-wrapper__collapsed p, .offer--carousel .offer-description-container .offer-description, .offer--carousel .offer-footer-date, .offer-footer-date, .quest-offer-child-offer .continuity-offer__content-group .offer__text, .quest-offer-child-offer .hero-continuity-offer__content-group .offer__text, .quest-offer-child-offer .hero-product-offer__content-group .offer__text, .quest-offer-child-offer .product-offer__content-group .offer__text, .quest-offer-footer .quest-offer-footer-date, .redemption-perk-details .dropdown-group__label span, .shopping-list-generic-item-form .flyers-header__input, .shopping-list-generic-item-form .homepage-stores__input, .shopping-list-generic-item-form .search-box__input, .shopping-list-generic-item-form .text-group__input, .text-group--new-design-system .invitation-form__error-message, .text-group--new-design-system .text-group__error, .text-group--new-design-system .toggleable-container .account-setting__error, .toggleable-container .text-group--new-design-system .account-setting__error, .type-ds-small-text { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1rem; color: #403840 } @media(min-width:48em) { .ad-unit__sponsored-label, .base-form input, .base-form label, .base-form label .link.primary, .base-form select, .billing-history-empty-state__message p, .checklist-polling__answered-message, .checklist-polling__not-answered-dash, .checklist-polling__not-answered-message, .deals-for-you-tile__text-subcopy, .enrol-form__firstname-helper-text, .enrol-form__privacy-copy, .esso-redemption-ts-and-cs__accordion p, .expandable-form-wrapper .billing-info__summary, .expandable-form-wrapper__collapsed p, .offer--carousel .offer-description-container .offer-description, .offer--carousel .offer-footer-date, .offer-footer-date, .quest-offer-child-offer .continuity-offer__content-group .offer__text, .quest-offer-child-offer .hero-continuity-offer__content-group .offer__text, .quest-offer-child-offer .hero-product-offer__content-group .offer__text, .quest-offer-child-offer .product-offer__content-group .offer__text, .quest-offer-footer .quest-offer-footer-date, .redemption-perk-details .dropdown-group__label span, .shopping-list-generic-item-form .flyers-header__input, .shopping-list-generic-item-form .homepage-stores__input, .shopping-list-generic-item-form .search-box__input, .shopping-list-generic-item-form .text-group__input, .text-group--new-design-system .invitation-form__error-message, .text-group--new-design-system .text-group__error, .text-group--new-design-system .toggleable-container .account-setting__error, .toggleable-container .text-group--new-design-system .account-setting__error, .type-ds-small-text { font-size: .875rem; line-height: 1.25rem } } .deals-for-you-feature__badge, .dropdown-group--new-design-system .dropdown-group__label, .input-error-new-design-system, .load-to-card-tile__offer-expiry-date, .text-group--new-design-system .text-group__label, .text-group--new-design-system .text-group__subtext, .type-ds-small-text-inter { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1rem; color: #403840 } @media(min-width:48em) { .deals-for-you-feature__badge, .dropdown-group--new-design-system .dropdown-group__label, .input-error-new-design-system, .load-to-card-tile__offer-expiry-date, .text-group--new-design-system .text-group__label, .text-group--new-design-system .text-group__subtext, .type-ds-small-text-inter { font-size: .875rem; line-height: 1.25rem } } .activate-card__subtitle, .billing-history__amount, .billing-history__card--number, .esso-redemption-ts-and-cs__accordion h3, .esso-redemption-ts-and-cs__accordion h4, .quest-offer-progress__indicator span, .type-ds-small-text-strong { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1rem; font-weight: 600; color: #403840 } @media(min-width:48em) { .activate-card__subtitle, .billing-history__amount, .billing-history__card--number, .esso-redemption-ts-and-cs__accordion h3, .esso-redemption-ts-and-cs__accordion h4, .quest-offer-progress__indicator span, .type-ds-small-text-strong { font-size: .875rem; line-height: 1.25rem } } .initial-offers-slider__slider-container__slide-content--skipButton, .product-love-story-details__link.product-love-story-details__link, .type-ds-text-link-2 { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1.333333333; color: #da291c } @media(min-width:48em) { .initial-offers-slider__slider-container__slide-content--skipButton, .product-love-story-details__link.product-love-story-details__link, .type-ds-text-link-2 { font-size: .875rem; line-height: 1.25rem } } .homepage-hero__title, .not-found__title, .point-summary__title, .type-h1 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 3.125rem; line-height: 1.1; letter-spacing: -.02rem; font-weight: 700; color: #191919 } @media(min-width:48em) { .homepage-hero__title, .not-found__title, .point-summary__title, .type-h1 { font-size: 4.5rem; line-height: 1.108108108 } } .contact-us-header__title, .default-hero .homepage-hero__title, .eflyers-subscription-header__title, .flow-header__title, .flyers-header__title, .how-points-work__header, .points-inquiry-header__title, .store-locator-header__title, .type-h2, .utility-header__title { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 2rem; line-height: 1.125; letter-spacing: -.02rem; font-weight: 700; color: #191919 } @media(min-width:48em) { .contact-us-header__title, .default-hero .homepage-hero__title, .eflyers-subscription-header__title, .flow-header__title, .flyers-header__title, .how-points-work__header, .points-inquiry-header__title, .store-locator-header__title, .type-h2, .utility-header__title { font-size: 3rem; line-height: 1.166666666 } } .donate-points__confirm-heading, .flow-tile__title-text, .household-instruction__text, .modal-content h1, .type-h3 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.25rem; line-height: 1.4; font-weight: 400; color: #191919 } @media(min-width:48em) { .donate-points__confirm-heading, .flow-tile__title-text, .household-instruction__text, .modal-content h1, .type-h3 { font-size: 2rem; line-height: 1.3125 } } .not-found__subtitle, .type-h4 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.5rem; line-height: 1.166666666; letter-spacing: -.02rem; font-weight: 700; color: #191919 } @media(min-width:48em) { .not-found__subtitle, .type-h4 { font-size: 2rem; line-height: 1.25 } } .type-p1 { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.4; font-weight: 400; color: #191919 } @media(min-width:48em) { .type-p1 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.75rem; line-height: 1.142857143 } } .accept-invitation-full-house__title, .accept-invitation-info__title, .checklist-how-points-work__header, .checklist__header h2, .contest-rules-page__heading, .field-set__header, .flyer-result__header, .homepage-province-stores__title, .how-points-work-tile__title, .legal-page__heading, .login-page__title, .more-ways-to-shop h1, .offer-savedempty__title, .offer__reward, .offer__reward--earned, .offers-container-empty__header, .pc-insiders-subscription__highlighted-number, .pc-insiders-subscription__tile-value, .point-event__diff-value, .point-event__dollar-savings, .points-summary__inner, .promoted-action__title, .store-details-section__title, .submission-message__header, .type-p2, .utility-section__title, .weekly-flyer-opt-in__title, .what-to-expect-in-store h1 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.125rem; line-height: 1.333333333; letter-spacing: -.02rem; font-weight: 700; color: #191919 } @media(min-width:48em) { .accept-invitation-full-house__title, .accept-invitation-info__title, .checklist-how-points-work__header, .checklist__header h2, .contest-rules-page__heading, .field-set__header, .flyer-result__header, .homepage-province-stores__title, .how-points-work-tile__title, .legal-page__heading, .login-page__title, .more-ways-to-shop h1, .offer-savedempty__title, .offer__reward, .offer__reward--earned, .offers-container-empty__header, .pc-insiders-subscription__highlighted-number, .pc-insiders-subscription__tile-value, .point-event__diff-value, .point-event__dollar-savings, .points-summary__inner, .promoted-action__title, .store-details-section__title, .submission-message__header, .type-p2, .utility-section__title, .weekly-flyer-opt-in__title, .what-to-expect-in-store h1 { font-size: 1.5rem; line-height: 1.333333333 } } .already-claimed__title, .contest-rules-page__section-title, .flow-faq__title, .flyer-store-details__contact-header, .household-link-account__title, .household-member__name, .info-window__button, .info-window__title, .legacy-transfer__description, .legal-page__section-title, .point-event__title, .search-result-item__distance, .search-result-item__name, .tab-bar__button, .tab-bar__link, .toggleable-drawer-content__subtitle, .type-p3 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.125rem; line-height: 1.333333333; letter-spacing: -.02rem; font-weight: 700; color: #191919 } @media(min-width:48em) { .already-claimed__title, .contest-rules-page__section-title, .flow-faq__title, .flyer-store-details__contact-header, .household-link-account__title, .household-member__name, .info-window__button, .info-window__title, .legacy-transfer__description, .legal-page__section-title, .point-event__title, .search-result-item__distance, .search-result-item__name, .tab-bar__button, .tab-bar__link, .toggleable-drawer-content__subtitle, .type-p3 { font-size: 1.125rem; line-height: 1.555555556 } } .accept-invitation-info__member, .donate-points__charity-heading, .pc-insiders-subscription__subtitle, .type-p4 { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.4; font-weight: 400; color: #191919 } @media(min-width:48em) { .accept-invitation-info__member, .donate-points__charity-heading, .pc-insiders-subscription__subtitle, .type-p4 { font-size: 1.125rem; line-height: 1.555555556 } } .offers-section-header h1, .type-offer-header { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.375rem; line-height: 1.28; font-weight: 700; color: #403840 } @media(min-width:48em) { .offers-section-header h1, .type-offer-header { font-size: 2rem; line-height: 1.125 } } .offers-section-header__description, .type-offer-header-copy { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.4; font-weight: 400; color: #f86457 } @media(min-width:48em) { .offers-section-header__description, .type-offer-header-copy { font-size: 1; line-height: 1.3333 } } .error-offer-tile__content-header, .type-offer-header-error { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.125rem; line-height: 1.333333333; font-weight: 700; color: #191919 } @media(min-width:48em) { .error-offer-tile__content-header, .type-offer-header-error { font-size: 1.5rem; line-height: 1.166666666 } } .account-device__legacy-type, .account-device__nickname, .account-setting__value, .checkbox-group, .contest-rules-page__body, .contest-rules-page h3, .error-offer-tile__content-body, .error-tile, .flow-faq__link, .flyer__missing-flyers-text, .flyers-header__input, .homepage-stores__input, .household-link-account__text, .how-points-work-rule__subtext, .how-points-work-rule__title, .how-points-work-tile-footer__footer-text, .how-points-work-tile__subtitle, .legal-page__body, .legal-page h3, .modal-content--scrollable .offer-content-group-carousel-wrapper.offers-modal__scroll-content p, .point-event__transaction-inquiry, .redemption-message__text, .refine-search__services-radio-group-single, .search-box__input, .system-message, .text-group__input, .type-body1, body { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.4; font-weight: 400; color: #191919 } @media(min-width:48em) { .account-device__legacy-type, .account-device__nickname, .account-setting__value, .checkbox-group, .contest-rules-page__body, .contest-rules-page h3, .error-offer-tile__content-body, .error-tile, .flow-faq__link, .flyer__missing-flyers-text, .flyers-header__input, .homepage-stores__input, .household-link-account__text, .how-points-work-rule__subtext, .how-points-work-rule__title, .how-points-work-tile-footer__footer-text, .how-points-work-tile__subtitle, .legal-page__body, .legal-page h3, .modal-content--scrollable .offer-content-group-carousel-wrapper.offers-modal__scroll-content p, .point-event__transaction-inquiry, .redemption-message__text, .refine-search__services-radio-group-single, .search-box__input, .system-message, .text-group__input, .type-body1, body { font-size: 1rem; line-height: 1.5 } } .offer__text, .type-offer-body1 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.4; font-weight: 400; color: #403840 } @media(min-width:48em) { .offer__text, .type-offer-body1 { font-size: 1rem; line-height: 1.5 } } .accept-invitation-full-house__body, .account-setting__form-info, .contest-rules-page__subheading, .donate-points__charity-subheading, .flow-faq__subtitle, .flow-tile__body-text, .flyer-result__address, .flyer-result__content p, .flyer-store-details__contact-address, .flyers-header__subtitle, .homepage-legacy__item, .homepage-offers-grid__square, .info-window__address1, .info-window__address2, .legal-page__subheading, .offers-container-empty__body, .offers-count, .promoted-action__message, .search-result-item__address1, .search-result-item__address2, .store-details-header__name, .store-locator-header__subtitle, .toggleable-drawer-content__text, .type-body2, .update-email-form__info, .utility-header__subtitle, .utility-section__subtitle { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.4; font-weight: 400; color: #191919 } @media(min-width:48em) { .accept-invitation-full-house__body, .account-setting__form-info, .contest-rules-page__subheading, .donate-points__charity-subheading, .flow-faq__subtitle, .flow-tile__body-text, .flyer-result__address, .flyer-result__content p, .flyer-store-details__contact-address, .flyers-header__subtitle, .homepage-legacy__item, .homepage-offers-grid__square, .info-window__address1, .info-window__address2, .legal-page__subheading, .offers-container-empty__body, .offers-count, .promoted-action__message, .search-result-item__address1, .search-result-item__address2, .store-details-header__name, .store-locator-header__subtitle, .toggleable-drawer-content__text, .type-body2, .update-email-form__info, .utility-header__subtitle, .utility-section__subtitle { font-size: 1rem; line-height: 1.5 } } .account-device__bullet, .account-device__last-four, .account-device__legacy-description, .account-device__secondary-info, .account-device__state, .account-setting__form-info--sub-info, .call-centre-details__availability, .checklist-how-points-work__subcopy, .checklist-item__subcopy, .communication-opt-in-form__affiliates, .copy-invite-link, .household-member__copy-link, .household-member__expiry, .offer-badge, .offer-details__cta-label, .offer-details__cta-notice, .pc-insiders-subscription__tile-value-sub-text, .point-event-category-details__list, .point-event-notification__message, .point-event-offer, .point-event__pts-label, .point-event__subtitle, .progress-bar__ratio, .registration-page__all-fields-required, .site-footer__copyright, .text-group__label-optional-text, .type-subcopy, .utility-section__right-title, .video-tile__subcopy { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1.333333333; font-weight: 400; color: #585858 } @media(min-width:48em) { .account-device__bullet, .account-device__last-four, .account-device__legacy-description, .account-device__secondary-info, .account-device__state, .account-setting__form-info--sub-info, .call-centre-details__availability, .checklist-how-points-work__subcopy, .checklist-item__subcopy, .communication-opt-in-form__affiliates, .copy-invite-link, .household-member__copy-link, .household-member__expiry, .offer-badge, .offer-details__cta-label, .offer-details__cta-notice, .pc-insiders-subscription__tile-value-sub-text, .point-event-category-details__list, .point-event-notification__message, .point-event-offer, .point-event__pts-label, .point-event__subtitle, .progress-bar__ratio, .registration-page__all-fields-required, .site-footer__copyright, .text-group__label-optional-text, .type-subcopy, .utility-section__right-title, .video-tile__subcopy { font-size: .875rem; line-height: 1.25rem } } .flyer__date, .offer__subcopy, .site-footer__app-links-paragraph, .site-footer__tagline, .type-offer-subcopy { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1.333333333; font-weight: 400; color: #655c6c } @media(min-width:48em) { .flyer__date, .offer__subcopy, .site-footer__app-links-paragraph, .site-footer__tagline, .type-offer-subcopy { font-size: .875rem; line-height: 1.25rem } } .point-event-category-details__sub-header, .type-subcopy-bold { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1.333333333; font-weight: 600; color: #191919 } @media(min-width:48em) { .point-event-category-details__sub-header, .type-subcopy-bold { font-size: .875rem; line-height: 1.25rem } } .site-footer__social-media-link, .type-link1 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.4; font-weight: 400; color: #ee3124; text-decoration: underline } @media(min-width:48em) { .site-footer__social-media-link, .type-link1 { font-size: 1rem; line-height: 1.75 } } .checklist-item__watch-how-link, .donate-points .donate-points-form__forgot-password, .info-window__hours, .info-window__service, .promoted-action__decline, .search-result-item__hours, .search-result-item__service, .site-footer__app-links-link, .type-link2, .weekly-flyer-opt-in__message { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1.333333333; font-weight: 400; color: #585858; text-decoration: underline } .checklist-item__watch-how-link:hover, .donate-points .donate-points-form__forgot-password:hover, .info-window__hours:hover, .info-window__service:hover, .promoted-action__decline:hover, .search-result-item__hours:hover, .search-result-item__service:hover, .site-footer__app-links-link:hover, .type-link2:hover, .weekly-flyer-opt-in__message:hover { color: #191919 } @media(min-width:48em) { .checklist-item__watch-how-link, .donate-points .donate-points-form__forgot-password, .info-window__hours, .info-window__service, .promoted-action__decline, .search-result-item__hours, .search-result-item__service, .site-footer__app-links-link, .type-link2, .weekly-flyer-opt-in__message { font-size: .875rem; line-height: 1.25rem } } .site-footer__links-title, .type-footertitle { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.4; font-weight: 700; color: #191919 } @media(min-width:48em) { .site-footer__links-title, .type-footertitle { font-size: 1rem; line-height: 1.5 } } .assign-card-form__member-title, .flyer-result--disabled .offer-details__saved-title, .household-instruction__title, .locale-toggle, .offer--disabled .offer-details__saved-title, .offers-preview .offer--invalid .offer-details__saved-title, .point-event-category-details__header-category-name, .point-event-category-details__header-points, .point-event-category-details__header-savings, .point-event-category-details__header-total, .point-event__dollar-total, .points-summary-tile__title, .refine-search__title h3, .site-footer__app-links-title, .toggleable-drawer-content__title, .type-eyebrow { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1.333333333; letter-spacing: .03rem; font-weight: 700; color: #191919; text-transform: uppercase } @media(min-width:48em) { .assign-card-form__member-title, .flyer-result--disabled .offer-details__saved-title, .household-instruction__title, .locale-toggle, .offer--disabled .offer-details__saved-title, .offers-preview .offer--invalid .offer-details__saved-title, .point-event-category-details__header-category-name, .point-event-category-details__header-points, .point-event-category-details__header-savings, .point-event-category-details__header-total, .point-event__dollar-total, .points-summary-tile__title, .refine-search__title h3, .site-footer__app-links-title, .toggleable-drawer-content__title, .type-eyebrow { font-size: .875rem; line-height: 1.25rem; letter-spacing: .05rem } } .flyer__state, .load-to-card-tile-brand-banner__banner-exclusive-text, .offer-banner__text, .type-offer-eyebrow { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1.333333333; font-weight: 400; text-transform: uppercase } @media(min-width:48em) { .flyer__state, .load-to-card-tile-brand-banner__banner-exclusive-text, .offer-banner__text, .type-offer-eyebrow { font-size: .875rem; line-height: 1.25rem } } .dropdown-group__label, .points-summary__container--precombined .points-summary__inner, .points-summary__redeemable, .text-group__label, .type-form-label { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1.333333333; letter-spacing: .05em; font-weight: 400; color: #191919 } @media(min-width:48em) { .dropdown-group__label, .points-summary__container--precombined .points-summary__inner, .points-summary__redeemable, .text-group__label, .type-form-label { font-size: .875rem; line-height: 1.25rem } } .account-setting--communication .account-setting__terms, .account-setting__label, .checkbox-group__error, .donate-points .donate-points-form__hint, .dropdown-group__error-text, .form-error__error-text, .invitation-form__error-message, .menu-panel__section-title, .text-group__error, .text-group__subtext, .toggleable-container .account-setting__error, .type-form-subtext { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1.333333333; font-weight: 400; color: #585858 } @media(min-width:48em) { .account-setting--communication .account-setting__terms, .account-setting__label, .checkbox-group__error, .donate-points .donate-points-form__hint, .dropdown-group__error-text, .form-error__error-text, .invitation-form__error-message, .menu-panel__section-title, .text-group__error, .text-group__subtext, .toggleable-container .account-setting__error, .type-form-subtext { font-size: .875rem; line-height: 1.25rem } } .esso-redemption-faq__title, .homepage-app__title, .homepage-faq__title, .homepage-join__title, .homepage-legacy__title, .homepage-offers__title, .homepage-pcf__title, .homepage-stores__title, .offers-preview__title, .type-homepage-title { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 2rem; line-height: 1.176470588; letter-spacing: -.02rem; font-weight: 700; color: #ee3124 } @media(min-width:48em) { .esso-redemption-faq__title, .homepage-app__title, .homepage-faq__title, .homepage-join__title, .homepage-legacy__title, .homepage-offers__title, .homepage-pcf__title, .homepage-stores__title, .offers-preview__title, .type-homepage-title { font-size: 3rem; line-height: 1.166666666 } } .default-hero .homepage-hero__subtitle, .homepage-app__subtitle, .homepage-hero__subtitle, .homepage-join__subtitle, .homepage-offers__subtitle, .homepage-pcf__subtitle, .homepage-stores__subtitle, .type-homepage-subtitle { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.375rem; line-height: 1.363636364; font-weight: 400; color: #191919 } @media(min-width:48em) { .default-hero .homepage-hero__subtitle, .homepage-app__subtitle, .homepage-hero__subtitle, .homepage-join__subtitle, .homepage-offers__subtitle, .homepage-pcf__subtitle, .homepage-stores__subtitle, .type-homepage-subtitle { font-size: 1.5625rem; line-height: 1.2 } } .type-scan-app-h1 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 2.5rem; line-height: 2.625rem; font-weight: 700; color: #ee3124 } @media(min-width:48em) { .type-scan-app-h1 { font-size: 4rem; line-height: 3.75rem } } .type-scan-app-h2 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.31rem; line-height: 1.625rem; letter-spacing: -.02rem; font-weight: 700; color: #403840 } @media(min-width:48em) { .type-scan-app-h2 { font-size: 2rem; line-height: 2.25rem } } .type-scan-app-h3 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.125rem; line-height: 1.375rem; letter-spacing: -.02rem; font-weight: 700; color: #403840 } @media(min-width:48em) { .type-scan-app-h3 { font-size: 1.31rem; line-height: 1.4rem } } .type-scan-app-subcopy { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1.066rem; color: #655c6c } @media(min-width:48em) { .type-scan-app-subcopy { font-size: 1rem; line-height: 1.1875rem } } .type-scan-app-p1 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .875rem; line-height: 1.375rem; color: #655c6c } @media(min-width:48em) { .type-scan-app-p1 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.125rem; line-height: 1.56rem } } .type-scan-app-p2 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.375rem; color: #655c6c } @media(min-width:48em) { .type-scan-app-p2 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .875rem; line-height: 1.375rem } } .type-scan-app-p3 { font-size: .875rem; line-height: 1.25rem } .type-scan-app-p3, .type-scan-app-p4 { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; color: #655c6c } .type-scan-app-p4 { font-size: 1rem; line-height: 1.5rem; font-weight: 700 } .type-dashboard-error-full-title, .your-pco-error__full-content-title { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.375rem; line-height: 1.166666666; color: #403840 } @media(min-width:34.375em) { .type-dashboard-error-full-title, .your-pco-error__full-content-title { font-size: 2.625rem; line-height: 3rem } } .type-dashboard-error-full-subtitle, .your-pco-error__full-content-subtitle { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .75rem; line-height: 1rem; color: #403840 } @media(min-width:34.375em) { .type-dashboard-error-full-subtitle, .your-pco-error__full-content-subtitle { font-size: 1rem; line-height: 1.375rem } } *, :after, :before { box-sizing: inherit } html { box-sizing: border-box; font-size: 100% } body { margin: 0 } a { color: #da291c; text-decoration: underline; transition: color .1s } a:hover { color: #982822 } button, input, select, textarea { font: inherit } .app-root { min-width: 320px } .lines-to-paragraph--spacing { white-space: pre-line } .clearfix:after, .clearfix:before, .homepage-hero__faq-link:after, .homepage-hero__faq-link:before, .homepage-hero__login-link:after, .homepage-hero__login-link:before { content: ""; display: table } .clearfix:after, .homepage-hero__faq-link:after, .homepage-hero__login-link:after { clear: both } .no-scroll { overflow: hidden } .no-scroll-ios { position: fixed; width: 100%; height: 100% } .full-width { flex-basis: 100%; width: 100% } .offer--diminish, .remove-shadow { box-shadow: none; border: none } .offers-section-width { max-width: 688px; margin-left: auto; margin-right: auto } @media(min-width:64em) { .offers-section-width { max-width: 780px } } .button--theme-visible-only-onfocus, .button--theme-visible-only-onfocus-link-style, .checkbox-group-new-ds__input, .checkbox-group__input, .partnership-perk-redeemed-success-details__copy-code-copied-message, .radio-group__input, .refine-search__services-radio-input, .visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px } .button--theme-visible-only-onfocus-link-style:active, .button--theme-visible-only-onfocus-link-style:focus, .button--theme-visible-only-onfocus:active, .button--theme-visible-only-onfocus:focus, .visually-hidden--focusable:active, .visually-hidden--focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: relative; width: auto } .button--theme-visible-only-onfocus-link-style:active.skip-navigation, .button--theme-visible-only-onfocus-link-style:focus.skip-navigation, .button--theme-visible-only-onfocus:active.skip-navigation, .button--theme-visible-only-onfocus:focus.skip-navigation, .visually-hidden--focusable:active.skip-navigation, .visually-hidden--focusable:focus.skip-navigation { position: fixed; z-index: 101; top: 5px; left: 5px; padding: 2px; background: #fff } .a11y-anchor:focus:target, .focusable-element-focus-style, .form-error__error-text:focus, .offer-checkmark__input:focus+.offer-checkmark__label, .offer-checkmark__label:focus, .refine-search__stores-radio-input:focus+.refine-search__stores-radio-input-label, [role=button]:focus, [role=link]:focus, [role=menuitem]:focus, a:focus, button:focus, iframe:focus { outline: 2px auto -webkit-focus-ring-color } .checkbox-group__input:focus+.checkbox-group__icon, .checkbox-group__input:focus+.refine-search__services-radio-checkbox-icon, .focusable-element-focus-style--alternative, .radio-group__input:focus+.radio-group__label:before, .refine-search__services-radio-input:focus+.checkbox-group__icon, .refine-search__services-radio-input:focus+.refine-search__services-radio-checkbox-icon, input:focus, textarea:focus { outline: none; box-shadow: 0 0 0 2px -webkit-focus-ring-color } .a11y-popup-wrapper:hover [aria-expanded=true]:focus, .dropdown-group__button[aria-expanded=true]:focus, .flyer-store-details:hover .flyer-store-details__button:focus, .focusable-element-focus-reset, .offer-checkmark__input:active+.offer-checkmark__label, .offer-checkmark__input:focus, [role=button]:focus:active, [role=button]:focus:hover, [role=link]:focus:active, [role=link]:focus:hover, [role=menuitem]:focus:active, [role=menuitem]:focus:hover, a:focus:active, a:focus:hover, button:focus:active, button:focus:hover, iframe:focus:active, iframe:focus:hover { outline: none } .a11y-anchor { outline-style: none } fieldset { margin: auto 0; padding: 0; min-width: auto; border: none } legend { float: left; display: block } input[type=number] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0 } @media print { .checklist-container, .homepage-hero, .menu, .notifications-container, .site-footer { display: none } .tab-bar__inner { justify-content: center } .tab-bar__button { display: none } .tab-bar__button--active { display: block } } .ada-button-frame { display: none !important } .page-container { display: flex; flex-flow: column nowrap; width: 100%; min-height: 100vh; padding-top: 55px } @media(min-width:64.0625em) { .page-container { padding-top: 80px } } .page-container__contents, .page-container__sticky-container { display: flex; flex-flow: column nowrap; flex-grow: 1 } .page-container--chromeless { padding-top: 0 } .page-container--chromeless .tab-bar { display: none } .page-container__sticky-container>.error-tile { max-width: 1280px; margin: 60px auto 100px; padding-left: 20px; padding-right: 20px } @media(min-width:48em) { .page-container__sticky-container>.error-tile { padding-left: 40px; padding-right: 40px } } .page-container__ada-container .ada-chatbot-button { position: fixed; right: 32px; bottom: 32px } .smartbanner-show .smartbanner { margin-top: 55px; z-index: 99 } @media(min-width:48em) { .smartbanner-show .smartbanner { margin-top: 80px } } .flow-body, .flow-body__inner { display: flex; width: 100% } .flow-body__inner { flex-flow: column nowrap; align-items: stretch; margin-left: auto; margin-right: auto; padding-bottom: 55px; max-width: 700px } @media(min-width:48em) { .flow-body__inner { padding-bottom: 110px } } .flow-faq { align-self: stretch; position: relative; margin-top: auto; background: #fff; border-top: 1px solid #ddd } .flow-faq__inner { display: flex; justify-content: center; align-items: center; min-height: 164px; padding-top: 30px; padding-bottom: 30px } @media(min-width:48em) { .flow-faq__inner { min-height: 125px } } @media(max-width:47.99em) { .flow-faq__inner { padding-top: 34px; align-items: flex-start } } .flow-faq__icon { flex: 0 0 45px; height: 41px; margin-left: 12px } @media(min-width:48em) { .flow-faq__icon { flex: 0 0 52px; height: 48px; position: relative; top: -14px; margin-left: 0 } } .flow-faq__content { margin-left: 26px } @media(min-width:48em) { .flow-faq__content { margin-left: 14px; text-align: center } } .flow-faq__text { margin: 0 } .flow-faq__title { text-decoration: none } @media(max-width:47.99em) { .flow-faq__subtitle { display: block; margin-top: 5px } } .flow-faq__link { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; margin-top: 16px } @media(min-width:48em) { .flow-faq__link { margin-top: 10px; margin-left: -52px } } .flow-faq__link:hover { color: #ee3124 } .flow-faq__link .sprite { width: 20px; height: 20px; fill: #ee3124 } .flow-faq--new-design-system .flow-faq__subtitle { color: #655c6c } .flow-faq--new-design-system .flow-faq__caret--green { fill: #157a77; margin: 0 6px; width: 13px; height: auto } .flow-faq--new-design-system .flow-faq__title { margin-right: 12px } .flow-faq--new-design-system .flow-faq__title:hover { color: #403840 } .flow-faq--new-design-system .flow-faq__icon { fill: transparent; height: 56px } .flow-faq--new-design-system .flow-faq__link { font-weight: 400; text-decoration: underline; font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif } .flow-form-submit__content { margin: 70px auto 0 } .flow-form-submit__buttons { margin: auto } .flow-form-submit__cancel, .flow-form-submit__submit { width: 100% } @media(min-width:48em) { .flow-form-submit__cancel, .flow-form-submit__submit { width: auto; min-width: 160px } } .flow-form-submit__cancel { margin: 16px 0 0 } .flow-header { position: relative; max-width: 740px; text-align: center; padding-top: 30px; padding-bottom: 26px } @media(min-width:48em) { .flow-header { padding-top: 60px; padding-bottom: 46px; max-width: 780px } } .flow-header__title { margin-top: 0; margin-bottom: 20px; color: #191919 } .flow-header__title:last-child { margin-bottom: 0 } .flow-header__sub-title { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.25rem; color: #403840; font-weight: 400; margin: 0 } @media(min-width:48em) { .flow-header__sub-title { font-size: 1rem; line-height: 1.375rem } } .flow-layout { flex-grow: 1; display: flex; flex-direction: column; align-items: center; position: relative; background: #f0f0f0 } .flow-layout--has-faq .flows-background { bottom: 164px } @media(min-width:48em) { .flow-layout--has-faq .flows-background { bottom: 125px } } .flow-progress-bar { align-self: stretch; position: relative; padding: 30px 0 26px } @media(min-width:48em) { .flow-progress-bar { padding: 60px 0 54px } } .flow-progress-bar__inner { text-align: center; margin: 0 auto; max-width: 520px } .flow-progress-bar+.flow-header { padding-top: 0 } .flow-progress-bar__title { margin-bottom: 25px } .flow-progress-bar .progress-bar { margin-top: 15px } .flow-progress-bar .progress-bar__parent { background-color: #fbcdcd } .flow-progress-bar--rounded-corners .progress-bar__parent:not(:first-child) { margin-left: 2px } .flow-progress-bar--rounded-corners .progress-bar__parent:first-child { border-radius: 5px 0 0 5px } .flow-progress-bar--rounded-corners .progress-bar__parent:last-child { border-radius: 0 5px 5px 0 } .flow-tile { position: relative; background: #fff; padding: 40px 20px; text-align: center; width: 100%; max-width: 700px } @media(min-width:48em) { .flow-tile { width: 700px } } .flow-tile.registration-form { padding: 20px } .flow-tile.registration-form a { padding: 0 12px; display: inline-block } @media(min-width:375px)and (max-width:480px) { .flow-tile.registration-form a { padding: 0 } } @media(min-width:481px)and (max-width:767px) { .flow-tile.registration-form a { padding: 0 20px } } .flow-tile+.flow-tile { margin-top: 20px } .flow-tile>* { max-width: 440px; margin-left: auto; margin-right: auto } .flow-tile--wide-children>* { max-width: 620px } .flow-tile>:first-child { margin-top: 0 } .flow-tile>:last-child { margin-bottom: 0 } .flow-tile__rule-absolute { position: absolute; left: 0; right: 0; margin: 0; border: 0; max-width: none; border-top: 1px solid #ddd } .legal-layout .tab-bar__inner:lang(en) { max-width: 640px } .legal-layout .tab-bar__inner:lang(fr) { max-width: 840px } .legal-layout .utility-content { margin: 0 auto } .offers-page { overflow-x: hidden; display: flex; flex-direction: column } .offers-page__header { position: relative; padding: 40px; display: flex } @media(min-width:48em) { .offers-page__header { min-height: 300px } } .offers-page__header-text { z-index: 1; display: flex; align-items: flex-end; width: 100% } @media(max-width:63.99em) { .offers-page__header-text { flex-direction: column; justify-content: center; align-items: center } } .offers-page__main-content { background: #fff } @media(min-width:64.0625em) { .offers-page__main-content { display: flex } } .offers-page .header-greeting { color: #ac342a } .offers-page.offers-page__insiders .header-greeting, .offers-page.offers-page__insiders .header-points { color: #f9dada } @media(min-width:64.0625em) { .offers-page .offers-section { flex: 1 100% } } .offers-page .tab-bar { overflow: visible } .offers-page .tab-bar__inner { padding: 0; overflow: visible } .offers-page .checklist-container { z-index: 1; flex: 0 1 36%; max-width: 420px } @media(max-width:64.0525em) { .offers-page .checklist-item { padding: 0 14px 0 20px } .offers-page .checklist-item__inner { padding: 14px 0 } .offers-page .checklist-item__icon { width: 32px; margin-right: 16px } } .utility-layout { background-color: #f0f0f0; flex-grow: 1 } .utility-layout .tab-bar { background: #fff } .utility-layout>.error-tile { max-width: 920px; margin: 60px auto 100px; padding-left: 20px; padding-right: 20px } @media(min-width:48em) { .utility-layout>.error-tile { padding-left: 40px; padding-right: 40px } } .utility-header { position: relative; color: #2c2a29 } @media(min-width:48em) { .utility-header { min-height: 220px } } .utility-header .container, .utility-header .eflyers-subscription__container, .utility-header .homepage-join__inner, .utility-header .points-days-banners-section, .utility-header .points-days-cta-section, .utility-header .points-days-offers-section, .utility-header .points-days-ts-and-cs__container, .utility-header .weekly-flyer-opt-in__inner { margin: 0 auto; max-width: 920px } .utility-header__inner { position: relative; display: flex; flex-direction: column; justify-content: center } @media(max-width:47.99em) { .utility-header__inner { height: 140px } } @media(min-width:48em) { .utility-header__inner { min-height: 220px } } .utility-header__title { margin-top: 0; margin-bottom: 0; color: #ac342a } .utility-header__subtitle { font-family: Noir, sans-serif; color: #ac342a; margin-top: 10px; margin-bottom: 0 } .account-header__insiders .account-header__subtitle, .account-header__insiders .account-header__title { color: #fff } .account-header__title { margin-top: 0; margin-bottom: 0 } .utility-content { max-width: 920px } .utility-content>.error-tile { margin: 32px 0 } @media(min-width:48em) { .utility-content>.error-tile { margin: 64px 0 } } .utility-content .loading-tile { align-self: center; justify-content: center } .utility-section { margin: 32px 0 } @media(min-width:48em) { .utility-section { margin: 64px 0 } } .utility-section__header { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: baseline; margin-bottom: 16px } .utility-section__title { flex-grow: 1; margin: 0 } .utility-section__right-title { color: #8a8a8a; margin: 0; -webkit-font-smoothing: antialiased } .utility-section__subtitle { flex-basis: 100%; margin: 0 } .container, .eflyers-subscription__container, .homepage-join__inner, .points-days-banners-section, .points-days-cta-section, .points-days-offers-section, .points-days-ts-and-cs__container, .weekly-flyer-opt-in__inner { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px } @media(min-width:48em) { .container, .eflyers-subscription__container, .homepage-join__inner, .points-days-banners-section, .points-days-cta-section, .points-days-offers-section, .points-days-ts-and-cs__container, .weekly-flyer-opt-in__inner { padding-left: 40px; padding-right: 40px } } @media(min-width:48em)and (max-width:63.99em) { .container--padding-none { padding: 0 } } .load-to-card-page { overflow-x: hidden; display: flex; flex-direction: column } .load-to-card-page__container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; position: relative; background-size: auto 560px; background-repeat: no-repeat; background-position: top; background-color: snow; background-image: url(https://dis-prod.assetful.loblaw.ca/content/dam/loblaw-companies-limited/creative-assets/pc-optimum/load-to-card/header/swoop-mobile1.svg) } @media(min-width:48em) { .load-to-card-page__container { padding-left: 40px; padding-right: 40px; background-position: 100% 0; background-image: url(https://dis-prod.assetful.loblaw.ca/content/dam/loblaw-companies-limited/creative-assets/pc-optimum/load-to-card/header/swoop-tablet.svg) } } @media(min-width:64em) { .load-to-card-page__container { background-size: auto 650px; background-position: top; background-image: url(https://dis-prod.assetful.loblaw.ca/content/dam/loblaw-companies-limited/creative-assets/pc-optimum/load-to-card/header/swoop-desktop1.svg) } } .load-to-card-page__main-content { max-width: 1280px; margin: 0 auto } .main-header { position: relative; overflow: hidden; z-index: 1 } .main-header__background { position: absolute; z-index: -1; top: -56px; left: 50%; transform: translateX(-50%); height: 348px; min-width: 100% } @media(min-width:48em) { .main-header__background { top: 0; height: 248px } } @media(min-width:64em) { .main-header__background { height: 304px } } .main-header__insiders { color: #f9dada } .contest-rules-layout .tab-bar__inner:lang(en) { max-width: 640px } .contest-rules-layout .tab-bar__inner:lang(fr) { max-width: 840px } .contest-rules-layout .utility-content { margin: 0 auto } .account-setting--security .account-setting__turn-off-button, .account-setting--security .account-setting__turn-on-button, .button, .household-grid__invite-button, .link--theme-button, .link--theme-button--large-primary, .link--theme-button--large-secondary, .link--theme-button--small-primary, .link--theme-button--small-secondary, .link--theme-button-gray, .link--theme-button-red, .link--theme-button-transparent, .link--theme-button-transparent-white, .link--theme-button-white, .load-shop-pay-header__link, .load-shop-pay-module__link, .marketing-page-header__link, .marketing-page-module__link, .partnership-perk-details__cta, .partnership-perk-redeemed-success__cta, .points-days-cta-section__content .cta-section__link, .points-days__cta { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; cursor: pointer; padding: 0; border: 0; background: transparent; transition: color .1s, background .1s, border .1s, fill .1s } .account-setting--security .account-setting__turn-off-button:active, .account-setting--security .account-setting__turn-on-button:active, .button:active, .household-grid__invite-button:active, .link--theme-button--large-primary:active, .link--theme-button--large-secondary:active, .link--theme-button--small-primary:active, .link--theme-button--small-secondary:active, .link--theme-button-gray:active, .link--theme-button-red:active, .link--theme-button-transparent-white:active, .link--theme-button-transparent:active, .link--theme-button-white:active, .link--theme-button:active, .load-shop-pay-header__link:active, .load-shop-pay-module__link:active, .marketing-page-header__link:active, .marketing-page-module__link:active, .partnership-perk-details__cta:active, .partnership-perk-redeemed-success__cta:active, .points-days-cta-section__content .cta-section__link:active, .points-days__cta:active { outline: 0 } .account-setting--security .account-setting__turn-off-button sup, .account-setting--security .account-setting__turn-on-button sup, .button sup, .household-grid__invite-button sup, .link--theme-button--large-primary sup, .link--theme-button--large-secondary sup, .link--theme-button--small-primary sup, .link--theme-button--small-secondary sup, .link--theme-button-gray sup, .link--theme-button-red sup, .link--theme-button-transparent-white sup, .link--theme-button-transparent sup, .link--theme-button-white sup, .link--theme-button sup, .load-shop-pay-header__link sup, .load-shop-pay-module__link sup, .marketing-page-header__link sup, .marketing-page-module__link sup, .partnership-perk-details__cta sup, .partnership-perk-redeemed-success__cta sup, .points-days-cta-section__content .cta-section__link sup, .points-days__cta sup { line-height: 0 } .button--inline { display: inline-block } .button--block, .household-grid__invite-button { display: block; width: 100% } .button--small { font-size: .8rem; padding: 5px 10px } .account-setting--security .account-setting__turn-off-button, .account-setting--security .account-setting__turn-on-button, .button--theme-base, .household-grid__invite-button, .link--theme-button, .link--theme-button-gray, .link--theme-button-red, .link--theme-button-transparent, .link--theme-button-transparent-white, .link--theme-button-white, .points-days-cta-section__content .cta-section__link, .points-days__cta { font-size: 1rem; line-height: 1.125; min-width: 160px; padding: 16px 20px; text-decoration: none; text-align: center; white-space: nowrap; color: #fff; fill: #fff; -webkit-font-smoothing: antialiased; background: #191919; border: 1px solid #191919; border-radius: 0 } .account-setting--security .account-setting__turn-off-button:focus, .account-setting--security .account-setting__turn-off-button:hover, .account-setting--security .account-setting__turn-on-button:focus, .account-setting--security .account-setting__turn-on-button:hover, .button--theme-base:focus, .button--theme-base:hover, .household-grid__invite-button:focus, .household-grid__invite-button:hover, .link--theme-button-gray:focus, .link--theme-button-gray:hover, .link--theme-button-red:focus, .link--theme-button-red:hover, .link--theme-button-transparent-white:focus, .link--theme-button-transparent-white:hover, .link--theme-button-transparent:focus, .link--theme-button-transparent:hover, .link--theme-button-white:focus, .link--theme-button-white:hover, .link--theme-button:focus, .link--theme-button:hover, .points-days-cta-section__content .cta-section__link:focus, .points-days-cta-section__content .cta-section__link:hover, .points-days__cta:focus, .points-days__cta:hover { color: #fff; fill: #fff; border-color: #8a8a8a; background: #8a8a8a } .account-setting--security .account-setting__turn-off-button:active, .account-setting--security .account-setting__turn-on-button:active, .button--theme-base:active, .household-grid__invite-button:active, .link--theme-button-gray:active, .link--theme-button-red:active, .link--theme-button-transparent-white:active, .link--theme-button-transparent:active, .link--theme-button-white:active, .link--theme-button:active, .points-days-cta-section__content .cta-section__link:active, .points-days__cta:active { color: #fff; fill: #fff; border-color: #585858; background: #585858 } .account-setting--security .account-setting__turn-off-button:disabled, .account-setting--security .account-setting__turn-on-button:disabled, .button--theme-base:disabled, .button--theme-base:disabled:active, .button--theme-base:disabled:hover, .household-grid__invite-button:disabled, .link--theme-button-gray:disabled, .link--theme-button-red:disabled, .link--theme-button-transparent-white:disabled, .link--theme-button-transparent:disabled, .link--theme-button-white:disabled, .link--theme-button:disabled, .points-days-cta-section__content .cta-section__link:disabled, .points-days__cta:disabled { cursor: not-allowed; color: #bcbcbc; fill: #bcbcbc; background: #8a8a8a; border-color: #8a8a8a } .button--theme-primary, .partnership-perk-details__cta, .partnership-perk-redeemed-success__cta { font-weight: 600; font-size: 16px; min-width: 143px; padding: 12px 50px; border-radius: 32px; background: #157a77; border-color: #157a77; color: #fff; fill: #fff } .button--theme-primary:focus, .button--theme-primary:hover, .partnership-perk-details__cta:focus, .partnership-perk-details__cta:hover, .partnership-perk-redeemed-success__cta:focus, .partnership-perk-redeemed-success__cta:hover { border-color: #615395; background: #615395 } .button--theme-primary:active, .partnership-perk-details__cta:active, .partnership-perk-redeemed-success__cta:active { border-color: #403840; background: #403840 } .button--theme-primary:disabled, .partnership-perk-details__cta:disabled, .partnership-perk-redeemed-success__cta:disabled { cursor: not-allowed; background: #9e93a6; border-color: #9e93a6; color: #fff } .button--theme-primary--small { padding: 9px 24px; min-width: 90px } .button--theme-helios-primary { font-weight: 600; font-size: 16px; min-width: 143px; padding: 12px 50px; border-radius: 32px; background: #157a77; border-color: #157a77; color: #fff; fill: #fff } .button--theme-helios-primary:hover { border-color: #006665; background: #006665 } .button--theme-helios-primary:focus { border-color: #157a77; background: #157a77 } .button--theme-helios-primary:active { border-color: #004e4c; background: #004e4c } .button--theme-helios-primary:disabled { cursor: not-allowed } .button--theme-helios-primary--small { padding: 9px 24px; min-width: 90px } .button--theme-helios-secondary { font-weight: 600; font-size: 16px; min-width: 143px; padding: 12px 50px; border-radius: 32px; background: #fff; border-color: #157a77; color: #157a77; fill: #157a77 } .button--theme-helios-secondary:hover { border-color: #006665; color: #006665; fill: #006665 } .button--theme-helios-secondary:focus { border-color: #157a77; color: #157a77; fill: #157a77 } .button--theme-helios-secondary:active { border-color: #004e4c; color: #004e4c; fill: #004e4c } .button--theme-helios-secondary:disabled { cursor: not-allowed } .button--theme-helios-secondary--small { padding: 9px 24px; min-width: 90px } .button--theme-helios-flat { font-weight: 600; font-size: 16px; min-width: 143px; padding: 12px 50px; border-radius: 32px; background: #f3f3f3; border-color: #f3f3f3; color: #191919; fill: #191919 } .button--theme-helios-flat:hover { border-color: #e1e1e1; background: #e1e1e1; color: #191919; fill: #191919 } .button--theme-helios-flat:focus { border-color: #f3f3f3; background: #f3f3f3; color: #191919; fill: #191919 } .button--theme-helios-flat:active { border-color: #c9c9c9; background: #c9c9c9; color: #191919; fill: #191919 } .button--theme-helios-flat:disabled { cursor: not-allowed } .button--theme-helios-flat--small { padding: 9px 24px; min-width: 90px } .button--theme-helios-tertiary { background: none; border: 0; padding: 0; text-decoration: underline; color: #157a77; fill: #157a77 } .button--theme-helios-tertiary:hover { color: #006665; background: none; border: 0 } .button--theme-helios-tertiary:active { color: #004e4c; background: none; border: 0 } .button--theme-secondary { font-weight: 600; font-size: 16px; min-width: 143px; padding: 12px 50px; border-radius: 32px; background: #fff; border-color: #157a77; color: #157a77; fill: #157a77 } .button--theme-secondary:focus, .button--theme-secondary:hover { border-color: #615395; color: #615395; fill: #615395; background: #fff } .button--theme-secondary:active { border-color: #403840; color: #403840; fill: #403840; background: #fff } .button--theme-secondary:disabled { cursor: not-allowed; border-color: #9e93a6; color: #9e93a6; fill: #9e93a6; background: #fff } .button--theme-secondary--small { padding: 9px 24px; min-width: 90px } .button--theme-tertiary { font-weight: 600; font-size: 16px; padding: 9px 24px; background: none; border: none; color: #157a77; fill: #157a77; -webkit-text-decoration: underline #157a77; text-decoration: underline #157a77 } .button--theme-tertiary:focus, .button--theme-tertiary:hover { color: #615395; fill: #615395; -webkit-text-decoration: underline #615395; text-decoration: underline #615395; background: none } .button--theme-tertiary:active { color: #403840; fill: #403840; -webkit-text-decoration: underline #403840; text-decoration: underline #403840; background: none } .button--theme-tertiary:disabled { cursor: not-allowed; color: #9e93a6; fill: #9e93a6; -webkit-text-decoration: underline #9e93a6; text-decoration: underline #9e93a6; background: none } .button--theme-transparent, .link--theme-button-transparent, .points-days-cta-section__content .cta-section__link, .points-days__cta { color: #191919; fill: #191919; background: transparent; border-color: #8a8a8a } .button--theme-transparent:focus, .button--theme-transparent:hover, .link--theme-button-transparent:focus, .link--theme-button-transparent:hover, .points-days-cta-section__content .cta-section__link:focus, .points-days-cta-section__content .cta-section__link:hover, .points-days__cta:focus, .points-days__cta:hover { border-color: #191919; background: #191919 } .button--theme-transparent:active, .link--theme-button-transparent:active, .points-days-cta-section__content .cta-section__link:active, .points-days__cta:active { border-color: #585858; background: #585858 } .button--theme-white-gray { color: #191919; fill: #191919; background: #fff; border-color: #8a8a8a } .button--theme-white-gray:focus, .button--theme-white-gray:hover { border-color: #191919; background: #191919 } .button--theme-white-gray:active { border-color: #585858; background: #585858 } .button--theme-white, .household-grid__invite-button, .link--theme-button-white { color: #ee3124; fill: #ee3124; background: #fff; border-color: #fff } .button--theme-white:focus, .button--theme-white:hover, .household-grid__invite-button:focus, .household-grid__invite-button:hover, .link--theme-button-white:focus, .link--theme-button-white:hover { border-color: #8a8a8a; background: #8a8a8a } .button--theme-white:active, .household-grid__invite-button:active, .link--theme-button-white:active { border-color: #585858; background: #585858 } .button--theme-transparent-white, .link--theme-button-transparent-white { background: transparent; border-color: #fff } .button--theme-transparent-white:focus, .button--theme-transparent-white:hover, .link--theme-button-transparent-white:focus, .link--theme-button-transparent-white:hover { color: #191919; fill: #191919; border-color: #fff; background: #fff } .button--theme-transparent-white:active, .link--theme-button-transparent-white:active { color: #191919; fill: #191919; border-color: #ddd; background: #ddd } .account-setting--security .account-setting__turn-on-button, .button--theme-red, .link--theme-button-red { background: #ee3124; border-color: #ee3124 } .account-setting--security .account-setting__turn-on-button:focus, .account-setting--security .account-setting__turn-on-button:hover, .button--theme-red:focus, .button--theme-red:hover, .link--theme-button-red:focus, .link--theme-button-red:hover { border-color: #7f141e; background: #7f141e } .account-setting--security .account-setting__turn-on-button:active, .button--theme-red:active, .link--theme-button-red:active { border-color: #530d14; background: #530d14 } .button--theme-gray, .link--theme-button-gray { background: #f0f0f0; border-color: #f0f0f0; color: #191919; fill: #191919 } .button--theme-gray:focus, .button--theme-gray:hover, .link--theme-button-gray:focus, .link--theme-button-gray:hover { color: #191919; fill: #191919; border-color: #ddd; background: #ddd } .button--theme-gray:active, .link--theme-button-gray:active { color: #191919; fill: #191919; border-color: #bcbcbc; background: #bcbcbc } .button--theme-base-small, .link--theme-button--small-primary, .link--theme-button--small-secondary { font-size: 1rem; line-height: 1.125rem; min-width: 90px; padding: 9px 24px; text-decoration: none; text-align: center; white-space: nowrap; color: #fff; fill: #fff; -webkit-font-smoothing: antialiased; background: #191919; border: 1px solid #191919; border-radius: 32px } .button--theme-base-small:focus, .button--theme-base-small:hover, .link--theme-button--small-primary:focus, .link--theme-button--small-primary:hover, .link--theme-button--small-secondary:focus, .link--theme-button--small-secondary:hover { color: #fff; fill: #fff; border-color: #8a8a8a; background: #8a8a8a } .button--theme-base-small:active, .link--theme-button--small-primary:active, .link--theme-button--small-secondary:active { color: #fff; fill: #fff; border-color: #585858; background: #585858 } .button--theme-base-small:disabled, .button--theme-base-small:disabled:active, .button--theme-base-small:disabled:hover, .link--theme-button--small-primary:disabled, .link--theme-button--small-secondary:disabled { cursor: not-allowed; color: #bcbcbc; fill: #bcbcbc; background: #8a8a8a; border-color: #8a8a8a } .button--theme-base-large, .link--theme-button--large-primary, .link--theme-button--large-secondary, .load-shop-pay-header__link, .load-shop-pay-module__link, .marketing-page-header__link, .marketing-page-module__link { font-size: 1rem; line-height: 1.125rem; min-width: 90px; padding: 12px 50px; text-decoration: none; text-align: center; white-space: nowrap; color: #fff; fill: #fff; -webkit-font-smoothing: antialiased; background: #191919; border: 1px solid #191919; border-radius: 32px } .button--theme-base-large:focus, .button--theme-base-large:hover, .link--theme-button--large-primary:focus, .link--theme-button--large-primary:hover, .link--theme-button--large-secondary:focus, .link--theme-button--large-secondary:hover, .load-shop-pay-header__link:focus, .load-shop-pay-header__link:hover, .load-shop-pay-module__link:focus, .load-shop-pay-module__link:hover, .marketing-page-header__link:focus, .marketing-page-header__link:hover, .marketing-page-module__link:focus, .marketing-page-module__link:hover { color: #fff; fill: #fff; border-color: #8a8a8a; background: #8a8a8a } .button--theme-base-large:active, .link--theme-button--large-primary:active, .link--theme-button--large-secondary:active, .load-shop-pay-header__link:active, .load-shop-pay-module__link:active, .marketing-page-header__link:active, .marketing-page-module__link:active { color: #fff; fill: #fff; border-color: #585858; background: #585858 } .button--theme-base-large:disabled, .button--theme-base-large:disabled:active, .button--theme-base-large:disabled:hover, .link--theme-button--large-primary:disabled, .link--theme-button--large-secondary:disabled, .load-shop-pay-header__link:disabled, .load-shop-pay-module__link:disabled, .marketing-page-header__link:disabled, .marketing-page-module__link:disabled { cursor: not-allowed; color: #bcbcbc; fill: #bcbcbc; background: #8a8a8a; border-color: #8a8a8a } .button--theme-ds-primary, .link--theme-button--large-primary, .link--theme-button--small-primary, .load-shop-pay-header__link, .load-shop-pay-module__link, .marketing-page-header__link, .marketing-page-module__link { background: #157a77; border-color: #157a77; font-weight: 600 } .button--theme-ds-primary:focus, .button--theme-ds-primary:hover, .link--theme-button--large-primary:focus, .link--theme-button--large-primary:hover, .link--theme-button--small-primary:focus, .link--theme-button--small-primary:hover, .load-shop-pay-header__link:focus, .load-shop-pay-header__link:hover, .load-shop-pay-module__link:focus, .load-shop-pay-module__link:hover, .marketing-page-header__link:focus, .marketing-page-header__link:hover, .marketing-page-module__link:focus, .marketing-page-module__link:hover { border-color: #615395; background: #615395 } .button--theme-ds-primary:active, .link--theme-button--large-primary:active, .link--theme-button--small-primary:active, .load-shop-pay-header__link:active, .load-shop-pay-module__link:active, .marketing-page-header__link:active, .marketing-page-module__link:active { border-color: #403840; background: #403840 } .button--theme-ds-primary:disabled, .link--theme-button--large-primary:disabled, .link--theme-button--small-primary:disabled, .load-shop-pay-header__link:disabled, .load-shop-pay-module__link:disabled, .marketing-page-header__link:disabled, .marketing-page-module__link:disabled { cursor: not-allowed; border-color: #9e93a6; background: #9e93a6 } .button--theme-ds-secondary, .link--theme-button--large-secondary, .link--theme-button--small-secondary { background: #fff; border-color: #157a77; color: #157a77; font-weight: 600 } .button--theme-ds-secondary:focus, .button--theme-ds-secondary:hover, .link--theme-button--large-secondary:focus, .link--theme-button--large-secondary:hover, .link--theme-button--small-secondary:focus, .link--theme-button--small-secondary:hover { border-color: #615395; background: #615395 } .button--theme-ds-secondary:active, .link--theme-button--large-secondary:active, .link--theme-button--small-secondary:active { border-color: #403840; background: #403840 } .button--theme-ds-secondary:disabled, .link--theme-button--large-secondary:disabled, .link--theme-button--small-secondary:disabled { cursor: not-allowed; border-color: #9e93a6; background: #9e93a6 } .button--theme-link { text-decoration: underline; color: #da291c; fill: #da291c } .button--theme-link:hover { color: #982822; fill: #982822 } .button--theme-link:disabled, .button--theme-link:disabled:active, .button--theme-link:disabled:hover { cursor: not-allowed; color: #bcbcbc; fill: #bcbcbc } .button--theme-link-gray { text-decoration: underline; color: #585858; fill: #585858 } .button--theme-link-gray:hover { color: #191919; fill: #191919 } .button--theme-link-primary { text-decoration: underline; color: #157a77; fill: #157a77 } .button--theme-link-primary:hover { color: #615395; fill: #615395 } .button--theme-visible-only-onfocus-link-style { text-decoration: underline; color: #da291c; fill: #da291c } .button--theme-visible-only-onfocus-link-style:hover { color: #982822; fill: #982822 } .button--theme-visible-only-onfocus-link-style:disabled, .button--theme-visible-only-onfocus-link-style:disabled:active, .button--theme-visible-only-onfocus-link-style:disabled:hover { cursor: not-allowed; color: #bcbcbc; fill: #bcbcbc } .button-loading { position: relative } .button-loading__animation { position: absolute; animation: display 1ms .5s forwards; opacity: 0; top: 0; right: 0; left: 0; bottom: 0; background-color: #8a8a8a } .button-loading__animation div { position: relative; display: inline-block; width: 7px; height: 7px; border-radius: 7px; background-color: #fff; margin-right: 5px; animation: dot-animation 1s ease-in-out .5s infinite } .button-loading__animation div:nth-child(2) { animation-delay: .65s } .button-loading__animation div:nth-child(3) { animation-delay: .75s; margin-right: 0 } @keyframes dot-animation { 0% { top: 0 } 20% { top: -8px } 40% { top: 0 } to { top: 0 } } @keyframes display { 0% { opacity: 0 } to { opacity: 1 } } .input-date-group { display: flex; flex-direction: column; justify-content: space-between } @media(min-width:34.375em) { .input-date-group { flex-direction: row } } .input-date-group__date-input-group { display: flex; flex-flow: column; margin-top: 20px; margin-bottom: 20px } @media(min-width:48em) { .input-date-group__date-input-group { margin-right: 10px } } .input-date-group__date-input-group.text-group { margin-top: 0 } .input-date-group__date-input-group .dropdown-group__wrapper { order: 2 } .input-date-group__date-input-group:last-of-type { margin-right: 0 } .input-date-group__date-input-group.dropdown-group, .input-date-group__date-input-group.dropdown-group:last-of-type { margin-top: 0 } @media(min-width:34.375em) { .input-date-group__date-input-group.dropdown-group { margin-top: 0 } } .input-date-group--error { order: 1; margin-top: 3px } .checkbox-group, .refine-search__services-radio-group-single { margin: 20px 0; display: flex; align-items: baseline } .checkbox-group__text, .refine-search__services-radio-text { display: block; margin-left: 16px } .checkbox-group__label { display: block; text-align: left } .checkbox-group__icon, .refine-search__services-radio-checkbox-icon { display: inline-block; overflow: hidden; vertical-align: text-bottom; background: #bcbcbc; border: 1px solid transparent; width: 18px; height: 18px } .checkbox-group__icon .sprite, .refine-search__services-radio-checkbox-icon .sprite { position: relative; width: 20px; height: 20px; left: -2px; top: -2px; fill: #191919 } .checkbox-group__input:active+.checkbox-group__icon, .checkbox-group__input:active+.refine-search__services-radio-checkbox-icon, .checkbox-group__input:focus+.checkbox-group__icon, .checkbox-group__input:focus+.refine-search__services-radio-checkbox-icon, .refine-search__services-radio-input:active+.checkbox-group__icon, .refine-search__services-radio-input:active+.refine-search__services-radio-checkbox-icon, .refine-search__services-radio-input:focus+.checkbox-group__icon, .refine-search__services-radio-input:focus+.refine-search__services-radio-checkbox-icon { border-color: #8a8a8a } .checkbox-group__error { display: block; margin-top: 6px; color: #bb2620 } .ds-checkbox .checkmark { height: 18px; width: 18px; border: 2px solid #655c6c; border-radius: 4px; background-color: #fff; top: 2px } .ds-checkbox .checkmark:before { width: 40px; height: 40px; background: #615395; opacity: .08; border-radius: 50%; position: absolute; left: -13px; top: -13px } .ds-checkbox input[type=checkbox]:active~.checkbox-input--label .checkmark, .ds-checkbox input[type=checkbox]:focus~.checkbox-input--label .checkmark { border-color: #615395 } .ds-checkbox input[type=checkbox]:active~.checkbox-input--label .checkmark:before, .ds-checkbox input[type=checkbox]:focus~.checkbox-input--label .checkmark:before { content: "" } .ds-checkbox.checkbox-input--checked .checkmark { height: 18px; width: 18px; border: 1px solid #157a77; border-radius: 4px; background-color: #157a77; top: 2px } .ds-checkbox.checkbox-input--checked .checkmark:after { display: block; border: solid #fff; border-width: 0 2px 2px 0; left: 5px; bottom: 3px; width: 6px; height: 12px } .ds-checkbox.checkbox-input--checked .checkmark:before { left: -12px; top: -12px } .ds-checkbox.checkbox-input--checked input[type=checkbox]:active~.checkbox-input--label .checkmark, .ds-checkbox.checkbox-input--checked input[type=checkbox]:focus~.checkbox-input--label .checkmark { background: #615395 } .ds-checkbox input[type=checkbox]:disabled~.checkbox-input--label .checkmark { border-color: #9e93a6 } .checkbox-group-new-ds { display: flex; align-items: center } .checkbox-group-new-ds__icon { display: inline-block; overflow: hidden; vertical-align: text-bottom; background: #fff; border: 2px solid #655c6c; border-radius: 2px; width: 18px; height: 18px; cursor: pointer } .checkbox-group-new-ds__icon .sprite { position: relative; width: 18px; height: 18px; left: -2px; top: -2px; fill: #fff } .checkbox-group-new-ds__icon--checked { border: 2px solid #157a77; background-color: #157a77 } .checkbox-group-new-ds__icon--error { border-color: #c42d0c } .checkbox-group-new-ds__label { display: flex } .checkbox-group-new-ds__label p { margin: 0 } .checkbox-group-new-ds__background { display: flex; min-width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; background-color: transparent; border: none } .checkbox-group-new-ds__background:active, .checkbox-group-new-ds__background:focus, .checkbox-group-new-ds__background:hover { background-color: rgba(97, 83, 149, .0784313725); outline: none } .checkbox-group-new-ds__background:active .ds-checkbox-group__icon, .checkbox-group-new-ds__background:focus .ds-checkbox-group__icon, .checkbox-group-new-ds__background:hover .ds-checkbox-group__icon { border-color: #615395; background-color: rgba(97, 83, 149, .0784313725) } .checkbox-group-new-ds__background:active .ds-checkbox-group__icon--checked, .checkbox-group-new-ds__background:focus .ds-checkbox-group__icon--checked, .checkbox-group-new-ds__background:hover .ds-checkbox-group__icon--checked { border-color: #615395; background-color: #615395 } .checkbox-group-new-ds__error { margin-top: 10px } .dropdown-group { margin-top: 20px; margin-bottom: 20px } .dropdown-group__container { position: relative } .dropdown-group__dropdown { -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-user-select: none; -moz-user-select: none; background-color: #f0f0f0; border: 1px solid #f0f0f0; border-radius: 0; font-size: 1.125rem; width: 100%; padding: 14px 48px 13px 22px; position: relative; text-overflow: ellipsis; overflow: hidden; white-space: pre-wrap } @media(min-width:48em) { .dropdown-group__dropdown { margin-right: 68px } } .dropdown-group__dropdown-error { border: 1px solid #bb2620 } .dropdown-group__dropdown:invalid { color: #8a8a8a } .dropdown-group__dropdown::-ms-expand { display: none } .dropdown-group__item { width: 760px; text-align: left; -moz-text-align-last: center; text-align-last: center } .dropdown-group__label { margin-top: 3px; margin-bottom: 1px } .dropdown-group__icon--caret { fill: #ee3124; transform: rotate(90deg) } .dropdown-group__error-text { color: #bb2620; margin-top: 3px } .dropdown-group--new-design-system.dropdown-group { text-align: left } .dropdown-group--new-design-system .dropdown-group__container { margin-top: 8px } .dropdown-group--new-design-system .dropdown-group__dropdown { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.25rem; color: #403840; outline: none; background-color: #fff; border-radius: 4px; border: 1px solid #2d2e39; padding: 16px 48px 16px 22px } @media(min-width:48em) { .dropdown-group--new-design-system .dropdown-group__dropdown { font-size: 1rem; line-height: 1.375rem } } .dropdown-group--new-design-system .dropdown-group__dropdown-error, .dropdown-group--new-design-system .dropdown-group__dropdown-error:focus { border: 1px solid #c42d0c; box-shadow: 0 0 0 1px #c42d0c } .dropdown-group--new-design-system .dropdown-group__dropdown-success, .dropdown-group--new-design-system .dropdown-group__dropdown-success:focus { border: 1px solid #098560; box-shadow: 0 0 0 1px #098560 } .dropdown-group--new-design-system .dropdown-group__item { -moz-text-align-last: left; text-align-last: left } .dropdown-group--new-design-system .dropdown-group__error-text { margin-top: 12px; font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif } .dropdown-group--new-design-system .dropdown-group__icon--caret { fill: #655c6c } .dropdown-group--new-design-system .dropdown-group__icon--caret-red { transform: rotate(90deg); fill: #c42d0c } .dropdown-group--new-design-system .dropdown-group__icon--success { width: 18px; height: auto } .radio-group__option { margin-bottom: 20px } .radio-group__label { display: flex; align-items: center } .radio-group__label:before { content: ""; display: block; width: 24px; height: 24px; margin-right: 16px; background: #f0f0f0; border: 1px solid transparent; border-radius: 50%; flex-shrink: 0 } .radio-group__input:checked+.radio-group__label:before { background: #fff; border: 8px solid #ee3124 } .text-group { margin-top: 20px; margin-bottom: 20px } .text-group__input-container { position: relative } .text-group__input-container--with-addon .flyers-header__input, .text-group__input-container--with-addon .homepage-stores__input, .text-group__input-container--with-addon .search-box__input, .text-group__input-container--with-addon .text-group__input { padding-left: 100px } .flyers-header__input, .homepage-stores__input, .search-box__input, .text-group__input { font-size: 1.125rem; line-height: 1.4444444444; padding: 14px 22px; background: #f0f0f0; border: 1px solid transparent; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none } .flyers-header__input::-moz-placeholder, .homepage-stores__input::-moz-placeholder, .search-box__input::-moz-placeholder, .text-group__input::-moz-placeholder { color: #8a8a8a; -webkit-font-smoothing: antialiased } .flyers-header__input::placeholder, .homepage-stores__input::placeholder, .search-box__input::placeholder, .text-group__input::placeholder { color: #8a8a8a; -webkit-font-smoothing: antialiased } .flyers-header__input:focus, .homepage-stores__input:focus, .search-box__input:focus, .text-group__input:focus { border-color: #8a8a8a } .text-group__input--error, .text-group__input--error:focus { border-color: #bb2620 } .text-group__input--error, .text-group__input--password { padding-right: 56px } .text-group__input--error::-ms-reveal, .text-group__input--password::-ms-reveal { display: none } .text-group__input-addon { font-size: 1.125rem; line-height: 1.4444444444; padding: 16px 0; left: 22px; white-space: nowrap } .text-group__input-addon, .text-group__input-icon { position: absolute; top: 0; bottom: 0; margin: auto; pointer-events: none } .text-group__input-icon { right: 16px; width: 24px; height: 24px; z-index: 1 } .text-group__input-icon--privacy { fill: #585858 } .text-group__input-icon--success { fill: #007a7c } .text-group__input-icon--spinner circle:last-child { fill-opacity: 0; stroke: #bcbcbc; stroke-width: 6; stroke-dasharray: 42 14; stroke-dashoffset: -56; animation: rotate 1.5s linear infinite } .text-group__input-icon--spinner circle:first-child { fill-opacity: 0; stroke: #ddd; stroke-width: 6 } @keyframes rotate { 0% { stroke-dasharray: 49 7; stroke-dashoffset: -56 } 25% { stroke-dasharray: 21 35; stroke-dashoffset: -42 } to { stroke-dasharray: 49 7; stroke-dashoffset: 0 } } .text-group__label { display: inline-block } .text-group__label-optional-text { text-transform: none; font-style: italic; color: #8a8a8a; letter-spacing: 0; -webkit-font-smoothing: antialiased } .invitation-form__error-message, .text-group__error, .toggleable-container .account-setting__error { margin-top: 6px; color: #bb2620 } .text-group__trailing-text { color: #8a8a8a; position: absolute; right: 12px; top: 50%; transform: translateY(-50%) } .text-group__subtext { margin-top: 6px } .text-group__subtext--dark { color: #191919 } .text-group--block, .text-group--block .flyers-header__input, .text-group--block .homepage-stores__input, .text-group--block .search-box__input, .text-group--block .text-group__input { display: block; width: 100% } .text-group--new-design-system .flyers-header__input, .text-group--new-design-system .homepage-stores__input, .text-group--new-design-system .search-box__input, .text-group--new-design-system .text-group__input { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.25rem; color: #403840; padding: 16px; background-color: #fff; border-radius: 4px; border: 1px solid #2d2e39; -webkit-text-fill-color: #403840; margin-bottom: 11px } @media(min-width:48em) { .text-group--new-design-system .flyers-header__input, .text-group--new-design-system .homepage-stores__input, .text-group--new-design-system .search-box__input, .text-group--new-design-system .text-group__input { font-size: 1rem; line-height: 1.375rem } } .text-group--new-design-system .flyers-header__input:focus, .text-group--new-design-system .homepage-stores__input:focus, .text-group--new-design-system .search-box__input:focus, .text-group--new-design-system .text-group__input:focus { outline: 0; box-shadow: 0 0 0 1px #615395; border: 1px solid #615395 } @media(min-width:48em) { .text-group--new-design-system .flyers-header__input, .text-group--new-design-system .homepage-stores__input, .text-group--new-design-system .search-box__input, .text-group--new-design-system .text-group__input { margin-bottom: 12px } } .text-group--new-design-system .text-group__input--error, .text-group--new-design-system .text-group__input--error:focus { border: 1px solid #c42d0c; box-shadow: 0 0 0 1px #c42d0c } .text-group--new-design-system .text-group__input--success, .text-group--new-design-system .text-group__input--success:focus { border: 1px solid #098560; box-shadow: 0 0 0 1px #098560 } .text-group--new-design-system .text-group__input-icon--success { width: 18px; height: 18px; fill: #098560 } .text-group--new-design-system .text-group__label { margin-bottom: 12px } .text-group--new-design-system .invitation-form__error-message, .text-group--new-design-system .text-group__error, .text-group--new-design-system .toggleable-container .account-setting__error, .toggleable-container .text-group--new-design-system .account-setting__error { display: flex; color: #bb2620 } .text-group--new-design-system .invitation-form__error-message .error-icon-input, .text-group--new-design-system .text-group__error .error-icon-input, .text-group--new-design-system .toggleable-container .account-setting__error .error-icon-input, .toggleable-container .text-group--new-design-system .account-setting__error .error-icon-input { margin-right: 7px } .text-group--new-design-system .text-group__input-container--with-addon .flyers-header__input, .text-group--new-design-system .text-group__input-container--with-addon .homepage-stores__input, .text-group--new-design-system .text-group__input-container--with-addon .search-box__input, .text-group--new-design-system .text-group__input-container--with-addon .text-group__input { padding-left: 81px } @media(min-width:48em) { .text-group--new-design-system .text-group__input-container--with-addon .flyers-header__input, .text-group--new-design-system .text-group__input-container--with-addon .homepage-stores__input, .text-group--new-design-system .text-group__input-container--with-addon .search-box__input, .text-group--new-design-system .text-group__input-container--with-addon .text-group__input { padding-left: 86px } } .text-group--new-design-system .text-group__input-container--with-addon .text-group__input-addon { line-height: inherit; padding: 16px 0 } .text-group__textarea { line-height: 1.222222222; resize: vertical } .input-group { display: block; margin: 20px 0 } .form-error__error-text { margin-top: 6px; color: #bb2620; text-align: center } .input-error-new-design-system { display: flex; color: #bb2620 } .input-error-new-design-system .error-icon-input { width: 18px; margin-right: 6px; flex-shrink: 0 } .input-error-new-design-system .error-text-input { margin-top: 3px } .date-picker { display: block; margin: 16px 0 } @media(min-width:64em) { .date-picker { margin: 18px 0 } } .date-picker__container { position: relative } .date-picker__calendar-icon { pointer-events: none; position: absolute; top: 0; bottom: 0; right: 16px; width: 24px; height: 24px; margin: auto; z-index: 1 } .date-picker__input { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #f0f0f0; border: 1px solid #f0f0f0; border-radius: 0; font-size: 1.125rem; width: 100%; padding: 14px 48px 13px 22px; position: relative; color: #000; height: 56px } @media(min-width:64em) { .date-picker__input { height: 100% } } .date-picker__input--error { border: 1px solid #bb2620 } .date-picker__input:invalid { color: #8a8a8a } .date-picker__input:disabled { color: #585858 } .date-picker__input:disabled::-webkit-datetime-edit-year-field { color: #585858 } .date-picker__input:valid::-webkit-datetime-edit-year-field { color: #000 } .date-picker__input::-webkit-calendar-picker-indicator, .date-picker__input::-webkit-inner-spin-button { cursor: pointer; position: absolute; right: 12px; top: 16px; width: 24px; height: 24px; z-index: 1; opacity: 0 } .account-device-edit { display: flex; align-items: baseline; width: 100% } .account-device-edit__form { width: 100% } .account-device-edit__top-section { padding: 20px; display: flex } @media(min-width:48em) { .account-device-edit__top-section { padding: 20px 25px 20px 40px } } @media(min-width:64em) { .account-device-edit__top-section .sprite { margin-right: 48px } } @media(min-width:48em) { .account-device-edit__top-section .account-device__nickname { flex-basis: 250px; margin-left: 48px } } @media(min-width:64em) { .account-device-edit__top-section .account-device__nickname { margin-left: 0 } } .account-device-edit__top-section .account-device__last-four { margin-right: 0; color: #585858; align-self: center } .account-device-edit__mid-section { padding: 0 20px 24px; justify-content: flex-start } @media(min-width:48em) { .account-device-edit__mid-section { display: flex; flex-flow: row nowrap; justify-content: space-between; padding: 25px 0 20px 140px } } @media(min-width:48em) { .account-device-edit__nickname { display: flex; flex-flow: row wrap; align-items: flex-start } } .account-device-edit__card-state { max-width: 350px; margin: 15px 0 0 } @media(min-width:48em) { .account-device-edit__card-state:nth-of-type(2) { margin-left: 20px } } @media(min-width:48em) { .account-device-edit__card-state { margin-top: 0 } } @media(min-width:64em) { .account-device-edit__card-state { max-width: 280px } } .account-device-edit__card-state .checkbox-group, .account-device-edit__card-state .refine-search__services-radio-group-single { margin: 0 } .account-device-edit__card-state--note { margin-top: 10px; display: block } .account-device-edit__unlink { cursor: pointer; padding: 0 20px 24px } @media(min-width:48em) { .account-device-edit__unlink { padding: 0 0 20px 140px } } .account-device-edit__actions { text-align: center; padding: 20px 20px 12px; border-top: 1px solid #ddd } @media(min-width:48em) { .account-device-edit__actions { display: flex; flex-flow: row nowrap; align-items: baseline; padding: 26px 48px 30px 140px; margin-right: -68px } } @media(min-width:48em) { .account-device-edit__close-button, .account-device-edit__submit-button { display: inline-block; width: auto } } .account-device-edit__close-button { margin-top: 6px; padding: 10px 0 } @media(min-width:48em) { .account-device-edit__close-button { padding: 0; margin-top: 0; margin-left: 30px } } @media(min-width:48em) { .account-device-edit__permissions { flex-basis: 54% } } .account-device-edit__input-field { margin: 0 } @media(min-width:48em) { .account-device-edit__input-field { flex-basis: 260px; margin: 0 30px 0 0 } } .account-device-edit__assign-device { margin-top: 14px } @media(min-width:48em) { .account-device-edit__assign-device { flex-basis: 100%; margin-top: 20px; display: flex; justify-content: space-between } } .account-device-edit__assign-device button { text-align: left } .account-device-edit .checkbox-group__icon, .account-device-edit .refine-search__services-radio-checkbox-icon { background: #fff; border: 1px solid #655c6c; border-radius: 2px } .account-device-edit .checkbox-group__icon:active, .account-device-edit .checkbox-group__icon:focus, .account-device-edit .refine-search__services-radio-checkbox-icon:active, .account-device-edit .refine-search__services-radio-checkbox-icon:focus { border-color: #615395; background-color: rgba(97, 83, 149, .0784313725) } .account-device-edit .checkbox-group__input:checked~.checkbox-group__icon, .account-device-edit .checkbox-group__input:checked~.refine-search__services-radio-checkbox-icon, .account-device-edit .refine-search__services-radio-input:checked~.checkbox-group__icon, .account-device-edit .refine-search__services-radio-input:checked~.refine-search__services-radio-checkbox-icon { border-color: #157a77; background-color: #157a77 } .account-device-edit .checkbox-group__input:checked~.checkbox-group__icon .sprite, .account-device-edit .checkbox-group__input:checked~.refine-search__services-radio-checkbox-icon .sprite, .account-device-edit .refine-search__services-radio-input:checked~.checkbox-group__icon .sprite, .account-device-edit .refine-search__services-radio-input:checked~.refine-search__services-radio-checkbox-icon .sprite { fill: #fff } .account-device-edit__phone-number { white-space: nowrap } .communication-opt-in-form { text-align: left } .communication-opt-in-form .checkbox-group__text, .communication-opt-in-form .refine-search__services-radio-text { display: flex; margin-top: 0; margin-bottom: 0 } .communication-opt-in-form__email-checkbox { margin: 0 } .communication-opt-in-form__consent { font-size: .875rem; padding: 60px 0 0 } @media(min-width:34.375em) { .communication-opt-in-form__consent { padding: 80px 60px 0 } } .communication-opt-in-form__consent-text-1>p { margin-top: 0 } .communication-opt-in-form__consent:before { content: ""; display: block; position: absolute; height: 1px; width: 100%; left: 0; margin-top: -30px; background: #ddd } @media(min-width:48em) { .communication-opt-in-form__consent:before { margin-top: -40px } } .communication-opt-in-form__affiliates { color: #585858; line-height: 2; display: flex; flex-flow: row wrap; padding-left: 15px } .communication-opt-in-form__affiliates-item { flex-basis: 100% } @media(min-width:48em) { .communication-opt-in-form__affiliates-item { flex-basis: 50% } } .communication-opt-in-form__flow-form-submit { text-align: center } @media(max-width:47.99em) { .communication-opt-in-form__flow-form-submit { margin-top: 40px } } .settings-form--language-preferences .input-group { margin-left: auto; margin-right: auto } .settings-form .input-group, .settings-form__title { margin-top: 0 } .settings-form__row-wrapper { display: flex; flex-direction: row } .settings-form__description { margin-top: -10px; margin-bottom: 10px; color: #8a8a8a; font-size: 14px } .settings-form__checkbox-container { margin-top: 10px; margin-bottom: 10px } .settings-form__checkbox-input { margin-right: 10px } .settings-form__input-separator { line-height: 4.6rem } .settings-form__email { margin-bottom: 0; text-align: left } .settings-form__email--cancel { margin-top: 20px; display: block } .pco-login-form__card-image { display: block; width: 237px; max-width: 100%; margin: auto auto 30px } .pco-login-form__card-field { text-align: left; margin: 0 auto 30px } @media(max-width:25em) { .pco-login-form__card-field .flyers-header__input, .pco-login-form__card-field .homepage-stores__input, .pco-login-form__card-field .search-box__input, .pco-login-form__card-field .text-group__input { font-size: 4.5vw; padding-left: calc(25% + 22px) } .pco-login-form__card-field .text-group__input--error { padding-right: 40px } .pco-login-form__card-field .text-group__input-addon { font-size: 4.5vw; line-height: 1.4444444444 } .pco-login-form__card-field .text-group__input-icon { right: 10px } } @media(max-width:19.99em) { .pco-login-form__card-field .flyers-header__input, .pco-login-form__card-field .homepage-stores__input, .pco-login-form__card-field .search-box__input, .pco-login-form__card-field .text-group__input { font-size: .875rem; padding-left: 78px } .pco-login-form__card-field .text-group__input-addon { font-size: .875rem; line-height: 1.4444444444 } } .pco-login-form .flow-tile { padding-top: 50px; padding-bottom: 60px } .pco-login-form .flow-form-submit__cancel, .pco-login-form .flow-form-submit__content { margin-top: 30px } .pco-login-form .flow-form-submit__submit { padding-left: 40px; padding-right: 40px } .pco-login-form .flow-form-submit__isNewDesignSystem .flow-form-submit__content { margin: 0 auto } .pco-login-form .flow-form-submit__isNewDesignSystem .flow-form-submit__cancel { margin-top: 24px } .pco-login-form .flow-form-submit__isNewDesignSystem .flow-form-submit__cancel a { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif } .pco-login-form .flow-form-submit__isNewDesignSystem .flow-form-submit__submit { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; padding: 12px 24px } .pco-login-form .flow-form-submit__isNewDesignSystem .flow-form-submit__submit sup { font-size: 10px } .assign-card-form__content { display: flex; flex-flow: row wrap; margin: auto auto 20px; max-width: 300px } @media(min-width:48em) { .assign-card-form__content { max-width: none } } .assign-card-form__card-image { display: none; width: 50% } @media(min-width:48em) { .assign-card-form__card-image { display: inline-block; margin-bottom: 40px } } .assign-card-form__card-image .sprite { width: 170px; height: 112px } .assign-card-form__members-section { width: 100%; text-align: left } @media(min-width:48em) { .assign-card-form__members-section { width: 50%; padding-left: 10px } } .assign-card-form__member-title { margin: 0 0 10px; width: 100%; float: none } .assign-card-form__member-select { margin: 0 0 32px } .assign-card-form .radio-group__option { margin-top: 0 } .assign-card-form .flow-form-submit__cancel, .assign-card-form .flow-form-submit__submit { display: block; margin-left: auto; margin-right: auto } .assign-card__invitation { margin-bottom: 0 } .invitation-form { width: 70vw } @media(min-width:48em) { .invitation-form { width: auto } } .invitation-form__member-container { padding: 30px 0 } .invitation-form__member-container:first-child { padding-top: 0 } @media(min-width:48em) { .invitation-form__member-container { padding-top: 0 } } .invitation-form__member-form { display: flex; flex-flow: column; text-align: left; width: 100% } @media(min-width:48em) { .invitation-form__member-form { align-content: flex-start; flex-flow: row } } .invitation-form__member-form .error-text-input { color: #970012 } .invitation-form__name-field { order: 2; margin-top: 0; margin-bottom: 0 } @media(min-width:48em) { .invitation-form__name-field { order: 1; flex-basis: 40%; margin-right: 20px } } .invitation-form__email-field { order: 3; margin-top: 20px; margin-bottom: 0 } @media(min-width:48em) { .invitation-form__email-field { order: 2; margin-top: 0; flex-basis: 60% } } .invitation-form__remove-button-container { order: 1; text-align: right } @media(min-width:48em) { .invitation-form__remove-button-container { order: 3; height: 32px; width: 32px; margin: 35px 0 0 10px } } .invitation-form__remove-button .sprite { fill: #bcbcbc } @media(min-width:48em) { .invitation-form__remove-button { min-width: 0; padding: 0; height: 32px; width: 32px } } .invitation-form__max-invite-notice { margin-bottom: 20px } @media(min-width:48em) { .invitation-form__max-invite-notice { margin-bottom: 30px } } @media(max-width:47.99em) { .invitation-form .flow-form-submit__content { margin-top: 35px } } .invitation-form__rule { display: block } @media(min-width:48em) { .invitation-form__rule { display: none } } .invitation-form__error-message { text-align: left } .invitation-form__submission { margin-top: 18px } .invitation-form__submission .flow-form-submit__content { margin-top: 0 } .invitation-form__checkbox-container { margin-top: 40px } @media(min-width:48em) { .invitation-form__checkbox-container { margin-top: 60px } } .invitation-form-checkbox .checkbox-group-new-ds { align-items: flex-start; margin-left: -10px; text-align: left } .invitation-form-checkbox .checkbox-group-new-ds__icon--error { border-color: #6b6272; margin-bottom: 0 } .invitation-form-checkbox .checkbox-group-new-ds__text { margin: 11px 0 0 4px } .invitation-form-checkbox .checkbox-group-new-ds__label { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; color: #191919 } .invitation-form-checkbox .checkbox-group-new-ds__label .link { color: #da291c } .invitation-form-checkbox .checkbox-group-new-ds__label .link:hover { color: #982822 } .invitation-form-checkbox .checkbox-group-new-ds__error { margin-top: 4px } @media(min-width:48em) { .invitation-form-checkbox .checkbox-group-new-ds__error { margin-top: 8px } } .invitation-form-checkbox .checkbox-group-new-ds .error-text-input { color: #970012 } .invitation-form-checkbox:not(:last-child) { margin-bottom: 16px } .enrol-form { text-align: left } .enrol-form__submit-button { width: auto; margin: 28px auto 0; font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; padding: 12px 24px } @media(min-width:48em) { .enrol-form__submit-button { margin-top: 40px } } .enrol-form__input-text-firstname { margin-top: 0; margin-bottom: 24px } .enrol-form .flyers-header__input:disabled, .enrol-form .homepage-stores__input:disabled, .enrol-form .search-box__input:disabled, .enrol-form .text-group__input:disabled { background: #f4f1f6; border: 2px solid #655c6c } .enrol-form__input-checkbox { margin-bottom: 14px; margin-left: -10px } .enrol-form__expanded-legal-copy { border-top: 1px solid rgba(158, 147, 166, .25) } .enrol-form__expanded-legal-copy a { color: #157a77 } .enrol-form__expanded-legal-copy a:hover { color: #615395 } .enrol-form__accept-communications { border-top: 1px solid rgba(158, 147, 166, .25); margin: 30px 0 } .enrol-form__accept-communications>span { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-weight: 600; font-size: 1.25rem; line-height: 1.5rem; display: block; margin: 30px 0 5px } @media(min-width:48em) { .enrol-form__accept-communications>span { font-size: 1.5rem; line-height: 2rem } } .enrol-form__accept-communications sup { font-size: 10px } .enrol-form__terms-and-conditions { border-top: 1px solid rgba(158, 147, 166, .25); padding-top: 24px } .enrol-form__terms-and-conditions sup { font-size: 10px } .enrol-form .checkbox-group-new-ds { align-items: flex-start } .enrol-form .checkbox-group-new-ds__text { margin: 9px 0 0 4px } .enrol-form__privacy-copy { color: #403840; margin-left: 30px; margin-bottom: 20px } .enrol-form__firstname-helper-text { color: #6b6272; margin-top: -15px } .claim-phone-number-form { text-align: center } .claim-phone-number-form .text-group { text-align: start } .claim-phone-number-form__input { margin: 16px 0 12px } .claim-phone-number-form__input .text-group__label { margin-bottom: 4px } .claim-phone-number-form__footer { margin: 0; display: flex; justify-content: center; text-align: center } .claim-phone-number-form__footer p { margin: 0 2.5px } .claim-phone-number-form__submit-button { margin: 24px 0 8px; padding: 12px 24px; font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif } .base-form label { display: block; margin-bottom: 8px } .base-form label .link.primary { color: #f9dada } .base-form input, .base-form select { color: #403840; width: 100%; padding: 16px; background-color: #fff; border-radius: 6px; border: 1px solid #9e93a6; -webkit-text-fill-color: #403840 } .base-form input:focus, .base-form select:focus { outline: 0; box-shadow: 0 0 0 2px #f9dada } .base-form select { -moz-appearance: none; -webkit-appearance: none; appearance: none; background-repeat: no-repeat; background-position: right 17px top 50% } .base-form select, .base-form select:active { background-image: url(/static/images/pcoi/up-black.png) } .base-form select:active { transform: rotate(180deg) } .base-form .checkbox-input, .base-form .masked-input, .base-form .select-input, .base-form .text-input { margin-bottom: 16px } .base-form .checkbox-input--error input, .base-form .checkbox-input--error select, .base-form .masked-input--error input, .base-form .masked-input--error select, .base-form .select-input--error input, .base-form .select-input--error select, .base-form .text-input--error input, .base-form .text-input--error select { box-shadow: 0 0 0 2px #ff6262 } .base-form .checkbox-input--success input, .base-form .checkbox-input--success select, .base-form .masked-input--success input, .base-form .masked-input--success select, .base-form .select-input--success input, .base-form .select-input--success select, .base-form .text-input--success input, .base-form .text-input--success select { box-shadow: 0 0 0 1px #fff } .base-form .checkbox-input--error input:focus, .base-form .checkbox-input--error select:focus, .base-form .checkbox-input--success input:focus, .base-form .checkbox-input--success select:focus, .base-form .masked-input--error input:focus, .base-form .masked-input--error select:focus, .base-form .masked-input--success input:focus, .base-form .masked-input--success select:focus, .base-form .select-input--error input:focus, .base-form .select-input--error select:focus, .base-form .select-input--success input:focus, .base-form .select-input--success select:focus, .base-form .text-input--error input:focus, .base-form .text-input--error select:focus, .base-form .text-input--success input:focus, .base-form .text-input--success select:focus { outline: 0; box-shadow: 0 0 0 2px #f9dada } .base-form .lds__button { display: inline-block; padding: 12px 30px; margin: 0 16px 0 0 } .base-form .lds__button:last-child { margin: 0 } .base-form .lds__button .circle-loader { width: 15px; height: 15px } .base-form input:-webkit-autofill, .base-form input:-webkit-autofill:focus, .base-form input:-webkit-autofill:hover, .base-form option, .base-form select:-webkit-autofill, .base-form select:-webkit-autofill:focus, .base-form select:-webkit-autofill:hover { background-color: #fff; color: #403840; -webkit-text-fill-color: #403840; -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s } .base-form .error-label, .base-form .help-label, .base-form .success-label { color: #403840 } .base-form .form-submit__loader { width: 25px; display: inline-block } @font-face { font-family: NoirStd-Regular; src: url(https://assets.beautyboutique.ca/bb-prod-marketing-image/site-fonts/NoirStd/NoirStd-Regular.woff) format("woff"); font-display: swap } .lds__radio-button-atom { box-sizing: border-box; width: 1.5rem; height: 1.5rem; border: 1px solid #000; -webkit-appearance: none; border-radius: 50%; outline: none; cursor: pointer } .lds__radio-button-atom[type=radio] { padding: .125rem } .lds__radio-button-atom.lds__radio-button-atom:checked { border: 1px solid #000 } .lds__radio-button-atom.lds__radio-button-atom:checked.lds__radio-button-atom--error { border-color: #bb192c } .lds__radio-button-atom.lds__radio-button-atom:checked:before { background-color: #000 } .lds__radio-button-atom.lds__radio-button-atom--error { border-color: #bb192c; background-color: #ffebea } .lds__radio-button-atom:disabled { border-color: rgba(71, 71, 71, .8); border-style: solid; background-color: rgba(71, 71, 71, .2) } .lds__radio-button-atom:before { content: ""; display: flex; width: 100%; height: 100%; border-radius: 50% } .lds__radio-button-atom:focus { box-shadow: 0 0 0 3px #5e9ed6 } .lds__radio-button-atom:disabled { cursor: auto } .lds__label { box-sizing: border-box; cursor: pointer; display: inline-block } .lds__radio-button { box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start } .lds__radio-button input[type=radio].lds__radio-button-atom { margin: 0 .5rem 0 0 } .lds__radio-button .lds__label.disabled { cursor: default } .lds__radio-group { box-sizing: border-box } .lds__radio-group .lds__radio-button { width: 100%; padding: .25rem; margin: .25rem } .lds__radio-group .lds__radio-button:last-of-type { border-bottom: none } .lds__radio-group .lds__radio-group__radio-container { display: flex; align-items: flex-start; justify-content: space-around } .expandable-form-wrapper .lds__radio-group__radio-container { margin-bottom: 16px } .expandable-form-wrapper .lds__radio-button { padding: 0; margin: 0 } .expandable-form-wrapper .lds__radio-button-atom[type=radio] { border-radius: 50%; border: 2px solid #6b6272; padding: .1rem; width: auto; width: 1.25rem; height: 1.25rem } .expandable-form-wrapper .lds__radio-button-atom[type=radio]:checked { border: 2px solid #f86457; box-shadow: none } .expandable-form-wrapper .lds__radio-button-atom.lds__radio-button-atom:checked:before { background-color: #f86457 } .expandable-form-wrapper .billing-info__summary { margin: 0 0 0 30px } .expandable-form-wrapper .billing-info__summary:first-of-type { font-weight: 700 } .expandable-form-wrapper .billing-info__summary:nth-child(2n) { margin-bottom: 4px } .shopping-list-form { width: 100%; margin: 0 auto } .shopping-list-form__input-wrapper { position: relative; width: 95%; margin: 0 auto } .shopping-list-form input { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.25rem; color: #403840; flex: 1; border-radius: 2px; color: #655c6c; padding: 8px 12px 8px 50px; background-color: #fff } @media(min-width:48em) { .shopping-list-form input { font-size: 1rem; line-height: 1.375rem } } .shopping-list-form input:focus { border: none } .shopping-list-form__input--list-size .flyers-header__input, .shopping-list-form__input--list-size .homepage-stores__input, .shopping-list-form__input--list-size .search-box__input, .shopping-list-form__input--list-size .text-group__input, .shopping-list-form__input--list-size .text-group__input-container { display: none } .shopping-list-form .text-group__input--error:active, .shopping-list-form .text-group__input--error:focus { border-color: #bb2620 } .shopping-list-form .list-size-error { margin: 0 auto 24px; padding: 24px; border-radius: 8px; background-color: #feeeeb; border: 1px solid #c42d0c; width: 95% } .shopping-list-form__add-button { margin: 4px 4px 0; position: absolute; display: inline-block; background-color: transparent; border: 1px solid transparent; border-radius: 50%; padding: 4px; z-index: 1; cursor: pointer } .shopping-list-form .add-button-icon { transform: translate(1px) rotate(45deg); fill: #157a77; width: 24px; height: 24px; border: none; padding: 0; background-color: transparent } .shopping-list-generic-item-form .text-group--block { margin: 0 } .shopping-list-generic-item-form .flyers-header__input, .shopping-list-generic-item-form .homepage-stores__input, .shopping-list-generic-item-form .search-box__input, .shopping-list-generic-item-form .text-group__input { background-color: transparent; border: 2px solid #9e93a6; padding: 6px 18px } .shopping-list-generic-item-form .invitation-form__error-message, .shopping-list-generic-item-form .text-group__error, .shopping-list-generic-item-form .toggleable-container .account-setting__error, .toggleable-container .shopping-list-generic-item-form .account-setting__error { word-break: break-word } .not-found { flex-grow: 1; background-position: 50%; background-size: cover; display: flex } .not-found__inner { display: flex; flex-flow: column wrap; justify-content: center; min-height: 420px; text-align: center; height: 100% } @media(min-width:48em) { .not-found__inner { min-height: 710px } } .not-found__title { margin-top: 0; margin-bottom: 10px } .not-found__subtitle, .not-found__title { color: #fff; text-shadow: 0 5px 10px rgba(0, 0, 0, .4) } .not-found__subtitle { margin: 0 } .not-found__home-link { display: inline-block; margin-top: 26px } @media(min-width:48em) { .not-found__home-link { width: 240px; margin: 46px auto 0 } } .not-found--somethingWrong { background-image: url(/static/images/404/blush.jpg) } .not-found--notYou { background-image: url(/static/images/404/donut.jpg) } .link--theme-helios-primary { font-weight: 600; font-size: 16px; min-width: 143px; padding: 12px 50px; border-radius: 32px; background: #157a77; border-color: #157a77; color: #fff; fill: #fff } .link--theme-helios-primary:hover { border-color: #006665; background: #006665 } .link--theme-helios-primary:focus { border-color: #157a77; background: #157a77 } .link--theme-helios-primary:active { border-color: #004e4c; background: #004e4c } .link--theme-helios-primary:disabled { cursor: not-allowed } .link--theme-helios-primary--small { padding: 9px 24px; min-width: 90px } .link--theme-helios-secondary { font-weight: 600; font-size: 16px; min-width: 143px; padding: 12px 50px; border-radius: 32px; background: #fff; border-color: #157a77; color: #157a77; fill: #157a77 } .link--theme-helios-secondary:hover { border-color: #006665; color: #006665; fill: #006665 } .link--theme-helios-secondary:focus { border-color: #157a77; color: #157a77; fill: #157a77 } .link--theme-helios-secondary:active { border-color: #004e4c; color: #004e4c; fill: #004e4c } .link--theme-helios-secondary:disabled { cursor: not-allowed } .link--theme-helios-secondary--small { padding: 9px 24px; min-width: 90px } .link--theme-helios-flat { font-weight: 600; font-size: 16px; min-width: 143px; padding: 12px 50px; border-radius: 32px; background: #f3f3f3; border-color: #f3f3f3; color: #191919; fill: #191919 } .link--theme-helios-flat:hover { border-color: #e1e1e1; background: #e1e1e1; color: #191919; fill: #191919 } .link--theme-helios-flat:focus { border-color: #f3f3f3; background: #f3f3f3; color: #191919; fill: #191919 } .link--theme-helios-flat:active { border-color: #c9c9c9; background: #c9c9c9; color: #191919; fill: #191919 } .link--theme-helios-flat:disabled { cursor: not-allowed } .link--theme-helios-flat--small { padding: 9px 24px; min-width: 90px } .flow-faq--new-design-system .flow-faq__link, .link--theme-link-primary, .pco-login-form .flow-form-submit__isNewDesignSystem .flow-form-submit__cancel a { color: #157a77 } .flow-faq--new-design-system .flow-faq__link:hover, .link--theme-link-primary:hover, .pco-login-form .flow-form-submit__isNewDesignSystem .flow-form-submit__cancel a:hover { color: #615395 } .link--theme-helios-tertiary { color: #157a77 } .link--theme-helios-tertiary:hover { color: #006665 } .link--theme-helios-tertiary:active { color: #004e4c } .link .sprite { pointer-events: none } .locale-toggle { cursor: default; display: flex } .locale-toggle__link--clickable { background: none; border: none; padding: 0; color: #da291c; font-weight: 400 } .locale-toggle__link--clickable:hover { font-weight: 400 } .locale-toggle__bullet { padding: 0 8px } .donate-banner__fake-cta, .new-window-link, .tile-item__fake-cta, .video-tile__fake-cta { display: inline-block } .new-window-link__icon { width: 12px; margin: 0 2px -7px 8px; fill: currentColor } .toggleable-container { display: flex; align-items: flex-start; flex-flow: row nowrap; background-color: #fff; margin-bottom: 10px } .toggleable-container .flyers-header__input, .toggleable-container .homepage-stores__input, .toggleable-container .search-box__input, .toggleable-container .text-group__input { height: 52px; padding-top: 8px; padding-bottom: 8px } .toggleable-container__toggle-button { width: 48px; height: 48px; flex-shrink: 0; z-index: 1; order: 2; margin-left: auto } .toggleable-container__toggle-button .sprite { margin: auto; fill: #585858 } .toggleable-container__toggle-button:hover .sprite { fill: #191919 } @media(max-width:47.99em) { .toggleable-container--toggled .toggleable-container__toggle-button { display: none } } .toggleable-drawer { position: relative; background: #f0f0f0; text-align: center } .toggleable-drawer__close-button { position: absolute; right: 12px; top: 12px; font-size: 1.2rem; padding: 0; background: none; border: none; cursor: pointer; color: #585858 } @media(max-width:47.99em) { .toggleable-drawer__close-button { display: none } } .toggleable-drawer__close-button .sprite { width: 20px; height: 20px } .toggleable-drawer__expand-button { background: none; border: none; width: 100%; padding: 8px 16px; min-height: 50px; transition: none } .toggleable-drawer--expanded { padding: 24px } @media(min-width:48em) { .toggleable-drawer--expanded { padding: 50px } } .toggleable-drawer--closed .toggleable-drawer-content { color: #ee3124; transition: color .1s } .toggleable-drawer--closed .toggleable-drawer-content__icon { fill: #ee3124 } .toggleable-drawer--closed:hover .toggleable-drawer-content { color: #982822 } .toggleable-drawer--closed:hover .toggleable-drawer-content__icon { fill: #982822 } .toggleable-drawer-content>:first-child { margin-top: 0 } .toggleable-drawer-content>:last-child { margin-bottom: 0 } .toggleable-drawer-content__title { padding: 0 10px } .toggleable-drawer-content__subtitle { text-transform: none; padding: 0 10px } @media(min-width:48em) { .toggleable-drawer-content__subtitle { margin: 0 0 30px } } .toggleable-drawer-content__icon { width: 22px; height: 22px; vertical-align: middle; margin-right: 8px } .progress-bar { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: baseline; width: 100% } .progress-bar__parent { flex-grow: 1; height: 10px; background-color: #efeef1; overflow: hidden } .progress-bar__parent:not(:first-child) { margin-left: 4px } @media(min-width:48em) { .progress-bar__parent:not(:first-child) { margin-left: 8px } } .progress-bar__value { height: 10px; flex-grow: 1; background-color: #007a7c } .progress-bar__ratio { margin-left: 10px } @media(min-width:48em) { .progress-bar__ratio { margin-left: 24px } } .progress-bar__current-value { font-weight: 700; color: #191919 } .progress-bar--continuous .progress-bar__parent { border-radius: 5px } .slider-holder-div { display: flex; flex-direction: column; width: 100%; justify-content: flex-start } .scroll-slider-shared { overflow-x: visible; display: flex; flex-direction: row; justify-content: center; position: relative; margin: 0 auto 25px } @media(min-width:48em) { .scroll-slider-shared { margin: 0 auto 100px; flex-direction: row } } .scroll-slider-shared:after, .scroll-slider-shared:before { position: absolute; width: 20px; height: 100%; top: -7px; content: " "; z-index: 1; visibility: hidden; opacity: 0 } @media(min-width:48em) { .scroll-slider-shared:after, .scroll-slider-shared:before { top: -12px } } .scroll-slider-shared:after { right: 0 } .scroll-slider-shared:before { left: 0 } .scroll-slider-shared-list--scroll { scroll-behavior: smooth; position: relative; margin: 0; overflow-x: auto; overflow-y: hidden; display: flex; flex-direction: row; cursor: grab; justify-content: flex-start; -webkit-overflow-scrolling: touch; overflow: -moz-scrollbars-none; z-index: 1 } .scroll-slider-shared-list--scroll::-webkit-scrollbar { height: 7px; display: none } .scroll-slider-shared-list--scroll::-webkit-scrollbar-thumb { border-radius: 12px; background: #666b73 } .scroll-slider-shared-list--scroll::-webkit-scrollbar-track { border-radius: 12px; background: #e0e1e3; margin-right: 20px } @media(min-width:48em) { .scroll-slider-shared-list--scroll::-webkit-scrollbar-track { margin-left: 20px; margin-right: 40px } } .scroll-slider-shared-list--scroll.scroll-slider-shared-list--block-tile-list { padding: 0 20px } .scroll-slider-shared-list--scroll.scroll-slider-shared-list--block-tile-list .element-tile { display: block; width: 130px; margin-bottom: 0 } .scroll-slider-shared-list--scroll.scroll-slider-shared-list--block-tile-list::-webkit-scrollbar-track { background: #cacbcd; margin: 0 20px } .scroll-slider-shared-list__item { scroll-snap-align: none; list-style: none } .scroll-slider-shared-list__item--scroll.scroll-slider-shared-list__item--block-tile-list { margin-right: 20px } .scroll-slider-shared-list__item--scroll.scroll-slider-shared-list__item--block-tile-list:last-child { margin-right: 0; padding-right: 20px } .scroll-slider-shared-list__item:focus { outline: 0 } .scroll-slider-shared-list__item-tile { position: relative } .scroll-slider-shared-list__item-tile--fade { position: absolute; width: 100%; height: 100%; background: hsla(0, 0%, 91.4%, .5); z-index: 2; border-radius: 8px } .scroll-slider-shared-list__button { width: 40px; height: 40px; border-radius: 100%; background: #fff; box-shadow: 0 4px 12px rgba(158, 147, 166, .24), 0 4px 6px rgba(158, 147, 166, .24); display: flex; justify-content: center; align-items: center; cursor: pointer; border: 2px solid transparent; transition: all .1s } .scroll-slider-shared-list__button:focus:not([disabled]), .scroll-slider-shared-list__button:hover:not([disabled]) { border-color: #615395; background: #f4f1f6; fill: #615395 } .scroll-slider-shared-list__button:focus:not([disabled]) .sprite, .scroll-slider-shared-list__button:hover:not([disabled]) .sprite { fill: #615395 } .scroll-slider-shared-list__button:active:not([disabled]) { background: #403840; border-color: #403840 } .scroll-slider-shared-list__button:active:not([disabled]) .sprite { fill: #fff } .scroll-slider-shared-list__button-container { position: unset; z-index: unset; display: flex } .scroll-slider-shared-list__button-left { margin-right: 8px } .scroll-slider-shared-list__button-left .sprite { margin-right: 2px } .scroll-slider-shared-list__button-right .sprite { margin-left: 2px; transform: rotate(180deg) } .scroll-slider-shared-list__button[disabled] { cursor: default } .scroll-slider-shared-list__button[disabled] .sprite { fill: #9e93a6 } .scroll-slider-shared-list__button .sprite { width: 10px; fill: #157a77 } .scroll-slider-shared--pan-active { cursor: grabbing } .scroll-slider-shared--pan-drag .scroll-slider-shared-list__item-tile { pointer-events: none } .scroll-slider-shared--scroll.scroll-slider-shared--block-tile-list { margin-right: -20px; margin-left: -20px } @media(min-width:48em) { .scroll-slider-shared--scroll.scroll-slider-shared--block-tile-list { margin-right: -40px; margin-left: -40px } } .scroll-slider-shared--scroll.scroll-slider-shared--block-tile-list:after, .scroll-slider-shared--scroll.scroll-slider-shared--block-tile-list:before { display: none } .sprite:only-child { display: block } .sprite__symbol { width: 54%; height: 54% } .sprite--has-background { display: flex; align-items: center; justify-content: center; border-radius: 50%; width: 80px; height: 80px } @media(min-width:48em) { .sprite--has-background { width: 100px; height: 100px } } .sprite--background-red { background-color: #ee3124 } .sprite--background-pink { background-color: #fbd2d3 } .sprite--background-white { background: #fff } .tab-bar { overflow: hidden; max-height: 55px; background-color: #fff } .tab-bar__inner { display: flex; flex-flow: row nowrap; align-items: stretch; justify-content: space-between; max-width: 560px; padding-left: 20px; padding-right: 20px; margin: 0 auto; list-style-type: none; overflow: auto; white-space: nowrap } @media(min-width:48em) { .tab-bar__inner { padding-left: 40px; padding-right: 40px } } .tab-bar__item { margin: 0 6px } .tab-bar__item:first-child { margin-left: 0 } .tab-bar__item:last-child { margin-right: 0 } .tab-bar__button, .tab-bar__link { position: relative; width: 100%; height: 55px; padding: 0 4px; outline-offset: -2px; color: #655c6c; text-decoration: none } @media(max-width:34.375em) { .tab-bar__button, .tab-bar__link { font-size: .9375rem } } .tab-bar__button:hover, .tab-bar__link:hover { color: #982822 } .tab-bar__button:after, .tab-bar__link:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; background-color: #ee3124 } .tab-bar__button--active, .tab-bar__link--active { color: #191919 } .tab-bar__button--active:after, .tab-bar__link--active:after { height: 6px } .tab-bar__link { display: flex; align-items: center; justify-content: center } .tab-bar--overflows .tab-bar__item:last-child { padding-right: 20px; margin-right: -20px } @media(min-width:48em) { .tab-bar--overflows .tab-bar__item:last-child { padding-right: 40px; margin-right: -40px } } .pco-modal-container { z-index: 999; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: rgba(6, 17, 22, .65) } .pco-modal-container .pco-modal-content__back, .pco-modal-container .pco-modal-content__close { position: absolute; top: 17px; border-radius: 100%; background: #fff; padding: 6px; border: 2px solid #fff } .pco-modal-container .pco-modal-content__back:focus, .pco-modal-container .pco-modal-content__back:focus-within, .pco-modal-container .pco-modal-content__back:hover, .pco-modal-container .pco-modal-content__close:focus, .pco-modal-container .pco-modal-content__close:focus-within, .pco-modal-container .pco-modal-content__close:hover { outline: none; padding: 6px; border: 2px solid #615395 } .pco-modal-container .pco-modal-content__back:focus-within svg, .pco-modal-container .pco-modal-content__back:focus svg, .pco-modal-container .pco-modal-content__back:hover svg, .pco-modal-container .pco-modal-content__close:focus-within svg, .pco-modal-container .pco-modal-content__close:focus svg, .pco-modal-container .pco-modal-content__close:hover svg { fill: #615395; stroke: #615395 } .pco-modal-container .pco-modal-content__back:active, .pco-modal-container .pco-modal-content__close:active { background: #403840; border: 2px solid #403840 } .pco-modal-container .pco-modal-content__back:active svg, .pco-modal-container .pco-modal-content__close:active svg { fill: #fff; stroke: #fff } .pco-modal-container .pco-modal-content__back svg, .pco-modal-container .pco-modal-content__close svg { width: 18px; height: auto; fill: #655c6c; stroke: #655c6c; stroke-width: 2px } .pco-modal-container .pco-modal-content__close { right: 17px } .pco-modal-container .pco-modal-content__back { left: 17px } .interaction-modal-content { max-width: 400px; position: relative; border-radius: 16px; background-color: #fff; margin: 0 20px; overflow: hidden } .interaction-modal-content__inner { padding: 20px 24px 34px; height: 62% } @media(max-height:672px) { .interaction-modal-content__inner-text { height: 65% } } .interaction-modal-content p { margin-bottom: 30px } .interaction-modal-content__cta-button--secondary { margin-top: 24px } .interaction-modal-content__link-text { display: block; margin-top: 18px } .ada-chatbot-button { display: none } @media(min-width:64em) { .ada-chatbot-button { width: 48px; height: 48px; min-width: 48px; border-radius: 50%; border: 0; padding: 0; background-color: #157a77; display: flex; justify-content: center; align-items: center; z-index: 4 } } .ada-chatbot-button:focus, .ada-chatbot-button:hover { background-color: #615395 } .ada-chatbot-button__icon { width: 32px; height: 27px } .medallia-form-button { margin: 10px 0 10px 16px; white-space: nowrap; text-decoration: none } .medallia-form-button span { color: inherit } .household-instruction { width: 100% } .household-instruction__section { display: flex; align-items: center; flex-flow: column wrap } .household-instruction__title { width: 100%; margin: 0 0 8px } @media(min-width:34.375em) { .household-instruction__title { font-size: .875rem } } .household-instruction__text { width: 100%; margin: 0 } @media(min-width:34.375em)and (max-width:63.99em) { .household-instruction__text { font-size: 1.625rem } } .household-empty { display: flex; flex-wrap: wrap } .household-empty__image { flex: 1 0 auto; width: 100%; background-size: cover; background-position: 50%; height: 80vw; min-height: 300px } @media(min-width:48em) { .household-empty__image { height: 50vw; height: auto; width: 50% } } .household-empty__image--first { background-image: url(/static/images/household/household-tile-1.jpg); order: 2 } @media(min-width:48em) { .household-empty__image--first { order: 1 } } .household-empty__image--second { background-image: url(/static/images/household/household-tile-2.jpg); order: 4 } .household-empty__image--third { background-image: url(/static/images/household/household-tile-3.jpg); order: 6 } @media(min-width:48em) { .household-empty__image--third { order: 5 } } .household-empty__text-group { flex: 1 0 auto; display: flex; align-items: center; width: 50%; text-align: center; height: 80vw; max-height: 600px; min-height: 300px; padding: 0 18% } @media(min-width:34.375em) { .household-empty__text-group { padding: 0 18% } } @media(min-width:48em) { .household-empty__text-group { height: 50vw; padding: 0 10% } } .household-empty__text-group--first { background-color: #feece8; order: 1 } @media(min-width:48em) { .household-empty__text-group--first { order: 2 } } .household-empty__text-group--second { background-color: #f47f72; order: 3 } .household-empty__text-group--third { -webkit-font-smoothing: antialiased; background-color: #982822; order: 5 } @media(min-width:48em) { .household-empty__text-group--third { order: 6 } } .household-empty__text-group--third * { color: #fff } .household-empty__footer { flex: 1 0 auto; width: 100%; order: 7; display: flex; justify-content: center; align-items: center; text-align: center; padding: 20px; min-height: 90px } @media(min-width:48em) { .household-empty__footer { min-height: 130px } } .household-empty__footer-link { display: inline-block } .household--placeholder .utility-content, .household-container .utility-content { margin: 0 auto } .household-link-account { background-image: url(/static/images/household/household-hero-mobile.jpg); background-size: cover; background-position: top } @media(min-width:48em) { .household-link-account { background-image: url(/static/images/household/household-hero-desktop.jpg) } } .household-link-account__inner { display: flex; justify-content: center } .household-link-account__card { margin-top: 60px; margin-bottom: 60px; max-width: 440px; background-color: #fff; padding: 30px; text-align: center } @media(min-width:48em) { .household-link-account__card { margin-top: 120px; margin-bottom: 120px; padding: 50px 40px 60px } } .household-link-account__house-icon { width: 80px; height: 80px; margin-right: auto; margin-left: auto; margin-bottom: 30px } @media(min-width:48em) { .household-link-account__house-icon { width: 100px; height: 100px } } @media(max-width:47.99em) { .household-link-account__title { font-size: .9375rem } } .household-link-account__text { margin-bottom: 0 } .household-link-account__start-button { display: inline-block; margin: 20px auto 0 } .household-member { display: flex; flex-grow: 1; padding: 20px 0 20px 20px; min-height: 90px; position: relative; align-items: center } @media(min-width:48em) { .household-member { padding: 20px } } .household-member--editable { align-items: flex-start; padding: 20px } .household-member__value { display: flex; align-items: center; width: calc(100% - 68px) } @media(min-width:48em) { .household-member__value { margin-left: 40px } } .household-member__invitation-sprite, .household-member__sprite { width: 25px; min-width: 25px; margin-top: -5px } @media(min-width:48em) { .household-member__invitation-sprite, .household-member__sprite { width: 30px; min-width: 30px } } .household-member__invitation-sprite { opacity: .5 } .household-member__inner { flex-grow: 1 } @media(min-width:48em) { .household-member .flow-form-submit { margin-left: 120px } } .household-member .flow-form-submit__content { padding-top: 20px; margin-top: 20px } .household-member__details { margin-left: 15px } @media(min-width:48em) { .household-member__details { display: flex; align-items: center } } .household-member__name { font-weight: 400; word-break: break-all } @media(min-width:48em) { .household-member__name { max-width: 400px; margin-right: 40px } } .household-member__expiry { display: block } @media(min-width:48em) { .household-member__expiry { display: inline } } .household-member__copy-link { display: block } .household-member .toggleable-container__toggle-button { position: absolute; top: 20px; right: 10px } @media(min-width:48em) { .household-member .toggleable-container__toggle-button { right: 20px } } .copy-invite-link { margin-top: 20px } @media(min-width:48em) { .copy-invite-link { margin-top: 3px } } .household-grid__invite-button { color: #da291c; margin-top: 30px } .household-grid__invite-button--placeholder { pointer-events: none } .point-event__header { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start } @media(min-width:48em) { .point-event__header { align-items: center } .point-event__header--no-action { margin-right: 52px } } .point-event__detail-toggle-container { order: 2; flex-shrink: 0; flex-basis: 52px; align-self: stretch; position: relative } @media(min-width:48em) { .point-event__detail-toggle-container { order: 3 } } .point-event__detail-toggle { display: block; width: 100%; height: 52px } .point-event__detail-toggle-sprite { position: absolute; top: 0; right: 0; fill: #ee3124; transform-origin: 12px 12px; transform: rotate(90deg) } @media(min-width:48em) { .point-event__detail-toggle-sprite { left: 0; bottom: 0; margin: auto } } .point-event__summary { order: 1; flex: 0 0 calc(100% - 52px) } @media(min-width:48em) { .point-event__summary { flex: 1 0 auto; width: calc(68% - 26px) } } .point-event__point-diff { order: 4; flex-grow: 1; text-align: right } @media(max-width:47.99em) { .point-event__point-diff { align-self: baseline } } @media(min-width:48em) { .point-event__point-diff { order: 2; flex: 2 0 auto; width: calc(32% - 26px) } } .point-event__dollar-savings { order: 5; flex-basis: 100%; text-align: right } @media(min-width:48em) { .point-event__dollar-savings { flex: 1 0 50%; padding-right: 52px; font-size: 1rem; line-height: 1.75 } } .point-event__dollar-total { order: 3; flex-grow: 1; line-height: 2 } @media(max-width:47.99em) { .point-event__dollar-total { align-self: baseline } } @media(min-width:48em) { .point-event__dollar-total { order: 4; flex-basis: 50% } } .point-event__diff-value--negative { color: #585858 } .point-event__pts-label { color: #191919; font-weight: 700; margin-left: 2px } .point-event__pts-label--negative { color: #585858 } .point-event__expanded-content { display: none; padding-top: 26px; margin-top: 26px; border-top: 1px solid #ddd } @media(min-width:48em) { .point-event__expanded-content { padding-top: 46px; margin-top: 46px } } @media(min-width:64em) { .point-event__expanded-content { margin-top: 0; border-top-width: 0 } } .point-event__transaction-inquiry { text-align: center; padding-top: 0; margin: 0 auto } @media(min-width:48em) { .point-event__transaction-inquiry { width: 320px; border-top: 1px solid #ddd; padding-top: 20px; margin-bottom: 0 } } @media(min-width:48em) { .point-event__transaction-inquiry-conversion { width: 630px } } .point-event--expanded .point-event__expanded-content { display: block } .point-event--expanded .point-event__detail-toggle-sprite { transform: rotate(270deg) } .point-event-category { display: flex; padding-bottom: 28px } @media(min-width:48em) { .point-event-category { padding-bottom: 46px; padding-right: 52px } } .point-event-icon { display: none; text-align: center; flex-basis: 13% } .point-event-icon .sprite { width: 32px; height: 32px } @media(min-width:48em) { .point-event-icon { display: inline-block } } .point-event-category-details { width: 100% } .point-event-category-details__header { display: flex; justify-content: space-between; text-transform: uppercase; padding-bottom: 8px } .point-event-category-details__header-category-name { flex-grow: 3; flex-basis: 0 } @media(min-width:64em) { .point-event-category-details__header-category-name { order: 1 } } .point-event-category-details__header-points, .point-event-category-details__header-savings, .point-event-category-details__header-total { flex-grow: 1; flex-basis: 0; text-align: right } @media(min-width:64em) { .point-event-category-details__header-points, .point-event-category-details__header-savings, .point-event-category-details__header-total { order: 3 } } .point-event-category-details__list { display: flex; flex-grow: 1; flex-direction: column } .point-event-category-details__sub-header { margin: 8px 0 } .point-event-category-details__credit-card-message { margin: 16px 0 24px; padding: 16px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd } .point-event-offer { display: flex; margin-bottom: 8px } .point-event-offer__list-item { display: flex; justify-content: space-between } .point-event-offer__icon { width: 24px; height: 24px; padding-right: 32px } .point-event-offer__icon .sprite { width: 24px; height: 24px } @media(min-width:48em) { .point-event-offer__icon { display: none } } .point-event-offer__detail { flex-grow: 3; flex-basis: 0 } @media(min-width:64em) { .point-event-offer__detail { order: 1 } } .point-event-offer__pcf-accelerator { display: inline-block; padding-left: 2em; color: #8a8a8a } .point-event-offer__points { flex-grow: 1; flex-basis: 0; text-align: right } @media(min-width:64em) { .point-event-offer__points { order: 3 } } .point-event-notification { display: flex; flex-flow: row nowrap; align-items: center; background: rgba(29, 166, 143, .3); padding: 10px 15px; margin-top: 20px } .point-event-notification__icon { flex: 0 0 24px; width: 24px; height: 24px; margin: 0 12px 0 0 } .point-event-notification__message { color: #191919 } @media(max-width:47.99em) { .point-event-notification__message { font-size: .9375rem; line-height: 1.4 } } .point-event-notification__message-body { color: #191919 } .confirm-assign-card .flow-tile__title-text { margin-top: 0 } .confirm-assign-card .flow-form-submit__cancel, .confirm-assign-card .flow-form-submit__submit { display: block; margin-left: auto; margin-right: auto } .communication-settings-status { position: relative; background: #fff; padding: 40px 20px; margin: 2px 0; text-align: center } .communication-settings-status p { margin-top: 0 } @media(min-width:48em) { .communication-settings-status { padding: 40px } } .pcid-profile-section { background: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 20px } .pcid-profile-section__details { flex: 1 1 auto } .pcid-profile-section__details .account-setting__inner:nth-child(2) { margin: 1rem 0 } .pcid-profile-section__details .account-setting__value.password { vertical-align: middle } .pcid-profile-section__actions { flex: 0 0 auto; display: flex } .pcid-profile-section__actions .donate-banner__fake-cta, .pcid-profile-section__actions .new-window-link, .pcid-profile-section__actions .tile-item__fake-cta, .pcid-profile-section__actions .video-tile__fake-cta { margin-top: 1rem; width: 100%; display: block; text-align: center } @media(min-width:48em) { .pcid-profile-section { flex-direction: row; padding: 30px 40px } .pcid-profile-section__actions { justify-content: flex-end; align-items: center } .pcid-profile-section__actions .donate-banner__fake-cta, .pcid-profile-section__actions .new-window-link, .pcid-profile-section__actions .tile-item__fake-cta, .pcid-profile-section__actions .video-tile__fake-cta { width: auto; margin-top: 0 } } .subscription-plan { z-index: 1; background: linear-gradient(#14151f, #2d2e39); position: relative; color: #fff; overflow: hidden } .no-subscription-plan__header, .subscription-plan__header { margin-bottom: 32px; z-index: 2 } .no-subscription-plan__title, .subscription-plan__title { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-weight: 600; font-size: 1.375rem; line-height: 1.75rem; margin: 24px 0 0 } @media(min-width:48em) { .no-subscription-plan__title, .subscription-plan__title { font-size: 2rem; line-height: 2.25rem } } .subscription-plan__subscription-status { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .8125rem; line-height: 1.125rem; color: #fff; margin: 8px 0 0 } @media(min-width:48em) { .subscription-plan__subscription-status { font-size: .875rem; line-height: 1.25rem } } @media(min-width:48em)and (min-width:48em) { .subscription-plan__subscription-status { font-size: 1rem; line-height: 1.375rem } } .no-subscription-plan__content h3, .subscription-plan__content h3 { margin: 8px 0 } .no-subscription-plan__content h3 span, .subscription-plan__content h3 span { color: #fff } .no-subscription-plan__content h3 span:after, .subscription-plan__content h3 span:after { color: transparent } .subscription-plan--ring { z-index: -1; width: 165px; height: auto; position: absolute; top: -55px; right: -60px; transform: rotate(225deg) } @media(min-width:48em) { .subscription-plan--ring { width: 310px; top: -120px; right: -120px } } .subscription-plan__main-item { border-bottom: 1px solid #fff; margin-bottom: 24px } .subscription-plan__main-item-title { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-weight: 600; font-size: 1.375rem; line-height: 1.75rem; font-weight: 700 } @media(min-width:48em) { .subscription-plan__main-item-title { font-size: 2rem; line-height: 2.25rem } } .subscription-plan__main-item-text { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .8125rem; line-height: 1.125rem; margin: 0 0 24px } @media(min-width:48em) { .subscription-plan__main-item-text { font-size: .875rem; line-height: 1.25rem } } .subscription-plan__item { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .8125rem; line-height: 1.125rem; display: flex; align-items: center; margin-bottom: 24px; color: #fff } @media(min-width:48em) { .subscription-plan__item { font-size: .875rem; line-height: 1.25rem } } .subscription-plan__item p { margin: 0 } .subscription-plan__item-value { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-weight: 600; font-size: 1.375rem; line-height: 1.75rem; font-weight: 700 } @media(min-width:48em) { .subscription-plan__item-value { font-size: 2rem; line-height: 2.25rem; font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-weight: 600; font-size: 1.25rem; line-height: 1.5rem } } @media(min-width:48em)and (min-width:48em) { .subscription-plan__item-value { font-size: 1.5rem; line-height: 2rem } } .subscription-plan__item-text { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .8125rem; line-height: 1.125rem } @media(min-width:48em) { .subscription-plan__item-text { font-size: .875rem; line-height: 1.25rem } } .subscription-plan__item-badge, .subscription-plan__item-badge--loading { min-width: 46px; height: 46px; border-radius: 12px; padding: 8px; margin-right: 16px; background-color: #2d2e39 } @media(min-width:48em) { .subscription-plan__item-badge, .subscription-plan__item-badge--loading { width: 56px; height: 56px } } .subscription-plan__item-badge--loading { display: flex; justify-content: center; align-items: center } .subscription-plan__item-icon--points { background: url(https://dis-prod.assetful.loblaw.ca/content/dam/loblaw-companies-limited/creative-assets/pc-optimum/pc-optimum-insiders/pcoi_value_props_logo_points.png); height: 100%; background-size: contain; background-position: 50%; background-repeat: no-repeat } .subscription-plan__item-icon--shopping { background: url(https://dis-prod.assetful.loblaw.ca/content/dam/loblaw-companies-limited/creative-assets/pc-optimum/pc-optimum-insiders/pcoi_value_props_logo_shopping_list.png); height: 100%; background-size: contain; background-position: 50%; background-repeat: no-repeat } .subscription-plan a { text-decoration: none } .subscription-plan--bold-text { font-weight: 700 } .subscription-plan .pcoi-subscription-logo { max-width: 128px; height: 36px } @media(min-width:48em) { .subscription-plan .pcoi-subscription-logo { max-width: 142px; height: 40px } } .subscription-plan .pcoi-error-tile { margin: 24px 0 } .tile__billing-history { display: flex; flex-direction: column; flex: none; order: 1; flex-grow: 0; margin: 24px 0; background-color: #fff; max-width: 100% } .billing-history__type { margin: 8px 0 } .billing-history__card--number p { font-weight: 400; margin: 4px 0 0 } .billing-history__amount { margin-top: 8px } .billing-history__amount p { font-weight: 400; margin: 4px 0 0 } .tile__empty-state-billing-history { display: flex; flex-direction: column; flex: none; order: 1; flex-grow: 0; margin: 24px 0; max-width: 100%; background-color: #fff; background-image: url(https://dis-prod.assetful.loblaw.ca/content/dam/loblaw-companies-limited/creative-assets/pc-optimum/2021/happy-donut.png); background-position: bottom; background-repeat: no-repeat; background-size: cover } .billing-history-empty-state__message { text-align: center; padding: 36px 23px 151px } @media(min-width:48em) { .billing-history-empty-state__message { padding: 72px 46px 200px } } .billing-history-empty-state__message h4 { margin-bottom: 8px } .billing-history-empty-state__message p { margin: 0 } .no-subscription-plan__header { margin-bottom: 16px } @media(min-width:48em) { .no-subscription-plan__header { margin-bottom: 24px } } .no-subscription-plan__content p { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .8125rem; line-height: 1.125rem; margin: 0 } @media(min-width:48em) { .no-subscription-plan__content p { font-size: .875rem; line-height: 1.25rem } } .no-subscription-plan__button { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.0625rem; width: 100%; background-color: #f9dada; color: #191919; padding: 15px 24px 12px; border-radius: 50px; border-color: transparent; text-decoration: none; margin-top: 24px; font-weight: 600; line-height: normal } .no-subscription-plan__button span { margin: 0 auto } .no-subscription-plan__button:hover { background-color: #fdf0f0; color: #191919 } @media(min-width:48em) { .no-subscription-plan__button { font-size: .875rem; width: auto; display: inline-block } } .expandable-form-wrapper { background-color: #fff; padding: 16px; border-radius: 4px; position: relative; margin-bottom: 16px; color: #403840 } @media(min-width:48em) { .expandable-form-wrapper { padding: 24px } } .expandable-form-wrapper__title { margin: 0 0 16px } .expandable-form-wrapper__toggle { position: absolute; top: 16px; right: 16px } @media(min-width:48em) { .expandable-form-wrapper__toggle { top: 24px; right: 24px } } .expandable-form-wrapper__toggle svg { fill: #403840; width: 14px; height: auto } .expandable-form-wrapper__toggle--close { display: inline-block } .expandable-form-wrapper__collapsed p { margin: 0; word-wrap: break-word } .expandable-form-wrapper__collapsed p:first-of-type { font-weight: 700 } .expandable-form-wrapper__collapsed p:nth-child(2n) { margin-top: 4px } .expandable-form-wrapper .lds__button { font-size: 1rem; line-height: 1.125rem } .expandable-form-wrapper .loading-placeholder { margin-bottom: 4px } .expandable-form-wrapper__payment-info { min-height: 160px } .expandable-form-wrapper__payment-info .payment-info-tile--bold { margin-bottom: 4px } .expandable-form-wrapper__payment-info .payment-info-tile__card p { font-weight: 400 } .expandable-form-wrapper__payment-info .pcoi-error-tile { margin-bottom: 0 } .expandable-form-wrapper__payment-info .pcoi-error-tile span, .expandable-form-wrapper__payment-info .zuora-payment-error span { color: #fff } .expandable-form-wrapper__payment-info .loading-view { margin: 0 } .expandable-form-wrapper__payment-info .loading-view .circle-loader__indicator { border-color: #f9dada #f0f0f0 #f0f0f0 } .tile.subscription-support-tile { background-color: #fff; display: flex; font-size: 1rem; line-height: 1.5rem; padding: 16px; margin-bottom: 16px } .tile.subscription-support-tile .link { text-decoration: none } .tile.subscription-support-tile .support-link { display: flex; flex-basis: 100%; text-decoration: none } .tile.subscription-support-tile .support-link span { color: #403840; font-weight: 700; margin-left: 8px } .tile.subscription-support-tile .support-link span:hover { color: #ac342a } .tile.subscription-support-tile .support-link .manage-subscription__caret { margin-left: auto; fill: #ac342a; width: 1rem } .tile { padding: 16px; border-radius: 16px } @media(min-width:48em) { .tile { padding: 24px } } .page-section { margin-bottom: 40px } .page-section__title { margin: 0 } .page-section__title span { vertical-align: text-top } .page-section__header { display: flex; align-items: center; margin: 0 0 16px } .page-section__link { margin-right: 14px; padding: 0 0 0 8px } .page-section__link svg { height: 20px; width: 12px } @media(min-width:48em) { .page-section { margin-bottom: 64px } .page-section__header { margin: 0 0 32px } .page-section__link { margin-right: 22px } } .flows-background { position: absolute; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; background: #feece8 } .flows-background .sprite { position: absolute } @media(max-width:63.99em) { .flows-background__dot-1, .flows-background__dot-2, .flows-background__dot-3, .flows-background__dot-5, .flows-background__dot-6, .flows-background__dot-8, .flows-background__ring-5 { display: none } } @media(min-width:64em) { .flows-background__dot-9, .flows-background__dot-10, .flows-background__dot-11 { display: none } } .flows-background__ring-1 { width: 20px; height: 20px; top: 260px; right: 1.8%; transform: rotate(-45deg) } @media(min-width:48em) { .flows-background__ring-1 { width: 38px; height: 38px; right: 50%; margin-right: -374px; top: 430px; transform: rotate(135deg) } } @media(min-width:64em) { .flows-background__ring-1 { width: 450px; height: 450px; top: -150px; margin-right: 0; right: -185px; transform: rotate(-45deg) } } .flows-background__ring-2 { width: 46px; height: 46px; top: -10px; left: 9%; transform: rotate(-45deg) } @media(min-width:48em) { .flows-background__ring-2 { width: 92px; height: 92px; top: -32px } } @media(min-width:64em) { .flows-background__ring-2 { width: 110px; height: 110px; top: 270px; left: -55px; transform: none } } .flows-background__ring-3 { width: 18px; height: 18px; left: 2%; top: 588px; transform: rotate(-45deg) } @media(min-width:48em) { .flows-background__ring-3 { width: 36px; height: 36px; left: 50%; margin-left: -346px } } @media(min-width:64em) { .flows-background__ring-3 { width: 330px; height: 330px; top: 950px; left: 50%; margin-left: -540px; transform: rotate(-90deg) } } .flows-background__ring-4 { width: 140px; height: 140px; bottom: -90px; left: -58px } @media(min-width:64em) { .flows-background__ring-4 { width: 110px; height: 110px; top: 1780px; right: 50%; margin-right: -390px; bottom: auto; left: auto } } @media(min-width:64em) { .flows-background__ring-5 { width: 330px; height: 330px; top: 2000px; left: 50%; margin-left: -516px; transform: rotate(90deg) } } @media(min-width:64em) { .flows-background__dot-1 { width: 14px; height: 14px; top: 538px; left: 17% } } @media(min-width:64em) { .flows-background__dot-2 { width: 42px; height: 42px; top: 600px; left: 10% } } @media(min-width:64em) { .flows-background__dot-3 { width: 22px; height: 22px; top: 756px; right: 17% } } .flows-background__dot-4 { width: 28px; height: 28px; top: -7px; right: 5.3% } @media(min-width:48em) { .flows-background__dot-4 { width: 54px; height: 54px; top: -24px } } @media(min-width:64em) { .flows-background__dot-4 { top: 792px; right: 8.5% } } @media(min-width:64em) { .flows-background__dot-5 { width: 14px; height: 14px; top: 1286px; right: 7.5% } } @media(min-width:64em) { .flows-background__dot-6 { width: 44px; height: 44px; top: 1350px; right: 12.5% } } .flows-background__dot-7 { width: 24px; height: 24px; top: 190px; left: -11px } @media(min-width:48em) { .flows-background__dot-7 { width: 44px; height: 44px; left: -16px; top: 300px } } @media(min-width:64em) { .flows-background__dot-7 { width: 54px; height: 54px; top: 1600px; left: 17.5% } } @media(min-width:64em) { .flows-background__dot-8 { width: 22px; height: 22px; top: 1708px; left: 13% } } .flows-background__dot-9 { width: 16px; height: 16px; right: -8px; top: 430px } @media(min-width:48em) { .flows-background__dot-9 { top: 230px } } .flows-background__dot-10 { width: 66px; height: 66px; right: -54px; top: 770px } .flows-background__dot-11 { width: 16px; height: 16px; bottom: -2px; right: 12% } .homepage-join-background * { position: absolute } @media(max-width:47.99em) { .homepage-join-background * { display: none } } .homepage-join-background__circle-left { position: absolute; width: 120px; height: 120px; top: 40px; left: -55px } .homepage-join-background__circle-right { position: absolute; width: 650px; height: 650px; bottom: -442px; right: -268px; transform: rotate(45deg) } .homepage-join-background__dot { position: absolute; width: 70px; height: 70px; bottom: -35px; left: 14% } .homepage-offers-extended-background { position: relative; right: 50%; height: 0; font-size: 0 } @media(max-width:79.99em) { .homepage-offers-extended-background { display: none } } .homepage-offers-extended-background__inner { position: relative; display: inline-block; width: 100%; height: 0; min-width: 1700px; margin-right: -100% } .homepage-offers-extended-background__ring-left { position: absolute; transform: rotate(45deg); width: 180px; height: 180px; top: -90px; left: -90px } .homepage-offers-extended-background__ring-right { position: absolute; transform: rotate(135deg); height: 200px; width: 200px; top: 150px; right: -120px } .homepage-offers-header-background__ring { position: absolute; transform: rotate(-45deg); height: 320px; width: 320px; bottom: -210px; left: -135px } @media(max-width:47.99em) { .homepage-offers-header-background__ring { display: none } } @media(min-width:64em) { .homepage-offers-header-background__ring { height: 520px; width: 520px; bottom: -340px; left: -215px } } .homepage-offers-header-background__dot { position: absolute; width: 40px; height: 40px; top: 46px; right: 9% } @media(max-width:47.99em) { .homepage-offers-header-background__dot { display: none } } @media(min-width:64em) { .homepage-offers-header-background__dot { width: 60px; height: 60px; top: 100px; right: 13% } } .utility-header-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; background-image: url(https://dis-prod.assetful.loblaw.ca/content/dam/loblaw-companies-limited/creative-assets/pc-optimum/2021/pco-rings-header-background.png); background-color: #f9dada; background-size: cover } @media(min-width:48em) { .utility-header-bg { min-height: 300px } } .utility-header-bg__insiders { background-image: url(https://dis-prod.assetful.loblaw.ca/content/dam/loblaw-companies-limited/creative-assets/pc-optimum/2021/pcoi-rings-header-background.png); background-color: #2d2e39 } @media(min-width:48em) { .utility-header .utility-header-bg { min-height: 220px } } .checklist-polling { display: flex; justify-content: center; background: #fbf1f1; border-radius: 6px; margin-bottom: 17px } .checklist-polling__not-answered-message { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 1rem 1rem .5rem; font-size: .875rem; text-align: center } .checklist-polling__not-answered-buttonGroup { display: flex; justify-content: center; padding-bottom: .75rem } .checklist-polling__not-answered-dash { padding-left: 1rem; padding-right: 1rem; color: #655c6c; padding-top: .188rem } .checklist-polling__answered-message { display: flex; justify-content: center; margin: 0; padding: 1rem; font-size: .875rem; text-align: center } .checklist-sdm__logo { display: flex; justify-content: center; margin-top: 24px; margin-bottom: 16px; border-top: 1px solid #9e93a6 } .checklist-sdm__logo .sprite { width: 125px; height: 37px; margin-top: 24px } .checklist-sdm__name { display: flex; font-weight: 700; word-break: break-word } .checklist-sdm__name .sprite { margin: 0 11px 0 0; width: 18px; height: 18px } .checklist-sdm__description { display: flex; margin-bottom: 17px; margin-left: 29px } .checklist-sdm__description span { font-size: .875rem; line-height: 1.43; margin-top: 4px; color: #655c6c; word-break: break-word } .account-setting--security .checklist-sdm .account-setting__turn-off-button, .account-setting--security .checklist-sdm .account-setting__turn-on-button, .checklist-sdm .account-setting--security .account-setting__turn-off-button, .checklist-sdm .account-setting--security .account-setting__turn-on-button, .checklist-sdm .button, .checklist-sdm .household-grid__invite-button, .checklist-sdm .link--theme-button, .checklist-sdm .link--theme-button--large-primary, .checklist-sdm .link--theme-button--large-secondary, .checklist-sdm .link--theme-button--small-primary, .checklist-sdm .link--theme-button--small-secondary, .checklist-sdm .link--theme-button-gray, .checklist-sdm .link--theme-button-red, .checklist-sdm .link--theme-button-transparent, .checklist-sdm .link--theme-button-transparent-white, .checklist-sdm .link--theme-button-white, .checklist-sdm .load-shop-pay-header__link, .checklist-sdm .load-shop-pay-module__link, .checklist-sdm .marketing-page-header__link, .checklist-sdm .marketing-page-module__link, .checklist-sdm .partnership-perk-details__cta, .checklist-sdm .partnership-perk-redeemed-success__cta, .checklist-sdm .points-days-cta-section__content .cta-section__link, .checklist-sdm .points-days__cta, .points-days-cta-section__content .checklist-sdm .cta-section__link { width: 100%; justify-content: center } .checklist-how-points-work { padding: 32px; border-bottom: 1px solid rgba(158, 147, 166, .4) } .checklist-how-points-work__header { color: #403840; font-weight: 600; margin: 0 } .checklist-how-points-work__illustration { display: block; max-height: 128px; margin: 16px 0; max-width: 100% } @media(min-width:64em) { .checklist-how-points-work__illustration { margin: 24px 0 } } .checklist-how-points-work .link { color: #403840; font-weight: 700; display: inline-block; text-decoration: none } .checklist-how-points-work .link:hover { color: #ee3124; text-decoration: underline } .checklist-item { display: flex } .checklist-item--placeholder .checklist-item__icon { width: 60px; margin-right: 16px } .checklist-item--placeholder .loading-placeholder:last-child>.loading-placeholder__inner { margin-bottom: 0 } .checklist-item--placeholder .checklist-item__item-actions { flex: 1 0 auto } .checklist-item .link { color: #403840; font-weight: 700; display: inline-block; text-decoration: none; font-size: 1rem; line-height: 1.5 } .checklist-item .link:hover { color: #ee3124; text-decoration: underline } .checklist-how-points-work__subcopy, .checklist-item__subcopy { color: #655c6c; margin: 8px 0 0 } .checklist-item__icon { margin-right: 10px; min-width: 48px; height: 48px; position: relative } .checklist-item__icon svg { width: 48px } .checklist-item__icon--pcocard { position: absolute; left: -2px; width: 52px } .checklist-item__icon .placeholder { margin-top: 0 } .checklist-item__ignore-sprite { align-items: center; align-self: flex-start; display: flex; flex-shrink: 0; fill: #191919; flex-direction: column; height: 40px; justify-content: center; margin: -10px -10px 0 auto; width: 40px } .checklist-item__ignore-sprite:hover { fill: #191919 } .checklist-item__ignore-sprite .sprite { height: 24px; width: 24px } .checklist-item__watch-how-link { color: #da291c } .checklist-how-points-work__right-arrow, .checklist-item__right-arrow { margin-top: -3px; vertical-align: middle; fill: #da291c; height: 14px } .account-device { flex-grow: 1; padding: 20px 0 20px 20px; margin-bottom: 10px; background: #fff; display: flex; flex-flow: row nowrap; justify-content: flex-start } @media(min-width:48em) { .account-device { padding: 20px 0 20px 40px } } .account-device:last-child { margin-bottom: 0 } .account-device-container { display: flex; align-items: center; width: 100% } .account-device-container>.account-device { margin-bottom: 0 } @media(min-width:48em) { .account-device-toggle-button { margin-right: 20px } } .account-device__icon-container { flex-basis: 46px; flex-shrink: 0; display: flex; align-items: flex-start } @media(min-width:48em) { .account-device__icon-container { flex-basis: 52px; margin-right: 48px } } .account-device__icon { display: block } .account-device__icon--type-card, .account-device__icon--type-pcf, .account-device__icon--type-pcfbnkgcard, .account-device__icon--type-pcfconvenience, .account-device__icon--type-pcfcreditcard, .account-device__icon--type-pcfdebitcard, .account-device__icon--type-pcfproduct, .account-device__icon--type-pcsproduct { width: 52px; height: 40px } @media(min-width:48em) { .account-device__icon--type-card, .account-device__icon--type-pcf, .account-device__icon--type-pcfbnkgcard, .account-device__icon--type-pcfconvenience, .account-device__icon--type-pcfcreditcard, .account-device__icon--type-pcfdebitcard, .account-device__icon--type-pcfproduct, .account-device__icon--type-pcsproduct { width: 52px; height: 34px } } .account-device__icon--type-fob { width: 46px; height: 25px } @media(min-width:48em) { .account-device__icon--type-fob { width: 52px; height: 28px } } .account-device__icon--type-app { width: 50px; height: 40px } @media(min-width:48em) { .account-device__icon--type-app { width: 52px; height: 52px } } .account-device__icon--type-mobilewallet, .account-device__icon--type-phonenumber { opacity: 0 } .account-device__content { margin-left: 20px } @media(min-width:48em) { .account-device__content { display: flex; flex-direction: row; flex-grow: 1; justify-content: space-between; align-items: center; margin-left: 0 } } .account-device__content--expanded { margin-left: 20px; justify-content: flex-start } @media(min-width:48em) { .account-device__content--expanded { margin-left: 0 } } .account-device__legacy-type, .account-device__nickname { color: #191919 } @media(min-width:48em) { .account-device__legacy-type, .account-device__nickname { margin-right: 20px; font-size: 1.125rem; flex-basis: 195px } } @media(min-width:64em) { .account-device__legacy-type, .account-device__nickname { margin-right: 40px; flex-basis: 250px } } .account-device__nickname { min-width: 80px; margin-bottom: 6px } .account-device__nickname:lang(fr-CA) sup { font-size: .6rem } .account-device__secondary-info { margin-bottom: 6px } @media(min-width:48em) { .account-device__secondary-info { margin-bottom: 0; display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start } } @media(min-width:64em) { .account-device__secondary-info { margin-right: 20px } } .account-device__last-four { white-space: nowrap } @media(min-width:48em) { .account-device__last-four { margin-right: 20px } } .account-device__state { color: #191919; display: flex; flex-basis: 180px } @media(min-width:48em) { .account-device__state { margin-top: 0 } } @media(min-width:64em) { .account-device__state { align-items: center } } .account-device__state-icon { vertical-align: text-bottom; height: 18px; width: 18px; fill: #585858; margin-right: 4px } @media(min-width:48em) { .account-device__state-icon { margin-top: -5px; height: 24px; width: 24px } } .account-device__checkmark { flex-shrink: 0; width: 15px; height: 15px; margin-right: 8px; position: relative } @media(min-width:64em) { .account-device__checkmark { bottom: 2px } } .error-screen { max-width: 794px; margin: 60px auto; padding: 0 16px; text-align: center } @media(min-width:48em) { .error-screen { margin: 100px auto } } .error-screen__image-container { width: 100%; margin-bottom: 40px } .error-screen__image-container img { width: 200px } @media(min-width:48em) { .error-screen__image-container img { width: 300px } } .error-screen__title { margin-bottom: 16px } .error-screen__content { max-width: 480px } @font-face { font-display: swap; font-family: Inter; font-weight: 600; src: url(/static/fonts/inter-semibold.woff2) format("woff2"), url(/static/fonts/inter-semibold.woff) format("woff") } @font-face { font-display: swap; font-family: Inter; font-weight: 400; src: url(/static/fonts/inter-regular.woff2) format("woff2"), url(/static/fonts/inter-regular.woff) format("woff") } .cancel-subscription__wrapper { background-color: #fff; border-radius: 16px; color: #403840 } .cancel-subscription__wrapper__active-member>span { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .8125rem; line-height: 1.125rem; display: inline-block; font-size: 1.125rem; margin-bottom: 24px } @media(min-width:48em) { .cancel-subscription__wrapper__active-member>span { font-size: .875rem; line-height: 1.25rem } } .cancel-subscription__wrapper__cancelled-member>span:first-child { display: block; margin-bottom: 24px } .cancel-subscription__wrapper__text__bold { font-weight: 700 } .cancel-subscription__btn { background: #fff; border-radius: 24px; display: flex; padding: 12px 16px } .cancel-subscription__btn:hover { background-color: #403840 } .cancel-subscription__btn:hover span { color: #fff } .cancel-subscription__btn span { color: #403840; font-weight: 600; font-size: 16px; margin: 0; align-self: center } .cancel-subscription__modal__bold { font-weight: 700 } .cancel-subscription__modal-container { z-index: 999; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: rgba(6, 17, 22, .65) } .cancel-subscription__modal-content { display: flex; flex-direction: column; position: relative; background-color: #fff; padding: 24px; border-radius: 24px; width: 90%; max-width: 561px } .cancel-subscription__modal-content--close { position: absolute; top: 24px; right: 24px } .cancel-subscription__modal-content--close svg { fill: #403840 } .cancel-subscription__modal-content .pcoi-error-tile { margin: 16px 0 0 } .cancel-subscription__modal-content .pcoi-error-tile p:first-of-type { color: #fff } .cancel-subscription__modal-content .loading-view { margin: 0 } .cancel-subscription__modal-content .loading-view .circle-loader__indicator { border-color: #f9dada #f0f0f0 #f0f0f0 } .cancel-subscription__modal--title { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.25rem; line-height: 1.5rem; font-weight: 600; margin: 0 0 16px; padding-right: 16px } @media(min-width:48em) { .cancel-subscription__modal--title { font-size: 1.5rem; line-height: 2rem } } .cancel-subscription__modal--description { font-family: Inter, sans-serif; font-size: 1rem; margin: 0; color: #fff; -webkit-font-smoothing: antialiased; font-size: .938rem; line-height: 1.25rem; color: #403840 } @media(min-width:768px) { .cancel-subscription__modal--description { font-size: 1rem; line-height: 1.5rem } } .cancel-subscription__modal--description>span:first-child { display: block; margin-bottom: 16px } .cancel-subscription__modal-btn-wrapper { display: flex; flex-flow: row; margin-top: 24px; flex-direction: column-reverse } @media(min-width:48em) { .cancel-subscription__modal-btn-wrapper { flex-direction: row-reverse } } .account-setting--security .cancel-subscription__modal-btn-wrapper .account-setting__turn-off-button, .account-setting--security .cancel-subscription__modal-btn-wrapper .account-setting__turn-on-button, .cancel-subscription__modal-btn-wrapper .account-setting--security .account-setting__turn-off-button, .cancel-subscription__modal-btn-wrapper .account-setting--security .account-setting__turn-on-button, .cancel-subscription__modal-btn-wrapper .button, .cancel-subscription__modal-btn-wrapper .household-grid__invite-button, .cancel-subscription__modal-btn-wrapper .link--theme-button, .cancel-subscription__modal-btn-wrapper .link--theme-button--large-primary, .cancel-subscription__modal-btn-wrapper .link--theme-button--large-secondary, .cancel-subscription__modal-btn-wrapper .link--theme-button--small-primary, .cancel-subscription__modal-btn-wrapper .link--theme-button--small-secondary, .cancel-subscription__modal-btn-wrapper .link--theme-button-gray, .cancel-subscription__modal-btn-wrapper .link--theme-button-red, .cancel-subscription__modal-btn-wrapper .link--theme-button-transparent, .cancel-subscription__modal-btn-wrapper .link--theme-button-transparent-white, .cancel-subscription__modal-btn-wrapper .link--theme-button-white, .cancel-subscription__modal-btn-wrapper .load-shop-pay-header__link, .cancel-subscription__modal-btn-wrapper .load-shop-pay-module__link, .cancel-subscription__modal-btn-wrapper .marketing-page-header__link, .cancel-subscription__modal-btn-wrapper .marketing-page-module__link, .cancel-subscription__modal-btn-wrapper .partnership-perk-details__cta, .cancel-subscription__modal-btn-wrapper .partnership-perk-redeemed-success__cta, .cancel-subscription__modal-btn-wrapper .points-days-cta-section__content .cta-section__link, .cancel-subscription__modal-btn-wrapper .points-days__cta, .points-days-cta-section__content .cancel-subscription__modal-btn-wrapper .cta-section__link { border-radius: 24px; height: auto; padding: 12px 16px; min-height: 46px; white-space: normal; margin-bottom: 24px } @media(min-width:20em) { .account-setting--security .cancel-subscription__modal-btn-wrapper .account-setting__turn-off-button, .account-setting--security .cancel-subscription__modal-btn-wrapper .account-setting__turn-on-button, .cancel-subscription__modal-btn-wrapper .account-setting--security .account-setting__turn-off-button, .cancel-subscription__modal-btn-wrapper .account-setting--security .account-setting__turn-on-button, .cancel-subscription__modal-btn-wrapper .button, .cancel-subscription__modal-btn-wrapper .household-grid__invite-button, .cancel-subscription__modal-btn-wrapper .link--theme-button, .cancel-subscription__modal-btn-wrapper .link--theme-button--large-primary, .cancel-subscription__modal-btn-wrapper .link--theme-button--large-secondary, .cancel-subscription__modal-btn-wrapper .link--theme-button--small-primary, .cancel-subscription__modal-btn-wrapper .link--theme-button--small-secondary, .cancel-subscription__modal-btn-wrapper .link--theme-button-gray, .cancel-subscription__modal-btn-wrapper .link--theme-button-red, .cancel-subscription__modal-btn-wrapper .link--theme-button-transparent, .cancel-subscription__modal-btn-wrapper .link--theme-button-transparent-white, .cancel-subscription__modal-btn-wrapper .link--theme-button-white, .cancel-subscription__modal-btn-wrapper .load-shop-pay-header__link, .cancel-subscription__modal-btn-wrapper .load-shop-pay-module__link, .cancel-subscription__modal-btn-wrapper .marketing-page-header__link, .cancel-subscription__modal-btn-wrapper .marketing-page-module__link, .cancel-subscription__modal-btn-wrapper .partnership-perk-details__cta, .cancel-subscription__modal-btn-wrapper .partnership-perk-redeemed-success__cta, .cancel-subscription__modal-btn-wrapper .points-days-cta-section__content .cta-section__link, .cancel-subscription__modal-btn-wrapper .points-days__cta, .points-days-cta-section__content .cancel-subscription__modal-btn-wrapper .cta-section__link { width: 100% } } @media(min-width:48em) { .cancel-subscription__modal-btn-wrapper .button--theme-white-gray { margin-right: 16px } } .header-points { display: flex; flex-direction: column; color: #ac342a } @media(min-width:64em) { .header-points { flex-direction: row; flex-grow: 1; justify-content: flex-end; margin-bottom: 3px } } .header-points--loading-indicator-available .header-points__points-description { display: none } @media(min-width:64em) { .header-points--loading-indicator-available .header-points__points-description { display: block } } .header-points strong { color: #ac342a } .header-points--insider strong { color: #f9dada } .header-points__points-redeem { display: none } @media(min-width:64em) { .header-points__points-redeem { display: block; line-height: 24px } } .header-points__points-combined-points-redeem { display: block } @media(min-width:64em) { .header-points__points-combined-points-redeem { display: none } } .header-points__empty-state p, .header-points__points-balance p, .header-points__redeemable p { margin: 0 } .header-points__points-balance, .header-points__redeemable { display: flex; text-align: center } .header-points__points-balance .loading-placeholder, .header-points__redeemable .loading-placeholder { margin-bottom: 16px } @media(min-width:64em) { .header-points__points-balance .loading-placeholder, .header-points__redeemable .loading-placeholder { margin-bottom: 8px } } .header-points__points-balance { flex-direction: column } .header-points__points-balance .loading-placeholder__inner { line-height: 28px } @media(min-width:64em) { .header-points__points-balance .loading-placeholder__inner { line-height: 32px } } @media(min-width:64em) { .header-points__points-balance-placeholder-bottom { display: none } } .header-points__points-balance-placeholder-middle .loading-placeholder__inner { line-height: 32px } @media(min-width:64em) { .header-points__points-balance-placeholder-middle .loading-placeholder__inner { line-height: 28px } } .header-points__points-balance p:first-of-type { order: 1; font-size: 3.125rem; margin: 0; line-height: 1.5 } @media(min-width:64em) { .header-points__points-balance p:first-of-type { order: 0; text-align: center; margin: 0; font-size: 2.625rem; line-height: 1.5 } } .header-points__redeemable { order: 1; justify-content: center; font-weight: 400 } @media(min-width:64em) { .header-points__redeemable { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; flex-direction: column; margin-left: 20%; align-items: center } } .header-points__redeemable p:first-of-type { order: 1; margin-left: 5px; line-height: 1.5 } @media(min-width:64em) { .header-points__redeemable p:first-of-type { font-weight: 700; order: 0; margin-left: 0; font-size: 2.625rem; line-height: 1.5 } } .header-points__redeemable .loading-placeholder { display: none } @media(min-width:64em) { .header-points__redeemable .loading-placeholder { display: block } } .header-points__redeemable .loading-placeholder__inner { line-height: 28px } @media(min-width:64em) { .header-points__redeemable .loading-placeholder__inner { line-height: 32px } } .header-points__redeemable-placeholder-bottom .loading-placeholder__inner { line-height: 32px } @media(min-width:64em) { .header-points__redeemable-placeholder-bottom .loading-placeholder__inner { line-height: 28px } } .header-greeting { height: 1px; width: 1px; overflow: hidden; display: block; margin-bottom: 8px } @media(min-width:64em) { .header-greeting { height: -moz-fit-content; height: fit-content; width: auto; margin-bottom: 0 } } .header-greeting__placeholder-name { display: none } .header-greeting__placeholder-name .loading-placeholder__inner { line-height: 16px } @media(min-width:64em) { .header-greeting__placeholder-name { display: block } } .header-greeting__placeholder-message .loading-placeholder__inner { line-height: 28px } .header-greeting h1, .header-greeting p { line-height: 1 } .header-greeting h1 { font-size: 2rem; margin: 0 } @media(min-width:64em) { .header-greeting h1 { font-size: 2.625rem } } .header-greeting p { margin: 0 0 8px } .header-member-text { height: 1px; width: 1px; overflow: hidden; margin-bottom: 8px } @media(min-width:64em) { .header-member-text { height: -moz-fit-content; height: fit-content; width: auto } } @media(min-width:64em) { .header-message__loading-indicator-on { width: 400px } } .header-message__loading-indicator-off { color: #ac342a } .header-message__loading-indicator-off.header-message--insider { color: #f9dada } .header-offer-loading-indicator-error, .header-offer-loading-indicator-loaded, .header-offer-loading-indicator-loading { display: flex; align-items: center; font-weight: 600; padding: 4px 8px; margin: 0 -8px } @media(min-width:64em) { .header-offer-loading-indicator-error, .header-offer-loading-indicator-loaded, .header-offer-loading-indicator-loading { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-weight: 600; font-size: 1.375rem; line-height: 1.75rem; display: inline-block; padding: 8px 16px; margin: 0 -16px; height: 52px } } @media(min-width:64em)and (min-width:48em) { .header-offer-loading-indicator-error, .header-offer-loading-indicator-loaded, .header-offer-loading-indicator-loading { font-size: 2rem; line-height: 2.25rem } } .header-offer-loading-indicator-error span, .header-offer-loading-indicator-loaded span, .header-offer-loading-indicator-loading span { vertical-align: text-top; color: #ac342a; line-height: 36px } @media(min-width:64em) { .header-offer-loading-indicator-error span, .header-offer-loading-indicator-loaded span, .header-offer-loading-indicator-loading span { height: 28px; font-size: 28px } } .header-offer-loading-indicator-error .lottieAnimation, .header-offer-loading-indicator-loaded .lottieAnimation, .header-offer-loading-indicator-loading .lottieAnimation { display: inline-block; vertical-align: top; margin-left: 6px; width: 16px; height: 16px } @media(min-width:64em) { .header-offer-loading-indicator-error .lottieAnimation, .header-offer-loading-indicator-loaded .lottieAnimation, .header-offer-loading-indicator-loading .lottieAnimation { width: 32px; height: 32px } } .header-offer-loading-indicator-error .lottieAnimation div, .header-offer-loading-indicator-loaded .lottieAnimation div, .header-offer-loading-indicator-loading .lottieAnimation div { display: flex } .header-offer-loading-indicator-error .lottieAnimation div svg path, .header-offer-loading-indicator-loaded .lottieAnimation div svg path, .header-offer-loading-indicator-loading .lottieAnimation div svg path { stroke: #ac342a } .header-offer-loading-indicator-error .lottieAnimation img, .header-offer-loading-indicator-loaded .lottieAnimation img, .header-offer-loading-indicator-loading .lottieAnimation img { width: 100% } .header-offer-loading-indicator-loaded { display: flex; border-radius: 100px; background-color: hsla(0, 0%, 100%, 0); animation: backgroundFadeout 3.3s linear } .header-offer-loading-indicator--insider.header-offer-loading-indicator-loaded span, .header-offer-loading-indicator--insider.header-offer-loading-indicator-loading span { color: #f9dada; animation: pcoiFontFade 3.3s linear } .header-offer-loading-indicator--insider.header-offer-loading-indicator-loaded .lottieAnimation svg path, .header-offer-loading-indicator--insider.header-offer-loading-indicator-loading .lottieAnimation svg path { stroke: #f9dada; animation: pcoiFontFade 3.3s linear } @keyframes backgroundFadeout { 0% { background-color: hsla(0, 0%, 100%, 0) } 45.5% { background-color: #fff } 91% { background-color: #fff } to { background-color: hsla(0, 0%, 100%, 0) } } .header-error-empty-state--right { text-align: center; max-width: 320px } @media(min-width:64em) { .header-error-empty-state--right { text-align: right } } .site-footer { margin-top: auto; border-top: 1px solid #ddd; background: #fff; z-index: 3 } .site-footer__top { padding: 35px 22px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between } @media(min-width:48em) { .site-footer__top { padding: 70px 40px 40px } } .site-footer__tagline { color: #403840; margin: 16px 0 } @media(min-width:48em) { .site-footer__tagline { margin: 18px 0 } } .site-footer__tagline--bold { font-weight: 700 } .site-footer__links { flex: 1 0 auto; width: 50%; padding-right: 24px } @media(min-width:48em) { .site-footer__links { flex: 1 0 auto; width: 25% } } @media(min-width:64em) { .site-footer__links { flex: 1 0 auto; width: 25% } } .site-footer__links-title { margin-top: .8rem; margin-bottom: 1.5rem } .site-footer__links-list { margin: 0; padding: 0; list-style: none } .site-footer__links-list-item { margin-bottom: 1rem } .site-footer__links-social { flex: 1 0 auto; width: 100%; padding-bottom: 35px } @media(min-width:64em) { .site-footer__links-social { width: 25% } } .site-footer__ada-chatbot { text-align: left } .site-footer__logo svg { width: 92px; height: 40px } .site-footer__social-media { padding: 0; margin: 0; list-style: none } .site-footer__social-media, .site-footer__social-media-link-icon { display: flex; align-items: center } .site-footer__social-media-link-icon .sprite { margin-right: 24px; height: 16px } @media(min-width:64em) { .site-footer__app-links { padding-left: 50px } } .site-footer__app-links-title { margin-top: 0 } .site-footer__app-links-link { font-size: 16px } .site-footer__badges { display: flex; flex-direction: row; justify-content: flex-start; padding-top: 10px } .site-footer__badge-app { flex-basis: 110px } .site-footer__badge-app:first-child { margin-right: 20px } .site-footer__badge-app-svg { pointer-events: none; width: 100%; height: 40px } .site-footer__bottom { color: #ee3124; -webkit-font-smoothing: antialiased; padding: 0 20px } @media(min-width:48em) { .site-footer__bottom { padding: 0 40px } } .site-footer__bottom-inner { border-top: 1px solid rgba(248, 100, 87, .4); display: flex; flex-direction: column; padding: 16px 0 32px } .site-footer__copyright { color: #da291c } @media(min-width:48em) { .site-footer__copyright { display: flex; justify-content: flex-start } } .site-footer .locale-toggle { margin-top: 8px; color: #da291c; align-items: flex-start } .site-footer .locale-toggle__link--clickable:hover { opacity: .8 } .accept-household-invitation-page .flow-tile { margin-bottom: 60px } .accept-household-invitation-page__error { margin-top: 60px } @media(min-width:48em) { .accept-household-invitation-page__error { margin-top: 120px } } .accept-invitation-info { max-width: none } @media(min-width:48em) { .accept-invitation-info { padding: 0 30px } } .accept-invitation-info__title { margin-top: 0 } .accept-invitation-info__member { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; display: flex; align-items: center; min-height: 80px; font-weight: 400; padding: 24px; background: #f0f0f0; text-align: left; margin-top: 8px } @media(min-width:48em) { .accept-invitation-info__member { min-height: 90px; padding: 34px 34px 34px 60px } } .accept-invitation-info__member .sprite { min-width: 20px; width: 20px; height: 20px; margin-right: 20px } @media(min-width:48em) { .accept-invitation-info__member .sprite { width: 24px; height: 24px } } .accept-invitation-info__member-placeholder-image { min-width: 20px; width: 20px; height: 20px; margin-right: 20px } @media(min-width:48em) { .accept-invitation-info__member-placeholder-image { width: 28px; height: 28px } } .accept-invitation-info__join-button, .accept-invitation-info__skip-button { display: block; margin-left: auto; margin-right: auto; margin-top: 16px; border: none; cursor: pointer } .accept-invitation-info__join-button { padding: 16px; background: #191919; color: #fff } .accept-invitation-info__skip-button { background: none; color: #ee3124 } .accept-invitation-info__drawer { margin: 30px auto 100px; max-width: none } .accept-invitation-info__drawer .toggleable-drawer__close-button { display: block } .accept-invitation-info__drawer .toggleable-drawer-content__title { padding: 0 10px } .accept-invitation-info__drawer .toggleable-drawer--placeholder { min-height: 40px; padding: 10px } .accept-invitation-info__drawer:after { content: ""; display: block; height: 1px; width: 100%; background: #ddd; margin-top: 50px; position: absolute; left: 0 } .accept-invitation-info__placeholder-paragraph { line-height: 1.9 } .points-summary__container { max-width: 450px; margin: 0 auto } .points-summary__container:first-child { margin-top: 50px } .points-summary__container:nth-child(2) { margin-top: 30px } .points-summary__container--precombined .points-summary__inner:nth-child(2) { font-weight: 700 } .points-summary__container--precombined:after { margin-top: 30px } .points-summary__inner { display: flex; flex-flow: row nowrap; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; margin: 5px 0 } .points-summary__title { text-align: left } .points-summary__balance { text-align: right } .points-summary__redeemable { text-align: right; flex-basis: 100%; margin-top: 5px } .points-summary__container--precombined:after, .points-summary__separator { display: block; content: ""; width: 100%; height: 1px; background: #ddd; left: 0 } .points-summary-tile__drawer { margin-top: 30px; max-width: none } @media(min-width:48em) { .points-summary-tile__drawer { margin: 30px 30px 10px } } .points-summary-tile__drawer .toggleable-drawer__close-button { display: block } .points-summary-tile__drawer .toggleable-drawer-content__title { padding: 0 10px } .points-summary-tile__drawer:after { display: none } .legal-page { margin: 38px 0 80px } @media(min-width:48em) { .legal-page { margin-top: 70px } } .legal-page__header { margin-bottom: 35px } @media(min-width:48em) { .legal-page__header { display: flex } } .legal-page__icon { display: block; margin: 0 auto 30px; width: 130px; height: 62px } @media(min-width:48em) { .legal-page__icon { margin: 0 0 0 auto; width: 154px; height: 74px; order: 2; flex-shrink: 0 } } @media(min-width:48em) { .legal-page__header-content { order: 1 } } .legal-page__header-content .loading-placeholder { text-align: center } .legal-page__heading { margin-top: 0; text-align: center } .legal-page__subheading { text-align: center } .legal-page__section { background-color: #fff; padding: 30px 18px; margin-bottom: 10px } @media(min-width:48em) { .legal-page__section { padding: 40px; margin-bottom: 20px } } .legal-page__section-title { margin-top: 0 } .legal-page__body { font-size: .875rem; line-height: 1.571428571 } @media(min-width:48em) { .legal-page__body { line-height: 1.857142857 } } .legal-page__alpha-list { list-style-type: lower-alpha } .legal-page__custom-ol { list-style-type: none; position: relative } .legal-page__custom-ol li:before { content: attr(data-section-number); position: absolute; left: 0; width: 40px; padding-right: 8px; text-align: right } .legal-page h3 { text-decoration: underline } .legal-page__indented-paragraph { margin-right: 20px; margin-left: 20px } @media(min-width:48em) { .legal-page__indented-paragraph { margin-right: 40px; margin-left: 40px } } @media(max-width:34.365em) { .social-legal__en .utility-header__title { font-size: 1.6rem } } .social-legal__fr .utility-header__title { font-size: 1.6rem } @media(min-width:34.375em) { .social-legal__fr .utility-header__title { font-size: 2rem } } @media(min-width:48em) { .social-legal__fr .utility-header__title { font-size: 2.5rem } } .error-tile { display: flex; justify-content: flex-start; align-items: flex-start; text-align: left; color: #191919; fill: #191919 } .error-tile__sprite { flex-shrink: 0; width: 24px; height: 24px; margin-right: 14px } .error-tile--light { color: #fff; fill: #fff } .error-tile--light .error-tile__reload-button, .error-tile--light .error-tile__reload-button:hover { color: #fff } .error-offer-tile { text-align: left; background: #f4f1f6; padding: 30px 40px 20px; border: 1px solid #f4f1f6; box-sizing: border-box; border-radius: 8px } @media(min-width:64em) { .error-offer-tile { max-width: 780px; margin: 0 auto } } @media(min-width:48em) { .error-offer-tile { max-width: 688px; margin: 0 auto } } @media(min-width:20em) { .error-offer-tile { padding: 18px } } @media(min-width:64em) { .error-offer-tile { min-width: 780px } } .error-offer-tile__heart-broken-icon { margin-left: 7.78px; margin-bottom: 27px } .error-offer-tile__content-header { color: #655c6c; margin-bottom: 16px } .error-offer-tile__content-body { white-space: pre-line; color: #403840 } .loading-bar__container { flex: 1; display: flex; align-items: center; flex-direction: column; justify-content: center; min-height: 300px } @keyframes shine-lines { 0% { background-position: 0 } to { background-position: 275px } } .loading-placeholder { cursor: default; margin-bottom: 1rem } .loading-placeholder:last-child { margin-bottom: 0 } .loading-placeholder-image, .loading-placeholder__inner { background-image: linear-gradient(90deg, #f4f1f6, #ebe5ee 40px, #f4f1f6 80px); background-size: 275px; display: inline-block; max-width: 100%; color: transparent; animation: shine-lines 1.6s linear infinite; line-height: 1rem } @media(min-width:48em) { .loading-placeholder-image, .loading-placeholder__inner { line-height: 1.25rem } } .loading-placeholder-image--black, .loading-placeholder__inner--black { background-image: linear-gradient(90deg, #d8d4db, #cecbd1 40px, #d8d4db 80px) } .loading-placeholder-image--red, .loading-placeholder__inner--red { background-image: linear-gradient(90deg, #fc827a, #fc8e87 40px, #fc827a 80px) } .loading-placeholder__text { -webkit-user-select: none; -moz-user-select: none; user-select: none; color: transparent } .loading-placeholder__text:after { content: "x" } .loading-placeholder__text::-moz-selection { pointer-events: none; color: transparent } .loading-placeholder__text::selection { pointer-events: none; color: transparent } .circle-loader { width: 70px; height: 70px; border-radius: 50%; overflow: hidden } .circle-loader__indicator { position: relative; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 7px solid #fbf1f1; border-top-color: #f9dada; animation: spin 1.3s linear infinite } .circle-loader__indicator--left, .circle-loader__indicator--right { height: 10px; width: 7px; background-color: #f9dada; border-radius: 40px; position: absolute } .circle-loader__indicator--right { top: 0; right: 3px; transform: rotate(-45deg) } .circle-loader__indicator--left { top: 0; left: 3px; transform: rotate(45deg) } .loading-screen { min-height: calc(100vh - 80px); display: flex; flex-direction: column; justify-content: center; align-items: center } @keyframes spin { 0% { transform: rotate(0deg) } to { transform: rotate(1turn) } } .login-error { display: flex; min-height: calc(100vh - 84px); flex-direction: column; background: #ffcee1; padding: 20px } .login-error__information { flex: 1 } .login-error__image { flex: 0 0 auto; margin-bottom: 40px } .login-error__image img { max-width: 50% } @media(min-width:34.375em) { .login-error__image img { max-width: 100% } } .login-error__title { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 3.125rem; line-height: 1.1; color: #191919; margin-bottom: 30px; margin-top: 0 } .login-error__paragraph { font-size: 1.1rem; line-height: 1.5; font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-weight: 400; color: #191919 } .login-error__button { display: block; max-width: 220px } @media(min-width:34.375em) { .login-error { flex-direction: row; align-items: center; justify-content: center } .login-error__information { padding: 0 50px } .login-error__image { display: flex; justify-content: center; flex: 1 } } .maximize-points { background-color: #f0f0f0; padding: 0 0 20px } @media(min-width:48em) { .maximize-points { padding: 80px 0 } } .maximize-points .checklist-container { display: block; border-left: none; padding-bottom: 0 } @media(min-width:48em) { .maximize-points .checklist-container { margin: 0 auto; max-width: 640px } } .maximize-points .checklist-subscription { padding: 24px 20px } .maximize-points .checklist__item-wrapper { background: #fff } .maximize-points .checklist__item-wrapper:last-child { border-bottom: none } .maximize-points .checklist-complete { margin: 40px 0 0; border-bottom: none } .maximize-points .checklist-complete:before { width: 100%; margin: -40px 0 0; position: absolute; left: 0 } .maximize-points .checklist-complete__inner { padding: 40px 20px; margin: 0 auto; max-width: 450px } .menu { position: fixed; top: 0; left: 0; right: 0; z-index: 100; box-shadow: 0 1px 5px rgba(158, 147, 166, .2), 0 3px 4px rgba(158, 147, 166, .12), 0 2px 4px rgba(158, 147, 166, .14) } .menu-mobile { align-items: center } @media(min-width:80em) { .menu-mobile { max-width: none } } @media(min-width:48em) { body { overflow: visible !important } } .menu-desktop { height: 80px; padding: 20px 40px; display: flex; align-items: center; justify-content: space-between; font-weight: 700; background-color: #fff } .menu-desktop__logo.sprite, .menu-desktop__logo .sprite { max-width: 94px; height: 40px } .menu-desktop ul { list-style: none; padding: 0 } .menu-desktop__account-list-item, .menu-desktop__list, .menu-desktop__list-item, .menu-desktop__submenu, .menu-desktop__submenu .link { -webkit-font-smoothing: antialiased; text-decoration: none; display: flex; padding: 0; align-items: center; color: #157a77 } .menu-desktop__account-list-item:hover, .menu-desktop__list-item:hover, .menu-desktop__list:hover, .menu-desktop__submenu .link:hover, .menu-desktop__submenu:hover { cursor: pointer } .menu-desktop__list, .menu-desktop__list-item, .menu-desktop__submenu, .menu-desktop__submenu .link { color: #157a77 } .menu-desktop__account-list-item { color: #403840 } .menu-desktop__logo-container { width: 228px } .menu-desktop__account-list-item, .menu-desktop__list-item { padding: 10px 16px 9px; border: 2px solid #fff; border-radius: 24px; text-decoration: none } .menu-desktop__list-item { margin: 0 8px; transition: border-color .1s, color .1s; white-space: nowrap } .menu-desktop__list-item--small { font-size: 14px } .menu-desktop__list-item:focus:not(.menu-desktop__list-item--selected), .menu-desktop__list-item:hover { border-color: #615395; color: #615395; background: #f4f1f6 } .menu-desktop__list-item:active { border-color: #403840; color: #403840 } .menu-desktop__list-item--selected, .menu-desktop__list-item--selected:hover { background: #157a77; border: 1px solid #157a77; color: #fff } .menu-desktop__list { justify-content: flex-end } .menu-desktop__list--anonymous { flex-basis: 228px } .menu-desktop__list--authenticated { flex-basis: 165px } .menu-desktop__account-list-item { position: relative; box-shadow: 0 1px 5px rgba(158, 147, 166, .2), 0 3px 4px rgba(158, 147, 166, .12), 0 2px 4px rgba(158, 147, 166, .14); transition: box-shadow .3s; background: #fff } .menu-desktop__account-list-item .sprite { width: 14px; height: 14px; transform: rotate(90deg); fill: #157a77; margin-left: 9px } .menu-desktop__account-list-item--expanded { box-shadow: 0 4px 5px rgba(158, 147, 166, .2), 0 3px 14px rgba(158, 147, 166, .12), 0 8px 10px rgba(158, 147, 166, .14) } .menu-desktop__account-list-item--expanded .sprite { transform: rotate(270deg) } .menu-desktop__account-list-item:hover { box-shadow: 0 4px 5px rgba(158, 147, 166, .2), 0 3px 14px rgba(158, 147, 166, .12), 0 8px 10px rgba(158, 147, 166, .14) } .menu-desktop__account-list-item--anonymous { margin-left: 16px } .menu-desktop__account-list-item--anonymous:hover { color: #403840 } .menu-desktop__submenu { position: absolute; flex-direction: column; top: 75px; right: 40px; min-width: 210px; box-shadow: 0 1px 5px rgba(158, 147, 166, .2), 0 3px 4px rgba(158, 147, 166, .12), 0 2px 4px rgba(158, 147, 166, .14); background-color: #fff; align-items: flex-start; border-radius: 4px } .menu-desktop__submenu li { width: 100% } .menu-desktop__submenu--logout { border-top: 1px solid #9e93a6 } .menu-desktop__submenu .link { display: flex; align-items: center; padding: 15px 22px; transition: background-color .1s, color .1s } .menu-desktop__submenu .link .sprite { margin-right: 22px; max-width: 22px; fill: #403840; transition: fill .1s } .menu-desktop__submenu .link:focus, .menu-desktop__submenu .link:hover { background-color: #f4f1f6; color: #615395 } .menu-desktop__submenu .link:focus .sprite, .menu-desktop__submenu .link:hover .sprite { fill: #615395 } .menu-desktop__submenu .link:active { color: #403840 } .menu-desktop__submenu .link:active .sprite { fill: #403840 } @media(max-width:64.0525em) { .menu-desktop { display: none; visibility: hidden } } .menu-mobile { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; height: 55px; display: flex; align-items: stretch; justify-content: space-between; flex-flow: row nowrap; background: #fff } @media(min-width:48em) { .menu-mobile { padding-left: 40px; padding-right: 40px } } @media(min-width:64.0625em) { .menu-mobile { display: none; visibility: hidden } } .menu-mobile__open { background: transparent; border: 0; padding: 0 20px; margin-left: -20px } .menu-mobile__open .sprite { width: 18px; height: 14px; fill: #157a77 } .menu-mobile__logo-wrapper { flex-grow: 1; display: flex; justify-content: center; align-items: center; margin-right: 40px } .menu-mobile__logo { padding: 12px } .menu-mobile__logo .sprite { width: 72px; height: 30px } @media(min-width:64.0625em) { .menu-panel { display: none; visibility: hidden } } .menu-panel ul { list-style: none } .menu-panel__link-group { border-bottom: 1px solid #ddd; margin: 0 0 24px; padding: 16px 0 24px } .menu-panel__link-group--logout { margin: 0; padding: 0 } .menu-panel__safari-iphonex { margin-bottom: 100px } .menu-panel__safari { margin-bottom: 175px } .menu-panel__chrome-android { margin-bottom: 48px } .menu-panel__mask { position: fixed; background-color: rgba(0, 0, 0, .7); top: 0; right: 0; bottom: 0; left: 0; visibility: hidden; opacity: 0; transition: .15s ease } .menu-panel__inner { display: none; position: absolute; width: 300px; height: 100vh; background: #f0f0f0; top: 0; left: 0; transition: transform .3s cubic-bezier(.4, 0, .2, 1) } .menu-panel__header { display: flex; justify-content: space-between; align-items: stretch; height: 56px; border-bottom: 1px solid #ddd; background: #fff } .menu-panel__logo { display: flex; align-items: center; padding: 0 18px } .menu-panel__logo .sprite { width: 72px; height: 30px } .menu-panel__close { padding: 0 18px; border: 0; background: transparent } .menu-panel__close .sprite { margin: auto; fill: #585858 } .menu-panel__main-content-wrapper { height: calc(100vh - 56px); overflow: auto; padding-bottom: 20px } .menu-panel__main-content--maximize-points { border-bottom: 1px solid #ddd; padding: 24px 20px } .menu-panel__main-content--maximize-points p { margin: 8px 0 0 } .menu-panel__section-title { padding: 0 20px; margin: 0 } .menu-panel__section-title--loadToCard { margin-top: 24px } .menu-panel__main-link { width: 100%; display: flex; justify-content: flex-start; align-items: center; text-align: left; height: 40px; padding: 0 20px; color: #191919; text-decoration: none; transition: color .1s, border-left-color .2s } .menu-panel__main-link .sprite { margin-right: 12px; fill: #191919; transition: fill .1s } .menu-panel__main-link:focus, .menu-panel__main-link:hover { background-color: #fff; border-left: 4px solid #ee3124; color: #ee3124; outline: 0 } .menu-panel__main-link:focus .sprite, .menu-panel__main-link:hover .sprite { fill: #ee3124 } .menu-panel__secondary-content { padding: 0 20px; margin: 24px 0 } .menu-panel__secondary-content .locale-toggle { font-size: .875rem } .menu-panel__secondary-link-wrapper { margin-bottom: 16px } .menu-panel__secondary-link-wrapper:last-child { margin-bottom: 24px } .menu-panel__pill-counter { display: inline-block; margin-left: auto; width: 20px; height: 20px; border-radius: 50%; font-size: .75rem; line-height: 22px; color: #fff; background: #ee3124; text-align: center } .menu-panel--anonymous .menu-panel__menu-buttons { padding: 30px 20px; border-bottom: 1px solid #ddd } .menu-panel--anonymous .menu-panel__login { display: block; margin-bottom: 20px } .menu-panel--anonymous .menu-panel__register { display: block } .menu-panel--open { position: absolute; top: 0; left: 0; right: 0; height: 100vh; overflow: hidden } .menu-panel--open .menu-panel__inner { display: block; transition: transform .3s cubic-bezier(.4, 0, .2, 1); transform: translateZ(0) } .menu-panel--open .menu-panel__mask { transition: .3s ease; visibility: visible; opacity: 1 } .menu-panel--opening .menu-panel__inner { transform: translateZ(0) } .menu-panel--closed .menu-panel__inner { transform: translate3d(-300px, 0, 0) } .menu-panel--closing .menu-panel__inner { transition: transform .15s ease-in; transform: translate3d(-300px, 0, 0) } .menu-panel .menu-panel__inner, .menu-panel .menu-panel__mask { will-change: auto } .menu-panel--will-change .menu-panel__inner { display: block; will-change: transform } .menu-panel--will-change .menu-panel__mask { will-change: opacity } .promoted-action { background-color: #f0f0f0 } .promoted-action__inner { display: flex; align-items: center; min-height: 100px; padding-top: 10px; padding-bottom: 10px } @media(min-width:48em) { .promoted-action__inner { padding-top: 20px; padding-bottom: 20px } } .promoted-action__icon { flex-shrink: 0; margin-right: 20px } @media(min-width:48em) { .promoted-action__icon { margin-right: 30px } } @media(min-width:64em) { .promoted-action__icon { margin-left: 60px; margin-right: 48px } } .promoted-action__text-group { flex-grow: 1 } @media(min-width:48em) { .promoted-action__text-group { margin-right: 30px } } .promoted-action__text-group-decline { position: relative; padding: 0 } @media(min-width:48em) { .promoted-action__text-group-decline { display: none } } .promoted-action__title { margin: 0 } .promoted-action__title a { color: inherit; text-decoration: none } .promoted-action__message { display: none } @media(min-width:48em) { .promoted-action__message { display: block } } .promoted-action__link-group { display: none; text-align: center } @media(min-width:48em) { .promoted-action__link-group { display: block } } @media(min-width:64em) { .promoted-action__link-group { margin-right: 60px } } .promoted-action__link { display: block; margin-bottom: 10px } .promoted-action__decline { background: transparent; border: 0; padding: 0 } .promoted-action__caret { padding: 10px; margin-right: -10px; line-height: 0 } @media(min-width:48em) { .promoted-action__caret { display: none } } .promoted-action__caret .sprite { fill: #ee3124; width: 24px; height: 24px } .promoted-action--casl-opt-in .promoted-action__icon { width: 40px; height: 40px; margin-right: 20px } @media(min-width:48em) { .promoted-action--casl-opt-in .promoted-action__icon { width: 50px; height: 50px; margin-right: 40px } } .promoted-action--link-pcf .promoted-action__link, .promoted-action--link-pcf .type-brandname { white-space: normal } .promoted-action--esso-rewards .promoted-action__icon { width: 120px; height: 70px } @media(min-width:48em) { .promoted-action--esso-rewards .promoted-action__icon { width: 160px; height: 80px; margin-right: 20px } } .system-message { position: fixed; top: 55px; right: 0; left: 0; z-index: 99; background: #f0f0f0 } @media(min-width:64.0625em) { .system-message { top: 80px } } .system-message--offers-expiring { top: auto; position: relative } .system-message:after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: rgba(0, 0, 0, .15) } .system-message__inner { display: flex; align-items: center; padding-top: 24px; padding-bottom: 24px; width: 100%; max-width: 792px; position: relative; margin: 0 auto } @media(min-width:48em) { .system-message__inner { padding-top: 32px; padding-bottom: 32px } } .system-message__icon-container { display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 50%; background-color: #fff } @media(min-width:48em) { .system-message__icon-container { padding: 0; width: 60px; height: 60px } } .system-message__icon { flex-shrink: 0; width: 25px; height: 25px } @media(min-width:48em) { .system-message__icon { width: 37px; height: 37px } } .system-message__message { flex-grow: 1; padding: 0 24px } .system-message__message p { margin: 0 } .system-message__error-reload-button { margin-top: 8px; color: #157a77 } .system-message__close-button { position: absolute; right: 0; top: 18px; cursor: pointer; border: 0; opacity: .6; margin-left: 18px } @media(min-width:48em) { .system-message__close-button { align-self: center; margin-left: 0 } } .system-message__close-button:hover { opacity: 1 } .system-message__close-button .sprite { width: 16px; height: 16px; fill: #191919 } .system-message--link { background: #fdf0f0 } .flyer-result, .offer { position: relative; background: #fff; margin-bottom: 18px; border-radius: 8px; border: 1px solid #efeef1; box-shadow: 0 1px 5px rgba(158, 147, 166, .2), 0 3px 4px rgba(158, 147, 166, .12), 0 2px 4px rgba(158, 147, 166, .14); transition: box-shadow .3s ease-in-out } .flyer-result:focus-within:not(.offer--shadow-disabled):not(.offer-savedempty):not(.offer--carousel--upcoming), .flyer-result:focus:not(.offer--shadow-disabled):not(.offer-savedempty):not(.offer--carousel--upcoming), .flyer-result:hover:not(.offer--shadow-disabled):not(.offer-savedempty):not(.offer--carousel--upcoming), .offer:focus-within:not(.offer--shadow-disabled):not(.offer-savedempty):not(.offer--carousel--upcoming), .offer:focus:not(.offer--shadow-disabled):not(.offer-savedempty):not(.offer--carousel--upcoming), .offer:hover:not(.offer--shadow-disabled):not(.offer-savedempty):not(.offer--carousel--upcoming) { box-shadow: 0 8px 10px rgba(158, 147, 166, .3), 0 6px 30px rgba(158, 147, 166, .12), 0 16px 24px rgba(158, 147, 166, .14); cursor: pointer } @media(min-width:48em) { .flyer-result, .offer { margin-bottom: 26px } } .offer--carousel { margin: 0; padding-bottom: 0; overflow: hidden; height: 100%; border-radius: 16px } .offer--carousel .offer-description-container { width: 100%; display: flex; flex-direction: column; flex-grow: 1; margin: 0 auto 8px; overflow: hidden } .offer--carousel .offer-description-container .offer-description { color: #655c6c; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin: 0 } @media(min-width:48em) { .offer--carousel .offer-description-container .offer-description { -webkit-line-clamp: 2 } } .offer--carousel .offer-footer-date { color: #655c6c; display: flex; flex-direction: column; text-align: left; font-style: normal; margin: auto auto 15px 15px } @media(min-width:48em) { .offer--carousel .offer-footer-date { margin-bottom: 16px } } @media(min-width:64em) { .offer--carousel .offer-footer-date { margin-bottom: 13px } } .offer--carousel--upcoming, .offer--carousel--upcoming .offer-section { cursor: auto } .offer--carousel--upcoming .offer-footer-date { margin-bottom: 21px } .offer--carousel--upcoming .offer__reward--carousel { color: #655c6c } .offer-standalone { margin-bottom: 52px } .offer-standalone .offer__reward { color: #ac342a } .offer-standalone__heading { margin: 0 auto 16px; max-width: 688px } @media(min-width:48em) { .offer-standalone__heading { margin: 0 auto 23.5px } } @media(min-width:64em) { .offer-standalone__heading { max-width: 780px } } .offer-standalone .offer-description-container { color: #403840 } .offer__top { cursor: pointer; width: 100% } .offer__top--placeholder { cursor: default } .offer__image--hero { width: 100%; max-width: 100%; max-height: 160px; display: flex; justify-content: center; align-items: center } .offer__image-element { display: block; width: 100%; max-width: 100% } .offer__image--carousel { display: flex; max-width: 100%; margin: 0; justify-content: center } .offer__image--carousel img { width: 100%; max-width: 100%; position: absolute; left: 50%; transform: translate(-50%) } .offer__image--faded { opacity: .5 } .offer__reward { color: #f86457 } .flyer-result--disabled .offer__reward, .offer--disabled .offer__reward, .offers-preview .offer--invalid .offer__reward { color: #403840 } .offer--faded .offer__reward { color: #655c6c } .offer__reward--earned { color: #615395 } .offer__reward--carousel { color: #ac342a; margin-bottom: 8px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical } .offer__accelerator-container .sprite { height: 1em; width: 1.541666667em; margin-right: 8px; position: relative; bottom: -4px } @media(min-width:48em) { .offer__accelerator-container .sprite { bottom: -5px } } .offer__text { margin-top: 8px; width: 100% } .offer--unearnable .continuity-offer__top-inner { padding: 20px 30px } .offer--unearnable .hero-continuity-offer__content-group { min-height: auto } .offer-savedempty { display: flex; flex-direction: column; justify-content: center; padding: 25px 18px 18px; box-shadow: none } @media(min-width:48em) { .offer-savedempty { padding: 30px 40px 18px } } .offer-savedempty__icon { margin-bottom: 14px } @media(min-width:48em) { .offer-savedempty__icon { margin-bottom: 16px } } .offer-savedempty__icon>svg { width: 64px; height: 64px } .offer-savedempty__title { color: #655c6c; margin-bottom: 1rem } .offer-savedempty__copy { color: #403840 } @media(min-width:48em) { .offer-savedempty__copy { width: 67% } } .offer-banner { width: 100%; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; min-height: 24px; padding: 3px 70px 3px 10px; overflow: hidden; border-radius: 8px 8px 0 0 } @media(min-width:48em) { .offer-banner { min-height: 30px; padding: 3px 90px 3px 20px } } .offer-banner--placeholder { background-color: #bcbcbc } .offer-banner--division-market { background-color: #000 } .offer-banner--division-discount { background-color: #003da5 } .offer-banner--division-shoppers { background-color: #c4262e } .offer-banner--division-beauty_boutique { background-color: #8fcae7 } .offer-banner--division-joe_fresh { background-color: #ff4713 } .offer-banner--division-murale { background-color: #8977ba } .offer-banner__sprite { flex-shrink: 0; width: 14px; height: 14px; margin-right: 8px } @media(min-width:48em) { .offer-banner__sprite { width: 18px; height: 18px; margin-right: 12px } } .offer-banner__sprite--atl-save-easy { width: 63px } @media(min-width:48em) { .offer-banner__sprite--atl-save-easy { width: 74px } } .offer-banner__sprite--atlantic-superstore { width: 64px } @media(min-width:48em) { .offer-banner__sprite--atlantic-superstore { width: 76px } } .offer-banner__sprite--beauty-boutique { width: 126px } @media(min-width:48em) { .offer-banner__sprite--beauty-boutique { width: 138px } } .offer-banner__sprite--dominion { width: 60px } @media(min-width:48em) { .offer-banner__sprite--dominion { width: 71px } } .offer-banner__sprite--extra-foods { width: 98px } @media(min-width:48em) { .offer-banner__sprite--extra-foods { width: 108px } } .offer-banner__sprite--fortinos { width: 59px } @media(min-width:48em) { .offer-banner__sprite--fortinos { width: 72px } } .offer-banner__sprite--gas-bar { width: 58px } @media(min-width:48em) { .offer-banner__sprite--gas-bar { width: 69px } } .offer-banner__sprite--independent { width: 54px } @media(min-width:48em) { .offer-banner__sprite--independent { width: 68px } } .offer-banner__sprite--joe-fresh { width: 72px } @media(min-width:48em) { .offer-banner__sprite--joe-fresh { width: 86px } } .offer-banner__sprite--loblaws { width: 63px } @media(min-width:48em) { .offer-banner__sprite--loblaws { width: 80px } } .offer-banner__sprite--maxi { width: 34px; height: 16px } @media(min-width:48em) { .offer-banner__sprite--maxi { width: 42px; height: 20px } } .offer-banner__sprite--murale { width: 35px; height: 16px } @media(min-width:48em) { .offer-banner__sprite--murale { width: 43px; height: 20px } } .offer-banner__sprite--no-frills { width: 70px } @media(min-width:48em) { .offer-banner__sprite--no-frills { width: 86px } } .offer-banner__sprite--pci-subscription_en, .offer-banner__sprite--pci-subscription_fr { width: 60px; height: 24px } .offer-banner__sprite--pharmaprix { width: 96px } @media(min-width:48em) { .offer-banner__sprite--pharmaprix { width: 124px } } .offer-banner__sprite--provigo { width: 60px } @media(min-width:48em) { .offer-banner__sprite--provigo { width: 74px } } .offer-banner__sprite--shoppers-drug-mart { width: 80px } @media(min-width:48em) { .offer-banner__sprite--shoppers-drug-mart { width: 104px } } .offer-banner__sprite--superstore { width: 63px } @media(min-width:48em) { .offer-banner__sprite--superstore { width: 80px } } .offer-banner__sprite--valu-mart { width: 45px } @media(min-width:48em) { .offer-banner__sprite--valu-mart { width: 58px } } .offer-banner__sprite--wholesale-club { width: 56px } @media(min-width:48em) { .offer-banner__sprite--wholesale-club { width: 72px } } .offer-banner__sprite--yig { width: 78px } @media(min-width:48em) { .offer-banner__sprite--yig { width: 98px } } .offer-banner__sprite--zehrs { width: 48px } @media(min-width:48em) { .offer-banner__sprite--zehrs { width: 56px } } .offer-banner__text { line-height: 1; color: #fff; -webkit-font-smoothing: antialiased; position: relative; bottom: -1px } @media(min-width:48em) { .offer-banner__text { bottom: -2px } } .offer-hero-banner { position: relative; overflow: hidden; border-radius: 8px 8px 0 0 } .offer-hero-banner__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; z-index: 1; height: 100%; width: 100px } @media(min-width:48em) { .offer-hero-banner__inner { width: 150px } } @media(min-width:64em) { .offer-hero-banner__inner { width: 200px } } .offer-hero-banner__no-image { height: 75px; background: #bcbcbc } @media(min-width:48em) { .offer-hero-banner__no-image { height: 84px } } @media(min-width:64em) { .offer-hero-banner__no-image { height: 118px } } @media(min-width:80em) { .offer-hero-banner__no-image { height: 160px } } .offer-hero-banner.offer-banner__text { border-radius: 0; margin-bottom: 0; margin-top: .6rem; height: auto } @media(min-width:48em) { .offer-hero-banner.offer-banner__text { margin-top: 1.4rem; font-weight: 700 } } .offer-hero-banner__sprite { flex-shrink: 0; width: 85px; height: 20px; max-width: 85px } @media(min-width:48em) { .offer-hero-banner__sprite { width: 150px; height: 30px; max-width: 120px } } @media(min-width:64em) { .offer-hero-banner__sprite { max-width: 150px; height: 40px } } .offer-hero-banner__sprite--pci-subscription_en+.offer-banner__text, .offer-hero-banner__sprite--pci-subscription_fr+.offer-banner__text { display: none } .offer-hero-banner img { position: relative; left: 50px } @media(min-width:48em) { .offer-hero-banner img { left: 75px } } @media(min-width:64em) { .offer-hero-banner img { left: 100px } } .offer-checkmark__label { z-index: 1; position: absolute; top: 0; right: 0; width: 60px; height: 60px; cursor: pointer; border: none; padding: 0 } @media(min-width:48em) { .offer-checkmark__label { width: 70px; height: 70px } } .offer-checkmark__label:before { content: ""; position: absolute; height: 0; width: 0; top: 0; right: 0; transition: border-color .1s; border-color: #ddd #ddd transparent transparent; border-style: solid; border-width: 30px } @media(min-width:48em) { .offer-checkmark__label:before { border-width: 35px } } .offer-checkmark__label:focus:before, .offer-checkmark__label:hover:before { border-right-color: #bcbcbc; border-top-color: #bcbcbc } .offer-checkmark__label--checked:before { border-right-color: #fbd2d3; border-top-color: #fbd2d3 } .offer-checkmark__label--checked:focus:before, .offer-checkmark__label--checked:hover:before { border-right-color: #f9bbbc; border-top-color: #f9bbbc } .offer-checkmark__label--checked .offer-checkmark__icon { fill: #ee3124 } .offer-checkmark__icon { position: absolute; top: 6px; right: 6px } @media(min-width:48em) { .offer-checkmark__icon { top: 8px; right: 8px } } .offer-checkmark__input { position: absolute; top: 5px; right: 5px } .offer-checkmark__input:focus+.offer-checkmark__label:before { border-right-color: #bcbcbc; border-top-color: #bcbcbc } .offer-checkmark__input:focus+.offer-checkmark__label--checked:before { border-right-color: #f9bbbc; border-top-color: #f9bbbc } .hero-continuity-offer .offer__image, .hero-product-offer .offer__image, .product-offer .offer__image { overflow: hidden } .hero-continuity-offer .offer__image--hero, .hero-product-offer .offer__image--hero, .product-offer .offer__image--hero { border-radius: 8px 8px 0 0 } .hero-continuity-offer__top-inner, .hero-product-offer__top-inner, .product-offer__top-inner { position: relative } .hero-continuity-offer__top-inner .offer__image--carousel, .hero-product-offer__top-inner .offer__image--carousel, .product-offer__top-inner .offer__image--carousel { flex: 0 0 110px; margin: 0; width: 100%; border-radius: 0 } .hero-continuity-offer__top-inner .offer__image--carousel .offer__image-element--hero, .hero-product-offer__top-inner .offer__image--carousel .offer__image-element--hero, .product-offer__top-inner .offer__image--carousel .offer__image-element--hero { position: absolute; max-width: none; width: auto; height: 110px; left: 50%; transform: translate(-50%) } .hero-continuity-offer__top-inner .offer__image--carousel .offer__image--loadToCard, .hero-product-offer__top-inner .offer__image--carousel .offer__image--loadToCard, .product-offer__top-inner .offer__image--carousel .offer__image--loadToCard { height: 134px } .hero-continuity-offer__top-inner .offer__image--loadToCard-image-container, .hero-product-offer__top-inner .offer__image--loadToCard-image-container, .product-offer__top-inner .offer__image--loadToCard-image-container { flex: 0 0 134px } .hero-continuity-offer .offer__image-element--default, .hero-product-offer .offer__image-element--default, .product-offer .offer__image-element--default { max-width: 80px } @media(min-width:48em) { .hero-continuity-offer .offer__image-element--default, .hero-product-offer .offer__image-element--default, .product-offer .offer__image-element--default { max-width: 110px } } .hero-continuity-offer .offer__image-element--carousel, .hero-product-offer .offer__image-element--carousel, .product-offer .offer__image-element--carousel { position: absolute; max-width: none; width: auto; height: 113px; left: 50%; transform: translate(-50%) } .product-offer__top-inner { display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; padding: 20px 30px } @media(min-width:48em) { .product-offer__top-inner { padding: 20px 30px } } .product-offer__top-inner .offer__image { flex: 0 0 80px; margin-right: 18px } @media(min-width:48em) { .product-offer__top-inner .offer__image { flex: 0 0 110px; margin-right: 30px } } .product-offer__top-inner .offer__image--carousel { flex: 0 0 112px; margin: 0; width: 100% } .product-offer__content-group { flex-grow: 1 } .hero-product-offer__content-group { padding: 20px 30px; position: relative } @media(min-width:48em) { .hero-product-offer__content-group { padding: 20px 30px } } .continuity-offer__top-inner, .hero-continuity-offer__top-inner { position: relative } .continuity-offer__top-inner .offer__image, .hero-continuity-offer__top-inner .offer__image { overflow: hidden } .continuity-offer__top-inner .offer__image--faded, .hero-continuity-offer__top-inner .offer__image--faded { opacity: .5 } .continuity-offer__top-inner .progress-bar, .hero-continuity-offer__top-inner .progress-bar { margin-top: 14px } .continuity-offer__top-inner .progress-bar__parent:not(:first-child), .hero-continuity-offer__top-inner .progress-bar__parent:not(:first-child) { margin-left: 8px } .continuity-offer__top-inner .progress-bar__ratio, .hero-continuity-offer__top-inner .progress-bar__ratio { color: #000 } .continuity-offer__top-inner .progress-bar__current-value, .hero-continuity-offer__top-inner .progress-bar__current-value { font-weight: 400 } .continuity-offer__top-inner { display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; padding: 18px } @media(max-width:34.365em) { .continuity-offer__top-inner { padding-bottom: 54px } } @media(min-width:48em) { .continuity-offer__top-inner { padding: 20px 30px } } .continuity-offer__top-inner .offer__image { flex: 0 0 80px; margin-right: 18px } @media(min-width:48em) { .continuity-offer__top-inner .offer__image { flex: 0 0 110px; margin-right: 30px } } .continuity-offer__content-group { flex-grow: 1 } .continuity-offer__content-group .progress-bar { width: auto } @media(max-width:34.365em) { .continuity-offer__content-group .progress-bar { position: absolute; width: auto; bottom: 18px; left: 18px; right: 18px } } .hero-continuity-offer__content-group { min-height: 110px; padding: 18px; position: relative } @media(min-width:48em) { .hero-continuity-offer__content-group { min-height: 150px; padding: 20px 30px } } .offer-content { position: relative } .offer-content .sprite { margin-left: 7px; width: 15px } .offer-content-carousel { display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; text-align: center; flex-direction: column; padding: 0 } .offer-content-group-carousel { width: 100%; padding: 24px 15px 0; display: flex; flex-direction: column; min-height: 133px; height: 250px; overflow: hidden; text-align: left } .offer-content-group-carousel .offer__text { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-style: normal; margin: 0 auto 16px } .offer-content-group-carousel .offer__text--earned { display: block; overflow: visible } .offer-content-group-carousel--modal .offer__reward.offer__reward--carousel { color: #ac342a; margin-top: 8px } .offer-description { font-size: 13px; line-height: 15px; margin-top: 10px } .flyer-result--disabled .offer-footer__state, .flyer-result--disabled .offer__reward, .offer--disabled .offer-footer__state, .offer--disabled .offer__reward, .offers-preview .offer--invalid .offer-footer__state, .offers-preview .offer--invalid .offer__reward { color: #655c6c } .flyer-result--disabled .offer-section__inner, .offer--disabled .offer-section__inner, .offers-preview .offer--invalid .offer-section__inner { position: relative } .flyer-result--disabled .flyer-result__footer, .flyer-result--disabled .offer-details__discovery-offer-text, .flyer-result--disabled .offer-details__section, .flyer-result--disabled .offer-footer, .offer--disabled .flyer-result__footer, .offer--disabled .offer-details__discovery-offer-text, .offer--disabled .offer-details__section, .offer--disabled .offer-footer, .offers-preview .offer--invalid .flyer-result__footer, .offers-preview .offer--invalid .offer-details__discovery-offer-text, .offers-preview .offer--invalid .offer-details__section, .offers-preview .offer--invalid .offer-footer { border-color: rgba(155, 149, 168, .16) } .offer-template-id { position: absolute; color: #8a8a8a; font-size: 12px; line-height: 1; bottom: -20px; right: 0 } @media(min-width:48em) { .offer-template-id { bottom: 0; right: auto; left: 100%; margin-left: 8px } } .offer-details__info>:first-child { margin-top: 0 } .offer-details__info>:last-child { margin-bottom: 0 } .offer-details__info-discovery { border-bottom: 1px solid rgba(155, 149, 168, .16); padding: 18px } .offer-details__info-discovery>p:first-child { margin-top: 0 } .offer-details__info-discovery>p:last-child { margin-bottom: 0 } @media(min-width:48em) { .offer-details__info-discovery { padding: 20px 30px } } .offer-details__info-pcf-bonus-icon { position: relative; bottom: -3px; height: 16px; width: 25px; margin-right: 8px } @media(min-width:48em) { .offer-details__info-pcf-bonus-icon { bottom: -6px; height: 24px; width: 36px; margin-right: 14px } } .offer-details__explanation { padding: 18px; border-bottom: 1px solid rgba(155, 149, 168, .16); color: #403840 } .offer-details__explanation>.offer-details-steps-progress:first-child, .offer-details__explanation>p:first-child { margin-top: 0 } .offer-details__explanation>.offer-details-steps-progress:last-child, .offer-details__explanation>p:last-child { margin-bottom: 0 } @media(min-width:48em) { .offer-details__explanation { padding: 20px 30px } } .offer-details__offer-date { padding: 18px; border-top: 1px solid rgba(155, 149, 168, .16); border-bottom: 1px solid rgba(155, 149, 168, .16); color: #403840 } .offer-details__offer-date>p { margin: 0 } @media(min-width:48em) { .offer-details__offer-date { padding: 20px 30px } } .offer-details__cta { padding: 18px; border-top: 1px solid rgba(155, 149, 168, .16) } .offer-details__cta button:first-of-type { margin-bottom: 24px } @media(min-width:48em) { .offer-details__cta button:first-of-type { margin-bottom: 0 } } @media(min-width:48em) { .offer-details__cta { display: flex; flex-flow: row wrap; justify-content: space-between; padding: 20px 30px } } @media(min-width:48em) { .offer-details__cta>* { flex-basis: calc(50% - 9px) } } @media(min-width:64em) { .offer-details__cta>* { flex-basis: calc(50% - 18px) } } .offer-details__cta-label { order: 1; margin: 0 0 4px } @media(max-width:47.99em) { .offer-details__cta-label--reject { margin-top: 18px } } .offer-details__cta-notice { order: 3; font-weight: 700; color: #191919; margin: 8px 0 0 } .offer-details__cta-button { order: 2; padding: 0; white-space: normal; border-color: #191919 } @media(max-width:63.99em) { .offer-details__cta-button { font-size: .875rem } } .offer-details__cta-button[disabled], .offer-details__cta-button[disabled]:active, .offer-details__cta-button[disabled]:hover { color: #bcbcbc; fill: #bcbcbc; border-color: #bcbcbc; background: transparent } .offer-details__cta-button--save .sprite { top: -2px } .offer-details__cta-button--reject .sprite { top: -1px } .offer-details__cta-button-inner { display: flex; height: 44px; justify-content: center; align-items: center; margin: 0 6px } @media(min-width:64em) { .offer-details__cta-button-inner { height: 52px; margin: 0 20px } } .offer-details__cta-button-inner .sprite { position: relative; flex-shrink: 0; margin-right: 10px } .offer-details__cta--reject-disabled .offer-details__cta-label--reject, .offer-details__cta--save-disabled .offer-details__cta-label--save { color: #bcbcbc } .offer-details__confirm { text-align: center; padding: 18px; border-bottom: 1px solid rgba(155, 149, 168, .16) } @media(min-width:48em) { .offer-details__confirm { display: flex; flex-flow: row nowrap; text-align: left; justify-content: space-between; align-items: flex-start; padding: 20px 40px } } @media(min-width:64em) { .offer-details__confirm { padding-left: 100px; padding-right: 100px } } @media(min-width:48em) { .offer-details__confirm-icon { flex-shrink: 0 } } .offer-details__confirm-icon .sprite { height: 40px; width: 40px } @media(min-width:48em) { .offer-details__confirm-content { flex-grow: 1; margin-left: 20px } } @media(min-width:64em) { .offer-details__confirm-content { margin-left: 45px } } .offer-details__confirm-buttons { display: flex; flex-direction: column; margin-top: 30px } @media(min-width:48em) { .offer-details__confirm-buttons { flex-direction: row; margin-top: 14px } } .offer-details__confirm-cancel-button { margin: 16px auto } @media(min-width:48em) { .offer-details__confirm-cancel-button { margin: auto } } .offer-details__terms { padding: 18px } @media(min-width:48em) { .offer-details__terms { padding: 20px 30px } } .offer-details__terms>:first-child { margin-top: 0 } .offer-details__terms>:last-child { margin-bottom: 0 } .offer-details__terms-text { color: #403840 } .flyer-result--disabled .offer-details__info, .flyer-result--disabled .offer-details__info-discovery, .flyer-result--disabled .offer-details__terms, .offer--disabled .offer-details__info, .offer--disabled .offer-details__info-discovery, .offer--disabled .offer-details__terms, .offers-preview .offer--invalid .offer-details__info, .offers-preview .offer--invalid .offer-details__info-discovery, .offers-preview .offer--invalid .offer-details__terms { border-color: rgba(155, 149, 168, .16) } .flyer-result--disabled .offer-details__saved, .offer--disabled .offer-details__saved, .offers-preview .offer--invalid .offer-details__saved { text-align: center; padding: 18px; border-bottom: 1px solid rgba(155, 149, 168, .16) } @media(min-width:48em) { .flyer-result--disabled .offer-details__saved, .offer--disabled .offer-details__saved, .offers-preview .offer--invalid .offer-details__saved { display: flex; flex-flow: row nowrap; text-align: left; justify-content: space-between; align-items: flex-start; padding: 20px 40px } } @media(min-width:64em) { .flyer-result--disabled .offer-details__saved, .offer--disabled .offer-details__saved, .offers-preview .offer--invalid .offer-details__saved { padding-left: 100px; padding-right: 100px } } .flyer-result--disabled .offer-details__saved-icon, .offer--disabled .offer-details__saved-icon, .offers-preview .offer--invalid .offer-details__saved-icon { height: 40px; width: 40px } @media(min-width:48em) { .flyer-result--disabled .offer-details__saved-icon, .offer--disabled .offer-details__saved-icon, .offers-preview .offer--invalid .offer-details__saved-icon { flex-shrink: 0 } } @media(min-width:48em) { .flyer-result--disabled .offer-details__saved-content, .offer--disabled .offer-details__saved-content, .offers-preview .offer--invalid .offer-details__saved-content { flex-grow: 1; margin-left: 20px } } @media(min-width:64em) { .flyer-result--disabled .offer-details__saved-content, .offer--disabled .offer-details__saved-content, .offers-preview .offer--invalid .offer-details__saved-content { margin-left: 45px } } .flyer-result--disabled .offer-details__saved-title, .offer--disabled .offer-details__saved-title, .offers-preview .offer--invalid .offer-details__saved-title { display: block; font-size: .875rem; line-height: 1.428571429; margin: 10px 30px } @media(min-width:48em) { .flyer-result--disabled .offer-details__saved-title, .offer--disabled .offer-details__saved-title, .offers-preview .offer--invalid .offer-details__saved-title { margin: 0 0 14px } } .flyer-result--disabled .offer-details__saved-subtitle, .offer--disabled .offer-details__saved-subtitle, .offers-preview .offer--invalid .offer-details__saved-subtitle { margin: 10px 30px 0 } @media(min-width:48em) { .flyer-result--disabled .offer-details__saved-subtitle, .offer--disabled .offer-details__saved-subtitle, .offers-preview .offer--invalid .offer-details__saved-subtitle { margin: 10px 0 0 } } .shoppable-offer-link { color: #157a77; margin-top: 12px } @media(max-width:47.99em) { .shoppable-offer-link { font-size: .75rem } } @media(min-width:34.375em) { .shoppable-offer-link { margin-top: 8px } } @media(max-width:47.99em) { .shoppable-offer-link .sprite.new-window-link__icon { width: 13px } } .flyer-result__footer, .offer-footer { display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; text-align: left; min-height: 40px; padding: 0 } @media(min-width:48em) { .flyer-result__footer, .offer-footer { border-top: 1px solid rgba(155, 149, 168, .16); padding: 10px 30px; min-height: 50px; flex-direction: row-reverse; justify-content: space-between } } .offer-footer__action-buttons { display: flex; flex-direction: column; align-items: center; width: 100% } @media(min-width:48em) { .offer-footer__action-buttons { flex-direction: row; width: -moz-fit-content; width: fit-content } } .offer-footer__add-to-shopping-list { display: flex; justify-content: center; border-top: 1px solid rgba(155, 149, 168, .16); padding: 10px 18px; width: 100% } @media(min-width:48em) { .offer-footer__add-to-shopping-list { width: -moz-fit-content; width: fit-content; border-top: none; margin-right: 24px; padding: 0 } } .offer-footer__view-details { padding: 10px 18px } @media(min-width:48em) { .offer-footer__view-details { padding: 0 } } .offer-footer__view-details-container { display: flex; width: 100%; justify-content: center; border-top: 1px solid rgba(155, 149, 168, .16) } @media(min-width:48em) { .offer-footer__view-details-container { border-top: none; width: -moz-fit-content; width: fit-content } } .offer-footer__date-container { display: flex; justify-content: center; width: 100%; border-top: 1px solid rgba(155, 149, 168, .16); padding: 10px 18px } @media(min-width:48em) { .offer-footer__date-container { width: -moz-fit-content; width: fit-content; border-top: none; padding: 0 } } .offer-footer--carousel { padding: 10px 16px; justify-content: space-around; max-height: 50px; border-top: none } .offer-footer--carousel .shoppable-offer-link { margin-top: 0; max-width: 100%; color: #157a77 } .offer-footer--carousel .shoppable-offer-link span { max-width: 72px } .offer-footer--carousel .shoppable-offer-link:hover { color: #615395 } .offer-footer--carousel--shoppable { border-top: 1px solid rgba(155, 149, 168, .16) } .offer-footer-date { text-align: left; color: #655c6c } .menu { width: 100vw } .modal-container { z-index: 999; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: rgba(6, 17, 22, .65); padding: 50px 10px } .modal-content { max-width: 327px; position: relative; border-radius: 15px; background-color: #fff; padding: 0; max-height: 530px; overflow: hidden } .modal-content--scrollable { position: relative; height: 100% } .modal-content--scrollable .offer-content-group-carousel-wrapper.offers-modal__scroll-content { height: calc(90vh - 384px); min-height: 141px } @media(min-width:48em) { .modal-content { max-width: 561px; max-height: 900px } } .modal-content__link-wrapper { display: flex; flex-direction: column } @media(min-width:48em) { .modal-content__link-wrapper { flex-direction: row; justify-content: flex-end } } .modal-content__link-wrapper .button-base.secondary { margin: 16px 0 0 } @media(min-width:48em) { .modal-content__link-wrapper .button-base.secondary { margin: 0 0 0 24px } } .modal-content__link-wrapper .button-base.primary, .modal-content__link-wrapper .button-base.secondary { padding: 12px 48px } .modal-content--close { position: absolute; top: 15px; right: 15px; border-radius: 100%; padding: 3px; z-index: 1 } @media(min-width:48em) { .modal-content--close { top: 18px; right: 18px } } .modal-content--close svg { width: 28px; height: auto; fill: #403840 } .modal-content--close-contrast { width: 32px; height: 32px; background-color: #fff; display: flex; justify-content: center; align-items: center } .modal-content--close-contrast svg { width: 20px } .modal-content--close-contrast:hover { background-color: #f4f1f6; border: 2px solid #615395; border-radius: 50% } .modal-content--close-contrast:hover svg { fill: #615395 } .modal-content h1 { margin-bottom: 16px } .offer-content-group-carousel--faded.offer-content-group-carousel--modal .offer__reward { color: #655c6c } .offer-content-group-carousel--faded.offer-content-group-carousel--modal .offer__reward--earned { color: #615395 } .offer-details-steps-progress { display: flex; color: #403840; margin: 16px 0 } .offer-details-steps-progress__key { margin-right: 4px } .offer-details-steps-progress__value { margin: 0 } .activation-card-display { text-align: center } .activation-card-display__card-graphic { display: block; width: auto; max-width: 320px; margin: 20px auto } .activation-card-display__points, .activation-card-display__redeemable-value, .activation-card-display__redeemable-value-section { margin-top: 16px } .activation-card-display__redeemable-value { font-weight: 700 } .split-graphic { position: relative; max-width: none; margin: 24px auto; border-bottom: 1px solid rgba(158, 147, 166, .25) } .split-graphic__points { margin: 0 auto } .link-more-cards { text-align: center; display: flex; flex-direction: column; align-items: center } @media(min-width:34.375em) { .link-more-cards { flex-direction: row; text-align: left } } .link-more-cards__title { margin-top: 0 } .link-more-cards__body { margin-bottom: 0 } .link-more-cards__img-link { display: block; margin-bottom: 40px; flex-shrink: 0 } .link-more-cards__img-link img { display: block; max-width: 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, .3) } @media(min-width:34.375em) { .link-more-cards__img-link { margin-bottom: 0; margin-right: 40px } } .link-more-cards__img-link--legacy img { width: 112px; border-radius: 4px } .link-more-cards__img-link--legacy img:last-child { margin-top: -45px; margin-left: 40px } .link-more-cards__img-link--pcf img { width: 152px; border-radius: 6px } .refine-search-bar { background-color: #fff; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd } @media(max-width:47.99em) { .refine-search-bar__apply-button, .refine-search-bar__clear-button, .refine-search-bar__close-button { margin-top: 10px; margin-bottom: 10px } } .refine-search-bar__inner { display: flex; align-items: center } @media(min-width:48em) { .refine-search-bar__inner { padding: 10px 0 } } .refine-search-bar__inner--placeholder { height: 72px } @media(min-width:48em) { .refine-search-bar__inner--placeholder { height: 78px } } .refine-search-bar__results-summary { flex-grow: 1; padding: 10px 10px 10px 0; margin-left: 20px } @media(min-width:48em) { .refine-search-bar__results-summary { margin-left: 40px } } .refine-search-bar__title { display: flex; align-items: center; margin-right: auto; margin-left: 20px } @media(min-width:48em) { .refine-search-bar__title { margin-left: 40px } } .refine-search-bar__title .sprite { flex-shrink: 0; margin-right: 10px } .refine-search-bar__clear-button { align-self: stretch; margin-right: 10px; min-width: 0 } @media(min-width:34.375em) { .refine-search-bar__clear-button { min-width: 100px; padding: 0 20px } } @media(min-width:48em) { .refine-search-bar__clear-button { margin-right: 20px; line-height: 24px } } .refine-search-bar__clear-button:hover { color: #8a8a8a } .refine-search-bar__apply-button { min-width: 0; padding: 10px 15px; flex-shrink: 0 } @media(min-width:34.375em) { .refine-search-bar__apply-button { min-width: 100px; margin-right: 16px } } @media(min-width:48em) { .refine-search-bar__apply-button { margin-right: 26px; padding: 16px; line-height: 24px } } .refine-search-bar__close-button { padding: 0 15px; align-self: stretch } @media(min-width:48em) { .refine-search-bar__close-button { padding: 0 20px; margin-right: 20px } } .refine-search-bar__close-button .sprite { width: 18px; height: 18px } .refine-search-bar--sticky { z-index: 1; border-top: 3px solid #fff } .refine-search-button { min-width: 0; flex-shrink: 0; color: #191919; fill: #191919 } @media(max-width:47.99em) { .refine-search-button { align-self: stretch; border-left: 1px solid #ddd; padding: 0 } } @media(min-width:48em) { .refine-search-button { margin-right: 20px } } .refine-search-button:hover { fill: #fff } .refine-search-button__inner { display: flex; align-items: center; justify-content: center } @media(max-width:47.99em) { .refine-search-button__inner { min-height: 70px; width: 70px } } @media(max-width:47.99em) { .refine-search-button__text { display: none } } @media(min-width:48em) { .refine-search-button__sprite { margin-right: 10px } } @media(max-width:47.99em) { .refine-search-button--placeholder { display: flex; justify-content: center; align-items: center; border-left: 0 } .refine-search-button--placeholder .loading-placeholder__inner { max-width: 28px } } .notification-bar__inner { padding: 10px 20px; display: flex; height: 70px; align-items: center } .notification-bar__inner:empty { display: none } .notification-bar__content-inner { padding-right: 20px } .search-results-list, .search-results-list-error-tile { width: 100% } .search-results-list__inner { display: flex; flex-direction: column; list-style: none; padding: 0; margin-top: 0; margin-bottom: 0 } .search-results-list--hidden { display: none } .search-results-list-error-tile { margin: 40px 20px } .search-result-item { border-bottom: 1px solid #ddd } .search-result-item__clickable-wrapper { display: block; width: 100%; text-align: left } .search-result-item__inner { background-color: #fff; padding: 30px 20px; display: flex; flex-direction: row } @media(min-width:48em) { .search-result-item__inner { padding: 20px } } @media(min-width:64em) { .search-result-item__inner { padding: 40px } } .search-result-item__marker { margin-right: 10px; margin-left: -10px; margin-top: -5px } @media(min-width:64em) { .search-result-item__marker { margin-top: -10px } } .search-result-item__marker-icon { height: 40px; width: 40px } @media(min-width:64em) { .search-result-item__marker-icon { height: 50px; width: 50px } } .search-result-item__marker-icon--placeholder { opacity: .3; animation: PlaceholderBreathe 1s ease-in-out infinite alternate } .search-result-item__content { flex: 4 0 0; width: 100% } .search-result-item__name { margin-top: 0; margin-right: 20px; line-height: 1.3; margin-bottom: 6px; max-width: 210px } @media(min-width:48em) { .search-result-item__name { max-width: 180px } } .search-result-item__address1, .search-result-item__address2 { margin-top: 0; margin-bottom: 5px; margin-right: 30% } .search-result-item__address2 { margin-bottom: 20px } .search-result-item__header { display: flex; align-items: flex-start } .search-result-item__footer { display: flex; align-items: center } .search-result-item__distance { flex-grow: 1; white-space: nowrap; text-align: right; margin-top: 0; line-height: 1.3; margin-bottom: 6px } .search-result-item__hours { margin: 0 20px 0 0; text-decoration: none; color: #191919 } @media(min-width:48em) { .search-result-item__hours { margin: 0 40px 0 0 } } .search-result-item__service { margin: 0; text-decoration: none; color: #191919 } .search-result-item__hours-icon { width: 16px; height: 16px; margin-right: 6px; color: #191919 } @media(min-width:48em) { .search-result-item__hours-icon { width: 26px; height: 26px; margin-right: 10px } } .search-result-item__gas-bar-icon { width: 16px; height: 16px; margin-right: 6px; fill: #8a8a8a } @media(min-width:48em) { .search-result-item__gas-bar-icon { width: 26px; height: 26px; margin-right: 10px } } .search-results-map { flex: 2 0 0; position: relative; order: 1; height: 175px; flex-basis: 100% } @media(min-width:48em) { .search-results-map { height: 600px } } .search-results-map__inner { top: 0; left: 0; width: 100%; height: 100%; position: absolute } .store-details-header { position: relative; background-color: #fff } .store-details-header .utility-header-bg { min-height: 200px } @media(min-width:64em) { .store-details-header .utility-header-bg { min-height: 220px } } .store-details-header__inner { position: relative; display: flex; flex-direction: column; height: 200px } @media(min-width:48em) { .store-details-header__inner { height: 220px } } .store-details-header__logo { max-height: 60px } @media(max-width:47.99em) { .store-details-header__logo { max-width: 250px } } .store-details-header__name { color: inherit; margin-top: 10px; margin-bottom: 0; -webkit-font-smoothing: antialiased } .store-details-header__hours { display: flex; align-items: center; justify-content: center; color: #191919 } .store-details-header__hours .sprite { color: #191919; margin-right: 10px } .store-details-header__hours--placeholder { margin-top: 20px } .store-details-header__hours-placeholder:last-child:not(:only-child) { margin-left: 30px } .store-details-header__content { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 200px; position: absolute; top: 0; left: 0; bottom: 0 } @media(min-width:48em) { .store-details-header__content { min-height: 220px } } .shopping-info-tile__inner { line-height: 1.25rem } .shopping-info-tile__inner p { margin: 0 } .shopping-info-tile__inner ul { list-style-type: disc; padding-left: 16px; margin-top: 16px; font-size: .875rem } .shopping-info-tile__marker { width: 31px; height: auto; margin: 10px 5px 0 } @media(min-width:64em) { .shopping-info-tile__marker { margin: 16px 10px 0 } } .what-to-expect-in-store { margin: 0 auto; max-width: 920px } .what-to-expect-in-store__content { margin-bottom: 30px } @media(min-width:48em) { .what-to-expect-in-store__content { background: #f0f0f0; padding: 40px; margin-bottom: 0 } } .what-to-expect-in-store__content p:first-of-type { margin-top: 0 } .what-to-expect-in-store__content p:last-of-type { margin-top: 16px } .account-setting--security .what-to-expect-in-store .account-setting__turn-off-button .sprite, .account-setting--security .what-to-expect-in-store .account-setting__turn-on-button .sprite, .points-days-cta-section__content .what-to-expect-in-store .cta-section__link .sprite, .what-to-expect-in-store .account-setting--security .account-setting__turn-off-button .sprite, .what-to-expect-in-store .account-setting--security .account-setting__turn-on-button .sprite, .what-to-expect-in-store .button .sprite, .what-to-expect-in-store .household-grid__invite-button .sprite, .what-to-expect-in-store .link--theme-button--large-primary .sprite, .what-to-expect-in-store .link--theme-button--large-secondary .sprite, .what-to-expect-in-store .link--theme-button--small-primary .sprite, .what-to-expect-in-store .link--theme-button--small-secondary .sprite, .what-to-expect-in-store .link--theme-button-gray .sprite, .what-to-expect-in-store .link--theme-button-red .sprite, .what-to-expect-in-store .link--theme-button-transparent-white .sprite, .what-to-expect-in-store .link--theme-button-transparent .sprite, .what-to-expect-in-store .link--theme-button-white .sprite, .what-to-expect-in-store .link--theme-button .sprite, .what-to-expect-in-store .load-shop-pay-header__link .sprite, .what-to-expect-in-store .load-shop-pay-module__link .sprite, .what-to-expect-in-store .marketing-page-header__link .sprite, .what-to-expect-in-store .marketing-page-module__link .sprite, .what-to-expect-in-store .partnership-perk-details__cta .sprite, .what-to-expect-in-store .partnership-perk-redeemed-success__cta .sprite, .what-to-expect-in-store .points-days-cta-section__content .cta-section__link .sprite, .what-to-expect-in-store .points-days__cta .sprite { width: 12px; height: 12px; margin-right: 10px } .what-to-expect-in-store h1 { margin: 30px 0 16px } @media(min-width:48em) { .what-to-expect-in-store h1 { margin: 48px 0 24px } } .what-to-expect-in-store ul { padding-left: 16px; margin: 0 } .what-to-expect-in-store ul li { margin-bottom: 8px } .more-ways-to-shop { margin: 0 auto; max-width: 920px; border-top: 1px solid #f0f0f0 } @media(min-width:48em) { .more-ways-to-shop { border-top: none } } .more-ways-to-shop__content>p { margin-bottom: 24px } @media(min-width:48em) { .more-ways-to-shop__content { background: #f0f0f0; padding: 40px } .more-ways-to-shop__content>p { margin-bottom: 40px } } .more-ways-to-shop__inner>div { margin-bottom: 24px } @media(min-width:48em) { .more-ways-to-shop__inner { display: flex } .more-ways-to-shop__inner>div { flex-basis: 50%; flex-shrink: 0 } } .more-ways-to-shop__inner .donate-banner__fake-cta, .more-ways-to-shop__inner .new-window-link, .more-ways-to-shop__inner .tile-item__fake-cta, .more-ways-to-shop__inner .video-tile__fake-cta { display: block; margin: 24px 0 8px } @media(min-width:48em) { .more-ways-to-shop__inner .donate-banner__fake-cta, .more-ways-to-shop__inner .new-window-link, .more-ways-to-shop__inner .tile-item__fake-cta, .more-ways-to-shop__inner .video-tile__fake-cta { margin: 32px 0 8px; max-width: 255px } } .more-ways-to-shop__inner p { margin: 0 0 16px; line-height: 1.5rem } @media(min-width:48em) { .more-ways-to-shop__pc-express { padding-right: 40px } } .more-ways-to-shop__pc-express .sprite { width: 130px; height: 32px; margin-bottom: 16px } @media(min-width:48em) { .more-ways-to-shop__delivery { padding-left: 40px; border-left: 1px solid #8a8a8a } } @media(min-width:48em) { .more-ways-to-shop__delivery div { max-width: 255px } } .more-ways-to-shop__delivery div p { font-size: .875rem; text-align: center; margin: 0 } .more-ways-to-shop h1 { margin: 30px 0 16px } @media(min-width:48em) { .more-ways-to-shop h1 { margin: 48px 0 24px } } .flyer-result { width: 100%; cursor: pointer; position: relative } @media(min-width:48em) { .flyer-result { width: 48% } } .flyer-result__content { padding: 20px; display: flex; margin-bottom: 40px } @media(min-width:48em) { .flyer-result__content { margin-bottom: 50px } } .flyer-result__info { margin-left: 30px } .flyer-result__info--placeholder { max-width: 50% } .flyer-result__preview { flex-shrink: 0; width: 80px; max-height: 200px; overflow: hidden } @media(min-width:48em) { .flyer-result__preview { width: 125px } } .flyer-result__preview img { display: block; height: 100%; margin: 0 auto } .flyer-result__preview--placeholder { max-height: 130px } .flyer-result__address { font-style: normal; margin: 1em 0 } .flyer-result__footer { display: flex; align-items: center; min-height: 40px; width: 100%; padding-left: 20px; padding-right: 20px; position: absolute; bottom: 0 } .flyer-result__footer--placeholder { min-height: 33px; padding: 10px 20px } .flyer-result__footer-container { width: 100%; display: flex; justify-content: space-between } .flyer-result__no-flyers { text-transform: uppercase } .flyer-result--placeholder { pointer-events: none } .flyer-result--disabled { cursor: not-allowed } .flyer-store-details { display: flex; position: relative; color: #585858 } .flyer-store-details__inner { position: absolute; z-index: 1; right: 0; top: 70px; width: 260px; background: #fff; border: 1px solid #ddd } .flyer-store-details__contact { margin-bottom: 20px; padding-left: 20px; padding-right: 20px; border-bottom: 1px solid #f0f0f0 } .flyer-store-details__contact-header { color: #585858; margin-bottom: 0 } .flyer-store-details__contact-address { font-style: normal; font-size: 14px; color: #585858; margin-top: 0; margin-bottom: 1em } .flyer-store-details__hours { margin-top: 20px; padding-left: 20px; padding-right: 20px; font-size: 14px } .flyer-store-details__hours-day { display: flex; justify-content: space-between; text-align: right; margin: 0 } .flyer-store-details__link { display: block; margin: 20px; border-color: #ee3124; color: #ee3124 } .flyer-store-details__button { display: flex; align-items: center; height: 70px; background: #fff; margin-left: auto; padding-left: 5px; text-decoration: none } .flyer-store-details__button-text { text-decoration: underline } @media(max-width:34.365em) { .flyer-store-details__button-text { display: none } } .flyer-store-details__arrow { fill: #ee3124; transform: rotate(90deg) } @media(min-width:34.375em) { .flyer-store-details__store-icon { display: none } } .flyer-store-details--expanded { z-index: 2 } .flyer-store-details--expanded .flyer-store-details__store-icon { fill: #ee3124 } .flyer-store-details--expanded .flyer-store-details__arrow { transform: rotate(-90deg) } .flyer-store-details--expanded .flyer-store-details__button-text { color: #ee3124 } .flipp-placeholder { position: relative } .flipp-placeholder__page-container { display: flex; overflow-x: hidden } .flipp-placeholder__page { width: 65%; flex: 0 0 65%; height: 600px } @media(min-width:48em) { .flipp-placeholder__page { width: 350px; flex: 0 0 350px; height: 700px } } .flipp-placeholder__page:nth-child(n+3) { display: none } @media(min-width:48em) { .flipp-placeholder__page:nth-child(n+3) { display: block } } .flipp-placeholder__page:not(:first-child) { margin-left: 20px } .flipp-iframe main { display: flex !important; justify-content: center } .flipp-iframe main iframe { max-width: 1024px } .flipp-modal-content { max-width: 320px; position: relative; border-radius: 10px; background-color: #fff; border: 1px solid #e9e9e9; max-height: calc(100vh - 150px); height: auto; overflow-y: auto; overflow-x: hidden } @media(min-width:48em) { .flipp-modal-content { max-width: 768px } } @media(min-width:64em) { .flipp-modal-content { max-width: 1024px } } .flipp-modal-content .flipp-item-detail-img, .flipp-modal-content .flipp-item-detail-vid { display: flex; justify-content: center; border-bottom: 1px solid #e9e9e9 } .flipp-modal-content .flipp-item-detail-img img, .flipp-modal-content .flipp-item-detail-vid img { max-height: 380px; max-width: 320px; padding: 50px 20px } @media(min-width:48em) { .flipp-modal-content .flipp-item-detail-img img, .flipp-modal-content .flipp-item-detail-vid img { max-width: 768px } } @media(min-width:64em) { .flipp-modal-content .flipp-item-detail-img img, .flipp-modal-content .flipp-item-detail-vid img { max-width: 1024px } } .flipp-modal-content .flipp-item-detail-header { padding: 14px 24px; border-bottom: 1px solid #e7e7e7 } .flipp-modal-content .flipp-item-detail-header p { font-weight: 400; font-size: 22px; line-height: 27px } .flipp-modal-content .flipp-item-detail-header-shopping-list { margin-top: 8px } .flipp-modal-content .flipp-item-detail-info { background: #f8f8f8; padding: 24px; border-bottom: 1px solid #e7e7e7 } .flipp-modal-content .flipp-item-detail-info-price-text { margin-bottom: 8px } .flipp-modal-content .flipp-item-detail-info-price-text p { color: #d41e1e; font-size: 20px; margin: 0 } .flipp-modal-content .flipp-item-detail-info-salestory { font-size: 14px; margin-bottom: 12px } .flipp-modal-content .flipp-item-detail-info-valid-date { color: #707070; font-size: 14px } .flipp-modal-content .flipp-item-detail-description { padding: 14px 24px } .flipp-modal-content .flipp-item-detail-footer { padding: 20px 24px 24px; border-bottom: 1px solid #e7e7e7 } .flipp-modal-content .flipp-item-detail-footer-note { font-size: 12px; color: #6d6e71; font-style: italic } .flipp-modal-content .flipp-item-detail-button { display: flex; justify-content: space-around; padding: 20px 0 } .flipp-modal-content .flipp-item-detail-button a { display: flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; height: 40px; width: 160px; cursor: pointer; font-weight: 700; font-size: 14px; background-color: #1a75cf; border: 1px solid #1a75cf; border-radius: 22px; color: #fff } .eflyers-subscription-header { height: 250px; margin-bottom: 18px; padding-top: 26px; padding-bottom: 34px } @media(min-width:48em) { .eflyers-subscription-header { margin-bottom: 32px; padding-top: 32px; padding-bottom: 32px } } .eflyers-subscription-header__title { font-size: 3.125rem; line-height: 2.9375rem; margin: 0 0 28px } @media(min-width:48em) { .eflyers-subscription-header__title { font-size: 2.625rem; line-height: 3.4375rem; margin: 0 0 24px } } .eflyers-subscription-header__subtitle { font-size: .9375rem; font-weight: 700; line-height: 1.3125rem; margin: 0 } @media(min-width:48em) { .eflyers-subscription-header__subtitle { font-size: 1rem; line-height: 1.5rem } } .eflyers-subscription__container { padding-bottom: 32px } @media(min-width:48em) { .eflyers-subscription__container { max-width: 840px; padding: 0 0 112px } } .eflyers-subscription-form-container { background-color: #fff; padding: 20px } @media(min-width:48em) { .eflyers-subscription-form-container { padding: 32px } } .eflyers-subscription-form { background-color: #fff } @media(min-width:48em) { .eflyers-subscription-form { display: flex; flex-wrap: wrap; justify-content: space-between } } .eflyers-subscription-form__input-horizontal { margin: 0 0 24px } @media(min-width:48em) { .eflyers-subscription-form__input-horizontal { display: inline-block; margin: 0 0 24px; width: calc(50% - 12px) } } .eflyers-subscription-form__input-vertical { margin: 0 0 24px } .eflyers-subscription-form__input-vertical p { margin: 0 } .eflyers-subscription-form__submit-button { margin: 0 auto; width: auto } .eflyers-subscription-form__footnote { margin: 24px 0 0; text-align: center } .eflyers-subscription-success { align-items: center; background-color: #fff; display: flex; flex-direction: column; margin: 0 auto; max-width: 700px; padding: 20px 20px 34px; text-align: center } @media(min-width:48em) { .eflyers-subscription-success { padding-top: 32px } } .eflyers-subscription-success__header { font-size: 1.375rem; line-height: 1.75rem; margin: 0 0 16px } @media(min-width:48em) { .eflyers-subscription-success__header { font-size: 2rem; line-height: 2.25rem } } .weekly-flyer-opt-in { background-color: #f0f0f0; padding: 20px 0 30px } .weekly-flyer-opt-in__inner { display: flex; align-items: flex-start; min-height: 72px; max-width: 960px; padding: 12px; background: #fff; box-shadow: 0 4px 0 #bcbcbc } @media(min-width:48em) { .weekly-flyer-opt-in__inner { padding: 12px } } @media(min-width:64em) { .weekly-flyer-opt-in__inner { align-items: center } } .weekly-flyer-opt-in__icon { flex-shrink: 0; margin-right: 20px; height: 48px; width: 48px } @media(min-width:48em) { .weekly-flyer-opt-in__icon { margin-right: 16px } } .weekly-flyer-opt-in__text-group { flex-grow: 1 } .weekly-flyer-opt-in__title { line-height: 24px; font-size: 1rem; color: #403840; letter-spacing: 0; margin: 0 } @media(min-width:48em) { .weekly-flyer-opt-in__title { font-size: 1rem; line-height: 24px } } .weekly-flyer-opt-in__message { font-size: .8125rem; line-height: 18px } @media(min-width:48em) { .weekly-flyer-opt-in__message { font-size: .8125rem; line-height: 18px } } .weekly-flyer-opt-in__caret { padding: 10px; line-height: 0 } .weekly-flyer-opt-in__caret .sprite { fill: #ee3124; width: 14px; height: 14px } .visit-store__description { text-align: center } @media(min-width:48em) { .visit-store__description { display: flex; max-width: 460px } } .visit-store__card-section { margin: 0 20px } .visit-store__find-a-store { display: block; margin: 40px auto } @media(min-width:48em) { .visit-store__find-a-store { max-width: 200px } } .visit-store__back-to-cards .sprite { margin-top: -3px; vertical-align: middle; fill: #ee3124; transform: rotate(180deg) } .transfer-video-line { border: 0; border-top: 1px solid #ddd; margin: 10px auto } @media(min-width:48em) { .transfer-video-line { margin: 30px auto } } .transfer-video-link { display: inline-block; font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif } .transfer-video-link__icon { vertical-align: middle; margin-right: 10px; width: 36px; height: auto; fill: transparent } @media(min-width:48em) { .transfer-video-link__icon { width: 56px } } .transfer-video-link sup { font-size: 10px } @media(min-width:48em) { .member-care__description { max-width: 420px } } .member-care__find-a-store { display: block; margin: 40px auto 60px } @media(min-width:48em) { .member-care__find-a-store { max-width: 200px } } .member-care__link-more-cards { max-width: none; margin: 0 10px } .enrol-communications-label__learn-more-button { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif } .registration-confirmation { background: linear-gradient(180deg, #f9dada, #f9dada 75%, snow 0, snow) } .registration-confirmation__container { max-width: 400px; margin: 0 auto; padding: 0 16px; text-align: center } @media(min-width:48em) { .registration-confirmation__container { max-width: 750px; margin: 0 auto } } .registration-confirmation__callout { background: #fff; margin: 16px 0 20px; padding: 24px; border-radius: 8px; box-shadow: 0 1px 5px rgba(158, 147, 166, .2), 0 3px 4px rgba(158, 147, 166, .12), 0 2px 4px rgba(158, 147, 166, .14) } @media(min-width:48em) { .registration-confirmation__callout { max-width: 750px; padding: 30px } } .registration-confirmation__title { margin-top: 40px; color: #ac342a } @media(min-width:48em) { .registration-confirmation__title { margin-top: 60px } } .registration-confirmation__subtitle { margin: 0 auto; width: 250px; padding-bottom: 18px } @media(min-width:48em) { .registration-confirmation__subtitle { width: auto } } .registration-confirmation__copy { padding-top: 18px; margin: 0 0 24px; border-top: 1px solid rgba(158, 147, 166, .4) } .registration-confirmation__cta { padding: 12px 24px; display: inline-block } .registration-confirmation__offers-link { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; display: block; margin-top: 24px; color: #157a77 } .registration-confirmation__offers-link:hover { color: #615395 } .registration-confirmation__cta-copy { color: #fff } .registration-confirmation__image { width: 90%; margin: 0 0 20px } @media(min-width:48em) { .registration-confirmation__image { margin: 40px 0; max-width: 550px } } .registration-confirmation__terms { background: snow; padding: 25px 18px; border-top: 1px solid rgba(158, 147, 166, .4) } .registration-confirmation__terms-copy { margin: 0 auto } @media(min-width:48em) { .registration-confirmation__terms-copy { width: 90%; max-width: 1000px } } .claim-phone-number-modal-content { width: 328px; margin: auto; background: #fff; border-radius: 8px; padding: 48px 16px 16px; display: flex; flex-direction: column; position: relative } .claim-phone-number-modal-content .pco-modal-content__back, .claim-phone-number-modal-content .pco-modal-content__close { border: 2px solid transparent } .claim-phone-number-modal-content .pco-modal-content__back svg, .claim-phone-number-modal-content .pco-modal-content__close svg { stroke-width: 1px; fill: #191919; stroke: #191919 } .claim-phone-number-modal-content .pco-modal-content__back:focus, .claim-phone-number-modal-content .pco-modal-content__back:focus-within, .claim-phone-number-modal-content .pco-modal-content__back:hover, .claim-phone-number-modal-content .pco-modal-content__close:focus, .claim-phone-number-modal-content .pco-modal-content__close:focus-within, .claim-phone-number-modal-content .pco-modal-content__close:hover { background-color: rgba(97, 83, 149, .0784313725) } .claim-phone-number-modal-content .pco-modal-content__back:active, .claim-phone-number-modal-content .pco-modal-content__close:active { background: #403840 } .claim-phone-number-modal-content .pco-modal-content__back:active svg, .claim-phone-number-modal-content .pco-modal-content__close:active svg { fill: #fff; stroke: #fff } .claim-phone-number-modal-content .pco-modal-content__back { transform: rotate(180deg); min-width: 0 } .claim-phone-number-modal-content .pco-modal-content__back svg { padding: 3px } .claim-phone-number-modal-content__text { text-align: center; border-bottom: 1px solid rgba(158, 147, 166, .25) } .claim-phone-number-modal-content__text h1 { margin: 8px auto 0; font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif } .link-phone-number-modal-content { width: 328px; margin: auto; background: #fff; border-radius: 8px; padding: 48px 16px 16px; display: flex; flex-direction: column; position: relative } .link-phone-number-modal-content .account-setting { padding: 8px } .link-phone-number-modal-content .account-setting__title { text-align: center; font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 18px; margin: 0 auto 14px } .link-phone-number-modal-content .account-setting__form-info { text-align: center; font-size: 12px; line-height: 16px } .link-phone-number-modal-content .account-setting__submit-button { display: block; width: -moz-fit-content; width: fit-content; margin: 0 auto } .homepage-hero { position: relative; overflow: hidden; padding-top: 60px; background: linear-gradient(180deg, #feece8 1%, #feece8 45%, #f4dbd6) } @media(min-width:48em) { .homepage-hero { padding-top: 80px } } .homepage-hero.default-hero { background: #fff; padding-top: 88px } @media(min-width:48em) { .homepage-hero.default-hero { padding-top: 60px } } @media(min-width:64em) { .homepage-hero.default-hero { padding-top: 96px } } .homepage-hero__pco-card-wrapper { display: flex; justify-content: center; position: relative; padding-bottom: 40px } .homepage-hero__ring-top-right { position: absolute; width: 166px; height: 166px; top: 50px; right: -76px; transform: rotate(135deg) } @media(max-width:47.99em) { .homepage-hero__ring-top-right { display: none } } .homepage-hero__inner { position: relative; text-align: center } .homepage-hero__inner__inner { display: flex } .homepage-hero__inner--pco { padding-bottom: 80px } .homepage-hero__title { color: #ee3124; margin: 0 0 10px } .homepage-hero__subtitle { margin: 0 auto 20px; max-width: 460px } @media(min-width:48em) { .homepage-hero__subtitle { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1rem; line-height: 1.5; margin-bottom: 40px } } .homepage-hero__login-link { display: inline-block } .homepage-hero__faq-link { color: #fff; padding: 16px 0 } .default-hero .homepage-hero__inner { display: flex; flex-wrap: wrap; justify-content: space-between } .default-hero .homepage-hero__text-section { flex: 1 1 0%; text-align: left; padding-right: 40px; display: flex; flex-wrap: wrap; align-content: center } @media(max-width:63.99em) { .default-hero .homepage-hero__text-section { align-content: flex-start } } @media(max-width:47.99em) { .default-hero .homepage-hero__text-section { padding-right: 0; flex: 1 1 100%; z-index: 1 } } .default-hero .homepage-hero__image-section { flex: 1 1 0%; padding: 0 12px 0 28px } @media(max-width:47.99em) { .default-hero .homepage-hero__image-section { padding: 0; flex: 1 1 100% } } .default-hero .homepage-hero__title { color: #ee3124; margin-bottom: 24px; width: 100% } .default-hero .homepage-hero__title--mobile { text-align: left } @media(min-width:64em) { .default-hero .homepage-hero__title--mobile { display: none } } @media(max-width:47.99em) { .default-hero .homepage-hero__title--mobile { font-size: 2rem } } @media(max-width:63.99em) { .default-hero .homepage-hero__title--desktop { display: none } } .default-hero .homepage-hero__subtitle { font-family: Noir, sans-serif; margin: 0 0 40px; line-height: 1.33 } @media(max-width:47.99em) { .default-hero .homepage-hero__subtitle { max-width: none; flex-basis: 100%; line-height: 1.4; font-size: .9375rem; margin: 0 0 32px } } .default-hero .homepage-hero__graphic-container { /* border: 4px solid #f79d90; */ display: flex } .default-hero .homepage-hero__graphic-container img { width: 100%; transform: translate(16px, -16px) } @media(max-width:47.99em) { .default-hero .homepage-hero__graphic-container { margin: -20px 20px 0 } } .ir-banner { background: #24338a; padding: 40px 0 30px; overflow: hidden } .ir-banner__container { display: flex; flex-direction: column; justify-content: space-between; align-items: center } @media(min-width:48em) { .ir-banner__container { flex-direction: row } } .ir-banner__header { display: flex; flex-direction: column; align-items: center } @media(min-width:48em) { .ir-banner__header { display: block; width: 660px } } @media(min-width:64em) { .ir-banner__header { width: 691px } } .ir-banner__content { padding: 28px 0 } .ir-banner__content, .ir-banner__title { color: #fff; text-align: center } @media(min-width:48em) { .ir-banner__content, .ir-banner__title { text-align: start } } .ir-banner__cta { width: 260px; color: #191919 } .ir-banner__cover-image { width: 100vw; margin: 28px -20px 0 } @media(min-width:48em) { .ir-banner__cover-image { width: auto; margin: 10px 0; transform: translateX(40px) } } @media(min-width:64em) { .ir-banner__cover-image { margin: 40px 0 } } @media(min-width:1280px) { .ir-banner__cover-image { transform: translateX(calc(50vw - 610px)) } } .ir-banner__cover-image img { width: 100% } .ir-banner .no-margin { margin: 0 } .homepage-legacy { background-color: #fff; padding: 60px 0 70px; text-align: center } @media(min-width:48em) { .homepage-legacy { padding: 40px 0 } } @media(min-width:64em) { .homepage-legacy { padding: 90px 0 110px } } @media(min-width:48em) { .homepage-legacy__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center } } .homepage-legacy__title { margin: 0 0 40px; width: 100% } @media(min-width:48em) { .homepage-legacy__title { padding: 0 3% } } @media(min-width:64em) { .homepage-legacy__title { padding: 0 7%; margin-bottom: 60px } } .homepage-legacy__item-group { width: 100%; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: baseline } .homepage-legacy__item { flex: 0 1 } @media(max-width:34.365em) { .homepage-legacy__item { flex-basis: calc(50% - 13.5px) } } @media(min-width:34.375em)and (max-width:63.99em) { .homepage-legacy__item { flex-basis: calc(50% - 40px) } } @media(min-width:64em) { .homepage-legacy__item { flex-basis: calc(33.33333% - 66.66667px) } } .homepage-legacy__item p { margin: 20px 0 30px } .homepage-legacy .sprite { display: block; height: 46px; width: 60px; margin: auto } .homepage-legacy .sprite.homepage-legacy__receipt-sprite { height: 56px } .homepage-pcf { background: #f9dada; padding: 60px 0 30px } @media(min-width:48em) { .homepage-pcf { padding: 40px 0 } } @media(min-width:48em) { .homepage-pcf__inner { display: flex; justify-content: space-between; align-items: center } } .homepage-pcf__header { display: flex; flex-direction: column; align-items: center; text-align: center } @media(min-width:48em) { .homepage-pcf__header { text-align: left; width: 660px } } .homepage-pcf__title { margin: 0 0 10px } @media(min-width:48em) { .homepage-pcf__title { margin: 0 0 16px } } .homepage-pcf__title sup { font-size: 1.2rem } .homepage-pcf__subtitle { margin: 0 } .homepage-pcf__subtitle:lang(en-CA) sup { font-size: 1.4rem } .homepage-pcf__link { display: flex; margin: 28px auto 0 } @media(min-width:48em) { .homepage-pcf__link { margin: 28px auto 0 0 } } .homepage-pcf__cta { width: 260px } .homepage-pcf__image-container { text-align: center; max-width: 200px; margin: 0 auto } @media(min-width:34.375em) { .homepage-pcf__image-container { max-width: 350px } } @media(min-width:48em) { .homepage-pcf__image-container { margin: 0 0 0 20px } } .homepage-pcf__image-container img { max-width: 100% } .homepage-app { background: #feece8 } @media(max-width:47.99em) { .homepage-app { padding: 80px 0 0; text-align: center } } .homepage-app__inner { max-width: 1250px; overflow: hidden } @media(min-width:48em) { .homepage-app__inner { height: 400px; display: flex; justify-content: space-between; align-items: center } } @media(min-width:64em) { .homepage-app__inner { height: 600px } } @media(min-width:48em) { .homepage-app__header { width: 730px } } .homepage-app__title { margin: 0 0 10px } @media(min-width:48em) { .homepage-app__title { margin: 0 0 16px } } .homepage-app__subtitle { margin: 0 } .homepage-app__badges { display: flex; justify-content: center; margin: 20px 0 0 } @media(min-width:48em) { .homepage-app__badges { justify-content: flex-start; margin: 30px 0 0 } } .homepage-app__badge-app:first-child { margin-right: 10px } @media(min-width:34.375em) { .homepage-app__badge-app:first-child { margin-right: 20px } } .homepage-app__badge-app-svg { pointer-events: none; width: 130px; height: 40px } .homepage-app__phone-graphic { margin: 40px 0 30px } @media(min-width:48em) { .homepage-app__phone-graphic { margin: 0 0 0 40px } } @media(min-width:64em) { .homepage-app__phone-graphic { margin: 0 0 0 100px } } .download-app { background: #fdf0f0 } @media(max-width:47.99em) { .download-app { padding: 70px 0 0 } } @media(min-width:34.375em) { .download-app { text-align: center } } @media(min-width:48em) { .download-app { text-align: left } } .download-app sup { line-height: 0 } .download-app .container, .download-app .eflyers-subscription__container, .download-app .homepage-join__inner, .download-app .points-days-banners-section, .download-app .points-days-cta-section, .download-app .points-days-offers-section, .download-app .points-days-ts-and-cs__container, .download-app .weekly-flyer-opt-in__inner { max-width: 1076px } @media(min-width:48em) { .download-app__inner { display: flex; justify-content: space-between; align-items: center } } @media(max-width:34.365em) { .download-app__text-container { padding: 0 20px } } @media(min-width:48em) { .download-app__text-container { width: 50%; padding: 2rem 0 } } @media(min-width:64em) { .download-app__text-container { width: 40% } } .download-app__title { color: #655c6c; margin: 0 0 1.4rem } @media(min-width:48em) { .download-app__title.download-app__title-text { margin: 0 0 2rem; font-size: 2.625rem; line-height: 3rem } } .download-app__title.download-app__title-text sup { font-size: 1.2rem } .download-app__subtitle { color: #655c6c; margin: 0 } @media(max-width:47.99em) { .download-app__subtitle.download-app__subtitle-text { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-weight: 400; font-size: .9375rem; line-height: 1.25rem } } .download-app__badges { display: flex; justify-content: flex-start; margin: 2rem 0 0 } @media(min-width:34.375em) { .download-app__badges { justify-content: center } } @media(min-width:48em) { .download-app__badges { justify-content: flex-start; margin: 6rem 0 0 } } .download-app__badge-app:first-child { margin-right: 10px } @media(min-width:34.375em) { .download-app__badge-app:first-child { margin-right: 20px } } @media(max-width:34.365em) { .download-app__badge-app img { width: 110px; height: 32px } } .download-app__badge-app-svg { pointer-events: none; width: 110px; height: 32px } @media(min-width:34.375em) { .download-app__badge-app-svg { width: 130px; height: 40px } } .download-app__image-container { text-align: center; max-width: 404px; margin: 0 auto } @media(min-width:48em) { .download-app__image-container { margin: 0 } } .download-app__picture img { max-width: 100% } .homepage-offers { overflow: hidden; background: #ee3124; text-align: center } @media(min-width:48em) { .homepage-offers__inner { display: flex; max-width: 1280px; margin: auto } } .homepage-offers__header { padding: 70px 0; position: relative; -webkit-font-smoothing: antialiased } @media(min-width:48em) { .homepage-offers__header { flex: 0 0 50%; display: flex; align-items: center; justify-content: center; padding: 0 } } .homepage-offers__header * { color: #fff } .homepage-offers__header-inner { position: relative; margin: 0 auto; padding-left: 20px; padding-right: 20px } @media(min-width:48em) { .homepage-offers__header-inner { padding: 20px 24px; max-width: 540px } } .homepage-offers__title { margin: 0 0 10px } @media(min-width:48em)and (max-width:63.99em) { .homepage-offers__title { font-size: 2.25rem } } .homepage-offers__subtitle { margin: 0 } @media(min-width:48em)and (max-width:63.99em) { .homepage-offers__subtitle { font-size: 1.25rem } } .homepage-offers-grid { display: flex; flex-flow: row wrap; margin: 0; padding: 0 } @media(min-width:48em) { .homepage-offers-grid { flex: 0 0 50%; -webkit-font-smoothing: antialiased } } .homepage-offers-grid__square { position: relative; list-style: none; flex: 0 0 50%; display: flex; align-items: flex-start; justify-content: center; background-repeat: no-repeat; background-position: 50%; background-size: cover } .homepage-offers-grid__square-hack { width: 100% } .homepage-offers-grid__square-hack-padding { padding-bottom: 100% } .homepage-offers-grid__square-text { position: absolute; left: 10px; right: 10px; max-width: none; top: 12%; font-size: 3.7vw; line-height: 1.4 } @media(max-width:19.99em) { .homepage-offers-grid__square-text { font-size: .8125rem } } @media(min-width:34.375em) { .homepage-offers-grid__square-text { font-size: 3vw; left: 20px; right: 20px; top: 13% } } @media(min-width:48em) { .homepage-offers-grid__square-text { font-size: 1.9vw } } @media(min-width:64em) { .homepage-offers-grid__square-text { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 2.2vw } } @media(min-width:80em) { .homepage-offers-grid__square-text { font-size: 1.75rem; line-height: 1.285714286; left: 30px; right: 30px } } .homepage-offers-grid__square:first-child { background-image: url(/static/images/homepage/offer-strawberry.jpg) } .homepage-offers-grid__square:nth-child(2) { background-image: url(/static/images/homepage/offer-eggs.jpg) } .homepage-offers-grid__square:nth-child(3) { background-image: url(/static/images/homepage/offer-car.jpg) } .homepage-offers-grid__square:nth-child(4) { background-image: url(/static/images/homepage/offer-makeup.jpg) } [lang=fr-CA] .homepage-offers-grid__square-text { top: 10% } @media(min-width:48em) { [lang=fr-CA] .homepage-offers-grid__square-text { font-size: 1.8vw } } @media(min-width:80em) { [lang=fr-CA] .homepage-offers-grid__square-text { font-size: 26px } } .homepage-stores { background: #fce5e3 url(/static/images/homepage/stores-background.png) no-repeat 50%/auto 100%; padding-top: 70px; padding-bottom: 80px } @media(min-width:34.375em) { .homepage-stores { padding: 90px 0 } } @media(min-width:48em) { .homepage-stores { padding-top: 120px; padding-bottom: 140px } } .homepage-stores__inner { max-width: 780px; text-align: center; margin: 0 auto } .homepage-stores__title { margin: 0 } .homepage-stores__subtitle { font-size: 1.875rem; line-height: 1.2; margin: 20px 0 } @media(min-width:48em) { .homepage-stores__subtitle { font-size: 2.6875rem; line-height: 1.162790698 } } .homepage-stores--results-shown { padding-bottom: 40px } @media(min-width:48em) { .homepage-stores--results-shown { padding-bottom: 70px } } .homepage-stores__search { display: flex; flex-flow: row nowrap; width: 500px; max-width: 100%; border-bottom: 3px solid rgba(0, 0, 0, .1); margin: 20px auto 0 } .homepage-stores__search--full-width { width: 100% } @media(min-width:48em) { .homepage-stores__search { margin-top: 30px } } .homepage-stores__search-button { position: relative; min-width: 0; flex-shrink: 0; z-index: 1 } @media(min-width:48em) { .homepage-stores__search-button { min-width: 160px } } .homepage-stores__input { background-color: #fff; border: none; height: 52px; width: 100%; padding-left: 50px; line-height: normal } @media(max-width:34.365em) { .homepage-stores__input { font-size: .875rem } } .homepage-stores__input-container { position: relative; flex-grow: 1 } .homepage-stores__input-container .sprite { pointer-events: none; position: absolute; margin-top: 15px; margin-left: 15px } .homepage-province-stores { margin-top: 40px } .homepage-province-stores__title { margin: 0 } .homepage-province-stores__rule { border: 0; border-top: 1px solid #ddd; width: 50%; margin: 20px auto } @media(min-width:48em) { .homepage-province-stores__rule { margin: 30px auto } } .homepage-province-stores__logo-grid-container { background: #fff; padding: 24px 24px 0 } @media(min-width:48em) { .homepage-province-stores__logo-grid-container { padding: 40px 50px 20px } } .homepage-province-stores--error .homepage-province-stores__logo-grid-container { padding: 24px } @media(min-width:48em) { .homepage-province-stores--error .homepage-province-stores__logo-grid-container { padding: 40px 50px } } .homepage-faq { padding: 70px 0 60px } @media(min-width:48em) { .homepage-faq { padding: 90px 0 } } .homepage-faq__title { margin: 0 0 40px; text-align: center } .homepage-faq__footer-links { margin-top: 50px; text-align: center } .homepage-faq__faq-link-button { display: flex; justify-content: center; align-items: center; width: 260px; margin: 0 auto 20px } .homepage-faq__faq-link-button .new-window-link__icon { margin: -1px 2px 0 8px } .homepage-faq__contact-us-link { display: inline-block } .esso-redemption-faq__inner, .homepage-faq__inner { max-width: 996px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center } .esso-redemption-faq { background-color: #fff; padding: 40px 24px } @media(min-width:48em) { .esso-redemption-faq { padding: 120px 0 } } .esso-redemption-faq__title { margin: 0 0 20px; text-align: center; color: #655c6c } @media(min-width:48em) { .esso-redemption-faq__title { margin: 0 0 40px } } .esso-redemption-faq__faq-link-button { display: flex; justify-content: center; align-items: center; background-color: #fff; padding: 12px 24px 11px; border-radius: 47px; border: 1px solid #157a77; color: #157a77; width: -moz-max-content; width: max-content; margin: 0 auto } .esso-redemption-faq__faq-link-button:focus, .esso-redemption-faq__faq-link-button:hover { background-color: #fff; border: 1px solid #615395; color: #615395 } .esso-redemption-faq__faq-link-button:active { color: #403840 } .esso-redemption-faq__faq-link-button .new-window-link__icon { margin: -1px 2px 0 8px } .homepage-join { position: relative; overflow: hidden; background-color: #feece8; text-align: center; padding: 90px 0 80px } @media(min-width:48em) { .homepage-join { padding: 90px 0 60px } } .homepage-join__inner { position: relative; z-index: 1; max-width: 780px } .homepage-join__title { margin: 0 0 10px } @media(min-width:48em) { .homepage-join__title { margin: 0 0 16px } } .homepage-join__subtitle { margin: 0 0 30px } .homepage-join__link { display: inline-block; width: 260px } .donate-banner { margin: 0 auto } .donate-banner__inner { align-items: center; background: #fff; box-shadow: 0 4px 0 0 #bcbcbc; display: flex; margin: 24px 0 32px; padding: 12px; text-decoration: inherit } @media(min-width:48em) { .donate-banner__inner { background: #fff url(/static/images/brand/confetti-dots.png) no-repeat 50%; background-size: cover; flex-direction: column; margin: 32px 0 40px; padding: 8px 0 18px } } .donate-banner__content { display: flex; flex-direction: column; margin-left: 16px } @media(min-width:48em) { .donate-banner__content { align-items: center; margin-left: 0 } } .donate-banner__title { color: #403840; font-size: 1rem; line-height: 1.5rem; margin: 0 0 4px } @media(min-width:48em) { .donate-banner__title { font-size: 1.3125rem; line-height: 1.5625rem; margin: 4px 0 8px } } .donate-banner__fake-cta { text-decoration: underline; font-size: .8125rem; margin: 0; line-height: 1.125rem; color: #157a77 } .donate-banner__fake-cta:hover { color: #615395 } @media(min-width:48em) { .donate-banner__fake-cta { font-size: .9375rem } } .donate-banner .sprite { height: 48px; width: 48px } @media(min-width:48em) { .donate-banner .sprite { height: 32px; width: 32px } } .points-dashboard-achievements { background: #fff; width: 100%; padding: 24px 0; position: relative; overflow: hidden; margin-top: 55px } @media(min-width:48em) { .points-dashboard-achievements { padding: 30px 0 } } .points-dashboard-achievements .utility-content { margin: 0 auto } .points-dashboard-achievements__no-achievements { line-height: 1.2 } @media(min-width:48em) { .points-dashboard-achievements__no-achievements { line-height: .7 } } .points-dashboard-achievements__no-achievements p:first-of-type, .points-dashboard-achievements__no-achievements p:nth-of-type(2) { margin-top: 16px } .points-dashboard-achievements__no-achievements p:last-of-type { margin-bottom: 30px } .points-dashboard-achievements__no-achievements .sprite { width: 64px; height: 64px } .points-dashboard-achievements__no-achievements .sprite:nth-of-type(2), .points-dashboard-achievements__no-achievements .sprite:nth-of-type(3) { position: relative; right: 10px } .points-dashboard-achievements__no-achievements .sprite:nth-of-type(3) { right: 20px } .points-dashboard-achievements__no-achievements .sprite:nth-of-type(2) { z-index: 2 } .points-dashboard-achievements__no-achievements .link { width: 250px; display: block } .points-dashboard-achievements .loading-placeholder__inner--black-background { margin-top: 5px } .points-dashboard-achievements-background * { position: absolute } .points-dashboard-achievements-background--circle { transform: rotate(40deg); width: 150px; height: 150px; right: -60px; bottom: -70px } @media(min-width:48em) { .points-dashboard-achievements-background--circle { width: 400px; height: 400px; right: -200px; bottom: -180px } } .points-dashboard-achievements-background--dot { top: -15px; right: 40px; width: 35px; height: 35px } @media(min-width:48em) { .points-dashboard-achievements-background--dot { right: 150px } } .points-dashboard-achievement { display: flex; margin-bottom: 20px } .points-dashboard-achievement .sprite { width: 64px; height: 64px } .points-dashboard-achievement__inner { z-index: 0; margin-left: 20px; flex-grow: 1 } .points-dashboard-achievement__inner:first-of-type { margin-bottom: 32px } .points-dashboard-achievement__inner p { margin: 0 } .points-dashboard-achievement__inner p:nth-of-type(2) { margin-top: 8px } .points-dashboard-achievement__inner p:first-of-type { margin-top: 5px } .points-dashboard-achievement__inner div { z-index: 2 } .points-dashboard-achievement__inner .loading-placeholder { margin-left: 20px } .points-dashboard-achievement__icon { display: flex; flex-direction: column; align-items: center } @media(min-width:48em) { .points-dashboard-achievement__icon { min-width: 125px } } .points-dashboard-achievement__icon--overlay { background: #bb2620; border-radius: 15px; color: #fff; display: flex; font-size: .75rem; justify-content: center; align-items: center; padding: 5px 5px 3px; min-width: 75px; position: relative; bottom: 12px } .points-dashboard-banner { overflow: hidden; position: relative; background: #fff; text-align: center; min-height: 80px } .points-dashboard-banner .loading-placeholder { margin: 10px 10px 0 } .points-dashboard-banner__badge-container { padding: 10px 0; max-width: 920px; display: flex; align-items: center; justify-content: center; margin: 0 auto; position: relative } .points-dashboard-banner__badge-container .sprite { width: 60px; height: 50px } .points-dashboard-banner__badge { position: relative; width: 80px; height: 60px; display: flex; justify-content: center; align-items: center; transition: .2s ease } .points-dashboard-banner__badge.member-since--selected, .points-dashboard-banner__badge.pcf--selected { cursor: auto } .points-dashboard-banner__badge.member-since--selected.member-since, .points-dashboard-banner__badge.pcf--selected.member-since { transform: translateX(40px) } .points-dashboard-banner__badge.member-since--selected.pcf, .points-dashboard-banner__badge.pcf--selected.pcf { transform: translateX(-40px) } .points-dashboard-banner__badge.member-since--selected.member-since, .points-dashboard-banner__badge.pcf--selected.pcf { z-index: 3 } .points-dashboard-banner__drawer { max-width: 920px; max-height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; position: relative; text-align: center; padding-bottom: 25px; transition: max-height, .15s linear } .points-dashboard-banner__drawer-close { position: absolute; right: 20px; top: 20px } @media(min-width:48em) { .points-dashboard-banner__drawer-close { right: 40px } } .points-dashboard-banner__drawer-close .sprite { width: 20px; height: 20px } .points-dashboard-banner__drawer-title { color: #ee3124 } .points-dashboard-banner__drawer-copy { margin-top: 0 } .points-dashboard-banner__drawer-subcopy { display: flex; flex-direction: column; align-items: center } .points-dashboard-banner__drawer-subcopy .donate-banner__fake-cta, .points-dashboard-banner__drawer-subcopy .new-window-link, .points-dashboard-banner__drawer-subcopy .tile-item__fake-cta, .points-dashboard-banner__drawer-subcopy .video-tile__fake-cta { color: #000; font-weight: 700; text-decoration: none; margin-bottom: 20px } .points-dashboard-banner__drawer-subcopy .donate-banner__fake-cta .sprite, .points-dashboard-banner__drawer-subcopy .new-window-link .sprite, .points-dashboard-banner__drawer-subcopy .tile-item__fake-cta .sprite, .points-dashboard-banner__drawer-subcopy .video-tile__fake-cta .sprite { fill: #ee3124; position: relative; bottom: -7px } .points-dashboard-button, .points-dashboard-button:focus { color: #000; background: #fff; border: none } .points-dashboard-button:focus:hover, .points-dashboard-button:hover { color: #fff; background: #ee3124 } .points-dashboard-button:focus:hover a, .points-dashboard-button:hover a { color: #fff } .points-dashboard-error { padding: 50px 0 } .points-dashboard-error .sprite { fill: #bb2620 } .points-dashboard-error__inner { display: flex } .pc-insiders-subscription { margin: 0 auto } .pc-insiders-subscription__title { margin-bottom: 1rem } .pc-insiders-subscription__subtitle { flex-basis: 100%; margin-bottom: 1rem } .pc-insiders-subscription__tiles-container { display: flex; flex-wrap: wrap; justify-content: space-between } .pc-insiders-subscription__tile { align-items: center; background-color: #fff; margin-bottom: 8px; flex-basis: 100%; display: flex; padding: 16px } @media(min-width:48em) { .pc-insiders-subscription__tile { flex: 0 1 calc(50% - 0.5rem); -ms-flex: 0 1 45%; margin-bottom: 16px; padding: 24px 16px } } .pc-insiders-subscription__tile-icon svg { height: 100%; margin-right: 16px; width: 40px } @media(min-width:48em) { .pc-insiders-subscription__tile-icon svg { width: 48px } } .ways-to-earn { margin: 55px auto 35px } .ways-to-earn section { margin-bottom: 15px } .ways-to-earn__subtitle { margin-bottom: 16px } .homepage-footnote { position: relative; overflow: hidden; text-align: left; padding: 25px 20px; border-top: 1px solid #ddd } @media(min-width:48em) { .homepage-footnote { padding: 25px 40px } } .homepage-footnote__inner { max-width: 1280px; margin-left: auto; margin-right: auto; padding: 0; position: relative; z-index: 1; font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; color: #585858; font-size: .75rem; line-height: 1.333333333 } .homepage-footnote__link, .homepage-footnote__link:hover { color: #157a77 } .dynamic-form { width: 100% } @media(min-width:64em) { .dynamic-form { width: 840px } } .dynamic-form__back-button { display: flex; position: relative; top: 18px; text-decoration: none } @media(min-width:64em) { .dynamic-form__back-button { position: relative; top: 24px } } .dynamic-form__back-button:focus, .dynamic-form__back-button:hover { text-decoration: underline } .dynamic-form__back-button .sprite { transform: rotate(180deg) } .dynamic-form__back-button span { margin-left: 16px } .dynamic-form__field-set-container { display: flex; flex-direction: column } .field-set__header { margin: 24px 0 16px } @media(min-width:64em) { .field-set__header { margin: 48px 0 32px } } .field-set__items-container { background-color: #fff; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 16px } @media(min-width:64em) { .field-set__items-container { padding: 20px 40px } } .field-set__submit-button { width: 232px; margin: 24px auto 0 } @media(min-width:64em) { .field-set__submit-button { margin: 48px auto 0 } } .field-set input[disabled] { color: #585858 } .field-set-item { width: 100% } @media(min-width:64em) { .field-set-item--horizontal { width: calc(50% - 26px) } } .field-set-item .radio-group { margin-top: 4px 0 } @media(min-width:64em) { .field-set-item .radio-group { margin: 8px 0 } } .field-set-item .radio-group__option { margin: 0; padding: 8px 0 } @media(min-width:64em) { .field-set-item .radio-group__option { padding: 12px 0 } } .field-set-item .dropdown-group, .field-set-item .text-group { margin: 8px 0 } @media(min-width:64em) { .field-set-item .dropdown-group, .field-set-item .text-group { margin: 20px 0 } } .field-set-item .text-group__textarea { height: 110px } .galen-updates { background: #f0f0f0; flex-grow: 1 } .galen-updates header { background: #f9dada } .galen-updates__body, .galen-updates__content h2, .galen-updates__inner-header { margin: 0 auto; max-width: 780px } .galen-updates__inner-header { display: flex; justify-content: flex-start; align-items: center } @media(min-width:64em) { .galen-updates__inner-header { padding: 0 } } .galen-updates__inner-header h1 { font-size: 1.5rem } @media(min-width:34.375em) { .galen-updates__inner-header h1 { font-size: 2rem } } .galen-updates__inner-header img { max-width: 100px; margin: 30px 16px 30px 0 } @media(min-width:34.375em) { .galen-updates__inner-header img { max-width: 150px } } .galen-updates__content { margin: 48px auto 0 } .galen-updates__content:last-of-type { margin-bottom: 48px } .galen-updates__content h2 { line-height: 1; margin: 0 auto 16px; font-size: 1.2rem } @media(min-width:34.375em) { .galen-updates__content h2 { font-size: 1.5rem } } @media(min-width:64em) { .galen-updates__content h2 { padding: 0 } } .galen-updates__body { background: #fff; padding: 40px 20px } @media(min-width:48em) { .galen-updates__body { padding: 40px } } .galen-updates__body ol>li, .galen-updates__body ul>li { margin: 1rem 0 } .galen-updates-error .utility-content { max-width: 780px; margin: 30px auto; padding-left: 20px; padding-right: 20px } @media(min-width:48em) { .galen-updates-error .utility-content { padding: 0 } } .galen-updates-error__inner { margin: 0 auto; display: flex } .galen-updates-error__inner .sprite { fill: #bb2620 } .tile-list { margin: 0 auto 28px; max-width: 702px; position: relative; z-index: 1; list-style-type: none } @media(min-width:64em) { .tile-list { margin-bottom: 40px; max-width: 794px } } .tile-list__container { display: flex; justify-content: space-between; flex-wrap: wrap; list-style-type: none; padding: 0; margin: 0 0 24px } .tile-list__see-more { margin: 0 auto; max-width: 254px } .tile-list--your-pco { max-width: none } @media(min-width:48em) { .tile-list--your-pco { max-width: 1280px; padding: 0 40px } } .tile-list--your-pco .tile-list__container { display: block } @media(min-width:48em) { .tile-list--your-pco .tile-list__container { display: flex; max-width: 792px; margin: 0 auto } } .tile-item { flex-basis: calc(50% - 4px); margin-bottom: 8px; background: #fff; box-shadow: 0 1px 5px rgba(158, 147, 166, .2), 0 3px 4px rgba(158, 147, 166, .12), 0 2px 4px rgba(158, 147, 166, .14); transition: box-shadow .3s ease-in-out; border-radius: 8px; position: relative } .tile-item__wrapper { display: block; height: 100% } .tile-item:focus, .tile-item:focus-within, .tile-item:hover { box-shadow: 0 8px 10px rgba(158, 147, 166, .3), 0 6px 30px rgba(158, 147, 166, .12), 0 16px 24px rgba(158, 147, 166, .14); cursor: pointer } @media(min-width:48em) { .tile-item { flex-basis: calc(33% - 16px); margin: 0 8px 16px } } .tile-item a { text-decoration: none; display: flex; flex-direction: column } .tile-item__fake-cta { text-decoration: underline; font-size: .75rem } @media(min-width:48em) { .tile-item__fake-cta { font-size: .875rem } } .tile-item__content { padding: 16px; text-align: left; order: 2 } .tile-item__content--description { margin: 0; color: #655c6c; font-size: .875rem } .tile-item__content--title { margin: 0 0 4px; color: #191919; font-weight: 400; font-size: .875rem } @media(min-width:48em) { .tile-item__content--title { font-size: 1rem } } .tile-item__image { display: block; border-radius: 8px 8px 0 0; max-width: 100% } .tile-item__image.image--error { width: 64px; height: 64px; margin: 16px auto } .tile-item--sponsored:lang(fr-CA):before { content: "Commandité" } .tile-item--sponsored:lang(en-CA):before { content: "Sponsored" } .tile-item--sponsored:before { position: absolute; top: 0; right: 0; background-color: rgba(25, 25, 25, .5); padding: .2rem .5rem; margin: 8px; color: #fff; font-size: .875rem } .tile-item__tag { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; padding: 0 8px; position: absolute; height: 20px; background: #fdde0e; border-radius: 32px; font-family: Inter, sans-serif; font-style: normal; font-weight: 700; font-size: 9px; line-height: 20px; color: #403840; right: 8px; top: 8px } @media(min-width:48em) { .tile-item__tag { font-size: 10px } } .tile-item--your-pco { width: 253px; margin: 0 0 24px; overflow: hidden; box-shadow: 0 4px 12px rgba(158, 147, 166, .24), 0 4px 6px rgba(158, 147, 166, .24); transform: scale(1); transition: all .2s } .tile-item--your-pco:focus, .tile-item--your-pco:hover { box-shadow: 0 2px 18px rgba(158, 147, 166, .24), 0 10px 12px rgba(158, 147, 166, .24); transform: scale(1.05) } .account-setting--security .tile-item--your-pco:hover .tile-item__content .redeemable-perk-content__cta.account-setting__turn-off-button, .account-setting--security .tile-item--your-pco:hover .tile-item__content .redeemable-perk-content__cta.account-setting__turn-on-button, .points-days-cta-section__content .tile-item--your-pco:hover .tile-item__content .redeemable-perk-content__cta.cta-section__link, .tile-item--your-pco:hover .tile-item__content .account-setting--security .redeemable-perk-content__cta.account-setting__turn-off-button, .tile-item--your-pco:hover .tile-item__content .account-setting--security .redeemable-perk-content__cta.account-setting__turn-on-button, .tile-item--your-pco:hover .tile-item__content .deals-for-you__header-cta, .tile-item--your-pco:hover .tile-item__content .points-days-cta-section__content .redeemable-perk-content__cta.cta-section__link, .tile-item--your-pco:hover .tile-item__content .redeemable-perk-content__cta.button, .tile-item--your-pco:hover .tile-item__content .redeemable-perk-content__cta.household-grid__invite-button, .tile-item--your-pco:hover .tile-item__content .redeemable-perk-content__cta.link--theme-button, .tile-item--your-pco:hover .tile-item__content .redeemable-perk-content__cta.link--theme-button--large-primary, .tile-item--your-pco:hover .tile-item__content .redeemable-perk-content__cta.link--theme-button--large-secondary, .tile-item--your-pco:hover .tile-item__content .redeemable-perk-content__cta.link--theme-button--small-primary, .tile-item--your-pco:hover .tile-item__content .redeemable-perk-content__cta.link--theme-button--small-secondary, .tile-item--your-pco:hover .tile-item__content .redeemable-perk-content__cta.link--theme-button-gray, .tile-item--your-pco:hover .tile-item__content .redeemable-perk-content__cta.link--theme-button-red, .tile-item--your-pco:hover .tile-item__content .redeemable-perk-content__cta.link--theme-button-transparent, .tile-item--your-pco:hover .tile-item__content .redeemable-perk-content__cta.link--theme-button-transparent-white, .tile-item--your-pco:hover .tile-item__content .redeemable-perk-content__cta.link--theme-button-white, .tile-item--your-pco:hover .tile-item__content .redeemable-perk-content__cta.load-shop-pay-header__link, .tile-item--your-pco:hover .tile-item__content .redeemable-perk-content__cta.load-shop-pay-module__link, .tile-item--your-pco:hover .tile-item__content .redeemable-perk-content__cta.marketing-page-header__link, .tile-item--your-pco:hover .tile-item__content .redeemable-perk-content__cta.marketing-page-module__link, .tile-item--your-pco:hover .tile-item__content .redeemable-perk-content__cta.partnership-perk-details__cta, .tile-item--your-pco:hover .tile-item__content .redeemable-perk-content__cta.partnership-perk-redeemed-success__cta, .tile-item--your-pco:hover .tile-item__content .redeemable-perk-content__cta.points-days__cta, .tile-item--your-pco:hover .tile-item__content .type-ds-text-link { color: #615395 } .account-setting--security .tile-item--your-pco:active .tile-item__content .redeemable-perk-content__cta.account-setting__turn-off-button, .account-setting--security .tile-item--your-pco:active .tile-item__content .redeemable-perk-content__cta.account-setting__turn-on-button, .points-days-cta-section__content .tile-item--your-pco:active .tile-item__content .redeemable-perk-content__cta.cta-section__link, .tile-item--your-pco:active .tile-item__content .account-setting--security .redeemable-perk-content__cta.account-setting__turn-off-button, .tile-item--your-pco:active .tile-item__content .account-setting--security .redeemable-perk-content__cta.account-setting__turn-on-button, .tile-item--your-pco:active .tile-item__content .deals-for-you__header-cta, .tile-item--your-pco:active .tile-item__content .points-days-cta-section__content .redeemable-perk-content__cta.cta-section__link, .tile-item--your-pco:active .tile-item__content .redeemable-perk-content__cta.button, .tile-item--your-pco:active .tile-item__content .redeemable-perk-content__cta.household-grid__invite-button, .tile-item--your-pco:active .tile-item__content .redeemable-perk-content__cta.link--theme-button, .tile-item--your-pco:active .tile-item__content .redeemable-perk-content__cta.link--theme-button--large-primary, .tile-item--your-pco:active .tile-item__content .redeemable-perk-content__cta.link--theme-button--large-secondary, .tile-item--your-pco:active .tile-item__content .redeemable-perk-content__cta.link--theme-button--small-primary, .tile-item--your-pco:active .tile-item__content .redeemable-perk-content__cta.link--theme-button--small-secondary, .tile-item--your-pco:active .tile-item__content .redeemable-perk-content__cta.link--theme-button-gray, .tile-item--your-pco:active .tile-item__content .redeemable-perk-content__cta.link--theme-button-red, .tile-item--your-pco:active .tile-item__content .redeemable-perk-content__cta.link--theme-button-transparent, .tile-item--your-pco:active .tile-item__content .redeemable-perk-content__cta.link--theme-button-transparent-white, .tile-item--your-pco:active .tile-item__content .redeemable-perk-content__cta.link--theme-button-white, .tile-item--your-pco:active .tile-item__content .redeemable-perk-content__cta.load-shop-pay-header__link, .tile-item--your-pco:active .tile-item__content .redeemable-perk-content__cta.load-shop-pay-module__link, .tile-item--your-pco:active .tile-item__content .redeemable-perk-content__cta.marketing-page-header__link, .tile-item--your-pco:active .tile-item__content .redeemable-perk-content__cta.marketing-page-module__link, .tile-item--your-pco:active .tile-item__content .redeemable-perk-content__cta.partnership-perk-details__cta, .tile-item--your-pco:active .tile-item__content .redeemable-perk-content__cta.partnership-perk-redeemed-success__cta, .tile-item--your-pco:active .tile-item__content .redeemable-perk-content__cta.points-days__cta, .tile-item--your-pco:active .tile-item__content .type-ds-text-link { color: #403840 } @media(min-width:48em) { .tile-item--your-pco { flex-basis: calc(33% - 16px); margin: 0 0 16px } } @media(min-width:64em) { .tile-item--your-pco { flex-basis: calc(50% - 12px); margin: 0 0 24px; height: 200px } } @media(min-width:64em) { .tile-item--your-pco a { display: flex; flex-direction: row; height: 100% } } .cancel-subscription__modal-content .pcoi-error-tile .tile-item--your-pco p:first-of-type, .enrol-flow .tile-item--your-pco .flow-progress-bar__title, .no-subscription-plan__content .tile-item--your-pco h3, .offer-content-group-carousel--faded.offer-content-group-carousel--modal .tile-item--your-pco .offer__reward--earned, .offer-content-group-carousel .tile-item--your-pco .offer__text, .quest-offer-child-offer .continuity-offer__content-group .tile-item--your-pco .offer__reward, .quest-offer-child-offer .hero-continuity-offer__content-group .tile-item--your-pco .offer__reward, .quest-offer-child-offer .hero-product-offer__content-group .tile-item--your-pco .offer__reward, .quest-offer-child-offer.offer--faded .tile-item--your-pco .offer__reward--earned, .quest-offer-child-offer .product-offer__content-group .tile-item--your-pco .offer__reward, .subscription-plan__content .tile-item--your-pco h3, .tile-item--your-pco .activation-card-display__points-label, .tile-item--your-pco .billing-history__date, .tile-item--your-pco .cancel-subscription__modal-content .pcoi-error-tile p:first-of-type, .tile-item--your-pco .category-btn, .tile-item--your-pco .deals-for-you-tile__item, .tile-item--your-pco .enrol-flow .flow-progress-bar__title, .tile-item--your-pco .esso-redemption-earning-card__subtitle, .tile-item--your-pco .esso-redemption-pcf__money-subtitle, .tile-item--your-pco .esso-redemption-redeem-cards__text, .tile-item--your-pco .expandable-form-wrapper__title, .tile-item--your-pco .initial-offers-slider__slider-container__slide-content--screen-1--button-imageHolder, .tile-item--your-pco .initial-offers-slider__slider-container__slide-content--screen-1--button-textHolder, .tile-item--your-pco .initial-offers-slider__slider-container__slide-content--screen-rest--button-imageHolder, .tile-item--your-pco .initial-offers-slider__slider-container__slide-content--screen-rest--button-textHolder, .tile-item--your-pco .initial-offers-slider__slider-container__slide-content__question, .tile-item--your-pco .no-subscription-plan__content h3, .tile-item--your-pco .offer-content-group-carousel--faded.offer-content-group-carousel--modal .offer__reward--earned, .tile-item--your-pco .offer-content-group-carousel .offer__text, .tile-item--your-pco .offer__text--carousel, .tile-item--your-pco .quest-offer-child-offer .continuity-offer__content-group .offer__reward, .tile-item--your-pco .quest-offer-child-offer .hero-continuity-offer__content-group .offer__reward, .tile-item--your-pco .quest-offer-child-offer .hero-product-offer__content-group .offer__reward, .tile-item--your-pco .quest-offer-child-offer.offer--faded .offer__reward--earned, .tile-item--your-pco .quest-offer-child-offer .product-offer__content-group .offer__reward, .tile-item--your-pco .subscription-plan__content h3, .tile-item--your-pco .type-ds-headline { margin: 0 } .tile-item--your-pco .tile-item__image { border-radius: 0 } @media(min-width:64em) { .tile-item--your-pco .tile-item__image { max-width: 180px; -o-object-fit: cover; object-fit: cover } } .tile-item--your-pco .tile-item__image.image--error { width: 64px; height: 64px; margin: 16px auto } @media(min-width:64em) { .tile-item--your-pco .tile-item__image.image--error { margin: auto } } .tile-item--your-pco .tile-item__content { display: flex; flex-direction: column; justify-content: space-between; height: 164px; padding: 20px 16px 18px } @media(min-width:48em) { .tile-item--your-pco .tile-item__content { height: 113px; padding: 16px 16px 12px } } @media(min-width:64em) { .tile-item--your-pco .tile-item__content { height: auto; padding: 24px; width: 200px } } .account-setting--security .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.account-setting__turn-off-button, .account-setting--security .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.account-setting__turn-on-button, .points-days-cta-section__content .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.cta-section__link, .tile-item--your-pco .tile-item__content .account-setting--security .redeemable-perk-content__cta.account-setting__turn-off-button, .tile-item--your-pco .tile-item__content .account-setting--security .redeemable-perk-content__cta.account-setting__turn-on-button, .tile-item--your-pco .tile-item__content .deals-for-you__header-cta, .tile-item--your-pco .tile-item__content .points-days-cta-section__content .redeemable-perk-content__cta.cta-section__link, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.button, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.household-grid__invite-button, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.link--theme-button, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.link--theme-button--large-primary, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.link--theme-button--large-secondary, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.link--theme-button--small-primary, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.link--theme-button--small-secondary, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.link--theme-button-gray, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.link--theme-button-red, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.link--theme-button-transparent, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.link--theme-button-transparent-white, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.link--theme-button-white, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.load-shop-pay-header__link, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.load-shop-pay-module__link, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.marketing-page-header__link, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.marketing-page-module__link, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.partnership-perk-details__cta, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.partnership-perk-redeemed-success__cta, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.points-days__cta, .tile-item--your-pco .tile-item__content .type-ds-text-link { color: #157a77; text-decoration: underline; font-size: .9375rem; transition: all .2s } @media(min-width:64em) { .account-setting--security .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.account-setting__turn-off-button, .account-setting--security .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.account-setting__turn-on-button, .points-days-cta-section__content .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.cta-section__link, .tile-item--your-pco .tile-item__content .account-setting--security .redeemable-perk-content__cta.account-setting__turn-off-button, .tile-item--your-pco .tile-item__content .account-setting--security .redeemable-perk-content__cta.account-setting__turn-on-button, .tile-item--your-pco .tile-item__content .deals-for-you__header-cta, .tile-item--your-pco .tile-item__content .points-days-cta-section__content .redeemable-perk-content__cta.cta-section__link, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.button, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.household-grid__invite-button, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.link--theme-button, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.link--theme-button--large-primary, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.link--theme-button--large-secondary, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.link--theme-button--small-primary, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.link--theme-button--small-secondary, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.link--theme-button-gray, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.link--theme-button-red, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.link--theme-button-transparent, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.link--theme-button-transparent-white, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.link--theme-button-white, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.load-shop-pay-header__link, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.load-shop-pay-module__link, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.marketing-page-header__link, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.marketing-page-module__link, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.partnership-perk-details__cta, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.partnership-perk-redeemed-success__cta, .tile-item--your-pco .tile-item__content .redeemable-perk-content__cta.points-days__cta, .tile-item--your-pco .tile-item__content .type-ds-text-link { font-size: 1rem } } .tile-item--product-love-story { list-style: none; margin: 0 0 32px; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: all .2s; color: transparent } @media(min-width:48em) { .tile-item--product-love-story { flex-direction: row } } .tile-item--product-love-story:hover { color: transparent } .tile-item--product-love-story:focus, .tile-item--product-love-story:hover { box-shadow: 0 2px 18px rgba(158, 147, 166, .24), 0 10px 12px rgba(158, 147, 166, .24); transform: scale(1.05); outline: none } .tile-item--product-love-story:focus .tile-item__text-link, .tile-item--product-love-story:hover .tile-item__text-link { color: #615395 } .tile-item--product-love-story .tile-item__image-container { background-color: #f4f1f6; width: 100%; min-height: 160px } @media(min-width:48em) { .tile-item--product-love-story .tile-item__image-container { min-height: 210px; width: 50% } } .tile-item--product-love-story .tile-item__image { -o-object-fit: cover; object-fit: cover; border-radius: 0 } @media(min-width:48em) { .tile-item--product-love-story .tile-item__content { width: 50%; display: flex; flex-wrap: wrap; align-content: center; margin: 0 auto; padding: 7% } } .tile-item--product-love-story .tile-item__title { margin: 0 } .tile-item--product-love-story .tile-item__text-link { margin: 6px 0 0; color: #157a77; text-decoration: underline; -webkit-line-clamp: 1 } @media(min-width:48em) { .tile-item--product-love-story .tile-item__text-link { margin: 8px 0 0 } } .offers-loading__list { list-style: none; padding-left: 0 } .offers-loading__tile { box-shadow: none; border: 1px solid #f4f1f6 } .offers-loading__tile:last-child { display: none } @media(min-width:48em) { .offers-loading__tile:last-child { display: block } } .offers-loading__title { margin-bottom: 8px } .offers-loading__title .loading-placeholder__inner { line-height: 24px; width: 60% } @media(min-width:48em) { .offers-loading__title .loading-placeholder__inner { line-height: 32px; width: 27% } } .offers-loading__subtitle { margin-bottom: 16px } .offers-loading__subtitle .loading-placeholder__inner { line-height: 24px; width: 60% } @media(min-width:48em) { .offers-loading__subtitle .loading-placeholder__inner { line-height: 28px; width: 35% } } .offers-loading__image { min-height: 92px; display: block; margin-bottom: 0 } @media(min-width:48em) { .offers-loading__image { min-height: 166px } } .offers-loading__content .loading-placeholder { margin-bottom: 10px } .offers-loading__content .loading-placeholder.offers-loading__content-bottom { margin-bottom: 0 } .offers-loading__content .loading-placeholder.offers-loading__content-top>div { line-height: 20px } @media(min-width:48em) { .offers-loading__content .loading-placeholder.offers-loading__content-top>div { line-height: 32px } } @media(min-width:48em) { .offers-loading__content .loading-placeholder { margin-bottom: 12px } } .offers-section-header { margin-top: 28px } .offers-section-header h1 { color: #403840; margin-bottom: 8px } .offers-section-header h1:last-child { margin: 0 0 16px } @media(min-width:48em) { .offers-section-header h1 { margin: 35px 0 8px } } .offers-section-header p { margin: 0 0 16px } @media(min-width:48em) { .offers-section-header p { margin: 0 0 24px } } .offers-section-header__description { color: #655c6c } @media(min-width:48em) { .offers-section-header__description { display: flex } } .video-tile__inner { display: flex; flex-direction: column; justify-content: center; max-width: 688px; margin: 0 auto 28px; box-shadow: 0 1px 5px rgba(158, 147, 166, .2), 0 3px 4px rgba(158, 147, 166, .12), 0 2px 4px rgba(158, 147, 166, .14); transition: box-shadow .3s ease-in-out; overflow: hidden; border-radius: 16px; background: #fff; position: relative } .video-tile__inner:focus, .video-tile__inner:focus-within, .video-tile__inner:hover { box-shadow: 0 8px 10px rgba(158, 147, 166, .3), 0 6px 30px rgba(158, 147, 166, .12), 0 16px 24px rgba(158, 147, 166, .14); cursor: pointer } @media(min-width:48em) { .video-tile__inner { margin: 0 auto 40px; flex-direction: row } } @media(min-width:64em) { .video-tile__inner { max-width: 780px } } .video-tile__video-player { flex-basis: 50%; position: relative; padding-top: 56.25%; z-index: 1 } @media(min-width:48em) { .video-tile__video-player { padding-top: 28.125% } } .video-tile__video-player .sprite { width: 44px; height: 44px } @media(min-width:64em) { .video-tile__video-player .sprite { width: 48px; height: 48px } } .video-tile__video-player .react-player, .video-tile__video-player .react-player__preview { position: absolute; top: 0; left: 0 } .video-tile__video-player video::-webkit-media-controls-current-time-display, .video-tile__video-player video::-webkit-media-controls-fullscreen-button, .video-tile__video-player video::-webkit-media-controls-time-remaining-display, .video-tile__video-player video::-webkit-media-controls-timeline { display: none } .video-tile a { text-decoration: none; flex-basis: 50%; display: flex } .video-tile__content { padding: 16px; display: flex; flex-direction: column; justify-content: center; flex: 1 } @media(min-width:48em) { .video-tile__content { padding: 0 32px } } .video-tile__title { font-size: .9375rem; margin: 0 0 4px; font-weight: 400; color: #191919 } @media(min-width:48em) { .video-tile__title { font-size: 1.5rem; line-height: 24px; margin: 0 0 16px; font-weight: 700 } } @media(min-width:64em) { .video-tile__title { line-height: 2rem; font-size: 2rem } } .video-tile__subcopy { margin: 0 0 4px } @media(min-width:64em) { .video-tile__subcopy { font-size: 1rem; margin: 0 0 11px } } .video-tile__fake-cta { text-decoration: underline; font-size: .75rem; margin: 0 } @media(min-width:48em) { .video-tile__fake-cta { font-size: .875rem } } @media(min-width:64em) { .video-tile__fake-cta { font-size: 1rem } } .video-tile--sponsored .video-tile__video-player:lang(fr-CA):after { content: "Commandité" } .video-tile--sponsored .video-tile__video-player:lang(en-CA):after { content: "Sponsored" } .video-tile--sponsored .video-tile__video-player:after { position: absolute; top: 0; right: 0; background-color: rgba(25, 25, 25, .5); padding: .2rem .5rem; margin: 8px; color: #fff; font-size: .875rem } .video-tile--your-pco .video-tile__inner { max-width: 794px; box-shadow: 0 4px 12px rgba(158, 147, 166, .24), 0 4px 6px rgba(158, 147, 166, .24); transform: scale(1); transition: all .2s } .video-tile--your-pco .video-tile__inner:focus, .video-tile--your-pco .video-tile__inner:hover { box-shadow: 0 2px 18px rgba(158, 147, 166, .24), 0 10px 12px rgba(158, 147, 166, .24); transform: scale(1.03) } .account-setting--security .video-tile--your-pco .video-tile__inner:hover .redeemable-perk-content__cta.account-setting__turn-off-button, .account-setting--security .video-tile--your-pco .video-tile__inner:hover .redeemable-perk-content__cta.account-setting__turn-on-button, .points-days-cta-section__content .video-tile--your-pco .video-tile__inner:hover .redeemable-perk-content__cta.cta-section__link, .video-tile--your-pco .video-tile__inner:hover .account-setting--security .redeemable-perk-content__cta.account-setting__turn-off-button, .video-tile--your-pco .video-tile__inner:hover .account-setting--security .redeemable-perk-content__cta.account-setting__turn-on-button, .video-tile--your-pco .video-tile__inner:hover .deals-for-you__header-cta, .video-tile--your-pco .video-tile__inner:hover .points-days-cta-section__content .redeemable-perk-content__cta.cta-section__link, .video-tile--your-pco .video-tile__inner:hover .redeemable-perk-content__cta.button, .video-tile--your-pco .video-tile__inner:hover .redeemable-perk-content__cta.household-grid__invite-button, .video-tile--your-pco .video-tile__inner:hover .redeemable-perk-content__cta.link--theme-button, .video-tile--your-pco .video-tile__inner:hover .redeemable-perk-content__cta.link--theme-button--large-primary, .video-tile--your-pco .video-tile__inner:hover .redeemable-perk-content__cta.link--theme-button--large-secondary, .video-tile--your-pco .video-tile__inner:hover .redeemable-perk-content__cta.link--theme-button--small-primary, .video-tile--your-pco .video-tile__inner:hover .redeemable-perk-content__cta.link--theme-button--small-secondary, .video-tile--your-pco .video-tile__inner:hover .redeemable-perk-content__cta.link--theme-button-gray, .video-tile--your-pco .video-tile__inner:hover .redeemable-perk-content__cta.link--theme-button-red, .video-tile--your-pco .video-tile__inner:hover .redeemable-perk-content__cta.link--theme-button-transparent, .video-tile--your-pco .video-tile__inner:hover .redeemable-perk-content__cta.link--theme-button-transparent-white, .video-tile--your-pco .video-tile__inner:hover .redeemable-perk-content__cta.link--theme-button-white, .video-tile--your-pco .video-tile__inner:hover .redeemable-perk-content__cta.load-shop-pay-header__link, .video-tile--your-pco .video-tile__inner:hover .redeemable-perk-content__cta.load-shop-pay-module__link, .video-tile--your-pco .video-tile__inner:hover .redeemable-perk-content__cta.marketing-page-header__link, .video-tile--your-pco .video-tile__inner:hover .redeemable-perk-content__cta.marketing-page-module__link, .video-tile--your-pco .video-tile__inner:hover .redeemable-perk-content__cta.partnership-perk-details__cta, .video-tile--your-pco .video-tile__inner:hover .redeemable-perk-content__cta.partnership-perk-redeemed-success__cta, .video-tile--your-pco .video-tile__inner:hover .redeemable-perk-content__cta.points-days__cta, .video-tile--your-pco .video-tile__inner:hover .type-ds-text-link { color: #615395 } .account-setting--security .video-tile--your-pco .video-tile__inner:active .redeemable-perk-content__cta.account-setting__turn-off-button, .account-setting--security .video-tile--your-pco .video-tile__inner:active .redeemable-perk-content__cta.account-setting__turn-on-button, .points-days-cta-section__content .video-tile--your-pco .video-tile__inner:active .redeemable-perk-content__cta.cta-section__link, .video-tile--your-pco .video-tile__inner:active .account-setting--security .redeemable-perk-content__cta.account-setting__turn-off-button, .video-tile--your-pco .video-tile__inner:active .account-setting--security .redeemable-perk-content__cta.account-setting__turn-on-button, .video-tile--your-pco .video-tile__inner:active .deals-for-you__header-cta, .video-tile--your-pco .video-tile__inner:active .points-days-cta-section__content .redeemable-perk-content__cta.cta-section__link, .video-tile--your-pco .video-tile__inner:active .redeemable-perk-content__cta.button, .video-tile--your-pco .video-tile__inner:active .redeemable-perk-content__cta.household-grid__invite-button, .video-tile--your-pco .video-tile__inner:active .redeemable-perk-content__cta.link--theme-button, .video-tile--your-pco .video-tile__inner:active .redeemable-perk-content__cta.link--theme-button--large-primary, .video-tile--your-pco .video-tile__inner:active .redeemable-perk-content__cta.link--theme-button--large-secondary, .video-tile--your-pco .video-tile__inner:active .redeemable-perk-content__cta.link--theme-button--small-primary, .video-tile--your-pco .video-tile__inner:active .redeemable-perk-content__cta.link--theme-button--small-secondary, .video-tile--your-pco .video-tile__inner:active .redeemable-perk-content__cta.link--theme-button-gray, .video-tile--your-pco .video-tile__inner:active .redeemable-perk-content__cta.link--theme-button-red, .video-tile--your-pco .video-tile__inner:active .redeemable-perk-content__cta.link--theme-button-transparent, .video-tile--your-pco .video-tile__inner:active .redeemable-perk-content__cta.link--theme-button-transparent-white, .video-tile--your-pco .video-tile__inner:active .redeemable-perk-content__cta.link--theme-button-white, .video-tile--your-pco .video-tile__inner:active .redeemable-perk-content__cta.load-shop-pay-header__link, .video-tile--your-pco .video-tile__inner:active .redeemable-perk-content__cta.load-shop-pay-module__link, .video-tile--your-pco .video-tile__inner:active .redeemable-perk-content__cta.marketing-page-header__link, .video-tile--your-pco .video-tile__inner:active .redeemable-perk-content__cta.marketing-page-module__link, .video-tile--your-pco .video-tile__inner:active .redeemable-perk-content__cta.partnership-perk-details__cta, .video-tile--your-pco .video-tile__inner:active .redeemable-perk-content__cta.partnership-perk-redeemed-success__cta, .video-tile--your-pco .video-tile__inner:active .redeemable-perk-content__cta.points-days__cta, .video-tile--your-pco .video-tile__inner:active .type-ds-text-link { color: #403840 } .video-tile--your-pco .video-tile__video-player { transform: scale(1.01) } .video-tile--your-pco .video-tile__content { justify-content: space-between } @media(min-width:48em) { .video-tile--your-pco .video-tile__content { padding: 24px 32px } } .billing-history-empty-state__message .video-tile--your-pco .video-tile__content h4, .loadToCard-brand-banner .video-tile--your-pco .video-tile__content .layoutCard__title, .modal-content .video-tile--your-pco .video-tile__content .offer__text--carousel, .video-tile--your-pco .video-tile__content .billing-history-empty-state__message h4, .video-tile--your-pco .video-tile__content .deals-for-you__subtitle, .video-tile--your-pco .video-tile__content .download-app__subtitle, .video-tile--your-pco .video-tile__content .esso-redemption-header__subtitle, .video-tile--your-pco .video-tile__content .esso-redemption-pcf__title, .video-tile--your-pco .video-tile__content .esso-redemption-redeem-cards__text-divider, .video-tile--your-pco .video-tile__content .esso-redemption-redeem-cards__title, .video-tile--your-pco .video-tile__content .loadToCard-brand-banner .layoutCard__title, .video-tile--your-pco .video-tile__content .modal-content .offer__text--carousel, .video-tile--your-pco .video-tile__content .offer-standalone__heading, .video-tile--your-pco .video-tile__content .offer__reward--carousel, .video-tile--your-pco .video-tile__content .slider-header__text--heading, .video-tile--your-pco .video-tile__content .type-ds-title-3, .video-tile--your-pco .video-tile__content .your-pco-error__tile-content-title { margin: 0 } .billing-history__amount .video-tile--your-pco .video-tile__content p, .billing-history__card--number .video-tile--your-pco .video-tile__content p, .enrol-flow .video-tile--your-pco .video-tile__content .flow-header__sub-title, .flow-faq--new-design-system .video-tile--your-pco .video-tile__content .flow-faq__subtitle, .hero-quest-offer .video-tile--your-pco .video-tile__content .offer__text, .loadToCard-brand-banner .video-tile--your-pco .video-tile__content .layoutCard__body, .quest-offer .video-tile--your-pco .video-tile__content .offer__text, .redemption-perk-details .video-tile--your-pco .video-tile__content .dropdown-group__dropdown, .text-group--new-design-system .text-group__input-container--with-addon .video-tile--your-pco .video-tile__content .flyers-header__input, .text-group--new-design-system .text-group__input-container--with-addon .video-tile--your-pco .video-tile__content .homepage-stores__input, .text-group--new-design-system .text-group__input-container--with-addon .video-tile--your-pco .video-tile__content .search-box__input, .text-group--new-design-system .text-group__input-container--with-addon .video-tile--your-pco .video-tile__content .text-group__input, .text-group--new-design-system .text-group__input-container--with-addon .video-tile--your-pco .video-tile__content .text-group__input-addon, .video-tile--your-pco .video-tile__content .activation-card-display__redeemable-value, .video-tile--your-pco .video-tile__content .activation-card-display__redeemable-value-section, .video-tile--your-pco .video-tile__content .billing-history__amount p, .video-tile--your-pco .video-tile__content .billing-history__card--number p, .video-tile--your-pco .video-tile__content .billing-history__type, .video-tile--your-pco .video-tile__content .checkbox-group-new-ds__label, .video-tile--your-pco .video-tile__content .enrol-flow .flow-header__sub-title, .video-tile--your-pco .video-tile__content .enrol-form__expanded-legal-copy, .video-tile--your-pco .video-tile__content .esso-redemption-earning-card__text, .video-tile--your-pco .video-tile__content .esso-redemption-redeem-cards__subtext, .video-tile--your-pco .video-tile__content .flow-faq--new-design-system .flow-faq__subtitle, .video-tile--your-pco .video-tile__content .header-points__redeemable, .video-tile--your-pco .video-tile__content .hero-quest-offer .offer__text, .video-tile--your-pco .video-tile__content .initial-offers-slider__slider-container__slide-content__title, .video-tile--your-pco .video-tile__content .loadToCard-brand-banner .layoutCard__body, .video-tile--your-pco .video-tile__content .loadToCard-header__subtitle, .video-tile--your-pco .video-tile__content .messages__all-read, .video-tile--your-pco .video-tile__content .quest-offer .offer__text, .video-tile--your-pco .video-tile__content .redemption-perk-details .dropdown-group__dropdown, .video-tile--your-pco .video-tile__content .text-group--new-design-system .text-group__input-container--with-addon .flyers-header__input, .video-tile--your-pco .video-tile__content .text-group--new-design-system .text-group__input-container--with-addon .homepage-stores__input, .video-tile--your-pco .video-tile__content .text-group--new-design-system .text-group__input-container--with-addon .search-box__input, .video-tile--your-pco .video-tile__content .text-group--new-design-system .text-group__input-container--with-addon .text-group__input, .video-tile--your-pco .video-tile__content .text-group--new-design-system .text-group__input-container--with-addon .text-group__input-addon, .video-tile--your-pco .video-tile__content .type-ds-body, .video-tile--your-pco .video-tile__content .your-pco-error__tile-content-subtitle, .video-tile--your-pco .video-tile__content .your-pco-section__description, .video-tile--your-pco .video-tile__content .your-pco-section__heading+p { margin: 7px 0 35px; color: #6b6272 } .account-setting--security .video-tile--your-pco .video-tile__content .redeemable-perk-content__cta.account-setting__turn-off-button, .account-setting--security .video-tile--your-pco .video-tile__content .redeemable-perk-content__cta.account-setting__turn-on-button, .points-days-cta-section__content .video-tile--your-pco .video-tile__content .redeemable-perk-content__cta.cta-section__link, .video-tile--your-pco .video-tile__content .account-setting--security .redeemable-perk-content__cta.account-setting__turn-off-button, .video-tile--your-pco .video-tile__content .account-setting--security .redeemable-perk-content__cta.account-setting__turn-on-button, .video-tile--your-pco .video-tile__content .deals-for-you__header-cta, .video-tile--your-pco .video-tile__content .points-days-cta-section__content .redeemable-perk-content__cta.cta-section__link, .video-tile--your-pco .video-tile__content .redeemable-perk-content__cta.button, .video-tile--your-pco .video-tile__content .redeemable-perk-content__cta.household-grid__invite-button, .video-tile--your-pco .video-tile__content .redeemable-perk-content__cta.link--theme-button, .video-tile--your-pco .video-tile__content .redeemable-perk-content__cta.link--theme-button--large-primary, .video-tile--your-pco .video-tile__content .redeemable-perk-content__cta.link--theme-button--large-secondary, .video-tile--your-pco .video-tile__content .redeemable-perk-content__cta.link--theme-button--small-primary, .video-tile--your-pco .video-tile__content .redeemable-perk-content__cta.link--theme-button--small-secondary, .video-tile--your-pco .video-tile__content .redeemable-perk-content__cta.link--theme-button-gray, .video-tile--your-pco .video-tile__content .redeemable-perk-content__cta.link--theme-button-red, .video-tile--your-pco .video-tile__content .redeemable-perk-content__cta.link--theme-button-transparent, .video-tile--your-pco .video-tile__content .redeemable-perk-content__cta.link--theme-button-transparent-white, .video-tile--your-pco .video-tile__content .redeemable-perk-content__cta.link--theme-button-white, .video-tile--your-pco .video-tile__content .redeemable-perk-content__cta.load-shop-pay-header__link, .video-tile--your-pco .video-tile__content .redeemable-perk-content__cta.load-shop-pay-module__link, .video-tile--your-pco .video-tile__content .redeemable-perk-content__cta.marketing-page-header__link, .video-tile--your-pco .video-tile__content .redeemable-perk-content__cta.marketing-page-module__link, .video-tile--your-pco .video-tile__content .redeemable-perk-content__cta.partnership-perk-details__cta, .video-tile--your-pco .video-tile__content .redeemable-perk-content__cta.partnership-perk-redeemed-success__cta, .video-tile--your-pco .video-tile__content .redeemable-perk-content__cta.points-days__cta, .video-tile--your-pco .video-tile__content .type-ds-text-link { color: #157a77; text-decoration: underline; margin: 0; transition: all .2s } .call-centre-details { display: flex; justify-content: center; margin-top: 24px } @media(min-width:64em) { .call-centre-details { margin-top: 64px } } .call-centre-details__inner { align-items: center; display: flex; flex-direction: column; text-align: center; width: 100% } @media(min-width:48em) { .call-centre-details__inner { width: 420px } } .call-centre-details hr { color: #191919; margin: 0 0 24px; opacity: .15; width: 100% } @media(min-width:48em) { .call-centre-details hr { margin: 0 0 48px } } .call-centre-details__phone { margin: 8px 0 16px } .call-centre-details p { margin: 0 } .contact-us-tiles { align-items: center; display: flex; flex-direction: column } @media(min-width:64em) { .contact-us-tiles { flex-direction: row; justify-content: center } } .contact-us-tile { align-items: center; background-color: #fff; border-radius: 16px; display: flex; flex-direction: column; justify-content: center; margin-bottom: 16px; padding: 40px 24px 24px; text-align: center; width: 100%; max-width: 330px } .contact-us-tile:last-child { margin-bottom: 0 } @media(min-width:48em) { .contact-us-tile { padding: 40px; max-width: 408px } } @media(min-width:64em) { .contact-us-tile { margin: 0 } } .contact-us-tile .sprite { height: 48px; width: 48px } @media(min-width:64em) { .contact-us-tile .sprite { height: 56px; width: 56px } } .contact-us-tile__header { margin: 16px 0; width: 100% } .contact-us-tile__subtext { color: #655c6c; margin-bottom: 16px; width: 100% } .contact-us-tile__button { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; padding: 12px 16px } @media(min-width:64em) { .contact-us-tile__button { padding: 12px 24px } } .contact-us-tile p { margin: 0 } .submission-message { align-items: center; background-color: #fff; display: flex; flex-direction: column; margin-top: 24px; padding: 24px 16px; text-align: center; width: 100% } @media(min-width:64em) { .submission-message { margin-top: 48px; padding: 40px } } .submission-message .sprite { height: 64px; width: 64px } @media(min-width:64em) { .submission-message .sprite { height: 80px; width: 80px } } .submission-message__header { margin: 16px 0 8px } @media(min-width:64em) { .submission-message__header { margin: 16px 0 } } .submission-message__subtext { margin: 0 } .points-inquiry__container { margin: 0 auto; padding-bottom: 32px } @media(min-width:64em) { .points-inquiry__container { width: 840px; padding: 0 0 112px } } .offer-section__header { position: relative; margin: 0 } .offer-section__modal { display: flex; padding: 5px; justify-content: flex-end } .offer-section__inner--faded { position: absolute; top: 0; left: 0; z-index: 2; background: #fff; width: 100%; height: 100%; opacity: .5 } .offers-container, .offers-preview { width: 100%; max-width: none; min-height: 300px; padding-bottom: 36px; padding-top: 18px } @media(min-width:48em) { .offers-container, .offers-preview { padding-bottom: 40px; padding-top: 26px } } .offers-container img, .offers-preview img { max-width: 100% } .offers-container .marketing-tile__img, .offers-preview .marketing-tile__img { max-width: unset } .offers-container .offers-grid, .offers-preview .offers-grid { list-style-type: none; margin-top: 0; padding-left: 0 } .offers-container .flyer-result, .offers-container .marketing-tile, .offers-container .offer, .offers-container .offers-count, .offers-container .offers-expiring, .offers-container .offers-section-header, .offers-container__error-tile, .offers-container__section-header, .offers-preview .flyer-result, .offers-preview .marketing-tile, .offers-preview .offer, .offers-preview .offers-count, .offers-preview .offers-expiring, .offers-preview .offers-section-header { max-width: 688px; margin-left: auto; margin-right: auto } @media(min-width:64em) { .offers-container .flyer-result, .offers-container .marketing-tile, .offers-container .offer, .offers-container .offers-count, .offers-container .offers-expiring, .offers-container .offers-section-header, .offers-container__error-tile, .offers-container__section-header, .offers-preview .flyer-result, .offers-preview .marketing-tile, .offers-preview .offer, .offers-preview .offers-count, .offers-preview .offers-expiring, .offers-preview .offers-section-header { max-width: 780px } } .offers-container-empty { text-align: center; max-width: 450px; margin: 0 auto } @media(min-width:48em) { .offers-container-empty { max-width: 720px } } .offers-container-empty--your-list { max-width: none } .offers-container-empty__inner { max-width: 450px; margin: 0 auto } @media(min-width:48em) { .offers-container-empty__inner { max-width: 720px } } .offers-container-empty__button { margin-top: 10px; margin-bottom: 20px; display: inline-block } @media(min-width:48em) { .offers-container-empty__button { margin-top: 44px; margin-bottom: 60px } } @media(min-width:48em) { .offers-container-empty__button--back { margin-top: 24px } } .offers-container-empty .offer--empty { min-height: 160px; margin-top: 30px } @media(min-width:48em) { .offers-container-empty .offer--empty { margin-top: 50px } } .offers-container-empty .offer__inner { display: flex; padding: 20px; align-items: center } .offers-container-empty .offer__content { flex-grow: 1 } .offers-container-empty .offer__icon { width: 40px; height: 40px; margin-right: 20px } @media(min-width:48em) { .offers-container-empty .offer__icon { margin: 0 60px 0 40px } } .offers-container-empty .offer__placeholder { display: block; width: 35%; height: 1rem; margin: 0 0 10px; background-color: #ddd } .offers-container-empty .offer__placeholder:nth-child(2) { width: 75% } .offers-container-empty .offer__placeholder:nth-child(3) { width: 75%; margin-top: 2rem; margin-bottom: 0 } .offers-container-empty .offer-checkmark { pointer-events: none } .offers-container-empty .offer-checkmark__icon { fill: #fff } .offers-container-empty .offer-checkmark:before { border-right-color: #ee3124; border-top-color: #ee3124 } .offers-count { margin-bottom: 18px } @media(min-width:48em) { .offers-count { display: none } } .offers-expiring { display: flex; flex-flow: row nowrap; align-items: center; background: #0075ff; color: #fff; -webkit-font-smoothing: antialiased; padding: 20px; margin-bottom: 18px } @media(min-width:48em) { .offers-expiring { margin-bottom: 26px } } .offers-expiring .sprite { flex-shrink: 0; fill: #fff; margin-right: 20px } @media(min-width:48em) { .offers-expiring .sprite { width: 32px; height: 32px } } .offers-expiring__wrap { flex-grow: 1; display: flex; flex-flow: row wrap; align-items: center } .offers-expiring__message { margin: 0 auto 0 0 } .offers-expiring__close-button, .offers-expiring__close-button:hover { color: #fff } .offers-points-day-error { margin-bottom: 25px } .inspiration-feed-one-wrapper { display: flex; position: relative; justify-content: center; width: 100% } .inspiration-feed-one-wrapper__background { width: 100vw; position: absolute; height: 100%; background-image: linear-gradient(#fdfbe7, #fdfbe7); background-position: 50%; margin-top: -46px; z-index: 0; left: 50%; transform: translate(-50%) } .inspiration-feed-one-wrapper__content { position: relative; display: block; width: 100%; max-width: 688px } @media(min-width:64em) { .inspiration-feed-one-wrapper__content { max-width: 794px } } .inspiration-feed-one-wrapper__content__image { position: absolute; max-width: 100%; height: 226px; top: calc(50% - 121px); right: -118px } @media(min-width:48em) { .inspiration-feed-one-wrapper__content__image { top: calc(50% - 173px); right: -118px } } .inspiration-feed-one-wrapper__content .offers-section-header { display: none } .modal-content .offers-modal__scroll-content { max-height: 384px; overflow-y: auto } @media(min-width:48em) { .modal-content .offers-modal__scroll-content { max-height: 674px } } .modal-content .offers-modal__scroll-content--shoppable { max-height: 240px; overflow-y: auto } @media(min-width:48em) { .modal-content .offers-modal__scroll-content--shoppable { max-height: 524px } } .modal-content .offer-content-group-carousel-wrapper { overflow-y: auto; height: calc(100% - 38px) } @media(min-width:48em) { .modal-content .offer-content-group-carousel-wrapper { height: calc(100% - 276px) } } .modal-content .offer-content-group-carousel { height: auto; padding: 24px 26px 25px; border-bottom: 1px solid #e0e0e0 } .modal-content .offer-content-group-carousel--modal { padding: 24px } @media(min-width:48em) { .modal-content .offer-content-group-carousel { border: 1px solid #e0e0e0 } .modal-content .offer-content-group-carousel--modal { padding: 24px 32px } } .modal-content .offer__image--carousel { display: block; width: 100%; height: 146px; overflow-x: hidden } @media(min-width:48em) { .modal-content .offer__image--carousel { height: 226px; max-height: 226px } } .modal-content .offer__image--carousel .offer__image-element--carousel { width: auto; max-width: none; height: 146px; max-height: 146px; -o-object-fit: cover; object-fit: cover; left: 50%; transform: translate(-50%) } @media(min-width:48em) { .modal-content .offer__image--carousel .offer__image-element--carousel { height: 226px; max-height: 226px } } .modal-content .offer__image--carousel .offer__image-element--hero { width: auto; max-width: none; height: 146px; -o-object-fit: cover; object-fit: cover; left: 50%; transform: translate(-50%) } @media(min-width:48em) { .modal-content .offer__image--carousel .offer__image-element--hero { height: 226px; max-height: 226px } } .modal-content .offer__image--add-to-shopping-list { display: flex; justify-content: center; align-items: center } .modal-content .offer__image--add-to-shopping-list .offer__image-element--add-to-shopping-list { height: auto } .modal-content .offer__text--carousel { text-align: center } .modal-content .offer__text--no-reward { margin: 0 auto } .modal-content .offer-details__carousel-modal-cta { display: flex; flex-direction: column; align-items: center; padding: 24px } .modal-content .offer-details__carousel-modal-cta a:first-child { margin-bottom: 14px } .modal-content .offer-details__carousel-modal-cta a:first-child, .modal-content .offer-details__carousel-modal-cta button:first-child { width: 100% } @media(min-width:48em) { .modal-content .offer-details__carousel-modal-cta { padding: 32px } } .modal-content .offer-details__content { padding: 24px } @media(min-width:48em) { .modal-content .offer-details__content { padding: 32px } } .modal-content .offer-details__explanation, .modal-content .offer-details__info-discovery, .modal-content .offer-details__offer-date, .modal-content .offer-details__terms { border: none; padding: 0; margin: 16px 0 } .modal-content .offer-details__offer-date { margin-top: 0 } .hero-quest-offer, .quest-offer { border-radius: 16px } .hero-quest-offer.continuity-offer.offer--faded.quest-offer--shadow-disabled.flyer-result, .hero-quest-offer.hero-continuity-offer.offer--faded.quest-offer--shadow-disabled.flyer-result, .hero-quest-offer.hero-product-offer.offer--faded.quest-offer--shadow-disabled.flyer-result, .hero-quest-offer.offer.continuity-offer.offer--faded.quest-offer--shadow-disabled, .hero-quest-offer.offer.hero-continuity-offer.offer--faded.quest-offer--shadow-disabled, .hero-quest-offer.offer.hero-product-offer.offer--faded.quest-offer--shadow-disabled, .hero-quest-offer.offer.product-offer.offer--faded.quest-offer--shadow-disabled, .hero-quest-offer.product-offer.offer--faded.quest-offer--shadow-disabled.flyer-result, .quest-offer.continuity-offer.offer--faded.quest-offer--shadow-disabled.flyer-result, .quest-offer.hero-continuity-offer.offer--faded.quest-offer--shadow-disabled.flyer-result, .quest-offer.hero-product-offer.offer--faded.quest-offer--shadow-disabled.flyer-result, .quest-offer.offer.continuity-offer.offer--faded.quest-offer--shadow-disabled, .quest-offer.offer.hero-continuity-offer.offer--faded.quest-offer--shadow-disabled, .quest-offer.offer.hero-product-offer.offer--faded.quest-offer--shadow-disabled, .quest-offer.offer.product-offer.offer--faded.quest-offer--shadow-disabled, .quest-offer.product-offer.offer--faded.quest-offer--shadow-disabled.flyer-result { box-shadow: 0 1px 5px rgba(158, 147, 166, .2), 0 3px 4px rgba(158, 147, 166, .12), 0 2px 4px rgba(158, 147, 166, .14); cursor: auto } .hero-quest-offer__top-inner, .quest-offer__top-inner { display: flex; flex-direction: column } .hero-quest-offer__top-inner .offer__image, .quest-offer__top-inner .offer__image { max-width: 780px; overflow: hidden } .hero-quest-offer__top-inner .offer__image img, .quest-offer__top-inner .offer__image img { border-radius: 16px 16px 0 0; max-width: 100%; max-height: 160px; -o-object-fit: cover; object-fit: cover } .hero-quest-offer__content-group, .quest-offer__content-group { margin: 20px 30px 16px } .hero-quest-offer .offer__reward, .quest-offer .offer__reward { color: #ac342a } .hero-quest-offer.offer--faded .offer__reward, .hero-quest-offer .offer__reward--unearnable, .quest-offer.offer--faded .offer__reward, .quest-offer .offer__reward--unearnable { color: #655c6c } .hero-quest-offer .offer__text, .quest-offer .offer__text { margin-top: 4px } .quest-offer-footer-date { border-top: 1px solid rgba(155, 149, 168, .16); color: #655c6c; display: block; margin-top: auto; padding: 10px 18px; width: 100% } .quest-offer-child-offer { display: flex; height: 100% } .quest-offer-child-offer__container { border: 1px solid rgba(155, 149, 168, .16); border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; width: 214px; text-align: left } @media(min-width:48em) { .quest-offer-child-offer__container { width: 323px } } .quest-offer-child-offer__container--modal-disabled { cursor: grab } .quest-offer-child-offer__inner { position: relative } .quest-offer-child-offer__indicator--earned { background-color: #157a77; display: flex; justify-content: center; align-items: center; border-radius: 50%; width: 24px; height: 24px; position: absolute; left: 34px; top: 34px; z-index: 1 } .quest-offer-child-offer__indicator--earned .sprite { fill: #fff; height: 20px; width: 20px } .quest-offer-child-offer .continuity-offer__top-inner, .quest-offer-child-offer .hero-continuity-offer__top-inner, .quest-offer-child-offer .hero-product-offer__top-inner, .quest-offer-child-offer .product-offer__top-inner { display: flex; align-items: flex-start; padding: 20px } .quest-offer-child-offer .continuity-offer__top-inner .offer__image, .quest-offer-child-offer .hero-continuity-offer__top-inner .offer__image, .quest-offer-child-offer .hero-product-offer__top-inner .offer__image, .quest-offer-child-offer .product-offer__top-inner .offer__image { max-width: 50px; margin: 0 16px 0 0 } .quest-offer-child-offer .continuity-offer__top-inner .offer__image img, .quest-offer-child-offer .hero-continuity-offer__top-inner .offer__image img, .quest-offer-child-offer .hero-product-offer__top-inner .offer__image img, .quest-offer-child-offer .product-offer__top-inner .offer__image img { border-radius: 0; max-width: 100%; -o-object-fit: cover; object-fit: cover } .quest-offer-child-offer .continuity-offer__content-group, .quest-offer-child-offer .hero-continuity-offer__content-group, .quest-offer-child-offer .hero-product-offer__content-group, .quest-offer-child-offer .product-offer__content-group { min-height: 0; padding: 0 } .quest-offer-child-offer .continuity-offer__content-group .offer__reward, .quest-offer-child-offer .hero-continuity-offer__content-group .offer__reward, .quest-offer-child-offer .hero-product-offer__content-group .offer__reward, .quest-offer-child-offer .product-offer__content-group .offer__reward { color: #ac342a } .quest-offer-child-offer .continuity-offer__content-group .offer__text--no-reward, .quest-offer-child-offer .hero-continuity-offer__content-group .offer__text--no-reward, .quest-offer-child-offer .hero-product-offer__content-group .offer__text--no-reward, .quest-offer-child-offer .product-offer__content-group .offer__text--no-reward { margin: 0 auto } .quest-offer-child-offer.offer--faded .offer__reward { color: #655c6c } .quest-offer-child-offer.offer--faded .offer__reward--earned { color: #615395 } .quest-offer-child-offer-list { margin: 16px auto 20px } .quest-offer-child-offer-list--sequential .scroll-slider-quest-offer-child-offer-list__item:not(:last-child):after { content: ""; width: 12px; height: 6px; background: #f9dada; display: block; position: absolute; top: 50%; right: -12px; transform: translateY(-50%) } .quest-offer-child-offer-list__carousel-container .scroll-slider-quest-offer-child-offer-list { position: relative } .quest-offer-child-offer-list__carousel-container .scroll-slider-quest-offer-child-offer-list__item:not(:last-child) { margin-right: 12px; position: relative } .quest-offer-child-offer-list__carousel-container .scroll-slider-quest-offer-child-offer-list__item-tile { display: flex; height: 100% } .quest-offer-child-offer-list__carousel-container .scroll-slider-quest-offer-child-offer-list__item-tile fieldset { display: flex; margin: 0 } .scroll-slider-quest-offer-child-offer { margin: 0 auto } .scroll-slider-quest-offer-child-offer .slider-holder-div { display: block; width: 100% } .scroll-slider-quest-offer-child-offer-list--scroll { scroll-snap-type: x mandatory; padding: 0 30px 16px } .scroll-slider-quest-offer-child-offer-list--scroll::-webkit-scrollbar { display: block; height: 10px; width: 100% } .scroll-slider-quest-offer-child-offer-list--scroll::-webkit-scrollbar-thumb { border-radius: 10px; background: #c2c2c2 } .scroll-slider-quest-offer-child-offer-list--scroll::-webkit-scrollbar-track { border-radius: 10px; background: #f1f1f1; margin: 0 30px } .scroll-slider-quest-offer-child-offer-list__button-container { display: none } .quest-offer-progress { display: flex; align-items: center; margin: 0 30px } @media(min-width:48em) { .quest-offer-progress { justify-content: flex-start } } .quest-offer-progress__container { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 5px; width: -moz-fit-content; width: fit-content; width: 60%; list-style-type: none; padding-left: 0 } .quest-offer-progress__container :first-child { margin-left: 0 } @media(min-width:34.375em) { .quest-offer-progress__container { grid-template-columns: repeat(10, 1fr); grid-gap: 16px } } .quest-offer-progress__indicator { background-color: #fdf0f0; border-radius: 50%; width: 24px; height: 24px; position: relative; margin-left: 0 } .quest-offer-progress__indicator span { color: #6c221a } .quest-offer-progress__indicator .sprite, .quest-offer-progress__indicator span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) } .quest-offer-progress__indicator--active { background-color: #fff; border: 2px solid #6c221a } .quest-offer-progress__indicator--earned { background-color: #157a77 } .quest-offer-progress__indicator--notApplicable span, .quest-offer-progress__indicator--unearnable span { color: #fff } .quest-offer-progress__indicator--expired, .quest-offer-progress__indicator--notApplicable, .quest-offer-progress__indicator--unearnable { background-color: #9e93a6 } .quest-offer-progress__indicator--earned .sprite, .quest-offer-progress__indicator--expired .sprite { fill: #fff; height: 20px; width: 20px } .quest-offer-footer { border-top: 1px solid rgba(155, 149, 168, .16); display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; text-align: left; min-height: 40px; padding: 0 } @media(min-width:48em) { .quest-offer-footer { padding: 10px 30px; min-height: 50px; flex-direction: row-reverse; justify-content: space-between } } .quest-offer-footer__action-buttons { display: flex; flex-direction: column; align-items: center; width: 100% } @media(min-width:48em) { .quest-offer-footer__action-buttons { flex-direction: row; width: -moz-fit-content; width: fit-content } } .quest-offer-footer__view-details { padding: 10px 18px } @media(min-width:48em) { .quest-offer-footer__view-details { padding: 0 } } .quest-offer-footer__view-details-container { display: flex; width: 100%; justify-content: center; border-top: 1px solid rgba(155, 149, 168, .16) } @media(min-width:48em) { .quest-offer-footer__view-details-container { border-top: none; width: -moz-fit-content; width: fit-content } } .quest-offer-footer__hide-offer { display: flex; align-items: center; padding: 10px 0 } .quest-offer-footer__hide-offer svg { margin-right: 4px; width: 20px } @media(min-width:48em) { .quest-offer-footer__hide-offer { padding: 0 } } .quest-offer-footer .quest-offer-footer-date { border: none; display: flex; justify-content: center; color: #655c6c } @media(min-width:48em) { .quest-offer-footer .quest-offer-footer-date { padding: 0 } } .offers-feed__category-filter { position: relative } .offers-feed__category-filter ul { padding: 0 } .offers-feed__category-filter ul li:not(:nth-last-child(2)):not(:last-child) { margin-right: 8px } .offers-feed__category-filter .scroll-slider-offers-feed__category-filter-slider-list__button-container { position: absolute; top: 0; display: flex; align-items: center; height: 100%; width: 100% } .offers-feed__category-filter .scroll-slider-offers-feed__category-filter-slider-list__button-left--gradient-bg, .offers-feed__category-filter .scroll-slider-offers-feed__category-filter-slider-list__button-right--gradient-bg { z-index: 1; display: flex; align-items: center; height: 100% } .offers-feed__category-filter .scroll-slider-offers-feed__category-filter-slider-list__button-left--gradient-bg button, .offers-feed__category-filter .scroll-slider-offers-feed__category-filter-slider-list__button-right--gradient-bg button { z-index: 2 } .offers-feed__category-filter .scroll-slider-offers-feed__category-filter-slider-list__button-left--gradient-bg { padding-right: 15px; background: linear-gradient(90deg, #fff 48.44%, hsla(0, 0%, 100%, 0)) } .offers-feed__category-filter .scroll-slider-offers-feed__category-filter-slider-list__button-right--gradient-bg { margin-left: auto; padding-left: 15px; background: linear-gradient(270deg, #fff 48.44%, hsla(0, 0%, 100%, 0)) } .offers-feed__category-filter .scroll-slider-offers-feed__category-filter-slider--scroll { margin: 0 0 8px } .offers-feed__category-filter, .offers-feed__category-filter-label { margin: 0 auto 16px } .offers-feed__category-filter--bold, .offers-feed__category-filter-label--bold { font-weight: 700 } @media(min-width:64em) { .offers-feed__category-filter, .offers-feed__category-filter-label { width: 780px } } .offers-feed__category-filter .category-filter__button { width: -moz-fit-content; width: fit-content; min-width: 50px; padding: 10px 16px; display: flex; justify-content: center; align-items: center } .offers-feed__category-filter .category-filter__button span { color: inherit; font-weight: 400 } .offers-feed__category-filter .category-filter__button svg { display: inline-block; margin-right: 4px; transition: fill .1s; width: 18px; height: 18px } .offers-feed-filter-empty { text-align: center; padding: 26px 20px } .offers-feed-filter-empty h2 { margin: 0 0 8px } .offers-feed-filter-empty p { margin: 0 0 16px } .how-points-work { background-color: #fff } .how-points-work__utility-header { margin-bottom: 2px } @media(min-width:64em) { .how-points-work__utility-header { margin-bottom: 8px } } .how-points-work__container { margin: 0 auto 32px; padding: 0 } @media(min-width:64em) { .how-points-work__container { max-width: 840px; margin-bottom: 72px } } .how-points-work-tile { border-bottom: 1px solid #ddd; background-color: #fff } @media(min-width:64em) { .how-points-work-tile { border-bottom: none } } .how-points-work-tile:last-child { border-bottom: none } @media(min-width:64em) { .how-points-work-tile__tile-container { background-color: #f0f0f0; padding: 40px } } .how-points-work-tile__title { margin: 30px 0 16px } @media(min-width:64em) { .how-points-work-tile__title { margin: 40px 0 24px } } .how-points-work-tile__subtitle { margin-bottom: 26px } @media(min-width:64em) { .how-points-work-tile__subtitle { margin-bottom: 16px } } .how-points-work-rule { display: flex; margin-bottom: 24px } @media(min-width:64em) { .how-points-work-rule { margin-bottom: 32px } } .how-points-work-rule--vertical { flex-direction: column } .how-points-work-rule__titles { flex: 1 } .how-points-work-rule__title { font-weight: 700; margin-bottom: 8px; margin-top: 0 } .how-points-work-rule__subtext { margin: 0 } .how-points-work-rule__sprite-container { display: flex; align-items: center; margin-bottom: 8px } .how-points-work-rule__sprite-container--background { width: 44px; height: 44px; margin-right: 12px; margin-bottom: 0; background-color: #fbf1f1; border-radius: 50%; justify-content: center } @media(min-width:64em) { .how-points-work-rule__sprite-container--background { width: 64px; height: 64px; margin-right: 24px } } .how-points-work-rule__sprite { width: 33px; height: 33px } @media(min-width:64em) { .how-points-work-rule__sprite { width: 48px; height: 48px } } .how-points-work-rule__sprite--loblaw-flag { width: 32px; height: 32px; margin: 8px 24px 0 0 } @media(min-width:64em) { .how-points-work-rule__sprite--loblaw-flag { height: 44px; width: 44px } } .how-points-work-rule__sprite--superstore-flag { width: 32px; height: 32px; margin: 8px 24px 0 0 } @media(min-width:64em) { .how-points-work-rule__sprite--superstore-flag { height: 44px; width: 44px } } .how-points-work-rule__sprite--pc-express-flag { width: 32px; height: 32px; margin: 8px 24px 0 0 } @media(min-width:64em) { .how-points-work-rule__sprite--pc-express-flag { height: 44px; width: 44px } } .how-points-work-rule__sprite--shoppers-drug-mart-red { width: 135px; height: 32px } @media(min-width:64em) { .how-points-work-rule__sprite--shoppers-drug-mart-red { width: 150px; height: 36px } } .how-points-work-rule__sprite--pharmaprix-new { width: 135px; height: 32px } @media(min-width:64em) { .how-points-work-rule__sprite--pharmaprix-new { width: 150px; height: 36px } } .how-points-work-rule__sprite--esso-mobil-logo-light-bg { height: 27px; width: 99px; margin-right: 14px } @media(min-width:64em) { .how-points-work-rule__sprite--esso-mobil-logo-light-bg { height: 31px; width: 114px; margin-right: 16px } } .how-points-work-rule__sprite--joe-fresh { width: 120px; height: 28px } @media(min-width:64em) { .how-points-work-rule__sprite--joe-fresh { width: 150px; height: 36px } } .how-points-work-tile-footer { margin-bottom: 30px; display: inline-block } @media(min-width:64em) { .how-points-work-tile-footer { margin-bottom: 0; margin-top: 8px } } .how-points-work-tile-footer__sparkles-icon { height: 25px; margin-right: 16px } @media(min-width:64em) { .how-points-work-tile-footer__sparkles-icon { width: 30px; height: 31px; margin: 0 12px 0 0 } } .how-points-work-tile-footer__footer-container { background-color: #f4f1f6; border-radius: 8px; display: flex; align-items: center; padding: 16px 24px 15px 12px } @media(min-width:64em) { .how-points-work-tile-footer__footer-container { background-color: #fff; padding: 22px 24px 21px 12px } } .how-points-work-tile-footer__footer-text { color: #655c6c; font-size: .8125rem; line-height: 1.3846 } @media(min-width:64em) { .how-points-work-tile-footer__footer-text { font-size: 1rem; line-height: 1.5 } } .redemption-message { text-align: center } @media(min-width:64em) { .redemption-message { text-align: left } } .redemption-message__text { font-size: .8125rem; line-height: 1.125; padding: 16px 0; font-weight: 700; display: flex; flex-direction: column; background-color: #f4f1f6; border-radius: 4px } @media(min-width:64em) { .redemption-message__text { font-size: 1rem; line-height: 1.5; margin: 24px 0 16px; padding: 0; background-color: #f0f0f0 } } .redemption-message__footnote { margin: 8px 0 30px } @media(min-width:64em) { .redemption-message__footnote { margin: 0 } } .redemption-message__footnote--text { margin-left: 5px } @media(min-width:64em) { .redemption-message__footnote--text { margin-left: 13px } } .offer-badge { position: absolute; top: 0; right: 0; padding: 4px 16px 2px; border-top-right-radius: 8px; -webkit-font-smoothing: antialiased } .offer-badge--gray-white { background: #655c6c; color: #fff } .offer-badge--orange-gray { background: #ffc27b; color: #403840 } .offer-badge--yellow-gray { background: #fff37b; color: #403840 } .offer-badge--yellow-gray-no-radius { background: #fff37b; color: #403840; border-radius: 0 } .feature-tile { max-width: 688px; margin: 18px auto; display: flex; text-decoration: inherit; position: relative; border-radius: 8px; border: 1px solid #efeef1; box-shadow: 0 1px 5px rgba(158, 147, 166, .2), 0 3px 4px rgba(158, 147, 166, .12), 0 2px 4px rgba(158, 147, 166, .14); transition: box-shadow .3s ease-in-out; background-position: 100%; background-size: contain; background-repeat: no-repeat } .feature-tile:focus, .feature-tile:focus-within, .feature-tile:hover { box-shadow: 0 8px 10px rgba(158, 147, 166, .3), 0 6px 30px rgba(158, 147, 166, .12), 0 16px 24px rgba(158, 147, 166, .14); cursor: pointer } @media(min-width:34.375em) { .feature-tile { flex-direction: row } } @media(min-width:64em) { .feature-tile { max-width: 780px } } .feature-tile__content { display: flex; flex-direction: column; order: 1; padding: 16px } @media(min-width:34.375em) { .feature-tile__content { padding: 32px; order: 0 } } .feature-tile__content h1 { margin: 0; font-size: 1.375rem; color: #191919 } @media(min-width:34.375em) { .feature-tile__content h1 { font-size: 1.5rem; line-height: 1.8125rem } } .feature-tile__subcopy { color: #655c6c; font-size: .9375rem; margin: 8px 0 } @media(min-width:34.375em) { .feature-tile__subcopy { font-size: 1rem } } .feature-tile__cta { display: flex; text-decoration: underline; font-size: .75rem; margin: 8px 0 0 } @media(min-width:34.375em) { .feature-tile__cta { font-size: 1rem } } .shop-the-flyer { background-color: #fbf1f1; flex-direction: column; border: none } @media(min-width:34.375em) { .shop-the-flyer { flex-direction: row } } .deals-for-you__container { margin: 0 auto } @media(min-width:48em) { .deals-for-you__container { max-width: 688px } } @media(min-width:64em) { .deals-for-you__container { max-width: 780px } } .deals-for-you__subtitle { margin: 0 } .deals-for-you__header { display: flex; justify-content: space-between; align-items: center; margin: 24px 0 } .deals-for-you__header-logo svg { height: 24px; width: 130px } .deals-for-you__header-cta { color: #157a77; transition: all .2s } .deals-for-you__header-cta:focus, .deals-for-you__header-cta:hover { color: #615395 } .deals-for-you-tile { border-radius: 16px; border: 1px solid rgba(158, 147, 166, .32); background: #fff; box-shadow: 0 1px 5px rgba(158, 147, 166, .2), 0 3px 4px rgba(158, 147, 166, .12), 0 2px 4px rgba(158, 147, 166, .14) } .deals-for-you-tile__grocery { height: 375px } @media(min-width:48em) { .deals-for-you-tile__grocery { height: 389px } } .deals-for-you-tile__grocery:focus, .deals-for-you-tile__grocery:hover, .deals-for-you-tile__pharmacy:focus { outline: none; box-shadow: 0 4px 5px rgba(158, 147, 166, .2), 0 3px 14px rgba(158, 147, 166, .12), 0 8px 10px rgba(158, 147, 166, .14); transition: box-shadow .3s ease-in-out } .deals-for-you-tile__content, .deals-for-you-tile__pharmacy { height: 316px } @media(min-width:48em) { .deals-for-you-tile__content, .deals-for-you-tile__pharmacy { height: 326px } } .deals-for-you-tile__content { display: flex; flex-direction: column; padding: 24px 24px 16px } .deals-for-you-tile__content-img { height: 100px; width: auto; text-align: center } .deals-for-you-tile__content-img img { height: 100% } .deals-for-you-tile__content-text { height: 100%; display: flex; flex-direction: column; justify-content: space-between } .deals-for-you-tile__content-text-copy { display: flex; flex-direction: column; justify-content: flex-start } .deals-for-you-tile__price { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.375rem; line-height: 1.75rem; color: #ac342a; margin-top: 16px; margin-bottom: 8px; font-weight: 600 } @media(min-width:48em) { .deals-for-you-tile__price { font-size: 1.5rem; line-height: 2rem } } .deals-for-you-tile__item { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0 } .deals-for-you-tile__text-subcopy { color: #655c6c; margin: 0 } .deals-for-you-tile__shop-now { display: flex; align-items: center; justify-content: center; height: 62px; text-align: center; border-top: 1px solid rgba(158, 147, 166, .2) } .deals-for-you-feature-highlight { width: 100%; max-width: 688px; margin: auto } @media(min-width:64em) { .deals-for-you-feature-highlight { max-width: 780px } } .deals-for-you-feature__badge { width: -moz-fit-content; width: fit-content; background-color: #ffc27b; padding: 8px 16px; border-radius: 25px; margin: 32px auto 0 } @media(min-width:48em) { .deals-for-you-feature__badge { margin: 35px 0 0 } } .scroll-slider-deals-for-you .slider-holder-div { width: 100vw } @media(min-width:48em) { .scroll-slider-deals-for-you .slider-holder-div { width: 100% } } .scroll-slider-deals-for-you { margin: 0 auto 20px } .scroll-slider-deals-for-you-list--scroll { scroll-snap-type: x mandatory; padding: 0 0 10px; scrollbar-width: none } @media(min-width:48em) { .scroll-slider-deals-for-you-list--scroll { margin: 0 calc(-50vw + 343px); padding: 0 30px 16px calc(50vw - 343px) } } @media(min-width:64em) { .scroll-slider-deals-for-you-list--scroll { scrollbar-width: auto; margin: 0; padding: 0 0 16px } } .scroll-slider-deals-for-you-list--scroll::-webkit-scrollbar { height: 7px; display: none } @media(min-width:64em) { .scroll-slider-deals-for-you-list--scroll::-webkit-scrollbar { height: 12px; display: block } } @media(min-width:48em) { .scroll-slider-deals-for-you-list--scroll::-webkit-scrollbar-track { border-radius: 12px; background: #e0e1e3; margin: 0 calc(50vw - 343px) } } @media(min-width:64em) { .scroll-slider-deals-for-you-list--scroll::-webkit-scrollbar-track { margin: 0 } } .scroll-slider-deals-for-you-list__item, .scroll-slider-deals-for-you-list__item-tile { border-radius: 16px; margin-right: 16px; width: 242px } @media(min-width:48em) { .scroll-slider-deals-for-you-list__item, .scroll-slider-deals-for-you-list__item-tile { margin-right: 24px; width: 249px } } @media(min-width:64em) { .scroll-slider-deals-for-you-list__item, .scroll-slider-deals-for-you-list__item-tile { width: 244px } } .scroll-slider-deals-for-you-list__item { scroll-snap-align: start; scroll-margin-left: 16px } @media(min-width:48em) { .scroll-slider-deals-for-you-list__item { scroll-margin-left: 24px } } @media(min-width:64em) { .scroll-slider-deals-for-you-list__item { scroll-snap-align: center; scroll-margin-left: 0 } } .scroll-slider-deals-for-you-list__item:first-child { margin-left: 25px; scroll-margin-left: 25px } @media(min-width:48em) { .scroll-slider-deals-for-you-list__item:first-child { margin-left: 0; scroll-margin-left: calc(50vw - 343px) } } @media(min-width:64em) { .scroll-slider-deals-for-you-list__item:first-child { scroll-margin-left: 0 } } .scroll-slider-deals-for-you-list__item:last-child { margin-right: 20px } @media(min-width:48em) { .scroll-slider-deals-for-you-list__item:last-child { margin-right: 0; padding-right: 10px } } .scroll-slider-deals-for-you-list__button-container { margin-top: 10px; margin-left: 25px } @media(min-width:48em) { .scroll-slider-deals-for-you-list__button-container { margin-top: 5px; margin-left: 0 } } @media(min-width:64em) { .scroll-slider-deals-for-you-list__button-container { margin-top: 15px } } .your-pco { width: 100%; max-width: 1920px; overflow: hidden } .your-pco, .your-pco__lottie { position: relative; margin: 0 auto } .your-pco__lottie { z-index: -1; height: 160px; width: 360px } .your-pco__lottie--hand { margin-top: -10px } @media(min-width:48em) { .your-pco__lottie--hand { width: 400px } } @media(prefers-reduced-motion:reduce) { .your-pco__lottie--hand { text-align: center } } .your-pco__lottie--moonrise { width: 1920px; left: 50%; transform: translateX(-50%) } @media(prefers-reduced-motion:reduce) { .your-pco__lottie--moonrise { display: flex; align-items: flex-end; justify-content: center; overflow-x: hidden } } .your-pco__background { position: absolute; top: 0; left: 0; z-index: -2; width: 100%; height: 100%; background: snow } .your-pco__footer { overflow: hidden } .your-pco-section { position: relative; margin: 28px 0 56px; overflow-x: clip } @media(min-width:48em) { .your-pco-section { margin: 48px 0 96px } } @media(min-width:64em) { .your-pco-section { margin: 60px 0 120px } } .your-pco-section__container { max-width: 872px; width: 100%; position: relative } .your-pco-section__background { position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); height: auto; width: 100% } .your-pco-section__heading { margin-bottom: 0 } .your-pco-section__description, .your-pco-section__heading+p { margin: 5px 0 30px; color: #6b6272 } @media(min-width:48em) { .your-pco-section__description, .your-pco-section__heading+p { margin: 8px 0 40px } } .your-pco-section__content { margin: 0; padding: 0 } .your-pco-section .partnership-tile { max-width: 794px } .your-pco-header-greeting p { margin: 40px auto 9px; max-width: 792px; order: 0; flex-grow: 0; color: #6c221a } @media(min-width:64em) { .your-pco-header-greeting p { margin-top: 64px } } .your-pco-header-greeting h1 { margin: 0 auto 0 0; order: 1; flex-grow: 0; color: #ac342a; max-width: 230px } @media(min-width:48em) { .your-pco-header-greeting h1 { margin: 0 auto; max-width: 792px } } .main-header__insiders .your-pco-header-greeting h1, .main-header__insiders .your-pco-header-greeting p { color: #f9dada } .messages { height: var(--messages-container-height); overflow-y: clip; transition: all .4s; border: 1px solid transparent } .messages__all-read { color: #6b6272; animation: fadeIn .8s 1 } @media(min-width:64em) { .messages__all-read { margin-top: 0; margin-bottom: 150px } } .message { position: relative; top: 0; left: 0; width: 100%; max-width: 792px; display: flex; align-items: center; padding: 16px; margin: 0 auto 16px; border: 1px solid rgba(97, 83, 149, .08); box-sizing: border-box; box-shadow: 0 4px 12px rgba(158, 147, 166, .24), 0 4px 6px rgba(158, 147, 166, .24); border-radius: 8px; color: #403840; text-decoration: none; transition: .3s ease; opacity: 1; background-color: #fff; background-size: cover } @media(min-width:48em) { .message { border-radius: 16px } } .message:first-child { margin-top: 10px } .message:hover { color: #403840; transform: scale(1.03); box-shadow: 0 2px 18px rgba(158, 147, 166, .24), 0 10px 12px rgba(158, 147, 166, .24) } .message__cta:focus { color: #615395 } .message__cta:focus .message { transform: scale(1.03) } .message__image { width: 48px; height: 48px } @media(min-width:48em) { .message__image { width: 64px; height: 64px } } .message__copy { margin: 0 0 8px } .message__content { font-family: Inter, sans-serif; padding-left: 24px; flex: 0 1 calc(100% - 86px) } @media(min-width:48em) { .message__content { flex: 0 1 calc(100% - 112px) } } .message__cta { margin: 0; color: #157a77; text-decoration: underline; transition: color .2s } .message__cta:hover { color: #615395 } .message__dismiss { width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; position: absolute; top: 8px; right: 8px; background: none; border: none; padding: 0 } @media(min-width:48em) { .message__dismiss { width: 34px; height: 34px } } .message__dismiss:focus .message__dismiss-inner, .message__dismiss:hover .message__dismiss-inner { border-color: #615395; background: #f4f1f6; cursor: pointer } .message__dismiss:hover .sprite { fill: #615395 } .message__dismiss:active .message__dismiss-inner { border-color: #403840; background: #403840 } .message__dismiss:active .sprite { fill: #fff } .message__dismiss .sprite { fill: #655c6c } .message__dismiss-inner { background: #fff; width: 34px; height: 34px; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: all .2s; border: 2px solid transparent } .message__hidden { display: none; opacity: 0 } .message__dismissed { pointer-events: none; opacity: 0; animation: fadeOut .3s ease 0s forwards } .message__shift-up { top: var(--dismissed-message-height) } @keyframes fadeOut { 0% { opacity: 1 } to { opacity: 0 } } @media(min-width:48em) { .my-stores__stores-container { display: flex } } .my-stores__store-container { flex: 1 1 396px } .my-stores__store-divider { height: 1px; background: #9e93a6; margin: 10px 0 } .my-stores__store-toggle { cursor: pointer; position: relative; background: none; border: none; display: block; width: 100%; text-align: left; padding: 15px 0 12px; margin: 0 } .my-stores__store-name, .my-stores__store-name--toggle { margin: 0 } .my-stores__chevron { display: inline-block; border-color: #157a77; border-style: solid; border-width: 2px 2px 0 0; content: ""; width: 12px; height: 12px; position: relative; top: 0; right: 0; transform: rotate(135deg); vertical-align: top } .my-stores__chevron--expanded { transform: rotate(-45deg); top: -5px } .my-stores__chevron-container { position: absolute; top: 21px; right: 3px } .my-stores__store-address { color: #157a77; margin: 0 0 3px } @media(min-width:48em) { .my-stores__store-address { margin: 14px 0 3px } } .my-stores__store-description, .my-stores__store-hours { color: #6b6272 } .my-stores__store-hours { margin: 0 } .my-stores__store-description { margin: 16px 0 20px } @media(min-width:48em) { .my-stores__store-description { margin: 16px 0 30px } } .my-stores__shop-button { font-size: .8125rem; font-weight: 600; background: transparent; border: 1px solid #157a77; border-radius: 24px; color: #157a77; cursor: pointer; transition: all .1s; padding: 12px 25px 10px; margin: 0 0 15px; min-width: -moz-fit-content; min-width: fit-content } .my-stores__shop-button:focus, .my-stores__shop-button:hover { border-color: #615395; color: #615395; background: #f4f1f6 } .my-stores__shop-button:active { color: snow; border-color: #403840; background: #403840 } @media(min-width:48em) { .your-pco-offers-preview { margin-bottom: 135px } } @media(min-width:64em) { .your-pco-offers-preview { margin-bottom: 170px } } .offer-preview-card { display: flex; flex-direction: column; justify-content: flex-start; width: 290px; height: 152px; background-size: cover; border: none; border-radius: 8px; padding: 16px; box-shadow: 0 4px 12px rgba(158, 147, 166, .24), 0 4px 6px rgba(158, 147, 166, .24); cursor: pointer; text-decoration: none; text-align: left; align-items: flex-start; transform: scale(1); transition: all .2s } @media(min-width:48em) { .offer-preview-card { width: 384px; height: 196px; border-radius: 16px; padding: 24px 32px 32px } } .offer-preview-card:focus, .offer-preview-card:hover { transform: scale(1.05); box-shadow: 0 2px 18px rgba(158, 147, 166, .24), 0 10px 12px rgba(158, 147, 166, .24) } .offer-preview-card__logo { height: 24px } .offer-preview-card__title { margin: 15px 0 } @media(min-width:48em) { .offer-preview-card__title { margin: 24px 0 16px } } .offer-preview-card__description { margin: 0 } .offer-preview-card__cta { display: inline-block; padding: 11px 35px; background: #157a77; border-radius: 30px; color: #fff; font-weight: 600; transition: all .2s } .offer-preview-card--pco:focus .offer-preview-card__cta, .offer-preview-card--pco:hover .offer-preview-card__cta { background: #615395; border-color: #615395 } .offer-preview-card--pco .offer-preview-card__title { color: #ac342a } .offer-preview-card--pco .offer-preview-card__description { color: #6c221a } .offer-preview-card--pcoi:focus .offer-preview-card__cta, .offer-preview-card--pcoi:hover .offer-preview-card__cta { color: #fff; background: #403840 } .offer-preview-card--pcoi .offer-preview-card__title { color: #f9dada } .offer-preview-card--pcoi .offer-preview-card__description { color: #fff } .offer-preview-card--dark:focus .offer-preview-card__cta, .offer-preview-card--dark:hover .offer-preview-card__cta, .offer-preview-card--pcoi .offer-preview-card__cta { color: #403840; background: #fff } .offer-preview-card--dark .offer-preview-card__description, .offer-preview-card--dark .offer-preview-card__title { color: #403840 } .offer-preview-card--dark .offer-preview-card__cta, .offer-preview-card--light:focus .offer-preview-card__cta, .offer-preview-card--light:hover .offer-preview-card__cta { background: #403840; color: #fff } .offer-preview-card--light .offer-preview-card__description, .offer-preview-card--light .offer-preview-card__title { color: #fff } .offer-preview-card--light .offer-preview-card__cta { color: #403840; background: #fff } .scroll-slider-dashboard-inspo-list--scroll, .scroll-slider-dashboard-list--scroll { scroll-snap-type: x mandatory; padding: 10px 6px 24px; scrollbar-width: none } @media(min-width:48em) { .scroll-slider-dashboard-inspo-list--scroll, .scroll-slider-dashboard-list--scroll { padding: 10px 20px 24px } } .scroll-slider-dashboard-inspo-list--scroll::-webkit-scrollbar, .scroll-slider-dashboard-list--scroll::-webkit-scrollbar { display: none } .scroll-slider-dashboard-inspo-list__item, .scroll-slider-dashboard-list__item { scroll-snap-align: start; margin-right: 16px; border-radius: 8px; scroll-margin-left: 20px } @media(min-width:48em) { .scroll-slider-dashboard-inspo-list__item, .scroll-slider-dashboard-list__item { scroll-margin-left: 40px } } .scroll-slider-dashboard-inspo-list__item:first-child, .scroll-slider-dashboard-list__item:first-child { scroll-snap-align: center; margin-left: 15px } @media(min-width:48em) { .scroll-slider-dashboard-inspo-list__item:first-child, .scroll-slider-dashboard-list__item:first-child { margin-left: 20px } } @media(min-width:872px) { .scroll-slider-dashboard-inspo-list__item:first-child, .scroll-slider-dashboard-list__item:first-child { margin-left: calc(50vw - 421px) } } @media(min-width:1920px) { .scroll-slider-dashboard-inspo-list__item:first-child, .scroll-slider-dashboard-list__item:first-child { margin-left: 539px } } .scroll-slider-dashboard-list__button-container { margin-top: 0; margin-left: 20px } @media(min-width:48em) { .scroll-slider-dashboard-list__button-container { margin-left: 40px } } @media(min-width:872px) { .scroll-slider-dashboard-list__button-container { margin-left: calc(50vw - 404px) } } .scroll-slider-dashboard-inspo-list__button-container { display: none } .your-pco-error__wrapper { max-width: 792px; margin: 0 auto } .your-pco-error__full, .your-pco-error__tile { display: flex; justify-content: flex-end; align-items: center; border-radius: 8px; box-shadow: 0 4px 12px rgba(158, 147, 166, .24), 0 4px 6px rgba(158, 147, 166, .24); background-size: cover; background-position: 0; background-repeat: no-repeat } .your-pco-error__full { height: -moz-fit-content; height: fit-content; min-height: 186px; background-image: url(https://dis-prod.assetful.loblaw.ca/content/dam/loblaw-companies-limited/creative-assets/pc-optimum/your-pco/empty_state_full_mobile.png); margin-top: 18px; margin-bottom: 28px } .your-pco-error__full-content { width: 63% } .your-pco-error__full-content-subtitle, .your-pco-error__full-content-title { margin-right: 24px } .your-pco-error__full-content-title { margin-top: 24px; margin-bottom: 16px } .your-pco-error__full-content-subtitle { margin-bottom: 24px } @media(min-width:34.375em) { .your-pco-error__full { margin-top: 38px; margin-bottom: 48px; border-radius: 16px; min-height: 240px; background-image: url(https://dis-prod.assetful.loblaw.ca/content/dam/loblaw-companies-limited/creative-assets/pc-optimum/your-pco/empty_state_full_tablet.png) } .your-pco-error__full-content { width: 68% } .your-pco-error__full-content-subtitle, .your-pco-error__full-content-title { margin-right: 34px } .your-pco-error__full-content-title { margin-top: 40px; margin-bottom: 24px } .your-pco-error__full-content-subtitle { margin-bottom: 40px } } @media(min-width:64em) { .your-pco-error__full { margin-top: 66px; margin-bottom: 66px; min-height: 248px; background-image: url(https://dis-prod.assetful.loblaw.ca/content/dam/loblaw-companies-limited/creative-assets/pc-optimum/your-pco/empty_state_full_desktop.png) } .your-pco-error__full-content { width: 75% } .your-pco-error__full-content-subtitle, .your-pco-error__full-content-title { margin-right: 103px } } .your-pco-error__full .your-pco-error-block { margin-top: 16px; display: block } @media(min-width:34.375em) { .your-pco-error__full .your-pco-error-block { margin-top: 32px } } .your-pco-error__tile { height: 148px; max-width: 328px; background-image: url(https://dis-prod.assetful.loblaw.ca/content/dam/loblaw-companies-limited/creative-assets/pc-optimum/your-pco/your-pco-error-white_mobile.png) } .your-pco-error__tile-content { width: 66% } .your-pco-error__tile-content-subtitle, .your-pco-error__tile-content-title { margin-right: 13px } @media(min-width:48em) { .your-pco-error__tile { height: 196px; max-width: 384px; background-image: url(https://dis-prod.assetful.loblaw.ca/content/dam/loblaw-companies-limited/creative-assets/pc-optimum/your-pco/your-pco-error-white.png) } .your-pco-error__tile-content { width: 63% } .your-pco-error__tile-content-subtitle, .your-pco-error__tile-content-title { margin-right: 24px } } .pco-dashboard-header__offer-indicator { justify-content: center; display: flex; margin-top: 24px; margin-bottom: -55px } .pco-dashboard-header__offer-indicator span { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .8125rem; line-height: 1.125rem; font-weight: 400; margin-bottom: -10px } @media(min-width:48em) { .pco-dashboard-header__offer-indicator span { font-size: .875rem; line-height: 1.25rem } } @media(max-width:47.99em) { .pco-dashboard-header__offer-indicator span { margin-bottom: -3px } } .pco-dashboard-header__offer-indicator .header-offer-loading-indicator-loaded, .pco-dashboard-header__offer-indicator .header-offer-loading-indicator-loading .header-offer-loading-indicator-error { height: 35px; transform: translateY(-60px); transition: transform .8s ease-out 6s; animation: backgroundFadeToWhite 1.5s ease-out } .pco-dashboard-header__offer-indicator .header-offer-loading-indicator-loading { display: inherit; height: 35px } .pco-dashboard-header__offer-indicator .header-offer-loading-indicator-loaded { background: #fff; color: #f9dada } .pco-dashboard-header__offer-indicator .header-offer-loading-indicator { border-radius: 100px } .pco-dashboard-header__offer-indicator .header-offer-loading-indicator.header-offer-loading-indicator-error { background: #fff; height: 35px } .pco-dashboard-header__offer-indicator .header-offer-loading-indicator--insider.header-offer-loading-indicator-error { background-color: inherit } .pco-dashboard-header__offer-indicator .header-offer-loading-indicator--insider.header-offer-loading-indicator-error span { color: #f9dada } .pco-dashboard-header__offer-indicator .header-offer-loading-indicator--insider.header-offer-loading-indicator-loaded span { color: #403840; animation: pcoiFontFade 1.5s ease-out } .pco-dashboard-header__offer-indicator .header-offer-loading-indicator--insider.header-offer-loading-indicator-loaded .lottieAnimation svg path { stroke: #403840; animation: pcoiFontFade 1.5s ease-out } .pco-dashboard-header__offer-indicator .header-offer-loading-indicator--insider .lottieAnimation svg path, .pco-dashboard-header__offer-indicator .header-offer-loading-indicator--insider span { animation: pcoiFontFadeLoading 1.5s ease-out } @keyframes pcoiFontFadeLoading { to { color: #fff; stroke: #fff } } @keyframes pcoiFontFade { 0% { color: transparent; stroke: transparent } to { color: #403840; stroke: #403840 } } @keyframes backgroundFadeToWhite { 0% { background-color: hsla(0, 0%, 100%, 0) } to { background-color: #fff } } .points-overview { margin: 32px auto 10px; max-width: 792px } @media(min-width:48em) { .points-overview { margin-top: 48px } } .points-overview__inner { background: #fff; border-radius: 8px; box-shadow: 0 1px 5px rgba(158, 147, 166, .2), 0 3px 4px rgba(158, 147, 166, .12), 0 2px 4px rgba(158, 147, 166, .14); color: #ac342a; padding: 16px } @media(min-width:48em) { .points-overview__inner { display: flex; align-items: center; padding: 24px 32px; border-radius: 16px } } .points-overview__container { white-space: nowrap; display: grid; grid-template-areas: "balance" "redeemable" } @media(min-width:48em) { .points-overview__container { padding-right: 32px } } @media(max-width:47.99em) { .points-overview__container { padding-bottom: 8px } } .points-overview-balance { display: flex; align-items: center; gap: 4px } .points-overview-balance__points, .points-overview-balance__text { margin: 0 } .points-redeemable { display: flex; align-items: center; gap: 4px } .points-redeemable__text { margin: 0; color: #655c6c } .points-overview-question-mark svg { width: 16px; height: 16px } .points-overview-error { display: flex; flex-direction: column } @media(min-width:48em) { .points-overview-error { flex-direction: row } } .points-overview-error__message { align-self: center } @media(min-width:48em) { .points-overview-error__message { margin-right: 32px } } .points-message-tile { display: flex; background-color: #fdf0f0; padding: 16px; border-radius: 4px; flex-grow: 1 } .points-message-tile__content { display: flex; flex-direction: column; margin-right: 8px; width: 100% } .points-message-tile__content p { margin: 0 } .points-message-tile__content .link { margin-top: 8px } @media(min-width:48em) { .points-message-tile__content { margin-right: 24px } } .points-message-tile__content--bold { font-weight: 700 } .points-message-tile__image-container { align-self: center; height: 60px } .points-message-tile__image-container img { width: 60px } .commerce-tile-list { display: grid; grid-gap: 8px; grid-template-columns: repeat(3, 1fr); padding: 0 } @media(min-width:48em) { .commerce-tile-list { grid-template-columns: repeat(5, 1fr) } } .commerce-tile-list li { display: flex; justify-content: center; align-items: center } .commerce-tile { display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-decoration: none; color: #655c6c; transition: .2s ease; position: relative } .commerce-tile:focus, .commerce-tile:hover { transform: scale(1.05) } .commerce-tile-cta-content { padding: 8px 0; display: flex; justify-content: center } .commerce-tile-cta-content__img-container { width: 64px; height: 64px; border-radius: 100%; background: #fff; box-sizing: border-box; box-shadow: 0 4px 12px rgba(158, 147, 166, .24), 0 4px 6px rgba(158, 147, 166, .24); overflow: hidden } @media(min-width:48em) { .commerce-tile-cta-content__img-container { width: 80px; height: 80px } } .commerce-tile-cta-content__img { width: 100%; height: 100% } .commerce-tile-cta-content__cta { color: #403840; margin: 8px auto 0; max-width: 104px; text-align: center; align-items: center; padding: 0; height: 32px } @media(min-width:48em) { .commerce-tile-cta-content__cta { height: 44px } } .commerce-tile-cta-content__tag { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .5rem; font-weight: 600; color: #fff; background: #ac342a; padding: 4px 6px; border-radius: 100px; position: absolute; top: -1px; display: inline-block; text-align: center } @media(min-width:48em) { .commerce-tile-cta-content__tag { font-size: .6rem; padding: 4px 7px; top: -2px } } .commerce-tile-modal-content { max-width: 400px; position: relative; border-radius: 16px; background-color: #fff; margin: 0 20px; overflow: hidden } @media(max-height:672px) { .commerce-tile-modal-content { height: 85% } } .commerce-tile-modal-content__inner { padding: 20px 24px 40px; height: 62% } @media(max-height:672px) { .commerce-tile-modal-content__inner { padding: 0 } } @media(max-height:672px) { .commerce-tile-modal-content__inner-text { padding: 0 24px; height: 65%; overflow-x: scroll } } .commerce-tile-modal-content__inner-buttons { text-align: center } @media(max-height:672px) { .commerce-tile-modal-content__inner-buttons { position: absolute; bottom: 0; padding: 16px 24px; background-color: #fff; border-top: 1px solid #9e93a6; left: 0; right: 0 } } .commerce-tile-modal-content img { min-height: 38%; width: 100% } .commerce-tile-modal-content p { margin-bottom: 30px } .commerce-tile-modal-content__cta-button { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1rem; line-height: 1.375rem; display: inline-block; width: 100%; background: #157a77; border-radius: 24px; padding: 12px 0; margin: 0 0 24px; color: #fff; text-align: center; text-decoration: none; cursor: pointer; transition: all .2s; font-weight: 600 } .commerce-tile-modal-content__cta-button:focus, .commerce-tile-modal-content__cta-button:hover { color: #fff; background: #615395 } .commerce-tile-modal-content__cta-button:active { background: #403840 } .commerce-tile-modal-content__cta-button--secondary { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1rem; line-height: 1.375rem; text-decoration: underline; color: #157a77; transition: all .2s; font-weight: 600 } .commerce-tile-modal-content__cta-button--secondary:focus, .commerce-tile-modal-content__cta-button--secondary:hover { color: #615395 } .commerce-tile-modal-content__cta-button--secondary:active { color: #403840 } .contentful-item-partnership-perks-container__footnote { color: #655c6c; margin: 0 } @media(min-width:64em) { .contentful-item-partnership-perks-container__footnote { margin: 16px 0 0 } } .contentful-item-partnership-perks-container__ad-view-wrapper { display: flex } .contentful-item-partnership-perks-container .scroll-slider-contentful-item-partnership-perks { margin: 0 auto } .contentful-item-partnership-perks-container .scroll-slider-contentful-item-partnership-perks .slider-holder-div { width: 100vw } @media(min-width:48em) { .contentful-item-partnership-perks-container .scroll-slider-contentful-item-partnership-perks .slider-holder-div { width: 100% } } .contentful-item-partnership-perks-container .scroll-slider-contentful-item-partnership-perks-list__item { margin-right: 16px; scroll-snap-align: start; scroll-margin-left: 16px } @media(min-width:48em) { .contentful-item-partnership-perks-container .scroll-slider-contentful-item-partnership-perks-list__item { scroll-margin-left: 32px } } @media(min-width:64em) { .contentful-item-partnership-perks-container .scroll-slider-contentful-item-partnership-perks-list__item { scroll-snap-align: center; scroll-margin-left: 0 } } .contentful-item-partnership-perks-container .scroll-slider-contentful-item-partnership-perks-list__item:first-child { margin-left: 21px; scroll-margin-left: 21px } @media(min-width:48em) { .contentful-item-partnership-perks-container .scroll-slider-contentful-item-partnership-perks-list__item:first-child { margin-left: 0; scroll-margin-left: calc(50vw - 343px) } } @media(min-width:64em) { .contentful-item-partnership-perks-container .scroll-slider-contentful-item-partnership-perks-list__item:first-child { margin-left: 6px; scroll-margin-left: 0 } } .contentful-item-partnership-perks-container .scroll-slider-contentful-item-partnership-perks-list__item:last-child { margin-right: 10px; padding-right: 10px } @media(min-width:48em) { .contentful-item-partnership-perks-container .scroll-slider-contentful-item-partnership-perks-list__item:last-child { margin-right: calc(50vw - 372.5px); padding-right: 0 } } @media(min-width:64em) { .contentful-item-partnership-perks-container .scroll-slider-contentful-item-partnership-perks-list__item:last-child { margin-right: 6px } } .contentful-item-partnership-perks-container .scroll-slider-contentful-item-partnership-perks-list__item-tile { display: flex; height: 100% } .contentful-item-partnership-perks-container .scroll-slider-contentful-item-partnership-perks-list__item-tile fieldset { display: flex; margin: 0 } .contentful-item-partnership-perks-container .scroll-slider-contentful-item-partnership-perks-list--scroll { scroll-snap-type: x mandatory; padding: 0 0 16px; scrollbar-width: none } @media(min-width:48em) { .contentful-item-partnership-perks-container .scroll-slider-contentful-item-partnership-perks-list--scroll { margin: 0 calc(-50vw + 343px); padding: 0 30px 16px calc(50vw - 343px) } } @media(min-width:64em) { .contentful-item-partnership-perks-container .scroll-slider-contentful-item-partnership-perks-list--scroll { scrollbar-width: auto; margin: 0; padding: 0 0 16px } } .contentful-item-partnership-perks-container .scroll-slider-contentful-item-partnership-perks-list--scroll::-webkit-scrollbar { display: none; height: 8px; width: 100% } @media(min-width:64em) { .contentful-item-partnership-perks-container .scroll-slider-contentful-item-partnership-perks-list--scroll::-webkit-scrollbar { display: block } } .contentful-item-partnership-perks-container .scroll-slider-contentful-item-partnership-perks-list--scroll::-webkit-scrollbar-thumb { border-radius: 10px; background: #c2c2c2 } @media(min-width:48em) { .contentful-item-partnership-perks-container .scroll-slider-contentful-item-partnership-perks-list--scroll::-webkit-scrollbar-track { border-radius: 10px; background: #f3f3f3; margin: 0 calc(50vw - 343px) } } @media(min-width:64em) { .contentful-item-partnership-perks-container .scroll-slider-contentful-item-partnership-perks-list--scroll::-webkit-scrollbar-track { margin: 0 } } .contentful-item-partnership-perks-container .scroll-slider-contentful-item-partnership-perks-list__button-container { display: none } .contentful-item-partnership-perks-container__modal-content { max-width: 320px; position: relative; border-radius: 16px; background-color: #fff; margin: 0 20px; overflow: hidden } @media(min-width:48em) { .contentful-item-partnership-perks-container__modal-content { max-width: 508px } } .contentful-item-partnership-perks-container__modal-content .pco-modal-content__close { top: 10px } .contentful-item-partnership-redemption-perk-container__footnote { color: #655c6c; margin: 0 } @media(min-width:64em) { .contentful-item-partnership-redemption-perk-container__footnote { margin: 16px 0 0 } } .contentful-item-partnership-redemption-perk-container__ad-view-wrapper { display: flex } .contentful-item-partnership-redemption-perk-container .scroll-slider-contentful-item-partnership-redemption-perk { margin: 0 auto } .contentful-item-partnership-redemption-perk-container .scroll-slider-contentful-item-partnership-redemption-perk .slider-holder-div { width: 100vw } @media(min-width:48em) { .contentful-item-partnership-redemption-perk-container .scroll-slider-contentful-item-partnership-redemption-perk .slider-holder-div { width: 100% } } .contentful-item-partnership-redemption-perk-container .scroll-slider-contentful-item-partnership-redemption-perk-list__item { margin-right: 16px; scroll-snap-align: start; scroll-margin-left: 16px } @media(min-width:48em) { .contentful-item-partnership-redemption-perk-container .scroll-slider-contentful-item-partnership-redemption-perk-list__item { scroll-margin-left: 32px } } @media(min-width:64em) { .contentful-item-partnership-redemption-perk-container .scroll-slider-contentful-item-partnership-redemption-perk-list__item { scroll-snap-align: center; scroll-margin-left: 0 } } .contentful-item-partnership-redemption-perk-container .scroll-slider-contentful-item-partnership-redemption-perk-list__item:first-child { margin-left: 21px; scroll-margin-left: 21px } @media(min-width:48em) { .contentful-item-partnership-redemption-perk-container .scroll-slider-contentful-item-partnership-redemption-perk-list__item:first-child { margin-left: 0; scroll-margin-left: calc(50vw - 343px) } } @media(min-width:64em) { .contentful-item-partnership-redemption-perk-container .scroll-slider-contentful-item-partnership-redemption-perk-list__item:first-child { margin-left: 6px; scroll-margin-left: 0 } } .contentful-item-partnership-redemption-perk-container .scroll-slider-contentful-item-partnership-redemption-perk-list__item:last-child { margin-right: 10px; padding-right: 10px } @media(min-width:48em) { .contentful-item-partnership-redemption-perk-container .scroll-slider-contentful-item-partnership-redemption-perk-list__item:last-child { margin-right: calc(50vw - 372.5px); padding-right: 0 } } @media(min-width:64em) { .contentful-item-partnership-redemption-perk-container .scroll-slider-contentful-item-partnership-redemption-perk-list__item:last-child { margin-right: 6px } } .contentful-item-partnership-redemption-perk-container .scroll-slider-contentful-item-partnership-redemption-perk-list__item-tile { display: flex; height: 100% } .contentful-item-partnership-redemption-perk-container .scroll-slider-contentful-item-partnership-redemption-perk-list__item-tile fieldset { display: flex; margin: 0 } .contentful-item-partnership-redemption-perk-container .scroll-slider-contentful-item-partnership-redemption-perk-list--scroll { scroll-snap-type: x mandatory; padding: 0 0 16px; scrollbar-width: none } @media(min-width:48em) { .contentful-item-partnership-redemption-perk-container .scroll-slider-contentful-item-partnership-redemption-perk-list--scroll { margin: 0 calc(-50vw + 343px); padding: 0 30px 16px calc(50vw - 343px) } } @media(min-width:64em) { .contentful-item-partnership-redemption-perk-container .scroll-slider-contentful-item-partnership-redemption-perk-list--scroll { scrollbar-width: auto; margin: 0; padding: 0 0 16px } } .contentful-item-partnership-redemption-perk-container .scroll-slider-contentful-item-partnership-redemption-perk-list--scroll::-webkit-scrollbar { display: none; height: 8px; width: 100% } @media(min-width:64em) { .contentful-item-partnership-redemption-perk-container .scroll-slider-contentful-item-partnership-redemption-perk-list--scroll::-webkit-scrollbar { display: block } } .contentful-item-partnership-redemption-perk-container .scroll-slider-contentful-item-partnership-redemption-perk-list--scroll::-webkit-scrollbar-thumb { border-radius: 10px; background: #c2c2c2 } @media(min-width:48em) { .contentful-item-partnership-redemption-perk-container .scroll-slider-contentful-item-partnership-redemption-perk-list--scroll::-webkit-scrollbar-track { border-radius: 10px; background: #f3f3f3; margin: 0 calc(50vw - 343px) } } @media(min-width:64em) { .contentful-item-partnership-redemption-perk-container .scroll-slider-contentful-item-partnership-redemption-perk-list--scroll::-webkit-scrollbar-track { margin: 0 } } .contentful-item-partnership-redemption-perk-container .scroll-slider-contentful-item-partnership-redemption-perk-list__button-container { display: none } .contentful-item-partnership-redemption-perk-container__modal-content { max-width: 320px; position: relative; border-radius: 16px; background-color: #fff; margin: 0 20px; overflow: hidden } @media(min-width:48em) { .contentful-item-partnership-redemption-perk-container__modal-content { max-width: 508px } } .contentful-item-partnership-redemption-perk-container__modal-content .pco-modal-content__close { top: 10px } .scroll-slider-lifestyle-canvas-list { padding-left: 0; display: grid; grid-template-columns: repeat(9, minmax(auto, 1fr)); grid-gap: 16px } .scroll-slider-lifestyle-canvas-list__item { height: 100% } .scroll-slider-lifestyle-canvas-list__item:last-child { margin: 0 } .scroll-slider-lifestyle-canvas-list__item-tile { height: 100% } .scroll-slider-lifestyle-canvas-list__item-tile .block-tile, .scroll-slider-lifestyle-canvas-list__item-tile .grid-view__container { height: calc(100% - 32px); min-height: 321px } .scroll-slider-lifestyle-canvas-list--scroll { scroll-snap-type: x mandatory; padding-bottom: 16px } .scroll-slider-lifestyle-canvas-list--scroll::-webkit-scrollbar { display: block; height: 10px; width: 100% } .scroll-slider-lifestyle-canvas-list--scroll::-webkit-scrollbar-thumb { border-radius: 10px; background: #c2c2c2 } .scroll-slider-lifestyle-canvas-list--scroll::-webkit-scrollbar-track { border-radius: 10px; background: #f1f1f1; margin: 0 } .scroll-slider-lifestyle-canvas-list__button-container { display: none } .points-days { display: flex; flex-direction: column; justify-content: center; align-items: center } .points-days-cta-section__content .cta-section__link, .points-days__cta { display: inline-block; color: #fff; background-color: #007a7c; border-radius: 32px; border: none } .points-days-offers-section__container { background-color: #da291c; background-repeat: no-repeat; background-size: contain; background-position: 50%; border-radius: 24px } .points-days-offers-section__screen-cards .screen-cards__subtitle, .points-days-offers-section__screen-cards .screen-cards__title { color: #fff } .points-days-offers-section__screen-cards .screen-cards__list { display: grid; margin: 32px auto 0; grid-auto-rows: 1fr; grid-row-gap: 24px; grid-column-gap: 24px } @media(min-width:48em) { .points-days-offers-section__screen-cards .screen-cards__list { margin: 20px auto 0; grid-template-columns: repeat(2, 1fr); max-width: 724px } } @media(min-width:80em) { .points-days-offers-section__screen-cards .screen-cards__list { margin: 28px auto 0; grid-template-columns: repeat(3, 1fr); max-width: 1086px } } .points-days-offers-section .pc-card__title { color: #ac342a } .points-days-offers-section--insiders .points-days-offers-section__container { background-color: #2d2e39 } .points-days-offers-section--insiders .points-days-offers-section__screen-cards .screen-cards__subtitle, .points-days-offers-section--insiders .points-days-offers-section__screen-cards .screen-cards__title { color: #fff } .points-days-offers-section--insiders .pc-card__title { color: #2d2e39 } .pc-card-sm { min-height: 0; height: 100%; margin: 12px auto } .points-days-cta-section__background { background-repeat: no-repeat; background-size: cover; background-position: 50%; border-radius: 24px; box-shadow: 0 8px 10px rgba(158, 147, 166, .3), 0 6px 30px rgba(158, 147, 166, .12), 0 16px 24px rgba(158, 147, 166, .14) } .points-days-cta-section__content .cta-section__link { width: 100% } @media(min-width:34.375em) { .points-days-cta-section__content .cta-section__link { width: 243px } } .points-days-cta-section__content .cta-section__header, .points-days-cta-section__content .cta-section__tile--header { color: #ac342a } .points-days-banners-section__background { background-repeat: no-repeat; background-size: contain; background-position: bottom; border-radius: 24px; box-shadow: 0 8px 10px rgba(158, 147, 166, .3), 0 6px 30px rgba(158, 147, 166, .12), 0 16px 24px rgba(158, 147, 166, .14); padding-bottom: 24px } @media(min-width:48em) { .points-days-banners-section__background { padding-bottom: 32px } } @media(min-width:64em) { .points-days-banners-section__background { padding-bottom: 48px } } .points-days-banners-section__logos .logo-section__body-text { margin: 0 } .points-days-ts-and-cs__accordion { border-top: 1px solid #9e93a6; padding: 24px 0 } @media(min-width:48em) { .points-days-ts-and-cs__accordion { padding: 32px 0 } } @media(min-width:64em) { .points-days-ts-and-cs__accordion { padding: 48px 0 } } .points-days-ts-and-cs__accordion .accordion__button { color: #000 } .points-days-ts-and-cs__accordion .accordion__button svg { fill: #000 } .points-days-ts-and-cs__accordion ol { margin: 32px 0 0; list-style: none; counter-reset: item } @media(min-width:64em) { .points-days-ts-and-cs__accordion ol { margin: 56px 0 0 } } .points-days-ts-and-cs__accordion ol li { display: flex; counter-increment: item; margin-top: 24px } .points-days-ts-and-cs__accordion ol li:before { margin-right: 16px; content: counter(item); color: #ee3124; text-align: center } @media(min-width:48em) { .points-days-ts-and-cs__accordion ol li:before { margin-right: 24px } } .points-days-ts-and-cs__accordion ol li:first-child { margin-top: 0 } .points-days-ts-and-cs__accordion ol p { margin: 0 } .points-days-ts-and-cs__accordion p { margin: 0 0 24px } .points-days-ts-and-cs__accordion p:first-child { margin-top: 32px } @media(min-width:64em) { .points-days-ts-and-cs__accordion p:first-child { margin-top: 56px } } .points-days-ts-and-cs__accordion p:last-child { margin-bottom: 0 } .points-days-ts-and-cs__accordion p:empty { display: none } .product-love-story-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-start; width: 298px; height: 200px; background-size: cover; border: none; border-radius: 8px; padding: 8px 16px 16px; box-shadow: 0 4px 12px rgba(158, 147, 166, .24), 0 4px 6px rgba(158, 147, 166, .24); cursor: pointer; text-decoration: none; transform: scale(1); transition: all .2s } @media(min-width:48em) { .product-love-story-tile { width: 384px; height: 257px; border-radius: 16px } } .product-love-story-tile:focus, .product-love-story-tile:hover { transform: scale(1.05); box-shadow: 0 2px 18px rgba(158, 147, 166, .24), 0 10px 12px rgba(158, 147, 166, .24) } .product-love-story-tile__background { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; border-radius: 8px } .product-love-story-tile__container { display: flex; align-items: center; justify-content: space-between; width: 100% } .product-love-story-tile__like-count-container { display: flex; align-items: center } .product-love-story-tile__heart { fill: none; width: 18px; margin-right: 5px } .product-love-story-tile__like-count { margin: 0 } .product-love-story-tile__tag { margin: 0; padding: 4px 8px; border-radius: 16px } .product-love-story-tile__title { height: 94px; width: 70%; display: flex; align-items: center; margin: 0 } @media(min-width:48em) { .product-love-story-tile__title { height: 133px } } .product-love-story-tile__product-container { display: flex; align-items: center } .product-love-story-tile__product-image-container { background: #fff; display: flex; justify-content: center; align-items: center; border-radius: 4px; width: 56px; height: 56px } @media(min-width:48em) { .product-love-story-tile__product-image-container { width: 72px; height: 72px } } .product-love-story-tile__product-image { background: linear-gradient(0deg, #f4f1f6, #f4f1f6 98%, #fff 99%); width: 40px; height: 40px } @media(min-width:48em) { .product-love-story-tile__product-image { width: 56px; height: 56px } } .product-love-story-tile__product-image.image--error { padding: 2px } .product-love-story-tile__product-name { width: calc(100% - 64px); margin: 0 0 0 8px } @media(min-width:48em) { .product-love-story-tile__product-name { width: calc(100% - 80px) } } .product-love-story-tile--dark { background-color: #615395 } .product-love-story-tile--dark .product-love-story-tile__like-count, .product-love-story-tile--dark .product-love-story-tile__product-name, .product-love-story-tile--dark .product-love-story-tile__title, .product-love-story-tile--dark:focus, .product-love-story-tile--dark:hover { color: #fff } .product-love-story-tile--dark .product-love-story-tile__heart { stroke: #fff } .product-love-story-tile--dark .product-love-story-tile__tag { background: #fff; color: #403840 } .product-love-story-tile--light { background-color: #f4f1f6 } .product-love-story-tile--light .product-love-story-tile__like-count, .product-love-story-tile--light .product-love-story-tile__product-name, .product-love-story-tile--light .product-love-story-tile__title, .product-love-story-tile--light:focus, .product-love-story-tile--light:hover { color: #403840 } .product-love-story-tile--light .product-love-story-tile__heart { stroke: #403840 } .product-love-story-tile--light .product-love-story-tile__tag { background: #000; color: #fff } .countdown-timer { min-width: 275px; margin: 12px 0 0; display: flex } .countdown-timer__duration-group { display: flex } .countdown-timer__duration { display: flex; flex-direction: column; align-items: center } .countdown-timer__value { min-width: 44px; text-align: center } @media(min-width:64em) { .countdown-timer__value { text-align: left } } .countdown-timer__value--spacer { margin: 0 4px } .marketing-page-header { display: grid; background-color: #e1251b; grid-template-areas: "image" "text" } @media(min-width:48em) { .marketing-page-header { grid-template-areas: "text image"; grid-template-columns: 1fr 40% } } .marketing-page-header__body { grid-area: text; align-self: center; text-align: center; padding: 16px 16px 24px; display: grid } @media(min-width:48em) { .marketing-page-header__body { text-align: left; padding: 57px 0 57px 67px } } .cancel-subscription__modal-content .pcoi-error-tile .marketing-page-header__body p:first-of-type, .enrol-flow .marketing-page-header__body .flow-progress-bar__title, .marketing-page-header__body .activation-card-display__points-label, .marketing-page-header__body .billing-history__date, .marketing-page-header__body .cancel-subscription__modal-content .pcoi-error-tile p:first-of-type, .marketing-page-header__body .category-btn, .marketing-page-header__body .deals-for-you-tile__item, .marketing-page-header__body .enrol-flow .flow-progress-bar__title, .marketing-page-header__body .esso-redemption-earning-card__subtitle, .marketing-page-header__body .esso-redemption-pcf__money-subtitle, .marketing-page-header__body .esso-redemption-redeem-cards__text, .marketing-page-header__body .expandable-form-wrapper__title, .marketing-page-header__body .initial-offers-slider__slider-container__slide-content--screen-1--button-imageHolder, .marketing-page-header__body .initial-offers-slider__slider-container__slide-content--screen-1--button-textHolder, .marketing-page-header__body .initial-offers-slider__slider-container__slide-content--screen-rest--button-imageHolder, .marketing-page-header__body .initial-offers-slider__slider-container__slide-content--screen-rest--button-textHolder, .marketing-page-header__body .initial-offers-slider__slider-container__slide-content__question, .marketing-page-header__body .no-subscription-plan__content h3, .marketing-page-header__body .offer-content-group-carousel--faded.offer-content-group-carousel--modal .offer__reward--earned, .marketing-page-header__body .offer-content-group-carousel .offer__text, .marketing-page-header__body .offer__text--carousel, .marketing-page-header__body .quest-offer-child-offer .continuity-offer__content-group .offer__reward, .marketing-page-header__body .quest-offer-child-offer .hero-continuity-offer__content-group .offer__reward, .marketing-page-header__body .quest-offer-child-offer .hero-product-offer__content-group .offer__reward, .marketing-page-header__body .quest-offer-child-offer.offer--faded .offer__reward--earned, .marketing-page-header__body .quest-offer-child-offer .product-offer__content-group .offer__reward, .marketing-page-header__body .subscription-plan__content h3, .marketing-page-header__body .type-ds-headline, .no-subscription-plan__content .marketing-page-header__body h3, .offer-content-group-carousel--faded.offer-content-group-carousel--modal .marketing-page-header__body .offer__reward--earned, .offer-content-group-carousel .marketing-page-header__body .offer__text, .quest-offer-child-offer .continuity-offer__content-group .marketing-page-header__body .offer__reward, .quest-offer-child-offer .hero-continuity-offer__content-group .marketing-page-header__body .offer__reward, .quest-offer-child-offer .hero-product-offer__content-group .marketing-page-header__body .offer__reward, .quest-offer-child-offer.offer--faded .marketing-page-header__body .offer__reward--earned, .quest-offer-child-offer .product-offer__content-group .marketing-page-header__body .offer__reward, .subscription-plan__content .marketing-page-header__body h3 { margin: 16px 0 } .marketing-page-header__body h1, .marketing-page-header__body p { color: #fff; margin: 0 } .marketing-page-header__link { background-color: #191919; border-color: #191919; font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif } @media(min-width:48em) { .marketing-page-header__link { width: -moz-fit-content; width: fit-content } } .marketing-page-header__image { grid-area: image; align-self: center; justify-self: center; padding: 16px 78px } @media(min-width:48em) { .marketing-page-header__image { padding: 32px 40px } } .marketing-page-header .responsive-image__content, .marketing-page-header__content { max-height: 236px; width: 100% } @media(min-width:48em) { .marketing-page-terms-and-conditions { margin-top: 32px } } .marketing-page-terms-and-conditions__accordion { padding: 24px 16px } @media(min-width:48em) { .marketing-page-terms-and-conditions__accordion { padding: 32px 40px; border-top: 1px solid #9e93a6 } } @media(min-width:64em) { .marketing-page-terms-and-conditions__accordion { padding: 48px 40px } } .marketing-page-terms-and-conditions__accordion .accordion__button { color: #157a77; margin: 0 } .marketing-page-terms-and-conditions__accordion .accordion__button svg { fill: #157a77; height: 15px } .marketing-page-terms-and-conditions__accordion .accordion__content p { color: #403840 } .marketing-page-module { display: grid; grid-template-areas: "image" "text" } @media(min-width:48em) { .marketing-page-module { grid-template-columns: 1fr 1fr; grid-template-areas: "image text" } } .marketing-page-module__body { grid-area: text; margin: 16px 16px 24px; display: grid } @media(min-width:48em) { .marketing-page-module__body { align-self: center; padding: 40px } } .marketing-page-module__link { background-color: #191919; border-color: #191919; font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif } @media(min-width:48em) { .marketing-page-module__link { width: -moz-fit-content; width: fit-content } } @media(min-width:48em) { .marketing-page-module:nth-child(odd) { grid-template-areas: "text image" } } .marketing-page-module__image { grid-area: image } .marketing-page-module .responsive-image__content, .marketing-page-module__content { display: flex; justify-content: center; width: 100% } .load-shop-pay { max-width: 1280px; margin: 0 auto } .load-shop-pay-header { display: grid; background-color: #e1251b; grid-template-areas: "image" "text" } @media(min-width:48em) { .load-shop-pay-header { grid-template-areas: "text image"; grid-template-columns: 1fr 40% } } .load-shop-pay-header__body { grid-area: text; align-self: center; text-align: center; padding: 16px 16px 24px; display: grid } @media(min-width:48em) { .load-shop-pay-header__body { text-align: left; padding: 57px 0 57px 67px } } .cancel-subscription__modal-content .pcoi-error-tile .load-shop-pay-header__body p:first-of-type, .enrol-flow .load-shop-pay-header__body .flow-progress-bar__title, .load-shop-pay-header__body .activation-card-display__points-label, .load-shop-pay-header__body .billing-history__date, .load-shop-pay-header__body .cancel-subscription__modal-content .pcoi-error-tile p:first-of-type, .load-shop-pay-header__body .category-btn, .load-shop-pay-header__body .deals-for-you-tile__item, .load-shop-pay-header__body .enrol-flow .flow-progress-bar__title, .load-shop-pay-header__body .esso-redemption-earning-card__subtitle, .load-shop-pay-header__body .esso-redemption-pcf__money-subtitle, .load-shop-pay-header__body .esso-redemption-redeem-cards__text, .load-shop-pay-header__body .expandable-form-wrapper__title, .load-shop-pay-header__body .initial-offers-slider__slider-container__slide-content--screen-1--button-imageHolder, .load-shop-pay-header__body .initial-offers-slider__slider-container__slide-content--screen-1--button-textHolder, .load-shop-pay-header__body .initial-offers-slider__slider-container__slide-content--screen-rest--button-imageHolder, .load-shop-pay-header__body .initial-offers-slider__slider-container__slide-content--screen-rest--button-textHolder, .load-shop-pay-header__body .initial-offers-slider__slider-container__slide-content__question, .load-shop-pay-header__body .no-subscription-plan__content h3, .load-shop-pay-header__body .offer-content-group-carousel--faded.offer-content-group-carousel--modal .offer__reward--earned, .load-shop-pay-header__body .offer-content-group-carousel .offer__text, .load-shop-pay-header__body .offer__text--carousel, .load-shop-pay-header__body .quest-offer-child-offer .continuity-offer__content-group .offer__reward, .load-shop-pay-header__body .quest-offer-child-offer .hero-continuity-offer__content-group .offer__reward, .load-shop-pay-header__body .quest-offer-child-offer .hero-product-offer__content-group .offer__reward, .load-shop-pay-header__body .quest-offer-child-offer.offer--faded .offer__reward--earned, .load-shop-pay-header__body .quest-offer-child-offer .product-offer__content-group .offer__reward, .load-shop-pay-header__body .subscription-plan__content h3, .load-shop-pay-header__body .type-ds-headline, .no-subscription-plan__content .load-shop-pay-header__body h3, .offer-content-group-carousel--faded.offer-content-group-carousel--modal .load-shop-pay-header__body .offer__reward--earned, .offer-content-group-carousel .load-shop-pay-header__body .offer__text, .quest-offer-child-offer .continuity-offer__content-group .load-shop-pay-header__body .offer__reward, .quest-offer-child-offer .hero-continuity-offer__content-group .load-shop-pay-header__body .offer__reward, .quest-offer-child-offer .hero-product-offer__content-group .load-shop-pay-header__body .offer__reward, .quest-offer-child-offer.offer--faded .load-shop-pay-header__body .offer__reward--earned, .quest-offer-child-offer .product-offer__content-group .load-shop-pay-header__body .offer__reward, .subscription-plan__content .load-shop-pay-header__body h3 { margin: 16px 0 } .load-shop-pay-header__body h1, .load-shop-pay-header__body p { color: #fff; margin: 0 } .load-shop-pay-header__link { background-color: #191919; border-color: #191919; font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif } @media(min-width:48em) { .load-shop-pay-header__link { width: -moz-fit-content; width: fit-content } } .load-shop-pay-header__image-container { grid-area: image; align-self: center; justify-self: center; padding: 16px 78px } @media(min-width:48em) { .load-shop-pay-header__image-container { padding: 32px 40px } } .load-shop-pay-header__image .responsive-image__content { max-height: 236px; width: 100% } .load-shop-pay-module { display: grid; grid-template-areas: "image" "text" } @media(min-width:48em) { .load-shop-pay-module { grid-template-columns: 1fr 1fr; grid-template-areas: "image text" } } .load-shop-pay-module__body { grid-area: text; margin: 16px 16px 24px; display: grid } .billing-history-empty-state__message .load-shop-pay-module__body h4, .load-shop-pay-module__body .billing-history-empty-state__message h4, .load-shop-pay-module__body .deals-for-you__subtitle, .load-shop-pay-module__body .download-app__subtitle, .load-shop-pay-module__body .esso-redemption-header__subtitle, .load-shop-pay-module__body .esso-redemption-pcf__title, .load-shop-pay-module__body .esso-redemption-redeem-cards__text-divider, .load-shop-pay-module__body .esso-redemption-redeem-cards__title, .load-shop-pay-module__body .loadToCard-brand-banner .layoutCard__title, .load-shop-pay-module__body .modal-content .offer__text--carousel, .load-shop-pay-module__body .offer-standalone__heading, .load-shop-pay-module__body .offer__reward--carousel, .load-shop-pay-module__body .slider-header__text--heading, .load-shop-pay-module__body .type-ds-title-3, .load-shop-pay-module__body .your-pco-error__tile-content-title, .loadToCard-brand-banner .load-shop-pay-module__body .layoutCard__title, .modal-content .load-shop-pay-module__body .offer__text--carousel { color: #e1251b; margin: 0 } @media(min-width:48em) { .load-shop-pay-module__body { align-self: center; padding: 40px } } .load-shop-pay-module__link { background-color: #191919; border-color: #191919; font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif } @media(min-width:48em) { .load-shop-pay-module__link { width: -moz-fit-content; width: fit-content } } @media(min-width:48em) { .load-shop-pay-module:nth-child(2n) { grid-template-areas: "text image" } } .load-shop-pay-module__image-container { grid-area: image; background-color: #e1251b } .load-shop-pay-module__image { display: flex; justify-content: center } .load-shop-pay-module__image .responsive-image__content { width: 100% } @media(min-width:48em) { .load-shop-pay-module__image .responsive-image__content { max-width: 640px } } @media(min-width:48em) { .load-shop-pay-ts-and-cs { margin-top: 32px } } .load-shop-pay-ts-and-cs__accordion { padding: 24px 16px } @media(min-width:48em) { .load-shop-pay-ts-and-cs__accordion { border-top: 1px solid #9e93a6; padding: 32px 40px } } @media(min-width:64em) { .load-shop-pay-ts-and-cs__accordion { padding: 48px 0 } } .load-shop-pay-ts-and-cs__accordion .accordion__button { color: #157a77; margin: 0 } .load-shop-pay-ts-and-cs__accordion .accordion__button svg { fill: #157a77; height: 15px } .load-shop-pay-ts-and-cs__link { color: #157a77 } .load-shop-pay-ts-and-cs .accordion__content p { color: #403840 } .loadToCard-sign-in-section { position: sticky; top: 56px; bottom: auto; display: flex; flex-direction: column; align-items: flex-start; background: rgba(237, 243, 253, .95); box-shadow: 0 4px 10px rgba(158, 147, 166, .45); border: 1px solid #4a80d2; border-radius: 8px; padding: 16px; z-index: 1; max-width: 920px; margin: 48px auto 20px } @media(min-width:48em) { .loadToCard-sign-in-section { margin: 64px auto 36px } } @media(min-width:64em) { .loadToCard-sign-in-section { margin: 64px auto; top: 82px; padding: 16px } } .loadToCard-sign-in-section__title { margin-top: 0 } .loadToCard-sign-in-section__title sup { line-height: 0; font-size: 8px } .loadToCard-sign-in-section__link { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif } .load-to-card-section { display: flex; flex-direction: column; max-width: 920px; margin: 0 auto } .load-to-card-section__error-banner { margin: 0 auto } .load-to-card-section__error-banner>.your-pco-error__wrapper { max-width: 920px } .load-to-card-section__error-space { margin-top: 50px } @media(min-width:48em) { .load-to-card-section__error-space { margin-top: 240px } } @media(min-width:64em) { .load-to-card-section__error-space { margin-top: 100px } } .load-to-card-section__no-contentful { margin-top: 38px } @media(min-width:64em) { .load-to-card-section__no-contentful { margin-top: 60px } } .load-to-card-grid { width: 100%; display: grid; grid-template-columns: 1fr; -moz-column-gap: 24px; column-gap: 24px; row-gap: 27px; list-style-type: none; margin: 0 0 2.375rem; padding: 0 } @media(min-width:48em) { .load-to-card-grid { grid-template-columns: 1fr 1fr; margin: 0 0 3.75rem } } @media(min-width:64em) { .load-to-card-grid { grid-template-columns: 1fr 1fr 1fr; margin: 0 0 3.75rem } } .load-to-card-section-header { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 1.25rem } @media(min-width:48em) { .load-to-card-section-header { flex-direction: row; justify-content: space-between; align-items: center; margin: 1rem 0 2rem } } @media(min-width:64em) { .load-to-card-section-header { margin-top: 0 } } .load-to-card-section-header__no-title { justify-content: flex-end } .load-to-card-section-header__heading { color: #000; margin: 0; flex-grow: 1 } .load-to-card-section-header .checkbox-group-new-ds__label { cursor: pointer } .loadToCard-header__wrapper { max-width: 920px; margin: 0 auto } .loadToCard-header__container { position: relative } .loadToCard-header__title { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-weight: 600; font-size: 2rem; line-height: 2.375rem; color: #ac342a; margin: 48px 0 24px; position: relative; z-index: 1; max-width: 250px } @media(min-width:48em) { .loadToCard-header__title { font-size: 2.625rem; line-height: 3rem } } @media(min-width:34.375em) { .loadToCard-header__title { max-width: 100% } } @media(min-width:64em) { .loadToCard-header__title { margin: 90px 0 32px } } .loadToCard-header__subtitle { max-width: 485px; font-weight: 400; margin: 0; position: relative; z-index: 1 } .loadToCard-header__subtitle sup { line-height: 1 } .load-to-card-tile__wrapper { border: 1px solid rgba(158, 147, 166, .2); box-sizing: border-box; box-shadow: 0 4px 4px rgba(158, 147, 166, .2); border-radius: 16px; background: #fff; transition: all .2s ease } .load-to-card-tile__offer-details-button { background: none; border: none; padding: 0; width: 100%; text-align: left; border-radius: 1rem 1rem 0 0 } .load-to-card-tile__wrapper:focus-within, .load-to-card-tile__wrapper:hover { box-shadow: 0 4px 5px rgba(158, 147, 166, .2), 0 3px 14px rgba(158, 147, 166, .12), 0 8px 10px rgba(158, 147, 166, .14); transform: scale(1.03) } .load-to-card-tile__container { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%; border-bottom: 1px solid rgba(158, 147, 166, .2); cursor: pointer } @media(min-width:48em) { .load-to-card-tile__container { height: 327px } } .load-to-card-tile__offer-details-section { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: 24px 0 0; overflow: hidden } .load-to-card-tile__offer-details-section .offer__text div { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1rem; line-height: 1.375rem; color: #403840; margin: 8px 0 0; font-weight: 600 } @media(min-width:48em) { .load-to-card-tile__offer-details-section .offer__text div { font-size: 1.125rem; line-height: 1.5rem } } .load-to-card-tile__hero-offer-layout { padding-top: 0; border-radius: 1rem 1rem 0 0 } .load-to-card-tile__text-heading { margin: 0; width: 100%; padding: 0 24px } .load-to-card-tile__reward-text { width: 100%; font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.375rem; line-height: 1.75rem; color: #ac342a; margin: 16px 0 0 } @media(min-width:48em) { .load-to-card-tile__reward-text { font-size: 1.5rem; line-height: 2rem } } .load-to-card-tile__offer-expiry-date { padding: 0 24px 16px; color: #655c6c; margin: 0 } @media(max-width:47.99em) { .load-to-card-tile__offer-expiry-date { margin-top: 1rem } } .load-to-card-tile__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; word-break: break-word } @media(min-width:48em) { .load-to-card-tile__title { -webkit-line-clamp: 4 } } .load-to-card-tile__exclusive { -webkit-line-clamp: 3 } @media(min-width:48em) { .load-to-card-tile__exclusive { -webkit-line-clamp: 2 } } .load-to-card-tile__checkbox-container { width: 100%; height: 62px; display: flex; justify-content: center; align-items: center } .load-to-card-tile__checkbox-container .checkbox-group-new-ds__label { color: #157a77; cursor: pointer } .load-to-card-tile__content-container { height: 134px } .load-to-card-tile__offer-image-container { max-height: 108px } .load-to-card-tile__offer-image-container .offer__image-element { max-height: 100% } .load-to-card-no-offers-left { max-width: 920px; margin: 0 auto } .load-to-card-no-offers-left__container { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 32px; margin-bottom: 60px; text-align: center; background: #f4f1f6; border-radius: 16px } .load-to-card-no-offers-left__img { width: 80px; height: 64px; margin-bottom: 24px } .load-to-card-no-offers-left__title { margin: 0 auto 8px } .load-to-card-no-offers-left__body { margin: 0 0 24px } .load-to-card-no-offers-left__link { font-size: 1rem; line-height: 1.125rem; font-weight: 600; color: #403840; font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; color: #fff } @media(min-width:48em) { .load-to-card-no-offers-left__link { line-height: 1.375rem } } .loadToCard-brand-banner { margin: 2.375rem auto; border-radius: 24px; box-shadow: 0 1px 5px rgba(158, 147, 166, .2), 0 3px 4px rgba(158, 147, 166, .12), 0 2px 4px rgba(158, 147, 166, .14); max-width: none; min-height: 0; justify-content: space-between; flex-direction: column-reverse } @media(min-width:48em) { .loadToCard-brand-banner { flex-direction: row } } @media(min-width:64em) { .loadToCard-brand-banner { margin: 3.75rem auto } } .loadToCard-brand-banner__section { max-width: 920px; margin: 0 auto } .loadToCard-brand-banner__tall .layoutCard__logo-container:nth-of-type(3), .loadToCard-brand-banner__tall .layoutCard__logo-container:nth-of-type(4) { margin-top: 1.25rem } @media(min-width:48em) { .loadToCard-brand-banner__tall .layoutCard__image-container img { height: 352px } } @media(min-width:64em) { .loadToCard-brand-banner__tall .layoutCard__image-container img { height: 425px } } .loadToCard-brand-banner .layoutCard__body { font-weight: 400; max-width: none } .loadToCard-brand-banner .layoutCard__text-container { padding: 2rem 1.5rem; width: 100%; flex-grow: 1 } @media(min-width:48em) { .loadToCard-brand-banner .layoutCard__text-container { padding: 2rem } } @media(min-width:64em) { .loadToCard-brand-banner .layoutCard__text-container { padding: 4rem } } .loadToCard-brand-banner .layoutCard__logo-list { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 2rem; width: 90%; max-width: 270px } @media(min-width:48em) { .loadToCard-brand-banner .layoutCard__logo-list { width: 80%; margin-top: 0 } } .loadToCard-brand-banner .layoutCard__logo-container { margin-top: 1rem; width: calc(50% - .5rem) } .loadToCard-brand-banner .layoutCard__logo-container img { max-width: 100% } .loadToCard-brand-banner .layoutCard__image-container { width: 100%; max-width: none } @media(min-width:48em) { .loadToCard-brand-banner .layoutCard__image-container { flex: 0 0 322px } } @media(min-width:64em) { .loadToCard-brand-banner .layoutCard__image-container { flex: 0 0 455px } } .loadToCard-brand-banner .layoutCard__image-container img { position: static } .load-to-card-tile-brand-banner { width: 100%; padding: 0 10px; margin-top: 16px } .load-to-card-tile-brand-banner__container { height: 30px; display: flex; flex: 1; justify-content: center; align-items: center; border-radius: 8px } .load-to-card-tile-brand-banner__banner-exclusive-text { margin-top: 2px; color: #fff } .load-to-card-tile-brand-banner__division-market { background-color: #000 } .load-to-card-tile-brand-banner__division-discount { background-color: #003da5 } .load-to-card-tile-brand-banner__division-shoppers { background-color: #c4262e } .load-to-card-tile-brand-banner__division-beauty_boutique { background-color: #8fcae7 } .load-to-card-tile-brand-banner__division-joe_fresh { background-color: #ff4713 } .load-to-card-tile-brand-banner__division-murale { background-color: #8977ba } .loadToCard-modal-brand-banner { margin-top: 13px } .loadToCard-modal-brand-banner__modal-container { max-width: 367px; margin: 0 auto } .loadToCard-modal-content { background: #fff; border-radius: 16px; max-width: 510px; width: 325px; max-height: 90vh; transform: translate(0); overflow: hidden; display: flex; flex-direction: column; padding-bottom: 133px } @media(max-width:47.99em) { .loadToCard-modal-content { height: auto } } @media(min-width:34.375em) { .loadToCard-modal-content { width: 510px; padding-bottom: 141px } } .loadToCard-modal-content .offer__image { width: 110px; aspect-ratio: 1; margin: 0 auto; padding: 1.5rem 0; display: block } @media(min-width:48em) { .loadToCard-modal-content .offer__image { width: 144px; padding: 3rem 0 } } .loadToCard-modal-content .offer__image--carousel { height: 200px; padding: 50px 0 0 } @media(min-width:48em) { .loadToCard-modal-content .offer__image--carousel { height: 280px } } .loadToCard-modal-content .offer__image--carousel img { width: auto; max-width: none; height: 150px } @media(min-width:48em) { .loadToCard-modal-content .offer__image--carousel img { height: 230px } } .loadToCard-modal-content__title-container { text-align: center; position: relative; padding-bottom: 1.5rem } .loadToCard-modal-content__title-container:after { content: ""; position: absolute; height: 1px; width: calc(100% + 48px); bottom: 0; left: -24px; background: rgba(158, 147, 166, .2) } .loadToCard-modal-content__title-container .offer__text { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1.25rem; line-height: 1.5rem; font-weight: 600; color: #403840 } @media(min-width:48em) { .loadToCard-modal-content__title-container .offer__text { font-size: 1.5rem; line-height: 2rem } } .loadToCard-modal-content__points-title { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-weight: 600; font-size: 1.375rem; line-height: 1.75rem; color: #ac342a; margin: .5rem 0 } @media(min-width:48em) { .loadToCard-modal-content__points-title { font-size: 2rem; line-height: 2.25rem } } .loadToCard-modal-content__product-title { margin: .5rem 0 0 } .loadToCard-modal-content__body-text { margin: 1.5rem 0 1rem } .loadToCard-modal-content__date-text { color: #655c6c; margin-bottom: 0 } @media(min-width:34.375em) { .loadToCard-modal-content__date-text { margin: 1.5rem 0 .75rem } } .loadToCard-modal-content__inner { padding: 0 1.5rem; height: auto; flex-grow: 1 } .loadToCard-modal-content__inner-hero .offer__reward { margin-top: 1.5rem } @media(max-width:47.99em) { .loadToCard-modal-content__inner-text { height: auto; overflow: visible } } .loadToCard-modal-content__inner-text .offer-details__long-text, .loadToCard-modal-content__inner-text .offer-details__terms { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.25rem; color: #403840; padding: 0 } @media(min-width:48em) { .loadToCard-modal-content__inner-text .offer-details__long-text, .loadToCard-modal-content__inner-text .offer-details__terms { font-size: 1rem; line-height: 1.375rem } } .loadToCard-modal-content__inner-text .offer-details__long-text strong, .loadToCard-modal-content__inner-text .offer-details__terms strong { font-family: Noir, Arial, Helvetica Neue, Helvetica, sans-serif; font-weight: 600; font-size: 1rem; line-height: 1.375rem } @media(min-width:48em) { .loadToCard-modal-content__inner-text .offer-details__long-text strong, .loadToCard-modal-content__inner-text .offer-details__terms strong { font-size: 1.125rem; line-height: 1.5rem } } .loadToCard-modal-content__inner-text .offer-details__long-text { margin-top: 1.5rem } .loadToCard-modal-content__inner-buttons { display: flex; flex-direction: column; position: fixed; bottom: 0; left: 0; right: 0; padding: 1rem 1.5rem 2rem; border: none } .loadToCard-modal-content__cta-button { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1rem; line-height: 1.125rem; color: #403840; font-weight: 600; color: #fff; background: #157a77; border-radius: 32px; border: none; padding: 12px; transition: all .3s ease } @media(min-width:48em) { .loadToCard-modal-content__cta-button { line-height: 1.375rem } } .loadToCard-modal-content__cta-button:active, .loadToCard-modal-content__cta-button:focus, .loadToCard-modal-content__cta-button:hover { background: #615395 } .loadToCard-modal-content__cta-button--secondary { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 1rem; line-height: 1.125rem; color: #403840; font-weight: 600; text-decoration: underline; align-self: center; color: #157a77; margin-top: 1.5rem; padding: 0 2rem; transition: all .3s ease } @media(min-width:48em) { .loadToCard-modal-content__cta-button--secondary { line-height: 1.375rem } } .loadToCard-modal-content__cta-button--secondary:active, .loadToCard-modal-content__cta-button--secondary:focus, .loadToCard-modal-content__cta-button--secondary:hover { color: #615395 } .loadToCard-modal__scroll .loadToCard-modal-content__inner { overflow-y: scroll; overscroll-behavior: none } .loadToCard-modal__scroll .loadToCard-modal-content__inner-buttons { border-top: 1px solid rgba(158, 147, 166, .2) } @media(max-width:34.365em) { .loadToCard-modal__scroll .loadToCard-modal-content__date-text { margin-bottom: 1rem } } .initial-offers-slider__slider-container__slide { display: flex } .initial-offers-slider__slider-container__slide-content__offer-button { display: inline-flex; justify-content: center; align-items: center; padding: 8px; box-sizing: border-box; background: #fff; border: 2px solid #157a77; transition: all .2s } .initial-offers-slider__slider-container__slide-content__offer-button:focus, .initial-offers-slider__slider-container__slide-content__offer-button:hover { background: #615395; border: 2px solid #615395; cursor: pointer } .initial-offers-slider__slider-container__slide-content__offer-button:active { background: #157a77; border: 2px solid #157a77; cursor: pointer } .initial-offers-slider__slider-container__slide-content__offer-button:active span, .initial-offers-slider__slider-container__slide-content__offer-button:focus span, .initial-offers-slider__slider-container__slide-content__offer-button:hover span { color: #fff } .initial-offers-slider__slider-container__slide-content__title { font-weight: 400; margin: 0 0 8px } @media(min-width:48em) { .initial-offers-slider__slider-container__slide-content__title { margin: 0 0 12px } } .initial-offers-slider__slider-container__slide-content__question { margin: 0 auto 22px } @media(min-width:48em) { .initial-offers-slider__slider-container__slide-content__question { max-width: 360px; margin: 0 auto 66px } } .initial-offers-slider__slider-container__slide-content--screen-1 { display: flex; position: relative; flex-direction: column; width: 100% } .initial-offers-slider__slider-container__slide-content--screen-1--optHolder { position: relative; width: 100%; margin-bottom: 29px } @media(min-width:48em) { .initial-offers-slider__slider-container__slide-content--screen-1--optHolder { margin-bottom: 55px } } .initial-offers-slider__slider-container__slide-content--screen-1--button { position: relative; overflow: auto; flex-direction: row; border-radius: 45px; margin-right: 5px; margin-bottom: 13px } @media(min-width:48em) { .initial-offers-slider__slider-container__slide-content--screen-1--button { margin-right: 18px; margin-bottom: 28px; padding: 8px 20px 8px 8px } } .initial-offers-slider__slider-container__slide-content--screen-1--button-imageHolder { position: relative; overflow: auto; display: flex; width: 30px; height: 30px; flex: none; border-radius: 50%; justify-content: center; align-items: center; margin: 0 5px 0 0 } @media(min-width:48em) { .initial-offers-slider__slider-container__slide-content--screen-1--button-imageHolder { width: 39px; height: 37px; margin: 0 17px 0 0 } } .initial-offers-slider__slider-container__slide-content--screen-1--button-imageHolder img { width: 100%; height: 100% } .initial-offers-slider__slider-container__slide-content--screen-1--button-textHolder { display: inline-flex; height: 100%; align-items: center; font-size: .9375rem; line-height: 1.3125rem; margin-top: 3px; word-break: break-word } @media(min-width:48em) { .initial-offers-slider__slider-container__slide-content--screen-1--button-textHolder { font-size: 1rem; line-height: 1.5rem } } .initial-offers-slider__slider-container__slide-content--screen-rest { display: flex; position: relative; flex-direction: column; width: 100% } .initial-offers-slider__slider-container__slide-content--screen-rest--optHolder { position: relative; width: 100%; display: flex; flex-flow: wrap; justify-content: center; align-items: center } .initial-offers-slider__slider-container__slide-content--screen-rest--button { position: relative; overflow: auto; flex-direction: column; border-radius: 50%; margin-bottom: 0 } .initial-offers-slider__slider-container__slide-content--screen-rest--button-imageHolder { position: relative; overflow: auto; display: flex; width: 90px; height: 70px; flex: none; justify-content: center; align-items: center; margin-bottom: 9px } @media(min-width:48em) { .initial-offers-slider__slider-container__slide-content--screen-rest--button-imageHolder { width: 118px; height: 92px; margin-bottom: 12px } } .initial-offers-slider__slider-container__slide-content--screen-rest--button-imageHolder img { width: auto; height: 70px } @media(min-width:48em) { .initial-offers-slider__slider-container__slide-content--screen-rest--button-imageHolder img { width: auto; height: 92px } } .initial-offers-slider__slider-container__slide-content--screen-rest--button-textHolder { font-size: .9375rem; line-height: 1.3125rem; width: 85%; word-break: break-word } @media(min-width:48em) { .initial-offers-slider__slider-container__slide-content--screen-rest--button-textHolder { font-size: 1rem; line-height: 1.5rem } } .initial-offers-slider__slider-container__slide-content--screen-rest--button:first-child, .initial-offers-slider__slider-container__slide-content--screen-rest--button:nth-child(4) { height: 148px; width: 148px; margin-right: 15px; margin-left: 15px } @media(min-width:48em) { .initial-offers-slider__slider-container__slide-content--screen-rest--button:first-child, .initial-offers-slider__slider-container__slide-content--screen-rest--button:nth-child(4) { height: 195px; width: 195px; margin-right: 39px; margin-left: 39px; margin-bottom: 0 } } .initial-offers-slider__slider-container__slide-content--screen-rest--button:nth-child(2), .initial-offers-slider__slider-container__slide-content--screen-rest--button:nth-child(3) { height: 100px; width: 100px } .initial-offers-slider__slider-container__slide-content--screen-rest--button:nth-child(2) span:first-child, .initial-offers-slider__slider-container__slide-content--screen-rest--button:nth-child(3) span:first-child { display: none } @media(min-width:48em) { .initial-offers-slider__slider-container__slide-content--screen-rest--button:nth-child(2), .initial-offers-slider__slider-container__slide-content--screen-rest--button:nth-child(3) { height: 131px; width: 131px; margin-bottom: 0 } } .initial-offers-slider__slider-container__slide-content--skipButton { color: #157a77; border: 0; background: none; text-decoration: underline; align-self: center } .initial-offers-slider__slider-container__slide-content--skipButton:hover { color: #615395; cursor: pointer } @keyframes slidein { 0% { margin-left: 100%; width: 100% } to { margin-left: 0; width: 100% } } .initial-offers-wrapper { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; overflow: hidden } .initial-offers-wrapper .frame { border: none; width: 100%; overflow: hidden } .initial-offers-wrapper .box-container { display: flex; transition: all .2s ease-in-out } .initial-offers-wrapper .box { box-sizing: border-box; border: none; width: 100%; height: 100%; flex-shrink: 0; display: none; justify-content: center; align-items: center } .initial-offers-wrapper .show { animation-duration: 1s; animation-name: slidein } .initial-offers-wrapper .active { background: #999 } .block-tile { max-width: 688px; margin: 18px auto 75px; border-radius: 8px; box-shadow: 0 1px 5px rgba(158, 147, 166, .2), 0 3px 4px rgba(158, 147, 166, .12), 0 2px 4px rgba(158, 147, 166, .14); background-color: #fff; color: #6b6272 } @media(min-width:64em) { .block-tile { max-width: 780px } } .your-pco .block-tile { max-width: none } .line-of-business { display: flex; align-items: center; min-height: 24px; max-height: 32px; padding-bottom: 8px } .line-of-business__logo { display: flex; width: 24px; height: 24px; border-radius: 50%; margin-right: 4px } .scroll-slider-lifestyle-canvas-list__item-tile .block-tile { margin: 0; min-width: 375px } .scroll-slider-lifestyle-canvas-list__item-tile .ad-impression-view { height: 100%; display: flex; flex-direction: column; justify-content: flex-end } .lifestyle-canvas-block-tile { width: 100%; max-width: 780px; display: flex; height: 100% } .lifestyle-canvas-block-tile__content { width: 50%; min-height: 100px; display: flex; flex-direction: column; justify-content: center; position: relative; padding: 0 16px 0 24px } .lifestyle-canvas-block-tile__logo { display: flex; max-height: 73px; margin: 0 0 24px } .lifestyle-canvas-block-tile__copy, .lifestyle-canvas-block-tile__logo-image.feature-logo, .lifestyle-canvas-block-tile__title { margin: 0 } .lifestyle-canvas-block-tile__sub-copy { margin-bottom: 0 } .lifestyle-canvas-block-tile__main-image { border-radius: 0 8px 8px 0 } .lifestyle-canvas-block-tile__cta { width: -moz-fit-content; width: fit-content; position: relative; left: auto; bottom: auto } .lifestyle-canvas-block-tile__cta .donate-banner__fake-cta, .lifestyle-canvas-block-tile__cta .new-window-link, .lifestyle-canvas-block-tile__cta .tile-item__fake-cta, .lifestyle-canvas-block-tile__cta .video-tile__fake-cta { text-align: left; padding: 0; margin-top: 16px } .lifestyle-canvas-block-tile__footer { position: relative } .lifestyle-canvas-block-tile__footer-copy { position: absolute; left: 0; top: 0 } .lifestyle-canvas-block-tile .image-set { width: 50%; display: flex } .grid-view__container { position: relative; width: 100%; max-width: 285px } .grid-view__lifestyle-canvas-marketing, .grid-view__lifestyle-canvas-products { display: grid; color: #403840; margin: 0; padding: 0 } .grid-view__lifestyle-canvas-marketing li, .grid-view__lifestyle-canvas-products li { list-style-type: none } .grid-view__lifestyle-canvas-products { overflow: hidden; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-gap: 1px; width: 100%; height: 100%; border-radius: 8px } .grid-view__lifestyle-canvas-marketing { grid-gap: 16px; height: 100%; grid-template-rows: 1fr 1fr } .grid-view__lifestyle-canvas-marketing .grid-marketing-tile { height: 100% } .grid-view__separator { position: absolute; top: 0; left: 0; background-color: #9e93a6; opacity: .32; height: 100%; width: 100%; z-index: -1; border-radius: 8px } .grid-product-tile { padding: 16px; height: 100%; min-width: 144px; text-align: center; display: grid; align-content: space-evenly } .grid-product-tile__image { width: 80px; height: 80px; margin: 0 auto 8px } .grid-product-tile a[type=TEXT] { padding: 0; text-decoration: none } .grid-marketing-tile__container { display: flex; width: 100%; height: calc(100% - 32px); min-height: 136px; align-items: center; justify-content: space-between; border-radius: 8px } .grid-marketing-tile__content { padding: 16px 16px 16px 24px; width: 225px } .cancel-subscription__modal-content .pcoi-error-tile .grid-marketing-tile__content p:first-of-type, .enrol-flow .grid-marketing-tile__content .flow-progress-bar__title, .grid-marketing-tile__content .activation-card-display__points-label, .grid-marketing-tile__content .billing-history__date, .grid-marketing-tile__content .cancel-subscription__modal-content .pcoi-error-tile p:first-of-type, .grid-marketing-tile__content .category-btn, .grid-marketing-tile__content .deals-for-you-tile__item, .grid-marketing-tile__content .enrol-flow .flow-progress-bar__title, .grid-marketing-tile__content .esso-redemption-earning-card__subtitle, .grid-marketing-tile__content .esso-redemption-pcf__money-subtitle, .grid-marketing-tile__content .esso-redemption-redeem-cards__text, .grid-marketing-tile__content .expandable-form-wrapper__title, .grid-marketing-tile__content .initial-offers-slider__slider-container__slide-content--screen-1--button-imageHolder, .grid-marketing-tile__content .initial-offers-slider__slider-container__slide-content--screen-1--button-textHolder, .grid-marketing-tile__content .initial-offers-slider__slider-container__slide-content--screen-rest--button-imageHolder, .grid-marketing-tile__content .initial-offers-slider__slider-container__slide-content--screen-rest--button-textHolder, .grid-marketing-tile__content .initial-offers-slider__slider-container__slide-content__question, .grid-marketing-tile__content .no-subscription-plan__content h3, .grid-marketing-tile__content .offer-content-group-carousel--faded.offer-content-group-carousel--modal .offer__reward--earned, .grid-marketing-tile__content .offer-content-group-carousel .offer__text, .grid-marketing-tile__content .offer__text--carousel, .grid-marketing-tile__content .quest-offer-child-offer .continuity-offer__content-group .offer__reward, .grid-marketing-tile__content .quest-offer-child-offer .hero-continuity-offer__content-group .offer__reward, .grid-marketing-tile__content .quest-offer-child-offer .hero-product-offer__content-group .offer__reward, .grid-marketing-tile__content .quest-offer-child-offer.offer--faded .offer__reward--earned, .grid-marketing-tile__content .quest-offer-child-offer .product-offer__content-group .offer__reward, .grid-marketing-tile__content .subscription-plan__content h3, .grid-marketing-tile__content .type-ds-headline, .no-subscription-plan__content .grid-marketing-tile__content h3, .offer-content-group-carousel--faded.offer-content-group-carousel--modal .grid-marketing-tile__content .offer__reward--earned, .offer-content-group-carousel .grid-marketing-tile__content .offer__text, .quest-offer-child-offer .continuity-offer__content-group .grid-marketing-tile__content .offer__reward, .quest-offer-child-offer .hero-continuity-offer__content-group .grid-marketing-tile__content .offer__reward, .quest-offer-child-offer .hero-product-offer__content-group .grid-marketing-tile__content .offer__reward, .quest-offer-child-offer.offer--faded .grid-marketing-tile__content .offer__reward--earned, .quest-offer-child-offer .product-offer__content-group .grid-marketing-tile__content .offer__reward, .subscription-plan__content .grid-marketing-tile__content h3 { margin: 0 } .grid-marketing-tile__content a { margin: 4px 0 0 } .grid-marketing-tile__content a[type=TEXT] { padding: 0; text-align: left } .grid-marketing-tile__image { width: 120px; height: 100%; overflow: hidden; border-radius: 0 8px 8px 0 } .grid-marketing-tile__image .image-set__image { width: 100% } .partnership-tile { max-width: 688px; margin: 0 auto 20px } @media(min-width:64em) { .partnership-tile { max-width: 780px } } .partnership-tile__inner { background-color: #fff; display: flex; text-decoration: inherit; position: relative; border-radius: 8px; border: 1px solid #efeef1; box-shadow: 0 1px 5px rgba(158, 147, 166, .2), 0 3px 4px rgba(158, 147, 166, .12), 0 2px 4px rgba(158, 147, 166, .14) } .partnership-tile__clickable { border-radius: 8px; display: flex; width: 100%; transition: box-shadow .3s ease-in-out } .partnership-tile__clickable:focus, .partnership-tile__clickable:focus-within, .partnership-tile__clickable:hover { box-shadow: 0 8px 10px rgba(158, 147, 166, .3), 0 6px 30px rgba(158, 147, 166, .12), 0 16px 24px rgba(158, 147, 166, .14); cursor: pointer } .partnership-tile__clickable:focus { outline: none } .partnership-tile__footnote { color: #655c6c; margin: 16px 0 0 } .partnership-tile__modal-content { max-width: 328px; position: relative; border-radius: 16px; background-color: #fff; margin: 0 20px; overflow: hidden } @media(min-width:48em) { .partnership-tile__modal-content { max-width: 508px } } .partnership-tile__modal-content .pco-modal-content__close { top: 10px; right: 5px } @media(min-width:48em) { .partnership-tile__modal-content .pco-modal-content__close { right: 10px } } .partnership-tile__modal-content .pco-modal-content__close svg { fill: #191919; stroke: #191919 } .partnership-tile__modal-back-button { position: absolute; top: 10px; left: 5px; border-radius: 100%; background: #fff; padding: 8px; border: 2px solid #fff } @media(min-width:48em) { .partnership-tile__modal-back-button { left: 12px } } .partnership-tile__modal-back-button svg { width: 14px; height: auto; fill: #191919; stroke: #191919; stroke-width: 0 } .partnership-tile__modal-back-button:focus, .partnership-tile__modal-back-button:focus-within, .partnership-tile__modal-back-button:hover { outline: none; padding: 8px; border: 2px solid #615395 } .partnership-tile__modal-back-button:focus-within svg, .partnership-tile__modal-back-button:focus svg, .partnership-tile__modal-back-button:hover svg { fill: #615395; stroke: #615395 } .partnership-tile__modal-back-button:active { background: #403840; border: 2px solid #403840 } .partnership-tile__modal-back-button:active svg { fill: #fff; stroke: #fff } .partnership-tile-content { display: flex; justify-content: space-between; align-items: flex-start; width: 100% } .partnership-tile-content__content { display: flex; flex-direction: column; text-align: left; margin: 16px 8px 16px 16px; width: 70%; max-width: 70% } @media(min-width:34.375em) { .partnership-tile-content__content { margin: 24px 12px 24px 24px } } @media(min-width:48em) { .partnership-tile-content__content { width: 60%; max-width: 60% } } @media(min-width:64em) { .partnership-tile-content__content { width: 50%; max-width: 50% } } .partnership-tile-content__content--inner { flex: 1; display: flex; flex-direction: column; justify-content: space-between } .partnership-tile-content__title { color: #403840; display: block; margin: 0 } .partnership-tile-content__description { color: #655c6c; margin-bottom: 8px } @media(min-width:48em) { .partnership-tile-content__description { display: block; margin-bottom: 24px } } .partnership-tile-content__cta { text-align: left; width: -moz-max-content; width: max-content } .partnership-tile-content__cta:focus { color: #615395 } .partnership-tile-content__img-container { display: flex; justify-content: flex-end; margin: 16px 16px 16px 8px; width: 30%; max-width: 30% } @media(min-width:34.375em) { .partnership-tile-content__img-container { margin: 24px 24px 24px 12px } } @media(min-width:48em) { .partnership-tile-content__img-container { width: 40%; max-width: 40% } } @media(min-width:64em) { .partnership-tile-content__img-container { width: 50%; max-width: 50% } } .partnership-tile-content__img { display: flex; justify-content: flex-end } .partnership-tile-content__img__content { border-radius: 0 8px 8px 0; -o-object-fit: contain; object-fit: contain; display: block; max-height: 236px; width: 100% } .partnership-perk { background-color: #fff; box-shadow: 0 4px 12px rgba(158, 147, 166, .24), 0 4px 6px rgba(158, 147, 166, .24); box-sizing: border-box; border-radius: 8px; display: flex; flex-direction: column; transition: .3s ease; width: 252px } .partnership-perk__clickable { cursor: pointer; display: flex; height: 100%; text-align: left; border-radius: 8px; transition: box-shadow .3s ease-in-out } .partnership-perk__clickable:focus, .partnership-perk__clickable:focus-within, .partnership-perk__clickable:hover { box-shadow: 0 2px 18px rgba(158, 147, 166, .24), 0 10px 12px rgba(158, 147, 166, .24) } .partnership-perk-content { display: flex; flex-direction: column; height: 100% } .partnership-perk-content__hero-image-container { display: flex; align-items: center; justify-content: center; height: 140px; width: 100% } .partnership-perk-content__hero-image { border-radius: 8px 8px 0 0; height: 100%; width: auto } .partnership-perk-content__body { height: 100%; display: flex; flex-direction: column; align-items: flex-start; padding: 16px 16px 24px } .partnership-perk-content__pill-text { background-color: #fdefd2; border-radius: 25px; color: #000; margin-bottom: 8px; padding: 4px 10px; width: -moz-fit-content; width: fit-content } .partnership-perk-content__title { color: #403840; margin-bottom: 12px } .partnership-perk-content__description { color: #655c6c; margin-bottom: 18px } .partnership-perk-content__cta { margin-top: auto } .partnership-perk-content__cta:focus { color: #615395 } .redeemable-perk-content__title { color: #ac342a } .redeemable-perk-content__description { color: #403840; margin: 12px 0 } .redeemable-perk-content__pill-text { background-color: #f9dada; border-radius: 25px; color: #403840; padding: 2px 8px; margin-bottom: 16px; width: -moz-fit-content; width: fit-content } .account-setting--security .redeemable-perk-content__cta.account-setting__turn-off-button, .account-setting--security .redeemable-perk-content__cta.account-setting__turn-on-button, .points-days-cta-section__content .redeemable-perk-content__cta.cta-section__link, .redeemable-perk-content__cta.button, .redeemable-perk-content__cta.household-grid__invite-button, .redeemable-perk-content__cta.link--theme-button, .redeemable-perk-content__cta.link--theme-button--large-primary, .redeemable-perk-content__cta.link--theme-button--large-secondary, .redeemable-perk-content__cta.link--theme-button--small-primary, .redeemable-perk-content__cta.link--theme-button--small-secondary, .redeemable-perk-content__cta.link--theme-button-gray, .redeemable-perk-content__cta.link--theme-button-red, .redeemable-perk-content__cta.link--theme-button-transparent, .redeemable-perk-content__cta.link--theme-button-transparent-white, .redeemable-perk-content__cta.link--theme-button-white, .redeemable-perk-content__cta.load-shop-pay-header__link, .redeemable-perk-content__cta.load-shop-pay-module__link, .redeemable-perk-content__cta.marketing-page-header__link, .redeemable-perk-content__cta.marketing-page-module__link, .redeemable-perk-content__cta.partnership-perk-details__cta, .redeemable-perk-content__cta.partnership-perk-redeemed-success__cta, .redeemable-perk-content__cta.points-days__cta { color: #157a77; margin-top: auto } .account-setting--security .redeemable-perk-content__cta.account-setting__turn-off-button:active, .account-setting--security .redeemable-perk-content__cta.account-setting__turn-off-button:focus, .account-setting--security .redeemable-perk-content__cta.account-setting__turn-off-button:hover, .account-setting--security .redeemable-perk-content__cta.account-setting__turn-on-button:active, .account-setting--security .redeemable-perk-content__cta.account-setting__turn-on-button:focus, .account-setting--security .redeemable-perk-content__cta.account-setting__turn-on-button:hover, .points-days-cta-section__content .redeemable-perk-content__cta.cta-section__link:active, .points-days-cta-section__content .redeemable-perk-content__cta.cta-section__link:focus, .points-days-cta-section__content .redeemable-perk-content__cta.cta-section__link:hover, .redeemable-perk-content__cta.button:active, .redeemable-perk-content__cta.button:focus, .redeemable-perk-content__cta.button:hover, .redeemable-perk-content__cta.household-grid__invite-button:active, .redeemable-perk-content__cta.household-grid__invite-button:focus, .redeemable-perk-content__cta.household-grid__invite-button:hover, .redeemable-perk-content__cta.link--theme-button--large-primary:active, .redeemable-perk-content__cta.link--theme-button--large-primary:focus, .redeemable-perk-content__cta.link--theme-button--large-primary:hover, .redeemable-perk-content__cta.link--theme-button--large-secondary:active, .redeemable-perk-content__cta.link--theme-button--large-secondary:focus, .redeemable-perk-content__cta.link--theme-button--large-secondary:hover, .redeemable-perk-content__cta.link--theme-button--small-primary:active, .redeemable-perk-content__cta.link--theme-button--small-primary:focus, .redeemable-perk-content__cta.link--theme-button--small-primary:hover, .redeemable-perk-content__cta.link--theme-button--small-secondary:active, .redeemable-perk-content__cta.link--theme-button--small-secondary:focus, .redeemable-perk-content__cta.link--theme-button--small-secondary:hover, .redeemable-perk-content__cta.link--theme-button-gray:active, .redeemable-perk-content__cta.link--theme-button-gray:focus, .redeemable-perk-content__cta.link--theme-button-gray:hover, .redeemable-perk-content__cta.link--theme-button-red:active, .redeemable-perk-content__cta.link--theme-button-red:focus, .redeemable-perk-content__cta.link--theme-button-red:hover, .redeemable-perk-content__cta.link--theme-button-transparent-white:active, .redeemable-perk-content__cta.link--theme-button-transparent-white:focus, .redeemable-perk-content__cta.link--theme-button-transparent-white:hover, .redeemable-perk-content__cta.link--theme-button-transparent:active, .redeemable-perk-content__cta.link--theme-button-transparent:focus, .redeemable-perk-content__cta.link--theme-button-transparent:hover, .redeemable-perk-content__cta.link--theme-button-white:active, .redeemable-perk-content__cta.link--theme-button-white:focus, .redeemable-perk-content__cta.link--theme-button-white:hover, .redeemable-perk-content__cta.link--theme-button:active, .redeemable-perk-content__cta.link--theme-button:focus, .redeemable-perk-content__cta.link--theme-button:hover, .redeemable-perk-content__cta.load-shop-pay-header__link:active, .redeemable-perk-content__cta.load-shop-pay-header__link:focus, .redeemable-perk-content__cta.load-shop-pay-header__link:hover, .redeemable-perk-content__cta.load-shop-pay-module__link:active, .redeemable-perk-content__cta.load-shop-pay-module__link:focus, .redeemable-perk-content__cta.load-shop-pay-module__link:hover, .redeemable-perk-content__cta.marketing-page-header__link:active, .redeemable-perk-content__cta.marketing-page-header__link:focus, .redeemable-perk-content__cta.marketing-page-header__link:hover, .redeemable-perk-content__cta.marketing-page-module__link:active, .redeemable-perk-content__cta.marketing-page-module__link:focus, .redeemable-perk-content__cta.marketing-page-module__link:hover, .redeemable-perk-content__cta.partnership-perk-details__cta:active, .redeemable-perk-content__cta.partnership-perk-details__cta:focus, .redeemable-perk-content__cta.partnership-perk-details__cta:hover, .redeemable-perk-content__cta.partnership-perk-redeemed-success__cta:active, .redeemable-perk-content__cta.partnership-perk-redeemed-success__cta:focus, .redeemable-perk-content__cta.partnership-perk-redeemed-success__cta:hover, .redeemable-perk-content__cta.points-days__cta:active, .redeemable-perk-content__cta.points-days__cta:focus, .redeemable-perk-content__cta.points-days__cta:hover { color: #615395 } .partnership-perks-list { display: flex; flex-direction: column; height: 80vh; width: 328px } @media(min-width:48em) { .partnership-perks-list { width: 508px } } .partnership-perks-list__screen-title { text-align: center; margin: 16px 0 32px } .partnership-perks-list__container { overflow-x: hidden; overflow-y: auto; padding: 2px 16px 16px } @media(min-width:48em) { .partnership-perks-list__container { padding: 2px 24px 24px } } .partnership-perks-list__ad-view-wrapper { margin: 0 0 8px; width: 296px } @media(min-width:48em) { .partnership-perks-list__ad-view-wrapper { width: 460px } } .partnership-perks-list__ad-view-wrapper:last-child { margin-bottom: 0 } .partnership-perks-list .partnership-perk { width: 296px } @media(min-width:48em) { .partnership-perks-list .partnership-perk { width: 460px } } .partnership-perks-list .partnership-perk-content { display: flex; flex-direction: row; align-items: center; padding: 15px } @media(min-width:48em) { .partnership-perks-list .partnership-perk-content { padding: 20px; padding: 20px 24px } } .partnership-perks-list .partnership-perk-content__icon { align-self: flex-start; width: 79px; height: 79px } @media(min-width:48em) { .partnership-perks-list .partnership-perk-content__icon { align-self: center; width: 109px; height: 109px } } .partnership-perks-list .partnership-perk-content__body { padding: 0; margin-left: 24px } @media(min-width:48em) { .partnership-perks-list .partnership-perk-content__body { margin-left: 30px } } .partnership-perks-list .partnership-perk-content__title { margin-bottom: 8px } .partnership-perks-list .partnership-perk-content__description { margin-bottom: 0 } .partnership-perks-list .partnership-perk-content__cta { margin-top: 8px } .partnership-perk-details { display: flex; flex-direction: column; padding-top: 16px; max-height: 80vh } .partnership-perk-details__screen-title { text-align: center; margin: 0 0 24px } @media(min-width:48em) { .partnership-perk-details__screen-title { margin: 0 0 32px } } .partnership-perk-details__header { display: flex; align-items: center; padding: 0 16px 24px; border-bottom: 1px solid rgba(158, 147, 166, .4) } @media(min-width:48em) { .partnership-perk-details__header { padding: 0 24px 24px } } .partnership-perk-details__icon-container { height: 64px; margin-right: 16px } .partnership-perk-details__icon { width: auto; height: 100% } .partnership-perk-details__header-text { display: flex; flex-direction: column } .partnership-perk-details__title { margin: 0 } .partnership-perk-details__description { margin: 4px 0 0; color: #191919 } .partnership-perk-details__details-container { overflow-y: auto } .partnership-perk-details__redemption-details { padding: 0 16px } .partnership-perk-details__details { padding: 0 16px; color: #403840 } @media(min-width:48em) { .partnership-perk-details__details { padding: 0 24px } } .partnership-perk-details__button-container { border-top: 1px solid rgba(158, 147, 166, .4); position: relative; bottom: 0; left: 0; padding: 16px; width: 100% } @media(min-width:48em) { .partnership-perk-details__button-container { padding: 16px 24px } } .partnership-perk-details__button { width: 100% } .partnership-perk-details__button:disabled:active, .partnership-perk-details__button:disabled:focus, .partnership-perk-details__button:disabled:hover { border-color: #9e93a6; background: #9e93a6; color: #fff } .partnership-perk-details__cta-container { border-top: 1px solid rgba(158, 147, 166, .4); text-align: center; padding: 16px; width: 100%; position: relative; bottom: 0 } @media(min-width:48em) { .partnership-perk-details__cta-container { padding: 16px 24px } } .partnership-perk-details__cta-container p { color: #655c6c; margin-top: 0; margin-bottom: 12px } @media(min-width:48em) { .partnership-perk-details__cta-container p { margin-bottom: 16px } } .partnership-perk-details__cta { text-decoration: none; width: 100% } .partnership-perk-details__cta:focus, .partnership-perk-details__cta:hover { border-color: #615395; background: #615395; color: #fff } .partnership-perk-details__cta:active { border-color: #403840; background: #403840; color: #fff } .partnership-perk-details__cta:disabled { cursor: not-allowed; background: #9e93a6; border-color: #9e93a6; color: #fff } .redemption-perk-details { background-color: #fdf0f0; border-radius: 16px; margin: 24px 0; padding: 16px 24px } .redemption-perk-details__province-container { display: flex; flex-direction: column } .redemption-perk-details__province-title { color: #191919 } .redemption-perk-details__input-horizontal { margin-top: 0; margin-bottom: 16px } .redemption-perk-details .dropdown-group__label { display: block; padding-bottom: 4px } .redemption-perk-details .dropdown-group__label span { color: #655c6c; letter-spacing: normal } .redemption-perk-details .text-group__input-icon { fill: #655c6c; width: 16px; height: 16px } .redemption-perk-details .dropdown-group__dropdown { border-radius: 4px; border: 1px solid #655c6c; background-color: #fff; margin-right: 0 } .redemption-perk-details .dropdown-group__dropdown:invalid { color: #655c6c } .redemption-perk-details .dropdown-group__item { -moz-text-align-last: start; text-align-last: start } .redemption-perk-subscription-cost { display: flex; flex-direction: column; border-top: 1px solid #c4c4c4; border-bottom: 1px solid #c4c4c4; padding: 16px 0; margin: 0 } .redemption-perk-subscription-cost__perk-cost, .redemption-perk-subscription-cost__tax, .redemption-perk-subscription-cost__total { display: flex; justify-content: space-between; margin: 0 } .redemption-perk-subscription-cost__perk-cost-title, .redemption-perk-subscription-cost__perk-cost-value, .redemption-perk-subscription-cost__provincial-tax-title, .redemption-perk-subscription-cost__provincial-tax-value { color: #655c6c } .redemption-perk-subscription-cost__perk-cost-title, .redemption-perk-subscription-cost__provincial-tax-title, .redemption-perk-subscription-cost__total-title { padding-right: 16px } .redemption-perk-subscription-cost__tax { padding: 8px 0 } .redemption-perk-subscription-cost__total-title, .redemption-perk-subscription-cost__total-value { color: #403840; font-weight: 700 } .redemption-perk-subscription-cost dd { margin: 0 } .redemption-perk-points { display: flex; flex-direction: column; padding-top: 16px } .redemption-perk-points__your-points--error .redemption-perk-points__your-points-title, .redemption-perk-points__your-points--error .redemption-perk-points__your-points-value { color: #970012 } .redemption-perk-points__required-points, .redemption-perk-points__your-points { display: flex; justify-content: space-between } .redemption-perk-points__your-points-title, .redemption-perk-points__your-points-value { color: #403840 } .redemption-perk-points__required-points-title, .redemption-perk-points__your-points-title { padding-right: 16px } .redemption-perk-points__required-points-title, .redemption-perk-points__required-points-value { color: #403840; font-weight: 700 } .redemption-perk-points__error { padding-top: 4px } .redemption-perk-points__error-message { color: #970012 } .redemption-perk-points__required-points { padding-top: 8px } .partnership-perk-redeemed-success { display: flex; flex-direction: column; justify-content: center; max-height: 80vh; text-align: center } .partnership-perk-redeemed-success__container { overflow-y: auto } .partnership-perk-redeemed-success__header-container { padding: 16px 0 0; background-size: cover; background-position: 50% } @media(min-width:48em) { .partnership-perk-redeemed-success__header-container { background-size: cover } } .partnership-perk-redeemed-success__screen-title { margin: 0 0 16px } @media(min-width:48em) { .partnership-perk-redeemed-success__screen-title { margin: 0 0 24px } } .partnership-perk-redeemed-success__icon-container { height: 112px } .partnership-perk-redeemed-success__icon { width: auto; height: 100% } .partnership-perk-redeemed-success__body-container { padding: 0 16px } .partnership-perk-redeemed-success__title { margin: 0 } .partnership-perk-redeemed-success__description { margin: 4px 0 0 } .partnership-perk-redeemed-success__footer-description { margin: 24px 0 } .partnership-perk-redeemed-success__cta-container { border-top: 1px solid rgba(158, 147, 166, .4); padding: 16px; width: 100%; position: relative; bottom: 0 } @media(min-width:48em) { .partnership-perk-redeemed-success__cta-container { padding: 16px 24px } } .partnership-perk-redeemed-success__cta { text-decoration: none; width: 100% } .partnership-perk-redeemed-success__cta:focus, .partnership-perk-redeemed-success__cta:hover { border-color: #615395; background: #615395; color: #fff } .partnership-perk-redeemed-success__cta:active { border-color: #403840; background: #403840; color: #fff } .partnership-perk-redeemed-success__cta:disabled { cursor: not-allowed; background: #9e93a6; border-color: #9e93a6; color: #fff } .partnership-perk-confirm-dialog { display: flex; flex-direction: column; justify-content: center; text-align: left; max-width: 328px; overflow-y: auto } @media(min-width:48em) { .partnership-perk-confirm-dialog { max-width: 384px } } .partnership-perk-confirm-dialog__image-container { height: 144px; display: flex; box-sizing: border-box; margin: 24px 24px 0 } .partnership-perk-confirm-dialog__image { width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain } .partnership-perk-confirm-dialog__content-container { margin: 24px 24px 8px } @media(min-width:48em) { .partnership-perk-confirm-dialog__content-container { margin: 32px 24px 8px } } .partnership-perk-confirm-dialog__title { margin: 0 } .partnership-perk-confirm-dialog__description { margin: 12px 0 32px } @media(min-width:48em) { .partnership-perk-confirm-dialog__description { margin: 16px 0 32px } } .partnership-perk-confirm-dialog__cancel-button, .partnership-perk-confirm-dialog__continue-button { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; width: 100% } .partnership-perk-confirm-dialog__cancel-button { padding-top: 18px; padding-bottom: 8px } .partnership-perk-redeemed-success-details { background-color: #fdf0f0; border-radius: 16px; margin: 24px 0 0; padding: 16px; width: 100% } @media(min-width:48em) { .partnership-perk-redeemed-success-details { padding: 16px 24px } } .partnership-perk-redeemed-success-details__redemption-info { border-top: 1px solid rgba(158, 147, 166, .4); display: flex; flex-direction: column; margin: 0; padding-top: 16px } .partnership-perk-redeemed-success-details__redemption-info-item { display: flex; justify-content: space-between } .partnership-perk-redeemed-success-details__redemption-info-item:nth-child(2) { padding: 8px 0 } .partnership-perk-redeemed-success-details__redemption-info-key { text-align: left } .partnership-perk-redeemed-success-details__redemption-info-key--bold { font-weight: 700 } .partnership-perk-redeemed-success-details__redemption-info-value { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; text-align: right } .partnership-perk-redeemed-success-details__redemption-info-value--bold { font-weight: 700 } .partnership-perk-redeemed-success-details__copy-code-cta { display: flex; font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; font-weight: 700; text-decoration: none } .partnership-perk-redeemed-success-details__copy-code-cta:focus, .partnership-perk-redeemed-success-details__copy-code-cta:focus-within, .partnership-perk-redeemed-success-details__copy-code-cta:hover { color: #615395 } .partnership-perk-redeemed-success-details__copy-code-cta:focus-within svg, .partnership-perk-redeemed-success-details__copy-code-cta:focus svg, .partnership-perk-redeemed-success-details__copy-code-cta:hover svg { stroke: #615395 } .partnership-perk-redeemed-success-details__copy-code-icon { width: 15px; height: 17px; margin: 2px 0 0 8px } .partnership-perk-redeemed-success-details .redemption-perk-subscription-cost { border: 0; padding-top: 0 } .marketing-campaign-hero { width: 100%; display: flex; flex-direction: column; justify-content: center } .marketing-campaign-hero__content { width: 100%; min-height: 100px; display: flex; flex-direction: column; padding: 16px 16px 8px; position: relative } @media(min-width:48em) { .marketing-campaign-hero__content { padding: 30px; max-width: 50% } } .marketing-campaign-hero__logo { display: flex; max-height: 73px; margin: 0 0 24px } .marketing-campaign-hero__logo-image.feature-logo { margin: 0 } .marketing-campaign-hero__title { margin: 0 0 16px } .marketing-campaign-hero__copy { margin: 0 } .marketing-campaign-hero__sub-copy { margin: 12px 0 32px } @media(min-width:48em) { .marketing-campaign-hero__sub-copy { margin-bottom: 0 } } .marketing-campaign-hero--margin { margin-bottom: 44px } @media(min-width:48em) { .marketing-campaign-hero--margin { margin-bottom: 32px } } .marketing-campaign-hero__main-image { border-radius: 0 0 8px 8px } .marketing-campaign-hero__button { width: calc(100% - 32px); position: absolute; bottom: -25px; left: 16px } .marketing-campaign-hero__footer { position: relative } .marketing-campaign-hero__footer-copy { position: absolute; left: 0; top: 0 } @media(min-width:48em) { .marketing-campaign-hero { flex-direction: row } .marketing-campaign-hero__content { justify-content: center } .marketing-campaign-hero__button { width: -moz-fit-content; width: fit-content; position: relative; left: auto; bottom: auto } .marketing-campaign-hero .image-set { width: 50% } .marketing-campaign-hero__main-image { border-radius: 0 8px 8px 0; width: 100% } } @media(min-width:64em) { .marketing-campaign-hero { width: 100%; max-width: 780px } } .block-tile-marketing_campaign_hero { margin-bottom: 50px } @media(min-width:64em) { .your-pco-section .marketing-campaign-hero { width: 100%; max-width: 100% } } .slider-header { display: flex; position: relative; width: 100%; justify-content: center; max-width: 688px; margin: 0 auto } @media(min-width:64em) { .slider-header { max-width: 780px } } .slider-header__text { display: flex; width: 100%; justify-content: flex-start; z-index: 3 } .slider-header__text--heading { margin: 0 } .marketing-campaign-carousel__container { margin: 0 auto } @media(min-width:48em) { .marketing-campaign-carousel__container { max-width: 688px } } @media(min-width:64em) { .marketing-campaign-carousel__container { max-width: 780px } } .marketing-campaign-carousel__container .your-pco-error__full { margin-top: 8px } @media(min-width:48em) { .marketing-campaign-carousel__container .your-pco-error__full { margin-top: 16px } } .scroll-slider-marketing-campaign .slider-holder-div { display: block; width: 100% } .scroll-slider-marketing-campaign { margin: 16px auto } @media(min-width:48em) { .scroll-slider-marketing-campaign { margin: 23.5px auto } } .scroll-slider-marketing-campaign-list--scroll { scroll-snap-type: x mandatory; padding: 0 0 10px } @media(min-width:48em) { .scroll-slider-marketing-campaign-list--scroll { margin: 0 calc(-50vw + 343px); padding: 0 30px 16px calc(50vw - 343px) } } @media(min-width:64em) { .scroll-slider-marketing-campaign-list--scroll { scrollbar-width: auto; margin: 0; padding: 0 0 16px } } .scroll-slider-marketing-campaign-list--scroll::-webkit-scrollbar { display: block; height: 7px; width: 100% } @media(min-width:64em) { .scroll-slider-marketing-campaign-list--scroll::-webkit-scrollbar { height: 12px } } @media(min-width:48em) { .scroll-slider-marketing-campaign-list--scroll::-webkit-scrollbar-track { border-radius: 12px; background: #e0e1e3; margin: 0 calc(50vw - 343px) } } @media(min-width:64em) { .scroll-slider-marketing-campaign-list--scroll::-webkit-scrollbar-track { margin: 0 } } .scroll-slider-marketing-campaign-list__item, .scroll-slider-marketing-campaign-list__item-tile { border-radius: 16px; margin-right: 16px; width: 272px; height: 439px } @media(min-width:48em) { .scroll-slider-marketing-campaign-list__item, .scroll-slider-marketing-campaign-list__item-tile { margin-right: 24px; height: 455px } } .scroll-slider-marketing-campaign-list__item { scroll-snap-align: start; scroll-margin-left: 16px } @media(min-width:48em) { .scroll-slider-marketing-campaign-list__item { scroll-margin-left: 24px } } @media(min-width:64em) { .scroll-slider-marketing-campaign-list__item { scroll-snap-align: center; scroll-margin-left: 0 } } .scroll-slider-marketing-campaign-list__item:first-child { margin-left: 0 } @media(min-width:48em) { .scroll-slider-marketing-campaign-list__item:first-child { margin-left: 0; scroll-margin-left: calc(50vw - 343px) } } @media(min-width:64em) { .scroll-slider-marketing-campaign-list__item:first-child { scroll-margin-left: 0 } } .scroll-slider-marketing-campaign-list__item:last-child { margin-right: 20px } @media(min-width:48em) { .scroll-slider-marketing-campaign-list__item:last-child { margin-right: 0; padding-right: 10px } } .scroll-slider-marketing-campaign-list__button-container { position: unset; z-index: unset; display: flex; margin-top: 10px; margin-left: 0 } @media(min-width:48em) { .scroll-slider-marketing-campaign-list__button-container { margin-top: 5px } } @media(min-width:64em) { .scroll-slider-marketing-campaign-list__button-container { margin-top: 15px } } .offers-filter { max-width: 688px; margin: 0 auto } @media(min-width:64em) { .offers-filter { max-width: 780px } } .category-btn { color: #ac342a; font-weight: 700; flex: none; padding: 8px 16px; margin-right: 8px; border-radius: 100px; background-color: transparent; border: 2px solid #ac342a } .category-btn:hover { cursor: pointer } .category-btn-container { margin-bottom: 12px; padding: 12px 0; display: flex; flex-flow: row nowrap; align-items: flex-start; overflow-x: auto; max-width: 100% } .category-btn:last-child { margin-right: 0 } .category-btn__active { background: #f9dada; color: #ac342a; border-color: #f9dada; animation: fadeIn .8s 1 } .category-btn__active:focus { outline: none } @keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } } .shopping-list-header { padding: 40px 0 0; text-align: center; min-height: 305px } .shopping-list-header__title { color: #ac342a; margin: 0 0 4px } .shopping-list-header__subTitle { color: #6c221a; margin: 0 auto; max-width: 590px } @media(min-width:48em) { .shopping-list-header { min-height: 345px } } @media(min-width:64em) { .shopping-list-header { padding: 65px 0 0 } } .main-header__insiders .shopping-list-header__subTitle, .main-header__insiders .shopping-list-header__title { color: #f9dada } .shopping-list__item-section { width: 100%; align-self: flex-start } .shopping-list__item-section-header { width: 100%; padding: 16px 24px; background-color: #fdf0f0; display: flex; justify-content: space-between; align-items: center } .shopping-list__item-section-header h2 { margin: 0 } .shopping-list__item-section--checked .shopping-list-item:last-child { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px } .shopping-list__items { padding: 0; margin: 0 } .shopping-list__items-banners.shopping-list-item--no-checked-items .shopping-list__items:last-child .shopping-list-item--draggable:last-child .shopping-list-item { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px } .shopping-list__items-banner { padding: 0 24px; background-color: snow; min-height: 52px } .shopping-list__items-banner svg { max-height: 100%; width: 100px; padding: 10px 0; height: 52px } .shopping-list__items .shopping-list-item--draggable:last-child .shopping-list-item { border-bottom: 2px solid transparent } .shopping-list__items .shopping-list-item--draggable:last-child .shopping-list-item:hover { border: 2px solid #615395 } .search-item-card { display: flex; flex-direction: column; width: 100% } .search-item-card__content { display: flex; flex-direction: column; justify-content: center; margin: 32px 24px 0 } @media(min-width:48em) { .search-item-card__content { max-width: 304px; margin: 32px 24px } } .search-item-card__copy { margin: 0 0 16px } .search-item-card__asset { width: 375px; max-width: 375px; display: flex; justify-content: center; align-items: center; padding: 16px 0; margin: 0 auto } .search-item-card__asset .image-set { max-width: 264px } @media(min-width:48em) { .search-item-card__asset { margin: 0 32px 0 0 } } @media(min-width:48em) { .search-item-card { flex-direction: row; justify-content: space-between } } .shopping-list-item { display: flex; justify-content: space-between; align-items: center; background-color: transparent; border: 2px solid transparent; border-bottom-color: rgba(158, 147, 166, .32); padding: 18px 20px; overflow: hidden } .shopping-list-item, .shopping-list-item--draggable { list-style-type: none } .shopping-list-item:active, .shopping-list-item:hover { border: 2px solid #615395 } .shopping-list-item .item-button { display: flex; min-width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; background-color: transparent; border: none; cursor: pointer } .shopping-list-item .item-button:active, .shopping-list-item .item-button:focus { background-color: rgba(97, 83, 149, .0784313725); outline: none } .shopping-list-item .item-button__remove-icon { color: #655c6c; fill: #655c6c } .shopping-list-item .item-button__remove-icon:active, .shopping-list-item .item-button__remove-icon:focus { background-color: transparent } .shopping-list-item .item-checkbox { margin: 0 8px 0 0 } .shopping-list-item .item-checkbox__icon { display: inline-block; overflow: hidden; vertical-align: text-bottom; background: #fff; border: 2px solid #655c6c; border-radius: 2px; width: 20px; height: 20px } .shopping-list-item .item-checkbox__icon .sprite { position: relative; width: 20px; height: 20px; left: -2px; top: -2px; fill: #fff } .shopping-list-item .item-checkbox:active .item-checkbox__icon, .shopping-list-item .item-checkbox:focus .item-checkbox__icon { border-color: #615395; background-color: rgba(97, 83, 149, .0784313725) } .shopping-list-item .item-checkbox:active .item-checkbox__icon--checked, .shopping-list-item .item-checkbox:focus .item-checkbox__icon--checked { border-color: #615395; background-color: #615395 } .shopping-list-item .item-checkbox__icon--checked { border: 2px solid #157a77; background-color: #157a77 } .shopping-list-item__flyer, .shopping-list-item__offer { display: flex } .shopping-list-item__content { display: flex; flex-direction: column; flex-grow: 1; word-break: break-word } .shopping-list-item__content-text { flex-grow: 1; padding-right: 20px } .shopping-list-item__content-text p { margin: 0 0 4px } .shopping-list-item__content-text p:last-child { margin-bottom: 0 } .shopping-list-item__content-text-price { font-weight: 600; color: #ac342a } .shopping-list-item__content-text-expire, .shopping-list-item__content-text-redeemed, .shopping-list-item__content-text-status, .shopping-list-item__content-text .offer-footer-date { font-weight: 600; color: #655c6c } .shopping-list-item__content-text-redeemed { color: #157a77 } .shopping-list-item__content-thumbnail { display: flex; align-items: center } .shopping-list-item__content-thumbnail img { max-height: 40px; max-width: 40px } .shopping-list-item__title { cursor: pointer; flex: 1 } .shopping-list-item__content-name--line-through, .shopping-list-item__content-text-price--line-through, .shopping-list-item__title--line-through { color: #655c6c; text-decoration: line-through } .shopping-list-item__content-name--line-through, .shopping-list-item__title--line-through { color: #403840 } .shopping-list-item__title-line-through { cursor: not-allowed } .shopping-list-item__view-details { cursor: pointer } .shopping-list-error { display: flex; width: 100%; max-width: 792px; background-color: #feeeeb; border: 1px solid #c42d0c; border-radius: 8px; padding: 20px 24px; margin: 0 auto 163px } .shopping-list-error__icon-container { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background-color: #fff; margin-right: 24px } .shopping-list-error__icon { width: 40px; height: 40px } .shopping-list-error__title { margin: 0 } .shopping-list-error__message { margin: 8px 0 } .shopping-list-error__reload-button { color: #157a77 } .text-page { text-align: center; width: 100% } .text-page__body { padding: 32px 0 } @media(min-width:48em) { .text-page__body { padding: 48px 0 } } .text-page__body p { margin: 10px 0 } .text-page__bold { font-weight: 700 } .text-page__link { font-weight: 400 } .contest-rules-page { margin: 38px 0 80px } @media(min-width:48em) { .contest-rules-page { margin-top: 70px } } .contest-rules-page__header { margin-bottom: 35px } @media(min-width:48em) { .contest-rules-page__header { display: flex } } .contest-rules-page__icon { display: block; margin: 0 auto 30px; width: 130px; height: 62px } @media(min-width:48em) { .contest-rules-page__icon { margin: 0 0 0 auto; width: 154px; height: 74px; order: 2; flex-shrink: 0 } } @media(min-width:48em) { .contest-rules-page__header-content { order: 1 } } .contest-rules-page__header-content .loading-placeholder { text-align: center } .contest-rules-page__heading { margin-top: 0; text-align: center } .contest-rules-page__subheading { text-align: left; font-weight: 700 } .contest-rules-page__section { background-color: #fff; padding: 30px 18px; margin-bottom: 10px } @media(min-width:48em) { .contest-rules-page__section { padding: 40px; margin-bottom: 20px } } .contest-rules-page__section-title { margin-top: 0 } .contest-rules-page__body { font-size: .875rem; line-height: 1.571428571 } @media(min-width:48em) { .contest-rules-page__body { line-height: 1.857142857 } } .contest-rules-page__alpha-list { list-style-type: lower-alpha } .contest-rules-page__custom-ol { list-style-type: none; position: relative } .contest-rules-page__custom-ol li:before { content: attr(data-section-number); position: absolute; left: 0; width: 40px; padding-right: 8px; text-align: right } .contest-rules-page h3 { text-decoration: underline } .contest-rules-page__indented-paragraph { margin-right: 20px; margin-left: 20px } @media(min-width:48em) { .contest-rules-page__indented-paragraph { margin-right: 40px; margin-left: 40px } } .product-love-story-details__header-container { width: 100%; height: 500px; position: relative } .product-love-story-details__header-container:after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .8)) } .product-love-story-details__header-image { width: 100%; height: 500px; position: fixed; display: flex; justify-content: center; align-items: center } .product-love-story-details__header-image .image { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100% } .product-love-story-details__header-image .image.image--error { -o-object-fit: none; object-fit: none; width: auto; height: auto } .product-love-story-details__container, .product-love-story-details__hero-overlay-container { max-width: 794px; padding: 0 16px } .product-love-story-details__container { margin: 0 auto } .product-love-story-details__hero-overlay-container { z-index: 2; position: absolute; bottom: 24px; right: 50%; transform: translateX(50%); width: 100% } .product-love-story-details__hero-overlay { display: flex; flex-direction: column } .product-love-story-details__badge { background-color: #fff; color: #403840; padding: 4px 8px; text-align: center; border-radius: 25px; font-weight: 700 } .product-love-story-details__heading { border-bottom: 1px solid #fff; color: #fff; margin: 0 0 16px; padding-bottom: 16px } .product-love-story-details__product-information { display: flex; gap: 10px; align-items: center } .product-love-story-details__product-image { width: 48px; height: 48px; background-color: #f4f1f6; margin: 0 auto } .product-love-story-details__product-image img { width: 100% } .product-love-story-details__product-image-container { width: 64px; height: 64px; background-color: #fff; text-align: center; border-radius: 5px; padding-top: 7px } .product-love-story-details__title { margin: 0; color: #fff } .product-love-story-details__link.product-love-story-details__link { color: #fff; text-align: left } .product-love-story-details__background-container { background: #fff; z-index: 2; margin-top: -8px; border-radius: 8px 8px 0 0 } .product-love-story-details__content { padding-top: 32px } .product-love-story-details__content img { -o-object-fit: cover; object-fit: cover; margin-bottom: 32px; width: 100% } .product-love-story-details__body, .product-love-story-details__headline { margin-top: 0 } .product-love-story-details__headline { margin-bottom: 4px } .product-love-story-details__body { margin-bottom: 32px } .product-love-story-details__shop-product-cta-container { width: -moz-fit-content; width: fit-content; z-index: 5; position: sticky; margin-bottom: 32px; left: 50%; transform: translateX(-50%); bottom: 32px } .product-love-story-placeholder__hero { width: 100%; height: 500px; background-color: #f4f1f6; margin-bottom: 32px } .product-love-story-placeholder__content { max-width: 794px; margin: 0 auto } @media(max-width:47.99em) { .product-love-story-placeholder__content { padding: 0 16px } } @media(min-width:48em)and (max-width:63.99em) { .product-love-story-placeholder__content { margin: 0 16px } } .product-love-story-placeholder__container { margin-bottom: 30px } .product-love-story-placeholder__loading-circle-container { margin-bottom: 24px } .product-love-story-placeholder__loading-circle { width: 48px; height: 48px; background-color: #f4f1f6; border-radius: 50% } .product-love-story-placeholder__loading-actions-container { display: flex; justify-content: space-around; border-bottom: 1px solid #f4f1f6; margin: 0 0 24px } @media(max-width:47.99em) { .product-love-story-placeholder__placeholder-content { width: 60% } } .ad-unit { display: block; width: 100%; margin: 30px 0 } .ad-unit__inner { width: 100%; display: flex; flex-direction: column; align-items: center } .ad-unit--forecast { margin: 0 } .ad-unit--dashboard { margin: -28px 0 -56px } @media(min-width:64em) { .ad-unit--dashboard { margin: -45px 0 -60px } } .ad-unit__link-wrapper { position: relative; min-width: -moz-fit-content; min-width: fit-content; min-height: -moz-fit-content; min-height: fit-content } .ad-unit__link { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; text-indent: -99999px; overflow: hidden } .ad-unit__sponsored-label { text-align: right; margin-top: 6px; color: #655c6c; text-transform: capitalize } .esso-redemption { position: relative; overflow: hidden; background-image: url(https://dis-prod.assetful.loblaw.ca/content/dam/loblaw-companies-limited/creative-assets/pc-optimum/esso-redemption/esso-redemption-header-swoop-mobile.svg); background-size: 100%; background-repeat: no-repeat; background-position: top; background-color: snow } @media(min-width:48em) { .esso-redemption { background-image: url(https://dis-prod.assetful.loblaw.ca/content/dam/loblaw-companies-limited/creative-assets/pc-optimum/esso-redemption/esso-redemption-header-swoop-desktop.svg) } } .esso-redemption-header { padding: 40px 0 64px } @media(min-width:64em) { .esso-redemption-header { padding: 80px 0 170px } } .esso-redemption-header__inner-container { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; margin: 0 auto; min-height: 585px } @media(min-width:48em) { .esso-redemption-header__inner-container { flex-direction: row; justify-content: space-between; max-width: 996px; min-height: 504px } } .esso-redemption-header__body { display: flex; flex-direction: column; justify-content: center; max-width: 100% } @media(min-width:48em) { .esso-redemption-header__body { max-width: 486px } } .esso-redemption-header__title { margin: 8px 0 16px } @media(min-width:64em) { .esso-redemption-header__title { margin: 8px 0 32px } } .esso-redemption-header__title sup { font-size: 2rem } .esso-redemption-header__subtitle { color: #655c6c; margin: 0 } .esso-redemption-header__image-container { height: auto; max-width: 560px; margin: 40px auto 0 } @media(min-width:48em) { .esso-redemption-header__image-container { margin: 0 -35px 0 0 } } .esso-redemption-header__image { max-width: 100% } .esso-redemption-header__sprite { position: absolute; bottom: -180px; right: -30px; display: none; height: 242px; width: 887px } @media(min-width:64em) { .esso-redemption-header__sprite { display: block } } .esso-redemption-redeem-cards { margin-top: 0 } .esso-redemption-redeem-cards__inner-container { box-sizing: border-box; margin: 0 auto; max-width: 390px } @media(min-width:48em) { .esso-redemption-redeem-cards__inner-container { max-width: 996px } } .esso-redemption-redeem-cards__body { display: flex; flex-direction: column; justify-content: space-between; align-items: center } @media(min-width:48em) { .esso-redemption-redeem-cards__body { flex-direction: row } } .esso-redemption-redeem-cards__card { border-radius: 16px; box-shadow: 0 4px 12px rgba(158, 147, 166, .24), 0 4px 6px rgba(158, 147, 166, .24); width: 100%; max-width: 390px; min-height: 380px; position: relative } @media(min-width:48em) { .esso-redemption-redeem-cards__card { width: calc(50% - 16px); max-width: 471px; min-height: 505px } } .esso-redemption-redeem-cards__card:first-child { background-color: #f9dada } .esso-redemption-redeem-cards__card:last-child { background-color: #ac342a } .esso-redemption-redeem-cards__text-container { padding: 32px } @media(min-width:48em) { .esso-redemption-redeem-cards__text-container { padding: 40px } } .esso-redemption-redeem-cards__subtitle, .esso-redemption-redeem-cards__text, .esso-redemption-redeem-cards__title { margin: 0 } .esso-redemption-redeem-cards__subtitle { font-size: 32px; line-height: 38px } @media(min-width:48em) { .esso-redemption-redeem-cards__subtitle { font-size: 42px; line-height: 48px } } .esso-redemption-redeem-cards__text { color: #655c6c } .esso-redemption-redeem-cards__subtitle-dark, .esso-redemption-redeem-cards__title-dark { color: #403840 } .esso-redemption-redeem-cards__subtitle-light, .esso-redemption-redeem-cards__title.esso-redemption-redeem-cards__title-light { color: #fff } .esso-redemption-redeem-cards__image-container { max-width: 300px; position: absolute; right: 0; bottom: 0; padding: 32px 0 0 32px } @media(min-width:48em) { .esso-redemption-redeem-cards__image-container { max-width: 350px; padding: 40px 0 0 40px } } @media(min-width:64em) { .esso-redemption-redeem-cards__image-container { max-width: 400px } } .esso-redemption-redeem-cards__image-container img { display: block; border-radius: 0 0 16px 0; max-width: 100% } .esso-redemption-redeem-cards__text-divider { color: #6c221a; align-self: center; text-transform: uppercase; margin: 16px auto 8px } @media(min-width:48em) { .esso-redemption-redeem-cards__text-divider { margin: auto 10px } } .esso-redemption-redeem-cards__subtext { color: #655c6c; margin: 16px 0 0 } .esso-redemption-earning-card { padding: 40px 0 120px } .esso-redemption-earning-card__body { box-sizing: border-box; background-color: #6c221a; margin: 0 auto; border-radius: 16px; box-shadow: 0 4px 12px rgba(158, 147, 166, .24), 0 4px 6px rgba(158, 147, 166, .24); width: 100%; max-width: 390px; min-height: 458px; display: flex; flex-direction: column; justify-content: space-between } @media(min-width:48em) { .esso-redemption-earning-card__body { flex-direction: row; max-width: 996px; min-height: 406px } } .esso-redemption-earning-card__text-container { color: #fff; max-width: 585px; padding: 32px } @media(min-width:48em) { .esso-redemption-earning-card__text-container { width: 585px; padding: 40px } } .esso-redemption-earning-card__text-body { display: flex; flex-direction: column } @media(min-width:48em) { .esso-redemption-earning-card__text-body { align-items: flex-start } } .esso-redemption-earning-card__title { color: #fff; margin: 0 } .esso-redemption-earning-card__title sup { font-size: 1rem } .esso-redemption-earning-card__subtitle, .esso-redemption-earning-card__text { color: #fff; margin: 24px 0 0 } .esso-redemption-earning-card__learn-more-link { color: #fff } .esso-redemption-earning-card__learn-more-link:hover { color: #f9dada } .esso-redemption-earning-card__cta { text-align: center; background-color: transparent; padding: 10px 20px 11px; border-radius: 47px; border: 1px solid #fff; color: #fff; margin-top: 20px; text-decoration: none } .esso-redemption-earning-card__cta:hover { color: #fff; background: hsla(0, 0%, 100%, .2) } .esso-redemption-earning-card__cta:active { background: #fff; color: #403840 } .esso-redemption-earning-card__image-container { max-width: 456px } .esso-redemption-earning-card__image-container img { display: block; width: 100%; height: 285px; border-radius: 0 0 16px 16px; -o-object-fit: cover; object-fit: cover } @media(min-width:48em) { .esso-redemption-earning-card__image-container img { border-radius: 0 16px 16px 0; height: 100% } } .esso-redemption-pcf { background-color: #f4f1f6 } .esso-redemption-pcf__body { box-sizing: border-box; display: flex; flex-direction: column; margin: 0 auto; padding: 0; max-width: 390px } @media(min-width:48em) { .esso-redemption-pcf__body { max-width: 996px } } .esso-redemption-pcf__heading { font-size: 2rem; line-height: 38px; color: #403840; text-align: center; align-self: center; max-width: 677px; margin: 40px 0 24px } @media(min-width:48em) { .esso-redemption-pcf__heading { font-size: 2.625rem; line-height: 48px; margin: 120px 0 72px } } .esso-redemption-pcf__heading sup { font-size: 1.25rem } .esso-redemption-pcf__sprite-container { position: relative } .esso-redemption-pcf__sprite { position: absolute; display: none } @media(min-width:80em) { .esso-redemption-pcf__sprite { display: block; opacity: .4 } } .esso-redemption-pcf__gas-sprite-left { left: -64px; top: -95px; width: 90px; height: 70px } .esso-redemption-pcf__car-sprite-left { left: -113px; top: -4px; width: 90px; height: 80px } .esso-redemption-pcf__title { margin: 0 } .esso-redemption-pcf__title sup { font-size: .8rem } .esso-redemption-pcf__mscard-container { margin: 8px 0 32px; padding: 32px } @media(min-width:48em) { .esso-redemption-pcf__mscard-container { margin: 16px 0 48px; padding: 40px 40px 30px } } .esso-redemption-pcf__mscard-top-cards { display: flex; flex-direction: column; justify-content: space-between } @media(min-width:48em) { .esso-redemption-pcf__mscard-top-cards { flex-direction: row } } .esso-redemption-pcf__mscard-top-card { display: flex; flex-direction: column; position: relative; box-sizing: border-box; border: 1px solid rgba(158, 147, 166, .16); border-radius: 16px; width: 100%; padding: 24px; margin-bottom: 24px } @media(min-width:48em) { .esso-redemption-pcf__mscard-top-card { width: calc(50% - 1rem); max-width: 445px; padding: 32px } } .esso-redemption-pcf__mscard-image { width: 100%; order: 1; margin-top: 16px } @media(min-width:48em) { .esso-redemption-pcf__mscard-image { order: 0; margin-top: 0 } } .esso-redemption-pcf__mscard-label { text-transform: uppercase; background: #ac342a; border-radius: 25px; padding: 4px 8px; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); color: #fff } @media(min-width:48em) { .esso-redemption-pcf__mscard-label { transform-origin: left; left: 15px; top: 15px; transform: translateX(0) } } .esso-redemption-pcf__mscard-subtitle, .esso-redemption-pcf__mscard-title { position: relative; line-height: 1.25rem } @media(min-width:48em) { .esso-redemption-pcf__mscard-subtitle, .esso-redemption-pcf__mscard-title { line-height: normal } } .esso-redemption-pcf__mscard-subtitle sup, .esso-redemption-pcf__mscard-title sup { font-size: .65rem } .esso-redemption-pcf__mscard-title { margin: 12px 0 0 } @media(min-width:48em) { .esso-redemption-pcf__mscard-title { line-height: 1.75rem } } .esso-redemption-pcf__mscard-subtitle { margin: 12px 0; color: #655c6c } .esso-redemption-pcf__mscard-subtext, .esso-redemption-pcf__mscard-subtext-2 { color: #655c6c } .esso-redemption-pcf__mscard-subtext { line-height: 1.25rem; margin: 0 } @media(min-width:48em) { .esso-redemption-pcf__mscard-subtext { line-height: 1.375rem } } .esso-redemption-pcf__mscard-subtext-2 { margin-bottom: 16px } .esso-redemption-pcf__link-container { margin-top: 16px } @media(min-width:48em) { .esso-redemption-pcf__link-container { margin-top: 8px } } .esso-redemption-pcf__link { display: block; color: #157a77 } .esso-redemption-pcf__link:hover { color: #615395 } .esso-redemption-pcf__money { display: flex; flex-direction: column; justify-content: space-between; margin: 8px 0 40px } @media(min-width:48em) { .esso-redemption-pcf__money { flex-direction: row; min-height: 176px; margin: 16px 0 176px } } .esso-redemption-pcf__money-text { padding: 32px 32px 0 } @media(min-width:48em) { .esso-redemption-pcf__money-text { padding: 40px 32px 25px 40px } } .esso-redemption-pcf__money-subtitle { margin: 0 0 16px; max-width: 568px } .esso-redemption-pcf__money-img-container { display: flex; max-width: 200px; min-height: 176px; margin: -40px auto 0 } @media(min-width:48em) { .esso-redemption-pcf__money-img-container { max-width: 220px; margin: 0 -1px 0 0 } } .esso-redemption-pcf__money-img-container img { display: block; border-radius: 0; -o-object-fit: cover; object-fit: cover; height: 100%; width: 100% } @media(min-width:48em) { .esso-redemption-pcf__money-img-container img { border-radius: 0 16px 16px 0 } } .esso-redemption-pcf__money-img-container-fr { max-width: 240px } .esso-redemption-pcf__car-sprite-right { right: -10px; bottom: 301px; width: 90px; height: 80px } .esso-redemption-pcf__gas-sprite-right { position: absolute; right: -28px; bottom: 175px; width: 90px; height: 70px } .layout-card { background-color: #fff; box-shadow: 0 4px 12px rgba(158, 147, 166, .24), 0 4px 6px rgba(158, 147, 166, .24); border-radius: 16px } p sup { font-size: .5rem; line-height: 0 } .esso-redemption-ts-and-cs { background-color: #fff; border-top: 1px solid #f0f0f0 } @media(min-width:64em) { .esso-redemption-ts-and-cs { border-top: none; padding-bottom: 110px } } .esso-redemption-ts-and-cs__accordion { margin: 0 auto; max-width: 1048px; padding: 20px 0 } @media(min-width:64em) { .esso-redemption-ts-and-cs__accordion { border: 1px solid #f0f0f0; border-radius: 8px; padding: 18px 40px } } .esso-redemption-ts-and-cs__accordion h3, .esso-redemption-ts-and-cs__accordion h4, .esso-redemption-ts-and-cs__accordion p { color: #655c6c; margin: 16px 0 0 } @media(min-width:64em) { .esso-redemption-ts-and-cs__accordion h3, .esso-redemption-ts-and-cs__accordion h4, .esso-redemption-ts-and-cs__accordion p { margin: 18px 0 0 } } .esso-redemption-ts-and-cs__accordion a { color: #157a77 } .shopping-list-item-container-button { display: flex; align-items: center; background: transparent; overflow: hidden } .shopping-list-item-container-button:focus, .shopping-list-item-container-button:hover, .shopping-list-item-container-button button:focus, .shopping-list-item-container-button button:hover { background: transparent } .shopping-list-item-container-button svg { margin-right: 5px; width: 18px; height: 18px } .shopping-list-item-container-button .add-button-icon { transform: rotate(45deg) } .success-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); padding: 16px 24px; margin: 0 auto; background-color: #ebf1fa; border: 1px solid #4a80d2; border-radius: 8px; z-index: 1000; animation: success-visible .3s ease-out forwards } .success-toast p { margin: 0 } @media(min-width:48em) { .success-toast { margin: 0 auto; max-width: 977px; bottom: 55px } } @keyframes success-visible { 0% { bottom: 0; opacity: 0 } to { bottom: 24px; opacity: 1 } } .account-management__cards-list { margin: 0 auto } .device-list__block-link { display: block; margin-top: 30px } .device-list__block-link--text-wrap { white-space: pre-wrap } .device-list__block-link--placeholder { pointer-events: none } .device-list__plain-link { margin-top: 16px } .donate-points__content { padding-top: 35px } @media(min-width:48em) { .donate-points__content { padding-top: 50px } } .donate-points__charity-heading { font-weight: 700; padding-top: 0; max-width: 380px; margin: auto } @media(max-width:47.99em) { .donate-points__charity-heading { font-size: 1.25rem } } .donate-points__charity-subheading { max-width: 380px; margin: 16px auto 35px } @media(min-width:48em) { .donate-points__charity-subheading { margin-bottom: 50px } } .donate-points__confirm-heading { margin: 0 auto; max-width: 250px } @media(min-width:48em) { .donate-points__confirm-heading { max-width: 520px } } .donate-points__body { margin: 35px auto } .donate-points__ribbon { width: 80px; height: 118px } .donate-points__refresh .flow-form-submit__content { margin-top: 0 } .donate-points .donate-points-form { text-align: left; margin-top: 70px; max-width: 440px } .donate-points .donate-points-form .text-group__label { padding-bottom: 10px } @media(min-width:48em) { .donate-points .donate-points-form .text-group__label { padding-bottom: 12px } } .donate-points .donate-points-form .text-group { margin-top: 20px; margin-bottom: 10px } @media(min-width:48em) { .donate-points .donate-points-form .text-group { margin-top: 40px } } @media(min-width:48em) { .donate-points .donate-points-form .password-group .text-group { margin-top: 30px } } @media(min-width:48em) { .donate-points .donate-points-form__forgot-password { font-size: .875rem } } .donate-points .flow-form-submit { text-align: center } .point-events__list { background-color: #fff; padding: 0; margin: 0 0 16px } @media(min-width:48em) { .point-events__list { margin: 0 0 32px } } .point-events__list-item { padding: 20px; list-style: none; background-color: #fff } .point-events__list-item:not(:last-child) { border-bottom: 1px solid #ddd } @media(min-width:48em) { .point-events__list-item { padding: 40px } } .point-events__load-more { display: block; margin: 0 auto; color: #000; border: 1px solid #bcbcbc } .point-events__back-to-top { background: #fff; position: fixed; bottom: 32px; right: 40px; display: none; align-items: center; z-index: 2; transition: opacity, .2s ease; opacity: 1 } @media(min-width:48em) { .point-events__back-to-top { display: flex; bottom: 115px } } @media(min-width:64em) { .point-events__back-to-top { bottom: 100px } } .point-events__back-to-top .sprite { transform: rotate(270deg); margin-right: 5px } .point-events__back-to-top.hidden { transition: opacity, .2s ease; opacity: 0 } .account-setting--security .point-events__back-to-top.account-setting__turn-off-button, .account-setting--security .point-events__back-to-top.account-setting__turn-on-button, .point-events__back-to-top.button--theme-base, .point-events__back-to-top.household-grid__invite-button, .point-events__back-to-top.link--theme-button, .point-events__back-to-top.link--theme-button-gray, .point-events__back-to-top.link--theme-button-red, .point-events__back-to-top.link--theme-button-transparent, .point-events__back-to-top.link--theme-button-transparent-white, .point-events__back-to-top.link--theme-button-white, .point-events__back-to-top.points-days__cta, .points-days-cta-section__content .point-events__back-to-top.cta-section__link { padding: 16px } .no-transactions { padding: 8px 10%; text-align: center } .no-transactions .sprite { width: 64px; height: 64px } .no-transactions__header { margin: 5px 0 } .no-transactions span .link { display: inline; margin: 0 0 0 5px } .no-transactions .link { display: block; margin: 30px auto; max-width: 250px } .utility-section.scroll-to-transactions { margin-top: 0; padding-top: 65px } .point-summary { padding: 75px 0; text-align: center } .point-summary__title { font-size: 3rem; margin-bottom: 15px; margin-top: 0 } .point-summary__inner { display: flex; justify-content: center } .point-summary__inner--redeemable { border-left: 1px solid #ddd } .point-summary__inner--balance, .point-summary__inner--redeemable { display: flex; flex-direction: column; flex-basis: 185px } .point-summary__inner--balance .loading-placeholder, .point-summary__inner--redeemable .loading-placeholder { margin-bottom: 10px } .point-summary__inner--balance h2, .point-summary__inner--redeemable h2 { font-size: 2rem; margin: 0 } .point-summary.utility-header__inner { height: 300px } .point-summary.utility-header__inner .no-balance, .point-summary.utility-header__inner .point-summary__inner, .point-summary.utility-header__inner .point-summary__title { color: #ac342a } .point-summary .points-dashboard-error__inner { margin: 0 auto } .point-summary .points-dashboard-error__inner .sprite { fill: #bb2620 } .points-summary-header__insiders .utility-header__inner.point-summary .no-balance, .points-summary-header__insiders .utility-header__inner.point-summary .point-summary__inner, .points-summary-header__insiders .utility-header__inner.point-summary .point-summary__title { color: #fff } .no-balance { padding: 0 10% } .points-dashboard { display: flex; justify-content: space-between; flex-wrap: wrap } .points-dashboard-layout { padding-bottom: 115px } .points-dashboard__summary-tile { margin: 0 auto } .points-dashboard__filter { display: flex; flex-wrap: wrap; justify-content: space-between } .points-dashboard__filter--title { display: flex; flex-direction: column } .points-dashboard__filter--title .sprite { margin-bottom: 8px } .points-dashboard__filter--chip { margin: 30px 0 8px; display: flex; flex-wrap: wrap } .points-dashboard__filter--placeholder { margin: 55px auto 0 } .points-dashboard__filter--placeholder .loading-placeholder { margin-bottom: 10px } .points-dashboard__filter--tile { height: 184px; display: flex; flex-direction: column; margin-bottom: 15px; box-shadow: 0 4px 0 0 #bcbcbc; font-size: .75rem; text-align: left; justify-content: space-between; flex: 0 1; flex-basis: calc(50% - 1em) } @media screen and (max-width:380px) { .points-dashboard__filter--tile { flex-basis: 100% } } @media(min-width:48em) { .points-dashboard__filter--tile { font-size: .875rem } } @media(min-width:64em) { .points-dashboard__filter--tile { flex-basis: calc(25% - 1em); padding: 20px } } .points-dashboard__filter--tile.placeholder { background: #fff; padding: 15px; display: flex; justify-content: space-between; flex-direction: column } .points-dashboard__filter--tile .groceryClass, .points-dashboard__filter--tile .groceryClass:active, .points-dashboard__filter--tile .houseClass, .points-dashboard__filter--tile .houseClass:active { fill: #ff9192; color: #ee3124 } .points-dashboard__filter--tile .gasClass, .points-dashboard__filter--tile .gasClass:active, .points-dashboard__filter--tile .pcfClass, .points-dashboard__filter--tile .pcfClass:active { color: #ee3124; fill: #fbd2d3 } .points-dashboard__filter--tile:hover .gasClass, .points-dashboard__filter--tile:hover .houseClass, .points-dashboard__filter--tile:hover .pcfClass { color: #fbd2d3; fill: #fff } .points-dashboard__filter--tile:hover .groceryClass { fill: #fbd2d3; color: #fff } .points-dashboard__filter--points { font-size: 1.5rem; font-weight: bolder } .points-dashboard__filter--dropdown { flex-grow: 1 } @media(min-width:48em) { .points-dashboard__filter--dropdown { display: none; visibility: hidden } } .points-dashboard__filter--dropdown .dropdown-group__button { background: #fff; border: 1px solid #ddd; color: #000 } .points-dashboard__filter--dropdown .dropdown-group__button:focus { background: #ddd } .points-dashboard__filter--dropdown .dropdown-group__button svg { fill: #000 } .points-dashboard__filter--dropdown .dropdown-group__dropdown:invalid { color: #000 } .points-dashboard__subtitle { display: flex; margin-bottom: 16px; flex-direction: column; align-items: flex-start } @media(min-width:48em) { .points-dashboard__subtitle { flex-direction: row; justify-content: space-between } } .account-setting--security .points-dashboard__subtitle .account-setting__turn-off-button, .account-setting--security .points-dashboard__subtitle .account-setting__turn-on-button, .points-dashboard__subtitle .account-setting--security .account-setting__turn-off-button, .points-dashboard__subtitle .account-setting--security .account-setting__turn-on-button, .points-dashboard__subtitle .button, .points-dashboard__subtitle .household-grid__invite-button, .points-dashboard__subtitle .link--theme-button, .points-dashboard__subtitle .link--theme-button--large-primary, .points-dashboard__subtitle .link--theme-button--large-secondary, .points-dashboard__subtitle .link--theme-button--small-primary, .points-dashboard__subtitle .link--theme-button--small-secondary, .points-dashboard__subtitle .link--theme-button-gray, .points-dashboard__subtitle .link--theme-button-red, .points-dashboard__subtitle .link--theme-button-transparent, .points-dashboard__subtitle .link--theme-button-transparent-white, .points-dashboard__subtitle .link--theme-button-white, .points-dashboard__subtitle .load-shop-pay-header__link, .points-dashboard__subtitle .load-shop-pay-module__link, .points-dashboard__subtitle .marketing-page-header__link, .points-dashboard__subtitle .marketing-page-module__link, .points-dashboard__subtitle .partnership-perk-details__cta, .points-dashboard__subtitle .partnership-perk-redeemed-success__cta, .points-dashboard__subtitle .points-days-cta-section__content .cta-section__link, .points-dashboard__subtitle .points-days__cta, .points-days-cta-section__content .points-dashboard__subtitle .cta-section__link { margin-top: 15px } @media(min-width:48em) { .account-setting--security .points-dashboard__subtitle .account-setting__turn-off-button, .account-setting--security .points-dashboard__subtitle .account-setting__turn-on-button, .points-dashboard__subtitle .account-setting--security .account-setting__turn-off-button, .points-dashboard__subtitle .account-setting--security .account-setting__turn-on-button, .points-dashboard__subtitle .button, .points-dashboard__subtitle .household-grid__invite-button, .points-dashboard__subtitle .link--theme-button, .points-dashboard__subtitle .link--theme-button--large-primary, .points-dashboard__subtitle .link--theme-button--large-secondary, .points-dashboard__subtitle .link--theme-button--small-primary, .points-dashboard__subtitle .link--theme-button--small-secondary, .points-dashboard__subtitle .link--theme-button-gray, .points-dashboard__subtitle .link--theme-button-red, .points-dashboard__subtitle .link--theme-button-transparent, .points-dashboard__subtitle .link--theme-button-transparent-white, .points-dashboard__subtitle .link--theme-button-white, .points-dashboard__subtitle .load-shop-pay-header__link, .points-dashboard__subtitle .load-shop-pay-module__link, .points-dashboard__subtitle .marketing-page-header__link, .points-dashboard__subtitle .marketing-page-module__link, .points-dashboard__subtitle .partnership-perk-details__cta, .points-dashboard__subtitle .partnership-perk-redeemed-success__cta, .points-dashboard__subtitle .points-days-cta-section__content .cta-section__link, .points-dashboard__subtitle .points-days__cta, .points-days-cta-section__content .points-dashboard__subtitle .cta-section__link { margin-top: 0 } } .points-dashboard__subtitle .loading-placeholder:first-of-type { margin-top: 10px } .points-dashboard__points-events { margin: 0 auto } .points-dashboard-chip--selected, .points-dashboard-chip--selected:focus { background: #157a77; color: #fff } .points-dashboard-chip:hover { color: #fff; background: #615395 } .points-dashboard-chip, .points-dashboard-chip--selected { margin: 0 15px 16px 0; min-width: auto; font-weight: bolder } @media(max-width:47.99em) { .points-dashboard-chip, .points-dashboard-chip--selected { display: none; visibility: hidden } } .point-history-title { margin-bottom: 16px } .account-settings-page { margin: 0 auto } .account-settings-page__pcid-logo { display: inline-block; width: 58px; height: 30px; margin-right: 18px } .account-setting { flex-grow: 1; padding: 20px } .account-setting__inner { width: 100%; word-break: break-word } @media(min-width:48em) { .account-setting__inner { display: flex; align-items: center } } .account-setting__inner--expanded { padding: 20px; margin-top: 20px; width: 100%; border-left: 4px solid #007a7c } @media(min-width:48em) { .account-setting__inner--expanded { padding: 20px 40px } } .account-setting__inner--try-again-link { cursor: pointer } .account-setting__inner--layout { display: flex; flex-direction: column } @media(min-width:48em) { .account-setting__inner--layout { flex-direction: row; flex-grow: 1; justify-content: space-between; align-items: center } } .account-setting__inner--button { display: block; margin-top: 20px; width: 100% } @media(min-width:48em) { .account-setting__inner--button { width: auto; margin-top: 0; flex-basis: 225px } } .account-setting__value { color: #191919; display: block; word-break: break-all } .account-setting__value--break-word { word-break: break-word } .account-setting__form-info { line-height: 1.8; font-size: .9rem; margin-top: 0 } @media(min-width:48em) { .account-setting__form-info { margin: 0 0 30px } } .account-setting__form-info--error { color: #970012 } .account-setting__label, .account-setting__title { margin: 0 0 14px; font-weight: 700; flex-shrink: 0; float: none } @media(min-width:48em) { .account-setting__label, .account-setting__title { flex-basis: 160px; margin: 0 40px 0 0; float: left } } @media(min-width:48em) { .account-setting__content { flex-basis: 360px } } .account-setting__content-title { margin-top: 0; margin-bottom: 10px; font-size: 16px } .account-setting__row-wrapper { display: flex; justify-content: space-between } @media(min-width:48em) { .account-setting__fields { max-width: 460px } } .account-setting__fields .text-group:first-child { margin-top: 0 } @media(min-width:48em) { .account-setting__submit-button { display: inline-block; width: auto; margin-top: 20px } } .account-setting__cancel-button { display: block; width: 100%; text-align: center; margin-top: .9375rem } @media(min-width:48em) { .account-setting__cancel-button { display: inline-block; width: auto; text-align: left; margin-left: 30px } } .account-setting__new-password-policy-announcement { color: #8a8a8a; font-size: 13px; text-align: left; margin-top: 10px } @media(max-width:47.99em) { .account-setting--address .account-setting__row-wrapper { display: block } } @media(min-width:48em) { .account-setting--address .account-setting__dropdown--province, .account-setting--address .account-setting__postal-code { width: 48%; margin-top: 0 } } .account-setting--address .dropdown-group__button { padding: 16px 60px 16px 22px } .account-setting--communication .account-setting__content { flex-basis: auto } .account-setting--communication .account-setting__option--offers { padding-bottom: 26px; border-bottom: 1px solid #ddd; margin-bottom: 30px; margin-top: 20px } @media(min-width:48em) { .account-setting--communication .account-setting__option--offers { margin-top: 0 } } .account-setting--communication .account-setting__option--surveys { margin-bottom: 30px } @media(min-width:48em) { .account-setting--communication .account-setting__option--surveys { margin-bottom: 0 } } .account-setting--communication .account-setting__terms { margin: 0 0 12px 34px } .account-setting--communication .account-setting__opt-in-link { margin-left: 34px } .account-setting--communication .checkbox-group, .account-setting--communication .refine-search__services-radio-group-single { margin: 0 0 12px } .account-setting-update-email { flex-direction: column } @media(min-width:48em) { .account-setting-update-email { padding: 20px 40px } } .account-setting-update-email--button { white-space: normal } .account-setting-update-email--contact-support { display: block; margin-top: 15px; margin-bottom: 0 } @media(min-width:48em) { .account-setting-update-email--contact-support { margin-top: 0 } } .account-setting--language-preferences .account-setting__content { margin-top: 20px } @media(min-width:48em) { .account-setting--language-preferences .account-setting__content { margin-top: 0 } } .account-setting--password .text-group--block { margin-bottom: 10px } .account-setting--security .account-setting__content { margin-top: 10px } @media(min-width:48em) { .account-setting--security .account-setting__content { margin-top: 0 } } .account-setting--security .account-setting__actions { display: flex; flex-direction: column; margin-top: 20px } @media(min-width:48em) { .account-setting--security .account-setting__actions { flex-direction: row; align-items: center } } .account-setting--security .account-setting__learn-more-button, .account-setting--security .account-setting__turn-on-button { display: block; width: auto } @media(min-width:48em) { .account-setting--security .account-setting__learn-more-button, .account-setting--security .account-setting__turn-on-button { display: inline-block } } .account-setting--security .account-setting__cancel-button { margin-top: 15px; align-self: center } @media(min-width:48em) { .account-setting--security .account-setting__cancel-button { display: inline-block; margin-top: 0; margin-left: 30px } } .account-setting .two-factor-toggle__read-only { display: inline-block } .account-setting .two-factor-toggle__editable { display: none } @media(min-width:48em) { .account-setting .two-factor-toggle__editable { display: inline-block } } .toggleable-container .account-setting { display: flex } .toggleable-container .account-setting--read-only { padding-right: 0 } @media(min-width:48em) { .toggleable-container .account-setting { align-items: center; padding: 30px 20px 30px 40px } } .toggleable-container .account-setting--fieldset, .toggleable-container .account-setting--form { width: 100% } .toggleable-container .account-setting--editable { display: block; width: 100% } @media(min-width:48em) { .toggleable-container .account-setting--editable { display: flex; align-items: flex-start } } @media(min-width:48em) { .toggleable-container .account-setting--editable .account-setting__title { margin-top: 10px } } @media(min-width:48em) { .toggleable-container .account-setting--editable.account-setting--address>* { margin-top: 0 } } .toggleable-container .account-setting__error { position: relative } .pcinsider-section { display: flex; flex-direction: column } @media(min-width:48em) { .pcinsider-section { flex-direction: row; align-items: center; justify-content: space-between; padding: 30px 35px 30px 40px } } .pcinsider-section__logo { height: 35px; width: 90px } .pcinsider-section__text { margin: 45px 0 0; padding: 0; line-height: 1.1; text-align: left } @media(min-width:48em) { .pcinsider-section__text { margin: 0 } } .pcinsider-section__text p { max-width: 320px; margin: 0 } @media(min-width:64em) { .pcinsider-section__text p { max-width: 400px } } .pcinsider-section__text p:first-of-type { margin-bottom: 15px } @media(min-width:48em) { .pcinsider-section__text p:first-of-type { margin-bottom: 0 } } .pcinsider-section__button { display: flex; justify-content: center; margin-top: 40px } @media(min-width:48em) { .pcinsider-section__button { width: 155px; margin-top: 0 } } .pcinsider-section__enrolled-checkmark { font-size: 16px; position: absolute; right: 20px } @media(min-width:48em) { .pcinsider-section__enrolled-checkmark { position: relative; right: 0 } } .pcinsider-section__enrolled-checkmark .sprite { width: 15px; height: 15px; position: relative; top: 2px; margin: 0 10px 0 40px } .update-email-form__info { line-height: 1.8; font-size: .9rem } .update-email-form__submit { margin-top: -25px } .account-container { background-color: #f0f0f0 } .subscription-container { width: 100%; margin: 0 auto; padding: 24px 16px } @media(min-width:48em) { .subscription-container { max-width: 688px; padding: 48px 16px } } .checklist-container { background-color: #fff; display: none; padding-bottom: 32px } @media(min-width:64.0625em) { .checklist-container { display: block; border-left: 1px solid rgba(158, 147, 166, .4) } } .checklist-container__error-tile { padding: 40px 20px } .checklist-container .loading-tile { text-align: center } .checklist__header { padding: 32px 32px 0 } .checklist__header .loading-placeholder { margin-bottom: 8px } .checklist__header .loading-placeholder__inner { line-height: 32px } .checklist__header h2 { color: #403840; font-weight: 600; margin: 0 } .checklist__items-container { list-style-type: none; margin: 0; padding: 0 } .checklist__items-container .loading-placeholder__inner { line-height: 28px } .checklist__item-wrapper { border-bottom: 1px solid rgba(158, 147, 166, .4); padding: 32px } .checklist__item-wrapper:first-child { padding-top: 24px } .checklist__item-wrapper--placeholder:first-child { padding-top: 16px } @media(min-width:64em) { .confirm-points .flow-tile>* { max-width: 550px } } .confirm-points__confirm+.toggleable-drawer { margin-top: 40px } .confirm-points__conversion-title { max-width: 620px } .confirm-points__description, .confirm-points__sub-description, .confirm-points__title { text-align: left } .account-setting--security .confirm-points__description+.account-setting__turn-off-button, .account-setting--security .confirm-points__description+.account-setting__turn-on-button, .confirm-points__description+.button, .confirm-points__description+.household-grid__invite-button, .confirm-points__description+.link--theme-button, .confirm-points__description+.link--theme-button--large-primary, .confirm-points__description+.link--theme-button--large-secondary, .confirm-points__description+.link--theme-button--small-primary, .confirm-points__description+.link--theme-button--small-secondary, .confirm-points__description+.link--theme-button-gray, .confirm-points__description+.link--theme-button-red, .confirm-points__description+.link--theme-button-transparent, .confirm-points__description+.link--theme-button-transparent-white, .confirm-points__description+.link--theme-button-white, .confirm-points__description+.load-shop-pay-header__link, .confirm-points__description+.load-shop-pay-module__link, .confirm-points__description+.marketing-page-header__link, .confirm-points__description+.marketing-page-module__link, .confirm-points__description+.partnership-perk-details__cta, .confirm-points__description+.partnership-perk-redeemed-success__cta, .confirm-points__description+.points-days__cta, .points-days-cta-section__content .confirm-points__description+.cta-section__link { margin-bottom: 15px } .confirm-points .toggleable-drawer__close-button { display: block; top: 20px; right: 20px } .confirm-points__deadline { padding-top: 40px; max-width: 320px; margin: 0 auto } .confirm-points__form-submit { width: -moz-fit-content; width: fit-content } @media(min-width:48em) { .confirm-points__form-submit { margin-bottom: 40px } } .confirm-points__form-submit .flow-form-submit { text-align: center } .confirm-points__form-submit .flow-form-submit__content { margin-top: 24px } .confirm-points__form-submit .flow-form-submit__cancel, .confirm-points__form-submit .flow-form-submit__submit { display: block; margin-left: auto; margin-right: auto } .confirm-points__form-submit .flow-form-submit__submit { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; padding: 12px 24px } .confirm-points__form-submit .flow-form-submit__cancel { margin-top: 30px } .confirm-points .link-more-cards { max-width: 100%; margin: 40px 20px 0; padding: 30px 24px; background-color: #f0f0f0 } .confirm-points__link-more-cards--legacy { margin-top: 20px; margin-bottom: -30px } .confirm-points__flow-tile { padding: 30px; text-align: left } @media(min-width:48em) { .confirm-points__flow-tile { padding: 60px 30px } } .confirm-points__reminder { background-color: #0075ff; color: #fff; -webkit-font-smoothing: antialiased; padding-top: 30px; padding-bottom: 30px } .confirm-points .activate-card { max-width: 100% } .confirm-points .activation-card-display__card-graphic { width: auto } .confirm-points__headline { margin-bottom: 8px } .confirm-points__point-summary--title { margin-top: 16px } .confirm-points__point-summary--sub-title { margin-top: 8px; margin-bottom: 0 } .confirm-points-placeholder--header { padding: 55px 0 46px } .confirm-points-placeholder--progress-bar { margin-top: 20px } .confirm-points-placeholder--copy { margin: 35px auto 20px } .already-claimed__title { margin-bottom: 10px } .already-claimed__link { margin: 40px auto 20px } .already-claimed__support-link { margin-bottom: 40px } .already-claimed__link-more-cards { max-width: none; margin: 0 10px } .accept-invitation-full-house__title { margin-bottom: 15px } .accept-invitation-full-house__body { margin-bottom: 30px; max-width: 455px } .accept-invitation-full-house__links { display: flex; flex-direction: column } .accept-invitation-full-house__learn-more-button { display: block; margin-left: auto; margin-right: auto; margin-top: 30px; border: none; cursor: pointer; padding: 16px 26px; background: #191919; color: #fff } .accept-invitation-full-house__contact-support-button { margin-top: 20px } .accept-invitation-full-house__info .accept-invitation-info__drawer { margin: 30px auto 0 } .accept-invitation-full-house__info .accept-invitation-info__drawer:after { display: none } .accept-invitation-full-house__points-summary .points-summary__container--precombined:after { margin-top: 0 } .send-invitation-container__header .flow-header__sub-title, .send-invitation-container__header .flow-header__title { color: #000 } .login-page__pcid-title { display: flex; align-items: center; justify-content: center; max-width: 460px } .login-page__pcid-logo { width: 40px; height: 40px; flex-shrink: 0 } .login-page__title { font-size: 1.125rem; text-align: center; margin-left: 15px } @media(max-width:34.365em) { .login-page__title { font-size: 1rem } } .login-page__footer { text-align: center; margin-bottom: 27px } @media(min-width:64em) { .login-page__footer { margin-bottom: 57px } } .login-page .flow-header__sub-title { font-weight: 400; color: #585858; max-width: 460px; margin: 0 auto } .offers-preview li { list-style: none } .offers-preview__title { text-align: center } .offers-preview .offer--invalid { min-height: 205px } .offers-preview__additional-data { padding: 0; margin: 0 1em 5em; list-style: none; display: flex; flex-wrap: wrap } .offers-preview__additional-data-item { padding: 10px; border-bottom: 5px solid rgba(0, 0, 0, .15); flex: 1 1 50%; display: flex } .offers-preview__additional-data-item p { margin: 0 } .offers-preview__image-gallery { margin: 0 1em 5em } .offers-preview__image-gallery ul { padding: 0; list-style: none; display: flex; flex-wrap: wrap } .offers-preview__image-gallery-item { padding: 10px; border-bottom: 5px solid rgba(0, 0, 0, .15); flex: 1 1 auto } .offers-preview__image-gallery-item-label { display: block; margin-bottom: 10px } .offers-mobile-preview { display: flex; flex-direction: column; flex: 1; background-color: #f0f0f0; font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif } .registration-page__header { text-align: center } .registration-page__all-fields-required { margin-bottom: 30px } .registration-page__footer { text-align: center; margin-bottom: 27px } @media(min-width:64em) { .registration-page__footer { margin-bottom: 57px } } .conversion-failure .flow-header__title { margin: 0 auto; max-width: 400px } @media(min-width:48em) { .conversion-failure .flow-header__title { max-width: 600px } } .legacy-transfer__pcf-card-link { display: block; width: 218px; margin: 0 auto 30px } .legacy-transfer__pcf-card-link img { display: block; width: 100%; max-width: 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); border-radius: 9px } .legacy-transfer__button-row { display: flex; flex-direction: row; justify-content: space-between; max-width: 240px; margin: 40px auto } @media(min-width:48em) { .legacy-transfer__button-row { max-width: 350px } } .legacy-transfer__button { min-width: 110px; font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; padding: 12px 24px } .legacy-transfer__button--spacing { padding-left: 12px } @media(min-width:48em) { .legacy-transfer__button { min-width: 160px } } .legacy-transfer__link-more-cards { max-width: 560px } @media(min-width:48em) { .pco-digital-card { padding: 40px 90px } } .pco-digital-card img { max-width: 100% } .pco-digital-card__download-app { display: flex; margin-bottom: 35px; flex-direction: column; border-bottom: 1px solid rgba(158, 147, 166, .25); padding: 10px 15px 30px; align-items: center } @media(min-width:48em) { .pco-digital-card__download-app { flex-direction: row; justify-content: center; padding: 0 15px 35px } } .pco-digital-card__download-app .donate-banner__fake-cta, .pco-digital-card__download-app .new-window-link, .pco-digital-card__download-app .tile-item__fake-cta, .pco-digital-card__download-app .video-tile__fake-cta { display: flex; margin: 10px } .pco-digital-card__download-app .donate-banner__fake-cta:first-of-type, .pco-digital-card__download-app .new-window-link:first-of-type, .pco-digital-card__download-app .tile-item__fake-cta:first-of-type, .pco-digital-card__download-app .video-tile__fake-cta:first-of-type { width: 125px; height: 40px } .pco-digital-card__download-app .donate-banner__fake-cta:first-of-type>svg, .pco-digital-card__download-app .new-window-link:first-of-type>svg, .pco-digital-card__download-app .tile-item__fake-cta:first-of-type>svg, .pco-digital-card__download-app .video-tile__fake-cta:first-of-type>svg { max-width: 100%; height: 40px } .pco-digital-card__description, .pco-digital-card__title { text-align: left } .pco-digital-card--view-offers { margin-top: 20px; font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif; width: -moz-fit-content; width: fit-content; padding: 12px 24px } .enrol-flow .pco-digital-card__header { max-width: 710px } .flow-tile--initial-offers { padding: 40px 5px } @media(min-width:48em) { .flow-tile--initial-offers { padding: 40px 90px } } .activate-card { display: flex; flex-direction: column; justify-content: space-evenly; max-width: 100% } @media(min-width:64em) { .activate-card { flex-direction: row } } .activate-card__inner { text-align: center } .activate-card__inner:last-of-type { margin-top: 30px } @media(min-width:64em) { .activate-card__inner:last-of-type { margin-top: 0 } } .activate-card__inner .link { display: block; margin: 0 auto; width: -moz-fit-content; width: fit-content; white-space: normal } .activate-card__inner .link sup { font-size: 10px } .activate-card__image { display: block; width: 237px; margin: 0 auto 16px } @media(min-width:48em) { .activate-card__image { margin-bottom: 24px } } .activate-card__subtitle { max-width: 390px; margin-top: 24px; line-height: 1.3 } .link-cards .flow-header__title { margin-bottom: 8px } .link-cards__digital-card { font-family: Inter, Arial, Helvetica Neue, Helvetica, sans-serif } .link-cards__separator-line { margin: 24px auto; background-color: #9e93a6; opacity: .25 } .store-map__inner { background-color: #e5e3df; display: flex; padding: 0; height: auto; flex-wrap: wrap } @media(min-width:64em) { .store-map__inner { height: 600px } } .store-map--hidden { display: none } .stores { background-color: #f0f0f0; display: flex; flex-direction: column } @media(min-width:48em) { .stores { flex-flow: row wrap; align-content: flex-start } } .stores__header { z-index: 2 } @media(min-width:48em) { .stores__header { flex: 1 0 100% } } .stores__refine { order: 2 } @media(min-width:48em) { .stores__refine { order: 1; flex: 1 0 100% } } .stores__map { flex-grow: 1; order: 1 } @media(min-width:48em) { .stores__map { height: 600px; order: 3; border: none } } .stores__map--sticky { border-bottom: 3px solid rgba(0, 0, 0, .1) } .stores__map--hidden { display: none } .stores__search-results-list { order: 2; width: 100% } @media(min-width:48em) { .stores__search-results-list { order: 1; overflow-x: hidden; overflow-y: auto; width: 40vw } } @media(min-width:64em) { .stores__search-results-list { width: 430px } } .info-window { width: 400px; margin-right: -51px } .info-window__body { padding: 22px 20px 12px; border-bottom: 1px solid #bcbcbc; max-width: 100vw } @media(min-width:48em) { .info-window__body { padding: 14px 20px 20px } } @media(min-width:64em) { .info-window__body { padding: 10px 40px 20px } } .info-window__title { margin-top: 0; margin-right: 20px; line-height: 1.3; margin-bottom: 6px; white-space: nowrap } @media(min-width:48em) { .info-window__title { white-space: normal } } .info-window__address1, .info-window__address2 { display: none } @media(min-width:48em) { .info-window__address1, .info-window__address2 { display: block; margin-top: 0; margin-bottom: 5px } } .info-window__address2 { margin-bottom: 20px } .info-window__more-info { display: none } @media(min-width:48em) { .info-window__more-info { display: flex; align-items: center } } .info-window__hours { margin: 0 40px 0 0; color: #007a7c; text-decoration: none } .info-window__hours:hover { color: #007a7c } .info-window__service { margin: 0; text-decoration: none; color: #8a8a8a } .info-window__hours-icon { width: 26px; height: 26px; margin-right: 10px; fill: #007a7c } .info-window__gas-bar-icon { width: 26px; height: 26px; margin-right: 10px; fill: #8a8a8a } .info-window__footer { display: flex; flex-wrap: nowrap; justify-content: center; border-bottom: 1px solid #bcbcbc; max-width: 100vw } .info-window__button { width: 50%; border: none; display: inline-flex } @media(max-width:63.99em) { .info-window__button { padding: 10px 0 } } .info-window__button:first-child:not(:only-child) { border-right: 1px solid #bcbcbc } .info-window__button:only-child { width: 100% } .info-window__button-inner { display: flex; margin: 0 auto; align-items: center; justify-content: center } .info-window__caret { fill: #ee3124 } .gm-style-iw { border: none; left: 1px !important; top: 1px !important; height: 109px !important; width: 400px !important; max-width: 100vw !important; overflow-y: auto !important; overflow-x: hidden !important; background-color: #fff; border-radius: 2px 2px 0 0; padding: 0 !important } @media(min-width:48em) { .gm-style-iw { top: 17px !important; height: auto !important } } @media(min-width:64em) { .gm-style-iw { top: 0 !important } } .gm-style-iw>div { overflow: visible !important } .flyers-header, .store-locator-header { position: relative; color: #2c2a29 } .flyers-header__inner, .store-locator-header__inner { position: relative; display: flex; flex-direction: column; justify-content: center; text-align: center; min-height: 210px; padding-top: 20px; padding-bottom: 20px } @media(min-width:48em) { .flyers-header__inner, .store-locator-header__inner { height: 300px } } .flyers-header__title, .store-locator-header__title { margin-top: 0; margin-bottom: 0; color: #ac342a } .flyers-header__subtitle, .store-locator-header__subtitle { margin-top: 10px; margin-bottom: 0; color: #ac342a } .store-locator-header__esso-link { margin-top: 20px } .store-locator-header__insiders .flyers-header__subtitle, .store-locator-header__insiders .flyers-header__title, .store-locator-header__insiders .store-locator-header__subtitle, .store-locator-header__insiders .store-locator-header__title { color: #fff } .store-locator-header__insiders .store-locator-header__esso-link .donate-banner__fake-cta, .store-locator-header__insiders .store-locator-header__esso-link .new-window-link, .store-locator-header__insiders .store-locator-header__esso-link .tile-item__fake-cta, .store-locator-header__insiders .store-locator-header__esso-link .video-tile__fake-cta { color: #f9dada } .store-locator-header__insiders .store-locator-header__esso-link .donate-banner__fake-cta:hover, .store-locator-header__insiders .store-locator-header__esso-link .new-window-link:hover, .store-locator-header__insiders .store-locator-header__esso-link .tile-item__fake-cta:hover, .store-locator-header__insiders .store-locator-header__esso-link .video-tile__fake-cta:hover { color: #fbf1f1 } .search-box { width: 100%; margin-top: 20px } @media(min-width:48em) { .search-box { margin-top: 30px } } .search-box--sticky { border-top: 4px solid #fff } .flyers-header__search-container, .search-box__inner { display: flex; flex-flow: row nowrap; width: 500px; max-width: 100%; border-bottom: 3px solid rgba(0, 0, 0, .1); margin: 0 auto } .search-box__inner--full-width { width: 100% } .flyers-header__input-container, .search-box__input-container { position: relative; flex-grow: 1 } .flyers-header__input-container .sprite, .search-box__input-container .sprite { pointer-events: none; position: absolute; margin-top: 15px; margin-left: 15px } .flyers-header__input, .search-box__input { background-color: #fff; border: none; height: 52px; width: 100%; padding-left: 50px; line-height: normal } @media(max-width:34.365em) { .flyers-header__input, .search-box__input { font-size: .875rem } } .flyers-header__search-button, .search-box__search-button { position: relative; min-width: 0; flex-shrink: 0; z-index: 1 } @media(min-width:48em) { .flyers-header__search-button, .search-box__search-button { min-width: 160px } } .search-box__quick-search-list { position: relative; width: 500px; max-width: 100%; margin: auto; top: -3px } .search-box__quick-search-list-inner { position: absolute; top: 0; left: -1px; right: -1px } .search-box__quick-search-list .result-list { width: 100%; min-height: 60px; list-style-type: none; padding: 0; overflow-y: auto; border: 1px solid #ddd; border-bottom: 4px solid rgba(0, 0, 0, .15) } .search-box__quick-search-list .result-list__inner { padding: 0; margin: 0; background-color: #fff } .search-box__quick-search-list .result-list__item { display: flex; align-items: center; text-align: left; border-bottom: 1px solid #ddd; min-height: 50px; cursor: pointer; padding: 10px 20px } .search-box__quick-search-list .result-list__item:hover { background: #f0f0f0; color: #ee3124 } .search-box__quick-search-list .result-list__item:last-child { border-bottom: none } .search-box__search-error { color: #bb2620; padding-top: 6px } .search-box--sticky .search-box__search-error { position: relative; z-index: -1; background: #fff; margin-top: -3px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, .1) } .store-details { background-color: #fff; overflow: auto } .store-details-content { margin: 0 auto; max-width: 920px } @media(max-width:47.99em) { .store-details-content { padding: 0 } } @media(max-width:47.99em) { .store-details-content .error-tile { padding: 20px 30px } } @media(min-width:48em) { .store-details-content .error-tile, .store-details-section { margin: 64px 0 } } .store-details-section__header { display: none; flex: 0 0 100%; flex-flow: row wrap; justify-content: space-between; align-items: baseline; padding-bottom: 30px } @media(max-width:47.99em) { .store-details-section__header { order: 2 } } @media(min-width:48em) { .store-details-section__header { display: flex } } .store-details-section__header--mobile { display: flex } @media(min-width:48em) { .store-details-section__header--mobile { display: none } } .store-details-section__title { flex-grow: 1; margin: 0 } .store-details-section__content { background-color: #fff; width: 100%; padding-top: 30px; padding-bottom: 30px } @media(max-width:47.99em) { .store-details-section__content { padding-left: 20px; padding-right: 20px; border-top: 1px solid #ddd } } @media(min-width:48em) { .store-details-section__content { display: flex; align-items: flex-start; flex-flow: row nowrap; padding: 40px; background-color: #f0f0f0 } } @media(max-width:47.99em) { .store-details-section__info { order: 3 } } @media(min-width:48em) { .store-details-section__info { width: 50% } } .store-details-section__info--placeholder { min-width: 180px; margin-bottom: 40px } @media(min-width:48em) { .store-details-section__info--placeholder { margin-bottom: 0 } .store-details-section__info--placeholder:nth-child(n+3) { margin-left: 60px } } @media(max-width:47.99em) { .store-details-section__image { order: 1; margin-left: -20px; width: calc(100% + 40px); height: 175px; display: flex; justify-content: center; align-items: center; overflow: hidden } } @media(min-width:48em) { .store-details-section__image { padding-left: 20px; width: 50% } } .store-details-section__image>img { display: block; width: 100% } @media(max-width:47.99em) { .store-details-section__image>img { flex-shrink: 0 } } .store-details-section__info-group { display: flex; width: 100%; margin-bottom: 40px } .store-details-section__info-group:last-child { margin-bottom: 0 } .store-details-section__info-group--placeholder { margin-bottom: 20px } .store-details-section__info-group-info { margin-left: 30px; width: 100% } .store-details-section__info-group-info .sprite { width: 12px; height: 12px; margin-right: 10px } .store-details-section__info-group-info p { margin-top: 0; margin-bottom: .5em } .store-details-section__info-group-info--placeholder { margin-left: 0 } .store-details-section__hours-list { padding: 0; margin: 0; list-style: none } .store-details-section__hours-list-item { margin-bottom: 5px; display: flex; justify-content: space-between; padding-right: 20px } .store-details-section__hours-list-hour-text { text-align: right; margin-left: 14px } .store-details-section__loading-image { width: 100vw; height: 400px } @media(min-width:48em) { .store-details-section__loading-image { width: 400px } } .store-details-section__info-line-placeholder { margin-bottom: 10px } .store-details-section__info-line-placeholder:last-child { margin-bottom: 0 } @media(max-width:47.99em) { .store-details-section--store-information { display: flex; flex-direction: column-reverse } } @media(max-width:47.99em) { .store-details-section--store-information .store-details-section__header { padding-top: 30px } } .store-details-section--store-information .store-details-section__content { display: flex; align-items: flex-start; flex-flow: column } @media(max-width:47.99em) { .store-details-section--store-information .store-details-section__content { padding-top: 0 } } @media(min-width:48em) { .store-details-section--store-information .store-details-section__content { flex-flow: row nowrap } } .store-services-list { display: flex; flex-flow: column; margin: 0; padding: 0; list-style: none } @media(min-width:34.375em) { .store-services-list { flex-flow: row wrap } } .store-services-list__item { width: 50%; margin-bottom: 10px } .store-services-list__item:nth-child(n+4) { display: none } @media(min-width:34.375em) { .store-services-list__item:nth-child(n+4) { display: block } } .store-services-list--expanded .store-services-list__item:nth-child(n+4) { display: block } .refine-search { background-color: #f0f0f0; min-height: 400px } @media(min-width:48em) { .refine-search { padding: 60px 40px } } @media(min-width:64em) { .refine-search { display: flex } } .refine-search__title { display: flex; align-items: flex-end; padding: 20px 20px 16px } @media(min-width:48em) { .refine-search__title { padding: 0 0 16px } } .refine-search__title h3 { font-size: .875rem; margin: 0 } @media(min-width:48em) { .refine-search__title h3 { margin-top: 0 } } .refine-search__title .sprite { margin-right: 10px } @media(min-width:64em) { .refine-search__stores { flex: 0 0 30%; padding-right: 60px; min-width: 360px } } .refine-search__stores-radio-group-single { display: flex; border-bottom: 1px solid #ddd; padding: 0 } .refine-search__stores-radio-group-single:first-child { border-top: 1px solid #ddd } .refine-search__stores-radio-group-single:last-child { border-bottom: 1px solid #ddd } @media(min-width:48em) { .refine-search__stores-radio-group-single, .refine-search__stores-radio-group-single:first-child, .refine-search__stores-radio-group-single:last-child { border-color: #f0f0f0 } } @media(max-width:47.99em) { .refine-search__stores-radio-group-single:nth-child(n+11) { display: none } } @media(max-width:47.99em) { .refine-search__stores-radio-group--expanded .refine-search__stores-radio-group-single:nth-child(n+11) { display: flex } } .refine-search__stores-radio-input { opacity: 0; position: absolute } .refine-search__stores-radio-input-label { position: relative; display: block; padding: 20px 22px; cursor: pointer } @media(min-width:48em) { .refine-search__stores-radio-input-label { padding: 14px 22px } } .refine-search__stores-radio-input-checkmark { display: block; width: 28px; margin: auto; fill: #ee3124 } .refine-search__stores-radio-input:checked+.refine-search__stores-radio-input-label, .refine-search__stores-radio-input:focus+.refine-search__stores-radio-input-label { padding-right: 46px } @media(max-width:34.365em) { .refine-search__stores-radio-input:checked+.refine-search__stores-radio-input-label:before, .refine-search__stores-radio-input:focus+.refine-search__stores-radio-input-label:before { top: 0; bottom: 0; left: 0 } } .refine-search__stores-radio-input:focus+.refine-search__stores-radio-input-label { z-index: 1 } .refine-search__services { padding-bottom: 40px } @media(min-width:48em) { .refine-search__services { padding: 50px 0 0 } } @media(min-width:64em) { .refine-search__services { padding: 0; flex: 0 0 70% } } @media(max-width:47.99em) { .refine-search__services-input-wrapper { position: absolute; top: 0; bottom: 0; left: 20px; height: 18px; margin: auto } } .refine-search__services-radio-group { display: flex; flex-flow: row wrap } .refine-search__services-radio-group-single { position: relative; width: 100%; margin: 10px 0 } @media(max-width:47.99em) { .refine-search__services-radio-group-single { margin: 0; background: #fff; border-bottom: 1px solid #ddd } .refine-search__services-radio-group-single:first-child { border-top: 1px solid #ddd } } @media(min-width:48em) { .refine-search__services-radio-group-single { width: 50%; padding-right: 10px } } @media(min-width:64em) { .refine-search__services-radio-group-single { width: 33% } } @media(min-width:80em) { .refine-search__services-radio-group-single { width: 25% } } @media(max-width:47.99em) { .refine-search__services-radio-group-single:nth-child(n+11) { display: none } } @media(max-width:47.99em) { .refine-search__services-radio-group--expanded .refine-search__services-radio-group-single:nth-child(n+11) { display: flex } } @media(min-width:48em) { .refine-search__services-radio-checkbox-icon { background: #fff } } .refine-search__services-radio-label { width: 100%; display: block } @media(max-width:47.99em) { .refine-search__services-radio-label { padding: 20px 20px 20px 58px } } .refine-search__services-radio-text { width: 100% } @media(max-width:47.99em) { .refine-search__services-radio-text { margin-left: 0 } } @media(min-width:64em) { .refine-search__services .refine-search__title { padding-bottom: 6px } } .refine-search--hidden { display: none } .refine-search__more-button { padding: 20px; border-bottom: 1px solid #ddd } @media(min-width:48em) { .refine-search__more-button { display: none } } .refine-search__more-button-inner { display: flex; align-items: center; justify-content: center } .refine-search__more-button .sprite { width: 10px; height: 10px; margin-right: 10px } .flyer__subheader, .flyers__subheader { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd } .flyer__subheader .container, .flyer__subheader .eflyers-subscription__container, .flyer__subheader .homepage-join__inner, .flyer__subheader .points-days-banners-section, .flyer__subheader .points-days-cta-section, .flyer__subheader .points-days-offers-section, .flyer__subheader .points-days-ts-and-cs__container, .flyer__subheader .weekly-flyer-opt-in__inner, .flyers__subheader .container, .flyers__subheader .eflyers-subscription__container, .flyers__subheader .homepage-join__inner, .flyers__subheader .points-days-banners-section, .flyers__subheader .points-days-cta-section, .flyers__subheader .points-days-offers-section, .flyers__subheader .points-days-ts-and-cs__container, .flyers__subheader .weekly-flyer-opt-in__inner { max-width: none } .flyer__subheader-inner, .flyers__subheader-inner { height: 70px; display: flex; justify-content: space-between; align-items: center } .flyers__results-list { background: #f0f0f0; padding-top: 40px; padding-bottom: 80px } .flyers__results-list--home-stores { padding-bottom: 16px } .flyers__results-list-inner { margin: 0 auto; max-width: 960px; display: flex; flex-flow: row wrap; justify-content: space-between } .flyers__view-more-button { margin-top: 16px } .flyers-error-tile { margin-top: 60px; margin-bottom: 100px } .flyer__subheader { border-top: none; border-bottom: none; margin-top: 4px } @media(min-width:34.375em) { .flyer__subheader-date { display: flex } } .flyer__subheader-date-inner { display: flex; align-items: center; flex-shrink: 0 } .flyer__subheader-date .sprite { margin-right: 20px; height: 30px; width: 100px } .flyer__subheader-date--placeholder { margin-left: 50px } .flyer__state { color: #191919 } .flyer__state--new { color: #007a7c } .flyer__state--expiring-soon { color: #0075ff } .flyer__date { color: #655c6c } .flyer__date:before { content: "•"; margin: 0 8px } .flyer__flipp-container { background: rgba(238, 49, 36, .1); padding: 20px } .flyer__missing-flyers { background-color: #f0f0f0 } .flyer__missing-flyers-content { text-align: center; padding: 120px 50px } .flyer__missing-flyers-text { margin-bottom: 40px } .flyer__missing-flyers-icon { width: 100px; height: auto } @media(min-width:48em) { .flyer__missing-flyers-icon { width: 150px } } .flyers-header__search-container { margin-top: 20px } @media(min-width:48em) { .flyers-header__search-container { margin-top: 30px } } .flyers-header__insiders .flyers-header__subtitle, .flyers-header__insiders .flyers-header__title { color: #fff } .contact-us__container { margin: 0 auto; align-items: center; display: flex; flex-direction: column; padding-bottom: 32px } @media(min-width:64em) { .contact-us__container { width: 840px; padding: 0 0 112px } } @media(min-width:64em) { .contact-us__container--unauthed .call-centre-details { margin-top: 48px } } .contact-us__form-selection { padding-top: 24px } @media(min-width:64em) { .contact-us__form-selection { width: 100%; padding-top: 48px } } .points-days-page .points-days-header { padding: 24px 16px 40px; margin-bottom: 24px } .points-days-page .points-days-header__title { margin: 0 0 8px; color: #ac342a } @media(min-width:48em) { .points-days-page .points-days-header { padding: 50px 100px; margin-bottom: 32px } } @media(min-width:64em) { .points-days-page .points-days-header { margin-bottom: 48px } } @media(min-width:64em) { .points-days-page .points-days-header__text-section { max-width: 595px; margin-left: 100px } } .points-days-page--pre-promo .points-days-cta-section { margin-bottom: 48px } @media(min-width:48em) { .points-days-page--pre-promo .points-days-cta-section { margin-bottom: 64px } } @media(min-width:64em) { .points-days-page--pre-promo .points-days-cta-section { margin-bottom: 96px } } .points-days-page--pre-promo .points-days-mobile { margin-bottom: 48px } .points-days-page--pre-promo .points-days-mobile__title { color: #ac342a } @media(min-width:48em) { .points-days-page--pre-promo .points-days-mobile { margin-bottom: 32px } } @media(min-width:64em) { .points-days-page--pre-promo .points-days-mobile { margin-bottom: 96px } } .points-days-page--pre-promo .points-days-banners-section { margin-bottom: 32px } @media(min-width:48em) { .points-days-page--pre-promo .points-days-banners-section { margin-bottom: 78px } } @media(min-width:64em) { .points-days-page--pre-promo .points-days-banners-section { margin-bottom: 64px } } .points-days-page--promo .points-days-cta-section { margin-bottom: 24px } @media(min-width:48em) { .points-days-page--promo .points-days-cta-section { margin-bottom: 32px } } @media(min-width:64em) { .points-days-page--promo .points-days-cta-section { margin-bottom: 48px } } .points-days-page--promo .points-days-mobile { margin-bottom: 56px } @media(min-width:48em) { .points-days-page--promo .points-days-mobile { margin-bottom: 64px } } @media(min-width:64em) { .points-days-page--promo .points-days-mobile { margin-bottom: 96px } } .points-days-page--promo .points-days-offers-section { margin-bottom: 48px } @media(min-width:48em) { .points-days-page--promo .points-days-offers-section { margin-bottom: 64px } } @media(min-width:64em) { .points-days-page--promo .points-days-offers-section { margin-bottom: 96px } } .points-days-page--promo .points-days-banners-section { margin-bottom: 32px } @media(min-width:48em) { .points-days-page--promo .points-days-banners-section { margin-bottom: 78px } } @media(min-width:64em) { .points-days-page--promo .points-days-banners-section { margin-bottom: 64px } } .shopping-list-page { display: flex; flex-direction: column; flex: 1; background-color: snow } .shopping-list-page .shopping-list-container { width: 100%; padding: 0 16px; margin: -125px auto 40px; z-index: 1 } @media(min-width:48em) { .shopping-list-page .shopping-list-container { margin: -140px auto 40px } } .shopping-list-page .shopping-list { max-width: 792px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; border-radius: 16px; box-shadow: 0 4px 12px rgba(158, 147, 166, .24), 0 4px 6px rgba(158, 147, 166, .24); overflow: hidden } .shopping-list-page .shopping-list__empty img { margin-bottom: 56px } @media(min-width:48em) { .shopping-list-page .shopping-list__empty img { margin-bottom: 60px } } .shopping-list-page .shopping-list__item-list-placeholder { min-height: 200px } .shopping-list-page .shopping-list__item-list-placeholder .circle-loader { margin: 140px auto 0 } .shopping-list-page .shopping-list__actions { display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; width: 100%; max-width: 792px; margin: 16px auto 0 } .shopping-list-page .shopping-list__actions--delete { margin-left: 60px; white-space: nowrap } .shopping-list-page .shopping-list__actions--copy-to-clipboard, .shopping-list-page .shopping-list__actions--delete { text-align: left } .shopping-list-page .shopping-list__actions--copy-to-clipboard-textarea { display: none } .enrol-flow { overflow: hidden; background: snow } .enrol-flow .flow-progress-bar { padding: 24px 0 } @media(min-width:48em) { .enrol-flow .flow-progress-bar { padding: 54px 0 24px } } .enrol-flow .flow-progress-bar--rounded-corners .progress-bar__parent { border-radius: 5px; height: 8px; background-color: #f4f1f6 } .enrol-flow .flow-progress-bar--rounded-corners .progress-bar__parent:not(:first-child) { margin-left: 8px } .enrol-flow .flow-header { padding-bottom: 24px } @media(min-width:48em) { .enrol-flow .flow-header { padding-bottom: 34px } } .enrol-flow .flow-header__title { color: #ac342a } .enrol-flow .flow-header__title sup { font-size: 14px } .enrol-flow .flow-header__sub-title { margin: 24px auto 0; color: #6c221a; max-width: -moz-fit-content; max-width: fit-content } .enrol-flow .flow-header__sub-title sup { font-size: 10px } .enrol-flow .flow-tile { box-shadow: 0 8px 10px rgba(158, 147, 166, .3), 0 6px 30px rgba(158, 147, 166, .12), 0 16px 24px rgba(158, 147, 166, .14); border-radius: 8px; max-width: 792px; padding: 24px 20px } @media(min-width:48em) { .enrol-flow .flow-tile { padding: 40px 20px; width: 575px } } @media(min-width:64em) { .enrol-flow .flow-tile { width: 792px } } .enrol-flow .main-header__background { z-index: 0 } .enrol-flow .flow-body__inner { max-width: 792px } .receipt-terms .utility-content { margin: 0 auto } .receipt-terms__section { margin: 38px 0 80px; padding: 30px 18px; background-color: #fff } .receipt-terms__section p { margin: 0 } @media(min-width:48em) { .receipt-terms__section { margin-top: 70px; padding: 40px } }