|
|
@@ -0,0 +1,31996 @@
|
|
|
+.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: 28px
|
|
|
+}
|
|
|
+
|
|
|
+@media(min-width:48em) {
|
|
|
+ .homepage-hero.default-hero {
|
|
|
+ padding-top: 40px
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media(min-width:64em) {
|
|
|
+ .homepage-hero.default-hero {
|
|
|
+ padding-top: 56px
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.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: 1.5rem
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@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
|
|
|
+ }
|
|
|
+}
|
