SCP Foundation

    /*      ---------------------
    G E N E R A L  S T Y L I N G
    &  V A R I A B L E S
    ---------------------      */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');

.sacs_v4 {
       --min-font-size: 0.8125rem;
    /*                         ----
    V A R I A B L E S >>> Animation
    ----                         */
       --time-scale: 1;
       --time-delay: 0ms;

    font-family: 'Montserrat', sans-serif;
    font-size: var(--min-font-size);
    isolation: isolate;
    margin-block: 0.5rem;
    text-transform: uppercase;
}
.sacs_v4 > div p {
    line-height: 141%;
}
.sacs_v4 .sacs-v4_big {
    font-size: 2.2em;
}
.sacs_v4 .sacs-v4_medium {
    font-size: 1.65em;
}
.sacs_v4 .sacs-v4_no-display {
    display: none;
}
    /*                     ----
    V A R I A B L E S >>> Color
    ----                     */
.sacs-v4_attribute-1 {
       --clr-clearance: 0 159 107;
}
.sacs-v4_attribute-2 {
       --clr-clearance: 0 135 189;
}
.sacs-v4_attribute-3 {
       --clr-clearance: 255 211 0;
}
.sacs-v4_attribute-4 {
       --clr-clearance: 255 109 0;
}
.sacs-v4_attribute-5 {
       --clr-clearance: 196 2 51;
}
.sacs-v4_attribute-6 {
       --clr-clearance: 88 0 188;
}

.sacs-v4_attribute-1,
.sacs-v4_attribute-2,
.sacs-v4_attribute-3,
.sacs-v4_attribute-4,
.sacs-v4_attribute-5,
.sacs-v4_attribute-6 {
    position: relative;
}

    /*      ------
    T O P
    S T Y L I N G
    ------      */
.sacs_v4 > .sacs-v4_top {
    display: flex;
    gap: 0.5em;
}
.sacs-v4_top > .sacs-v4_flex {
    flex-basis: fit-content;
    padding: 0;
}
.sacs-v4_attribute-1 .sacs-v4_top,
.sacs-v4_attribute-2 .sacs-v4_top,
.sacs-v4_attribute-3 .sacs-v4_top {
    height: 2.65em;
}
.sacs-v4_attribute-4 .sacs-v4_top {
    height: calc(2.65em + 0.4rem);
}
.sacs-v4_attribute-5 .sacs-v4_top {
    height: calc(1.7em + 1.8rem);
}
.sacs-v4_attribute-6 .sacs-v4_top {
    height: calc(2.6em + 1.8rem);
}

.sacs-v4_top > .sacs-v4_item {
    position: relative;
}

.sacs-v4_top > .sacs-v4_bars {
    flex-basis: auto;
    flex-grow: 1;
    position: relative;
}
.sacs-v4_attribute-1 .sacs-v4_bars {
    bottom: calc(-1em - 0.7rem);
}
.sacs-v4_attribute-2 .sacs-v4_bars {
    bottom: calc(-0.5em - 0.4rem);
}
.sacs-v4_attribute-3 .sacs-v4_bars {
    bottom: -0.2em;
}
.sacs-v4_attribute-4 .sacs-v4_bars,
.sacs-v4_attribute-5 .sacs-v4_bars,
.sacs-v4_attribute-6 .sacs-v4_bars {
    bottom: 2px;
}
.sacs-v4_attribute-1 .sacs-v4_bar-one,
.sacs-v4_attribute-2 .sacs-v4_bar-one,
.sacs-v4_attribute-3 .sacs-v4_bar-one,
.sacs-v4_attribute-4 .sacs-v4_bar-one,
.sacs-v4_attribute-5 .sacs-v4_bar-one,
.sacs-v4_attribute-6 .sacs-v4_bar-one,
.sacs-v4_attribute-2 .sacs-v4_bar-two,
.sacs-v4_attribute-3 .sacs-v4_bar-two,
.sacs-v4_attribute-4 .sacs-v4_bar-two,
.sacs-v4_attribute-5 .sacs-v4_bar-two,
.sacs-v4_attribute-6 .sacs-v4_bar-two,
.sacs-v4_attribute-3 .sacs-v4_bar-three,
.sacs-v4_attribute-4 .sacs-v4_bar-three,
.sacs-v4_attribute-5 .sacs-v4_bar-three,
.sacs-v4_attribute-6 .sacs-v4_bar-three,
.sacs-v4_attribute-4 .sacs-v4_bar-four,
.sacs-v4_attribute-5 .sacs-v4_bar-four,
.sacs-v4_attribute-6 .sacs-v4_bar-four,
.sacs-v4_attribute-5 .sacs-v4_bar-five,
.sacs-v4_attribute-6 .sacs-v4_bar-five,
.sacs-v4_attribute-6 .sacs-v4_bar-six {
    background-color: rgb(var(--clr-clearance));
    height: 0.4rem;
    margin-block-end: 0.35em;
    width: 100%;
}

.sacs-v4_attribute-1 .sacs-v4_clearance,
.sacs-v4_attribute-2 .sacs-v4_clearance,
.sacs-v4_attribute-3 .sacs-v4_clearance {
    bottom: 1em;
}
.sacs-v4_attribute-4 .sacs-v4_clearance {
    bottom: calc(-0.4rem + 1em);
}
.sacs-v4_attribute-5 .sacs-v4_clearance {
    bottom: calc(-0.8rem + 1em);
}
.sacs-v4_attribute-6 .sacs-v4_clearance {
    bottom: calc(-1.2rem + 1em);
}
.sacs-v4_top > .sacs-v4_clearance {
    position: relative;
    text-align: right;
}
.sacs-v4_attribute-0 .sacs-v4_clearance-text::after { content: "Declassified"; }
.sacs-v4_attribute-1 .sacs-v4_clearance-text::after { content: "Unrestricted"; }
.sacs-v4_attribute-2 .sacs-v4_clearance-text::after { content: "Restricted"; }
.sacs-v4_attribute-3 .sacs-v4_clearance-text::after { content: "Confidential"; }
.sacs-v4_attribute-4 .sacs-v4_clearance-text::after { content: "Secret"; }
.sacs-v4_attribute-5 .sacs-v4_clearance-text::after { content: "Top Secret"; }
.sacs-v4_attribute-6 .sacs-v4_clearance-text::after { content: "Cosmic Top Secret"; }

.sacs-v4_attribute-4 .sacs-v4_item {
    bottom: -0.35em;
}
.sacs-v4_attribute-5 .sacs-v4_item {
    top: 1.2em;
}
.sacs-v4_attribute-5 .sacs-v4_clearance {
    top: 0.2em;
}
.sacs-v4_attribute-6 .sacs-v4_item {
    top: 2.1em;
}
.sacs-v4_attribute-6 .sacs-v4_clearance {
    top: 1.1em;
}

.sacs-v4_separator {
    background-color: currentColor;
    height: 0.4rem;
    margin-block-end: 0.35em;
    margin-block-start: 0.1em;
    width: 100%;
}
.sacs-v4_wide .sacs-v4_separator {
    margin-block-start: unset;
}

    /*      ------
    B O T T O M
    S T Y L I N G
    ------      */
.sacs-v4_grid {
    display: grid;
    gap: 0.35em;
    grid-template-areas: 'containment disruption'
                         'containment       risk';
    grid-template-columns: calc(55% - 0.35em) 45%;
}
.sacs-v4_grid > * {
    box-sizing: border-box;
    padding-inline: 0.35em;
    position: relative;
}
.sacs-v4_containment {
       --clr-containment: var(--clr-class);
    align-items: center;
    background-color: rgb(var(--clr-containment) / 0.15);
    border-inline-start: rgb(var(--clr-containment)) 0.7em solid;
    display: grid;
    grid-area: containment;
}
.sacs-v4_containment > p {
    transform: translateY(-10%);
}
.sacs-v4_disruption {
       --clr-disruption: var(--clr-class);
    background-color: rgb(var(--clr-disruption) / 0.15);
    border-inline-start: rgb(var(--clr-disruption)) 0.7em solid;
    grid-area: disruption;
}
.sacs-v4_risk {
       --clr-risk: var(--clr-class);
    background-color: rgb(var(--clr-risk) / 0.15);
    border-inline-start: rgb(var(--clr-risk)) 0.7em solid;
    grid-area: risk;
}
.sacs-v4_risk::after,
.sacs-v4_disruption::after,
.sacs-v4_containment::after {
    background-image: var(--img-main);
    background-repeat: no-repeat;
    background-size: var(--img-size) var(--img-size);
    content: "";
    display: block;
    height: var(--img-size);
    inset-inline-start: 0px;
    position: absolute;
    width: 100%;
    z-index: 2;
}
.sacs-v4_risk::after,
.sacs-v4_disruption::after {
       --img-size: 2rem;
    background-position: calc(100% - 0.175em);
    top: 0.5em;
}
.sacs-v4_containment::after {
       --img-size: 4rem;
    background-position: right;
    top: calc(30% - 1em);
}

.sacs-v4_wide .sacs-v4_grid {
    grid-template-areas: 'containment containment'
                         'containment containment';
    grid-template-columns: 2fr 0;
}
.sacs-v4_wide .sacs-v4_containment {
    height: 7.35em;
}
.sacs-v4_wide .sacs-v4_risk,
.sacs-v4_wide .sacs-v4_disruption {
    display: none;
}

    /*      ------
    C L A S S
    S T Y L I N G
    ------      */
.safe,
.dark,
.notice {
       --clr-class: 0 159 107;
}
.safe { --img-main: url('https://scpfoundation.net/local--files/component:slim-acs-source/safe-icon.svg'); }
.dark { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/dark-icon.svg'); }
.notice { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/notice-icon.svg'); }

.vlam,
.archon,
.caution {
       --clr-class: 0 135 189;
}
.vlam { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/vlam-icon.svg'); }
.archon { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/archon-icon.svg'); }
.caution { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/caution-icon.svg'); }

.keneq,
.euclid,
.warning {
       --clr-class: 255 211 0;
}
.keneq { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/keneq-icon.svg'); }
.euclid { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/euclid-icon.svg'); }
.warning { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/warning-icon.svg'); }

.ekhi,
.danger {
       --clr-class: 255 109 0;
}
.ekhi { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/ekhi-icon.svg'); }
.danger { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/danger-icon.svg'); }

.keter,
.amida,
.critical {
       --clr-class: 196 2 51;
}
.keter { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/keter-icon.svg'); }
.amida { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/amida-icon.svg'); }
.critical { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/critical-icon.svg'); }

.solis,
.apollyon,
.yggdrasil {
       --clr-class: 88 0 188;
}
.solis { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/solis-icon.svg'); }
.apollyon { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/apollyon-icon.svg'); }
.yggdrasil { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/yggdrasil-icon.svg'); }

.none,
.thaumiel,
.uncontained,
.neutralized {
       --clr-class: 66 66 72;
}
.none { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/none-icon.svg'); }
.thaumiel { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/thaumiel-icon.svg'); }
.uncontained { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/uncontained-icon.svg'); }
.neutralized { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/neutralized-icon.svg'); }

.pending,
.explained {
       --clr-class: 21 21 21;
}
.pending { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/pending-icon.svg'); }
.explained { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/explained-icon.svg'); }

.erloschen {
       --clr-class: 82 156 59;
       --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/erloschen-icon.svg');
}

.draugr {
       --clr-class: 66 66 90;
       --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/draugr-icon.svg');
}
    /*     --------
    D A R K M O D E
    S T Y L I N G
    --------     */
.sacs-v4_darkmode .sacs-v4_risk,
.sacs-v4_darkmode .sacs-v4_disruption,
.sacs-v4_darkmode .sacs-v4_containment {
    color: rgb(var(--clr-class));
    text-shadow: 2px 0 0 rgb(237 237 237 / 0.01),
             -2px 0 0 rgb(237 237 237 / 0.01),
             0 2px 0 rgb(237 237 237 / 0.01),
             0 -2px 0 rgb(237 237 237 / 0.01),
             2px 2px rgb(237 237 237 / 0.01),
             -2px -2px 0 rgb(237 237 237 / 0.01),
             2px -2px 0 rgb(237 237 237 / 0.01),
             -2px 2px 0 rgb(237 237 237 / 0.01);
}
.sacs-v4_darkmode .sacs-v4_high-sat { filter: saturate(75%) brightness(150%); }

.sacs-v4_darkmode .sacs-v4_attribute-1 {
       --clr-clearance: 0 160 40;
}
.sacs-v4_darkmode .sacs-v4_attribute-2 {
       --clr-clearance: 40 135 189;
}
.sacs-v4_darkmode .sacs-v4_attribute-3 {
       --clr-clearance: 255 226 82;
}
.sacs-v4_darkmode .sacs-v4_attribute-4 {
       --clr-clearance: 255 141 54;
}
.sacs-v4_darkmode .sacs-v4_attribute-5 {
       --clr-clearance: 255 34 68;
}
.sacs-v4_darkmode .sacs-v4_attribute-6 {
       --clr-clearance: 185 100 245;
}

.sacs-v4_darkmode .safe,
.sacs-v4_darkmode .dark,
.sacs-v4_darkmode .notice {
       --clr-class: 0 160 40;
}
.sacs-v4_darkmode .safe { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/safe-dark-icon.svg'); }
.sacs-v4_darkmode .dark { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/dark-dark-icon.svg'); }
.sacs-v4_darkmode .notice { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/notice-dark-icon.svg'); }

.sacs-v4_darkmode .vlam,
.sacs-v4_darkmode .archon,
.sacs-v4_darkmode .caution {
       --clr-class: 40 135 189;
}
.sacs-v4_darkmode .vlam { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/vlam-dark-icon.svg'); }
.sacs-v4_darkmode .archon { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/archon-dark-icon.svg'); }
.sacs-v4_darkmode .caution { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/caution-dark-icon.svg'); }

.sacs-v4_darkmode .keneq,
.sacs-v4_darkmode .euclid,
.sacs-v4_darkmode .warning {
       --clr-class: 255 226 82;
}
.sacs-v4_darkmode .keneq { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/keneq-dark-icon.svg'); }
.sacs-v4_darkmode .euclid { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/euclid-dark-icon.svg'); }
.sacs-v4_darkmode .warning { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/warning-dark-icon.svg'); }

.sacs-v4_darkmode .ekhi,
.sacs-v4_darkmode .danger {
       --clr-class: 255 141 54;
}
.sacs-v4_darkmode .ekhi { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/ekhi-dark-icon.svg'); }
.sacs-v4_darkmode .danger { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/danger-dark-icon.svg'); }

.sacs-v4_darkmode .keter,
.sacs-v4_darkmode .amida,
.sacs-v4_darkmode .critical {
       --clr-class: 255 34 68;
}
.sacs-v4_darkmode .keter { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/keter-dark-icon.svg'); }
.sacs-v4_darkmode .amida { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/amida-dark-icon.svg'); }
.sacs-v4_darkmode .critical { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/critical-dark-icon.svg'); }

.sacs-v4_darkmode .solis,
.sacs-v4_darkmode .apollyon,
.sacs-v4_darkmode .yggdrasil {
       --clr-class: 185 100 245;
}
.sacs-v4_darkmode .solis { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/solis-dark-icon.svg'); }
.sacs-v4_darkmode .apollyon { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/apollyon-dark-icon.svg'); }
.sacs-v4_darkmode .yggdrasil { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/yggdrasil-dark-icon.svg'); }

.sacs-v4_darkmode .none,
.sacs-v4_darkmode .thaumiel,
.sacs-v4_darkmode .uncontained,
.sacs-v4_darkmode .neutralized {
       --clr-class: 166 166 182;
}
.sacs-v4_darkmode .none { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/none-dark-icon.svg'); }
.sacs-v4_darkmode .thaumiel { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/thaumiel-dark-icon.svg'); }
.sacs-v4_darkmode .uncontained { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/uncontained-dark-icon.svg'); }
.sacs-v4_darkmode .neutralized { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/neutralized-dark-icon.svg'); }

.sacs-v4_darkmode .pending,
.sacs-v4_darkmode .explained {
       --clr-class: 166 166 182;
}
.sacs-v4_darkmode .pending { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/pending-dark-icon.svg'); }
.sacs-v4_darkmode .explained { --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/explained-dark-icon.svg'); }

.sacs-v4_darkmode .erloschen {
       --clr-class: 140 104 133;
       --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/erloschen-dark-icon.svg');
}

.sacs-v4_darkmode .draugr {
       --clr-class: 91 91 118;
       --img-main: url('http://scpfoundation.net/local--files/component:slim-acs-source/draugr-dark-icon.svg');
}

    /*    -----------
    A N I M A T I O N
    S T Y L I N G
    -----------    */
    /*                    ----
    A N I M A T I O N >>> Bars
    ----                    */
.sacs-v4_animation .sacs-v4_separator,
.sacs-v4_animation .sacs-v4_bars > [class*="_bar-"] {
    animation-name: bar-growth;
    animation-delay: calc(0.1s * var(--time-scale) + var(--time-delay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.32,.38,.39,.94);
    animation-fill-mode: backwards;
}
.sacs-v4_animation .sacs-v4_bars > [class*="_bar-"] {
    margin-inline: auto;
    animation-duration: calc(0.75s * var(--time-scale));
}
.sacs-v4_animation .sacs-v4_separator {
    animation-duration: calc(0.85s * var(--time-scale));
}
    /*                    ----
    A N I M A T I O N >>> Grid
    ----                    */
.sacs-v4_animation .sacs-v4_grid > div:not(.sacs-v4_containment) > p,
.sacs-v4_animation .sacs-v4_top > .sacs-v4_flex > p {
    animation-name: p-rise-1;
}
.sacs-v4_animation .sacs-v4_grid > .sacs-v4_containment > p { animation-name: p-rise-2; }
.sacs-v4_animation .sacs-v4_top > .sacs-v4_flex > p,
.sacs-v4_animation .sacs-v4_grid > .sacs-v4_containment > p,
.sacs-v4_animation .sacs-v4_grid > div:not(.sacs-v4_containment) > p {
    animation-duration: calc(0.65s * var(--time-scale));
    animation-delay: calc(0.5s * var(--time-scale) + var(--time-delay));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
.sacs-v4_animation .sacs-v4_containment,
.sacs-v4_animation .sacs-v4_disruption,
.sacs-v4_animation .sacs-v4_risk {
    animation-name: class-fade;
    animation-duration: calc(0.85s * var(--time-scale));
    animation-delay: calc(0.1s * var(--time-scale) + var(--time-delay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.32,.38,.39,.94);
    animation-fill-mode: backwards;
}
.sacs-v4_animation .sacs-v4_containment::after,
.sacs-v4_animation .sacs-v4_disruption::after,
.sacs-v4_animation .sacs-v4_risk::after {
    animation-name: icon-slide;
    animation-duration: calc(0.35s * var(--time-scale));
    animation-delay: calc(0.3s * var(--time-scale) + var(--time-delay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.32,.38,.39,.94);
    animation-fill-mode: backwards;
}

    /*                         ----
    A N I M A T I O N >>> Keyframes
    ----                         */
@media screen and (prefers-reduced-motion: reduce) {
    .sacs-v4_animation .sacs_v4 * { animation: unset; }
}

@keyframes bar-growth {
    from { width: 0%; }
    to { width: 100%; }
}
@keyframes p-rise-1 {
    from {
        opacity: 0;
        transform: translateY(50%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes p-rise-2 {
    from {
        opacity: 0;
        transform: translateY(30%);
    }
    to {
        opacity: 1;
        transform: translateY(-20%);
    }
}
@keyframes mob-p-rise-2 {
    from {
        opacity: 0;
        transform: translateY(40%);
    }
    to {
        opacity: 1;
        transform: translateY(-10%);
    }
}
@keyframes class-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes icon-slide {
    from {
        opacity: 0;
        transform: translateX(-5em);
    }
    to { opacity: 1; }
}

    /*     ----
    M O B I L E
    Q U E R Y
    ----     */
@media (max-width: 960px) {
    .sacs-v4_grid {
        grid-template-areas: 'containment containment'
                             'containment containment'
                             'disruption   disruption'
                             'risk               risk';
    }
    .sacs-v4_containment > p { transform: translateY(-10%); }
    .sacs-v4_containment::after {
           --img-size: 3.5rem;
        top: 10%;
    }
    .sacs-v4_wide .sacs-v4_containment::after {
        background-position: right;
        display: block;
        transform: translateY(0.75em);
    }

    .sacs-v4_animation .sacs-v4_grid > .sacs-v4_containment > p {
        animation-name: mob-p-rise-2;
    }
}