hyapp-h5/activity/agency-opening/style.css

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --app-scale: 1;
    --design-scale: 0.3472222222;
    --stage-height: 4620px;
    --gold: #fcefc2;
    --gold-strong: #ffb56b;
    --deep-purple: #1a0029;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    background: #12001d;
    color: var(--gold);
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

button {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    outline: none;
}

button:focus-visible {
    outline: 3px solid rgba(255, 239, 194, 0.72);
    outline-offset: 4px;
}

.app-viewport {
    position: relative;
    width: 375px;
    min-height: 1605px;
    margin: 0 auto;
    transform: scale(var(--app-scale));
    transform-origin: top center;
}

.page,
.stage-wrap {
    position: relative;
    width: 375px;
    min-height: 1605px;
    overflow: hidden;
    background: var(--deep-purple);
}

.stage-wrap {
    height: 1605px;
}

.stage {
    position: absolute;
    left: 0;
    top: 0;
    width: 1080px;
    height: var(--stage-height);
    overflow: hidden;
    transform: scale(var(--design-scale));
    transform-origin: top left;
    background: var(--deep-purple);
}

.stage > * {
    position: absolute;
    z-index: 1;
}

.bg-hall {
    left: 0;
    width: 1080px;
    height: 1919px;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
    z-index: 0;
}

.bg-hall-hero {
    top: 94px;
    -webkit-mask: url('./assets/mask-bg-hero.svg') 0 0 / 1080px 1919px no-repeat;
    mask: url('./assets/mask-bg-hero.svg') 0 0 / 1080px 1919px no-repeat;
}

.bg-hall-top {
    top: 1095px;
    opacity: 0.4;
    -webkit-mask: url('./assets/mask-bg-top.svg') 0 0 / 1080px 1919px no-repeat;
    mask: url('./assets/mask-bg-top.svg') 0 0 / 1080px 1919px no-repeat;
}

.bg-hall-repeat-a {
    top: 2233px;
    opacity: 0.4;
    -webkit-mask: url('./assets/mask-bg-repeat.svg') 0 0 / 1080px 1919px
        no-repeat;
    mask: url('./assets/mask-bg-repeat.svg') 0 0 / 1080px 1919px no-repeat;
}

.bg-hall-repeat-b {
    top: 3163px;
    opacity: 0.4;
    -webkit-mask: url('./assets/mask-bg-repeat.svg') 0 0 / 1080px 1919px
        no-repeat;
    mask: url('./assets/mask-bg-repeat.svg') 0 0 / 1080px 1919px no-repeat;
}

.top-fade {
    left: 0;
    top: 0;
    width: 1080px;
    height: 235px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(180deg, #1a0029 41%, rgba(26, 0, 41, 0));
}

.language-tabs {
    left: 18px;
    top: 46px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    align-items: center;
    width: 1026px;
    height: 70px;
    direction: ltr;
    z-index: 6;
}

.language-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 57px;
    padding: 0 10px;
    border: 2px solid #fde5cc;
    border-radius: 39px;
    background: linear-gradient(180deg, #4d145a, #210a34);
    color: #ffdfaf;
    font-size: 22px;
    font-weight: 800;
    line-height: 27px;
    text-align: center;
    text-shadow: 0 1px 7px rgba(87, 16, 110, 0.82);
}

.language-tab span {
    position: relative;
    z-index: 1;
}

.language-tab.is-active {
    background: linear-gradient(180deg, #6b2a72, #2b0c46);
    color: #fff8e4;
    box-shadow:
        inset 0 0 18px rgba(255, 222, 151, 0.2),
        0 0 14px rgba(255, 203, 116, 0.22);
}

.hero {
    inset: 0 auto auto 0;
    width: 1080px;
    height: 1339px;
}

.hero-title {
    position: absolute;
    left: 56px;
    top: 107px;
    width: 968px;
    height: 425px;
    object-fit: fill;
    pointer-events: none;
}

.hero-subtitle {
    position: absolute;
    left: 345px;
    top: 479px;
    margin: 0;
    color: #741eb5;
    font-size: 30px;
    font-weight: 800;
    line-height: 38px;
    text-transform: capitalize;
    white-space: nowrap;
}

.hero-shadow {
    position: absolute;
    left: 182px;
    top: 1257px;
    width: 698px;
    height: 89px;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.hero-cat {
    position: absolute;
    left: 210px;
    top: 519px;
    width: 642px;
    height: 820px;
    object-fit: cover;
    pointer-events: none;
}

.countdown {
    left: 0;
    top: 1338px;
    width: 1080px;
    height: 160px;
    z-index: 3;
}

.count-cell {
    position: absolute;
    top: 0;
    width: 201px;
    height: 160px;
}

.count-days {
    left: 87px;
}

.count-hours {
    left: 321px;
}

.count-minutes {
    left: 555px;
}

.count-seconds {
    left: 789px;
}

.count-cell img {
    position: absolute;
    inset: 0;
    width: 201px;
    height: 160px;
    object-fit: fill;
    pointer-events: none;
}

.count-cell strong,
.count-cell span,
.section-title h2,
.apply-button span,
.qualification-card strong,
.reward-head strong,
.record-row strong {
    background: linear-gradient(180deg, var(--gold) 50%, var(--gold-strong));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.count-cell strong {
    position: absolute;
    left: 0;
    top: 32px;
    width: 201px;
    font-size: 52px;
    font-weight: 900;
    line-height: 52px;
    text-align: center;
}

.count-cell span {
    position: absolute;
    left: 0;
    top: 92px;
    width: 201px;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    text-align: center;
    white-space: nowrap;
}

.opening-section {
    left: 0;
    width: 1080px;
}

.qualification-section {
    top: 1498px;
    height: 735px;
}

.rewards-section {
    top: 2245px;
    height: 800px;
}

.rules-section {
    top: 3057px;
    height: 768px;
}

.record-section {
    top: 3837px;
    height: 672px;
}

.section-title {
    position: absolute;
    left: 93px;
    top: 0;
    width: 895px;
    height: 189px;
    z-index: 4;
}

.section-title img {
    position: absolute;
    inset: 0;
    width: 895px;
    height: 189px;
    object-fit: fill;
    pointer-events: none;
}

.section-title h2 {
    position: absolute;
    left: 0;
    top: 101px;
    width: 895px;
    margin: 0;
    font-size: 42px;
    font-weight: 900;
    line-height: 44px;
    text-align: center;
    text-transform: capitalize;
    white-space: nowrap;
}

.ornate-panel {
    position: absolute;
    left: 19px;
    width: 1042px;
    height: var(--panel-height);
    pointer-events: none;
    z-index: 1;
}

.frame-qualification {
    top: 72px;
    --bottom-source-top: -561px;
    --panel-height: 663px;
}

.frame-rewards {
    top: 72px;
    --bottom-source-top: -496px;
    --panel-height: 728px;
}

.frame-rules {
    top: 72px;
    --bottom-source-top: -528px;
    --panel-height: 696px;
}

.frame-record {
    top: 72px;
    --bottom-source-top: -624px;
    --panel-height: 600px;
}

.frame-piece {
    position: absolute;
    left: 0;
    width: 1042px;
    height: 1224px;
    background-size: 1042px 1224px;
    background-repeat: no-repeat;
}

.frame-piece-top {
    top: 0;
    background-image: url('./assets/frame-top-source.png');
    -webkit-mask: url('./assets/frame-top-mask.svg') 0 0 / 1042px 495px
        no-repeat;
    mask: url('./assets/frame-top-mask.svg') 0 0 / 1042px 495px no-repeat;
}

.frame-piece-bottom {
    top: var(--bottom-source-top);
    background-image: url('./assets/frame-bottom-source.png');
    -webkit-mask: url('./assets/frame-bottom-mask.svg') 0 867px / 1042px 357px
        no-repeat;
    mask: url('./assets/frame-bottom-mask.svg') 0 867px / 1042px 357px no-repeat;
}

.qualification-grid {
    position: absolute;
    left: 109px;
    top: 235px;
    display: grid;
    grid-template-columns: repeat(3, 270px);
    gap: 20px;
    z-index: 3;
}

.qualification-card {
    position: relative;
    width: 270px;
    height: 154px;
    border: 2px solid #fde5cc;
    border-radius: 26px;
    background: linear-gradient(180deg, #4d145a, #210a34);
}

.qualification-card p {
    position: absolute;
    left: 0;
    top: 34px;
    width: 270px;
    margin: 0;
    color: var(--gold);
    font-size: 26px;
    font-weight: 500;
    line-height: 30px;
    text-align: center;
}

.qualification-card strong {
    position: absolute;
    left: 0;
    top: 88px;
    width: 270px;
    font-size: 38px;
    font-weight: 900;
    line-height: 40px;
    text-align: center;
    white-space: nowrap;
}

.qualification-card .status-icon {
    position: absolute;
    right: -14px;
    bottom: -12px;
    display: none;
    width: 70px;
    height: 70px;
    object-fit: contain;
    pointer-events: none;
}

.qualification-card.is-qualified .status-icon {
    display: block;
}

.apply-button {
    position: absolute;
    left: 217px;
    top: 420px;
    width: 646px;
    height: 137px;
    z-index: 4;
}

.apply-button img {
    position: absolute;
    inset: 0;
    width: 646px;
    height: 137px;
    object-fit: fill;
    pointer-events: none;
}

.apply-button span {
    position: absolute;
    left: 0;
    top: 50px;
    width: 646px;
    font-size: 36px;
    font-weight: 900;
    line-height: 38px;
    text-align: center;
    white-space: nowrap;
}

.apply-button.is-loading {
    filter: saturate(0.7);
    pointer-events: none;
}

.apply-button.is-joined span {
    opacity: 0.78;
}

.eligibility-text {
    position: absolute;
    left: 0;
    top: 563px;
    width: 1080px;
    margin: 0;
    color: var(--gold);
    font-size: 28px;
    font-weight: 500;
    line-height: 32px;
    text-align: center;
    white-space: nowrap;
    z-index: 3;
}

.reward-table {
    position: absolute;
    left: 90px;
    top: 206px;
    width: 900px;
    z-index: 3;
}

.reward-head {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    height: 71px;
}

.reward-head strong {
    font-size: 34px;
    font-weight: 900;
    line-height: 38px;
    text-align: center;
}

.table-line,
.reward-row::after,
.record-row::after {
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 0;
    height: 2px;
    content: '';
    background: linear-gradient(
        90deg,
        rgba(255, 255, 192, 0),
        #ffffc0 50%,
        rgba(255, 255, 192, 0)
    );
}

.table-line {
    left: 26px;
    right: 26px;
    top: 71px;
    bottom: auto;
}

.reward-rows {
    position: relative;
    width: 900px;
}

.reward-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 900px;
    height: 80px;
    background: url('./assets/table-row.svg') center center / 900px 76px
        no-repeat;
    color: var(--gold);
    font-size: 28px;
    font-weight: 800;
    line-height: 38px;
    text-align: center;
}

.rules-list {
    position: absolute;
    left: 119px;
    top: 258px;
    width: 842px;
    margin: 0;
    padding: 0 0 0 48px;
    color: var(--gold);
    font-size: 30px;
    font-weight: 500;
    line-height: 48px;
    text-transform: capitalize;
    z-index: 3;
}

.rules-list li {
    padding-left: 0;
}

.record-table {
    position: absolute;
    left: 90px;
    top: 220px;
    width: 900px;
    z-index: 3;
}

.record-row {
    position: relative;
    display: grid;
    grid-template-columns: 398px 1fr;
    align-items: center;
    width: 900px;
    height: 80px;
    background: url('./assets/table-row.svg') center center / 900px 76px
        no-repeat;
}

.record-row span {
    color: var(--gold);
    font-size: 28px;
    font-weight: 800;
    line-height: 38px;
    text-align: right;
    white-space: nowrap;
}

.record-row strong {
    padding-left: 104px;
    font-size: 34px;
    font-weight: 900;
    line-height: 38px;
    white-space: nowrap;
}

@media (min-width: 431px) {
    html,
    body {
        background: #100019;
    }
}