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.7k
1<!DOCTYPE html>2<html class="wf-vcsm-n4-active wf-llxb-i5-active wf-llxb-n3-active wf-gqjh-n4-active wf-llxb-n7-active wf-rdbk-n4-active wf-llxb-n5-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: #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 {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 .page-background-video .video-wrap {743 left: 0;744 width: 100vw; }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 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.logo,871.logo-secondary,872nav {873 clear: both; }874 875.site-header {876 position: relative; }877 878.site-container {879 clear: both; }880 881.logo,882.logo-secondary {883 clear: both;884 word-wrap: break-word; }885 .logo img,886 .logo-secondary img {887 max-width: 100%; }888 .logo a,889 .logo-secondary a {890 color: inherit; }891 .logo .image-link,892 .logo-secondary .image-link {893 display: inline-block;894 max-width: 100%; }895 .logo .image-rollover,896 .logo .image-scroll,897 .logo-secondary .image-rollover,898 .logo-secondary .image-scroll {899 display: none; }900 .logo.logo-text,901 .logo-secondary.logo-text {902 width: 100%; }903 .logo.has-rollover.hoverable:hover .image-link,904 .logo-secondary.has-rollover.hoverable:hover .image-link {905 display: none; }906 .logo.has-rollover.hoverable:hover .image-link.image-rollover,907 .logo-secondary.has-rollover.hoverable:hover .image-link.image-rollover {908 display: block; }909 .on-scroll .logo.has-scroll .image-normal,910 .on-scroll .logo.has-scroll .image-rollover, .on-scroll911 .logo-secondary.has-scroll .image-normal,912 .on-scroll913 .logo-secondary.has-scroll .image-rollover {914 display: none !important; }915 .on-scroll .logo.has-scroll .image-scroll, .on-scroll916 .logo-secondary.has-scroll .image-scroll {917 display: inline-block; }918 919.logo-image,920.logo-secondary-image {921 width: 100%; }922 923.social {924 font-size: 0; }925 .social li {926 display: inline-block; }927 .social li:first-child {928 padding-left: 0 !important; }929 .social li:last-child {930 padding-right: 0 !important; }931 .social li svg {932 vertical-align: middle; }933 .social a {934 display: block;935 text-align: center; }936 937nav .page-title,938nav .gallery-title,939nav .project-title,940nav .link-title,941nav .social,942nav .social li {943 display: inline-block;944 vertical-align: middle; }945 946nav .project-title:first-child,947nav .gallery-title:first-child,948nav .page-title:first-child,949nav .link-title:first-child {950 padding-left: 0 !important; }951 952nav .project-title:last-child,953nav .gallery-title:last-child,954nav .page-title:last-child,955nav .link-title:last-child {956 padding-right: 0 !important; }957 958.masthead {959 overflow: hidden;960 position: relative; }961 .masthead .video-wrap {962 height: 100%;963 left: 0;964 overflow: hidden;965 position: absolute;966 top: 0;967 width: 100%; }968 .masthead video {969 font-family: 'object-fit: cover;';970 height: 100%;971 left: 0;972 object-fit: cover;973 top: 0;974 width: 100%; }975 .masthead:after {976 content: '';977 height: 100%;978 left: 0;979 position: absolute;980 top: 0;981 width: 100%; }982 .masthead h1,983 .masthead p {984 width: 100%;985 word-wrap: break-word; }986 987.masthead,988.masthead-placeholder {989 width: 100%; }990 991.masthead-placeholder {992 opacity: 0;993 position: relative !important;994 z-index: -1; }995 996.masthead-contents,997.masthead-text {998 width: 100%; }999 1000.masthead-contents {1001 height: 100%;1002 top: 0;1003 z-index: 1; }1004 1005.masthead,1006.masthead-contents {1007 display: -webkit-box;1008 display: -moz-box;1009 display: box;1010 display: -webkit-flex;1011 display: -moz-flex;1012 display: -ms-flexbox;1013 display: flex;1014 -webkit-box-align: center;1015 -moz-box-align: center;1016 box-align: center;1017 -webkit-align-items: center;1018 -moz-align-items: center;1019 -ms-align-items: center;1020 -o-align-items: center;1021 align-items: center;1022 -ms-flex-align: center; }1023 1024.masthead-arrow-container {1025 cursor: pointer;1026 height: 40px;1027 width: 60px; }1028 1029.masthead-arrow {1030 -webkit-transform: rotate(45deg) translateY(-15px) translateX(5px);1031 -moz-transform: rotate(45deg) translateY(-15px) translateX(5px);1032 -ms-transform: rotate(45deg) translateY(-15px) translateX(5px);1033 -o-transform: rotate(45deg) translateY(-15px) translateX(5px);1034 transform: rotate(45deg) translateY(-15px) translateX(5px);1035 border-bottom: 1px solid transparent;1036 border-right: 1px solid transparent;1037 bottom: 5px;1038 height: 30px;1039 position: absolute;1040 width: 30px; }1041 1042.masthead-button {1043 cursor: pointer;1044 display: inline-block;1045 vertical-align: middle; }1046 .masthead-button + .masthead-button-spacer + .masthead-button {1047 margin-left: 17px; }1048 1049.masthead-button-spacer {1050 display: none; }1051 1052@media (max-width: 540px) {1053 .masthead-button + .masthead-button-spacer {1054 display: block;1055 height: 17px; }1056 .masthead-button + .masthead-button-spacer + .masthead-button {1057 margin-left: 0; } }1058 1059.site-footer {1060 clear: both;1061 display: block; }1062 1063.cookie-banner {1064 bottom: 0;1065 display: none;1066 position: fixed;1067 text-align: center;1068 z-index: 99999; }1069 .cookie-banner.show {1070 display: block; }1071 .cookie-banner p {1072 font-size: 18px;1073 line-height: 1.222;1074 margin: 24px;1075 max-width: calc(100% - 84px); }1076 @media (max-width: 768px) {1077 .cookie-banner p {1078 font-size: 16px; } }1079 .cookie-banner a {1080 color: inherit;1081 text-decoration: underline; }1082 .cookie-banner .close-btn {1083 position: absolute;1084 right: 20px;1085 top: 50%;1086 transform: translateY(-50%);1087 width: 16px; }1088 1089.site-content {1090 margin-left: 0%;1091 margin-right: 0%;1092 width: 100%; }1093 1094.site-header {1095 float: none;1096 margin-left: auto;1097 margin-right: auto;1098 max-width: 100%;1099 padding-bottom: 70px;1100 padding-top: 70px;1101 width: 100%; }1102 1103.logo-wrap {1104 max-width: 100%;1105 margin-left: auto;1106 margin-right: auto;1107 padding-bottom: 10px;1108 padding-top: 10px;1109 width: 40%; }1110 1111.logo-text {1112 margin-left: auto;1113 margin-right: auto;1114 text-align: center; }1115 1116.logo-image {1117 max-width: 100%;1118 margin-left: auto;1119 margin-right: auto;1120 text-align: center; }1121 1122.logo-secondary-text {1123 margin-left: auto;1124 margin-right: auto;1125 text-align: center; }1126 1127.logo-secondary-image {1128 max-width: 100%;1129 margin-left: auto;1130 margin-right: auto;1131 text-align: center; }1132 1133.logo {1134 font-family: llxb;1135 font-size: 100px;1136 font-style: normal;1137 font-weight: 500;1138 line-height: 18px;1139 padding-bottom: 0px;1140 padding-left: 0%;1141 padding-right: 0%;1142 padding-top: 0px;1143 text-transform: none; }1144 .logo,1145 .logo a {1146 color: #333333; }1147 .logo a:hover {1148 color: #444;1149 font-style: normal;1150 font-weight: 500;1151 text-transform: none; }1152 1153.logo-secondary {1154 font-family: rdbk;1155 font-size: 40px;1156 font-style: normal;1157 font-weight: 400;1158 line-height: 18px;1159 padding-bottom: 21px;1160 padding-left: 0%;1161 padding-right: 0%;1162 padding-top: 21px;1163 text-transform: none; }1164 .logo-secondary,1165 .logo-secondary a {1166 color: #333333; }1167 .logo-secondary a:hover {1168 color: #bbb;1169 font-style: normal;1170 font-weight: 400;1171 text-transform: none; }1172 1173nav {1174 float: none;1175 margin-left: auto;1176 margin-right: auto;1177 padding-bottom: 0px;1178 padding-top: 0px;1179 width: 63%; }1180 nav .gallery-title a {1181 color: #333333;1182 font-family: llxb;1183 font-size: 30px;1184 font-style: normal;1185 font-weight: 500;1186 line-height: 50px; }1187 nav .gallery-title a:hover {1188 color: #00c1c6;1189 font-style: normal;1190 font-weight: 500;1191 text-transform: none; }1192 nav .gallery-title a.active {1193 color: #999999;1194 font-style: italic;1195 font-weight: 500;1196 text-transform: none; }1197 nav .project-title a {1198 color: #bbb;1199 font-family: llxb;1200 font-size: 40px;