301 lines
6.2 KiB
CSS
301 lines
6.2 KiB
CSS
:root {
|
|
--page-width: min(100vw, 430px);
|
|
--u: calc(var(--page-width) / 1080);
|
|
--blue: #071954;
|
|
--gold: #f6e0b2;
|
|
--white: #fff;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
min-height: 100%;
|
|
margin: 0;
|
|
background: #030b24;
|
|
color: var(--white);
|
|
font-family:
|
|
'Source Han Sans SC', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
|
|
}
|
|
|
|
button {
|
|
border: 0;
|
|
padding: 0;
|
|
color: inherit;
|
|
font: inherit;
|
|
background: transparent;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.landing-page {
|
|
position: relative;
|
|
width: var(--page-width);
|
|
min-height: calc(2884 * var(--u));
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
background: var(--blue);
|
|
}
|
|
|
|
.landing-page::before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: calc(-83 * var(--u));
|
|
width: calc(1244 * var(--u));
|
|
height: calc(2210 * var(--u));
|
|
content: '';
|
|
opacity: 0.5;
|
|
background: url('./assets/hero-bg.png') center top / cover no-repeat;
|
|
}
|
|
|
|
.landing-page > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero-copy {
|
|
padding-top: calc(150 * var(--u));
|
|
text-align: center;
|
|
}
|
|
|
|
.avatar-frame {
|
|
width: calc(260 * var(--u));
|
|
height: calc(260 * var(--u));
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
border: calc(5 * var(--u)) solid #ffebbb;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.avatar-frame img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.hero-copy h1 {
|
|
width: calc(860 * var(--u));
|
|
margin: calc(73 * var(--u)) auto 0;
|
|
color: var(--white);
|
|
font-size: calc(60 * var(--u));
|
|
font-weight: 500;
|
|
line-height: calc(80 * var(--u));
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-copy h1 span {
|
|
display: inline;
|
|
}
|
|
|
|
.hero-copy h1 span:last-child {
|
|
display: block;
|
|
}
|
|
|
|
.hero-copy p {
|
|
margin: calc(52 * var(--u)) auto 0;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-size: calc(40 * var(--u));
|
|
font-weight: 400;
|
|
line-height: calc(60 * var(--u));
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.gift-panel {
|
|
position: relative;
|
|
width: calc(1016 * var(--u));
|
|
height: calc(786 * var(--u));
|
|
margin: calc(52 * var(--u)) auto 0;
|
|
overflow: hidden;
|
|
background-image:
|
|
url('./assets/panel-top.png'), url('./assets/panel-bottom.png'),
|
|
url('./assets/panel-middle.png');
|
|
background-repeat: no-repeat, no-repeat, no-repeat;
|
|
background-position:
|
|
top center,
|
|
bottom center,
|
|
center center;
|
|
background-size:
|
|
100% auto,
|
|
100% auto,
|
|
100% 100%;
|
|
}
|
|
|
|
.gift-panel h2 {
|
|
margin: calc(128 * var(--u)) 0 0;
|
|
color: var(--gold);
|
|
font-size: calc(60 * var(--u));
|
|
font-weight: 500;
|
|
line-height: calc(60 * var(--u));
|
|
text-align: center;
|
|
}
|
|
|
|
.gift-subtitle {
|
|
margin: calc(28 * var(--u)) 0 0;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-size: calc(30 * var(--u));
|
|
font-weight: 400;
|
|
line-height: calc(30 * var(--u));
|
|
text-align: center;
|
|
}
|
|
|
|
.gift-reward {
|
|
position: absolute;
|
|
top: calc(188 * var(--u));
|
|
left: calc(297 * var(--u));
|
|
width: calc(486 * var(--u));
|
|
height: calc(486 * var(--u));
|
|
}
|
|
|
|
.reward-orb {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.gold-stack {
|
|
position: absolute;
|
|
top: calc(184 * var(--u));
|
|
left: calc(155.5 * var(--u));
|
|
display: block;
|
|
width: calc(176 * var(--u));
|
|
height: auto;
|
|
}
|
|
|
|
.gift-reward strong {
|
|
position: absolute;
|
|
top: calc(96 * var(--u));
|
|
left: calc(318 * var(--u));
|
|
color: var(--gold);
|
|
font-size: calc(40 * var(--u));
|
|
font-weight: 500;
|
|
line-height: calc(36 * var(--u));
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.gift-footnote {
|
|
position: absolute;
|
|
top: calc(651 * var(--u));
|
|
left: 50%;
|
|
width: calc(720 * var(--u));
|
|
margin: 0;
|
|
color: var(--gold);
|
|
font-size: calc(34 * var(--u));
|
|
font-weight: 500;
|
|
line-height: calc(40 * var(--u));
|
|
text-align: center;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.preview-carousel {
|
|
width: 100%;
|
|
margin-top: calc(40 * var(--u));
|
|
}
|
|
|
|
.preview-scroll {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.preview-scroll::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.preview-track {
|
|
display: flex;
|
|
width: max-content;
|
|
gap: calc(40 * var(--u));
|
|
padding: 0 calc(32 * var(--u));
|
|
animation: inviteLandingScroll 18s linear infinite;
|
|
}
|
|
|
|
.preview-scroll:hover .preview-track,
|
|
.preview-scroll:active .preview-track,
|
|
.preview-scroll.is-dragging .preview-track {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
.preview-card {
|
|
flex: 0 0 auto;
|
|
width: calc(564 * var(--u));
|
|
height: calc(1002 * var(--u));
|
|
overflow: hidden;
|
|
border-radius: calc(40 * var(--u));
|
|
}
|
|
|
|
.preview-card img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.download-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: calc(1079 * var(--u));
|
|
height: calc(186 * var(--u));
|
|
margin: calc(60 * var(--u)) 0 0 calc(1 * var(--u));
|
|
color: var(--gold);
|
|
font-size: calc(50 * var(--u));
|
|
font-weight: 700;
|
|
line-height: calc(70 * var(--u));
|
|
text-align: center;
|
|
text-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.35);
|
|
background: url('./assets/cta-button.png') center / 100% 100% no-repeat;
|
|
}
|
|
|
|
.download-button:active {
|
|
transform: translateY(calc(2 * var(--u)));
|
|
}
|
|
|
|
.toast {
|
|
position: fixed;
|
|
z-index: 20;
|
|
left: 50%;
|
|
bottom: calc(80 * var(--u));
|
|
max-width: calc(780 * var(--u));
|
|
padding: calc(20 * var(--u)) calc(30 * var(--u));
|
|
border-radius: calc(18 * var(--u));
|
|
opacity: 0;
|
|
color: #fff;
|
|
font-size: calc(28 * var(--u));
|
|
line-height: 1.25;
|
|
text-align: center;
|
|
pointer-events: none;
|
|
background: rgba(0, 0, 0, 0.72);
|
|
transform: translate(-50%, calc(16 * var(--u)));
|
|
transition:
|
|
opacity 0.18s ease,
|
|
transform 0.18s ease;
|
|
}
|
|
|
|
.toast.show {
|
|
opacity: 1;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
|
|
@keyframes inviteLandingScroll {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
to {
|
|
transform: translateX(calc(-1 * var(--loop-width, 1208 * var(--u))));
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.preview-track {
|
|
animation: none;
|
|
}
|
|
}
|