From 9557e253604d921604bde85c907d18f508012db4 Mon Sep 17 00:00:00 2001 From: Volker E Date: Tue, 13 Oct 2020 14:04:55 -0700 Subject: [PATCH] styles: Use base `line-height` on all elements (#408) We're using 1.6 as base line height on Vector and MinervaNeue is not setting it at all, therefore exceeding. It's preferable to rely on standard typographic rule of thumb and in production values. --- css/build/wmui-style-guide.css | 6 ++---- css/build/wmui-style-guide.min.css | 2 +- css/build/wmui-style-guide.min.css.map | 2 +- css/wmui-style-guide.dev.css | 6 ++---- 4 files changed, 6 insertions(+), 10 deletions(-) diff --git a/css/build/wmui-style-guide.css b/css/build/wmui-style-guide.css index 993e62db..670384b7 100644 --- a/css/build/wmui-style-guide.css +++ b/css/build/wmui-style-guide.css @@ -1,6 +1,6 @@ /* ::: Vendor Imports ::: */ /* Load files from 'node_modules' folders with postCSS-import plugin. - * Modules specified in package.json file */ + * Modules specified in package.json file. */ /** * WikimediaUI Base v0.17.0 * Wikimedia Foundation user interface base variables @@ -504,7 +504,7 @@ template { } */ :root { - /* HACK; Add Georgia to serif fallback as long as WikimediaUI Base isn't updated */ /* stylelint-disable-line value-keyword-case */ + /* HACK; Add Georgia to serif fallback as long as WikimediaUI Base isn't updated. */ /* stylelint-disable-line value-keyword-case */ /* Setting bold to `600` as our stack works better with it, only Lato is on the edge. Helvetica and Arial fallback gracefully to `700`, see T246791. */ } @@ -580,7 +580,6 @@ blockquote { font-family: Georgia, serif; /* Fallback */ font-size: 2rem; font-style: italic; - line-height: 1.5; } blockquote cite { display: block; @@ -606,7 +605,6 @@ hr { } p { margin: 3.2rem 0 0; - line-height: 1.5; } h1 + p, h2 + p, diff --git a/css/build/wmui-style-guide.min.css b/css/build/wmui-style-guide.min.css index 587a646e..4d3a7a22 100644 --- a/css/build/wmui-style-guide.min.css +++ b/css/build/wmui-style-guide.min.css @@ -1,2 +1,2 @@ -/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0);-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;-moz-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-moz-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}@font-face{font-family:Charter;src:url(../../fonts/Charter_regular.woff2) format("woff2"),url(../../fonts/Charter_regular.woff) format("woff");font-style:normal;font-weight:400;text-rendering:optimizeLegibility}@font-face{font-family:Charter;src:url(../../fonts/Charter_bold.woff2) format("woff2"),url(../../fonts/Charter_bold.woff) format("woff");font-style:normal;font-weight:700;text-rendering:optimizeLegibility}*{-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%}body{background-color:#eaecf0;color:#202122;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.6rem;line-height:1.6}h1,h2,h3,h4,h5,h6{color:#000;margin:3.2rem 0 0;line-height:1.25;-webkit-transition:font-size .25s,font-weight .25s;-moz-transition:font-size .25s,font-weight .25s;transition:font-size .25s,font-weight .25s}h2,h3,h4,h5{font-weight:600}.page__title,h1{font-family:Georgia,serif;font-size:3.2rem;font-weight:400}h2{border-bottom:3px solid #eaecf0;padding-bottom:2px;font-size:2.4rem}h2+h3{margin-top:1.6rem}h3{font-size:2rem}h4{font-size:1.8rem}h5,h6{font-size:1.6rem}h6{font-weight:400}blockquote{border-left:3px solid #c8ccd1;margin:1.6rem 0 0;padding:0 3.2rem;font-family:Georgia,serif;font-size:2rem;font-style:italic;line-height:1.5}blockquote cite{display:block;margin-top:.8rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.4rem;font-style:normal}blockquote cite:before{content:"— "}.mw-code,code,pre{font-family:Menlo,Consolas,Liberation Mono,Courier New,monospace}hr{background:#eaecf0;display:block;height:.8rem;border:0;margin:8rem 0}p{margin:3.2rem 0 0;line-height:1.5}h1+p,h2+p,h3+p,h4+p,h5+p,h6+p,p+p,p:first-child,ul+p{margin:.8rem 0 0}blockquote+p{margin-top:1.6rem}.mw-code,pre{background-color:#f8f9fa;color:#000;border:1px solid #a2a9b1;padding:1.2rem 2rem;font-size:1.4rem;white-space:pre-wrap}ol,ul{margin:.8rem 0;padding:0 0 0 1.8rem}.content li{margin-top:.4rem}.content li:first-child{margin-top:0}figure{margin:.8rem 0 0}img{display:block;max-width:100%;margin:1.6rem 0 0}.page--components figure{margin-left:6.4rem;padding-top:.8rem}.page--components figure img{margin-top:.8rem}a{color:#36c;text-decoration:none}a:hover{text-decoration:underline}a:active{color:#2a4b8d}b,strong{font-weight:600}code{background-color:#f8f9fa;display:inline-block;padding:.2rem .4rem;font-size:1.4rem}small{font-size:1.3rem}sub,sup{font-size:1.1rem}.is-aural{display:block;position:absolute;clip:rect(1px,1px,1px,1px);width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden}.is-aural.is-focusable:active,.is-aural.is-focusable:focus{position:static;clip:auto;width:auto;height:auto;margin:0;text-decoration:underline;overflow:visible}.clearfix:after,.clearfix:before,.color-palette:after,.color-palette:before,.content-box:after,.content-box:before,.content__illustration-style .figure--full:after,.content__illustration-style .figure--full:before,.figures-do-dont:after,.figures-do-dont:before,.page:after,.page:before{content:" ";display:table}.clearfix:after,.color-palette:after,.content-box:after,.content__illustration-style .figure--full:after,.figures-do-dont:after,.page:after{clear:both}:focus{outline-color:#36c}.is-complementary,.is-subtle{color:#72777d}.is-complementary{font-size:1.4rem}::-webkit-input-placeholder{color:#72777d;opacity:1}:-moz-placeholder,::-moz-placeholder{color:#72777d;opacity:1}:-ms-input-placeholder{color:#72777d;opacity:1}::-ms-input-placeholder{color:#72777d;opacity:1}.is-placeholder,::placeholder{color:#72777d;opacity:1}.content-box{position:relative;margin-right:auto;margin-left:auto;padding-left:1.6rem;padding-right:1.6rem}.header{position:fixed;top:0;left:0;right:0;min-height:6.4rem;line-height:6.4rem}.site__title{color:#202122;margin-top:0;height:6.4rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.6rem;font-weight:400;letter-spacing:.5px}.site__title a{color:inherit;display:inline-block;padding:1.2rem 3.2rem 0;-webkit-transition:color .25s;-moz-transition:color .25s;transition:color .25s}.site__title a:hover{color:#000;text-decoration:none}.site__org{display:block}.site__project{font-weight:600}.btn--nav-main{position:absolute;top:1.2rem;width:4.2rem;height:4.2rem;cursor:pointer}.btn--nav-main i{display:block;height:4.2rem;-webkit-transition:color .25s,box-shadow .25s;-moz-transition:color .25s,box-shadow .25s,-moz-box-shadow .25s;transition:color .25s,box-shadow .25s;transition:color .25s,box-shadow .25s,-moz-box-shadow .25s}.btn--nav-main i:after,.btn--nav-main i:before{content:"";background-color:#54595d;width:2rem;height:2px;position:absolute;top:.4rem;left:0}.btn--nav-main i:after{top:1.1rem;-moz-box-shadow:0 .7rem 0 #54595d;box-shadow:0 .7rem 0 #54595d}.btn--nav-main i:hover:after,.btn--nav-main i:hover:before{background-color:#000}.btn--nav-main i:hover:after{-moz-box-shadow:0 .7rem 0 #000;box-shadow:0 .7rem 0 #000}.btn--nav-main span{display:block;position:absolute;clip:rect(1px,1px,1px,1px);width:1px;height:1px;margin:-1px;overflow:hidden}.lnk--contribute{font-size:1.4rem;line-height:1.4rem}.page{background-color:#fff;position:relative;margin-top:6.4rem;padding:6.4rem 0;-moz-box-shadow:0 1px 4px 0 rgba(0,0,0,.25);box-shadow:0 1px 4px 0 rgba(0,0,0,.25);overflow-y:hidden}.col,.content{float:left}.col{position:relative;min-height:1px}.col--end,.col--start{padding:0}.nav--main{background-color:#fff}.nav--main li:not(.is-on) ul,.trigger--nav-main{display:none}.nav--main ol,.nav--main ul{padding:0}.nav--main ol:first-child{margin:0}.nav--main li{padding:0;list-style:none none}.nav--main>ol>li{margin-bottom:.4rem}.nav--main a{color:#202122;display:block;padding:.8rem 1.2rem;font-size:1.6rem;text-decoration:none;-webkit-transition:background-color .25s,color .25s,padding .25s;-moz-transition:background-color .25s,color .25s,padding .25s;transition:background-color .25s,color .25s,padding .25s}.nav--main a:focus,.nav--main a:hover{background-color:#f8f9fa;color:#000}.nav--main .is-on>a{background-color:#eaf3ff;color:#36c;-moz-border-radius:2px;border-radius:2px;font-weight:600;cursor:default}.nav__sub-items{margin-top:1.2rem;margin-bottom:1em}.nav__sub-items>.nav__sub-item{margin-left:3.6rem}.nav--main .nav__sub-items ul{margin:0}.nav--main .nav__sub-items a{color:#54595d;border-left:1px solid #eaecf0;-moz-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;padding-left:1.6rem;font-size:1.4rem;-webkit-transition:background-color .25s,color .25s;-moz-transition:background-color .25s,color .25s;transition:background-color .25s,color .25s}.nav--main .nav__sub-item.is-on>a{background-color:#fff;color:#000;border-left-color:#000;font-weight:600}.nav--main .nav__sub-item .nav__sub-item a{padding-left:3.6rem}.page__parent-title{color:#72777d;margin-top:-2.8rem}.page__title{margin-top:-.8rem}.page__parent-title+.page__title{margin-top:-.4rem}.page__tagline{margin-top:1.2rem;font-size:2rem;font-style:italic;font-weight:100}.figures--full{background-color:#f8f9fa}.figure__caption,.heading__description{color:#72777d;clear:both;display:block;font-size:1.3rem}.figure__caption{padding-top:.8rem;font-style:italic}.figure__caption:empty{display:none}.heading__description{float:right;margin-top:-1.9rem}.heading__description+*{clear:both}.figures-do-dont{margin-top:1.6rem}.figures-do-dont .figure{background-color:#eaecf0;-moz-border-radius-topleft:2px;border-top-left-radius:2px;-moz-border-radius-topright:2px;border-top-right-radius:2px}.figures-do-dont .figure--dont{border-left:1px solid #fff}.figures-do-dont .figure__caption{background-color:#fff;display:block;border-top-width:.8rem;border-top-style:solid;padding-right:.8em}.do,.figure--do .figure__caption{border-top-color:#00af89}.dont,.figure--dont .figure__caption{border-top-color:#d33}.do,.dont{font-style:normal;font-weight:600}.do:before,.dont:before{display:inline-block;margin-right:.4rem;padding-top:.4rem;font-size:2.1rem;line-height:1rem;vertical-align:top}.do{color:#14866d}.do:before{content:"✓"}.dont{color:#d33}.dont:before{content:"×"}.color-palette{margin:2.4rem 0 0;padding:0}.color-palette+.color-palette{margin-top:0}.color{color:#000;list-style:none none;display:block;float:left;position:relative;width:61.8%;height:16rem;margin-bottom:3.2rem;padding:1.2rem;border:1px solid #fff;-moz-border-radius:2px;border-radius:2px;font-size:1.4rem}.color--dark,.color__wcag-level span{color:#fff}.color--dark .color__wcag-level span{color:#000}.color-palette .color:first-child{margin-top:.4rem}.color-palette--overview .color{width:6.4rem;height:6.2rem;margin-top:.8rem;margin-right:1.2rem;margin-bottom:2.4rem;-moz-border-radius:3.2rem;border-radius:3.2rem;cursor:default}.color-palette--overview .color:first-child{margin-top:.8rem}.color-palette--overview .color--emphasized{width:7.2rem;height:7rem;margin-top:0;-moz-border-radius:7.2rem;border-radius:7.2rem;padding-top:2rem}.color-palette--base .color{margin-right:1.35rem}.color-section .color .color-code--hsb{-webkit-transition:opacity .25s;-moz-transition:opacity .25s;transition:opacity .25s}.color-section .color:hover .color-code--hsb{opacity:1}.color__name{display:block;position:absolute;bottom:1.2rem;left:1.2rem;font-size:3.2rem;font-weight:100}.color-palette--overview .color__name{position:relative;bottom:auto;left:auto;padding-top:1.2rem;font-size:2.4rem;line-height:1}.color-code.color-code--rgb,.color-palette--overview .color-code,.color-palette--overview .color__name,.color__type{display:none}.color-code{background-color:inherit;display:block;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif}.color-code--hsb{opacity:0}@supports (--css:variables){.color-hint{white-space:nowrap}.color-hint:before{content:"";background-color:var(--color-hint);display:inline-block;width:1.2rem;height:1.2rem;margin:0 .4rem .3rem .2rem;-moz-border-radius:50%;border-radius:50%;vertical-align:text-bottom;cursor:help}.color-hint--base100:before{border:1px solid #a2a9b1}}.icon{display:inline-block;width:2rem;height:2rem;margin:0 .2rem;vertical-align:text-bottom}.icon--indicator{width:1.2rem;height:1.2rem;margin-bottom:.2rem}.icon--intermediate{width:1.6rem;height:1.6rem;margin-bottom:.2rem}.components__designing{position:relative}.components__designing:after{content:"";background:url(../../img/components/legend_16-8.svg) no-repeat;position:absolute;bottom:0;right:6.4rem;width:13.2rem;height:6.4rem}.page--components-messages .components__intro{max-width:700px;margin-left:auto;margin-right:auto}.resources-table{display:table;width:100%;margin-top:2.4rem;border-collapse:collapse}.resources-table__body,.resources-table__head{display:table-row;border-bottom:1px solid #a2a9b1}.resources-table__head{background-color:#eaecf0}.resources-table__head h2{margin-top:0;border-bottom:0;padding-bottom:0;font-size:2.1rem;font-weight:400}.resources-table__cell{display:table-cell;padding:1.6rem 1.6rem 1.6rem 0}.resources-table__head .resources-table__cell:first-child{padding-left:1.6rem}.lnk-resource{white-space:nowrap}.footer{color:#202122;padding:2.4rem 0;font-size:1.3rem}.footer__list{padding:0}.footer__list:first-child{margin:0}.footer__list:after{content:" ";display:block;clear:both}.footer__list li{list-style:none none;display:block;padding:.8rem 0 0}.footer__list li:first-child{padding-top:0}.footer__list+p{margin-top:1.2rem}.footer__list--connect a{font-weight:600}.lnk--wikimedia-project{display:inline-block;padding:.4rem 0;text-transform:uppercase}.page--home .page__title{border:0;padding:0}.page--design-principles-accessibility .nav--main .is-on>a{cursor:pointer}.page--design-principles-accessibility h3{padding-right:15%}.page--visual-style-typography .figures-do-dont .figure__contents{padding:4.2rem 3.6rem}.figures-do-dont--contrast .figure--dont{color:#a2a9b1}.typography-styles dt{display:inline-block;color:#72777d;min-width:10rem;margin:0 0 3.2rem 1.6rem;font-size:1.3rem;font-weight:600;vertical-align:top}.typography-styles .typography-styles__code{margin-bottom:0}.typography-styles dd{display:inline}.typography-styles dd>*{display:inline-block;margin-top:0}.typography-styles .figure__caption{padding-top:0}.typography-styles dd:after{content:"\A";white-space:pre}.typography-styles+hr{margin-top:4rem;margin-bottom:4rem}.page--visual-style-icons img{background-color:#eaecf0;padding:2.4rem}.fonts-loaded .color-code,.fonts-loaded .site__title,.fonts-loaded cite{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif}.fonts-loaded .page__title,.fonts-loaded .typography-styles h1,.fonts-loaded blockquote{font-family:Charter,Georgia,serif}@media (max-width:767px){.nav--main{position:absolute;top:-3.2rem;left:-1.6rem;right:-1.6rem;padding-bottom:1.6rem;-moz-box-shadow:0 2px 2px 0 rgba(0,0,0,.25);box-shadow:0 2px 2px 0 rgba(0,0,0,.25);z-index:1;-webkit-transform:translateY(-200%);-moz-transform:translateY(-200%);-ms-transform:translateY(-200%);transform:translateY(-200%);-webkit-transition:left .25s,right .25s,-webkit-transform .25s;transition:left .25s,right .25s,-webkit-transform .25s;-moz-transition:left .25s,right .25s,transform .25s,-moz-transform .25s;transition:left .25s,right .25s,transform .25s;transition:left .25s,right .25s,transform .25s,-webkit-transform .25s,-moz-transform .25s}.trigger--nav-main:checked+.nav--main{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.page__title{margin-top:-.4rem;font-size:2.8rem}.typography-styles dt{display:block;margin-left:0}.page--components .components__states{margin-left:0}.resources-table,.resources-table__body,.resources-table__cell,.resources-table__head{display:block}.resources-table__head{margin-left:-1.6rem;margin-right:-1.6rem}.resources-table__head .resources-table__cell:empty{display:none}.resources-table__body{padding-left:0}.resources-table__cell{padding-top:.8rem;padding-bottom:.8rem}}@media (min-width:240px){.content-box,.nav--main a,.site__title a{-webkit-transition-property:background-color,padding;-moz-transition-property:background-color,padding;transition-property:background-color,padding;-webkit-transition-duration:.25s;-moz-transition-duration:.25s;transition-duration:.25s}.site__title{margin-left:4.2rem}.site__title a{padding-left:0}.lnk--contribute span{display:none}.nav--main a{padding-left:1.6rem;padding-right:1.6rem}.col--end,.col--start{width:100%}.figure--full,.resources-table__head{margin-left:-1.6rem;margin-right:-1.6rem}.figure--full .figure__caption{margin-left:1.6rem;margin-right:1.6rem}.figure--this-is-for-everyone img,.figure--trustworthy-yet-joyful img{width:100%;max-width:568px;margin-left:auto;margin-right:auto}.figure--illustrations-header img{width:100%}.figure--illustrations-header+.figure--illustrations-header,.figure--illustrations-header+.figure--illustrations-header img{margin-top:0}.color{width:61.8%}.color-palette--base .color:nth-child(3n+4){clear:both}.color-palette--base .color{margin-right:1.6rem}.color-palette--overview.color-palette--base .color--emphasized{margin-right:1.1rem;margin-left:-.2rem}.page--components figure{margin-left:4.2rem}}@media (min-width:414px){.content-box{padding-left:3.2rem;padding-right:3.2rem}.nav--main{left:-3.2rem;right:-3.2rem}.nav--main a{padding-left:3.2rem;padding-right:3.2rem}.figure--full,.resources-table__head{margin-left:-3.2rem;margin-right:-3.2rem}.figure--full .figure__caption{margin-left:3.2rem;margin-right:3.2rem}.resources-table__head .resources-table__cell:first-child{padding-left:3.2rem;padding-right:3.2rem}.footer__list li{display:list-item;float:left;padding:0 .8rem 0 0}.footer__list li:after{content:"\2022";color:#72777d;padding:0 0 0 .8rem;font-weight:100}.footer__list li:last-child:after{content:"";padding:0}.color{width:16rem;margin-right:2.4rem}}@media (min-width:568px){.lnk--contribute{display:block;position:absolute;bottom:1.5rem;right:3.2rem;text-align:right}.lnk--contribute span{display:inline;opacity:0;-webkit-transition:opacity .25s;-moz-transition:opacity .25s;transition:opacity .25s}.figures-do-dont .figure{max-width:61.8%}.figure--this-is-for-everyone img,.figure--trustworthy-yet-joyful img{max-width:none}.figure--illustrations-header{float:left;width:44.4%}.figure--illustrations-header+.figure--illustrations-header{width:55.55%;margin-top:.8rem}.figure--illustrations-header+.figure--illustrations-header img{margin-top:1.6rem}}@media (min-width:768px){img{-moz-border-radius:2px;border-radius:2px}.content-box{width:100%;max-width:960px}.btn--nav-main{display:none}.site__title{float:left;margin-left:0}.nav--main a,.site__title a{padding-left:1.6rem;padding-right:1.6rem}.lnk--contribute span{display:inline;opacity:1}.col--start{width:20.8rem;z-index:1;-webkit-transition:width .25s;-moz-transition:width .25s;transition:width .25s}.col--end{margin-left:-20.8rem;padding-left:24rem}.nav--main{left:auto;right:auto}.figure--full,.figure--full .figure__caption{margin-left:0;margin-right:0}.figures-do-dont .figure{float:left;width:50%}.color-palette--base .color:nth-child(3n+4){clear:unset}.illustrations-case-study img{float:left;width:33.33%}.page--components figure{margin-left:6.4rem}}@media (min-width:992px){.content-box{width:100%;max-width:1140px}.nav--main a,.site__title a{padding-left:3.2rem;padding-right:3.2rem}.col--start{width:24rem}.col--end{margin-left:-24rem;padding-left:27.2rem}.color-palette--overview:first-child{margin-top:2.4rem}.color{margin-right:2.4rem}.color-palette--base .color{margin-right:1.35rem}.color-palette--overview.color-palette--base .color--emphasized{margin-right:1.35rem;margin-left:0}.color-palette--overview.color-palette--green:after,.color-palette--overview.color-palette--green:before,.color-palette--overview.color-palette--red:after,.color-palette--overview.color-palette--red:before{content:"";display:none}.color-palette--overview.color-palette--green:after,.color-palette--overview.color-palette--red:after,.color-section .color:nth-child(3n+4){clear:both}.resources-table__body .resources-table__cell{-webkit-transition:background-color .25s;-moz-transition:background-color .25s;transition:background-color .25s}.resources-table__body:hover .resources-table__cell{background-color:#f8f9fa}.resources-table__body .resources-table__cell:first-child,.resources-table__head .resources-table__cell:first-child{padding-left:1.6rem}}@media (min-width:1200px){.content-box{width:1140px}.col--start{width:25.6rem}.col--end{margin-left:-25.6rem;padding-left:28.8rem}} +/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0);-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;-moz-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-moz-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}@font-face{font-family:Charter;src:url(../../fonts/Charter_regular.woff2) format("woff2"),url(../../fonts/Charter_regular.woff) format("woff");font-style:normal;font-weight:400;text-rendering:optimizeLegibility}@font-face{font-family:Charter;src:url(../../fonts/Charter_bold.woff2) format("woff2"),url(../../fonts/Charter_bold.woff) format("woff");font-style:normal;font-weight:700;text-rendering:optimizeLegibility}*{-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%}body{background-color:#eaecf0;color:#202122;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.6rem;line-height:1.6}h1,h2,h3,h4,h5,h6{color:#000;margin:3.2rem 0 0;line-height:1.25;-webkit-transition:font-size .25s,font-weight .25s;-moz-transition:font-size .25s,font-weight .25s;transition:font-size .25s,font-weight .25s}h2,h3,h4,h5{font-weight:600}.page__title,h1{font-family:Georgia,serif;font-size:3.2rem;font-weight:400}h2{border-bottom:3px solid #eaecf0;padding-bottom:2px;font-size:2.4rem}h2+h3{margin-top:1.6rem}h3{font-size:2rem}h4{font-size:1.8rem}h5,h6{font-size:1.6rem}h6{font-weight:400}blockquote{border-left:3px solid #c8ccd1;margin:1.6rem 0 0;padding:0 3.2rem;font-family:Georgia,serif;font-size:2rem;font-style:italic}blockquote cite{display:block;margin-top:.8rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.4rem;font-style:normal}blockquote cite:before{content:"— "}.mw-code,code,pre{font-family:Menlo,Consolas,Liberation Mono,Courier New,monospace}hr{background:#eaecf0;display:block;height:.8rem;border:0;margin:8rem 0}p{margin:3.2rem 0 0}h1+p,h2+p,h3+p,h4+p,h5+p,h6+p,p+p,p:first-child,ul+p{margin:.8rem 0 0}blockquote+p{margin-top:1.6rem}.mw-code,pre{background-color:#f8f9fa;color:#000;border:1px solid #a2a9b1;padding:1.2rem 2rem;font-size:1.4rem;white-space:pre-wrap}ol,ul{margin:.8rem 0;padding:0 0 0 1.8rem}.content li{margin-top:.4rem}.content li:first-child{margin-top:0}figure{margin:.8rem 0 0}img{display:block;max-width:100%;margin:1.6rem 0 0}.page--components figure{margin-left:6.4rem;padding-top:.8rem}.page--components figure img{margin-top:.8rem}a{color:#36c;text-decoration:none}a:hover{text-decoration:underline}a:active{color:#2a4b8d}b,strong{font-weight:600}code{background-color:#f8f9fa;display:inline-block;padding:.2rem .4rem;font-size:1.4rem}small{font-size:1.3rem}sub,sup{font-size:1.1rem}.is-aural{display:block;position:absolute;clip:rect(1px,1px,1px,1px);width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden}.is-aural.is-focusable:active,.is-aural.is-focusable:focus{position:static;clip:auto;width:auto;height:auto;margin:0;text-decoration:underline;overflow:visible}.clearfix:after,.clearfix:before,.color-palette:after,.color-palette:before,.content-box:after,.content-box:before,.content__illustration-style .figure--full:after,.content__illustration-style .figure--full:before,.figures-do-dont:after,.figures-do-dont:before,.page:after,.page:before{content:" ";display:table}.clearfix:after,.color-palette:after,.content-box:after,.content__illustration-style .figure--full:after,.figures-do-dont:after,.page:after{clear:both}:focus{outline-color:#36c}.is-complementary,.is-subtle{color:#72777d}.is-complementary{font-size:1.4rem}::-webkit-input-placeholder{color:#72777d;opacity:1}:-moz-placeholder,::-moz-placeholder{color:#72777d;opacity:1}:-ms-input-placeholder{color:#72777d;opacity:1}::-ms-input-placeholder{color:#72777d;opacity:1}.is-placeholder,::placeholder{color:#72777d;opacity:1}.content-box{position:relative;margin-right:auto;margin-left:auto;padding-left:1.6rem;padding-right:1.6rem}.header{position:fixed;top:0;left:0;right:0;min-height:6.4rem;line-height:6.4rem}.site__title{color:#202122;margin-top:0;height:6.4rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.6rem;font-weight:400;letter-spacing:.5px}.site__title a{color:inherit;display:inline-block;padding:1.2rem 3.2rem 0;-webkit-transition:color .25s;-moz-transition:color .25s;transition:color .25s}.site__title a:hover{color:#000;text-decoration:none}.site__org{display:block}.site__project{font-weight:600}.btn--nav-main{position:absolute;top:1.2rem;width:4.2rem;height:4.2rem;cursor:pointer}.btn--nav-main i{display:block;height:4.2rem;-webkit-transition:color .25s,box-shadow .25s;-moz-transition:color .25s,box-shadow .25s,-moz-box-shadow .25s;transition:color .25s,box-shadow .25s;transition:color .25s,box-shadow .25s,-moz-box-shadow .25s}.btn--nav-main i:after,.btn--nav-main i:before{content:"";background-color:#54595d;width:2rem;height:2px;position:absolute;top:.4rem;left:0}.btn--nav-main i:after{top:1.1rem;-moz-box-shadow:0 .7rem 0 #54595d;box-shadow:0 .7rem 0 #54595d}.btn--nav-main i:hover:after,.btn--nav-main i:hover:before{background-color:#000}.btn--nav-main i:hover:after{-moz-box-shadow:0 .7rem 0 #000;box-shadow:0 .7rem 0 #000}.btn--nav-main span{display:block;position:absolute;clip:rect(1px,1px,1px,1px);width:1px;height:1px;margin:-1px;overflow:hidden}.lnk--contribute{font-size:1.4rem;line-height:1.4rem}.page{background-color:#fff;position:relative;margin-top:6.4rem;padding:6.4rem 0;-moz-box-shadow:0 1px 4px 0 rgba(0,0,0,.25);box-shadow:0 1px 4px 0 rgba(0,0,0,.25);overflow-y:hidden}.col,.content{float:left}.col{position:relative;min-height:1px}.col--end,.col--start{padding:0}.nav--main{background-color:#fff}.nav--main li:not(.is-on) ul,.trigger--nav-main{display:none}.nav--main ol,.nav--main ul{padding:0}.nav--main ol:first-child{margin:0}.nav--main li{padding:0;list-style:none none}.nav--main>ol>li{margin-bottom:.4rem}.nav--main a{color:#202122;display:block;padding:.8rem 1.2rem;font-size:1.6rem;text-decoration:none;-webkit-transition:background-color .25s,color .25s,padding .25s;-moz-transition:background-color .25s,color .25s,padding .25s;transition:background-color .25s,color .25s,padding .25s}.nav--main a:focus,.nav--main a:hover{background-color:#f8f9fa;color:#000}.nav--main .is-on>a{background-color:#eaf3ff;color:#36c;-moz-border-radius:2px;border-radius:2px;font-weight:600;cursor:default}.nav__sub-items{margin-top:1.2rem;margin-bottom:1em}.nav__sub-items>.nav__sub-item{margin-left:3.6rem}.nav--main .nav__sub-items ul{margin:0}.nav--main .nav__sub-items a{color:#54595d;border-left:1px solid #eaecf0;-moz-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;padding-left:1.6rem;font-size:1.4rem;-webkit-transition:background-color .25s,color .25s;-moz-transition:background-color .25s,color .25s;transition:background-color .25s,color .25s}.nav--main .nav__sub-item.is-on>a{background-color:#fff;color:#000;border-left-color:#000;font-weight:600}.nav--main .nav__sub-item .nav__sub-item a{padding-left:3.6rem}.page__parent-title{color:#72777d;margin-top:-2.8rem}.page__title{margin-top:-.8rem}.page__parent-title+.page__title{margin-top:-.4rem}.page__tagline{margin-top:1.2rem;font-size:2rem;font-style:italic;font-weight:100}.figures--full{background-color:#f8f9fa}.figure__caption,.heading__description{color:#72777d;clear:both;display:block;font-size:1.3rem}.figure__caption{padding-top:.8rem;font-style:italic}.figure__caption:empty{display:none}.heading__description{float:right;margin-top:-1.9rem}.heading__description+*{clear:both}.figures-do-dont{margin-top:1.6rem}.figures-do-dont .figure{background-color:#eaecf0;-moz-border-radius-topleft:2px;border-top-left-radius:2px;-moz-border-radius-topright:2px;border-top-right-radius:2px}.figures-do-dont .figure--dont{border-left:1px solid #fff}.figures-do-dont .figure__caption{background-color:#fff;display:block;border-top-width:.8rem;border-top-style:solid;padding-right:.8em}.do,.figure--do .figure__caption{border-top-color:#00af89}.dont,.figure--dont .figure__caption{border-top-color:#d33}.do,.dont{font-style:normal;font-weight:600}.do:before,.dont:before{display:inline-block;margin-right:.4rem;padding-top:.4rem;font-size:2.1rem;line-height:1rem;vertical-align:top}.do{color:#14866d}.do:before{content:"✓"}.dont{color:#d33}.dont:before{content:"×"}.color-palette{margin:2.4rem 0 0;padding:0}.color-palette+.color-palette{margin-top:0}.color{color:#000;list-style:none none;display:block;float:left;position:relative;width:61.8%;height:16rem;margin-bottom:3.2rem;padding:1.2rem;border:1px solid #fff;-moz-border-radius:2px;border-radius:2px;font-size:1.4rem}.color--dark,.color__wcag-level span{color:#fff}.color--dark .color__wcag-level span{color:#000}.color-palette .color:first-child{margin-top:.4rem}.color-palette--overview .color{width:6.4rem;height:6.2rem;margin-top:.8rem;margin-right:1.2rem;margin-bottom:2.4rem;-moz-border-radius:3.2rem;border-radius:3.2rem;cursor:default}.color-palette--overview .color:first-child{margin-top:.8rem}.color-palette--overview .color--emphasized{width:7.2rem;height:7rem;margin-top:0;-moz-border-radius:7.2rem;border-radius:7.2rem;padding-top:2rem}.color-palette--base .color{margin-right:1.35rem}.color-section .color .color-code--hsb{-webkit-transition:opacity .25s;-moz-transition:opacity .25s;transition:opacity .25s}.color-section .color:hover .color-code--hsb{opacity:1}.color__name{display:block;position:absolute;bottom:1.2rem;left:1.2rem;font-size:3.2rem;font-weight:100}.color-palette--overview .color__name{position:relative;bottom:auto;left:auto;padding-top:1.2rem;font-size:2.4rem;line-height:1}.color-code.color-code--rgb,.color-palette--overview .color-code,.color-palette--overview .color__name,.color__type{display:none}.color-code{background-color:inherit;display:block;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif}.color-code--hsb{opacity:0}@supports (--css:variables){.color-hint{white-space:nowrap}.color-hint:before{content:"";background-color:var(--color-hint);display:inline-block;width:1.2rem;height:1.2rem;margin:0 .4rem .3rem .2rem;-moz-border-radius:50%;border-radius:50%;vertical-align:text-bottom;cursor:help}.color-hint--base100:before{border:1px solid #a2a9b1}}.icon{display:inline-block;width:2rem;height:2rem;margin:0 .2rem;vertical-align:text-bottom}.icon--indicator{width:1.2rem;height:1.2rem;margin-bottom:.2rem}.icon--intermediate{width:1.6rem;height:1.6rem;margin-bottom:.2rem}.components__designing{position:relative}.components__designing:after{content:"";background:url(../../img/components/legend_16-8.svg) no-repeat;position:absolute;bottom:0;right:6.4rem;width:13.2rem;height:6.4rem}.page--components-messages .components__intro{max-width:700px;margin-left:auto;margin-right:auto}.resources-table{display:table;width:100%;margin-top:2.4rem;border-collapse:collapse}.resources-table__body,.resources-table__head{display:table-row;border-bottom:1px solid #a2a9b1}.resources-table__head{background-color:#eaecf0}.resources-table__head h2{margin-top:0;border-bottom:0;padding-bottom:0;font-size:2.1rem;font-weight:400}.resources-table__cell{display:table-cell;padding:1.6rem 1.6rem 1.6rem 0}.resources-table__head .resources-table__cell:first-child{padding-left:1.6rem}.lnk-resource{white-space:nowrap}.footer{color:#202122;padding:2.4rem 0;font-size:1.3rem}.footer__list{padding:0}.footer__list:first-child{margin:0}.footer__list:after{content:" ";display:block;clear:both}.footer__list li{list-style:none none;display:block;padding:.8rem 0 0}.footer__list li:first-child{padding-top:0}.footer__list+p{margin-top:1.2rem}.footer__list--connect a{font-weight:600}.lnk--wikimedia-project{display:inline-block;padding:.4rem 0;text-transform:uppercase}.page--home .page__title{border:0;padding:0}.page--design-principles-accessibility .nav--main .is-on>a{cursor:pointer}.page--design-principles-accessibility h3{padding-right:15%}.page--visual-style-typography .figures-do-dont .figure__contents{padding:4.2rem 3.6rem}.figures-do-dont--contrast .figure--dont{color:#a2a9b1}.typography-styles dt{display:inline-block;color:#72777d;min-width:10rem;margin:0 0 3.2rem 1.6rem;font-size:1.3rem;font-weight:600;vertical-align:top}.typography-styles .typography-styles__code{margin-bottom:0}.typography-styles dd{display:inline}.typography-styles dd>*{display:inline-block;margin-top:0}.typography-styles .figure__caption{padding-top:0}.typography-styles dd:after{content:"\A";white-space:pre}.typography-styles+hr{margin-top:4rem;margin-bottom:4rem}.page--visual-style-icons img{background-color:#eaecf0;padding:2.4rem}.fonts-loaded .color-code,.fonts-loaded .site__title,.fonts-loaded cite{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif}.fonts-loaded .page__title,.fonts-loaded .typography-styles h1,.fonts-loaded blockquote{font-family:Charter,Georgia,serif}@media (max-width:767px){.nav--main{position:absolute;top:-3.2rem;left:-1.6rem;right:-1.6rem;padding-bottom:1.6rem;-moz-box-shadow:0 2px 2px 0 rgba(0,0,0,.25);box-shadow:0 2px 2px 0 rgba(0,0,0,.25);z-index:1;-webkit-transform:translateY(-200%);-moz-transform:translateY(-200%);-ms-transform:translateY(-200%);transform:translateY(-200%);-webkit-transition:left .25s,right .25s,-webkit-transform .25s;transition:left .25s,right .25s,-webkit-transform .25s;-moz-transition:left .25s,right .25s,transform .25s,-moz-transform .25s;transition:left .25s,right .25s,transform .25s;transition:left .25s,right .25s,transform .25s,-webkit-transform .25s,-moz-transform .25s}.trigger--nav-main:checked+.nav--main{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.page__title{margin-top:-.4rem;font-size:2.8rem}.typography-styles dt{display:block;margin-left:0}.page--components .components__states{margin-left:0}.resources-table,.resources-table__body,.resources-table__cell,.resources-table__head{display:block}.resources-table__head{margin-left:-1.6rem;margin-right:-1.6rem}.resources-table__head .resources-table__cell:empty{display:none}.resources-table__body{padding-left:0}.resources-table__cell{padding-top:.8rem;padding-bottom:.8rem}}@media (min-width:240px){.content-box,.nav--main a,.site__title a{-webkit-transition-property:background-color,padding;-moz-transition-property:background-color,padding;transition-property:background-color,padding;-webkit-transition-duration:.25s;-moz-transition-duration:.25s;transition-duration:.25s}.site__title{margin-left:4.2rem}.site__title a{padding-left:0}.lnk--contribute span{display:none}.nav--main a{padding-left:1.6rem;padding-right:1.6rem}.col--end,.col--start{width:100%}.figure--full,.resources-table__head{margin-left:-1.6rem;margin-right:-1.6rem}.figure--full .figure__caption{margin-left:1.6rem;margin-right:1.6rem}.figure--this-is-for-everyone img,.figure--trustworthy-yet-joyful img{width:100%;max-width:568px;margin-left:auto;margin-right:auto}.figure--illustrations-header img{width:100%}.figure--illustrations-header+.figure--illustrations-header,.figure--illustrations-header+.figure--illustrations-header img{margin-top:0}.color{width:61.8%}.color-palette--base .color:nth-child(3n+4){clear:both}.color-palette--base .color{margin-right:1.6rem}.color-palette--overview.color-palette--base .color--emphasized{margin-right:1.1rem;margin-left:-.2rem}.page--components figure{margin-left:4.2rem}}@media (min-width:414px){.content-box{padding-left:3.2rem;padding-right:3.2rem}.nav--main{left:-3.2rem;right:-3.2rem}.nav--main a{padding-left:3.2rem;padding-right:3.2rem}.figure--full,.resources-table__head{margin-left:-3.2rem;margin-right:-3.2rem}.figure--full .figure__caption{margin-left:3.2rem;margin-right:3.2rem}.resources-table__head .resources-table__cell:first-child{padding-left:3.2rem;padding-right:3.2rem}.footer__list li{display:list-item;float:left;padding:0 .8rem 0 0}.footer__list li:after{content:"\2022";color:#72777d;padding:0 0 0 .8rem;font-weight:100}.footer__list li:last-child:after{content:"";padding:0}.color{width:16rem;margin-right:2.4rem}}@media (min-width:568px){.lnk--contribute{display:block;position:absolute;bottom:1.5rem;right:3.2rem;text-align:right}.lnk--contribute span{display:inline;opacity:0;-webkit-transition:opacity .25s;-moz-transition:opacity .25s;transition:opacity .25s}.figures-do-dont .figure{max-width:61.8%}.figure--this-is-for-everyone img,.figure--trustworthy-yet-joyful img{max-width:none}.figure--illustrations-header{float:left;width:44.4%}.figure--illustrations-header+.figure--illustrations-header{width:55.55%;margin-top:.8rem}.figure--illustrations-header+.figure--illustrations-header img{margin-top:1.6rem}}@media (min-width:768px){img{-moz-border-radius:2px;border-radius:2px}.content-box{width:100%;max-width:960px}.btn--nav-main{display:none}.site__title{float:left;margin-left:0}.nav--main a,.site__title a{padding-left:1.6rem;padding-right:1.6rem}.lnk--contribute span{display:inline;opacity:1}.col--start{width:20.8rem;z-index:1;-webkit-transition:width .25s;-moz-transition:width .25s;transition:width .25s}.col--end{margin-left:-20.8rem;padding-left:24rem}.nav--main{left:auto;right:auto}.figure--full,.figure--full .figure__caption{margin-left:0;margin-right:0}.figures-do-dont .figure{float:left;width:50%}.color-palette--base .color:nth-child(3n+4){clear:unset}.illustrations-case-study img{float:left;width:33.33%}.page--components figure{margin-left:6.4rem}}@media (min-width:992px){.content-box{width:100%;max-width:1140px}.nav--main a,.site__title a{padding-left:3.2rem;padding-right:3.2rem}.col--start{width:24rem}.col--end{margin-left:-24rem;padding-left:27.2rem}.color-palette--overview:first-child{margin-top:2.4rem}.color{margin-right:2.4rem}.color-palette--base .color{margin-right:1.35rem}.color-palette--overview.color-palette--base .color--emphasized{margin-right:1.35rem;margin-left:0}.color-palette--overview.color-palette--green:after,.color-palette--overview.color-palette--green:before,.color-palette--overview.color-palette--red:after,.color-palette--overview.color-palette--red:before{content:"";display:none}.color-palette--overview.color-palette--green:after,.color-palette--overview.color-palette--red:after,.color-section .color:nth-child(3n+4){clear:both}.resources-table__body .resources-table__cell{-webkit-transition:background-color .25s;-moz-transition:background-color .25s;transition:background-color .25s}.resources-table__body:hover .resources-table__cell{background-color:#f8f9fa}.resources-table__body .resources-table__cell:first-child,.resources-table__head .resources-table__cell:first-child{padding-left:1.6rem}}@media (min-width:1200px){.content-box{width:1140px}.col--start{width:25.6rem}.col--end{margin-left:-25.6rem;padding-left:28.8rem}} /*# sourceMappingURL=wmui-style-guide.min.css.map */ \ No newline at end of file diff --git a/css/build/wmui-style-guide.min.css.map b/css/build/wmui-style-guide.min.css.map index d5aecac4..f4be8b35 100644 --- a/css/build/wmui-style-guide.min.css.map +++ b/css/build/wmui-style-guide.min.css.map @@ -1 +1 @@ -{"version":3,"sources":["../../node_modules/normalize.css/normalize.css","../partials/fonts.css","../wmui-style-guide.dev.css"],"names":[],"mappings":"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WACD,CAED,MACC,UACD,CAEC,aACC,WACD,CAID,eACC,iBAAkB,CAClB,SACD,CAEA,8BACC,YACD,CAEA,OACC,UAAsC,CACtC,oBAAqB,CACrB,aAAc,CACd,UAAW,CACX,iBAAkB,CAClB,WAAY,CACZ,YAAa,CACb,oBAAqB,CACrB,cAAe,CACf,qBAAgG,CAChG,sBAA0C,CAA1C,iBAA0C,CAC1C,gBACD,CAEC,qCAEC,UACD,CAEA,qCACC,UACD,CAEA,kCACC,gBACD,CAEA,gCACC,YAAa,CACb,aAAc,CACd,gBAAkB,CAClB,mBAAoB,CACpB,oBAAqB,CACrB,yBAAqB,CAArB,oBAAqB,CACrB,cACD,CAEA,4CACC,gBACD,CAEA,4CACC,YAAa,CACb,WAAY,CACZ,YAAa,CACb,yBAAqB,CAArB,oBAAqB,CACrB,gBACD,CAEA,4BACC,oBACD,CAEA,uCACC,+BAAmD,CAAnD,4BAAmD,CAAnD,uBACD,CAEC,6CACC,SACD,CAED,aACC,aAAc,CACd,iBAAkB,CAClB,aAAc,CACd,WAAY,CACZ,gBAAiB,CACjB,eACD,CAEC,sCACC,iBAAkB,CAClB,WAAY,CACZ,SAAU,CACV,kBAAmB,CACnB,gBAAiB,CACjB,aACD,CAEA,oHAIC,YACD,CAED,YACC,wBAAyB,CACzB,aAAc,CACd,SAAU,CACV,4FACD,CAEC,iBACC,SACD,CAEF,4BACC,YACC,kBACD,CAEA,mBACC,UAAW,CACX,kCAAqC,CACrC,oBAAqB,CACrB,YAAa,CACb,aAAc,CACd,0BAA8B,CAC9B,sBAAkB,CAAlB,iBAAkB,CAClB,0BAA2B,CAC3B,WACD,CAEA,4BACC,wBACD,CACD,CAIA,MACC,oBAAqB,CACrB,UAAW,CACX,WAAY,CACZ,cAAgB,CAChB,0BACD,CAEC,iBACC,YAAa,CACb,aAAc,CACd,mBACD,CAEA,oBACC,YAAa,CACb,aAAc,CACd,mBACD,CAUD,uBACC,iBACD,CAEA,6BACC,UAAW,CACX,8DAAiE,CACjE,iBAAkB,CAClB,QAAS,CACT,YAAa,CACb,aAAc,CACd,aACD,CAEA,8CACC,eAAgB,CAChB,gBAAiB,CACjB,iBACD,CAGA,iBACC,aAAc,CACd,UAAW,CACX,iBAAkB,CAClB,wBACD,CAEA,8CAEC,iBAAkB,CAClB,+BACD,CAEA,uBACC,wBACD,CAEC,0BACC,YAAa,CACb,eAAgB,CAChB,gBAAiB,CACjB,gBAAiB,CACjB,eACD,CAED,uBACC,kBAAmB,CACnB,8BACD,CAEC,0DACC,mBACD,CAED,cACC,kBACD,CAGA,QACC,aAA0B,CAC1B,gBAAiB,CACjB,gBACD,CAEA,cACC,SACD,CAEC,0BACC,QACD,CAEA,oBACC,WAAY,CACZ,aAAc,CACd,UACD,CAEA,iBACC,oBAAqB,CACrB,aAAc,CACd,iBACD,CAEA,6BACC,aACD,CAEA,gBACC,iBACD,CAEA,yBACC,eACD,CAED,wBACC,oBAAqB,CACrB,eAAiB,CACjB,wBACD,CAKA,yBACC,QAAS,CACT,SACD,CAGA,2DACC,cACD,CAEA,0CACC,iBACD,CAGA,kEACC,qBACD,CAEA,yCACC,aACD,CAIA,sBACC,oBAAqB,CACrB,aAAkC,CAClC,eAAgB,CAChB,wBAAyB,CACzB,gBAAiB,CACjB,eAAsC,CACtC,kBACD,CAEA,4CACC,eACD,CAEA,sBACC,cACD,CAEA,wBACC,oBAAqB,CACrB,YACD,CAEA,oCACC,aACD,CAEA,4BACK,YAAa,CACb,eACL,CAEA,sBACC,eAAgB,CAChB,kBACD,CAGA,8BACC,wBAA4C,CAC5C,cACD,CAIA,wEAGC,4FACD,CAGA,wFAGC,iCACD,CAKA,yBACC,WACC,iBAAkB,CAClB,WAAY,CACZ,YAAa,CACb,aAAc,CACd,qBAAsB,CACtB,2CAA6C,CAA7C,sCAA6C,CAC7C,SAAU,CACV,mCAA8B,CAA9B,gCAA8B,CAA9B,+BAA8B,CAA9B,2BAA8B,CAC9B,8DAAkI,CAAlI,sDAAkI,CAAlI,uEAAkI,CAAlI,8CAAkI,CAAlI,yFACD,CAEA,sCACC,+BAA0B,CAA1B,4BAA0B,CAA1B,2BAA0B,CAA1B,uBACD,CAEA,aACC,iBAAmB,CACnB,gBACD,CAEA,sBACC,aAAc,CACd,aACD,CAGA,sCACC,aACD,CAGA,sFAIC,aACD,CAEA,uBACC,mBAAoB,CACpB,oBACD,CAEA,oDACC,YACD,CAEA,uBACC,cACD,CAEA,uBACC,iBAAmB,CACnB,oBACD,CACD,CAGA,yBACC,yCAGC,oDAA8C,CAA9C,iDAA8C,CAA9C,4CAA8C,CAC9C,gCAAoD,CAApD,6BAAoD,CAApD,wBACD,CAEA,aACC,kBACD,CAEC,eACC,cACD,CAED,sBACC,YACD,CAEA,aACC,mBAAoB,CACpB,oBACD,CAEA,sBAEC,UACD,CAEA,qCAEC,mBAAoB,CACpB,oBACD,CAEA,+BACC,kBAAmB,CACnB,mBACD,CAEA,sEAEC,UAAW,CACX,eAAgB,CAChB,gBAAiB,CACjB,iBACD,CAEA,kCACC,UACD,CAEA,4HAEC,YACD,CAEA,OACC,WACD,CAEA,4CACC,UACD,CAEA,4BACC,mBACD,CAEA,gEACC,mBAAoB,CACpB,kBACD,CAEA,yBACC,kBACD,CACD,CAGA,yBACC,aACC,mBAAoB,CACpB,oBACD,CAEA,WACC,YAAa,CACb,aACD,CAEC,aACC,mBAAoB,CACpB,oBACD,CAED,qCAEC,mBAAoB,CACpB,oBACD,CAEA,+BACC,kBAAmB,CACnB,mBACD,CAEA,0DACC,mBAAoB,CACpB,oBACD,CAEA,iBACC,iBAAkB,CAClB,UAAW,CACX,mBACD,CAEA,uBACC,eAAgB,CAChB,aAAkC,CAClC,mBAAqB,CACrB,eACD,CAEA,kCACC,UAAW,CACX,SACD,CAEA,OACC,WAAY,CACZ,mBACD,CACD,CAGA,yBACC,iBACC,aAAc,CACd,iBAAkB,CAClB,aAAc,CACd,YAAa,CACb,gBACD,CAEA,sBACC,cAAe,CACf,SAAU,CACV,+BAAmD,CAAnD,4BAAmD,CAAnD,uBACD,CAEA,yBACC,eACD,CAEA,sEAEC,cACD,CAEA,8BACC,UAAW,CACX,WACD,CAEA,4DACC,YAAa,CACb,gBACD,CAEA,gEACC,iBACD,CACD,CAGA,yBACC,IACC,sBAAkB,CAAlB,iBACD,CAEA,aACC,UAAW,CACX,eACD,CAEA,eACC,YACD,CAEA,aACC,UAAW,CACX,aACD,CAEC,4BAEC,mBAAoB,CACpB,oBACD,CAED,sBACC,cAAe,CACf,SACD,CAEA,YACC,aAAc,CACd,SAAU,CACV,6BAAiD,CAAjD,0BAAiD,CAAjD,qBACD,CAEA,UACC,oBAAqB,CACrB,kBACD,CAEA,WACC,SAAU,CACV,UACD,CAEA,6CAEC,aAAc,CACd,cACD,CAEA,yBACC,UAAW,CACX,SACD,CAEA,4CACC,WACD,CAGA,8BACC,UAAW,CACX,YACD,CAEA,yBACC,kBACD,CACD,CAGA,yBACC,aACC,UAAW,CACX,gBACD,CAEA,4BAEC,mBAAoB,CACpB,oBACD,CAEA,YACC,WACD,CAEA,UACC,kBAAmB,CACnB,oBACD,CAEA,qCACC,iBACD,CAEA,OACC,mBACD,CAEC,4BACC,oBACD,CAEA,gEACC,oBAAqB,CACrB,aACD,CAED,8MAIC,UAAW,CACX,YACD,CAEA,4IAGC,UACD,CAGA,8CACC,wCAA4D,CAA5D,qCAA4D,CAA5D,gCACD,CAEC,oDACC,wBACD,CAEA,oHAEC,mBACD,CACF,CAEA,0BACC,aACC,YACD,CAEA,YACC,aACD,CAEA,UACC,oBAAqB,CACrB,oBACD,CACD","file":"wmui-style-guide.min.css","sourcesContent":["/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in\n * IE on Windows Phone and in iOS.\n */\n\nhtml {\n line-height: 1.15; /* 1 */\n -ms-text-size-adjust: 100%; /* 2 */\n -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n\n/**\n * Remove the margin in all browsers (opinionated).\n */\n\nbody {\n margin: 0;\n}\n\n/**\n * Add the correct display in IE 9-.\n */\n\narticle,\naside,\nfooter,\nheader,\nnav,\nsection {\n display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n * 1. Add the correct display in IE.\n */\n\nfigcaption,\nfigure,\nmain { /* 1 */\n display: block;\n}\n\n/**\n * Add the correct margin in IE 8.\n */\n\nfigure {\n margin: 1em 40px;\n}\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\n\nhr {\n box-sizing: content-box; /* 1 */\n height: 0; /* 1 */\n overflow: visible; /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\npre {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n ========================================================================== */\n\n/**\n * 1. Remove the gray background on active links in IE 10.\n * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.\n */\n\na {\n background-color: transparent; /* 1 */\n -webkit-text-decoration-skip: objects; /* 2 */\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57- and Firefox 39-.\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\n\nabbr[title] {\n border-bottom: none; /* 1 */\n text-decoration: underline; /* 2 */\n text-decoration: underline dotted; /* 2 */\n}\n\n/**\n * Prevent the duplicate application of `bolder` by the next rule in Safari 6.\n */\n\nb,\nstrong {\n font-weight: inherit;\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/**\n * Add the correct font style in Android 4.3-.\n */\n\ndfn {\n font-style: italic;\n}\n\n/**\n * Add the correct background and color in IE 9-.\n */\n\nmark {\n background-color: #ff0;\n color: #000;\n}\n\n/**\n * Add the correct font size in all browsers.\n */\n\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* Embedded content\n ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n */\n\naudio,\nvideo {\n display: inline-block;\n}\n\n/**\n * Add the correct display in iOS 4-7.\n */\n\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\n/**\n * Remove the border on images inside links in IE 10-.\n */\n\nimg {\n border-style: none;\n}\n\n/**\n * Hide the overflow in IE.\n */\n\nsvg:not(:root) {\n overflow: hidden;\n}\n\n/* Forms\n ========================================================================== */\n\n/**\n * 1. Change the font styles in all browsers (opinionated).\n * 2. Remove the margin in Firefox and Safari.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: sans-serif; /* 1 */\n font-size: 100%; /* 1 */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\n\nbutton,\ninput { /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\n\nbutton,\nselect { /* 1 */\n text-transform: none;\n}\n\n/**\n * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n * controls in Android 4.\n * 2. Correct the inability to style clickable types in iOS and Safari.\n */\n\nbutton,\nhtml [type=\"button\"], /* 1 */\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button; /* 2 */\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\n\nlegend {\n box-sizing: border-box; /* 1 */\n color: inherit; /* 2 */\n display: table; /* 1 */\n max-width: 100%; /* 1 */\n padding: 0; /* 3 */\n white-space: normal; /* 1 */\n}\n\n/**\n * 1. Add the correct display in IE 9-.\n * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\n\nprogress {\n display: inline-block; /* 1 */\n vertical-align: baseline; /* 2 */\n}\n\n/**\n * Remove the default vertical scrollbar in IE.\n */\n\ntextarea {\n overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10-.\n * 2. Remove the padding in IE 10-.\n */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box; /* 1 */\n padding: 0; /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n[type=\"search\"] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/**\n * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.\n */\n\n[type=\"search\"]::-webkit-search-cancel-button,\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/* Interactive\n ========================================================================== */\n\n/*\n * Add the correct display in IE 9-.\n * 1. Add the correct display in Edge, IE, and Firefox.\n */\n\ndetails, /* 1 */\nmenu {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\n\nsummary {\n display: list-item;\n}\n\n/* Scripting\n ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n */\n\ncanvas {\n display: inline-block;\n}\n\n/**\n * Add the correct display in IE.\n */\n\ntemplate {\n display: none;\n}\n\n/* Hidden\n ========================================================================== */\n\n/**\n * Add the correct display in IE 10-.\n */\n\n[hidden] {\n display: none;\n}\n","@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../../fonts/Charter_regular.woff2' ) format( 'woff2' ),\n\t\t url( '../../fonts/Charter_regular.woff' ) format( 'woff' );\n\tfont-style: normal;\n\tfont-weight: 400;\n\ttext-rendering: optimizeLegibility; /* Attention: Android Stock Browser <= 4.3 doesn't show web font with this setting, but it also doesn't support WOFF :) */\n}\n\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../../fonts/Charter_bold.woff2' ) format( 'woff2' ),\n\t\t url( '../../fonts/Charter_bold.woff' ) format( 'woff' );\n\tfont-style: normal;\n\tfont-weight: 700;\n\ttext-rendering: optimizeLegibility;\n}\n\n/*\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../fonts/Charter_italic.woff2' ) format( 'woff2' ),\n\t\t url( '../fonts/Charter_italic.woff' ) format( 'woff' );\n\tfont-style: italic;\n\tfont-weight: 400;\n\ttext-rendering: optimizeLegibility;\n}\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../fonts/Charter_bold-italic.woff2' ) format( 'woff2' ),\n\t\t url( '../fonts/Charter_bold-italic.woff' ) format( 'woff' );\n\tfont-style: italic;\n\tfont-weight: 700;\n\ttext-rendering: optimizeLegibility;\n}\n*/\n","/* ::: Vendor Imports ::: */\n/* Load files from 'node_modules' folders with postCSS-import plugin.\n * Modules specified in package.json file */\n@import 'wikimedia-ui-base/wikimedia-ui-base.css';\n@import 'normalize.css';\n\n/* ::: Local Imports ::: */\n@import 'partials/fonts.css';\n\n:root {\n\t--background-color-hr: var( --wmui-color-base80 );\n\t--width-site: 960px;\n\t--width-site-desktop-wide: 1140px;\n\t--border-color-heading: var( --wmui-color-base80 );\n\t--border-width-heading: 3px;\n\t--outline-color-base--focus: var( --color-primary--focus );\n\t/* HACK; Add Georgia to serif fallback as long as WikimediaUI Base isn't updated */\n\t--font-family-serif--fallback: Georgia, serif; /* stylelint-disable-line value-keyword-case */\n\t--font-weight-base: 400;\n\t/* Setting bold to `600` as our stack works better with it, only Lato is on the edge.\n\t Helvetica and Arial fallback gracefully to `700`, see T246791. */\n\t--font-weight-bold: 600;\n\t--font-weight-ultralight: 100;\n}\n\n* {\n\tbox-sizing: border-box;\n}\n\nhtml {\n\tfont-size: 62.5%;\n}\n\nbody {\n\tbackground-color: var( --wmui-color-base80 ); /* FIXME: var; */\n\tcolor: var( --color-base );\n\tmargin: 0;\n\tfont-family: var( --font-family-system-sans );\n\tfont-size: 1.6rem;\n\tline-height: var( --line-height-base );\n}\n\n/* ::: Text Block-Level Elements ::: */\n/* ... Headings ... */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n\tcolor: var( --color-base--emphasized );\n\tmargin: 3.2rem 0 0;\n\tline-height: 1.25;\n\ttransition: font-size var( --transition-ease-medium ), font-weight var( --transition-ease-medium );\n}\n\nh2,\nh3,\nh4,\nh5 {\n\tfont-weight: var( --font-weight-bold );\n}\n\nh1,\n.page__title {\n\tfont-family: var( --font-family-serif--fallback ); /* Fallback */\n\tfont-size: 3.2rem;\n\tfont-weight: var( --font-weight-base );\n}\n\nh2 {\n\tborder-bottom: var( --border-width-heading ) var( --border-style-base ) var( --border-color-heading );\n\tpadding-bottom: 2px;\n\tfont-size: 2.4rem;\n}\n\n/* Reduce top margin when introductory headlines are following each other. */\nh2 + h3 {\n\tmargin-top: 1.6rem;\n}\n\nh3 {\n\tfont-size: 2rem;\n}\n\nh4 {\n\tfont-size: 1.8rem;\n}\n\nh5 {\n\tfont-size: 1.6rem;\n}\n\nh6 {\n\tfont-size: 1.6rem;\n\tfont-weight: normal;\n}\n\n/* ... Other Block-Level Elements ... */\nblockquote {\n\tborder-left: 3px solid var( --wmui-color-base70 ); /* FIXME: var */\n\tmargin: 1.6rem 0 0;\n\tpadding: 0 3.2rem;\n\tfont-family: var( --font-family-serif--fallback ); /* Fallback */\n\tfont-size: 2rem;\n\tfont-style: italic;\n\tline-height: 1.5;\n}\n\nblockquote cite {\n\tdisplay: block;\n\tmargin-top: 0.8rem;\n\tfont-family: var( --font-family-system-sans );\n\tfont-size: 1.4rem;\n\tfont-style: normal;\n}\n\n\tblockquote cite:before {\n\t\tcontent: '— ';\n\t}\n\ncode,\npre,\n.mw-code {\n\tfont-family: var( --font-family-monospace );\n}\n\nhr {\n\tbackground: var( --background-color-hr );\n\tdisplay: block;\n\theight: 0.8rem;\n\tborder: 0;\n\tmargin: 8rem 0;\n}\n\np {\n\tmargin: 3.2rem 0 0;\n\tline-height: 1.5;\n}\n\n\th1 + p,\n\th2 + p,\n\th3 + p,\n\th4 + p,\n\th5 + p,\n\th6 + p,\n\tp + p,\n\tul + p,\n\tp:first-child {\n\t\tmargin: 0.8rem 0 0;\n\t}\n\n\tblockquote + p {\n\t\tmargin-top: 1.6rem;\n\t}\n\npre,\n.mw-code {\n\tbackground-color: var( --background-color-code );\n\tcolor: var( --color-base--emphasized );\n\tborder: var( --border-base );\n\tpadding: 1.2rem 2rem;\n\tfont-size: 1.4rem;\n\twhite-space: pre-wrap;\n}\n\n/* ... Lists ... */\nol,\nul {\n\tmargin: 0.8rem 0;\n\tpadding: 0 0 0 1.8rem; /* Can't remain within our 8px based sizing due to browser defaults */\n}\n\n.content li {\n\tmargin-top: 0.4rem;\n}\n\n\t.content li:first-child {\n\t\tmargin-top: 0;\n\t}\n\n/* ... Images & Figures ... */\nfigure {\n\tmargin: 0.8rem 0 0;\n}\n\nimg {\n\tdisplay: block;\n\tmax-width: 100%;\n\tmargin: 1.6rem 0 0;\n}\n\n.page--components figure {\n\tmargin-left: 6.4rem;\n\tpadding-top: 0.8rem;\n}\n\n.page--components figure img {\n\tmargin-top: 0.8rem;\n}\n\n/* ::: Inline Elements ::: */\na {\n\tcolor: var( --color-primary );\n\ttext-decoration: none;\n}\n\n\ta:hover {\n\t\ttext-decoration: underline;\n\t}\n\n\ta:active {\n\t\tcolor: var( --color-primary--active );\n\t}\n\nb,\nstrong {\n\tfont-weight: var( --font-weight-bold );\n}\n\ncode {\n\tbackground-color: var( --background-color-code );\n\tdisplay: inline-block;\n\tpadding: 0.2rem 0.4rem;\n\tfont-size: 1.4rem;\n}\n\nsmall {\n\tfont-size: 1.3rem;\n}\n\nsub,\nsup {\n\tfont-size: 1.1rem;\n}\n\n/* ::: General Classes ::: */\n/* ::: Text for Screen Readers only ::: */\n.is-aural {\n\tdisplay: block;\n\tposition: absolute;\n\tclip: rect( 1px, 1px, 1px, 1px );\n\twidth: 1px;\n\theight: 1px;\n\tmargin: -1px;\n\tborder: 0;\n\tpadding: 0;\n\toverflow: hidden;\n}\n\n\t.is-aural.is-focusable:active,\n\t.is-aural.is-focusable:focus {\n\t\tposition: static;\n\t\tclip: auto;\n\t\twidth: auto;\n\t\theight: auto;\n\t\tmargin: 0;\n\t\ttext-decoration: underline;\n\t\toverflow: visible;\n\t}\n\n.clearfix:before,\n.clearfix:after,\n.page:before,\n.page:after,\n.content-box:before,\n.content-box:after,\n.color-palette:before,\n.color-palette:after,\n.figures-do-dont:before,\n.figures-do-dont:after,\n.content__illustration-style .figure--full:before,\n.content__illustration-style .figure--full:after {\n\tcontent: ' ';\n\tdisplay: table;\n}\n\n.clearfix:after,\n.page:after,\n.content-box:after,\n.color-palette:after,\n.figures-do-dont:after,\n.content__illustration-style .figure--full:after {\n\tclear: both;\n}\n\n/* ::: Text-formatting ::: */\n/* Support Blink based browsers. */\n/* They use `outline` for focus styles, we're only amending the color here, see T245887. */\n:focus {\n\toutline-color: var( --outline-color-base--focus );\n}\n\n.is-complementary,\n.is-subtle {\n\tcolor: var( --color-base--subtle );\n}\n\n.is-complementary {\n\tfont-size: 1.4rem;\n}\n\n::placeholder,\n.is-placeholder {\n\tcolor: var( --color-placeholder );\n\topacity: 1;\n}\n\n.content-box {\n\tposition: relative;\n\tmargin-right: auto;\n\tmargin-left: auto;\n\tpadding-left: 1.6rem; /* FIXME: var( --grid-padding ); */\n\tpadding-right: 1.6rem;\n}\n\n\n/* ::: Structure ::: */\n.header {\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tmin-height: 6.4rem;\n\tline-height: 6.4rem;\n}\n\n\t.site__title {\n\t\tcolor: var( --wmui-color-base10 );\n\t\tmargin-top: 0;\n\t\theight: 6.4rem;\n\t\tfont-family: var( --font-family-system-sans );\n\t\tfont-size: 1.6rem;\n\t\tfont-weight: var( --font-weight-base );\n\t\tletter-spacing: 0.5px;\n\t}\n\n\t\t.site__title a {\n\t\t\tcolor: inherit;\n\t\t\tdisplay: inline-block;\n\t\t\tpadding: 1.2rem 3.2rem 0;\n\t\t\ttransition: color var( --transition-ease-medium );\n\t\t}\n\n\t\t.site__title a:hover {\n\t\t\tcolor: var( --wmui-color-base0 ); /* --color-base-emphasized */\n\t\t\ttext-decoration: none;\n\t\t}\n\n\t\t.site__org {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\t.site__project {\n\t\t\tfont-weight: var( --font-weight-bold );\n\t\t}\n\n\t/* ... Navigation button ... */\n\t.btn--nav-main {\n\t\tposition: absolute;\n\t\ttop: 1.2rem;\n\t\twidth: 4.2rem;\n\t\theight: 4.2rem;\n\t\tcursor: pointer;\n\t}\n\n\t/* Fake hamburger icon */\n\t.btn--nav-main i {\n\t\tdisplay: block;\n\t\theight: 4.2rem;\n\t\ttransition: color var( --transition-ease-medium ), box-shadow var( --transition-ease-medium );\n\t}\n\n\t.btn--nav-main i:before,\n\t.btn--nav-main i:after {\n\t\tcontent: '';\n\t\tbackground-color: var( --wmui-color-base20 );\n\t\twidth: 2rem;\n\t\theight: 2px;\n\t\tposition: absolute;\n\t\ttop: 0.4rem;\n\t\tleft: 0;\n\t}\n\n\t.btn--nav-main i:after {\n\t\ttop: 1.1rem;\n\t\tbox-shadow: 0 0.7rem 0 var( --wmui-color-base20 );\n\t}\n\n\t.btn--nav-main i:hover:before,\n\t.btn--nav-main i:hover:after {\n\t\tbackground-color: var( --wmui-color-base0 ); /* --color-base-emphasized */\n\t}\n\n\t.btn--nav-main i:hover:after {\n\t\tbox-shadow: 0 0.7rem 0 var( --wmui-color-base0 );\n\t}\n\n\t.btn--nav-main span {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tclip: rect( 1px, 1px, 1px, 1px );\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\tmargin: -1px;\n\t\toverflow: hidden;\n\t}\n\n\t/* ... GitHub Contribute Link ... */\n\t.lnk--contribute {\n\t\tfont-size: 1.4rem;\n\t\tline-height: 1.4rem; /* Derive slightly from template for cross-browser compliance */\n\t}\n\n\n/* ... Content ... */\n.page {\n\tbackground-color: var( --background-color-base );\n\tposition: relative;\n\tmargin-top: 6.4rem;\n\tpadding: 6.4rem 0;\n\tbox-shadow: 0 1px 4px 0 rgba( 0, 0, 0, 0.25 );\n\toverflow-y: hidden;\n}\n\n.content {\n\tfloat: left;\n}\n\n.col {\n\tfloat: left;\n\tposition: relative;\n\tmin-height: 1px;\n}\n\n\t.col--start {\n\t\tpadding: 0;\n\t}\n\n\t.col--end {\n\t\tpadding: 0;\n\t}\n\n/* ... Main Navigation ... */\n.nav--main {\n\tbackground-color: var( --background-color-base ); /* needed for menu appearance on mobile below */\n\t/* margin-top: 6.4rem; */\n}\n\n.nav--main li:not( .is-on ) ul,\n.trigger--nav-main {\n\tdisplay: none;\n}\n\n.nav--main ol,\n.nav--main ul {\n\tpadding: 0;\n}\n\n.nav--main ol:first-child {\n\tmargin: 0;\n}\n\n.nav--main li {\n\tpadding: 0;\n\tlist-style: none none;\n}\n\n.nav--main > ol > li {\n\tmargin-bottom: 0.4rem;\n}\n\n.nav--main a {\n\tcolor: var( --color-base );\n\tdisplay: block;\n\tpadding: 0.8rem 1.2rem;\n\tfont-size: 1.6rem;\n\ttext-decoration: none;\n\ttransition: background-color var( --transition-ease-medium ), color var( --transition-ease-medium ), padding var( --transition-ease-medium );\n}\n\n.nav--main a:hover,\n.nav--main a:focus {\n\tbackground-color: var( --background-color-code );\n\tcolor: var( --color-base--emphasized );\n}\n\n.nav--main .is-on > a {\n\tbackground-color: var( --background-color-primary );\n\tcolor: var( --color-primary );\n\t/* border-left: 2px solid var( --color-primary ); */\n\tborder-radius: var( --border-radius-base );\n\tfont-weight: var( --font-weight-bold );\n\tcursor: default;\n}\n\n.nav__sub-items {\n\tmargin-top: 1.2rem;\n\tmargin-bottom: 1em; /* FIXME: replace with rem and mt */\n}\n\n.nav__sub-items > .nav__sub-item {\n\tmargin-left: 3.6rem;\n}\n\n.nav--main .nav__sub-items ul {\n\tmargin: 0;\n}\n\n.nav--main .nav__sub-items a { /* stylelint-disable-line no-descending-specificity */\n\tcolor: var( --wmui-color-base20 );\n\tborder-left: var( --border-width-base ) solid var( --wmui-color-base80 );\n border-radius: 0 var( --border-radius-base ) var( --border-radius-base ) 0;\n\tpadding-left: 1.6rem;\n\tfont-size: 1.4rem;\n\ttransition: background-color var( --transition-ease-medium ), color var( --transition-ease-medium );\n}\n\n.nav--main .nav__sub-item.is-on > a {\n\tbackground-color: var( --background-color-base );\n\tcolor: var( --color-base--active );\n\tborder-left-color: var( --wmui-color-base0 );\n\tfont-weight: var( --font-weight-bold );\n}\n\n.nav--main .nav__sub-item .nav__sub-item a {\n\tpadding-left: 3.6rem;\n}\n\n\n/* ::: Content ::: */\n.page__parent-title {\n\tcolor: var( --color-base--subtle );\n\tmargin-top: -2.8rem;\n}\n\n.page__title {\n\tmargin-top: -0.8rem;\n}\n\n.page__parent-title + .page__title {\n\tmargin-top: -0.4rem;\n}\n\n.page__tagline {\n\tmargin-top: 1.2rem;\n\tfont-size: 2rem;\n\tfont-style: italic;\n\tfont-weight: 100;\n}\n\n/* Remove, doesn't provide good styling\n.page__lead {\n\tfont-size: 1.8rem;\n}\n*/\n\n.figures--full {\n\tbackground-color: var( --wmui-color-base90 );\n}\n\n.figure__caption,\n.heading__description {\n\tcolor: var( --color-base--subtle );\n\tclear: both;\n\tdisplay: block;\n\tfont-size: 1.3rem;\n}\n\n.figure__caption {\n\tpadding-top: 0.8rem; /* `padding-top` due to usage with floated images in figure above */\n\tfont-style: italic;\n}\n\n\t.figure__caption:empty {\n\t\tdisplay: none;\n\t}\n\n.heading__description {\n\tfloat: right;\n\tmargin-top: -1.9rem;\n}\n\n\t.heading__description + * {\n\t\tclear: both;\n\t}\n\n/* ... “Do” & “Don't” figures ... */\n.figures-do-dont {\n\tmargin-top: 1.6rem;\n}\n\n.figures-do-dont .figure {\n\tbackground-color: var( --wmui-color-base80 );\n\tborder-top-left-radius: var( --border-radius-base );\n\tborder-top-right-radius: var( --border-radius-base );\n}\n\n.figures-do-dont .figure--dont {\n\tborder-left: var( --border-width-base ) solid var( --color-base--inverted );\n}\n\n.figures-do-dont .figure__caption {\n\tbackground-color: var( --color-base--inverted );\n\tdisplay: block;\n\tborder-top-width: 0.8rem;\n\tborder-top-style: solid;\n\tpadding-right: 0.8em;\n}\n\n.figure--do .figure__caption,\n.do {\n\tborder-top-color: var( --color-secondary );\n}\n\n.figure--dont .figure__caption,\n.dont {\n\tborder-top-color: var( --color-destructive );\n}\n\n.do,\n.dont {\n\tfont-style: normal;\n\tfont-weight: var( --font-weight-bold );\n}\n\n\t.do:before,\n\t.dont:before {\n\t\tdisplay: inline-block;\n\t\tmargin-right: 0.4rem;\n\t\tpadding-top: 0.4rem;\n\t\tfont-size: 2.1rem;\n\t\tline-height: 1rem;\n\t\tvertical-align: top;\n\t}\n\n.do {\n\tcolor: var( --color-success );\n}\n\n\t.do:before {\n\t\tcontent: '✓';\n\t}\n\n.dont {\n\tcolor: var( --color-destructive );\n}\n\n\t.dont:before {\n\t\tcontent: '×';\n\t}\n\n\n/* ... Color ... */\n.color-palette {\n\tmargin: 2.4rem 0 0;\n\tpadding: 0;\n}\n\n.color-palette + .color-palette {\n\tmargin-top: 0;\n}\n\n.color {\n\tcolor: var( --color-base--emphasized );\n\tlist-style: none none;\n\tdisplay: block;\n\tfloat: left;\n\tposition: relative;\n\twidth: 61.8%;\n\theight: 16rem;\n\tmargin-bottom: 3.2rem;\n\tpadding: 1.2rem;\n\tborder: var( --border-width-base ) var( --border-style-base ) var( --border-color-inset--focus );\n\tborder-radius: var( --border-radius-base );\n\tfont-size: 1.4rem;\n}\n\n\t.color--dark,\n\t.color__wcag-level span {\n\t\tcolor: var( --color-base--inverted );\n\t}\n\n\t.color--dark .color__wcag-level span {\n\t\tcolor: var( --color-base--emphasized );\n\t}\n\n\t.color-palette .color:first-child {\n\t\tmargin-top: 0.4rem;\n\t}\n\n\t.color-palette--overview .color {\n\t\twidth: 6.4rem;\n\t\theight: 6.2rem;\n\t\tmargin-top: 0.8rem;\n\t\tmargin-right: 1.2rem;\n\t\tmargin-bottom: 2.4rem;\n\t\tborder-radius: 3.2rem;\n\t\tcursor: default;\n\t}\n\n\t.color-palette--overview .color:first-child {\n\t\tmargin-top: 0.8rem;\n\t}\n\n\t.color-palette--overview .color--emphasized {\n\t\twidth: 7.2rem;\n\t\theight: 7rem;\n\t\tmargin-top: 0;\n\t\tborder-radius: 7.2rem;\n\t\tpadding-top: 2rem;\n\t}\n\n\t.color-palette--base .color {\n\t\tmargin-right: 1.35rem;\n\t}\n\n\t.color-section .color .color-code--hsb {\n\t\ttransition: opacity var( --transition-ease-medium );\n\t}\n\n\t\t.color-section .color:hover .color-code--hsb {\n\t\t\topacity: 1;\n\t\t}\n\n\t.color__name {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tbottom: 1.2rem;\n\t\tleft: 1.2rem;\n\t\tfont-size: 3.2rem;\n\t\tfont-weight: var( --font-weight-ultralight );\n\t}\n\n\t\t.color-palette--overview .color__name {\n\t\t\tposition: relative;\n\t\t\tbottom: auto;\n\t\t\tleft: auto;\n\t\t\tpadding-top: 1.2rem;\n\t\t\tfont-size: 2.4rem;\n\t\t\tline-height: 1;\n\t\t}\n\n\t\t.color__type,\n\t\t.color-code.color-code--rgb,\n\t\t.color-palette--overview .color__name,\n\t\t.color-palette--overview .color-code {\n\t\t\tdisplay: none;\n\t\t}\n\n\t.color-code {\n\t\tbackground-color: inherit;\n\t\tdisplay: block;\n\t\tpadding: 0;\n\t\tfont-family: var( --font-family-system-sans );\n\t}\n\n\t\t.color-code--hsb {\n\t\t\topacity: 0;\n\t\t}\n\n@supports ( --css: variables ) {\n\t.color-hint {\n\t\twhite-space: nowrap;\n\t}\n\n\t.color-hint:before {\n\t\tcontent: '';\n\t\tbackground-color: var( --color-hint );\n\t\tdisplay: inline-block;\n\t\twidth: 1.2rem;\n\t\theight: 1.2rem;\n\t\tmargin: 0 0.4rem 0.3rem 0.2rem;\n\t\tborder-radius: 50%;\n\t\tvertical-align: text-bottom;\n\t\tcursor: help;\n\t}\n\n\t.color-hint--base100:before {\n\t\tborder: var( --border-base );\n\t}\n}\n\n\n/* ... Icon ... */\n.icon {\n\tdisplay: inline-block;\n\twidth: 2rem;\n\theight: 2rem;\n\tmargin: 0 0.2rem;\n\tvertical-align: text-bottom;\n}\n\n\t.icon--indicator {\n\t\twidth: 1.2rem;\n\t\theight: 1.2rem;\n\t\tmargin-bottom: 0.2rem;\n\t}\n\n\t.icon--intermediate {\n\t\twidth: 1.6rem;\n\t\theight: 1.6rem;\n\t\tmargin-bottom: 0.2rem;\n\t}\n\n\n/* ... Components ... */\n/*\n.page--components h2 {\n\tborder-bottom: 0;\n\tpadding-bottom: 0;\n}\n*/\n.components__designing {\n\tposition: relative;\n}\n\n.components__designing:after {\n\tcontent: '';\n\tbackground: url( ../../img/components/legend_16-8.svg ) no-repeat;\n\tposition: absolute;\n\tbottom: 0;\n\tright: 6.4rem;\n\twidth: 13.2rem;\n\theight: 6.4rem;\n}\n\n.page--components-messages .components__intro {\n\tmax-width: 700px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n\n/* ... Resources ... */\n.resources-table {\n\tdisplay: table;\n\twidth: 100%;\n\tmargin-top: 2.4rem;\n\tborder-collapse: collapse;\n}\n\n.resources-table__head,\n.resources-table__body {\n\tdisplay: table-row;\n\tborder-bottom: 1px solid #a2a9b1;\n}\n\n.resources-table__head {\n\tbackground-color: #eaecf0;\n}\n\n\t.resources-table__head h2 {\n\t\tmargin-top: 0;\n\t\tborder-bottom: 0;\n\t\tpadding-bottom: 0;\n\t\tfont-size: 2.1rem;\n\t\tfont-weight: var( --font-weight-base );\n\t}\n\n.resources-table__cell {\n\tdisplay: table-cell;\n\tpadding: 1.6rem 1.6rem 1.6rem 0;\n}\n\n\t.resources-table__head .resources-table__cell:first-child {\n\t\tpadding-left: 1.6rem;\n\t}\n\n.lnk-resource {\n\twhite-space: nowrap;\n}\n\n/* ::: Footer ::: */\n.footer {\n\tcolor: var( --color-base );\n\tpadding: 2.4rem 0;\n\tfont-size: 1.3rem;\n}\n\n.footer__list {\n\tpadding: 0;\n}\n\n\t.footer__list:first-child {\n\t\tmargin: 0;\n\t}\n\n\t.footer__list:after {\n\t\tcontent: ' ';\n\t\tdisplay: block;\n\t\tclear: both;\n\t}\n\n\t.footer__list li {\n\t\tlist-style: none none;\n\t\tdisplay: block;\n\t\tpadding: 0.8rem 0 0;\n\t}\n\n\t.footer__list li:first-child {\n\t\tpadding-top: 0;\n\t}\n\n\t.footer__list + p {\n\t\tmargin-top: 1.2rem;\n\t}\n\n\t.footer__list--connect a {\n\t\tfont-weight: var( --font-weight-bold );\n\t}\n\n.lnk--wikimedia-project {\n\tdisplay: inline-block;\n\tpadding: 0.4rem 0;\n\ttext-transform: uppercase;\n}\n\n\n/* ::: Page-specific Styles ::: */\n/* ... Homepage ... */\n.page--home .page__title {\n\tborder: 0;\n\tpadding: 0;\n}\n\n/* ... “Design principles – Accessibility” ... */\n.page--design-principles-accessibility .nav--main .is-on > a {\n\tcursor: pointer;\n}\n\n.page--design-principles-accessibility h3 {\n\tpadding-right: 15%;\n}\n\n/* ... “Typography” ... */\n.page--visual-style-typography .figures-do-dont .figure__contents {\n\tpadding: 4.2rem 3.6rem;\n}\n\n.figures-do-dont--contrast .figure--dont {\n\tcolor: var( --wmui-color-base50 );\n}\n\n/* ... Typography Styles ... */\n\n.typography-styles dt {\n\tdisplay: inline-block;\n\tcolor: var( --color-base--subtle );\n\tmin-width: 10rem;\n\tmargin: 0 0 3.2rem 1.6rem; /* Need to rely on `margin-bottom` here for vertical alignment */\n\tfont-size: 1.3rem;\n\tfont-weight: var( --font-weight-bold );\n\tvertical-align: top;\n}\n\n.typography-styles .typography-styles__code {\n\tmargin-bottom: 0;\n}\n\n.typography-styles dd {\n\tdisplay: inline;\n}\n\n.typography-styles dd > * {\n\tdisplay: inline-block;\n\tmargin-top: 0; /* Remove `margin` from elements like paragraphs and list elements */\n}\n\n.typography-styles .figure__caption {\n\tpadding-top: 0; /* Remove `padding` from elements like figure caption */\n}\n\n.typography-styles dd:after {\n content: '\\A';\n white-space: pre;\n}\n\n.typography-styles + hr {\n\tmargin-top: 4rem;\n\tmargin-bottom: 4rem;\n}\n\n/* ... “Icons” ... */\n.page--visual-style-icons img { /* FIXME: generalize image styles */\n\tbackground-color: var( --wmui-color-base80 ); /* FIXME: var; */\n\tpadding: 2.4rem;\n}\n\n\n/* ::: Dynamic content ::: */\n.fonts-loaded cite,\n.fonts-loaded .site__title,\n.fonts-loaded .color-code {\n\tfont-family: var( --font-family-system-sans );\n}\n\n/* ::: Text Block-Level Elements ::: */\n.fonts-loaded .page__title,\n.fonts-loaded blockquote,\n.fonts-loaded .typography-styles h1 {\n\tfont-family: 'Charter', Georgia, serif; /* stylelint-disable-line font-family-name-quotes */\n}\n\n\n/* ::: Media Queries ::: */\n/* ... Smartphone only ... */\n@media ( max-width: 767px ) {\n\t.nav--main {\n\t\tposition: absolute;\n\t\ttop: -3.2rem;\n\t\tleft: -1.6rem;\n\t\tright: -1.6rem;\n\t\tpadding-bottom: 1.6rem;\n\t\tbox-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 ); /* FIXME: Update wmui-base */\n\t\tz-index: 1;\n\t\ttransform: translateY( -200% );\n\t\ttransition: left var( --transition-ease-medium ), right var( --transition-ease-medium ), transform var( --transition-ease-medium );\n\t}\n\n\t.trigger--nav-main:checked + .nav--main {\n\t\ttransform: translateY( 0 );\n\t}\n\n\t.page__title {\n\t\tmargin-top: -0.4rem;\n\t\tfont-size: 2.8rem;\n\t}\n\n\t.typography-styles dt {\n\t\tdisplay: block;\n\t\tmargin-left: 0;\n\t}\n\n\t/* ... Components ... */\n\t.page--components .components__states {\n\t\tmargin-left: 0;\n\t}\n\n\t/* ... Resources ... */\n\t.resources-table,\n\t.resources-table__head,\n\t.resources-table__body,\n\t.resources-table__cell {\n\t\tdisplay: block;\n\t}\n\n\t.resources-table__head {\n\t\tmargin-left: -1.6rem;\n\t\tmargin-right: -1.6rem;\n\t}\n\n\t.resources-table__head .resources-table__cell:empty {\n\t\tdisplay: none;\n\t}\n\n\t.resources-table__body {\n\t\tpadding-left: 0;\n\t}\n\n\t.resources-table__cell {\n\t\tpadding-top: 0.8rem;\n\t\tpadding-bottom: 0.8rem;\n\t}\n}\n\n/* ... Smartphone portrait ... */\n@media ( min-width: 240px ) {\n\t.content-box,\n\t.site__title a,\n\t.nav--main a {\n\t\ttransition-property: background-color, padding;\n\t\ttransition-duration: var( --transition-ease-medium );\n\t}\n\n\t.site__title {\n\t\tmargin-left: 4.2rem;\n\t}\n\n\t\t.site__title a {\n\t\t\tpadding-left: 0;\n\t\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: none;\n\t}\n\n\t.nav--main a {\n\t\tpadding-left: 1.6rem;\n\t\tpadding-right: 1.6rem;\n\t}\n\n\t.col--start,\n\t.col--end {\n\t\twidth: 100%;\n\t}\n\n\t.figure--full,\n\t.resources-table__head {\n\t\tmargin-left: -1.6rem;\n\t\tmargin-right: -1.6rem;\n\t}\n\n\t.figure--full .figure__caption {\n\t\tmargin-left: 1.6rem;\n\t\tmargin-right: 1.6rem;\n\t}\n\n\t.figure--this-is-for-everyone img,\n\t.figure--trustworthy-yet-joyful img {\n\t\twidth: 100%;\n\t\tmax-width: 568px;\n\t\tmargin-left: auto;\n\t\tmargin-right: auto;\n\t}\n\n\t.figure--illustrations-header img {\n\t\twidth: 100%;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header,\n\t.figure--illustrations-header + .figure--illustrations-header img {\n\t\tmargin-top: 0;\n\t}\n\n\t.color {\n\t\twidth: 61.8%;\n\t}\n\n\t.color-palette--base .color:nth-child( 3n+4 ) {\n\t\tclear: both;\n\t}\n\n\t.color-palette--base .color {\n\t\tmargin-right: 1.6rem;\n\t}\n\n\t.color-palette--overview.color-palette--base .color--emphasized {\n\t\tmargin-right: 1.1rem;\n\t\tmargin-left: -0.2rem;\n\t}\n\n\t.page--components figure {\n\t\tmargin-left: 4.2rem;\n\t}\n}\n\n/* ... Smartphone+ portrait ... */\n@media ( min-width: 414px ) {\n\t.content-box {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.nav--main {\n\t\tleft: -3.2rem;\n\t\tright: -3.2rem;\n\t}\n\n\t\t.nav--main a {\n\t\t\tpadding-left: 3.2rem;\n\t\t\tpadding-right: 3.2rem;\n\t\t}\n\n\t.figure--full,\n\t.resources-table__head {\n\t\tmargin-left: -3.2rem;\n\t\tmargin-right: -3.2rem;\n\t}\n\n\t.figure--full .figure__caption {\n\t\tmargin-left: 3.2rem;\n\t\tmargin-right: 3.2rem;\n\t}\n\n\t.resources-table__head .resources-table__cell:first-child {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.footer__list li {\n\t\tdisplay: list-item;\n\t\tfloat: left;\n\t\tpadding: 0 0.8rem 0 0;\n\t}\n\n\t.footer__list li:after {\n\t\tcontent: '\\2022'; /* bullet dot: '•' */\n\t\tcolor: var( --color-base--subtle );\n\t\tpadding: 0 0 0 0.8rem;\n\t\tfont-weight: 100;\n\t}\n\n\t.footer__list li:last-child:after {\n\t\tcontent: '';\n\t\tpadding: 0;\n\t}\n\n\t.color {\n\t\twidth: 16rem;\n\t\tmargin-right: 2.4rem;\n\t}\n}\n\n/* ... Smartphone landscape ... */\n@media ( min-width: 568px ) {\n\t.lnk--contribute {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tbottom: 1.5rem; /* Not on 8px base due to `line-height` setting */\n\t\tright: 3.2rem;\n\t\ttext-align: right;\n\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: inline;\n\t\topacity: 0;\n\t\ttransition: opacity var( --transition-ease-medium );\n\t}\n\n\t.figures-do-dont .figure {\n\t\tmax-width: 61.8%;\n\t}\n\n\t.figure--this-is-for-everyone img,\n\t.figure--trustworthy-yet-joyful img {\n\t\tmax-width: none;\n\t}\n\n\t.figure--illustrations-header {\n\t\tfloat: left;\n\t\twidth: 44.4%;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header {\n\t\twidth: 55.55%;\n\t\tmargin-top: 0.8rem;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header img {\n\t\tmargin-top: 1.6rem;\n\t}\n}\n\n/* ... Tablet ... */\n@media ( min-width: 768px ) {\n\timg {\n\t\tborder-radius: 2px;\n\t}\n\n\t.content-box {\n\t\twidth: 100%;\n\t\tmax-width: 960px;\n\t}\n\n\t.btn--nav-main {\n\t\tdisplay: none;\n\t}\n\n\t.site__title {\n\t\tfloat: left;\n\t\tmargin-left: 0;\n\t}\n\n\t\t.site__title a,\n\t\t.nav--main a {\n\t\t\tpadding-left: 1.6rem;\n\t\t\tpadding-right: 1.6rem;\n\t\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: inline;\n\t\topacity: 1;\n\t}\n\n\t.col--start {\n\t\twidth: 20.8rem;\n\t\tz-index: 1;\n\t\ttransition: width var( --transition-ease-medium );\n\t}\n\n\t.col--end {\n\t\tmargin-left: -20.8rem;\n\t\tpadding-left: 24rem; /* = 22.4 + (2 * 1.6 padding) */\n\t}\n\n\t.nav--main {\n\t\tleft: auto;\n\t\tright: auto;\n\t}\n\n\t.figure--full,\n\t.figure--full .figure__caption {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t.figures-do-dont .figure {\n\t\tfloat: left;\n\t\twidth: 50%;\n\t}\n\n\t.color-palette--base .color:nth-child( 3n+4 ) {\n\t\tclear: unset;\n\t}\n\n\t/* ... “Illustrations” ... */\n\t.illustrations-case-study img {\n\t\tfloat: left;\n\t\twidth: 33.33%;\n\t}\n\n\t.page--components figure {\n\t\tmargin-left: 6.4rem;\n\t}\n}\n\n/* ... Tablet+ / Netbook ... */\n@media ( min-width: 992px ) {\n\t.content-box {\n\t\twidth: 100%;\n\t\tmax-width: var( --width-site-desktop-wide );\n\t}\n\n\t.site__title a,\n\t.nav--main a {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.col--start {\n\t\twidth: 24rem;\n\t}\n\n\t.col--end {\n\t\tmargin-left: -24rem;\n\t\tpadding-left: 27.2rem; /* = 24 + (2 * 1.6 padding) */\n\t}\n\n\t.color-palette--overview:first-child {\n\t\tmargin-top: 2.4rem;\n\t}\n\n\t.color {\n\t\tmargin-right: 2.4rem;\n\t}\n\n\t\t.color-palette--base .color {\n\t\t\tmargin-right: 1.35rem;\n\t\t}\n\n\t\t.color-palette--overview.color-palette--base .color--emphasized {\n\t\t\tmargin-right: 1.35rem;\n\t\t\tmargin-left: 0;\n\t\t}\n\n\t.color-palette--overview.color-palette--red:before,\n\t.color-palette--overview.color-palette--red:after,\n\t.color-palette--overview.color-palette--green:before,\n\t.color-palette--overview.color-palette--green:after {\n\t\tcontent: '';\n\t\tdisplay: none;\n\t}\n\n\t.color-palette--overview.color-palette--red:after,\n\t.color-palette--overview.color-palette--green:after,\n\t.color-section .color:nth-child( 3n+4 ) {\n\t\tclear: both;\n\t}\n\n\t/* ... Resources ... */\n\t.resources-table__body .resources-table__cell {\n\t\ttransition: background-color var( --transition-ease-medium );\n\t}\n\n\t\t.resources-table__body:hover .resources-table__cell {\n\t\t\tbackground-color: #f8f9fa;\n\t\t}\n\n\t\t.resources-table__head .resources-table__cell:first-child,\n\t\t.resources-table__body .resources-table__cell:first-child {\n\t\t\tpadding-left: 1.6rem;\n\t\t}\n}\n\n@media ( min-width: 1200px ) {\n\t.content-box {\n\t\twidth: var( --width-site-desktop-wide );\n\t}\n\n\t.col--start {\n\t\twidth: 25.6rem;\n\t}\n\n\t.col--end {\n\t\tmargin-left: -25.6rem;\n\t\tpadding-left: 28.8rem; /* = 25.6 + (2 * 1.6 padding) */\n\t}\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../../node_modules/normalize.css/normalize.css","../partials/fonts.css","../wmui-style-guide.dev.css"],"names":[],"mappings":"AAAA,2EAA2E,CAW3E,KACE,gBAAiB,CACjB,yBAA0B,CAC1B,6BACF,CAiBA,wCAME,aACF,CAOA,GACE,aAAc,CACd,cACF,CAUA,uBAGE,aACF,CAMA,OACE,eACF,CAOA,GACE,2BAAuB,CAAvB,sBAAuB,CACvB,QAAS,CACT,gBACF,CAOA,IACE,+BAAiC,CACjC,aACF,CAUA,EACE,8BAA6B,CAC7B,oCACF,CAOA,YACE,kBAAmB,CACnB,yBAA0B,CAC1B,wCAAiC,CAAjC,qCAAiC,CAAjC,gCACF,CAMA,SAEE,mBAAoB,CASpB,kBARF,CAgBA,cAGE,+BAAiC,CACjC,aACF,CAMA,IACE,iBACF,CAMA,KACE,qBAAsB,CACtB,UACF,CAMA,MACE,aACF,CAOA,QAEE,aAAc,CACd,aAAc,CACd,iBAAkB,CAClB,uBACF,CAEA,IACE,aACF,CAEA,IACE,SACF,CASA,YAEE,oBACF,CAMA,sBACE,YAAa,CACb,QACF,CAMA,IACE,iBACF,CAMA,eACE,eACF,CAUA,sCAKE,sBAAuB,CACvB,cAAe,CACf,gBAAiB,CACjB,QACF,CAOA,aAEE,gBACF,CAOA,cAEE,mBACF,CAQA,qDAIE,yBACF,CAMA,wHAIE,iBAAkB,CAClB,SACF,CAMA,4GAIE,6BACF,CAMA,SACE,0BACF,CASA,OACE,0BAAsB,CAAtB,qBAAsB,CACtB,aAAc,CACd,aAAc,CACd,cAAe,CACf,SAAU,CACV,kBACF,CAOA,SACE,oBAAqB,CACrB,uBACF,CAMA,SACE,aACF,CAOA,6BAEE,0BAAsB,CAAtB,qBAAsB,CACtB,SACF,CAMA,kFAEE,WACF,CAOA,cACE,4BAA6B,CAC7B,mBACF,CAMA,qFAEE,uBACF,CAOA,6BACE,yBAA0B,CAC1B,YACF,CAUA,aAEE,aACF,CAMA,QACE,iBACF,CASA,OACE,oBACF,CAiBA,kBACE,YACF,CC9bA,WACC,mBAAsB,CACtB,+GAC4D,CAC5D,iBAAkB,CAClB,eAAgB,CAChB,iCACD,CAEA,WACC,mBAAsB,CACtB,yGACyD,CACzD,iBAAkB,CAClB,eAAgB,CAChB,iCACD,CCSA,EACC,0BAAsB,CAAtB,qBACD,CAEA,KACC,eACD,CAEA,KACC,wBAA4C,CAC5C,aAA0B,CAC1B,QAAS,CACT,4FAA6C,CAC7C,gBAAiB,CACjB,eACD,CAIA,kBAMC,UAAsC,CACtC,iBAAkB,CAClB,gBAAiB,CACjB,kDAAkG,CAAlG,+CAAkG,CAAlG,0CACD,CAEA,YAIC,eACD,CAEA,gBAEC,yBAAiD,CACjD,gBAAiB,CACjB,eACD,CAEA,GACC,+BAAqG,CACrG,kBAAmB,CACnB,gBACD,CAGA,MACC,iBACD,CAEA,GACC,cACD,CAEA,GACC,gBACD,CAMA,MAHC,gBAMD,CAHA,GAEC,eACD,CAGA,WACC,6BAAiD,CACjD,iBAAkB,CAClB,gBAAiB,CACjB,yBAAiD,CACjD,cAAe,CACf,iBACD,CAEA,gBACC,aAAc,CACd,gBAAkB,CAClB,4FAA6C,CAC7C,gBAAiB,CACjB,iBACD,CAEC,uBACC,YACD,CAED,kBAGC,gEACD,CAEA,GACC,kBAAwC,CACxC,aAAc,CACd,YAAc,CACd,QAAS,CACT,aACD,CAEA,EACC,iBACD,CAEC,qDASC,gBACD,CAEA,aACC,iBACD,CAED,aAEC,wBAAgD,CAChD,UAAsC,CACtC,wBAA4B,CAC5B,mBAAoB,CACpB,gBAAiB,CACjB,oBACD,CAGA,MAEC,cAAgB,CAChB,oBACD,CAEA,YACC,gBACD,CAEC,wBACC,YACD,CAGD,OACC,gBACD,CAEA,IACC,aAAc,CACd,cAAe,CACf,iBACD,CAEA,yBACC,kBAAmB,CACnB,iBACD,CAEA,6BACC,gBACD,CAGA,EACC,UAA6B,CAC7B,oBACD,CAEC,QACC,yBACD,CAEA,SACC,aACD,CAED,SAEC,eACD,CAEA,KACC,wBAAgD,CAChD,oBAAqB,CACrB,mBAAsB,CACtB,gBACD,CAEA,MACC,gBACD,CAEA,QAEC,gBACD,CAIA,UACC,aAAc,CACd,iBAAkB,CAClB,0BAAgC,CAChC,SAAU,CACV,UAAW,CACX,WAAY,CACZ,QAAS,CACT,SAAU,CACV,eACD,CAEC,2DAEC,eAAgB,CAChB,SAAU,CACV,UAAW,CACX,WAAY,CACZ,QAAS,CACT,yBAA0B,CAC1B,gBACD,CAED,8RAYC,WAAY,CACZ,aACD,CAEA,4IAMC,UACD,CAKA,OACC,kBACD,CAEA,6BAEC,aACD,CAEA,kBACC,gBACD,CAEA,4BAEC,aAAiC,CACjC,SACD,CAJA,qCAEC,aAAiC,CACjC,SACD,CAJA,uBAEC,aAAiC,CACjC,SACD,CAJA,wBAEC,aAAiC,CACjC,SACD,CAJA,8BAEC,aAAiC,CACjC,SACD,CAEA,aACC,iBAAkB,CAClB,iBAAkB,CAClB,gBAAiB,CACjB,mBAAoB,CACpB,oBACD,CAIA,QACC,cAAe,CACf,KAAM,CACN,MAAO,CACP,OAAQ,CACR,iBAAkB,CAClB,kBACD,CAEC,aACC,aAAiC,CACjC,YAAa,CACb,aAAc,CACd,4FAA6C,CAC7C,gBAAiB,CACjB,eAAsC,CACtC,mBACD,CAEC,eACC,aAAc,CACd,oBAAqB,CACrB,uBAAwB,CACxB,6BAAiD,CAAjD,0BAAiD,CAAjD,qBACD,CAEA,qBACC,UAAgC,CAChC,oBACD,CAEA,WACC,aACD,CAEA,eACC,eACD,CAGD,eACC,iBAAkB,CAClB,UAAW,CACX,YAAa,CACb,aAAc,CACd,cACD,CAGA,iBACC,aAAc,CACd,aAAc,CACd,6CAA6F,CAA7F,+DAA6F,CAA7F,qCAA6F,CAA7F,0DACD,CAEA,+CAEC,UAAW,CACX,wBAA4C,CAC5C,UAAW,CACX,UAAW,CACX,iBAAkB,CAClB,SAAW,CACX,MACD,CAEA,uBACC,UAAW,CACX,iCAAiD,CAAjD,4BACD,CAEA,2DAEC,qBACD,CAEA,6BACC,8BAAgD,CAAhD,yBACD,CAEA,oBACC,aAAc,CACd,iBAAkB,CAClB,0BAAgC,CAChC,SAAU,CACV,UAAW,CACX,WAAY,CACZ,eACD,CAGA,iBACC,gBAAiB,CACjB,kBACD,CAID,MACC,qBAAgD,CAChD,iBAAkB,CAClB,iBAAkB,CAClB,gBAAiB,CACjB,2CAA6C,CAA7C,sCAA6C,CAC7C,iBACD,CAMA,cAHC,UAOD,CAJA,KAEC,iBAAkB,CAClB,cACD,CAMC,sBACC,SACD,CAGD,WACC,qBAED,CAEA,gDAEC,YACD,CAEA,4BAEC,SACD,CAEA,0BACC,QACD,CAEA,cACC,SAAU,CACV,oBACD,CAEA,iBACC,mBACD,CAEA,aACC,aAA0B,CAC1B,aAAc,CACd,oBAAsB,CACtB,gBAAiB,CACjB,oBAAqB,CACrB,gEAA4I,CAA5I,6DAA4I,CAA5I,wDACD,CAEA,sCAEC,wBAAgD,CAChD,UACD,CAEA,oBACC,wBAAmD,CACnD,UAA6B,CAE7B,sBAA0C,CAA1C,iBAA0C,CAC1C,eAAsC,CACtC,cACD,CAEA,gBACC,iBAAkB,CAClB,iBACD,CAEA,+BACC,kBACD,CAEA,8BACC,QACD,CAEA,6BACC,aAAiC,CACjC,6BAAwE,CACrE,8BAA0E,CAA1E,yBAA0E,CAC7E,mBAAoB,CACpB,gBAAiB,CACjB,mDAAmG,CAAnG,gDAAmG,CAAnG,2CACD,CAEA,kCACC,qBAAgD,CAChD,UAAkC,CAClC,sBAA4C,CAC5C,eACD,CAEA,2CACC,mBACD,CAIA,oBACC,aAAkC,CAClC,kBACD,CAEA,aACC,iBACD,CAEA,iCACC,iBACD,CAEA,eACC,iBAAkB,CAClB,cAAe,CACf,iBAAkB,CAClB,eACD,CAQA,eACC,wBACD,CAEA,uCAEC,aAAkC,CAClC,UAAW,CACX,aAAc,CACd,gBACD,CAEA,iBACC,iBAAmB,CACnB,iBACD,CAEC,uBACC,YACD,CAED,sBACC,WAAY,CACZ,kBACD,CAEC,wBACC,UACD,CAGD,iBACC,iBACD,CAEA,yBACC,wBAA4C,CAC5C,8BAAmD,CAAnD,0BAAmD,CACnD,+BAAoD,CAApD,2BACD,CAEA,+BACC,0BACD,CAEA,kCACC,qBAA+C,CAC/C,aAAc,CACd,sBAAwB,CACxB,sBAAuB,CACvB,kBACD,CAEA,iCAEC,wBACD,CAEA,qCAEC,qBACD,CAEA,UAEC,iBAAkB,CAClB,eACD,CAEC,wBAEC,oBAAqB,CACrB,kBAAoB,CACpB,iBAAmB,CACnB,gBAAiB,CACjB,gBAAiB,CACjB,kBACD,CAED,IACC,aACD,CAEC,WACC,WACD,CAED,MACC,UACD,CAEC,aACC,WACD,CAID,eACC,iBAAkB,CAClB,SACD,CAEA,8BACC,YACD,CAEA,OACC,UAAsC,CACtC,oBAAqB,CACrB,aAAc,CACd,UAAW,CACX,iBAAkB,CAClB,WAAY,CACZ,YAAa,CACb,oBAAqB,CACrB,cAAe,CACf,qBAAgG,CAChG,sBAA0C,CAA1C,iBAA0C,CAC1C,gBACD,CAEC,qCAEC,UACD,CAEA,qCACC,UACD,CAEA,kCACC,gBACD,CAEA,gCACC,YAAa,CACb,aAAc,CACd,gBAAkB,CAClB,mBAAoB,CACpB,oBAAqB,CACrB,yBAAqB,CAArB,oBAAqB,CACrB,cACD,CAEA,4CACC,gBACD,CAEA,4CACC,YAAa,CACb,WAAY,CACZ,YAAa,CACb,yBAAqB,CAArB,oBAAqB,CACrB,gBACD,CAEA,4BACC,oBACD,CAEA,uCACC,+BAAmD,CAAnD,4BAAmD,CAAnD,uBACD,CAEC,6CACC,SACD,CAED,aACC,aAAc,CACd,iBAAkB,CAClB,aAAc,CACd,WAAY,CACZ,gBAAiB,CACjB,eACD,CAEC,sCACC,iBAAkB,CAClB,WAAY,CACZ,SAAU,CACV,kBAAmB,CACnB,gBAAiB,CACjB,aACD,CAEA,oHAIC,YACD,CAED,YACC,wBAAyB,CACzB,aAAc,CACd,SAAU,CACV,4FACD,CAEC,iBACC,SACD,CAEF,4BACC,YACC,kBACD,CAEA,mBACC,UAAW,CACX,kCAAqC,CACrC,oBAAqB,CACrB,YAAa,CACb,aAAc,CACd,0BAA8B,CAC9B,sBAAkB,CAAlB,iBAAkB,CAClB,0BAA2B,CAC3B,WACD,CAEA,4BACC,wBACD,CACD,CAIA,MACC,oBAAqB,CACrB,UAAW,CACX,WAAY,CACZ,cAAgB,CAChB,0BACD,CAEC,iBACC,YAAa,CACb,aAAc,CACd,mBACD,CAEA,oBACC,YAAa,CACb,aAAc,CACd,mBACD,CAUD,uBACC,iBACD,CAEA,6BACC,UAAW,CACX,8DAAiE,CACjE,iBAAkB,CAClB,QAAS,CACT,YAAa,CACb,aAAc,CACd,aACD,CAEA,8CACC,eAAgB,CAChB,gBAAiB,CACjB,iBACD,CAGA,iBACC,aAAc,CACd,UAAW,CACX,iBAAkB,CAClB,wBACD,CAEA,8CAEC,iBAAkB,CAClB,+BACD,CAEA,uBACC,wBACD,CAEC,0BACC,YAAa,CACb,eAAgB,CAChB,gBAAiB,CACjB,gBAAiB,CACjB,eACD,CAED,uBACC,kBAAmB,CACnB,8BACD,CAEC,0DACC,mBACD,CAED,cACC,kBACD,CAGA,QACC,aAA0B,CAC1B,gBAAiB,CACjB,gBACD,CAEA,cACC,SACD,CAEC,0BACC,QACD,CAEA,oBACC,WAAY,CACZ,aAAc,CACd,UACD,CAEA,iBACC,oBAAqB,CACrB,aAAc,CACd,iBACD,CAEA,6BACC,aACD,CAEA,gBACC,iBACD,CAEA,yBACC,eACD,CAED,wBACC,oBAAqB,CACrB,eAAiB,CACjB,wBACD,CAKA,yBACC,QAAS,CACT,SACD,CAGA,2DACC,cACD,CAEA,0CACC,iBACD,CAGA,kEACC,qBACD,CAEA,yCACC,aACD,CAIA,sBACC,oBAAqB,CACrB,aAAkC,CAClC,eAAgB,CAChB,wBAAyB,CACzB,gBAAiB,CACjB,eAAsC,CACtC,kBACD,CAEA,4CACC,eACD,CAEA,sBACC,cACD,CAEA,wBACC,oBAAqB,CACrB,YACD,CAEA,oCACC,aACD,CAEA,4BACK,YAAa,CACb,eACL,CAEA,sBACC,eAAgB,CAChB,kBACD,CAGA,8BACC,wBAA4C,CAC5C,cACD,CAIA,wEAGC,4FACD,CAGA,wFAGC,iCACD,CAKA,yBACC,WACC,iBAAkB,CAClB,WAAY,CACZ,YAAa,CACb,aAAc,CACd,qBAAsB,CACtB,2CAA6C,CAA7C,sCAA6C,CAC7C,SAAU,CACV,mCAA8B,CAA9B,gCAA8B,CAA9B,+BAA8B,CAA9B,2BAA8B,CAC9B,8DAAkI,CAAlI,sDAAkI,CAAlI,uEAAkI,CAAlI,8CAAkI,CAAlI,yFACD,CAEA,sCACC,+BAA0B,CAA1B,4BAA0B,CAA1B,2BAA0B,CAA1B,uBACD,CAEA,aACC,iBAAmB,CACnB,gBACD,CAEA,sBACC,aAAc,CACd,aACD,CAGA,sCACC,aACD,CAGA,sFAIC,aACD,CAEA,uBACC,mBAAoB,CACpB,oBACD,CAEA,oDACC,YACD,CAEA,uBACC,cACD,CAEA,uBACC,iBAAmB,CACnB,oBACD,CACD,CAGA,yBACC,yCAGC,oDAA8C,CAA9C,iDAA8C,CAA9C,4CAA8C,CAC9C,gCAAoD,CAApD,6BAAoD,CAApD,wBACD,CAEA,aACC,kBACD,CAEC,eACC,cACD,CAED,sBACC,YACD,CAEA,aACC,mBAAoB,CACpB,oBACD,CAEA,sBAEC,UACD,CAEA,qCAEC,mBAAoB,CACpB,oBACD,CAEA,+BACC,kBAAmB,CACnB,mBACD,CAEA,sEAEC,UAAW,CACX,eAAgB,CAChB,gBAAiB,CACjB,iBACD,CAEA,kCACC,UACD,CAEA,4HAEC,YACD,CAEA,OACC,WACD,CAEA,4CACC,UACD,CAEA,4BACC,mBACD,CAEA,gEACC,mBAAoB,CACpB,kBACD,CAEA,yBACC,kBACD,CACD,CAGA,yBACC,aACC,mBAAoB,CACpB,oBACD,CAEA,WACC,YAAa,CACb,aACD,CAEC,aACC,mBAAoB,CACpB,oBACD,CAED,qCAEC,mBAAoB,CACpB,oBACD,CAEA,+BACC,kBAAmB,CACnB,mBACD,CAEA,0DACC,mBAAoB,CACpB,oBACD,CAEA,iBACC,iBAAkB,CAClB,UAAW,CACX,mBACD,CAEA,uBACC,eAAgB,CAChB,aAAkC,CAClC,mBAAqB,CACrB,eACD,CAEA,kCACC,UAAW,CACX,SACD,CAEA,OACC,WAAY,CACZ,mBACD,CACD,CAGA,yBACC,iBACC,aAAc,CACd,iBAAkB,CAClB,aAAc,CACd,YAAa,CACb,gBACD,CAEA,sBACC,cAAe,CACf,SAAU,CACV,+BAAmD,CAAnD,4BAAmD,CAAnD,uBACD,CAEA,yBACC,eACD,CAEA,sEAEC,cACD,CAEA,8BACC,UAAW,CACX,WACD,CAEA,4DACC,YAAa,CACb,gBACD,CAEA,gEACC,iBACD,CACD,CAGA,yBACC,IACC,sBAAkB,CAAlB,iBACD,CAEA,aACC,UAAW,CACX,eACD,CAEA,eACC,YACD,CAEA,aACC,UAAW,CACX,aACD,CAEC,4BAEC,mBAAoB,CACpB,oBACD,CAED,sBACC,cAAe,CACf,SACD,CAEA,YACC,aAAc,CACd,SAAU,CACV,6BAAiD,CAAjD,0BAAiD,CAAjD,qBACD,CAEA,UACC,oBAAqB,CACrB,kBACD,CAEA,WACC,SAAU,CACV,UACD,CAEA,6CAEC,aAAc,CACd,cACD,CAEA,yBACC,UAAW,CACX,SACD,CAEA,4CACC,WACD,CAGA,8BACC,UAAW,CACX,YACD,CAEA,yBACC,kBACD,CACD,CAGA,yBACC,aACC,UAAW,CACX,gBACD,CAEA,4BAEC,mBAAoB,CACpB,oBACD,CAEA,YACC,WACD,CAEA,UACC,kBAAmB,CACnB,oBACD,CAEA,qCACC,iBACD,CAEA,OACC,mBACD,CAEC,4BACC,oBACD,CAEA,gEACC,oBAAqB,CACrB,aACD,CAED,8MAIC,UAAW,CACX,YACD,CAEA,4IAGC,UACD,CAGA,8CACC,wCAA4D,CAA5D,qCAA4D,CAA5D,gCACD,CAEC,oDACC,wBACD,CAEA,oHAEC,mBACD,CACF,CAEA,0BACC,aACC,YACD,CAEA,YACC,aACD,CAEA,UACC,oBAAqB,CACrB,oBACD,CACD","file":"wmui-style-guide.min.css","sourcesContent":["/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in\n * IE on Windows Phone and in iOS.\n */\n\nhtml {\n line-height: 1.15; /* 1 */\n -ms-text-size-adjust: 100%; /* 2 */\n -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n\n/**\n * Remove the margin in all browsers (opinionated).\n */\n\nbody {\n margin: 0;\n}\n\n/**\n * Add the correct display in IE 9-.\n */\n\narticle,\naside,\nfooter,\nheader,\nnav,\nsection {\n display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n * 1. Add the correct display in IE.\n */\n\nfigcaption,\nfigure,\nmain { /* 1 */\n display: block;\n}\n\n/**\n * Add the correct margin in IE 8.\n */\n\nfigure {\n margin: 1em 40px;\n}\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\n\nhr {\n box-sizing: content-box; /* 1 */\n height: 0; /* 1 */\n overflow: visible; /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\npre {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n ========================================================================== */\n\n/**\n * 1. Remove the gray background on active links in IE 10.\n * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.\n */\n\na {\n background-color: transparent; /* 1 */\n -webkit-text-decoration-skip: objects; /* 2 */\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57- and Firefox 39-.\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\n\nabbr[title] {\n border-bottom: none; /* 1 */\n text-decoration: underline; /* 2 */\n text-decoration: underline dotted; /* 2 */\n}\n\n/**\n * Prevent the duplicate application of `bolder` by the next rule in Safari 6.\n */\n\nb,\nstrong {\n font-weight: inherit;\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/**\n * Add the correct font style in Android 4.3-.\n */\n\ndfn {\n font-style: italic;\n}\n\n/**\n * Add the correct background and color in IE 9-.\n */\n\nmark {\n background-color: #ff0;\n color: #000;\n}\n\n/**\n * Add the correct font size in all browsers.\n */\n\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* Embedded content\n ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n */\n\naudio,\nvideo {\n display: inline-block;\n}\n\n/**\n * Add the correct display in iOS 4-7.\n */\n\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\n/**\n * Remove the border on images inside links in IE 10-.\n */\n\nimg {\n border-style: none;\n}\n\n/**\n * Hide the overflow in IE.\n */\n\nsvg:not(:root) {\n overflow: hidden;\n}\n\n/* Forms\n ========================================================================== */\n\n/**\n * 1. Change the font styles in all browsers (opinionated).\n * 2. Remove the margin in Firefox and Safari.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: sans-serif; /* 1 */\n font-size: 100%; /* 1 */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\n\nbutton,\ninput { /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\n\nbutton,\nselect { /* 1 */\n text-transform: none;\n}\n\n/**\n * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n * controls in Android 4.\n * 2. Correct the inability to style clickable types in iOS and Safari.\n */\n\nbutton,\nhtml [type=\"button\"], /* 1 */\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button; /* 2 */\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\n\nlegend {\n box-sizing: border-box; /* 1 */\n color: inherit; /* 2 */\n display: table; /* 1 */\n max-width: 100%; /* 1 */\n padding: 0; /* 3 */\n white-space: normal; /* 1 */\n}\n\n/**\n * 1. Add the correct display in IE 9-.\n * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\n\nprogress {\n display: inline-block; /* 1 */\n vertical-align: baseline; /* 2 */\n}\n\n/**\n * Remove the default vertical scrollbar in IE.\n */\n\ntextarea {\n overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10-.\n * 2. Remove the padding in IE 10-.\n */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box; /* 1 */\n padding: 0; /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n[type=\"search\"] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/**\n * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.\n */\n\n[type=\"search\"]::-webkit-search-cancel-button,\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/* Interactive\n ========================================================================== */\n\n/*\n * Add the correct display in IE 9-.\n * 1. Add the correct display in Edge, IE, and Firefox.\n */\n\ndetails, /* 1 */\nmenu {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\n\nsummary {\n display: list-item;\n}\n\n/* Scripting\n ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n */\n\ncanvas {\n display: inline-block;\n}\n\n/**\n * Add the correct display in IE.\n */\n\ntemplate {\n display: none;\n}\n\n/* Hidden\n ========================================================================== */\n\n/**\n * Add the correct display in IE 10-.\n */\n\n[hidden] {\n display: none;\n}\n","@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../../fonts/Charter_regular.woff2' ) format( 'woff2' ),\n\t\t url( '../../fonts/Charter_regular.woff' ) format( 'woff' );\n\tfont-style: normal;\n\tfont-weight: 400;\n\ttext-rendering: optimizeLegibility; /* Attention: Android Stock Browser <= 4.3 doesn't show web font with this setting, but it also doesn't support WOFF :) */\n}\n\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../../fonts/Charter_bold.woff2' ) format( 'woff2' ),\n\t\t url( '../../fonts/Charter_bold.woff' ) format( 'woff' );\n\tfont-style: normal;\n\tfont-weight: 700;\n\ttext-rendering: optimizeLegibility;\n}\n\n/*\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../fonts/Charter_italic.woff2' ) format( 'woff2' ),\n\t\t url( '../fonts/Charter_italic.woff' ) format( 'woff' );\n\tfont-style: italic;\n\tfont-weight: 400;\n\ttext-rendering: optimizeLegibility;\n}\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../fonts/Charter_bold-italic.woff2' ) format( 'woff2' ),\n\t\t url( '../fonts/Charter_bold-italic.woff' ) format( 'woff' );\n\tfont-style: italic;\n\tfont-weight: 700;\n\ttext-rendering: optimizeLegibility;\n}\n*/\n","/* ::: Vendor Imports ::: */\n/* Load files from 'node_modules' folders with postCSS-import plugin.\n * Modules specified in package.json file. */\n@import 'wikimedia-ui-base/wikimedia-ui-base.css';\n@import 'normalize.css';\n\n/* ::: Local Imports ::: */\n@import 'partials/fonts.css';\n\n:root {\n\t--background-color-hr: var( --wmui-color-base80 );\n\t--width-site: 960px;\n\t--width-site-desktop-wide: 1140px;\n\t--border-color-heading: var( --wmui-color-base80 );\n\t--border-width-heading: 3px;\n\t--outline-color-base--focus: var( --color-primary--focus );\n\t/* HACK; Add Georgia to serif fallback as long as WikimediaUI Base isn't updated. */\n\t--font-family-serif--fallback: Georgia, serif; /* stylelint-disable-line value-keyword-case */\n\t--font-weight-base: 400;\n\t/* Setting bold to `600` as our stack works better with it, only Lato is on the edge.\n\t Helvetica and Arial fallback gracefully to `700`, see T246791. */\n\t--font-weight-bold: 600;\n\t--font-weight-ultralight: 100;\n}\n\n* {\n\tbox-sizing: border-box;\n}\n\nhtml {\n\tfont-size: 62.5%;\n}\n\nbody {\n\tbackground-color: var( --wmui-color-base80 ); /* FIXME: var; */\n\tcolor: var( --color-base );\n\tmargin: 0;\n\tfont-family: var( --font-family-system-sans );\n\tfont-size: 1.6rem;\n\tline-height: var( --line-height-base );\n}\n\n/* ::: Text Block-Level Elements ::: */\n/* ... Headings ... */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n\tcolor: var( --color-base--emphasized );\n\tmargin: 3.2rem 0 0;\n\tline-height: 1.25;\n\ttransition: font-size var( --transition-ease-medium ), font-weight var( --transition-ease-medium );\n}\n\nh2,\nh3,\nh4,\nh5 {\n\tfont-weight: var( --font-weight-bold );\n}\n\nh1,\n.page__title {\n\tfont-family: var( --font-family-serif--fallback ); /* Fallback */\n\tfont-size: 3.2rem;\n\tfont-weight: var( --font-weight-base );\n}\n\nh2 {\n\tborder-bottom: var( --border-width-heading ) var( --border-style-base ) var( --border-color-heading );\n\tpadding-bottom: 2px;\n\tfont-size: 2.4rem;\n}\n\n/* Reduce top margin when introductory headlines are following each other. */\nh2 + h3 {\n\tmargin-top: 1.6rem;\n}\n\nh3 {\n\tfont-size: 2rem;\n}\n\nh4 {\n\tfont-size: 1.8rem;\n}\n\nh5 {\n\tfont-size: 1.6rem;\n}\n\nh6 {\n\tfont-size: 1.6rem;\n\tfont-weight: normal;\n}\n\n/* ... Other Block-Level Elements ... */\nblockquote {\n\tborder-left: 3px solid var( --wmui-color-base70 ); /* FIXME: var */\n\tmargin: 1.6rem 0 0;\n\tpadding: 0 3.2rem;\n\tfont-family: var( --font-family-serif--fallback ); /* Fallback */\n\tfont-size: 2rem;\n\tfont-style: italic;\n}\n\nblockquote cite {\n\tdisplay: block;\n\tmargin-top: 0.8rem;\n\tfont-family: var( --font-family-system-sans );\n\tfont-size: 1.4rem;\n\tfont-style: normal;\n}\n\n\tblockquote cite:before {\n\t\tcontent: '— ';\n\t}\n\ncode,\npre,\n.mw-code {\n\tfont-family: var( --font-family-monospace );\n}\n\nhr {\n\tbackground: var( --background-color-hr );\n\tdisplay: block;\n\theight: 0.8rem;\n\tborder: 0;\n\tmargin: 8rem 0;\n}\n\np {\n\tmargin: 3.2rem 0 0;\n}\n\n\th1 + p,\n\th2 + p,\n\th3 + p,\n\th4 + p,\n\th5 + p,\n\th6 + p,\n\tp + p,\n\tul + p,\n\tp:first-child {\n\t\tmargin: 0.8rem 0 0;\n\t}\n\n\tblockquote + p {\n\t\tmargin-top: 1.6rem;\n\t}\n\npre,\n.mw-code {\n\tbackground-color: var( --background-color-code );\n\tcolor: var( --color-base--emphasized );\n\tborder: var( --border-base );\n\tpadding: 1.2rem 2rem;\n\tfont-size: 1.4rem;\n\twhite-space: pre-wrap;\n}\n\n/* ... Lists ... */\nol,\nul {\n\tmargin: 0.8rem 0;\n\tpadding: 0 0 0 1.8rem; /* Can't remain within our 8px based sizing due to browser defaults */\n}\n\n.content li {\n\tmargin-top: 0.4rem;\n}\n\n\t.content li:first-child {\n\t\tmargin-top: 0;\n\t}\n\n/* ... Images & Figures ... */\nfigure {\n\tmargin: 0.8rem 0 0;\n}\n\nimg {\n\tdisplay: block;\n\tmax-width: 100%;\n\tmargin: 1.6rem 0 0;\n}\n\n.page--components figure {\n\tmargin-left: 6.4rem;\n\tpadding-top: 0.8rem;\n}\n\n.page--components figure img {\n\tmargin-top: 0.8rem;\n}\n\n/* ::: Inline Elements ::: */\na {\n\tcolor: var( --color-primary );\n\ttext-decoration: none;\n}\n\n\ta:hover {\n\t\ttext-decoration: underline;\n\t}\n\n\ta:active {\n\t\tcolor: var( --color-primary--active );\n\t}\n\nb,\nstrong {\n\tfont-weight: var( --font-weight-bold );\n}\n\ncode {\n\tbackground-color: var( --background-color-code );\n\tdisplay: inline-block;\n\tpadding: 0.2rem 0.4rem;\n\tfont-size: 1.4rem;\n}\n\nsmall {\n\tfont-size: 1.3rem;\n}\n\nsub,\nsup {\n\tfont-size: 1.1rem;\n}\n\n/* ::: General Classes ::: */\n/* ::: Text for Screen Readers only ::: */\n.is-aural {\n\tdisplay: block;\n\tposition: absolute;\n\tclip: rect( 1px, 1px, 1px, 1px );\n\twidth: 1px;\n\theight: 1px;\n\tmargin: -1px;\n\tborder: 0;\n\tpadding: 0;\n\toverflow: hidden;\n}\n\n\t.is-aural.is-focusable:active,\n\t.is-aural.is-focusable:focus {\n\t\tposition: static;\n\t\tclip: auto;\n\t\twidth: auto;\n\t\theight: auto;\n\t\tmargin: 0;\n\t\ttext-decoration: underline;\n\t\toverflow: visible;\n\t}\n\n.clearfix:before,\n.clearfix:after,\n.page:before,\n.page:after,\n.content-box:before,\n.content-box:after,\n.color-palette:before,\n.color-palette:after,\n.figures-do-dont:before,\n.figures-do-dont:after,\n.content__illustration-style .figure--full:before,\n.content__illustration-style .figure--full:after {\n\tcontent: ' ';\n\tdisplay: table;\n}\n\n.clearfix:after,\n.page:after,\n.content-box:after,\n.color-palette:after,\n.figures-do-dont:after,\n.content__illustration-style .figure--full:after {\n\tclear: both;\n}\n\n/* ::: Text-formatting ::: */\n/* Support Blink based browsers. */\n/* They use `outline` for focus styles, we're only amending the color here, see T245887. */\n:focus {\n\toutline-color: var( --outline-color-base--focus );\n}\n\n.is-complementary,\n.is-subtle {\n\tcolor: var( --color-base--subtle );\n}\n\n.is-complementary {\n\tfont-size: 1.4rem;\n}\n\n::placeholder,\n.is-placeholder {\n\tcolor: var( --color-placeholder );\n\topacity: 1;\n}\n\n.content-box {\n\tposition: relative;\n\tmargin-right: auto;\n\tmargin-left: auto;\n\tpadding-left: 1.6rem; /* FIXME: var( --grid-padding ); */\n\tpadding-right: 1.6rem;\n}\n\n\n/* ::: Structure ::: */\n.header {\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tmin-height: 6.4rem;\n\tline-height: 6.4rem;\n}\n\n\t.site__title {\n\t\tcolor: var( --wmui-color-base10 );\n\t\tmargin-top: 0;\n\t\theight: 6.4rem;\n\t\tfont-family: var( --font-family-system-sans );\n\t\tfont-size: 1.6rem;\n\t\tfont-weight: var( --font-weight-base );\n\t\tletter-spacing: 0.5px;\n\t}\n\n\t\t.site__title a {\n\t\t\tcolor: inherit;\n\t\t\tdisplay: inline-block;\n\t\t\tpadding: 1.2rem 3.2rem 0;\n\t\t\ttransition: color var( --transition-ease-medium );\n\t\t}\n\n\t\t.site__title a:hover {\n\t\t\tcolor: var( --wmui-color-base0 ); /* --color-base-emphasized */\n\t\t\ttext-decoration: none;\n\t\t}\n\n\t\t.site__org {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\t.site__project {\n\t\t\tfont-weight: var( --font-weight-bold );\n\t\t}\n\n\t/* ... Navigation button ... */\n\t.btn--nav-main {\n\t\tposition: absolute;\n\t\ttop: 1.2rem;\n\t\twidth: 4.2rem;\n\t\theight: 4.2rem;\n\t\tcursor: pointer;\n\t}\n\n\t/* Fake hamburger icon */\n\t.btn--nav-main i {\n\t\tdisplay: block;\n\t\theight: 4.2rem;\n\t\ttransition: color var( --transition-ease-medium ), box-shadow var( --transition-ease-medium );\n\t}\n\n\t.btn--nav-main i:before,\n\t.btn--nav-main i:after {\n\t\tcontent: '';\n\t\tbackground-color: var( --wmui-color-base20 );\n\t\twidth: 2rem;\n\t\theight: 2px;\n\t\tposition: absolute;\n\t\ttop: 0.4rem;\n\t\tleft: 0;\n\t}\n\n\t.btn--nav-main i:after {\n\t\ttop: 1.1rem;\n\t\tbox-shadow: 0 0.7rem 0 var( --wmui-color-base20 );\n\t}\n\n\t.btn--nav-main i:hover:before,\n\t.btn--nav-main i:hover:after {\n\t\tbackground-color: var( --wmui-color-base0 ); /* --color-base-emphasized */\n\t}\n\n\t.btn--nav-main i:hover:after {\n\t\tbox-shadow: 0 0.7rem 0 var( --wmui-color-base0 );\n\t}\n\n\t.btn--nav-main span {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tclip: rect( 1px, 1px, 1px, 1px );\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\tmargin: -1px;\n\t\toverflow: hidden;\n\t}\n\n\t/* ... GitHub Contribute Link ... */\n\t.lnk--contribute {\n\t\tfont-size: 1.4rem;\n\t\tline-height: 1.4rem; /* Derive slightly from template for cross-browser compliance */\n\t}\n\n\n/* ... Content ... */\n.page {\n\tbackground-color: var( --background-color-base );\n\tposition: relative;\n\tmargin-top: 6.4rem;\n\tpadding: 6.4rem 0;\n\tbox-shadow: 0 1px 4px 0 rgba( 0, 0, 0, 0.25 );\n\toverflow-y: hidden;\n}\n\n.content {\n\tfloat: left;\n}\n\n.col {\n\tfloat: left;\n\tposition: relative;\n\tmin-height: 1px;\n}\n\n\t.col--start {\n\t\tpadding: 0;\n\t}\n\n\t.col--end {\n\t\tpadding: 0;\n\t}\n\n/* ... Main Navigation ... */\n.nav--main {\n\tbackground-color: var( --background-color-base ); /* needed for menu appearance on mobile below */\n\t/* margin-top: 6.4rem; */\n}\n\n.nav--main li:not( .is-on ) ul,\n.trigger--nav-main {\n\tdisplay: none;\n}\n\n.nav--main ol,\n.nav--main ul {\n\tpadding: 0;\n}\n\n.nav--main ol:first-child {\n\tmargin: 0;\n}\n\n.nav--main li {\n\tpadding: 0;\n\tlist-style: none none;\n}\n\n.nav--main > ol > li {\n\tmargin-bottom: 0.4rem;\n}\n\n.nav--main a {\n\tcolor: var( --color-base );\n\tdisplay: block;\n\tpadding: 0.8rem 1.2rem;\n\tfont-size: 1.6rem;\n\ttext-decoration: none;\n\ttransition: background-color var( --transition-ease-medium ), color var( --transition-ease-medium ), padding var( --transition-ease-medium );\n}\n\n.nav--main a:hover,\n.nav--main a:focus {\n\tbackground-color: var( --background-color-code );\n\tcolor: var( --color-base--emphasized );\n}\n\n.nav--main .is-on > a {\n\tbackground-color: var( --background-color-primary );\n\tcolor: var( --color-primary );\n\t/* border-left: 2px solid var( --color-primary ); */\n\tborder-radius: var( --border-radius-base );\n\tfont-weight: var( --font-weight-bold );\n\tcursor: default;\n}\n\n.nav__sub-items {\n\tmargin-top: 1.2rem;\n\tmargin-bottom: 1em; /* FIXME: replace with rem and mt */\n}\n\n.nav__sub-items > .nav__sub-item {\n\tmargin-left: 3.6rem;\n}\n\n.nav--main .nav__sub-items ul {\n\tmargin: 0;\n}\n\n.nav--main .nav__sub-items a { /* stylelint-disable-line no-descending-specificity */\n\tcolor: var( --wmui-color-base20 );\n\tborder-left: var( --border-width-base ) solid var( --wmui-color-base80 );\n border-radius: 0 var( --border-radius-base ) var( --border-radius-base ) 0;\n\tpadding-left: 1.6rem;\n\tfont-size: 1.4rem;\n\ttransition: background-color var( --transition-ease-medium ), color var( --transition-ease-medium );\n}\n\n.nav--main .nav__sub-item.is-on > a {\n\tbackground-color: var( --background-color-base );\n\tcolor: var( --color-base--active );\n\tborder-left-color: var( --wmui-color-base0 );\n\tfont-weight: var( --font-weight-bold );\n}\n\n.nav--main .nav__sub-item .nav__sub-item a {\n\tpadding-left: 3.6rem;\n}\n\n\n/* ::: Content ::: */\n.page__parent-title {\n\tcolor: var( --color-base--subtle );\n\tmargin-top: -2.8rem;\n}\n\n.page__title {\n\tmargin-top: -0.8rem;\n}\n\n.page__parent-title + .page__title {\n\tmargin-top: -0.4rem;\n}\n\n.page__tagline {\n\tmargin-top: 1.2rem;\n\tfont-size: 2rem;\n\tfont-style: italic;\n\tfont-weight: 100;\n}\n\n/* Remove, doesn't provide good styling\n.page__lead {\n\tfont-size: 1.8rem;\n}\n*/\n\n.figures--full {\n\tbackground-color: var( --wmui-color-base90 );\n}\n\n.figure__caption,\n.heading__description {\n\tcolor: var( --color-base--subtle );\n\tclear: both;\n\tdisplay: block;\n\tfont-size: 1.3rem;\n}\n\n.figure__caption {\n\tpadding-top: 0.8rem; /* `padding-top` due to usage with floated images in figure above */\n\tfont-style: italic;\n}\n\n\t.figure__caption:empty {\n\t\tdisplay: none;\n\t}\n\n.heading__description {\n\tfloat: right;\n\tmargin-top: -1.9rem;\n}\n\n\t.heading__description + * {\n\t\tclear: both;\n\t}\n\n/* ... “Do” & “Don't” figures ... */\n.figures-do-dont {\n\tmargin-top: 1.6rem;\n}\n\n.figures-do-dont .figure {\n\tbackground-color: var( --wmui-color-base80 );\n\tborder-top-left-radius: var( --border-radius-base );\n\tborder-top-right-radius: var( --border-radius-base );\n}\n\n.figures-do-dont .figure--dont {\n\tborder-left: var( --border-width-base ) solid var( --color-base--inverted );\n}\n\n.figures-do-dont .figure__caption {\n\tbackground-color: var( --color-base--inverted );\n\tdisplay: block;\n\tborder-top-width: 0.8rem;\n\tborder-top-style: solid;\n\tpadding-right: 0.8em;\n}\n\n.figure--do .figure__caption,\n.do {\n\tborder-top-color: var( --color-secondary );\n}\n\n.figure--dont .figure__caption,\n.dont {\n\tborder-top-color: var( --color-destructive );\n}\n\n.do,\n.dont {\n\tfont-style: normal;\n\tfont-weight: var( --font-weight-bold );\n}\n\n\t.do:before,\n\t.dont:before {\n\t\tdisplay: inline-block;\n\t\tmargin-right: 0.4rem;\n\t\tpadding-top: 0.4rem;\n\t\tfont-size: 2.1rem;\n\t\tline-height: 1rem;\n\t\tvertical-align: top;\n\t}\n\n.do {\n\tcolor: var( --color-success );\n}\n\n\t.do:before {\n\t\tcontent: '✓';\n\t}\n\n.dont {\n\tcolor: var( --color-destructive );\n}\n\n\t.dont:before {\n\t\tcontent: '×';\n\t}\n\n\n/* ... Color ... */\n.color-palette {\n\tmargin: 2.4rem 0 0;\n\tpadding: 0;\n}\n\n.color-palette + .color-palette {\n\tmargin-top: 0;\n}\n\n.color {\n\tcolor: var( --color-base--emphasized );\n\tlist-style: none none;\n\tdisplay: block;\n\tfloat: left;\n\tposition: relative;\n\twidth: 61.8%;\n\theight: 16rem;\n\tmargin-bottom: 3.2rem;\n\tpadding: 1.2rem;\n\tborder: var( --border-width-base ) var( --border-style-base ) var( --border-color-inset--focus );\n\tborder-radius: var( --border-radius-base );\n\tfont-size: 1.4rem;\n}\n\n\t.color--dark,\n\t.color__wcag-level span {\n\t\tcolor: var( --color-base--inverted );\n\t}\n\n\t.color--dark .color__wcag-level span {\n\t\tcolor: var( --color-base--emphasized );\n\t}\n\n\t.color-palette .color:first-child {\n\t\tmargin-top: 0.4rem;\n\t}\n\n\t.color-palette--overview .color {\n\t\twidth: 6.4rem;\n\t\theight: 6.2rem;\n\t\tmargin-top: 0.8rem;\n\t\tmargin-right: 1.2rem;\n\t\tmargin-bottom: 2.4rem;\n\t\tborder-radius: 3.2rem;\n\t\tcursor: default;\n\t}\n\n\t.color-palette--overview .color:first-child {\n\t\tmargin-top: 0.8rem;\n\t}\n\n\t.color-palette--overview .color--emphasized {\n\t\twidth: 7.2rem;\n\t\theight: 7rem;\n\t\tmargin-top: 0;\n\t\tborder-radius: 7.2rem;\n\t\tpadding-top: 2rem;\n\t}\n\n\t.color-palette--base .color {\n\t\tmargin-right: 1.35rem;\n\t}\n\n\t.color-section .color .color-code--hsb {\n\t\ttransition: opacity var( --transition-ease-medium );\n\t}\n\n\t\t.color-section .color:hover .color-code--hsb {\n\t\t\topacity: 1;\n\t\t}\n\n\t.color__name {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tbottom: 1.2rem;\n\t\tleft: 1.2rem;\n\t\tfont-size: 3.2rem;\n\t\tfont-weight: var( --font-weight-ultralight );\n\t}\n\n\t\t.color-palette--overview .color__name {\n\t\t\tposition: relative;\n\t\t\tbottom: auto;\n\t\t\tleft: auto;\n\t\t\tpadding-top: 1.2rem;\n\t\t\tfont-size: 2.4rem;\n\t\t\tline-height: 1;\n\t\t}\n\n\t\t.color__type,\n\t\t.color-code.color-code--rgb,\n\t\t.color-palette--overview .color__name,\n\t\t.color-palette--overview .color-code {\n\t\t\tdisplay: none;\n\t\t}\n\n\t.color-code {\n\t\tbackground-color: inherit;\n\t\tdisplay: block;\n\t\tpadding: 0;\n\t\tfont-family: var( --font-family-system-sans );\n\t}\n\n\t\t.color-code--hsb {\n\t\t\topacity: 0;\n\t\t}\n\n@supports ( --css: variables ) {\n\t.color-hint {\n\t\twhite-space: nowrap;\n\t}\n\n\t.color-hint:before {\n\t\tcontent: '';\n\t\tbackground-color: var( --color-hint );\n\t\tdisplay: inline-block;\n\t\twidth: 1.2rem;\n\t\theight: 1.2rem;\n\t\tmargin: 0 0.4rem 0.3rem 0.2rem;\n\t\tborder-radius: 50%;\n\t\tvertical-align: text-bottom;\n\t\tcursor: help;\n\t}\n\n\t.color-hint--base100:before {\n\t\tborder: var( --border-base );\n\t}\n}\n\n\n/* ... Icon ... */\n.icon {\n\tdisplay: inline-block;\n\twidth: 2rem;\n\theight: 2rem;\n\tmargin: 0 0.2rem;\n\tvertical-align: text-bottom;\n}\n\n\t.icon--indicator {\n\t\twidth: 1.2rem;\n\t\theight: 1.2rem;\n\t\tmargin-bottom: 0.2rem;\n\t}\n\n\t.icon--intermediate {\n\t\twidth: 1.6rem;\n\t\theight: 1.6rem;\n\t\tmargin-bottom: 0.2rem;\n\t}\n\n\n/* ... Components ... */\n/*\n.page--components h2 {\n\tborder-bottom: 0;\n\tpadding-bottom: 0;\n}\n*/\n.components__designing {\n\tposition: relative;\n}\n\n.components__designing:after {\n\tcontent: '';\n\tbackground: url( ../../img/components/legend_16-8.svg ) no-repeat;\n\tposition: absolute;\n\tbottom: 0;\n\tright: 6.4rem;\n\twidth: 13.2rem;\n\theight: 6.4rem;\n}\n\n.page--components-messages .components__intro {\n\tmax-width: 700px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n\n/* ... Resources ... */\n.resources-table {\n\tdisplay: table;\n\twidth: 100%;\n\tmargin-top: 2.4rem;\n\tborder-collapse: collapse;\n}\n\n.resources-table__head,\n.resources-table__body {\n\tdisplay: table-row;\n\tborder-bottom: 1px solid #a2a9b1;\n}\n\n.resources-table__head {\n\tbackground-color: #eaecf0;\n}\n\n\t.resources-table__head h2 {\n\t\tmargin-top: 0;\n\t\tborder-bottom: 0;\n\t\tpadding-bottom: 0;\n\t\tfont-size: 2.1rem;\n\t\tfont-weight: var( --font-weight-base );\n\t}\n\n.resources-table__cell {\n\tdisplay: table-cell;\n\tpadding: 1.6rem 1.6rem 1.6rem 0;\n}\n\n\t.resources-table__head .resources-table__cell:first-child {\n\t\tpadding-left: 1.6rem;\n\t}\n\n.lnk-resource {\n\twhite-space: nowrap;\n}\n\n/* ::: Footer ::: */\n.footer {\n\tcolor: var( --color-base );\n\tpadding: 2.4rem 0;\n\tfont-size: 1.3rem;\n}\n\n.footer__list {\n\tpadding: 0;\n}\n\n\t.footer__list:first-child {\n\t\tmargin: 0;\n\t}\n\n\t.footer__list:after {\n\t\tcontent: ' ';\n\t\tdisplay: block;\n\t\tclear: both;\n\t}\n\n\t.footer__list li {\n\t\tlist-style: none none;\n\t\tdisplay: block;\n\t\tpadding: 0.8rem 0 0;\n\t}\n\n\t.footer__list li:first-child {\n\t\tpadding-top: 0;\n\t}\n\n\t.footer__list + p {\n\t\tmargin-top: 1.2rem;\n\t}\n\n\t.footer__list--connect a {\n\t\tfont-weight: var( --font-weight-bold );\n\t}\n\n.lnk--wikimedia-project {\n\tdisplay: inline-block;\n\tpadding: 0.4rem 0;\n\ttext-transform: uppercase;\n}\n\n\n/* ::: Page-specific Styles ::: */\n/* ... Homepage ... */\n.page--home .page__title {\n\tborder: 0;\n\tpadding: 0;\n}\n\n/* ... “Design principles – Accessibility” ... */\n.page--design-principles-accessibility .nav--main .is-on > a {\n\tcursor: pointer;\n}\n\n.page--design-principles-accessibility h3 {\n\tpadding-right: 15%;\n}\n\n/* ... “Typography” ... */\n.page--visual-style-typography .figures-do-dont .figure__contents {\n\tpadding: 4.2rem 3.6rem;\n}\n\n.figures-do-dont--contrast .figure--dont {\n\tcolor: var( --wmui-color-base50 );\n}\n\n/* ... Typography Styles ... */\n\n.typography-styles dt {\n\tdisplay: inline-block;\n\tcolor: var( --color-base--subtle );\n\tmin-width: 10rem;\n\tmargin: 0 0 3.2rem 1.6rem; /* Need to rely on `margin-bottom` here for vertical alignment */\n\tfont-size: 1.3rem;\n\tfont-weight: var( --font-weight-bold );\n\tvertical-align: top;\n}\n\n.typography-styles .typography-styles__code {\n\tmargin-bottom: 0;\n}\n\n.typography-styles dd {\n\tdisplay: inline;\n}\n\n.typography-styles dd > * {\n\tdisplay: inline-block;\n\tmargin-top: 0; /* Remove `margin` from elements like paragraphs and list elements */\n}\n\n.typography-styles .figure__caption {\n\tpadding-top: 0; /* Remove `padding` from elements like figure caption */\n}\n\n.typography-styles dd:after {\n content: '\\A';\n white-space: pre;\n}\n\n.typography-styles + hr {\n\tmargin-top: 4rem;\n\tmargin-bottom: 4rem;\n}\n\n/* ... “Icons” ... */\n.page--visual-style-icons img { /* FIXME: generalize image styles */\n\tbackground-color: var( --wmui-color-base80 ); /* FIXME: var; */\n\tpadding: 2.4rem;\n}\n\n\n/* ::: Dynamic content ::: */\n.fonts-loaded cite,\n.fonts-loaded .site__title,\n.fonts-loaded .color-code {\n\tfont-family: var( --font-family-system-sans );\n}\n\n/* ::: Text Block-Level Elements ::: */\n.fonts-loaded .page__title,\n.fonts-loaded blockquote,\n.fonts-loaded .typography-styles h1 {\n\tfont-family: 'Charter', Georgia, serif; /* stylelint-disable-line font-family-name-quotes */\n}\n\n\n/* ::: Media Queries ::: */\n/* ... Smartphone only ... */\n@media ( max-width: 767px ) {\n\t.nav--main {\n\t\tposition: absolute;\n\t\ttop: -3.2rem;\n\t\tleft: -1.6rem;\n\t\tright: -1.6rem;\n\t\tpadding-bottom: 1.6rem;\n\t\tbox-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 ); /* FIXME: Update wmui-base */\n\t\tz-index: 1;\n\t\ttransform: translateY( -200% );\n\t\ttransition: left var( --transition-ease-medium ), right var( --transition-ease-medium ), transform var( --transition-ease-medium );\n\t}\n\n\t.trigger--nav-main:checked + .nav--main {\n\t\ttransform: translateY( 0 );\n\t}\n\n\t.page__title {\n\t\tmargin-top: -0.4rem;\n\t\tfont-size: 2.8rem;\n\t}\n\n\t.typography-styles dt {\n\t\tdisplay: block;\n\t\tmargin-left: 0;\n\t}\n\n\t/* ... Components ... */\n\t.page--components .components__states {\n\t\tmargin-left: 0;\n\t}\n\n\t/* ... Resources ... */\n\t.resources-table,\n\t.resources-table__head,\n\t.resources-table__body,\n\t.resources-table__cell {\n\t\tdisplay: block;\n\t}\n\n\t.resources-table__head {\n\t\tmargin-left: -1.6rem;\n\t\tmargin-right: -1.6rem;\n\t}\n\n\t.resources-table__head .resources-table__cell:empty {\n\t\tdisplay: none;\n\t}\n\n\t.resources-table__body {\n\t\tpadding-left: 0;\n\t}\n\n\t.resources-table__cell {\n\t\tpadding-top: 0.8rem;\n\t\tpadding-bottom: 0.8rem;\n\t}\n}\n\n/* ... Smartphone portrait ... */\n@media ( min-width: 240px ) {\n\t.content-box,\n\t.site__title a,\n\t.nav--main a {\n\t\ttransition-property: background-color, padding;\n\t\ttransition-duration: var( --transition-ease-medium );\n\t}\n\n\t.site__title {\n\t\tmargin-left: 4.2rem;\n\t}\n\n\t\t.site__title a {\n\t\t\tpadding-left: 0;\n\t\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: none;\n\t}\n\n\t.nav--main a {\n\t\tpadding-left: 1.6rem;\n\t\tpadding-right: 1.6rem;\n\t}\n\n\t.col--start,\n\t.col--end {\n\t\twidth: 100%;\n\t}\n\n\t.figure--full,\n\t.resources-table__head {\n\t\tmargin-left: -1.6rem;\n\t\tmargin-right: -1.6rem;\n\t}\n\n\t.figure--full .figure__caption {\n\t\tmargin-left: 1.6rem;\n\t\tmargin-right: 1.6rem;\n\t}\n\n\t.figure--this-is-for-everyone img,\n\t.figure--trustworthy-yet-joyful img {\n\t\twidth: 100%;\n\t\tmax-width: 568px;\n\t\tmargin-left: auto;\n\t\tmargin-right: auto;\n\t}\n\n\t.figure--illustrations-header img {\n\t\twidth: 100%;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header,\n\t.figure--illustrations-header + .figure--illustrations-header img {\n\t\tmargin-top: 0;\n\t}\n\n\t.color {\n\t\twidth: 61.8%;\n\t}\n\n\t.color-palette--base .color:nth-child( 3n+4 ) {\n\t\tclear: both;\n\t}\n\n\t.color-palette--base .color {\n\t\tmargin-right: 1.6rem;\n\t}\n\n\t.color-palette--overview.color-palette--base .color--emphasized {\n\t\tmargin-right: 1.1rem;\n\t\tmargin-left: -0.2rem;\n\t}\n\n\t.page--components figure {\n\t\tmargin-left: 4.2rem;\n\t}\n}\n\n/* ... Smartphone+ portrait ... */\n@media ( min-width: 414px ) {\n\t.content-box {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.nav--main {\n\t\tleft: -3.2rem;\n\t\tright: -3.2rem;\n\t}\n\n\t\t.nav--main a {\n\t\t\tpadding-left: 3.2rem;\n\t\t\tpadding-right: 3.2rem;\n\t\t}\n\n\t.figure--full,\n\t.resources-table__head {\n\t\tmargin-left: -3.2rem;\n\t\tmargin-right: -3.2rem;\n\t}\n\n\t.figure--full .figure__caption {\n\t\tmargin-left: 3.2rem;\n\t\tmargin-right: 3.2rem;\n\t}\n\n\t.resources-table__head .resources-table__cell:first-child {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.footer__list li {\n\t\tdisplay: list-item;\n\t\tfloat: left;\n\t\tpadding: 0 0.8rem 0 0;\n\t}\n\n\t.footer__list li:after {\n\t\tcontent: '\\2022'; /* bullet dot: '•' */\n\t\tcolor: var( --color-base--subtle );\n\t\tpadding: 0 0 0 0.8rem;\n\t\tfont-weight: 100;\n\t}\n\n\t.footer__list li:last-child:after {\n\t\tcontent: '';\n\t\tpadding: 0;\n\t}\n\n\t.color {\n\t\twidth: 16rem;\n\t\tmargin-right: 2.4rem;\n\t}\n}\n\n/* ... Smartphone landscape ... */\n@media ( min-width: 568px ) {\n\t.lnk--contribute {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tbottom: 1.5rem; /* Not on 8px base due to `line-height` setting */\n\t\tright: 3.2rem;\n\t\ttext-align: right;\n\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: inline;\n\t\topacity: 0;\n\t\ttransition: opacity var( --transition-ease-medium );\n\t}\n\n\t.figures-do-dont .figure {\n\t\tmax-width: 61.8%;\n\t}\n\n\t.figure--this-is-for-everyone img,\n\t.figure--trustworthy-yet-joyful img {\n\t\tmax-width: none;\n\t}\n\n\t.figure--illustrations-header {\n\t\tfloat: left;\n\t\twidth: 44.4%;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header {\n\t\twidth: 55.55%;\n\t\tmargin-top: 0.8rem;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header img {\n\t\tmargin-top: 1.6rem;\n\t}\n}\n\n/* ... Tablet ... */\n@media ( min-width: 768px ) {\n\timg {\n\t\tborder-radius: 2px;\n\t}\n\n\t.content-box {\n\t\twidth: 100%;\n\t\tmax-width: 960px;\n\t}\n\n\t.btn--nav-main {\n\t\tdisplay: none;\n\t}\n\n\t.site__title {\n\t\tfloat: left;\n\t\tmargin-left: 0;\n\t}\n\n\t\t.site__title a,\n\t\t.nav--main a {\n\t\t\tpadding-left: 1.6rem;\n\t\t\tpadding-right: 1.6rem;\n\t\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: inline;\n\t\topacity: 1;\n\t}\n\n\t.col--start {\n\t\twidth: 20.8rem;\n\t\tz-index: 1;\n\t\ttransition: width var( --transition-ease-medium );\n\t}\n\n\t.col--end {\n\t\tmargin-left: -20.8rem;\n\t\tpadding-left: 24rem; /* = 22.4 + (2 * 1.6 padding) */\n\t}\n\n\t.nav--main {\n\t\tleft: auto;\n\t\tright: auto;\n\t}\n\n\t.figure--full,\n\t.figure--full .figure__caption {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t.figures-do-dont .figure {\n\t\tfloat: left;\n\t\twidth: 50%;\n\t}\n\n\t.color-palette--base .color:nth-child( 3n+4 ) {\n\t\tclear: unset;\n\t}\n\n\t/* ... “Illustrations” ... */\n\t.illustrations-case-study img {\n\t\tfloat: left;\n\t\twidth: 33.33%;\n\t}\n\n\t.page--components figure {\n\t\tmargin-left: 6.4rem;\n\t}\n}\n\n/* ... Tablet+ / Netbook ... */\n@media ( min-width: 992px ) {\n\t.content-box {\n\t\twidth: 100%;\n\t\tmax-width: var( --width-site-desktop-wide );\n\t}\n\n\t.site__title a,\n\t.nav--main a {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.col--start {\n\t\twidth: 24rem;\n\t}\n\n\t.col--end {\n\t\tmargin-left: -24rem;\n\t\tpadding-left: 27.2rem; /* = 24 + (2 * 1.6 padding) */\n\t}\n\n\t.color-palette--overview:first-child {\n\t\tmargin-top: 2.4rem;\n\t}\n\n\t.color {\n\t\tmargin-right: 2.4rem;\n\t}\n\n\t\t.color-palette--base .color {\n\t\t\tmargin-right: 1.35rem;\n\t\t}\n\n\t\t.color-palette--overview.color-palette--base .color--emphasized {\n\t\t\tmargin-right: 1.35rem;\n\t\t\tmargin-left: 0;\n\t\t}\n\n\t.color-palette--overview.color-palette--red:before,\n\t.color-palette--overview.color-palette--red:after,\n\t.color-palette--overview.color-palette--green:before,\n\t.color-palette--overview.color-palette--green:after {\n\t\tcontent: '';\n\t\tdisplay: none;\n\t}\n\n\t.color-palette--overview.color-palette--red:after,\n\t.color-palette--overview.color-palette--green:after,\n\t.color-section .color:nth-child( 3n+4 ) {\n\t\tclear: both;\n\t}\n\n\t/* ... Resources ... */\n\t.resources-table__body .resources-table__cell {\n\t\ttransition: background-color var( --transition-ease-medium );\n\t}\n\n\t\t.resources-table__body:hover .resources-table__cell {\n\t\t\tbackground-color: #f8f9fa;\n\t\t}\n\n\t\t.resources-table__head .resources-table__cell:first-child,\n\t\t.resources-table__body .resources-table__cell:first-child {\n\t\t\tpadding-left: 1.6rem;\n\t\t}\n}\n\n@media ( min-width: 1200px ) {\n\t.content-box {\n\t\twidth: var( --width-site-desktop-wide );\n\t}\n\n\t.col--start {\n\t\twidth: 25.6rem;\n\t}\n\n\t.col--end {\n\t\tmargin-left: -25.6rem;\n\t\tpadding-left: 28.8rem; /* = 25.6 + (2 * 1.6 padding) */\n\t}\n}\n"]} \ No newline at end of file diff --git a/css/wmui-style-guide.dev.css b/css/wmui-style-guide.dev.css index 4c379646..f96194bd 100644 --- a/css/wmui-style-guide.dev.css +++ b/css/wmui-style-guide.dev.css @@ -1,6 +1,6 @@ /* ::: Vendor Imports ::: */ /* Load files from 'node_modules' folders with postCSS-import plugin. - * Modules specified in package.json file */ + * Modules specified in package.json file. */ @import 'wikimedia-ui-base/wikimedia-ui-base.css'; @import 'normalize.css'; @@ -14,7 +14,7 @@ --border-color-heading: var( --wmui-color-base80 ); --border-width-heading: 3px; --outline-color-base--focus: var( --color-primary--focus ); - /* HACK; Add Georgia to serif fallback as long as WikimediaUI Base isn't updated */ + /* HACK; Add Georgia to serif fallback as long as WikimediaUI Base isn't updated. */ --font-family-serif--fallback: Georgia, serif; /* stylelint-disable-line value-keyword-case */ --font-weight-base: 400; /* Setting bold to `600` as our stack works better with it, only Lato is on the edge. @@ -104,7 +104,6 @@ blockquote { font-family: var( --font-family-serif--fallback ); /* Fallback */ font-size: 2rem; font-style: italic; - line-height: 1.5; } blockquote cite { @@ -135,7 +134,6 @@ hr { p { margin: 3.2rem 0 0; - line-height: 1.5; } h1 + p,