A Brief History of Y AI - Offset 5

Link to article: A Brief History of Y AI - Offset 5.

:root {
  --header-title: "𝕐 AI";
  --header-subtitle: "A subsidiary of Terblanche Enterprises LLC";
  --main-content-width: 100vw;
  --main-content-side-margin: 0;
  --main-content-top-margin: 0;
  --really-ease-out: 0, 0.99, 0, 1;
  --kinda-ease-out: 0.32, 0.83, 0.31, 0.82;
  --basalt-background-color: 0, 0, 0;
  --logo: url(https://scp-wiki.wdfiles.com/local--files/fragment%3Ay-ai-1/y-ai-1-black.png);
  --edit-area-main-background-color: 255, 255, 255;
}

body {
  background-color: #ffffff;
}

#header {
  position: fixed;
}

#page-title {
  display: none !important;
}

.screen-sized-panel {
  width: 100%;
  height: 100vh;
}

.hero {
  position: relative;
}

.hero h1 {
  font-size: 6vw;
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  max-width: 1000px;
}


.hero h2 {
  font-size: 3vw;
  position: absolute;
  top: calc(43% + 15vw);
  left: 50%;
  transform: translate(-50%, -50%);
}

.screen-sized-panel {
  font-size: 200%;
}

#page-content .main-text {
  font-size: 2.25rem;
  padding: 40px;
  font-weight: 200;
}

#page-content .standalone-text {
  max-width: 1000px;
  margin: auto;
  font-size: 2.25rem;
  font-weight: 200;
  text-align: center;
  width: min(1000px, 90%);
}

.make-font-smaller {
  font-size: 2rem;
}

.side-by-side {
  display: flex;
  align-items: center;
}

#page-content .main-image {
  width: 40vw;
  max-width: unset;
}

.force-center {
  justify-content: center;
  height: 100vh;
}

#page-content h2 {
  font-size: 800%;
  margin: auto;
  text-align: center;
  margin-top: 40vh;
  margin-bottom: 10vh;
}

@media (max-width: 1100px) {
  
  .hero h1 {
    font-size: 12vw;
  }

  #page-content h2 {
    font-size: 400%;
  }
  
  .side-by-side {
     flex-direction: column;
     justify-content: center;
  }

  .isometric-text-container-container {
    width: 75vw;
    margin: auto;
  }

  .isometric-text-container {
    width: 80vw;
    margin: auto;
  }

  #page-content .main-image {
    width: 75vw;
    max-width: unset;
  }

  .swap-order {
    flex-direction: column-reverse;
  }

  #page-content .main-text {
    font-size: 1.75rem;
  }
}



.isometric-text-container-container {
  width: min(90%, 800px);
  filter: drop-shadow(-15px 25px 10px #00000044);
}



#page-content .text-user {
  border-radius: 20px;
  border-bottom-right-radius: 0;
  background-color: #ff915c;
  color: white !important;
  padding: 20px;
  margin-bottom: 50px;
  max-width: 75%;
  margin-left: auto;
}

#page-content .text-ai {
  border: 1px solid #ffffff88;
  background-color: rgb(40, 40, 40);
  border-radius: 20px;
  border-bottom-left-radius: 0;
  padding: 20px;
  margin-bottom: 50px;
  max-width: 75%;
  color: white !important;
}



.grepcromancy-ui-container {
  background-image: linear-gradient(45deg, #eeeeee, #dddddd);
  color: #232323;
  padding: 30px;
  padding-bottom: 10px;
  font-size: 75%;
  transform: scale(0.9);
  border-radius: 20px;
}

#page-content .grepcromancy-name {
  font-size: 50%;

  h2 { 
    margin-top: 0;
    margin-bottom: 20px;
  }
}

.grepcromancy-slider {
  margin: 30px 10px;
}

.grepcromancy-slider-bg {
  width: 100%;
  height: 4px;
  border-radius; 2px;
  background-color: #444444;
}

.grepcromancy-slider-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #000000;
  transform: translateY(-50%) translateY(2px);
}

@media (min-width: 1101px) {

  #page-content .desktop-somewhat-narrow {
    max-width: 50%;
  }

  .grepcromancy-ui-container {
    width: 50%;
    margin: auto;
  }

  .isometric-text-container {
    font-size: 200%;
    transform: rotateX(-45deg) rotateY(45deg) rotateX(90deg);
  }

  .grepcromancy-ui-isometric-container {
    min-width: 55vw;
    margin-left: 35px;
  }

  .right-margin-on-desktop {
    margin-right: 35px;
  }

}



@media (max-width: 1100px) {

  #page-content .grepcromancy-ui-container {
    font-size: 170%;
  }
}

.archive {
  color: black;
  background-color: white;
  width: 80%;
  margin: auto;
  border-radius: 30px;
  border: 1px solid black;
  filter: drop-shadow(0 0 10px black);
  max-width: 50%;
  padding: 10px;
  font-size: 75%;
  text-align: center;
  margin-bottom: 30px;
}

```
font-size: 50%; float: right;
```

filter: drop-shadow(0px 32px 10px #00000044)

filter: drop-shadow(0px 32px 10px #00000044)

```
font-weight: normal;
```
```
margin-left: 80%;
```
```
margin-left: 90%;
```
```
margin-left: 25%;
```
```
margin-left: 90%;
```
```
margin-left: 15%;
```
```
font-weight: normal;
```

display: flex; justify-content: center; align-items: center;

:scp-wiki:theme:basalt [info]

```
screen-sized-panel
```
```
hero
```
```
standalone-text
```
```
side-by-side
```
```
swap-order
```
```
main-text
```
```
main-image
```
```
side-by-side
```
```
main-image
```
```
main-text
```
```
standalone-text
```
```
side-by-side
```
```
swap-order
```
```
main-text
```
```
desktop-somewhat-narrow
```
```
isometric-text-container-container
```
```
right-margin-on-desktop
```
```
isometric-text-container
```
```
text-ai
```
```
text-user
```
```
side-by-side
```
```
isometric-text-container-container
```
```
grepcromancy-ui-isometric-container
```
```
isometric-text-container
```
```
grepcromancy-ui-container
```
```
grepcromancy-name
```
```
grepcromancy-slider
```
```
grepcromancy-slider-bg
```
```
grepcromancy-slider-thumb
```
```
grepcromancy-slider
```
```
grepcromancy-slider-bg
```
```
grepcromancy-slider-thumb
```
```
grepcromancy-slider
```
```
grepcromancy-slider-bg
```
```
grepcromancy-slider-thumb
```
```
grepcromancy-slider
```
```
grepcromancy-slider-bg
```
```
grepcromancy-slider-thumb
```
```
grepcromancy-slider
```
```
grepcromancy-slider-bg
```
```
grepcromancy-slider-thumb
```
```
main-text
```
```
standalone-text
```
```
screen-sized-panel
```
```
archive
```

[[include :scp-wiki:theme:basalt]]

[[module CSS]]
:root {
  --header-title: "𝕐 AI";
  --header-subtitle: "A subsidiary of Terblanche Enterprises LLC";
  --main-content-width: 100vw;
  --main-content-side-margin: 0;
  --main-content-top-margin: 0;
  --really-ease-out: 0, 0.99, 0, 1;
  --kinda-ease-out: 0.32, 0.83, 0.31, 0.82;
  --basalt-background-color: 0, 0, 0;
  --logo: url(https://scp-wiki.wdfiles.com/local--files/fragment%3Ay-ai-1/y-ai-1-black.png);
  --edit-area-main-background-color: 255, 255, 255;
}

body {
  background-color: #ffffff;
}

#header {
  position: fixed;
}

#page-title {
  display: none !important;
}

.screen-sized-panel {
  width: 100%;
  height: 100vh;
}

.hero {
  position: relative;
}

.hero h1 {
  font-size: 6vw;
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  max-width: 1000px;
}


.hero h2 {
  font-size: 3vw;
  position: absolute;
  top: calc(43% + 15vw);
  left: 50%;
  transform: translate(-50%, -50%);
}

.screen-sized-panel {
  font-size: 200%;
}

#page-content .main-text {
  font-size: 2.25rem;
  padding: 40px;
  font-weight: 200;
}

#page-content .standalone-text {
  max-width: 1000px;
  margin: auto;
  font-size: 2.25rem;
  font-weight: 200;
  text-align: center;
  width: min(1000px, 90%);
}

.make-font-smaller {
  font-size: 2rem;
}

.side-by-side {
  display: flex;
  align-items: center;
}

#page-content .main-image {
  width: 40vw;
  max-width: unset;
}

.force-center {
  justify-content: center;
  height: 100vh;
}

#page-content h2 {
  font-size: 800%;
  margin: auto;
  text-align: center;
  margin-top: 40vh;
  margin-bottom: 10vh;
}

@media (max-width: 1100px) {
  
  .hero h1 {
    font-size: 12vw;
  }

  #page-content h2 {
    font-size: 400%;
  }
  
  .side-by-side {
     flex-direction: column;
     justify-content: center;
  }

  .isometric-text-container-container {
    width: 75vw;
    margin: auto;
  }

  .isometric-text-container {
    width: 80vw;
    margin: auto;
  }

  #page-content .main-image {
    width: 75vw;
    max-width: unset;
  }

  .swap-order {
    flex-direction: column-reverse;
  }

  #page-content .main-text {
    font-size: 1.75rem;
  }
}

[[/module]]




[[div_ class="screen-sized-panel hero"]]

[[div style="font-size: 50%; float: right;"]]
[[module Rate]]
[[/div]]

+ New Products from 𝕐 AI
[[/div]]


[[div class="standalone-text"]]
The human brain is cursed to regress to the mean. 

Think about your first bite of a succulent meal. 

Your first paycheck. 

Your first kiss. 

These are moments you will experience once and only once, moments you'll never get to experience again.
[[/div]]

++ 𝕐Link

[[div_ class="side-by-side swap-order"]]
[[div class="main-text"]]
𝕐Link is a cranial implant powered by our amnestic technology, enabling you to witness events as if they were happening for the very first time. Never suffer the vices of the hedonic treadmill ever again. Escape the limitations of the human brain.
[[/div]]
[[image https://scp-wiki.wdfiles.com/local--files/fragment%3Ay-ai-1/ylink-chip.webp class="main-image" style="filter: drop-shadow(0px 32px 10px #00000044)"]]
[[/div]]

[[div_ class="side-by-side"]]
[[image https://scp-wiki.wdfiles.com/local--files/fragment%3Ay-ai-1/brain.webp class="main-image" style="filter: drop-shadow(0px 32px 10px #00000044)"]]
[[div class="main-text"]]
And if you've found a memory in your mind that you'd rather live without? 

Not to worry. 

You can always simply delete it.
[[/div]]
[[/div]]

[[div class="standalone-text" style="font-weight: normal;"]]
Purchase your 𝕐Link and relive your greatest memories, starting at 100 𝕐Coins per hour.
[[/div]]

++ GREPcromancy

[[module CSS]]


.isometric-text-container-container {
  width: min(90%, 800px);
  filter: drop-shadow(-15px 25px 10px #00000044);
}



#page-content .text-user {
  border-radius: 20px;
  border-bottom-right-radius: 0;
  background-color: #ff915c;
  color: white !important;
  padding: 20px;
  margin-bottom: 50px;
  max-width: 75%;
  margin-left: auto;
}

#page-content .text-ai {
  border: 1px solid #ffffff88;
  background-color: rgb(40, 40, 40);
  border-radius: 20px;
  border-bottom-left-radius: 0;
  padding: 20px;
  margin-bottom: 50px;
  max-width: 75%;
  color: white !important;
}



.grepcromancy-ui-container {
  background-image: linear-gradient(45deg, #eeeeee, #dddddd);
  color: #232323;
  padding: 30px;
  padding-bottom: 10px;
  font-size: 75%;
  transform: scale(0.9);
  border-radius: 20px;
}

#page-content .grepcromancy-name {
  font-size: 50%;

  h2 { 
    margin-top: 0;
    margin-bottom: 20px;
  }
}

.grepcromancy-slider {
  margin: 30px 10px;
}

.grepcromancy-slider-bg {
  width: 100%;
  height: 4px;
  border-radius; 2px;
  background-color: #444444;
}

.grepcromancy-slider-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #000000;
  transform: translateY(-50%) translateY(2px);
}

@media (min-width: 1101px) {

  #page-content .desktop-somewhat-narrow {
    max-width: 50%;
  }

  .grepcromancy-ui-container {
    width: 50%;
    margin: auto;
  }

  .isometric-text-container {
    font-size: 200%;
    transform: rotateX(-45deg) rotateY(45deg) rotateX(90deg);
  }

  .grepcromancy-ui-isometric-container {
    min-width: 55vw;
    margin-left: 35px;
  }

  .right-margin-on-desktop {
    margin-right: 35px;
  }

}



@media (max-width: 1100px) {

  #page-content .grepcromancy-ui-container {
    font-size: 170%;
  }
}

[[/module]]

[[div_ class="side-by-side swap-order"]]
[[div class="main-text desktop-somewhat-narrow"]]
The concept of losing your loved ones will very soon become a thing of the past with GREPcromancy -- bring your deceased, dying, or estranged loved ones back with the touch of a button, converting them into an immortal GREP virtual avatar at your beck and call for eternity.
[[/div]]
[[div class="isometric-text-container-container right-margin-on-desktop"]]
[[div class="isometric-text-container"]]
[[div_ class="text-ai"]]
My, my, you've grown so much!
[[/div]]
[[div_ class="text-user"]]
Grandma!? You're alive!?
[[/div]]
[[/div]]
[[/div]]
[[/div]]

[[div_ class="side-by-side"]]
[[div class="isometric-text-container-container grepcromancy-ui-isometric-container"]]
[[div class="isometric-text-container"]]



[[div class="grepcromancy-ui-container"]]

[[div class="grepcromancy-name"]]
++ Wife
[[/div]]

Configure the settings for your GREP virtual avatar below.

[[div class="grepcromancy-slider"]]
+++ Agreeability
[[div class="grepcromancy-slider-bg"]]
[[div class="grepcromancy-slider-thumb" style="margin-left: 80%;"]]
[[/div]]
[[/div]]
[[/div]]

[[div class="grepcromancy-slider"]]
+++ Cheerfulness
[[div class="grepcromancy-slider-bg"]]
[[div class="grepcromancy-slider-thumb" style="margin-left: 90%;"]]
[[/div]]
[[/div]]
[[/div]]

[[div class="grepcromancy-slider"]]
+++ Intelligence
[[div class="grepcromancy-slider-bg"]]
[[div class="grepcromancy-slider-thumb" style="margin-left: 25%;"]]
[[/div]]
[[/div]]
[[/div]]

[[div class="grepcromancy-slider"]]
+++ Libido
[[div class="grepcromancy-slider-bg"]]
[[div class="grepcromancy-slider-thumb" style="margin-left: 90%;"]]
[[/div]]
[[/div]]
[[/div]]


[[div class="grepcromancy-slider"]]
+++ Agency
[[div class="grepcromancy-slider-bg"]]
[[div class="grepcromancy-slider-thumb" style="margin-left: 15%;"]]
[[/div]]
[[/div]]
[[/div]]

[[/div]]



[[/div]]
[[/div]]
[[div class="main-text"]]
Craft personas for your virtual avatars, turning them into your perfect partner. With GREPcromancy, you will never be lonely. You will never have to worry about what others think. You will never be subject to their unpredictable whims.
[[/div]]
[[/div]]

[[div class="standalone-text" style="font-weight: normal;"]]
Never have to listen to your spouse's annoying laugh ever again. GREPcromancy, starting at 150 𝕐Coins per hour.
[[/div]]



[[module CSS]]
.archive {
  color: black;
  background-color: white;
  width: 80%;
  margin: auto;
  border-radius: 30px;
  border: 1px solid black;
  filter: drop-shadow(0 0 10px black);
  max-width: 50%;
  padding: 10px;
  font-size: 75%;
  text-align: center;
  margin-bottom: 30px;
}

[[/module]]

[[div_ class="screen-sized-panel" style="display: flex; justify-content: center; align-items: center;"]]

[[div class="archive"]]
+ Next Page

You are viewing an archived page from the collection 'A Brief History of Y AI'.

[[[/y-ai/offset/5 | Click here to view the next page.]]]
[[/div]] 
[[/div]]

A Brief History of Y AI - Offset 5

Module Styles

Inline Styles

Includes

CSS Classes

Page Source