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-i7-active wf-ftnk-n5-active wf-ftnk-i5-active wf-ftnk-n7-active wf-ftnk-n4-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 /* stylelint-disable function-url-quotes */725 background-image: url("");726 /* stylelint-enable function-url-quotes */727 background-position: top left;728 background-repeat: no-repeat;729 background-size: contain; }730 html:before {731 background-color: #000;732 display: none;733 opacity: calc(30 * 0.01); }734 735.site-container {736 float: none;737 margin-left: auto;738 margin-right: auto;739 max-width: 1200px; }740 741html .page-background-video .video-wrap {742 left: 0;743 width: 100%; }744 745.image-left .page-background-video .video-wrap {746 left: 50vw;747 width: 50vw; }748 749.image-right .page-background-video .video-wrap {750 width: 50vw; }751 752.example-site-footer {753 background: rgba(37, 38, 42, 0.94);754 bottom: 0;755 color: #fff;756 display: inline-block;757 font-family: 'Helvetica Neue', sans-serif;758 font-size: 14px;759 left: 0;760 padding: 0 20px 0 0;761 position: fixed;762 width: 100%;763 z-index: 4; }764 .example-site-footer .icon {765 fill: #fff;766 float: left; }767 .example-site-footer .content-left,768 .example-site-footer .content-right {769 height: 70px; }770 .example-site-footer .content-left {771 float: left; }772 .example-site-footer .content-right {773 float: right; }774 775.example-footer-content {776 -webkit-transform: translateY(-50%);777 -moz-transform: translateY(-50%);778 -ms-transform: translateY(-50%);779 -o-transform: translateY(-50%);780 transform: translateY(-50%);781 display: inline-block;782 position: relative;783 top: 50%; }784 785.example-footer-link {786 border-bottom: 1px solid #fff;787 color: #fff; }788 .example-footer-link:hover {789 border-bottom-width: 0; }790 791@media (max-width: 768px) {792 .example-site-footer .desktop {793 display: none; }794 .example-site-footer .mobile {795 text-transform: capitalize; } }796 797html {798 position: relative; }799 html:before {800 content: '';801 height: 100%;802 left: 0;803 position: fixed;804 top: 0;805 width: 100%; }806 807.site-wrap,808.site-container {809 position: relative;810 width: 100%; }811 812.site-wrap:before {813 content: '';814 height: 100%;815 left: 0;816 position: absolute;817 top: 0;818 width: 100%; }819 820.site-header {821 position: relative; }822 823.theme-container:before {824 content: '';825 height: 100%;826 left: 0;827 position: absolute;828 top: 0;829 width: 100%; }830 831.responsive-nav {832 display: none;833 opacity: 0;834 visibility: hidden; }835 836.project-cover .separator:last-child,837.project-header .fields .separator:last-child {838 display: none; }839 840.preserve-whitespace {841 white-space: pre-wrap; }842 843.preserve-whitespace--nowrap {844 white-space: pre; }845 846.page-background-video .video-wrap {847 height: 100vh;848 left: 80px;849 overflow: hidden;850 position: fixed;851 top: 0;852 width: calc(100vw - 80px);853 z-index: -1; }854 .image-right .page-background-video .video-wrap {855 width: 50vw; }856 .image-left .page-background-video .video-wrap {857 left: 50%;858 width: 50vw; }859 860.page-background-video .renditions-video {861 font-family: 'object-fit: cover;';862 height: 100%;863 left: 0;864 object-fit: cover;865 position: relative;866 top: 0;867 width: 100%; }868 869.page-background-video-with-panel .video-wrap {870 left: 260px;871 width: calc(100vw - 260px); }872 .image-right .page-background-video-with-panel .video-wrap {873 left: 260px;874 width: calc(50vw - 130px); }875 .image-left .page-background-video-with-panel .video-wrap {876 left: calc(50% + 130px);877 width: calc(50vw - 130px); }878 879.image-right .page-background-video-with-panel .video-wrap {880 left: 0;881 width: 50vw; }882 883.image-left .page-background-video-with-panel .video-wrap {884 left: 50%;885 width: 50vw; }886 887.mp4-image {888 display: none !important;889 font-family: 'object-fit: cover;';890 height: 100%;891 left: 0;892 object-fit: cover;893 position: relative;894 top: 0;895 width: 100%; }896 897@supports (-webkit-overflow-scrolling: touch) {898 .video-wrap .renditions-video {899 display: none; }900 .video-wrap .mp4-image {901 display: block !important; } }902 903.logo,904.logo-secondary {905 clear: both;906 word-wrap: break-word; }907 .logo img,908 .logo-secondary img {909 max-width: 100%; }910 .logo a,911 .logo-secondary a {912 color: inherit; }913 .logo .image-link,914 .logo-secondary .image-link {915 display: inline-block;916 max-width: 100%; }917 .logo .image-rollover,918 .logo .image-scroll,919 .logo-secondary .image-rollover,920 .logo-secondary .image-scroll {921 display: none; }922 .logo.logo-text,923 .logo-secondary.logo-text {924 width: 100%; }925 .logo.has-rollover.hoverable:hover .image-link,926 .logo-secondary.has-rollover.hoverable:hover .image-link {927 display: none; }928 .logo.has-rollover.hoverable:hover .image-link.image-rollover,929 .logo-secondary.has-rollover.hoverable:hover .image-link.image-rollover {930 display: block; }931 .on-scroll .logo.has-scroll .image-normal,932 .on-scroll .logo.has-scroll .image-rollover, .on-scroll933 .logo-secondary.has-scroll .image-normal,934 .on-scroll935 .logo-secondary.has-scroll .image-rollover {936 display: none !important; }937 .on-scroll .logo.has-scroll .image-scroll, .on-scroll938 .logo-secondary.has-scroll .image-scroll {939 display: inline-block; }940 941.logo-image,942.logo-secondary-image {943 width: 100%; }944 945.social {946 font-size: 0; }947 .social li {948 display: inline-block; }949 .social li:first-child {950 padding-left: 0 !important; }951 .social li:last-child {952 padding-right: 0 !important; }953 .social li svg {954 vertical-align: middle; }955 .social a {956 display: block;957 text-align: center; }958 959nav .page-title,960nav .gallery-title,961nav .project-title,962nav .link-title,963nav .social,964nav .social li {965 display: inline-block;966 vertical-align: middle; }967 968nav .project-title:first-child,969nav .gallery-title:first-child,970nav .page-title:first-child,971nav .link-title:first-child {972 padding-left: 0 !important; }973 974nav .project-title:last-child,975nav .gallery-title:last-child,976nav .page-title:last-child,977nav .link-title:last-child {978 padding-right: 0 !important; }979 980.masthead {981 overflow: hidden;982 position: relative; }983 .masthead .video-wrap {984 height: 100%;985 left: 0;986 overflow: hidden;987 position: absolute;988 top: 0;989 width: 100%; }990 .masthead video {991 font-family: 'object-fit: cover;';992 height: 100%;993 left: 0;994 object-fit: cover;995 top: 0;996 width: 100%; }997 .masthead:after {998 content: '';999 height: 100%;1000 left: 0;1001 position: absolute;1002 top: 0;1003 width: 100%; }1004 .masthead h1,1005 .masthead p {1006 width: 100%;1007 word-wrap: break-word; }1008 1009.masthead,1010.masthead-placeholder {1011 width: 100%; }1012 1013.masthead-placeholder {1014 opacity: 0;1015 position: relative !important;1016 z-index: -1; }1017 1018.masthead-contents,1019.masthead-text {1020 width: 100%; }1021 1022.masthead-contents {1023 height: 100%;1024 top: 0;1025 z-index: 1; }1026 1027.masthead,1028.masthead-contents {1029 display: -webkit-box;1030 display: -moz-box;1031 display: box;1032 display: -webkit-flex;1033 display: -moz-flex;1034 display: -ms-flexbox;1035 display: flex;1036 -webkit-box-align: center;1037 -moz-box-align: center;1038 box-align: center;1039 -webkit-align-items: center;1040 -moz-align-items: center;1041 -ms-align-items: center;1042 -o-align-items: center;1043 align-items: center;1044 -ms-flex-align: center; }1045 1046.masthead-arrow-container {1047 cursor: pointer;1048 height: 40px;1049 width: 60px; }1050 1051.masthead-arrow {1052 -webkit-transform: rotate(45deg) translateY(-15px) translateX(5px);1053 -moz-transform: rotate(45deg) translateY(-15px) translateX(5px);1054 -ms-transform: rotate(45deg) translateY(-15px) translateX(5px);1055 -o-transform: rotate(45deg) translateY(-15px) translateX(5px);1056 transform: rotate(45deg) translateY(-15px) translateX(5px);1057 border-bottom: 1px solid transparent;1058 border-right: 1px solid transparent;1059 bottom: 5px;1060 height: 30px;1061 position: absolute;1062 width: 30px; }1063 1064.masthead-button {1065 cursor: pointer;1066 display: inline-block;1067 vertical-align: middle; }1068 .masthead-button + .masthead-button-spacer + .masthead-button {1069 margin-left: 17px; }1070 1071.masthead-button-spacer {1072 display: none; }1073 1074@media (max-width: 540px) {1075 .masthead-button + .masthead-button-spacer {1076 display: block;1077 height: 17px; }1078 .masthead-button + .masthead-button-spacer + .masthead-button {1079 margin-left: 0; } }1080 1081.site-footer {1082 clear: both;1083 display: block; }1084 1085.cookie-banner {1086 bottom: 0;1087 display: none;1088 position: fixed;1089 text-align: center;1090 z-index: 99999; }1091 .cookie-banner.show {1092 display: block; }1093 .cookie-banner p {1094 font-size: 18px;1095 line-height: 1.222;1096 margin: 24px;1097 max-width: calc(100% - 84px); }1098 @media (max-width: 768px) {1099 .cookie-banner p {1100 font-size: 16px; } }1101 .cookie-banner a {1102 color: inherit;1103 text-decoration: underline; }1104 .cookie-banner .close-btn {1105 position: absolute;1106 right: 20px;1107 top: 50%;1108 transform: translateY(-50%);1109 width: 16px; }1110 1111.site-header {1112 display: -webkit-flex;1113 display: flex;1114 position: fixed;1115 right: 0;1116 top: 0;1117 width: 100%; }1118 .site-header.on-scroll {1119 transition: background-color 0.3s ease, box-shadow 0.3s ease; }1120 1121.logo-wrap {1122 flex: 1; }1123 1124.logo-wrap {1125 max-width: 100%;1126 margin-left: auto;1127 margin-right: auto;1128 padding-bottom: 0px;1129 padding-top: 0px;1130 width: 18.5%; }1131 1132.logo-text {1133 margin-left: auto;1134 margin-right: auto;1135 text-align: center; }1136 1137.logo-image {1138 max-width: 100%;1139 margin-left: auto;1140 margin-right: auto;1141 text-align: center; }1142 1143.logo-secondary-text {1144 float: left;1145 text-align: left; }1146 1147.logo-secondary-image {1148 max-width: 100%;1149 float: left;1150 text-align: left; }1151 1152.logo {1153 font-family: ftnk;1154 font-size: 20px;1155 font-style: normal;1156 font-weight: 400;1157 line-height: 30px;1158 padding-bottom: 0px;1159 padding-left: 5%;1160 padding-right: 5%;1161 padding-top: 0px; }1162 .logo,1163 .logo a {1164 color: #282828; }1165 .logo a:hover {1166 color: #282828;1167 font-style: normal;1168 font-weight: 700; }1169 1170.logo-secondary {1171 font-family: ftnk;1172 font-size: 22px;1173 font-style: normal;1174 font-weight: 400;1175 line-height: 22px;1176 padding-bottom: 0px;1177 padding-left: 0%;1178 padding-right: 0%;1179 padding-top: 0px;1180 text-transform: uppercase; }1181 .logo-secondary,1182 .logo-secondary a {1183 color: #cccccc; }1184 .logo-secondary a:hover {1185 color: #cccccc;1186 font-style: normal;1187 font-weight: 400;1188 text-transform: uppercase; }1189 1190nav {1191 float: left;1192 max-width: 100%;1193 width: 78%; }1194 nav .gallery-title a {1195 color: #282828;1196 font-family: ftnk;1197 font-size: 20px;1198 font-style: normal;1199 font-weight: 400;1200 line-height: 24px; }