packages/pass/components/Onboarding/BlackFriday2024Offer.scss

   1 @import '~@proton/styles/scss/lib';
   2
   3 .pass-bf2024-banner {
   4         --banner-background-color: #08031f;
   5         --banner-ornament-size: #{em(375)};
   6         --offer-background-color: rgb(250 204 21 / 1);
   7         --offer-text-color: var(--text-invert);
   8         --interaction-norm-contrast: white !important; /* close button */
   9
  10         background: var(--banner-background-color) !important;
  11         color: var(--text-norm);
  12
  13         &::before {
  14                 content: '';
  15                 position: absolute;
  16                 inset-block-start: calc(-0.825 * var(--banner-ornament-size));
  17                 inset-inline-start: calc(65% - var(--banner-ornament-size) / 2);
  18                 inline-size: var(--banner-ornament-size);
  19                 block-size: var(--banner-ornament-size);
  20                 border-radius: 50%;
  21                 background-color: var(--primary);
  22         }
  23
  24         &--badge {
  25                 background-color: var(--primary);
  26         }
  27
  28         &--offer {
  29                 background-color: var(--offer-background-color);
  30                 color: var(--offer-text-color);
  31                 margin-block: 0;
  32                 margin-inline: 0.15em;
  33         }
  34
  35         &--btn {
  36                 --btn-text-color: #08031f;
  37                 --btn-background-color: white;
  38
  39                 &--deal {
  40                         --text-norm: var(--offer-text-color);
  41                         --btn-background-color: var(--offer-background-color);
  42                 }
  43
  44                 &#{&} {
  45                         &,
  46                         &:hover,
  47                         &:focus {
  48                                 background: var(--btn-background-color) !important;
  49                                 border: 0;
  50                                 color: var(--btn-text-color) !important;
  51                                 outline: 2px solid rgb(255 255 255 / 0.3) !important;
  52                         }
  53                 }
  54         }
  55 }
  56
  57 .pass-light {
  58         .pass-bf2024-banner {
  59                 --banner-background-color: #5817d1;
  60
  61                 color: var(--text-invert);
  62         }
  63 }