Dark Light 4

---

+ 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;
        }
    }
}

---

+ 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

@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-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: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 img {
    filter: drop-shadow(0 0 0 rgba(var(--swatch-alternate-color),0));
    transition: 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 {
    filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
}
 
#side-bar .side-block.media a:focus-within img {
    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)) {
    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>

SCP-4485 ORIENTATION TEIL ▓▓ VON 8

!! TERMINALNACHRICHT !!

Ich habe hier nicht mehr viel Zeit.

Die seitlichen Augen heben ihre Flossen in den Himmel und sinken in den Abgrund.
Es ruft nach mir und ich ignoriere es.

Bald wird es mich haben.
Und dich.

Und nichts, wenn du mich fragst.
L ä c h e r l i c h!

Schau einfach schnell und finde heraus, wovor du dich versteckst.
Ich werde nehmen und senden.

—Dr. Lark

---

SCP-4485 PRIMÄRDOKUMENT
TAGEBUCH VON JEAN ARP (AKA HANS ARP) ENTDECKT AM 29. Juni 1967	GESCANNTE DUPLIKATE VON SCP-4485 DATENBANK-SPEICHERORT LEVEL 5 — STRENG GEHEIM

---