Add existing ps.l.o site

8 files changed, 1464 insertions, 0 deletions

diff --git a/ps/ui/css/dpdg.css b/ps/ui/css/dpdg.css
new file mode 100644
index 0000000..f41de8b
--- /dev/null
+++ b/ps/ui/css/dpdg.css
@@ -0,0 +1,22 @@
+body {
+    font-family: 'Cormorant Garamond';
+}
+
+main {
+    margin: 0 auto;
+    width: 80%;
+}
+
+main article {
+    padding: 2%;
+    font-size: 150%;
+    max-width: 60rem;
+}
+
+section {
+    margin-top: 10rem;
+}
+
+section h3 + p, h2 + p {
+    font-size: 150%;
+}
\ No newline at end of file
diff --git a/ps/ui/css/dppg.css b/ps/ui/css/dppg.css
new file mode 100644
index 0000000..c7ad3dd
--- /dev/null
+++ b/ps/ui/css/dppg.css
@@ -0,0 +1,8 @@
+body {
+    font-family: 'Cormorant Garamond';
+}
+
+main {
+    margin: 0 auto;
+    width: 80%;
+}
\ No newline at end of file
diff --git a/ps/ui/css/home.css b/ps/ui/css/home.css
new file mode 100644
index 0000000..32f3896
--- /dev/null
+++ b/ps/ui/css/home.css
@@ -0,0 +1,33 @@
+/* Declare variables */
+:root {
+    /* colors */
+    --grey95: rgba(0,0,0,.95);
+    --grey30: rgba(0,0,0,.3);
+
+    --color:  var(--grey95);
+    /* transformations */
+    /* animations */
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html, body { overflow: hidden; height: 100%; }
+
+body.home {
+    background: var(--grey30);
+    color: var(--color);
+    position: absolute;
+    left: 0;
+    right: 0;
+}
+
+body > main {
+    position: relative;
+    margin: 4rem auto;
+    right: calc(100% - 3%);
+    left: calc(0% + 3%);
+}
\ No newline at end of file
diff --git a/ps/ui/css/parallax.css b/ps/ui/css/parallax.css
new file mode 100644
index 0000000..97a12f9
--- /dev/null
+++ b/ps/ui/css/parallax.css
@@ -0,0 +1,188 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html, body { overflow: hidden; height: 100%; }
+
+body {
+    background: url(../img/logo-ps.svg) center center / contain no-repeat fixed, rgba(0,0,0,0.97);
+    color: rgba(250,250,250,1);
+    transform: translateZ(0px);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+:link,
+:visited {
+    color: rgba(255,255,255,.8);
+    text-decoration: none;
+    font-family: 'Cormorant Garamond';
+    font-weight: 600;
+    text-transform: capitalize;
+}
+
+.slides {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    perspective: 42rem;
+    perspective-origin: bottom right;
+}
+
+.slide {
+    display: flex;
+    flex-flow: row wrap;
+    background: rgba(0,100,200,.31);
+    color: rgba(250,250,250,1);
+    width: 100%;
+    min-height: 100%;
+    border: 2px solid;
+    overflow: hidden;
+    transform-style: preserve-3d;
+    transform: translateZ(0);
+    position: relative;
+    padding: 40% 5%;
+}
+.slide .bg {
+    background: repeating-linear-gradient( rgba(102, 204, 102, .4), rgba(102, 204, 102, .3) 30px, rgba(92, 184, 92, .4) 30px, rgba(92, 184, 92, .5) 60px ),
+    url(../../media/x62.png) top left, rgba(170, 204, 0, 0.1);
+    background-attachment: fixed;
+    background-size: cover;
+    background-repeat: yes;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: -1;
+    opacity: 0.8;
+    /*    transform: translateZ(-150px) scale(3) translateX(3.6rem) rotate(85.5deg) translateY(5rem) rotateZ(8deg); */
+    transform: scale(3);
+    transform-style: preserve-3d;
+    transform-origin: 100% 100%;
+}
+.slide:nth-child(odd) {
+    background: rgba(60,130,120,.51);
+}
+.slide:nth-child(odd) .bg {
+    transform: scale(2) translateZ(-200px);
+}
+.slide:nth-child(2n+1) .bg {
+    background: repeating-linear-gradient( rgba(102, 204, 102, .4), rgba(102, 204, 102, .3) 30px, rgba(92, 184, 92, .4) 30px, rgba(92, 184, 92, .5) 60px ),
+    url(../../media/x42.png) top left, rgba(170, 4, 120, 0.1);
+}
+
+.slide:nth-child(1) .bg {
+    transform-origin: 0 0;
+    background: url(../img/w1.svg) top left repeat-y,
+    url(../img/w2.svg) top left repeat-y,
+    url(../img/w3.svg) top left / 10% repeat-y,
+    url(../img/w4.svg) top left / 10% repeat-y, 
+    rgba(0,0,0,1);
+    background-attachment: fixed;
+    background-size: contain;
+    animation: flow-y 40s infinite ease-in-out;
+}
+
+.slide:nth-child(1) .bg::before {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: -1;
+    opacity: 0.8;
+    transform-origin: 0 0;
+    background: url(../img/w1.svg) center center repeat-y,
+    url(../img/w2.svg) left center repeat-y,
+    url(../img/w3.svg) left center repeat-y,
+    url(../img/w4.svg) center center repeat-y, 
+    rgba(0,255,0,.7);
+    background-attachment: fixed;
+    background-size: contain;
+    animation: flow-r 40s infinite ease-in-out;
+}
+
+@keyframes flow-y {
+    50% { background-position: 0 11rem , 0 -22rem, 0 55rem, 0 -110rem, 0 30rem;  }
+}
+@keyframes flow-r {
+    50% { background-position: 0 -1rem , 0 2rem, 0 -5rem, 0 10rem, 0 -30rem;  }
+}
+    
+.sine {
+    text-align: center;
+}
+.sine_span {
+    display: inline-block;
+    margin:0;
+    padding:0;
+    height: 20px;
+    width: 40px;
+    border: 1px solid black;
+}
+.sine_span_first {
+    border-bottom: none;
+    border-radius: 20px 20px 0 0;
+    transform: translate(-20px, 0) scale(2,1);
+}
+.sine_span_second {
+    border-top: none;
+    border-radius: 0 0 20px 20px;
+    transform: translate(20px, 20px) scale(2,1);
+}
+.sine_span_first_2 {
+    transform: translate(0, 20px) scale(1,2);
+}
+.sine_span_second_2 {
+    transform: translate(0, 60px) scale(1,2);
+}
+
+
+nav {
+    position: fixed;
+    z-index: 50;
+    bottom: 0;
+    width: 100%;
+    background: rgba(90,60,20,.9);
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-end;
+}
+
+@media screen and (max-width: 1024px) {
+    nav {
+	justify-content: space-around;
+    }
+}
+@media screen and (max-width: 640px) {
+    nav {
+	flex-flow: column wrap;
+	width: 0%;
+    }
+    nav li {
+	display: block;
+    }
+}
+
+nav > ul {
+    display: block;
+    list-type: none;
+    padding: 0.5rem;
+    background: rgba(200,120,40,.4);
+}
+nav li {
+    margin: 0;
+    display: inline-block;
+    padding: 0;
+    
+}
diff --git a/ps/ui/css/reset.css b/ps/ui/css/reset.css
new file mode 100644
index 0000000..54c5d62
--- /dev/null
+++ b/ps/ui/css/reset.css
@@ -0,0 +1,429 @@
+@charset "utf-8";
+
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
diff --git a/ps/ui/css/rideau.css b/ps/ui/css/rideau.css
new file mode 100644
index 0000000..8522229
--- /dev/null
+++ b/ps/ui/css/rideau.css
@@ -0,0 +1,274 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+@font-face {
+	font-family: 'Cormorant Garamond';
+	src: local('Cormorant Garamond Regular'),
+		 local('CormorantGarmaond-Regular'),
+	     local('Cormorant Garamond'),
+		 url('../fonts/cormorant-garamond.woff2') format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+
+html, body { overflow: hidden; height: 100%; }
+
+body {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background: url(../img/logo-ps.svg) center center / contain no-repeat fixed, rgba(173, 151, 56, 0.68);
+    color: rgba(250,250,250,1);
+    transform: translateZ(0px);
+}
+
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Cormorant Garamond';
+}
+h1 {
+    font-size: 2rem;
+}
+
+:link,
+:visited {
+    color: rgba(255,255,255,.8);
+    text-decoration: none;
+    font-family: 'Cormorant Garamond';
+    font-weight: 600;
+    text-transform: capitalize;
+}
+
+article {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 3rem;
+    height: auto;
+    vertical-align: middle;
+    color: rgba(0,0,0,.98);
+}
+
+
+iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    margin: 0;
+    padding: 0;
+    border: none;
+}
+.fold:hover iframe {
+    overflow-x: hidden;
+}
+
+.folds {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    bottom: 0;
+}
+
+.fold {
+    display: inline-block;
+    flex-flow: row wrap;
+    background: rgba(0,100,200,.31);
+    color: rgba(45, 0, 93, 0.7);
+    width: 15%;
+    height: 100%;
+    max-height: 100%;
+    margin-left: -5%;
+    border: 2px solid;
+    overflow: hidden;
+    transform-style: preserve-3d;
+    transform: translateZ(0);
+    position: relative;
+    bottom: 0;
+    transition: 250ms ease-in all;
+    z-index: 2;
+}
+
+.fold.right {
+    float: right;
+    margin-left: -5%;
+}
+
+.fold:hover {
+    position: relative;
+    width: 50%;
+    margin-left: -10%;
+    transform: rotateZ(0deg);
+    z-index: 7;
+    opacity: 1;
+    background-opacity: 1;
+    background: rgba(0,100,200,.81);
+    height: 100%;
+    bottom: 1.5rem;
+    top: 0;
+}
+.fold article {
+    display: none;
+    position: absolute;
+}
+.fold:hover article {
+    display: block;
+    bottom: 2rem;
+}
+
+/* DPDG */
+.fold:nth-child(1) {
+    transform: rotateZ(-3deg);
+    z-index: 4;
+}
+.fold:nth-child(1):hover {
+    margin-left: 0;
+    transform: rotateZ(0deg) translateX(5%) scale(1);
+    z-index: 7;
+}
+.fold:nth-child(1):hover > article {
+    display: block;
+    top: 50%;
+    width: 80%;
+    margin: 2rem auto;
+    padding: 2rem;
+}
+
+/* VDO */
+.fold:nth-child(2) {
+    transform: rotateZ(2deg);
+    z-index: 5;
+}
+.fold:nth-child(2):hover {
+    margin-left: 0;
+    transform: rotateZ(0deg) translateX(5%) scale(1);
+    z-index: 7;
+}
+/* QW */
+.fold:nth-child(3) {
+    transform: rotateZ(-1deg);
+    z-index: 6;
+}
+.fold:nth-child(3):hover {
+    margin-left: 0;
+    transform: rotateZ(0deg) translateX(5%) scale(1);
+    z-index: 7;
+}
+/* .fold.right */
+/* KRTO */
+.fold:nth-child(4) {
+    transform: rotateZ(2deg);
+    z-index: 6;
+}
+.fold:nth-child(4):hover {
+    margin-right: 0;
+    transform: rotateZ(0deg) translateX(-5%) scale(1);
+    z-index: 7;
+}
+/* β×λ */
+.fold:nth-child(5) {
+    transform: rotateZ(1deg);
+    z-index: 5;
+}
+.fold:nth-child(5):hover {
+    margin-right: 0;
+    transform: rotateZ(0deg) translateX(-5%) scale(1);
+    z-index: 7;
+}
+/* SFYW */
+.fold:nth-child(6) {
+    transform: rotateZ(-1deg);
+    z-index: 4;
+}
+.fold:nth-child(6):hover {
+    margin-right: 0;
+    transform: rotateZ(0deg) translateX(-5%) scale(1);
+    z-index: 7;
+}
+
+.fold:nth-child(odd) .bg {
+    transform-origin: 0 0;
+    background: url(../img/w1.svg) top left repeat-y,
+    url(../img/w2.svg) top left repeat-y,
+    url(../img/w3.svg) top left / 10% repeat-y,
+    url(../img/w4.svg) top left / 10% repeat-y, 
+    rgba(0,0,0,1);
+    background-attachment: fixed;
+    background-size: contain;
+    animation: flow-y 40s infinite ease-in-out;
+}
+
+.fold:nth-child(odd) .bg::before {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: -1;
+    opacity: 0.8;
+    transform-origin: 0 0;
+    background: url(../img/w1.svg) center center repeat-y,
+    url(../img/w2.svg) left center repeat-y,
+    url(../img/w3.svg) left center repeat-y,
+    url(../img/w4.svg) center center repeat-y, 
+    rgba(0,255,0,.7);
+    background-attachment: fixed;
+    background-size: contain;
+    animation: flow-r 40s infinite ease-in-out;
+}
+
+@keyframes flow-y {
+    50% { background-position: 0 11rem , 0 -22rem, 0 55rem, 0 -110rem, 0 30rem;  }
+}
+@keyframes flow-r {
+    50% { background-position: 0 -1rem , 0 2rem, 0 -5rem, 0 10rem, 0 -30rem;  }
+}
+
+nav {
+    position: fixed;
+    z-index: 50;
+    bottom: 0;
+    width: 100%;
+    background: rgba(90,60,20,.9);
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-end;
+}
+
+@media screen and (max-width: 1024px) {
+    nav {
+	justify-content: space-around;
+    }
+}
+@media screen and (max-width: 640px) {
+    nav {
+	flex-flow: column wrap;
+	width: 0%;
+    }
+    nav li {
+	display: block;
+    }
+}
+
+nav > ul {
+    display: block;
+    list-type: none;
+    padding: 0.5rem;
+    background: rgba(200,120,40,.4);
+}
+nav li {
+    margin: 0;
+    display: inline-block;
+    padding: 0;
+    
+}
diff --git a/ps/ui/css/screen.css b/ps/ui/css/screen.css
new file mode 100644
index 0000000..802c20a
--- /dev/null
+++ b/ps/ui/css/screen.css
@@ -0,0 +1,411 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background: url(../img/logo-ps.svg) center center / contain no-repeat fixed, rgba(0,0,0,0.97);
+    color: rgba(250,250,250,1);
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+body.grid {
+    position: absolute;
+    width: 16800px;
+    height: 10500px;
+}
+
+body.grid .viewport {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    grid-template-rows: auto;
+    grid-template-areas: "border-top-left border-top border-top border-top border-top border-top border-top border-top border-top border-top-right"
+			     "border-left main main main main main main main main border-right"
+			     "border-left main main main main main main main main border-right"			     
+			     "border-left main main main main main main main main border-right"
+			     "border-left main main main center center main main main border-right"			     
+			     "border-left main main main center center main main main border-right"
+			     "border-left main main main main main main main main border-right"			     
+			     "border-left main main main main main main main main border-right"
+			     "border-left main main main main main main main main border-right"			     
+			     "border-bottom-left border-bottom border-bottom border-bottom border-bottom border-bottom border-bottom border-bottom border-bottom border-bottom-right";
+}
+
+body.grid section.view {
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 1680px;
+    height: 1050px;
+    background: rgba(250, 240, 20, .4);
+    display: block;
+    float: left;
+    grid-area: main;
+    border: 1px solid;
+}
+body.grid section.view:nth-child(odd) {
+    background: rgba(250, 240, 20, .8);
+}
+body.grid section.view:nth-child(10n+0)::after {
+    display: table;
+    content: '';
+    clear: both;
+}
+
+body.grid section.view.center {
+    grid-area: center;
+    background: rgba(255,120,20, .8);
+}
+
+body.grid section.view:nth-child(10n) {
+    grid-area: border-right;
+    background: rgba(255,120,20, .6);
+}
+body.grid section.view:nth-child(10n):first-child {
+    grid-area: border-top-right;
+    background: rgba(255,120,20, .7);
+}
+body.grid section.view:nth-child(10n):last-child {
+    grid-area: border-bottom-right;
+    background: rgba(255,120,20, .7);
+}
+
+body.grid section.view:nth-child(10n+1) {
+    grid-area: border-left;
+    background: rgba(255,120,20, .6);
+}
+body.grid section.view:nth-child(10n+1):first-child {
+    grid-area: border-top-left;
+    background: rgba(255,120,20, .7);
+}
+body.grid section.view:nth-child(10n+1):last-child {
+    grid-area: border-bottom-left;
+    background: rgba(255,120,20, .7);
+}
+
+#info {
+    position: fixed;
+    top: 10rem;
+    left: 10rem;
+    width: 42rem;
+    min-height: 19rem;
+    z-index: 99;
+    padding: 1rem;
+    background: rgba(0,0,0,.75);
+    border: 1rem solid rgba(140,160,100,1);
+    border-radius: 2rem;
+    border-top-left-radius: 0;
+    display: block;
+    color: blue;
+    opacity: 0.25;
+}
+
+#info.on {
+    color: black;
+    opacity: 1;
+    transition: all 2s ease-out 0s;
+}
+#info.on::after {
+    display: block;
+    content: 'Information Panel';
+    text-align: center;
+    font-family: 'Cormorant Garamond';
+    font-weight: bold;
+    font-size: 2.4rem;
+    position: relative;
+    top: -5rem;
+}
+
+#info ul.features li::before {
+    content: attr(data-feature) + ' is: NOT SUPPORTED.';
+    color: #f00;
+    display: block;
+}
+#info ul.features li::after {
+    content: attr(data-feature) + ' is: DISABLED.';
+    color: #c00;
+}
+
+.slides {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    perspective: 30rem;
+    perspective-origin: 100% 100%;
+}
+
+.slide, .slide-content {
+    transform-style: preserve-3d;
+    transform: translateZ(0); /* hw accel */
+}
+.slide-bg {
+    transform: translateZ(-20rem) scale(1.5);
+    transform-origin: 100% 100%;
+    background-image: repeating-linear-gradient( rgb(102, 204, 102), rgb(102, 204, 102) 30px, rgb(92, 184, 92) 30px, rgb(92, 184, 92) 60px );
+}
+
+
+.vdo {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 0 auto;
+    vertical-align: center;
+    width: 100%;
+    height: 100%;
+}
+
+
+
+/* Only add parallax effects to supporting browsers -- http://keithclark.co.uk/articles/practical-css-parallax/ */
+@supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch))) {
+
+    #info ul.features li::before {
+	content: attr(data-feature) + ' is: SUPPORTED.';
+	color: #0c0;
+    }
+    @media screen and (min-width: 45em) {
+	#info ul.features li::after {
+	    content: attr(data-feature) + ' is: ENABLED.';
+	    color: #090;
+	}
+    }
+
+    body {
+	transform: translateZ(0px); /* Fix paint bugs on Edge and HW accel on Safari */
+	overflow: hidden;
+    }
+
+    body.grid {
+	perspective: auto;
+	transform-origin: center center;
+	transform: translateZ(0);
+	perspective: 150rem;
+	transform-origin: top left;
+    }
+
+    body.shift {
+	animation: colorshift 5s 3s 3 ease-in-out;
+	perspective: 1px;
+	transform-origin: center center;
+    }
+
+    .vdo {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: calc(100% + 0px);
+	height: calc(100% + 0px);
+	margin: auto;
+	z-index: 9;
+    }
+
+    .vdo .player {
+	position: relative;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	display: block;
+	opacity: 0.25;
+    }
+    .vdo .player:hover {
+	transition: all 3s ease-out;
+	opacity: .95;
+    }
+
+    .vdo .player video {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	opacity: 1;
+    }
+
+
+
+
+
+    
+    .anim {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	z-index: 1;
+	background: green;
+
+    	transition:
+	top 3s cubic-bezier(.34,.63,.26,.94),
+	left 3s cubic-bezier(.34,.63,.26,.94),
+	transform 1s linear;
+    }
+
+    
+
+    .anim.container {
+	position: relative;
+	top: 10rem;
+	left: 10rem;
+	width: 10rem;
+	height: 10rem;
+	background: green;
+	
+	transform: rotateX(90deg);
+	transform-style: preserve-3d;
+	overflow: visible;
+
+	transition:
+	top 3s cubic-bezier(.34,.63,.26,.94),
+	left 3s cubic-bezier(.34,.63,.26,.94),
+	transform 1s linear;
+    }
+
+    div.butterfly {
+	transform-style: preserve-3d;
+        position: absolute;
+        top: calc(7.5rem);
+        left: calc(50% - 7.5rem);
+    	display: block;
+        width: 15rem;
+        height: 15rem;
+        border: 1px solid white;
+        border-radius: 50%;
+        animation: moveXY 2s infinite ease-out;
+	transform-origin: center center;
+    }
+    .wing {
+	transform-style: preserve-3d;
+        animation: flap 1.2s linear infinite alternate;
+        background: radial-gradient(ellipse at center, rgba(252, 180, 100, 0.9) 32%,rgba(28, 92, 42, 0.9) 100%);
+    	display: block;
+	   position: relative;
+        top: 30%;
+        margin-top: -1.5rem;
+        padding: 1rem;
+        border-bottom: 0.2rem solid green;
+        width: 6rem;
+        height: 8rem;
+        border-radius: 50%;
+    }
+    .rear.wing {
+        transform: scale(1.5);
+        margin-top: -6rem;
+	width: 5rem;
+	height: 10rem;
+        background: radial-gradient(ellipse at center, rgba(252, 180, 100, 0.9) 2%,rgba(28, 92, 42, 0.9) 100%);
+    }
+    .rear.left {
+        left: calc(50% - 5rem);
+    }
+    .rear.right {
+	left: calc(50% + 0px);
+    }
+    .left {
+        transform-origin: right center;
+        left: calc(50% - 6.2rem);
+        float: left;
+    }
+    .right {
+        transform-origin: left center;
+        left: calc(50% + 2px);
+    }
+
+
+    .triangle-left{
+	width: 0;
+	height: 0;
+	border-top: 50px solid transparent; /* this will fill the top gap */
+	border-right: 100px solid red; /* this will be the red triangle */
+	border-bottom: 50px solid transparent; /* this will fill the bottom gap */
+    }
+    
+    .triangle-right {
+	width: 0;
+	height: 0;
+	border-top: 50px solid transparent; /* this will fill the top gap */
+	border-left: 100px solid red; /* this will be the red triangle */
+	border-bottom: 50px solid transparent; /* this will fill the bottom gap */
+    }
+
+    .entry {
+	position: relative;
+	min-height: 40rem;
+	text-align: center;
+    }
+
+    .entry div {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+    }
+    .entry div::before,
+    .entry div::after {
+	position: absolute;
+	content: '';
+	display: block;
+   }
+
+    #building::after {
+	padding: 5rem;
+	content: 'Singularités';
+	left: -0.5rem;
+	top: 3.5rem;
+	color: #faf37e;
+	overflow: hidden;
+	font-size: 2.3rem;
+	text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 25px #ffa500, 0 0 40px #ffa500, 0 0 60px #f00, 0 0 80px #f00, 0 0 105px #f00;
+    }
+
+    
+    
+    @keyframes colorshift {
+	58% { background-color: rgba(77,13,158, .95); }
+    }
+
+    @keyframes shake {
+	0%   { background-position: 50% 50%; transform: scale(1,1); }
+	45%  { background-position: 45% 50%; transform: scale(.085,.095); }
+	75%  { background-position: 50% 45%; }
+	100% { background-position: 50% 50%; transform: scale(1,1); }
+    }
+    
+    @keyframes moveX {
+	0%   { transform: translateX(0%); }
+	100% { transform: translateX(100%); }
+    }
+
+    @keyframes moveY {
+	0%   { transform: translateY(0%); }
+	100% { transform: translateY(100%); }
+    }
+
+    @keyframes moveZ {
+	0%   { transform: translateZ(0%); }
+	100% { transform: translateZ(100%); }
+    }
+
+    @keyframes moveXY {
+	0%   { transform: translateX(0) translateY(0) translateZ(0) rotateX(45deg) rotateX(0); }
+	50%  { transform: translateX(-20rem) rotateX(-15deg) translateY(30rem); translateZ(1rem); rotateY(2deg); }
+	100% { transform: translateX(0) translateY(-20rem) translateZ(-1rem) rotateX(45deg); }
+    }
+
+    @keyframes flap {
+	0%   {
+	    transform: rotateY(80deg);
+	}
+	100% {
+	    transform: rotateY(-80deg);
+	}
+    }
+
+} /* Parallax Stuff */
+
diff --git a/ps/ui/css/waves.css b/ps/ui/css/waves.css
new file mode 100644
index 0000000..113443b
--- /dev/null
+++ b/ps/ui/css/waves.css
@@ -0,0 +1,99 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html, body { overflow: hidden; height: 100%; }
+
+body {
+    background: url(../img/logo-ps.svg) center center / contain no-repeat fixed, rgba(0,0,0,0.97);
+    color: rgba(250,250,250,1);
+    transform: translateZ(0px);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+:link,
+:visited {
+    color: rgba(255,255,255,.8);
+    text-decoration: none;
+    font-family: 'Cormorant Garamond';
+    font-weight: 600;
+    text-transform: capitalize;
+}
+
+.slides {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    perspective: 42rem;
+    perspective-origin: bottom right;
+}
+
+.slide {
+    display: flex;
+    flex-flow: row wrap;
+    background: rgba(0,100,200,.31);
+    color: rgba(250,250,250,1);
+    width: 100%;
+    min-height: 100%;
+    overflow: hidden;
+    transform-style: preserve-3d;
+    transform: translateZ(0);
+    position: relative;
+    padding: 40% 5%;
+}
+.slide .bg {
+    background: url(../img/w1.svg) top left repeat-y,
+    url(../img/w2.svg) top left repeat-y,
+    url(../img/w3.svg) top left / 10% repeat-y,
+    url(../img/w4.svg) top left / 10% repeat-y, 
+    rgba(0,0,0,1);
+    background-attachment: fixed;
+    background-size: contain;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: -1;
+    opacity: 0.8;
+    transform: scale(2);
+    transform-style: preserve-3d;
+    transform-origin: 0 0;
+    animation: flow-y 40s infinite ease-in-out;
+}
+
+.slide:nth-child(1) .bg::before {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: -1;
+    opacity: 0.8;
+    transform-origin: 0 0;
+    background: url(../img/w1.svg) center center repeat-y,
+    url(../img/w2.svg) left center repeat-y,
+    url(../img/w3.svg) left center repeat-y,
+    url(../img/w4.svg) center center repeat-y, 
+    rgba(0,255,0,.7);
+    background-attachment: fixed;
+    background-size: contain;
+    animation: flow-r 40s infinite ease-in-out;
+}
+
+@keyframes flow-y {
+    50% { background-position: 0 11rem , 0 -22rem, 0 55rem, 0 -110rem, 0 30rem;  }
+}
+@keyframes flow-r {
+    50% { background-position: 0 -1rem , 0 2rem, 0 -5rem, 0 10rem, 0 -30rem;  }
+}
\ No newline at end of file