1  <script lang="ts">
  2      import AppleArcadeLogo from '~/components/icons/AppleArcadeLogo.svg';
  3      import { getI18n } from '~/stores/i18n';
  4  
  5      const i18n = getI18n();
  6  </script>
  7  
  8  <aside>
  9      <div class="arcade-banner">
 10          <div class="metadata-container">
 11              <div class="logo-container">
 12                  <AppleArcadeLogo />
 13              </div>
 14  
 15              <h2>
 16                  {$i18n.t('ASE.Web.AppStore.Arcade.UpsellFooter.LineOne')}
 17                  <br />
 18                  {$i18n.t('ASE.Web.AppStore.Arcade.UpsellFooter.LineTwo')}
 19                  {$i18n.t('ASE.Web.AppStore.Arcade.UpsellFooter.LineThree')}
 20              </h2>
 21  
 22              <a href="https://www.apple.com/apple-arcade/" target="_blank">
 23                  <span>
 24                      {$i18n.t(
 25                          'ASE.Web.AppStore.Arcade.UpsellFooter.CallToActionText',
 26                      )}
 27                  </span>
 28                  {$i18n.t(
 29                      'ASE.Web.AppStore.Arcade.UpsellFooter.CallToActionDisclaimerMark',
 30                  )}
 31              </a>
 32          </div>
 33      </div>
 34  </aside>
 35  
 36  <style lang="scss">
 37      @use '@amp/web-shared-styles/app/core/globalvars' as *;
 38      @use '@amp/web-shared-styles/sasskit-stylekit/ac-sasskit-config';
 39      @use 'ac-sasskit/core/locale' as *;
 40      @use 'ac-sasskit/modules/viewportcontent/core' as *;
 41      @use 'amp/stylekit/core/viewports' as *;
 42  
 43      .logo-container {
 44          width: 62px;
 45          margin-bottom: 10px;
 46          line-height: 0;
 47  
 48          @media (--range-xsmall-only) {
 49              width: 48px;
 50              margin-bottom: 8px;
 51          }
 52      }
 53  
 54      .logo-container :global(path) {
 55          color: var(--systemPrimary-onDark);
 56      }
 57  
 58      .metadata-container {
 59          display: flex;
 60          flex-direction: column;
 61          justify-content: center;
 62          width: 60%;
 63          height: 100%;
 64          padding: 0 20px;
 65  
 66          @media (--range-xsmall-only) {
 67              align-items: flex-start;
 68              justify-content: center;
 69          }
 70      }
 71  
 72      h2 {
 73          margin-bottom: 10px;
 74          font: var(--title-1-emphasized);
 75  
 76          @media (--range-xsmall-only) {
 77              margin-bottom: 8px;
 78              font: var(--title-3-emphasized);
 79          }
 80      }
 81  
 82      a {
 83          display: flex;
 84          font: var(--title-3-emphasized);
 85  
 86          @media (--range-xsmall-only) {
 87              font: var(--body-emphasized);
 88          }
 89      }
 90  
 91      a::after {
 92          content: '↗';
 93          font-weight: normal;
 94          margin-inline-start: 4px;
 95      }
 96  
 97      a:hover {
 98          text-decoration: none;
 99      }
100  
101      a:hover span {
102          text-decoration: underline;
103      }
104  
105      aside {
106          width: 100%;
107          max-width: calc(viewport-content-for(xlarge));
108          height: 152px;
109          margin: 0 auto 32px;
110          padding: 0 var(--bodyGutter);
111  
112          @media (--range-xsmall-only) {
113              max-width: 100%;
114              padding: 0;
115          }
116      }
117  
118      .arcade-banner {
119          width: 100%;
120          height: 100%;
121          color: var(--systemPrimary-onDark);
122          border-radius: var(--global-border-radius-medium);
123          background: #000;
124          background-repeat: no-repeat;
125          background-position: right;
126          background-size: contain;
127  
128          @media (prefers-color-scheme: dark) {
129              border: 1px solid var(--systemQuaternary-onDark);
130          }
131  
132          @media (--range-xsmall-only) {
133              border-radius: 0;
134              background-image: url('/assets/images/arcade/upsell/banner-692@1x_LTR.png');
135              background-size: cover;
136  
137              @include rtl {
138                  background-image: url('/assets/images/arcade/upsell/banner-692@1x_RTL.png');
139                  background-position: left;
140              }
141  
142              @media (resolution >= 192dpi) {
143                  background-image: url('/assets/images/arcade/upsell/banner-692@2x_LTR.png');
144  
145                  @include rtl {
146                      background-image: url('/assets/images/arcade/upsell/banner-692@2x_RTL.png');
147                      background-position: left;
148                  }
149              }
150          }
151  
152          @media (--range-small-only) {
153              background-image: url('/assets/images/arcade/upsell/banner-692@1x_LTR.png');
154  
155              @include rtl {
156                  background-image: url('/assets/images/arcade/upsell/banner-692@1x_RTL.png');
157                  background-position: left;
158              }
159  
160              @media (resolution >= 192dpi) {
161                  background-image: url('/assets/images/arcade/upsell/banner-692@2x_LTR.png');
162  
163                  @include rtl {
164                      background-image: url('/assets/images/arcade/upsell/banner-692@2x_RTL.png');
165                      background-position: left;
166                  }
167              }
168          }
169  
170          @media (--range-medium-up) {
171              background-image: url('/assets/images/arcade/upsell/banner-980@1x_LTR.png');
172  
173              @include rtl {
174                  background-image: url('/assets/images/arcade/upsell/banner-980@1x_RTL.png');
175                  background-position: left;
176              }
177  
178              @media (resolution >= 192dpi) {
179                  background-image: url('/assets/images/arcade/upsell/banner-980@2x_LTR.png');
180  
181                  @include rtl {
182                      background-image: url('/assets/images/arcade/upsell/banner-980@2x_RTL.png');
183                      background-position: left;
184                  }
185              }
186          }
187      }
188  </style>