dusklight/res/rml/prelaunch.rcss

body {
    --color-prelaunch-accent: #FEE685;
    --color-prelaunch-muted: #A6A09B;
    --color-disc-error: #FFC9C9;
    --color-disc-mismatch: #FFD6A7;
    --color-ready: #D8F999;
    --menu-button-decorator: horizontal-gradient(rgba(var(--color-black-rgb), 0%) rgba(var(--color-black-rgb), 0%));
    --menu-button-decorator-hover: horizontal-gradient(#FEE685FF #FEE68500);

    width: 100%;
    height: 100%;
    font-family: var(--font-family-body);
    font-weight: normal;
    font-size: var(--font-size-2xl);
    color: var(--color-white);
    filter: opacity(0);
    transition: filter 1s 0.2s linear-in-out;
    z-index: -1;
}

body.mirrored {
    --menu-button-decorator-hover: horizontal-gradient(#FEE68500 #FEE685FF);
}

prelaunch-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    /* The color gradient from the Figma bands really badly. A fully black gradient does as well, but not as badly. */
    decorator: horizontal-gradient(rgba(var(--color-black-rgb), 100%) rgba(var(--color-black-rgb), 0%));
}

body.mirrored prelaunch-gradient {
    decorator: horizontal-gradient(rgba(var(--color-black-rgb), 0%) rgba(var(--color-black-rgb), 100%));
}

prelaunch-background {
    position: absolute;
    width: 100%;
    height: 100%;
    decorator: image(../prelaunch-bg.png cover left center);
    opacity: 0;
    transition: opacity 1s linear-in-out;
}

body[open] {
    filter: opacity(1);
}

body[open] prelaunch-background {
    opacity: 1;
}

body.disc-ready prelaunch-background {
    opacity: 0;
}

content {
    display: block;
    width: 100%;
    height: 100%;
    filter: opacity(0);
    transition: filter 0.2s linear-in-out;
}

content[open] {
    filter: opacity(1);
}

menu {
    position: absolute;
    left: 96dp;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    /* Scale based on a reference screen width, 856/1216 */
    width: 70.394736vw;
    min-width: 428dp;
    max-width: 50vw;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 48dp;
}

body.mirrored menu {
    left: auto;
    right: 96dp;
}

hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
}

body.mirrored hero {
    align-items: flex-end;
}

hero img {
    width: 100%;
}

eyebrow {
    font-family: var(--font-family-display);
    font-size: var(--font-size-6xl);
}

@media (min-width: 1216dp) {
    eyebrow {
        /* Same logic as .menu, 32/1216 */
        font-size: 2.631579vw;
    }
}

eyebrow studio-name {
    font-weight: bold;
}

menu-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: flex-start;
}

#menu-list button {
    width: 428dp;
    height: 54dp;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-panel);
    text-align: left;
    text-transform: uppercase;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-6xl);
    font-weight: normal;
    cursor: pointer;
    /* Define a fully transparent gradient as the default state, otherwise a white flash occurs */
    decorator: var(--menu-button-decorator);
}

#menu-list button:disabled {
    opacity: 0.75;
    cursor: default;
    decorator: var(--menu-button-decorator);
}

#menu-list button.anim-done {
    transition: decorator color opacity 0.1s linear-in-out;
}

#menu-list button.game-mode-button {
    position: relative;
    padding: 0;
    overflow: visible;
}

#menu-list game-mode-label-viewport {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--radius-panel);
    pointer-events: none;
    z-index: 0;
}

#menu-list game-mode-label {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: var(--space-sm) var(--space-lg);
    opacity: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity 0.24s cubic-in-out;
}

#menu-list game-mode-label.active {
    opacity: 1;
}

#menu-list game-mode-previous,
#menu-list game-mode-next {
    display: none;
    position: absolute;
    top: 0;
    width: 48dp;
    height: 54dp;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-family: var(--font-family-icons);
    font-weight: normal;
    font-size: 30dp;
    z-index: 1;
}

#menu-list game-mode-previous {
    left: -48dp;
    decorator: text("" center center);
}

#menu-list game-mode-next {
    right: -48dp;
    decorator: text("" center center);
}

#menu-list button.game-mode-button.can-cycle game-mode-previous,
#menu-list button.game-mode-button.can-cycle game-mode-next {
    display: flex;
}

#menu-list button:hover,
#menu-list button:focus-visible {
    color: var(--color-black);
    decorator: var(--menu-button-decorator-hover);
}

body.mirrored #menu-list {
    align-items: flex-end;
}

body.mirrored #menu-list button {
    text-align: right;
}

disc-info {
    position: absolute;
    left: 96dp;
    right: auto;
    bottom: 72dp;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    font-size: var(--font-size-4xl);
    font-effect: glow(0dp 4dp 0dp 4dp black);
    text-align: left;
}

body.mirrored disc-info {
    left: auto;
    right: 96dp;
    text-align: right;
}

version-info {
    position: absolute;
    right: 96dp;
    left: auto;
    bottom: 72dp;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    text-align: right;
    font-size: var(--font-size-4xl);
    font-effect: glow(0dp 4dp 0dp 4dp black);
    text-align: right;
}

body.mirrored version-info {
    right: auto;
    left: 96dp;
    text-align: left;
}

#disc-status {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

#disc-status[status=good] {
    color: var(--color-ready);
}

#disc-status[status=bad] {
    color: var(--color-disc-error);
}

#disc-status[status=verifying] {
    color: var(--color-white);
}

#disc-status[status=mismatch] {
    color: var(--color-disc-mismatch);
}

#disc-status[status=unknown] {
    color: rgba(var(--color-text-rgb), 65%);
}

#disc-status[status=pending] {
    color: var(--color-prelaunch-accent);
}

#disc-status icon {
    display: none;
    width: 24dp;
    height: 24dp;
    font-family: var(--font-family-icons);
    font-weight: normal;
    font-size: var(--font-size-4xl);
}

#disc-status[status] icon {
    display: block;
}

#disc-status[status=good] icon {
    decorator: text("" center center);
}

#disc-status[status=bad] icon {
    decorator: text("" center center);
}

#disc-status[status=verifying] icon {
    decorator: text("" center center);
}

#disc-status[status=mismatch] icon {
    decorator: text("" center center);
}

#disc-status[status=unknown] icon {
    decorator: text("" center center);
}

#disc-status[status=pending] icon {
    decorator: text("" center center);
}

#disc-version {
    font-size: var(--font-size-2xl);
}

update-status {
    display: none;
    color: var(--color-prelaunch-muted);
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    font-size: var(--font-size-2xl);
}

update-status[state=checking],
update-status[state=failed] {
    display: block;
}

update-status[state=available] {
    display: flex;
}

#update-download {
    display: none;
    margin: 0dp;
    padding: 0dp;
    border-width: 0dp;
    background-color: transparent;
    color: var(--color-ready);
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    decorator: var(--menu-button-decorator);
}

update-status[state=available] #update-download {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

#update-download icon {
    display: block;
    width: 18dp;
    height: 18dp;
    font-family: var(--font-family-icons);
    font-weight: normal;
    decorator: text("" center center);
}

disc-version {
    color: var(--color-prelaunch-muted);
}

body.mirrored update-status {
    justify-content: flex-start;
}

/* Startup animation */
.intro-item {
    opacity: 0;
    transform: translateY(10dp);
    transition: opacity transform 0.3s 0.1s cubic-in-out;
}

body.animate-in .intro-item {
    opacity: 1;
    transform: translateY(0dp);
}

.delay-0 {
    transition: opacity transform 0.3s 0.1s cubic-in-out;
}

.delay-1 {
    transition: opacity transform 0.3s 0.2s cubic-in-out;
}

.delay-2 {
    transition: opacity transform 0.3s 0.3s cubic-in-out;
}

.delay-3 {
    transition: opacity transform 0.3s 0.4s cubic-in-out;
}

.delay-4 {
    transition: opacity transform 0.3s 0.5s cubic-in-out;
}

.delay-5 {
    transition: opacity transform 0.3s 0.6s cubic-in-out;
}

.delay-6 {
    transition: opacity transform 0.3s 0.7s cubic-in-out;
}

/* Mobile layout */
@media (max-height: 640dp) {
    body {
        --menu-button-decorator-hover: horizontal-gradient(#FEE68500 #FEE685FF);
    }

    body.mirrored {
        --menu-button-decorator-hover: horizontal-gradient(#FEE685FF #FEE68500);
    }

    prelaunch-gradient {
        decorator: horizontal-gradient(rgba(var(--color-black-rgb), 0%) rgba(var(--color-black-rgb), 100%));
    }

    body.mirrored prelaunch-gradient {
        decorator: horizontal-gradient(rgba(var(--color-black-rgb), 100%) rgba(var(--color-black-rgb), 0%));
    }

    menu {
        left: 32dp;
        right: 32dp;
        width: auto;
        min-width: 0;
        max-width: none;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-lg);
    }

    body.mirrored menu {
        left: 32dp;
        right: 32dp;
        flex-direction: row-reverse;
    }

    hero {
        flex: 1 1 0;
        min-width: 0;
        max-width: 48%;
        margin-left: var(--space-2xl);
    }

    body.mirrored hero {
        align-items: flex-end;
    }

    hero img {
        width: 100%;
    }

    #menu-list {
        flex: 1 1 0;
        min-width: 0;
        max-width: 52%;
        align-items: flex-end;
    }

    #menu-list button {
        width: 100%;
        max-width: 100%;
        text-align: right;
    }

    body.mirrored #menu-list {
        align-items: flex-start;
    }

    body.mirrored #menu-list button {
        text-align: left;
    }

    eyebrow {
        display: none;
    }

    disc-info {
        right: 32dp;
        left: auto;
        bottom: 32dp;
        top: auto;
        text-align: right;
        font-size: var(--font-size-md);
        gap: var(--space-sm);
    }

    #disc-status {
        justify-content: flex-end;
    }

    #disc-status icon {
        font-size: var(--font-size-2xl);
    }

    #disc-version {
        font-size: var(--font-size-md);
    }

    version-info {
        right: 32dp;
        left: auto;
        bottom: auto;
        top: 32dp;
        text-align: right;
        font-size: var(--font-size-md);
        gap: var(--space-sm);
    }

    update-status {
        font-size: var(--font-size-md);
    }

    body.mirrored disc-info {
        right: auto;
        left: 32dp;
        bottom: 32dp;
        top: auto;
        text-align: left;
    }

    body.mirrored version-info {
        right: auto;
        left: 32dp;
        bottom: auto;
        top: 32dp;
        text-align: left;
    }

    body.mirrored #disc-status {
        justify-content: flex-start;
    }
}