North Star

---

+ 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 component code

@supports(display: grid) {
    :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: 769px) {
        #side-bar .close-menu {
            display: block;
            position: fixed;
            top: 0.25rem;
            left: 0.5rem;
            width: 3rem;
            opacity: 1;
            pointer-events: all;
            z-index: -1;
        }
 
        #side-bar .close-menu img {
            color: transparent;
        }
 
        #side-bar .close-menu::before,
        #side-bar .close-menu::after {
            content: "";
            box-sizing: border-box;
            position: fixed;
            display: block;
            top: 0.5rem;
            left: 0.5rem;
            width: 3rem;
            height: 3rem;
            padding: 0;
            margin: 0;
            text-align: center;
            pointer-events: all;
            cursor: pointer;
            transition:
                opacity var(--sidebar-transition-timing);
        }
 
        #side-bar .close-menu::before {
            --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E");
            z-index: -1;
            background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important;
            -webkit-mask: var(--mask);
            mask: var(--mask);
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: 50% 50%;
            mask-position: 50% 50%;
            -webkit-mask-size: 60%;
            mask-size: 60%;
        }
 
        #side-bar .close-menu::after {
            z-index: -2;
            background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important;
            border-radius: var(--toggle-roundness, 50%);
            border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid;
        }
 
        #side-bar:focus-within .close-menu::before,
        #side-bar:focus-within .close-menu::after {
            opacity: 0;
        }
 
        #side-bar {
            display: block;
            position: fixed;
            top: 0;
            left: calc(var(--sidebar-width-on-desktop)*-1);
            z-index: 10;
            transition:
                left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            margin-top: 0;
        }
 
        #side-bar:focus-within {
            left: 0;
        }
 
        #side-bar .side-block {
            margin-top: 1rem;
            background-color: rgb(0, 0, 0, 0);
            border-radius: 0;
            border-left-width: 0px;
            border-right-width: 0px;
        }
 
        #main-content::before {
            content: "";
            display: block;
            position: fixed;
            top: 0;
            right: 0;
            z-index: -1;
            opacity: 0;
            transition:
                opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            margin-left: var(--sidebar-width-on-desktop);
            background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat;
            padding-right: 0;
            width: 100%;
            height: 100vh;
            pointer-events: none;
            z-index: 99;
        }
 
        #side-bar:focus-within~#main-content::before {
            width: calc(100% - var(--sidebar-width-on-desktop));
            opacity: 1;
            pointer-events: all;
        }
 
        #content-wrap {
            display: flex;
            flex-direction: row;
            width: calc(100vw - (100vw - 100%));
            min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
            flex-grow: 2;
            height: auto;
            position: relative;
            margin: 0 auto;
            max-width: inherit;
        }
 
        #main-content {
            width: 100%;
            position: initial;
            max-height: 100%;
            padding: 2rem 1rem;
            width: var(--body-width-on-desktop, 45.75rem);
            max-width: var(--body-width-on-desktop, 45.75rem);
            margin: 0 auto;
        }
 
        #page-content {
            max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
        }
 
        @media not all and (-webkit-min-device-pixel-ratio:0), not all and (min-resolution:.001dpcm) {
            @supports (-webkit-appearance:none) {
                #side-bar {
                    transition:
                        left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                        padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                        background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
                    padding-right: 0;
                    background-color: rgb(0, 0, 0, 0);
                    pointer-events: all;
                    overflow-x: visible;
                    overflow-y: visible;
                    z-index: 999;
                }
 
                #side-bar::-webkit-scrollbar {
                    opacity: 0;
                    -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
                    transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
                }
 
                #side-bar .close-menu::before {
                    z-index: 999;
                }
 
                #side-bar .close-menu::after {
                    z-index: 998;
                }
 
                #side-bar:hover .close-menu::before {
                    opacity: 0;
                }
 
                #side-bar:hover {
                    left: 0;
                    background-color: rgba(var(--swatch-menubg-color), 1);
                    padding-right: 0;
                }
 
                #side-bar:hover::-webkit-scrollbar {
                    opacity: 1;
                }
 
                #side-bar:hover~#main-content::before {
                    width: calc(100% - var(--sidebar-width-on-desktop));
                    opacity: 1;
                    pointer-events: all;
                }
            }
        }
    }
}

+ Show

:root {
    --header-title: "SCP FOUNDATION";
 
    --dark-accent: 33, 35, 37;
    --pale-accent: 205, 205, 209;
    --bright-accent: 205, 205, 209;
    --light-gray-monochrome: 84, 84, 84;
    --dark-gray-monochrome: 56, 56, 60;
    --black-monochrome: 33, 35, 37;
    --medium-accent: var(--bright-accent);
    --tab-border-color: var(--dark-accent);
    --rating-module-button-color: var(--bright-accent);
    --rating-module-button-credit-color: var(--bright-accent);
    --swatch-background: var(--dark-accent);
    --swatch-menutxt-general-color: var(--bright-accent);
    --swatch-menubg-black-color: var(--dark-gray-monochrome);
    --barColour: #232527;
 
    --logo-image: url('https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg');
    --lgurl: var(--logo-image);
 
    --ui-wght: 400;
    --ui-hvr-wght: 500;
 
    /* Background and Header Colors */
    --background-color: var(--dark-accent);
    /* Primary Text Colors */
    --swatch-text-light: var(--bright-accent);
    --swatch-text-general: var(--bright-accent);
    /* Primary Menu Colors */
    --swatch-menubg-color: var(--dark-accent);
    /* 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-dark-color);
    --swatch-alternate-color: var(--swatch-menubg-medium-color);
    --sidebar-links-hover-text-color: var(--dark-accent);
 
    /* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */
    --swatch-text-tertiary-color: var(--swatch-menutxt-light-color);    
 
    /* Primary Header Colors */
    --swatch-topmenu-border-color: var(--swatch-menubg-black-color);
    --swatch-topmenu-bg-color: var(--swatch-menubg-extra-dark-color);
 
    --rating-module-text-color: var(--bright-accent);
    --rating-module-button-cancel-color: var(--gray-monochrome);
    ;
 
    --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%);
 
    --diagonal-stripes: repeating-linear-gradient(45deg,
            hsla(0, 0%, 100%, 0),
            hsla(0, 0%, 100%, 0) 0.25vh,
            rgba(var(--swatch-menubg-extra-dark-color), 0.1) 0.35vh,
            rgba(var(--swatch-menubg-extra-dark-color), 0.2) 0.5vh);
 
    --toggle-button-bg: rgb(var(--dark-accent));
    --toggle-border-color: rgb(var(--dark-gray-monochrome));
    --toggle-icon-color: rgb(var(--bright-accent));
}
 
#header {
            /* Focus is when the search box has been clicked on */
    --search-icon-focus-bg-color: var(--swatch-primary-darkest);
    --search-focus-textbox-bg-color: var(--swatch-primary-darkest);
 
    /* ===LOGIN BOX ELEMENT=== */
            /* Dropdown Box when arrow is clicked */
    --login-dropdown-bg-image: none;
    --login-dropdown-border-color: var(--swatch-primary-darkest), 0.9;
    --login-dropdown-text-hover-color: var(--swatch-menutxt-dark-color);
}
 
#header::before {
    background-image: var(--lgurl);
    opacity: 0.20;
}
 
#header h1 a::before {
    color: rgb(var(--bright-accent));
    -webkit-text-stroke: 0.325rem rgb(var(--dark-accent));
}
 
#header h1 a::after {
    color: rgb(var(--light-accent));
}
 
#header h2 span::before {
    -webkit-text-stroke: 0.25rem rgb(var(--dark-accent));
}
 
#top-bar {
    /* ===TOPBAR ELEMENTS=== */
 
        /* ===TOPBAR CATEGORIES=== */
    --topmenu-hover-border-color: var(--swatch-primary),0.5;
 
        /* ===DROPDOWN MENU=== */
    --dropdown-bg-color: var(--dark-gray-monochrome);
    --dropdown-border-color: var(--swatch-primary-darkest), 0.9;
}
 
#side-bar {
    --sidebar-links-hover-text-color: var(--swatch-primary-darkest);
}
 
#main-content {
    /* ===MAIN CONTENT UI ELEMENTS */
        /* ===UI ICONS=== */
            /* ===PAGE OPTIONS ICONS=== */
    --ui-icon-hover-bg: var(--swatch-primary-darkest);
 
        /* ===TABS=== */
    --tabs-hover-bg: var(--swatch-primary-darkest);
    --tabs-bottom-border-color: var(--swatch-primary-darkest);
}
 
:root {
    /* ===UI BUTTONS=== */
    --ui-button-hover-bg: var(--swatch-primary-darkest);
    --ui-button-hover-txt: var(--swatch-text-tertiary-color);
    --ui-button-hover-outline: var(--swatch-primary-darker);
 
    /* ===MODALS=== */
    --modal-header-stripe: var(--swatch-menubg-dark-color);
}
 
.modalbox {
    padding: 0.25rem;
    border-radius: 0rem !important;
    border-color: transparent !important;
    background: rgb(var(--dark-accent)) !important;
    box-shadow: none !important;
    pointer-events: auto !important;
}
 
body {
    color: rgb(var(--bright-accent));
}
 
#search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
    color: rgba(var(--swatch-primary),0);
}
 
@media (min-width: 36rem) {
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        box-shadow: 0 0 0 0.125rem rgba(var(--swatch-primary),0.2);
        color: rgba(var(--swatch-primary),0.7);
    }
}
 
#page-content a:not([href*="user"]):not([href*="javascript:;"]):not(.fa-info):not([href*="http://www.scp-wiki.net/classification-committee-memo"]):not([href="http://scp-wiki.wikidot.com/anomaly-classification-system-guide"]):not([href="/classification-committee-memo"]) {
    padding: 0.15em;
    margin: -0.15em;
    color: inherit;
    box-decoration-break: clone;
    box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--bright-accent));
    transition: box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1), color 200ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 200ms cubic-bezier(0.4, 0.0, 0.2, 1), margin 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
 
#page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href*="http://www.scp-wiki.net/classification-committee-memo"]):not([href="http://scp-wiki.wikidot.com/anomaly-classification-system-guide"]):not([href="/classification-committee-memo"]):not(.fa-info):hover {
    padding: 0.3em 0.25em 0.2em 0.25em;
    margin: -0.25em;
    box-shadow: inset 0 -1.5em 0 0 rgba(var(--bright-accent));
    text-decoration: none;
    color: rgb(var(--dark-accent))
}
 
a {
    color: inherit;
}
 
a:hover {
    color: inherit;
}
 
a.close-menu {
    background-color: transparent;
}
 
a:visited {
    color: inherit;
}
 
.scp-image-block a {
     box-shadow:none;
}
 
a.collapsible-block-link {
    padding: 0.15em;
    margin: -0.15em;
    color: inherit;
    box-decoration-break: clone;
    box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--bright-accent));
    transition: box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1), color 200ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 200ms cubic-bezier(0.4, 0.0, 0.2, 1), margin 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
 
a.collapsible-block-link:hover {
    padding: 0.3em 0.25em 0.2em 0.25em;
    margin: -0.25em;
    box-shadow: inset 0 -1.5em 0 0 rgba(var(--bright-accent));
    text-decoration: none;
    color: rgb(var(--dark-accent))
}
 
#breadcrumbs a, #breadcrumbs a:visited, .pseudocrumbs a, .pseudocrumbs a:visited {
    background-color: transparent;
    color: rgb(var(--bright-accent));
}
 
#breadcrumbs a:active, #breadcrumbs a:hover, .pseudocrumbs a:active, .pseudocrumbs a:hover {
    color: rgb(var(--dark-accent));
}
 
a:hover {
    background-color: transparent;
    color: var(--bright-accent);
    text-decoration: none;
}
 
a.close-menu {
    background-color: transparent;
}
 
::-moz-selection {
    background: rgb(var(--bright-accent),0.25);
}
 
::selection {
    background: rgb(var(--bright-accent),0.25);
}
 
#page-title::after,
.meta-title::after,
#page-title::before,
.meta-title::before {
    background: rgba(var(--swatch-primary),0.5);
}
 
.creditButton p a {
    background-color: rgb(var(--black-accent));
}
 
#page-content .rate-box-with-credit-button {
    display: inline-flex;
    height: var(--rating-module-height);
    margin-bottom: .75rem;
    padding: 0 .125rem;
    overflow: hidden;
    border: .0625rem solid rgba(var(--gray-monochrome));
    border-radius: 0;
    background: rgb(var(--dark-accent));
    background-color: rgb(var(--dark-accent));
}
 
#top-bar div.mobile-top-bar>ul>li>ul>li:hover>a,
#top-bar div.top-bar>ul>li>ul>li:hover>a {
    color: rgb(var(--dark-accent));
    text-decoration: none;
}
 
#side-bar .heading {
    background: rgb(var(--dark-gray-monochrome));
}
 
#side-bar .side-block {
    background-color: rgb(var(--dark-accent));
}
 
#side-bar .side-block.resources {
    background: rgb(var(--dark-accent)) !important;
}
 
#side-bar .side-block.media {
    background-color: rgba(var(--dark-gray-monochrome)) !important;
}
 
#side-bar div.menu-item>a, #side-bar div.menu-item>a:visited {
    color: rgb(var(--bright-accent));
}
 
#side-bar div.menu-item>a:hover {
    color: rgb(var(--dark-accent));
}
 
.side-block.media a {
    background: transparent
}
 
#side-bar .collapsible-block .collapsible-block-folded,
#side-bar .heading {
    background: rgb(var(--dark-gray-monochrome));
}
 
#search-top-box-input {
    background-color: rgb(var(--dark-gray-monochrome));
}
 
#account-options {
    border-color: var(--bright-accent);
    background: var(--dark-accent);
    color: var(--bright-accent);
}
 
#login-status {
    color: rgba(var(--swatch-menutxt-light-color), 0.5);
}
 
#login-status ul a {
    color: rgb(var(--bright-accent));
}
 
#login-status .printuser {
    background-color: transparent;
    color: rgb(var(--bright-accent));
}
 
.page-rate-widget-box {
    border: 0.0625rem solid rgba(var(--swatch-menubg-dark-color));
    background: rgb(var(--dark-accent));
}
 
#top-bar div.mobile-top-bar {
    background: rgb(var(--dark-accent));
}
 
#top-bar div.top-bar>ul>li:hover {
    background: rgb(var(--swatch-menubg-black-color));
}
 
#top-bar div.mobile-top-bar>ul>li.sfhover>ul,
#top-bar div.mobile-top-bar>ul>li:hover>ul,
#top-bar div.top-bar>ul>li.sfhover>ul,
#top-bar div.top-bar>ul>li:hover>ul {
    color: rgb(var(--dark-accent));
}
 
blockquote,
div.blockquote {
    border: none;
    background-color: rgb(var(--dark-gray-monochrome));
    --swatch-border-color: var(--gray-monochrome);
    box-shadow: .0225rem .0835rem .0725rem .0925rem rgb(var(--dark-accent));
}
 
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    box-shadow: none;
}
 
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    --box-shadow: none;
}
 
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav hover a {
    border-color: rgb(var(--dark-accent));
}
 
.yui-navset .yui-nav .selected a {
    border-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent)) !important;
}
 
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
    background: rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}
 
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    background: rgb(var(--dark-accent));
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background-color: rgb(var(--swatch-menubg-dark-color));
    color: rgb(var(--dark-accent));
}
 
.yui-navset-bottom .yui-nav li a,
.yui-navset-top .yui-nav li a,
.yui-navset .yui-nav li a {
    background: rgb(var(--dark-gray-monochrome));
    color: rgb(var(--bright-accent));
}
 
#page-content .blockquote div.b-tables table.wiki-content-table th, #page-content .blockquote table.wiki-content-table th {
    background: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
    border: 0.0625rem solid rgba(var(--bright-accent))!important;
}
#page-content .blockquote table.wiki-content-table td {
    border: 0.0625rem solid rgba(var(--bright-accent))!important;
}
 
#page-content div.b-tables table.wiki-content-table th, #page-content table.wiki-content-table th {
    background: rgb(var(--dark-gray-monochrome));
    color: rgb(var(--white-accent));
    --tables-border: var(--dark-gray-monochrome);
}
 
textarea,
input.text,
input.checkbox,
div.note,
#lock-info {
    border: 0.0625rem solid rgba(var(--swatch-menubg-light-color), 0.25);
    background-color: rgb(var(--swatch-menubg-extra-dark-color));
    color: rgb(var(--swatch-text-light));
}
 
.code pre span[class*="hl-"] {
    -webkit-filter: invert(1) hue-rotate(180deg);
    filter: invert(1) hue-rotate(180deg);
}
 
.owindow .modal-body img {
    background-color: transparent !important;
}
 
#odialog-container div.owindow {
    background-color: rgb(var(--dark-accent));
}
 
.hovertip {
    border: .0625rem solid rgb(var(--dark-gray-monochrome));
    color: rgb(var(--swatch-text-light));
}
 
.hovertip .content {
    padding: 0;
}
 
#footer {
    color: rgb(var(--bright-accent));
}
 
#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-color));
}
 
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before {
    mix-blend-mode: lighten;
}
 
.image-block .image-caption, .scp-image-block .scp-image-caption {
    box-shadow: none;
     border: none;
    background-color: rgb(var(--dark-gray-monochrome));
    color: rgb(var(--bright-accent));
}
 
.scp-image-block a {
    background-color: transparent;
}
 
.scp-image-block {
    box-shadow: .0225rem .0835rem .0725rem .0925rem rgb(var(--dark-accent));
}
 
.footnote {
    padding: .625em;
    background-color: rgb(var(--dark-gray-monochrome));
}
 
.footnotes-footer {
    border-left: none;
    background-color: rgba(var(--dark-gray-monochrome));
}
 
.hovertip .f-heading {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}
 
.bibitems .title, .footnotes-footer .title {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}
 
.bibitems, .footnotes-footer {
    box-shadow: inset .5em 0 0 0 rgba(var(--bright-accent));
}
 
.licensebox .collapsible-block-link {
    background: none;
}
 
table.page-history tr:nth-of-type(2) td:not(:nth-of-type(7)):before {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}
 
.pager .current, .pager .current:before {
    background-color: rgb(var(--dark-accent));
}
.pager .current {
    color: rgb(var(--bright-accent));
}
 
.paged a:visited, .pager a {
    color: rgb(var(--bright-accent));
}
 
.printuser img.small {
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: -0.4em;
}
 
#who-rated-page-area .printuser a {
    font-size: 100%;
}
 
#who-rated-page-area .printuser {
    background-color: transparent;
}
 
#search-top-box input.empty {
    color: rgba(var(--bright-accent));
}
 
.page-tags a:hover {
    color: rgb(var(--dark-accent));
}
 
#main-content .page-tags:before {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}
 
#main-content .page-tags {
    box-shadow: 0 -.125rem 0 0 rgb(var(--bright-accent));
}
 
.footnotes-footer a[href*=javascript], .footnotes-footer a[href*=javascript]:visited {
    background-color: transparent;
}
 
#license-area {
    background-color: rgb(var(--dark-gray-monochrome));
}
 
#page-content .rate-box-with-credit-button>.creditButton>p>a:after {
    background-color: rgba(var(--dark-accent));
}
 
[id*=u-credit] .credit.first, [id*=u-credit] .credit.otherwise {
    padding: 5px;
}
 
[id*=u-credit] div.creditBottomRate {
    padding: 0.5rem 0 0;
}
 
.acs-hybrid-text-bar>.acs-clear>.clearance-level-text::before {
    color: rgba(var(--bright-accent), 1);
}
 
.acs-hybrid-text-bar>.acs-disrupt .disruption-class-number::before {
    color: rgba(var(--bright-accent), 1);
}
 
.acs-hybrid-text-bar>.acs-risk .risk-class-number::before {
    color: rgba(var(--bright-accent, 12, 12, 12), 1);
}
 
.contain-class .class-text::before {
    color: rgb(228 228 228);
}
 
.anom-bar-container.esoteric .text-part>.main-class>.second-class>.class-text::after {
    color: #e4e4e4;
}
 
.info-container .collapsible-block-folded,
.info-container .collapsible-block-unfolded-link {
    background: rgb(var(--bright-accent));
}
 
.info-container .collapsible-block-folded .collapsible-block-link,
.info-container .collapsible-block-link {
    background: rgb(var(--dark-accent));
}
 
#page-content .info-container a.collapsible-block-link:hover {
    box-shadow: inset 0 -1.5em 0 0 rgba(var(--dark-accent));
}
 
.acs-hybrid-text-bar>a {
    background-color: transparent;
    color: transparent;
}
 
.acs-hybrid-text-bar>.acs-clear>.clearance-level-text::after {
    padding-top: 0.1rem;
    color: rgba(var(--bright-accent), 1);
}
 
.acs-hybrid-text-bar>.acs-risk .risk-class-number::after {
    color: rgba(var(--bright-accent));
}
 
.acs-hybrid-text-bar>.acs-disrupt .disruption-class-number::after {
    color: rgba(var(--bright-accent), 1);
}
 
.danger-diamond a,
.danger-diamond a:hover {
    background-color: transparent;
    color: rgba(0, 0, 0, 0);
}
 
.authorlink-wrapper > a {
    background-color: transparent;
    color: rgb(var(--bright-accent));
    --author-right-adjust: 0rem;
}
 
.authorlink-wrapper > a::before {
    color: darkgrey;
}
 
.authorbox {
    filter: drop-shadow(0 0 3px rgba(228, 228, 228));
}
 
.printuser a {
    margin-right: -0.0625rem;
    background-color: none;
    font-size: 0.875rem;
}
 
.printuser img.small {
    width: 1.1875rem;
    height: 1.1563rem;
    vertical-align: -0.4em;
}
 
.printuser:hover {
    background-color: transparent;
}
 
.page-tags a {
    background-color: transparent;
    color: rgb(var(--bright-accent));
}
 
table.page-files tr>td>a:not(.btn), table.page-files tr>td>a:visited:not(.btn) {
    color: rgb(var(--bright-accent));
}
 
table.page-files th {
    color: rgb(var(--dark-accent));
}
 
@media (min-width: 36rem) {
#login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) {
    --clip-path: none;
}
}

Series Archive » North Star

But anomalous people are people, and the anomalous itself is not a threat merely for existing.

…

You are the monsters you are so afraid of. Let go of your fear, and join us in the light.

And if you will not… if you keep imprisoning and killing innocents, if you keep forcing the world to stay in the dark… then you will meet the fate of all the slavers and murderers in the worlds' history before you.

We will free those you keep imprisoned. We will rescue those you try to kill.

-Excerpt from "What To Know About The Serpent's Hand"

---

---

> Premise <

Life is hell for humanoid anomalies.

They are stolen from their life of freedom, with any knowledge of their existence being erased from the minds of their friends and family. They are dragged to an unfamiliar, concrete research facility, where their abilities are prodded and test. They are put in orange jumpsuits, have their name replaced with numbers, and given a 10 by 10 cell to wither away in.

They are prisoners.

The O5 don't care about their suffering. The Ethics Committee is corrupt beyond saving. Doctors see humanoid skips as resources. MTF agents are required to be prejudice and dehumanizing.

But not everyone within the Foundation is as heartless as the researchers of Site-17. There are those whose compassion and empathy outweigh their lust for cheating at life.

There are 2 factions within the SCP Foundation. One sees skips as tools. One sees skips as people. These 2 factions cannot co-exist. Sooner or later… there will be blood.

---

---

> Latest Installment <

-Posted 2/15/2022-
SCP-6303¹

I will be a reason for them to live. Even if I'm the only reason.

---

---

> Table of Contents <

Phase 0 (Optional Read)

Initiation

Squad-13's first mission, and their introduction to MTF.

---

The Scottish Goliath

There were gun shots in the distance. Hopefully they were Daddy's and not the bad guy's.

The Minutemen

"Our task force, Delta-4, goes by the name 'Minutemen.' Do you know why?"

Brink of Hysteria

He blinked rapidly and moved his eyes to let her know that he was, in fact, not dead.

Phase 1

Humans and Horrors

It's one thing to combat anomalous monsters and beats, it's another thing to hunt down people.

---

Beyond The Depths
Asset, Not Agent | Foreigners | In A Flash | For The Present² | It's A Long Way To Go | Knife Edge

"I'm not calling you 105 because of some vendetta or personal opinion. I call you 105 because that is your name, and I call you it because you are an object. An SCP object, property of the SCP Foundation. Understand?"

We Concerned Few

"If this is an inside job, I want to know who so I can personally shoot that son of a bitch in the head."

The Sisters Saga
Prisoners | Family | Showtime | Sisters

By thedeadlymoose, originally written for Resurrection

SCP-6303³

I will be a reason for them to live. Even if I'm the only reason.

Coming Soon…

Phase X

Alternate Timelines/Spinoff Works

The multiverse is a vast string of narratives, weaving in and out of each other. Sometimes a story can only be described as 'partly canon.'

---

Operation Galvanic Ukulele

By Professor Puffer

The Area-10 Massacre

By Professor Puffer

After-Action Report: Operation Thermopylae

By Professor Puffer

---

---

> Announcement/Update Board <

> 3/24/2022 *Latest <

Update 2: CSS Boogaloo

DrDapper… didn't you just make an update post talking about how BASALT was the new theme for North Star?

Yeah yeah, I hear ya… but here's thing about me…

I'm the kind of person who dusts off his hands saying "job well done" after making and posting something. I then proceed to go to sleep, wake up the next morning, look over what I made, and say "oh my god what was I thinking?"

Yeah, after looking over the hub and articles, I decided that BASALT wasn't for me. No offense to the creator, it really is a good theme… it just really doesn't reflect the atmosphere I want North Star to have.

So, now I'm using Jakstyle (thanks JakdragonX). This should hopefully be the one I keep, but if it isn't… I'll see you in the next update post.

PS: This is also a dark themed… uh… theme, so you can read my articles at night without flash-banging yourself now. You're fucking welcome.

> 3/21/2022 <

Quality of Life Overhaul/Where Have I Been?

Hello everyone, been a while huh? I know what you're thinking.

Dapper… what the hell am I looking at and where the hell have you been?

Let's start with addressing that first question: the theme change.

So I learned that CSS is actually really flexible when it comes to customization, more so than I originally thought. Not only that, but you don't need a PhD in computer programing to operate it. So, I said fuck it, and made my own theme…

…

….well ok, not MAKE my own theme. I'm using the BASALT theme as a base. I did change the SCP logo and header, but that's about it. So yeah, this is going to be the official theme or North Star, get used to it. Also, I made different headers for each Phase (formerly referred to as Parts).

Question number 2: where have I been?

Short answer: Broken Masquerade.

Long answer: Drafting up a tale for Broken Masquerade in my sandbox. No, I haven't posted it. No, it isn't done. No, it isn't close to being done. No, I didn't give up.

Basically, I hit a massive writers block following SCP-6303… at least for North Star. I had an idea for BM that I wanted to at least jot down… so I did. I worked on the BM tale while thinking up ways to continue NS. Good news is the wheels are finally starting to turn again. The BM tale is on the backburner while I chug forward with NS. Hopefully that answers your question.

This was a pretty short update log, which I DO plan on using in the future. I won't post here often, only if I need to make a PSA or anything. Anyway, thank you guys for sticking with me. See ya in the next one!

---

---

> Spoiler Drop <

Notice:
Below contains up-to-date information about this series. As such, it main contain spoilers to those who aren't caught up on the latest tale. It is advised you read through the canon before dropping the collapsible.

Consider this your warning.

> Spoiler Drop <

Groups of Interests

The SCP Foundation

The SCP Foundation is evil, plain and simple. They murder, torture, kidnap, and abuse; all in the name of the vaguely defined 'greater good.' While there are lines they won't cross, they aren't above exploiting SCPs (including humanoids) to maintain the status quo.

---

The Ethics Committee

The Ethics Committee, much like the Foundation as a whole, is rotten to the core with corruption. Members will turn a blind eye to unethical and immoral practices if it means they themselves can benefit. It also isn't nearly as influential as it should be.

---

The Chaos Insurgency

The Chaos Insurgency believe the Ethics Committee's restrictions and Foundation bureaucrats are holding humanity back from greatness. Unlike the Serpent's Hand, who merely want to assimilate anomalies into daily life, the Insurgency seeks to make mankind a race of gods. They also aren't above using or treating anomalies in an inhumane way.

Locations

Site-47

Location: Salt Lake City, Utah (United States)

Site Type: Garrison

---

Site-17

Location: Boulder, Colorado (United States)

Site Type: Humanoid Containment

Mobile Task Forces

Delta-4 ("Minutemen")

Delta-4 is an extreme rapid response task force. Their duty is to get someplace fast, evacuate civilians, and establish a perimeter. They also provide additional manpower to other MTFs present, helping them with general tasks (such as escort and extract). It has the highest causality rate of any task force

---

Omega-7 ("Pandora's Box")

Omega-7 is the first task force to utilize humanoid anomalies. Specifically, SCP-076-2 and SCP-105. They're usually only called in when a situation gets out of hand. Although Omega-7 is only used to counter anomalous events and creatures, there are many pushing for Pandora's Box to be used against GoIs.

---

Omega-1 ("Law's Left Hand")

Omega-1 acts as the Ethics Committee's personal task force. Mostly made up of detectives, Omega-1 investigates potential ethical violations and inhumane practices. It also has a spec ops branch for when they need to enforce the Committee's restrictions. Despite having one of the most important tasks in the Foundation, Omega-1 is sorely underfunded and understaffed.

Characters

Delta-4

David Black

• DoB: June 3rd, 1975
• Current Occupation: Infantry

Jessica Milo

• DoB: January 22nd, 1976
• Current Occupation: Sharpshooter

Charles Rigby

• DoB: March 18th, 1975
• Current Occupation: Pilot/Mechanic

James Albany

• DoB: October 29th, 1968
• Current Occupation: Senior Officer

Riley Jaxon

• DoB: February 29th, 1968
• Current Occupation: Senior Officer

John Brian

• DoB: Unknown
• Current Occupation: Senior Officer

---

Omega-7

Eric Johnson

• DoB: December 6th, 1970
• Current Occupation: Senior Officer

Stephen Vincent

• DoB: April 26th, 1972
• Current Occupation: Technician Specialist

Nikki Anderson

• DoB: April 13th, 1973
• Current Occupation: Demolitionist

Mathew Lopez

• DoB: September 18th, 1971
• Current Occupation: Infantry

Beatrix Maddox

• DoB: March 30th, 1970
• Current Occupation: Field Medic

---

Omega-1

Nathanael Cornwall

• DoB: September 4th, 1970
• Current Occupation: Detective

Henry Parker

• DoB: May 8th, 1945
• Current Occupation: Commander

---

SCPs

Iris Thompson

• DoB: May 12th, 1988
• Current Occupation: SCP-105, Omega-7

---

Foundation

Amelia Hayes

• DoB: July 14th, 1980
• Current Occupation: Humanoid SCP Counselor

Elizabeth Eliza

• DoB: January 26th, 1959
• Current Occupation: Head of Medium-Risk Humanoid Containment, Site-17

---

---

> Gallery <

All art courtesy of eddybird
May contain spoilers

> Beyond The Depths: Asset, Not Agent <

> Beyond The Depths: Foreigners <

> Beyond The Depths: In A Flash <

> Beyond The Depths: For The Present <

> Beyond The Depths: It's A Long Way To Go <

> Beyond The Depths: Knife Edge <

---

---

> Notification Roster<

Want to be notified when the next story in North Star gets released? Add your name to the bottom, and we'll send you a DM via Wikidot alerting you of when that happens! To apply, simply go down to the bottom of this page, press 'Edit,' go to the bottom of the source code (where the roster is), add your name, and press 'Save.' It really is just that easy!

---

DrDapper
RonaldBird
Comrade Waldo
Professor Puffer
Mad Dessert
Siddartha Alonne
NDHeckfire
Subervos
Vipsanius

---

Shy and don't want your name displayed? Don't worry! Just send a DM to DrDapper saying that you'd like to be added, and you'll be put on the 'shadow list.' Don't worry, it's the exact same as the roster above, only private.

Footnotes

1. Content Warning: Suicide

2. Content Warning: Extreme Distress, Child Death

3. Content Warning: Suicide