-
-
-
+
+
@@ -272,16 +261,17 @@
{{ user.purchased.plan.consecutive.count }}
-
-
-
+
@@ -289,77 +279,64 @@
{{ gemCap }}
-
- {{ $t('gemCap') }}
-
-
-
-
-
-
-
-
- {{ nextHourGlass }}
-
-
-
- {{ $t('nextHourglass') }}*
+
+ {{ $t('monthlyGemsLabel') }}
- *{{ $t('nextHourglassDescription') }}
+
+
+
+ {{ nextHourGlass }}
+
+
+ {{ $t('nextHourglass') }}
+
+
+
-
-
-
-
- {{ $t('giftSubscriptionText4') }}
+ {{ $t('nextHourglassDescription') }}
-
-
- {{ $t('cancelYourSubscription') }}
-
-
- {{ $t('cancelSubInfoGroupPlan') }}
-
-
-
-
-
-
- {{ $t('cancelSub') }}
-
+
+ {{ $t('cancelYourSubscription') }}
+
+
+ {{ $t('cancelSubInfoGroupPlan') }}
+
+
@@ -383,7 +360,7 @@
{{ $t('giftSubscription') }}
-
@@ -408,7 +385,7 @@
p {
margin-bottom: 0px;
- line-height: 24px;
+ line-height: 1.71;
}
small {
@@ -421,21 +398,15 @@
font-size: 16px;
}
- .block-header {
- letter-spacing: 1ch;
- font-weight: 700;
- top: 24px;
- }
-
- .btn-secondary {
+ .btn-gift {
width: 448px;
}
.btn-update-card {
- width: 12.5rem;
- height: 2.5rem;
border-radius: 4px;
font-size: 14px;
+ padding: 4px 12px;
+ width: fit-content;
}
.cancel-card {
@@ -458,19 +429,45 @@
border: 1px solid $green-50;
}
- .final-header {
- margin-bottom: 70px;
- }
-
.flip {
- filter: flipH;
transform: scaleX(-1);
}
- .gradient-swoop {
- background-image: url('@/assets/svg/gradient-swoop.svg');
- height: 274px;
- width: 1440px;
+ .full-banner {
+ height: 180px;
+ width: 100vw;
+ }
+
+ @media only screen and (max-width: 922px) {
+ .full-banner {
+ width: 100%;
+ }
+ }
+
+ .header-mid {
+ width: 347px;
+ }
+
+ .header-top {
+ letter-spacing: 1ch;
+ font-weight: 700;
+ }
+
+ .hourglass-preview {
+ height: 92px;
+ border-radius: 8px;
+ font-weight: 700;
+
+ .white {
+ font-family: 'Roboto Condensed';
+ font-size: 20px;
+ line-height: 1.4;
+ }
+
+ .purple-600 {
+ font-size: 12px;
+ line-height: 1.33;
+ }
}
.header-mini {
@@ -478,6 +475,18 @@
font-weight: bold;
}
+ .justify-content-around {
+ gap: 16px;
+ }
+
+ .left-0 {
+ left: 0px;
+ }
+
+ .left-24 {
+ left: 24px;
+ }
+
.lh-71 {
line-height: 1.71;
}
@@ -487,6 +496,12 @@
color: $gray-200;
}
+ .next-hourglass-description {
+ font-size: 12px;
+ font-style: italic;
+ line-height: 1.33;
+ }
+
.number-heavy {
font-size: 20px;
font-weight: bold;
@@ -494,14 +509,23 @@
color: $gray-50;
}
- .position-absolute {
- position: absolute;
- }
-
.purple-bar {
background-color: $purple-400;
height: 1px;
- width: 432px;
+ width: 50%;
+ max-width: 432px;
+ }
+
+ .purple-gradient {
+ background-image: linear-gradient($purple-300, $purple-200);
+ }
+
+ .right-0 {
+ right: 0px;
+ }
+
+ .right-24 {
+ right: 24px;
}
.round-container {
@@ -512,18 +536,17 @@
margin-bottom: 16px;
}
- .stats-label {
- font-size: 12px;
- color: $gray-100;
- margin-top: 6px;
- font-weight: bold;
- line-height: 1.33;
+ .stats-card {
+ border-radius: 8px;
+ width: 192px;
+ height: 88px;
}
- .stats-spacer {
- width: 1px;
- height: 3rem;
- background-color: $gray-500;
+ .stats-label {
+ font-size: 12px;
+ margin-top: 6px;
+ font-weight: 700;
+ line-height: 1.33;
}
.sub-benefit {
@@ -532,6 +555,12 @@
border-radius: 8px;
}
+ .sub-card {
+ border-radius: 8px;
+ box-shadow: 0px 1px 3px 0px rgba($black, 0.12), 0px 1px 2px 0px rgba($black, 0.24);
+ width: 448px;
+ }
+
.svg-amazon-pay {
width: 208px;
}
@@ -549,7 +578,7 @@
}
.svg-check {
- width: 36px;
+ width: 48px;
color: $white;
}
@@ -627,37 +656,13 @@
height: 40px;
}
+ .svg-stripe {
+ width: 96px;
+ }
+
.w-330p {
width: 330px;
}
-
- .w-55 {
- width: 55%;
- }
-
- .nextHourglassDescription {
- font-size: 12px;
- font-style: italic;
- line-height: 1.33;
- color: $gray-100;
- margin-left: 100px;
- margin-right: 100px;
- }
-
- .justify-content-evenly {
- justify-content: space-evenly;
- }
-
- .thanks-for-support {
- font-size: 12px;
- line-height: 1.33;
- text-align: center;
- color: $gray-100;
- }
-
- .stat-column {
- width: 33%;
- }