diff --git a/components/links.html b/components/links.html index 019133ac..a4f637a6 100644 --- a/components/links.html +++ b/components/links.html @@ -109,11 +109,11 @@

States of links

links states
-

Links don't feature a disabled state. Consider using quiet buttons for those applications instead.

+

Links focus outline is the default browser focus, here Blink based browsers only with outline color amendment to Accent50. This varies in different browsers.
Links don't feature a disabled state. Consider using quiet buttons for those applications instead.

Types

-

By default links are only underlined on interaction (hover, active).

+

By default, links are only underlined on interaction (hover, active).

Underlined links

To suit user preference and for accessibility reasons MediaWiki also provides a setting to always underline links.

diff --git a/css/build/wmui-style-guide.css b/css/build/wmui-style-guide.css index af06a07b..79af0b1e 100644 --- a/css/build/wmui-style-guide.css +++ b/css/build/wmui-style-guide.css @@ -764,6 +764,11 @@ sup { clear: both; } /* ::: Text-formatting ::: */ +/* Support Blink based browsers. */ +/* They use `outline` for focus styles, we're only amending the color here, see T245887. */ +:focus { + outline-color: #36c; +} .is-complementary, .is-subtle { color: #72777d; diff --git a/css/build/wmui-style-guide.min.css b/css/build/wmui-style-guide.min.css index bd81ce4a..1694598e 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{-webkit-box-sizing:content-box;-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{-webkit-box-sizing:border-box;-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]{-webkit-box-sizing:border-box;-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}*{-webkit-box-sizing:border-box;-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{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}.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,-webkit-box-shadow .25s;transition:color .25s,-webkit-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,-webkit-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;-webkit-box-shadow:0 .7rem 0 #54595d;-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{-webkit-box-shadow:0 .7rem 0 #000;-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;-webkit-box-shadow:0 1px 4px 0 rgba(0,0,0,.25);-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;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.25);-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{-webkit-box-sizing:content-box;-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{-webkit-box-sizing:border-box;-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]{-webkit-box-sizing:border-box;-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}*{-webkit-box-sizing:border-box;-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{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,-webkit-box-shadow .25s;transition:color .25s,-webkit-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,-webkit-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;-webkit-box-shadow:0 .7rem 0 #54595d;-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{-webkit-box-shadow:0 .7rem 0 #000;-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;-webkit-box-shadow:0 1px 4px 0 rgba(0,0,0,.25);-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;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.25);-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 276a213b..24bc0370 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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D,uBACC,gBAAiB,AACjB,cAAmC,AACnC,oBAAsB,AACtB,eAAiB,CACjB,AAED,kCACC,WAAY,AACZ,SAAW,CACX,AAED,OACC,YAAa,AACb,mBAAqB,CACrB,CACD,AAGD,yBACC,iBACC,cAAe,AACf,kBAAmB,AACnB,cAAe,AACf,aAAc,AACd,gBAAkB,CAClB,AAED,sBACC,eAAgB,AAChB,UAAW,AACX,gCAAoD,AAApD,6BAAoD,AAApD,uBAAoD,CACpD,AAED,yBACC,eAAiB,CACjB,AAED,sEAEC,cAAgB,CAChB,AAED,8BACC,WAAY,AACZ,WAAa,CACb,AAED,4DACC,aAAc,AACd,gBAAmB,CACnB,AAED,gEACC,iBAAmB,CACnB,CACD,AAGD,yBACC,IACC,uBAAmB,AAAnB,iBAAmB,CACnB,AAED,aACC,WAAY,AACZ,eAAiB,CACjB,AAED,eACC,YAAc,CACd,AAED,aACC,WAAY,AACZ,aAAe,CACf,AAEA,4BAEC,oBAAqB,AACrB,oBAAsB,CACtB,AAEF,sBACC,eAAgB,AAChB,SAAW,CACX,AAED,YACC,cAAe,AACf,UAAW,AACX,8BAAkD,AAAlD,2BAAkD,AAAlD,qBAAkD,CAClD,AAED,UACC,qBAAsB,AACtB,kBAAoB,CACpB,AAED,WACC,UAAW,AACX,UAAY,CACZ,AAED,6CAEC,cAAe,AACf,cAAgB,CAChB,AAED,yBACC,WAAY,AACZ,SAAW,CACX,AAED,4CACC,WAAa,CACb,AAGD,8BACC,WAAY,AACZ,YAAc,CACd,AAED,yBACC,kBAAoB,CACpB,CACD,AAGD,yBACC,aACC,WAAY,AACZ,gBAA4C,CAC5C,AAED,4BAEC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,YACC,WAAa,CACb,AAED,UACC,mBAAoB,AACpB,oBAAsB,CACtB,AAED,qCACC,iBAAmB,CACnB,AAED,OACC,mBAAqB,CACrB,AAEA,4BACC,oBAAsB,CACtB,AAED,gEACC,qBAAsB,AACtB,aAAe,CACf,AAEF,8MAIC,WAAY,AACZ,YAAc,CACd,AAED,4IAGC,UAAY,CACZ,AAGD,8CACC,yCAA6D,AAA7D,sCAA6D,AAA7D,gCAA6D,CAC7D,AAEA,oDACC,wBAA0B,CAC1B,AAED,oHAEC,mBAAqB,CACrB,CACF,AAED,0BACC,aACC,YAAwC,CACxC,AAED,YACC,aAAe,CACf,AAED,UACC,qBAAsB,AACtB,oBAAsB,CACtB,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/* 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\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.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,4EAA4E,AAW5E,KACE,iBAAkB,AAClB,0BAA2B,AAC3B,6BAA+B,CAChC,AAiBD,wCAME,aAAe,CAChB,AAOD,GACE,cAAe,AACf,cAAiB,CAClB,AAUD,uBAGE,aAAe,CAChB,AAMD,OACE,eAAiB,CAClB,AAOD,GACE,+BAAwB,AAAxB,4BAAwB,AAAxB,uBAAwB,AACxB,SAAU,AACV,gBAAkB,CACnB,AAOD,IACE,gCAAkC,AAClC,aAAe,CAChB,AAUD,EACE,+BAA8B,AAC9B,oCAAsC,CACvC,AAOD,YACE,mBAAoB,AACpB,0BAA2B,AAC3B,yCAAkC,AAAlC,sCAAkC,AAAlC,gCAAkC,CACnC,AAMD,SAEE,oBAAqB,AASrB,kBAAoB,CARrB,AAgBD,cAGE,gCAAkC,AAClC,aAAe,CAChB,AAMD,IACE,iBAAmB,CACpB,AAMD,KACE,sBAAuB,AACvB,UAAY,CACb,AAMD,MACE,aAAe,CAChB,AAOD,QAEE,cAAe,AACf,cAAe,AACf,kBAAmB,AACnB,uBAAyB,CAC1B,AAED,IACE,aAAgB,CACjB,AAED,IACE,SAAY,CACb,AASD,YAEE,oBAAsB,CACvB,AAMD,sBACE,aAAc,AACd,QAAU,CACX,AAMD,IACE,iBAAmB,CACpB,AAMD,eACE,eAAiB,CAClB,AAUD,sCAKE,uBAAwB,AACxB,eAAgB,AAChB,iBAAkB,AAClB,QAAU,CACX,AAOD,aAEE,gBAAkB,CACnB,AAOD,cAEE,mBAAqB,CACtB,AAQD,qDAIE,yBAA2B,CAC5B,AAMD,wHAIE,kBAAmB,AACnB,SAAW,CACZ,AAMD,4GAIE,6BAA+B,CAChC,AAMD,SACE,0BAA+B,CAChC,AASD,OACE,8BAAuB,AAAvB,2BAAuB,AAAvB,sBAAuB,AACvB,cAAe,AACf,cAAe,AACf,eAAgB,AAChB,UAAW,AACX,kBAAoB,CACrB,AAOD,SACE,qBAAsB,AACtB,uBAAyB,CAC1B,AAMD,SACE,aAAe,CAChB,AAOD,6BAEE,8BAAuB,AAAvB,2BAAuB,AAAvB,sBAAuB,AACvB,SAAW,CACZ,AAMD,kFAEE,WAAa,CACd,AAOD,cACE,6BAA8B,AAC9B,mBAAqB,CACtB,AAMD,qFAEE,uBAAyB,CAC1B,AAOD,6BACE,0BAA2B,AAC3B,YAAc,CACf,AAUD,aAEE,aAAe,CAChB,AAMD,QACE,iBAAmB,CACpB,AASD,OACE,oBAAsB,CACvB,AAiBD,kBACE,YAAc,CACf,AC9bD,WACC,oBAAuB,AACvB,gHAC6D,AAC7D,kBAAmB,AACnB,gBAAiB,AACjB,iCAAmC,CACnC,AAED,WACC,oBAAuB,AACvB,0GAC0D,AAC1D,kBAAmB,AACnB,gBAAiB,AACjB,iCAAmC,CACnC,ACSD,EACC,8BAAuB,AAAvB,2BAAuB,AAAvB,qBAAuB,CACvB,AAED,KACC,eAAiB,CACjB,AAED,KACC,yBAA6C,AAC7C,cAA2B,AAC3B,SAAU,AACV,6FAA8C,AAC9C,iBAAkB,AAClB,eAAuC,CACvC,AAID,kBAMC,kBAAmB,AACnB,iBAAkB,AAClB,mDAAmG,AAAnG,gDAAmG,AAAnG,0CAAmG,CACnG,AAED,YAIC,eAAuC,CACvC,AAED,gBAEC,0BAAkD,AAClD,iBAAkB,AAClB,eAAuC,CACvC,AAED,GACC,gCAAsG,AACtG,mBAAoB,AACpB,gBAAkB,CAClB,AAGD,MACC,iBAAmB,CACnB,AAED,GACC,cAAgB,CAChB,AAED,GACC,gBAAkB,CAClB,AAMD,MAHC,gBAAkB,CAMlB,AAHD,GAEC,eAAoB,CACpB,AAGD,WACC,8BAAkD,AAClD,kBAAmB,AACnB,iBAAkB,AAClB,0BAAkD,AAClD,eAAgB,AAChB,kBAAmB,AACnB,eAAiB,CACjB,AAED,gBACC,cAAe,AACf,iBAAmB,AACnB,6FAA8C,AAC9C,iBAAkB,AAClB,iBAAmB,CACnB,AAEA,uBACC,YAAc,CACd,AAEF,kBAGC,gEAA4C,CAC5C,AAED,GACC,mBAAyC,AACzC,cAAe,AACf,aAAe,AACf,SAAU,AACV,aAAe,CACf,AAED,EACC,kBAAmB,AACnB,eAAiB,CACjB,AAEA,qDASC,gBAAmB,CACnB,AAED,aACC,iBAAmB,CACnB,AAEF,aAEC,yBAAiD,AACjD,WAAuC,AACvC,yBAA6B,AAC7B,oBAAqB,AACrB,iBAAkB,AAClB,oBAAsB,CACtB,AAGD,MAEC,eAAiB,AACjB,oBAAsB,CACtB,AAED,YACC,gBAAmB,CACnB,AAEA,wBACC,YAAc,CACd,AAGF,OACC,gBAAmB,CACnB,AAED,IACC,cAAe,AACf,eAAgB,AAChB,iBAAmB,CACnB,AAED,yBACC,mBAAoB,AACpB,iBAAoB,CACpB,AAED,6BACC,gBAAmB,CACnB,AAGD,EACC,WAA8B,AAC9B,oBAAsB,CACtB,AAEA,QACC,yBAA2B,CAC3B,AAED,SACC,aAAsC,CACtC,AAEF,SAEC,eAAuC,CACvC,AAED,KACC,yBAAiD,AACjD,qBAAsB,AACtB,oBAAuB,AACvB,gBAAkB,CAClB,AAED,MACC,gBAAkB,CAClB,AAED,QAEC,gBAAkB,CAClB,AAID,UACC,cAAe,AACf,kBAAmB,AACnB,2BAAiC,AACjC,UAAW,AACX,WAAY,AACZ,YAAa,AACb,SAAU,AACV,UAAW,AACX,eAAiB,CACjB,AAEA,2DAEC,gBAAiB,AACjB,UAAW,AACX,WAAY,AACZ,YAAa,AACb,SAAU,AACV,0BAA2B,AAC3B,gBAAkB,CAClB,AAEF,8RAYC,YAAa,AACb,aAAe,CACf,AAED,4IAMC,UAAY,CACZ,AAKD,OACC,kBAAkD,CAClD,AAED,6BAEC,aAAmC,CACnC,AAED,kBACC,gBAAkB,CAClB,AAED,4BAEC,cAAkC,AAClC,SAAW,CACX,AAJD,qCAEC,cAAkC,AAClC,SAAW,CACX,AAJD,uBAEC,cAAkC,AAClC,SAAW,CACX,AAJD,wBAEC,cAAkC,AAClC,SAAW,CACX,AAJD,8BAEC,cAAkC,AAClC,SAAW,CACX,AAED,aACC,kBAAmB,AACnB,kBAAmB,AACnB,iBAAkB,AAClB,oBAAqB,AACrB,oBAAsB,CACtB,AAID,QACC,eAAgB,AAChB,MAAO,AACP,OAAQ,AACR,QAAS,AACT,kBAAmB,AACnB,kBAAoB,CACpB,AAEA,aACC,cAAkC,AAClC,aAAc,AACd,cAAe,AACf,6FAA8C,AAC9C,iBAAkB,AAClB,gBAAuC,AACvC,mBAAsB,CACtB,AAEA,eACC,cAAe,AACf,qBAAsB,AACtB,wBAAyB,AACzB,8BAAkD,AAAlD,2BAAkD,AAAlD,qBAAkD,CAClD,AAED,qBACC,WAAiC,AACjC,oBAAsB,CACtB,AAED,WACC,aAAe,CACf,AAED,eACC,eAAuC,CACvC,AAGF,eACC,kBAAmB,AACnB,WAAY,AACZ,aAAc,AACd,cAAe,AACf,cAAgB,CAChB,AAGD,iBACC,cAAe,AACf,cAAe,AACf,sDAA8F,AAA9F,8CAA8F,AAA9F,gEAA8F,AAA9F,sCAA8F,AAA9F,kFAA8F,CAC9F,AAED,+CAEC,WAAY,AACZ,yBAA6C,AAC7C,WAAY,AACZ,WAAY,AACZ,kBAAmB,AACnB,UAAY,AACZ,MAAQ,CACR,AAED,uBACC,WAAY,AACZ,qCAAkD,AAAlD,kCAAkD,AAAlD,4BAAkD,CAClD,AAED,2DAEC,qBAA4C,CAC5C,AAED,6BACC,kCAAiD,AAAjD,+BAAiD,AAAjD,yBAAiD,CACjD,AAED,oBACC,cAAe,AACf,kBAAmB,AACnB,2BAAiC,AACjC,UAAW,AACX,WAAY,AACZ,YAAa,AACb,eAAiB,CACjB,AAGD,iBACC,iBAAkB,AAClB,kBAAoB,CACpB,AAIF,MACC,sBAAiD,AACjD,kBAAmB,AACnB,kBAAmB,AACnB,iBAAkB,AAClB,+CAA8C,AAA9C,4CAA8C,AAA9C,uCAA8C,AAC9C,iBAAmB,CACnB,AAMD,cAHC,UAAY,CAOZ,AAJD,KAEC,kBAAmB,AACnB,cAAgB,CAChB,AAMA,sBACC,SAAW,CACX,AAGF,WACC,qBAAiD,CAEjD,AAED,gDAEC,YAAc,CACd,AAED,4BAEC,SAAW,CACX,AAED,0BACC,QAAU,CACV,AAED,cACC,UAAW,AACX,oBAAsB,CACtB,AAED,iBACC,mBAAsB,CACtB,AAED,aACC,cAA2B,AAC3B,cAAe,AACf,qBAAuB,AACvB,iBAAkB,AAClB,qBAAsB,AACtB,iEAA6I,AAA7I,8DAA6I,AAA7I,wDAA6I,CAC7I,AAED,sCAEC,yBAAiD,AACjD,UAAuC,CACvC,AAED,oBACC,yBAAoD,AACpD,WAA8B,AAE9B,uBAA2C,AAA3C,kBAA2C,AAC3C,gBAAuC,AACvC,cAAgB,CAChB,AAED,gBACC,kBAAmB,AACnB,iBAAmB,CACnB,AAED,+BACC,kBAAoB,CACpB,AAED,8BACC,QAAU,CACV,AAED,6BACC,cAAkC,AAClC,8BAAyE,AACtE,+BAA2E,AAA3E,0BAA2E,AAC9E,oBAAqB,AACrB,iBAAkB,AAClB,oDAAoG,AAApG,iDAAoG,AAApG,2CAAoG,CACpG,AAED,kCACC,sBAAiD,AACjD,WAAmC,AACnC,uBAA6C,AAC7C,eAAuC,CACvC,AAED,2CACC,mBAAqB,CACrB,AAID,oBACC,cAAmC,AACnC,kBAAoB,CACpB,AAED,aACC,iBAAoB,CACpB,AAED,iCACC,iBAAoB,CACpB,AAED,eACC,kBAAmB,AACnB,eAAgB,AAChB,kBAAmB,AACnB,eAAiB,CACjB,AAQD,eACC,wBAA6C,CAC7C,AAED,uCAEC,cAAmC,AACnC,WAAY,AACZ,cAAe,AACf,gBAAkB,CAClB,AAED,iBACC,kBAAoB,AACpB,iBAAmB,CACnB,AAEA,uBACC,YAAc,CACd,AAEF,sBACC,YAAa,AACb,kBAAoB,CACpB,AAEA,wBACC,UAAY,CACZ,AAGF,iBACC,iBAAmB,CACnB,AAED,yBACC,yBAA6C,AAC7C,+BAAoD,AAApD,2BAAoD,AACpD,gCAAqD,AAArD,2BAAqD,CACrD,AAED,+BACC,0BAA4E,CAC5E,AAED,kCACC,sBAAgD,AAChD,cAAe,AACf,uBAAyB,AACzB,uBAAwB,AACxB,kBAAqB,CACrB,AAED,iCAEC,wBAA2C,CAC3C,AAED,qCAEC,qBAA6C,CAC7C,AAED,UAEC,kBAAmB,AACnB,eAAuC,CACvC,AAEA,wBAEC,qBAAsB,AACtB,mBAAqB,AACrB,kBAAoB,AACpB,iBAAkB,AAClB,iBAAkB,AAClB,kBAAoB,CACpB,AAEF,IACC,aAA8B,CAC9B,AAEA,WACC,WAAa,CACb,AAEF,MACC,UAAkC,CAClC,AAEA,aACC,WAAa,CACb,AAIF,eACC,kBAAmB,AACnB,SAAW,CACX,AAED,8BACC,YAAc,CACd,AAED,OACC,WAAuC,AACvC,qBAAsB,AACtB,cAAe,AACf,WAAY,AACZ,kBAAmB,AACnB,YAAa,AACb,aAAc,AACd,qBAAsB,AACtB,eAAgB,AAChB,sBAAiG,AACjG,uBAA2C,AAA3C,kBAA2C,AAC3C,gBAAkB,CAClB,AAEA,qCAEC,UAAqC,CACrC,AAED,qCACC,UAAuC,CACvC,AAED,kCACC,gBAAmB,CACnB,AAED,gCACC,aAAc,AACd,cAAe,AACf,iBAAmB,AACnB,oBAAqB,AACrB,qBAAsB,AACtB,0BAAsB,AAAtB,qBAAsB,AACtB,cAAgB,CAChB,AAED,4CACC,gBAAmB,CACnB,AAED,4CACC,aAAc,AACd,YAAa,AACb,aAAc,AACd,0BAAsB,AAAtB,qBAAsB,AACtB,gBAAkB,CAClB,AAED,4BACC,oBAAsB,CACtB,AAED,uCACC,gCAAoD,AAApD,6BAAoD,AAApD,uBAAoD,CACpD,AAEA,6CACC,SAAW,CACX,AAEF,aACC,cAAe,AACf,kBAAmB,AACnB,cAAe,AACf,YAAa,AACb,iBAAkB,AAClB,eAA6C,CAC7C,AAEA,sCACC,kBAAmB,AACnB,YAAa,AACb,UAAW,AACX,mBAAoB,AACpB,iBAAkB,AAClB,aAAe,CACf,AAED,oHAIC,YAAc,CACd,AAEF,YACC,yBAA0B,AAC1B,cAAe,AACf,UAAW,AACX,4FAA8C,CAC9C,AAEA,iBACC,SAAW,CACX,AAEH,4BACC,YACC,kBAAoB,CACpB,AAED,mBACC,WAAY,AACZ,mCAAsC,AACtC,qBAAsB,AACtB,aAAc,AACd,cAAe,AACf,2BAA+B,AAC/B,uBAAmB,AAAnB,kBAAmB,AACnB,2BAA4B,AAC5B,WAAa,CACb,AAED,4BACC,wBAA6B,CAC7B,CACD,AAID,MACC,qBAAsB,AACtB,WAAY,AACZ,YAAa,AACb,eAAiB,AACjB,0BAA4B,CAC5B,AAEA,iBACC,aAAc,AACd,cAAe,AACf,mBAAsB,CACtB,AAED,oBACC,aAAc,AACd,cAAe,AACf,mBAAsB,CACtB,AAUF,uBACC,iBAAmB,CACnB,AAED,6BACC,WAAY,AACZ,+DAAkE,AAClE,kBAAmB,AACnB,SAAU,AACV,aAAc,AACd,cAAe,AACf,aAAe,CACf,AAED,8CACC,gBAAiB,AACjB,iBAAkB,AAClB,iBAAmB,CACnB,AAGD,iBACC,cAAe,AACf,WAAY,AACZ,kBAAmB,AACnB,wBAA0B,CAC1B,AAED,8CAEC,kBAAmB,AACnB,+BAAiC,CACjC,AAED,uBACC,wBAA0B,CAC1B,AAEA,0BACC,aAAc,AACd,gBAAiB,AACjB,iBAAkB,AAClB,iBAAkB,AAClB,eAAuC,CACvC,AAEF,uBACC,mBAAoB,AACpB,8BAAgC,CAChC,AAEA,0DACC,mBAAqB,CACrB,AAEF,cACC,kBAAoB,CACpB,AAGD,QACC,cAA2B,AAC3B,iBAAkB,AAClB,gBAAkB,CAClB,AAED,cACC,SAAW,CACX,AAEA,0BACC,QAAU,CACV,AAED,oBACC,YAAa,AACb,cAAe,AACf,UAAY,CACZ,AAED,iBACC,qBAAsB,AACtB,cAAe,AACf,iBAAoB,CACpB,AAED,6BACC,aAAe,CACf,AAED,gBACC,iBAAmB,CACnB,AAED,yBACC,eAAuC,CACvC,AAEF,wBACC,qBAAsB,AACtB,gBAAkB,AAClB,wBAA0B,CAC1B,AAKD,yBACC,SAAU,AACV,SAAW,CACX,AAGD,2DACC,cAAgB,CAChB,AAED,0CACC,iBAAmB,CACnB,AAGD,kEACC,qBAAuB,CACvB,AAED,yCACC,aAAkC,CAClC,AAID,sBACC,qBAAsB,AACtB,cAAmC,AACnC,gBAAiB,AACjB,yBAA0B,AAC1B,iBAAkB,AAClB,gBAAuC,AACvC,kBAAoB,CACpB,AAED,4CACC,eAAiB,CACjB,AAED,sBACC,cAAgB,CAChB,AAED,wBACC,qBAAsB,AACtB,YAAc,CACd,AAED,oCACC,aAAe,CACf,AAED,4BACK,aAAc,AACd,eAAiB,CACrB,AAED,sBACC,gBAAiB,AACjB,kBAAoB,CACpB,AAGD,8BACC,yBAA6C,AAC7C,cAAgB,CAChB,AAID,wEAGC,4FAA8C,CAC9C,AAGD,wFAGC,iCAAuC,CACvC,AAKD,yBACC,WACC,kBAAmB,AACnB,YAAa,AACb,aAAc,AACd,cAAe,AACf,sBAAuB,AACvB,+CAA8C,AAA9C,4CAA8C,AAA9C,uCAA8C,AAC9C,UAAW,AACX,oCAA+B,AAA/B,iCAA+B,AAA/B,gCAA+B,AAA/B,4BAA+B,AAC/B,+DAAmI,AAAnI,uDAAmI,AAAnI,wEAAmI,AAAnI,+CAAmI,AAAnI,yFAAmI,CACnI,AAED,sCACC,gCAA2B,AAA3B,6BAA2B,AAA3B,4BAA2B,AAA3B,uBAA2B,CAC3B,AAED,aACC,kBAAoB,AACpB,gBAAkB,CAClB,AAED,sBACC,cAAe,AACf,aAAe,CACf,AAGD,sCACC,aAAe,CACf,AAGD,sFAIC,aAAe,CACf,AAED,uBACC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,oDACC,YAAc,CACd,AAED,uBACC,cAAgB,CAChB,AAED,uBACC,kBAAoB,AACpB,oBAAuB,CACvB,CACD,AAGD,yBACC,yCAGC,qDAA+C,AAA/C,kDAA+C,AAA/C,6CAA+C,AAC/C,iCAAqD,AAArD,8BAAqD,AAArD,wBAAqD,CACrD,AAED,aACC,kBAAoB,CACpB,AAEA,eACC,cAAgB,CAChB,AAEF,sBACC,YAAc,CACd,AAED,aACC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,sBAEC,UAAY,CACZ,AAED,qCAEC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,+BACC,mBAAoB,AACpB,mBAAqB,CACrB,AAED,sEAEC,WAAY,AACZ,gBAAiB,AACjB,iBAAkB,AAClB,iBAAmB,CACnB,AAED,kCACC,UAAY,CACZ,AAED,4HAEC,YAAc,CACd,AAED,OACC,WAAa,CACb,AAED,4CACC,UAAY,CACZ,AAED,4BACC,mBAAqB,CACrB,AAED,gEACC,oBAAqB,AACrB,kBAAqB,CACrB,AAED,yBACC,kBAAoB,CACpB,CACD,AAGD,yBACC,aACC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,WACC,aAAc,AACd,aAAe,CACf,AAEA,aACC,oBAAqB,AACrB,oBAAsB,CACtB,AAEF,qCAEC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,+BACC,mBAAoB,AACpB,mBAAqB,CACrB,AAED,0DACC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,iBACC,kBAAmB,AACnB,WAAY,AACZ,mBAAsB,CACtB,AAED,uBACC,gBAAiB,AACjB,cAAmC,AACnC,oBAAsB,AACtB,eAAiB,CACjB,AAED,kCACC,WAAY,AACZ,SAAW,CACX,AAED,OACC,YAAa,AACb,mBAAqB,CACrB,CACD,AAGD,yBACC,iBACC,cAAe,AACf,kBAAmB,AACnB,cAAe,AACf,aAAc,AACd,gBAAkB,CAClB,AAED,sBACC,eAAgB,AAChB,UAAW,AACX,gCAAoD,AAApD,6BAAoD,AAApD,uBAAoD,CACpD,AAED,yBACC,eAAiB,CACjB,AAED,sEAEC,cAAgB,CAChB,AAED,8BACC,WAAY,AACZ,WAAa,CACb,AAED,4DACC,aAAc,AACd,gBAAmB,CACnB,AAED,gEACC,iBAAmB,CACnB,CACD,AAGD,yBACC,IACC,uBAAmB,AAAnB,iBAAmB,CACnB,AAED,aACC,WAAY,AACZ,eAAiB,CACjB,AAED,eACC,YAAc,CACd,AAED,aACC,WAAY,AACZ,aAAe,CACf,AAEA,4BAEC,oBAAqB,AACrB,oBAAsB,CACtB,AAEF,sBACC,eAAgB,AAChB,SAAW,CACX,AAED,YACC,cAAe,AACf,UAAW,AACX,8BAAkD,AAAlD,2BAAkD,AAAlD,qBAAkD,CAClD,AAED,UACC,qBAAsB,AACtB,kBAAoB,CACpB,AAED,WACC,UAAW,AACX,UAAY,CACZ,AAED,6CAEC,cAAe,AACf,cAAgB,CAChB,AAED,yBACC,WAAY,AACZ,SAAW,CACX,AAED,4CACC,WAAa,CACb,AAGD,8BACC,WAAY,AACZ,YAAc,CACd,AAED,yBACC,kBAAoB,CACpB,CACD,AAGD,yBACC,aACC,WAAY,AACZ,gBAA4C,CAC5C,AAED,4BAEC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,YACC,WAAa,CACb,AAED,UACC,mBAAoB,AACpB,oBAAsB,CACtB,AAED,qCACC,iBAAmB,CACnB,AAED,OACC,mBAAqB,CACrB,AAEA,4BACC,oBAAsB,CACtB,AAED,gEACC,qBAAsB,AACtB,aAAe,CACf,AAEF,8MAIC,WAAY,AACZ,YAAc,CACd,AAED,4IAGC,UAAY,CACZ,AAGD,8CACC,yCAA6D,AAA7D,sCAA6D,AAA7D,gCAA6D,CAC7D,AAEA,oDACC,wBAA0B,CAC1B,AAED,oHAEC,mBAAqB,CACrB,CACF,AAED,0BACC,aACC,YAAwC,CACxC,AAED,YACC,aAAe,CACf,AAED,UACC,qBAAsB,AACtB,oBAAsB,CACtB,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\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 diff --git a/css/wmui-style-guide.dev.css b/css/wmui-style-guide.dev.css index 7d1556b8..c719dc7f 100644 --- a/css/wmui-style-guide.dev.css +++ b/css/wmui-style-guide.dev.css @@ -13,6 +13,7 @@ --width-site-desktop-wide: 1140px; --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 */ --font-family-serif--fallback: Georgia, serif; /* stylelint-disable-line value-keyword-case */ --font-weight-base: 400; @@ -283,6 +284,12 @@ sup { } /* ::: Text-formatting ::: */ +/* Support Blink based browsers. */ +/* They use `outline` for focus styles, we're only amending the color here, see T245887. */ +:focus { + outline-color: var( --outline-color-base--focus ); +} + .is-complementary, .is-subtle { color: var( --color-base--subtle ); diff --git a/img/components/links_states.svg b/img/components/links_states.svg index 8020d3b8..101e37a8 100644 --- a/img/components/links_states.svg +++ b/img/components/links_states.svg @@ -44,40 +44,45 @@ - - Normal Hover Active Focus Visited - - - - - Neutral point of view - - + + + + + Neutral point of view + + + - - - - - Neutral point of view - - + + + + Neutral point of view + + + - - - - Neutral point of view - - - - + + + + Neutral point of view + + + + + + + Neutral point of view + + + + + Neutral point of view - - - - Neutral point of view + + Normal Hover Active Focus Visited diff --git a/js/wikimedia-design-style-guide.concat.js b/js/wikimedia-design-style-guide.concat.js index 9363d4db..98a4f4ee 100644 --- a/js/wikimedia-design-style-guide.concat.js +++ b/js/wikimedia-design-style-guide.concat.js @@ -26,4 +26,4 @@ } }() ); -//# sourceMappingURL=wikimedia-design-style-guide.concat.js.map.json +//# sourceMappingURL=wikimedia-design-style-guide.concat.js.map.json \ No newline at end of file diff --git a/resources/WikimediaUI-components_overview.png b/resources/WikimediaUI-components_overview.png index 2f7c6702..4b29e1fb 100644 Binary files a/resources/WikimediaUI-components_overview.png and b/resources/WikimediaUI-components_overview.png differ diff --git a/resources/WikimediaUI-components_overview.sketch b/resources/WikimediaUI-components_overview.sketch index 5d444a65..dcd8995a 100644 Binary files a/resources/WikimediaUI-components_overview.sketch and b/resources/WikimediaUI-components_overview.sketch differ diff --git a/resources/WikimediaUI-components_overview.svg b/resources/WikimediaUI-components_overview.svg index 7e936e49..a906bfab 100644 --- a/resources/WikimediaUI-components_overview.svg +++ b/resources/WikimediaUI-components_overview.svg @@ -4,8 +4,8 @@ WikimediaUI-components_overview - - + + @@ -48,7 +48,6 @@ - @@ -62,11 +61,10 @@ - + - + - @@ -77,69 +75,70 @@ - - - - - - - + + + + + + - - - - - - - + + + + - - + + - - - + + - - + + - - - + + + - - + + - - + + - - + + - - + + - - - - - + + + + + + + + + + + - + - + - + @@ -157,29 +156,37 @@ - + - - - - + + + - - - - - - - - - - + - + + + + + + + + + + + + + + + + + + + @@ -191,19 +198,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - + @@ -219,7 +256,7 @@ - + @@ -235,6 +272,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -251,7 +349,7 @@ - + @@ -267,66 +365,43 @@ - - - - - - - - - - - + - - - - - - - - - + + + - - - - - - - - - - + - - - - + + + + + - + - - - - + + + + + - + - + @@ -342,7 +417,7 @@ - + @@ -358,7 +433,19 @@ - + + + + + + + + + + + + + @@ -374,12 +461,13 @@ - - - - + + + + + - + @@ -395,13 +483,7 @@ - - - - - - - + @@ -417,7 +499,32 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -433,7 +540,7 @@ - + @@ -449,13 +556,7 @@ - - - - - - - + @@ -471,7 +572,7 @@ - + @@ -487,19 +588,7 @@ - - - - - - - - - - - - - + @@ -515,13 +604,7 @@ - - - - - - - + @@ -537,13 +620,7 @@ - - - - - - - + @@ -559,13 +636,7 @@ - - - - - - - + @@ -581,13 +652,7 @@ - - - - - - - + @@ -603,13 +668,7 @@ - - - - - - - + @@ -625,19 +684,23 @@ - - - - - - - - - + + + + - + + + + + + + + + + - + @@ -653,12 +716,6 @@ - - - - - - @@ -675,13 +732,7 @@ - - - - - - - + @@ -697,13 +748,7 @@ - - - - - - - + @@ -719,7 +764,7 @@ - + @@ -735,7 +780,7 @@ - + @@ -751,13 +796,7 @@ - - - - - - - + @@ -773,7 +812,7 @@ - + @@ -789,7 +828,7 @@ - + @@ -805,13 +844,7 @@ - - - - - - - + @@ -827,21 +860,23 @@ - - - - - - - - - + + + + + + + + + + + - + @@ -857,13 +892,7 @@ - - - - - - - + @@ -879,18 +908,7 @@ - - - - - - - - - - - - + @@ -906,7 +924,7 @@ - + @@ -922,7 +940,7 @@ - + @@ -938,13 +956,7 @@ - - - - - - - + @@ -960,7 +972,7 @@ - + @@ -976,7 +988,7 @@ - + @@ -992,13 +1004,7 @@ - - - - - - - + @@ -1014,54 +1020,54 @@ - - - + + + + + + - - - - - - - - - - + + + - + + + - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -1606,8 +1612,8 @@ - - + + Vannevar Bush @@ -3302,8 +3308,8 @@ - - + + @@ -3356,8 +3362,8 @@ Neutral 2 - - + + @@ -3424,8 +3430,8 @@ Neutral 2 - - + + Neutral @@ -3740,22 +3746,26 @@ 100 - - - - - - - + + + + + + + + + - - - - - - - + + + + + + + + + @@ -3787,20 +3797,20 @@ 100 - - + + - - + + - - + + - - + + @@ -3845,8 +3855,8 @@ - - + + @@ -3879,7 +3889,7 @@ ****** - + Password @@ -3904,11 +3914,11 @@ - - + + - - + + @@ -3923,27 +3933,27 @@ - - + + - - + + - + Search - - + + - - + + @@ -3953,11 +3963,11 @@ Search - - + + - - + + @@ -3988,25 +3998,25 @@ - + Placeholder - - + + - - + + - - + + - - + + @@ -4030,8 +4040,8 @@ Providing input - - + + @@ -4064,8 +4074,8 @@ - - + + @@ -4123,28 +4133,28 @@ - + - + - + - + @@ -4190,7 +4200,7 @@ - + @@ -4219,38 +4229,38 @@ - + - + - - + + - + - + - - + + @@ -4350,7 +4360,7 @@ touch area features `width: 2em;` `height: 2em;` - + @@ -4431,38 +4441,38 @@ - + - + - - + + - + - + - - + + @@ -4488,11 +4498,11 @@ - - + + - - + + @@ -4629,7 +4639,7 @@ Neutral point - + @@ -4664,7 +4674,7 @@ - + @@ -4688,38 +4698,38 @@ - + - + - - + + - + - + - - + + @@ -4777,109 +4787,124 @@ - - - Normal Hover Active Focus Visited - - - Normal Hover Active Focus Visited + + + UNDERLINED LINK - - - UNDERLINED LINK - - - - + + - - - + + + + + Neutral point of view - + + + + + + Neutral point of view + + + - - - - + + + + Neutral point of view + + + + + + Neutral point of view - + - - - - Neutral point of view - - - - - + + Neutral point of view + - - - - Neutral point of view - - - - - Neutral point of view + + Normal Hover Active Focus Visited - - - - - - Neutral point of view + + + UNDERLINED LINK - + + + - - - + + + + + Neutral point of view + + + + + + + + Neutral point of view + + + + + + + + Neutral point of view + + + + + + + Neutral point of view + + + + + + Neutral point of view - - - - - Neutral point of view - - - - - - Neutral point of view + + Normal Hover Active Focus Visited - - + - + - + - + @@ -4987,20 +5012,20 @@ - + - + - - + + @@ -5212,20 +5237,20 @@ - + - + - - + + @@ -5245,11 +5270,11 @@ - - + + - - + + @@ -5263,11 +5288,11 @@ Toggle - - + + - - + + @@ -5420,20 +5445,20 @@ - + - + - - + +