Div Code Block
body {
background-color: rgb(var(—swatch-background));
background-image: url(http://www.nuttest.club/local--files/members:woedstyle-2p0/whitenoise.png);
background-blend-mode: multiply;
background-repeat: repeat;
background-size: 31.250rem 31.250rem;
}
div#container-wrap {
background-image:
repeating-linear-gradient(
315deg,
hsla(0, 0%, 100%, 0),
hsla(0, 0%, 100%, 0) 0.25vh,
rgba(88, 88, 88, 0.1) 0.35vh,
rgba(88, 88, 88, 0.2) 0.5vh
);
background-size: 100% 100%;
background-repeat: repeat;
}
Regular Code Block
body { background-color: rgb(var(--swatch-background)); background-blend-mode: multiply; background-repeat: repeat; background-size: 31.250rem 31.250rem; } div#container-wrap { background-image: repeating-linear-gradient( 315deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 0.25vh, rgba(88, 88, 88, 0.1) 0.35vh, rgba(88, 88, 88, 0.2) 0.5vh ); background-size: 100% 100%; background-repeat: repeat; }
This here is a blockquote
This is a regular blockquote inside this blockquote div!
Bold Text Right Here
Italics Text Right Here
Bold Italics Text Right here
Underlined Text Right here
Title H1
Title H2
Title H3
Title H4
Title H5
Title H6
This is Regular Tabs
- Tabulator
- Tabulation
- Long Tab
- This empty tab has a really long name for some odd reason. I wonder why? It is very strange.
- Empty Tab
- Empty Tab
- Empty Tab
- Empty Tab
- Empty Tab
This is a tab view.
Hey look, more text here.
How quaint.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a Monitor Tab
Wrap the [[tabview]] in [[div class="monitor-tab"]] [[/div]]
- Tabulator
- Tabulation
- Long Tab
- This empty tab has a really long name for some odd reason. I wonder why? It is very strange.
- Empty Tab
- Empty Tab
- Empty Tab
- Empty Tab
- Empty Tab
This is a tab view.
Hey look, more text here.
How quaint.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a | table |
---|---|
You should know | how to make these |
already |
But now I need | a much much larger | table | to test |
---|---|---|---|
Gonna fill this baby up | with a whole buncha | lorem | ipsum |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque sit amet porttitor eget dolor morbi non arcu risus. Hendrerit gravida rutrum quisque non tellus orci. Feugiat sed lectus vestibulum mattis ullamcorper velit sed. Viverra accumsan in nisl nisi scelerisque eu ultrices. Massa massa ultricies mi quis hendrerit. Vel risus commodo viverra maecenas accumsan lacus vel facilisis. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Eu ultrices vitae auctor eu. Lacus suspendisse faucibus interdum posuere. Tellus cras adipiscing enim eu. | Malesuada nunc vel risus commodo viverra maecenas. Aliquet nec ullamcorper sit amet. Sagittis orci a scelerisque purus semper eget. Tempor id eu nisl nunc mi ipsum faucibus vitae. Tellus in metus vulputate eu scelerisque felis imperdiet proin. Quis risus sed vulputate odio ut enim blandit. Velit egestas dui id ornare arcu odio. Morbi quis commodo odio aenean sed adipiscing diam donec. Euismod elementum nisi quis eleifend quam adipiscing. Nisl rhoncus mattis rhoncus urna neque viverra justo. Lacus sed turpis tincidunt id. Eget est lorem ipsum dolor sit amet consectetur adipiscing elit. At augue eget arcu dictum varius duis at consectetur. Non pulvinar neque laoreet suspendisse. Enim tortor at auctor urna nunc id cursus. Urna cursus eget nunc scelerisque. | ||
Sed risus pretium quam vulputate dignissim. Adipiscing elit ut aliquam purus sit amet. | Venenatis urna cursus eget nunc scelerisque viverra mauris. In dictum non consectetur a. Sed libero enim sed faucibus turpis in eu. | Ut porttitor leo a diam sollicitudin tempor id eu. Elementum curabitur vitae nunc sed. | Risus at ultrices mi tempus. In nisl nisi scelerisque eu ultrices vitae. |
:root { /* header measurements */ --header-height-on-desktop: 10rem; --header-height-on-mobile: 10rem; --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem); --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem); --logo-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg"); } #header { --search-textbox-text-color: var(--swatch-secondary-color); background: none; } #header::before { content: " "; position: absolute; width: 100%; height: 100%; left: 0; top: 0.75rem; background-image: var(--logo-image); background-repeat: no-repeat; background-position: center 0; background-size: auto calc(var(--header-height-on-desktop) - 1.5rem); opacity: 0.8; pointer-events: none; } #header h1, #header h2 { margin: 0; padding: 0; width: 100%; height: var(--header-height-on-desktop); display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center; } #header h1 a, #header h1 a::before, #header h2 span, #header h2 span::before { margin: 0; padding: 0; z-index: 0; display: block; text-align: center; } #header h1 { z-index: 1; } #header h1 a::before, #header h1 a::after { content: var(--header-title); } #header h1 a::before { color: rgb(var(--swatch-text-tertiary-color)); z-index: -1; -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark)); } #header h1 a::after { color: rgb(var(--swatch-headerh1-color)); z-index: 1; } #header h2 { z-index: 0; text-transform: uppercase; pointer-events: none; } #header h2 span { margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em); } #header h2 span::before, #header h2 span::after { --wght: 600; content: var(--header-subtitle); position: absolute; left: 50%; transform: translateY(-50%) translateX(-50%); width: 100%; text-align: center; } #header h2 span::before { -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark)); } #header h2 span::after { color: rgb(var(--swatch-headerh2-color)); z-index: 1; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { color: rgba(0, 0, 0, 0); } @media (min-width: 36rem) { #login-status { flex-grow: 1; left: 3%; right: initial; } #login-status::before { --mask-image: none; background-color: transparent; } #login-status:not(:focus-within) { color: rgb(var(--login-line-divider-color)); -webkit-user-select: initial; -moz-user-select: initial; -ms-user-select: initial; user-select: initial; } #login-status #account-topbutton, #login-status:not(:focus-within) #account-topbutton { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); background-color: rgba(var(--login-arrow-color), 0); } #login-status #account-topbutton::before{ --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); --mask-image: initial; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(var(--login-arrow-color), 1); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton:hover::before { --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); --mask-image: initial; } #login-status:not(:focus-within) #account-topbutton::after { display: none; } #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); pointer-events: all; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) { opacity: 1; } #login-status #my-account { --wght: 300; } #account-options { background: var(--gradient-header); } #search-top-box { top: 1.5em; right: 3%; background: rgba(var(--search-focus-textbox-bg-color), 0.4); } #search-top-box:focus-within ~ #login-status { opacity: 1; } #search-top-box::after { transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); } #search-top-box:not(:focus-within)::after { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0% 100% ); background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #search-top-box:not(:focus-within):hover::after { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); background-color: rgb(var(--search-icon-hover-bg-color)); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) { max-width: var(--search-width); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { max-width: var(--search-width); padding: 0 var(--search-height) 0 1em; outline-width: 0; background-color: rgb(var(--search-focus-textbox-bg-color), 0.35); color: rgba(var(--search-textbox-text-color), 0.4); cursor: pointer; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"], #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] { pointer-events: all; border: none; } } #page-title::after, .meta-title::after, #page-title::before, .meta-title::before { content: ""; flex-grow: 1; height: 0.0625rem; background: rgb(var(--swatch-primary)); } #page-title::before, .meta-title::before { margin: auto 1.25rem auto auto; }
@supports(display: grid) { :root { --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19); --body-width-on-desktop: 45.75rem; } @media only screen and (min-width: 769px) { #side-bar .close-menu { display: block; position: fixed; top: 0.5rem; left: 0.5rem; width: 3rem; height: 3rem; background: unset; opacity: 1; pointer-events: all; z-index: -1; } #side-bar .close-menu img { color: transparent; } #side-bar .close-menu::before, #side-bar .close-menu::after { content: ""; box-sizing: border-box; position: fixed; display: block; top: 0.5rem; left: 0.5rem; width: 3rem; height: 3rem; padding: 0; margin: 0; text-align: center; pointer-events: all; cursor: pointer; transition: opacity var(--sidebar-transition-timing); } #side-bar .close-menu::before { --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E"); z-index: -1; background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important; -webkit-mask: var(--mask); mask: var(--mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-size: 60%; mask-size: 60%; } #side-bar .close-menu::after { z-index: -2; background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important; border-radius: var(--toggle-roundness, 50%); border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid; } #side-bar:focus-within .close-menu, #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu { pointer-events: none; } #side-bar:focus-within .close-menu::before, #side-bar:focus-within .close-menu::after { opacity: 0; pointer-events: none; } #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::before, #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::after { opacity: 0; pointer-events: none; } #side-bar { display: block; position: fixed; top: 0; left: calc(var(--sidebar-width-on-desktop)*-1); z-index: 10; transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; height: 100%; overflow-y: auto; overflow-x: hidden; margin-top: 0; } #side-bar:focus-within { left: 0; } #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover { left: 0; } #side-bar .side-block { margin-top: 1rem; background-color: rgb(0, 0, 0, 0); border-radius: 0; border-left-width: 0px; border-right-width: 0px; } #main-content::before { content: ""; display: block; position: fixed; top: 0; right: 0; z-index: -1; opacity: 0; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; margin-left: var(--sidebar-width-on-desktop); background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat; padding-right: 0; width: 100%; height: 100vh; pointer-events: none; z-index: 99; } #side-bar:focus-within ~ #main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } @supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { #side-bar { padding: inherit; } } #content-wrap { display: flex; flex-direction: row; width: calc(100vw - (100vw - 100%)); min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem))); flex-grow: 2; height: auto; position: relative; margin: 0 auto; max-width: inherit; } #main-content { width: 100%; position: initial; max-height: 100%; padding: 2rem 1rem; max-width: var(--body-width-on-desktop, 45.75rem); margin: 0 auto; } #page-content { max-width: min(90vw, var(--body-width-on-desktop, 45.75rem)); } @supports (-webkit-hyphens:none) { #side-bar { transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; padding-right: 0; background-color: rgb(0, 0, 0, 0); pointer-events: all; overflow-x: visible; overflow-y: visible; z-index: 999; } #side-bar::-webkit-scrollbar { opacity: 0; -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; } #side-bar .close-menu::before { z-index: 999; } #side-bar .close-menu::after { z-index: 998; } #side-bar:hover .close-menu::before, #side-bar:hover .close-menu::after { opacity: 0; } #side-bar:hover { left: 0; background-color: rgba(var(--swatch-menubg-color), 1); padding-right: 0; } #side-bar:hover::-webkit-scrollbar { opacity: 1; } #side-bar:hover~#main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } } } }
@import url("https://use.typekit.net/gmf8lgq.css"); :root { --theme-base: "black-highlighter"; --theme-id: "summerbeats"; --theme-name: "Summerbeats Theme"; /* Header */ --logo-image: url("http://elusionillusion.com/scp/summerbeats-theme/img/scp-vibin.svg"); --header-title: "The Foundationâ„¢"; --header-subtitle: "Just Vibin'."; /* Typefaces */ --body-font: dita, Verdana, Geneva, sans-serif; --header-font: whomp, Brush Script MT, cursive; --title-font: brandon-grotesque, Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, sans-serif; --mono-font: dico-mono-script, Consolas, monaco, monospace; /* Standard Colors */ --white-monochrome: 225, 225, 205; --pale-gray-monochrome: 205, 200, 180; --light-pale-gray-monochrome: 215, 215, 215; --very-light-gray-monochrome: 154, 154, 154; --light-gray-monochrome: 0, 160, 30; --gray-monochrome: 60, 55, 55; --dark-gray-monochrome: 40, 40, 35; --black-monochrome: 0, 0, 0; --pale-accent: 235, 130, 165; --bright-accent: 225, 0, 25; --medium-accent: 0, 115, 170; --medium-dark-accent: 160, 25, 55; --green-accent: var(--light-gray-monochrome); --dark-accent: 0, 25, 55; --alt-accent: 225, 180, 0; /* Background and Header Colors */ --background-gradient-color: var(--dark-accent); /* Primary Theme Colors */ --swatch-background: var(--medium-accent); /* Primary Text Colors */ --swatch-text-general: var(--swatch-text-light); --swatch-important-text: var(--alt-accent); /* Primary Menu Colors */ --swatch-menubg-color: var(--dark-accent); --swatch-menutxt-dark-color: var(--medium-accent); --swatch-menutxt-general-color: var(--swatch-menutxt-light-color); --swatch-menubg-dark-color: var(--medium-dark-accent); --swatch-border-color: var(--dark-accent); /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */ --swatch-secondary-color: var(--swatch-menubg-dark-color); --swatch-tertiary-color: var(--swatch-menubg-light-color); /* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */ --swatch-text-secondary-color: var(--swatch-menutxt-dark-color); --swatch-text-tertiary-color: var(--swatch-menutxt-light-color); /* Primary Header Colors */ --swatch-headerh1-color: var(--swatch-primary); --swatch-headerh2-color: var(--swatch-important-text); --swatch-topmenu-border-color: var(--alt-accent); --swatch-topmenu-bg-color: var(--alt-accent); /* Link Colors */ --link-color: var(--pale-accent); --visited-link-color: var(--swatch-primary); --hover-link-color: var(--swatch-primary); --newpage-color: var(--alt-accent); --sidebar-links-text: var(--swatch-menutxt-general-color); /* Rating Module Colors */ --rating-module-button-color: var(--alt-accent); --rating-module-button-plus-color: 0, 200, 0; --rating-module-button-negative-color: 200, 0, 0; --rating-module-button-cancel-color: 200, 200, 200; --rating-module-button-credit-color: 50, 50, 50; --rating-module-text-color: var(--alt-accent); --rating-module-text-hover-color: var(--swatch-menutxt-light-color); /* Header Gradients */ --gradient-header: linear-gradient(to top, rgba(var(--header-gradient-color-bottom), 0) 0%, rgba(var(--header-gradient-color-middle), 0) 90%, rgba(var(--header-gradient-color-top), 0) 100%); --gradient-topmenu: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) var(--header-height-on-desktop), rgba(var(--swatch-topmenu-border-color), 1) var(--header-height-on-desktop), rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--header-height-on-desktop) + 0.125rem), rgba(var(--swatch-topmenu-bg-color), 0.95) calc(100% - 0.125rem), rgba(var(--swatch-topmenu-bg-color), 1) calc(100% - 0.125rem), rgba(var(--swatch-topmenu-border-color), 1) 100%); --gradient-topmenu-mobile: linear-gradient(to bottom, rgba(var(--swatch-topmenu-border-color), 1) 0, rgba(var(--swatch-topmenu-bg-color), 1) 0.125rem, rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--topbar-height-on-mobile) - 0.125rem), rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--topbar-height-on-mobile) - 0.125rem), rgba(var(--swatch-topmenu-border-color), 1) var(--topbar-height-on-mobile)); --diagonal-stripes: initial; --gradient-sidemenu-header: linear-gradient(10deg, rgba(var(--swatch-primary-darker), 0.45) 0%, rgba(var(--swatch-primary-darker), 0.55) 100%); --background-gradient-distance: 100rem; /* header measurements */ --header-height-on-desktop: 15rem; --header-height-on-mobile: 15rem; } body { background-image: var(--gradient-background); background-size: 100% var(--background-gradient-distance); } /* Palm Trees */ #extra-div-1, #extra-div-2 { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; pointer-events: none; z-index: -9999; } #extra-div-1::before, #extra-div-2::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: url("http://elusionillusion.com/scp/summerbeats-theme/img/VibinPalm.svg"); background-size: 30vw; background-repeat: no-repeat; background-position: -2vw top; transform: translateZ(-100px); } #extra-div-2 { transform: translateZ(-100px) scaleX(-1); } /* Moving Clouds */ #extra-div-3, #extra-div-4, #extra-div-5, #extra-div-6 { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; z-index: -99999; pointer-events: none; will-change: background-position-x; } #extra-div-3::before, #extra-div-4::before, #extra-div-5::before, #extra-div-6::before { content: ""; filter: blur(0.125rem); position: absolute; top: 0; left: 0; height: 100%; pointer-events: none; background-size: 100%; will-change: transform; background-position-x: 0%; background-repeat: no-repeat; transform-origin: top center; } #extra-div-3::before { width: 12.5vw; background-image: url("http://elusionillusion.com/scp/summerbeats-theme/img/VibinCloud1.png"); background-position-y: calc(var(--header-height-on-desktop) / 2); animation: aniclouds 500s infinite; } #extra-div-4::before { width: 17vw; background-image: url("http://elusionillusion.com/scp/summerbeats-theme/img/VibinCloud2.png"); background-position-y: calc(var(--header-height-on-desktop) / 8); animation: aniclouds 550s infinite; } #extra-div-5::before { width: 20vw; background-image: url("http://elusionillusion.com/scp/summerbeats-theme/img/VibinCloud3.png"); background-position-y: calc(var(--header-height-on-desktop) / 2); animation: aniclouds 425s infinite; } #extra-div-6::before { width: 15vw; background-image: url("http://elusionillusion.com/scp/summerbeats-theme/img/VibinCloud4.png"); background-position-y: calc(var(--header-height-on-desktop) / 2); animation: aniclouds 600s infinite; } @keyframes aniclouds { from { transform: translateX(-100vw); } to { transform: translateX(100vw); } } /* Water Shimmer */ #extrac-div-1 { position: absolute; z-index: -9999; pointer-events: none; top: var(--final-header-height-on-desktop); left: 0; height: calc(100vh - var(--final-header-height-on-desktop)); width: 100%; overflow: hidden; mask-image: url(http://elusionillusion.com/scp/summerbeats-theme/img/VibinShimmer.png); mask-repeat: no-repeat; mask-size: 100% 80%; mask-position: top center; will-change: transform; } #extrac-div-1::before { content: ""; width: 100%; height: 100%; position: absolute; pointer-events: none; top: 0; left: 0; will-change: transform; background-image: -webkit-repeating-linear-gradient(86deg, rgba(var(--white-monochrome), 1) 0px, rgba(var(--white-monochrome), 1) 50px, rgba(var(--white-monochrome), 0) 100px, rgba(var(--white-monochrome), 0) 130px, rgba(var(--white-monochrome), 0) 150px, rgba(var(--white-monochrome), 1) 220px, rgba(var(--white-monochrome), 0) 260px, rgba(var(--white-monochrome), 0) 330px, rgba(var(--white-monochrome), 0) 390px, rgba(var(--white-monochrome), 1) 440px, rgba(var(--white-monochrome), 0) 480px, rgba(var(--white-monochrome), 0) 550px, rgba(var(--white-monochrome), 1) 630px, rgba(var(--white-monochrome), 0) 710px, rgba(var(--white-monochrome), 0) 800px, rgba(var(--white-monochrome), 0) 880px, rgba(var(--white-monochrome), 0) 930px, rgba(var(--white-monochrome), 1) 1000px); background-image: repeating-linear-gradient(4deg, rgba(var(--white-monochrome), 1) 0px, rgba(var(--white-monochrome), 1) 50px, rgba(var(--white-monochrome), 0) 100px, rgba(var(--white-monochrome), 0) 130px, rgba(var(--white-monochrome), 0) 150px, rgba(var(--white-monochrome), 1) 220px, rgba(var(--white-monochrome), 0) 260px, rgba(var(--white-monochrome), 0) 330px, rgba(var(--white-monochrome), 0) 390px, rgba(var(--white-monochrome), 1) 440px, rgba(var(--white-monochrome), 0) 480px, rgba(var(--white-monochrome), 0) 550px, rgba(var(--white-monochrome), 1) 630px, rgba(var(--white-monochrome), 0) 710px, rgba(var(--white-monochrome), 0) 800px, rgba(var(--white-monochrome), 0) 880px, rgba(var(--white-monochrome), 0) 930px, rgba(var(--white-monochrome), 1) 1000px); background-size: 100% 10%; background-repeat: repeat; animation: anishimmer 250s cubic-bezier(0.4, 0.0, 0.2, 1) infinite; animation-direction: alternate; filter: blur(5px); } @keyframes anishimmer { from { transform: scale(1) translateX(0) translateY(0); } to { transform: scale(2) translateX(10%) translateY(-50%); } } /* Link Styling */ #page-content div.code a, #page-content div.blockquote a, #page-content blockquote a, #page-content div.code a:visited, #page-content div.blockquote a:visited, #page-content blockquote a:visited { color: rgb(var(--dark-accent)); } #page-content :not([class*=".yui-nav"]) > :not(li) > a, #login-status a:not([href="javascript:;"]), #page-content span>a { padding: 0 0; margin: 0 0; background-image: linear-gradient(105deg, transparent 0%, transparent 1em, rgb(var(--bright-accent)) 1em, rgb(var(--bright-accent)) calc((100% - 1em) / 6), rgb(var(--pale-accent)) calc(((100% - 1em) / 6) + 0.0625rem), rgb(var(--pale-accent)) calc(((100% - 1em) / 6) * 2), rgb(var(--medium-accent)) calc((((100% - 1em) / 6) * 2) + 0.0625rem), rgb(var(--medium-accent)) calc(((100% - 1em) / 6) * 3), rgb(var(--bright-accent)) calc((((100% - 1em) / 6) * 3) + 0.0625rem), rgb(var(--bright-accent)) calc(((100% - 1em) / 6) * 4), rgb(var(--pale-accent)) calc((((100% - 1em) / 6) * 4) + 0.0625rem), rgb(var(--pale-accent)) calc(((100% - 1em) / 6) * 5), rgb(var(--medium-accent)) calc((((100% - 1em) / 6) *5) + 0.0625rem), rgb(var(--medium-accent)) calc(100% - 1em), transparent calc(100% - 1em), transparent 100%); background-position: 0 0; background-size: 0% 100vh; background-repeat: no-repeat; background-clip: padding-box; background-attachment: local; background-color: rgba(0, 0, 0, 0); box-decoration-break: clone; text-shadow: rgba(0, 0, 0, 0) 0rem 0rem 0rem; will-change: text-shadow, background-size, padding; transition: margin 100ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 100ms cubic-bezier(0.4, 0.0, 0.2, 1), background-size 300ms cubic-bezier(0.4, 0.0, 0.2, 1), text-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1); } #page-content :not([class*=".yui-nav"]) > :not(li) > a:hover, #page-content :not([class*=".yui-nav"]) > :not(li) > a:active, #login-status a:not([href="javascript:;"]):hover, #login-status a:not([href="javascript:;"]):active, #page-content span>a:hover, #page-content span>a:active { text-decoration: none; padding: 0.125rem 1em; margin: -0.125rem -1em; background-size: 100% 100%; text-shadow: rgb(var(--alt-accent)) 0.125rem 0rem 0rem, rgb(var(--alt-accent)) 0.1097rem 0.0599rem 0rem, rgb(var(--alt-accent)) 0.0675rem 0.1052rem 0rem, rgb(var(--alt-accent)) 0.0088rem 0.1247rem 0rem, rgb(var(--alt-accent)) -0.052rem 0.1137rem 0rem, rgb(var(--alt-accent)) -0.1001rem 0.0748rem 0rem, rgb(var(--alt-accent)) -0.1237rem 0.0176rem 0rem, rgb(var(--alt-accent)) -0.1171rem -0.0438rem 0rem, rgb(var(--alt-accent)) -0.0817rem -0.0946rem 0rem, rgb(var(--alt-accent)) -0.0263rem -0.1222rem 0rem, rgb(var(--alt-accent)) 0.0355rem -0.1199rem 0rem, rgb(var(--alt-accent)) 0.0886rem -0.0882rem 0rem, rgb(var(--alt-accent)) 0.12rem -0.0349rem 0rem; transition: margin 600ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 600ms cubic-bezier(0.4, 0.0, 0.2, 1), background-size 500ms cubic-bezier(0.4, 0.0, 0.2, 1), text-shadow 400ms cubic-bezier(0.4, 0.0, 0.2, 1); } #page-content :not([class*=".yui-nav"]) > :not(li) > a:focus-within, #login-status a:not([href="javascript:;"]):focus-within, #page-content span>a:focus-within { text-decoration: none; box-shadow: inset calc(100% / 3) 0 0 0 rgb(var(--bright-accent)), inset calc((100% / 3) * 2) 0 0 0 rgb(var(--pale-accent)), inset 100% 0 0 0 rgb(var(--medium-accent)); text-shadow: rgb(var(--alt-accent)) 0.125rem 0rem 0rem, rgb(var(--alt-accent)) 0.1097rem 0.0599rem 0rem, rgb(var(--alt-accent)) 0.0675rem 0.1052rem 0rem, rgb(var(--alt-accent)) 0.0088rem 0.1247rem 0rem, rgb(var(--alt-accent)) -0.052rem 0.1137rem 0rem, rgb(var(--alt-accent)) -0.1001rem 0.0748rem 0rem, rgb(var(--alt-accent)) -0.1237rem 0.0176rem 0rem, rgb(var(--alt-accent)) -0.1171rem -0.0438rem 0rem, rgb(var(--alt-accent)) -0.0817rem -0.0946rem 0rem, rgb(var(--alt-accent)) -0.0263rem -0.1222rem 0rem, rgb(var(--alt-accent)) 0.0355rem -0.1199rem 0rem, rgb(var(--alt-accent)) 0.0886rem -0.0882rem 0rem, rgb(var(--alt-accent)) 0.12rem -0.0349rem 0rem; transition: box-shadow 500ms cubic-bezier(0.4, 0.0, 0.2, 1), text-shadow 400ms cubic-bezier(0.4, 0.0, 0.2, 1); } #side-bar { background-color: transparent; } #side-bar .heading, #side-bar .side-block>.collapsible-block:nth-child(1) .collapsible-block-folded { background: initial; } #side-bar .heading p, #side-bar .side-block>.collapsible-block .collapsible-block-link { color: rgb(var(--swatch-text-primary)); } #side-bar div.menu-item a, #side-bar div.menu-item .text { text-align: center; justify-content: center; align-items: center; } #header { background-image: initial; } #header h1 a::before { --text-shadow: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0); -webkit-text-stroke: unset; } #header h2 span::before { --text-shadow: rgba(0, 0, 0, 0); font-size: 2em; font-weight: 900; -webkit-text-stroke: unset; } #header::before { content: " "; position: absolute; width: 100%; height: 100%; top: 0; background-image: var(--logo-image); background-repeat: no-repeat; background-position: left 15% center; background-size: auto 12vmax; opacity: 1; } #header h1 a::after, #header h2 span::after { display: none; } #header-extra-div-1, #header-extra-div-2, #header-extra-div-3 { --mask-size: 60%; --mask-y-pos: 50%; --mask-x-pos: 56%; display: block; height: var(--header-height-on-desktop); width: 100%; top: 0; left: 0; position: absolute; pointer-events: none; } #header-extra-div-1::before, #header-extra-div-2::before, #header-extra-div-3::before { --logo-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.2' baseProfile='tiny' id='TheFoundation_x2122_' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 620 162.7' overflow='visible' xml:space='preserve'%3E%3Cg id='The'%3E%3Cpath d='M36.8,140.3c15.1-19.8,13.3-45.4,15.7-77.5c0.3-3.5-2-6.5-6-4C31.3,68,19,77.9,6.1,85.6c-1.5,0.9-2.9,2-3.5,3.8 C-8,145.5,15,99.2,26.5,102c0.9,15.6,1.5,48-18.8,54.2c-1.9,1.2-2.7,2.9-2.2,3.8C16.7,161.4,28.5,150.6,36.8,140.3z'/%3E%3Cpath d='M141.9,68c-8,2.8-14.1,27.3-26.2,19.8c11.9-8.6,17.3-19.6,15.5-24.7c-0.9-2.5-3.6-3.5-8.2-1.8c-17.3,6.5-25.3,24.7-23,35 c-9.4,7.2-2.4-14.3-5-18c-6.6-7.9-16.4,18.8-18.1,19.2c-2.1,0.7,16.7-55.9-0.5-40.9C67,69.5,59.7,70.5,59.1,74.2 c2.4,1.5,8.1-6.6,9.9-3.9c0.4,0.9-1.4,5.8-1.4,5.8c-9,25.4-15.9,37.8-17.6,46.6c4.8,6.9,18.7,0.1,20.6-1.5 c3.5-3.4,4.6-14.1,7.7-15.6c1.7,0.1,1.5,3.4,2.5,4.8c4.5,9.4,17.9-3.3,20.8-10.2c16.9,16.2,33.6-24.8,38.2-27.2 c18.2,6.5-45.6,84.6-92.5,68c-3.8-2.1-19.7,12.2-19.3,15.9c6.4,7.5,26,0.6,36.7-2.8C119.2,136,168.6,67.1,141.9,68z M114.7,86.3 c-2.6-5.8,1.3-17.8,3.6-18.7C123.6,68,118.9,81.7,114.7,86.3z'/%3E%3C/g%3E%3Cg id='Foundation'%3E%3Cpath d='M592,126.5c-4.9-3-12.5,1.7-14-1.3c19.8-13.9-3.8-14.4-14.5-18.5c-2-0.8-2.5,1.7-0.4,2.7c1.6,0.8,2.7,1.2,3.3,1.6 c3.2,5.4-17.1,7.3-21.9,8.1c-0.8-0.8,0.1-2.3,0.4-3c33.7-14.2-3.3-26.3-8.8-4c-6.1-8.7,9.6-17.3,19.2-13.9c1,0.3,1.5,0.2,1.6-0.1 c-7.3-10.9-31.4-3.9-39.4,2.3c-5.1,1.5-15.2,4.4-14.3-2c2-3.8,13.6-8.3,17.9-10c3.7-2.7-6.7-7.6-8.4-9.3c-5.6-1.8-20,5.3-28.9,11.5 c-29.4,2.6,19.8-20,20-18.6c2.2,0.2,7.5,1.8,9.8,2.4c0.6,0.1,3.3-1.5,4.4-2.4c0-0.9-6.4-1.7-6.8-2.9c0.3-0.6,2.1-1.4,6-3.5 c0.6-0.3,1.1-0.8,1.4-1.3c1-2-7.4-7.1-9-7.8c-5.8-1.5-9.7,3.1-18.7,6c-37.2-11.7-58.7-36-7.8-39.4c2.4-1.1-8.5-9.8-15-13 c-8.7-4.3-18,2.8-23.7,11.9c-9.9,14.3,18.4,34.6,42.9,41.9C486,64,463.1,71.4,451,78.4c-2.6,1.1-7.6,1.2-7.2-1.8 c2-5.2,15.1-11.2,17.4-13.5c0.4-1.5-5.3-3.8-10.1-5c-2.1-1.7-19.1,14-21.1,5.8c1.8-6.7,15.5-9.3,22.4-7.5c1.7,0.4,3-0.2,3.2-1 c-14.3-10.8-42.8,1.8-49.5,9.3c-2.8,1.8-8.1,1.6-7.7-1.8c0.6-7.3,22.9-25.8,35.8-33.8c2.7-1.9,7.7-4.6,7.9-6.6 c0.3-3.4-8.8-4.1-13.1-4.4c-9.2-1.4-24.3,18.5-28.1,21.9c-21-1.4-37.2,9.8-42.6,19.4c-12,2.5,8.6-17.6-6-17.5 c-5.6-0.2-9.9,5.4-12.9,5.3c-1.4-1.4,9.3-13.4-2.1-14.1c-7.8-0.2-12.3,3.4-19.5,3.3c-0.8,0-1.3,0.5-1.3,1c-0.2,2.2,5.1,1.4,5.8,1.5 c5.5,4.6-17.5,16.5-19.1,18.5c-8.6-2.6,12.7-20.6,11.4-20.9c0.1-1.2-8.4-1.9-10.9-2.2c-5.5,0.2-11.6,10.2-18.8,18 c-2.9,2-5.4,4.2-5.9,1.1c0-4.5,12-12.9,11.9-16.9c-2.2-10.3-18.4,0.7-24.9-0.2c-0.8,0-1.3,0.5-1.3,1.1c0.4,3.2,6.9-0.5,7.1,2.1 c0,3.4-8.8,11.5-13.8,18.3c-1.9,1.3-2.7-0.9-2.7-2.4c20.8-30.2-17.2-19.9-9.6,1.6c-10-3.5-1.1-19.8,8.6-22c2.9-0.7,0.4-2.4-1.5-2.2 c-35.9,6-43.8,62.2-2.3,29.2c1.5,0.6,3.4,0.6,5,0.1c-2,4.5-0.3,6.6,7,6.5c7.4-0.2,16-7.7,16.7-7.7c-1.1,13.1,17.7,7.2,24.8,1.6 c13.5,14.4,21.2-1.5,31.3-5.4c1.7,1.5-1,5.6-0.7,8c0.2,9.4,16.3,4.1,21.7,0.1c-0.4,4,2,7,7.6,7.4c9.3,0.6,14.1-5.2,15.2-5.1 c-2.4,11.7,15.7,9,22.4,4c-2.8,13,19.4,7.4,21,5.9c-1.2,10.2,13.6,10.4,21,7.3c-0.1,10.4,27.4,10.6,37.1,9.1 c-7.5,14.7,24.7,13.7,32.9,10.1c-11.4,13.8,14.9,18,23.6,15.1c0.6,0.9,1.5,1.7,2.7,2.2c-1.3,3.3,3.1,11.1,7.2,13.2 c6.5,4.3,18.8-3.2,23.2-1.5c0.9,3.4-9.4,4.9-15.5,9.7c-37.8-4.7-66.2-1.7-87.3-38.4c-2.8-1-20-4.2-22.8-1 c0.6,13.3,13.2,25.1,22.9,30.1c22.8,11.8,55.8,7.8,84.2,11.7c-4.9,4.8-6.5,10.3,2.7,15.1c13.8,8.1,42.5-3.6,21.7-11.5 C580.9,143.3,604.1,134.1,592,126.5z M398,42.8c-3.5,5.1-8.8,10.4-11.8,15.3c0,0-1.4,1-3,0.9C372.5,56.8,391.4,38.4,398,42.8z M579.1,152.9c8.3,6.2-10.4,6.5-4.8-2.2C575.9,151.3,577.5,152.1,579.1,152.9z'/%3E%3Cpath d='M524.6,83.8c8.7,4.4,23.7,1.2,28.7-8.4c7.7-19.8-27.3-20.5-33.6-5.5C517,75.1,518.7,80.8,524.6,83.8z'/%3E%3Cpath d='M232.7,37.2c-0.4-3.8-2.4-2-5.9-1.5c-2.5-1.2,11.3-25.8,9.3-33.9c-0.6-3.3-4.8-1.5-6.6-0.7c-13.7,6.2-33.2,13.7-45.8,18.4 c-3.1,1.1-5.2,2.7-6.1,3.9c-1.5,2.8-8.6,14.3-8.7,17.7c0.6,4.4,15.7-2.8,28.3-4.5c1.8-0.4,2.3,0.6,2.4,1.3c0.1,0.7-0.9,7.5-2.7,7.9 c-3.7,1.5-22.7,3.8-21.9,7.8c0.4,2,3.1,1.4,3.5,1.4c4.2-0.8,14.9-3.1,15.6-3.2c1-0.2,1.1,0.6,0.9,1.1c-5.3,12.9-13.9,27.5-26.4,30 c-2.4,0.5-8.3,0-8.2,3.2c24.8,10.5,60.1-27.6,61.2-40.9c0.3-0.1,8.7-2.8,9.4-3.1C232.5,41.4,232.9,38.6,232.7,37.2z'/%3E%3C/g%3E%3C/svg%3E%0A"); content: ""; display: block; position: absolute; pointer-events: none; top: 0; left: 0; width: 100%; height: 100%; mask-image: var(--logo-mask-image); mask-repeat: no-repeat; mask-size: var(--mask-size); } #header-extra-div-1::before { background-image: radial-gradient(circle at 90%, rgb(var(--alt-accent)) 0%, rgb(var(--bright-accent)) 50%); background-size: 100%; background-repeat: no-repeat; z-index: 1; mask-size: var(--mask-size); mask-position: var(--mask-x-pos) var(--mask-y-pos); } #header-extra-div-2::before { background: rgb(var(--alt-accent)); mask-size: calc(var(--mask-size) + 0.125rem); mask-position: calc(var(--mask-x-pos) + 0.0625rem) calc(var(--mask-y-pos) + 0.125rem); } #header-extra-div-3::before { background: rgb(var(--alt-accent)); mask-size: calc(var(--mask-size) + 0.25rem); mask-position: calc(var(--mask-x-pos) - 0.0625rem) calc(var(--mask-y-pos) + 0.1875rem); } #header-extra-div-1::after { --tm-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='TheFoundation_x2122_' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 620 162.7' overflow='visible' xml:space='preserve'%3E%3Cpath id='_x2122_' d='M603.1,120.7c-9.6,8.8,4.4,23.6,13.7,14.6C626.5,126.5,612.5,111.7,603.1,120.7z M605.4,132.7l0-7.6l-1.3,0 l0-1.5l4.2,0l0,1.5l-1.3,0l0,7.6L605.4,132.7z M615.1,132.7l-1.3,0l-0.1-6.1l0,0l-1,6.1l-1,0l-1.1-6.1l0,0l0.1,6.1l-1.4,0l-0.1-9.1 l2.2,0l0.8,5.1l0,0l0.9-5.1l2.1,0L615.1,132.7z'/%3E%3C/svg%3E%0A"); content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(var(--alt-accent)); mask-image: var(--tm-mask-image); mask-size: var(--mask-size); mask-position: var(--mask-x-pos) var(--mask-y-pos); mask-repeat: no-repeat; } #login-status { display: flex; flex-direction: row; flex-wrap: nowrap; height: 2rem; top: 0; position: absolute; overflow: visible; font-size: 0.8435rem; color: rgb(var(--swatch-menutxt-light-color)); text-shadow: initial; filter: drop-shadow(0.125rem 0.125rem 0 rgb(var(--green-accent))); transition: transform 50ms cubic-bezier(0.4, 0.0, 0.2, 1), filter 350ms cubic-bezier(0.4, 0.0, 0.2, 1); align-items: center; justify-content: center; transform: translateY(-2rem); } #login-status::before { content: ""; background: rgb(var(--alt-accent)); position: absolute; width: 100%; height: 2rem; top: 0; left: 0; z-index: -1; filter: drop-shadow(0 0 0 rgb(var(--bright-accent))); transition: top 300ms cubic-bezier(0.4, 0.0, 0.2, 1), filter 400ms cubic-bezier(0.4, 0.0, 0.2, 1); } #login-status::after { content: "LOYAL â–² CLIENT"; background-color: rgb(var(--alt-accent)); position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 11rem; height: 1.5rem; bottom: -2.3125rem; top: 2rem; left: 50%; transform: translateX(-50%); color: rgb(var(--swatch-background)); transition: transform 200ms cubic-bezier(0.4, 0.0, 0.2, 1); } #login-status:hover, #login-status:active { transform: translateY(0); filter: drop-shadow(0.25rem 0.25rem 0 rgb(var(--green-accent))); } #login-status:focus-within { transform: translateY(0); filter: drop-shadow(0.25rem 0.25rem 0 rgb(var(--green-accent))); } #login-status:hover::before, #login-status:active::before { top: 0; filter: drop-shadow(0.25rem 0.25rem 0 rgb(var(--bright-accent))); } #login-status:focus-within::before { top: 0; filter: drop-shadow(0.25rem 0.25rem 0 rgb(var(--bright-accent))); } #login-status:hover::after, #login-status:active::after { transform: translateX(-50%) translateY(-10rem); } #login-status:focus-within::after { transform: translateX(-50%) translateY(-10rem); } #login-status .printuser { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; font-family: var(--header-font); font-size: 1.75em; line-height: 0.75; font-weight: initial !important; color: rgb(var(--swatch-menutxt-dark-color)); } #login-status .printuser a { position: relative; filter: drop-shadow(0 0 0 rgb(var(--swatch-primary))); transition: filter 500ms cubic-bezier(0.4, 0.0, 0.2, 1); } #login-status:hover .printuser a, #login-status:active .printuser a { filter: drop-shadow(0.125rem 0.125rem 0 rgb(var(--swatch-primary))); } #login-status:focus-within .printuser a { filter: drop-shadow(0.125rem 0.125rem 0 rgb(var(--swatch-primary))); } #login-status #my-account { display: flex; height: 100%; line-height: 2rem; align-items: center; justify-content: center; color: rgb(var(--swatch-menutxt-dark-color)); text-transform: uppercase; font-family: var(--title-font); } #account-options { background-image: initial; background-color: rgb(var(--alt-accent)); top: calc(var(--base-font-size) * 2 + 0.0625rem); padding: initial; border: none; } #account-options::after { content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(var(--bright-accent)); filter: drop-shadow(0.25rem 0.25rem 0 rgb(var(--bright-accent))); } #account-options ul { background-color: rgb(var(--alt-accent)); padding: 0.5em; } #account-options ul li a, #account-options ul li a:hover, #account-options ul li a:active { color: rgb(var(--swatch-menutxt-dark-color)); text-decoration: none; } #top-bar { text-transform: uppercase; font-family: var(--title-font); font-weight: 900; } #search-top-box, #search-top-box * { box-sizing: padding-box; } #search-top-box { --search-height: 2rem; display: flex; background: rgb(var(--alt-accent)); overflow: visible; top: 0; font-size: 0.8435rem; color: rgb(var(--swatch-menutxt-light-color)); filter: drop-shadow(0.125rem 0.125rem 0 rgb(var(--green-accent))); transform: translateY(-2rem); transition: transform 50ms cubic-bezier(0.4, 0.0, 0.2, 1), filter 350ms cubic-bezier(0.4, 0.0, 0.2, 1); } #search-top-box > form { width: var(--search-width); } #search-top-box > form::before { content: ""; background: rgb(var(--alt-accent)); position: absolute; width: 100%; height: 2rem; top: 0; left: 0; z-index: -1; filter: drop-shadow(0 0 0 rgb(var(--bright-accent))); transition: top 300ms cubic-bezier(0.4, 0.0, 0.2, 1), filter 400ms cubic-bezier(0.4, 0.0, 0.2, 1); } #search-top-box > form::after { content: "FIND â–² PRODUCT"; background-color: rgb(var(--alt-accent)); position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 11rem; height: 1.5rem; top: 2rem; left: 50%; transform: translateX(-50%); color: rgb(var(--swatch-background)); transition: transform 200ms cubic-bezier(0.4, 0.0, 0.2, 1); } #search-top-box:hover, #search-top-box:active { transform: translateY(0); filter: drop-shadow(0.25rem 0.25rem 0 rgb(var(--green-accent))); } #search-top-box:focus-within { transform: translateY(0); filter: drop-shadow(0.25rem 0.25rem 0 rgb(var(--green-accent))); } #search-top-box:hover > form::before, #search-top-box:active > form::before { top: 0; filter: drop-shadow(0.25rem 0.25rem 0 rgb(var(--bright-accent))); } #search-top-box:focus-within > form::before { top: 0; filter: drop-shadow(0.25rem 0.25rem 0 rgb(var(--bright-accent))); } #search-top-box:hover > form::after, #search-top-box:active > form::after { transform: translateX(-50%) translateY(-10rem); } #search-top-box:focus-within > form::after { transform: translateX(-50%) translateY(-10rem); } #search-top-box-form>input, #search-top-box-form>input:hover, #search-top-box-form>input:focus, #search-top-box-form>input:focus-within { background-color: rgb(var(--medium-accent)); font-family: var(--mono-font); color: rgb(var(--swatch-menutxt-light-color)); box-shadow: 0 0 0 0.125rem rgb(var(--bright-accent)); } #search-top-box-form input[type="submit"] { background-color: rgb(var(--bright-accent)); box-shadow: 0 0 0 0.125rem rgb(var(--bright-accent)); border-color: rgb(var(--bright-accent)); } #top-bar div[class*="top-bar"]>ul>li:hover, #top-bar div[class*="top-bar"]>ul>li:active { background-color: transparent; } #top-bar div[class*="top-bar"]>ul>li:focus-within { background-color: transparent; } #top-bar div[class*="top-bar"]>ul>li>a { color: rgb(var(--swatch-important-text)); font-weight: 600; font-family: var(--body-font); font-size: var(--base-font-size); will-change: color, text-shadow, left, top; transition: color 60ms cubic-bezier(0.4, 0.0, 0.2, 1), text-shadow 140ms cubic-bezier(0.4, 0.0, 0.2, 1), left 200ms cubic-bezier(0.4, 0.0, 0.2, 1), top 200ms cubic-bezier(0.4, 0.0, 0.2, 1); } #top-bar div[class*="top-bar"]>ul>li:hover>a, #top-bar div[class*="top-bar"]>ul>li:active>a { text-shadow: 0.125rem 0.125rem 0 rgb(var(--swatch-primary)), 0.25rem 0.25rem 0 rgb(var(--green-accent)); color: rgb(var(--swatch-menutxt-light-color)); font-weight: 900; transition: color 120ms cubic-bezier(0.4, 0.0, 0.2, 1), text-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1), left 400ms cubic-bezier(0.4, 0.0, 0.2, 1), top 400ms cubic-bezier(0.4, 0.0, 0.2, 1); } #top-bar div[class*="top-bar"]>ul>li:focus-within>a { text-shadow: 0.125rem 0.125rem 0 rgb(var(--swatch-primary)), 0.25rem 0.25rem 0 rgb(var(--green-accent)); color: rgb(var(--swatch-menutxt-light-color)); font-weight: 900; transition: color 120ms cubic-bezier(0.4, 0.0, 0.2, 1), text-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1), left 400ms cubic-bezier(0.4, 0.0, 0.2, 1), top 400ms cubic-bezier(0.4, 0.0, 0.2, 1); } #top-bar div[class*="top-bar"]>ul>li>a:after, #top-bar div[class*="top-bar"]>ul>li>a:before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; content: " "; } #top-bar div[class*="top-bar"]>ul>li>a:after { display: none; } #top-bar div[class*="top-bar"]>ul>li>a:before { background-color: rgba(0, 0, 0, 0); background-image: linear-gradient(105deg, rgb(var(--bright-accent)) 0%, rgb(var(--bright-accent)) calc((100% + (1em - 0.0625rem))/3), rgb(var(--pale-accent)) calc((100% + 1em)/3), rgb(var(--pale-accent)) calc((100%/3)*2), rgb(var(--medium-accent)) calc(((100% + 0.0625rem)/3)*2), rgb(var(--medium-accent)) 100%, transparent 100%, transparent 100%); background-size: 0%; background-repeat: no-repeat; will-change: background-size; mask: linear-gradient(105deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(1em - 0.0625rem), rgba(0, 0, 0, 1) 1em, rgba(0, 0, 0, 1) calc(100% - 0.5em), rgba(0, 0, 0, 0) calc(100% - (0.5em + 0.0625rem)), rgba(0, 0, 0, 0) 100%); transition: background-size 300ms cubic-bezier(0.4, 0.0, 0.2, 1); } #top-bar div[class*="top-bar"]>ul>li:hover>a:before, #top-bar div[class*="top-bar"]>ul>li:active>a:before { background-size: 100%; transition: background-size 500ms cubic-bezier(0.4, 0.0, 0.2, 1); } #top-bar div[class*="top-bar"]>ul>li:focus-within>a:before { background-size: 100%; transition: background-size 500ms cubic-bezier(0.4, 0.0, 0.2, 1); } #top-bar div[class*="top-bar"]>ul>li>ul { --transition-timing: 100ms; --speedy-transition-timing: 50ms; backdrop-filter: none; width: 100%; box-shadow: initial; background-color: transparent; border: none; opacity: 1; visibility: visible; pointer-events: none; backdrop-filter: none; transition: box-shadow var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1); } #top-bar div.top-bar>ul>li:not(:first-of-type):not(:last-of-type)>ul { left: 50%; transform: translateX(-50%); } #top-bar div[class*="top-bar"]>ul>li:hover>ul, #top-bar div[class*="top-bar"]>ul>li:active>ul { pointer-events: all; box-shadow: inset 0 0.125rem 0 0 rgb(var(--swatch-menubg-light-color)), inset 0 0.5625rem 0 0 rgb(var(--swatch-menubg-medium-color)), inset 0 0.6875rem 0 0 rgb(var(--swatch-menubg-medium-dark-color)); padding-top: 0.6875rem; border-top-left-radius: 0, 0.25rem; border-top-right-radius: 0, 0.25rem; backdrop-filter: none; transition: box-shadow var(--transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1); } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul { pointer-events: all; box-shadow: inset 0 0.125rem 0 0 rgb(var(--swatch-menubg-light-color)), inset 0 0.5625rem 0 0 rgb(var(--swatch-menubg-medium-color)), inset 0 0.6875rem 0 0 rgb(var(--swatch-menubg-medium-dark-color)); padding-top: 0.6875rem; border-top-left-radius: 0, 0.25rem; border-top-right-radius: 0, 0.25rem; backdrop-filter: none; transition: box-shadow var(--transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1); } #top-bar div[class*="top-bar"]>ul>li>ul>li { color: rgb(var(--swatch-menutxt-light-color)); background-color: rgb(var(--swatch-menubg-black-color)); text-align: center; margin: 0; flex-basis: 100%; white-space: normal; } #top-bar div[class*="top-bar"]>ul>li>ul>li>a, #top-bar div[class*="top-bar"]>ul>li>ul>li>a:hover, #top-bar div[class*="top-bar"]>ul>li>ul>li>a:active { --wght: calc(var(--ui-wght) + 200); } #top-bar div[class*="top-bar"]>ul>li>ul>li>a { white-space: normal; font-size: 0.8em; line-height: 1; padding: 1em 0.25em; } #top-bar div[class*="top-bar"]>ul>li>ul>li:nth-child(even)>a { background: rgba(var(--swatch-menubg-light-color), 1); } #top-bar div[class*="top-bar"]>ul>li>ul>li:nth-child(odd)>a { background: rgba(var(--swatch-menubg-light-color), 0.9); } #top-bar div[class*="top-bar"]>ul>li>ul>li:nth-child(odd) { position: relative; transform-origin: top left; transform: perspective(27.45em) rotateX(-90deg) skew(0); } #top-bar div[class*="top-bar"]>ul>li>ul>li:nth-child(even) { position: relative; transform-origin: top right; transform: perspective(27.45em) rotateX(-90deg) skew(0) translateX(0em); } #top-bar div[class*="top-bar"]>ul>li>ul>li::after, #top-bar div[class*="top-bar"]>ul>li>ul:hover>li::after, #top-bar div[class*="top-bar"]>ul>li>ul:active>li::after { content: " "; width: 0.625rem; height: 100%; position: absolute; z-index: -1; filter: blur(0.0625rem); } #top-bar div[class*="top-bar"]>ul>li>ul:focus-within>li::after { content: " "; width: 1rem; height: 100%; position: absolute; z-index: -1; filter: blur(0.0625rem); } #top-bar div[class*="top-bar"]>ul>li>ul>li:nth-child(odd)::after, #top-bar div[class*="top-bar"]>ul>li>ul:hover>li:nth-child(odd)::after, #top-bar div[class*="top-bar"]>ul>li>ul:active>li:nth-child(odd)::after { bottom: 0.0625rem; right: 0; transform-origin: top left; background-image: linear-gradient(to bottom, rgba(var(--swatch-menubg-black-color), 0) 0%, rgba(var(--swatch-menubg-black-color), 0) 40%, rgba(var(--swatch-menubg-black-color), 0.25) 70%, rgba(var(--swatch-menubg-black-color), 1) 100%); transform: skew(-12deg) translateX(0.5em); } #top-bar div[class*="top-bar"]>ul>li>ul:focus-within>li:nth-child(odd)::after { bottom: 0.0625rem; right: 0; transform-origin: top left; background-image: linear-gradient(to bottom, rgba(var(--swatch-menubg-black-color), 0) 0%, rgba(var(--swatch-menubg-black-color), 0) 40%, rgba(var(--swatch-menubg-black-color), 0.25) 70%, rgba(var(--swatch-menubg-black-color), 1) 100%); transform: skew(-12deg) translateX(0.5em); } #top-bar div[class*="top-bar"]>ul>li>ul>li:nth-child(even)::after, #top-bar div[class*="top-bar"]>ul>li>ul:hover>li:nth-child(even)::after, #top-bar div[class*="top-bar"]>ul>li>ul:active>li:nth-child(even)::after { top: 0.0625rem; right: 0; transform-origin: top left; background-image: linear-gradient(to top, rgba(var(--swatch-menubg-black-color), 0) 0%, rgba(var(--swatch-menubg-black-color), 0) 40%, rgba(var(--swatch-menubg-black-color), 0.25) 70%, rgba(var(--swatch-menubg-black-color), 1) 100%); transform: skew(12deg); } #top-bar div[class*="top-bar"]>ul>li>ul:focus-within>li:nth-child(even)::after { top: 0.0625rem; right: 0; transform-origin: top left; background-image: linear-gradient(to top, rgba(var(--swatch-menubg-black-color), 0) 0%, rgba(var(--swatch-menubg-black-color), 0) 40%, rgba(var(--swatch-menubg-black-color), 0.25) 70%, rgba(var(--swatch-menubg-black-color), 1) 100%); transform: skew(12deg); } #top-bar div[class*="top-bar"]>ul>li:hover>ul>li, #top-bar div[class*="top-bar"]>ul>li:active>ul>li { transition: var(--transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0s; } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul>li { transition: var(--transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0s; } #top-bar div[class*="top-bar"]>ul>li:hover>ul>li:nth-child(odd), #top-bar div[class*="top-bar"]>ul>li:active>ul>li:nth-child(odd) { transform: perspective(27.45em) rotateX(0deg) skew(10deg); } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul>li:nth-child(odd) { transform: perspective(27.45em) rotateX(0deg) skew(10deg); } #top-bar div[class*="top-bar"]>ul>li:hover>ul>li:nth-child(even), #top-bar div[class*="top-bar"]>ul>li:active>ul>li:nth-child(even) { transform: perspective(27.45em) rotateX(0deg) skew(-10deg) translateX(0.4375em); } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul>li:nth-child(even) { transform: perspective(27.45em) rotateX(0deg) skew(-10deg) translateX(0.4375em); } /* Brute Force Timing on Dropdown Will Need to be manually changed if dropdown # is altered */ /* SCP Series */ #top-bar div[class*="top-bar"]>ul>li:nth-of-type(1)>ul, #top-bar div[class*="top-bar"]>ul>li:nth-of-type(1)>ul>li:nth-of-type(1) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 10); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(1)>ul>li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 9); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(1)>ul>li:nth-of-type(3) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 8); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(1)>ul>li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 7); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(1)>ul>li:nth-of-type(5) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 6); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(1)>ul>li:nth-of-type(6) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 5); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(1)>ul>li:nth-of-type(7) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 4); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(1)>ul>li:nth-of-type(8) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 3); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(1)>ul>li:nth-of-type(9) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 2); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(1)>ul>li:nth-of-type(10) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(1)>ul>li:nth-of-type(11) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* Tales */ #top-bar div[class*="top-bar"]>ul>li:nth-of-type(2)>ul, #top-bar div[class*="top-bar"]>ul>li:nth-of-type(2)>ul>li:nth-of-type(1) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 3); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(2)>ul>li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 2); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(2)>ul>li:nth-of-type(3) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(2)>ul>li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* Library */ #top-bar div[class*="top-bar"]>ul>li:nth-of-type(3)>ul, #top-bar div[class*="top-bar"]>ul>li:nth-of-type(3)>ul>li:nth-of-type(1) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 8); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(3)>ul>li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 7); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(3)>ul>li:nth-of-type(3) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 6); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(3)>ul>li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 5); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(3)>ul>li:nth-of-type(5) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 4); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(3)>ul>li:nth-of-type(6) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 3); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(3)>ul>li:nth-of-type(7) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 2); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(3)>ul>li:nth-of-type(8) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(3)>ul>li:nth-of-type(9) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* Universe */ #top-bar div[class*="top-bar"]>ul>li:nth-of-type(4)>ul, #top-bar div[class*="top-bar"]>ul>li:nth-of-type(4)>ul>li:nth-of-type(1) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 4); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(4)>ul>li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 3); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(4)>ul>li:nth-of-type(3) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 2); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(4)>ul>li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(4)>ul>li:nth-of-type(5) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* SCP Global */ #top-bar div[class*="top-bar"]>ul>li:nth-of-type(5)>ul, #top-bar div[class*="top-bar"]>ul>li:nth-of-type(5)>ul>li:nth-of-type(1) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 14); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(5)>ul>li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 13); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(5)>ul>li:nth-of-type(3) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 12); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(5)>ul>li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 11); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(5)>ul>li:nth-of-type(5) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 10); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(5)>ul>li:nth-of-type(6) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 9); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(5)>ul>li:nth-of-type(7) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 8); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(5)>ul>li:nth-of-type(8) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 7); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(5)>ul>li:nth-of-type(9) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 6); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(5)>ul>li:nth-of-type(10) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 5); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(5)>ul>li:nth-of-type(11) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 4); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(5)>ul>li:nth-of-type(12) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 3); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(5)>ul>li:nth-of-type(13) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 2); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(5)>ul>li:nth-of-type(14) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(5)>ul>li:nth-of-type(15) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* Background */ #top-bar div[class*="top-bar"]>ul>li:nth-of-type(6)>ul, #top-bar div[class*="top-bar"]>ul>li:nth-of-type(6)>ul>li:nth-of-type(1) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 5); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(6)>ul>li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 4); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(6)>ul>li:nth-of-type(3) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 3); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(6)>ul>li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 2); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(6)>ul>li:nth-of-type(5) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(6)>ul>li:nth-of-type(6) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* Info Pages */ #top-bar div[class*="top-bar"]>ul>li:nth-of-type(7)>ul, #top-bar div[class*="top-bar"]>ul>li:nth-of-type(7)>ul>li:nth-of-type(1) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 11); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(7)>ul>li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 10); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(7)>ul>li:nth-of-type(3) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 9); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(7)>ul>li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 8); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(7)>ul>li:nth-of-type(5) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 7); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(7)>ul>li:nth-of-type(6) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 6); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(7)>ul>li:nth-of-type(7) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 5); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(7)>ul>li:nth-of-type(8) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 4); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(7)>ul>li:nth-of-type(9) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 3); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(7)>ul>li:nth-of-type(10) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 2); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(7)>ul>li:nth-of-type(11) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div[class*="top-bar"]>ul>li:nth-of-type(7)>ul>li:nth-of-type(12) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* Hover Dropdowns do not need the same treatment */ #top-bar div[class*="top-bar"]>ul>li:hover>ul, #top-bar div[class*="top-bar"]>ul>li:active>ul, #top-bar div[class*="top-bar"]>ul>li:hover>ul>li:nth-of-type(1), #top-bar div[class*="top-bar"]>ul>li:active>ul>li:nth-of-type(1) { transition-delay: 0ms; } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul, #top-bar div[class*="top-bar"]>ul>li:focus-within>ul>li:nth-of-type(1) { transition-delay: 0ms; } #top-bar div[class*="top-bar"]>ul>li:hover>ul>li:nth-of-type(2), #top-bar div[class*="top-bar"]>ul>li:active>ul>li:nth-of-type(2) { transition-delay: calc(var(--transition-timing) * 0.3 * 3); } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul>li:nth-of-type(2) { transition-delay: calc(var(--transition-timing) * 0.3 * 3); } #top-bar div[class*="top-bar"]>ul>li:hover>ul>li:nth-of-type(3), #top-bar div[class*="top-bar"]>ul>li:active>ul>li:nth-of-type(3) { transition-delay: calc(var(--transition-timing) * 0.59 * 3); } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul>li:nth-of-type(3) { transition-delay: calc(var(--transition-timing) * 0.59 * 3); } #top-bar div[class*="top-bar"]>ul>li:hover>ul>li:nth-of-type(4), #top-bar div[class*="top-bar"]>ul>li:active>ul>li:nth-of-type(4) { transition-delay: calc(var(--transition-timing) * 0.87 * 3); } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul>li:nth-of-type(4) { transition-delay: calc(var(--transition-timing) * 0.87 * 3); } #top-bar div[class*="top-bar"]>ul>li:hover>ul>li:nth-of-type(5), #top-bar div[class*="top-bar"]>ul>li:active>ul>li:nth-of-type(5) { transition-delay: calc(var(--transition-timing) * 1.14 * 3); } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul>li:nth-of-type(5) { transition-delay: calc(var(--transition-timing) * 1.14 * 3); } #top-bar div[class*="top-bar"]>ul>li:hover>ul>li:nth-of-type(6), #top-bar div[class*="top-bar"]>ul>li:active>ul>li:nth-of-type(6) { transition-delay: calc(var(--transition-timing) * 1.4 * 3); } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul>li:nth-of-type(6) { transition-delay: calc(var(--transition-timing) * 1.4 * 3); } #top-bar div[class*="top-bar"]>ul>li:hover>ul>li:nth-of-type(7), #top-bar div[class*="top-bar"]>ul>li:active>ul>li:nth-of-type(7) { transition-delay: calc(var(--transition-timing) * 1.65 * 3); } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul>li:nth-of-type(7) { transition-delay: calc(var(--transition-timing) * 1.65 * 3); } #top-bar div[class*="top-bar"]>ul>li:hover>ul>li:nth-of-type(8), #top-bar div[class*="top-bar"]>ul>li:active>ul>li:nth-of-type(8) { transition-delay: calc(var(--transition-timing) * 1.89 * 3); } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul>li:nth-of-type(8) { transition-delay: calc(var(--transition-timing) * 1.89 * 3); } #top-bar div[class*="top-bar"]>ul>li:hover>ul>li:nth-of-type(9), #top-bar div[class*="top-bar"]>ul>li:active>ul>li:nth-of-type(9) { transition-delay: calc(var(--transition-timing) * 2.12 * 3); } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul>li:nth-of-type(9) { transition-delay: calc(var(--transition-timing) * 2.12 * 3); } #top-bar div[class*="top-bar"]>ul>li:hover>ul>li:nth-of-type(10), #top-bar div[class*="top-bar"]>ul>li:active>ul>li:nth-of-type(10) { transition-delay: calc(var(--transition-timing) * 2.34 * 3); } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul>li:nth-of-type(10) { transition-delay: calc(var(--transition-timing) * 2.34 * 3); } #top-bar div[class*="top-bar"]>ul>li:hover>ul>li:nth-of-type(11), #top-bar div[class*="top-bar"]>ul>li:active>ul>li:nth-of-type(11) { transition-delay: calc(var(--transition-timing) * 2.55 * 3); } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul>li:nth-of-type(11) { transition-delay: calc(var(--transition-timing) * 2.55 * 3); } #top-bar div[class*="top-bar"]>ul>li:hover>ul>li:nth-of-type(12), #top-bar div[class*="top-bar"]>ul>li:active>ul>li:nth-of-type(12) { transition-delay: calc(var(--transition-timing) * 2.75 * 3); } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul>li:nth-of-type(12) { transition-delay: calc(var(--transition-timing) * 2.75 * 3); } #top-bar div[class*="top-bar"]>ul>li:hover>ul>li:nth-of-type(13), #top-bar div[class*="top-bar"]>ul>li:active>ul>li:nth-of-type(13) { transition-delay: calc(var(--transition-timing) * 2.94 * 3); } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul>li:nth-of-type(13) { transition-delay: calc(var(--transition-timing) * 2.94 * 3); } #top-bar div[class*="top-bar"]>ul>li:hover>ul>li:nth-of-type(14), #top-bar div[class*="top-bar"]>ul>li:active>ul>li:nth-of-type(14) { transition-delay: calc(var(--transition-timing) * 3.12 * 3); } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul>li:nth-of-type(14) { transition-delay: calc(var(--transition-timing) * 3.12 * 3); } #top-bar div[class*="top-bar"]>ul>li:hover>ul>li:nth-of-type(15), #top-bar div[class*="top-bar"]>ul>li:active>ul>li:nth-of-type(15) { transition-delay: calc(var(--transition-timing) * 3.29 * 3); } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul>li:nth-of-type(15) { transition-delay: calc(var(--transition-timing) * 3.29 * 3); } #top-bar div[class*="top-bar"]>ul>li:hover>ul>li:nth-of-type(16), #top-bar div[class*="top-bar"]>ul>li:active>ul>li:nth-of-type(16) { transition-delay: calc(var(--transition-timing) * 3.45 * 3); } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul>li:nth-of-type(16) { transition-delay: calc(var(--transition-timing) * 3.45 * 3); } #top-bar div[class*="top-bar"]>ul>li:hover>ul>li:nth-of-type(17), #top-bar div[class*="top-bar"]>ul>li:active>ul>li:nth-of-type(17) { transition-delay: calc(var(--transition-timing) * 3.6 * 3); } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul>li:nth-of-type(17) { transition-delay: calc(var(--transition-timing) * 3.6 * 3); } #top-bar div[class*="top-bar"]>ul>li:hover>ul>li:nth-of-type(18), #top-bar div[class*="top-bar"]>ul>li:active>ul>li:nth-of-type(18) { transition-delay: calc(var(--transition-timing) * 3.74 * 3); } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul>li:nth-of-type(18) { transition-delay: calc(var(--transition-timing) * 3.74 * 3); } #top-bar div[class*="top-bar"]>ul>li:hover>ul>li:nth-of-type(19), #top-bar div[class*="top-bar"]>ul>li:active>ul>li:nth-of-type(19) { transition-delay: calc(var(--transition-timing) * 3.87 * 3); } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul>li:nth-of-type(19) { transition-delay: calc(var(--transition-timing) * 3.87 * 3); } #top-bar div[class*="top-bar"]>ul>li:hover>ul>li:nth-of-type(20), #top-bar div[class*="top-bar"]>ul>li:active>ul>li:nth-of-type(20) { transition-delay: calc(var(--transition-timing) * 3.99 * 3); } #top-bar div[class*="top-bar"]>ul>li:focus-within>ul>li:nth-of-type(20) { transition-delay: calc(var(--transition-timing) * 3.99 * 3); } #top-bar div[class*="top-bar"]>ul>li>ul>li:last-of-type { border-radius: 0rem 0rem 0.25rem 0.25rem; } .code pre [class*="hl-"] { filter: invert(1) hue-rotate(180deg); } .code, blockquote, .blockquote, div.blockquote, div[class*="blockquote"] { box-shadow: -0.0625rem -0.0625rem 0 rgb(var(--swatch-primary-darker)), -0.125rem -0.125rem 0 rgb(var(--swatch-primary-darker)), -0.1875rem -0.1875rem 0 rgb(var(--swatch-primary-darker)), -0.25rem -0.25rem 0 rgb(var(--alt-accent)), -0.3125rem -0.3125rem 0 rgb(var(--alt-accent)), -0.375rem -0.375rem 0 rgb(var(--alt-accent)), -0.4375rem -0.4375rem 0 rgb(var(--swatch-primary-darkest)), -0.5rem -0.5rem 0 rgb(var(--swatch-primary-darkest)), 0 0.0625rem 0.3125rem rgba(0, 0, 0, 0.25), 0 0 1.5625rem rgba(0, 0, 0, 0.1) inset; position: relative; overflow: visible; top: 0.3125rem; left: 0.625rem; } .code::before, blockquote::before, .blockquote::before, div.blockquote::before, div[class*="blockquote"]::before, .yui-navset::after, table.wiki-content-table::before { content: ""; position: absolute; z-index: -1; background-color: rgb(var(--swatch-primary-darkest)); width: 100%; height: 20%; left: 0%; top: 90%; border: 0.0625rem solid #000; filter: blur(10px); pointer-events: none; transform-style: preserve-3d; transform: perspective(4cm) rotateX(-15deg); transform-origin: 100% 50%; opacity: 0.3; clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); } .yui-navset .yui-content::before { left: 0.5em; width: calc(100% - 1em); left: initial; right: 0; border-bottom-right-radius: 10em; } .yui-navset::after { width: min(30vw, 20em); opacity: 0.1; z-index: -2; } table.wiki-content-table::before { width: 100%; clip-path: polygon(0% 50%, 90% 50%, 90% 39%, 90% 31%, 90% 24%, 90% 10%, 90% 4%, 90% 2%, 87% 2%, 78% 2%, 59% 3%, 39% 3%, 27% 3%, 14% 2%, 6% 3%, 2% 4%, 1% 14%, 1% 27%, 1% 38%) } .monitor-tab .yui-navset { display: grid; width: 100%; grid-template-areas: ". content content content" "tabs-col content content content" ". content content content"; grid-template-columns: min(25vw, 10em) 1fr; grid-template-rows: 1em 1fr 1em; position: relative; background: linear-gradient(25deg, rgba(var(--white-monochrome), 0.1) 0%, rgba(var(--white-monochrome), 0.1) 5%, rgba(var(--white-monochrome), 0.2) calc(5% + 0.0625rem), rgba(var(--white-monochrome), 0.2) 10%, rgba(var(--white-monochrome), 0.1) calc(10% + 0.0625rem), rgba(var(--white-monochrome), 0.1) 12%, rgba(var(--white-monochrome), 0.2) calc(12% + 0.0625rem), rgba(var(--white-monochrome), 0.2) 15%, rgba(var(--white-monochrome), 0.1) calc(15% + 0.0625rem), rgba(var(--white-monochrome), 0.1) 100%); border-radius: max(1vw, 1em); padding-left: min(0.75em, 0.75vw); box-shadow: inset 0.25rem 0.25rem 0 0 rgba(var(--white-monochrome), 0.15), inset 0.0625rem 0.125rem 0 0 rgba(var(--white-monochrome), 0.5); } .monitor-tab .yui-navset, .monitor-tab .yui-navset * { box-sizing: border-box; } .monitor-tab .yui-navset .yui-nav { grid-area: tabs-col; flex-direction: column; justify-content: flex-start; flex-wrap: nowrap; position: sticky; top: calc(var(--topbar-height-on-mobile) + 1em); height: min-content; box-shadow: initial; } .monitor-tab .yui-navset .yui-content { position: relative; grid-area: content; padding: max(1.5vw, 1.5em) max(3vw, 3em) max(6vw, 6em); box-sizing: content-box; display: grid; background-color: rgba(var(--swatch-menubg-black-color), 0.8); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 0.125rem, rgba(var(--white-monochrome), 0.05) 0.125rem, rgba(var(--white-monochrome), 0.05) 0.25rem); grid-template-rows: 1fr; grid-template-columns: 1fr; border-width: 0; box-shadow: inset max(1vw, 1em) max(1vw, 1em) 0 0 rgb(var(--swatch-tertiary-color)), inset calc(-1 * max(1vw, 1em)) max(1vw, 1em) 0 0 rgb(var(--swatch-tertiary-color)), inset max(1vw, 1em) calc(-1 * max(4vw, 4em)) 0 0 rgb(var(--swatch-tertiary-color)), inset calc(-1 * max(1vw, 1em)) calc(-1 * max(4vw, 4em)) 0 0 rgb(var(--swatch-tertiary-color)), inset max(1vw, 1em) max(1vw, 1em) max(2vw, 2em) max(1vw, 1em) rgba(var(--swatch-menubg-black-color), 0.25), inset max(1.75vw, 1.75em) max(1.75vw, 1.75em) 0 0 rgba(var(--swatch-secondary-color)), inset calc(-1 * max(1.75vw, 1.75em)) max(1.75vw, 1.75em) 0 0 rgba(var(--swatch-secondary-color)), inset max(1.75vw, 1.75em) calc(-1 * max(5.75vw, 5.75em)) 0 0 rgb(var(--swatch-secondary-color)), inset calc(-1 * max(1.75vw, 1.75em)) calc(-1 * max(5.75vw, 5.75em)) 0 0 rgb(var(--swatch-secondary-color)), inset 0 0 max(3vw, 3em) max(1vw, 1em) rgb(var(--swatch-menubg-black-color)); border-radius: max(1vw, 1em); font-family: var(--mono-font); } /* Terminal Decoration Pseudo Elements */ .monitor-tab .yui-navset .yui-content::before { content: " "; position: absolute; pointer-events: none; top: 0; left: calc(-1 * max(4.5vw, 4.5em)); width: max(5vw, 5em); height: 100%; background-color: rgb(var(--swatch-tertiary-color), 0.75); z-index: -1; box-shadow: inset calc(-1 * max(3vw, 3em)) 0 0 0 rgba(var(--swatch-tertiary-color)0.75); border-bottom-right-radius: 0; border-top-right-radius: 0; border-radius: max(1vw, 1em); transform: perspective(20rem) rotateY(-50deg); transform-origin: right center; clip-path: polygon(0px 0px, 100% 0, 100% 100%, 0px 100%); } .monitor-tab .yui-navset::before { content: " "; position: absolute; pointer-events: none; z-index: 9999; bottom: max(1.5vw, 1.5em); right: max(2vw, 2em); width: max(0.75vw, 0.75em); height: max(0.75vw, 0.75em); border-radius: 50%; background-image: radial-gradient(rgba(var(--green-accent), 1) 0%, rgba(var(--green-accent), 0.5) 70%, rgba(var(--green-accent), 0.25) 100%); background-size: max(3vw, 3em) max(3vw, 3em); background-repeat: no-repeat; background-position: left calc(-1 * max(0.5vw, 0.5em)) top 0rem; box-shadow: 0 0 max(1vw, 1em) max(0.5vw, 0.5em) rgba(var(--green-accent), 0.25); } .monitor-tab .yui-navset .yui-content::after { content: "FNDX-10"; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) translateY(max(-0.25vw, -0.25em)); width: 10vw; height: max(2.875vw, 2.875em); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-family: 'impetus-inline'; color: transparent; border-radius: 0.25em; background-image: linear-gradient(105deg, rgb(var(--bright-accent)) 0, rgb(var(--bright-accent)) calc(100% / 6), rgb(var(--medium-accent)) calc((100% / 6) + 0.0625rem), rgb(var(--medium-accent)) calc((100% / 6) * 2), rgb(var(--green-accent)) calc(((100% / 6) * 2) + 0.0625rem), rgb(var(--green-accent)) calc((100% / 6) * 3), rgb(var(--bright-accent)) calc(((100% / 6) * 3) + 0.0625rem), rgb(var(--bright-accent)) calc((100% / 6) * 4), rgb(var(--pale-accent)) calc(((100% / 6) * 4) + 0.0625rem), rgb(var(--pale-accent)) calc((100% / 6) * 5), rgb(var(--green-accent)) calc(((100% / 6) *5) + 0.0625rem), rgb(var(--green-accent)) 100%); background-repeat: repeat; background-size: cover; text-shadow: -0.0625rem 0.0625rem rgba(var(--white-monochrome), 0.1), 0.0625rem -0.0625rem rgba(var(--black-monochrome), 0.1); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -moz-background-clip: text; } .monitor-tab yui-navset .yui-content { display: grid; } .monitor-tab .yui-navset .yui-content>div { width: 100%; grid-column: 1; grid-row: 1; } .monitor-tab .yui-navset .yui-content>div[style*="none"] { display: block !important; transform-origin: top; transform: scaleY(0); opacity: 0; transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1), max-height 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); } .monitor-tab .yui-navset .yui-content>div[style*="block"] { transform: scaleY(1); opacity: 1; } .monitor-tab .yui-navset .yui-nav li, .monitor-tab .yui-navset .yui-navset-top .yui-nav li, .monitor-tab .yui-navset .yui-nav .selected, .monitor-tab .yui-navset .yui-navset-top .yui-nav .selected { background-color: rgb(0, 0, 0, 0) !important; flex-grow: 0; margin: 0 min(0.5rem, 0.5vw) 0.75rem 0; border: none; box-shadow: initial; } .monitor-tab .yui-navset .yui-nav .selected, .monitor-tab .yui-navset .yui-navset-top .yui-nav .selected { background-color: rgb(0, 0, 0, 0) !important; z-index: 9999; } .monitor-tab .yui-navset .yui-nav li a { --mono-font: dico-mono, Consolas, monaco, monospace; position: relative; top: 0; border-radius: min(0.5em, 0.5vw); box-shadow: inset 0.125rem 0.125rem rgba(var(--white-monochrome), 1), 0 0em rgb(var(--swatch-secondary-color)), 0 0.1em rgb(var(--swatch-secondary-color)), -0.05em 0.2em rgb(var(--swatch-secondary-color)), -0.1em 0.3em rgb(var(--swatch-secondary-color)), -0.15em 0.4em rgb(var(--swatch-secondary-color)), -0.2em 0.5em rgb(var(--swatch-secondary-color)), -0.25em 0.6em rgb(var(--swatch-secondary-color)), 0 0.1em rgb(var(--swatch-secondary-color)), -0.05em 0.2em rgb(var(--swatch-secondary-color)), -0.1em 0.3em rgb(var(--swatch-secondary-color)), -0.15em 0.4em rgb(var(--swatch-secondary-color)), -0.2em 0.5em rgb(var(--swatch-secondary-color)), -0.25em 0.6em rgb(var(--swatch-secondary-color)), 0 0.9em rgba(var(--black-monochrome), 0.4); text-align: right; justify-content: flex-end; padding: 0; margin: 0; width: 100%; height: 100%; border: none; background-color: rgb(var(--alt-accent)); font-family: var(--mono-font); font-size: 0.9em; text-shadow: rgba(0, 0, 0, 0) 0rem 0rem 0rem; will-change: text-shadow, background-size, padding; transition: background-color 100ms cubic-bezier(0.4, 0.0, 0.2, 1), background-size 100ms cubic-bezier(0.4, 0.0, 0.2, 1), text-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1), top 300ms ease-in-out, box-shadow 300ms ease-in-out; } .monitor-tab .yui-navset .yui-nav li a:hover, .monitor-tab .yui-navset .yui-nav .selected a { top: 0.2em; box-shadow: inset 0.125rem 0.125rem rgba(var(--white-monochrome), 0.5), 0 0em rgb(var(--swatch-secondary-color)), 0 0.1em rgb(var(--swatch-secondary-color)), -0.05em 0.2em rgb(var(--swatch-secondary-color)), -0.1em 0.3em rgb(var(--swatch-secondary-color)), -0.15em 0.4em rgb(var(--swatch-secondary-color)), -0.15em 0.4em rgb(var(--swatch-secondary-color)), -0.15em 0.4em rgb(var(--swatch-secondary-color)), 0 0.1em rgb(var(--swatch-secondary-color)), -0.05em 0.2em rgb(var(--swatch-secondary-color)), -0.1em 0.3em rgb(var(--swatch-secondary-color)), -0.15em 0.4em rgb(var(--swatch-secondary-color)), -0.15em 0.4em rgb(var(--swatch-secondary-color)), -0.15em 0.4em rgb(var(--swatch-secondary-color)), 0 0.7em rgba(var(--black-monochrome), 0.4); } .monitor-tab .yui-navset .yui-nav li a:active { top: 0.4em; box-shadow: inset 0.125rem 0.125rem rgba(var(--white-monochrome), 0.5), 0 0em rgb(var(--swatch-secondary-color)), 0 0.1em rgb(var(--swatch-secondary-color)), -0.05em 0.2em rgb(var(--swatch-secondary-color)), -0.05em 0.2em rgb(var(--swatch-secondary-color)), -0.05em 0.2em rgb(var(--swatch-secondary-color)), -0.05em 0.2em rgb(var(--swatch-secondary-color)), -0.05em 0.2em rgb(var(--swatch-secondary-color)), 0 0.1em rgb(var(--swatch-secondary-color)), -0.05em 0.2em rgb(var(--swatch-secondary-color)), -0.05em 0.2em rgb(var(--swatch-secondary-color)), -0.05em 0.2em rgb(var(--swatch-secondary-color)), -0.05em 0.2em rgb(var(--swatch-secondary-color)), -0.05em 0.2em rgb(var(--swatch-secondary-color)), 0 0.5em rgba(var(--black-monochrome), 0.4); } .monitor-tab .yui-navset .yui-nav li a:hover, .monitor-tab .yui-navset .yui-nav li a:active, .monitor-tab .yui-navset .yui-nav li a:focus, .monitor-tab .yui-navset .yui-nav .selected a, .monitor-tab .yui-navset .yui-nav .selected a:hover, .monitor-tab .yui-navset .yui-nav .selected a:active, .monitor-tab .yui-navset .yui-nav .selected a:focus { background-color: rgb(var(--alt-accent)); text-decoration: none; transition: background-color 100ms cubic-bezier(0.4, 0.0, 0.2, 1), background-size 300ms cubic-bezier(0.4, 0.0, 0.2, 1), text-shadow 400ms cubic-bezier(0.4, 0.0, 0.2, 1), top 300ms ease-in-out; } .monitor-tab .yui-navset .yui-nav li:focus-within a, .monitor-tab .yui-navset .yui-nav .selected:focus-within a { background-color: rgb(var(--alt-accent)); text-decoration: none; transition: background-color 100ms cubic-bezier(0.4, 0.0, 0.2, 1), background-size 300ms cubic-bezier(0.4, 0.0, 0.2, 1), text-shadow 400ms cubic-bezier(0.4, 0.0, 0.2, 1), top 300ms ease-in-out,; } .yui-navset .yui-nav a::before { display: none; } .monitor-tab .yui-navset .yui-nav a em, .monitor-tab .yui-navset .yui-navset-top .yui-nav a em { color: rgb(var(--swatch-menutxt-dark-color)) !important; font-weight: 900; line-height: 1.1; word-break: normal; overflow-wrap: normal; white-space: pre-line; } .monitor-tab .yui-navset .yui-nav .selected a{ animation: glowing-button-1 5000ms infinite; } .monitor-tab .yui-navset .yui-nav .selected a em { animation: glowing-button-2 5000ms infinite; mix-blend-mode:color-dodge; width: 100%; justify-content: flex-end; } @keyframes glowing-button-1 { 0% { background-color: rgb(var(--alt-accent),0.95); } 20% { background-color: rgb(var(--alt-accent),0.9); } 50% { background-color: rgb(var(--alt-accent),0.85); } 780% { background-color: rgb(var(--alt-accent),0.7); } 100% { background-color: rgb(var(--alt-accent),0.95); } } @keyframes glowing-button-2 { 0% { color: rgb(var(--black-monochrome),0.5); text-shadow: 0 0 0.25em rgba(var(--alt-accent),0.15); background-color: rgba(var(--white-monochrome),0.1); box-shadow: inset 0 0 0.25em rgba(var(--alt-accent),0.15); } 20% { color: rgb(var(--black-monochrome),0.8); text-shadow: 0 0 0.5em rgba(var(--alt-accent),0.15); background-color: rgba(var(--white-monochrome),0.2); box-shadow: inset 0 0 0.5em rgba(var(--alt-accent),0.15); } 50% { color: rgb(var(--black-monochrome),1); text-shadow: 0 0 0.5em rgba(var(--alt-accent),0.15); background-color: rgba(var(--white-monochrome),0.6); box-shadow: inset 0 0 1em rgba(var(--alt-accent),0.05); } 75% { color: rgb(var(--black-monochrome),0.9); text-shadow: 0 0 0.35em rgba(var(--alt-accent),0.1); background-color: rgba(var(--white-monochrome),0.3); box-shadow: inset 0 0 0.35em rgba(var(--alt-accent),0.1); } 100% { color: rgb(var(--black-monochrome),0.5); text-shadow: 0 0 0.25em rgba(var(--alt-accent),0.15); background-color: rgba(var(--white-monochrome),0.1); box-shadow: inset 0 0 0.25em rgba(var(--alt-accent),0.15); } } /* Mobile Tabs Layout */ @media only screen and (max-width: 768px) { .monitor-tab .yui-navset { display: grid; grid-template-areas: ". tabs-col ." "content content content"; grid-template-columns: min(3vw, 1em) 1fr min(3vw, 1em); grid-template-rows: auto 1fr; } .monitor-tab .yui-navset .yui-nav { grid-area: tabs-col; flex-direction: row; justify-content: space-between; flex-wrap: wrap; position: relative; top: 0; padding: min(3vw, 1em) 0; height: min-content; width: 100%; } .monitor-tab .yui-navset .yui-nav li { flex-grow: 2; } .monitor-tab .yui-navset .yui-nav li:last-of-type { flex-grow: 0; } .monitor-tab .yui-navset .yui-nav li a { text-align: center; align-items: center; justify-content: center; } } /* Table Styling */ table.wiki-content-table { --paper-lines-height: 1.5em; font-size: clamp(0.65625rem, 1vw, var(--base-font-size)); position: relative; width: 100%; background-color: rgb(var(--white-monochrome)); background-image: linear-gradient(to bottom, rgba(var(--white-monochrome), 1) 0, rgba(var(--white-monochrome), 1) 100%), repeating-linear-gradient(to bottom, rgba(var(--medium-accent), 0.5) 0, rgba(var(--medium-accent), 0.5) 0.0625rem, rgba(var(--white-monochrome), 0.5) 0.125rem, rgba(var(--white-monochrome), 0.5) calc(var(--paper-lines-height) + 0.03125rem)); background-size: 100% 3em, 100% 100%; background-position-y: 0em, 0rem; background-repeat: no-repeat, repeat; padding: 0 min(2em, 2vw) var(--paper-lines-height) min(3em, 3vw); margin: 1em 0 0 0; border-collapse: separate; border-radius: 2% 1% 2% 1%/1% 1% 1% 1%; } table.wiki-content-table, table.wiki-content-table * { box-sizing: border-box; } table.wiki-content-table tbody { position: relative; box-shadow: -0.125rem 0 0 0 rgba(var(--bright-accent), 0.25), 0.125rem 0 0 0 rgba(var(--bright-accent), 0.25); } table.wiki-content-table tbody::after { content: " "; position: absolute; bottom: calc(-1 * var(--paper-lines-height)); width: 100%; height: var(--paper-lines-height); box-shadow: -0.125rem 0 0 0 rgba(var(--bright-accent), 0.25), 0.125rem 0 0 0 rgba(var(--bright-accent), 0.25); } table.wiki-content-table tr:first-of-type { background-color: rgba(0, 0, 0, 0) !important; height: calc(3em + 0.0625rem); font-family: var(--mono-font); } table.wiki-content-table tr, table.wiki-content-table tr th, table.wiki-content-table tr td { position: relative; border: none !important; box-shadow: initial; min-height: calc(var(--paper-lines-height) - 0.25rem); color: rgb(var(--swatch-text-dark)); padding: 0 0.5em; margin: 0; vertical-align: baseline; } table.wiki-content-table tr:first-of-type th { background-color: rgba(0, 0, 0, 0); font-size: clamp(1.15em, 1vw, 1.25em); line-height: 1em; vertical-align: middle; } table.wiki-content-table tr:not(:first-of-type) td::before{ content: ""; border-bottom: 0.09375rem solid rgba(var(--swatch-text-dark),0.5) !important; display: block; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0) scale(0.99) rotate(0.5deg); border-radius: 0 1% 2% 1%/0 1% 1% 1%; } table.wiki-content-table tr:not(:first-of-type) td:not(:first-of-type)::before { border-left: 0.09375rem solid rgba(var(--swatch-text-dark),0.5) !important; transform: translate3d(-50%, -50%, 0) scale(1.01) rotate(-0.5deg); } table.wiki-content-table tr:not(:first-of-type) td:nth-of-type(5n + 2)::before { transform: translate3d(-50%, -50%, 0) scale(1.005) rotate(-0.15deg); } table.wiki-content-table tr:not(:first-of-type) td:nth-of-type(3n)::before { transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.43deg); } table.wiki-content-table tr td { --mono-font: dito-mono, Consolas, monaco, monospace; line-height: calc(var(--paper-lines-height) + 0.03125rem); height: calc(var(--paper-lines-height) - 0.5rem); font-family: var(--mono-font); border-bottom: 0.09375rem solid rgba(var(--swatch-text-dark),0.5) !important; border-radius: 0 2% 3% 4% / 0 1% 2% 1%; } table.wiki-content-table tr td:not(:first-of-type) { border-left: 0.09375rem solid rgba(var(--swatch-text-dark),0.5) !important; } @media only screen and (max-width: 56.25rem) { /* Header Styling */ #header-extra-div-1, #header-extra-div-2, #header-extra-div-3 { --mask-size: 80%; } #header::before { background-image: var(--logo-image); background-repeat: no-repeat; background-position: center center; background-size: auto calc(var(--header-height-on-desktop) - 4rem); } #header h2 span::before { color: rgb(var(--medium-accent)); text-shadow: rgb(var(--alt-accent)) 0.125rem 0rem 0rem, rgb(var(--alt-accent)) 0.1097rem 0.0599rem 0rem, rgb(var(--alt-accent)) 0.0675rem 0.1052rem 0rem, rgb(var(--alt-accent)) 0.0088rem 0.1247rem 0rem, rgb(var(--alt-accent)) -0.052rem 0.1137rem 0rem, rgb(var(--alt-accent)) -0.1001rem 0.0748rem 0rem, rgb(var(--alt-accent)) -0.1237rem 0.0176rem 0rem, rgb(var(--alt-accent)) -0.1171rem -0.0438rem 0rem, rgb(var(--alt-accent)) -0.0817rem -0.0946rem 0rem, rgb(var(--alt-accent)) -0.0263rem -0.1222rem 0rem, rgb(var(--alt-accent)) 0.0355rem -0.1199rem 0rem, rgb(var(--alt-accent)) 0.0886rem -0.0882rem 0rem, rgb(var(--alt-accent)) 0.12rem -0.0349rem 0rem !important; } /* Palm Trees */ #extra-div-1, #extra-div-2 { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; pointer-events: none; } #extra-div-1::before, #extra-div-2::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: url("http://elusionillusion.com/scp/summerbeats-theme/img/VibinPalm.svg"); background-size: 70vw; background-repeat: no-repeat; background-position: -5vw top; transform: translateZ(-100px); } #extra-div-2 { transform: translateZ(-100px) scaleX(-1); } } @media only screen and (max-width: 48rem) { /*Login box styling */ #login-status, #login-status::before { left: initial; right: initial; width: 100%; } #login-status::after { left: 3%; bottom: -2.3125rem; max-width: 45vw; } /* Search box styling */ #search-top-box-input { display: flex; min-width: calc(var(--base-font-size)*0.93333*11.4); } #search-top-box { height: initial; width: 100%; top: -3rem; padding: 0.5rem 0; align-items: center; justify-content: center; transition: top 50ms cubic-bezier(0.4, 0.0, 0.2, 1), filter 350ms cubic-bezier(0.4, 0.0, 0.2, 1); } #search-top-box:hover, #search-top-box:active, #search-top-box:focus-within { background: rgb(var(--alt-accent)); padding: 0.5rem 0; box-shadow: initial; } #search-top-box:hover~#login-status, #search-top-box:active~#login-status, #search-top-box:focus-within~#login-status { opacity: 0; visibility: 0; } #search-top-box::after { right: 3%; left: initial; bottom: -1.6875rem; max-width: 45vw; } #search-top-box:hover::before, #search-top-box:active::before { top: 0; right: inherit; left: 0; z-index: -1; mask-image: inherit; background-color: rgb(var(--alt-accent)); width: 100%; height: 100%; filter: drop-shadow(0.25rem 0.25rem 0 rgb(var(--bright-accent))); } #search-top-box:not(:focus-within)::before, #search-top-box:focus-within::before { top: 0; right: inherit; left: 0; z-index: -1; mask-image: inherit; background-color: rgb(var(--alt-accent)); width: 100%; height: 100%; filter: drop-shadow(0.25rem 0.25rem 0 rgb(var(--bright-accent))); } #search-top-box form[id="search-top-box-form"] { position: relative; height: initial; visibility: visible; width: 90%; display: flex; align-items: center; justify-content: center; } #search-top-box form[id="search-top-box-form"]::after { content: ""; position: absolute; width: calc(var(--base-font-size)*0.93333*1.5 + .5rem); height: 100%; top: 0; right: 0; pointer-events: none; background-color: rgb(var(--swatch-menutxt-light-color)); mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='search' class='svg-inline--fa fa-search fa-w-16' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E"); mask-position: 50%; mask-size: 75%; mask-repeat: no-repeat; } #search-top-box form[id="search-top-box-form"] input { height: initial; top: initial; transform: initial; position: initial; appearance: initial; } #search-top-box form[id="search-top-box-form"]:focus-within input[type="text"]:hover, #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"]:hover, #search-top-box form[id="search-top-box-form"]:hover input[type="text"], #search-top-box form[id="search-top-box-form"] input[type="text"] { background: rgb(var(--medium-accent)); transition: inherit; color: rgb(var(--swatch-menutxt-light-color)); border-radius: var(--border-radius-width); } #search-top-box form[id="search-top-box-form"] input[type="text"], #search-top-box form[id="search-top-box-form"]:focus-within input[type="text"], #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { height: initial; width: 100%; position: inherit; transform: inherit; border-width: 0.0625rem; cursor: inherit; color: rgb(var(--swatch-menutxt-light-color)); } #search-top-box form[id="search-top-box-form"] input[type="submit"], #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"], #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"], #search-top-box form[id="search-top-box-form"] input[type="submit"]:hover, #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"]:hover, #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"]:hover { appearance: auto; position: relative; background-color: rgb(var(--bright-accent)); background-image: initial; opacity: 1; width: calc(var(--base-font-size)*0.93333*1.5 + .5rem); box-shadow: 0 0 0 0.125rem rgb(var(--bright-accent)); border: none; border-left: 0.0625rem solid rgb(var(--swatch-primary-darkest)); border-color: rgb(var(--bright-accent)); padding: 0.25rem; margin: inherit; font-size: calc(var(--base-font-size)*0.93333*0.85); border-radius: var(--border-radius-width); transition: background-color .3s cubic-bezier(.4, 0, .2, 1), color .3s cubic-bezier(.4, 0, .2, 1); color: transparent; text-shadow: initial; } #search-top-box-input { background-color: rgba(var(--dark-accent)); } /* Mobile Topbar Styling */ #top-bar .mobile-top-bar { background-image: var(--gradient-background); background-attachment: fixed; background-position: 0 0; background-size: 100vw 300vh; } #top-bar>div.mobile-top-bar>div.open-menu>p>a { color: rgb(var(--swatch-important-text)) !important; } #top-bar div.mobile-top-bar>ul>li>ul { max-width: calc(100vw - (var(--topbar-height-on-mobile) * 1.5)); min-width: calc(100vw - (var(--topbar-height-on-mobile) * 1.5)); transform: translate(calc((-50% - (var(--topbar-height-on-mobile) * 1.5) / 8))); } #top-bar div.mobile-top-bar>ul>li:hover>ul, #top-bar div.mobile-top-bar>ul>li:active>ul { transform: translate(calc((-50% - (var(--topbar-height-on-mobile) * 1.5) / 8))); } #top-bar div.mobile-top-bar>ul>li:focus-within>ul { transform: translate(calc((-50% - (var(--topbar-height-on-mobile) * 1.5) / 8))); } #top-bar div.mobile-top-bar>ul>li>ul>li { --transition-timing: 100ms; --speedy-transition-timing: 200ms; color: rgb(var(--swatch-menutxt-light-color)); background-color: rgb(var(--swatch-menubg-black-color)); text-align: center; margin: 0; } #top-bar div.mobile-top-bar>ul>li>ul>li:nth-child(4n)>a, #top-bar div.mobile-top-bar>ul>li>ul>li:nth-child(4n-1)>a { background: rgba(var(--swatch-menubg-light-color), 1); } #top-bar div.mobile-top-bar>ul>li>ul>li:nth-child(4n-2)>a, #top-bar div.mobile-top-bar>ul>li>ul>li:nth-child(4n-3)>a { background: rgba(var(--swatch-menubg-light-color), 0.9); } #top-bar div.mobile-top-bar>ul>li>ul>li:nth-child(4n), #top-bar div.mobile-top-bar>ul>li>ul>li:nth-child(4n-1) { position: relative; transform-origin: top left; transform: perspective(350px) rotateX(-90deg) skew(0); } #top-bar div.mobile-top-bar>ul>li>ul>li:nth-child(4n-2), #top-bar div.mobile-top-bar>ul>li>ul>li:nth-child(4n-3) { position: relative; transform-origin: top right; transform: perspective(350px) rotateX(-90deg) skew(0) translateX(0.4375rem); } #top-bar div.mobile-top-bar>ul>li>ul>li::after, #top-bar div.mobile-top-bar>ul>li>ul:hover>li::after, #top-bar div.mobile-top-bar>ul>li>ul:active>li::after { content: " "; width: 50%; height: 90%; position: absolute; bottom: 0; right: 0; z-index: -1; filter: blur(0.0625rem); } #top-bar div.mobile-top-bar>ul>li>ul:focus-within>li::after { content: " "; width: 50%; height: 90%; position: absolute; bottom: 0; right: 0; z-index: -1; filter: blur(0.0625rem); } #top-bar div.mobile-top-bar>ul>li>ul>li:nth-child(4n)::after, #top-bar div.mobile-top-bar>ul>li>ul:hover>li:nth-child(4n)::after, #top-bar div.mobile-top-bar>ul>li>ul:active>li:nth-child(4n)::after { transform-origin: top left; background-image: linear-gradient(to bottom, rgba(var(--swatch-menubg-black-color), 0) 0%, rgba(var(--swatch-menubg-black-color), 0) 20%, rgba(var(--swatch-menubg-black-color), 0.5) 50%, rgba(var(--swatch-menubg-black-color), 1) 100%); transform: skew(-15deg) translateX(0.5rem); } #top-bar div.mobile-top-bar>ul>li>ul:focus-within>li:nth-child(4n)::after { transform-origin: top left; background-image: linear-gradient(to bottom, rgba(var(--swatch-menubg-black-color), 0) 0%, rgba(var(--swatch-menubg-black-color), 0) 20%, rgba(var(--swatch-menubg-black-color), 0.5) 50%, rgba(var(--swatch-menubg-black-color), 1) 100%); transform: skew(-15deg) translateX(0.5rem); } #top-bar div.mobile-top-bar>ul>li>ul>li:nth-child(4n-2)::after, #top-bar div.mobile-top-bar>ul>li>ul:hover>li:nth-child(4n-2)::after, #top-bar div.mobile-top-bar>ul>li>ul:active>li:nth-child(4n-2)::after { transform-origin: top left; background-image: linear-gradient(to top, rgba(var(--swatch-menubg-black-color), 0) 0%, rgba(var(--swatch-menubg-black-color), 0) 40%, rgba(var(--swatch-menubg-black-color), 0.5) 70%, rgba(var(--swatch-menubg-black-color), 1) 100%); transform: skew(15deg); } #top-bar div.mobile-top-bar>ul>li>ul:focus-within>li:nth-child(4n-2)::after { transform-origin: top left; background-image: linear-gradient(to top, rgba(var(--swatch-menubg-black-color), 0) 0%, rgba(var(--swatch-menubg-black-color), 0) 40%, rgba(var(--swatch-menubg-black-color), 0.5) 70%, rgba(var(--swatch-menubg-black-color), 1) 100%); transform: skew(15deg); } #top-bar div.mobile-top-bar>ul>li:hover>ul>li, #top-bar div.mobile-top-bar>ul>li:active>ul>li { transition: var(--transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0s; } #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li { transition: var(--transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0s; } #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-child(4n), #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-child(4n-1), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-child(4n), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-child(4n-1) { transform: perspective(350px) rotateX(0deg) skew(10deg); } #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-child(4n), #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-child(4n-1) { transform: perspective(350px) rotateX(0deg) skew(10deg); } #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-child(4n-2), #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-child(4n-3), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-child(4n-2), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-child(4n-3) { transform: perspective(350px) rotateX(0deg) skew(-10deg) translateX(0.5rem); } #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-child(4n-2), #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-child(4n-3) { transform: perspective(350px) rotateX(0deg) skew(-10deg) translateX(0.5rem); } /* Brute Force Timing on Mobile Dropdown Will Need to be manually changed if dropdown # is altered */ /* SCPS */ #top-bar div.mobile-top-bar>ul>li:nth-of-type(1)>ul, #top-bar div.mobile-top-bar>ul>li:nth-of-type(1)>ul>li:nth-of-type(1), #top-bar div.mobile-top-bar>ul>li:nth-of-type(1)>ul>li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 5); } #top-bar div.mobile-top-bar>ul>li:nth-of-type(1)>ul>li:nth-of-type(3), #top-bar div.mobile-top-bar>ul>li:nth-of-type(1)>ul>li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 4); } #top-bar div.mobile-top-bar>ul>li:nth-of-type(1)>ul>li:nth-of-type(5), #top-bar div.mobile-top-bar>ul>li:nth-of-type(1)>ul>li:nth-of-type(6) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 3); } #top-bar div.mobile-top-bar>ul>li:nth-of-type(1)>ul>li:nth-of-type(7), #top-bar div.mobile-top-bar>ul>li:nth-of-type(1)>ul>li:nth-of-type(8) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 2); } #top-bar div.mobile-top-bar>ul>li:nth-of-type(1)>ul>li:nth-of-type(8), #top-bar div.mobile-top-bar>ul>li:nth-of-type(1)>ul>li:nth-of-type(10) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div.mobile-top-bar>ul>li:nth-of-type(1)>ul>li:nth-of-type(11), #top-bar div.mobile-top-bar>ul>li:nth-of-type(1)>ul>li:nth-of-type(12) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* Tales */ #top-bar div.mobile-top-bar>ul>li:nth-of-type(2)>ul, #top-bar div.mobile-top-bar>ul>li:nth-of-type(2)>ul>li:nth-of-type(1), #top-bar div.mobile-top-bar>ul>li:nth-of-type(2)>ul>li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div.mobile-top-bar>ul>li:nth-of-type(2)>ul>li:nth-of-type(3), #top-bar div.mobile-top-bar>ul>li:nth-of-type(2)>ul>li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* Library */ #top-bar div.mobile-top-bar>ul>li:nth-of-type(3)>ul, #top-bar div.mobile-top-bar>ul>li:nth-of-type(3)>ul>li:nth-of-type(1), #top-bar div.mobile-top-bar>ul>li:nth-of-type(3)>ul>li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 4); } #top-bar div.mobile-top-bar>ul>li:nth-of-type(3)>ul>li:nth-of-type(3), #top-bar div.mobile-top-bar>ul>li:nth-of-type(3)>ul>li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 3); } #top-bar div.mobile-top-bar>ul>li:nth-of-type(3)>ul>li:nth-of-type(5), #top-bar div.mobile-top-bar>ul>li:nth-of-type(3)>ul>li:nth-of-type(6) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 2); } #top-bar div.mobile-top-bar>ul>li:nth-of-type(3)>ul>li:nth-of-type(7), #top-bar div.mobile-top-bar>ul>li:nth-of-type(3)>ul>li:nth-of-type(8) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div.mobile-top-bar>ul>li:nth-of-type(3)>ul>li:nth-of-type(9), #top-bar div.mobile-top-bar>ul>li:nth-of-type(3)>ul>li:nth-of-type(10) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* Universe */ #top-bar div.mobile-top-bar>ul>li:nth-of-type(4)>ul, #top-bar div.mobile-top-bar>ul>li:nth-of-type(4)>ul>li:nth-of-type(1), #top-bar div.mobile-top-bar>ul>li:nth-of-type(4)>ul>li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 4); } #top-bar div.mobile-top-bar>ul>li:nth-of-type(4)>ul>li:nth-of-type(3), #top-bar div.mobile-top-bar>ul>li:nth-of-type(4)>ul>li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 3); } #top-bar div.mobile-top-bar>ul>li:nth-of-type(4)>ul>li:nth-of-type(5), #top-bar div.mobile-top-bar>ul>li:nth-of-type(4)>ul>li:nth-of-type(6) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 2); } #top-bar div.mobile-top-bar>ul>li:nth-of-type(4)>ul>li:nth-of-type(7), #top-bar div.mobile-top-bar>ul>li:nth-of-type(4)>ul>li:nth-of-type(8) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div.mobile-top-bar>ul>li:nth-of-type(4)>ul>li:nth-of-type(9), #top-bar div.mobile-top-bar>ul>li:nth-of-type(4)>ul>li:nth-of-type(10) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* GUIDES */ #top-bar div.mobile-top-bar>ul>li:nth-of-type(5)>ul, #top-bar div.mobile-top-bar>ul>li:nth-of-type(5)>ul>li:nth-of-type(1), #top-bar div.mobile-top-bar>ul>li:nth-of-type(5)>ul>li:nth-of-type(2) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 5); } #top-bar div.mobile-top-bar>ul>li:nth-of-type(5)>ul>li:nth-of-type(3), #top-bar div.mobile-top-bar>ul>li:nth-of-type(5)>ul>li:nth-of-type(4) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 4); } #top-bar div.mobile-top-bar>ul>li:nth-of-type(5)>ul>li:nth-of-type(5), #top-bar div.mobile-top-bar>ul>li:nth-of-type(5)>ul>li:nth-of-type(6) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 3); } #top-bar div.mobile-top-bar>ul>li:nth-of-type(5)>ul>li:nth-of-type(7), #top-bar div.mobile-top-bar>ul>li:nth-of-type(5)>ul>li:nth-of-type(8) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) calc(var(--transition-timing) * 2); } #top-bar div.mobile-top-bar>ul>li:nth-of-type(5)>ul>li:nth-of-type(8), #top-bar div.mobile-top-bar>ul>li:nth-of-type(5)>ul>li:nth-of-type(10) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) var(--transition-timing); } #top-bar div.mobile-top-bar>ul>li:nth-of-type(5)>ul>li:nth-of-type(11), #top-bar div.mobile-top-bar>ul>li:nth-of-type(5)>ul>li:nth-of-type(12) { transition: var(--speedy-transition-timing) cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /* Hover Dropdowns do not need the same treatment */ #top-bar div.mobile-top-bar>ul>li:hover>ul, #top-bar div.mobile-top-bar>ul>li:active>ul, #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-of-type(1), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-of-type(1), #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-of-type(2), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-of-type(2) { transition-delay: 0ms; } #top-bar div.mobile-top-bar>ul>li:focus-within>ul, #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-of-type(1), #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-of-type(2) { transition-delay: 0ms; } #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-of-type(3), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-of-type(3), #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-of-type(4), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-of-type(4) { transition-delay: var(--transition-timing); } #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-of-type(3), #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-of-type(4) { transition-delay: var(--transition-timing); } #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-of-type(5), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-of-type(5), #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-of-type(6), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-of-type(6) { transition-delay: calc(var(--transition-timing) * 1.9); } #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-of-type(5), #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-of-type(6) { transition-delay: calc(var(--transition-timing) * 1.9); } #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-of-type(7), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-of-type(7), #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-of-type(8), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-of-type(8) { transition-delay: calc(var(--transition-timing) * 2.7); } #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-of-type(7), #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-of-type(8) { transition-delay: calc(var(--transition-timing) * 2.7); } #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-of-type(9), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-of-type(9), #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-of-type(10), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-of-type(10) { transition-delay: calc(var(--transition-timing) * 3.4); } #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-of-type(9), #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-of-type(10) { transition-delay: calc(var(--transition-timing) * 3.4); } #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-of-type(11), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-of-type(11), #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-of-type(12), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-of-type(12) { transition-delay: calc(var(--transition-timing) * 4); } #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-of-type(11), #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-of-type(12) { transition-delay: calc(var(--transition-timing) * 4); } #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-of-type(13), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-of-type(13), #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-of-type(14), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-of-type(14) { transition-delay: calc(var(--transition-timing) * 4.5); } #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-of-type(13), #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-of-type(14) { transition-delay: calc(var(--transition-timing) * 4.5); } #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-of-type(15), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-of-type(15), #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-of-type(16), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-of-type(16) { transition-delay: calc(var(--transition-timing) * 4.9); } #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-of-type(15), #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-of-type(16) { transition-delay: calc(var(--transition-timing) * 4.9); } #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-of-type(17), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-of-type(17), #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-of-type(18), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-of-type(18) { transition-delay: calc(var(--transition-timing) * 5.3); } #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-of-type(17), #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-of-type(18) { transition-delay: calc(var(--transition-timing) * 5.3); } #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-of-type(19), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-of-type(19) #top-bar div.mobile-top-bar>ul>li:hover>ul>li:nth-of-type(20), #top-bar div.mobile-top-bar>ul>li:active>ul>li:nth-of-type(20) { transition-delay: calc(var(--transition-timing) * 5.5); } #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-of-type(19), #top-bar div.mobile-top-bar>ul>li:focus-within>ul>li:nth-of-type(20) { transition-delay: calc(var(--transition-timing) * 5.5); } #side-bar { background-image: var(--gradient-background); background-color: rgb(var(--swatch-background)); background-attachment: fixed; background-position: 0 0; background-size: 100% 100%; } }