Level M-328.5 “捉迷藏后”

注意：您当前处于镜像站点之中，如需对页面进行操作，请前往源站台。

版式 CSS 代码

@import url('https://fonts.googleapis.com/css2?family=Nixie+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
 
:root {
    --body-bg: 225, 225, 225;
    --content-bg: var(--global-white-color);
    --bg-opacity: 0.9;
 
    --extra-bg-1: url(https://imagebed.pro/images/liurd/skyline.svg);
    --extra-bg-2: url(https://imagebed.pro/images/liurd/skyline.svg);
    --extra-bg-3: url(https://imagebed.pro/images/liurd/skyline.svg);
    --extra-opacity-1: 0.15;
    --extra-opacity-2: 0.05;
    --extra-opacity-3: 0.05;
 
    --topbar-hover-bg: var(--dark-ui-bg), 0.2;
    --topbar-hover-txt: var(--light-ui-txt);
 
    --user-drop-txt: var(--dark-ui-txt);
 
    --bottombar-bg: var(--dark-ui-bg);
    --bottombar-txt: var(--dark-ui-txt);
 
    --header-title: "Backrooms";
 
    --banner-title: "BACKROOMS";
    --banner-subtitle: "当色彩褪去的时候";
 
    --header-height: 3rem;
    --topbar-height: 2.5rem;
    --dropdown-height: var(--topbar-height);
    --banner-height: 25rem;
 
    --header-ui-size: 3rem;
 
    --header-title-size: 1.8rem;
    --topbar-size: clamp(0.8rem, calc(0.4rem + 0.8vw), 1.2rem);
    --banner-title-size: clamp(2rem, calc(2rem + 3.5vw), 6rem);
    --banner-subtitle-size: 1rem;
 
    --banner-font: "Nixie One", "Noto Serif SC", Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, serif;
    --header-font: var(--banner-font);
    --title-font: "Outfit", "Noto Sans SC", "Noto Sans TC", Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, sans-serif;
    --body-font: "Atkinson Hyperlegible", "Noto Sans SC", "Noto Sans TC", Arimo, Verdana, Geneva, sans-serif;
    --ui-font: "Outfit", "Noto Sans SC", "Noto Sans TC", Arimo, Verdana, Geneva, sans-serif;
}
 
#extra-div-1 {
    position: fixed;
    width: 100%;
    height: 25vh;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-image: var(--extra-bg-1);
    background-size: 20rem;
    background-repeat: repeat-x;
    background-position: center;
    opacity: var(--extra-opacity-1);
}
 
#extra-div-2 {
    position: fixed;
    width: 100%;
    height: 50vh;
    bottom: 0;
    left: 0;
    z-index: -2;
    background-image: var(--extra-bg-2);
    background-size: 40rem;
    background-repeat: repeat-x;
    background-position: center;
    opacity: var(--extra-opacity-2);
}
 
#extra-div-3 {
    position: fixed;
    width: 100%;
    height: 100vh;
    bottom: 0;
    left: 0;
    z-index: -3;
    background-image: var(--extra-bg-3);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: bottom;
    opacity: var(--extra-opacity-3);
}
 
#container {
    display: grid;
    grid-template-columns: minmax(var(--sidebar-width), 1fr)auto 1fr;
    grid-template-rows: auto auto auto auto;
}
 
#extrac-div-1 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: var(--banner-font);
    font-weight: 200;
    width: 100%;
    height: var(--banner-height);
    color: rgb(var(--header-txt));
    order: -1;
}
 
#extrac-div-1::before {
    content: var(--banner-title);
    font-size: var(--banner-title-size);
}
 
#extrac-div-1::after {
    content: var(--banner-subtitle);
    font-size: var(--banner-subtitle-size);
}
 
#header {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    min-width: var(--sidebar-width);
    width: 100%;
    height: fit-content;
    grid-template-columns: var(--header-ui-size) 1fr auto auto;
    grid-template-rows: var(--header-ui-size) calc(var(--banner-height) - var(--header-ui-size)) auto;
    top: calc(0px - var(--banner-height));
    order: -2;
}
 
#search-top-box {
    grid-column: 3 / 4;
    position: fixed;
    right: var(--header-ui-size);
    backdrop-filter: blur(1rem);
}
 
#login-status {
    grid-column: 4 / 5;
    position: fixed;
    right: 0;
    backdrop-filter: blur(1rem);
}
 
#header h1 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    height: var(--header-height);
    position: static;
}
 
#header h1 a {
    justify-content: flex-start;
    padding: 0;
    padding-left: 0.5rem;
    transition: padding var(--global-duration);
}
 
#header h1 a:is(:hover, :focus) {
    padding-left: 1rem;
    transition: padding var(--global-hover-duration);
}
 
#header h2 {
    display: none;
}
 
#header-extra-div-1 {
    display: none;
}
 
#top-bar {
    grid-column: 1 / 5;
    grid-row: 3 / 4;
    height: auto;
}
 
#top-bar > div > ul {
    flex-direction: column;
    height: auto;
    margin-right: 0;
}
 
#top-bar > div > ul > li {
    flex-basis: unset;
    height: var(--topbar-height);
}
 
#top-bar > div > ul > li > a {
    justify-content: flex-end;
    padding: 0 1rem;
}
 
#top-bar > div > ul > :is(li, li:last-of-type) > ul {
    top: 0;
    left: 100%;
    width: 24em;
    max-width: max-content;
    min-width: auto;
    flex-direction: row;
    flex-wrap: wrap;
}
 
#top-bar > div > ul > li > ul > li {
    width: 10em;
    flex-grow: 1;
}
 
#top-bar > div > ul > :is(li, li:hover, li:focus, li.sfhover, li:focus-within) > ul > li > a {
    box-sizing: border-box;
}
 
#content-wrap {
    display: contents;
}
 
#side-bar {
    max-height: unset;
    overflow-y: auto;
    border: unset;
    box-shadow: 0 0 1.5rem -1rem rgb(var(--global-dark-color));
}
 
#side-bar::after {
    backdrop-filter: blur(1rem);
}
 
#main-content {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    min-height: 100vh;
    box-sizing: border-box;
    margin: 0 auto 15vh;
    padding: 1.5rem;
    box-shadow: 0 0 2.5rem -1rem rgb(var(--global-dark-color));
    position: relative;
    background: rgba(var(--content-bg), var(--bg-opacity));
}
 
#main-content::after {
    content: "你曾经来过这里.";
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 10vh;
    color: rgb(var(--header-txt));
    font-family: var(--banner-font);
    font-weight: 200;
}
 
#page-title {
    padding: 0;
}
 
:is(blockquote, .blockquote, div.blockquote, [class*=blockquote]) {
    padding: 0.5rem 1rem;
    border-width: 0 0 0 0.3rem;
    background: rgba(var(--light-block-bg), 0.4);
}
 
#page-options-container {
    font-family: var(--ui-font);
}
 
#footer {
    grid-column: 1 / 4;
    grid-row: 3 / 4;
    box-sizing: border-box;
    justify-content: flex-end;
    margin-top: 0.5rem;
    border: unset;
}
 
#license-area {
    grid-column: 1 / 4;
    grid-row: 4 / 5;
    padding: 0.5rem;
    justify-content: flex-end;
}
 
#license-area a {
    color: rgb(var(--global-pale-color));
}
 
@media only screen and (max-width: 1024px) {
  #container-wrap {
    perspective-origin: 49.5% 5rem;
  }
 
  #container {
    display: flex;
  }
 
  #header {
    min-width: var(--sidebar-width);
    grid-template-columns: var(--header-ui-size) 1fr auto auto;
    grid-template-rows: var(--header-ui-size) auto auto;
    top: 0;
    width: initial;
    position: static;
  }
 
  #content-wrap {
    display: block;
    margin: 0;
  }
 
  #login-status {
    position: relative;
    backdrop-filter: unset;
  }
 
  #search-top-box {
    position: static;
    backdrop-filter: unset;
  }
 
  #login-status #account-options {
    left: initial;
    right: 0;
  }
 
  #top-bar > div > ul {
    flex-direction: row;
    margin-right: auto;
  }
 
  #top-bar > div > ul > li {
    flex-basis: min-content;
  }
 
  #top-bar > div > ul > li > a {
    justify-content: center;
    padding: 0;
  }
 
  #top-bar > div > ul > :is(li, li:last-of-type) > ul {
    top: 100%;
    left: 0;
    width: auto;
    flex-direction: column;
  }
 
  #top-bar > div > ul > li:last-of-type > ul {
    left: initial;
    right: 0;
  }
 
  #top-bar > div > ul > li > ul > li {
    width: 100%;
    flex-grow: 1;
  }
}
 
@media only screen and (max-width: 768px) {
    #top-bar > div > ul > :is(li, li:last-of-type) > ul {
        flex-direction: row;
    }
    #top-bar > div > ul > li > ul > li {
        width: 50%;
    }
}

捉迷藏后

周六下午的阳光斜斜地洒在老街区，把我们的影子拉得长长的。我们这群孩子像往常一样聚集在废弃工厂后面的空地上，那是我们的乐园。

“最后一次躲好！我要开始数了！”我的朋友蒙着眼睛，背对着那栋半倒塌的砖房。

我飞快地穿过空地上半人高的杂草，跳过散落的砖块，朝厂房深处跑去。其他小伙伴也各自找好了藏身之处——阿明总爱躲在生锈的起重机下面，他们喜欢钻进那些废弃的水泥管里。

我不一样，我喜欢找没人敢去的地方。今天我决定挑战那个从未有人去过的地下室入口。那是厂房最深处的一个锈迹斑斑的铁门，半掩在藤蔓和杂物后面。我小心翼翼地把铁门拉开一条缝，侧身挤了进去。

里面比我想象的要深得多。借着从门缝透进来的光，我看到一段向下延伸的水泥台阶。黑暗像是怪物般从下面慢慢升腾上来。我心里有点发毛，但随即想到，这肯定是最棒的藏身地，他们绝对找不到我。

我摸索着往下走，数着台阶：一级，两级，三级…一共十级台阶后，我踩到了平地。这里黑得伸手不见五指，空气中有股潮湿的泥土味和铁锈味。我静静地站着，努力适应黑暗，耳朵像雷达一样捕捉着外面的声音。

我听见朋友喊“找到了一个”的声音透过墙壁传来，闷闷的。然后是远处的欢笑声，追逐的脚步声。时间一点点过去，我开始感到不安——怎么还没轮到我被找到？我竖起耳朵，但外面的声音越来越稀疏，最后只剩下风吹过破窗的呜呜声。

不知过了多久，我决定自己出去。我摸索着往回走，找到台阶，一步步往上爬。推开铁门，夕阳的光让我眯起了眼睛。我眨了几下眼，等待视野恢复。

然后我愣住了。

空地上一个人都没有。杂草在风中轻轻摇晃，散落的砖块还保持着原来的位置，远处工厂的窗户黑洞洞地看着我。整个世界安静得出奇，只有风的声音。

我尝试喊着朋友的名字，但声音在空旷中显得微弱而单薄。

没有回应。

我的心跳开始加速。也许他们去其他地方玩了，故意不叫我？或者是他们找不到我，以为我先回家了？各种可能性在我脑子里乱撞，但没有一种能完全解释为什么一个人都不见了。

我走向我们常坐的那块水泥板，上面用粉笔画着的格子还清晰可见。旁边散落着几颗玻璃珠，是我最好的朋友今天带来的。这些东西的存在让我稍稍安心，至少证明下午的一切不是我的幻觉。

太阳正迅速西沉，天空被染成了橘红色和紫色。我决定回家。穿过废弃工厂区域时，熟悉的景物在暮色中变得有些陌生。那些白天里只是老旧破败的建筑，此刻在昏暗中显得神秘而略带威胁。

走出工厂区，来到老街。路灯还没亮，街边的店铺大多数已经关门。这条走了无数次的路上，我第一次感到如此空旷。往常这个时候，总会有邻居在门前乘凉，有孩子在路上追逐玩耍，但现在只有我一个人。

我加快脚步，书包在背上轻轻拍打。我开始想起妈妈说过不要玩得太晚回家，想起爸爸讲过的关于这条街过去的故事。风声、脚步声、远处隐约传来的狗吠声，每一个声音都让我的神经绷紧一点。

转过街角，终于看到我家那栋楼的轮廓。厨房的窗户亮着温暖的黄色灯光，那是我最熟悉的景象。我的心一下子放松下来，加快脚步，几乎是跑着穿过最后一段路。

推开家门，映入眼帘的却是:黄色的墙面，潮湿的地毯，闪烁的荧光灯……

从此，我开启了一条不归路。

作者信息

作者:cos60du