SALT-NLP/Design2Code
This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the dataset in the huggingface format here. Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.
221.8k
1<!DOCTYPE html>2<html class="wf-gmsj-n4-active wf-vcsm-n4-active wf-vcsm-n1-active wf-vcsm-n7-active wf-vcsm-n6-active wf-vcsm-i4-active wf-gmsj-i4-active wf-kwhz-n4-active wf-gmsj-i3-active wf-ybqr-n7-active wf-gmsj-n7-active wf-active" lang="en-US">3 <head>4 <style>5 .disable-download img {6 pointer-events: none; }7.link-transition a {8 transition: background 0.2s ease, color 0.2s ease; }9 .link-transition a svg {10 transition: fill 0.2s ease; }11 12.project-cover .details {13 transition: background 0.2s ease; }14 15.project-cover .title,16.project-cover .fields,17.project-cover .custom,18.project-cover .description,19.project-cover .date {20 transition: color 0.2s ease; }21@-webkit-keyframes rotate-forever {22 0% {23 -webkit-transform: rotate(0deg);24 -moz-transform: rotate(0deg);25 -ms-transform: rotate(0deg);26 -o-transform: rotate(0deg);27 transform: rotate(0deg); }28 100% {29 -webkit-transform: rotate(360deg);30 -moz-transform: rotate(360deg);31 -ms-transform: rotate(360deg);32 -o-transform: rotate(360deg);33 transform: rotate(360deg); } }34 35@-moz-keyframes rotate-forever {36 0% {37 -webkit-transform: rotate(0deg);38 -moz-transform: rotate(0deg);39 -ms-transform: rotate(0deg);40 -o-transform: rotate(0deg);41 transform: rotate(0deg); }42 100% {43 -webkit-transform: rotate(360deg);44 -moz-transform: rotate(360deg);45 -ms-transform: rotate(360deg);46 -o-transform: rotate(360deg);47 transform: rotate(360deg); } }48 49@keyframes rotate-forever {50 0% {51 -webkit-transform: rotate(0deg);52 -moz-transform: rotate(0deg);53 -ms-transform: rotate(0deg);54 -o-transform: rotate(0deg);55 transform: rotate(0deg); }56 100% {57 -webkit-transform: rotate(360deg);58 -moz-transform: rotate(360deg);59 -ms-transform: rotate(360deg);60 -o-transform: rotate(360deg);61 transform: rotate(360deg); } }62 63.lightbox-spinner {64 -webkit-animation-duration: 0.7s;65 -moz-animation-duration: 0.7s;66 animation-duration: 0.7s;67 -webkit-animation-iteration-count: infinite;68 -moz-animation-iteration-count: infinite;69 animation-iteration-count: infinite;70 -webkit-animation-name: rotate-forever;71 -moz-animation-name: rotate-forever;72 animation-name: rotate-forever;73 -webkit-animation-timing-function: linear;74 -moz-animation-timing-function: linear;75 animation-timing-function: linear;76 height: 30px;77 width: 30px;78 border: 4px solid #fff;79 border-right-color: transparent;80 border-radius: 50%;81 display: inline-block;82 opacity: 0.7; }83html.lightbox-enabled,84html.lightbox-enabled body {85 overflow: hidden; }86 87html.lightbox-zoomed .lightbox-content {88 cursor: zoom-out;89 overflow: auto; }90 html.lightbox-zoomed .lightbox-content.zoomable-x {91 justify-content: flex-start; }92 html.lightbox-zoomed .lightbox-content.zoomable-y {93 align-items: baseline; }94 95html.lightbox-zoomed #lightbox-wrap img {96 max-width: inherit;97 max-height: inherit; }98 99html.lightbox-zoomed #lightbox-img-wrap .lightbox-extra {100 display: none; }101 102.lightbox-link,103.lightbox-content.zoomable {104 cursor: zoom-in; }105 106#lightbox-wrap .lightbox-contents {107 -moz-user-select: none;108 -webkit-user-select: none;109 -ms-user-select: none;110 user-select: none; }111 112.lightbox-content {113 align-items: center;114 display: flex;115 height: 100%;116 justify-content: center;117 opacity: 1;118 position: absolute;119 top: 0;120 transition: opacity .4s;121 width: 100vw; }122 123#lightbox-blocking {124 align-items: center;125 bottom: 0;126 display: flex;127 justify-content: center;128 left: 0;129 position: fixed;130 right: 0;131 top: 0;132 z-index: 1002; }133 #lightbox-blocking .lightbox-spinner {134 display: none; }135 136#lightbox-wrap {137 height: 100%;138 left: 0;139 position: fixed;140 top: 0;141 width: 100vw;142 z-index: 1001; }143 #lightbox-wrap .offscreen, #lightbox-wrap.offscreen {144 height: 0;145 overflow: hidden;146 visibility: hidden;147 -webkit-transform: translateX(-99999px);148 -ms-transform: translateX(-99999px);149 transform: translateX(-99999px);150 width: 0; }151 #lightbox-wrap.loading .lightbox-spinner {152 display: block; }153 #lightbox-wrap .hidden {154 opacity: 0; }155 #lightbox-wrap .lightbox-contents {156 display: inline-block;157 max-height: 100%;158 max-width: 100%; }159 #lightbox-wrap.single .next, #lightbox-wrap.single .next:hover,160 #lightbox-wrap.single .prev,161 #lightbox-wrap.single .prev:hover {162 display: none; }163 #lightbox-wrap.extras-hidden #lightbox-img-wrap .lightbox-extra {164 opacity: 0;165 transition: opacity 1s; }166 #lightbox-wrap img {167 max-height: 100vh;168 max-width: 100vw; }169 170#lightbox-inner-wrap {171 height: 100%;172 margin: auto;173 position: relative;174 z-index: 1003; }175 #lightbox-inner-wrap .control {176 cursor: pointer;177 position: absolute;178 z-index: 1003; }179 #lightbox-inner-wrap svg .lightbox-icon-bg {180 fill: #696969;181 opacity: .2; }182 #lightbox-inner-wrap svg:hover .lightbox-icon-bg {183 opacity: .4; }184 #lightbox-inner-wrap .next,185 #lightbox-inner-wrap .prev {186 height: 100vh;187 opacity: 0;188 top: 0;189 width: 30vw; }190 #lightbox-inner-wrap .next:hover,191 #lightbox-inner-wrap .prev:hover {192 opacity: 1; }193 #lightbox-inner-wrap .next.hidden,194 #lightbox-inner-wrap .prev.hidden {195 cursor: default; }196 #lightbox-inner-wrap .next.hidden svg,197 #lightbox-inner-wrap .prev.hidden svg {198 display: none; }199 #lightbox-inner-wrap .next svg,200 #lightbox-inner-wrap .prev svg {201 top: -webkit-calc(50% - 30px) ;202 top: calc(50% - 30px) ;203 position: absolute; }204 #lightbox-inner-wrap .next svg .lightbox-icon-arrow,205 #lightbox-inner-wrap .prev svg .lightbox-icon-arrow {206 fill: #FFFFFF; }207 #lightbox-inner-wrap .next {208 right: 0; }209 #lightbox-inner-wrap .next svg {210 right: 20px; }211 #lightbox-inner-wrap .prev {212 left: 0; }213 #lightbox-inner-wrap .prev svg {214 left: 20px; }215 #lightbox-inner-wrap .close {216 position: fixed;217 height: 40px;218 right: 20px;219 top: 20px;220 width: 40px; }221 #lightbox-inner-wrap .close:hover {222 cursor: pointer; }223 #lightbox-inner-wrap .close .lightbox-icon-bg {224 fill: #fff; }225 226@media (max-width: 1024px) {227 #lightbox-inner-wrap .close {228 right: 0;229 top: 0; }230 #lightbox-inner-wrap .close circle {231 display: none; }232 #lightbox-inner-wrap .next:hover,233 #lightbox-inner-wrap .prev:hover {234 opacity: 0; } }235 236@media (min-width: 1024px) {237 .lightbox-link.hover-icon-enabled {238 position: relative; }239 .lightbox-link.hover-icon-enabled:hover::after {240 background: rgba(105, 105, 105, 0.2) url(data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZmlsbDogd2hpdGUiIHZpZXdCb3g9IjAgMCAyMSAyMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICA8cGF0aCBkPSJNLTEuMjUyMjIyNTEsMTUuNjAzNDE5NyBDLTEuMzUyNTE5MjcsMTUuNjkzNjg2OCAtMS40MjUyMzMzMywxNS43OTg5OTY4IC0xLjQ3MDM2Njg3LDE1LjkxOTM1MjkgQy0xLjUxNTUwMDQxLDE2LjAzOTcwOSAtMS41MzgwNjY4NCwxNi4xNjAwNjMzIC0xLjUzODA2Njg0LDE2LjI4MDQxOTQgQy0xLjUzODA2Njg0LDE2LjQwMDc3NTUgLTEuNTE1NTAwNDEsMTYuNTIxMTI5OCAtMS40NzAzNjY4NywxNi42NDE0ODU5IEMtMS40MjUyMzMzMywxNi43NjE4NDIgLTEuMzUyNTE5MjcsMTYuODY3MTUyIC0xLjI1MjIyMjUxLDE2Ljk1NzQxOTEgTDMuNTYxOTk3NzEsMjEuNzcxNjM5MyBDMy43NTI1NjE1NSwyMS45NjIyMDMyIDMuOTgwNzMzMjQsMjIuMDU3NDgzNyA0LjI0NjUxOTY1LDIyLjA1NzQ4MzcgQzQuNTEyMzA2MDUsMjIuMDU3NDgzNyA0LjczNTQ2Mjk5LDIxLjk2MjIwMzIgNC45MTU5OTcxNSwyMS43NzE2MzkzIEM1LjEwNjU2MDk4LDIxLjU4MTA3NTUgNS4yMDE4NDE0NywyMS4zNTU0MTEyIDUuMjAxODQxNDcsMjEuMDk0NjM5NiBDNS4yMDE4NDE0NywyMC44MzM4NjggNS4xMDY1NjA5OCwyMC42MDgyMDM3IDQuOTE1OTk3MTUsMjAuNDE3NjM5OSBMMS43NTY2NjUxMywxNy4yNDMyNjM0IEwxMC4wMTYwNjE3LDE3LjI0MzI2MzQgQzEwLjI4Njg2MjksMTcuMjQzMjYzNCAxMC41MTUwMzQ2LDE3LjE1MDQ5MDMgMTAuNzAwNTgzNiwxNi45NjQ5NDEzIEMxMC44ODYxMzI2LDE2Ljc3OTM5MjMgMTAuOTc4OTA1NywxNi41NTEyMjA2IDEwLjk3ODkwNTcsMTYuMjgwNDE5NCBDMTAuOTc4OTA1NywxNi4wMDk2MTgyIDEwLjg4NjEzMjYsMTUuNzgxNDQ2NSAxMC43MDA1ODM2LDE1LjU5NTg5NzUgQzEwLjUxNTAzNDYsMTUuNDEwMzQ4NSAxMC4yODY4NjI5LDE1LjMxNzU3NTMgMTAuMDE2MDYxNywxNS4zMTc1NzUzIEwxLjc1NjY2NTEzLDE1LjMxNzU3NTMgTDQuOTE1OTk3MTUsMTIuMTQzMTk4OSBDNS4xMDY1NjA5OCwxMS45NTI2MzUxIDUuMjAxODQxNDcsMTEuNzI2OTcwNyA1LjIwMTg0MTQ3LDExLjQ2NjE5OTIgQzUuMjAxODQxNDcsMTEuMjA1NDI3NiA1LjEwNjU2MDk4LDEwLjk3OTc2MzMgNC45MTU5OTcxNSwxMC43ODkxOTk1IEM0LjczNTQ2Mjk5LDEwLjU5ODYzNTYgNC41MTIzMDYwNSwxMC41MDMzNTUxIDQuMjQ2NTE5NjUsMTAuNTAzMzU1MSBDMy45ODA3MzMyNCwxMC41MDMzNTUxIDMuNzUyNTYxNTUsMTAuNTk4NjM1NiAzLjU2MTk5NzcxLDEwLjc4OTE5OTUgTC0xLjI1MjIyMjUxLDE1LjYwMzQxOTcgWiIgaWQ9IngiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuNzIwNDE5LCAxNi4yODA0MTkpIHJvdGF0ZSgtNDUuMDAwMDAwKSB0cmFuc2xhdGUoLTQuNzIwNDE5LCAtMTYuMjgwNDE5KSAiPjwvcGF0aD4KICA8cGF0aCBkPSJNMTAuMzA3Nzc3NCw0LjA0MzQxOTczIEMxMC4yMDc0ODA3LDQuMTMzNjg2ODEgMTAuMTM0NzY2Niw0LjIzODk5NjgzIDEwLjA4OTYzMzEsNC4zNTkzNTI5MyBDMTAuMDQ0NDk5NSw0LjQ3OTcwOTA0IDEwLjAyMTkzMzEsNC42MDAwNjMzNCAxMC4wMjE5MzMxLDQuNzIwNDE5NDUgQzEwLjAyMTkzMzEsNC44NDA3NzU1NiAxMC4wNDQ0OTk1LDQuOTYxMTI5ODYgMTAuMDg5NjMzMSw1LjA4MTQ4NTk3IEMxMC4xMzQ3NjY2LDUuMjAxODQyMDcgMTAuMjA3NDgwNyw1LjMwNzE1MjA5IDEwLjMwNzc3NzQsNS4zOTc0MTkxNyBMMTUuMTIxOTk3NywxMC4yMTE2Mzk0IEMxNS4zMTI1NjE1LDEwLjQwMjIwMzIgMTUuNTQwNzMzMiwxMC40OTc0ODM3IDE1LjgwNjUxOTYsMTAuNDk3NDgzNyBDMTYuMDcyMzA2LDEwLjQ5NzQ4MzcgMTYuMjk1NDYyOSwxMC40MDIyMDMyIDE2LjQ3NTk5NzEsMTAuMjExNjM5NCBDMTYuNjY2NTYwOSwxMC4wMjEwNzU2IDE2Ljc2MTg0MTQsOS43OTU0MTEyNCAxNi43NjE4NDE0LDkuNTM0NjM5NjcgQzE2Ljc2MTg0MTQsOS4yNzM4NjgxMSAxNi42NjY1NjA5LDkuMDQ4MjAzNzkgMTYuNDc1OTk3MSw4Ljg1NzYzOTk1IEwxMy4zMTY2NjUxLDUuNjgzMjYzNDkgTDIxLjU3NjA2MTYsNS42ODMyNjM0OSBDMjEuODQ2ODYyOSw1LjY4MzI2MzQ5IDIyLjA3NTAzNDYsNS41OTA0OTAzOSAyMi4yNjA1ODM2LDUuNDA0OTQxMzkgQzIyLjQ0NjEzMjYsNS4yMTkzOTIzOSAyMi41Mzg5MDU3LDQuOTkxMjIwNjkgMjIuNTM4OTA1Nyw0LjcyMDQxOTQ1IEMyMi41Mzg5MDU3LDQuNDQ5NjE4MjEgMjIuNDQ2MTMyNiw0LjIyMTQ0NjUxIDIyLjI2MDU4MzYsNC4wMzU4OTc1MSBDMjIuMDc1MDM0NiwzLjg1MDM0ODUxIDIxLjg0Njg2MjksMy43NTc1NzU0MSAyMS41NzYwNjE2LDMuNzU3NTc1NDEgTDEzLjMxNjY2NTEsMy43NTc1NzU0MSBMMTYuNDc1OTk3MSwwLjU4MzE5ODk0NyBDMTYuNjY2NTYwOSwwLjM5MjYzNTExMSAxNi43NjE4NDE0LDAuMTY2OTcwNzk0IDE2Ljc2MTg0MTQsLTAuMDkzODAwNzcxNSBDMTYuNzYxODQxNCwtMC4zNTQ1NzIzMzcgMTYuNjY2NTYwOSwtMC41ODAyMzY2NTQgMTYuNDc1OTk3MSwtMC43NzA4MDA0OSBDMTYuMjk1NDYyOSwtMC45NjEzNjQzMjcgMTYuMDcyMzA2LC0xLjA1NjY0NDgyIDE1LjgwNjUxOTYsLTEuMDU2NjQ0ODIgQzE1LjU0MDczMzIsLTEuMDU2NjQ0ODIgMTUuMzEyNTYxNSwtMC45NjEzNjQzMjcgMTUuMTIxOTk3NywtMC43NzA4MDA0OSBMMTAuMzA3Nzc3NCw0LjA0MzQxOTczIFoiIGlkPSJ4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNi4yODA0MTksIDQuNzIwNDE5KSByb3RhdGUoLTIyNS4wMDAwMDApIHRyYW5zbGF0ZSgtMTYuMjgwNDE5LCAtNC43MjA0MTkpICI+PC9wYXRoPgo8L3N2Zz4K) no-repeat center;241 background-size: 16px;242 border-radius: 50%;243 content: '';244 display: block;245 height: 36px;246 position: absolute;247 right: 10px;248 top: 10px;249 width: 36px;250 z-index: 1000; } }251 252@media all and (-ms-high-contrast: none) {253 .lightbox-link,254 .lightbox-content.zoomable {255 cursor: pointer; } }256@-webkit-keyframes fade-in {257 from {258 opacity: 0; }259 to {260 opacity: 1; } }261 262@-moz-keyframes fade-in {263 from {264 opacity: 0; }265 to {266 opacity: 1; } }267 268@keyframes fade-in {269 from {270 opacity: 0; }271 to {272 opacity: 1; } }273 274@-webkit-keyframes fade-out {275 from {276 opacity: 1; }277 to {278 opacity: 0; } }279 280@-moz-keyframes fade-out {281 from {282 opacity: 1; }283 to {284 opacity: 0; } }285 286@keyframes fade-out {287 from {288 opacity: 1; }289 to {290 opacity: 0; } }291 292.transition-enabled {293 opacity: 0; }294 295.transition-in {296 -webkit-animation: fade-in ease-in;297 animation: fade-in ease-in;298 -webkit-animation-duration: 0.25s;299 animation-duration: 0.25s;300 -webkit-animation-fill-mode: forwards;301 animation-fill-mode: forwards; }302 303.transition-out {304 opacity: 1;305 -webkit-animation: fade-out ease-out;306 animation: fade-out ease-out;307 -webkit-animation-duration: 0.25s;308 animation-duration: 0.25s;309 -webkit-animation-fill-mode: forwards;310 animation-fill-mode: forwards; }311 312 313 314.site-header:after, .site-content:after, .logo-wrap:after {315 clear: both;316 content: '';317 display: table; }318 319/*! normalize.css v3.0.1 | MIT License | git.io/normalize */320/**321 * 1. Set default font family to sans-serif.322 * 2. Prevent iOS text size adjust after orientation change, without disabling323 * user zoom.324 */325html {326 font-family: sans-serif;327 /* 1 */328 -ms-text-size-adjust: 100%;329 /* 2 */330 -webkit-text-size-adjust: 100%;331 /* 2 */ }332 333/**334 * Remove default margin.335 */336body {337 margin: 0; }338 339/* HTML5 display definitions340 ========================================================================== */341/**342 * Correct `block` display not defined for any HTML5 element in IE 8/9.343 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.344 * Correct `block` display not defined for `main` in IE 11.345 */346article,347aside,348details,349figcaption,350figure,351footer,352header,353hgroup,354main,355nav,356section,357summary {358 display: block; }359 360/**361 * 1. Correct `inline-block` display not defined in IE 8/9.362 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.363 */364audio,365canvas,366progress,367video {368 display: inline-block;369 /* 1 */370 vertical-align: baseline;371 /* 2 */ }372 373/**374 * Prevent modern browsers from displaying `audio` without controls.375 * Remove excess height in iOS 5 devices.376 */377audio:not([controls]) {378 display: none;379 height: 0; }380 381/**382 * Address `[hidden]` styling not present in IE 8/9/10.383 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.384 */385[hidden],386template {387 display: none; }388 389/* Links390 ========================================================================== */391/**392 * Remove the gray background color from active links in IE 10.393 */394a {395 background: transparent; }396 397/**398 * Improve readability when focused and also mouse hovered in all browsers.399 */400a:active,401a:focus,402a:hover {403 outline: 0; }404 405/* Text-level semantics406 ========================================================================== */407/**408 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.409 */410abbr[title] {411 border-bottom: 1px dotted; }412 413/**414 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.415 */416b,417strong {418 font-weight: bold; }419 420/**421 * Address styling not present in Safari and Chrome.422 */423dfn {424 font-style: italic; }425 426/**427 * Address variable `h1` font-size and margin within `section` and `article`428 * contexts in Firefox 4+, Safari, and Chrome.429 */430h1 {431 font-size: 2em;432 margin: 0.67em 0; }433 434/**435 * Address styling not present in IE 8/9.436 */437mark {438 background: #ff0;439 color: #000; }440 441/**442 * Address inconsistent and variable font size in all browsers.443 */444small {445 font-size: 80%; }446 447/**448 * Prevent `sub` and `sup` affecting `line-height` in all browsers.449 */450sub,451sup {452 font-size: 75%;453 line-height: 0;454 position: relative;455 vertical-align: baseline; }456 457sup {458 top: -0.5em; }459 460sub {461 bottom: -0.25em; }462 463/* Embedded content464 ========================================================================== */465/**466 * Remove border when inside `a` element in IE 8/9/10.467 */468img {469 border: 0; }470 471/**472 * Correct overflow not hidden in IE 9/10/11.473 */474svg:not(:root) {475 overflow: hidden; }476 477/* Grouping content478 ========================================================================== */479/**480 * Address margin not present in IE 8/9 and Safari.481 */482figure {483 margin: 1em 40px; }484 485/**486 * Address differences between Firefox and other browsers.487 */488hr {489 -moz-box-sizing: content-box;490 box-sizing: content-box;491 height: 0; }492 493/**494 * Contain overflow in all browsers.495 */496pre {497 overflow: auto; }498 499/**500 * Address odd `em`-unit font size rendering in all browsers.501 */502code,503kbd,504pre,505samp {506 font-family: monospace, monospace;507 font-size: 1em; }508 509/* Forms510 ========================================================================== */511/**512 * Known limitation: by default, Chrome and Safari on OS X allow very limited513 * styling of `select`, unless a `border` property is set.514 */515/**516 * 1. Correct color not being inherited.517 * Known issue: affects color of disabled elements.518 * 2. Correct font properties not being inherited.519 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.520 */521button,522input,523optgroup,524select,525textarea {526 color: inherit;527 /* 1 */528 font: inherit;529 /* 2 */530 margin: 0;531 /* 3 */ }532 533/**534 * Address `overflow` set to `hidden` in IE 8/9/10/11.535 */536button {537 overflow: visible; }538 539/**540 * Address inconsistent `text-transform` inheritance for `button` and `select`.541 * All other form control elements do not inherit `text-transform` values.542 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.543 * Correct `select` style inheritance in Firefox.544 */545button,546select {547 text-transform: none; }548 549/**550 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`551 * and `video` controls.552 * 2. Correct inability to style clickable `input` types in iOS.553 * 3. Improve usability and consistency of cursor style between image-type554 * `input` and others.555 */556button,557html input[type="button"],558input[type="reset"],559input[type="submit"] {560 -webkit-appearance: button;561 /* 2 */562 cursor: pointer;563 /* 3 */ }564 565/**566 * Re-set default cursor for disabled elements.567 */568button[disabled],569html input[disabled] {570 cursor: default; }571 572/**573 * Remove inner padding and border in Firefox 4+.574 */575button::-moz-focus-inner,576input::-moz-focus-inner {577 border: 0;578 padding: 0; }579 580/**581 * Address Firefox 4+ setting `line-height` on `input` using `!important` in582 * the UA stylesheet.583 */584input {585 line-height: normal; }586 587/**588 * It's recommended that you don't attempt to style these elements.589 * Firefox's implementation doesn't respect box-sizing, padding, or width.590 *591 * 1. Address box sizing set to `content-box` in IE 8/9/10.592 * 2. Remove excess padding in IE 8/9/10.593 */594input[type="checkbox"],595input[type="radio"] {596 box-sizing: border-box;597 /* 1 */598 padding: 0;599 /* 2 */ }600 601/**602 * Fix the cursor style for Chrome's increment/decrement buttons. For certain603 * `font-size` values of the `input`, it causes the cursor style of the604 * decrement button to change from `default` to `text`.605 */606input[type="number"]::-webkit-inner-spin-button,607input[type="number"]::-webkit-outer-spin-button {608 height: auto; }609 610/**611 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.612 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome613 * (include `-moz` to future-proof).614 */615input[type="search"] {616 -webkit-appearance: textfield;617 /* 1 */618 -moz-box-sizing: content-box;619 -webkit-box-sizing: content-box;620 /* 2 */621 box-sizing: content-box; }622 623/**624 * Remove inner padding and search cancel button in Safari and Chrome on OS X.625 * Safari (but not Chrome) clips the cancel button when the search input has626 * padding (and `textfield` appearance).627 */628input[type="search"]::-webkit-search-cancel-button,629input[type="search"]::-webkit-search-decoration {630 -webkit-appearance: none; }631 632/**633 * Define consistent border, margin, and padding.634 */635fieldset {636 border: 0;637 margin: 0;638 padding: 0; }639 640/**641 * 1. Correct `color` not being inherited in IE 8/9/10/11.642 * 2. Remove padding so people aren't caught out if they zero out fieldsets.643 */644legend {645 border: 0;646 /* 1 */647 padding: 0;648 /* 2 */ }649 650/**651 * Remove default vertical scrollbar in IE 8/9/10/11.652 */653textarea {654 overflow: auto; }655 656/**657 * Don't inherit the `font-weight` (applied by a rule above).658 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.659 */660optgroup {661 font-weight: bold; }662 663/* Tables664 ========================================================================== */665/**666 * Remove most spacing between table cells.667 */668table {669 border-collapse: collapse;670 border-spacing: 0; }671 672td,673th {674 padding: 0; }675 676* {677 box-sizing: border-box; }678 679html {680 -webkit-font-smoothing: antialiased;681 text-rendering: optimizeLegibility; }682 683ul {684 margin: 0;685 padding: 0; }686 ul li {687 list-style-type: none; }688 689img {690 vertical-align: top; }691 692p {693 margin: 0; }694 695a {696 text-decoration: none; }697 698html,699body {700 min-height: 100%; }701 702.italic {703 font-style: italic; }704 705.underline {706 text-decoration: underline; }707 708.strikethrough {709 text-decoration: line-through; }710 711.bold {712 font-weight: bold; }713 714.cfix:after {715 clear: both;716 content: ' ';717 display: block;718 height: 0;719 line-height: 0;720 overflow: hidden;721 visibility: hidden; }722 723html, .site-wrap {724 background-color: #fff;725 /* stylelint-disable function-url-quotes */726 background-image: url("");727 /* stylelint-enable function-url-quotes */728 background-position: top left;729 background-repeat: no-repeat;730 background-size: contain; }731 html:before, .site-wrap:before {732 background-color: #000;733 display: none;734 opacity: calc(30 * 0.01); }735 736.site-container {737 float: none;738 margin-left: auto;739 margin-right: auto;740 max-width: 1400px; }741 742html, .site-wrap .page-background-video .video-wrap {743 left: 0;744 width: 100%; }745 746.image-left .page-background-video .video-wrap {747 left: 50vw;748 width: 50vw; }749 750.image-right .page-background-video .video-wrap {751 width: 50vw; }752 753.example-site-footer {754 background: rgba(37, 38, 42, 0.94);755 bottom: 0;756 color: #fff;757 display: inline-block;758 font-family: 'Helvetica Neue', sans-serif;759 font-size: 14px;760 left: 0;761 padding: 0 20px 0 0;762 position: fixed;763 width: 100%;764 z-index: 4; }765 .example-site-footer .icon {766 fill: #fff;767 float: left; }768 .example-site-footer .content-left,769 .example-site-footer .content-right {770 height: 70px; }771 .example-site-footer .content-left {772 float: left; }773 .example-site-footer .content-right {774 float: right; }775 776.example-footer-content {777 -webkit-transform: translateY(-50%);778 -moz-transform: translateY(-50%);779 -ms-transform: translateY(-50%);780 -o-transform: translateY(-50%);781 transform: translateY(-50%);782 display: inline-block;783 position: relative;784 top: 50%; }785 786.example-footer-link {787 border-bottom: 1px solid #fff;788 color: #fff; }789 .example-footer-link:hover {790 border-bottom-width: 0; }791 792@media (max-width: 768px) {793 .example-site-footer .desktop {794 display: none; }795 .example-site-footer .mobile {796 text-transform: capitalize; } }797 798html {799 position: relative; }800 html:before {801 content: '';802 height: 100%;803 left: 0;804 position: fixed;805 top: 0;806 width: 100%; }807 808.site-wrap,809.site-container {810 position: relative;811 width: 100%; }812 813.site-wrap:before {814 content: '';815 height: 100%;816 left: 0;817 position: absolute;818 top: 0;819 width: 100%; }820 821.site-header {822 position: relative; }823 824.theme-container:before {825 content: '';826 height: 100%;827 left: 0;828 position: absolute;829 top: 0;830 width: 100%; }831 832.responsive-nav {833 display: none;834 opacity: 0;835 visibility: hidden; }836 837.project-cover .separator:last-child,838.project-header .fields .separator:last-child {839 display: none; }840 841.preserve-whitespace {842 white-space: pre-wrap; }843 844.preserve-whitespace--nowrap {845 white-space: pre; }846 847.page-background-video .video-wrap {848 height: 100vh;849 left: 80px;850 overflow: hidden;851 position: fixed;852 top: 0;853 width: calc(100vw - 80px);854 z-index: -1; }855 .image-right .page-background-video .video-wrap {856 width: 50vw; }857 .image-left .page-background-video .video-wrap {858 left: 50%;859 width: 50vw; }860 861.page-background-video .renditions-video {862 font-family: 'object-fit: cover;';863 height: 100%;864 left: 0;865 object-fit: cover;866 position: relative;867 top: 0;868 width: 100%; }869 870.page-background-video-with-panel .video-wrap {871 left: 260px;872 width: calc(100vw - 260px); }873 .image-right .page-background-video-with-panel .video-wrap {874 left: 260px;875 width: calc(50vw - 130px); }876 .image-left .page-background-video-with-panel .video-wrap {877 left: calc(50% + 130px);878 width: calc(50vw - 130px); }879 880.image-right .page-background-video-with-panel .video-wrap {881 left: 0;882 width: 50vw; }883 884.image-left .page-background-video-with-panel .video-wrap {885 left: 50%;886 width: 50vw; }887 888.mp4-image {889 display: none !important;890 font-family: 'object-fit: cover;';891 height: 100%;892 left: 0;893 object-fit: cover;894 position: relative;895 top: 0;896 width: 100%; }897 898@supports (-webkit-overflow-scrolling: touch) {899 .video-wrap .renditions-video {900 display: none; }901 .video-wrap .mp4-image {902 display: block !important; } }903 904.logo,905.logo-secondary {906 clear: both;907 word-wrap: break-word; }908 .logo img,909 .logo-secondary img {910 max-width: 100%; }911 .logo a,912 .logo-secondary a {913 color: inherit; }914 .logo .image-link,915 .logo-secondary .image-link {916 display: inline-block;917 max-width: 100%; }918 .logo .image-rollover,919 .logo .image-scroll,920 .logo-secondary .image-rollover,921 .logo-secondary .image-scroll {922 display: none; }923 .logo.logo-text,924 .logo-secondary.logo-text {925 width: 100%; }926 .logo.has-rollover.hoverable:hover .image-link,927 .logo-secondary.has-rollover.hoverable:hover .image-link {928 display: none; }929 .logo.has-rollover.hoverable:hover .image-link.image-rollover,930 .logo-secondary.has-rollover.hoverable:hover .image-link.image-rollover {931 display: block; }932 .on-scroll .logo.has-scroll .image-normal,933 .on-scroll .logo.has-scroll .image-rollover, .on-scroll934 .logo-secondary.has-scroll .image-normal,935 .on-scroll936 .logo-secondary.has-scroll .image-rollover {937 display: none !important; }938 .on-scroll .logo.has-scroll .image-scroll, .on-scroll939 .logo-secondary.has-scroll .image-scroll {940 display: inline-block; }941 942.logo-image,943.logo-secondary-image {944 width: 100%; }945 946.social {947 font-size: 0; }948 .social li {949 display: inline-block; }950 .social li:first-child {951 padding-left: 0 !important; }952 .social li:last-child {953 padding-right: 0 !important; }954 .social li svg {955 vertical-align: middle; }956 .social a {957 display: block;958 text-align: center; }959 960.masthead {961 overflow: hidden;962 position: relative; }963 .masthead .video-wrap {964 height: 100%;965 left: 0;966 overflow: hidden;967 position: absolute;968 top: 0;969 width: 100%; }970 .masthead video {971 font-family: 'object-fit: cover;';972 height: 100%;973 left: 0;974 object-fit: cover;975 top: 0;976 width: 100%; }977 .masthead:after {978 content: '';979 height: 100%;980 left: 0;981 position: absolute;982 top: 0;983 width: 100%; }984 .masthead h1,985 .masthead p {986 width: 100%;987 word-wrap: break-word; }988 989.masthead,990.masthead-placeholder {991 width: 100%; }992 993.masthead-placeholder {994 opacity: 0;995 position: relative !important;996 z-index: -1; }997 998.masthead-contents,999.masthead-text {1000 width: 100%; }1001 1002.masthead-contents {1003 height: 100%;1004 top: 0;1005 z-index: 1; }1006 1007.masthead,1008.masthead-contents {1009 display: -webkit-box;1010 display: -moz-box;1011 display: box;1012 display: -webkit-flex;1013 display: -moz-flex;1014 display: -ms-flexbox;1015 display: flex;1016 -webkit-box-align: center;1017 -moz-box-align: center;1018 box-align: center;1019 -webkit-align-items: center;1020 -moz-align-items: center;1021 -ms-align-items: center;1022 -o-align-items: center;1023 align-items: center;1024 -ms-flex-align: center; }1025 1026.masthead-arrow-container {1027 cursor: pointer;1028 height: 40px;1029 width: 60px; }1030 1031.masthead-arrow {1032 -webkit-transform: rotate(45deg) translateY(-15px) translateX(5px);1033 -moz-transform: rotate(45deg) translateY(-15px) translateX(5px);1034 -ms-transform: rotate(45deg) translateY(-15px) translateX(5px);1035 -o-transform: rotate(45deg) translateY(-15px) translateX(5px);1036 transform: rotate(45deg) translateY(-15px) translateX(5px);1037 border-bottom: 1px solid transparent;1038 border-right: 1px solid transparent;1039 bottom: 5px;1040 height: 30px;1041 position: absolute;1042 width: 30px; }1043 1044.masthead-button {1045 cursor: pointer;1046 display: inline-block;1047 vertical-align: middle; }1048 .masthead-button + .masthead-button-spacer + .masthead-button {1049 margin-left: 17px; }1050 1051.masthead-button-spacer {1052 display: none; }1053 1054@media (max-width: 540px) {1055 .masthead-button + .masthead-button-spacer {1056 display: block;1057 height: 17px; }1058 .masthead-button + .masthead-button-spacer + .masthead-button {1059 margin-left: 0; } }1060 1061.site-footer {1062 clear: both;1063 display: block; }1064 1065.cookie-banner {1066 bottom: 0;1067 display: none;1068 position: fixed;1069 text-align: center;1070 z-index: 99999; }1071 .cookie-banner.show {1072 display: block; }1073 .cookie-banner p {1074 font-size: 18px;1075 line-height: 1.222;1076 margin: 24px;1077 max-width: calc(100% - 84px); }1078 @media (max-width: 768px) {1079 .cookie-banner p {1080 font-size: 16px; } }1081 .cookie-banner a {1082 color: inherit;1083 margin-left: 10px;1084 text-decoration: underline; }1085 .cookie-banner .close-btn {1086 position: absolute;1087 right: 20px;1088 top: 50%;1089 transform: translateY(-50%);1090 width: 16px; }1091 1092.site-content {1093 margin-left: 5%;1094 margin-right: 5%;1095 width: 90%; }1096 1097.sidebar-content,1098main {1099 float: left; }1100 1101main {1102 width: 80%; }1103 1104.sidebar-content {1105 margin-right: 1%;1106 width: 19%; }1107 1108.logo-wrap {1109 max-width: 100%;1110 float: left;1111 padding-bottom: 20px;1112 padding-top: 60px;1113 width: 100%; }1114 1115.logo-text {1116 float: left;1117 text-align: left; }1118 1119.logo-image {1120 max-width: 100%;1121 margin-left: auto;1122 margin-right: auto;1123 text-align: center; }1124 1125.logo-secondary-text {1126 float: left;1127 text-align: left; }1128 1129.logo-secondary-image {1130 max-width: 100%;1131 margin-left: auto;1132 margin-right: auto;1133 text-align: center; }1134 1135.logo {1136 font-family: gmsj;1137 font-size: 24px;1138 font-style: normal;1139 font-weight: 400;1140 line-height: 28px;1141 padding-bottom: 0px;1142 padding-left: 0%;1143 padding-right: 5%;1144 padding-top: 0px;1145 text-transform: none; }1146 .logo,1147 .logo a {1148 color: #222; }1149 .logo a:hover {1150 color: #222;1151 font-style: normal;1152 font-weight: 400;1153 text-transform: none; }1154 1155.logo-secondary {1156 font-family: gmsj;1157 font-size: 13px;1158 font-style: normal;1159 font-weight: 400;1160 line-height: 14px;1161 padding-bottom: 0px;1162 padding-left: 0%;1163 padding-right: 0%;1164 padding-top: 20px;1165 text-transform: none; }1166 .logo-secondary,1167 .logo-secondary a {1168 color: #222; }1169 .logo-secondary a:hover {1170 color: #222;1171 font-style: normal;1172 font-weight: 400;1173 text-transform: none; }1174 1175nav {1176 float: left;1177 max-width: 100%;1178 padding-bottom: 0px;1179 padding-top: 30px;1180 width: 100%; }1181 nav .gallery-title a {1182 color: #222;1183 font-family: vcsm;1184 font-size: 14px;1185 font-style: normal;1186 font-weight: 600;1187 line-height: 13px;1188 text-transform: uppercase; }1189 nav .gallery-title a:hover {1190 color: #999;1191 font-style: normal;1192 font-weight: 400;1193 text-transform: uppercase; }1194 nav .gallery-title a.active {1195 color: #222;1196 font-style: normal;1197 font-weight: 400;1198 text-transform: uppercase; }1199 nav .project-title a {1200 color: #333333;