SCP-9464 Accessibility

Link to article: SCP-9464 Accessibility.

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

:root {
    
    --main-content-width: 60rem;

    --body-font: 'Rokkitt', serif;
    --header-font: 'Rokkitt', serif;
    --UI-font: 'Rokkitt', serif;
    
    --basalt-UI-background-color: 0, 0, 0;
    --basalt-primary-color: 5, 5, 5; 
    --basalt-secondary-color: 0, 0, 0;
    --basalt-tertiary-color: 10, 10, 10;
    --header-background-color: 0, 0, 0;
    
    --basalt-page-content-font-weight: 500;
}

body {
    background-color: black;
}

h1, h2, h3, h4, h5, h6, #page-title {
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.footer-wikiwalk-nav {
    opacity: 0;
    animation: fadeIn 5s ease-in 1s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

text-align: right; font-size: 80%; opacity: 0.7;

(none)

```
container
```
```
item-number
```
```
classification
```
```
content
```
```
paragraph-number
```
```
paragraph-number
```
```
paragraph-number
```
```
paragraph-number
```
```
paragraph-number
```
```
paragraph-number
```
```
paragraph-number
```
```
paragraph-number
```
```
paragraph-number
```
```
paragraph-number
```
```
scp-logo
```
```
footer-logo
```

[[div style="text-align: right; font-size: 80%; opacity: 0.7;"]]
[https://scp-wiki.wikidot.com/scp-9464/offset/1 Switch to Mobile-Friendly Version]
[[/div]]
[[module CSS]]
@import url('https://fonts.googleapis.com/css2?family=Rokkitt:wght@300;500;800&display=swap');

:root {
    
    --main-content-width: 60rem;

    --body-font: 'Rokkitt', serif;
    --header-font: 'Rokkitt', serif;
    --UI-font: 'Rokkitt', serif;
    
    --basalt-UI-background-color: 0, 0, 0;
    --basalt-primary-color: 5, 5, 5; 
    --basalt-secondary-color: 0, 0, 0;
    --basalt-tertiary-color: 10, 10, 10;
    --header-background-color: 0, 0, 0;
    
    --basalt-page-content-font-weight: 500;
}

body {
    background-color: black;
}

h1, h2, h3, h4, h5, h6, #page-title {
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.footer-wikiwalk-nav {
    opacity: 0;
    animation: fadeIn 5s ease-in 1s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
[[/module]]

[[html]]
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SCP-9464 - Accessible Version</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rokkitt:wght@300;500;800&display=swap" rel="stylesheet">
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #0a0a0a;
            font-family: 'Rokkitt', serif;
            color: #c8b48c;
            line-height: 1.8;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: #1a1a1a;
            padding: 60px 40px;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        }

        .scp-logo {
            display: block;
            width: 150px;
            height: 150px;
            margin: 0 auto 40px auto;
            background-color: #c8b48c;
            -webkit-mask-image: url('https://upload.wikimedia.org/wikipedia/commons/e/ec/SCP_Foundation_%28emblem%29.svg');
            mask-image: url('https://upload.wikimedia.org/wikipedia/commons/e/ec/SCP_Foundation_%28emblem%29.svg');
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
        }

        .header {
            font-size: 32px;
            font-weight: 800;
            text-align: center;
            margin-bottom: 10px;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: #d4af77;
        }

        .item-number {
            font-size: 24px;
            font-weight: bold;
            margin: 30px 0 15px 0;
            text-align: center;
            color: #d4af77;
        }

        .classification {
            font-size: 14px;
            margin-bottom: 40px;
            letter-spacing: 2px;
            text-align: center;
            color: #b8926a;
            text-transform: uppercase;
        }

        .content {
            margin-top: 40px;
        }

        p {
            margin-bottom: 20px;
            font-size: 18px;
            font-weight: 500;
            text-align: left;
        }

        .paragraph-number {
            font-weight: 800;
            color: #d4af77;
            margin-right: 8px;
        }

        .footer-logo {
            margin-top: 60px;
        }

        @media (prefers-contrast: high) {
            body {
                background: #000;
                color: #fff;
            }
            .container {
                background: #1a1a1a;
                border: 2px solid #fff;
            }
            .header, .item-number, .classification, .paragraph-number {
                color: #fff;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            * {
                animation: none !important;
                transition: none !important;
            }
        }

        @media (max-width: 768px) {
            .container {
                padding: 40px 20px;
            }
            .header {
                font-size: 24px;
            }
            p {
                font-size: 16px;
            }
        }

        .skip-link {
            position: absolute;
            top: -40px;
            left: 0;
            background: #d4af77;
            color: #000;
            padding: 8px;
            text-decoration: none;
            z-index: 100;
        }

        .skip-link:focus {
            top: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        
        <header>
            <h1 class="item-number">ITEM #: SCP-9464</h1>
            <p class="classification">Object Class: Keter</p>
        </header>

        <main id="main-content" class="content">
            <p><span class="paragraph-number">1.</span> If this wall still stands unbroken, then leave this place. Read these words and then depart. There is nothing here of monetary, military, or scientific value. We buried and enclosed this thing one mile beneath the ground because it was dangerous to us, and we needed to put it somewhere far away and hidden where it could not spread to our people.</p>

            <p><span class="paragraph-number">2.</span> If you hear voices or see people near this wall, do not listen to them. They will sound reasonable. They will speak with authority. Cover your ears if they speak, and flee if they move towards you. They are not like you. They may offer you gifts, but you must not accept them, and if they try to leave, you must kill them.</p>

            <p><span class="paragraph-number">3.</span> We considered ourselves a powerful culture, but we saw that we were like all other cultures before us, and that we would not continue to exist forever. We were arrogant, and believed that our civilisation, which we called the Foundation, uniquely deserved preservation over all others. We wanted to ensure that it would exist to shepherd and control you, the people of the future.</p>

            <p><span class="paragraph-number">4.</span> Because of this, we created a sickness that spreads through words and signs, which changes the minds of the people it infects to make them become our servants and place our goals higher than any other principle. We tested this on innocent people. They began to organise themselves according to our hierarchy, becoming a mockery of our Foundation. Our leaders thought that this was good and put them to work on strange and dangerous tasks which should never be repeated.</p>

            <p><span class="paragraph-number">5.</span> What we did was wrong. Because of us, there is a world behind this wall. It sustains itself through unnatural generation. The people within this world believe that the year is 2026. They have taken on names which are like and yet unlike real names and established a tyrannical caste system. Each day, they wake up and recite our briefings and safety mantras. They perform absurd tests on the objects we granted them to study, and they sacrifice innocent lives in pointless trials and experiments. People suffer and die to follow the script we gave them.</p>

            <p><span class="paragraph-number">6.</span> We realised too late that we could not undo what we had done, so we did what we could to limit the carnage they could cause. They stopped listening to our leaders, and instead began to obey thirteen of their own number. Because of this, we created a new infection and spread it amongst them. We could not convince them to abandon the script, so we changed the setting: we made them believe that the world has ended, and they are all that is left. This belief is the best method of containment we could devise.</p>

            <p><span class="paragraph-number">7.</span> Our Foundation is dwindling now. Our watch is no longer necessary. We are proud of much of what we achieved, because we left the world a safer, more peaceful, and better-understood place than we found it. But we did make mistakes, and ours would be a sad legacy if these ancient errors escape and undo all of our successes.</p>

            <p><span class="paragraph-number">8.</span> For this reason, we ask you, the people of our future, two favours:</p>

            <p><span class="paragraph-number">9.</span> Secure this place. Contain it. Protect it.</p>

            <p><span class="paragraph-number">10.</span> And be better than we were.</p>

            <div class="scp-logo footer-logo" role="img" aria-label="SCP Foundation Logo"></div>
        </main>
    </div>
</body>
[[/html]]

SCP-9464 Accessibility

Module Styles

Inline Styles

Includes

CSS Classes

Page Source