summaryrefslogtreecommitdiff
path: root/assets/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/style.css')
-rw-r--r--assets/style.css845
1 files changed, 845 insertions, 0 deletions
diff --git a/assets/style.css b/assets/style.css
new file mode 100644
index 0000000..2ca71b4
--- /dev/null
+++ b/assets/style.css
@@ -0,0 +1,845 @@
+@font-face {
+ font-family: 'BellGothic-Light';
+ src: url('fonts/BellGotLig.eot');
+}
+
+@font-face {
+ font-family: 'BellGothic-Light';
+ src: url('fonts/BellGotLig.woff') format('woff'),
+ url('fonts/BellGotLig.svg#BellGothic-Light') format('svg');
+}
+
+@font-face {
+ font-family: 'BellGothic-Bold';
+ src: url('fonts/BellGotBol.eot');
+}
+
+@font-face {
+ font-family: 'BellGothic-Bold';
+ src: url('fonts/BellGotBol.woff') format('woff'),
+ url('fonts/BellGotBol.svg#BellGothic-Bold') format('svg');
+}
+.loading * {
+ -webkit-transition: none !important;
+ -moz-transition: none !important;
+ -ms-transition: none !important;
+ -o-transition: none !important;
+}
+
+
+*, *:active{
+ outline:0;
+ box-sizing: border-box;
+}
+::selection {
+ background: #000;
+ color:white;
+}
+::-moz-selection {
+ background: #000;
+ color:white;
+}
+html,body{
+ width:100%;
+ height:100%;
+ margin:0;
+ padding:0;
+ box-sizing: border-box;
+ text-rendering: optimizeLegibility;
+}
+body {
+ background: #eee;
+ font-family: 'BellGothic-Light';
+ font-size:16px;
+}
+/*! Flickity v1.0.0
+http://flickity.metafizzy.co
+---------------------------------------------- */
+
+.flickity-enabled {
+ position: relative;
+}
+
+.flickity-enabled:focus { outline: none; }
+
+.flickity-viewport {
+ overflow: hidden;
+ position: relative;
+ height: 100%;
+}
+
+.flickity-slider {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+}
+
+/* draggable
+
+.flickity-enabled.is-draggable {
+-webkit-user-select: none;
+-moz-user-select: none;
+-ms-user-select: none;
+user-select: none;
+}
+
+.flickity-enabled.is-draggable .flickity-viewport {
+cursor: move;
+cursor: -webkit-grab;
+cursor: grab;
+}
+
+.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
+cursor: -webkit-grabbing;
+cursor: grabbing;
+}
+*/
+
+/* ---- previous/next buttons ---- */
+
+.flickity-prev-next-button {
+ position: absolute;
+ top: 50%;
+ width: 44px;
+ height: 44px;
+ border: none;
+ border-radius: 50%;
+ background: white;
+ background: hsla(0, 0%, 100%, 0.75);
+ cursor: pointer;
+ /* vertically center */
+ -webkit-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+}
+
+.flickity-prev-next-button:hover { background: white; }
+
+.flickity-prev-next-button:focus {
+ outline: none;
+ box-shadow: 0 0 0 5px #09F;
+}
+
+.flickity-prev-next-button:active {
+ filter: alpha(opacity=60); /* IE8 */
+ opacity: 0.6;
+}
+
+.flickity-prev-next-button.previous { left: 10px; }
+.flickity-prev-next-button.next { right: 10px; }
+/* right to left */
+.flickity-rtl .flickity-prev-next-button.previous {
+ left: auto;
+ right: 10px;
+}
+.flickity-rtl .flickity-prev-next-button.next {
+ right: auto;
+ left: 10px;
+}
+
+.flickity-prev-next-button:disabled {
+ filter: alpha(opacity=30); /* IE8 */
+ opacity: 0.3;
+ cursor: auto;
+}
+
+.flickity-prev-next-button svg {
+ position: absolute;
+ left: 20%;
+ top: 20%;
+ width: 60%;
+ height: 60%;
+}
+
+.flickity-prev-next-button .arrow {
+ fill: #333;
+}
+
+/* color & size if no SVG - IE8 and Android 2.3 */
+.flickity-prev-next-button.no-svg {
+ color: #333;
+ font-size: 26px;
+}
+
+/* ---- page dots ---- */
+
+.flickity-page-dots {
+ position: absolute;
+ width: 100%;
+ bottom: -25px;
+ padding: 0;
+ margin: 0;
+ list-style: none;
+ text-align: center;
+ line-height: 1;
+}
+
+.flickity-rtl .flickity-page-dots { direction: rtl; }
+
+.flickity-page-dots .dot {
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ margin: 0 8px;
+ background: #333;
+ border-radius: 50%;
+ filter: alpha(opacity=25); /* IE8 */
+ opacity: 0.25;
+ cursor: pointer;
+}
+
+.flickity-page-dots .dot.is-selected {
+ filter: alpha(opacity=100); /* IE8 */
+ opacity: 1;
+}
+#scene {
+ position: absolute;
+ transition: 0.2s margin-left, 0.2s opacity;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ cursor: -webkit-grab;
+ cursor: -moz-grab;
+ cursor: grab;
+}
+#scene:active {
+ cursor: -webkit-grabbing;
+ cursor: -moz-grabbing;
+}
+
+nav {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ z-index:6;
+ color:black;
+ font-size:0.8em;
+ text-transform: uppercase;
+ display: table;
+ background: white;
+ height:100vh;
+ position: fixed;
+ width: 160px;
+ left:0;
+ opacity:0.8;
+ -moz-transform: translateX(-160px) scale(0.7, 1) skewY(-5deg);
+ -webkit-transform: translateX(-160px) scale(0.7, 1) skewY(-5deg);
+ transform: translateX(-160px) scale(0.7, 1) skewY(-5deg);
+ -moz-transition: 0.2s -webkit-transform, 0.4s opacity;
+ -webkit-transition: 0.2s -webkit-transform, 0.4s opacity;
+ transition: 0.2s transform, 0.4s opacity;
+}
+.toplogo {
+ width:130px;
+ margin: 55px 7px 0px 7px;
+ opacity: 0.8;
+ margin-bottom: 0.6em;
+ border-top: 1px solid #222;
+ padding-top: 10px;
+}
+.toplogo:hover {
+ cursor:pointer;
+ opacity:1;
+}
+.menuActive nav {
+ opacity:1;
+ -moz-transform:translateX(0%)scale(1)skewY(0deg);
+ -webkit-transform:translateX(0%)scale(1)skewY(0deg);
+ transform:translateX(0%)scale(1)skewY(0deg);
+}
+
+nav .top, nav .middle, nav .bottom {
+ display: table-row;
+ width: 100%;
+ overflow:hidden;
+}
+
+nav .top {
+ background: ghostwhite;
+}
+
+nav .top .cat:first-child {
+ margin-top:30px;
+}
+nav .middle {
+ background: #ddd;
+}
+
+nav .bottom {
+ width: 100%;
+ background: #44D3D3;
+}
+nav a {
+ text-decoration:none;
+ display:inline-block;
+ width:100%;
+ color:black;
+}
+
+nav .cat:hover {
+ cursor:pointer;
+ background:#eee;
+}
+
+
+nav a.active:hover {
+ cursor:default;
+}
+nav .cat {
+ padding: 3px 0 3px 10px;
+}
+
+nav .cat.active {
+ cursor: default;
+ display: inline-block;
+ font-family: 'BellGothic-Bold';
+}
+nav .top .cat.active:hover {
+ background:transparent;
+}
+
+.middle .cat.active, .bottom .cat.active {
+ background:#eee;
+ width:100%;
+ font-family: 'BellGothic-Light';
+}
+
+nav .sub {
+ display:inline;
+ overflow:hidden;
+ max-height:0;
+ transition:0.7s max-height linear;
+ width:100%;
+}
+
+nav .sub.active {
+ display: inline-block;
+ max-height:180px;
+}
+
+nav .sub a {
+ height:0;
+ max-height:0;
+ position:absolute;
+ display:inline-block;
+ overflow:hidden;
+ width:0;
+ opacity:0;
+ cursor:pointer;
+ float: left;
+ -moz-transform:translateY(-5px)scale(0.7, 0.9)skew(30deg);
+ -webkit-transform:translateY(-5px)scale(0.7, 0.9)skew(30deg);
+ transform:translateY(-5px)scale(0.7, 0.9)skew(30deg);
+ -moz-transition:0.7s -moz-transform linear, 0.2s opacity ease-in, 0.4s max-height linear;
+ -webkit-transition:0.7s -webkit-transform linear, 0.2s opacity ease-in, 0.4s max-height linear;
+ transition:0.7s transform linear, 0.2s opacity ease-in, 0.4s max-height linear;
+}
+
+nav .sub a:nth-child(1) {
+ transition:0.2s transform linear, 0.2s opacity ease-in, 0.4s max-height linear;
+}
+
+nav .sub a:nth-child(2) {
+ transition:0.4s transform linear, 0.4s opacity ease-in, 0.4s max-height linear;
+}
+nav .sub a:nth-child(3) {
+ transition:0.6s transform linear, 0.6s opacity ease-in, 0.4s max-height linear;
+}
+
+nav .sub a:nth-child(4) {
+ transition:0.8s transform linear, 0.8s opacity ease-in, 0.4s max-height linear;
+}
+nav .sub a:nth-child(5) {
+ transition:1s transform linear, 1s opacity ease-in, 0.4s max-height linear;
+}
+
+nav .sub a:nth-child(6) {
+ transition:1.1s transform linear, 1.1s opacity ease-in, 0.4s max-height linear;
+}
+
+nav .sub a:nth-child(7) {
+ transition:1.2s transform linear, 1.2s opacity ease-in, 0.4s max-height linear;
+}
+
+nav .sub a:nth-child(8) {
+ transition:1.3s transform linear, 1.3s opacity ease-in, 0.4s max-height linear;
+}
+
+nav .sub a:nth-child(9) {
+ transition:1.4s transform linear, 1.4s opacity ease-in, 0.4s max-height linear;
+}
+
+nav .sub a:nth-child(10) {
+ transition:1.5s transform linear, 1.5s opacity ease-in, 0.4s max-height linear;
+}
+
+nav .sub a:nth-child(11) {
+ transition:1.6s transform linear, 1.6s opacity ease-in, 0.4s max-height linear;
+}
+
+
+nav .sub.active a {
+ height:auto;
+ position:relative;
+ width:100%;
+ max-height:40px;
+ padding: 3px 0 5px 20px;
+ opacity:1;
+ -webkit-transform:translateY(0)scale(1)skew(0deg);
+ -moz-transform:translateY(0)scale(1)skew(0deg);
+ transform:translateY(0)scale(1)skew(0deg);
+}
+
+nav a.active, nav .sub a:hover {
+ text-decoration:none;
+ background:#eee;
+ color:black;
+}
+
+.entry {
+ color: #333;
+ float: left;
+ padding: 40px 20px;
+ border-bottom: 0;
+ margin-bottom: 2em;
+ display: inline-block;
+ width: 80%;
+ width: calc(87% - 80px);
+ margin-left: 160px;
+}
+.entry h1{
+ margin-bottom: 1.2em;
+ border-bottom: 1px solid;
+ font-size: 0.6em;
+ letter-spacing:0.1em;
+}
+.entry span{
+ float: left;
+ width: 100%;
+}
+
+.postname {
+ border-bottom: 1px solid #999;
+ padding: 20px 0px 0.6em 2px;
+ margin-bottom: 1em;
+ font-size: 1em;
+}
+
+
+.credit {
+ margin: 4em 0px 0px 0px;
+ padding: 11px 0px;
+ border-top: 1px solid;
+ float: left;
+ width: 100%;
+ color: #909090;
+}
+
+.credit a {
+ display:inline-block;
+ opacity:0.9;
+}
+.credit a:hover {
+ opacity:1;
+}
+
+.credit a img {
+ width:18px;
+}
+
+.mx-object3d .image{
+ box-shadow:5px -10px 20px rgba(0,0,0,0.1);
+}
+
+
+.entry h1 {
+ margin-bottom: 10px;
+ border-bottom: 0px solid;
+
+}
+
+.entry span div.content {
+ max-width:100%;
+ font-size: 0.8em;
+ line-height: 1.5em;
+ float:left;
+ padding-top:20px;
+ border-top:1px solid #999;
+ width:100%;
+ -webkit-column-count: 3;
+ -moz-column-count: 3;
+ column-count: 3;
+}
+.entry span div.content div {
+ width:50%;
+ -webkit-column-count: 3;
+ -moz-column-count: 3;
+ column-count: 3;
+}
+
+
+#scene_container {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+#entry_container {
+ position: absolute;
+ top: 0; left: 0;
+ height: 100%;
+ overflow: auto;
+ transition: left 0.2s linear, opacity 0.2s;
+ width: 100%;
+}
+
+
+.entry.page img{
+ max-width:100%;
+ max-height: 420px;
+}
+
+.gallery {
+ width: 100%;
+ height: 60vh;
+ overflow: hidden;
+ float:left;
+ display:inline-block;
+ cursor: url(images/next.png), auto!important;
+ background: url(images/dither.gif);
+}
+.cell {
+ display:inline-block;
+ height:100%;
+ cursor: url(images/next.png), auto!important;
+}
+.cell.video {
+ width: 80%;
+ background-size: cover;
+ background-position: center center;
+}
+.cell.video.playing {
+ background: black !important;
+}
+.cell.video.playing .play {
+ display: none;
+}
+.cell.video .play {
+ background-image: url(images/play-button2.png);
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center center;
+ position: absolute;
+ cursor: pointer !important;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translateX(-50%) translateY(-50%);
+ transform: translateX(-50%) translateY(-50%);
+ width: 100px;
+ height: 100px;
+ opacity: 0.7;
+ z-index: 4;
+}
+.cell.video .play:hover {
+ opacity: 1.0;
+}
+.cell iframe {
+ width: 100%;
+ height: 100%;
+ opacity:0.2;
+ -webkit-transition:0.4s opacity ease-in;
+ transition:0.4s opacity ease-in;
+ pointer-events: none;
+}
+.cell iframe {
+ height: 200%;
+ -webkit-transform: translateY(-25%);
+ transform: translateY(-25%);
+}
+.fullscreen {
+ text-align: right;
+}
+
+:-webkit-full-screen #okgallery {
+ width: 100%;
+ height: 100%;
+}
+
+.gallery:fullscreen,
+*:-webkit-full-screen .gallery,
+*:fullscreen .gallery {
+ width: 100%;
+ height: 100%;
+}
+
+:-webkit-full-screen #okgallery {
+ width: 100%;
+ height: 100%;
+}
+.full-screen #okgallery {
+ width: 100%;
+ height: 100%;
+}
+:-webkit-full-screen .cell.video,
+.full-screen .cell.video {
+ width: 100%;
+}
+
+.caption {
+ background: rgb(223, 223, 223);
+ text-transform: uppercase;
+ float: left;
+ clear: both;
+ width: 100%;
+ padding: 2px;
+ font-size: 0.67em;
+ margin-bottom: 10px;
+}
+.caption:after {
+ content:"VIEW IN FULLSCREEN";
+ text-align:right;
+ float: right;
+ opacity:0.5;
+ cursor:pointer;
+}
+.caption:hover {
+ background:#222;
+ color:#222;
+ cursor:pointer;
+}
+.caption:hover::after {
+ color:white;
+ opacity:1;
+}
+.cell img {
+ max-height:100%;
+ opacity:0.0;
+ transition:0.4s opacity ease-in;
+}
+.cell img.loaded {
+ opacity: 0.2;
+}
+.cell.is-selected img, .cell.is-selected iframe {
+ opacity:1;
+ pointer-events: auto;
+}
+.cell .mask {
+ z-index: 2;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0; left: 0;
+}
+.cell.playing .mask {
+ pointer-events: none;
+}
+.logo {
+ position: fixed;
+ right: 10px;
+ bottom: 10px;
+ width: 6%;
+ max-width:120px;
+ min-width: 45px;
+}
+.logo img {
+ width:100%;
+}
+.toggleRapper {
+ width: 50px;
+ position: fixed;
+ top: 0;
+ left: 0;
+ padding: 25px 4px;
+ z-index: 5555;
+ cursor: pointer;
+ height: 20px;
+}
+.menuToggle {
+ display:block;
+ height:3px;
+ width:30px;
+ background:black;
+ position:relative;
+ cursor: pointer;
+ transition:all 0.2s;
+}
+.menuToggle:before {
+ content:'';
+ position:absolute;
+ top:-10px;
+ width:30px;
+ height:3px;
+ background:#000;
+ transition:all 0.2s;
+}
+.menuToggle:after {
+ content:'';
+ position:absolute;
+ top:10px;
+ width:30px;
+ height:3px;
+ background:#000;
+ transition:all 0.2s;
+}
+.menuActive .menuToggle {
+ background:transparent;
+}
+
+.menuActive .menuToggle:before {
+ -webkit-transform:rotate(45deg);
+ -moz-transform:rotate(45deg);
+ transform:rotate(45deg);
+ top:0;
+}
+
+.menuActive .menuToggle:after {
+ -webkit-transform:rotate(-45deg);
+ -moz-transform:rotate(-45deg);
+ transform:rotate(-45deg);
+ top:0;
+}
+
+.project {
+ float: left;
+ width: 33.33333%;
+ height: 220px;
+ padding: 10px;
+ cursor: pointer;
+ opacity: 0.0;
+ font-size: 0.8em;
+ max-width: 300px;
+ transition: 0.1s opacity ease-in;
+ transition-delay:0.4s;
+}
+.ready .project:hover {
+ opacity: 1.0;
+}
+.project img {
+ width: 100%;
+}
+.ready .project {
+ opacity: 0.8;
+}
+.done.ready .project {
+ transition-delay: 0;
+}
+.project:nth-child(1) {
+ transition-delay:0.05s;
+}
+.project:nth-child(2) {
+ transition-delay:0.1s;
+}
+.project:nth-child(3) {
+ transition-delay:0.15s;
+}
+.project:nth-child(4) {
+ transition-delay:0.2s;
+}
+.project:nth-child(5) {
+ transition-delay:0.25s;
+}
+.project:nth-child(6) {
+ transition-delay:0.3s;
+}
+.project:nth-child(7) {
+ transition-delay:0.35s;
+}
+
+#entry_container.visible {
+ top: 0%;
+}
+
+.postname, .gallery, .mainimg, .caption, .content, .credit {
+ -webkit-transform-origin: 100% 10%;
+ transform-origin: 100% 10%;
+ -webkit-transform: rotateY(90deg) ;
+ transform: rotateY(90deg);
+}
+.ready .postname, .ready .gallery, .ready .mainimg, .ready .caption, .ready .content, .ready .credit {
+ -webkit-transform: rotateY(0deg);
+ transform: rotateY(0deg);
+}
+
+.postname {
+ -webkit-transition: -webkit-transform 0.2s;
+ transition: transform 0.2s;
+ -webkit-transition-delay: 0.0s;
+ transition-delay: 0.0s;
+}
+.gallery, .mainimg {
+ -webkit-transition: -webkit-transform 0.2s;
+ transition: transform 0.1s;
+ -webkit-transition-delay: 0.1s;
+ transition-delay: 0.1s;
+}
+.caption {
+ -webkit-transition: -webkit-transform 0.2s;
+ transition: transform 0.2s;
+ -webkit-transition-delay: 0.2s;
+ transition-delay: 0.2s;
+}
+.content {
+ -webkit-transition: -webkit-transform 0.2s;
+ transition: transform 0.2s;
+ -webkit-transition-delay: 0.3s;
+ transition-delay: 0.3s;
+}
+.credit {
+ -webkit-transition: -webkit-transform 0.2s;
+ transition: transform 0.2s;
+ -webkit-transition-delay: 0.4s;
+ transition-delay: 0.4s;
+}
+
+
+
+@media (max-width:1200px) {
+ .entry span div.content {
+ -webkit-column-count: 2;
+ -moz-column-count: 2;
+ column-count: 2;
+ }
+
+}
+
+@media (max-width:600px) {
+ .entry span div.content {
+ -webkit-column-count: 1;
+ -moz-column-count: 1;
+ column-count: 1;
+ }
+ #entry_container .entry {
+ width:100%;
+ margin-left:0;
+ }
+ .logo img {
+ width:50px;
+ }
+ .gallery{
+ height:37vh;
+ }
+ .caption:after {
+ content:"";
+ }
+ .project {
+ width: 100%;
+ padding: 0 0 0 25px;
+ height: 260px;
+ }
+ .menuActive #entry_container {
+ left:160px;
+ }
+ body{
+ font-size: 18px;
+ }
+}
+.mobile .cell iframe {
+ position: fixed; /* REALLY WEIRD, vimeo won't play without this! */
+ width: 80%;
+ opacity:0.2;
+ transition:0.4s opacity ease-in;
+ z-index: 2;
+}
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 14:16:42 +0000