Fish^12:kinktober
IF THE WORLD CHOOSES TO BECOME MY ENEMY, I WILL FIGHT LIKE I ALWAYS HAVE.
This is the aesthetic theme for SCP Kinktober 2026. This theme was created by me, Fish^12. Thematically, it's very Moulin Rouge and heady.
This theme is a Sigma Plus theme and uses the Toggle Sidebar Component.
To include this theme on your page, use the following code:
[[include :scp-wiki:theme:beyond-saving]]
/* Kinky Pumpkin Theme [2025 Wikidot Theme] by Fish^12 */ @import url('https://fonts.googleapis.com/css2?family=Gloock&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap'); :root { --red: #960019; --kissred: #9c001c; --darkred: #290004; --white: #fcffff; --orange: #e47412; --lightorange: #ff9132; --darkorange: #e47412; --trans: transparent; --timer: 200ms; --gloo: "Gloock"; --libr: "Libre Baskerville"; --jose: "Josefin Sans"; --robo: "Roboto Flex"; --header-title: "KINKTOBER"; --header-subtitle: "BEYOND SAVING"; --sp_header-logo: none; --sp_header-title-size: clamp(3rem, -0.714rem + 7.738vw, 6.25rem); --sp_header-subtitle-size: clamp(1.25rem, 0.536rem + 1.905vw, 2.25rem); --sp_header-height: 20rem; --sp_top-bar-height: 2rem; --sp_top-bar-gradient-top-color: var(--red); --sp_top-bar-gradient-bottom-color: var(--red); --sp_top-bar-link-color: var(--white); --sp_top-bar-link-hover-color: var(--lightorange); --sp_top-bar-link-hover-background: var(--darkred); --sp_dropdown-background: var(--red); --sp_dropdown-link-color: var(--white); --sp_dropdown-link-hover-color: var(--orange); --sp_dropdown-link-background: var(--red); --sp_dropdown-link-hover-background: var(--darkred); --sp_dropdown-link-border: none; --sp_rate-module-text-color: var(--white); --sp_rate-module-background: var(--red); --sp_rate-module-sub-color: var(--white); --sp_rate-module-active-color: var(--white); --sp_rate-module-button-color: var(--white); --sp_rate-module-button-background: var(--red); --sp_rate-module-button-hover-color: var(--white); --sp_rate-module-button-hover-background: var(--darkred); --sp_tab-text-color: var(--white); --sp_tab-background: var(--orange); --sp_tab-border-color: var(--red); --sp_tab-hover-text-color: var(--white); --sp_tab-hover-background: var(--red); --sp_tab-hover-border-color: var(--darkorange); --sp_tab-selected-text-color: var(--white); --sp_tab-selected-background: var(--lightorange); --sp_tab-selected-border-color: var(--red); --sp_hovertip-background: var(--darkred); --sp_hovertip-border: 0.2em solid var(--red); } /* From the top! */ #login-status { padding-right: 0.5em; padding-top: 0.5em; font-size: 16px; color: var(--lightorange); font-weight: bold; } #login-status a, #login-status ul a { color: var(--darkred); background-color: var(--orange); } a#my-account { padding: 0 5px; } #login-status a:hover { color: var(--white); text-decoration: none; background-color: var(--orange); } #login-status .printuser > a:first-child img { background-image: none !important; padding-left: 0; } /* Pop-up page. */ .owindow { background-color: var(--darkred); border: none; color: var(--lightorange); } .owindow a { color: var(--white); } .owindow .title { cursor: auto; background-color: var(--darkred); border-bottom: 0.2em solid var(--white); text-align: right; padding: 1em; text-transform: capitalize; } .owindow img { background-color: var(--trans) !important; padding: 0 !important; margin-right: 1em; } .owindow td img { display: none; } .owindow .button-bar a { border-color: var(--red); border-width: 0.2em; background-color: var(--orange); color: var(--darkred); } .owindow .button-bar a:hover { background-color: var(--darkred); color: var(--white); } .odialog-shader { background-image: linear-gradient(45deg, var(--trans) 10%, var(--orange) 10% 20%, var(--trans) 20%), linear-gradient(135deg, var(--trans) 10%, var(--orange) 10% 20%, var(--trans) 20%), linear-gradient(225deg, var(--trans) 10%, var(--orange) 10% 20%, var(--trans) 20%), linear-gradient(315deg, var(--trans) 10%, var(--orange) 10% 20%, var(--trans) 20%), linear-gradient(45deg, var(--trans) 45%, var(--red) 45% 55%, var(--trans) 55%), linear-gradient(135deg, var(--trans) 45%, var(--red) 45% 55%, var(--trans) 55%); } /* Account and search buttons. */ #account-options { margin-top: 0.2em; margin-right: 0.5em; text-align: center; border: none; border-color: var(--trans); background-color: var(--orange); width: 7.4rem; } #account-topbutton { font-size: 80%; border: none; margin-left: 0; transition: var(--timer); padding: 3px 2px 1px 2px; } #account-topbutton:hover { color: var(--white); } #account-options li a { color: var(--darkred); background-color: var(--orange); text-transform: capitalize; transition: var(--timer); } #account-options li a:hover { color: var(--white); text-decoration: none; } #search-top-box { align-items: flex-start; flex-direction: row-reverse; flex-wrap: wrap; padding-right: 0.51em; padding-top: 0.2em; font-size: 16px; } #search-top-box-form input[type=submit] { background-color: var(--orange); background-image: none; color: var(--darkred); border: 0.2em solid var(--orange); box-shadow: none; border-radius: 0; padding: 0 5px; transition: var(--timer); } #search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus{ background-color: var(--orange); border: 0.2em solid var(--orange); background-image: none; color: var(--white); box-shadow: none; } /* Header. */ #header { grid-template-areas: ". . login login login" ". . . . search" "h1 h1 h1 h1 h1" "h2 h2 h2 h2 h2" ". . . . ." "top-bar top-bar top-bar top-bar top-bar"; grid-template-columns: repeat(5, 1fr); background-image: none; background-color: var(--red); } #header h1, #header h2 { padding-inline-start: 2vw; text-align: left; } #header h1 a::before, #header h2 span::before { font-family: var(--gloo); color: var(--darkred); letter-spacing: 4px; text-shadow: none; } /* Top bar. */ #top-bar { font-family: var(--jose); } #top-bar ul li { flex-grow: 1; text-transform: uppercase; font-weight: bold; letter-spacing: 0.5px; } #top-bar ul li a { transition: var(--timer); } #top-bar div[class*="top-bar"] > ul { justify-content: center; } #top-bar ul li ul { border-width: 0 0; box-shadow: none; } #top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a { line-height: 2; text-align: center; } /* Side bar and side bar button. */ #top-bar .open-menu a { border: 0.1em solid var(--red); background-color: var(--darkred); color: var(--orange); transition: var(--timer); } #top-bar .open-menu a:hover { border: 0.1em solid var(--darkred); background-color: var(--orange); color: var(--darkred); } #side-bar { background-color: rgba(0, 0, 0, 0.5); } #side-bar a { padding: 0 5px; } #side-bar a:hover { text-decoration: none; } #interwiki .heading, #side-bar .heading { color: var(--white); border-bottom: solid 0.2em var(--red); font-family: var(--jose); font-weight: 400; } #side-bar .side-block.media, #side-bar .side-block.resources, #side-bar .side-block, #interwiki .side-block { background-color: var(--darkred); border-radius: 0; box-shadow: none; border: solid 0.2em var(--red); } #side-bar .side-block.media a { padding: 0; } #side-bar .side-block.media a:hover { background-color: var(--trans); filter: invert(1); } /* Body content. */ body, html { color: var(--white); background-color: var(--darkred); font-family: var(--robo); } #page-title, .meta-title { font-family: var(--libr); font-weight: bold; color: var(--lightorange); font-size: clamp(1.5rem, 0.786rem + 1.905vw, 2.5rem); margin-bottom: 2rem; border-color: var(--trans); } #breadcrumbs { margin: 1em 0em 1em; } .preview-message { color: var(--white); background-image: var(--red); border: solid 1px var(--white); } .preview-message a { color: var(--lightorange); } #page-content { color: var(--white); } /* Stuff you make. */ .scp-image-block { background-color: var(--white); box-shadow: none; border: solid 0.2em var(--black); } .scp-image-block .scp-image-caption { background-color: var(--white); border-top: solid 0.2em var(--black); } blockquote, div.blockquote { background-color: var(--orange); border: 0.2em solid var(--red); color: var(--darkred); } div.page-rate-widget-box, .page-rate-widget-box { border-radius: 0; text-transform: capitalize; box-shadow: -10px 0 var(--red), -12px 0 var(--darkred), -27px 0 var(--red), -29px 0 var(--darkred), -39px 0 var(--red), -41px 0 var(--darkred), -46px 0 var(--red), -48px 0 var(--darkred), -50px 0 var(--red), 5px 0 var(--red), 7px 0 var(--darkred), 22px 0 var(--red), 24px 0 var(--darkred), 35px 0 var(--red), 37px 0 var(--darkred), 41px 0 var(--red), 43px 0 var(--darkred), 45px 0 var(--red); } div.rate-box-with-credit-button .page-rate-widget-box { border-radius: 0; } div.page-rate-widget-box .rate-points { padding: 0 .675em 0 0; } div.page-rate-widget-box .cancel a { padding: 0 5px; } div.page-rate-widget-box .cancel a:hover { background-color: var(--darkred); border-radius: 0; } div.creditButton p a { border-inline-start: none; margin-left: 4px; } table.wiki-content-table th { border: 0.2em solid var(--lightorange); background-color: var(--red); } table.wiki-content-table td { border: 0.2em solid var(--lightorange); background-color: var(--darkred); } hr { height: 1rem; margin: 1em 2em; clip-path: polygon(100% 100%, 100% 0, 0 100%, 0 0); background-color: var(--orange); } a, a.newpage, a:visited, #interwiki a, #side-bar a { color: var(--lightorange); transition: var(--timer); } a:hover, a:visited:hover, #interwiki a:hover, #side-bar a:hover { color: var(--red); background-color: var(--lightorange); text-decoration: none; } #toc { background-color: var(--orange); border: none; border-bottom: 0.2em solid var(--red); } #toc a { color: var(--darkred); padding: 0 5px; transition: var(--timer); } #toc a:hover { color: var(--orange); background-color: var(--darkred); } #toc #toc-action-bar { text-align: center; } h1, h2, h3, h4, h5 { color: var(--orange); font-family: var(--libr); } .yui-navset .yui-nav { border-width: 0; } .yui-navset .yui-content { background-color: var(--orange); border: 0.2em solid var(--red); } .yui-navset.yui-navset-top .yui-nav li a { border-width: 0.2em; } /* Bottom of page and editor. */ #main-content .page-tags span { border-width: 0; } #main-content .page-tags a { border-bottom: 1px dotted var(--red); padding: 0 5px; } #main-content .page-tags a:hover { text-decoration: none; border-color: var(--trans); } #page-info, .page-watch-options { background-color: var(--darkred); width: fit-content; margin: auto; padding: 2px 6px; margin-top: 0.5rem; border: solid 0.2em var(--red); } .page-watch-options a:hover { text-decoration: none; } .page-options-bottom { text-align: center; margin-top: 1rem; } .page-options-bottom a { border: solid 0.2em var(--red); background-color: var(--darkred); color: var(--lightorange); text-decoration: none; transition: var(--timer); } .page-options-bottom a:hover { border: solid 0.2em var(--darkred); background-color: var(--red); color: var(--white); } a.action-area-close:hover { text-decoration: none; background-color: var(--neonblue); color: var(--black); } .page-source, table.page-history, #license-area { color: var(--white); } table.page-history a { color: var(--lightorange); } table.page-history a:hover, #lock-info { color: var(--darkred); } .pager a:hover { background-color: var(--neonred); color: var(--white); text-decoration: none; } .hovertip { color: var(--white); width: fit-content; height: fit-content; } #footer { align-items: center; height: 2rem; color: var(--black); background-color: var(--red); } #footer a { color: var(--lightorange); font-weight: bold; } #footer a:hover { color: var(--darkred); background-color: var(--orange); font-weight: bold; }