SCP-5311

+ 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.5rem;
            left: 0.5rem;
            width: 3rem;
            height: 3rem;
            background: unset;
            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,
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu {
            pointer-events: none;
        }
 
        #side-bar:focus-within .close-menu::before,
        #side-bar:focus-within .close-menu::after {
            opacity: 0;
            pointer-events: none;
        }
 
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::before,
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::after {
            opacity: 0;
            pointer-events: none;
        }
 
        #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:not(:has(.close-menu:hover)):not(:focus-within):hover {
            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;
        }
 
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before {
            width: calc(100% - var(--sidebar-width-on-desktop));
            opacity: 1;
            pointer-events: all;
        }
 
        @supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { #side-bar {
            padding: inherit;
        } }
 
        #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;
            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));
        }
 
        @supports (-webkit-hyphens: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,
            #side-bar:hover .close-menu::after {
                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 component code

: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);
 
        --logo-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg");
    }
 
    #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);
        }
 
         #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

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
 
@import url('https://fonts.googleapis.com/css2?family=Tomorrow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
 
@import url("https://cdn.statically.io/gh/scp-cs/scp-cs-wiki/b5482e2a/BHL-Theme-fix.css");
 
#main-content {
    padding: 1rem;
    margin-top: 0;
}
: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: "isolated-terminal";
     /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
     --theme-name: "Isolated Terminal Theme";
     /* set this to your theme's full name */
 
     /* header measurements */
     --header-height-on-desktop: 12.4rem;
     --header-height-on-mobile: 12rem;
     --header-h1-font-size: calc(var(--base-font-size) * 3);
 
     /* Typefaces */
     --body-font: 'Tomorrow', sans-serif;
     --header-font: 'VT323', monospace;
     --title-font: 'VT323', monospace;
     --mono-font: 'JetBrains Mono', monospace;
     --UI-font: 'JetBrains Mono', monospace;
     --base-font-size: 1.11rem;
 
     /* null logo */
     --logo-image: none;
 
     /* change title */
     --header-title: "SCP NADACE" !important;
 
     /* Header Gradients */
     --diagonal-stripes: initial;
 
/*----*/
 
  --accentColor: 246,196,3;
  --darkColor: 40,26,8;
 
  --bright-accent: var(--accentColor);
  --dark-accent: var(--accentColor);
  --pale-accent: var(--accentColor);
  --medium-accent: var(--accentColor);
 
  --black-monochrome: var(--accentColor);
  --dark-gray-monochrome: var(--darkColor);
  --gray-monochrome: var(--darkColor);
  --light-pale-gray-monochrome: var(--darkColor);
  --pale-gray-monochrome: var(--accentColor);
  --very-light-gray-monochrome: var(--darkColor);
  --white-monochrome: var(--darkColor);
 
  --rating-module-bg-color: var(--pale-gray-monochrome);
  --rating-module-button-color: var(--white-monochrome);
  --rating-module-button-credit-color: var(--white-monochrome);
  --rating-module-text-color: var(--white-monochrome);
  --rating-module-button-cancel-color: var(--gray-monochrome);
  --rating-module-button-plus-color: var(--rating-module-button-cancel-color);
  --rating-module-button-negative-color: var(--rating-module-button-cancel-color);
  --rating-module-text-hover-color: var(--pale-gray-monochrome);
 
  --swatch-headerh1-color: var(--black-monochrome);
 
  --swatch-menubg-medium-color: var(--bright-accent);
  --swatch-menubg-light-color: var(--gray-monochrome);
  --swatch-menutxt-light-color: var(--black-monochrome);
  --swatch-menubg-medium-dark-color: var(--black-monochrome);
 
  --swatch-primary-darker: var(--bright-accent);
  --swatch-primary-darkest: var(--pale-gray-monochrome);
  --swatch-text-secondary-color: var(--white-monochrome);
  --swatch-text-light: var(--bright-accent);
  --swatch-topmenu-bg-color: var(--bright-accent);
 
  --gradient-header: none;
  --gradient-background: rgb(var( --gray-monochrome));
 
  /* Desktop Sidebar button */
  --toggle-button-bg: rgb(var(--swatch-menubg-light-color));
  --toggle-border-width: 0;
  --toggle-icon-color: rgb(var(--swatch-primary-darkest));
  --toggle-roundness: 0;
}
 
/* ------------------------------- */
 
/* header title adjustments */
#header::before { opacity: 1; } /* change logo opacity */
#header { filter: none; }
#header h1, #header h1 a, #header h1 a::before {
    text-shadow: none;
    letter-spacing: 0.1rem;
    align-self: flex-end;
}
#header h1 a::before {
    height: 0.5em;
    -webkit-text-stroke: 0;
}
#header h1 a::after, #header h1 a span, #header h2 { display: none; }
 
/* svg logo mask */
#header::before {
    background-color: rgb(var(--black-monochrome));
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' width='1040' height='1040'%3E%3Cpath d='M437 969v-10h-73v-18h-36v-18h-36v-18h-36v-18h-56v18h-72v-36h-18v-36H92v-37H74v-36H55v-36H37v-36H19v-56h18v-18h18v-18h19V451h18v-72h18v-38h18v-36h18v-36h18v-18h18v-18h18v-19h20v-18h18v-18h18v-18h36v-18h36v-18h18v-18h18V50h19V32h272v18h19v56h18v18h18v18h36v18h36v18h18v18h20v18h18v19h18v18h18v18h18v36h18v36h18v38h18v72h18v145h19v18h18v18h18v56h-18v36h-18v36h-19v36h-18v37h-18v36h-18v36h-72v-18h-56v18h-36v18h-36v18h-36v18h-73v20H437v-10zm146-37v-9h72v-18h37v-18h36v-18h18v-18h92v18h54v-36h18v-37h18v-36h18v-36h18v-36h19v-38h-19v-18h-18v-18h-18V469h-18v-72h-18v-38h-18v-36h-18v-18h-18v-36h-18v-18h-20v-18h-18v-19h-36v-18h-18v-18h-36v-18h-18v-18h-19v-36h-18V70H401v36h-18v36h-19v18h-18v18h-36v18h-18v18h-36v19h-18v18h-18v18h-20v36h-18v18h-18v36h-18v38h-18v72h-18v145H92v18H74v18H55v38h19v36h18v36h18v36h18v37h18v36h54v-18h92v18h18v18h36v18h37v18h72v18h128v-9z'/%3E%3Cpath d='M437 805v-9h-54v-18h-37v-18h-18v-18h-18v-18h-18v-18h-36v18h-36v18h-20v-18h-18v-36h38v-18h18v-20h18v-18h-18v-72h-18v-73h18v-72h18v-36h18v-38h18v-18h18v-18h18v-18h18v-18h37v-18h36v-18h72v-55h56v55h72v18h36v18h37v18h18v18h18v18h18v18h18v38h18v36h18v72h20v73h-20v72h-18v18h18v20h20v18h36v36h-18v18h-18v-18h-38v-18h-36v18h-18v18h-18v18h-18v18h-37v18h-54v18H437v-9zm164-54v-9h36v-18h37v-18h18v-18h18v-18h-18v-20h-37v-18h-18v38h-18v-20h-18v-36h-18v-18h-18v-18h-18v-36h90v18h55v18h-18v18h18v18h36v18h18v-54h18V469h-18v-54h-18v-36h-18v-20h-18v-18h-18v-18h-37v-18h-36v-18h-54v92h36v36h-18v36h-18v36h-18v18h-20v-18h-18v-36h-18v-36h-18v-36h36v-92h-54v18h-36v18h-37v18h-18v18h-18v20h-18v36h-18v54h-18v109h18v54h18v-18h36v-18h18v-18h-18v-18h55v-18h90v36h-18v18h-18v18h-18v36h-18v20h-18v-38h-18v18h-37v20h-18v18h18v18h18v18h37v18h36v18h164v-9z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' width='1040' height='1040'%3E%3Cpath d='M437 969v-10h-73v-18h-36v-18h-36v-18h-36v-18h-56v18h-72v-36h-18v-36H92v-37H74v-36H55v-36H37v-36H19v-56h18v-18h18v-18h19V451h18v-72h18v-38h18v-36h18v-36h18v-18h18v-18h18v-19h20v-18h18v-18h18v-18h36v-18h36v-18h18v-18h18V50h19V32h272v18h19v56h18v18h18v18h36v18h36v18h18v18h20v18h18v19h18v18h18v18h18v36h18v36h18v38h18v72h18v145h19v18h18v18h18v56h-18v36h-18v36h-19v36h-18v37h-18v36h-18v36h-72v-18h-56v18h-36v18h-36v18h-36v18h-73v20H437v-10zm146-37v-9h72v-18h37v-18h36v-18h18v-18h92v18h54v-36h18v-37h18v-36h18v-36h18v-36h19v-38h-19v-18h-18v-18h-18V469h-18v-72h-18v-38h-18v-36h-18v-18h-18v-36h-18v-18h-20v-18h-18v-19h-36v-18h-18v-18h-36v-18h-18v-18h-19v-36h-18V70H401v36h-18v36h-19v18h-18v18h-36v18h-18v18h-36v19h-18v18h-18v18h-20v36h-18v18h-18v36h-18v38h-18v72h-18v145H92v18H74v18H55v38h19v36h18v36h18v36h18v37h18v36h54v-18h92v18h18v18h36v18h37v18h72v18h128v-9z'/%3E%3Cpath d='M437 805v-9h-54v-18h-37v-18h-18v-18h-18v-18h-18v-18h-36v18h-36v18h-20v-18h-18v-36h38v-18h18v-20h18v-18h-18v-72h-18v-73h18v-72h18v-36h18v-38h18v-18h18v-18h18v-18h18v-18h37v-18h36v-18h72v-55h56v55h72v18h36v18h37v18h18v18h18v18h18v18h18v38h18v36h18v72h20v73h-20v72h-18v18h18v20h20v18h36v36h-18v18h-18v-18h-38v-18h-36v18h-18v18h-18v18h-18v18h-37v18h-54v18H437v-9zm164-54v-9h36v-18h37v-18h18v-18h18v-18h-18v-20h-37v-18h-18v38h-18v-20h-18v-36h-18v-18h-18v-18h-18v-36h90v18h55v18h-18v18h18v18h36v18h18v-54h18V469h-18v-54h-18v-36h-18v-20h-18v-18h-18v-18h-37v-18h-36v-18h-54v92h36v36h-18v36h-18v36h-18v18h-20v-18h-18v-36h-18v-36h-18v-36h36v-92h-54v18h-36v18h-37v18h-18v18h-18v20h-18v36h-18v54h-18v109h18v54h18v-18h36v-18h18v-18h-18v-18h55v-18h90v36h-18v18h-18v18h-18v36h-18v20h-18v-38h-18v18h-37v20h-18v18h18v18h18v18h37v18h36v18h164v-9z'/%3E%3C/svg%3E");
    -webkit-mask-size: calc(var(--header-height-on-desktop) - var(--header-h1-font-size) - 1rem);
            mask-size: calc(var(--header-height-on-desktop) - var(--header-h1-font-size) - 1rem);
    -webkit-mask-position: center 0;
            mask-position: center 0;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}
 
#header {
    --swatch-text-secondary-color: var(--black-monochrome);
 
    --login-dropdown-text-hover-color: var(--white-monochrome);
}
 
#my-account:hover, #my-account:active, #my-account:focus {
    --login-myaccount-color: var(--white-monochrome);
}
 
#search-top-box:focus-within {
    --search-icon-hover-color: var(--swatch-menubg-light-color);
}
#search-top-box form[id="search-top-box-form"] input[type="text"] {
    --search-focus-textbox-bg-color: var(--black-monochrome);
    background-color: rgb(var(--search-focus-textbox-bg-color), 0.06)!important;
}
#search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
    --search-textbox-text-color: var(--black-monochrome);
}
 
#top-bar {
    --dropdown-links-hover-color: var(--white-monochrome);
}
#top-bar .mobile-top-bar > ul > li > a {
    --topmenu-category-color: var(--white-monochrome);
}
#top-bar .mobile-top-bar > ul > li:hover > a,
#top-bar .mobile-top-bar > ul > li:active > a,
#top-bar .mobile-top-bar > ul > li:focus-within > a {
    --topmenu-category-hover-bg: var(--white-monochrome);
}
#header div[class*="top-bar"] > div.open-menu > p > a {
    --mobile-topmenu-sidebar-button-color: var(--white-monochrome);
}
 
/* ------------------------------- */
 
#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;
}
 
/* ------------------------------- */
 
/* EDITBOX */
#wd-editor-toolbar-panel {
    --editor-icon-color: var(--white-monochrome);
}
form#edit-page-form .edit-page-bottomtable div.sub {
  color: var(--swatch-primary-darkest);
}
 
/* ------------------------------- */
 
/* Image Block */
.scp-image-block {
    box-sizing: border-box;
    border-width: 0;
    box-shadow: none;
}
.scp-image-block .scp-image-caption {
    color: rgb(var(--swatch-text-secondary-color));
    background-color: rgb(var(--swatch-primary-darker));
    border-color: rgb(var(--swatch-primary-darker));
    padding: 0.15rem;
    margin-top: 6px;
}
 
/* Blockquote */
#main-content {
    --blockquote-bg-color: var(--swatch-tertiary-color), 0.06;
}
 
/* Code */
div.code {
   background-color: #f4f4f4;
   text-shadow: none;
}
 
/* hr */
hr {
    background-color: rgb(var(--swatch-menubg-medium-color));
    height: 0;
    margin-top: 1.5em; margin-bottom: 1.5em;
}
blockquote > hr, div.blockquote > hr {
    margin-left: -1.25em;
    margin-right: -1.25em;
}
 
/* footnotes */
.footnotes-footer a[href*="javascript"]:any-link {
    margin-right: -0.45rem;
}
.footnotes-footer a[href*="javascript"]::before {
    padding-left: 0.35em;
}
.footnotes-footer a[href*="javascript"]::before,
.footnotes-footer a[href*="javascript"]:hover::before {
    color: rgb(var(--swatch-secondary-color));
    background-color: rgb(var(--swatch-primary));
}
.footnotes-footer, .bibitems {
    background-color: rgba(var(--footnotes-footer-colorbar-color),0.06);
}
 
/* LINK */
#main-content a:not(#breadcrumbs a, .pseudocrumbs a, .page-rate-widget-box a, .rate-box-with-credit-button a, ul.yui-nav a, .printuser.avatarhover a:first-child, .footnote-footer > a[href*="javascript"], div[id*="page-options-bottom"] a, .danger-diamond a) {
    font-weight: bold;
    color: rgb(var(--gray-monochrome));
    padding: 0.115em;
    background-color: rgb(var(--black-monochrome));
}
#main-content a:not(#breadcrumbs a, .pseudocrumbs a, .page-rate-widget-box a, .rate-box-with-credit-button a, ul.yui-nav a, .printuser.avatarhover a:first-child, .footnote-footer > a[href*="javascript"], div[id*="page-options-bottom"] a, .danger-diamond a):hover {
    box-shadow: 0 0 0.7em 0.1em rgba(var(--black-monochrome),0.3);
}
 
/* CUSTOM BLOCKS */
 
.expoblock {
    box-sizing: border-box;
    border: solid 0.7rem rgb(var(--black-monochrome));
    padding: 1rem;
}
.expoblock hr {
    height: 0.6rem;
    margin: 1.5em 0;
}
 
span.hilighter {
    background-color: rgb(var(--black-monochrome));
    color: rgb(var(--gray-monochrome));
    font-weight: bold;
    padding: 0.2em;
    font-size: 108%;
    line-height: 1.2;
}
 
/* author label compatibility */
#page-content .authorlink-wrapper > a::before {
    color: rgb(var(--gray-monochrome));
}
#page-content .authorlink-wrapper .authorbox {
    filter: drop-shadow(0 0 3px rgba(var(--black-monochrome),0.75));
}
 
/*---- PAGE TAGS ----*/
#main-content .page-tags {
    margin-bottom: 1rem;
}
#main-content .page-tags span {
    display: block;
}
#content-wrap #main-content .page-tags span a:any-link:not([href^="/system:page-tags/tag/_"]) {
    margin: 0.2rem;
    padding: 0.2em 0.25em;
}
 
/*---- BOTTOM OPTIONS ----*/
div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn {
    --button-padding: calc(var(--icon-size) / 6);
    flex-basis: 6rem;
    flex-grow: 1;
}
div[id*="page-options-bottom"]>a#more-options-button {
    flex-grow: 4;
}
 
/*---- LICENSE AREA ----*/
#license-area {
    --swatch-text-secondary-color: var(--black-monochrome);
    --license-link-hover-bg-color: var(--black-monochrome);
    --license-link-hover-color: var(--white-monochrome);
}
 
/*---- SCANLINE MONITOR EFFECT ----*/
#extrac-div-1 {
    position: fixed;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    background: repeating-linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.15) 50%,rgba(0,0,0,0));
    background-size: auto 8px;
    opacity: 0.7;
}
 
#extrac-div-2 {
    position: fixed;
    width: 100vw;
    height : 1rem;
    top: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,0,0,0) 0%,rgba(255,250,250,1) 50%,rgba(255,255,255,0.98) 51%,rgba(255,0,0,0) 100%);
    opacity : .1;
    animation: scanm 6s linear infinite;
}
@keyframes scanm {
  0%   { top: -1rem; opacity : .05;}
  25% { top: 50%; opacity: .03;}
  37.5% { top: 75%; opacity: 0.06;}
  50% { top: 100%; opacity: .03;}
  100% { top: 100%;}
}
 
#extrac-div-3 {
    position: fixed;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    background-image: radial-gradient(circle, rgb(230,210,200) 0%, rgb(177,158,152) 60%, rgb(55,28,30) 100%);
    opacity: 0.25;
    mix-blend-mode: color-dodge;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 30;
}
/* fixes a chrome bug */
html { background: rgb(var(--swatch-background)); }
 
/*---- MOBILE QUERY ----*/
@media only screen and (max-width: 56.25rem) {
    :root {
        --header-h1-font-size: calc(var(--base-font-size) * 2.4);
    }
    #login-status:hover {
        background-color: rgba(var(--swatch-menubg-light-color),0.65);
        backdrop-filter: blur(0.1rem);
    }
}

+ Show component code

@supports((display: -ms-grid) or (display: grid)) {
@media only screen and (min-width: 769px) {
 
    .mobile-top-bar, #top-bar .open-menu {
        display: block;
    }    
 
#header {
        -webkit-filter: initial !important;
        filter: initial !important;
    }
    #top-bar>div.mobile-top-bar>div.open-menu a,
    #top-bar>div.mobile-top-bar>div.open-menu a:hover {        
        position: fixed;
        display: block;
        font-family: var(--body-font);
        font-size: 2rem;
        text-align: center;
        top: 0.25em;
        left: 0.5em;
        z-index: 5;
        width: 1.125em;
        height: 1.125em;
        background-color: var(--toggle-button-bg, rgb(var(--swatch-menubg-light-color))) !important;
        color: var(--toggle-icon-color, rgb(var(--swatch-menutxt-dark-color))) !important;
        -webkit-border-radius: var(--toggle-roundness, 50%);
           -moz-border-radius: var(--toggle-roundness, 50%);
                border-radius: var(--toggle-roundness, 50%);
        border: var(--toggle-border-color, rgb(var(--swatch-menubg-medium-color))) var(--toggle-border-width, 0.25rem) solid;
        line-height: 1.1825em;
        text-decoration: none;
    }
 
    #top-bar>div.mobile-top-bar {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
    }
 
    #top-bar>div.mobile-top-bar ul {
        display: none;
    }
 
    #sidebar::-webkit-scrollbar {
        width: 0;
        -webkit-transition: width var(--sidebar-transition-timing);
        transition: width var(--sidebar-transition-timing);
    }
 
    #sidebar:target::-webkit-scrollbar {
        width: 0.5rem;
        -webkit-transition: width var(--sidebar-transition-timing);
        transition: width var(--sidebar-transition-timing);
    }
 
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -webkit-calc(var(--sidebar-width-on-desktop)*-1);
        left: -moz-calc(var(--sidebar-width-on-desktop)*-1);
        left: calc(var(--sidebar-width-on-desktop)*-1);
        z-index: 10;
        -webkit-transition: left var(--sidebar-transition-timing);
        -o-transition: left var(--sidebar-transition-timing);
        -moz-transition: left var(--sidebar-transition-timing);
        transition: left var(--sidebar-transition-timing);
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
 
    #side-bar::-webkit-scrollbar-track {
        width: 0;
        background-color: rgba(170, 170, 170, 0);
    }
 
    #side-bar::-webkit-scrollbar-thumb {
        width: 0;
        background-color: rgba(170, 170, 170, 0);
    }
 
    #side-bar:target {
        left: 0;
    }
 
    #side-bar .side-block {
        margin-top: 1rem;
        background-color: rgb(0, 0, 0, 0);
        -webkit-border-radius: 0;
           -moz-border-radius: 0;
                border-radius: 0;
        border-left-width: 0px;
        border-right-width: 0px;
    }
 
    #side-bar .close-menu {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        z-index: -1;
        opacity: 0;
        -webkit-transition:
            opacity var(--sidebar-transition-timing),
            width var(--sidebar-transition-timing);
        -o-transition:
            opacity var(--sidebar-transition-timing),
            width var(--sidebar-transition-timing);
        -moz-transition:
            opacity var(--sidebar-transition-timing),
            width var(--sidebar-transition-timing);
        transition:
            opacity var(--sidebar-transition-timing),
            width var(--sidebar-transition-timing);
        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;
    }
 
    #side-bar:target .close-menu {
        width: -webkit-calc(100% - var(--sidebar-width-on-desktop));
        width: -moz-calc(100% - var(--sidebar-width-on-desktop));
        width: calc(100% - var(--sidebar-width-on-desktop));
        opacity: 1;
        pointer-events: all;
    }
 
    #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: relative;
        margin: 0 auto;
        max-width: inherit;
    }
 
    #main-content {
        width: 100%;
        position: initial;
        max-height: 100%;
        padding: 2rem 1rem;
        width: 45.8rem;
        max-width: 45.8rem;
        margin: 0 auto;
    }
 
    @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;
        }
    }
}
}

Info

Název: SCP-5311
Originál: http://scp-wiki.wikidot.com/scp-5311
Autor: S D Locke
Překladatel: Modular

---

Střet #41.

Číslo Objektu: SCP-5311

Třída Objektu: Nezadržené

Speciální Zadržovací Procedury: Vzhledem k momentálnímu stavu světového dění je třeba upustit od základních směrnic SCP Nadace. Personál pracující v Arktické Výzkumné Základně Brimley je autorizován k provedení jakýchkoliv nezbytných kroků, aby zachovali poslední stopy svobodné vůle v lidské populaci. Pokyny a veškeré přenosy pocházející od Rady O5 musí být ignorovány.

Organismy, jež se přiblíží k Výzkumné Základně Brimley, musí být terminovány bez výjimek. D-188 byli pověřeni úkolem vzdáleného kontrolování jejich ostatků, zda nevykazují známky přítomnosti SCP-5311. Pokud by byli D-188 kompromitováni, začnou veškeré jejich povinnosti spadat pod jurisdikci mladšího výzkumníka Wimbledona. Nekontaminované maso musí být přineseno na základnu, aby se doplnili zásoby. Infikované organismy musí být ponechány mrazu.

SCP+006 bylo pře-klasifikováno na Třídu Thaumiel. Personál musí ignorovat jeho předešlé zadržovací procedury a plán péče. Musí být používán jako zdroj čerstvé vody, dokud nebude terminován. Jeho tělo bude poté připraveno na konzumaci.

Popis: SCP-5311 označuje přenositelné vědomí, které je přítomno po téměř celém království Animalia. Vzhledem k rapidní reprodukci od objevení je málo známo o způsobu přenosu a odkud pochází. Všechny doposud získané informace týkající se problematiky SCP-5311 pocházejí z klasifikačních přenosů poslaných Direktoru Belvinsnovi v třídenním intervalu a obsahovaly následující relevantní informace:

• Hostitelé SCP-5311 hledají uvědomělé organismy, do kterých by mohli přenášet své vědomí, bez ohledu na druh
• Infekce vyžaduje nezanedbatelné množství času stráveného fyzicky se subjektem po neurčitelnou dobu, aby se vědomí přeneslo na nový organismus — není to okamžité
  • Není známo, zda-li je fyzický kontakt potřebný pro přenos vědomí
• Když se vědomí do subjektu přenese, tak vědomí začne simulovat myšlenky a vzpomínky. To mu umožní se adaptovat na hostitelovo chování a identitu — povolujíc mu se přizpůsobit okolnímu prostředí a místní sociální hierarchii, pokud je tomu za potřebí
  • Jakmile se v dané oblasti dosáhne převahy infikovaných organismů SCP-5311, tak se začnou kolektivně pokoušet o kamufláž a aktivně budou lovit neinfikované jedince
• Infikovaní jsou identifikovatelní pouze po smrti, po zničení jejich mozku, protože těla si i potom dokážou udržet životní funkce a hybnost
  • Instance s poškozeným mozkem si dokážou udržet určitou míru intelektu, čímž můžou předstírat smrt, aby nalákali svou oběť

Dodatek: Střety a Události

Událost	Subjekt(y)	Status	Poznámky
#1	Jeden dospělý člověk, 7 psů na sněžném spřežení.	Neznámý	K události došlo během prvního týdne oblastního uzamčení. Oblastní ředitěl Belvins zakázal jakoukoliv interakci se subjekty.
#4	Slečna Lloydová	Neinfikovaný	Slečna Lloydová byla nalezena v komunikační místnosti, pokoušejíc se kontaktovat vnějšek o pomoc. Byla popravena na příkaz oblastního ředitele a uskladněna na pozdější konzumaci.
#22	Samice polárního medvěda a její mládě.	Neinfikovaní	Terminováni palbou ze střelných zbraní. D-188 a D-099 byli pověřeni prošetřením organismů. Elektrošokové zbraně byly poskytnuty, aby se zjistila přítomnost SCP-5311, avšak vyústily pouze v odezvu dospělého organismu. Mládě bylo přineseno na základnu a připraveno na pozdější konzumaci.
#29	Mr. Olav a Výzkumník Griggs	Neinfikovaní	Pár zaútočil a přemohl D-099 pod rouškou tmy a získali tím přístup do garáže. D-099 bylo schopno spustit poplach a dvouhodinová patová situace nakonec vyústila v zapálení budovy. Oba muži se rozhodli zůstat uvnitř.
#37	Pět dospělých lidí. Čtyři muži, jedna žena.	Neznámý	Doktor D'Onofrio, navzdory protokolům, opustil základnu kvůli údajnému rozpoznání jednoho z nich jako člena Amerického Arktického výzkumného týmu. Požádal je, načež mu bylo vyhověno a byly mu dopřány žádané zásoby jídla od týmu. Všech šest subjektů bylo terminováno nebo silně zmrzačeno palbou ze střelných zbraní a byli ponechány mrazu.
#38	Sedm dospělých lidí, čtyři dospělí psi.	Neinfikovaní	Jeden člen skupiny byl chycen pastí, což zmátlo zbytek skupiny. Dvě těla reagovala na střelbu elektrošokových zbraní po kompletním zničení mozku. Zbytek byl přiveden na základnu a připraven na konzumaci.
#44	SCP+006	Neinfikován	Anomálie zemřela. Byla uskladněna v mrazničce na maso.
#51	D-099, mladší výzkumník Halvorson	Neinfikovaní	Oba dva se zapojili do konfliktu týkajícího se přídělu zásob, což nakonec vyústilo ve smrt Halvorsona a těžké zmrzačení D-099, který byl později terminován eutanázií. Oba byli použiti k doplnění zásob.
#55	Osm dospělých lidí. Pět žen, tři muži.	Infikovaní	Instance na sobě nosily zazimované vybavení Mobilní Úderné Jednotky, kvůli které byly identifikovány jako členi MTF-Alfa-5 ("Honor Guard"); byli vybaveni dostatečným vybavením a zbraněmi, aby dokázali provést násilný vpád na základnu. Dokázali se rozprostřít po celém perimetru. Následná přestřelka vyústila v několik obětí; tyto zaměstnanci byli přivedeni dovnitř na konzumaci.