/* Theme Name: IO theme 2019 Theme URI: https://gyetvai-peter.hu Description: IO theme 2019 Version: 1.0.0 Author: Peter Gyetvai (gyetpet@gmail.com) Author URI: https://gyetvai-peter.hu Tags: IO License: MIT License URI: http://opensource.org/licenses/mit-license.php */ /*------------------------------------*\ MAIN \*------------------------------------*/ /* global box-sizing */ *, *:after, *:before { -moz-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* html element 62.5% font-size for REM use */ html { font-size: 62.5%; } body { font: 300 18px/1.4 "cormorant-infant", serif; color: #000; } /* clear */ .clear:before, .clear:after { content: " "; display: table; } .clear:after { clear: both; } .clear { *zoom: 1; } img { max-width: 100%; vertical-align: bottom; } a { color: #000; text-decoration: none; /* Remove highlight shit */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: #a0a0a0; } a:hover { color: #000; } a:focus { outline: 0; } a:hover, a:active { outline: 0; } input:focus { outline: 0; border: 1px solid #a0a0a0; } nav ul { list-style-type: none; text-align: center; padding: 0; margin: 0; } /*------------------------------------*\ STRUCTURE \*------------------------------------*/ /* wrapper */ .wrapper { position: absolute; min-height: 100%; width: 100%; max-width: 1920px; left: 0; right: 0; z-index: -2; padding: 0; /* régen 1.5rem volt */ margin: auto; transition: background-color 1s; overflow-x: hidden; } .greywrapper { background-color: #e6e6e6; } /* ======================== */ /* HEADER */ /* ======================== */ .header { position: fixed; top: 0; left: 0; right: 0; max-width: 1920px; margin: auto; z-index: 500; } .header-top { display: flex; justify-content: space-between; flex-wrap: nowrap; flex-direction: row; /* padding: 1.5rem 2rem; */ position: relative; z-index: 1001; } .topbar { flex: 0 0 auto; } .header-top #spacer { flex: 1 0 auto; } .header-top #spacer:focus { outline-width: 0; } /* ======================== */ /* LOGO */ /* ======================== */ .logo { cursor: pointer; /* margin-right: 3rem; */ padding: 1.5rem 2rem; /* Remove highlight shit */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: #a0a0a0; } .logo.inverted { filter: invert(1); } .logo a { display: block; } .logo object { height: 2.8rem; pointer-events: none; } /* .logo object.inverted { -webkit-filter: invert(100%); filter: invert(100%); } */ /* ======================== */ /* MOTTO */ /* ======================== */ .header-top #motto { display: none; } .header-top #motto a { text-transform: uppercase; padding: 1.5rem 2rem; display: inline-block; font-size: 1.8rem; line-height: 3rem; font-family: "nbpro", Arial, Helvetica, sans-serif; font-weight: bold; color: #fff !important; } /* ======================== */ /* MENUBUTTON */ /* ======================== */ #menubutton { font-size: 1.8rem; line-height: 3rem; font-family: "nbpro", Arial, Helvetica, sans-serif; font-weight: normal; cursor: pointer; /* Remove highlight shit */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: #a0a0a0; } .menuelem { cursor: pointer; display: inline-block; } #menuopen { padding: 1.5rem 2rem; } #menuclose { display: none; } #menuclose object { height: 5.8rem; width: 5.8rem; pointer-events: none; padding: 2.2rem 2.2rem; } #menuclose img { padding: 1.5rem 2rem; } /* ============== */ /* NAV */ /* ============== */ .topnav { /* position: absolute; */ position: fixed; top: 0; left: 100%; width: 100%; max-width: 1920px; height: 100vh; z-index: 1000; padding: 6rem 0 4rem; /* border-left: 0 transparent solid; */ background-color: #000; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .nav { padding: 3rem; flex: 1 1 auto; display: flex; flex-wrap: nowrap; align-items: stretch; /* background-color: brown; */ } .nav ul { display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .nav ul li { display: block; font-size: 2.4rem; line-height: 2.4rem; /* height: 5rem; */ font-family: "nbpro", Arial, Helvetica, sans-serif; font-weight: bold; text-transform: uppercase; white-space: nowrap; flex: 1 1 auto; } .nav ul li a { color: #fff; } /* ======================== */ /* LANG MENU */ /* ======================== */ .nav.lang-menu { flex-grow: 0; } ul#menu-language-selector { flex-direction: row; } ul#menu-language-selector li { padding: 1rem; font-weight: 300; } ul#menu-language-selector li.current-lang { font-weight: bold; } /* ======================== */ /* SOCIAL MENU */ /* ======================== */ .social-menu { height: 30%; flex: 0 1 auto; position: relative; justify-content: center; } .social-menu ul li { font-size: 1.6rem; font-weight: normal; } /* ============== */ /* FOOTER */ /* ============== */ .footer { bottom: 0; left: 0; width: 100%; height: 100vh; padding: 4rem 4rem 8rem; z-index: -1; background-color: #000; color: #fff; display: flex; flex-direction: column; justify-content: space-between; font-family: "nbpro", Arial, Helvetica, sans-serif !important; } footer a { color: #fff; } #footertop { display: flex; justify-content: center; align-content: center; flex-direction: row; padding: 3rem 0; } #footertop a { color: #fff !important; font-size: 1.5rem; line-height: 3rem; padding: 1.5rem; vertical-align: middle; } #footertop a object { height: 5rem; pointer-events: none; } #footerbottom { display: flex; justify-content: space-between; align-items: stretch; } #footerbottom #info { flex: 1 1 60%; display: flex; flex-direction: column; align-items: flex-start; } #footerbottom #info p { margin: 0; padding-top: 1rem; font-size: 1.2rem; /* line-height: 1rem; */ } #footerbottom #info>p:first-of-type { font-weight: bold; padding-bottom: 5rem; } #footerbottom #info p:last-of-type { font-weight: bold; padding-top: 0; } #footerbottom .social-title { margin: 0; padding-top: 1rem; font-size: 1.2rem; padding-bottom: 5rem; font-weight: bold; flex-grow: 0; } #footerbottom .footer-nav { flex: 1 1 20%; display: flex; flex-direction: column; align-items: flex-start; justify-content: stretch; } .footer-nav ul { display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; } .footer-nav ul li { text-align: left; padding-top: 1rem; font-size: 1.2rem; } .footer .footer-copyright-wrapper { text-align: center; font-style: italic; font: inherit; position: absolute; bottom: 0; width: 100vw; left: 0; } .footer .copyright { /* display: none; */ font-style: italic; font-size: 1rem; line-height: 2rem; } .footer .created-by p { font-style: italic; font-size: 1rem; line-height: 2rem; margin: 0; color: #000; } /*------------------------------------*\ PAGES \*------------------------------------*/ main { /* z-index: -1; */ max-width: 1920px; } /* ======================== */ /* HOME */ /* ======================== */ .home .wrapper { height: 200vh; } .home main { position: absolute; padding-top: 16rem; } .home .footer { position: absolute; } .home article { position: relative; width: 100vw; /* left: 0px; */ height: calc(100vh - 16rem); } .home article .thumbnail-wrapper { display: flex; justify-content: center; flex-direction: column; align-items: center; position: absolute; width: 100vw; max-width: 1920px; overflow: hidden; } .home article .thumbnail-wrapper img { height: calc(100vh - 16rem); width: 100%; max-width: unset !important; object-fit: cover; } .home article h2 { position: absolute; white-space: normal; padding: 3rem; top: -14rem; font-family: "nbpro", Arial, Helvetica, sans-serif; font-weight: bold; font-size: 4rem; line-height: 5rem; } .home article .take-a-look { position: absolute; bottom: 0; left: 0; padding: 3rem; font-size: 3rem; text-decoration: underline; font-weight: 500; font-style: italic; } /* lory */ /* .slider {} */ .frame { width: 100vw; position: relative; white-space: nowrap; } .slides { display: inline-block; margin: 0; padding: 0; } .frame li { position: relative; display: inline-block; width: 100vw; } /* about page */ .page.about article { padding: 100vh 2rem 0; /* margin-top: 100vh; */ position: relative; } .page.about article h2 { font: bold 6rem "nbpro", Arial, Helvetica, sans-serif; } .page article .h2wrapper { position: absolute; top: 0; left: 0; height: 100vh; width: 100vw; display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem; z-index: -1; } .page article .h2wrapper h2 { margin-bottom: 0; } /* our team on about page */ .page.about article>h2, .teamWrapper>h2 { position: absolute; /* bottom: -20px; */ z-index: 100; font: bold 1.5rem "nbpro", Arial, Helvetica, sans-serif; text-transform: uppercase; margin: 0; padding-top: 2rem; } .page.about article>h3, .page article>.aligned-text-wrapper>h3 { font: bold 1.5rem "nbpro", Arial, Helvetica, sans-serif; text-transform: uppercase; margin: 1rem 0; } .page.about article>h3::after, .page article>h2::after, .page article>.aligned-text-wrapper>h3::after { content: url("img/arrow.svg"); display: block; width: 2rem; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; margin-top: 1rem; } .page article>.aligned-text-wrapper { position: relative; } .page article blockquote { font: normal 2.5rem "nbpro", Arial, Helvetica, sans-serif; margin: 14rem 0 1rem; } .page.about article>p:nth-last-of-type(1), .page.about article>p:nth-last-of-type(2), .page article>p:nth-last-of-type(3) { font: bold 2.5rem "nbpro", Arial, Helvetica, sans-serif; } .page article>p:nth-last-of-type(1) { margin-bottom: 8rem; } .page article hr { display: none; } .page article .team { position: relative; /* z-index: -1; */ } .page article .team h2 { font: bold 1.5rem "nbpro", Arial, Helvetica, sans-serif; position: absolute; top: 0; text-transform: uppercase; } .page article .team figure { position: relative; width: 100vw; overflow: hidden; display: flex; flex-direction: column; align-items: center; margin: 0 -2rem; max-width: 100vw !important; top: 0; cursor: pointer; /* z-index: -1; */ } .page article .team figure img { height: calc(100vw + 4rem); width: calc(100vw + 4rem); max-width: none !important; /* z-index: -1; */ object-fit: cover; } .page article .team.activemember { height: calc(2 * 100vw); margin: 1rem 0; } .page article .team .team-text { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .page article .team h2 { margin: 3rem 0; } .team.activemember h3 { font: bold 1.5rem "nbpro", Arial, Helvetica, sans-serif; text-transform: uppercase; margin: 0; } .team.activemember h4 { font: normal 1.5rem "cormorant-infant", serif; text-transform: uppercase; font-style: italic; margin: 0; } .team-text .team-header { display: flex; justify-content: space-between; flex-direction: row; align-items: baseline; } .team-text .team-body { display: flex; flex-direction: column; justify-content: flex-end; } .team-text .team-body p:nth-last-of-type(1), .team-text .team-body p:nth-last-of-type(2) { font: bold 1.5rem "nbpro", Arial, Helvetica, sans-serif; letter-spacing: 0.3rem; } /*------------------------------------*\ SINGLE \*------------------------------------*/ .single article { padding: 0 2rem; } .single .thumbnail-wrapper { height: calc(100vh - 16rem); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .single .thumbnail-wrapper img { height: calc(100vh - 16rem); width: auto; max-width: unset; } .single h1 { font: normal 3rem "nbpro", Arial, Helvetica, sans-serif; text-transform: uppercase; } .single .metawrapper { display: flex; flex-direction: column; align-items: stretch; padding: 4rem 0; letter-spacing: 0.2rem; } .single .metawrapper .metaline { padding: 2rem 0; } .single .metawrapper .metaline.meta-tags { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; } .single .metawrapper .metaline.meta-tags ul { padding: 0; margin: 0; width: calc(50% - 1rem); } .single .metawrapper .metaline.meta-tags li { display: block; text-transform: uppercase; font: normal 1.4rem "nbpro", Arial, Helvetica, sans-serif; } .single .metawrapper .metaline.meta-tags span { width: calc(50% - 1rem); font: normal 1.4rem "nbpro", Arial, Helvetica, sans-serif; } .single .metawrapper .metaline.meta-data { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; } .single .metawrapper .metaline.meta-data span.meta-date { width: calc(50% - 1rem); font: normal 1.4rem "nbpro", Arial, Helvetica, sans-serif; line-height: 1.6rem; } .single .metawrapper .metaline.meta-data span.meta-client { width: calc(50% - 1rem); text-transform: uppercase; font-size: 1.4rem; } .single .metawrapper .metaline.meta-contributors { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; } .single .metawrapper .metaline.meta-contributors .contrib-title { font: normal 1.4rem "nbpro", Arial, Helvetica, sans-serif; } .single .metawrapper .metaline.meta-contributors .contrib-body { font-size: 1.6rem; padding-top: 1rem; letter-spacing: unset; } .single blockquote { font: normal 1.8rem "nbpro", Arial, Helvetica, sans-serif; margin: 2rem 0; } .single article figure img { width: 100vw; max-width: unset; margin-left: -2rem; } /*------------------------------------*\ CATEGORY-PROJECTS \*------------------------------------*/ .category main { padding: 0 2rem 0; min-height: 100vh; } .category main .tag-list { /* height: 16rem; */ display: flex; flex-direction: column; justify-content: flex-end; padding: 16rem 2rem 0; margin: 0 -2rem; -webkit-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; } .category main .tag-list.open { background-color: #a0a0a0; } .category main .tag-list .tag-filter { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: nowrap; align-items: center; font: 300 1.5rem "nbpro", Arial, Helvetica, sans-serif; padding-bottom: 1rem; cursor: pointer; width: fit-content; /* Remove highlight shit */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .category main .tag-list .tag-filter a { flex: 0 0 auto; } .category main .tag-list .tag-filter .tag-dummy { flex: 1 1 0; } /* .category main .tag-list .tag-filter.opened{ justify-content: space-between; } */ .category main .tag-list .tag-filter object { display: block; width: 1.2rem; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; margin-left: 1rem; pointer-events: none; cursor: pointer; } .category main .tag-list .tag-wrapper { display: none; } .category main .tag-list ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; padding: 0 0 1rem; margin: 0; } .category main .tag-list ul li { margin: 0; padding: 0.5rem 0; font: normal 1.5rem "nbpro", Arial, Helvetica, sans-serif; text-transform: uppercase; display: block; } .category main section { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; padding-top: 1rem; } .category main article { width: calc(50% - 0.5rem); flex: 0 0 auto; padding-bottom: 1rem; } .category h2.project-title { display: none; } /*------------------------------------*\ CATEGORY-PRESS \*------------------------------------*/ .category-press main { position: relative; } .category-press section { width: 200vw; height: max-content; padding-top: 10rem !important; } .category-press section .article-wrapper { display: flex; flex-direction: column; } .category-press .publication-wrapper, .category-press .award-wrapper { width: calc(100vw - 4rem); } .category-press article { margin: 0; width: 100% !important; /* height: 50%; */ } .category-press article .project-tags { position: absolute; text-transform: uppercase; font-size: 2.6rem; } .category-press .award-wrapper article .project-tags:not(.active)::before { content: url("img/arrow.svg"); display: inline-block; width: 1.2rem; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; position: relative; top: -0.3rem; } .category-press .publication-wrapper article .project-tags:not(.active)::after { content: url("img/arrow.svg"); display: inline-block; width: 1.2rem; position: relative; top: -0.3rem; } .category-press article .project-tags.active { font-family: "nbpro", Arial, Helvetica, sans-serif; } .category-press .publication-wrapper article .project-tags { left: 2rem; } .category-press .award-wrapper article .project-tags { right: 2rem; } .category-press article .project-date, .category-press .dateWrapper>.project-date { padding-top: 6rem; font: normal 2.5rem "nbpro", Arial, Helvetica, sans-serif; } .category-press article .project-date::after { content: url("img/arrow.svg"); display: inline-block; width: 1.2rem; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; top: -0.3rem; position: relative; } .category-press article .project-content { position: relative; } /*------------------------------------*\ template process \*------------------------------------*/ .page-template-template-process article { padding: 0; } .page-template-template-process article .process-title-wrapper { height: 100vh; position: relative; padding: 2rem; z-index: 0; } .page-template-template-process article .process-page-wrapper { height: 100vh; position: relative; background-color: #606060; padding: 2rem; } .page-template-template-process article .process-title-wrapper h3 { position: absolute; top: 20%; margin: 0; text-transform: uppercase; font: bold 2.5rem "nbpro", Arial, Helvetica, sans-serif; } .page-template-template-process article .process-title-wrapper h2 { position: absolute; top: 40%; margin: 0; font: bold 7rem "nbpro", Arial, Helvetica, sans-serif; } /* .page-template-template-process article .process-title-wrapper h2::after{ content: url('img/arrow.svg'); display: inline-block; width: 2rem; height: auto; -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); /* top: -0.3rem; position: absolute; } */ .page-template-template-process article .theArrow { width: 100%; position: absolute; bottom: 3rem; cursor: pointer; left: 0; display: flex; flex-direction: row; justify-content: center; align-items: flex-end; z-index: 1; } .page-template-template-process article .theArrow object { width: 2rem; -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); cursor: pointer; } .page-template-template-process article .process-page-wrapper blockquote { margin: 0; font: normal 2.5rem "nbpro", Arial, Helvetica, sans-serif; } .page-template-template-process article .process-page-wrapper>p { font-size: 2rem; } .page-template-template-process article ul.process-contents { margin: 0 -3rem; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; position: absolute; z-index: 1; bottom: 6rem; width: calc(100% + 2rem); left: 2rem; } .page-template-template-process article ul.process-contents li { display: block; font: normal 1.5rem "nbpro", Arial, Helvetica, sans-serif; padding-bottom: 2rem; margin: 0 3rem; } .page-template-template-process article ul.process-contents li a { /* width: 33% */ } /* parallax */ .process-title-wrapper>.jarallax-img { position: absolute; object-fit: cover; /* support for plugin https://github.com/bfred-it/object-fit-images */ font-family: "object-fit: cover;"; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } /*------------------------------------*\ IMAGES \*------------------------------------*/ /*------------------------------------*\ TYPOGRAPHY \*------------------------------------*/ @font-face { font-family: "nbpro"; src: url("fonts/nbpro-regular.eot"); src: url("fonts/nbpro-regular.eot?#iefix") format("embedded-opentype"), url("fonts/nbpro-regular.woff") format("woff"), url("fonts/nbpro-regular.ttf") format("truetype"), url("fonts/nbpro-regular.svg#nbpro-regular") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "nbpro"; src: url("fonts/nbpro-bold.eot"); src: url("fonts/nbpro-bold.eot?#iefix") format("embedded-opentype"), url("fonts/nbpro-bold.woff") format("woff"), url("fonts/nbpro-bold.ttf") format("truetype"), url("fonts/nbpro-bold.svg#nbpro-bold") format("svg"); font-weight: bold; font-style: normal; } @font-face { font-family: "nbpro"; src: url("fonts/nbpro-bolditalic.eot"); src: url("fonts/nbpro-bolditalic.eot?#iefix") format("embedded-opentype"), url("fonts/nbpro-bolditalic.woff") format("woff"), url("fonts/nbpro-bolditalic.ttf") format("truetype"), url("fonts/nbpro-bolditalic.svg#nbpro-bolditalic") format("svg"); font-weight: bold; font-style: italic; } @font-face { font-family: "nbpro"; src: url("fonts/nbpro-italic.eot"); src: url("fonts/nbpro-italic.eot?#iefix") format("embedded-opentype"), url("fonts/nbpro-italic.woff") format("woff"), url("fonts/nbpro-italic.ttf") format("truetype"), url("fonts/nbpro-italic.svg#nbpro-italic") format("svg"); font-weight: normal; font-style: italic; } @font-face { font-family: "nbpro"; src: url("fonts/nbpro-light.eot"); src: url("fonts/nbpro-light.eot?#iefix") format("embedded-opentype"), url("fonts/nbpro-light.woff") format("woff"), url("fonts/nbpro-light.ttf") format("truetype"), url("fonts/nbpro-light.svg#nbpro-light") format("svg"); font-weight: 300; font-style: normal; } @font-face { font-family: "nbpro"; src: url("fonts/nbpro-lightita.eot"); src: url("fonts/nbpro-lightita.eot?#iefix") format("embedded-opentype"), url("fonts/nbpro-lightita.woff") format("woff"), url("fonts/nbpro-lightita.ttf") format("truetype"), url("fonts/nbpro-lightita.svg#nbpro-lightita") format("svg"); font-weight: 300; font-style: italic; } @font-face { font-family: "nbpro-mono"; src: url("fonts/nbpro-monospaced.eot"); src: url("fonts/nbpro-monospaced.eot?#iefix") format("embedded-opentype"), url("fonts/nbpro-monospaced.woff") format("woff"), url("fonts/nbpro-monospaced.ttf") format("truetype"), url("fonts/nbpro-monospaced.svg#nbpro-monospaced") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "cormorant-infant"; src: url("fonts/cormorantinfant-regular.eot"); src: url("fonts/cormorantinfant-regular.eot?#iefix") format("embedded-opentype"), url("fonts/cormorantinfant-regular.woff") format("woff"), url("fonts/cormorantinfant-regular.ttf") format("truetype"), url("fonts/cormorantinfant-regular.svg#cormorantinfant-regular") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "cormorant-infant"; src: url("fonts/cormorantinfant-medium.eot"); src: url("fonts/cormorantinfant-medium.eot?#iefix") format("embedded-opentype"), url("fonts/cormorantinfant-medium.woff") format("woff"), url("fonts/cormorantinfant-medium.ttf") format("truetype"), url("fonts/cormorantinfant-medium.svg#cormorantinfant-medium") format("svg"); font-weight: 500; font-style: normal; } @font-face { font-family: "cormorant-infant"; src: url("fonts/cormorantinfant-mediumitalic.eot"); src: url("fonts/cormorantinfant-mediumitalic.eot?#iefix") format("embedded-opentype"), url("fonts/cormorantinfant-mediumitalic.woff") format("woff"), url("fonts/cormorantinfant-mediumitalic.ttf") format("truetype"), url("fonts/cormorantinfant-mediumitalic.svg#cormorantinfant-mediumitalic") format("svg"); font-weight: 500; font-style: italic; } /*------------------------------------*\ RESPONSIVE \*------------------------------------*/ @media only screen and (min-width: 320px) {} @media only screen and (min-width: 480px) {} @media only screen and (min-width: 768px) {} /* From ipad landscape and up, desktop */ @media only screen and (min-width: 1024px) { header .topnav { margin-left: 9rem; } .home .wrapper { height: unset; overflow-y: hidden; } .home main { padding-top: 0; position: relative; height: 100vh; } .home article { height: 100vh; } .home article .thumbnail-wrapper img { height: 100vh; } .home article h2 { top: unset; bottom: 6rem; padding: 8rem; } .home article .take-a-look { padding: 8rem; } /* ------ */ /* footer */ /* ------ */ .footer { height: 24rem; display: flex; flex-direction: row; justify-content: flex-start; bottom: unset; padding-bottom: 4rem; } .home .footer { position: relative; } /* --------- */ /* footertop */ /* --------- */ .footer #footertop { margin-right: 4rem; flex-grow: 1; flex-direction: column; } /* ------------ */ /* footerbottom */ /* ------------ */ .footer #footerbottom { flex-direction: column; flex-grow: 5; justify-content: space-between; } /* footer.nav */ #footerbottom .footer-nav { flex-direction: row; justify-content: space-between; flex: 0 1 auto; } .footer-nav .social-title { min-width: 20rem; flex-grow: 1 !important; padding: 0 !important; } .footer-nav ul { min-width: calc(100% - 20rem); flex-grow: 10; } /* info */ .footer #footerbottom #info { flex-direction: row; flex-wrap: wrap; flex: 0 1 auto; } #footerbottom #info>p { min-width: 20rem; padding: 0; padding-bottom: 1rem; flex-grow: 1; font-weight: 300 !important; } #footerbottom #info>p:first-of-type { font-weight: bold !important; padding: 0; } #footerbottom #info>p:nth-child(even) { min-width: calc(100% - 20rem); flex-grow: 10; } #footerbottom #info>p:nth-child(2) { display: flex; justify-content: stretch; flex-direction: row; align-items: center; } #footerbottom #info>p:nth-child(2)>.footer-address { flex-grow: 0; padding: 0; } #footerbottom #info .hr { border-top: #fff 1px solid; flex-grow: 1; height: 0; margin-left: 2rem; } /* .footer-copyright */ .footer .footer-copyright-wrapper { right: 0; width: unset; left: unset; margin-right: 4rem; } /* ========================================================================== */ /* MENU */ /* ========================================================================== */ .social-menu { width: 60%; justify-content: center; align-items: center; } .social-menu ul { flex-direction: row; justify-content: space-between; width: 100%; position: absolute; } /* ============== */ /* ABOUT */ /* ============== */ .page article { padding: 100vh 4rem 0 !important; } .page article .h2wrapper { padding: 4rem; } .page article>.aligned-text-wrapper h3 { position: absolute; left: 0; } .page article>.aligned-text-wrapper { padding-left: 15rem; margin-bottom: 5rem; } .page article blockquote { font-size: 4rem; font-weight: bold; line-height: 5rem; } /* ============== */ /* TEAM */ /* ============== */ .page.about article .teamWrapper { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; position: relative; margin: 0 -4rem; } .page.about article .teamWrapper>h2 { /* position: absolute; */ /* z-index: 1; */ position: relative; width: 100rem; text-align: center; height: 0; /* line-height: 10rem; vertical-align: bottom; */ margin: 0; margin-bottom: -100rem; font: bold 1.5rem "nbpro", Arial, Helvetica, sans-serif; } .page.about article>h2 { /* margin: auto; */ } .page.about article>h2::after { content: ""; } .page article .team { width: 50vw; /* margin-left: -4rem; */ display: inline-block; } .page article .team.team-1 { /* margin-right: -4rem; */ } .page article .team figure { width: 50vw; margin: 0; } .page article .team figure img { width: 50vw; height: 50vw; } .page article .team .team-text { height: 50vw; padding: 3rem; } .page article .team.activemember { height: calc(50vw); margin: 0; } /* ============== */ /* PROCESS */ /* ============== */ .page-template-template-process article { padding: 0 !important; } .page-template-template-process article .process-page-wrapper { padding: 4rem; } .page-template-template-process article ul.process-contents li { margin: 0 4rem; } .page-template-template-process article .process-page-wrapper blockquote { font-weight: bold; font-size: 3rem; } /* ============== */ /* PROJECTS */ /* ============== */ .category main article{ width: calc(33% - .5rem); } .category main .tag-list .tag-filter { display: none; } .category main .tag-list .tag-wrapper { display: block; } /* ============== */ /* PRESS */ /* ============== */ .category-press section { width: unset !important; } .category-press .publication-wrapper { /* width: 30% !important; */ flex: 1 1 40%; } .category-press .award-wrapper { flex: 1 1 40%; margin-right: 2rem; } .category-press .publication-wrapper article .project-date { display: none; padding: 0; } .category-press .project-content img { width: 90%; } .category-press article .project-tags { position: relative; right: 0 !important; left: 0 !important; line-height: 3rem; } .category-press article .project-tags a { cursor: default; } .category-press .dateWrapper { margin-right: 2rem; } .category-press .dateWrapper>.project-date { padding-top: 0; height: 50%; padding-bottom: 1rem; font-size: 3rem; } } @media only screen and (min-width: 1140px) {} @media only screen and (min-width: 1280px) { .footer { height: 32rem; padding: 8rem; } .footer .footer-copyright-wrapper { margin-right: 8rem; bottom: 4rem; } } /* ============== */ /* ULTRAWIDE */ /* ============== */ @media only screen and (min-width: 1921px) { .topnav { /* left: 0 */ position: absolute; height: 100vh; } } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {} /*------------------------------------*\ MISC \*------------------------------------*/ ::selection { background: #a0a0a0; color: #fff; text-shadow: none; } ::-webkit-selection { background: #a0a0a0; color: #fff; text-shadow: none; } ::-moz-selection { background: #a0a0a0; color: #fff; text-shadow: none; } /*------------------------------------*\ WORDPRESS CORE \*------------------------------------*/ .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { float: right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; } .wp-caption .wp-caption-text, .gallery-caption { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; } .sticky {} .bypostauthor {} /*------------------------------------*\ PRINT \*------------------------------------*/ @media print { * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } .header-top #motto { display: block; } }