/* ==========================================================================
variables
========================================================================== */
:root
{
--col-red: #b14540; /* #cc3e3e; */
--col-grn: #5fa450; /* #47b247; */
--col-blu: #2937ce; /* #3030e5; */
--col-yel: #c9b97a; /* #d7c57f; */
--col-cya: #77b4d9; /* #7ebfe8; */
--col-mag: #bb6bd6; /* #c76de4; */
/* dark versions of primary colors */
--col-rdd: 198, 40, 40;
--col-gnd: 85, 139, 47;
--col-bld: 46, 60, 136;
--col-yld: 245, 207, 10;
--col-cyd: 0, 131, 143;
--col-mgd: 123, 31, 162;
/* light versions of the primary colors */
--col-rdl: #f48980;
--col-gnl: #dcedc8;
--col-bll: #5a6cd1;
--col-yll: #fff9c4;
--col-cyl: #56cedd;
--col-mgl: #e1bee7;
--col-wht: #eee;
--col-blk: #111;
/* sceondary colors */
--col-wht2: #f0f0f0;
--col-blk2: #666;
--col-gry: #aaa;
--col-lgy: #ccc;
/* the dude */
--col-sknc: #f6e3d5; /* skin */
--col-sksc: #d9c7ab; /* skin shading */
--col-skcc: #bdae86; /* skin crease */
--col-shsc: #6b5426; /* shoes */
--col-pntc: #99d8de; /* pants */
--col-ptsc: #6bb2ba; /* pants shading */
--col-tngc: #bd9695; /* tongue! */
/* the dude */
--col-skn: #e5e5e5; /* skin */
--col-sks: #a5a5a5; /* skin shading */
--col-shs: #434343; /* shoes */
--col-pnt: #c4c4c4; /* pants */
--col-pts: #9c9c9c; /* pants shading */
--col-tng: #a3a3a3; /* tongue! */
--col-skc: #a5a5a5; /* skin crease */
}
/* ==========================================================================
fonts
========================================================================== */
@font-face { font-family: 'gotham'; src: url('/css/fnt/gotham-light-webfont.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'gotham'; src: url('/css/fnt/gotham-book-webfont.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'gotham'; src: url('/css/fnt/gotham-medium-webfont.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'gotham'; src: url('/css/fnt/gotham-bold-webfont.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'merriweather'; src: url('/css/fnt/merriweather-bold-webfont.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'merriweather'; src: url('/css/fnt/merriweather-bolditalic-webfont.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'operatormono'; src: url('/css/fnt/operatormono-book-webfont.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
/* ==========================================================================
animations
========================================================================== */
@keyframes bounce { 0% { transform: translateY(0) } 50% { transform: translateY(-1em) } 100% { transform: translateY(0) } }
@keyframes wobble { 0% { transform: rotate(-3deg) } 50% { transform: rotate(-6deg) } 100% { transform: rotate(-3deg) } }
@keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { transform: translate3d(0, -1000px, 0) } 60% { opacity: 1; transform: translate3d(0, 25px, 0) } 75% { transform: translate3d(0, -10px, 0) } 90% { transform: translate3d(0, 5px, 0) } 100% { opacity: 1; transform: none } }
@keyframes bounceOutUp { 0% { opacity: 1 } 20% { opacity: 1; transform: translate3d(0, -10px, 0) } 40%,45% { opacity: 1; transform: translate3d(0, 20px, 0) } 100% { opacity: 0; transform: translate3d(0, -100px, 0) } }
@keyframes wobble2 { 0% { transform: rotate(-2deg) } 50% { transform: rotate(2deg) } 100% { transform: rotate(-2deg) } }
@keyframes sample-gallery-2 { 0% { opacity: 0; } 10.11% { opacity: 1; } 50% { opacity: 1; } 70% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sample-gallery-3 { 0% { opacity: 0; } 6.666% { opacity: 1; } 33.333% { opacity: 1; } 46.666% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sample-gallery-4 { 0% { opacity: 0; } 5% { opacity: 1; } 25% { opacity: 1; } 35% { opacity: 0; } 100% { opacity: 0; } }
@keyframes monkey1anim { 0% { opacity: 1; } 50% { opacity: 1; } 51% { opacity: 0; } 100% { opacity: 0; } }
@keyframes monkey2anim { 0% { opacity: 0; } 49% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } }
@keyframes scroll-x-rtol { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes scroll-x-ltor { from { transform: translateX(0); } to { transform: translateX(100%); } }
/* @keyframes glow { 0% { filter: drop-shadow(0 0 .5em rgba(0,255,255,.2)); } 33% { filter: drop-shadow(0 0 .5em rgba(0,255,255,.2)); } 67% { filter: drop-shadow(0 0 .5em rgba(0,255,255,.4)); } 100% { filter: drop-shadow(0 0 .5em rgba(0,255,255,.4)); } } */
/* ==========================================================================
reset
========================================================================== */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,ins,q,s,small,strike,strong,sub,sup,var,b,u,i,ol,ul,li,form,label,article,aside,canvas,details,figure,figcaption,footer,header,hgroup,nav,output,section,summary,time,mark,audio,video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0; }
article,aside,figcaption,figure,footer,nav { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
* { margin: 0; padding: 0; }
*, *:before, *:after { box-sizing: border-box; }
button { margin: 0; padding: 0; border: 0; outline: 0; background: transparent; -webkit-appearance: none; font-family: 'gotham', Helvetica, Arial, sans-serif; font-size: 1em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button::-moz-focus-inner { padding: 0; border: 0; }
/* ==========================================================================
universal styles
========================================================================== */
body { width: 100vw; display: flex; justify-content: center; }
h1 { }
h2 { line-height: 1.618; margin: 0 auto .809em 0; font-size: clamp(1.2rem,2.25vw,2rem); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: inherit; }
h3 { font-family: merriweather, Times, 'Times New Roman', serif; font-style: italic; line-height: 1.309; margin-bottom: 1.309em; font-size: clamp(2.3125rem,3.75vw,3.25rem); font-weight: 700; text-transform: none; color: inherit; }
p { text-transform: none; line-height: 1.618; margin-bottom: 1.618em; font-weight: 400; font-size: clamp(1rem,1.5vw,1.25rem); }
p:last-of-type { margin-bottom: 0; }
p em { font-weight: bolder; text-transform: uppercase; color: inherit; }
i { display: inline-block; animation: wobble .5s infinite; cursor: help; }
a { transition: color .25s; }
p:has(a) { position: relative; z-index: 1; }
p a { font-weight: bolder; color: var(--col-wht); text-decoration: none; position: relative; z-index: 1; white-space: nowrap; margin: 0 .25em; transition: color .25s; }
p a::before { content: ''; position: absolute; z-index: -1; left: -.3em; top: -.125em; width: calc(100% + .5em); height: 1.5em; background: rgba(255,255,255,.1); pointer-events: none; transform: rotate(-3deg); transform-origin: 50% 50%; }
p a::after { content: ''; position: absolute; z-index: -1; left: auto; right: -.2em; top: -.125em; width: 0; height: 1.5em; background: var(--col-wht); pointer-events: none; transform: rotate(-3deg); transform-origin: 50% 50%; transition: width .25s; }
p a:hover { text-decoration: none; color: var(--col-blk); transition: color .25s ease .125s; }
p a:hover::after { left: -.3em; right: auto; background: var(--col-wht); width: calc(100% + .5em); }
/* ==========================================================================
custom styles
========================================================================== */
body { font: normal normal 300 100%/1 'gotham', Helvetica, Arial, sans-serif; color: #ddd; }
html, body { -webkit-overflow-scrolling: touch; height: 100%; overscroll-behavior-y: none; }
/* html, body, *, a, a:hover, button, button:hover { cursor: url('data:image/svg+xml,') 0 0, default; } */
html:has(body.nudge), body.nudge, .nudge * { cursor: url('data:image/svg+xml,') 15 15, s-resize; }
main { width: 100vw; height: auto; position: relative; z-index: 2; }
main.show { display: block; transform-origin: 50% 100%; }
section, div.scroller { width: 100%; /*min-height: calc(100vh + 5vw);*/ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: min(20vh,20vw) 12vw; position: relative; /*scroll-snap-align: end;*/ }
section:nth-of-type(1) { padding-top: min(14vh,20vw); }
div.scroller { height: 200vh; background: transparent; }
section::before, section::after { height: 10vw; left: 0; background-repeat: no-repeat; background-size: 100% 100%; content: ''; display: block; position: absolute; z-index: 2; width: 100%; pointer-events: none; }
section::before { top: -5vw; }
section:nth-of-type(1)::before { top: calc(-10vw + 1px); }
section::after { bottom: -5vw; }
section:nth-of-type(1) { background: hsl(222,16%,10%); background: #15171d; }
section:nth-of-type(2) { background: hsl(222,16%,12%); background: #191c23; }
section:nth-of-type(3) { background: hsl(222,16%,14%); background: #1d2129; }
section:nth-of-type(4) { background: hsl(222,16%,16%); background: #22262f; }
section:nth-of-type(5) { background: hsl(222,16%,18%); background: #262a35; }
section:nth-of-type(6) { background: hsl(222,16%,20%); background: #2a2f3b; }
section:nth-of-type(7) { background: hsl(222,16%,22%); background: #2f3441; }
section:last-of-type { min-height: 100vh; background: hsl(222,16%,92%); background: #E7E9ED; } /* f3f4f6 */
section:nth-of-type(1)::before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%2315171d%3B' /%3E%3C/svg%3E"); }
section:nth-of-type(1)::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,0 100,100' style='fill:%2315171d%3B' /%3E%3C/svg%3E"); }
section:nth-of-type(2)::before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,100 0,100' style='fill:%23191c23%3B' /%3E%3C/svg%3E"); }
section:nth-of-type(2)::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,0 0,100' style='fill:%23191c23%3B' /%3E%3C/svg%3E"); }
section:nth-of-type(3)::before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%231d2129%3B' /%3E%3C/svg%3E"); }
section:nth-of-type(3)::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,0 100,100' style='fill:%231d2129%3B' /%3E%3C/svg%3E"); }
section:nth-of-type(4)::before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,100 0,100' style='fill:%2322262f%3B' /%3E%3C/svg%3E"); }
section:nth-of-type(4)::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,0 0,100' style='fill:%2322262f%3B' /%3E%3C/svg%3E"); }
section:nth-of-type(5)::before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23262a35%3B' /%3E%3C/svg%3E"); }
section:nth-of-type(5)::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,0 100,100' style='fill:%23262a35%3B' /%3E%3C/svg%3E"); }
section:nth-of-type(6)::before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,100 0,100' style='fill:%23404758%3B' /%3E%3C/svg%3E"); }
section:nth-of-type(6)::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,0 0,100' style='fill:%23404758%3B' /%3E%3C/svg%3E"); }
section:last-of-type::before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,100 0,100' style='fill:%23E7E9ED%3B' /%3E%3C/svg%3E"); }
section:last-of-type::after { content: none; }
section > div.container { width: 61.818%; min-width: 40rem; position: relative; }
.loaded div.n1 { transform: translateY(0); }
.loaded .n1 svg { transform: scaleY(1); }
.loaded div.n2 { transform: scale(1); opacity: 1; }
.loaded div.n3 { transform: translateY(0); }
.loaded .n3 svg { transform: scaleY(1); }
.loaded div.n4 { transform: translateX(0) rotate(0deg); }
/* ==========================================================================
header
========================================================================== */
figure.n.rest { transform: translate(-50%, -75%) scale(.62); }
h1 { display: block; width: 75%; max-width: 40em; transform: translateY(70%) scale(1); transition: opacity .5s, transform .5s; transform-origin: 50% 50%; }
h1.show { opacity: 1; transform: translateY(140%) scale(1); }
h1 svg { width: 100%; }
h1 path { fill: #444; mix-blend-mode: screen; }
h1 path#n1 { fill: #333; }
h1 path#e1 { fill: #444; }
h1 path#t1 { fill: #555; }
h1 path#i1 { fill: #666; }
h1 path#n2 { fill: #777; }
h1 path#g1 { fill: #888; }
h1 path#r1 { fill: #999; }
h1 path#e2 { fill: #999; }
h1 path#d1 { fill: #888; }
h1 path#i2 { fill: #777; }
h1 path#e3 { fill: #666; }
h1 path#n3 { fill: #555; }
h1 path#t2 { fill: #444; }
h1 path#s1 { fill: #333; }
/* ==========================================================================
websites
========================================================================== */
/* ==========================================================================
samples
========================================================================== */
section.samples { padding-left: 0; padding-right: 0; }
.samples ul.gallery::before, .samples ul.gallery::after { content: ''; display: block; width: 35%; height: 100%; position: absolute; top: 0; z-index: 10; pointer-events: none; mix-blend-mode: darken; }
.samples ul.gallery::before { left: 0; }
.samples ul.gallery::after { right: 0; }
section:nth-of-type(2) ul.gallery::before { background-image: linear-gradient(to right,
hsla(222,16%,12%, 1) 0%,
hsla(222,16%,12%, 0.738) 19%,
hsla(222,16%,12%, 0.541) 34%,
hsla(222,16%,12%, 0.382) 47%,
hsla(222,16%,12%, 0.278) 56.5%,
hsla(222,16%,12%, 0.194) 65%,
hsla(222,16%,12%, 0.126) 73%,
hsla(222,16%,12%, 0.075) 80.2%,
hsla(222,16%,12%, 0.042) 86.1%,
hsla(222,16%,12%, 0.021) 91%,
hsla(222,16%,12%, 0.008) 95.2%,
hsla(222,16%,12%, 0.002) 98.2%,
hsla(222,16%,12%, 0) 100%); }
section:nth-of-type(2) ul.gallery::after { background-image: linear-gradient(to left,
hsla(222,16%,12%, 1) 0%,
hsla(222,16%,12%, 0.738) 19%,
hsla(222,16%,12%, 0.541) 34%,
hsla(222,16%,12%, 0.382) 47%,
hsla(222,16%,12%, 0.278) 56.5%,
hsla(222,16%,12%, 0.194) 65%,
hsla(222,16%,12%, 0.126) 73%,
hsla(222,16%,12%, 0.075) 80.2%,
hsla(222,16%,12%, 0.042) 86.1%,
hsla(222,16%,12%, 0.021) 91%,
hsla(222,16%,12%, 0.008) 95.2%,
hsla(222,16%,12%, 0.002) 98.2%,
hsla(222,16%,12%, 0) 100%); }
section:nth-of-type(5) ul.gallery::before { background-image: linear-gradient(to right,
hsla(222,16%,18%, 1) 0%,
hsla(222,16%,18%, 0.738) 19%,
hsla(222,16%,18%, 0.541) 34%,
hsla(222,16%,18%, 0.382) 47%,
hsla(222,16%,18%, 0.278) 56.5%,
hsla(222,16%,18%, 0.194) 65%,
hsla(222,16%,18%, 0.126) 73%,
hsla(222,16%,18%, 0.075) 80.2%,
hsla(222,16%,18%, 0.042) 86.1%,
hsla(222,16%,18%, 0.021) 91%,
hsla(222,16%,18%, 0.008) 95.2%,
hsla(222,16%,18%, 0.002) 98.2%,
hsla(222,16%,18%, 0) 100%); }
section:nth-of-type(5) ul.gallery::after { background-image: linear-gradient(to left,
hsla(222,16%,18%, 1) 0%,
hsla(222,16%,18%, 0.738) 19%,
hsla(222,16%,18%, 0.541) 34%,
hsla(222,16%,18%, 0.382) 47%,
hsla(222,16%,18%, 0.278) 56.5%,
hsla(222,16%,18%, 0.194) 65%,
hsla(222,16%,18%, 0.126) 73%,
hsla(222,16%,18%, 0.075) 80.2%,
hsla(222,16%,18%, 0.042) 86.1%,
hsla(222,16%,18%, 0.021) 91%,
hsla(222,16%,18%, 0.008) 95.2%,
hsla(222,16%,18%, 0.002) 98.2%,
hsla(222,16%,18%, 0) 100%); }
ul.gallery { width: 100%; display: flex; overflow: hidden; justify-content: initial; align-items: center; position: relative; }
.gallery li { width: 30%; margin: 0; padding: 0; display: flex; justify-content: center; align-items: flex-start; flex-shrink: 0; position: relative; }
.gallery li.active { }
.gallery figure { width: 90%; max-width: 600px; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
.gallery img { width: 100%; max-width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 50%; background: #111; position: relative; z-index: 2; }
.gallery li:not(:nth-child(2)) img { filter: brightness(1); }
.gallery figcaption { padding: .5em .25em; font-family: operatormono, monospace; color: var(--col-gry); font-size: .9375em; position: relative; z-index: 1; /*transform: translateY(-2em); transition: transform .25s;*/ }
.gallery figcaption a { text-decoration: none; color: inherit; }
.gallery figcaption a::after { content: '^'; display: inline-block; color: inherit; margin-left: .5em; transform: rotate(30deg); }
.gallery figcaption a:hover { text-decoration: none; color: var(--col-lgy); }
.iframe-container { width: 100%; aspect-ratio: 1; height: auto; display: inline-block; overflow: hidden; position: relative; background: #111; }
.iframe-container::before { position: absolute; left: calc(50% - 16px); top: calc(50% - 18px); opacity: 1; display: block; transform: scale(2); content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiBoZWlnaHQ9IjMycHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnIGlkPSJwaG90b18xXyI+PHBhdGggZD0iTTI3LDBINUMyLjc5MSwwLDEsMS43OTEsMSw0djI0YzAsMi4yMDksMS43OTEsNCw0LDRoMjJjMi4yMDksMCw0LTEuNzkxLDQtNFY0QzMxLDEuNzkxLDI5LjIwOSwwLDI3LDB6ICAgIE0yOSwyOGMwLDEuMTAyLTAuODk4LDItMiwySDVjLTEuMTAzLDAtMi0wLjg5OC0yLTJWNGMwLTEuMTAzLDAuODk3LTIsMi0yaDIyYzEuMTAyLDAsMiwwLjg5NywyLDJWMjh6IiBmaWxsPSIjMzMzMzMzIi8+PHBhdGggZD0iTTI2LDRINkM1LjQ0Nyw0LDUsNC40NDcsNSw1djE4YzAsMC41NTMsMC40NDcsMSwxLDFoMjBjMC41NTMsMCwxLTAuNDQ3LDEtMVY1QzI3LDQuNDQ3LDI2LjU1Myw0LDI2LDR6ICAgIE0yNiw1djEzLjg2OWwtMy4yNS0zLjUzQzIyLjU1OSwxNS4xMjMsMjIuMjg3LDE1LDIyLDE1cy0wLjU2MSwwLjEyMy0wLjc1LDAuMzM5bC0yLjYwNCwyLjk1bC03Ljg5Ni04Ljk1ICAgQzEwLjU2LDkuMTIzLDEwLjI4Nyw5LDEwLDlTOS40NCw5LjEyMyw5LjI1LDkuMzM5TDYsMTMuMDg3VjVIMjZ6IE02LDE0LjZsNC00LjZsOC4wNjYsOS4xNDNsMC41OCwwLjY1OEwyMS40MDgsMjNINlYxNC42eiAgICBNMjIuNzQsMjNsLTMuNDI4LTMuOTU1TDIyLDE2bDQsNC4zNzlWMjNIMjIuNzR6IiBmaWxsPSIjMzMzMzMzIi8+PHBhdGggZD0iTTIwLDEzYzEuNjU2LDAsMy0xLjM0MywzLTNzLTEuMzQ0LTMtMy0zYy0xLjY1OCwwLTMsMS4zNDMtMywzUzE4LjM0MiwxMywyMCwxM3ogTTIwLDhjMS4xMDIsMCwyLDAuODk3LDIsMiAgIHMtMC44OTgsMi0yLDJjLTEuMTA0LDAtMi0wLjg5Ny0yLTJTMTguODk2LDgsMjAsOHoiIGZpbGw9IiMzMzMzMzMiLz48L2c+PC9zdmc+"); }
.iframe-wrapper { transform: scale(0.25); transform-origin: 0 0; width: 400%; height: 400%; }
.frogger .iframe-wrapper { transform: scale(.325); transform-origin: -5.5% -7.5%; }
.tron .iframe-wrapper { transform: scale(.5); transform-origin: -25% -25%; }
.iframe-wrapper iframe { opacity: 0; width: 100%; height: 100%; transition: all 1s; }
.iframe-wrapper:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
/* ==========================================================================
monkey business games
========================================================================== */
.monkey_business h2 { width: clamp(18rem, 90vw, 48rem); font-size: 1rem; line-height: initial; margin: initial; font-weight: initial; letter-spacing: initial; text-transform: initial; color: initial; }
.monkey_business h2 svg { pointer-events: none; }
.monkey_business h2 #monkey, .monkey_business h2 #monkey2, .monkey_business h2 #business { fill: var(--col-wht); }
.monkey_business h2 #vine-games { transform: translateY(-13%); opacity: 0; transition: transform .25s cubic-bezier(0.05, 0.5, 0.36, 1.94), opacity .125s; }
.monkey_business h2 #games { /*animation: glow .125s linear infinite;*/ fill: #00ffff; transform-origin: 49.7778% 62.4444%; transition: transform .375s cubic-bezier(0.61, -1.12, 0.46, 2.23) .125s; transform: rotate(0); }
.monkey_business h2 #vine #leaves { fill: #00ff00; }
.monkey_business h2 #vine #lt { fill: #ffe2b4; }
.monkey_business h2 #vine #rt { fill: #ffa500; }
.monkey_business h2 #crt-vine, .games h2 #crt-games { fill: #ffa8ff; mix-blend-mode: multiply; }
.monkey_business h2 #monkey { opacity: 1; animation: monkey1anim .5s infinite; }
.monkey_business h2 #monkey2 { opacity: 0; animation: monkey2anim .5s infinite; }
.monkey_business h2.visible #vine-games { transform: translateY(0); opacity: 1; }
.monkey_business h2.visible #games { transform: rotate(-5deg); }
/* ==========================================================================
games
========================================================================== */
/* ==========================================================================
the dude
========================================================================== */
figure.dude { display: block; width: min(80vw,80vh); height: min(64vw,64vh) /* 80% of width */; }
figure.dude svg { width: 100%; height: 100%; }
figure.dude svg g:hover { cursor: pointer; }
figure.dude svg path { transition: fill .25s }
figure.dude svg .skin { fill: var(--col-skn); }
figure.dude svg .skin-shade { fill: var(--col-sks); }
figure.dude svg .shoes { fill: var(--col-shs); }
figure.dude svg .pants { fill: var(--col-pnt); }
figure.dude svg .pants-shade { fill: var(--col-pts); }
figure.dude svg .tongue { fill: var(--col-tng); }
figure.dude svg .skin-crease { fill: var(--col-skc); }
figure.dude svg * { transform-box: fill-box; }
figure.dude svg g.dude-speech g.arm-right { transform-origin: 60% 20%; transition: transform .375s cubic-bezier(0.64, 0.57, 0.67, 1.53); }
figure.dude svg g.dude-speech:hover g.arm-right { transform: translate(12%, 4%) rotate(16deg); }
figure.dude svg g.dude-speech g.body { transform-origin: 100% 90%; transition: transform .25s ease; }
figure.dude svg g.dude-speech:hover g.body { transform: rotate(-6deg) translate(2%, 2%); }
figure.dude svg g.dude-speech g.legs { transform-origin: 30% 100%; transition: transform .25s ease; }
figure.dude svg g.dude-speech:hover g.legs { transform: rotate(6deg); }
figure.dude svg g.dude-speech g.speech { transform-origin: 56% 32%; transition: transform .375s cubic-bezier(0.64, 0.57, 0.67, 1.53); }
figure.dude svg g.dude-speech:hover g.speech { transform: rotate(6deg) translate(-9%, 7%); }
figure.dude svg g:hover .skin { fill: var(--col-sknc); }
figure.dude svg g:hover .skin-shade { fill: var(--col-sksc); }
figure.dude svg g:hover .shoes { fill: var(--col-shsc); }
figure.dude svg g:hover .pants { fill: var(--col-pntc); }
figure.dude svg g:hover .pants-shade { fill: var(--col-ptsc); }
figure.dude svg g:hover .tongue { fill: var(--col-tngc); }
figure.dude svg g:hover .skin-crease { fill: var(--col-skcc); }
.form-on figure.dude, .form-on main, .form-on header { pointer-events: none; }
body.form-on { height: 100vh; overflow: hidden; /*background: #bbb;*/ }
/* ==========================================================================
contact form
========================================================================== */
form { width: 100%; max-height: 90vh; padding: 5% 10%; margin: 0 auto; font-size: 1.125em; background-color: #fff; transform: translateY(0); transition: transform .25s; }
.form-on form { transform: translateY(calc(-100%)); box-shadow: 0 -1px 1px rgba(0,0,0,.025), 0 -2px 2px rgba(0,0,0,.025), 0 -4px 4px rgba(0,0,0,.025), 0 -8px 8px rgba(0,0,0,.025); }
.form-on section.content { /*transform: scale(.95) translate3d(0,0,0); filter: blur(3px) brightness(.75);*/ /*filter: blur(3px);*/ }
form div { width: 100%; display: flex; border-bottom: 1px var(--col-lgy) solid; padding: 1em 0; position: relative; }
form div.required::after { content: '*'; position: absolute; right: 0; top: 1.25em; color: var(--col-blk); }
form div:last-child { border-bottom: none; }
form div:nth-last-child(2) { border-style: dashed; border-color: #ddd; padding-top: .5em; }
form div:nth-last-child(4), form div:nth-last-child(4) * { height: 0; padding: 0; border: none; /* visibility: hidden; */ overflow: hidden; }
form div:last-child { justify-content: flex-end; }
form label { font-size: 1em; line-height: 100%; color: var(--col-gry); transform: translateY(1px); }
form div:nth-last-child(2) label { position: absolute; top: 0; left: 0; padding: 1em .5em .5em 0; background: #fff; }
form input[type=text], form input[type=email], form textarea { width: 100%; background: transparent; border: none; font-family: 'gotham', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 1em; color: var(--col-blk2); line-height: 100%; outline: none; }
form input[type=text]:focus, form input[type=email]:focus, form textarea:focus { color: var(--col-blk); }
form input[type=text], form input[type=email] { padding: 0 1em; }
form textarea { height: 9.5em; resize: none; text-indent: 5.5em; line-height: 2; padding-right: 1em; }
form input::placeholder, form textarea::placeholder { color: var(--col-cya); font-size: inherit; line-height: inherit; font-family: 'gotham', Helvetica, Arial, sans-serif; }
form input:focus::placeholder, form textarea:focus::placeholder { color: var(--col-cyl); }
form input.invalid { color: var(--col-red); }
form input.invalid::placeholder, form textarea.invalid::placeholder { color: rgb(var(--col-rdd)); }
form button { font-family: 'gotham', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 500; line-height: 1; color: rgb(var(--col-cyd)); text-transform: uppercase; letter-spacing: .05em; }
form button.cancel { opacity: 1; }
form button.cancel:disabled { opacity: .25; cursor: default; }
form button.cancel:focus { color: var(--col-cya); }
form button.send { background: var(--col-cya); color: var(--col-wht); /* box-shadow: 0 1px 1px rgba(var(--col-cyd),.15), 0 2px 2px rgba(var(--col-cyd),.15), 0 4px 4px rgba(var(--col-cyd),.15), 0 6px 8px rgba(var(--col-cyd),.15), 0 8px 16px rgba(var(--col-cyd),.15); */ box-shadow: 4px 4px 0 0 rgba(var(--col-cyd),.25); }
form button.send:disabled { cursor: default; }
form button.send:focus { background: var(--col-cyl); }
form button.send:not(:disabled):hover { background: rgb(var(--col-cyd)); }
form button.send:not(:disabled):active { transform: translateY(2px); box-shadow: 2px 2px 0 0 rgba(var(--col-cyd),.375); }
form.sending button.send:hover, form.sent button.send:hover { background: var(--col-cya); pointer-events: none; }
form button span { position: relative; display: block; padding: 0.8em 1.5em 0.8em; }
form button.send span { padding: 0.8em 3.5em 0.8em 1em; }
form.sending button.send span, form.sent button.send span { color: transparent; transition: background .25s, color 0s; }
form button.send span::before { content: ' '; opacity: 0; }
form.sending button.send span::before, form.sent button.send span::before { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; padding: 0.75em 0 0; color: var(--col-wht); text-align: center; opacity: 1; }
form.sending button.send span::before { content: 'Sending...'; }
form.sent button.send span::before { content: 'Sent!'; }
form.sent button.sending, form.sent button.send { pointer-events: none; }
form button.send span::after { content: ''; background: rgba(0,0,0,0.1) url(/img/icon-plane.svg) no-repeat 50% 50%; background-size: 40% auto; display: block; width: 2.5em; height: 100%; position: absolute; top: 0; right: 0; margin-left: .5em; transition: background-position .25s; }
form.sending button.send span::after, form.sent button.send span::after { content: none; }
form button.send:hover span:after { background-position: 60% 40%; }
/* ==========================================================================
audio button
========================================================================== */
button.sound { display: initial; font-size: .875em; position: fixed; z-index: 100; top: 1em; right: 1em; width: 2.25em; height: calc(1em + 6px); border: 1px #aaa solid; border-radius: 1em; cursor: pointer; transition: top .375s cubic-bezier(0.64, 0.57, 0.67, 1.53), width .25s ease .375s; }
button.sound::before { content: ''; width: 1em; height: 1em; background: rgba(71,178,71,0); border: 1px #aaa solid; position: absolute; left: 2px; top: 2px; border-radius: 50%; transition: left .25s, background .25s; }
button.sound::after { content: 'sound'; position: absolute; bottom: -1.5em; left: 0; display: block; width: 100%; text-align: center; font-size: .625em; color: #aaa; letter-spacing: .075em; opacity: 1; transition: bottom .25s ease .5s, opacity .25s ease .5s, color .25s; pointer-events: none; }
button.sound.on::before { left: calc(1.25em - 3px); background: rgba(71,178,71,1); }
button.sound.on::after { color: var(--col-grn); }
button.sound.hide { top: -2em; width: 1.4em; }
button.sound.hide::after { bottom: -0; opacity: 0; }
/* ==========================================================================
media queries
========================================================================== */
@media only screen and (max-width: 60em) /* 960 */
{
.gallery li { width: 40%; }
}
@media only screen and (max-width: 47.9375em) /* 767 */
{
section { padding-left: 10vw; padding-right: 10vw; }
section > div.container { width: 100%; min-width: initial; }
figure.dude { width: min(100vw,100vh); height: min(80vw,80vh); }
div.form { width: 100vw; right: 0; }
form { font-size: 1rem; padding: 5% 5% 1.5vh; }
form input[type=text], form input[type=email] { padding: 0 .5em; }
form textarea { height: 25vh; text-indent: 5em; }
}
@media only screen and (max-width: 40em) /* 640 */
{
section { padding-left: 8vw; padding-right: 8vw; }
.samples ul.gallery::before, .samples ul.gallery::after { width: 20%; }
.gallery li { width: 60%; }
figure.dude svg g .skin { fill: var(--col-sknc); }
figure.dude svg g .skin-shade { fill: var(--col-sksc); }
figure.dude svg g .shoes { fill: var(--col-shsc); }
figure.dude svg g .pants { fill: var(--col-pntc); }
figure.dude svg g .pants-shade { fill: var(--col-ptsc); }
figure.dude svg g .tongue { fill: var(--col-tngc); }
figure.dude svg g .skin-crease { fill: var(--col-skcc); }
}
@media only screen and (max-width: 25em) /* 400 */
{
.samples ul.gallery::before, .samples ul.gallery::after { width: 14%; }
.gallery li { width: 72%; }
}
@media only screen and (max-height: 30em) and (orientation: landscape) /* 480px & landscape */
{
form div { padding: .5em 0; }
form div.required::after { top: .75em; }
form div:nth-last-child(2) label { padding: .5em .5em .25em 0; }
form { padding: 2.5% 10% 10vh; font-size: 1rem; }
form textarea { height: 16vh; line-height: 1.125; }
}