SCP Foundation

[!-- A note to translators: Only the 4 things that follow should need to be changed to translate this component into your own language:--]
[!-- Replace .SITE with your word for SITE (all uppercase).--]
[!-- Replace .AREA with your word for AREA (all uppercase)--]
[!-- Replace .site with your word for site (all lowercase).--]
[!-- Replace .area with your word for area (all lowercase).--]
[!-- If you translate site-snippets-source correctly, no changes need to be made to the site-snippets fragment.--]
[!-- However, this may require some reworking for non-Latin alphabets! Lowercase was used to tell Site-5 to use the default icon rather than a custom one - you could solve the issue by making the type different to the text that gets displayed, but that's another variable to add in. --]
[!--  You may also want to increase or decrease the site-grid column width (currently 7rem) to accommodate longer or shorter Site names in your own language.--]

[[module CSS]]
:root {
    --site-icon: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8' standalone='no'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='1492.5' height='1395.2' viewBox='0 0 394.9 369.1'%3E%3Cpath d='M171.7 368.7a178.8 178.8 0 0 1-84.1-36.4L73 337.5c-15.3 5.6-15.6 5.7-16.7 4.7-.7-.6-56-96.5-56.3-97.5v-1.5c0-.8 1-1.6 12.2-10.9a72 72 0 0 0 12-10.6l-.5-4.7A174.6 174.6 0 0 1 134 32.4l2.7-15.7c1.5-8.5 2.8-15.5 3-15.8.1-.2.6-.5 1-.7C142 0 253 0 254 .2c.5.2 1 .5 1.1.7.2.3 1.5 7.3 3 15.8l2.7 15.6a191.6 191.6 0 0 1 21.5 10.2A174 174 0 0 1 371.1 217l-.5 4.7c0 .5 1.6 1.9 12 10.6 11.2 9.3 12.1 10.1 12.3 10.9l-.1 1.5c-.3 1-55.6 97-56.3 97.5-1 1-1.4 1-16.7-4.7l-14.5-5.2a176.5 176.5 0 0 1-6.5 4.7 175.7 175.7 0 0 1-81.6 32.1 338 338 0 0 0 19.2-16l2.8-2.4 5-1.6a162.3 162.3 0 0 0 53.9-29.4l4-3.3h1c1 0 3 .6 14.2 4.7 7 2.6 13 4.8 13.3 4.8.4 0 3.6-5.5 22.9-38.8a2892 2892 0 0 0 22.4-39.2c0-.2-4.4-4-11-9.6-7-5.9-11.1-9.4-11.2-9.7-.2-.9-.1-1.8.5-5.2.8-4.3 1.8-12.6 2.2-17.9a162 162 0 0 0-107.7-162c-2.5-.7-2.5-.7-2.7-1.3a2024.6 2024.6 0 0 0-5.2-28.8v-.5h-90.6l-.2.5a2024.6 2024.6 0 0 0-5.1 28.8c-.2.6-.2.6-2.7 1.4a162.2 162.2 0 0 0-107.7 162c.4 5.2 1.4 13.5 2.2 17.8.6 3.4.7 4.3.5 5.2 0 .3-4.1 3.8-11.2 9.7-6.6 5.5-11 9.4-11 9.6L39.4 287a578.3 578.3 0 0 0 22.9 39l13.3-4.8a77.1 77.1 0 0 1 14.1-4.7H91l4 3.3a160 160 0 0 0 53.7 29.4l5 1.6 2.9 2.5c4.3 3.8 10 8.6 14.6 12.1 5.3 4.2 5 3.9 4.1 3.8l-3.5-.4zm22.6-1.8c-27.9-17.6-55-42-76.7-69-22.7-28.5-37-56.8-40.9-81a122.5 122.5 0 1 1 242.9-30A121.4 121.4 0 0 1 308 249c-18.2 40-57.7 84.6-100.4 113.3a110 110 0 0 1-10.3 6.4 18 18 0 0 1-3.1-1.8zm12-99.5A72.2 72.2 0 1 0 188.9 124a72.2 72.2 0 0 0 17.6 143.3z'/%3E%3C/svg%3E");
    --area-icon: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8' standalone='no'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 293.14 333.51'%3E%3Cpath d='M142.58 333.3a26.39 26.39 0 0 1-20.9-17.6c-2.97-8.8-1.18-18.12 4.92-25.64.38-.47.41-.59.23-.93-.5-.94-94.78-164.2-94.88-164.3-.05-.06-.8 0-1.63.14-1.66.26-5.57.34-7.07.14-9-1.17-16.51-6.5-20.5-14.53a26.3 26.3 0 0 1 17.02-37.15 26.82 26.82 0 0 1 14.76.46 26.02 26.02 0 0 1 11.06 7.07 28.12 28.12 0 0 1 5.62 9.2l.25.76 22.78.04 22.78.05.48.89c.8 1.48 4.34 7.34 6.28 10.39a73.5 73.5 0 0 1 1.91 3.1c.08.2-1.07.24-7.93.24-4.6 0-8 .07-7.97.15.17.46 82.7 143.24 82.79 143.24.14 0 8.52-14.52 8.52-14.78 0-.1-5.59-9.87-12.42-21.7-10.76-18.65-12.41-21.6-12.41-22.19 0-.37.19-2.08.43-3.79.97-7.03 1.48-10.6 1.53-10.65.06-.07-1.34-2.47 14.78 25.45a3320 3320 0 0 0 13.62 23.47c.07-.06 8.13-14.04 8.4-14.54.17-.34-1.42-3.16-15.75-27.98a2244.09 2244.09 0 0 1-16-27.96c-.1-.5 3.44-11.08 3.85-11.5.06-.06 7.6 12.9 16.78 28.78 12.35 21.4 16.71 28.84 16.85 28.69a519 519 0 0 0 8.35-14.54c.04-.17-6.66-11.95-16.62-29.2-9.19-15.9-16.92-29.3-17.19-29.78l-.49-.86 1.84-3.22a339.6 339.6 0 0 1 2.7-4.64l.87-1.42.43.73 17.12 29.66c9.18 15.9 16.74 28.97 16.82 29.04.09.1 8.31-13.83 8.65-14.65.02-.06-7.18-12.62-16-27.92l-16.06-27.8-1.91-.05c-1.58-.04-1.9-.1-1.81-.3.05-.13.89-1.48 1.86-3 1.86-2.9 5.5-8.94 6.32-10.47l.48-.9 22.78-.04 22.79-.04.25-.77c.14-.42.63-1.56 1.1-2.54a26.13 26.13 0 0 1 23.62-14.97 26.26 26.26 0 0 1 24.58 16.5 26.05 26.05 0 0 1-.85 21.44 26.38 26.38 0 0 1-20.5 14.53c-1.47.2-5.4.12-7.04-.13-1.46-.23-1.5-.23-1.72.12-.26.4-5.67 9.76-9.7 16.76a5034.4 5034.4 0 0 1-11.69 20.24 69864.95 69864.95 0 0 1-42.52 73.65 128307.63 128307.63 0 0 1-30.33 52.54l-.72 1.25 1.08 1.33a27.5 27.5 0 0 1 3.76 6.45 23.46 23.46 0 0 1 1.88 9.19c.07 2.34.03 3.14-.27 4.85a24.7 24.7 0 0 1-2.23 7.17c-1.4 2.93-2.8 4.9-5.2 7.3a25.31 25.31 0 0 1-13 7.16c-2.3.54-7.2.7-9.6.3zm6.72-13.6c4.95-1.05 9-5.24 9.87-10.2.33-1.92.14-4.5-.47-6.27a11.32 11.32 0 0 0-3.2-4.98 10.6 10.6 0 0 0-2.9-2.24 12.8 12.8 0 0 0-12.7.4 14.92 14.92 0 0 0-4.1 4.1 13.79 13.79 0 0 0-1.9 7.7 12.96 12.96 0 0 0 9.61 11.39c1.54.4 4.18.44 5.8.1zm-7.81-38.3c2.9-.6 7.4-.63 9.96-.06.43.1.8.15.83.12.03-.02-22.22-38.62-49.44-85.77l-50.4-87.3-.9-1.57-.47 1.24a26.12 26.12 0 0 1-5.51 8.85l-.79.81.31.55 47.37 82.07c45.44 78.7 47.08 81.51 47.49 81.41l1.55-.34zm21.4-15.41 4.3-7.44-44.12-76.42-44.12-76.41-8.64-.05c-4.8-.02-8.62.02-8.59.1.11.28 96.82 167.73 96.85 167.7l4.32-7.48zm70.25-121.68 4.2-7.27-9.05-15.66-9.04-15.66-8.61-.05c-4.74-.02-8.62 0-8.62.05s5.99 10.46 13.3 23.14c8.2 14.2 13.37 22.97 13.46 22.88.09-.09 2.05-3.43 4.36-7.43zm12.5-21.66 2.79-4.84-.98-1.05a27.69 27.69 0 0 1-3.03-3.9 34.62 34.62 0 0 1-2.7-5.82l-.44-1.4h-5.61c-3.95 0-5.6.05-5.55.18a929.8 929.8 0 0 0 12.6 21.7c.08-.02 1.4-2.21 2.93-4.87zM29.22 111.33c2.52-.6 4.68-1.87 6.43-3.73a12.39 12.39 0 0 0 3.39-9.36 12.74 12.74 0 0 0-8.73-11.43c-1.23-.43-1.56-.47-3.9-.48-2.22 0-2.7.05-3.72.4a12.76 12.76 0 0 0-2.46 23.38 13.22 13.22 0 0 0 8.99 1.22zm240.75-.1a12.7 12.7 0 0 0 9.4-14.36c-.87-4.91-4.02-8.52-8.9-10.15-1.02-.34-1.5-.4-3.72-.39-2.34 0-2.66.05-3.9.48-2.03.7-3.58 1.7-5.12 3.24a12.22 12.22 0 0 0-3.6 8.19 12.11 12.11 0 0 0 3.76 9.69 11.46 11.46 0 0 0 4.75 3.02c2.34.83 4.7.92 7.33.28zm-123.63 74.22c-.07-.16-.27-1.52-.45-3.02-3.08-24.9-9.37-45.35-19.75-64.18-2.94-5.33-5.04-8.78-11.7-19.17-6.59-10.26-8.57-13.63-11.32-19.22a78.83 78.83 0 0 1-6.77-19.98c-.56-2.72-.86-10-.54-13.1.78-7.6 2.44-13.27 5.7-19.53A50.98 50.98 0 0 1 137.55.78c5.46-1 12.06-1.04 17.64-.1a51.22 51.22 0 0 1 36.34 26.12c3 5.56 4.83 11.38 5.76 18.28.3 2.18.3 9.42 0 11.82-.85 6.95-3.46 15.21-7.26 22.96-2.72 5.57-4.7 8.94-11.3 19.22-6.66 10.4-8.77 13.84-11.7 19.17-10.39 18.83-16.68 39.28-19.75 64.18-.35 2.78-.46 3.31-.7 3.31-.07 0-.18-.13-.24-.29zm5.38-109.92a25.3 25.3 0 0 0 19.64-20.28c.44-2.38.4-6.5-.08-8.9a25.1 25.1 0 0 0-20.2-20.09c-2.46-.46-7-.42-9.38.09a24.5 24.5 0 0 0-12.74 6.9 24.31 24.31 0 0 0-6.91 12.65c-.5 2.23-.54 7.5-.08 9.77a24.46 24.46 0 0 0 7 12.98 23.33 23.33 0 0 0 6.8 4.91 28.89 28.89 0 0 0 8.09 2.37c1.47.19 6.24-.05 7.86-.4z'/%3E%3C/svg%3E");
}

.site-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr)); /* в оригинале 7rem. У нас 9, потому что "участок" длиннее чем "area" */
    grid-gap: 1rem;
    box-sizing: border-box;
}

.s-wrapper {
    display: flex;
    align-content: stretch;
    transition: outline 0.135s ease-out;
    outline: #333 solid 0rem;
    position: relative;
}
.s-wrapper:hover, .s-wrapper:focus-within { outline: #333 solid 0.5rem; }

.s-wrapper > a[href="javascript:;"] {
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    font-size: 0rem;
    user-select: none;
    outline-width: 0;
}

.slideover {
    display: block;
    position: fixed;
    height: 100vh;
    width: 24rem;
    bottom: 0;
    top: 0;
    right: -28rem;
    background-color: #fdfdfd;
    transition: right 0.3s ease-out;
    z-index: 11;
    overflow-y: auto;
    direction: rtl;
    scrollbar-width: thin;
    contain: strict;
}

.slideover .socontent {
    direction: ltr;
    padding: 1rem 1.5rem 2.25rem;
}

.s-wrapper > div.thumbnail {
    font-family: 'Inter', sans-serif;
    font-weight: 750;
    font-size: 1.2rem;
    text-transform: uppercase;

    color: #1e1e1e;
    background-color: rgb(255,255,255);
    box-shadow: 0 0 0.4rem rgba(0,0,0,0.2);

    display: flex;
    flex-wrap: wrap;
    width: 100%;
    flex-grow: 1;
    justify-content: center;
    min-height: 3rem;
    padding: 0.5rem 0;
    align-items: center;
    text-align: center;
}

.s-wrapper > div.thumbnail::before {
    content: "";
    display: block;
    width: 100%;
    height: 4rem;
    margin: 0.2rem;
    background: var(--color);

    -webkit-mask-position: 50%;
                mask-position: 50%;
    -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
    -webkit-mask-size: contain;
                mask-size: contain;
}
.s-wrapper > div.зона::before {
    -webkit-mask-image: var(--site-icon);
                mask-image: var(--site-icon);
}
.s-wrapper > div.участок::before {
    -webkit-mask-image: var(--area-icon);
                mask-image: var(--area-icon);
}

.s-wrapper > div:is(.ЗОНА, .УЧАСТОК)::before {
    background: none;
    background-image: var(--custom-icon);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
}

.s-wrapper > div span.type { color: #1e1e1e; }
.s-wrapper > div span.number {
    color: transparent;
    background: var(--color);
    -webkit-background-clip: text;
                background-clip: text;
}

.s-wrapper > div[style*="$color"]:not(.ЗОНА, .УЧАСТОК)::before,
.s-wrapper > div[style*="$color"] span.number {
    background-color: #1e1e1e; /* fallback detection */
}

/*---------------------------------------------*/
/*---------------------------------------------*/
/*---------------------------------------------*/

#page-content .s-wrapper > a:focus + br + .slideover,
#page-content .s-wrapper > a:active + br + .slideover,
#page-content .s-wrapper .slideover:hover,
#page-content .s-wrapper .slideover:focus-within {
    right: 0;
}

@supports (-webkit-hyphens:none) {
#page-content .s-wrapper > a:hover + br + .slideover { right: 0; }
}

@media only screen and (max-width: 45rem) {
.site-grid {
    padding-inline: 2.675rem;
    grid-gap: .75rem;
}

#page-content .slideover {
    right: 0!important;
    width: 100%;
    max-width: 100%;
    height: 55vh; height: 57.5lvh;
    bottom: 0;
    top: initial;
    display: none;
    transition: unset;
}

#page-content .s-wrapper > a:focus + br + .slideover,
#page-content .s-wrapper .slideover:is(:hover,:focus-within) {
    display: block;
}
@supports (-webkit-hyphens:none) {
#page-content .s-wrapper > a:hover + br + .slideover,
#page-content .s-wrapper .slideover:is(:hover,:focus-within) { display: block; }
}

}

/*---------------------------------------------*/
/*---------------------------------------------*/
/*---------------------------------------------*/

.socontent h1 {
    font-family: "Inter", sans-serif;
    font-weight: 800;
    color: #333;
    font-size: 1.5rem;
    text-align: center;
    margin: 0.25rem 0 1rem;
    display: flex;
    flex-direction: column;
    gap: .175rem;
}
.socontent h1::after {
    content: "";
    display: block;
    background-color: #901;
    height: 0.325rem;
    width: 99.5%;
    margin: -0.1rem auto;
    transform: skewX(-25deg);
}

/*------------------------*/

.doc-link br, .doc-link p { display: contents; }
.doc-link a {
    font-family: "Inter", sans-serif;
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.25;
    margin: 1.15rem auto;
    font-size: 1.25rem;
    text-transform: uppercase;
    padding: 0.625rem;
    max-width: 85%;
    position: relative;
    z-index: 0;
    outline-width: 0;
    color: #f7f7f7;
}
.doc-link a:hover { text-decoration: none; }

.doc-link a::before,
.doc-link a::after {
    content: "";
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    transform: skew(-25deg);
}
.doc-link a::before {
    z-index: -1;
    background-color: #901;
    width: 0%;
    transition: width 0.15s ease-out 0.05s;
}
.doc-link a::after {
    z-index: -2;
    background-color: #333;
    box-shadow: 0.05rem 0.1rem 0.35rem rgb(0 0 0 / 40%);
    transition: box-shadow 0.15s ease 0.05s;
}
.doc-link a:hover::before,
.doc-link a:focus::before {
    width: 100%;
}
.doc-link a:hover::after,
.doc-link a:focus::after {
    box-shadow: 0.45rem 0.4rem 0 #333;
    transition-delay: 0.2s;
}

/*------------------------*/

#u-s5fx { display: contents; }
#u-s5fx .зона { animation: flicker 12s infinite ease; }
@keyframes flicker {
    0%, 9%, 11%, 13%, 15%, 35%, 38%, 54%, 60%, 79%, 81%, 83%, 100% { opacity: 1; }
    10%, 12%, 36%, 55%, 80%, 82% { opacity: 0; }
}
[[/module]]