Sigma+

您正在查詢的標題為：關注組織
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

---

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：機動特遣隊
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

---

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：基金會設施
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

---

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：員工與角色檔案
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

---

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：世界線中心頁
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

---

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：系列檔案室
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

---

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：競賽資料庫
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

---

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：異常物品紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

---

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：超常事件紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

---

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：未解明地點列表
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

---

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：基金會故事
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

---

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您現在最好給我停下來

本頁面內包含基金會維基內部使用的模板。

嚴禁任何人員在未經網站行政人員
之授權下修訂本頁面

---

這是個由EstrellaYoshte製作的元組件，其用途是為製作外觀主題提供一個協作層。
若要使用，請插入以下代碼：

[[include :scp-zh-tr:component:sigma-plus]]

Sigma+本身在保留大多數原始美術元素的前提下，使用了更加現代化的CSS規則與屬性，包含有：

• 可拓展的CSS變數
• 以grid和flex為基礎的佈局
• 豐富的tab導航欄設計元素
• 右至左語言的方向相容

開發者筆記

該組件的主要目標是為了減輕在解決網站過時的基底佈局時的負擔，因為它往往會限制住真正可自定義的元素數量、為達到理想中的佈局效果而大幅增加CSS的複雜度/間接成本、進一步惡化許多尚未最佳化CSS的狀況，抑或者是這三種情況一起來的各種褻瀆組合。

Sigma+限制住自身不去大幅更改文字語義和視覺直覺性，以最大程度維持作為兼容層的可直通性，但還是有少數例外：

• Header裝飾元素：原本是#container-wrap裡面的background-image，但那在語義上跟實際的#header與#top-bar差太遠了，並且不會隨佈局和大小的變化（終端使用者的設定、瀏覽器預設參數、螢幕大小……等）而響應。已重製為這兩個div底下的background-image。
• Top Bar的下拉式選單：調整得更容易響應螢幕大小的變化，並同時覆蓋了那通常來說很討人厭的Wikdot原生設計樣式。使tab具有導航能力。
• 評分與著作資訊模組：為了更好的語義區隔和修改變數的便利性而大幅重新設計。取消了著作資訊模組的怪咖CSS。
• Tabs：利用CSS變數替換了原先用於設計樣式的紋理表。用起來可以稍微不那麼煩躁。

範例

:root {
--header-title: "We don't have a 55";
--sp_header-height: 21.75rem;
}

原始代碼：

:where(:root) {
    --header-title: "SCP 基金會";
    --header-subtitle: "控制，收容，保護";
 
    --sp_header-title-size: min(calc(2.675rem * var(--sp_header-title-scale)), calc(1.25rem * var(--sp_header-title-scale) + 2.5vw));
    --sp_header-subtitle-size: min(calc(.875rem * var(--sp_header-subtitle-scale)), calc(0.475rem * var(--sp_header-subtitle-scale) + 1.25vw));
    --sp_header-title-scale: 1;
    --sp_header-subtitle-scale: 1;
 
    --sp_header-logo: url(https://scp-wiki.wdfiles.com/local--files/component:theme/logo.png);
    --sp_header-logo-size: 6.25rem;
    --sp_header-logo-adaptive-size: min(var(--sp_header-logo-size), calc(var(--sp_header-logo-size)*0.575 + 5vw));
    --sp_header-height: 8.75rem;
 
    --sp_header-gradient-top-color: #000000;
    --sp_header-gradient-top-stop: .4;
    --sp_header-gradient-bottom-color: #6B4040;
    --sp_header-gradient-bottom-stop: .95;
 
    --sp_diagonal-stripes-angle: 45deg;
    --sp_diagonal-stripes-width: .08rem;
    --sp_diagonal-stripes-gap: .22rem;
    --sp_diagonal-stripes-color: #FFAFAF09;
 
    --sp_top-bar-height: 1.375rem;
    --sp_top-bar-gradient-top-color: #535353;
    --sp_top-bar-gradient-bottom-color: #3B3B3B;
 
    --sp_top-bar-link-color: #fff;
    --sp_top-bar-link-hover-color: #a01;
    --sp_top-bar-link-hover-background: #fff;
 
    --sp_dropdown-width: calc(8.25rem + 2.25vw);
    --sp_dropdown-background: #eee;
    --sp_dropdown-link-color: var(--sp_top-bar-link-hover-color);
    --sp_dropdown-link-hover-color: var(--sp_top-bar-link-hover-color);
    --sp_dropdown-link-background: transparent;
    --sp_dropdown-link-border: 0.05rem solid #ddd;
    --sp_dropdown-link-hover-background: var(--sp_top-bar-link-hover-background);
 
    --sp_side-bar-width: 14rem;
 
    --sp_area-max-width: 62.5rem;
    --sp_area-min-margin: 1.25rem;
    --sp_area-comp-margin: max(calc((100vw - var(--sp_area-max-width))/2), var(--sp_area-min-margin));
    --sp_final-header-height: calc(var(--sp_header-height) + var(--sp_top-bar-height));
 
    --sp_rate-module-text-color: #FFF;
    --sp_rate-module-background: #633;
    --sp_rate-module-sub-color: #966;
    --sp_rate-module-active-color: var(--sp_rate-module-text-color);
 
    --sp_rate-module-button-color: var(--sp_rate-module-background);
    --sp_rate-module-button-background: #fff6f0;
    --sp_rate-module-button-hover-color: var(--sp_rate-module-active-color);
    --sp_rate-module-button-hover-background: var(--sp_rate-module-background);
 
    --sp_tab-text-color: #000;
    --sp_tab-background: #fefefe;
    --sp_tab-border-color: #a3a3a3;
    --sp_tab-hover-text-color: var(--sp_tab-text-color);
    --sp_tab-hover-background: #ffd3d3;
    --sp_tab-hover-border-color: var(--sp_tab-border-color);
    --sp_tab-selected-text-color: #fff;
    --sp_tab-selected-background: #901;
    --sp_tab-selected-border-color: #65000b;
 
    --sp_hovertip-background: #fff;
    --sp_hovertip-border: 0.05rem solid black;
}
 
textarea, input { font-family: inherit; }
 
/*--------------*/
/*--- HEADER ---*/
/*--------------*/
 
/* unset the faux header bg */
div#container-wrap { background-image: none; }
 
#header {
    /* Recreating (sans top bar) with gradients */
    background-image:
 
        /* Diagonal stripes */
        repeating-linear-gradient(var(--sp_diagonal-stripes-angle),
            var(--sp_diagonal-stripes-color), var(--sp_diagonal-stripes-color) var(--sp_diagonal-stripes-width),
            transparent var(--sp_diagonal-stripes-width), transparent var(--sp_diagonal-stripes-gap)),
 
        /* Header gradient colors */
        linear-gradient(to bottom,
            var(--sp_header-gradient-top-color) calc(var(--sp_header-gradient-top-stop) * var(--sp_header-height)),
            var(--sp_header-gradient-bottom-color) calc(var(--sp_header-gradient-bottom-stop) * var(--sp_header-height))
        );
    background-repeat: repeat-x;
    background-size: auto;
    background-position: initial;
 
    /* De-styling sigma */
    padding-bottom: 0;
    height: auto;
    width: 100%;
    max-width: unset;
    min-height: var(--sp_final-header-height);
    z-index: initial;
 
    /* Grid layout */
    display: grid;
    grid-template-areas:
        ". login login ."
        ". . . ."
        ". h1 search ."
        ". h2 search ."
        ". . . ."
        "top-bar top-bar top-bar top-bar";
    grid-template-rows: auto 1fr auto auto 1fr auto;
    grid-template-columns: var(--sp_area-comp-margin) 1fr auto var(--sp_area-comp-margin);
}
 
/* Header logo */
#header::before {
    content: "";
    display: block;
    background: var(--sp_header-logo) no-repeat center;
    background-size: contain;
    grid-row: 2/6;
    grid-column: 2/3;
    width: var(--sp_header-logo-adaptive-size);
}
 
/*--------------*/
/*--- TOP BAR ---*/
/*--------------*/
 
#top-bar {
    grid-area: top-bar;
 
    /* De-styling sigma-9 */
    position: relative;
    z-index: initial;
    top: initial; right: initial;
    max-width: unset;
    line-height: unset;
    height: auto;
    font-size: .875em;
 
    padding-inline: var(--sp_area-min-margin);
    box-sizing: border-box;
    min-height: var(--sp_top-bar-height);
 
    /* Recreating top bar image with gradients */
    background-image:
        linear-gradient(to bottom,
            var(--sp_top-bar-gradient-top-color) 0%,
            var(--sp_top-bar-gradient-bottom-color) 100%);
}
 
#top-bar > div[class*="top-bar"] {
    max-width: var(--sp_area-max-width);
    height: 100%;
    margin: auto;
    position: static;
    left: initial;
    bottom: initial;
    z-index: initial;
}
#top-bar ul, #top-bar li {
    float: none;
}
#top-bar div[class*="top-bar"] > ul {
    height: 100%;
    display: flex;
    justify-content: end;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    max-height: unset;
    border: none;
    line-height: 1.275;
    color: var(--sp_top-bar-link-color);
    padding: 0;
    padding-inline: calc(var(--sp_dropdown-width)*0.05 + 0.25vw);
    box-sizing: border-box;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a:hover,
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li:is(.sfhover, :hover, :focus-within) > a {
    color: var(--sp_top-bar-link-hover-color);
    background: var(--sp_top-bar-link-hover-background);
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul {
    left: initial;
    min-width: max(100%, var(--sp_dropdown-width));
    width: max-content;
    background: var(--sp_dropdown-background);
    box-sizing: border-box;
    z-index: 3;
    visibility: visible;
    pointer-events: none;
    opacity: 0;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li:where(:not(:last-child)) > ul {
    inset-inline-start: 0;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li:where(:last-child) > ul {
    right: initial;
    inset-inline-end: 0;
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li:is(.sfhover, :hover, :focus-within) ul {
    pointer-events: auto;
    opacity: 1;
}
 
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a {
    min-width: max-content;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.5;
    overflow: initial;
    max-height: initial;
    padding: 0.125em 0.75em;
    border-top: var(--sp_dropdown-link-border);
    color: var(--sp_dropdown-link-color);
    background: var(--sp_dropdown-link-background);
    text-align: start;
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a:is(:hover,:focus) {
    color: var(--sp_dropdown-link-hover-color);
    background: var(--sp_dropdown-link-hover-background);
}
 
#top-bar .open-menu, #top-bar .open-menu > p { display: contents; }
#top-bar .open-menu a { z-index: 9; }
 
/*--------------*/
/*--- LOGIN ---*/
/*--------------*/
 
#login-status {
    top: initial;
    right: initial;
    position: relative;
    z-index: 3;
    grid-area: login;
    text-align: end;
    padding-block-start: 0.5rem;
}
#account-options {
    right: initial;
    inset-inline-end: 0;
    inset-block-start: 100%;
    display: block!important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.075s linear;
}
#account-topbutton:focus + #account-options,
#account-options:is(:hover, :focus-within) {
    opacity: 1;
    pointer-events: auto;
}
 
/* Safari support */
@media not all and (min-resolution:.001dpcm) { @media {
#account-topbutton:hover + #account-options {
    opacity: 1;
    pointer-events: auto;
}
}}
 
/*--------------*/
/*--- SEARCH ---*/
/*--------------*/
 
#search-top-box {
    grid-area: search;
    position: relative;
    right: initial;
    top: initial;
    width: auto;
    display: flex;
    align-items: center;
    text-align: unset;
    z-index: initial;
}
 
#search-top-box-form {
    display: flex;
    gap: 0.325rem;
}
 
#search-top-box-input, #search-top-box-form input[type=submit] {
    margin: 0;
    appearance: none;
}
 
/*------------------*/
/*--- HEADER TEXT ---*/
/*------------------*/
 
#header h1 { grid-area: h1; }
#header h2 { grid-area: h2; }
#search-top-box { grid-area: search; }
#header h1, #header h2 {
    margin-left: initial;
    padding: 0;
    padding-inline-start: calc(var(--sp_header-logo-adaptive-size)*1.05);
    float: none;
    max-height: initial;
    font-size: 1rem;
}
#header h1 a, #header h2 span {
    margin: 0;
    padding: 0;
    line-height: 1.125;
    max-height: initial;
    max-width: max-content;
    display: inline-block;
    font-size: 0rem;
    letter-spacing: 0;
}
#header h1 a::before {
    content: var(--header-title);
    font-size: var(--sp_header-title-size);
}
#header h2 span::before {
    content: var(--header-subtitle);
    font-size: var(--sp_header-subtitle-size);
    letter-spacing: 0.05vw;
}
 
/*-----------------------*/
/*-----------------------*/
/*-----------------------*/
 
/*------------------*/
/*--- MAIN AREA ---*/
/*------------------*/
 
#content-wrap {
    min-height: unset;
    width: calc(100% - var(--sp_area-min-margin)*2);
    display: flex;
    max-width: var(--sp_area-max-width);
    column-gap: 2.325rem;
}
 
#main-content {
    padding: 0;
    margin: 0;
    max-width: 100%;
    min-width: 0rem;
    flex: 1 1 auto;
    overflow-wrap: break-word;
}
#page-content { font-size: unset; }
 
/* Side Bar */
@media not all and (max-width: 767px) {
    #side-bar {
        position: static;
        inset: initial;
    }
}
div#side-bar {
    width: var(--sp_side-bar-width);
    flex: 0 0 var(--sp_side-bar-width);
}
 
/* Breadcrumbs */
#breadcrumbs, .pseudocrumbs {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.55ch;
}
.pseudocrumbs > p { display: contents; }
 
/*--------------------*/
/*--- USER DISPLAY ---*/
/*--------------------*/
 
.printuser {
    display: inline-flex;
    align-items: baseline;
    grid-gap: 0.25em;
    text-indent: 0;
}
.printuser a { margin-right: 0; }
.printuser > a:first-child {
    display: flex;
    user-select: none;
    align-self: center;
    min-width: max-content;
}
.printuser > a:first-child img {
    height: 1.25em;
    width: 1.25em;
    padding: 0;
    padding-left: 0.5em;
    object-fit: contain;
    background-size: cover;
    overflow: hidden;
    margin: 0;
}
 
/*-----------------*/
/*--- RATE & INFO MODULE ---*/
/*-----------------*/
 
/* Baseline reset */
div.page-rate-widget-box,
div.rate-box-with-credit-button {
    display: inline-flex;
    align-items: center;
    background-color: var(--sp_rate-module-background);
    border: none;
    padding: 0.075em;
    margin-right: 0;
}
div.page-rate-widget-box .cancel a:hover { background: transparent; }
 
/*-----------------*/
 
div.page-rate-widget-box {
    flex-wrap: wrap;
}
div.page-rate-widget-box .rate-points {
    padding: 0 .675em;
    color: var(--sp_rate-module-text-color);
}
#main-content div.page-rate-widget-box span:is(.rate-points, .btn) {
    border: none;
    border-radius: unset;
    background: transparent;
}
.page-rate-widget-box :is(.rateup, .ratedown) a {
    margin: 0;
    color: var(--sp_rate-module-button-color);
    background-color: var(--sp_rate-module-button-background);
}
.page-rate-widget-box :is(.rateup, .ratedown) a:is(:hover,:focus) {
    color: var(--sp_rate-module-button-hover-color);
    background-color: var(--sp_rate-module-button-hover-background);
}
 
div.page-rate-widget-box .cancel a { color: var( --sp_rate-module-sub-color); }
div.page-rate-widget-box .cancel a:is(:hover,:focus) { color: var( --sp_rate-module-active-color); }
 
/*-----------------*/
 
div.rate-box-with-credit-button {
    align-items: stretch;
}
 
div.rate-box-with-credit-button .page-rate-widget-box {
    background-color: transparent;
    border-radius: inherit;
    padding: 0;
}
 
div.rate-box-with-credit-button .creditButton {
    display: block;
}
div.rate-box-with-credit-button .creditButton p {
    display: contents;
    font-size: unset;
}
div.creditButton p a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .925em;
    width: 1.375em;
    height: 100%;
    color: var( --sp_rate-module-text-color);
    padding: 0; padding-top: .1425em;
    border: 0;
    border-inline-start: solid 0.05em var( --sp_rate-module-sub-color);
    box-sizing: border-box;
    margin: 0;
}
div.creditButton p a:is(:hover,:focus) { color: var(--sp_rate-module-button-hover-color); }
 
div.creditRate {
    display: block;
    float: none;
    text-align: end;
    margin-right: 0;
}
div.creditRate .rateBox { display: contents; }
 
/*-------------*/
/*--- TABS ---*/
/*-------------*/
 
.yui-navset { clear: both; }
 
.yui-navset .yui-nav {
    display: flex;
    flex-wrap: wrap;
}
.yui-navset.yui-navset-top .yui-nav :is(li, .selected) {
    display: block;
    margin: 0;
    padding: 0;
}
.yui-navset.yui-navset-top .yui-nav li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    border-width: 0.05rem;
    box-sizing: border-box;
    padding: 0.325rem 0.625rem;
}
 
.yui-navset.yui-navset-top .yui-nav :is(li, .selected) a em {
    position: static;
    inset: unset;
    border: none;
    padding: 0;
}
 
/* ------------------------- */
.yui-navset.yui-navset-top .yui-nav li a {
    color: var(--sp_tab-text-color);
    background: var(--sp_tab-background);
    border-color: var(--sp_tab-border-color);
}
 
.yui-navset.yui-navset-top .yui-nav li a:where(:hover,:focus) {
    color: var(--sp_tab-hover-text-color);
    background: var(--sp_tab-hover-background);
    border-color: var(--sp_tab-hover-border-color);
}
 
.yui-navset.yui-navset-top .yui-nav .selected a {
    color: var(--sp_tab-selected-text-color);
    background: var(--sp_tab-selected-background);
    border-color: var(--sp_tab-selected-border-color);
}
 
/*-------------*/
/*--- FOOTNOTE ---*/
/*-------------*/
 
.hovertip {
    background: var(--sp_hovertip-background)!important;
    border: var(--sp_hovertip-border)!important;
}
 
/*-------------*/
/*--- TAGS ---*/
/*-------------*/
 
#main-content .page-tags { text-align: start; }
#main-content .page-tags span {
    max-width: max-content;
    display: flex;
    flex-wrap: wrap;
    grid-gap: 0.375rem;
}
#main-content .page-tags a {
    margin: 0;
}
 
/*------------------*/
/*--- BOTTOM OPTIONS ---*/
/*------------------*/
 
#page-info, .page-watch-options, .page-options-bottom {
    text-align: end;
    height: auto;
}
:where(#page-options-container) .page-options-bottom a {
    display: inline-block;
}
 
#who-rated-page-area > div {
    column-width: 13.75em;
    column-gap: 0.75rem;
}
 
/*------------------*/
/*--- END AREA ---*/
/*------------------*/
 
#footer {
    display: flex!important;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    align-items: baseline;
    grid-gap: 0.5ch;
}
#footer .options {
    display: flex!important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    float: none;
    order: 1;
    width: auto;
    font-size: 0;
    margin-inline: 0.25rem;
    text-align: inherit;
}
#footer .options a {
    display: flex;
    align-items: center;
    font-size: 0.625rem;
    padding-inline: 0.375rem;
    border-inline-start: currentColor solid 0.05rem;
}
 
#license-area {
    padding-inline: var(--sp_area-min-margin);
}
 
#footer-bar {
    max-width: 100%;
    margin: 0 auto;
    border: none;
    padding: 0 var(--sp_area-comp-margin);
}
#footer-bar .units {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: .5rem;
}
#footer-bar .unit {
    float: none;
    width: auto;
    flex-basis: 10.25rem;
}
 
/*------------------*/
/*--- MOBILE Q ---*/
/*------------------*/
 
@media (max-width: 767px) {
    #top-bar { padding-inline: 0; }
    #top-bar div[class*="top-bar"] > ul { justify-content: center; }
    #top-bar div[class*="top-bar"] > ul > li { flex-grow: 1; }
}