The Sixth Sun

---

+ Show component code

:root {
    --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
    --body-width-on-desktop: 45.75rem;
}
@media only screen and (min-width: 56.25rem) {
    #content-wrap {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
           -moz-box-orient: horizontal;
           -moz-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        width: -webkit-calc(100vw - (100vw - 100%));
        width: -moz-calc(100vw - (100vw - 100%));
        width: calc(100vw - (100vw - 100%));
        min-height: -webkit-calc(100vh - -webkit-calc(var(--final-header-height-on-desktop, 10.125rem)));
        min-height: -moz-calc(100vh - -moz-calc(var(--final-header-height-on-desktop, 10.125rem)));
        min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
        -webkit-box-flex: 2;
        -webkit-flex-grow: 2;
           -moz-box-flex: 2;
            -ms-flex-positive: 2;
                flex-grow: 2;
        height: auto;
        position: initial;
        margin: 0 auto;
        max-width: inherit;
        margin-left: -11em;
        margin-left: -webkit-calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem);
        margin-left: -moz-calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem);
        margin-left: calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem);
    }
 
    #main-content {
        position: initial;
        max-height: 100%;
        padding: 2rem 1rem;
        width: 45.75rem;
        width: var(--body-width-on-desktop, 45.75rem);
        max-width: 45.75rem;
        max-width: var(--body-width-on-desktop, 45.75rem);
        margin: 0 auto;
    }
 
    #page-content {
            max-width: min(90vw, 45.75rem);
            max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
    }
 
    #side-bar {
        -webkit-transform: translateX(-14.6rem);
           -moz-transform: translateX(-14.6rem);
            -ms-transform: translateX(-14.6rem);
             -o-transform: translateX(-14.6rem);
                transform: translateX(-14.6rem);
        -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
           -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
            -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
             -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
                transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
        -webkit-transition:
            background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            padding 300ms linear,
            margin 300ms linear,
            -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            padding 300ms linear,
            margin 300ms linear,
            -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -o-transition:
            background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            padding 300ms linear,
            margin 300ms linear,
            -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -moz-transition:
            transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            padding 300ms linear,
            margin 300ms linear,
            -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            padding 300ms linear,
            margin 300ms linear;
        transition:
            transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            padding 300ms linear,
            margin 300ms linear,
            -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        border: none;
        border-color: rgba(var(--swatch-tertiary-color, 170, 170, 170), 0.4);
        width: var(--sidebar-width-on-desktop, 13.6rem) !important;
        min-width: var(--sidebar-width-on-desktop, 13.6rem) !important;
        grid-area: side-bar;
        padding-right: 2rem;
        background-color: transparent;
        background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
        top: 0;
        max-height: 100vh;
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        padding-left: 0.5rem;
        direction: rtl;
        scrollbar-width: thin;
        -ms-scroll-chaining: none;
            overscroll-behavior: contain;
        overflow-y: scroll;
        scrollbar-color: 
            rgba(170, 170, 170, 0)  /* Thumb */
            rgba(252, 252, 252, 0); /* Track */
        scrollbar-color: 
        rgba(var(--swatch-primary-darker, 170, 170, 170), 0.1)   /* Thumb */
        rgba(var(--swatch-tertiary-color, 252, 252, 252), 0.05); /* Track */
    }
 
    #side-bar::-webkit-scrollbar-track {
        background-color: rgba(var(--swatch-secondary-color, 244, 244, 244), 0.8);
    }
 
    #side-bar::-webkit-scrollbar,
    #side-bar::-webkit-scrollbar-thumb,
    #side-bar::-webkit-scrollbar-corner {
        width: 0.5rem;
        border-right-width: -webkit-calc(100vw + 100vh);
        border-right-width: calc(100vw + 100vh);
        border-right-style: inset;
        border-color: inherit;
        background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
    }
 
    #side-bar:hover,
    #side-bar:active {
        background-color: white;
        background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
        padding-right: 0.25rem;
        margin-right: 1.75rem;
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
            -ms-transform: translateX(0);
             -o-transform: translateX(0);
                transform: translateX(0);
        -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
           -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
            -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
             -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
                transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-color: 
            rgba(170, 170, 170, 1)  /* Thumb */
            rgba(252, 252, 252, 1); /* Track */
        scrollbar-color: 
            rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
            rgb(var(--swatch-menubg-color, 252, 252, 252), 1);  /* Track */
        border-color: rgba(var(--swatch-primary-darker), 1);
    }
 
    #side-bar:focus-within {
        background-color: white;
        background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
        padding-right: 0.25rem;
        margin-right: 1.75rem;
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
            -ms-transform: translateX(0);
             -o-transform: translateX(0);
                transform: translateX(0);
        -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
           -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
            -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
             -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
                transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-color: 
            rgba(170, 170, 170, 1)  /* Thumb */
            rgba(252, 252, 252, 1); /* Track */
        scrollbar-color: 
            rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
            rgb(var(--swatch-menubg-color, 252, 252, 252), 1);  /* Track */
        border-color: rgba(var(--swatch-primary-darker), 1);
    }
 
    #main-content::after {
        content: " ";
        position: fixed;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
           -moz-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        width: 1rem;
        height: 100%;
        max-height: 100%;
        top: 0;
        -webkit-transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -o-transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -moz-transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        left: 1rem;
        background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg");
        background-repeat: no-repeat;
        background-position: center left 1rem;
        background-attachment: fixed;
        -webkit-background-size: 1rem 12.875rem;
           -moz-background-size: 1rem 12.875rem;
             -o-background-size: 1rem 12.875rem;
                background-size: 1rem 12.875rem;
        pointer-events: none;
    }
 
    #side-bar:hover+#main-content::after,
    #side-bar:active+#main-content::after {
        left: -17em;
        left: -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        left: -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        left: calc(var(--sidebar-width-on-desktop, 17em) * -1);
        background-position: center left -17em;
        background-position: center left -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        background-position: center left -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        background-position: center left calc(var(--sidebar-width-on-desktop, 17em) * -1);
        -webkit-transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -o-transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -moz-transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        opacity: 0;
        width: 0rem;
        font-size: 0em;
    }
 
    #side-bar:focus-within+#main-content::after {
        left: -17em;
        left: -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        left: -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        left: calc(var(--sidebar-width-on-desktop, 17em) * -1);
        background-position: center left -17em;
        background-position: center left -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        background-position: center left -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        background-position: center left calc(var(--sidebar-width-on-desktop, 17em) * -1);
        -webkit-transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -o-transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -moz-transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        opacity: 0;
        width: 0rem;
        font-size: 0em;
    }
 
    #main-content::before {
        --not-ie: absolute;
        content: " ";
        background-color: black;
        background-color: rgb(var(--swatch-alternate-color, 0, 0, 0));
        position: fixed;
        position: var(--not-ie);
        top: 0;
        top: var(--final-header-height-on-desktop, 0);
        left: 0;
        -webkit-transform: translateX(-12.6rem);
           -moz-transform: translateX(-12.6rem);
            -ms-transform: translateX(-12.6rem);
             -o-transform: translateX(-12.6rem);
                transform: translateX(-12.6rem);
        -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
           -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
            -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
             -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
                transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
        width: 17em;
        width: var(--sidebar-width-on-desktop, 17em);
        height: -webkit-calc(100% - 3rem);
        height: -moz-calc(100% - 3rem);
        height: calc(100% - 3rem);
        height: -webkit-calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
        height: -moz-calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
        height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
        -webkit-transition:
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -o-transition:
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -moz-transition:
            transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        opacity: 0.5;
        pointer-events: none;
        z-index: 9;
        margin-bottom: 0;
        margin-bottom: -webkit-calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
        margin-bottom: -moz-calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
        margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
    }
 
    #side-bar:hover+#main-content::before,
    #side-bar:active+#main-content::before {
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
            -ms-transform: translateX(0);
             -o-transform: translateX(0);
                transform: translateX(0);
        opacity: 0;
    }
 
    #side-bar:focus-within+#main-content::before {
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
            -ms-transform: translateX(0);
             -o-transform: translateX(0);
                transform: translateX(0);
        opacity: 0;
    }
 
    #side-bar .side-block {
        margin-top: 1em;
        padding-left: 0.25em;
        background-color: rgb(0, 0, 0, 0);
        -webkit-border-radius: 0;
           -moz-border-radius: 0;
                border-radius: 0;
        border-left-width: 0rem;
        border-right-width: 0rem;
        direction: ltr;
    }
 
    #side-bar .scpnet-interwiki-wrapper {
        direction: ltr;
    }
 
    @supports (-ms-ime-align: auto) {
        #side-bar {
            overflow-y: hidden;
            overflow-x: hidden;
            -webkit-transform: translateX(-90%) !important;
               -moz-transform: translateX(-90%) !important;
                -ms-transform: translateX(-90%) !important;
                 -o-transform: translateX(-90%) !important;
                    transform: translateX(-90%) !important;
        }
 
        #side-bar:hover,
        #side-bar:active {
            overflow-y: auto;
            -webkit-transform: translateX(0) !important;
               -moz-transform: translateX(0) !important;
                -ms-transform: translateX(0) !important;
                 -o-transform: translateX(0) !important;
                    transform: translateX(0) !important;
            margin-left: -0.5rem;
        }
 
        #side-bar:focus-within {
            overflow-y: auto;
            -webkit-transform: translateX(0) !important;
               -moz-transform: translateX(0) !important;
                -ms-transform: translateX(0) !important;
                 -o-transform: translateX(0) !important;
                    transform: translateX(0) !important;
            margin-left: -0.5rem;
        }
 
        #main-content::before {
            left: 1rem;
            -webkit-transform: translateX(-100%) !important;
               -moz-transform: translateX(-100%) !important;
                -ms-transform: translateX(-100%) !important;
                 -o-transform: translateX(-100%) !important;
                    transform: translateX(-100%) !important;
        }
    }
    /* Print Friendly Formatting by Estrella */
    body.print-body { 
        --sidebar-width-on-desktop: 0; 
    } 
    body.print-body #main-content::before, 
    body.print-body #main-content::after { 
        display: none; 
    }
}

---

+ Show component code

@supports(display: grid) {
    :root {
        /* header measurements */
        --header-height-on-desktop: 10rem;
        --header-height-on-mobile: 10rem;
        --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem);
        --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem);
    }
 
    #header {
        --search-textbox-text-color: var(--swatch-secondary-color);
        background: none;
    }
 
    #header::before {
        content: " ";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0.75rem;
        background-image: var(--logo-image);
        background-repeat: no-repeat;
        background-position: center 0;
        background-size: auto calc(var(--header-height-on-desktop) - 1.5rem);
        opacity: 0.8;
        pointer-events: none;
    }
 
    #header h1,
    #header h2 {
        margin: 0;
        padding: 0;
        width: 100%;
        height: var(--header-height-on-desktop);
        display: flex;
        align-items: center;
        justify-content: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    #header h1 a,
    #header h1 a::before,
    #header h2 span,
    #header h2 span::before {
        margin: 0;
        padding: 0;
        z-index: 0;
        display: block;
        text-align: center;
    }
 
    #header h1 {
        z-index: 1;
    }
 
    #header h1 a::before,
    #header h1 a::after {
        content: var(--header-title);
    }
 
    #header h1 a::before  {
        color: rgb(var(--swatch-text-tertiary-color));
        z-index: -1;
        -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark));
    }
 
    #header h1 a::after {
        color: rgb(var(--swatch-headerh1-color));
        z-index: 1;
    }
 
    #header h2 {
        z-index: 0;
        text-transform: uppercase;
        pointer-events: none;
    }
 
    #header h2 span {
        margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em);
    }
 
    #header h2 span::before,
    #header h2 span::after {
        --wght: 600;
        content: var(--header-subtitle);
        position: absolute;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 100%;
        text-align: center;
    }
 
    #header h2 span::before {
        -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark));
    }
 
    #header h2 span::after {
        color: rgb(var(--swatch-headerh2-color));
        z-index: 1;
    }
 
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        color: rgba(0, 0, 0, 0);
    }
 
    @media (min-width: 36rem) {
 
        #login-status {
            flex-grow: 1;
            left: 3%;
            right: initial;
        }
 
         #login-status::before {
            --mask-image: none;
            background-color: transparent;
        }
 
        #login-status:not(:focus-within) {
            color: rgb(var(--login-line-divider-color));
            -webkit-user-select: initial;
            -moz-user-select: initial;
            -ms-user-select: initial;
            user-select: initial;
        }
 
        #login-status #account-topbutton,
        #login-status:not(:focus-within) #account-topbutton {
            --clip-path:
                    polygon( 0 0, 100% 0, 100% 100%, 0 100% );
            background-color: rgba(var(--login-arrow-color), 0);
 
        }
 
        #login-status #account-topbutton::before{
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(var(--login-arrow-color), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton:hover::before {
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
        }
 
        #login-status:not(:focus-within) #account-topbutton::after {
            display: none;
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            pointer-events: all;
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) {
            opacity: 1;
        }
 
        #login-status #my-account {
            --wght: 300;
        }
 
        #account-options {
            background: var(--gradient-header);
        }
 
        #search-top-box {
            top: 1.5em;
            right: 3%;
            background: rgba(var(--search-focus-textbox-bg-color), 0.4);
            box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) rgba(var(--search-focus-textbox-bg-color), 0.4);
        }
 
         #search-top-box:focus-within ~ #login-status {
            opacity: 1;
        }
 
        #search-top-box::after {
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
        }
 
        #search-top-box:not(:focus-within)::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0% 100%
                    );
            background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #search-top-box:not(:focus-within):hover::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            background-color: rgb(var(--search-icon-hover-bg-color));
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) {
            max-width: var(--search-width);
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
            max-width: var(--search-width);
            padding: 0 var(--search-height) 0 1em;
            outline-width: 0;
            background-color: rgb(var(--search-focus-textbox-bg-color), 0.35);
            color: rgba(var(--search-textbox-text-color), 0.4);
            cursor: pointer;
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"],
        #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] {
            pointer-events: all;
            border: none;
        }
 
    }
 
    #page-title::after,
    .meta-title::after,
    #page-title::before,
    .meta-title::before {
        content: "";
        flex-grow: 1;
        height: 0.0625rem;
        background: rgb(var(--swatch-primary));
    }
 
    #page-title::before,
    .meta-title::before {
        margin: auto 1.25rem auto auto;
    }
}

---

+ Show theme code

@supports(display: grid) {
    :root {
        /* S-CSS-P Integration */
        /* If you're making a new CSS theme, please include the following three variables at minimum. */
        --theme-base: "black-highlighter";
        /* must be either "black-highlighter" or "sigma9" */
        --theme-id: "The-Foundation-Dark-theme";
        /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
        --theme-name: "The Foundation Dark Theme";
        /* set this to your theme's full name */
 
        --swatch-background: var(--black-monochrome);
        --header-subtitle: "Office of the Overseer";
        --rating-module-text-color: var(--swatch-menutxt-light-color);
        --rating-module-button-color: var(--swatch-menutxt-light-color);
        --swatch-text-general: var(--swatch-text-light);
        --swatch-menutxt-general-color: var(--swatch-menutxt-light-color);
        /* ===SECONDARY & TERTIARY COLORS=== */
        /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
        --swatch-secondary-color: var(--swatch-menubg-dark-color);
        --swatch-tertiary-color: var(--swatch-menubg-light-color);
 
        /* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */
        --swatch-text-secondary-color: var(--swatch-menutxt-dark-color);
        --swatch-text-tertiary-color: var(--swatch-menutxt-light-color);
    }
 
    ::-moz-selection {
        background: rgba(var(--swatch-primary), 1);
        color: rgb(var(--black-monochrome)) !important;
        text-shadow: none;
    }
 
    ::selection {
        background: rgba(var(--swatch-primary), 1);
        color: rgb(var(--black-monochrome)) !important;
        text-shadow: none;
    }
 
    #page-title,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: rgb(var(--swatch-text-light)) !important;
    }
 
    #page-title {
        --wght: 600;
        margin-top: 1rem;
        font-family: var(--title-font);
        text-transform: uppercase;
    }
 
    #page-title::before,
    #page-title::after {
        background-image: url('https://scp-wiki.wikidot.com/local--files/theme:the-foundation-theme/foundation-circles-bg.png');
        background-size: 100vh;
        background-attachment: fixed;
        background-position: top center;
    }
 
    #header h2,
    #header h2 span {
        --wght: 500;
        font-weight: 500;
        font-family: var(--header-font);
        text-transform: uppercase;
        letter-spacing: 0.5em;
    }
 
    #login-status,
    #login-status span.printuser,
    #header div[class*="top-bar"]>ul>li>a,
    #header div[class*="top-bar"]>ul>li>ul li>a {
        color: rgb(var(--white-monochrome))
    }
 
    .danger-diamond a,
    .danger-diamond a:hover {
        color: rgba(0, 0, 0, 0) !important;
        box-shadow: initial !important;
    }
 
    .danger-diamond>.arrows {
        background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='https://www.w3.org/2000/svg' xmlns:xlink='https://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 160 160' xml:space='preserve'%3E%3Cpath fill='%23fcfcfc' d='M136.1,133.3l23.9-23.9V51.2l-24-24l19.1-19.1l4.9,4.9l0-12.9l-12.9,0l4.9,4.9L133,24.2l-24-24H51l-24,24 L8,5.2l4.9-4.9L0,0.2l0,12.9l4.9-4.9L24,27.3l-24,24v58.2l23.9,23.9l-19,19L0,147.3l0,12.9l12.9,0L8,155.3l19-19l23.9,23.9h58.4 l23.9-23.9l19,19l-4.9,4.9l12.9,0l0-12.9l-4.9,4.9L136.1,133.3z M155.7,53v54.6l-22.6,22.6l-50-50L133,30.3L155.7,53z M52.8,4.5 h54.4l22.7,22.7L80,77.2L30.1,27.3L52.8,4.5z M4.3,107.6V53L27,30.3L77,80.2l-50,50L4.3,107.6z M107.4,155.9H52.6L30,133.3l50-50 l50,50L107.4,155.9z'/%3E%3C/svg%3E%0A");
    }
 
    table.wiki-content-table {
        width: 100%;
        text-align: center;
        margin: 0 auto;
    }
 
    table.wiki-content-table tbody tr th {
        justify-content: center;
    }
 
    table.wiki-content-table tr,
    table.wiki-content-table th {
        --wght: 700;
        width: 100%;
        display: inline-flex;
        align-items: stretch;
        margin: 0;
    }
 
    table.wiki-content-table td {
        margin: 0;
        width: 100%;
        color: rgb(var(--white-monochrome));
        line-height: 1;
    }
 
    blockquote,
    .blockquote {
        background-color: rgb(var(--swatch-menubg-dark-color));
    }
 
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href*="classification-"]),
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href*="classification-"]):visted {
        color: rgb(var(--light-gray-monochrome)) !important;
    }
 
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href*="classification-"]):hover,
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href*="classification-"]):active {
        color: rgb(var(--black-monochrome)) !important;
        box-shadow: inset 0 -1.5em 0 0 rgba(var(--light-gray-monochrome), 1) !important;
    }
 
    .code {
        background-color: rgb(var(--swatch-menubg-dark-color));
    }
 
    .scp-image-block {
        box-shadow: initial;
    }
 
    .scp-image-block .scp-image-caption {
        background-color: rgb(var(--swatch-menubg-dark-color));
    }
 
    @media only screen and (max-width: 56.25rem) {
        table.wiki-content-table tr>td {
            min-width: 100%;
            font-size: 1rem;
            padding: 0.5rem;
        }
    }
}

@import url("https://use.typekit.net/cjg4ysl.css");
 
@supports(display:grid) {
    :root {
        /* S-CSS-P Integration */
        /* If you're making a new CSS theme, please include the following three variables at minimum. */
        --theme-base: "black-highlighter";
        /* must be either "black-highlighter" or "sigma9" */
        --theme-id: "The-Foundation-theme";
        /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
        --theme-name: "The Foundation Theme";
        /* set this to your theme's full name */
        --body-font: "franklin-gothic-urw", sans-serif;
        --header-font: "titling-gothic-fb-compressed", sans-serif;
        --title-font: "hypatia-sans-pro", sans-serif;
 
        --header-title: "The Foundation";
 
        --light-gray-monochrome: 200, 0, 5;
 
        --header-gradient-color-bottom: var(--dark-accent);
        --header-gradient-color-middle: var(--black-monochrome);
        --header-gradient-color-top: var(--black-monochrome);
 
        --background-gradient-color: var(--light-gray-monochrome);
        --swatch-topmenu-border-color: var(--black-monochrome);
        --swatch-topmenu-bg-color: var(--dark-accent);
 
        --gradient-topmenu: linear-gradient(to bottom,
                rgba(255, 255, 255, 0) 0,
                rgba(255, 255, 255, 0) var(--header-height-on-desktop),
                rgba(var(--swatch-topmenu-border-color)) var(--header-height-on-desktop),
                rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--header-height-on-desktop) + .125rem),
                rgba(var(--swatch-topmenu-bg-color), 1) calc(100% - .125rem),
                rgba(var(--swatch-topmenu-bg-color), 0) calc(100% - .125rem),
                rgba(var(--swatch-topmenu-border-color), 0) 100%);
 
        --gradient-topmenu-mobile: linear-gradient(to bottom,
                rgba(var(--swatch-topmenu-border-color), 1) 0,
                rgba(var(--swatch-topmenu-bg-color), 1) .125rem,
                rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--topbar-height-on-mobile) - .125rem),
                rgba(var(--swatch-topmenu-bg-color), 0) calc(var(--topbar-height-on-mobile) - .125rem),
                rgba(var(--swatch-topmenu-border-color), 0) 3rem);
 
        --gradient-header: linear-gradient(to bottom,
                rgb(var(--header-gradient-color-bottom)) 0%,
                rgb(var(--header-gradient-color-middle)) 90%,
                rgb(var(--header-gradient-color-top)) 100%);
 
        --header-background-image-size: 100% var(--header-height-on-desktop);
        --header-height-on-desktop: 12.25rem;
        --header-height-on-mobile: 12.25rem;
        --topbar-height-on-mobile: 2.5rem;
 
        --header-h1-font-size: calc(var(--base-font-size) * 7);
        --max-font-size: 0.9375rem;
    }
 
    #top-bar {
        --mobile-topmenu-sidebar-button-color: var(--swatch-text-tertiary-color);
    }
 
    html,
    body {
        font-feature-settings: "onum"0;
        font-variant-numeric: tabular-nums;
    }
 
    body {
        --wght: 400;
        background-size: var(--header-background-image-size), 100% 14.25rem, 100% var(--background-gradient-distance);
        font-weight: 400;
    }
 
    #header h1 {
        text-transform: uppercase;
        letter-spacing: 0.2em;
    }
 
    #header h2 {
        display: none;
    }
 
    .danger-diamond a,
    .danger-diamond a:hover {
        box-shadow: initial !important;
        color: rgba(0, 0, 0, 0) !important;
    }
 
    #main-content {
        flex-basis: 100%;
    }
 
    #page-title,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        --wght: 900;
        color: rgba(var(--light-gray-monochrome));
        font-family: var(--title-font);
        font-weight: 900;
    }
 
    hr {
        position: relative;
        height: 0.5em;
        overflow: hidden;
        border: initial;
        background-color: rgba(0, 0, 0, 0);
    }
 
    hr::before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-attachment: fixed;
        background-image: url('https://scp-wiki.wdfiles.com/local--files/theme:the-foundation-theme/cons_circle.png');
        background-repeat: repeat;
        background-position: top center;
        background-size: 100vh;
        pointer-events: none;
        -webkit-clip-path: polygon(50% 10%, 100% 50%, 50% 90%, 0% 50%);
        clip-path: polygon(50% 10%, 100% 50%, 50% 90%, 0% 50%);
    }
 
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href="/classification-committee-memo"]) {
        margin: -0.15em;
        padding: 0.15em;
        transition:
            box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--light-gray-monochrome), 1);
        color: rgb(var(--gray-monochrome));
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }
 
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href="/classification-committee-memo"]):hover {
        margin: -0.25em;
        padding: 0.3em 0.25em 0.2em 0.25em;
        box-shadow: inset 0 -1.5em 0 0 rgba(var(--dark-accent), 1);
        color: rgb(var(--white-monochrome));
        text-decoration: none
    }
 
    #extra-div-3 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--header-height-on-desktop);
        background: url('https://scp-wiki.wikidot.com/local--files/theme:the-foundation-theme/foundation-header-img.png');
        background-position: center center;
        pointer-events: none;
    }
 
    #header::before {
        content: none;
    }
 
    #login-status .printuser {
        --wght: 900;
        color: rgb(var(--swatch-text-light));
        font-weight: 900 !important;
    }
 
    #top-bar div.top-bar>ul>li,
    #top-bar div.mobile-top-bar>ul>li {
        --wght: 800;
        font-family: var(--title-font);
        font-weight: 800;
        text-transform: uppercase;
        isolation: isolate;
    }
 
    #top-bar div.top-bar>ul>li::before,
    #top-bar div.mobile-top-bar>ul>li>a::before {
        content: " ";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition:
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-size 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -webkit-animation-direction: reverse;
        animation-direction: reverse;
        opacity: 0;
        background:
            url('https://scp-wiki.wikidot.com/local--files/theme:the-foundation-theme/foundation-circles-bg.png');
        background-attachment: fixed;
        background-position: center center;
        background-size: 100vh;
        pointer-events: none;
        pointer-events: none;
    }
 
    #top-bar div.top-bar>ul>li:hover::before,
    #top-bar div.mobile-top-bar>ul>li>a:hover::before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 1;
    }
 
    #top-bar div.top-bar>ul>li>a::before,
    #top-bar div.top-bar>ul>li>a::after {
        z-index: 1;
        background-color: rgba(var(--dark-gray-monochrome));
        pointer-events: none;
    }
 
    #side-bar {
        --swatch-border-color: rgb(var(--light-gray-monochrome));
        z-index: 10;
        top: 0;
        background-image:
            linear-gradient(to bottom,
                rgba(var(--swatch-menubg-dark-color), 1) 0%,
                rgba(var(--swatch-menubg-dark-color), 0.55) 100%),
            url("https://scp-wiki.wdfiles.com/local--files/theme:the-foundation-theme/cons_circle.png");
        transition:
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            padding 300ms linear,
            margin 300ms linear,
            transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        background-repeat: no-repeat, no-repeat;
        background-position:
            -2.5rem center,
            calc(-100% + var(--sidebar-width-on-desktop)) center;
        background-size:
            cover,
            125vh;
        background-blend-mode:
            multiply,
            normal;
    }
 
    #side-bar:hover,
    #side-bar:active {
        background-color: rgb(var(--swatch-menubg-dark-color));
        background-position: center center, center center;
    }
 
    #side-bar:focus-within {
        background-color: rgb(var(--swatch-menubg-dark-color));
        background-position: center center, center center;
    }
 
    @media only screen and (max-width:56.25rem) {
        #side-bar:target {
            background-color: rgb(var(--swatch-menubg-dark-color));
            background-position: center center, center center;
        }
    }
 
    #side-bar .heading {
        position: relative;
        padding-top: 0.15em;
        padding-bottom: 0.25em;
        font-family: var(--title-font);
    }
 
    #side-bar div.menu-item a,
    #side-bar div.menu-item .text {
        margin: 0.15em 0;
    }
 
    .yui-navset .yui-nav {
        --wght: 600;
        font-family: var(--title-font);
        font-weight: 600;
    }
 
    .yui-navset .yui-nav a::before {
        background-color: transparent;
        background-image:
            radial-gradient(closest-side,
                rgba(var(--tabs-bg), 1),
                rgba(var(--tabs-bg), 0)),
            url("https://scp-wiki.wikidot.com/local--files/theme:the-foundation-theme/foundation-circles-bg.png"),
            radial-gradient(closest-side,
                rgba(var(--tabs-bg), 1),
                rgba(var(--tabs-bg), 0));
        background-blend-mode: normal, overlay, normal;
        background-position: center center, center center;
        background-size: 100% 100%, 100vw, 100% 100%;
        pointer-events: none;
    }
 
    .yui-navset .yui-nav a:hover::before,
    .yui-navset .yui-nav a:active::before {
        background-color: transparent;
        background-image:
            radial-gradient(rgba(var(--tabs-hover-bg), 0),
                rgba(var(--tabs-hover-bg), 1)),
            url("https://scp-wiki.wikidot.com/local--files/theme:the-foundation-theme/foundation-circles-bg.png"),
            radial-gradient(rgba(var(--tabs-hover-bg), 0),
                rgba(var(--tabs-hover-bg), 1));
 
    }
 
    .yui-navset .yui-nav .selected a::before,
    .yui-navset .yui-nav .selected:hover a::before,
    .yui-navset .yui-nav .selected:focus a::before,
    .yui-navset .yui-nav .selected:active a::before {
        background-color: transparent;
        background-image:
            radial-gradient(rgba(var(--tabs-selected-bg), 0),
                rgba(var(--tabs-selected-bg), 1)),
            url("https://scp-wiki.wikidot.com/local--files/theme:the-foundation-theme/foundation-circles-bg.png"),
            radial-gradient(rgba(var(--tabs-selected-bg), 0),
                rgba(var(--tabs-selected-bg), 1));
    }
 
    .yui-navset .yui-nav li a,
    .yui-navset .yui-nav li a em,
    .yui-navset .yui-nav .selected a,
    .yui-navset .yui-nav .selected a em {
        background-color: transparent !important;
    }
 
    .yui-navset .yui-nav li,
    .yui-navset .yui-nav .selected {
        background-color: rgb(var(--swatch-background));
    }
 
    table.wiki-content-table {
        border-collapse: collapse;
    }
 
    table.wiki-content-table th {
        position: relative;
        border-color: rgb(var(--light-gray-monochrome)) !important;
        background-attachment: fixed;
        background-image: url('https://scp-wiki.wikidot.com/local--files/theme:the-foundation-theme/foundation-circles-bg.png');
        background-position: top center;
        background-size: 100vh;
        font-family: var(--title-font);
        font-weight: 600;
        text-transform: uppercase;
    }
 
    @media only screen and (max-width: 56.25rem) {
        #header h1 a {
            text-align: center;
            font-size: 3.5em;
        }
 
        #top-bar {
            font-size: calc(var(--base-font-size) * 0.8);
        }
 
        #top-bar>div.mobile-top-bar>div.open-menu {
            font-size: calc(var(--base-font-size) * 0.65);
        }
 
        #top-bar div.mobile-top-bar>ul>li>a {
            letter-spacing: 0;
        }
 
        #top-bar>div.top-bar>ul>li:last-of-type>ul,
        #top-bar>div.mobile-top-bar>ul>li:last-of-type>ul {
            left: 50%;
        }
 
        #top-bar div.mobile-top-bar>ul>li>ul>li>a {
            white-space: pre-wrap;
        }
 
        #main-content {
            margin-top: 2.1em;
        }
    }
}
 
@-webkit-keyframes fade {
    0% {
        opacity: 1;
    }
 
    100% {
        opacity: 0;
    }
}
 
@keyframes fade {
    0% {
        opacity: 1;
    }
 
    100% {
        opacity: 0;
    }
}

---

+ Show component code

#side-bar {
    /* ===SECONDARY & TERTIARY COLORS=== */
    /* Editing these will edit a vast majority of theme elements. Useful for making dark themes */
 
    /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
    --swatch-secondary-color: var(--swatch-menubg-dark-color);
    --swatch-tertiary-color: var(--swatch-menubg-medium-color);
    --swatch-alternate-color: var(--swatch-menubg-light-color);
 
    /* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */
    --swatch-text-secondary-color: var(--swatch-menutxt-dark-color);
    --swatch-text-tertiary-color: var(--swatch-menutxt-light-color);
 
    /* ===SIDE-BAR ELEMENTS=== */
 
    /* ===SIDE-BAR GENERAL=== */
    --sidebar-bg-color: var(--swatch-menubg-dark-color);
    --sidebar-resources-bg-color: 0, 0, 0, 0;
    --sidebar-media-bg-color: 0, 0, 0, 0;
 
    /* ===SIDEBLOCK MENU=== */
    --sideblock-heading-border-color: var(--bright-accent);
    --sideblock-heading-bg-color: 0, 0, 0, 0;
    /* Transparent */
    --sideblock-heading-text-color: var(--swatch-text-tertiary-color);
 
    /* ===MENU-ITEMS=== */
    --sidebar-border-color: var(--swatch-primary), 0.08;
    --sidebar-subtest-color: var(--swatch-text-tertiary-color);
 
    --sidebar-links-text: var(--swatch-text-tertiary-color);
    --sidebar-links-hover-bg-color: var(--bright-accent);
    --sidebar-links-hover-text-color: var(--swatch-text-tertiary-color);
 
    /* ===SIDEBAR COLLAPSIBLES=== */
    /*Folded Colors */
    --sidebar-collapsible-fld-link-bg: var(--swatch-primary), 0.25;
    --sidebar-collapsible-fld-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-fld-link-hover-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-fld-arrow-hover-color: var(--swatch-text-tertiary-color);
 
    /*Unfolded Colors */
    --sidebar-collapsible-ufld-link-bg: var(--swatch-primary-darker), 0.25;
    --sidebar-collapsible-ufld-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-ufld-link-hover-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-ufld-arrow-hover-color: var(--swatch-text-tertiary-color);
 
    /* Unfolded Body Colors */
    --sidebar-collapsible-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-link-hover-color: var(--swatch-text-tertiary-color);
 
    scrollbar-color:
        rgba(var(--swatch-primary-darker), 0.1)
        /* Thumb */
        rgba(var(--swatch-secondary-color), 0.05);
    /* Track */
 
    border-color: rgba(var(--swatch-secondary-color), 0.4);
}
 
/* Hover Scrollbar Behavior */
#side-bar:hover,
#side-bar:active {
    scrollbar-color:
        rgb(var(--swatch-primary-darker), 1)
        /* Thumb */
        rgb(var(--swatch-menubg-dark-color), 1);
    /* Track */
}
 
#side-bar:focus-within {
    scrollbar-color:
        rgb(var(--swatch-primary-darker), 1)
        /* Thumb */
        rgb(var(--swatch-menubg-dark-color), 1);
    /* Track */
}
 
#side-bar::-webkit-scrollbar-track {
    background-color: rgba(var(--swatch-tertiary-color), 0.8);
}
 
#side-bar::-webkit-scrollbar,
#side-bar::-webkit-scrollbar-thumb,
#side-bar::-webkit-scrollbar-corner {
    background-color: rgba(var(--swatch-menubg-dark-color), 0);
}
 
#side-bar .side-block.media a:-webkit-any-link {
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a:-moz-any-link {
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a:any-link {
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a::before {
    background: rgb(var(--social-color));
}
 
#side-bar .side-block.media a[href*="tiktok"]::before,
#side-bar .side-block.media a[href*="tiktok"]::after {
    transition:
        background 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-image 200ms cubic-bezier(0.4, 0, 0.2, 1),
        -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
        clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-image 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
        clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-image 200ms cubic-bezier(0.4, 0, 0.2, 1),
        -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
 
#side-bar .side-block.media a[href*="tiktok"]:hover::before {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
}
 
#side-bar .side-block.media a[href*="tiktok"]:hover::before,
#side-bar .side-block.media a[href*="tiktok"]:active::before {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background-image: var(--tiktok-icon-gradient);
    background-size: contain;
}
 
#side-bar .side-block.media a[href*="tiktok"]:focus-within::before {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background-image: var(--tiktok-icon-gradient);
    background-size: contain;
}
 
#side-bar .side-block.media a[href*="tiktok"]::after {
    --clip-path:
        polygon(0 0,
            0 0,
            0 100%,
            0 100%
        );
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a[href*="tiktok"]:hover::after,
#side-bar .side-block.media a[href*="tiktok"]:active::after {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a[href*="tiktok"]:focus-within::after {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a img {
    -webkit-filter: drop-shadow(0 0 0 rgba(var(--swatch-alternate-color), 0));
            filter: drop-shadow(0 0 0 rgba(var(--swatch-alternate-color), 0));
    transition: -webkit-filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
 
#side-bar .side-block.media a:hover img,
#side-bar .side-block.media a:active img {
    -webkit-filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
            filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
}
 
#side-bar .side-block.media a:focus-within img {
    -webkit-filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
            filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
}
 
html:not(:lang(cn)) div.scpnet-interwiki-wrapper p::before {
    box-shadow: inherit;
}
 
#side-bar iframe.scpnet-interwiki-frame:not(:lang(cn)) {
    -webkit-filter: invert(1);
            filter: invert(1);
}
 
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before,
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn)) p::before,
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn)) p::after {
    background-color: rgb(var(--swatch-menubg-dark-color));
}
 
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before {
    mix-blend-mode: lighten;
}

<html>
    <head>
    </head>
    <body>
        <script type="text/javascript">
        function sendStyle() {
            try {
                window.parent.window.interwikiFrame.bhlDark();
            } catch(e) {}
        }
        sendStyle();
        </script>
    </body>
</html>

Item#: xxxx

Level5

Containment Class:

Apollyon

Secondary Class:

{$secondary-class}

Disruption Class:

ekhi

Risk Class:

critical

link to memo

Assigned Site

---

Area-34

Site Director

---

Dr. Ezra Everest

Research Head

---

STAR-ABORT

Assigned MTF

---

N/A

Assigned Site

---

Area-34

Site Director

---

Dr. Ezra Everest

Research Head

---

STAR-ABORT

Assigned MTF

---

N/A

Earth.

Special Containment Procedures: A think-tank of 30 Foundation personnel has been assigned the task of proposing solutions to delay or outright stop SCP-XXXX. Requests for materials or an increased budget for testing and experimentation are to be passed by the O5 Council. Should this think-tank, currently known as PROJECT STAR-ABORT, not find an actionable solution to SCP-XXXX by June 1st, 2046, preparations are to be made to move PROJECT STAR-ABORT and any essential assets to available Exclusionary Sites and other extradimensional locations.

Description: SCP-XXXX is an event that will occur on June 5th, 2047. SCP-XXXX has repeatedly been mentioned and described throughout history by both scientific communities and folklore. SCP-XXXX consists of the Earth undergoing a thaumaturgic process that will transform it into a red dwarf star. This process, and its outcome, would render the Earth and the rest of the inner solar system inhospitable to life.

Thus far, no proposals from the think-tank have been successful at delaying or stopping SCP-XXXX from occurring. To see proposals curated by the think-tank, see Project STAR-ABORT Proposals Log.

---

ADDENDUM.XXXX.1

DISCOVERY OF SCP-XXXX

---

SCP-XXXX was first proven to exist on March 3th, 2021 by Dr. Finch Hymans, after discovering the re-occurring mentions of SCP-XXXX in folklore, specifically in those of the German, Chinese and Mexica.¹ Soon after this, Dr. Hymans discovered that the Earth's core was expanding and heating up, in accordance with these mythological mentions. Dr. Hymans then shared his discoveries with the O5 Council and PROJECT STAR ABORT was initiated. The following is a description of a Mexica codex,² as prepared by the Department of Anthropology, about the SCP-XXXX event:

DEPARTMENT OF ANTHROPOLOGY

PRE-COLUMBIAN DIVISION

Prepared by Dr. Clifford Coolidge

The codex in question was found within the Templo Mayor, a grand pyramid in what is now modern-day Mexico City. It was found during the original 1978 excavation of the site but had unfortunately been lost when moved to a warehouse due to a cataloguing error. Luckily for us, and our future, it has since been rediscovered. I worked alongside a team of experts, including Dir. Fernanda Cortès and Dr. Chicahua García, to offer as best of a translation as possible for the purposes of STAR-ABORT.

---

ADDENDUM.XXXX.2

PROJECT STAR-ABORT

---

Project Codename: STAR-ABORT

Project#: SA6179

Clearance and File#: PK005

Head Researcher: Dr. Finch Hymans

Abstract: Project STAR-ABORT was commissioned on March 3th, 2021 by the O5 Council as well as Dr.Finch Hymans, the head researcher of this project. STAR-ABORT's sole purpose is to stop or delay the SCP-XXXX event in order to prevent the extinction of all life on Earth. This project has been split up into 2 major stage: Terre and Soleil. Terre is the current stage, in which a think-tank is to propose ideas to delay or stop the SCP-XXXX event, and these ideas are to be reviewed and initiated if they are deemed to possibly be able to hinder the progress of or stop the event. Soleil is currently located in an exclusion site that is capable of sustaining 14 individuals for 3 to 4 years. These individuals are all 13 Overseers and the Administrator. Soleil's focus is to figure out how to reverse the SCP-XXXX event entirely and prevent human extinction.

---

ADDENDUM.XXXX.3

PROJECT STAR-ABORT PROPOSALS

PROPOSAL NAME	PROPOSER NAME	DESCRIPTION	STATUS
PROJECT ORPHAN	Dr. Alpine Grace	Abandon Earth and move civilization to another life-sustainable planet.	Denied We at the foundation pride ourselves on our strategies in solving issues, like the SCP-XXXX event. While this could work, we have yet to find a planet that is capable of sustaining life that is not anomalous.
PROJECT EXODUS	Drs Tristen, Trevor, and Tom Bailey	Relocate essential Foundation personnel and as much of the civilian population as possible into pocket dimensions.	Denied This has been incorporated as a failsafe measure. While this is a viable option, the goal of this is to preserve the planet Earth and allow us to remain on our home. Moving elsewhere would be admitting defeat.
PROJECT STASIS	Dr. Stephen Ansdoro	Temporally freeze the planet via thaumaturgy.	Denied The amount of thaumaturgical energy necessary to accomplish and then sustain that on such a large scale is infeasible by the Foundation or any organization for that matter.
PROJECT PHEONIX	Dr. Polly Sanchez	Utilize thaumaturgy to decrease the mass of the Earth's core.	Denied While this is a feasible option that may work, the side effects of doing so would outweigh the benefits of the ending of the SCP-XXXX event.

Earth directly after the SCP-XXXX event.

‡ Licensing / Citation

Cite this page as:

"The Sixth Sun" by AvocadoMilk and TopDownUnder, from the SCP Wiki. Source: https://scp-wiki.wikidot.com/collab:sun. Licensed under CC-BY-SA.

For more information, see Licensing Guide.
Licensing Disclosures

Filename: home.jpg
Name: Earth6391.jpg
Author: THEBLITZ1
License: CC-0
Source Link: Wikimedia

Filename: sun.jpg
Name: N/A
Author: Cole 13
License: CC BY-SA 4.0
Source Link: Lopsided Raccoons Sandbox
Derivative of: Artist's view of planets transiting red dwarf star in TRAPPIST-1 system by NASA, ESA, and G. Bacon (STScI)

For more information about on-wiki content, visit the Licensing Master List.

Open Concept?

I was thinking that the draft would start with the basic template, restricted to level 5 access.
The foundation initially found out about the event through a wl book and it was also talked about in various folklore
It's about the foundation trying to figure out a way to stop the event before it happens.
They initially propose space travel but that gets rejected by the o5s
and then they figure out the reason for why it's going to happen
because of the build-up of anomalous energy is foundation sites, it's being projected directly into the earth's core and thus causing it to expand
to stop the event, they have to minimize the amount of anomalous energy, thus making them destroy objects and humanoids including SCP-6642. SCP-100 and others
The O5s begin a new project, Project Rust, a project that makes foundation have the same objectives as the foundation in 1730
They begin to destroy all anomalies that can be destroyed, but the sudden decrease of anomalous energy causes the earth's core to expand faster

Footnotes

1. All known mentions of SCP-XXXX have since then been expunged.

2. Note that, as a full understanding of the meaning of the codex is impossible, SCP-XXXX's place in and relation to the rest of the Mexica religion is unknown.