diff options
Diffstat (limited to 'ps/ui/css/rideau.css')
| -rw-r--r-- | ps/ui/css/rideau.css | 274 |
1 files changed, 274 insertions, 0 deletions
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; + +} |