rockpapershotgun dark mode 1440p by jah

/* ==UserStyle==
@name         rockpapershotgun
@version      20240725.08.21
@namespace    rockpapershotgun.com
@description  dark mode for rock paper shotgun with 1440p support (hopefully)
@author       jah
@license      MIT
==/UserStyle== */

@-moz-document domain("rockpapershotgun.com") {
:root {
    /* grey scale */
    --w: #fff;
    --grey10: hsl(0, 0%, 86%);
    --grey15: hsl(0, 0%, 78%);
    --grey20: hsl(0, 0%, 69%);
    --grey25: hsl(0, 0%, 61%);
    --grey30: hsl(0, 0%, 53%);
    --grey40: hsl(0, 0%, 39%);
    --grey50: hsl(0, 0%, 28%);
    --grey60: hsl(0, 0%, 20%);
    --grey70: hsl(0, 0%, 13%);
    --grey80: hsl(0, 0%, 9%);
    --grey90: hsl(0, 0%, 7%);
    --grey100: hsl(0, 0%, 5%);
    /* sizes */
    --maxW: 126rem;
    
    --strap-color: #92accb;
    --padding: 1.6rem;
    --margin: 4.8rem;
    --logo-width: 22rem;
    --logo-height: 14.6rem;
}

html {
    font-size: 62.5%;
}

body, body[data-version=hd] {
    color: var(--grey10);
    background: var(--grey90);
}

.app_header {
    background: var(--grey100);
    border-bottom-color: var(--grey60);
}

.optanon-show-settings, .sourcepoint-manage-cookies, a:not(.button), .logo img {
    filter: brightness(1.5);
}

.app_header .nav_commercial a, .app_header .nav_primary a {
    color: #8595a9;
}

.app_header .nav_secondary a {
    color: #8595a9;
}

#content {
    background: var(--grey100);
}

.archive__title a, .page_title, .article_header .title, .summary .name, .summary .title {
    color: var(--grey10);
}

.tabbed_nav {
    --overflow-shadow-background: var(--grey100);
    background-color: var(--grey100);
}

.tabbed_nav .tabbed_buttons .tabbed_button {
    color: #87b2e4;
}

.section_title {
    color: var(--grey10);
}

.embed_placeholder, .blog .articles>li:not(:last-of-type) .excerpt, .pagination[data-type=icons], .archive_by_date_nav, .archive__item:not(:last-of-type), #comments .container .post[data-parent-count="0"], #comments .container .post[data-parent-count="1"], #comments .container .post[data-parent-count="2"], #comments .container .post[data-parent-count="3"], #comments .container .thread>.actions, .article_header .metadata, .nav_main .commercial, .app_footer, .summary[data-size=large]:after, .disclaimer+.article-container, #content_below .archive_list, .latest_shelf, .shelf {
    border-color: var(--grey50);
}

.archive__metadata, .article .inline-gallery-caption, .article figcaption, .disclaimer {
    color: var(--grey25);
}


.video_player .playlist_item {
    background: var(--video-player-background, var(--grey80));
}

.app_footer {
    background: var(--grey100);
}

.embed_placeholder, .sign-in-promo {
    background-color: var(--grey100);
}

.poll_wrapper .poll_container .poll_vote_wrapper, .app_footer nav:not(.social_follow) a, .app_footer nav:not(.social_follow) button {
    color: #98abc2;
}

.tagged_with__strapline, .archive_by_date a, .poll_wrapper .poll_container .poll_header .votes, .poll_wrapper .poll_container .poll_header .question, #comments .container .post .removed, #comments .container .post .username .name {
    color: #768da8;
}

.social-sign-in-button[data-provider=google-oauth2] {
    --social-button-logo: url(/static/vendor/img/google-logo.png);
    --social-button-background: var(--grey100);
    --social-button-color: #768da8;
    --social-button-border: #292929;
}

.username .flair.supporter {
    --color: #9b6aff;
}

#comments .markdown {
    font-size: 1.6rem;
    line-height: 1.618;
}

.article-styling {
    font-size: 1.25rem;
    line-height: 1.618;
}
.article_header .title {
    font-size: 2.7rem;
    line-height: 1.2;
}

.tagged_with p, .smart-slot__title {
    line-height: 1.2;
}

.archive_by_date a, .app_footer p, .article-styling aside:not(.poll_wrapper), .smart-slot__strapline, .author-inline {
    line-height: 1.4;
}

.archive_by_date a {
    max-width: 50ch;
    display: inline-block;
}

.article_header .title {
    max-width: 30ch;
}

/* */
* {
    scroll-margin-top: 3.2rem;
}
.nav_main {
    grid-template-columns: 22rem auto 1fr 29rem 26rem;
    padding: 3.2rem;
    width: var(--maxW);
}
#content {
    max-width: var(--maxW);
}

.app_header .nav_secondary ul, .app_header .nav_primary ul {
    display: flex;
    flex-direction: column;
    height: var(--logo-height);
    justify-content: space-around;
}

.app_header .nav_commercial, .app_header .nav_primary {
    font-size: 1.125rem;
    font-size: 1.8rem;
    font-size: 1.4rem;
}
.app_header .nav_secondary {
    font-size: 1.4rem;
}
.app_header .commercial {
    height: var(--logo-height);
    justify-content: space-around;
}
.button {
    border-radius: 1.6rem;
    font-size: 1.4rem;
    padding: .8rem 1.6rem;
}
.app_header .actions {
    row-gap: 1.6rem;
}
.search_box:before {
    left: .8rem;
    width: 1.4rem;
}
form input, form select, form textarea {
    border-radius: .4rem;
    font-size: 1.2rem;
}
.search_box input {
    padding-left: 3rem;
    height: 3.2rem;
}
.button_group:not(.tabbed) {
    grid-gap: .8rem;
}
.button.small {
    border-radius: 22rem;
    font-size: 1.2rem;
    padding: .4rem .8rem;
    height: 3.2rem;
}
body[data-version=hd] .page_content {
    padding: 0 3.2rem;
}

#content_above {
    padding-top: 1.6rem;
}
body[data-version=hd] #content_above {
    min-height: 106.6rem;
}
body[data-version=hd][data-ads=true][data-video-layout=false] #content_above {
    padding-right: 31.6rem;
}
.tabbed_nav {
    margin-bottom: 1.6rem;
    padding-top: 1.6rem;
}
.tabbed_nav.homepage {
    margin-bottom: 3.2rem;
}
.tabbed_nav .tabbed_buttons .tabbed_button {
    border-bottom-width: .4rem;
    padding: 0 1.6rem 1rem;
    font-size: 1.4rem;
}
.tabbed_nav .tabbed_buttons .tabbed_button.active, .tabbed_nav .tabbed_buttons .tabbed_button:hover {
    border-bottom-width: .4rem;
}
body[data-version=hd] .spotlight {
    margin-top: 3.2rem;
}
body[data-version=hd] .spotlight .container {
    -moz-column-gap: 3.2rem;
    column-gap: 3.2rem;
    grid-template-columns: 53rem 31.8rem;
}
body[data-version=hd] .spotlight .primary {
    row-gap: 3.2rem;
}

@media screen and (min-width: 501px) {
    .summary .wrapper {
        padding-right: 2.4rem;
    }
}
.summary[data-size=large] .wrapper {
    padding-bottom: 3.2rem;
}
.summary[data-size=large] .name, .summary[data-size=large] .title {
    font-size: 2.4rem;
    line-height: 1.2;
}
.summary .live_blinker, .summary .strapline {
    font-size: 1.6rem;
    line-height: 1.4;
}
.summary .metadata {
    font-size: 1.2rem;
    line-height: 1.4;
}
.summary[data-size=medium] {
    -moz-column-gap: 3.2rem;
    column-gap: 3.2rem;
    grid-template-columns: auto 27.5rem;
}
.summary .name, .summary .title {
    font-size: 1.8rem;
    line-height: 1.3;
}
.spotlight .summary[data-article-type=deals] .wrapper {
    padding: var(--padding);
}
.for-you-homepage-promo {
    gap: 1.6rem;
    margin-bottom: calc(var(--padding) * 2);
    padding: var(--padding);
}
.for-you-homepage-promo p {
    font-size: 1.4rem;
    line-height: 1.4;
}
.section_title {
    font-size: 2.3rem;
    line-height: 1.2;
    margin: var(--margin) 0 2.4rem;
}

.shelf .section_title_wrapper {
    align-items: flex-end;
}
.disclaimer {
    font-size: 1.3rem;
    line-height: 1.8;
}
.shelf .section_title_wrapper .disclaimer {
    margin-left: var(--padding);
}
body[data-version=hd] .latest_shelf .container {
    -moz-column-gap: calc(var(--padding) * 2);
    column-gap: calc(var(--padding) * 2);
    grid-template-columns: auto 27.5rem;
}

.video_player, .supporters_shelf {
    border-top-color: var(--grey60);
}

body[data-version=hd] .supporters_shelf .container {
    -moz-column-gap: calc(var(--padding) * 2);
    column-gap: calc(var(--padding) * 2);
     grid-template-columns: 53rem auto 27.5rem;
}
.supporters_promo {
    border-radius: var(--padding);
    max-width: 69rem;
    padding: var(--padding);
    row-gap: .8rem;
}
body[data-version=hd] .supporters_shelf .supporters_promo {
    background-position: 100% calc(100% - 8.6rem);
}
@media screen and (min-width: 1261px) {
    .supporters_promo {
        border-radius: 2.4rem;
        padding: 2.4rem;
        row-gap: var(--padding);
    }
}
.supporters_promo .heading {
    font-size: 2.3rem;
    line-height: 1.2;
}
.supporters_promo p {
    font-size: 1.6rem;
    line-height: 1.4;
}
.supporters_promo .button {
    width: 100%;
}
.summary .excerpt {
    --table-scroll-offset: 1.6rem;
    font-size: 1.4rem;
    line-height: 1.618;
    margin-top: 2.4rem;
}
.video_player .title {
    margin: 2.4rem 0 0;
    max-width: 66rem;
    font-size: 2.3rem;
    line-height: 1.2;
}

.video_player .description {
    margin: .8rem 0 auto;
    max-width: 66rem;
}
.video_player .description, .video_player .playlist_title {
    font-size: 1.6rem;
    line-height: 1.4;
}
.author-carousel .carousel {
    --carousel-item-width: 16rem;
    margin: 2.4rem 0 0;
}
.pagination_button.button {
    height: 4.4rem;
    width: 4.4rem;
    border-radius: 100rem;
}
.carousel .button.left {
    margin-right: 1.6rem;
}
.carousel .button.right {
    margin-left: 1.6rem;
}
.author-carousel {
    --avatar-size: 12rem;
    margin: 0 0 3.2rem;
}
.carousel_items {
    padding: 0 var(--carousel-offset) 1.2rem 0;
}
.carousel_item {
    margin-right: calc(1.6rem - var(--carousel-offset));
}
.avatar .avatar_image {
    width: 100%;
    height: 100%;
}
.carousel .button.indicator {
    height: 1.2rem;
    width: 1.2rem;
}
.app_footer .nav_wrapper {
    max-width: var(--maxW);
    padding: 3.2rem;
    row-gap: 3.2rem;
    font-size: 1.2rem;
}
.app_footer .about {
    row-gap: 1.6rem;
}
.app_footer nav:not(.social_follow) .label {
    margin-bottom: .8rem;
}
.app_footer nav:not(.social_follow) a, .app_footer nav:not(.social_follow) button {
    padding: .8rem 0;
}
body[data-video-layout=false] .article-container {
    max-width: 88rem;
}
.article-styling {
    --table-scroll-offset: 1.6rem;
    font-size: 1.6rem;
    line-height: 1.618;
    margin: 4.8rem auto;
    max-width: 69rem;
}
.breadcrumbs {
    font-size: 1.4re...