/* ```` * .:oyhmNNNNNNNmdyo/. * `/ymNMmhyo+/:::/+oshmNNmy/. * :yNMms/.` `.:sdMNh/ * /dMNy:` `-sNMm/ * .hMNs. `oNMd- * /NMh- .yMN+ * +MMs` +MMo * :MMs +MM+ * `mMd `-::::` `-::::. `-::::. `.::-` yMN. * +MM- `-dMMN. `.hMMM- .hMMM- .m+. .MMs * dMm .mMMs `dMMh` `dMMh / dMm * NMh :NMM/ .mMMs .mMMo sMM` * mMd /MMN- -NMM/ :NMM: yMM * yMN` oMMd` /MMN. +MMN. mMd * :MM+ yMN` oMM- sMN. :MM+ * hMN. `h+ ys ys `mMm` * .mMd. ` `` `` `hMN- * .mMd- .hMN: * .hMNo` `+NMd. * +mMm+. `/dMm+` * `+mMms:` `-smMmo. * `:ymMmho:.``` ```.:+ymMNh/` * `:ohmNNmdhhyyyhhdmNNmds:. * `.:/ossyyyyso+:-` * * * w-v.co — Weston Vierregger, Designer & Optimist. * * Seattle, WA * me@w-v.co */ /* FONTS, LICENSES, & ICON STYLES ================================================== */ /* * Legal Disclaimer * * These Fonts are licensed only for use on these domains and their subdomains: * w-v.co * * It is illegal to download or use them on other websites. * * While the @font-face statements below may be modified by the client, this * disclaimer may not be removed. * * Lineto.com, 2014 */ @font-face { font-family: "LLCircular-Book"; src: url("../fonts/Circular.eot"); src: url("../fonts/Circular.eot?#iefix") format("embedded-opentype"), url("../fonts/Circular.woff") format("woff"), url("../fonts/Circular.ttf") format("truetype"), url("../fonts/Circular.svg#LLCircularWeb-Book") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "LLReplicaMono"; src: url("../fonts/Replica-Mono.eot"); src: url("../fonts/Replica-Mono.eot?#iefix") format("embedded-opentype"), url("../fonts/Replica-Mono.woff") format("woff"), url("../fonts/Replica-Mono.ttf") format("truetype"), url("../fonts/Replica-Mono.svg#LLReplicaMonoWeb-Regular") format("svg"); font-weight: normal; font-style: normal; } .oi { font-size:45%; position:relative; margin-right:1rem; display: block; float: left; top: 0.1rem; } /* MASTER STYLES ================================================== */ * { border: 0; margin: 0; padding: 0; } ul, li { list-style: none } html, body { width: 100%; min-height: 100%; height: auto !important; height: 100%; position: absolute; overflow: visible; -moz-font-feature-settings: "liga=1, dlig=1"; -ms-font-feature-settings: "liga", "dlig"; -webkit-font-feature-settings: "liga", "dlig"; -o-font-feature-settings: "liga", "dlig"; font-feature-settings: "liga", "dlig"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } html { font-size: 75% } body { background-color: #ddd; font-size: 1.8rem; color: #333; } a { -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } a { color: #333; border-bottom: 0.12rem solid #333; text-decoration: none; } a:hover { opacity: 0.5 } h1, h2, h3, h4 { font-weight: normal; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } h1 { font-size: 5.25rem } h2 { font-size: 4.8rem } h3 { font-size: 3.6rem } h4 { font-size: 2.4rem } /* HEADER STYLES ================================================== */ header { font-family: 'LLCircular-Book', sans-serif; width: 100%; position: fixed; margin: auto; top: 0; padding: 3.6rem 0; z-index: 420; /* Header Transition stuff */ -webkit-transition: all 0.666s; -moz-transition: all 0.666s; -o-transition: all 0.666s; transition: all 0.666s; } .header-content { width: 80%; margin: 0 auto; max-width: 1440px; } .header-logo { float: left; width: 25%; margin: 0.8rem 0; } .logo { cursor: pointer; border: none; } .logo svg { fill: #333 } .logo:before { margin: -15px 0 0 -9px; border-radius: 50%; border: 3px solid #333; position: absolute; content: ''; width: 48px; height: 48px; z-index: -100; } .logo:before, .logo svg { -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .logo:hover { opacity: 1 } .logo:hover:before { background: #333 } .logo:hover svg { fill: #ddd } .header-nav { width: auto; float: left; width: 75%; font-size: 1.6rem; margin-top: 0.4rem; } .header-nav a { float: right; margin-left: 2.4rem; border-bottom-width: 0px; } .header-nav a:hover { border-bottom-width: 3px } .header-nav a.active { cursor: pointer; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; transition: all 0.1s ease; border-bottom-width: 3px; } /* MAIN STYLES ================================================== */ .wrapper, .project-wrapper { float: left; width: 80%; margin: 0 10%; padding-bottom: 7.2rem; } .main { font-family: "LLCircular-Book",sans-serif; margin: 3.6rem auto 0px; padding: 14.4rem 0px 5rem; height: auto; transition: all 0.5s ease 0s; width: 100%; max-width: 1440px; } .goodbye { opacity: 0 } /* FILTER STYLES ================================================== */ #filters, #projects { width: 100%; text-align: left; } #filters { margin-bottom: 1.6rem; margin-top: -2rem; } #filters div { font-family: "LLReplicaMono", 'Andale Mono', monospace; font-size: 1.2rem; display: inline; margin-right: 0.7rem; border: 1px solid #333; border-radius: 0.5rem; padding: 0.5rem 1rem; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } #filters div:hover { opacity: 1 } #projects a, #filters div { line-height: 7.2rem; cursor: pointer; } #projects a { margin: 0 2rem 0 0; font-size: 5.25rem; display: block; float: left; white-space: nowrap; } #projects a:hover { color: #999; } /* PROJECT STYLES ================================================== */ .dark { -webkit-transition: background-color 0.666s; -moz-transition: background-color 0.666s; -o-transition: background-color 0.666s; transition: background-color 0.666s; } .project-bg { background-color: #333 } .project-header .logo svg { fill: #ddd } .project-header .logo:before { border-color: #ddd } .project-header .logo:hover svg { fill: #333 } .project-header .logo:hover:before { background: #ddd } .project-header .header-nav a { color: #ddd; border-color: #ddd; } .project-name { margin: 0; font-size: 4.8rem; } .project-info { color: #ddd; width: 25%; float: left; position: fixed; } .project-info ul, .project-info p { margin: 2.4rem 0 } .project-info ul { list-style: none; opacity: 0.5; font-size: 1.2rem; font-family: "LLReplicaMono", 'Andale Mono', monospace; margin-bottom: 2.4rem; } .project-info ul a { color: #aaa; border-color: #aaa; } .project-info { -webkit-transition: opacity 0.25s; -moz-transition: opacity 0.25s; -o-transition: opacity 0.25s; transition: opacity 0.25s; } awards { font-size: 1.2rem; line-height: 100%; } awards span.oi { font-size: 120% !important; display: block; opacity: 0.5; top: 0.65rem; margin-right: 0.75rem; } .next { color: #ddd; border: 1px solid #ddd; padding: 0.9rem 1.2rem 0.9rem; border-radius: 50%; opacity: 0.5; font-size: 1.2rem; } .next:last-child { margin-left: 1.2rem; padding: 0.8rem 1.1rem 1rem; top: 25.6rem; } .next:hover { opacity: 1 } .project-info:hover { opacity: 1 !important; cursor: default; } .project-images { width: 85%; float: left; overflow: hidden; margin-left: 15%; } .project-images img, .project-images div, .project-images video { width: 100%; margin-bottom: 2.4rem; font-size: 1.6rem; } .project-images video { z-index: -1; margin-bottom: -57.5%; } #slideshow { white-space: nowrap; display: block; line-height: 100px; overflow: hidden; } #slideshow div { display: inline-block; vertical-align: middle; text-align: center; width: 100%; height: 100%; } #slideshow div img { margin: 0; max-width: 100%; max-height: 100%; } /* ANIMATION ================================================== */ slides { animation: slide 12s cubic-bezier(0.725, 0.005, 0.395, 1.000) infinite; -webkit-animation: slide 12s cubic-bezier(0.725, 0.005, 0.395, 1.000) infinite } @keyframes slide { 25% { margin-left: 0 } 30% { margin-left: -100% } 55% { margin-left: -100% } 60% { margin-left: -200% } 85% { margin-left: -200% } 90% { margin-left: 0 } } @-webkit-keyframes slide { 25% { margin-left: 0 } 30% { margin-left: -100% } 55% { margin-left: -100% } 60% { margin-left: -200% } 85% { margin-left: -200% } 90% { margin-left: 0 } } /* BRAND COLORS ================================================== */ .tomdouglas { border-bottom: 3px solid yellow } .line { border-bottom: 3px solid chartreuse } .redbull { border-bottom: 3px solid tomato } .union { border-bottom: 3px solid orange } .aereo { border-bottom: 3px solid turquoise } .boeing { border-bottom: 3px solid lightslategray } .clarkes { border-bottom: 3px solid firebrick } .bungalow { border-bottom: 3px solid plum } .boss { border-bottom: 3px solid dimgray } .core { border-bottom: 3px solid gold } .noct { border-bottom: 3px solid #2AFD9D } .rebls { border-bottom: 3px solid #28ACE2 } /* SPECIAL BREAKS */ .boeing, .noct, .clarkes, .core { clear:left; } /* ABOUT & CV ================================================== */ .creepy { position: relative; text-decoration: none; border-bottom: 0.35rem solid yellow; top: 7.2rem; } .hilarious svg { height: 1.2rem; width: 1.2rem; fill: #ddd; } .cv-col a { color: #ddd; border-bottom-color: #ddd; cursor: pointer; } .cv-header-wrapper { position: absolute; width: 80%; margin: 0 auto; max-width: 1440px; } .cv-header { font-family: 'LLCircular-Book', sans-serif; position: fixed; color: #ddd; border-bottom: 0.35rem solid #3295FF; font-size: 5.6rem; margin-left: -2.4rem; top: 60rem; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); transform-origin: top left; } .cv-buttons { width: 80%; display: block; margin: -50px auto 50px; } .cv-back { display: block; width: 50%; color: #ddd; border: none; margin: 0 auto; float: left; opacity: 0.5; } .cv-print { display: block; width: 50%; color: #ddd; border: none; margin: 0 auto; float: left; opacity: 0.5; } .cv-back:hover, .cv-print:hover { opacity: 1 } .cv-box { cursor: default; border-top: 1px solid #ddd; margin: 2rem auto; clear: both; padding-top: 1.8rem; display: block; width: 80%; color: #ddd; opacity: 0.5; line-height: 125%; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .cv-box:hover { opacity: 1 } .cv-section { width: 15%; margin-right: 5%; float: left; } .cv-info { margin-right: 0; width: 80%; float: right; } .cv-col { width: 32.75%; margin-right: 5%; margin-bottom: 4.8rem; float: left; } .cv-col:nth-child(2n), .dev { width: 62.25%; margin-right: 0; } .cv-details { color: #888; font-size: 1.2rem; font-family: "LLReplicaMono", 'Andale Mono', monospace; } .cv-details-summary { opacity: 0; clear: left; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .cv-details-summary.visible { opacity: 1 } .cv-details .arrow { bottom: 3px; position: relative; display: block; bottom: 1px; float: left; margin-right: 1rem; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .cv-details .arrow.turn { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .no-clients { margin: 1rem 0; display:block; background:lime; height:0px; content:''; float:left; clear:both; } .dev { width: 50% } .chess li { height:2.4rem; width:2.4rem; margin:0; float:left; font-size:2.4rem; text-align:center; } .chess ul:nth-child(1), .chess ul:nth-child(2) { color: #fff; } .chess ul:nth-child(7), .chess ul:nth-child(8) { color: #000; } .chess ul:nth-child(odd) li:nth-child(even), .chess ul:nth-child(even) li:nth-child(odd) { background: #444; } .chess ul:nth-child(odd) li:nth-child(odd), .chess ul:nth-child(even) li:nth-child(even) { background: #888; } .chess li:nth-child(9n+1) { clear:left !important; } .chess { float:left; clear:both; height:9rem; } /* CONTACT AND MAP ================================================== */ .contact-info { cursor: default; margin-bottom: 4.8rem; display: block; clear: both; width: 33%; color: #333; float: left; position: relative; z-index: 420; } .contact-section { color: #666; font-size: 1.2rem; font-family: "LLReplicaMono",'Andale Mono',monospace; } .contact-data div, .contact-data a { float: left } .contact-data { text-align: right; font-size: 5.6rem; } .email { border-bottom: 0.35rem solid lawngreen } .phone { border-bottom: 0.35rem solid cornflowerblue } #map-canvas { height: 100%; min-height: 100%; position: absolute; width: 100%; top: 0; } /* LOCK OVERLAY ================================================== */ .shrink { opacity: 0.25; -ms-transform: scale(0.75); -webkit-transform: scale(0.75); transform: scale(0.75); pointer-events: none; } locked { font-family: 'LLCircular-Book', sans-serif; height: 100%; } .lock-overlay { cursor: zoom-out; cursor: -webkit-zoom-out; cursor: -moz-zoom-out; background: rgba(51, 51, 51, 0.88); color: #ddd; padding: 4rem; margin: auto; position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 35%; height: auto; display: table; } .lock-overlay p:after { content: '↩'; opacity: 0.25; color: #ddd; display: block; margin-top: 2rem; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .lock-overlay:hover p:after { opacity: 1 } .lock-overlay p { margin: 2.8rem 0 0.5rem } .lock-overlay span { border-bottom: 0.35rem solid #FF4756; font-size: 3.6rem; } /* HEART & COLOPHON ================================================== */ .heart { position: fixed; font-size: 1.4rem; right: 15px; bottom: 10px; display: block; cursor: help; color: #bbb; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .heart:hover { color: #FF4756 } colophon { font-family: "LLReplicaMono",'Andale Mono',monospace; font-size: 1.2rem; background: #333; line-height: 125%; color: #999; height: 0px; width: 100%; position: fixed; z-index: 1337; bottom: 0; margin: 0 auto; display: block; -webkit-transition: all 500ms cubic-bezier(0.725, 0.005, 0.395, 1.000); -moz-transition: all 500ms cubic-bezier(0.725, 0.005, 0.395, 1.000); -o-transition: all 500ms cubic-bezier(0.725, 0.005, 0.395, 1.000); transition: all 500ms cubic-bezier(0.725, 0.005, 0.395, 1.000); /* custom */ } colophon a { color: #ddd; border-color: #666; } .grow { height: 150px } .close-colophon { display: block; position: absolute; bottom: 15px; right: 15px; font-size: 1.4rem; cursor: pointer; } .close-colophon-hover { -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; color: #ddd; } .colophon-info { max-width: 1440px; width: 80%; margin: 0 auto; } .about-this-site { height: 150px; width: 100%; float: left; margin-right: 5%; padding: 2.6rem 0; } /* FREAKSHOW RULES BECAUSE THE INTERNET IS CRAZY */ @-moz-document url-prefix() { .lock-overlay { margin-top: 15%; } .heart, .close-colophon { font-size:2rem; } } /* RESPONSIVE RULES ================================================== */ @media screen and (max-width: 1400px) { html { font-size:62.5%; } .header-content { max-width: 1000px; } .main { max-width: 1000px; } .cv-header-wrapper { max-width: 1000px; } .colophon-info { max-width: 1000px; } .logo:before { margin-top: -19px; } /* Special Breaks Reset */ .boeing, .noct, .clarkes, .core { clear: initial; } } @media screen and (max-width: 1024px) { html { font-size:60% } } @media screen and (max-width: 960px) { html { font-size:55% } } @media screen and (max-width: 800px) { html { font-size:52.5%; } h1,h2 { font-size:4.8rem; } .cv-header-wrapper { display:none; } .cv-box,.cv-buttons { width:100%;font-size:1.4rem;opacity:1;} .contact-data { font-size:3.6rem; } .logo:before { margin-top:-20px; } } @media screen and (max-width: 650px) { html { font-size:52.5%; } .main { padding-top:10rem; } h1,h2 { font-size:3.6rem; } h3 { font-size:3rem; } #filters { display:none; } #projects a { font-size:4.8rem; line-height:6.4rem; margin-top:1.4rem; } .project-info { float:left; width:100%; clear:both; position:relative; } .project-images { margin:1.8rem 0; width:100%; } .cv-section { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); transform-origin: bottom left; margin-top:-1.6rem; opacity:0.5; } .cv-buttons { display:none; } a.creepy { position:fixed; bottom:7.2rem; padding:0; top:auto; } .lock-overlay { width:65%; } .next { position:fixed; bottom:2.4rem; left:10%; color:#333; background:#ddd; font-size:1.8rem; z-index:9999 opacity:1 !important; } .next:last-child { left:auto; top:auto; right:10%; } } @media screen and (max-width: 550px) { html { font-size:52.5%; } #filters { display:none; } #projects a { font-size:4rem; line-height:4.2rem; margin-top:1rem; clear:both; } h1,h2 { font-size:2.8rem; } h3 { font-size:2rem; } .header-nav a { margin-left:1.4rem; } .fog { display:none !important; } } @media screen and (device-aspect-ratio: 40/71) { .cv-section { margin-top:1.6rem; margin-left:-1.4rem; } } @media screen and (device-aspect-ratio: 40/71) and (orientation : landscape) { html { font-size:25%; } .header-logo { zoom:0.65; } .logo:before { border-width:4px; margin-left:-0.75rem;} }