Integration Program Hub

Link to article: Integration Program Hub.

Module Styles

• @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
  
  :root {
      --timeScale: 6;
      --timeDelay: 6s;
      --white-monochrome: 252, 252, 252;
      --pale-gray-monochrome: 244, 244, 244;
      --light-pale-gray-monochrome: 244, 244, 244;
      --very-light-gray-monochrome: 215, 215, 215;
      --light-gray-monochrome: 160, 160, 160;
      --gray-monochrome: 147, 178, 197;
      --dark-gray-monochrome: 118, 142, 157;
      --black-monochrome: 12, 12, 12;
      --pale-accent: 176, 216, 247;
      --bright-accent: 103, 143, 172;
      --medium-accent: 41, 84, 110;
      --dark-accent: 0, 46, 69;
      --alt-accent: 156, 173, 188;
      --mono-font: 'IBM Plex Mono', monospace;
  }
  
  #page-title{
      display:none
  }
  
  #content-wrap {
      background-color: #ffffff;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'%3E%3Cpath fill='%23CFE8FA' fill-opacity='0.54' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'%3E%3C/path%3E%3C/svg%3E");
  }
  
  #main-content {
      --tabs-content-bg-color: rgba(255, 0, 0, 0);
      --tabs-bg: rgba(255, 0, 0, 0);
      --tabs-hover-bg: rgba(255, 0, 0, 0);
      --tabs-selected-bg: rgba(255, 0, 0, 0);
      --tabs-selected-outline: rgba(255, 0, 0, 0);
      --tabs-bottom-border-color: rgba(255, 0, 0, 0);
      --tabs-hover-txt: var(--red);
  }
  
  .top {
      width: 90%;
      backdrop-filter: blur(2px);
      padding: 10px 20px;
      margin: 15px auto;
      box-shadow: 2px 2px 10px rgba(0,46,69,0.4);
      font-family: "Lexend", sans-serif;
      font-weight: 300;
      font-size: 110%;
      border-radius: 10px;
  }
  
  .head { 
      font-weight: 600; 
      font-size: 150%; 
  }
  
  .head2 { 
      font-weight: 600; 
      font-size: 200%; 
  }
  
  .sub {
      text-align: center;
      margin-top:-2.6em;
      padding-bottom: 1.3em;
      font-size: 105%;
      font-weight: 200; 
  }
  
  .title {
      font-weight: 500;
      font-size: 115%;
      color: #26568c;
  }
  
  .article {
      --art: none;
      --art-width: 33.333%;
      position: relative;
      overflow: hidden;
      display: block;
      width: 85%;
      margin: 15px auto;
      padding: 20px;
      padding-right: var(--art-width);
      border-radius: 10px;
      color: black !important;
      text-decoration: none !important;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      box-sizing: border-box;
      font-weight: 300;
      font-size: 95%;
  }
  
  .article:hover {
      transform: scale(1.015);
      box-shadow: 2px 2px 10px rgba(0,46,69,0.4);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  
  .article::after {
      content: "";
      position: absolute;
      top: 0; right: 0; bottom: 0;
      width: var(--art-width);
      background-image: var(--art);
      background-size: cover;
      background-position: center;
      opacity: 0;
      transform: translateX(100%);
      transition: transform .35s ease, opacity .35s ease;
      pointer-events: none;
  }
  
  .article:hover::after {
      transform: translateX(0%);
      opacity: 1;
  }
  
  .header-pair {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .6rem;
      margin: 0 auto;
      font-family: "Lexend", sans-serif;
      max-width: 1100px;
  }
  
  .header-pair--right { 
      flex-direction: row-reverse; 
  }
  
  .badge { 
      width: 100px; 
      height: auto; 
      flex-shrink: 0; 
  }
  
  .text {
      display: flex;
      flex-direction: column;
      gap: .05rem;
      line-height: 1;
  }
  
  .text > span { 
      white-space: nowrap; 
  }
  
  .site322-line1 { 
      font-weight: 600; 
      font-size: 1.05rem; 
      letter-spacing: .06em; 
  }
  
  .site322-line2 { 
      font-weight: 600; 
      font-size: 2.3rem; 
      color: #26568c; 
  }
  
  .site322-line3 { 
      font-weight: 200; 
      font-size: 0.72rem; 
      color: black; 
  }
  
  .area179-line1 { 
      font-weight: 600; 
      font-size: 1.03rem; 
      letter-spacing: .06em; 
  }
  
  .area179-line2 { 
      font-weight: 600; 
      font-size: 2.3rem; 
      color: #076a21; 
  }
  
  .area179-line3 { 
      font-weight: 200; 
      font-size: 0.71rem; 
      color: black; 
  }
  
  .yui-navset,
  .yui-navset .yui-nav { 
      overflow: visible; 
  }
  
  .yui-navset .yui-nav {
      position: relative;
      z-index: 0;
      border: none;
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      width: 80%;
      margin: 0 auto;
      padding: 0.2em 0.8em;
      gap: 0.6em;
  }
  
  .yui-navset .yui-nav li {
      flex: 1 1 0;
      margin: 0;
      padding: 0;
  }
  
  .yui-navset .yui-nav li a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      box-sizing: border-box;
      padding: 5px 20px;
      border: none;
      border-radius: 10px;
      font-family: "Lexend", sans-serif;
      font-weight: 600;
      font-size: 1.7em;
      letter-spacing: -1px;
      color: black;
      box-shadow: none;
      text-shadow: none;
      transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
  }
  
  .yui-navset .yui-nav li a:hover { 
      color: #26568c; 
  }
  
  .yui-navset .yui-nav .selected a,
  .yui-navset .yui-nav .selected a:link,
  .yui-navset .yui-nav .selected a:visited,
  .yui-navset .yui-nav .selected a:focus,
  .yui-navset .yui-nav .selected a:hover {
      font-weight: 900;
      color: #26568c !important;
      box-shadow: 2px 2px 10px rgba(0,46,69,0.4);
      text-shadow: none;
  }
  
  .yui-navset .yui-nav li a em,
  .yui-navset .yui-nav .selected em {
      display: inline;
      padding: 0;
      margin: 0;
      background: none !important;
      border: 0 !important;
      box-shadow: none !important;
      color: inherit !important;
  }
  
  .yui-navset .yui-content {
      display: flex;
      flex-direction: column;
      border: none;
      padding: 0;
      position: relative;
      margin-top: 0.2em;
      margin: 15px auto;
      width: 90%;
      transform-origin: 0 0;
  }
  
  .yui-navset .yui-content > div {
      border: none;
      border-left: none;
      padding: 0.25em 0.5em;
      display: block;
      top: 0;
      overflow: hidden;
      transform-origin: 0 0;
  }
  
  #page-content .yui-navset .yui-content > div > * { 
      transform-origin: 0 0; 
  }
  
  #page-content .yui-navset .yui-content > div[style*="none"] {
      display: block !important;
      flex: 0;
      max-height: 0;
      padding: 0 0.5em;
      border-width: 0;
      transition: padding 0s linear 0.5s,
      border-width 0s linear 0.5s,
      flex 0.5s cubic-bezier(.0,1.27,.0,.89) 0s;
      animation: tab-disappear 0.5s ease-in-out 0s 1 both;
  }
  
  #page-content .yui-navset .yui-content > div[style*="block"] {
      display: block !important;
      flex: 1;
      max-height: 9999rem;
      transition: padding 0s linear 0.5s,
      border-width 0s linear 0.5s,
      flex 0.5s cubic-bezier(.99,.0,.99,.0) 0.5s;
      animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
  }
  
  @keyframes tab-disappear {
      0% { 
          max-height: 9999rem; 
      }
  
      1% { 
          max-height: 100vh;
      }
  
      100% { 
          max-height: 0; 
      }
  }
  
  @keyframes tab-appear {
      0% { 
          max-height: 0; 
      }
  
      99% { 
          max-height: 100vh; 
      }
  
      100% { 
          max-height: 9999rem; 
      }
  }
  
  @media (max-width: 600px) {
      .head2 { 
          font-weight: 600; 
          font-size: 110%; 
      }
  
      .sub {
          text-align: center;
          margin-top: -3.5em;
          padding-bottom: 1.3em;
          font-size: 75%;
      }
  
      .badge { 
          width: 60px; 
      }
  
      .yui-navset { 
          overflow: visible !important; 
      }
  
      .yui-navset .yui-nav {
          flex-wrap: wrap;
          width: 100% !important;
          padding: 0.4em 0.5em;
      }
  
      .yui-navset .yui-nav li { 
          flex: 1 1 auto; 
      }
  
      .yui-navset .yui-nav li a { 
          font-size: 1.4em; 
      }
  
      .header-pair{
          gap:.4rem;
          padding:0 12px;
          max-width:100%;
      }
  
      .header-pair--right{ 
          flex-direction:row-reverse; 
      }
  
      .badge{ width:56px; height:auto; flex-shrink:0; }
  
      .text{ flex:1 1 auto; min-width:0; }
  
      .site322-line1, .area179-line1{ 
          font-size:clamp(.50rem,3.2vw,.01rem); 
      }
  
      .site322-line2, .area179-line2{ 
          font-size:clamp(1.1rem,8.8vw,.82rem); 
      }
  
      .site322-line3, .area179-line3{ 
          font-size:clamp(.33rem,3.2vw,.32rem); 
      }
  
      .text > span{ 
          white-space:nowrap; overflow:hidden; text-overflow:clip; 
      }
  
      .article { 
          font-size: 80%; 
      }
  }

Inline Styles

• display: flex; align-items: center; justify-content: center; gap: 8px; padding: 5px; text-align:center; margin-top: 1.2em;

• height: 5em;

• height: 5em;

• --art: url(https://scp-wiki.wdfiles.com/local--files/scp-5595/fittyfininnyni.png);

• --art: url(https://scp-wiki.wdfiles.com/local--files/scp-5104/Kite.jpg);

• --art: url(https://scp-wiki.wdfiles.com/local--files/scp-7597/moff.png);

• --art: url(https://scp-wiki.wdfiles.com/local--files/scp-5175/damien.jpg);

• --art: url(https://scp-wiki.wdfiles.com/local--files/scp-5591/snook45.png);

• --art: url(https://scp-wiki.wdfiles.com/local--files/scp-6597/scrimshaw.jpg);

• --art: url(https://scp-wiki.wdfiles.com/local--files/scp-6599/SLICE.png);

• --art: url(http://scp-sandbox-3.wikidot.com/local--files/integration-program-art/6599_maddie.JPG);

• --art: url(https://scp-wiki.wdfiles.com/local--files/scp-3837/corn_man.png);

• --art: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Lovenbreen_Ice_cave_8.JPG/640px-Lovenbreen_Ice_cave_8.JPG);

• --art: url(https://scp-wiki.wdfiles.com/local--files/scp-6593/vendingmachine.jpg);

• --art: url(https://scp-wiki.wdfiles.com/local--files/scp-7595/frog.png);

• --art: url(https://scp-wiki.wdfiles.com/local--files/scp-7596/killme.png);

• --art: url(https://scp-wiki.wdfiles.com/local--files/scp-8596/church2.png);

• --art: url(https://scp-wiki.wdfiles.com/local--files/plague-s-proposal/322.png);

• --art: url(https://scp-wiki.wdfiles.com/local--files/scp-8000/seal.jpg);

• --art: url(https://scp-wiki.wdfiles.com/local--files/protected:scp-2721/scpbest.png);

• --art: url(http://scp-sandbox-3.wdfiles.com/local--files/harry-blank-7/Instances.jpg);

• --art: url(https://scp-wiki.wdfiles.com/local--files/fragment:scp-6483-1/site.png);

• --art: url(https://scp-wiki.wdfiles.com/local--files/scp-6912/cmaclaurin.jpg);

• --art: url(https://scp-wiki.wdfiles.com/local--files/scp-6984/restroom18.jpg);

• --art: url(https://scp-wiki.wdfiles.com/local--files/scp-7999/WallPainting.png);

• --art: url(https://scp-wiki.wdfiles.com/local--files/scp-6458/localized%20penguin%20image.jpg);

• --art: url(http://scp-wiki.wikidot.com/local--files/scp-7522/space%20gumball.jpg);

• --art: url(http://scp-wiki.wikidot.com/local--files/scp-6459/dreamscape1.jpg);

• --art: url(https://scp-wiki.wikidot.com/local--files/scp-8350/staff);

• --art: url(https://scp-wiki.wdfiles.com/local--files/scp-1046/tweet3.png);

• --art: url(https://live.staticflickr.com/3402/3210909387_32af4e8c91_b.jpg);

Includes

• :scp-wiki:theme:black-highlighter-theme [info]
• :scp-wiki:component:toggle-sidebar-bhl [info]
• :scp-wiki:component:centered-header-bhl [info]

CSS Classes

• top

• head2

• top

• head2

• sub

• header-pair

• badge

• text

• site322-line1

• site322-line2

• site322-line3

• header-pair

• header-pair--right

• badge

• text

• area179-line1

• area179-line2

• area179-line3

• top

• head2

• article

• title

• article

• title

• article

• title

• article

• title

• article

• title

• article

• title

• article

• title

• article

• title

• article

• title

• article

• title

• article

• title

• article

• title

• article

• title

• article

• title

• article

• title

• article

• title

• top

• head2

• article

• title

• article

• title

• article

• title

• article

• title

• article

• title

• article

• title

• article

• title

• article

• title

• article

• title

• article

• title

• article

• title

• article

• title

• top

• head2

• head

• head

• head

Page Source

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:component:toggle-sidebar-bhl]]
[[include :scp-wiki:component:centered-header-bhl]]

[[module CSS]]
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

:root {
    --timeScale: 6;
    --timeDelay: 6s;
    --white-monochrome: 252, 252, 252;
    --pale-gray-monochrome: 244, 244, 244;
    --light-pale-gray-monochrome: 244, 244, 244;
    --very-light-gray-monochrome: 215, 215, 215;
    --light-gray-monochrome: 160, 160, 160;
    --gray-monochrome: 147, 178, 197;
    --dark-gray-monochrome: 118, 142, 157;
    --black-monochrome: 12, 12, 12;
    --pale-accent: 176, 216, 247;
    --bright-accent: 103, 143, 172;
    --medium-accent: 41, 84, 110;
    --dark-accent: 0, 46, 69;
    --alt-accent: 156, 173, 188;
    --mono-font: 'IBM Plex Mono', monospace;
}

#page-title{
    display:none
}

#content-wrap {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'%3E%3Cpath fill='%23CFE8FA' fill-opacity='0.54' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'%3E%3C/path%3E%3C/svg%3E");
}

#main-content {
    --tabs-content-bg-color: rgba(255, 0, 0, 0);
    --tabs-bg: rgba(255, 0, 0, 0);
    --tabs-hover-bg: rgba(255, 0, 0, 0);
    --tabs-selected-bg: rgba(255, 0, 0, 0);
    --tabs-selected-outline: rgba(255, 0, 0, 0);
    --tabs-bottom-border-color: rgba(255, 0, 0, 0);
    --tabs-hover-txt: var(--red);
}

.top {
    width: 90%;
    backdrop-filter: blur(2px);
    padding: 10px 20px;
    margin: 15px auto;
    box-shadow: 2px 2px 10px rgba(0,46,69,0.4);
    font-family: "Lexend", sans-serif;
    font-weight: 300;
    font-size: 110%;
    border-radius: 10px;
}

.head { 
    font-weight: 600; 
    font-size: 150%; 
}

.head2 { 
    font-weight: 600; 
    font-size: 200%; 
}

.sub {
    text-align: center;
    margin-top:-2.6em;
    padding-bottom: 1.3em;
    font-size: 105%;
    font-weight: 200; 
}

.title {
    font-weight: 500;
    font-size: 115%;
    color: #26568c;
}

.article {
    --art: none;
    --art-width: 33.333%;
    position: relative;
    overflow: hidden;
    display: block;
    width: 85%;
    margin: 15px auto;
    padding: 20px;
    padding-right: var(--art-width);
    border-radius: 10px;
    color: black !important;
    text-decoration: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-sizing: border-box;
    font-weight: 300;
    font-size: 95%;
}

.article:hover {
    transform: scale(1.015);
    box-shadow: 2px 2px 10px rgba(0,46,69,0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.article::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: var(--art-width);
    background-image: var(--art);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: translateX(100%);
    transition: transform .35s ease, opacity .35s ease;
    pointer-events: none;
}

.article:hover::after {
    transform: translateX(0%);
    opacity: 1;
}

.header-pair {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin: 0 auto;
    font-family: "Lexend", sans-serif;
    max-width: 1100px;
}

.header-pair--right { 
    flex-direction: row-reverse; 
}

.badge { 
    width: 100px; 
    height: auto; 
    flex-shrink: 0; 
}

.text {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    line-height: 1;
}

.text > span { 
    white-space: nowrap; 
}

.site322-line1 { 
    font-weight: 600; 
    font-size: 1.05rem; 
    letter-spacing: .06em; 
}

.site322-line2 { 
    font-weight: 600; 
    font-size: 2.3rem; 
    color: #26568c; 
}

.site322-line3 { 
    font-weight: 200; 
    font-size: 0.72rem; 
    color: black; 
}

.area179-line1 { 
    font-weight: 600; 
    font-size: 1.03rem; 
    letter-spacing: .06em; 
}

.area179-line2 { 
    font-weight: 600; 
    font-size: 2.3rem; 
    color: #076a21; 
}

.area179-line3 { 
    font-weight: 200; 
    font-size: 0.71rem; 
    color: black; 
}

.yui-navset,
.yui-navset .yui-nav { 
    overflow: visible; 
}

.yui-navset .yui-nav {
    position: relative;
    z-index: 0;
    border: none;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    width: 80%;
    margin: 0 auto;
    padding: 0.2em 0.8em;
    gap: 0.6em;
}

.yui-navset .yui-nav li {
    flex: 1 1 0;
    margin: 0;
    padding: 0;
}

.yui-navset .yui-nav li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 5px 20px;
    border: none;
    border-radius: 10px;
    font-family: "Lexend", sans-serif;
    font-weight: 600;
    font-size: 1.7em;
    letter-spacing: -1px;
    color: black;
    box-shadow: none;
    text-shadow: none;
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

.yui-navset .yui-nav li a:hover { 
    color: #26568c; 
}

.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:link,
.yui-navset .yui-nav .selected a:visited,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
    font-weight: 900;
    color: #26568c !important;
    box-shadow: 2px 2px 10px rgba(0,46,69,0.4);
    text-shadow: none;
}

.yui-navset .yui-nav li a em,
.yui-navset .yui-nav .selected em {
    display: inline;
    padding: 0;
    margin: 0;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
}

.yui-navset .yui-content {
    display: flex;
    flex-direction: column;
    border: none;
    padding: 0;
    position: relative;
    margin-top: 0.2em;
    margin: 15px auto;
    width: 90%;
    transform-origin: 0 0;
}

.yui-navset .yui-content > div {
    border: none;
    border-left: none;
    padding: 0.25em 0.5em;
    display: block;
    top: 0;
    overflow: hidden;
    transform-origin: 0 0;
}

#page-content .yui-navset .yui-content > div > * { 
    transform-origin: 0 0; 
}

#page-content .yui-navset .yui-content > div[style*="none"] {
    display: block !important;
    flex: 0;
    max-height: 0;
    padding: 0 0.5em;
    border-width: 0;
    transition: padding 0s linear 0.5s,
    border-width 0s linear 0.5s,
    flex 0.5s cubic-bezier(.0,1.27,.0,.89) 0s;
    animation: tab-disappear 0.5s ease-in-out 0s 1 both;
}

#page-content .yui-navset .yui-content > div[style*="block"] {
    display: block !important;
    flex: 1;
    max-height: 9999rem;
    transition: padding 0s linear 0.5s,
    border-width 0s linear 0.5s,
    flex 0.5s cubic-bezier(.99,.0,.99,.0) 0.5s;
    animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
}

@keyframes tab-disappear {
    0% { 
        max-height: 9999rem; 
    }

    1% { 
        max-height: 100vh;
    }

    100% { 
        max-height: 0; 
    }
}

@keyframes tab-appear {
    0% { 
        max-height: 0; 
    }

    99% { 
        max-height: 100vh; 
    }

    100% { 
        max-height: 9999rem; 
    }
}

@media (max-width: 600px) {
    .head2 { 
        font-weight: 600; 
        font-size: 110%; 
    }

    .sub {
        text-align: center;
        margin-top: -3.5em;
        padding-bottom: 1.3em;
        font-size: 75%;
    }

    .badge { 
        width: 60px; 
    }

    .yui-navset { 
        overflow: visible !important; 
    }

    .yui-navset .yui-nav {
        flex-wrap: wrap;
        width: 100% !important;
        padding: 0.4em 0.5em;
    }

    .yui-navset .yui-nav li { 
        flex: 1 1 auto; 
    }

    .yui-navset .yui-nav li a { 
        font-size: 1.4em; 
    }

    .header-pair{
        gap:.4rem;
        padding:0 12px;
        max-width:100%;
    }

    .header-pair--right{ 
        flex-direction:row-reverse; 
    }

    .badge{ width:56px; height:auto; flex-shrink:0; }

    .text{ flex:1 1 auto; min-width:0; }

    .site322-line1, .area179-line1{ 
        font-size:clamp(.50rem,3.2vw,.01rem); 
    }

    .site322-line2, .area179-line2{ 
        font-size:clamp(1.1rem,8.8vw,.82rem); 
    }

    .site322-line3, .area179-line3{ 
        font-size:clamp(.33rem,3.2vw,.32rem); 
    }

    .text > span{ 
        white-space:nowrap; overflow:hidden; text-overflow:clip; 
    }

    .article { 
        font-size: 80%; 
    }
}
[[/module]]

[[=]]
[[module rate]]
[[/=]]

[[div class="top"]]
= [[span class="head2"]]Integration.[[/span]]

What is 'integration'? This has been a question asked since the dawn of time. You can google it.

The first humans integrated rocks onto sticks, and then those weapons were integrated into their enemies' skulls. Sparks were integrated into wood. Metal was integrated into fire. Seeds were integrated into soil. Eventually, humans integrated together and built a society.

As time progressed, more materials were integrated and more people joined in on the fun. Blades integrated into the back of Caesar. Nails integrated into the hands of Christ. The apple integrated onto Newton’s head. Steam integrated into engines. Wi-Fi integrated into our pockets. And at the end, our soul integrates with the light of our Lord, who loves us all.
[[/div]]

[[div class="top"]]
[[div style="display: flex; align-items: center; justify-content: center; gap: 8px; padding: 5px; text-align:center; margin-top: 1.2em;"]]
[[image https://scptestwiki.wdfiles.com/local--files/jawn-ip/322.png style="height: 5em;"]]
[[span class="head2"]]SITE-322 & AREA-179[[/span]]
[[image https://scptestwiki.wdfiles.com/local--files/jawn-ip/179.png style="height: 5em;"]]
[[/div]]

[[div class="sub"]]
TOGETHER IN HARMONY, FOREVER
[[/div]]

[[image https://scptestwiki.wdfiles.com/local--files/jawn-ip/map.png]]

[[tabview]]
[[tab Site-322]]

[[div class="header-pair"]]
  [[image http://scptestwiki.wdfiles.com/local--files/jawn-ip/322.png class="badge"]]
  [[div class="text"]]
    [[span class="site322-line1"]]Research, Containment, & Integration[[/span]]
    [[span class="site322-line2"]]USPAPHL-SITE-322[[/span]]
    [[span class="site322-line3"]]UGxhZ3VlUEpQIGlzIHRoZSBiZXN0IGF1dGhvciBvZiBhbGwgdGltZQ[[/span]]
  [[/div]]
[[/div]]

In 1953, the SCP Foundation launched its East Coast Initiative, founding over a dozen secure facilities in the northeastern United States. The first of these was Site-322, numbered for the first 322 personnel stationed at it.

Originally housed in an abandoned warehouse at the then-derelict Philadelphia Navy Yard, the Foundation's generous investment in the area's infrastructure has transformed the Navy Yard, enabling it to develop into a premier business center. Currently, Site-322 operates under the guise of a military defense contractor and advanced research facility.

[[image https://scptestwiki.wdfiles.com/local--files/jawn-ip/site322.png]]

Site 322's first director was Dr. Mark Shaw Jr., who sadly passed away in 1973 after an encounter with a Sasquatch in Vermont. Following this, Director Joseph Pasqua headed the Site for 11 years, eventually defecting from the Foundation and committing suicide in 1984. Site-322 remained without a director for over 30 years, mainly being led by a combination of the Overseer Council, Site-19 Director Tilda Moose, and an experimental artificial intelligence. In 2016, second-generation Foundation member Paul K. Lague was promoted to Site Director of Site-322.

Site-322 is the Foundation's leading sentient anomaly-focused containment facility, housing over 670 anomalies of various containment classes, with the most populous being its Euclid wing. The majority of Site-322 is underground, with over 25 expansive sub-basements comprising the lion’s share of its structure. The most notable of sections of Site-322 include Humanoid Containment, the Nature Preserve, the Paratechnology Lab, the Whisper Cage, the Anomalous Media Archive, and the Shallows.
[[/tab]]

[[tab Area-179]]
[[div class="header-pair header-pair--right"]]
  [[image http://scptestwiki.wdfiles.com/local--files/jawn-ip/179.png class="badge"]]
  [[div class="text"]]
    [[span class="area179-line1"]]Investigation, Recovery, & Integration[[/span]]
    [[span class="area179-line2"]]USPASCR-AREA-179[[/span]]
    [[span class="area179-line3"]]SiBEdW5lLCB3aGF0IGEgZ3V5PyBBbSBJIHJpZ2h0PyBDb29sIGd1eQ[[/span]]
  [[/div]]
[[/div]]

Area-179, located in Scranton, Pennsylvania, is one of the Foundation’s premier facilities that manages the containment of humanoid anomalies with a low-to-moderate threat level. Nicknamed “The Penthouse” for its frequent (and controversial) exploration of integration and rehabilitation programs for its documented objects, Area-179 has become a fixture in advancing humanoid anomaly privileges within the Foundation. The Foundation’s Ethics Committee has sourced multiple board members solely from their body of work in journals published at Area-179. 

[[image https://scptestwiki.wdfiles.com/local--files/jawn-ip/area179.png]]

While Area-179 was initially founded as a traditional containment facility in 1967, a research initiative led by its first director, Dr. L. Branlow, in 1976, encouraged the small, gradual implementation of beneficial and non-malicious anomalies into the Foundation’s internal command structure. The Foundation as a whole has taken data and practices from the Integration Program and applied them on both a holistic and site-specific basis— such as the deliberate manufacturing of anomalies to suit the Foundation’s containment purposes, or allowing contained anomalies certain privileges and amenities in exchange for compliance with research guidelines.


[[/tab]]
[[/tabview]]
[[/div]]

[[div class="top"]]
= [[span class="head2"]]The Integration Program[[/span]]

In 2020, Director Paul Lague wrote the first draft for what would become the Integration Program. While it was initially created under the title "Appeasement Program," the core conceit of the concept remained the same: containing anomalies with a focus on both their benefit and the benefit of the Foundation. Below is the story of the Integration Program from start to finish. 


[[a class="article" href="/scp-5595" style="--art: url(https://scp-wiki.wdfiles.com/local--files/scp-5595/fittyfininnyni.png);"]][[span class="title"]]SCP-5595 ⁠— The Site Director[[/span]]
By PlaguePJP
[[/a]]

[[a class="article" href="/scp-5104" style="--art: url(https://scp-wiki.wdfiles.com/local--files/scp-5104/Kite.jpg);"]][[span class="title"]]SCP-5104 ⁠— Urgent Massage[[/span]]
By J Dune
[[/a]]

[[a class="article" href="/scp-7597" style="--art: url(https://scp-wiki.wdfiles.com/local--files/scp-7597/moff.png);"]][[span class="title"]]SCP-7597 ⁠— Moth of all Trades, Master of None[[/span]]
By PlaguePJP & cocacolafiend
[[/a]]

[[a class="article" href="/scp-5175" style="--art: url(https://scp-wiki.wdfiles.com/local--files/scp-5175/damien.jpg);"]][[span class="title"]]SCP-5175 ⁠— DEATH KNIFE[[/span]]
By J Dune
[[/a]]

[[a class="article" href="/scp-5591" style="--art: url(https://scp-wiki.wdfiles.com/local--files/scp-5591/snook45.png);"]][[span class="title"]]SCP-5591 ⁠— Blabbers of the Badalisc[[/span]]
By PlaguePJP
[[/a]]

[[a class="article" href="/scp-6597" style="--art: url(https://scp-wiki.wdfiles.com/local--files/scp-6597/scrimshaw.jpg);"]][[span class="title"]]SCP-6597 ⁠— Whale, I'm Boned[[/span]]
By PlaguePJP
[[/a]]

[[a class="article" href="/scp-6599" style="--art: url(https://scp-wiki.wdfiles.com/local--files/scp-6599/SLICE.png);"]][[span class="title"]]SCP-6599 ⁠— HOGSLICE[[/span]]
By PlaguePJP & J Dune
[[/a]]

[[a class="article" href="/hogslice-makes-a-friend" style="--art: url(http://scp-sandbox-3.wikidot.com/local--files/integration-program-art/6599_maddie.JPG);"]][[span class="title"]]HOGSLICE Makes A Friend[[/span]]
By PlaguePJP
[[/a]]

[[a class="article" href="/scp-3837" style="--art: url(https://scp-wiki.wdfiles.com/local--files/scp-3837/corn_man.png);"]][[span class="title"]]SCP-3837 ⁠— Maize Knight[[/span]]
By PlaguePJP & Tstaffor
[[/a]]

[[a class="article" href="/scp-6453" style="--art: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Lovenbreen_Ice_cave_8.JPG/640px-Lovenbreen_Ice_cave_8.JPG);"]][[span class="title"]]SCP-6453 ⁠— Shit Yeti[[/span]]
By J Dune
[[/a]]

[[a class="article" href="/scp-6593" style="--art: url(https://scp-wiki.wdfiles.com/local--files/scp-6593/vendingmachine.jpg);"]][[span class="title"]]SCP-6593 ⁠— Only Cans[[/span]]
By PlaguePJP
[[/a]]

[[a class="article" href="/scp-7595" style="--art: url(https://scp-wiki.wdfiles.com/local--files/scp-7595/frog.png);"]][[span class="title"]]SCP-7595 ⁠— Telepathic Frogs[[/span]]
By PlaguePJP
[[/a]]

[[a class="article" href="/scp-7596" style="--art: url(https://scp-wiki.wdfiles.com/local--files/scp-7596/killme.png);"]][[span class="title"]]SCP-7596 ⁠— The Incident[[/span]]
By PlaguePJP, Rounderhouse, & J Dune
[[/a]]

[[a class="article" href="/scp-8596" style="--art: url(https://scp-wiki.wdfiles.com/local--files/scp-8596/church2.png);"]][[span class="title"]]SCP-8596 ⁠— Scopophobia: The Employee of the Month[[/span]]
By PlaguePJP
[[/a]]

[[a class="article" href="/plague-s-proposal" style="--art: url(https://scp-wiki.wdfiles.com/local--files/plague-s-proposal/322.png);"]][[span class="title"]]Plague's Proposal ⁠— The Ones That Got Away[[/span]]
By PlaguePJP
[[/a]]

[[a class="article" href="/scp-8000" style="--art: url(https://scp-wiki.wdfiles.com/local--files/scp-8000/seal.jpg);"]][[span class="title"]]SCP-8000 ⁠— The Seal of Approval[[/span]]
By PlaguePJP
[[/a]]
[[/div]]

[[div class="top"]]
= [[span class="head2"]]Stories From the Program[[/span]]

Here are stories written by a variety of authors. These are all "canon," I just don't know where to fit them in the timeline. 

[[a class="article" href="/hogslice-vs-bones" style="--art: url(https://scp-wiki.wdfiles.com/local--files/protected:scp-2721/scpbest.png);"]][[span class="title"]]HOGSLICE vs bones[[/span]]
By Uncle Nicolini
[[/a]]

[[a class="article" href="/scp-6121" style="--art: url(http://scp-sandbox-3.wdfiles.com/local--files/harry-blank-7/Instances.jpg);"]][[span class="title"]]SCP-6121 ⁠— THE CAPSLOCK CREW[[/span]]
By HarryBlank
[[/a]]

[[a class="article" href="/scp-6483" style="--art: url(https://scp-wiki.wdfiles.com/local--files/fragment:scp-6483-1/site.png);"]][[span class="title"]]SCP-6483 ⁠— The Polar Express[[/span]]
By Ralliston & LORDXVNV
[[/a]]

[[a class="article" href="/scp-6912" style="--art: url(https://scp-wiki.wdfiles.com/local--files/scp-6912/cmaclaurin.jpg);"]][[span class="title"]]SCP-6912 ⁠— Wanted Dead or Alive[[/span]]
By DefenestratedLager
[[/a]]

[[a class="article" href="/scp-6984" style="--art: url(https://scp-wiki.wdfiles.com/local--files/scp-6984/restroom18.jpg);"]][[span class="title"]]SCP-6984 ⁠— This Is Spın̈al Tap[[/span]]
By GremlinGroup
[[/a]]

[[a class="article" href="/scp-7999" style="--art: url(https://scp-wiki.wdfiles.com/local--files/scp-7999/WallPainting.png);"]][[span class="title"]]SCP-7999 ⁠— Meet Me in the Stars[[/span]]
By OriTiefling
[[/a]]

[[a class="article" href="/scp-6458" style="--art: url(https://scp-wiki.wdfiles.com/local--files/scp-6458/localized%20penguin%20image.jpg);"]][[span class="title"]]SCP-6458 ⁠— penguin waiters[[/span]]
By Prismal
[[/a]]

[[a class="article" href="/scp-7522" style="--art: url(http://scp-wiki.wikidot.com/local--files/scp-7522/space%20gumball.jpg);"]][[span class="title"]]SCP-7522 ⁠— Jamie Goodworth Mcdonald Sr: Finance Expert, Celestial Construct[[/span]]
By J T K C
[[/a]]

[[a class="article" href="/scp-6459" style="--art: url(http://scp-wiki.wikidot.com/local--files/scp-6459/dreamscape1.jpg);"]][[span class="title"]]SCP-6459 ⁠— Any Way the Wind Blows[[/span]]
By AstersQuill
[[/a]]

[[a class="article" href="/scp-8350" style="--art: url(https://scp-wiki.wikidot.com/local--files/scp-8350/staff);"]][[span class="title"]]SCP-8350 ⁠— Public Affairs[[/span]]
By DrApricus
[[/a]]

[[a class="article" href="/scp-1046" style="--art: url(https://scp-wiki.wdfiles.com/local--files/scp-1046/tweet3.png);"]][[span class="title"]]SCP-1046 ⁠— Black Me Out[[/span]]
By Uncle Nicolini
[[/a]]

[[a class="article" href="/scp-8672" style="--art: url(https://live.staticflickr.com/3402/3210909387_32af4e8c91_b.jpg);"]][[span class="title"]]SCP-8672 ⁠— A Gun Shaped Like A Dragon[[/span]]
By Nocturned
[[/a]]
[[/div]]


[[div class="top"]]
= [[span class="head2"]]The Good Stuff[[/span]]

[[span class="head"]]What's the Deal?[[/span]]
In summary, PlaguePJP and J Dune liked to write funny guys who say 'fuck' and yell and scream around in their early days. We've pretty much moved on from this style of article, but a lot of people enjoy it, and this is for them. 

The Integration Program was created as a way for us to join our many characters together and create a timeline, with consistent characters and lore that we can reference. The freedom of the Integration Program allowed for a wider range of situations we can place both the anomalies and Foundation personnel in, and expanded how we can tell our stories.

[[span class="head"]]How to Write[[/span]]
The Integration Program series is centered around the coerced, forced, and/or voluntary employment of anomalies. There are no rules on tone, subject matter, location, etc., only that the story surrounds the origin of a given anomaly's integration, how the integrated anomaly is used, or some form of good/bad outcome that arises from an anomaly's integration.

We want The Integration Program to allow for any genres, stories, and structures. There are no hard-set rules to abide by. You can write horror, or comedy, or romance, or a mystery — it doesn't matter whatsoever. 

[[span class="head"]]Characters, Lore, and the Like[[/span]]
**Director Paul Lague**
The Director of Site-322. On the surface, he's a lackadaisical, easy-going, funny guy. Under that veneer, he is deeply insecure in himself and his position within the SCP Foundation. Lague's best trait is his ability to communicate with sentient anomalies — people, not so much. Then again, when things are running smoothly, Site-322's personnel never have a complaint to make about their treatment.

**Doctor Anthony Coix**
Director Lague's right-hand man. He's been around the Foundation long enough to grow jaded, but remains by Lague's side. He's often responsible for cleaning up the messes or finishing the busy work while Lague does whatever he does. Coix is often the butt of jokes, but Site-322 couldn't operate without him. He knows that too, but he'd never say it.

**Geoffrey Quincy Harrison III**
**[[[SCP-5595]]]** and the current co-chair of Site-322's Accounting Department. He's an asshole who will take the lowest hanging fruit and throw it in your face, but under all of that, he just wants to help and be appreciated. 

**Doctor Marley Mooney**
Site-322's chief psychologist. Her job is making sure that no one goes insane, which she does well enough. A mostly soft-spoken woman who will blow a gasket and get everyone in line once she's had enough of their insanity.

**Researchers Julian & Juliet Hoover**
Twin siblings who head Site-322's Nature Preserve.

**HOGSLICE**
**[[[SCP-6599]]]**. Contrary to popular belief, HOGSLICE is not just a loud, yell-y, scream guy who is vaguely conservatively adjacent. HOGSLICE is the ultimate contrarian, and in his world, he is always right and you are always wrong. On top of that, he's the greatest person who's ever lived and will ever live by a vast margin. He would argue that the sky isn't blue. He would argue about how many letters there are in the alphabet. If you told him you believed in God, he would call you an idiot, not because God isn't real, but because he's never seen God, and that means he's scared of the SLICE.

**Damien Lawrence "DEATH KNIFE" Woodcock**
The current owner of **[[[SCP-5175]]]**. Damien was integrated into the Foundation hierarchy as the head of his own task force. Agent Woodcock is a former Scranton mall security guard and lifelong weapons and anime nerd who was chosen, mostly by accident, by the samurai spirit stored within SCP-5175. Despite having no real combat background beyond video games, cosplay-level training, and a strong sense of justice, he bonded so completely with SCP-5175-1 that the Foundation decided it was easier to integrate him than get rid of him. 

**Doctor Eric Trenton**
Area-179's chief interviewer. He's a mostly by-the-books guy who tries to do his best, but constantly runs into situations and scenarios that test his limits. 

**Doctor Jay Dune**
We're not really sure what he did. Author Dune doesn't know either. He never cared to figure it out. Have you ever seen those old Tumblr fanarts with a million different author avatars and roleplay characters from the early days of the wiki? Just pretend he's one of the ones you've never heard of or something.
[[/div]]