Link to article: Site-69 II: Part 5 (Outside).
/* Disable Basalt responsive font size */
:root {
--true-font-size: var(--base-font-size);
}
#breadcrumbs a:any-link { color: inherit; opacity: 0.5; }
/* picker, pit version */
.footage-picker-section__title, .footage-picker-section__intro, .footage-picker__heading {
display: none;
color: #fff4;
}
.footage-picker {
--tables-border: 255, 255, 255, 0.1;
}
.footage-picker__link:any-link {
background-color: #fff4;
color: #fff;
opacity: 0.25 !important;
transition: opacity 0.1s ease !important;
animation: none !important;
}
.footage-picker__link:hover {
opacity: 1 !important;
}
.footage-picker__link:nth-child(5) {
background: black;
color: black;
opacity: 1 !important;
}
/* scroll detection - courtesy of scp-8822 */
@import url(https://croquembouche.net/scp/scp-8822/assertions-v1.css);
.controller { height: 1px !important }
.scout {
height: 1em;
width: 1px;
border: none;
transform: scaleY(50);
margin-block: -0.25em;
}
.controller, .scout:not([src*="debug=true"]) { opacity: 0.01 }
/* pit */
:root {
--pit-3840: url('https://scp-wiki.wdfiles.com/local--files/site-69-ii/the_pit-3840.webp');
--pit-3840-tiny: url('https://scp-wiki.wdfiles.com/local--files/site-69-ii/the_pit-3840-tiny.webp');
--pit-2560: url('https://scp-wiki.wdfiles.com/local--files/site-69-ii/the_pit-2560.webp');
--pit-2560-tiny: url('https://scp-wiki.wdfiles.com/local--files/site-69-ii/the_pit-2560-tiny.webp');
--pit-1920: url('https://scp-wiki.wdfiles.com/local--files/site-69-ii/the_pit-1920.webp');
--pit-1920-tiny: url('https://scp-wiki.wdfiles.com/local--files/site-69-ii/the_pit-1920-tiny.webp');
--pit-1200: url('https://scp-wiki.wdfiles.com/local--files/site-69-ii/the_pit-1200.webp');
--pit-1200-tiny: url('https://scp-wiki.wdfiles.com/local--files/site-69-ii/the_pit-1200-tiny.webp');
--pit-800: url('https://scp-wiki.wdfiles.com/local--files/site-69-ii/the_pit-800.webp');
--pit-800-tiny: url('https://scp-wiki.wdfiles.com/local--files/site-69-ii/the_pit-800-tiny.webp');
--pit-480: url('https://scp-wiki.wdfiles.com/local--files/site-69-ii/the_pit-480.webp');
--pit-480-tiny: url('https://scp-wiki.wdfiles.com/local--files/site-69-ii/the_pit-480-tiny.webp');
--rope-2228: url('https://scp-wiki.wdfiles.com/local--files/site-69-ii/rope-2228.webp');
--rope-2228-tiny: url('https://scp-wiki.wdfiles.com/local--files/site-69-ii/rope-2228-tiny.webp');
--rope-1200: url('https://scp-wiki.wdfiles.com/local--files/site-69-ii/rope-1200.webp');
--rope-1200-tiny: url('https://scp-wiki.wdfiles.com/local--files/site-69-ii/rope-1200-tiny.webp');
--rope-800: url('https://scp-wiki.wdfiles.com/local--files/site-69-ii/rope-800.webp');
--rope-800-tiny: url('https://scp-wiki.wdfiles.com/local--files/site-69-ii/rope-800-tiny.webp');
--rope-480: url('https://scp-wiki.wdfiles.com/local--files/site-69-ii/rope-480.webp');
--rope-480-tiny: url('https://scp-wiki.wdfiles.com/local--files/site-69-ii/rope-480-tiny.webp');
--bg-image-list: var(--pit-480), var(--pit-480-tiny);
--bg-image-width: 480px;
--rope-image-list: var(--rope-480), var(--rope-480-tiny);
--rope-image-width: 480px;
--rope-image-height: 1409px;
}
body {
margin: 0;
background-color: black;
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll;
background-image: var(--bg-image-list);
background-size: var(--bg-image-width) auto;
}
@media (min-width: 480px) {
:root {
--bg-image-list: var(--pit-800), var(--pit-800-tiny);
--bg-image-width: 800px;
--rope-image-list: var(--rope-800), var(--rope-800-tiny);
--rope-image-width: 800px;
}
}
@media (min-width: 800px) {
:root {
--bg-image-list: var(--pit-1200), var(--pit-1200-tiny);
--bg-image-width: 1200px;
--rope-image-list: var(--rope-1200), var(--rope-1200-tiny);
--rope-image-width: 1200px;
}
}
@media (min-width: 1200px) {
:root {
--bg-image-list: var(--pit-1920), var(--pit-1920-tiny);
--bg-image-width: 1920px;
--rope-image-list: var(--rope-2228), var(--rope-2228-tiny);
--rope-image-width: 2228px;
}
}
@media (min-width: 1920px) {
:root {
--bg-image-list: var(--pit-2560), var(--pit-2560-tiny);
--bg-image-width: 2560px;
}
}
@media (min-width: 2560px) {
:root {
--bg-image-list: var(--pit-3840), var(--pit-3840-tiny);
--bg-image-width: 3840px;
}
}
.light, .dark {
font-size: 1.15rem;
font-family: var(--mono-font);
margin-block: 1rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.1em;
}
.light--large, .dark--large {
font-size: 1.5rem;
}
.light p {
display: inline-block;
color: black;
background-color: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(2px);
padding: 1px 1em;
margin: 0;
box-shadow: 0 0.25em 2em rgba(0, 0, 0, 0.1);
border-radius: 1px;
opacity: 1;
animation: fade-in-but-fucked-up 7s ease-in -1.4s backwards;
text-align: center;
}
.dark:not(.dark--large) {
max-width: 40rem !important;
margin-inline: auto;
}
.dark p {
color: rgb(var(--basalt-main-text-color));
background-color: black;
text-align: center;
line-height: 1.5;
margin-block: 0.6em;
}
.dark p:has(.yetty) { align-self: end; text-align: right }
.dark p:has(.niamh) { align-self: start; text-align: left }
.yetty:not(.yetty--2), .niamh--2 { color: moccasin }
.niamh--transition {
background-image: linear-gradient(to right, currentColor, moccasin);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes fade-in-but-fucked-up {
20% {
opacity: 0;
background-color: transparent;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
backdrop-filter: blur(0px);
filter: blur(10px);
color: transparent;
}
30%, 40% {
opacity: 1;
color: rgba(0, 0, 0, 0.02);
box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
filter: blur(2px);
}
70% {
opacity: 1;
background-color: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(5px);
filter: blur(0px);
color: black;
}
100% {
background-color: rgba(255, 255, 255, 0.75);
box-shadow: 0 0.25em 2em rgba(0, 0, 0, 0.1);
backdrop-filter: blur(2px);
}
}
.light--darkened {
display: none;
}
.light--darkened p {
color: white;
background: black;
}
.ropebox {
position: relative;
z-index: -1;
}
.ropebox::before {
content: "";
background-image: var(--rope-image-list);
background-size: var(--rope-image-width) var(--rope-image-height);
background-position: center;
height: var(--rope-image-height);
width: 100vw;
display: block;
margin-block: calc(var(--rope-image-height) * -0.5);
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.footage-picker__heading { display: none }
.footage-picker__heading--expedition { display: block !important }
:root:has(.controller[style*="2."]) {
--bg-image-list: "";
--rope-image-list: "";
.light { display: none }
.light--darkened { display: flex }
.light p { animation: none }
.footage-picker__heading { display: block !important }
.footage-picker__heading--expedition { display: none !important }
}
.blue {
position: relative;
padding-top: 40rem;
padding-bottom: 10rem;
margin-bottom: 5rem;
font-size: 1.6rem;
color: white;
}
.blue::before {
content: "";
background-image: linear-gradient(to bottom, transparent, #003 35rem, #003);
background-size: cover;
width: 100vw;
display: block;
transform: translateX(-50%);
left: 50%;
position: absolute;
top: 0;
bottom: 0;
pointer-events: none;
z-index: -1;
}
.blue > p {
text-align: center;
}
.blue > p em {
margin-inline: 0.5ch;
}
.blue em {
font-family: Inter, sans-serif;
font-style: normal;
font-weight: 200;
letter-spacing: -0.07em;
transform: scaleY(0.8);
display: inline-block;
word-spacing: initial;
}
.interrogation {
margin-block: 4rem;
display: flex;
flex-direction: column;
align-items: center;
color: white;
}
.interrogation::before, .interrogation::after {
content: "";
border-left: thin solid white;
order: 2;
height: 1rem;
}
.interrogation::after {
order: 4;
}
.interrogation__input, .interrogation__output {
border: thin solid white;
padding: 1rem 2rem;
order: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem 2rem;
text-align: center;
}
.interrogation__process:where(:not(:first-child)) {
order: 3;
max-width: 8rem !important;
}
.interrogation__process--box {
border: medium solid white;
padding: 1rem 2rem;
max-width: none;
}
.interrogation__output {
order: 5;
}
transform: rotate(30deg)
transform: rotate(30deg)
transform: rotate(30deg)
transform: rotate(30deg)
html-block-iframe
controller
article
light
light--large
light
light--large
light--darkened
light
light--large
light
light--large
light--darkened
light
light--large
light
light--large
light--darkened
light
light
light--darkened
light
light
light--darkened
light
light
light--darkened
light
light
light
dark
dark--large
dark
dark--large
dark
dark--large
dark
dark
dark
dark
dark
dark
dark
dark
dark
dark
dark
dark
dark
dark
dark
dark
dark
dark
ropebox
dark
dark
dark
dark
dark
dark
dark
scout
yetty
yetty
niamh
yetty
niamh
yetty
niamh
yetty
yetty
yetty
niamh
yetty
niamh
yetty
yetty
niamh
niamh
yetty
niamh
niamh
yetty
niamh
yetty
yetty
niamh
yetty
niamh
yetty
yetty
niamh
niamh
niamh
yetty
niamh
niamh
niamh
niamh
yetty
yetty
niamh
niamh
yetty
yetty
niamh
yetty
yetty
niamh
niamh
niamh
yetty
niamh
yetty
niamh
niamh
niamh
niamh
niamh
niamh
niamh
yetty
niamh
yetty
niamh
niamh
yetty
yetty
niamh
niamh
yetty
niamh
yetty
yetty
niamh
niamh
niamh--transition
yetty
yetty--2
yetty
yetty--2
niamh
niamh--2
yetty
yetty--2
yetty
yetty--2
niamh
niamh--2
niamh
niamh--2
niamh
niamh--2
yetty
yetty--2
niamh
niamh--2
yetty
yetty--2
yetty
yetty--2
yetty
yetty--2
yetty
yetty--2
niamh
niamh--2
niamh
niamh--2
yetty
yetty--2
niamh
niamh--2
niamh
niamh--2
niamh
niamh--2
yetty
yetty--2
niamh
niamh--2
yetty
yetty--2
yetty
yetty--2
yetty
yetty--2
yetty
yetty--2
yetty
yetty--2
yetty
yetty--2
yetty
yetty--2
yetty
yetty--2
yetty
yetty--2
blue
interrogation
interrogation__input
interrogation__process
interrogation__output
interrogation
interrogation__input
interrogation__process
interrogation__output
interrogation
interrogation__input
interrogation__process
interrogation__output
interrogation
interrogation__input
interrogation__process
interrogation__output