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-ftnk-n4-active wf-ftnk-n7-active wf-lgmv-n5-active wf-lgmv-n4-active wf-jyjz-n4-active wf-lgmv-n7-active wf-lgmv-n6-active wf-rtzs-n5-active wf-lgmv-n3-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, .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 {724 background-color: #111111;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 {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: 100%; }741 742html .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 960nav .page-title,961nav .gallery-title,962nav .project-title,963nav .link-title,964nav .social,965nav .social li {966 display: inline-block;967 vertical-align: middle; }968 969nav .project-title:first-child,970nav .gallery-title:first-child,971nav .page-title:first-child,972nav .link-title:first-child {973 padding-left: 0 !important; }974 975nav .project-title:last-child,976nav .gallery-title:last-child,977nav .page-title:last-child,978nav .link-title:last-child {979 padding-right: 0 !important; }980 981.masthead {982 overflow: hidden;983 position: relative; }984 .masthead .video-wrap {985 height: 100%;986 left: 0;987 overflow: hidden;988 position: absolute;989 top: 0;990 width: 100%; }991 .masthead video {992 font-family: 'object-fit: cover;';993 height: 100%;994 left: 0;995 object-fit: cover;996 top: 0;997 width: 100%; }998 .masthead:after {999 content: '';1000 height: 100%;1001 left: 0;1002 position: absolute;1003 top: 0;1004 width: 100%; }1005 .masthead h1,1006 .masthead p {1007 width: 100%;1008 word-wrap: break-word; }1009 1010.masthead,1011.masthead-placeholder {1012 width: 100%; }1013 1014.masthead-placeholder {1015 opacity: 0;1016 position: relative !important;1017 z-index: -1; }1018 1019.masthead-contents,1020.masthead-text {1021 width: 100%; }1022 1023.masthead-contents {1024 height: 100%;1025 top: 0;1026 z-index: 1; }1027 1028.masthead,1029.masthead-contents {1030 display: -webkit-box;1031 display: -moz-box;1032 display: box;1033 display: -webkit-flex;1034 display: -moz-flex;1035 display: -ms-flexbox;1036 display: flex;1037 -webkit-box-align: center;1038 -moz-box-align: center;1039 box-align: center;1040 -webkit-align-items: center;1041 -moz-align-items: center;1042 -ms-align-items: center;1043 -o-align-items: center;1044 align-items: center;1045 -ms-flex-align: center; }1046 1047.masthead-arrow-container {1048 cursor: pointer;1049 height: 40px;1050 width: 60px; }1051 1052.masthead-arrow {1053 -webkit-transform: rotate(45deg) translateY(-15px) translateX(5px);1054 -moz-transform: rotate(45deg) translateY(-15px) translateX(5px);1055 -ms-transform: rotate(45deg) translateY(-15px) translateX(5px);1056 -o-transform: rotate(45deg) translateY(-15px) translateX(5px);1057 transform: rotate(45deg) translateY(-15px) translateX(5px);1058 border-bottom: 1px solid transparent;1059 border-right: 1px solid transparent;1060 bottom: 5px;1061 height: 30px;1062 position: absolute;1063 width: 30px; }1064 1065.masthead-button {1066 cursor: pointer;1067 display: inline-block;1068 vertical-align: middle; }1069 .masthead-button + .masthead-button-spacer + .masthead-button {1070 margin-left: 17px; }1071 1072.masthead-button-spacer {1073 display: none; }1074 1075@media (max-width: 540px) {1076 .masthead-button + .masthead-button-spacer {1077 display: block;1078 height: 17px; }1079 .masthead-button + .masthead-button-spacer + .masthead-button {1080 margin-left: 0; } }1081 1082.site-footer {1083 clear: both;1084 display: block; }1085 1086.cookie-banner {1087 bottom: 0;1088 display: none;1089 position: fixed;1090 text-align: center;1091 z-index: 99999; }1092 .cookie-banner.show {1093 display: block; }1094 .cookie-banner p {1095 font-size: 18px;1096 line-height: 1.222;1097 margin: 24px;1098 max-width: calc(100% - 84px); }1099 @media (max-width: 768px) {1100 .cookie-banner p {1101 font-size: 16px; } }1102 .cookie-banner a {1103 color: inherit;1104 margin-left: 10px;1105 text-decoration: underline; }1106 .cookie-banner .close-btn {1107 position: absolute;1108 right: 20px;1109 top: 50%;1110 transform: translateY(-50%);1111 width: 16px; }1112 1113.site-header {1114 display: -webkit-flex;1115 display: flex;1116 position: fixed;1117 right: 0;1118 top: 0;1119 width: 100%; }1120 .site-header.on-scroll {1121 transition: background-color 0.3s ease, box-shadow 0.3s ease; }1122 1123.logo-wrap {1124 flex: 1; }1125 1126.logo-wrap {1127 max-width: 100%;1128 margin-left: auto;1129 margin-right: auto;1130 padding-bottom: 0px;1131 padding-top: 0px;1132 width: 40%; }1133 1134.logo-text {1135 margin-left: auto;1136 margin-right: auto;1137 text-align: center; }1138 1139.logo-image {1140 max-width: 100%;1141 margin-left: auto;1142 margin-right: auto;1143 text-align: center; }1144 1145.logo-secondary-text {1146 float: left;1147 text-align: left; }1148 1149.logo-secondary-image {1150 max-width: 100%;1151 float: left;1152 text-align: left; }1153 1154.logo {1155 font-family: jyjz;1156 font-size: 76px;1157 font-style: normal;1158 font-weight: 400;1159 line-height: 70px;1160 padding-bottom: 0px;1161 padding-left: 0%;1162 padding-right: 0%;1163 padding-top: 0px; }1164 .logo,1165 .logo a {1166 color: #fff; }1167 .logo a:hover {1168 color: #FFFFFF;1169 font-style: normal;1170 font-weight: 400; }1171 1172.logo-secondary {1173 font-family: lgmv;1174 font-size: 22px;1175 font-style: normal;1176 font-weight: 500;1177 line-height: 22px;1178 padding-bottom: 0px;1179 padding-left: 0%;1180 padding-right: 0%;1181 padding-top: 0px;1182 text-transform: uppercase; }1183 .logo-secondary,1184 .logo-secondary a {1185 color: #cccccc; }1186 .logo-secondary a:hover {1187 color: #cccccc;1188 font-style: normal;1189 font-weight: 500;1190 text-transform: uppercase; }1191 1192nav {1193 float: left;1194 max-width: 100%;1195 width: 30%; }1196 nav .gallery-title a {1197 color: #CCCCCC;1198 font-family: lgmv;1199 font-size: 20px;1200 font-style: normal;