693 lines
15 KiB
CSS
693 lines
15 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;
|
|
}
|
|
|
|
.invite-page {
|
|
position: relative;
|
|
width: var(--page-width);
|
|
min-height: 100vh;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
background: var(--blue);
|
|
}
|
|
|
|
.language-switcher {
|
|
position: absolute;
|
|
z-index: 20;
|
|
top: calc(34 * var(--u));
|
|
right: calc(34 * var(--u));
|
|
width: calc(190 * var(--u));
|
|
direction: ltr;
|
|
}
|
|
|
|
.language-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: calc(156 * var(--u));
|
|
height: calc(82 * var(--u));
|
|
margin-left: auto;
|
|
border: calc(2 * var(--u)) solid rgba(255, 232, 184, 0.62);
|
|
border-radius: 999px;
|
|
color: #ffe8b8;
|
|
font-size: calc(34 * var(--u));
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
letter-spacing: 0;
|
|
cursor: pointer;
|
|
background: rgba(25, 9, 1, 0.58);
|
|
box-shadow:
|
|
inset 0 0 calc(18 * var(--u)) rgba(255, 210, 93, 0.18),
|
|
0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.28);
|
|
}
|
|
|
|
.language-menu {
|
|
position: absolute;
|
|
top: calc(94 * var(--u));
|
|
right: 0;
|
|
width: calc(190 * var(--u));
|
|
overflow: hidden;
|
|
border: calc(2 * var(--u)) solid rgba(255, 232, 184, 0.56);
|
|
border-radius: calc(18 * var(--u));
|
|
background: rgba(25, 9, 1, 0.92);
|
|
box-shadow: 0 calc(16 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.34);
|
|
}
|
|
|
|
.language-menu button {
|
|
display: block;
|
|
width: 100%;
|
|
height: calc(58 * var(--u));
|
|
color: #fff5dc;
|
|
font-size: calc(28 * var(--u));
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.language-menu button.is-active {
|
|
color: #ffd25d;
|
|
background: rgba(255, 210, 93, 0.22);
|
|
}
|
|
|
|
.hero {
|
|
position: relative;
|
|
height: calc(1110 * var(--u));
|
|
background-image: url('./assets/hero-bg.png');
|
|
background-repeat: no-repeat;
|
|
background-position: top center;
|
|
background-size: 100% auto;
|
|
}
|
|
|
|
.countdown-card {
|
|
position: absolute;
|
|
left: calc(32 * var(--u));
|
|
bottom: calc(0 * var(--u));
|
|
width: calc(1016 * var(--u));
|
|
height: calc(290 * var(--u));
|
|
background: url('./assets/countdown-panel.png') center / 100% 100% no-repeat;
|
|
}
|
|
|
|
.time-cell {
|
|
position: absolute;
|
|
top: 0;
|
|
left: calc(var(--countdown-center) * var(--u));
|
|
width: calc(180 * var(--u));
|
|
height: 100%;
|
|
transform: translateX(-50%);
|
|
color: var(--gold);
|
|
text-align: center;
|
|
}
|
|
|
|
.time-cell:nth-child(1) {
|
|
--countdown-center: 172;
|
|
}
|
|
|
|
.time-cell:nth-child(2) {
|
|
--countdown-center: 391;
|
|
}
|
|
|
|
.time-cell:nth-child(3) {
|
|
--countdown-center: 614;
|
|
}
|
|
|
|
.time-cell:nth-child(4) {
|
|
--countdown-center: 841;
|
|
}
|
|
|
|
.time-cell strong {
|
|
position: absolute;
|
|
top: calc(107 * var(--u));
|
|
left: 0;
|
|
display: flex;
|
|
width: 100%;
|
|
height: calc(46 * var(--u));
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: calc(56 * var(--u));
|
|
line-height: 1;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.time-cell span {
|
|
position: absolute;
|
|
top: calc(216 * var(--u));
|
|
left: 50%;
|
|
margin: 0;
|
|
transform: translateX(-50%);
|
|
font-size: calc(32 * var(--u));
|
|
line-height: 1.1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ornate-panel {
|
|
position: relative;
|
|
width: calc(1016 * var(--u));
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
background-image:
|
|
url('./assets/panel-top-a.png'), url('./assets/panel-bottom-a.png'),
|
|
url('./assets/panel-middle-a.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%;
|
|
}
|
|
|
|
.ornate-panel > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
h2,
|
|
h3,
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
.ornate-panel h2,
|
|
.invite-copy h2,
|
|
.rank-panel h2 {
|
|
color: var(--gold);
|
|
text-align: center;
|
|
font-weight: 800;
|
|
text-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.subtle {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
text-align: center;
|
|
}
|
|
|
|
.reward-panel {
|
|
height: calc(790 * var(--u));
|
|
margin-top: calc(20 * var(--u));
|
|
padding-top: calc(122 * var(--u));
|
|
background-image: url('./assets/reward-panel-bg.png');
|
|
background-position: center;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.reward-panel h2 {
|
|
font-size: calc(60 * var(--u));
|
|
line-height: 1;
|
|
}
|
|
|
|
.reward-panel .subtle {
|
|
margin-top: calc(22 * var(--u));
|
|
font-size: calc(30 * var(--u));
|
|
}
|
|
|
|
.reward-grid {
|
|
position: relative;
|
|
width: calc(1016 * var(--u));
|
|
height: calc(486 * var(--u));
|
|
margin: calc(28 * var(--u)) auto 0;
|
|
}
|
|
|
|
.reward-item {
|
|
position: absolute;
|
|
top: 0;
|
|
width: calc(486 * var(--u));
|
|
height: calc(486 * var(--u));
|
|
color: var(--gold);
|
|
text-align: center;
|
|
}
|
|
|
|
.reward-item:first-child {
|
|
left: calc(8 * var(--u));
|
|
}
|
|
|
|
.reward-item:last-child {
|
|
left: calc(522 * var(--u));
|
|
}
|
|
|
|
.reward-orb {
|
|
position: absolute;
|
|
z-index: 0;
|
|
display: block;
|
|
inset: 0;
|
|
width: calc(486 * var(--u));
|
|
height: calc(486 * var(--u));
|
|
}
|
|
|
|
.reward-gold {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: calc(178 * var(--u));
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.reward-item strong {
|
|
position: absolute;
|
|
top: calc(98 * var(--u));
|
|
left: calc(290 * var(--u));
|
|
font-size: calc(40 * var(--u));
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.reward-item span {
|
|
position: absolute;
|
|
top: calc(421 * var(--u));
|
|
left: 50%;
|
|
display: block;
|
|
width: calc(360 * var(--u));
|
|
transform: translateX(-50%);
|
|
color: var(--gold);
|
|
font-size: calc(30 * var(--u));
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.plus {
|
|
position: absolute;
|
|
top: calc(207 * var(--u));
|
|
left: calc(472 * var(--u));
|
|
display: block;
|
|
width: calc(71 * var(--u));
|
|
height: calc(71 * var(--u));
|
|
}
|
|
|
|
.invite-copy {
|
|
width: calc(1016 * var(--u));
|
|
margin: calc(42 * var(--u)) auto 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.invite-copy h2 {
|
|
font-size: calc(46 * var(--u));
|
|
line-height: 1;
|
|
}
|
|
|
|
.invite-copy .subtle {
|
|
margin-top: calc(28 * var(--u));
|
|
font-size: calc(30 * var(--u));
|
|
}
|
|
|
|
.invite-fields {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) calc(286 * var(--u));
|
|
gap: calc(24 * var(--u));
|
|
width: calc(760 * var(--u));
|
|
margin: calc(58 * var(--u)) auto 0;
|
|
}
|
|
|
|
.link-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 0;
|
|
height: calc(85 * var(--u));
|
|
padding: 0 calc(28 * var(--u));
|
|
overflow: hidden;
|
|
color: var(--gold);
|
|
font-size: calc(30 * var(--u));
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
background: url('./assets/link-input.svg') center / 100% 100% no-repeat;
|
|
}
|
|
|
|
.invite-code {
|
|
font-weight: 700;
|
|
letter-spacing: calc(1 * var(--u));
|
|
}
|
|
|
|
.invite-actions {
|
|
display: flex;
|
|
width: calc(764 * var(--u));
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: calc(24 * var(--u));
|
|
margin: calc(50 * var(--u)) auto 0;
|
|
}
|
|
|
|
.ornate-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: calc(774 * var(--u));
|
|
height: calc(133 * var(--u));
|
|
margin: 0 auto;
|
|
color: var(--gold);
|
|
font-size: calc(50 * var(--u));
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
text-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.35);
|
|
background: url('./assets/button-active-wide.png') center / 100% 100%
|
|
no-repeat;
|
|
}
|
|
|
|
.ornate-button:active {
|
|
transform: translateY(calc(2 * var(--u)));
|
|
}
|
|
|
|
.invite-actions .ornate-button {
|
|
flex: 0 0 calc(520 * var(--u));
|
|
width: calc(520 * var(--u));
|
|
height: calc(100 * var(--u));
|
|
font-size: calc(42 * var(--u));
|
|
}
|
|
|
|
.invite-actions .small-copy-button {
|
|
flex: 0 0 calc(220 * var(--u));
|
|
width: calc(220 * var(--u));
|
|
height: calc(78 * var(--u));
|
|
font-size: calc(30 * var(--u));
|
|
background-image: url('./assets/claim-active.png');
|
|
}
|
|
|
|
.stats-panel {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
align-content: center;
|
|
gap: calc(34 * var(--u)) calc(36 * var(--u));
|
|
height: calc(520 * var(--u));
|
|
margin-top: calc(62 * var(--u));
|
|
padding: calc(108 * var(--u)) calc(92 * var(--u)) calc(92 * var(--u));
|
|
}
|
|
|
|
.stat {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat strong {
|
|
color: var(--gold);
|
|
font-size: calc(56 * var(--u));
|
|
line-height: 1;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.stat span {
|
|
width: 100%;
|
|
margin-top: calc(12 * var(--u));
|
|
color: var(--gold);
|
|
font-size: calc(30 * var(--u));
|
|
line-height: 1.08;
|
|
}
|
|
|
|
.monthly-panel {
|
|
min-height: calc(1530 * var(--u));
|
|
margin-top: calc(34 * var(--u));
|
|
margin-bottom: calc(32 * var(--u));
|
|
padding: calc(126 * var(--u)) calc(78 * var(--u)) calc(70 * var(--u));
|
|
}
|
|
|
|
.monthly-panel.is-quota {
|
|
min-height: calc(1375 * var(--u));
|
|
}
|
|
|
|
.monthly-panel h2,
|
|
.rank-panel h2 {
|
|
font-size: calc(60 * var(--u));
|
|
line-height: 1;
|
|
}
|
|
|
|
.task-tabs {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: calc(38 * var(--u));
|
|
margin-top: calc(78 * var(--u));
|
|
}
|
|
|
|
.task-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: calc(120 * var(--u));
|
|
padding: 0 calc(36 * var(--u));
|
|
color: var(--gold);
|
|
font-size: calc(30 * var(--u));
|
|
font-weight: 400;
|
|
line-height: 1.15;
|
|
text-align: center;
|
|
text-shadow: 0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.25);
|
|
background: url('./assets/tab-inactive-a.png') center / 100% 100% no-repeat;
|
|
}
|
|
|
|
.task-tab span {
|
|
display: block;
|
|
}
|
|
|
|
.task-tab.is-active {
|
|
background-image: url('./assets/tab-active-a.png');
|
|
}
|
|
|
|
.monthly-panel.is-quota .task-tab {
|
|
background-image: url('./assets/tab-inactive-b.png');
|
|
}
|
|
|
|
.monthly-panel.is-quota .task-tab.is-active {
|
|
background-image: url('./assets/tab-active-b.png');
|
|
}
|
|
|
|
.task-pane {
|
|
display: none;
|
|
}
|
|
|
|
.task-pane.is-active {
|
|
display: block;
|
|
}
|
|
|
|
.timeline {
|
|
position: relative;
|
|
margin-top: calc(76 * var(--u));
|
|
padding-left: calc(114 * var(--u));
|
|
}
|
|
|
|
.timeline::before {
|
|
position: absolute;
|
|
top: calc(40 * var(--u));
|
|
bottom: calc(92 * var(--u));
|
|
left: calc(38 * var(--u));
|
|
width: calc(4 * var(--u));
|
|
content: '';
|
|
background: var(--gold);
|
|
}
|
|
|
|
.milestone {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) calc(220 * var(--u));
|
|
align-items: center;
|
|
min-height: calc(139 * var(--u));
|
|
column-gap: calc(20 * var(--u));
|
|
margin-bottom: calc(30 * var(--u));
|
|
padding: calc(18 * var(--u)) calc(34 * var(--u));
|
|
background: url('./assets/milestone-row.svg') center / 100% 100% no-repeat;
|
|
}
|
|
|
|
.milestone::before {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: calc(-92 * var(--u));
|
|
width: calc(41 * var(--u));
|
|
height: calc(41 * var(--u));
|
|
content: '';
|
|
transform: translateY(-50%);
|
|
background: url('./assets/timeline-node.png') center / contain no-repeat;
|
|
}
|
|
|
|
.milestone.is-current::before {
|
|
background-image: url('./assets/timeline-node-active.png');
|
|
}
|
|
|
|
.milestone > div,
|
|
.quota-card > div {
|
|
min-width: 0;
|
|
}
|
|
|
|
.milestone h3,
|
|
.quota-card h3 {
|
|
color: var(--white);
|
|
font-size: calc(36 * var(--u));
|
|
font-weight: 700;
|
|
line-height: 1.05;
|
|
}
|
|
|
|
.milestone p,
|
|
.quota-card p {
|
|
margin-top: calc(14 * var(--u));
|
|
color: var(--gold);
|
|
font-size: calc(30 * var(--u));
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.copy-task-button {
|
|
margin-top: calc(54 * var(--u));
|
|
}
|
|
|
|
.footnote {
|
|
margin-top: calc(34 * var(--u));
|
|
font-size: calc(30 * var(--u));
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.quota-list {
|
|
display: grid;
|
|
gap: calc(50 * var(--u));
|
|
margin-top: calc(76 * var(--u));
|
|
}
|
|
|
|
.quota-card {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) calc(220 * var(--u));
|
|
align-items: center;
|
|
min-height: calc(169 * var(--u));
|
|
padding: calc(24 * var(--u)) calc(30 * var(--u)) calc(22 * var(--u))
|
|
calc(36 * var(--u));
|
|
background: url('./assets/task-row.svg') center / 100% 100% no-repeat;
|
|
}
|
|
|
|
.claim-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: calc(220 * var(--u));
|
|
height: calc(60 * var(--u));
|
|
color: var(--gold);
|
|
font-size: calc(30 * var(--u));
|
|
font-weight: 700;
|
|
background: url('./assets/claim-inactive.png') center / 100% 100% no-repeat;
|
|
}
|
|
|
|
.claim-button.is-ready {
|
|
background-image: url('./assets/claim-active.png');
|
|
}
|
|
|
|
.claim-button:disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
.task-empty {
|
|
margin: calc(76 * var(--u)) auto calc(50 * var(--u));
|
|
color: var(--gold);
|
|
font-size: calc(32 * var(--u));
|
|
line-height: 1.3;
|
|
text-align: center;
|
|
}
|
|
|
|
.rank-panel {
|
|
min-height: calc(5124 * var(--u));
|
|
margin-top: calc(42 * var(--u));
|
|
margin-bottom: calc(28 * var(--u));
|
|
padding: calc(126 * var(--u)) calc(68 * var(--u)) calc(72 * var(--u));
|
|
background-image:
|
|
url('./assets/panel-top-b.png'), url('./assets/panel-bottom-b.png'),
|
|
url('./assets/panel-middle-b.png');
|
|
}
|
|
|
|
.rank-list {
|
|
display: grid;
|
|
gap: calc(10 * var(--u));
|
|
margin-top: calc(72 * var(--u));
|
|
}
|
|
|
|
.rank-row {
|
|
display: grid;
|
|
grid-template-columns:
|
|
calc(154 * var(--u)) calc(108 * var(--u)) minmax(0, 1fr)
|
|
auto;
|
|
align-items: center;
|
|
min-height: calc(149 * var(--u));
|
|
padding: 0 calc(42 * var(--u)) 0 calc(28 * var(--u));
|
|
background: url('./assets/rank-row.svg') center / 100% 100% no-repeat;
|
|
}
|
|
|
|
.rank-no {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
color: var(--white);
|
|
font-size: calc(36 * var(--u));
|
|
line-height: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.rank-medal {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
width: calc(74 * var(--u));
|
|
height: calc(72 * var(--u));
|
|
object-fit: contain;
|
|
justify-self: center;
|
|
}
|
|
|
|
.rank-avatar {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
width: calc(108 * var(--u));
|
|
height: calc(108 * var(--u));
|
|
border: calc(2 * var(--u)) solid #ffebbb;
|
|
border-radius: 999px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.rank-name {
|
|
grid-column: 3;
|
|
grid-row: 1;
|
|
padding-left: calc(24 * var(--u));
|
|
overflow: hidden;
|
|
color: var(--white);
|
|
font-size: calc(36 * var(--u));
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.rank-score {
|
|
grid-column: 4;
|
|
grid-row: 1;
|
|
color: var(--white);
|
|
font-size: calc(36 * var(--u));
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.rank-row > span:not(.rank-no):not(.rank-score) {
|
|
display: none;
|
|
}
|
|
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|