.mediumLeftMargin { margin-left:5rem; }@charset "UTF-8"; /*=================================== Custom fonts ===================================*/ @font-face { font-family:'Messina-LightItalic'; src:url(/assets/fonts/MessinaSerifWeb-LightItalic.woff2); font-weight:normal; } /*=================================== Initialization & General ===================================*/ /*=================================== Site-specific Framework & Snippets ===================================*/ /*Site-specific grids, widths & heights*/ section { width:33.3%; height:100vh; float:left; transition:width 1s linear; overflow-y:scroll; scrollbar-width: none; } section.collapsed { width:3.3%; padding-top:2rem; } section.expanded { width:93.3%; } section::-webkit-scrollbar { display:none; } /*Site-specific medium paddings*/ /*Site-specific large paddings*/ .largeBottomPadding { padding-bottom:5rem; } .largeRightPadding { padding-right:5rem; } /*Site-specific small & extra small paddings*/ .tinyPadding { padding:0.25rem; } .tinyTopPadding { padding-top:0.25rem; } .extraSmallPadding { padding:1rem; } .extraSmallTopPadding { padding-top:1rem; } .extraSmallBottomPadding { padding-bottom:1rem; } .verySmallTopPadding { padding-top:1.5rem; } .smallLeftPadding { padding-left:2rem; } .smallRightPadding { padding-right:2rem; } .smallTopPadding { padding-top:2rem; } .smallBottomPadding { padding-bottom:2rem; } /*Site-specific padding exceptions*/ /*Site-specific medium margins*/ .mediumLeftMargin { margin-left:5rem; } .mediumRightMargin { margin-right:5rem; } .mediumTopMargin { margin-top:5rem; } .mediumBottomMargin { margin-bottom:5rem; } /*Site-specific large margins*/ .largeLeftMargin { margin-left:7rem; } .largeRightMargin { margin-right:7rem; } .largeTopMargin { margin-top:7rem; } .extraLargeTopMargin { margin-top:14rem; } .hugeTopMargin { margin-top:18rem; } /*Site-specific small margins*/ .tinyRightMargin { margin-right:0.5rem; } .extraSmallTopMargin { margin-top:1rem; } .extraSmallBottomMargin { margin-bottom:1rem; } .extraSmallLeftMargin { margin-left:1rem; } .smallLeftMargin { margin-left:2rem; } .smallRightMargin { margin-right:2rem; } .smallTopMargin { margin-top:2rem; } .smallBottomMargin { margin-bottom:2rem; } /*Site-specific framework: Backgrounds*/ /*Site-specific framework: Borders*/ .border.black { border:0.05rem solid #000; } .leftBorder.black { border-left:0.05rem solid #000; } .rightBorder.black { border-right:0.05rem solid #000; } .bottomBorder.black { border-bottom:0.05rem solid #000; } /*Site-specific framework: Buttons & icons*/ button.more { height:1rem; padding:0.2rem 1.5rem 0 0; background:url("/assets/images/icon-more.svg") no-repeat center right; background-size:contain; } button.options { height:1rem; padding:0 1.5rem 0 0; background:url("/assets/images/icon-options.svg") no-repeat center right; background-size:contain; } button.confirm.white { height:1rem; padding-right:1.5rem; background:url("/assets/images/icon-confirm-white.png") no-repeat center right; background-size:contain; } button.close.black { height:1rem; padding-right:1.5rem; background:url("/assets/images/icon-close-black.svg") no-repeat center right; background-size:contain; } button.close.white { height:1rem; padding-right:1.5rem; background:url("/assets/images/icon-close-white.svg") no-repeat center right; background-size:contain; } button.pill { height:4rem; border-radius:2rem; border:0.05rem solid #000; } button.pill:hover { border:none; background-color:#e6ff5a; } .carousel button.next, .siblings button.next { width:2rem; height:2rem; background-image:url("/assets/images/icon-next.svg"); background-repeat:no-repeat; background-position:center center; background-size:contain; } .carousel button.previous, .siblings button.previous { width:2rem; height:2rem; background-image:url("/assets/images/icon-previous.svg"); background-repeat:no-repeat; background-position:center center; background-size:contain; } .news button.next { height:1.4rem; padding-right:2rem; background:url("/assets/images/icon-next.svg") no-repeat right center; background-size:contain; } .news button.previous { height:1.4rem; padding-left:2rem; background:url("/assets/images/icon-previous.svg") no-repeat left center; background-size:contain; } .lightboxControls button.previous { left:0.5rem; top:50vh; } .lightboxControls button.next { right:0.5rem; top:50vh; } /*Colors*/ .whiteBackground { background-color:#fff; } .blackBackground { background-color:#000; } .greenBackground { background-color:#e6ff5a; } /*Snippets*/ .team .width50 { width:49.5%; } .projectMedia.medium, .projectMedia.medium div, .projectMedia.medium img { height:19.7rem; object-fit:cover; } .projectMediaWrapper, .projectMedia.large, .projectMedia.large div, .projectMedia.large img { height:30.5rem; object-fit:cover; } .projectVideo { padding-top:30.5rem; position:relative; background:#000; } .projectMedia .topics, .projectMedia .topics .topic { display:none; } .projectMedia .topics .topic { left:0; top:0; background-size:cover; } .projectMedia:hover .topics, .projectMedia .topics .topic.active { display:block; } .projectMedia .topic-0 { background-image:url("/assets/images/topic-cutout-green-01.svg"); } .projectMedia .topic-1 { background-image:url("/assets/images/topic-cutout-green-02.svg"); } .projectMedia .topic-2 { background-image:url("/assets/images/topic-cutout-green-03.svg"); } .projectMedia .topic-3 { background-image:url("/assets/images/topic-cutout-green-04.svg"); } .projectMedia .topic-4 { background-image:url("/assets/images/topic-cutout-green-05.svg"); } .projectMedia .topic-5 { background-image:url("/assets/images/topic-cutout-green-06.svg"); } .projectMedia .topic-6 { background-image:url("/assets/images/topic-cutout-green-07.svg"); } .projectMedia .topic-7 { background-image:url("/assets/images/topic-cutout-green-08.svg"); } .backgrounds .topic { height:22rem; left:10rem; top:-1rem; z-index:0; background-repeat:no-repeat; background-size:contain; display:none; } .backgrounds .topic.active { display:block; } .backgrounds .topic-0 { background-image:url("/assets/images/topic-icon-large-green-01.svg"); } .backgrounds .topic-1 { background-image:url("/assets/images/topic-icon-large-green-02.svg"); } .backgrounds .topic-2 { background-image:url("/assets/images/topic-icon-large-green-03.svg"); } .backgrounds .topic-3 { background-image:url("/assets/images/topic-icon-large-green-04.svg"); } .backgrounds .topic-4 { background-image:url("/assets/images/topic-icon-large-green-05.svg"); } .backgrounds .topic-5 { background-image:url("/assets/images/topic-icon-large-green-06.svg"); } .backgrounds .topic-6 { background-image:url("/assets/images/topic-icon-large-green-07.svg"); } .backgrounds .topic-7 { background-image:url("/assets/images/topic-icon-large-green-08.svg"); } .filter .topic { background-repeat:no-repeat; background-size:contain; } body.home .filter .wrapper, body.home .filter .wrapper.portrait { width:31vw; height:52vw; margin-left:auto; margin-right:auto; } body.home .filter .wrapper.landscape { width:55vh; height:92vh; } body.home .filter .topic-0 { left:7%; top:9%; width:49%; height:22%; background-image:url("/assets/images/topic-icon-large-green-01.svg"); } body.projects .filter .topic-0 { left:62rem; top:1rem; width:16rem; height:11rem; background-image:url("/assets/images/topic-icon-large-green-01.svg"); } .filter .topic-0:hover, .filter .topic-0.active { background-image:url("/assets/images/topic-icon-large-white-01.svg") !important; } body.home .filter .topic-1 { left:51%; top:0; width:47%; height:26%; background-image:url("/assets/images/topic-icon-large-green-02.svg"); } body.projects .filter .topic-1 { left:11rem; top:11rem; width:17rem; height:13rem; background-image:url("/assets/images/topic-icon-large-green-02.svg"); } .filter .topic-1:hover, .filter .topic-1.active { background-image:url("/assets/images/topic-icon-large-white-02.svg") !important; } body.home .filter .topic-2 { top:29%; width:42%; height:27%; background-image:url("/assets/images/topic-icon-large-green-03.svg"); } body.projects .filter .topic-2 { top:1rem; width:15rem; height:15rem; background-image:url("/assets/images/topic-icon-large-green-03.svg"); } .filter .topic-2:hover, .filter .topic-2.active { background-image:url("/assets/images/topic-icon-large-white-03.svg") !important; } body.home .filter .topic-3 { left:43%; top:29%; width:43%; height:27%; background-image:url("/assets/images/topic-icon-large-green-04.svg"); } body.projects .filter .topic-3 { left:21rem; top:1rem; width:15rem; height:15rem; background-image:url("/assets/images/topic-icon-large-green-04.svg"); } .filter .topic-3:hover, .filter .topic-3.active { background-image:url("/assets/images/topic-icon-large-white-04.svg") !important; } body.home .filter .topic-4 { left:15%; top:53%; width:44%; height:28%; background-image:url("/assets/images/topic-icon-large-green-05.svg"); } body.projects .filter .topic-4 { left:46rem; top:1rem; width:15rem; height:16rem; background-image:url("/assets/images/topic-icon-large-green-05.svg"); } .filter .topic-4:hover, .filter .topic-4.active { background-image:url("/assets/images/topic-icon-large-white-05.svg") !important; } body.home .filter .topic-5 { left:58%; top:46%; width:42%; height:29%; background-image:url("/assets/images/topic-icon-large-green-06.svg"); } body.projects .filter .topic-5 { left:30rem; top:7rem; width:15rem; height:16rem; background-image:url("/assets/images/topic-icon-large-green-06.svg"); } .filter .topic-5:hover, .filter .topic-5.active { background-image:url("/assets/images/topic-icon-large-white-06.svg") !important; } body.home .filter .topic-6 { top:75%; width:48%; height:32%; background-image:url("/assets/images/topic-icon-large-green-07.svg"); } body.projects .filter .topic-6 { left:56rem; top:10rem; width:16rem; height:17rem; background-image:url("/assets/images/topic-icon-large-green-07.svg"); } .filter .topic-6:hover, .filter .topic-6.active { background-image:url("/assets/images/topic-icon-large-white-07.svg") !important; } body.home .filter .topic-7 { left:47%; top:74%; width:52%; height:23%; background-image:url("/assets/images/topic-icon-large-green-08.svg"); } body.projects .filter .topic-7 { left:74rem; top:9rem; width:17rem; height:13rem; background-image:url("/assets/images/topic-icon-large-green-08.svg"); } .filter .topic-7:hover, .filter .topic-7.active { background-image:url("/assets/images/topic-icon-large-white-08.svg") !important; } .icons .topic { width:1.8rem; height:1.8rem; padding-top:2.3rem; background-repeat:no-repeat; background-size:1.8rem 1.8rem; } .icons .topic div { display:none; } body.projects .icons .topic div { top:11rem; left:1.5rem; } .icons .topic:hover div { display:block; } .icons .topic div span { transform-origin:bottom left; } .icons .topic-0 { background-image:url("/assets/images/topic-icon-small-outlined-01.svg"); } .icons .topic-0:hover { background-image:url("/assets/images/topic-icon-small-green-01.svg"); } .icons .topic-1 { background-image:url("/assets/images/topic-icon-small-outlined-02.svg"); } .icons .topic-1:hover { background-image:url("/assets/images/topic-icon-small-green-02.svg"); } .icons .topic-2 { background-image:url("/assets/images/topic-icon-small-outlined-03.svg"); } .icons .topic-2:hover { background-image:url("/assets/images/topic-icon-small-green-03.svg"); } .icons .topic-3 { background-image:url("/assets/images/topic-icon-small-outlined-04.svg"); } .icons .topic-3:hover { background-image:url("/assets/images/topic-icon-small-green-04.svg"); } .icons .topic-4 { background-image:url("/assets/images/topic-icon-small-outlined-05.svg"); } .icons .topic-4:hover { background-image:url("/assets/images/topic-icon-small-green-05.svg"); } .icons .topic-5 { background-image:url("/assets/images/topic-icon-small-outlined-06.svg"); } .icons .topic-5:hover { background-image:url("/assets/images/topic-icon-small-green-06.svg"); } .icons .topic-6 { background-image:url("/assets/images/topic-icon-small-outlined-07.svg"); } .icons .topic-6:hover { background-image:url("/assets/images/topic-icon-small-green-07.svg"); } .icons .topic-7 { background-image:url("/assets/images/topic-icon-small-outlined-08.svg"); } .icons .topic-7:hover { background-image:url("/assets/images/topic-icon-small-green-08.svg"); } /*=================================== Templates ===================================*/ #cookie_banner-wrapper { width:25rem; left:0; bottom:0; z-index:1000; } .logo { width:1.5rem; height:14rem; right:1rem; bottom:1rem; background:url("/assets/images/logo.png") no-repeat left bottom; background-size:contain; } input { height:1.8rem; background:none !important; } nav.primary.vertical { left:-0.35rem; top:-4rem; float:right; transform-origin:100% 100%; position:relative; white-space:nowrap; } body > nav.extras { left:67.6rem; bottom:1rem; } body > nav.extras .language { width:1.8rem; height:1.8rem; } .home section div.filter { width:33.3rem; height:100vh; top:0; left:33.3rem; display:none; } .projects section div.filter { width:93.3rem; height:25rem; top:0; left:3.3rem; display:none; } section div.filter.active { display:block; } section div.filter button.archive { right:1rem; bottom:1rem; } .projectSeries .contents .description { z-index:10; } .projectSeries .contents .children { position:relative; z-index:100 } .studio .contact .locations .location, .studio .partners .item, .studio .publications .item.publication { display:none; } .studio .contact .locations .location.active, .studio .partners .item.active, .studio .publications .item.publication.active { display:block; } .studio .awards .award { width:14rem; height:14rem; } .studio .awards .award:hover { background-color:#e6ff5a; border:none; } .studio .awards .award p { margin-bottom:auto; } .studio .awards .award .medium, .awards .award:hover .data, .awards .award:hover h3 { display:none; } .studio .awards .award:hover .medium { display:block; } .studio nav.secondary { top:9rem; right:11rem; } .studio .lightbox.active { z-index:1000; } .newsArticle .content { left:37rem; } .newsArticle .lightbox.active { width:93.3rem !important; } .search form { bottom:0; right:0; } .search .backLink { margin-left:9rem; } .search button.close { top:1rem; right:1rem; } /*=================================== Texts ===================================*/ /*Default types*/ nav.primary, button.more, button.close, input { font:400 0.9rem/0.2rem allotrope, sans-serif; } nav.secondary { font:400 1.2rem/2.4rem allotrope, sans-serif; } span.data, h1.small, h2.small { font:400 0.9rem/1.3rem allotrope, sans-serif; text-transform:uppercase; } span.link { font:400 1.3rem/1.7rem allotrope, sans-serif; } span.small, h4 { font:400 0.9rem/1.3rem reason-new, sans-serif; } span.medium { font:400 1.3rem/1.8rem reason-new, sans-serif; } span.large { font:400 2.3rem/3rem reason-new, sans-serif; } span.extraLarge, h3.large, button.partner { font:400 2.8rem/3.6rem reason-new, sans-serif; } button.text, input[type=submit] { font:400 1.15rem/1.15rem allotrope, sans-serif; } button.next { font:400 1.15rem/1.7rem allotrope, sans-serif; } button.archive { font:400 2rem/2rem allotrope, sans-serif; } h2.large, button.publication { font:3rem/3.5rem "Messina-LightItalic", serif; } h3, button.pill { font:1.65rem/2rem "Messina-LightItalic", serif; } h3.small, span.projectLink { font:1.45rem/1.8rem "Messina-LightItalic", serif; } h3.topic, .filter.wrapper.portrait h3.topic { font:1.5rem/1.9rem allotrope, sans-serif; } .filter.wrapper.landscape h3.topic { font:2.65vh/3.36rem allotrope, sans-serif; } footer span { line-height:3.8rem; } /*Type colors*/ .black, .black a { color:#000; } .white, .white a { color:#fff; } /*Type styles*/ .italic { font-style:italic !important; } .uppercase { text-transform:uppercase; letter-spacing:0.07rem; } .strong { font-weight:bold !important; } .strikethrough, button.publication { text-decoration:line-through; } button.strikethrough.active, a.strikethrough:hover, h2.strikethrough:hover { text-decoration:none !important; } ol { list-style-position:inside; } /*Link styles*/ a { text-decoration:none; border-bottom:0.05rem solid #000; } .alwaysUnderline, .alwaysUnderline a, .hoverUnderline:hover, .hoverUnderline a:hover, .hoverUnderline a:active, nav a:hover, nav a:active, nav.secondary a:link, button.text, input { text-decoration:none; border-bottom:0.05rem solid #000; } .noUnderline, .noUnderline a:link, .noUnderline a:visited, .noUnderline a:hover, .noUnderline a:active, .hoverUnderline a:link, .hoverUnderline a:visited, nav.extras a:link, nav.extras a:visited, nav.primary a:link, nav.primary a:visited, h1 a, h2 a, h3 a, a > button.text { text-decoration:none !important; border-bottom:none !important; } /*=================================== Mobile Styles ===================================*/ @media all and (max-width:600px) { /*=================================== Snippets ===================================*/ html { font-size:2.5vw; } .vertical { transform:none !important; } /*Site-specific grids, widths & heights*/ section { width:100vw; height:auto; overflow-y:hidden; scrollbar-width: none; border-left:none !important; border-right:none !important; border-bottom:0.05rem solid #000; } section.collapsed { width:100vw; height:15vw; padding-top:2rem; } section.expanded { width:100vw; } /*section::-webkit-scrollbar { display:none; }*/ .lightboxControls button.previous { width:3rem; height:3rem; } .lightboxControls button.next { width:3rem; height:3rem; } /*.filter .topic { background-repeat:no-repeat; background-size:contain; }*/ body .filter .wrapper, body .filter .wrapper.portrait { width:95vw; height:160vw; margin-top:2rem; position:relative; } body.home .filter .wrapper.landscape { width:95vw; height:160vw; } body.projects .filter .topic-0 { left:7%; top:9%; width:49%; height:22%; background-image:url("/assets/images/topic-icon-large-green-01.svg"); } body.projects .filter .topic-1 { left:51%; top:0; width:47%; height:26%; background-image:url("/assets/images/topic-icon-large-green-02.svg"); } body.projects .filter .topic-2 { top:29%; width:42%; height:27%; background-image:url("/assets/images/topic-icon-large-green-03.svg"); } body.projects .filter .topic-3 { left:43%; top:29%; width:43%; height:27%; background-image:url("/assets/images/topic-icon-large-green-04.svg"); } body.projects .filter .topic-4 { left:15%; top:53%; width:44%; height:28%; background-image:url("/assets/images/topic-icon-large-green-05.svg"); } body.projects .filter .topic-5 { left:58%; top:46%; width:42%; height:29%; background-image:url("/assets/images/topic-icon-large-green-06.svg"); } body.projects .filter .topic-6 { left:0; top:75%; width:48%; height:32%; background-image:url("/assets/images/topic-icon-large-green-07.svg"); } body.projects .filter .topic-7 { left:47%; top:74%; width:52%; height:23%; background-image:url("/assets/images/topic-icon-large-green-08.svg"); } body.project .contents > .width40, body.project .contents > .width45, body.project .contents > .width55 { width:100% !important; } body.project .contents .projectData, body.project .contents .description { margin-bottom:2rem; padding:0 !important; } .filter .topic-0:hover { background-image:url("/assets/images/topic-icon-large-green-01.svg") !important; } .filter .topic-0.active { background-image:url("/assets/images/topic-icon-large-white-01.svg") !important; } .filter .topic-1:hover { background-image:url("/assets/images/topic-icon-large-green-02.svg") !important; } .filter .topic-1.active { background-image:url("/assets/images/topic-icon-large-white-02.svg") !important; } .filter .topic-2:hover { background-image:url("/assets/images/topic-icon-large-green-03.svg") !important; } .filter .topic-2.active { background-image:url("/assets/images/topic-icon-large-white-03.svg") !important; } .filter .topic-3:hover { background-image:url("/assets/images/topic-icon-large-green-04.svg") !important; } .filter .topic-3.active { background-image:url("/assets/images/topic-icon-large-white-04.svg") !important; } .filter .topic-4:hover { background-image:url("/assets/images/topic-icon-large-green-05.svg") !important; } .filter .topic-4.active { background-image:url("/assets/images/topic-icon-large-white-05.svg") !important; } .filter .topic-5:hover { background-image:url("/assets/images/topic-icon-large-green-06.svg") !important; } .filter .topic-5.active { background-image:url("/assets/images/topic-icon-large-white-06.svg") !important; } .filter .topic-6:hover { background-image:url("/assets/images/topic-icon-large-green-07.svg") !important; } .filter .topic-6.active { background-image:url("/assets/images/topic-icon-large-white-07.svg") !important; } .filter .topic-7:hover { background-image:url("/assets/images/topic-icon-large-green-08.svg") !important; } .filter .topic-7.active { background-image:url("/assets/images/topic-icon-large-white-08.svg") !important; } /*=================================== Templates ===================================*/ #cookie_banner-wrapper { width:100vw; left:0; bottom:0; } .logo { background:url("/assets/images/logo.png") no-repeat left bottom #fff; background-size:contain; } nav.primary.vertical { left:auto; top:auto; float:left; } .home section div.filter { width:100vw; height:100vh; top:0; left:0; } .projects section div.filter { width:100vw; height:100vh; top:0; left:0; } section div.filter.active { z-index:200; } section div.filter button.archive { right:1rem; bottom:1rem; } body > nav.extras { left:1rem; bottom:1rem; } body > nav.extras .language { width:4rem; height:4rem; } body > nav.extras form { margin-top:1rem; } body.home section.news div div:not(:first-of-type) { display:none; } body.home section.projects div:not(.filter) div:not(:first-of-type), body.home section.projects div:not(.filter) h2:not(:first-of-type) { display:none; } body.home section nav button { display:none; } body.home section.projects div.filter div div { display:block !important; } body.home section.projects div.filter div div.vCentered { display:flex !important; } body.home section.studio nav.extras { width:100vw; left:0; bottom:0; padding:10rem 1rem 6rem; position:relative; } body.home section.studio nav.extras input { margin-top:1rem; } body.news .news .width33 { width:80%; position:relative; z-index:100; } body.news .news .width60 { left:10rem; top:10rem; position:fixed; z-index:0; } body.newsArticle .news .width33:not(.smallLeftPadding) { display:none; } body.newsArticle .news .width33.smallLeftPadding { width:100%; padding-left:0; margin-top:2rem; } body.newsArticle .news .content { width:100%; left:0; margin-right:0; } body.newsArticle .news .content .width75 { width:100%; } body.newsArticle .lightbox.active { width:100% !important; } .projectSeries .projects .description { width:75%; } .projectSeries .projects .description > .width40 { width:100%; } .projectSeries .projects .children { width:100%; margin-top:4rem; } .studio .intro, .studio .partners { width:75%; } .studio .contact .members { display:none; } .studio .contact .locations > .width100 button { margin-right:2rem; margin-bottom:1rem; } .studio .publications, .studio .team, .studio .awards { width:100%; } .studio .publications .width50 { width:75%; } .studio .publications .width50:nth-of-type(3) .publication, .studio .partners > .item { margin-top:6rem; } .studio .publications .width50 .publication.smallLeftPadding { padding-left:0; } .studio .partners .width50 { width:100%; } .studio .awards { margin-top:14rem; } .studio nav.secondary { display:none; } .search form { width:100%; margin-top:4rem; position:relative; } .search .results { width:75%; } .search .backLink { margin-left:0; } footer span:not(:first-of-type) { margin-top:1rem; } /*=================================== Texts ===================================*/ input { font:400 2rem/0.2rem allotrope, sans-serif; } span.small { font:400 1.2rem/1.6rem reason-new, sans-serif; } }