From d44bce729bc908c57abc9663ce12a96d6d3ae888 Mon Sep 17 00:00:00 2001 From: Mark Hadley Date: Mon, 12 Feb 2024 17:58:23 -0600 Subject: [PATCH] Revert "V5 final final" --- README.md | 11 +- css/tachyons.css | 7750 +++++++++++--------------------- css/tachyons.min.css | 4 +- index.html | 429 +- package.json | 27 +- src/_align-content.css | 44 - src/_align-items.css | 40 - src/_align-self.css | 41 - src/_all.css | 12 - src/_aspect-ratios.css | 183 +- src/_backdrop-filters.css | 76 - src/_background-position.css | 18 +- src/_background-size.css | 46 +- src/_border-colors.css | 70 +- src/_border-radius.css | 106 +- src/_border-style.css | 16 +- src/_border-widths.css | 68 +- src/_borders.css | 50 +- src/_box-shadow.css | 139 +- src/_box-sizing.css | 49 +- src/_clears.css | 22 + src/_code.css | 5 +- src/_colors.css | 80 + src/_container-type.css | 35 - src/_coordinates.css | 183 +- src/_debug-children.css | 9 +- src/_debug-grid.css | 21 +- src/_debug.css | 237 +- src/_display.css | 131 +- src/_element-defaults.css | 113 - src/_filters.css | 73 - src/_flex-direction.css | 37 - src/_flex-wrap.css | 32 - src/_flexbox.css | 198 +- src/_floats.css | 26 +- src/_font-family.css | 98 +- src/_font-style.css | 16 +- src/_font-weight.css | 30 +- src/_forms.css | 1 - src/_gap-column.css | 59 - src/_gap-row.css | 59 - src/_gap.css | 59 - src/_glass.css | 202 - src/_gradients.css | 57 - src/_grid-column.css | 242 - src/_grid-row.css | 161 - src/_grid-template-columns.css | 135 - src/_grid.css | 23 - src/_heights.css | 65 +- src/_hovers.css | 31 +- src/_images.css | 16 +- src/_justify-content.css | 41 - src/_justify-self.css | 36 - src/_letter-spacing.css | 32 +- src/_line-height.css | 32 +- src/_links.css | 10 +- src/_max-widths.css | 30 +- src/_media-queries.css | 18 +- src/_module-template.css | 6 +- src/_negative-margins.css | 324 +- src/_nested.css | 8 +- src/_normalize.css | 10 +- src/_opacity.css | 54 +- src/_order.css | 60 - src/_outlines.css | 30 +- src/_overflow.css | 32 +- src/_position.css | 20 +- src/_rotations.css | 20 +- src/_skins-pseudo.css | 996 +--- src/_skins.css | 696 +-- src/_spacing.css | 2010 ++++----- src/_tables.css | 24 +- src/_text-align.css | 16 +- src/_text-decoration.css | 21 +- src/_text-shadow.css | 32 - src/_text-transform.css | 16 +- src/_type-scale.css | 127 +- src/_typography.css | 71 +- src/_utilities.css | 19 +- src/_variables.css | 392 -- src/_vertical-align.css | 16 +- src/_visibility.css | 60 +- src/_white-space.css | 14 +- src/_widths.css | 117 +- src/_word-break.css | 14 +- src/tachyons.css | 33 +- yarn.lock | 2383 ---------- 87 files changed, 5637 insertions(+), 13818 deletions(-) delete mode 100644 src/_align-content.css delete mode 100644 src/_align-items.css delete mode 100644 src/_align-self.css delete mode 100644 src/_all.css delete mode 100644 src/_backdrop-filters.css create mode 100644 src/_colors.css delete mode 100644 src/_container-type.css delete mode 100644 src/_element-defaults.css delete mode 100644 src/_filters.css delete mode 100644 src/_flex-direction.css delete mode 100644 src/_flex-wrap.css delete mode 100644 src/_gap-column.css delete mode 100644 src/_gap-row.css delete mode 100644 src/_gap.css delete mode 100644 src/_glass.css delete mode 100644 src/_gradients.css delete mode 100644 src/_grid-column.css delete mode 100644 src/_grid-row.css delete mode 100644 src/_grid-template-columns.css delete mode 100644 src/_grid.css delete mode 100644 src/_justify-content.css delete mode 100644 src/_justify-self.css delete mode 100644 src/_order.css delete mode 100644 src/_text-shadow.css delete mode 100644 src/_variables.css delete mode 100644 yarn.lock diff --git a/README.md b/README.md index eca53b2aa..ad7dee335 100644 --- a/README.md +++ b/README.md @@ -19,16 +19,17 @@ Quickly build and design new UI without writing CSS. ## Features * Mobile-first CSS architecture +* 490 accessible color combinations * 8px baseline grid * Multiple debugging utilities to reduce layout struggles * Single-purpose class structure * Optimized for maximum gzip compression -* Lightweight (~19.4kB) +* Lightweight (~14kB) * Usable across projects * Growing open source component library -* Works well with plain HTML, React, Ember, Angular, Rails Svelte, Vue, and more +* Works well with plain HTML, React, Ember, Angular, Rails and more * Infinitely nestable responsive grid system -* Works out of the box but easy to customize and extend +* Built with PostCSS ## Getting Started @@ -127,11 +128,11 @@ And of course... Development of Tachyons is supported by -* [Components AI](https://components.ai) +* [Digital Ocean](https://digitalocean.com) * [DWYL](https://dwyl.com) * [VTEX](https://vtex.com) * [Manifold](https://manifold.co) ## Help -If you have a question or need help feel free to [open an issue here](https://github.com/tachyons-css/tachyons/issues/new). +If you have a question or need help feel free to [open an issue here](https://github.com/tachyons-css/tachyons/issues/new) or jump into the [Tachyons slack channel](http://tachyons-slack-invite.herokuapp.com). diff --git a/css/tachyons.css b/css/tachyons.css index 5c6eeface..75387e6b8 100644 --- a/css/tachyons.css +++ b/css/tachyons.css @@ -1,4 +1,4 @@ -/*! TACHYONS v5.0.0.beta | http://tachyons.io */ +/*! TACHYONS v4.12.0 | http://tachyons.io */ /* * * ________ ______ @@ -22,7 +22,7 @@ * */ /* External Library Includes */ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** @@ -36,10 +36,6 @@ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } * Remove the margin in all browsers. */ body { margin: 0; } -/** - * Render the `main` element consistently in IE. - */ -main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. @@ -188,511 +184,62 @@ template { display: none; } * Add the correct display in IE 10. */ [hidden] { display: none; } -/* Variables */ -/* Importing here will allow you to override any variables in the modules */ -/* - - CUSTOM MEDIA QUERIES - - Media query values can be changed to fit your own content. - There are no magic bullets when it comes to media query width values. - They should be declared in em units - and they should be set to meet - the needs of your content. You can also add additional media queries, - or remove some of the existing ones. - - These media queries can be referenced like so: - - @container (min-width:30em) { - .example-s { - background-color: red; - } - } - - @container (min-width:48em) { - .example-m { - background-color: red; - } - } - - @container (min-width:64em) { - .example-l { - background-color: red; - } - } - -*/ -/* Media Queries */ -/* - - VARIABLES - - -*/ -:root {/* - * COLORS - * A balanced color system optimized for accessibility - * Theme generated with https://components.ai/theme - * The first six steps in each scale are accessible with white - * - */ - --tint-0: hsla( 0, 0%, 100%, .035 ); - --tint-1: hsla( 0, 0%, 100%, .1 ); - --tint-2: hsla( 0, 0%, 100%, .19 ); - --tint-3: hsla( 0, 0%, 100%, .28 ); - --tint-4: hsla( 0, 0%, 100%, .36 ); - --tint-5: hsla( 0, 0%, 100%, .45 ); - --tint-6: hsla( 0, 0%, 100%, .55 ); - --tint-7: hsla( 0, 0%, 100%, .64 ); - --tint-8: hsla( 0, 0%, 100%, .73 ); - --tint-9: hsla( 0, 0%, 100%, .815 ); - --tint-10: hsla( 0, 0%, 100%, .895 ); - --tint-11: hsla( 0, 0%, 100%, .94 ); - --shadow-11: hsla( 0, 0%, 0%, .94 ); - --shadow-10: hsla( 0, 0%, 0%, .895 ); - --shadow-9: hsla( 0, 0%, 0%, .815 ); - --shadow-8: hsla( 0, 0%, 0%, .73 ); - --shadow-7: hsla( 0, 0%, 0%, .64 ); - --shadow-6: hsla( 0, 0%, 0%, .55 ); - --shadow-5: hsla( 0, 0%, 0%, .45 ); - --shadow-4: hsla( 0, 0%, 0%, .36 ); - --shadow-3: hsla( 0, 0%, 0%, .28 ); - --shadow-2: hsla( 0, 0%, 0%, .19 ); - --shadow-1: hsla( 0, 0%, 0%, .1 ); - --shadow-0: hsla( 0, 0%, 0%, .035 ); - --gray-0: #000; - --gray-1: #171717; - --gray-2: #2f2f2f; - --gray-3: #464646; - --gray-4: #5e5e5e; - --gray-5: #757575; - --gray-6: #8c8c8c; - --gray-7: #a3a3a3; - --gray-8: #bababa; - --gray-9: #d1d1d1; - --gray-10: #e8e8e8; - --gray-11: #fff; - --slate-gray-0: #09090b; - --slate-gray-1: #1d1d22; - --slate-gray-2: #313138; - --slate-gray-3: #45444f; - --slate-gray-4: #595866; - --slate-gray-5: #6d6c7d; - --slate-gray-6: #838292; - --slate-gray-7: #9a9aa7; - --slate-gray-8: #b2b1bb; - --slate-gray-9: #c9c9d0; - --slate-gray-10: #e1e0e4; - --slate-gray-11: #f8f8f9; - --blue-1: #071e3f; - --blue-2: #0c3166; - --blue-3: #10448d; - --blue-4: #1556b4; - --blue-5: #1969db; - --blue-6: #317fed; - --blue-7: #5797f0; - --blue-8: #7daef4; - --blue-9: #a3c6f7; - --blue-10: #c9ddfa; - --blue-11: #eff5fe; - --indigo-0: #080614; - --indigo-1: #19143f; - --indigo-2: #2a216a; - --indigo-3: #3a2e95; - --indigo-4: #4b3bc0; - --indigo-5: #5c49eb; - --indigo-6: #725fff; - --indigo-7: #8c7cff; - --indigo-8: #a69aff; - --indigo-9: #c0b7ff; - --indigo-10: #dad5ff; - --indigo-11: #f4f3ff; - --violet-0: #110517; - --violet-1: #2e0d3e; - --violet-2: #4b1465; - --violet-3: #681c8c; - --violet-4: #8424b3; - --violet-5: #a12cda; - --violet-6: #b543ec; - --violet-7: #c366f0; - --violet-8: #d089f3; - --violet-9: #deabf7; - --violet-10: #eccefa; - --violet-11: #f9f0fe; - --magenta-0: #13040f; - --magenta-1: #350a2c; - --magenta-2: #581148; - --magenta-3: #7b1765; - --magenta-4: #9e1e82; - --magenta-5: #c1249e; - --magenta-6: #d43cb2; - --magenta-7: #dc61c1; - --magenta-8: #e485cf; - --magenta-9: #eca9dd; - --magenta-10: #f4ceec; - --magenta-11: #fcf2fa; - --red-0: #120205; - --red-1: #39050f; - --red-2: #5f0819; - --red-3: #860b24; - --red-4: #ac0e2e; - --red-5: #d31138; - --red-6: #e7284e; - --red-7: #ec506f; - --red-8: #f07790; - --red-9: #f49fb0; - --red-10: #f9c7d1; - --red-11: #fdeef1; - --red-orange-0: #190b05; - --red-orange-1: #3d1307; - --red-orange-2: #601b0a; - --red-orange-3: #84240c; - --red-orange-4: #a72c0e; - --red-orange-5: #cb3411; - --red-orange-6: #ee3c13; - --red-orange-7: #fe562f; - --red-orange-8: #fe7d5e; - --red-orange-9: #ffa48e; - --red-orange-10: #ffccbe; - --red-orange-11: #fff3ee; - --orange-0: #150d04; - --orange-1: #2e1c08; - --orange-2: #472a0c; - --orange-3: #603910; - --orange-4: #794714; - --orange-5: #a65d13; - --orange-6: #d37413; - --orange-7: #ff8a14; - --orange-8: #ffa54a; - --orange-9: #ffc081; - --orange-10: #ffdab7; - --orange-11: #fff5ed; - --gold-0: #140e05; - --gold-1: #2c1f0a; - --gold-2: #432f0e; - --gold-3: #5b4013; - --gold-4: #725118; - --gold-5: #946818; - --gold-6: #d4950d; - --gold-7: #eeb028; - --gold-8: #f2c259; - --gold-9: #f7d38a; - --gold-10: #fbe5bc; - --gold-11: #fff5e9; - --yellow-0: #111006; - --yellow-1: #252405; - --yellow-2: #3a3804; - --yellow-3: #4e4d03; - --yellow-4: #636101; - --yellow-5: #777500; - --yellow-6: #ccc500; - --yellow-7: #fcf433; - --yellow-8: #fdf67a; - --yellow-9: #fdf89b; - --yellow-10: #fef9bb; - --yellow-11: #fefadb; - --green-0: #091108; - --green-1: #0f2611; - --green-2: #153c1a; - --green-3: #1b5122; - --green-4: #21662b; - --green-5: #25833a; - --green-6: #26b056; - --green-7: #35d272; - --green-8: #63dd90; - --green-9: #90e8ae; - --green-10: #bdf3cc; - --green-11: #eafeea; - --teal-0: #07100c; - --teal-1: #0c231a; - --teal-2: #113628; - --teal-3: #164936; - --teal-4: #1b5b45; - --teal-5: #177f63; - --teal-6: #12a282; - --teal-7: #2abb9b; - --teal-8: #5acab1; - --teal-9: #8bdac7; - --teal-10: #bbe9dc; - --teal-11: #ecf8f2; - --cyan-0: #0a1211; - --cyan-1: #102425; - --cyan-2: #153639; - --cyan-3: #1b484c; - --cyan-4: #215a60; - --cyan-5: #247981; - --cyan-6: #24a9b6; - --cyan-7: #28d6e6; - --cyan-8: #57e0ec; - --cyan-9: #85eaf2; - --cyan-10: #b4f5f9; - --cyan-11: #e2ffff; - --transparent: hsla( 0, 0, 0, 0 ); - @supports (color: color(display-p3 1 1 1)) { - :root { --blue-0: color( display-p3 0 .07 .25 ); --blue-1: color( display-p3 0 .09 .32 ); --blue-2: color( display-p3 0 .11 .42 ); --blue-3: color( display-p3 0 .15 .53 ); --blue-4: color( display-p3 0 .16 .7 ); --blue-5: color( display-p3 0 .22 .88 ); --blue-6: color( display-p3 .06 .37 1 ); --blue-7: color( display-p3 .38 .59 1 ); --blue-8: color( display-p3 .66 .79 1 ); --blue-9: color( display-p3 .79 .86 .99 ); --blue-10: color( display-p3 .87 .92 .99 ); --blue-11: color( display-p3 .92 .95 1 ); --indigo-0: color( display-p3 .06 .03 .21 ); --indigo-1: color( display-p3 .09 .07 .26 ); --indigo-2: color( display-p3 .15 .11 .42 ); --indigo-3: color( display-p3 .18 .14 .57 ); --indigo-4: color( display-p3 .2 .18 .75 ); --indigo-5: color( display-p3 .26 .22 1 ); --indigo-6: color( display-p3 .28 .28 1 ); --indigo-7: color( display-p3 .47 .49 1 ); --indigo-8: color( display-p3 .67 .68 1 ); --indigo-9: color( display-p3 .81 .81 .98 ); --indigo-10: color( display-p3 .87 .92 .99 ); --indigo-11: color( display-p3 .92 .95 1 ); } - } - --degrees-1: 0; - --degrees-2: 45deg; - --degrees-3: 90deg; - --degrees-4: 135deg; - --degrees-5: 180deg; - --degrees-6: 225deg; - --degrees-7: 270deg; - --degrees-8: 315deg; - --gradient-degree-0: var( --degrees-1, 0 ); - --gradient-degree: var( --degrees-2, 45deg ); - --gradient-degree-2: var( --degrees-4, 135deg ); - --gradient-stripe-width: 12px; - --gradient-stripe-width-2: var( --border-width-1 ); - --gradient-color-1: var( --blue-2 ); - --gradient-color-2: var( --magenta-6 ); - --gradient-color-3: var( --red-5 ); - --gradient-color-4: var( --indigo-5 ); - --gradient-color-5: var( --violet-0 ); - --gradient-color-6: var( --violet-5 ); - --gradient-color-7: var( --magenta-0 ); - --gradient-color-8: var( --magenta-5 ); - --gradient-color-9: var( --red-0 ); - --gradient-color-10: var( --red-5 ); - --gradient-color-11: var( --red-orange-0 ); - --gradient-color-12: var( --red-orange-5 ); - --gradient-color-13: var( --orange-0 ); - --gradient-color-14: var( --orange-5 ); - --gradient-color-15: var( --gold-0 ); - --gradient-color-16: var( --gold-5 ); - --gradient-color-17: var( --yellow-0 ); - --gradient-color-18: var( --yellow-5 ); - --gradient-color-19: var( --green-0 ); - --gradient-color-20: var( --green-5 ); - --gradient-color-21: var( --teal-0 ); - --gradient-color-22: var( --teal-5 ); - --gradient-color-23: var( --cyan-0 ); - --gradient-color-24: var( --cyan-5 ); - --gradient-stop: 50%; - --font-size-1: 12px; - --font-size-2: 14px; - --font-size-3: 16px; - --font-size-4: 20px; - --font-size-5: 24px; - --font-size-6: 32px; - --font-size-7: 48px; - --font-size-8: 64px; - --font-size-9: 96px; - --font-size-10: 128px; - --font-size-11: 192px; - --font-size-12: 256px; - --measure-narrow: 45ch; - --measure: 66ch; - --measure-wide: 80ch; - --border-radius-0: 0; - --border-radius-1: 4px; - --border-radius-2: 6px; - --border-radius-3: 8px; - --border-radius-4: 12px; - --border-radius-5: 16px; - --border-radius-6: 20px; - --border-radius-7: 24px; - --border-radius-8: 32px; - --border-radius-9: 48px; - --border-radius-10: 64px; - --border-radius-11: 9999px; - --border-radius: var( --border-radius-2 ); - --border-width-0: 0; - --border-width-1: 1px; - --border-width-2: 2px; - --border-width-3: 4px; - --border-width-4: 8px; - --border-width-5: 16px; - --border-width: var( --border-width-1, 1px ); - --border-color: var( --gray-5, gray ); - --line-height-solid: 1; - --line-height-heading: 1.25; - --line-height-body: 1.5; - --letter-spacing-tracked: .1em; - --letter-spacing-tight: -0.05em; - --letter-spacing-large: .25em; - --font-family-heading: Inter, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; - --font-family-body: Inter, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; - --font-family-mono: Inconsolata, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; - --spacing-0: 0; - --spacing-1: 2px; - --spacing-2: 4px; - --spacing-3: 8px; - --spacing-4: 16px; - --spacing-5: 32px; - --spacing-6: 64px; - --spacing-7: 128px; - --spacing-8: 256px; - --spacing-9: 512px; - --size-0: 0; - --size-1: 1rem; - --size-2: 2rem; - --size-3: 3rem; - --size-4: 4rem; - --size-5: 8rem; - --size-6: 16rem; - --size-7: 32rem; - --size-8: 64rem; - --shadow-color: 0 0 0; - --shadow-color-invert: 255 255 255; - --shadow-border-width: 1px; - --shadow-opacity: .25; /* Opacity scale */ - --opacity-0: 0; - --opacity-1: .025; - --opacity-2: .05; - --opacity-3: .1; - --opacity-4: .2; - --opacity-5: .3; - --opacity-6: .4; - --opacity-7: .5; - --opacity-8: .6; - --opacity-9: .7; - --opacity-10: .8; - --opacity-11: .9; - --opacity-12: 1; - --duration-0: 125ms; - --duration-1: 250ms; - --duration-2: 500ms; - --easing-function-0: cubic-bezier( .543, 1.086, .5, -0.383 ); - --easing-function-1: ease; - --easing-function-2: ease-out; - --easing-function-3: ease-in-out; - --easing-function-4: linear; -} -/* - - GRADIENTS - - -*/ -.gradient-1 { background: linear-gradient( var( --gradient-degree ), var( --gradient-color-1 ), var( --gradient-color-2 ) ); } -.gradient-2 { background: linear-gradient( var( --gradient-degree ), var( --gradient-color-1 ) var( --gradient-stop ), var( --gradient-color-2 ) var( --gradient-stop ) ); } -.gradient-3 { background: repeating-linear-gradient( var( --gradient-degree ), transparent 0, transparent var( --gradient-stripe-width ), var( --gradient-color-1 ) var( --gradient-stripe-width ), var( --gradient-color-1 ) calc( var( --gradient-stripe-width ) + var( --gradient-stripe-width-2 ) ) ); } -.gradient-4 { background: repeating-radial-gradient( circle, transparent 0, transparent var( --gradient-stripe-width ), var( --gradient-color-1 ) var( --gradient-stripe-width ), var( --gradient-color-1 ) calc( var( --gradient-stripe-width ) + var( --gradient-stripe-width-2 ) ) ); } -@container (min-width:30em) { } -@container (min-width:48em) { } -@container (min-width:64em) { } /* Modules */ /* BOX SIZING */ -*, *::before, *::after, .border-box, .border-box::before, .border-box::after { box-sizing: border-box; } -.content-box { box-sizing: content-box; } -/* - - CONTAINER-TYPE - - Media Query Extensions: - -s = small - -m = medium - -l = large - - MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/container-type - -*/ -.container-size { container-type: size; } -.root, .container-inline { container-type: inline-size; } -.container-normal { container-type: normal; } -@container (min-width:30em) { - .container-size-s { container-type: size; } - .container-inline-s { container-type: inline-size; } - .container-normal-s { container-type: normal; } -} -@container (min-width:48em) { - .container-size-m { container-type: size; } - .container-inline-m { container-type: inline-size; } - .container-normal-m { container-type: normal; } -} -@container (min-width:64em) { - .container-size-l { container-type: size; } - .container-inline-l { container-type: inline-size; } - .container-normal-l { container-type: normal; } -} -/* - - ALL - - MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/all - -*/ -.unset { all: unset; } -.initial { all: initial; } -.inherit { all: inherit; } -.revert { all: revert; } +html, body, div, article, aside, section, main, nav, footer, header, form, +fieldset, legend, pre, code, a, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, +dd, blockquote, figcaption, figure, textarea, table, td, th, tr, +input[type="email"], input[type="number"], input[type="password"], +input[type="tel"], input[type="text"], input[type="url"], .border-box { box-sizing: border-box; } /* ASPECT RATIOS - MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio */ -.aspect-ratio-16x9 { aspect-ratio: 16 / 9; } -.aspect-ratio-9x16 { aspect-ratio: 9 / 16; } -.aspect-ratio-4x3 { aspect-ratio: 4 / 3; } -.aspect-ratio-3x4 { aspect-ratio: 3 / 4; } -.aspect-ratio-6x4 { aspect-ratio: 6 / 4; } -.aspect-ratio-4x6 { aspect-ratio: 4 / 6; } -.aspect-ratio-8x5 { aspect-ratio: 8 / 5; } -.aspect-ratio-5x8 { aspect-ratio: 5 / 8; } -.aspect-ratio-7x5 { aspect-ratio: 7 / 5; } -.aspect-ratio-5x7 { aspect-ratio: 5 / 7; } -.aspect-ratio-square, .aspect-ratio-1x1 { aspect-ratio: 1 / 1; } -@container (min-width:30em) { - .aspect-ratio-16x9-s { aspect-ratio: 16 / 9; } - .aspect-ratio-9x16-s { aspect-ratio: 9 / 16; } - .aspect-ratio-4x3-s { aspect-ratio: 4 / 3; } - .aspect-ratio-3x4-s { aspect-ratio: 3 / 4; } - .aspect-ratio-6x4-s { aspect-ratio: 6 / 4; } - .aspect-ratio-4x6-s { aspect-ratio: 4 / 6; } - .aspect-ratio-8x5-s { aspect-ratio: 8 / 5; } - .aspect-ratio-5x8-s { aspect-ratio: 5 / 8; } - .aspect-ratio-7x5-s { aspect-ratio: 7 / 5; } - .aspect-ratio-5x7-s { aspect-ratio: 5 / 7; } - .aspect-ratio-square-s, .aspect-ratio-1x1-s { aspect-ratio: 1 / 1; } -} -@container (min-width:48em) { - .aspect-ratio-16x9-m { aspect-ratio: 16 / 9; } - .aspect-ratio-9x16-m { aspect-ratio: 9 / 16; } - .aspect-ratio-4x3-m { aspect-ratio: 4 / 3; } - .aspect-ratio-3x4-m { aspect-ratio: 3 / 4; } - .aspect-ratio-6x4-m { aspect-ratio: 6 / 4; } - .aspect-ratio-4x6-m { aspect-ratio: 4 / 6; } - .aspect-ratio-8x5-m { aspect-ratio: 8 / 5; } - .aspect-ratio-5x8-m { aspect-ratio: 5 / 8; } - .aspect-ratio-7x5-m { aspect-ratio: 7 / 5; } - .aspect-ratio-5x7-m { aspect-ratio: 5 / 7; } - .aspect-ratio-square-m, .aspect-ratio-1x1-m { aspect-ratio: 1 / 1; } -} -@container (min-width:64em) { - .aspect-ratio-16x9-l { aspect-ratio: 16 / 9; } - .aspect-ratio-9x16-l { aspect-ratio: 9 / 16; } - .aspect-ratio-4x3-l { aspect-ratio: 4 / 3; } - .aspect-ratio-3x4-l { aspect-ratio: 3 / 4; } - .aspect-ratio-6x4-l { aspect-ratio: 6 / 4; } - .aspect-ratio-4x6-l { aspect-ratio: 4 / 6; } - .aspect-ratio-8x5-l { aspect-ratio: 8 / 5; } - .aspect-ratio-5x8-l { aspect-ratio: 5 / 8; } - .aspect-ratio-7x5-l { aspect-ratio: 7 / 5; } - .aspect-ratio-5x7-l { aspect-ratio: 5 / 7; } - .aspect-ratio-square-l, .aspect-ratio-1x1-l { aspect-ratio: 1 / 1; } -} +/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc. + * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e + * Make sure there are no height and width attributes on the embedded media. + * Adapted from: https://github.com/suitcss/components-flex-embed + * + * Example: + * + *
+ * + *
+ * + * */ +.aspect-ratio { height: 0; position: relative; } +.aspect-ratio--16x9 { padding-bottom: 56.25%; } +.aspect-ratio--9x16 { padding-bottom: 177.77%; } +.aspect-ratio--4x3 { padding-bottom: 75%; } +.aspect-ratio--3x4 { padding-bottom: 133.33%; } +.aspect-ratio--6x4 { padding-bottom: 66.6%; } +.aspect-ratio--4x6 { padding-bottom: 150%; } +.aspect-ratio--8x5 { padding-bottom: 62.5%; } +.aspect-ratio--5x8 { padding-bottom: 160%; } +.aspect-ratio--7x5 { padding-bottom: 71.42%; } +.aspect-ratio--5x7 { padding-bottom: 140%; } +.aspect-ratio--1x1 { padding-bottom: 100%; } +.aspect-ratio--object { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; } /* IMAGES Docs: http://tachyons.io/docs/elements/images/ */ -img { display: block; max-width: 100%; } -.random-image { background-image: url( https://source.unsplash.com/random/ ); background-size: cover; } -.random-image-landscape { background-image: url( https://source.unsplash.com/random/1920x1080 ); background-size: cover; } -.random-image-portrait { background-image: url( https://source.unsplash.com/random/1080x1920 ); background-size: cover; } +/* Responsive images! */ +img { max-width: 100%; } /* BACKGROUND SIZE Docs: http://tachyons.io/docs/themes/background-size/ Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -703,50 +250,6 @@ img { display: block; max-width: 100%; } */ .cover { background-size: cover !important; } .contain { background-size: contain !important; } -.bg1 { background-size: 4px; } -.bg2 { background-size: 8px; } -.bg3 { background-size: 16px; } -.bg4 { background-size: 32px; } -.bg5 { background-size: 64px; } -.bg6 { background-size: 100%; } -.bg7 { background-size: 150%; } -.bg8 { background-size: 200%; } -@container (min-width:30em) { - .cover-s { background-size: cover !important; } - .contain-s { background-size: contain !important; } - .bg1-s { background-size: 4px; } - .bg2-s { background-size: 8px; } - .bg3-s { background-size: 16px; } - .bg4-s { background-size: 32px; } - .bg5-s { background-size: 64px; } - .bg6-s { background-size: 100%; } - .bg7-s { background-size: 150%; } - .bg8-s { background-size: 200%; } -} -@container (min-width:48em) { - .cover-m { background-size: cover !important; } - .contain-m { background-size: contain !important; } - .bg1-m { background-size: 4px; } - .bg2-m { background-size: 8px; } - .bg3-m { background-size: 16px; } - .bg4-m { background-size: 32px; } - .bg5-m { background-size: 64px; } - .bg6-m { background-size: 100%; } - .bg7-m { background-size: 150%; } - .bg8-m { background-size: 200%; } -} -@container (min-width:64em) { - .cover-l { background-size: cover !important; } - .contain-l { background-size: contain !important; } - .bg1-l { background-size: 4px; } - .bg2-l { background-size: 8px; } - .bg3-l { background-size: 16px; } - .bg4-l { background-size: 32px; } - .bg5-l { background-size: 64px; } - .bg6-l { background-size: 100%; } - .bg7-l { background-size: 150%; } - .bg8-l { background-size: 200%; } -} /* BACKGROUND POSITION @@ -762,7 +265,7 @@ img { display: block; max-width: 100%; } -left = center left Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -772,59 +275,19 @@ img { display: block; max-width: 100%; } .bg-right { background-repeat: no-repeat; background-position: center right; } .bg-bottom { background-repeat: no-repeat; background-position: bottom center; } .bg-left { background-repeat: no-repeat; background-position: center left; } -@container (min-width:30em) { - .bg-center-s { background-repeat: no-repeat; background-position: center center; } - .bg-top-s { background-repeat: no-repeat; background-position: top center; } - .bg-right-s { background-repeat: no-repeat; background-position: center right; } - .bg-bottom-s { background-repeat: no-repeat; background-position: bottom center; } - .bg-left-s { background-repeat: no-repeat; background-position: center left; } -} -@container (min-width:48em) { - .bg-center-m { background-repeat: no-repeat; background-position: center center; } - .bg-top-m { background-repeat: no-repeat; background-position: top center; } - .bg-right-m { background-repeat: no-repeat; background-position: center right; } - .bg-bottom-m { background-repeat: no-repeat; background-position: bottom center; } - .bg-left-m { background-repeat: no-repeat; background-position: center left; } -} -@container (min-width:64em) { - .bg-center-l { background-repeat: no-repeat; background-position: center center; } - .bg-top-l { background-repeat: no-repeat; background-position: top center; } - .bg-right-l { background-repeat: no-repeat; background-position: center right; } - .bg-bottom-l { background-repeat: no-repeat; background-position: bottom center; } - .bg-left-l { background-repeat: no-repeat; background-position: center left; } -} /* OUTLINES Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ -.outline { outline: var( --border-width, 1px ) solid currentColor; } -.outline-color { outline: var( --border-width, 1px ) solid var( --border-color, gray ); } -.outline-transparent { outline: var( --border-width, 1px ) solid transparent; } +.outline { outline: 1px solid; } +.outline-transparent { outline: 1px solid transparent; } .outline-0 { outline: 0; } -@container (min-width:30em) { - .outline-s { outline: var( --border-width, 1px ) solid currentColor; } - .outline-color-s { outline: var( --border-width, 1px ) solid var( --border-color, gray ); } - .outline-transparent-s { outline: var( --border-width, 1px ) solid transparent; } - .outline-0-s { outline: 0; } -} -@container (min-width:48em) { - .outline-m { outline: var( --border-width, 1px ) solid currentColor; } - .outline-color-m { outline: var( --border-width, 1px ) solid var( --border-color, gray ); } - .outline-transparent-m { outline: var( --border-width, 1px ) solid transparent; } - .outline-0-m { outline: 0; } -} -@container (min-width:64em) { - .outline-l { outline: var( --border-width, 1px ) solid currentColor; } - .outline-color-l { outline: var( --border-width, 1px ) solid var( --border-color, gray ); } - .outline-transparent-l { outline: var( --border-width, 1px ) solid transparent; } - .outline-0-l { outline: 0; } -} /* BORDERS @@ -842,41 +305,17 @@ img { display: block; max-width: 100%; } n = none Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ -.ba { border-style: solid; border-width: var( --border-width, 1px ); } -.bt { border-top-style: solid; border-top-width: var( --border-width, 1px ); } -.br { border-right-style: solid; border-right-width: var( --border-width, 1px ); } -.bb { border-bottom-style: solid; border-bottom-width: var( --border-width, 1px ); } -.bl { border-left-style: solid; border-left-width: var( --border-width, 1px ); } +.ba { border-style: solid; border-width: 1px; } +.bt { border-top-style: solid; border-top-width: 1px; } +.br { border-right-style: solid; border-right-width: 1px; } +.bb { border-bottom-style: solid; border-bottom-width: 1px; } +.bl { border-left-style: solid; border-left-width: 1px; } .bn { border-style: none; border-width: 0; } -@container (min-width:30em) { - .ba-s { border-style: solid; border-width: var( --border-width, 1px ); } - .bt-s { border-top-style: solid; border-top-width: var( --border-width, 1px ); } - .br-s { border-right-style: solid; border-right-width: var( --border-width, 1px ); } - .bb-s { border-bottom-style: solid; border-bottom-width: var( --border-width, 1px ); } - .bl-s { border-left-style: solid; border-left-width: var( --border-width, 1px ); } - .bn-s { border-style: none; border-width: 0; } -} -@container (min-width:48em) { - .ba-m { border-style: solid; border-width: var( --border-width, 1px ); } - .bt-m { border-top-style: solid; border-top-width: var( --border-width, 1px ); } - .br-m { border-right-style: solid; border-right-width: var( --border-width, 1px ); } - .bb-m { border-bottom-style: solid; border-bottom-width: var( --border-width, 1px ); } - .bl-m { border-left-style: solid; border-left-width: var( --border-width, 1px ); } - .bn-m { border-style: none; border-width: 0; } -} -@container (min-width:64em) { - .ba-l { border-style: solid; border-width: var( --border-width, 1px ); } - .bt-l { border-top-style: solid; border-top-width: var( --border-width, 1px ); } - .br-l { border-right-style: solid; border-right-width: var( --border-width, 1px ); } - .bb-l { border-bottom-style: solid; border-bottom-width: var( --border-width, 1px ); } - .bl-l { border-left-style: solid; border-left-width: var( --border-width, 1px ); } - .bn-l { border-style: none; border-width: 0; } -} /* BORDER COLORS @@ -896,11 +335,67 @@ img { display: block; max-width: 100%; } --color-name = each color variable name is also a border color name */ -.b--color { border-color: var( --border-color, gray ); } -.b--light { border-color: var( --overlay-tint-2, gray ); } -.b--dark { border-color: var( --overlay-shadow-9, gray ); } +.b--black { border-color: #000; } +.b--near-black { border-color: #111; } +.b--dark-gray { border-color: #333; } +.b--mid-gray { border-color: #555; } +.b--gray { border-color: #777; } +.b--silver { border-color: #999; } +.b--light-silver { border-color: #aaa; } +.b--moon-gray { border-color: #ccc; } +.b--light-gray { border-color: #eee; } +.b--near-white { border-color: #f4f4f4; } +.b--white { border-color: #fff; } +.b--white-90 { border-color: rgba( 255, 255, 255, .9 ); } +.b--white-80 { border-color: rgba( 255, 255, 255, .8 ); } +.b--white-70 { border-color: rgba( 255, 255, 255, .7 ); } +.b--white-60 { border-color: rgba( 255, 255, 255, .6 ); } +.b--white-50 { border-color: rgba( 255, 255, 255, .5 ); } +.b--white-40 { border-color: rgba( 255, 255, 255, .4 ); } +.b--white-30 { border-color: rgba( 255, 255, 255, .3 ); } +.b--white-20 { border-color: rgba( 255, 255, 255, .2 ); } +.b--white-10 { border-color: rgba( 255, 255, 255, .1 ); } +.b--white-05 { border-color: rgba( 255, 255, 255, .05 ); } +.b--white-025 { border-color: rgba( 255, 255, 255, .025 ); } +.b--white-0125 { border-color: rgba( 255, 255, 255, .0125 ); } +.b--black-90 { border-color: rgba( 0, 0, 0, .9 ); } +.b--black-80 { border-color: rgba( 0, 0, 0, .8 ); } +.b--black-70 { border-color: rgba( 0, 0, 0, .7 ); } +.b--black-60 { border-color: rgba( 0, 0, 0, .6 ); } +.b--black-50 { border-color: rgba( 0, 0, 0, .5 ); } +.b--black-40 { border-color: rgba( 0, 0, 0, .4 ); } +.b--black-30 { border-color: rgba( 0, 0, 0, .3 ); } +.b--black-20 { border-color: rgba( 0, 0, 0, .2 ); } +.b--black-10 { border-color: rgba( 0, 0, 0, .1 ); } +.b--black-05 { border-color: rgba( 0, 0, 0, .05 ); } +.b--black-025 { border-color: rgba( 0, 0, 0, .025 ); } +.b--black-0125 { border-color: rgba( 0, 0, 0, .0125 ); } +.b--dark-red { border-color: #e7040f; } +.b--red { border-color: #ff4136; } +.b--light-red { border-color: #ff725c; } +.b--orange { border-color: #ff6300; } +.b--gold { border-color: #ffb700; } +.b--yellow { border-color: #ffd700; } +.b--light-yellow { border-color: #fbf1a9; } +.b--purple { border-color: #5e2ca5; } +.b--light-purple { border-color: #a463f2; } +.b--dark-pink { border-color: #d5008f; } +.b--hot-pink { border-color: #ff41b4; } +.b--pink { border-color: #ff80cc; } +.b--light-pink { border-color: #ffa3d7; } +.b--dark-green { border-color: #137752; } +.b--green { border-color: #19a974; } +.b--light-green { border-color: #9eebcf; } +.b--navy { border-color: #001b44; } +.b--dark-blue { border-color: #00449e; } +.b--blue { border-color: #357edd; } +.b--light-blue { border-color: #96ccff; } +.b--lightest-blue { border-color: #cdecff; } +.b--washed-blue { border-color: #f6fffe; } +.b--washed-green { border-color: #e8fdf5; } +.b--washed-yellow { border-color: #fffceb; } +.b--washed-red { border-color: #ffdfdf; } .b--transparent { border-color: transparent; } -.b--current { border-color: currentColor; } .b--inherit { border-color: inherit; } .b--initial { border-color: initial; } .b--unset { border-color: unset; } @@ -908,7 +403,6 @@ img { display: block; max-width: 100%; } BORDER RADIUS Docs: http://tachyons.io/docs/themes/border-radius/ - Interactive examples: https://components.ai/u/system/cl7crcjia022509masfvq73ny/cl7ztbozs1650909l6rllmvpko Base: br = border-radius @@ -919,32 +413,24 @@ img { display: block; max-width: 100%; } 2 = 2nd step in scale 3 = 3rd step in scale 4 = 4th step in scale - 5 = 5th step in scale - 6 = 6th step in scale Literal values: -100 = 100% -pill = 9999px Media Query Extensions: - -n = small + -ns = not-small -m = medium -l = large */ -.br-primary { border-radius: var( --border-radius, 6px ); } -.br0 { border-radius: var( --border-radius-0, 0 ); } -.br1 { border-radius: var( --border-radius-1, 4px ); } -.br2 { border-radius: var( --border-radius-2, 6px ); } -.br3 { border-radius: var( --border-radius-3, 8px ); } -.br4 { border-radius: var( --border-radius-4, 12px ); } -.br5 { border-radius: var( --border-radius-5, 16px ); } -.br6 { border-radius: var( --border-radius-6, 20px ); } -.br7 { border-radius: var( --border-radius-7, 24px ); } -.br8 { border-radius: var( --border-radius-8, 32px ); } -.br9 { border-radius: var( --border-radius-9, 48px ); } -.br10 { border-radius: var( --border-radius-10, 64px ); } -.br11 { border-radius: var( --border-radius-11, 9999px ); } +.br0 { border-radius: 0; } +.br1 { border-radius: .125rem; } +.br2 { border-radius: .25rem; } +.br3 { border-radius: .5rem; } +.br4 { border-radius: 1rem; } +.br-100 { border-radius: 100%; } +.br-pill { border-radius: 9999px; } .br--bottom { border-top-left-radius: 0; border-top-right-radius: 0; } .br--top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .br--right { border-top-left-radius: 0; border-bottom-left-radius: 0; } @@ -952,72 +438,6 @@ img { display: block; max-width: 100%; } .br-inherit { border-radius: inherit; } .br-initial { border-radius: initial; } .br-unset { border-radius: unset; } -@container (min-width:30em) { - .br-primary-s { border-radius: var( --border-radius, 6px ); } - .br0-s { border-radius: var( --border-radius-0, 0 ); } - .br1-s { border-radius: var( --border-radius-1, 4px ); } - .br2-s { border-radius: var( --border-radius-2, 6px ); } - .br3-s { border-radius: var( --border-radius-3, 8px ); } - .br4-s { border-radius: var( --border-radius-4, 12px ); } - .br5-s { border-radius: var( --border-radius-5, 16px ); } - .br6-s { border-radius: var( --border-radius-6, 20px ); } - .br7-s { border-radius: var( --border-radius-7, 24px ); } - .br8-s { border-radius: var( --border-radius-8, 32px ); } - .br9-s { border-radius: var( --border-radius-9, 48px ); } - .br10-s { border-radius: var( --border-radius-10, 64px ); } - .br11-s { border-radius: var( --border-radius-11, 9999px ); } - .br--bottom-s { border-top-left-radius: 0; border-top-right-radius: 0; } - .br--top-s { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } - .br--right-s { border-top-left-radius: 0; border-bottom-left-radius: 0; } - .br--left-s { border-top-right-radius: 0; border-bottom-right-radius: 0; } - .br-inherit-s { border-radius: inherit; } - .br-initial-s { border-radius: initial; } - .br-unset-s { border-radius: unset; } -} -@container (min-width:48em) { - .br-primary-m { border-radius: var( --border-radius, 6px ); } - .br0-m { border-radius: var( --border-radius-0, 0 ); } - .br1-m { border-radius: var( --border-radius-1, 4px ); } - .br2-m { border-radius: var( --border-radius-2, 6px ); } - .br3-m { border-radius: var( --border-radius-3, 8px ); } - .br4-m { border-radius: var( --border-radius-4, 12px ); } - .br5-m { border-radius: var( --border-radius-5, 16px ); } - .br6-m { border-radius: var( --border-radius-6, 20px ); } - .br7-m { border-radius: var( --border-radius-7, 24px ); } - .br8-m { border-radius: var( --border-radius-8, 32px ); } - .br9-m { border-radius: var( --border-radius-9, 48px ); } - .br10-m { border-radius: var( --border-radius-10, 64px ); } - .br11-m { border-radius: var( --border-radius-11, 9999px ); } - .br--bottom-m { border-top-left-radius: 0; border-top-right-radius: 0; } - .br--top-m { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } - .br--right-m { border-top-left-radius: 0; border-bottom-left-radius: 0; } - .br--left-m { border-top-right-radius: 0; border-bottom-right-radius: 0; } - .br-inherit-m { border-radius: inherit; } - .br-initial-m { border-radius: initial; } - .br-unset-m { border-radius: unset; } -} -@container (min-width:64em) { - .br-primary-l { border-radius: var( --border-radius, 6px ); } - .br0-l { border-radius: var( --border-radius-0, 0 ); } - .br1-l { border-radius: var( --border-radius-1, 4px ); } - .br2-l { border-radius: var( --border-radius-2, 6px ); } - .br3-l { border-radius: var( --border-radius-3, 8px ); } - .br4-l { border-radius: var( --border-radius-4, 12px ); } - .br5-l { border-radius: var( --border-radius-5, 16px ); } - .br6-l { border-radius: var( --border-radius-6, 20px ); } - .br7-l { border-radius: var( --border-radius-7, 24px ); } - .br8-l { border-radius: var( --border-radius-8, 32px ); } - .br9-l { border-radius: var( --border-radius-9, 48px ); } - .br10-l { border-radius: var( --border-radius-10, 64px ); } - .br11-l { border-radius: var( --border-radius-11, 9999px ); } - .br--bottom-l { border-top-left-radius: 0; border-top-right-radius: 0; } - .br--top-l { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } - .br--right-l { border-top-left-radius: 0; border-bottom-left-radius: 0; } - .br--left-l { border-top-right-radius: 0; border-bottom-right-radius: 0; } - .br-inherit-l { border-radius: inherit; } - .br-initial-l { border-radius: initial; } - .br-unset-l { border-radius: unset; } -} /* BORDER STYLES @@ -1035,7 +455,7 @@ img { display: block; max-width: 100%; } --solid = solid Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -1044,24 +464,6 @@ img { display: block; max-width: 100%; } .b--dashed { border-style: dashed; } .b--solid { border-style: solid; } .b--none { border-style: none; } -@container (min-width:30em) { - .b--dotted-s { border-style: dotted; } - .b--dashed-s { border-style: dashed; } - .b--solid-s { border-style: solid; } - .b--none-s { border-style: none; } -} -@container (min-width:48em) { - .b--dotted-m { border-style: dotted; } - .b--dashed-m { border-style: dashed; } - .b--solid-m { border-style: solid; } - .b--none-m { border-style: none; } -} -@container (min-width:64em) { - .b--dotted-l { border-style: dotted; } - .b--dashed-l { border-style: dashed; } - .b--solid-l { border-style: solid; } - .b--none-l { border-style: none; } -} /* BORDER WIDTHS @@ -1079,130 +481,44 @@ img { display: block; max-width: 100%; } 5 = 5th step in border-width scale Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ -.bw { border-width: var( --border-width, 1px ); } -.bw0 { border-width: var( --border-width-0, 0 ); } -.bw1 { border-width: var( --border-width-1, 1px ); } -.bw2 { border-width: var( --border-width-2, 2px ); } -.bw3 { border-width: var( --border-width-3, 4px ); } -.bw4 { border-width: var( --border-width-4, 8px ); } -.bw5 { border-width: var( --border-width-5, 16px ); } +.bw0 { border-width: 0; } +.bw1 { border-width: .125rem; } +.bw2 { border-width: .25rem; } +.bw3 { border-width: .5rem; } +.bw4 { border-width: 1rem; } +.bw5 { border-width: 2rem; } /* Resets */ .bt-0 { border-top-width: 0; } .br-0 { border-right-width: 0; } .bb-0 { border-bottom-width: 0; } .bl-0 { border-left-width: 0; } -@container (min-width:30em) { - .bw-s { border-width: var( --border-width, 1px ); } - .bw0-s { border-width: var( --border-width-0, 0 ); } - .bw1-s { border-width: var( --border-width-1, 1px ); } - .bw2-s { border-width: var( --border-width-2, 2px ); } - .bw3-s { border-width: var( --border-width-3, 4px ); } - .bw4-s { border-width: var( --border-width-4, 8px ); } - .bw5-s { border-width: var( --border-width-5, 16px ); } - .bt-0-s { border-top-width: 0; } - .br-0-s { border-right-width: 0; } - .bb-0-s { border-bottom-width: 0; } - .bl-0-s { border-left-width: 0; } -} -@container (min-width:48em) { - .bw-m { border-width: var( --border-width, 1px ); } - .bw0-m { border-width: var( --border-width-0, 0 ); } - .bw1-m { border-width: var( --border-width-1, 1px ); } - .bw2-m { border-width: var( --border-width-2, 2px ); } - .bw3-m { border-width: var( --border-width-3, 4px ); } - .bw4-m { border-width: var( --border-width-4, 8px ); } - .bw5-m { border-width: var( --border-width-5, 16px ); } - .bt-0-m { border-top-width: 0; } - .br-0-m { border-right-width: 0; } - .bb-0-m { border-bottom-width: 0; } - .bl-0-m { border-left-width: 0; } -} -@container (min-width:64em) { - .bw-l { border-width: var( --border-width, 1px ); } - .bw0-l { border-width: var( --border-width-0, 0 ); } - .bw1-l { border-width: var( --border-width-1, 1px ); } - .bw2-l { border-width: var( --border-width-2, 2px ); } - .bw3-l { border-width: var( --border-width-3, 4px ); } - .bw4-l { border-width: var( --border-width-4, 8px ); } - .bw5-l { border-width: var( --border-width-5, 16px ); } - .bt-0-l { border-top-width: 0; } - .br-0-l { border-right-width: 0; } - .bb-0-l { border-bottom-width: 0; } - .bl-0-l { border-left-width: 0; } -} /* BOX-SHADOW Docs: http://tachyons.io/docs/themes/box-shadow/ - REF - Layered shadows: https://tobiasahlin.com/blog/layered-smooth-box-shadows/ - - Media Query Extensions: - -s = small - -m = medium - -l = large - - */ -.shadow { box-shadow: var( --shadow, inset 0 0 1px 0 rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .5 ) ) ); } -.shadow-hover:hover, .shadow-hover:focus { --shadow-opacity: .6; } -/* - * TODO: potential pattern - .shadow-hover:hover { - --shadow-opacity: .09; - --shadow-x: 1px; - --shadow-y: 1px; - --shadow-blur: 1px; - --shadow-spread: 1px; - --shadow-multiplier: 2; - } -*/ -/* Box shadow based borders */ -.shadow-border-1 { box-shadow: inset 0 0 var( --shadow-border-width, 1px ) 0 rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .125 ) ); } -.shadow-border-2 { box-shadow: inset 0 0 var( --shadow-border-width, 1px ) 0 rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .25 ) ); } -.shadow-border-3 { box-shadow: inset 0 0 var( --shadow-border-width ) 0 currentColor; } -.shadow-border-4 { box-shadow: inset 0 0 2px 0 rgb( var( --shadow-color-light, 255 255 255 ) / var( --shadow-opacity, .125 ) ); } -.shadow-border-5 { box-shadow: inset 0 0 2px 0 rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .125 ) ); } -.shadow-border-6 { box-shadow: inset 0 0 2px 0 currentColor; } -.shadow-1 { box-shadow: 0 1px 1px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .125 ) ), 0 2px 2px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .125 ) ), 0 4px 4px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .125 ) ), 0 8px 8px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .125 ) ), 0 16px 16px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .125 ) ); } -.shadow-2 { box-shadow: 0 1px 1px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .125 ) ), 0 2px 2px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .125 ) ), 0 4px 4px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .125 ) ), 0 8px 8px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .125 ) ); } -.shadow-3 { --shadow-opacity: .11; box-shadow: 0 1px 1px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .11 ) ), 0 2px 2px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .11 ) ), 0 4px 4px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .11 ) ), 0 8px 8px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .11 ) ), 0 16px 16px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .11 ) ), 0 32px 32px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .11 ) ); } -.shadow-4 { --shadow-opacity: .05; box-shadow: 0 1px 1px rgb( var( --shadow-color, 0 0 0 ) / calc( var( --shadow-opacity, .25 ) * 5 ) ), 0 2px 2px rgb( var( --shadow-color, 0 0 0 ) / calc( var( --shadow-opacity, .20 ) * 4 ) ), 0 4px 4px rgb( var( --shadow-color, 0 0 0 ) / calc( var( --shadow-opacity, .15 ) * 3 ) ), 0 8px 8px rgb( var( --shadow-color, 0 0 0 ) / calc( var( --shadow-opacity, .10 ) * 2 ) ), 0 16px 16px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .05 ) ); } -.shadow-5 { --shadow-opacity: .08; box-shadow: 0 var( --shadow-y ) 1px rgb( var( --shadow-color, 0 0 0 ) / calc( var( --shadow-opacity, .08 ) * 1 ) ), 0 calc( var( --shadow-y ) * 2 ) 2px rgb( var( --shadow-color, 0 0 0 ) / calc( var( --shadow-opacity, .12 ) * 1.5 ) ), 0 calc( var( --shadow-y ) * 4 ) 4px rgb( var( --shadow-color, 0 0 0 ) / calc( var( --shadow-opacity, .16 ) * 2 ) ), 0 calc( var( --shadow-y ) * 8 ) 8px rgb( var( --shadow-color, 0 0 0 ) / calc( var( --shadow-opacity, .20 ) * 2.5 ) ); } -.shadow-6 { --shadow-opacity: .07; box-shadow: 0 1px 2px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .7 ) ), 0 2px 4px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .7 ) ), 0 4px 8px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .7 ) ), 0 8px 16px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .7 ) ), 0 16px 32px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .7 ) ), 0 32px 64px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .7 ) ); } -.shadow-7 { --shadow-opacity: .11; box-shadow: 0 1px 1px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .11 ) ), 0 2px 2px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .11 ) ), 0 4px 4px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .11 ) ), 0 6px 8px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .11 ) ), 0 8px 16px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .11 ) ); } -.shadow-8 { --shadow-opacity: .09; box-shadow: 0 2px 1px rgb( var( --shadow-color, 0 0 0 ) / .09 ), 0 4px 2px rgb( var( --shadow-color, 0 0 0 ) / .09 ), 0 8px 4px rgb( var( --shadow-color, 0 0 0 ) / .09 ), 0 16px 8px rgb( var( --shadow-color, 0 0 0 ) / .09 ), 0 32px 16px rgb( var( --shadow-color, 0 0 0 ) / .09 ); } -/* - - TEXT-SHADOW - Docs: http://tachyons.io/docs/themes/text-shadow/ - Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ -.text-shadow-1 { text-shadow: rgb( var( --shadow-color ) ) -4px 4px 0; } -.text-shadow-2 { text-shadow: rgb( var( --shadow-color ) ) -8px 8px 0; } -.text-shadow-3 { text-shadow: rgb( var( --shadow-color ) / var( --shadow-opacity, .5 ) ) -8px 8px 0; } -.text-shadow-4 { text-shadow: rgba( var( --shadow-color ) / var( --shadow-opacity, .5 ) ) -4px 4px 8px; } -.text-shadow-5 { text-shadow: rgb( var( --shadow-color ) ) 2px 0 0, rgb( var( --shadow-color ) ) 0 2px 0, rgb( var( --shadow-color ) ) -2px 0 0, rgb( var( --shadow-color ) ) 0 -2px 0, rgb( var( --shadow-color ) ) -2px -2px 0, rgb( var( --shadow-color ) ) 2px -2px 0, rgb( var( --shadow-color ) ) 2px 2px 0, rgb( var( --shadow-color ) ) -2px 2px 0; } -.text-shadow-6 { text-shadow: rgb( var( --shadow-color-invert ) ) 2px 0 0, rgb( var( --shadow-color-invert ) ) 0 2px 0, rgb( var( --shadow-color-invert ) ) -2px 0 0, rgb( var( --shadow-color-invert ) ) 0 -2px 0, rgb( var( --shadow-color-invert ) ) -2px -2px 0, rgb( var( --shadow-color-invert ) ) 2px -2px 0, rgb( var( --shadow-color-invert ) ) 2px 2px 0, rgb( var( --shadow-color-invert ) ) -2px 2px 0; } -@container (min-width:30em) { } -@container (min-width:48em) { } -@container (min-width:64em) { } +.shadow-1 { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); } +.shadow-2 { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); } +.shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); } +.shadow-4 { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); } +.shadow-5 { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); } /* CODE */ -.pre { max-width: 100%; overflow: auto; } +.pre { overflow-x: auto; overflow-y: hidden; overflow: scroll; } /* COORDINATES @@ -1224,7 +540,7 @@ img { display: block; max-width: 100%; } --2 = literal value -2 Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -1233,92 +549,23 @@ img { display: block; max-width: 100%; } .right-0 { right: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; } -.top-1 { top: var( --size, 1rem ); } -.right-1 { right: var( --size, 1rem ); } -.bottom-1 { bottom: var( --size, 1rem ); } -.left-1 { left: var( --size, 1rem ); } -.top-2 { top: calc( var( --size, 1rem ) * 2 ); } -.right-2 { right: calc( var( --size, 1rem ) * 2 ); } -.bottom-2 { bottom: calc( var( --size, 1rem ) * 2 ); } -.left-2 { left: calc( var( --size, 1rem ) * 2 ); } -.top--1 { top: calc( var( --size, 1rem ) * -1 ); } -.right--1 { right: calc( var( --size, 1rem ) * -1 ); } -.bottom--1 { bottom: calc( var( --size, 1rem ) * -1 ); } -.left--1 { left: calc( var( --size, 1rem ) * -1 ); } -.top--2 { top: calc( var( --size, 1rem ) * -2 ); } -.right--2 { right: calc( var( --size, 1rem ) * -2 ); } -.bottom--2 { bottom: calc( var( --size, 1rem ) * -2 ); } -.left--2 { left: calc( var( --size, 1rem ) * -2 ); } -.inset-0 { inset: 0; } -@container (min-width:30em) { - .top-0-s { top: 0; } - .left-0-s { left: 0; } - .right-0-s { right: 0; } - .bottom-0-s { bottom: 0; } - .top-1-s { top: var( --size, 1rem ); } - .left-1-s { left: var( --size, 1rem ); } - .right-1-s { right: var( --size, 1rem ); } - .bottom-1-s { bottom: var( --size, 1rem ); } - .top-2-s { top: calc( var( --size, 1rem ) * 2 ); } - .left-2-s { left: calc( var( --size, 1rem ) * 2 ); } - .right-2-s { right: calc( var( --size, 1rem ) * 2 ); } - .bottom-2-s { bottom: calc( var( --size, 1rem ) * 2 ); } - .top--1-s { top: calc( var( --size, 1rem ) * -1 ); } - .right--1-s { right: calc( var( --size, 1rem ) * -1 ); } - .bottom--1-s { bottom: calc( var( --size, 1rem ) * -1 ); } - .left--1-s { left: calc( var( --size, 1rem ) * -1 ); } - .top--2-s { top: calc( var( --size, 1rem ) * -2 ); } - .right--2-s { right: calc( var( --size, 1rem ) * -2 ); } - .bottom--2-s { bottom: calc( var( --size, 1rem ) * -2 ); } - .left--2-s { left: calc( var( --size, 1rem ) * -2 ); } - .inset-0-s { inset: 0; } -} -@container (min-width:48em) { - .top-0-m { top: 0; } - .left-0-m { left: 0; } - .right-0-m { right: 0; } - .bottom-0-m { bottom: 0; } - .top-1-m { top: var( --size, 1rem ); } - .left-1-m { left: var( --size, 1rem ); } - .right-1-m { right: var( --size, 1rem ); } - .bottom-1-m { bottom: var( --size, 1rem ); } - .top-2-m { top: calc( var( --size, 1rem ) * 2 ); } - .left-2-m { left: calc( var( --size, 1rem ) * 2 ); } - .right-2-m { right: calc( var( --size, 1rem ) * 2 ); } - .bottom-2-m { bottom: calc( var( --size, 1rem ) * 2 ); } - .top--1-m { top: calc( var( --size, 1rem ) * -1 ); } - .right--1-m { right: calc( var( --size, 1rem ) * -1 ); } - .bottom--1-m { bottom: calc( var( --size, 1rem ) * -1 ); } - .left--1-m { left: calc( var( --size, 1rem ) * -1 ); } - .top--2-m { top: calc( var( --size, 1rem ) * -2 ); } - .right--2-m { right: calc( var( --size, 1rem ) * -2 ); } - .bottom--2-m { bottom: calc( var( --size, 1rem ) * -2 ); } - .left--2-m { left: calc( var( --size, 1rem ) * -2 ); } - .inset-0-m { inset: 0; } -} -@container (min-width:64em) { - .top-0-l { top: 0; } - .left-0-l { left: 0; } - .right-0-l { right: 0; } - .bottom-0-l { bottom: 0; } - .top-1-l { top: var( --size, 1rem ); } - .left-1-l { left: var( --size, 1rem ); } - .right-1-l { right: var( --size, 1rem ); } - .bottom-1-l { bottom: var( --size, 1rem ); } - .top-2-l { top: calc( var( --size, 1rem ) * 2 ); } - .left-2-l { left: calc( var( --size, 1rem ) * 2 ); } - .right-2-l { right: calc( var( --size, 1rem ) * 2 ); } - .bottom-2-l { bottom: calc( var( --size, 1rem ) * 2 ); } - .top--1-l { top: calc( var( --size, 1rem ) * -1 ); } - .right--1-l { right: calc( var( --size, 1rem ) * -1 ); } - .bottom--1-l { bottom: calc( var( --size, 1rem ) * -1 ); } - .left--1-l { left: calc( var( --size, 1rem ) * -1 ); } - .top--2-l { top: calc( var( --size, 1rem ) * -2 ); } - .right--2-l { right: calc( var( --size, 1rem ) * -2 ); } - .bottom--2-l { bottom: calc( var( --size, 1rem ) * -2 ); } - .left--2-l { left: calc( var( --size, 1rem ) * -2 ); } - .inset-0-l { inset: 0; } -} +.top-1 { top: 1rem; } +.right-1 { right: 1rem; } +.bottom-1 { bottom: 1rem; } +.left-1 { left: 1rem; } +.top-2 { top: 2rem; } +.right-2 { right: 2rem; } +.bottom-2 { bottom: 2rem; } +.left-2 { left: 2rem; } +.top--1 { top: -1rem; } +.right--1 { right: -1rem; } +.bottom--1 { bottom: -1rem; } +.left--1 { left: -1rem; } +.top--2 { top: -2rem; } +.right--2 { right: -2rem; } +.bottom--2 { bottom: -2rem; } +.left--2 { left: -2rem; } +.absolute--fill { top: 0; right: 0; bottom: 0; left: 0; } /* CLEARFIX @@ -1329,6 +576,7 @@ img { display: block; max-width: 100%; } Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */ .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } +.cf { *zoom: 1; } .cl { clear: left; } .cr { clear: right; } .cb { clear: both; } @@ -1345,13 +593,15 @@ img { display: block; max-width: 100%; } n = none b = block ib = inline-block - if = inline-flex - ig = inline-grid - f = flex - g = grid + it = inline-table + t = table + tc = table-cell + t-row = table-row + t-columm = table-column + t-column-group = table-column-group Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -1360,4450 +610,2706 @@ img { display: block; max-width: 100%; } .di { display: inline; } .db { display: block; } .dib { display: inline-block; } -.df, .flex { display: flex; } -.dif, .inline-flex { display: inline-flex; } -.dg, .grid { display: grid; } -.dig, .inline-grid { display: inline-grid; } -@container (min-width:30em) { - .dn-s { display: none; } - .di-s { display: inline; } - .db-s { display: block; } - .dib-s { display: inline-block; } - .df-s, .flex-s { display: flex; } - .dif-s, .inline-flex-s { display: inline-flex; } - .dg-s, .grid-s { display: grid; } - .dig-s, .inline-grid-s { display: inline-grid; } -} -@container (min-width:48em) { - .dn-m { display: none; } - .di-m { display: inline; } - .db-m { display: block; } - .dib-m { display: inline-block; } - .df-m, .flex-m { display: flex; } - .dif-m, .inline-flex-m { display: inline-flex; } - .dg-m, .grid-m { display: grid; } - .dig-m, .inline-grid-m { display: inline-grid; } -} -@container (min-width:64em) { - .dn-l { display: none; } - .di-l { display: inline; } - .db-l { display: block; } - .dib-l { display: inline-block; } - .df-l, .flex-l { display: flex; } - .dif-l, .inline-flex-l { display: inline-flex; } - .dg-l, .grid-l { display: grid; } - .dig-l, .inline-grid-l { display: inline-grid; } -} -.glass1 { background: rgba( 255, 255, 255, 0 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass2 { background: rgba( 255, 255, 255, .05 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass3 { background: rgba( 255, 255, 255, .15 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass4 { background: rgba( 255, 255, 255, .25 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass5 { background: rgba( 255, 255, 255, 0 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass6 { background: rgba( 255, 255, 255, .05 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass7 { background: rgba( 255, 255, 255, .15 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass8 { background: rgba( 255, 255, 255, .25 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass9 { background: rgba( 255, 255, 255, .25 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass10 { background: rgba( 255, 255, 255, 0 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass1-hover:hover { background: rgba( 255, 255, 255, 0 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass2-hover:hover { background: rgba( 255, 255, 255, .05 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass3-hover:hover { background: rgba( 255, 255, 255, .15 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass4-hover:hover { background: rgba( 255, 255, 255, .25 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass5-hover:hover { background: rgba( 255, 255, 255, 0 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass6-hover:hover { background: rgba( 255, 255, 255, .05 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass7-hover:hover { background: rgba( 255, 255, 255, .15 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass8-hover:hover { background: rgba( 255, 255, 255, .25 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass9-hover:hover { background: rgba( 255, 255, 255, .25 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass10-hover:hover { background: rgba( 255, 255, 255, 0 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass1-focus:focus { background: rgba( 255, 255, 255, 0 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass2-focus:focus { background: rgba( 255, 255, 255, .05 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass3-focus:focus { background: rgba( 255, 255, 255, .15 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass4-focus:focus { background: rgba( 255, 255, 255, .25 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass5-focus:focus { background: rgba( 255, 255, 255, 0 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass6-focus:focus { background: rgba( 255, 255, 255, .05 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass7-focus:focus { background: rgba( 255, 255, 255, .15 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass8-focus:focus { background: rgba( 255, 255, 255, .25 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass9-focus:focus { background: rgba( 255, 255, 255, .25 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); border: 1px solid rgba( 255, 255, 255, .15 ); } -.glass10-focus:focus { background: rgba( 255, 255, 255, 0 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); border: 1px solid rgba( 255, 255, 255, .15 ); } +.dit { display: inline-table; } +.dt { display: table; } +.dtc { display: table-cell; } +.dt-row { display: table-row; } +.dt-row-group { display: table-row-group; } +.dt-column { display: table-column; } +.dt-column-group { display: table-column-group; } +/* + This will set table to full width and then + all cells will be equal width +*/ +.dt--fixed { table-layout: fixed; width: 100%; } /* - GAP: GRID AND FLEX SPACING - Docs: http://tachyons.io/docs/layout/gap/ - - Base: - g = gap + FLEXBOX - Media Query Extensions: - -s = small - -m = medium - -l = large + Media Query Extensions: + -ns = not-small + -m = medium + -l = large */ -.g0 { gap: var( --spacing-0, 0 ); } -.g1 { gap: var( --spacing-1, 4px ); } -.g2 { gap: var( --spacing-2, 8px ); } -.g3 { gap: var( --spacing-3, 16px ); } -.g4 { gap: var( --spacing-4, 32px ); } -.g5 { gap: var( --spacing-5, 64px ); } -.g6 { gap: var( --spacing-6, 128px ); } -.g7 { gap: var( --spacing-7, 256px ); } -@container (min-width:30em) { - .g0-s { gap: var( --spacing-0, 0 ); } - .g1-s { gap: var( --spacing-1, 4px ); } - .g2-s { gap: var( --spacing-2, 8px ); } - .g3-s { gap: var( --spacing-3, 16px ); } - .g4-s { gap: var( --spacing-4, 32px ); } - .g5-s { gap: var( --spacing-5, 64px ); } - .g6-s { gap: var( --spacing-6, 128px ); } - .g7-s { gap: var( --spacing-7, 256px ); } -} -@container (min-width:48em) { - .g0-m { gap: var( --spacing-0, 0 ); } - .g1-m { gap: var( --spacing-1, 4px ); } - .g2-m { gap: var( --spacing-2, 8px ); } - .g3-m { gap: var( --spacing-3, 16px ); } - .g4-m { gap: var( --spacing-4, 32px ); } - .g5-m { gap: var( --spacing-5, 64px ); } - .g6-m { gap: var( --spacing-6, 128px ); } - .g7-m { gap: var( --spacing-7, 256px ); } -} -@container (min-width:64em) { - .g0-l { gap: var( --spacing-0 ); } - .g1-l { gap: var( --spacing-1 ); } - .g2-l { gap: var( --spacing-2 ); } - .g3-l { gap: var( --spacing-3 ); } - .g4-l { gap: var( --spacing-4 ); } - .g5-l { gap: var( --spacing-5 ); } - .g6-l { gap: var( --spacing-6 ); } - .g7-l { gap: var( --spacing-7 ); } -} +.flex { display: flex; } +.inline-flex { display: inline-flex; } +/* 1. Fix for Chrome 44 bug. + * https://code.google.com/p/chromium/issues/detail?id=506893 */ +.flex-auto { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } +.flex-none { flex: none; } +.flex-column { flex-direction: column; } +.flex-row { flex-direction: row; } +.flex-wrap { flex-wrap: wrap; } +.flex-nowrap { flex-wrap: nowrap; } +.flex-wrap-reverse { flex-wrap: wrap-reverse; } +.flex-column-reverse { flex-direction: column-reverse; } +.flex-row-reverse { flex-direction: row-reverse; } +.items-start { align-items: flex-start; } +.items-end { align-items: flex-end; } +.items-center { align-items: center; } +.items-baseline { align-items: baseline; } +.items-stretch { align-items: stretch; } +.self-start { align-self: flex-start; } +.self-end { align-self: flex-end; } +.self-center { align-self: center; } +.self-baseline { align-self: baseline; } +.self-stretch { align-self: stretch; } +.justify-start { justify-content: flex-start; } +.justify-end { justify-content: flex-end; } +.justify-center { justify-content: center; } +.justify-between { justify-content: space-between; } +.justify-around { justify-content: space-around; } +.content-start { align-content: flex-start; } +.content-end { align-content: flex-end; } +.content-center { align-content: center; } +.content-between { align-content: space-between; } +.content-around { align-content: space-around; } +.content-stretch { align-content: stretch; } +.order-0 { order: 0; } +.order-1 { order: 1; } +.order-2 { order: 2; } +.order-3 { order: 3; } +.order-4 { order: 4; } +.order-5 { order: 5; } +.order-6 { order: 6; } +.order-7 { order: 7; } +.order-8 { order: 8; } +.order-last { order: 99999; } +.flex-grow-0 { flex-grow: 0; } +.flex-grow-1 { flex-grow: 1; } +.flex-shrink-0 { flex-shrink: 0; } +.flex-shrink-1 { flex-shrink: 1; } /* - GAP: GRID AND FLEX SPACING - Docs: http://tachyons.io/docs/layout/gap/ + + FLOATS + http://tachyons.io/docs/layout/floats/ + + 1. Floated elements are automatically rendered as block level elements. + Setting floats to display inline will fix the double margin bug in + ie6. You know... just in case. + + 2. Don't forget to clearfix your floats with .cf Base: - g = gap + f = float + Modifiers: + l = left + r = right + n = none Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ -.gc0 { gap-column: var( --spacing-0, 0 ); } -.gc1 { gap-column: var( --spacing-1, 4px ); } -.gc2 { gap-column: var( --spacing-2, 8px ); } -.gc3 { gap-column: var( --spacing-3, 16px ); } -.gc4 { gap-column: var( --spacing-4, 32px ); } -.gc5 { gap-column: var( --spacing-5, 64px ); } -.gc6 { gap-column: var( --spacing-6, 128px ); } -.gc7 { gap-column: var( --spacing-7, 256px ); } -@container (min-width:30em) { - .gc0-s { gap-column: var( --spacing-0, 0 ); } - .gc1-s { gap-column: var( --spacing-1, 4px ); } - .gc2-s { gap-column: var( --spacing-2, 8px ); } - .gc3-s { gap-column: var( --spacing-3, 16px ); } - .gc4-s { gap-column: var( --spacing-4, 32px ); } - .gc5-s { gap-column: var( --spacing-5, 64px ); } - .gc6-s { gap-column: var( --spacing-6, 128px ); } - .gc7-s { gap-column: var( --spacing-7, 256px ); } -} -@container (min-width:48em) { - .gc0-m { gap-column: var( --spacing-0, 0 ); } - .gc1-m { gap-column: var( --spacing-1, 4px ); } - .gc2-m { gap-column: var( --spacing-2, 8px ); } - .gc3-m { gap-column: var( --spacing-3, 16px ); } - .gc4-m { gap-column: var( --spacing-4, 32px ); } - .gc5-m { gap-column: var( --spacing-5, 64px ); } - .gc6-m { gap-column: var( --spacing-6, 128px ); } - .gc7-m { gap-column: var( --spacing-7, 256px ); } -} -@container (min-width:64em) { - .gc0-l { gap-column: var( --spacing-0 ); } - .gc1-l { gap-column: var( --spacing-1 ); } - .gc2-l { gap-column: var( --spacing-2 ); } - .gc3-l { gap-column: var( --spacing-3 ); } - .gc4-l { gap-column: var( --spacing-4 ); } - .gc5-l { gap-column: var( --spacing-5 ); } - .gc6-l { gap-column: var( --spacing-6 ); } - .gc7-l { gap-column: var( --spacing-7 ); } -} +.fl { float: left; _display: inline; } +.fr { float: right; _display: inline; } +.fn { float: none; } /* - GAP: GRID AND FLEX SPACING - Docs: http://tachyons.io/docs/layout/gap/ - Base: - g = gap + FONT FAMILY GROUPS + Docs: http://tachyons.io/docs/typography/font-family/ +*/ +.sans-serif { font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; } +.serif { font-family: georgia, times, serif; } +.system-sans-serif { font-family: sans-serif; } +.system-serif { font-family: serif; } +/* Monospaced Typefaces (for code) */ +/* From http://cssfontstack.com */ +code, .code { font-family: Consolas, monaco, monospace; } +.courier { font-family: 'Courier Next', courier, monospace; } +/* Sans-Serif Typefaces */ +.helvetica { font-family: 'helvetica neue', helvetica, sans-serif; } +.avenir { font-family: 'avenir next', avenir, sans-serif; } +/* Serif Typefaces */ +.athelas { font-family: athelas, georgia, serif; } +.georgia { font-family: georgia, serif; } +.times { font-family: times, serif; } +.bodoni { font-family: "Bodoni MT", serif; } +.calisto { font-family: "Calisto MT", serif; } +.garamond { font-family: garamond, serif; } +.baskerville { font-family: baskerville, serif; } +/* + + FONT STYLE + Docs: http://tachyons.io/docs/typography/font-style/ Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ -.gr0 { gap-row: var( --spacing-0, 0 ); } -.gr1 { gap-row: var( --spacing-1, 4px ); } -.gr2 { gap-row: var( --spacing-2, 8px ); } -.gr3 { gap-row: var( --spacing-3, 16px ); } -.gr4 { gap-row: var( --spacing-4, 32px ); } -.gr5 { gap-row: var( --spacing-5, 64px ); } -.gr6 { gap-row: var( --spacing-6, 128px ); } -.gr7 { gap-row: var( --spacing-7, 256px ); } -@container (min-width:30em) { - .gr0-s { gap-row: var( --spacing-0, 0 ); } - .gr1-s { gap-row: var( --spacing-1, 4px ); } - .gr2-s { gap-row: var( --spacing-2, 8px ); } - .gr3-s { gap-row: var( --spacing-3, 16px ); } - .gr4-s { gap-row: var( --spacing-4, 32px ); } - .gr5-s { gap-row: var( --spacing-5, 64px ); } - .gr6-s { gap-row: var( --spacing-6, 128px ); } - .gr7-s { gap-row: var( --spacing-7, 256px ); } -} -@container (min-width:48em) { - .gr0-m { gap-row: var( --spacing-0, 0 ); } - .gr1-m { gap-row: var( --spacing-1, 4px ); } - .gr2-m { gap-row: var( --spacing-2, 8px ); } - .gr3-m { gap-row: var( --spacing-3, 16px ); } - .gr4-m { gap-row: var( --spacing-4, 32px ); } - .gr5-m { gap-row: var( --spacing-5, 64px ); } - .gr6-m { gap-row: var( --spacing-6, 128px ); } - .gr7-m { gap-row: var( --spacing-7, 256px ); } -} -@container (min-width:64em) { - .gr0-l { gap-row: var( --spacing-0 ); } - .gr1-l { gap-row: var( --spacing-1 ); } - .gr2-l { gap-row: var( --spacing-2 ); } - .gr3-l { gap-row: var( --spacing-3 ); } - .gr4-l { gap-row: var( --spacing-4 ); } - .gr5-l { gap-row: var( --spacing-5 ); } - .gr6-l { gap-row: var( --spacing-6 ); } - .gr7-l { gap-row: var( --spacing-7 ); } -} +.i { font-style: italic; } +.fs-normal { font-style: normal; } /* - Grid Template Columns - Docs: http://tachyons.io/docs/layout/grid-template-columns/ - - Base: - cols = columns + FONT WEIGHT + Docs: http://tachyons.io/docs/typography/font-weight/ -*/ -.cols-1 { grid-template-columns: repeat( 1, 1fr ); } -.cols-2 { grid-template-columns: repeat( 2, 1fr ); } -.cols-3 { grid-template-columns: repeat( 3, 1fr ); } -.cols-4 { grid-template-columns: repeat( 4, 1fr ); } -.cols-5 { grid-template-columns: repeat( 5, 1fr ); } -.cols-6 { grid-template-columns: repeat( 6, 1fr ); } -.cols-7 { grid-template-columns: repeat( 7, 1fr ); } -.cols-8 { grid-template-columns: repeat( 8, 1fr ); } -.cols-9 { grid-template-columns: repeat( 9, 1fr ); } -.cols-10 { grid-template-columns: repeat( 10, 1fr ); } -.cols-11 { grid-template-columns: repeat( 11, 1fr ); } -.cols-12 { grid-template-columns: repeat( 12, 1fr ); } -.cols-13 { grid-template-columns: repeat( 13, 1fr ); } -.cols-14 { grid-template-columns: repeat( 14, 1fr ); } -.cols-15 { grid-template-columns: repeat( 15, 1fr ); } -.cols-16 { grid-template-columns: repeat( 16, 1fr ); } -.cols-min-32 { grid-template-columns: repeat( auto-fill, minmax( 32px, 1fr ) ); } -.cols-min-64 { grid-template-columns: repeat( auto-fill, minmax( 64px, 1fr ) ); } -.cols-min-128 { grid-template-columns: repeat( auto-fill, minmax( 128px, 1fr ) ); } -.cols-min-192 { grid-template-columns: repeat( auto-fill, minmax( 192px, 1fr ) ); } -.cols-min-240 { grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) ); } -.cols-min-256 { grid-template-columns: repeat( auto-fill, minmax( 256px, 1fr ) ); } -.cols-min-320 { grid-template-columns: repeat( auto-fill, minmax( 320px, 1fr ) ); } -.cols-min-480 { grid-template-columns: repeat( auto-fill, minmax( 480px, 1fr ) ); } -.masonry { grid-template-columns: masonry; } -.subgrid { grid-template-columns: subgrid; } -.cols-none { grid-template-columns: none; } -@container (min-width:30em) { - .cols-1-s { grid-template-columns: repeat( 1, 1fr ); } - .cols-2-s { grid-template-columns: repeat( 2, 1fr ); } - .cols-3-s { grid-template-columns: repeat( 3, 1fr ); } - .cols-4-s { grid-template-columns: repeat( 4, 1fr ); } - .cols-5-s { grid-template-columns: repeat( 5, 1fr ); } - .cols-6-s { grid-template-columns: repeat( 6, 1fr ); } - .cols-7-s { grid-template-columns: repeat( 7, 1fr ); } - .cols-8-s { grid-template-columns: repeat( 8, 1fr ); } - .cols-9-s { grid-template-columns: repeat( 9, 1fr ); } - .cols-10-s { grid-template-columns: repeat( 10, 1fr ); } - .cols-11-s { grid-template-columns: repeat( 11, 1fr ); } - .cols-12-s { grid-template-columns: repeat( 12, 1fr ); } - .cols-13-s { grid-template-columns: repeat( 13, 1fr ); } - .cols-14-s { grid-template-columns: repeat( 14, 1fr ); } - .cols-15-s { grid-template-columns: repeat( 15, 1fr ); } - .cols-16-s { grid-template-columns: repeat( 16, 1fr ); } - .cols-min-32-s { grid-template-columns: repeat( auto-fill, minmax( 64px, 1fr ) ); } - .cols-min-64-s { grid-template-columns: repeat( auto-fill, minmax( 64px, 1fr ) ); } - .cols-min-128-s { grid-template-columns: repeat( auto-fill, minmax( 128px, 1fr ) ); } - .cols-min-192-s { grid-template-columns: repeat( auto-fill, minmax( 192px, 1fr ) ); } - .cols-min-240-s { grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) ); } - .cols-min-256-s { grid-template-columns: repeat( auto-fill, minmax( 256px, 1fr ) ); } - .cols-min-320-s { grid-template-columns: repeat( auto-fill, minmax( 320px, 1fr ) ); } - .cols-min-480-s { grid-template-columns: repeat( auto-fill, minmax( 480px, 1fr ) ); } - .masonry-s { grid-template-columns: masonry; } - .subgrid-s { grid-template-columns: subgrid; } - .cols-none-s { grid-template-columns: none; } -} -@container (min-width:48em) { - .cols-1-m { grid-template-columns: repeat( 1, 1fr ); } - .cols-2-m { grid-template-columns: repeat( 2, 1fr ); } - .cols-3-m { grid-template-columns: repeat( 3, 1fr ); } - .cols-4-m { grid-template-columns: repeat( 4, 1fr ); } - .cols-5-m { grid-template-columns: repeat( 5, 1fr ); } - .cols-6-m { grid-template-columns: repeat( 6, 1fr ); } - .cols-7-m { grid-template-columns: repeat( 7, 1fr ); } - .cols-8-m { grid-template-columns: repeat( 8, 1fr ); } - .cols-9-m { grid-template-columns: repeat( 9, 1fr ); } - .cols-10-m { grid-template-columns: repeat( 10, 1fr ); } - .cols-11-m { grid-template-columns: repeat( 11, 1fr ); } - .cols-12-m { grid-template-columns: repeat( 12, 1fr ); } - .cols-13-m { grid-template-columns: repeat( 13, 1fr ); } - .cols-14-m { grid-template-columns: repeat( 14, 1fr ); } - .cols-15-m { grid-template-columns: repeat( 15, 1fr ); } - .cols-16-m { grid-template-columns: repeat( 16, 1fr ); } - .cols-min-64-m { grid-template-columns: repeat( auto-fill, minmax( 64px, 1fr ) ); } - .cols-min-128-m { grid-template-columns: repeat( auto-fill, minmax( 128px, 1fr ) ); } - .cols-min-192-m { grid-template-columns: repeat( auto-fill, minmax( 192px, 1fr ) ); } - .cols-min-240-m { grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) ); } - .cols-min-256-m { grid-template-columns: repeat( auto-fill, minmax( 256px, 1fr ) ); } - .cols-min-320-m { grid-template-columns: repeat( auto-fill, minmax( 320px, 1fr ) ); } - .cols-min-480-m { grid-template-columns: repeat( auto-fill, minmax( 480px, 1fr ) ); } - .masonry-m { grid-template-columns: masonry; } - .subgrid-m { grid-template-columns: subgrid; } - .cols-none-m { grid-template-columns: none; } -} -@container (min-width:64em) { - .cols-1-l { grid-template-columns: repeat( 1, 1fr ); } - .cols-2-l { grid-template-columns: repeat( 2, 1fr ); } - .cols-3-l { grid-template-columns: repeat( 3, 1fr ); } - .cols-4-l { grid-template-columns: repeat( 4, 1fr ); } - .cols-5-l { grid-template-columns: repeat( 5, 1fr ); } - .cols-6-l { grid-template-columns: repeat( 6, 1fr ); } - .cols-7-l { grid-template-columns: repeat( 7, 1fr ); } - .cols-8-l { grid-template-columns: repeat( 8, 1fr ); } - .cols-9-l { grid-template-columns: repeat( 9, 1fr ); } - .cols-10-l { grid-template-columns: repeat( 10, 1fr ); } - .cols-11-l { grid-template-columns: repeat( 11, 1fr ); } - .cols-12-l { grid-template-columns: repeat( 12, 1fr ); } - .cols-13-l { grid-template-columns: repeat( 13, 1fr ); } - .cols-14-l { grid-template-columns: repeat( 14, 1fr ); } - .cols-15-l { grid-template-columns: repeat( 15, 1fr ); } - .cols-16-l { grid-template-columns: repeat( 16, 1fr ); } - .cols-min-64-l { grid-template-columns: repeat( auto-fill, minmax( 64px, 1fr ) ); } - .cols-min-128-l { grid-template-columns: repeat( auto-fill, minmax( 128px, 1fr ) ); } - .cols-min-192-l { grid-template-columns: repeat( auto-fill, minmax( 192px, 1fr ) ); } - .cols-min-240-l { grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) ); } - .cols-min-256-l { grid-template-columns: repeat( auto-fill, minmax( 256px, 1fr ) ); } - .cols-min-320-l { grid-template-columns: repeat( auto-fill, minmax( 320px, 1fr ) ); } - .cols-min-480-l { grid-template-columns: repeat( auto-fill, minmax( 480px, 1fr ) ); } - .masonry-l { grid-template-columns: masonry; } - .subgrid-l { grid-template-columns: subgrid; } - .cols-none-l { grid-template-columns: none; } -} -/* + Base + fw = font-weight - Grid Column - Docs: http://tachyons.io/docs/grid-column + Modifiers: + 1 = literal value 100 + 2 = literal value 200 + 3 = literal value 300 + 4 = literal value 400 + 5 = literal value 500 + 6 = literal value 600 + 7 = literal value 700 + 8 = literal value 800 + 9 = literal value 900 - This sets the width of the element via declaring how many columns wide it should be + Media Query Extensions: + -ns = not-small + -m = medium + -l = large - Base: - cols = columns +*/ +.normal { font-weight: normal; } +.b { font-weight: bold; } +.fw1 { font-weight: 100; } +.fw2 { font-weight: 200; } +.fw3 { font-weight: 300; } +.fw4 { font-weight: 400; } +.fw5 { font-weight: 500; } +.fw6 { font-weight: 600; } +.fw7 { font-weight: 700; } +.fw8 { font-weight: 800; } +.fw9 { font-weight: 900; } +/* + FORMS + */ -.col-1 { grid-column: span 1 / span 1; } -.col-2 { grid-column: span 2 / span 2; } -.col-3 { grid-column: span 3 / span 3; } -.col-4 { grid-column: span 4 / span 4; } -.col-5 { grid-column: span 5 / span 5; } -.col-6 { grid-column: span 6 / span 6; } -.col-7 { grid-column: span 7 / span 7; } -.col-8 { grid-column: span 8 / span 8; } -.col-9 { grid-column: span 9 / span 9; } -.col-10 { grid-column: span 10 / span 10; } -.col-11 { grid-column: span 11 / span 11; } -.col-12 { grid-column: span 12 / span 12; } -.col-13 { grid-column: span 13 / span 13; } -.col-14 { grid-column: span 14 / span 14; } -.col-15 { grid-column: span 15 / span 15; } -.col-16 { grid-column: span 16 / span 16; } -.col-full { grid-column: 1 / -1; } -.col-center1 { grid-column: 2 / -2; } -.col-center2 { grid-column: 3 / -3; } -.col-center3 { grid-column: 4 / -4; } -.col-center4 { grid-column: 6 / -6; } -.col-auto { grid-column: auto; } -.start-1 { grid-column-start: 1; } -.start-2 { grid-column-start: 2; } -.start-3 { grid-column-start: 3; } -.start-4 { grid-column-start: 4; } -.start-5 { grid-column-start: 5; } -.start-6 { grid-column-start: 6; } -.start-7 { grid-column-start: 7; } -.start-8 { grid-column-start: 8; } -.start-9 { grid-column-start: 9; } -.start-10 { grid-column-start: 10; } -.start-11 { grid-column-start: 11; } -.start-12 { grid-column-start: 12; } -.start-13 { grid-column-start: 13; } -.start-14 { grid-column-start: 14; } -.start-15 { grid-column-start: 15; } -.end-1 { grid-column-end: 1; } -.end-2 { grid-column-end: 2; } -.end-3 { grid-column-end: 3; } -.end-4 { grid-column-end: 4; } -.end-5 { grid-column-end: 5; } -.end-6 { grid-column-end: 6; } -.end-7 { grid-column-end: 7; } -.end-8 { grid-column-end: 8; } -.end-9 { grid-column-end: 9; } -.end-10 { grid-column-end: 10; } -.end-11 { grid-column-end: 11; } -.end-12 { grid-column-end: 12; } -.end-13 { grid-column-end: 13; } -.end-14 { grid-column-end: 14; } -.end-15 { grid-column-end: 15; } -.end-16 { grid-column-end: 16; } -@container (min-width:30em) { - .col-1-s { grid-column: span 1 / span 1; } - .col-2-s { grid-column: span 2 / span 2; } - .col-3-s { grid-column: span 3 / span 3; } - .col-4-s { grid-column: span 4 / span 4; } - .col-5-s { grid-column: span 5 / span 5; } - .col-6-s { grid-column: span 6 / span 6; } - .col-7-s { grid-column: span 7 / span 7; } - .col-8-s { grid-column: span 8 / span 8; } - .col-9-s { grid-column: span 9 / span 9; } - .col-10-s { grid-column: span 10 / span 10; } - .col-11-s { grid-column: span 11 / span 11; } - .col-12-s { grid-column: span 12 / span 12; } - .col-13-s { grid-column: span 13 / span 13; } - .col-14-s { grid-column: span 14 / span 14; } - .col-15-s { grid-column: span 15 / span 15; } - .col-16-s { grid-column: span 16 / span 16; } - .col-full-s { grid-column: 1 / -1; } - .col-center1-s { grid-column: 2 / -2; } - .col-center2-s { grid-column: 3 / -3; } - .col-center3-s { grid-column: 4 / -4; } - .col-center4-s { grid-column: 6 / -6; } - .col-auto-s { grid-column: auto; } - .start-1-s { grid-column-start: 1; } - .start-2-s { grid-column-start: 2; } - .start-3-s { grid-column-start: 3; } - .start-4-s { grid-column-start: 4; } - .start-5-s { grid-column-start: 5; } - .start-6-s { grid-column-start: 6; } - .start-7-s { grid-column-start: 7; } - .start-8-s { grid-column-start: 8; } - .start-9-s { grid-column-start: 9; } - .start-10-s { grid-column-start: 10; } - .start-11-s { grid-column-start: 11; } - .start-12-s { grid-column-start: 12; } - .start-13-s { grid-column-start: 13; } - .start-14-s { grid-column-start: 14; } - .start-15-s { grid-column-start: 15; } - .end-1-s { grid-column-end: 1; } - .end-2-s { grid-column-end: 2; } - .end-3-s { grid-column-end: 3; } - .end-4-s { grid-column-end: 4; } - .end-5-s { grid-column-end: 5; } - .end-6-s { grid-column-end: 6; } - .end-7-s { grid-column-end: 7; } - .end-8-s { grid-column-end: 8; } - .end-9-s { grid-column-end: 9; } - .end-10-s { grid-column-end: 10; } - .end-11-s { grid-column-end: 11; } - .end-12-s { grid-column-end: 12; } - .end-13-s { grid-column-end: 13; } - .end-14-s { grid-column-end: 14; } - .end-15-s { grid-column-end: 15; } - .end-16-s { grid-column-end: 16; } -} -@container (min-width:48em) { - .col-1-m { grid-column: span 1 / span 1; } - .col-2-m { grid-column: span 2 / span 2; } - .col-3-m { grid-column: span 3 / span 3; } - .col-4-m { grid-column: span 4 / span 4; } - .col-5-m { grid-column: span 5 / span 5; } - .col-6-m { grid-column: span 6 / span 6; } - .col-7-m { grid-column: span 7 / span 7; } - .col-8-m { grid-column: span 8 / span 8; } - .col-9-m { grid-column: span 9 / span 9; } - .col-10-m { grid-column: span 10 / span 10; } - .col-11-m { grid-column: span 11 / span 11; } - .col-12-m { grid-column: span 12 / span 12; } - .col-13-m { grid-column: span 13 / span 13; } - .col-14-m { grid-column: span 14 / span 14; } - .col-15-m { grid-column: span 15 / span 15; } - .col-16-m { grid-column: span 16 / span 16; } - .col-full-m { grid-column: 1 / -1; } - .col-center1-m { grid-column: 2 / -2; } - .col-center2-m { grid-column: 3 / -3; } - .col-center3-m { grid-column: 4 / -4; } - .col-center4-m { grid-column: 6 / -6; } - .col-auto-m { grid-column: auto; } - .start-1-m { grid-column-start: 1; } - .start-2-m { grid-column-start: 2; } - .start-3-m { grid-column-start: 3; } - .start-4-m { grid-column-start: 4; } - .start-5-m { grid-column-start: 5; } - .start-6-m { grid-column-start: 6; } - .start-7-m { grid-column-start: 7; } - .start-8-m { grid-column-start: 8; } - .start-9-m { grid-column-start: 9; } - .start-10-m { grid-column-start: 10; } - .start-11-m { grid-column-start: 11; } - .start-12-m { grid-column-start: 12; } - .start-13-m { grid-column-start: 13; } - .start-14-m { grid-column-start: 14; } - .start-15-m { grid-column-start: 15; } - .end-1-m { grid-column-end: 1; } - .end-2-m { grid-column-end: 2; } - .end-3-m { grid-column-end: 3; } - .end-4-m { grid-column-end: 4; } - .end-5-m { grid-column-end: 5; } - .end-6-m { grid-column-end: 6; } - .end-7-m { grid-column-end: 7; } - .end-8-m { grid-column-end: 8; } - .end-9-m { grid-column-end: 9; } - .end-10-m { grid-column-end: 10; } - .end-11-m { grid-column-end: 11; } - .end-12-m { grid-column-end: 12; } - .end-13-m { grid-column-end: 13; } - .end-14-m { grid-column-end: 14; } - .end-15-m { grid-column-end: 15; } - .end-16-m { grid-column-end: 16; } -} -@container (min-width:64em) { - .col-1-l { grid-column: span 1 / span 1; } - .col-2-l { grid-column: span 2 / span 2; } - .col-3-l { grid-column: span 3 / span 3; } - .col-4-l { grid-column: span 4 / span 4; } - .col-5-l { grid-column: span 5 / span 5; } - .col-6-l { grid-column: span 6 / span 6; } - .col-7-l { grid-column: span 7 / span 7; } - .col-8-l { grid-column: span 8 / span 8; } - .col-9-l { grid-column: span 9 / span 9; } - .col-10-l { grid-column: span 10 / span 10; } - .col-11-l { grid-column: span 11 / span 11; } - .col-12-l { grid-column: span 12 / span 12; } - .col-13-l { grid-column: span 13 / span 13; } - .col-14-l { grid-column: span 14 / span 14; } - .col-15-l { grid-column: span 15 / span 15; } - .col-16-l { grid-column: span 16 / span 16; } - .col-full-l { grid-column: 1 / -1; } - .col-center1-l { grid-column: 2 / -2; } - .col-center2-l { grid-column: 3 / -3; } - .col-center3-l { grid-column: 4 / -4; } - .col-center4-l { grid-column: 6 / -6; } - .col-auto-l { grid-column: auto; } - .start-1-l { grid-column-start: 1; } - .start-2-l { grid-column-start: 2; } - .start-3-l { grid-column-start: 3; } - .start-4-l { grid-column-start: 4; } - .start-5-l { grid-column-start: 5; } - .start-6-l { grid-column-start: 6; } - .start-7-l { grid-column-start: 7; } - .start-8-l { grid-column-start: 8; } - .start-9-l { grid-column-start: 9; } - .start-10-l { grid-column-start: 10; } - .start-11-l { grid-column-start: 11; } - .start-12-l { grid-column-start: 12; } - .start-13-l { grid-column-start: 13; } - .start-14-l { grid-column-start: 14; } - .start-15-l { grid-column-start: 15; } - .end-1-l { grid-column-end: 1; } - .end-2-l { grid-column-end: 2; } - .end-3-l { grid-column-end: 3; } - .end-4-l { grid-column-end: 4; } - .end-5-l { grid-column-end: 5; } - .end-6-l { grid-column-end: 6; } - .end-7-l { grid-column-end: 7; } - .end-8-l { grid-column-end: 8; } - .end-9-l { grid-column-end: 9; } - .end-10-l { grid-column-end: 10; } - .end-11-l { grid-column-end: 11; } - .end-12-l { grid-column-end: 12; } - .end-13-l { grid-column-end: 13; } - .end-14-l { grid-column-end: 14; } - .end-15-l { grid-column-end: 15; } - .end-16-l { grid-column-end: 16; } -} +.input-reset { -webkit-appearance: none; -moz-appearance: none; } +.button-reset::-moz-focus-inner, .input-reset::-moz-focus-inner { border: 0; padding: 0; } /* - Grid Row - Docs: http://tachyons.io/docs/layout/grid-column-row + HEIGHTS + Docs: http://tachyons.io/docs/layout/heights/ - This sets the width of the element via declaring how many columns wide it should be + Base: + h = height + min-h = min-height + min-vh = min-height vertical screen height + vh = vertical screen height - Base: - cols = columns + Modifiers + 1 = 1st step in height scale + 2 = 2nd step in height scale + 3 = 3rd step in height scale + 4 = 4th step in height scale + 5 = 5th step in height scale -*/ -.row-auto { grid-row: auto; } -.row-start-1 { grid-row-start: 1; } -.row-start-2 { grid-row-start: 2; } -.row-start-3 { grid-row-start: 3; } -.row-start-4 { grid-row-start: 4; } -.row-start-5 { grid-row-start: 5; } -.row-start-6 { grid-row-start: 6; } -.row-start-7 { grid-row-start: 7; } -.row-start-8 { grid-row-start: 8; } -.row-start-9 { grid-row-start: 9; } -.row-start-10 { grid-row-start: 10; } -.row-start-11 { grid-row-start: 11; } -.row-start-12 { grid-row-start: 12; } -.row-start-13 { grid-row-start: 13; } -.row-start-14 { grid-row-start: 14; } -.row-start-15 { grid-row-start: 15; } -.row-start-16 { grid-row-start: 16; } -.row-end-1 { grid-row-end: 1; } -.row-end-2 { grid-row-end: 2; } -.row-end-3 { grid-row-end: 3; } -.row-end-4 { grid-row-end: 4; } -.row-end-5 { grid-row-end: 5; } -.row-end-6 { grid-row-end: 6; } -.row-end-7 { grid-row-end: 7; } -.row-end-8 { grid-row-end: 8; } -.row-end-9 { grid-row-end: 9; } -.row-end-10 { grid-row-end: 10; } -.row-end-11 { grid-row-end: 11; } -.row-end-12 { grid-row-end: 12; } -.row-end-13 { grid-row-end: 13; } -.row-end-14 { grid-row-end: 14; } -.row-end-15 { grid-row-end: 15; } -.row-end-16 { grid-row-end: 16; } -@container (min-width:30em) { - .row-auto-s { grid-row: auto; } - .row-start-1-s { grid-row-start: 1; } - .row-start-2-s { grid-row-start: 2; } - .row-start-3-s { grid-row-start: 3; } - .row-start-4-s { grid-row-start: 4; } - .row-start-5-s { grid-row-start: 5; } - .row-start-6-s { grid-row-start: 6; } - .row-start-7-s { grid-row-start: 7; } - .row-start-8-s { grid-row-start: 8; } - .row-start-9-s { grid-row-start: 9; } - .row-start-10-s { grid-row-start: 10; } - .row-start-11-s { grid-row-start: 11; } - .row-start-12-s { grid-row-start: 12; } - .row-start-13-s { grid-row-start: 13; } - .row-start-14-s { grid-row-start: 14; } - .row-start-15-s { grid-row-start: 15; } - .row-start-16-s { grid-row-start: 16; } - .row-end-1-s { grid-row-end: 1; } - .row-end-2-s { grid-row-end: 2; } - .row-end-3-s { grid-row-end: 3; } - .row-end-4-s { grid-row-end: 4; } - .row-end-5-s { grid-row-end: 5; } - .row-end-6-s { grid-row-end: 6; } - .row-end-7-s { grid-row-end: 7; } - .row-end-8-s { grid-row-end: 8; } - .row-end-9-s { grid-row-end: 9; } - .row-end-10-s { grid-row-end: 10; } - .row-end-11-s { grid-row-end: 11; } - .row-end-12-s { grid-row-end: 12; } - .row-end-13-s { grid-row-end: 13; } - .row-end-14-s { grid-row-end: 14; } - .row-end-15-s { grid-row-end: 15; } - .row-end-16-s { grid-row-end: 16; } -} -@container (min-width:48em) { - .row-auto-m { grid-row: auto; } - .row-start-1-m { grid-row-start: 1; } - .row-start-2-m { grid-row-start: 2; } - .row-start-3-m { grid-row-start: 3; } - .row-start-4-m { grid-row-start: 4; } - .row-start-5-m { grid-row-start: 5; } - .row-start-6-m { grid-row-start: 6; } - .row-start-7-m { grid-row-start: 7; } - .row-start-8-m { grid-row-start: 8; } - .row-start-9-m { grid-row-start: 9; } - .row-start-10-m { grid-row-start: 10; } - .row-start-11-m { grid-row-start: 11; } - .row-start-12-m { grid-row-start: 12; } - .row-start-13-m { grid-row-start: 13; } - .row-start-14-m { grid-row-start: 14; } - .row-start-15-m { grid-row-start: 15; } - .row-start-16-m { grid-row-start: 16; } - .row-end-1-m { grid-row-end: 1; } - .row-end-2-m { grid-row-end: 2; } - .row-end-3-m { grid-row-end: 3; } - .row-end-4-m { grid-row-end: 4; } - .row-end-5-m { grid-row-end: 5; } - .row-end-6-m { grid-row-end: 6; } - .row-end-7-m { grid-row-end: 7; } - .row-end-8-m { grid-row-end: 8; } - .row-end-9-m { grid-row-end: 9; } - .row-end-10-m { grid-row-end: 10; } - .row-end-11-m { grid-row-end: 11; } - .row-end-12-m { grid-row-end: 12; } - .row-end-13-m { grid-row-end: 13; } - .row-end-14-m { grid-row-end: 14; } - .row-end-15-m { grid-row-end: 15; } - .row-end-16-m { grid-row-end: 16; } -} -@container (min-width:64em) { - .row-auto-l { grid-row: auto; } - .row-start-1-l { grid-row-start: 1; } - .row-start-2-l { grid-row-start: 2; } - .row-start-3-l { grid-row-start: 3; } - .row-start-4-l { grid-row-start: 4; } - .row-start-5-l { grid-row-start: 5; } - .row-start-6-l { grid-row-start: 6; } - .row-start-7-l { grid-row-start: 7; } - .row-start-8-l { grid-row-start: 8; } - .row-start-9-l { grid-row-start: 9; } - .row-start-10-l { grid-row-start: 10; } - .row-start-11-l { grid-row-start: 11; } - .row-start-12-l { grid-row-start: 12; } - .row-start-13-l { grid-row-start: 13; } - .row-start-14-l { grid-row-start: 14; } - .row-start-15-l { grid-row-start: 15; } - .row-start-16-l { grid-row-start: 16; } - .row-end-1-l { grid-row-end: 1; } - .row-end-2-l { grid-row-end: 2; } - .row-end-3-l { grid-row-end: 3; } - .row-end-4-l { grid-row-end: 4; } - .row-end-5-l { grid-row-end: 5; } - .row-end-6-l { grid-row-end: 6; } - .row-end-7-l { grid-row-end: 7; } - .row-end-8-l { grid-row-end: 8; } - .row-end-9-l { grid-row-end: 9; } - .row-end-10-l { grid-row-end: 10; } - .row-end-11-l { grid-row-end: 11; } - .row-end-12-l { grid-row-end: 12; } - .row-end-13-l { grid-row-end: 13; } - .row-end-14-l { grid-row-end: 14; } - .row-end-15-l { grid-row-end: 15; } - .row-end-16-l { grid-row-end: 16; } -} -/* + -25 = literal value 25% + -50 = literal value 50% + -75 = literal value 75% + -100 = literal value 100% - BACKDROP-FILTER EFFECTS + -auto = string value of auto + -inherit = string value of inherit - - Blur - - Grayscale - - Hue Rotate - - Invert - - INTERACTIONS - - Hover - - Focus + Media Query Extensions: + -ns = not-small + -m = medium + -l = large */ -.filter-none { -webkit-filter: none; filter: none; } -.blur1 { -webkit-filter: blur( 4px ); filter: blur( 4px ); } -.blur2 { -webkit-filter: blur( 16px ); filter: blur( 16px ); } -.blur3 { -webkit-filter: blur( 96px ); filter: blur( 96px ); } -.grayscale1 { -webkit-filter: grayscale( 0 ); filter: grayscale( 0 ); } -.grayscale2 { -webkit-filter: grayscale( 50% ); filter: grayscale( 50% ); } -.grayscale3 { -webkit-filter: grayscale( 100% ); filter: grayscale( 100% ); } -.hue-rotate0 { -webkit-filter: hue-rotate( 0deg ); filter: hue-rotate( 0deg ); } -.hue-rotate1 { -webkit-filter: hue-rotate( 45deg ); filter: hue-rotate( 45deg ); } -.hue-rotate2 { -webkit-filter: hue-rotate( 90deg ); filter: hue-rotate( 90deg ); } -.hue-rotate3 { -webkit-filter: hue-rotate( 135deg ); filter: hue-rotate( 135deg ); } -.hue-rotate4 { -webkit-filter: hue-rotate( 180deg ); filter: hue-rotate( 180deg ); } -.hue-rotate5 { -webkit-filter: hue-rotate( 225deg ); filter: hue-rotate( 225deg ); } -.hue-rotate6 { -webkit-filter: hue-rotate( 270deg ); filter: hue-rotate( 270deg ); } -.hue-rotate7 { -webkit-filter: hue-rotate( 315deg ); filter: hue-rotate( 315deg ); } -.invert { -webkit-filter: invert( 100% ); filter: invert( 100% ); } -/* TODO: Add drop-shadow */ -.filter-none-hover:hover { -webkit-filter: none; filter: none; } -.blur1-hover:hover { -webkit-filter: blur( 4px ); filter: blur( 4px ); } -.blur2-hover:hover { -webkit-filter: blur( 16px ); filter: blur( 16px ); } -.blur3-hover:hover { -webkit-filter: blur( 96px ); filter: blur( 96px ); } -.grayscale1-hover:hover { -webkit-filter: grayscale( 0 ); filter: grayscale( 0 ); } -.grayscale2-hover:hover { -webkit-filter: grayscale( 50% ); filter: grayscale( 50% ); } -.grayscale3-hover:hover { -webkit-filter: grayscale( 100% ); filter: grayscale( 100% ); } -.hue-rotate0-hover:hover { -webkit-filter: hue-rotate( 0deg ); filter: hue-rotate( 0deg ); } -.hue-rotate1-hover:hover { -webkit-filter: hue-rotate( 45deg ); filter: hue-rotate( 45deg ); } -.hue-rotate2-hover:hover { -webkit-filter: hue-rotate( 90deg ); filter: hue-rotate( 90deg ); } -.hue-rotate3-hover:hover { -webkit-filter: hue-rotate( 135deg ); filter: hue-rotate( 135deg ); } -.hue-rotate4-hover:hover { -webkit-filter: hue-rotate( 180deg ); filter: hue-rotate( 180deg ); } -.hue-rotate5-hover:hover { -webkit-filter: hue-rotate( 225deg ); filter: hue-rotate( 225deg ); } -.hue-rotate6-hover:hover { -webkit-filter: hue-rotate( 270deg ); filter: hue-rotate( 270deg ); } -.hue-rotate7-hover:hover { -webkit-filter: hue-rotate( 315deg ); filter: hue-rotate( 315deg ); } -.invert-hover:hover { -webkit-filter: invert( 100% ); filter: invert( 100% ); } -.blur1-focus:focus { -webkit-filter: blur( 4px ); filter: blur( 4px ); } -.blur2-focus:focus { -webkit-filter: blur( 16px ); filter: blur( 16px ); } -.blur3-focus:focus { -webkit-filter: blur( 96px ); filter: blur( 96px ); } -.grayscale1-focus:focus { -webkit-filter: grayscale( 0 ); filter: grayscale( 0 ); } -.grayscale2-focus:focus { -webkit-filter: grayscale( 50% ); filter: grayscale( 50% ); } -.grayscale3-focus:focus { -webkit-filter: grayscale( 100% ); filter: grayscale( 100% ); } -.hue-rotate0-focus:focus { -webkit-filter: hue-rotate( 0deg ); filter: hue-rotate( 0deg ); } -.hue-rotate1-focus:focus { -webkit-filter: hue-rotate( 45deg ); filter: hue-rotate( 45deg ); } -.hue-rotate2-focus:focus { -webkit-filter: hue-rotate( 90deg ); filter: hue-rotate( 90deg ); } -.hue-rotate3-focus:focus { -webkit-filter: hue-rotate( 135deg ); filter: hue-rotate( 135deg ); } -.hue-rotate4-focus:focus { -webkit-filter: hue-rotate( 180deg ); filter: hue-rotate( 180deg ); } -.hue-rotate5-focus:focus { -webkit-filter: hue-rotate( 225deg ); filter: hue-rotate( 225deg ); } -.hue-rotate6-focus:focus { -webkit-filter: hue-rotate( 270deg ); filter: hue-rotate( 270deg ); } -.hue-rotate7-focus:focus { -webkit-filter: hue-rotate( 315deg ); filter: hue-rotate( 315deg ); } -.invert-focus:focus { -webkit-filter: invert( 100% ); filter: invert( 100% ); } +/* Height Scale */ +.h1 { height: 1rem; } +.h2 { height: 2rem; } +.h3 { height: 4rem; } +.h4 { height: 8rem; } +.h5 { height: 16rem; } +/* Height Percentages - Based off of height of parent */ +.h-25 { height: 25%; } +.h-50 { height: 50%; } +.h-75 { height: 75%; } +.h-100 { height: 100%; } +.min-h-100 { min-height: 100%; } +/* Screen Height Percentage */ +.vh-25 { height: 25vh; } +.vh-50 { height: 50vh; } +.vh-75 { height: 75vh; } +.vh-100 { height: 100vh; } +.min-vh-100 { min-height: 100vh; } +/* String Properties */ +.h-auto { height: auto; } +.h-inherit { height: inherit; } /* - FILTER EFFECTS + LETTER SPACING + Docs: http://tachyons.io/docs/typography/tracking/ - - Blur - - Grayscale - - Hue Rotate - - Invert + Media Query Extensions: + -ns = not-small + -m = medium + -l = large */ -.filter-none { -webkit-filter: none; filter: none; } -.blur1 { -webkit-filter: blur( 4px ); filter: blur( 4px ); } -.blur2 { -webkit-filter: blur( 16px ); filter: blur( 16px ); } -.blur3 { -webkit-filter: blur( 96px ); filter: blur( 96px ); } -.grayscale1 { -webkit-filter: grayscale( 0 ); filter: grayscale( 0 ); } -.grayscale2 { -webkit-filter: grayscale( 50% ); filter: grayscale( 50% ); } -.grayscale3 { -webkit-filter: grayscale( 100% ); filter: grayscale( 100% ); } -.hue-rotate0 { -webkit-filter: hue-rotate( 0deg ); filter: hue-rotate( 0deg ); } -.hue-rotate1 { -webkit-filter: hue-rotate( 45deg ); filter: hue-rotate( 45deg ); } -.hue-rotate2 { -webkit-filter: hue-rotate( 90deg ); filter: hue-rotate( 90deg ); } -.hue-rotate3 { -webkit-filter: hue-rotate( 135deg ); filter: hue-rotate( 135deg ); } -.hue-rotate4 { -webkit-filter: hue-rotate( 180deg ); filter: hue-rotate( 180deg ); } -.hue-rotate5 { -webkit-filter: hue-rotate( 225deg ); filter: hue-rotate( 225deg ); } -.hue-rotate6 { -webkit-filter: hue-rotate( 270deg ); filter: hue-rotate( 270deg ); } -.hue-rotate7 { -webkit-filter: hue-rotate( 315deg ); filter: hue-rotate( 315deg ); } -.invert { -webkit-filter: invert( 100% ); filter: invert( 100% ); } -/* TODO: Add drop-shadow */ -.filter-none-hover:hover { -webkit-filter: none; filter: none; } -.blur1-hover:hover { -webkit-filter: blur( 4px ); filter: blur( 4px ); } -.blur2-hover:hover { -webkit-filter: blur( 16px ); filter: blur( 16px ); } -.blur3-hover:hover { -webkit-filter: blur( 96px ); filter: blur( 96px ); } -.grayscale1-hover:hover { -webkit-filter: grayscale( 0 ); filter: grayscale( 0 ); } -.grayscale2-hover:hover { -webkit-filter: grayscale( 50% ); filter: grayscale( 50% ); } -.grayscale3-hover:hover { -webkit-filter: grayscale( 100% ); filter: grayscale( 100% ); } -.hue-rotate0-hover:hover { -webkit-filter: hue-rotate( 0deg ); filter: hue-rotate( 0deg ); } -.hue-rotate1-hover:hover { -webkit-filter: hue-rotate( 45deg ); filter: hue-rotate( 45deg ); } -.hue-rotate2-hover:hover { -webkit-filter: hue-rotate( 90deg ); filter: hue-rotate( 90deg ); } -.hue-rotate3-hover:hover { -webkit-filter: hue-rotate( 135deg ); filter: hue-rotate( 135deg ); } -.hue-rotate4-hover:hover { -webkit-filter: hue-rotate( 180deg ); filter: hue-rotate( 180deg ); } -.hue-rotate5-hover:hover { -webkit-filter: hue-rotate( 225deg ); filter: hue-rotate( 225deg ); } -.hue-rotate6-hover:hover { -webkit-filter: hue-rotate( 270deg ); filter: hue-rotate( 270deg ); } -.hue-rotate7-hover:hover { -webkit-filter: hue-rotate( 315deg ); filter: hue-rotate( 315deg ); } -.invert-hover:hover { -webkit-filter: invert( 100% ); filter: invert( 100% ); } -.blur1-focus:focus { -webkit-filter: blur( 4px ); filter: blur( 4px ); } -.blur2-focus:focus { -webkit-filter: blur( 16px ); filter: blur( 16px ); } -.blur3-focus:focus { -webkit-filter: blur( 96px ); filter: blur( 96px ); } -.grayscale1-focus:focus { -webkit-filter: grayscale( 0 ); filter: grayscale( 0 ); } -.grayscale2-focus:focus { -webkit-filter: grayscale( 50% ); filter: grayscale( 50% ); } -.grayscale3-focus:focus { -webkit-filter: grayscale( 100% ); filter: grayscale( 100% ); } -.hue-rotate0-focus:focus { -webkit-filter: hue-rotate( 0deg ); filter: hue-rotate( 0deg ); } -.hue-rotate1-focus:focus { -webkit-filter: hue-rotate( 45deg ); filter: hue-rotate( 45deg ); } -.hue-rotate2-focus:focus { -webkit-filter: hue-rotate( 90deg ); filter: hue-rotate( 90deg ); } -.hue-rotate3-focus:focus { -webkit-filter: hue-rotate( 135deg ); filter: hue-rotate( 135deg ); } -.hue-rotate4-focus:focus { -webkit-filter: hue-rotate( 180deg ); filter: hue-rotate( 180deg ); } -.hue-rotate5-focus:focus { -webkit-filter: hue-rotate( 225deg ); filter: hue-rotate( 225deg ); } -.hue-rotate6-focus:focus { -webkit-filter: hue-rotate( 270deg ); filter: hue-rotate( 270deg ); } -.hue-rotate7-focus:focus { -webkit-filter: hue-rotate( 315deg ); filter: hue-rotate( 315deg ); } -.invert-focus:focus { -webkit-filter: invert( 100% ); filter: invert( 100% ); } +.tracked { letter-spacing: .1em; } +.tracked-tight { letter-spacing: -.05em; } +.tracked-mega { letter-spacing: .25em; } /* - FLEXBOX + LINE HEIGHT / LEADING + Docs: http://tachyons.io/docs/typography/line-height - Media Query Extensions: - -s = small - -m = medium - -l = large + Media Query Extensions: + -ns = not-small + -m = medium + -l = large */ -/* 1. Fix for Chrome 44 bug. - * https://code.google.com/p/chromium/issues/detail?id=506893 */ -.flex-auto { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } -.flex-none { flex: none; } -.flex-grow-0 { flex-grow: 0; } -.flex-grow-1 { flex-grow: 1; } -.flex-shrink-0 { flex-shrink: 0; } -.flex-shrink-1 { flex-shrink: 1; } -@container (min-width:30em) { - .flex-s { display: flex; } - .inline-flex-s { display: inline-flex; } - .flex-auto-s { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } - .flex-none-s { flex: none; } - .flex-grow-0-s { flex-grow: 0; } - .flex-grow-1-s { flex-grow: 1; } - .flex-shrink-0-s { flex-shrink: 0; } - .flex-shrink-1-s { flex-shrink: 1; } -} -@container (min-width:48em) { - .flex-m { display: flex; } - .inline-flex-m { display: inline-flex; } - .flex-auto-m { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } - .flex-none-m { flex: none; } - .flex-grow-0-m { flex-grow: 0; } - .flex-grow-1-m { flex-grow: 1; } - .flex-shrink-0-m { flex-shrink: 0; } - .flex-shrink-1-m { flex-shrink: 1; } -} -@container (min-width:64em) { - .flex-l { display: flex; } - .inline-flex-l { display: inline-flex; } - .flex-auto-l { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } - .flex-none-l { flex: none; } - .flex-grow-0-l { flex-grow: 0; } - .flex-grow-1-l { flex-grow: 1; } - .flex-shrink-0-l { flex-shrink: 0; } - .flex-shrink-1-l { flex-shrink: 1; } -} +.lh-solid { line-height: 1; } +.lh-title { line-height: 1.25; } +.lh-copy { line-height: 1.5; } /* - FLEX-DIRECTION - - Media Query Extensions: - -s = small - -m = medium - -l = large + LINKS + Docs: http://tachyons.io/docs/elements/links/ */ -.flex-column { flex-direction: column; } -.flex-row { flex-direction: row; } -.flex-column-reverse { flex-direction: column-reverse; } -.flex-row-reverse { flex-direction: row-reverse; } -@container (min-width:30em) { - .flex-column-s { flex-direction: column; } - .flex-row-s { flex-direction: row; } - .flex-column-reverse-s { flex-direction: column-reverse; } - .flex-row-reverse-s { flex-direction: row-reverse; } -} -@container (min-width:48em) { - .flex-column-m { flex-direction: column; } - .flex-row-m { flex-direction: row; } - .flex-column-reverse-m { flex-direction: column-reverse; } - .flex-row-reverse-m { flex-direction: row-reverse; } -} -@container (min-width:64em) { - .flex-column-l { flex-direction: column; } - .flex-row-l { flex-direction: row; } - .flex-column-reverse-l { flex-direction: column-reverse; } - .flex-row-reverse-l { flex-direction: row-reverse; } -} +.link { text-decoration: none; transition: color .15s ease-in; } +.link:link, .link:visited { transition: color .15s ease-in; } +.link:hover { transition: color .15s ease-in; } +.link:active { transition: color .15s ease-in; } +.link:focus { transition: color .15s ease-in; outline: 1px dotted currentColor; } /* - FLEX-WRAP - - Media Query Extensions: - -s = small - -m = medium - -l = large + LISTS + http://tachyons.io/docs/elements/lists/ */ -.flex-wrap { flex-wrap: wrap; } -.flex-nowrap { flex-wrap: nowrap; } -.flex-wrap-reverse { flex-wrap: wrap-reverse; } -@container (min-width:30em) { - .flex-wrap-s { flex-wrap: wrap; } - .flex-nowrap-s { flex-wrap: nowrap; } - .flex-wrap-reverse-s { flex-wrap: wrap-reverse; } -} -@container (min-width:48em) { - .flex-wrap-m { flex-wrap: wrap; } - .flex-nowrap-m { flex-wrap: nowrap; } - .flex-wrap-reverse-m { flex-wrap: wrap-reverse; } -} -@container (min-width:64em) { - .flex-wrap-l { flex-wrap: wrap; } - .flex-nowrap-l { flex-wrap: nowrap; } - .flex-wrap-reverse-l { flex-wrap: wrap-reverse; } -} +.list { list-style-type: none; } /* - ALIGN-ITEMS + MAX WIDTHS + Docs: http://tachyons.io/docs/layout/max-widths/ - Media Query Extensions: - -s = small - -m = medium - -l = large + Base: + mw = max-width -*/ -.items-start { align-items: flex-start; } -.items-end { align-items: flex-end; } -.items-center { align-items: center; } -.items-baseline { align-items: baseline; } -.items-stretch { align-items: stretch; } -@container (min-width:30em) { - .items-start-s { align-items: flex-start; } - .items-end-s { align-items: flex-end; } - .items-center-s { align-items: center; } - .items-baseline-s { align-items: baseline; } - .items-stretch-s { align-items: stretch; } -} -@container (min-width:48em) { - .items-start-m { align-items: flex-start; } - .items-end-m { align-items: flex-end; } - .items-center-m { align-items: center; } - .items-baseline-m { align-items: baseline; } - .items-stretch-m { align-items: stretch; } -} -@container (min-width:64em) { - .items-start-l { align-items: flex-start; } - .items-end-l { align-items: flex-end; } - .items-center-l { align-items: center; } - .items-baseline-l { align-items: baseline; } - .items-stretch-l { align-items: stretch; } -} -/* + Modifiers + 1 = 1st step in width scale + 2 = 2nd step in width scale + 3 = 3rd step in width scale + 4 = 4th step in width scale + 5 = 5th step in width scale + 6 = 6st step in width scale + 7 = 7nd step in width scale + 8 = 8rd step in width scale + 9 = 9th step in width scale - ALIGN-CONTENT + -100 = literal value 100% - Media Query Extensions: - -s = small - -m = medium - -l = large + -none = string value none - MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large */ -.content-start { align-content: flex-start; } -.content-end { align-content: flex-end; } -.content-center { align-content: center; } -.content-between { align-content: space-between; } -.content-around { align-content: space-around; } -.content-stretch { align-content: stretch; } -@container (min-width:30em) { - .content-start-s { align-content: flex-start; } - .content-end-s { align-content: flex-end; } - .content-center-s { align-content: center; } - .content-between-s { align-content: space-between; } - .content-around-s { align-content: space-around; } - .content-stretch-s { align-content: stretch; } -} -@container (min-width:48em) { - .content-start-m { align-content: flex-start; } - .content-end-m { align-content: flex-end; } - .content-center-m { align-content: center; } - .content-between-m { align-content: space-between; } - .content-around-m { align-content: space-around; } - .content-stretch-m { align-content: stretch; } -} -@container (min-width:64em) { - .content-start-l { align-content: flex-start; } - .content-end-l { align-content: flex-end; } - .content-center-l { align-content: center; } - .content-between-l { align-content: space-between; } - .content-around-l { align-content: space-around; } - .content-stretch-l { align-content: stretch; } -} +/* Max Width Percentages */ +.mw-100 { max-width: 100%; } +/* Max Width Scale */ +.mw1 { max-width: 1rem; } +.mw2 { max-width: 2rem; } +.mw3 { max-width: 4rem; } +.mw4 { max-width: 8rem; } +.mw5 { max-width: 16rem; } +.mw6 { max-width: 32rem; } +.mw7 { max-width: 48rem; } +.mw8 { max-width: 64rem; } +.mw9 { max-width: 96rem; } +/* Max Width String Properties */ +.mw-none { max-width: none; } /* - ALIGN-SELF + WIDTHS + Docs: http://tachyons.io/docs/layout/widths/ - Media Query Extensions: - -s = small - -m = medium - -l = large + Base: + w = width -*/ -.self-start { align-self: flex-start; } -.self-end { align-self: flex-end; } -.self-center { align-self: center; } -.self-baseline { align-self: baseline; } -.self-stretch { align-self: stretch; } -@container (min-width:30em) { - .self-start-s { align-self: flex-start; } - .self-end-s { align-self: flex-end; } - .self-center-s { align-self: center; } - .self-baseline-s { align-self: baseline; } - .self-stretch-s { align-self: stretch; } -} -@container (min-width:48em) { - .self-start-m { align-self: flex-start; } - .self-end-m { align-self: flex-end; } - .self-center-m { align-self: center; } - .self-baseline-m { align-self: baseline; } - .self-stretch-m { align-self: stretch; } -} -@container (min-width:64em) { - .self-start-l { align-self: flex-start; } - .self-end-l { align-self: flex-end; } - .self-center-l { align-self: center; } - .self-baseline-l { align-self: baseline; } - .self-stretch-l { align-self: stretch; } -} -/* + Modifiers + 1 = 1st step in width scale + 2 = 2nd step in width scale + 3 = 3rd step in width scale + 4 = 4th step in width scale + 5 = 5th step in width scale + + -10 = literal value 10% + -20 = literal value 20% + -25 = literal value 25% + -30 = literal value 30% + -33 = literal value 33% + -34 = literal value 34% + -40 = literal value 40% + -50 = literal value 50% + -60 = literal value 60% + -70 = literal value 70% + -75 = literal value 75% + -80 = literal value 80% + -90 = literal value 90% + -100 = literal value 100% - JUSTIFY-SELF + -third = 100% / 3 (Not supported in opera mini or IE8) + -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8) + -auto = string value auto - Media Query Extensions: - -s = small - -m = medium - -l = large - MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self + Media Query Extensions: + -ns = not-small + -m = medium + -l = large */ -.justify-self-start { justify-self: start; } -.justify-self-end { justify-self: end; } -.justify-self-center { justify-self: center; } -.justify-self-stretch { justify-self: stretch; } -@container (min-width:30em) { - .justify-self-start-s { justify-self: start; } - .justify-self-end-s { justify-self: end; } - .justify-self-center-s { justify-self: center; } - .justify-self-stretch-s { justify-self: stretch; } -} -@container (min-width:48em) { - .justify-self-start-m { justify-self: start; } - .justify-self-end-m { justify-self: end; } - .justify-self-center-m { justify-self: center; } - .justify-self-stretch-m { justify-self: stretch; } -} -@container (min-width:64em) { - .justify-self-start-l { justify-self: start; } - .justify-self-end-l { justify-self: end; } - .justify-self-center-l { justify-self: center; } - .justify-self-stretch-l { justify-self: stretch; } -} +/* Width Scale */ +.w1 { width: 1rem; } +.w2 { width: 2rem; } +.w3 { width: 4rem; } +.w4 { width: 8rem; } +.w5 { width: 16rem; } +.w-10 { width: 10%; } +.w-20 { width: 20%; } +.w-25 { width: 25%; } +.w-30 { width: 30%; } +.w-33 { width: 33%; } +.w-34 { width: 34%; } +.w-40 { width: 40%; } +.w-50 { width: 50%; } +.w-60 { width: 60%; } +.w-70 { width: 70%; } +.w-75 { width: 75%; } +.w-80 { width: 80%; } +.w-90 { width: 90%; } +.w-100 { width: 100%; } +.w-third { width: 33.33333%; } +.w-two-thirds { width: 66.66667%; } +.w-auto { width: auto; } /* - JUSTIFY-CONTENT + OVERFLOW - Media Query Extensions: - -s = small - -m = medium - -l = large + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ +.overflow-visible { overflow: visible; } +.overflow-hidden { overflow: hidden; } +.overflow-scroll { overflow: scroll; } +.overflow-auto { overflow: auto; } +.overflow-x-visible { overflow-x: visible; } +.overflow-x-hidden { overflow-x: hidden; } +.overflow-x-scroll { overflow-x: scroll; } +.overflow-x-auto { overflow-x: auto; } +.overflow-y-visible { overflow-y: visible; } +.overflow-y-hidden { overflow-y: hidden; } +.overflow-y-scroll { overflow-y: scroll; } +.overflow-y-auto { overflow-y: auto; } +/* + + POSITIONING + Docs: http://tachyons.io/docs/layout/position/ - MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content + Media Query Extensions: + -ns = not-small + -m = medium + -l = large */ -.justify-start { justify-content: flex-start; } -.justify-end { justify-content: flex-end; } -.justify-center { justify-content: center; } -.justify-between { justify-content: space-between; } -.justify-around { justify-content: space-around; } -@container (min-width:30em) { - .justify-start-s { justify-content: flex-start; } - .justify-end-s { justify-content: flex-end; } - .justify-center-s { justify-content: center; } - .justify-between-s { justify-content: space-between; } - .justify-around-s { justify-content: space-around; } -} -@container (min-width:48em) { - .justify-start-m { justify-content: flex-start; } - .justify-end-m { justify-content: flex-end; } - .justify-center-m { justify-content: center; } - .justify-between-m { justify-content: space-between; } - .justify-around-m { justify-content: space-around; } -} -@container (min-width:64em) { - .justify-start-l { justify-content: flex-start; } - .justify-end-l { justify-content: flex-end; } - .justify-center-l { justify-content: center; } - .justify-between-l { justify-content: space-between; } - .justify-around-l { justify-content: space-around; } -} +.static { position: static; } +.relative { position: relative; } +.absolute { position: absolute; } +.fixed { position: fixed; } /* - ORDER + OPACITY + Docs: http://tachyons.io/docs/themes/opacity/ - Media Query Extensions: - -s = small - -m = medium - -l = large +*/ +.o-100 { opacity: 1; } +.o-90 { opacity: .9; } +.o-80 { opacity: .8; } +.o-70 { opacity: .7; } +.o-60 { opacity: .6; } +.o-50 { opacity: .5; } +.o-40 { opacity: .4; } +.o-30 { opacity: .3; } +.o-20 { opacity: .2; } +.o-10 { opacity: .1; } +.o-05 { opacity: .05; } +.o-025 { opacity: .025; } +.o-0 { opacity: 0; } +/* + + ROTATIONS */ -.order-0 { order: 0; } -.order-1 { order: 1; } -.order-2 { order: 2; } -.order-3 { order: 3; } -.order-4 { order: 4; } -.order-5 { order: 5; } -.order-6 { order: 6; } -.order-7 { order: 7; } -.order-8 { order: 8; } -.order-last { order: 99999; } -@container (min-width:30em) { - .order-0-s { order: 0; } - .order-1-s { order: 1; } - .order-2-s { order: 2; } - .order-3-s { order: 3; } - .order-4-s { order: 4; } - .order-5-s { order: 5; } - .order-6-s { order: 6; } - .order-7-s { order: 7; } - .order-8-s { order: 8; } - .order-last-s { order: 99999; } -} -@container (min-width:48em) { - .order-0-m { order: 0; } - .order-1-m { order: 1; } - .order-2-m { order: 2; } - .order-3-m { order: 3; } - .order-4-m { order: 4; } - .order-5-m { order: 5; } - .order-6-m { order: 6; } - .order-7-m { order: 7; } - .order-8-m { order: 8; } - .order-last-m { order: 99999; } -} -@container (min-width:64em) { - .order-0-l { order: 0; } - .order-1-l { order: 1; } - .order-2-l { order: 2; } - .order-3-l { order: 3; } - .order-4-l { order: 4; } - .order-5-l { order: 5; } - .order-6-l { order: 6; } - .order-7-l { order: 7; } - .order-8-l { order: 8; } - .order-last-l { order: 99999; } -} +.rotate-45 { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); } +.rotate-90 { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); } +.rotate-135 { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); } +.rotate-180 { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); } +.rotate-225 { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); } +.rotate-270 { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); } +.rotate-315 { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); } /* - FLOATS - http://tachyons.io/docs/layout/floats/ + SKINS + Docs: http://tachyons.io/docs/themes/skins/ - 1. Floated elements are automatically rendered as block level elements. - Setting floats to display inline will fix the double margin bug in - ie6. You know... just in case. + Classes for setting foreground and background colors on elements. + If you haven't declared a border color, but set border on an element, it will + be set to the current text color. - 2. Don't forget to clearfix your floats with .cf +*/ +/* Text colors */ +.black-90 { color: rgba( 0, 0, 0, .9 ); } +.black-80 { color: rgba( 0, 0, 0, .8 ); } +.black-70 { color: rgba( 0, 0, 0, .7 ); } +.black-60 { color: rgba( 0, 0, 0, .6 ); } +.black-50 { color: rgba( 0, 0, 0, .5 ); } +.black-40 { color: rgba( 0, 0, 0, .4 ); } +.black-30 { color: rgba( 0, 0, 0, .3 ); } +.black-20 { color: rgba( 0, 0, 0, .2 ); } +.black-10 { color: rgba( 0, 0, 0, .1 ); } +.black-05 { color: rgba( 0, 0, 0, .05 ); } +.white-90 { color: rgba( 255, 255, 255, .9 ); } +.white-80 { color: rgba( 255, 255, 255, .8 ); } +.white-70 { color: rgba( 255, 255, 255, .7 ); } +.white-60 { color: rgba( 255, 255, 255, .6 ); } +.white-50 { color: rgba( 255, 255, 255, .5 ); } +.white-40 { color: rgba( 255, 255, 255, .4 ); } +.white-30 { color: rgba( 255, 255, 255, .3 ); } +.white-20 { color: rgba( 255, 255, 255, .2 ); } +.white-10 { color: rgba( 255, 255, 255, .1 ); } +.black { color: #000; } +.near-black { color: #111; } +.dark-gray { color: #333; } +.mid-gray { color: #555; } +.gray { color: #777; } +.silver { color: #999; } +.light-silver { color: #aaa; } +.moon-gray { color: #ccc; } +.light-gray { color: #eee; } +.near-white { color: #f4f4f4; } +.white { color: #fff; } +.dark-red { color: #e7040f; } +.red { color: #ff4136; } +.light-red { color: #ff725c; } +.orange { color: #ff6300; } +.gold { color: #ffb700; } +.yellow { color: #ffd700; } +.light-yellow { color: #fbf1a9; } +.purple { color: #5e2ca5; } +.light-purple { color: #a463f2; } +.dark-pink { color: #d5008f; } +.hot-pink { color: #ff41b4; } +.pink { color: #ff80cc; } +.light-pink { color: #ffa3d7; } +.dark-green { color: #137752; } +.green { color: #19a974; } +.light-green { color: #9eebcf; } +.navy { color: #001b44; } +.dark-blue { color: #00449e; } +.blue { color: #357edd; } +.light-blue { color: #96ccff; } +.lightest-blue { color: #cdecff; } +.washed-blue { color: #f6fffe; } +.washed-green { color: #e8fdf5; } +.washed-yellow { color: #fffceb; } +.washed-red { color: #ffdfdf; } +.color-inherit { color: inherit; } +/* Background colors */ +.bg-black-90 { background-color: rgba( 0, 0, 0, .9 ); } +.bg-black-80 { background-color: rgba( 0, 0, 0, .8 ); } +.bg-black-70 { background-color: rgba( 0, 0, 0, .7 ); } +.bg-black-60 { background-color: rgba( 0, 0, 0, .6 ); } +.bg-black-50 { background-color: rgba( 0, 0, 0, .5 ); } +.bg-black-40 { background-color: rgba( 0, 0, 0, .4 ); } +.bg-black-30 { background-color: rgba( 0, 0, 0, .3 ); } +.bg-black-20 { background-color: rgba( 0, 0, 0, .2 ); } +.bg-black-10 { background-color: rgba( 0, 0, 0, .1 ); } +.bg-black-05 { background-color: rgba( 0, 0, 0, .05 ); } +.bg-white-90 { background-color: rgba( 255, 255, 255, .9 ); } +.bg-white-80 { background-color: rgba( 255, 255, 255, .8 ); } +.bg-white-70 { background-color: rgba( 255, 255, 255, .7 ); } +.bg-white-60 { background-color: rgba( 255, 255, 255, .6 ); } +.bg-white-50 { background-color: rgba( 255, 255, 255, .5 ); } +.bg-white-40 { background-color: rgba( 255, 255, 255, .4 ); } +.bg-white-30 { background-color: rgba( 255, 255, 255, .3 ); } +.bg-white-20 { background-color: rgba( 255, 255, 255, .2 ); } +.bg-white-10 { background-color: rgba( 255, 255, 255, .1 ); } +.bg-black { background-color: #000; } +.bg-near-black { background-color: #111; } +.bg-dark-gray { background-color: #333; } +.bg-mid-gray { background-color: #555; } +.bg-gray { background-color: #777; } +.bg-silver { background-color: #999; } +.bg-light-silver { background-color: #aaa; } +.bg-moon-gray { background-color: #ccc; } +.bg-light-gray { background-color: #eee; } +.bg-near-white { background-color: #f4f4f4; } +.bg-white { background-color: #fff; } +.bg-transparent { background-color: transparent; } +.bg-dark-red { background-color: #e7040f; } +.bg-red { background-color: #ff4136; } +.bg-light-red { background-color: #ff725c; } +.bg-orange { background-color: #ff6300; } +.bg-gold { background-color: #ffb700; } +.bg-yellow { background-color: #ffd700; } +.bg-light-yellow { background-color: #fbf1a9; } +.bg-purple { background-color: #5e2ca5; } +.bg-light-purple { background-color: #a463f2; } +.bg-dark-pink { background-color: #d5008f; } +.bg-hot-pink { background-color: #ff41b4; } +.bg-pink { background-color: #ff80cc; } +.bg-light-pink { background-color: #ffa3d7; } +.bg-dark-green { background-color: #137752; } +.bg-green { background-color: #19a974; } +.bg-light-green { background-color: #9eebcf; } +.bg-navy { background-color: #001b44; } +.bg-dark-blue { background-color: #00449e; } +.bg-blue { background-color: #357edd; } +.bg-light-blue { background-color: #96ccff; } +.bg-lightest-blue { background-color: #cdecff; } +.bg-washed-blue { background-color: #f6fffe; } +.bg-washed-green { background-color: #e8fdf5; } +.bg-washed-yellow { background-color: #fffceb; } +.bg-washed-red { background-color: #ffdfdf; } +.bg-inherit { background-color: inherit; } +/* + + SKINS:PSEUDO + + Customize the color of an element when + it is focused or hovered over. + + */ +.hover-black:hover { color: #000; } +.hover-black:focus { color: #000; } +.hover-near-black:hover { color: #111; } +.hover-near-black:focus { color: #111; } +.hover-dark-gray:hover { color: #333; } +.hover-dark-gray:focus { color: #333; } +.hover-mid-gray:hover { color: #555; } +.hover-mid-gray:focus { color: #555; } +.hover-gray:hover { color: #777; } +.hover-gray:focus { color: #777; } +.hover-silver:hover { color: #999; } +.hover-silver:focus { color: #999; } +.hover-light-silver:hover { color: #aaa; } +.hover-light-silver:focus { color: #aaa; } +.hover-moon-gray:hover { color: #ccc; } +.hover-moon-gray:focus { color: #ccc; } +.hover-light-gray:hover { color: #eee; } +.hover-light-gray:focus { color: #eee; } +.hover-near-white:hover { color: #f4f4f4; } +.hover-near-white:focus { color: #f4f4f4; } +.hover-white:hover { color: #fff; } +.hover-white:focus { color: #fff; } +.hover-black-90:hover { color: rgba( 0, 0, 0, .9 ); } +.hover-black-90:focus { color: rgba( 0, 0, 0, .9 ); } +.hover-black-80:hover { color: rgba( 0, 0, 0, .8 ); } +.hover-black-80:focus { color: rgba( 0, 0, 0, .8 ); } +.hover-black-70:hover { color: rgba( 0, 0, 0, .7 ); } +.hover-black-70:focus { color: rgba( 0, 0, 0, .7 ); } +.hover-black-60:hover { color: rgba( 0, 0, 0, .6 ); } +.hover-black-60:focus { color: rgba( 0, 0, 0, .6 ); } +.hover-black-50:hover { color: rgba( 0, 0, 0, .5 ); } +.hover-black-50:focus { color: rgba( 0, 0, 0, .5 ); } +.hover-black-40:hover { color: rgba( 0, 0, 0, .4 ); } +.hover-black-40:focus { color: rgba( 0, 0, 0, .4 ); } +.hover-black-30:hover { color: rgba( 0, 0, 0, .3 ); } +.hover-black-30:focus { color: rgba( 0, 0, 0, .3 ); } +.hover-black-20:hover { color: rgba( 0, 0, 0, .2 ); } +.hover-black-20:focus { color: rgba( 0, 0, 0, .2 ); } +.hover-black-10:hover { color: rgba( 0, 0, 0, .1 ); } +.hover-black-10:focus { color: rgba( 0, 0, 0, .1 ); } +.hover-white-90:hover { color: rgba( 255, 255, 255, .9 ); } +.hover-white-90:focus { color: rgba( 255, 255, 255, .9 ); } +.hover-white-80:hover { color: rgba( 255, 255, 255, .8 ); } +.hover-white-80:focus { color: rgba( 255, 255, 255, .8 ); } +.hover-white-70:hover { color: rgba( 255, 255, 255, .7 ); } +.hover-white-70:focus { color: rgba( 255, 255, 255, .7 ); } +.hover-white-60:hover { color: rgba( 255, 255, 255, .6 ); } +.hover-white-60:focus { color: rgba( 255, 255, 255, .6 ); } +.hover-white-50:hover { color: rgba( 255, 255, 255, .5 ); } +.hover-white-50:focus { color: rgba( 255, 255, 255, .5 ); } +.hover-white-40:hover { color: rgba( 255, 255, 255, .4 ); } +.hover-white-40:focus { color: rgba( 255, 255, 255, .4 ); } +.hover-white-30:hover { color: rgba( 255, 255, 255, .3 ); } +.hover-white-30:focus { color: rgba( 255, 255, 255, .3 ); } +.hover-white-20:hover { color: rgba( 255, 255, 255, .2 ); } +.hover-white-20:focus { color: rgba( 255, 255, 255, .2 ); } +.hover-white-10:hover { color: rgba( 255, 255, 255, .1 ); } +.hover-white-10:focus { color: rgba( 255, 255, 255, .1 ); } +.hover-inherit:hover, .hover-inherit:focus { color: inherit; } +.hover-bg-black:hover { background-color: #000; } +.hover-bg-black:focus { background-color: #000; } +.hover-bg-near-black:hover { background-color: #111; } +.hover-bg-near-black:focus { background-color: #111; } +.hover-bg-dark-gray:hover { background-color: #333; } +.hover-bg-dark-gray:focus { background-color: #333; } +.hover-bg-mid-gray:hover { background-color: #555; } +.hover-bg-mid-gray:focus { background-color: #555; } +.hover-bg-gray:hover { background-color: #777; } +.hover-bg-gray:focus { background-color: #777; } +.hover-bg-silver:hover { background-color: #999; } +.hover-bg-silver:focus { background-color: #999; } +.hover-bg-light-silver:hover { background-color: #aaa; } +.hover-bg-light-silver:focus { background-color: #aaa; } +.hover-bg-moon-gray:hover { background-color: #ccc; } +.hover-bg-moon-gray:focus { background-color: #ccc; } +.hover-bg-light-gray:hover { background-color: #eee; } +.hover-bg-light-gray:focus { background-color: #eee; } +.hover-bg-near-white:hover { background-color: #f4f4f4; } +.hover-bg-near-white:focus { background-color: #f4f4f4; } +.hover-bg-white:hover { background-color: #fff; } +.hover-bg-white:focus { background-color: #fff; } +.hover-bg-transparent:hover { background-color: transparent; } +.hover-bg-transparent:focus { background-color: transparent; } +.hover-bg-black-90:hover { background-color: rgba( 0, 0, 0, .9 ); } +.hover-bg-black-90:focus { background-color: rgba( 0, 0, 0, .9 ); } +.hover-bg-black-80:hover { background-color: rgba( 0, 0, 0, .8 ); } +.hover-bg-black-80:focus { background-color: rgba( 0, 0, 0, .8 ); } +.hover-bg-black-70:hover { background-color: rgba( 0, 0, 0, .7 ); } +.hover-bg-black-70:focus { background-color: rgba( 0, 0, 0, .7 ); } +.hover-bg-black-60:hover { background-color: rgba( 0, 0, 0, .6 ); } +.hover-bg-black-60:focus { background-color: rgba( 0, 0, 0, .6 ); } +.hover-bg-black-50:hover { background-color: rgba( 0, 0, 0, .5 ); } +.hover-bg-black-50:focus { background-color: rgba( 0, 0, 0, .5 ); } +.hover-bg-black-40:hover { background-color: rgba( 0, 0, 0, .4 ); } +.hover-bg-black-40:focus { background-color: rgba( 0, 0, 0, .4 ); } +.hover-bg-black-30:hover { background-color: rgba( 0, 0, 0, .3 ); } +.hover-bg-black-30:focus { background-color: rgba( 0, 0, 0, .3 ); } +.hover-bg-black-20:hover { background-color: rgba( 0, 0, 0, .2 ); } +.hover-bg-black-20:focus { background-color: rgba( 0, 0, 0, .2 ); } +.hover-bg-black-10:hover { background-color: rgba( 0, 0, 0, .1 ); } +.hover-bg-black-10:focus { background-color: rgba( 0, 0, 0, .1 ); } +.hover-bg-white-90:hover { background-color: rgba( 255, 255, 255, .9 ); } +.hover-bg-white-90:focus { background-color: rgba( 255, 255, 255, .9 ); } +.hover-bg-white-80:hover { background-color: rgba( 255, 255, 255, .8 ); } +.hover-bg-white-80:focus { background-color: rgba( 255, 255, 255, .8 ); } +.hover-bg-white-70:hover { background-color: rgba( 255, 255, 255, .7 ); } +.hover-bg-white-70:focus { background-color: rgba( 255, 255, 255, .7 ); } +.hover-bg-white-60:hover { background-color: rgba( 255, 255, 255, .6 ); } +.hover-bg-white-60:focus { background-color: rgba( 255, 255, 255, .6 ); } +.hover-bg-white-50:hover { background-color: rgba( 255, 255, 255, .5 ); } +.hover-bg-white-50:focus { background-color: rgba( 255, 255, 255, .5 ); } +.hover-bg-white-40:hover { background-color: rgba( 255, 255, 255, .4 ); } +.hover-bg-white-40:focus { background-color: rgba( 255, 255, 255, .4 ); } +.hover-bg-white-30:hover { background-color: rgba( 255, 255, 255, .3 ); } +.hover-bg-white-30:focus { background-color: rgba( 255, 255, 255, .3 ); } +.hover-bg-white-20:hover { background-color: rgba( 255, 255, 255, .2 ); } +.hover-bg-white-20:focus { background-color: rgba( 255, 255, 255, .2 ); } +.hover-bg-white-10:hover { background-color: rgba( 255, 255, 255, .1 ); } +.hover-bg-white-10:focus { background-color: rgba( 255, 255, 255, .1 ); } +.hover-dark-red:hover { color: #e7040f; } +.hover-dark-red:focus { color: #e7040f; } +.hover-red:hover { color: #ff4136; } +.hover-red:focus { color: #ff4136; } +.hover-light-red:hover { color: #ff725c; } +.hover-light-red:focus { color: #ff725c; } +.hover-orange:hover { color: #ff6300; } +.hover-orange:focus { color: #ff6300; } +.hover-gold:hover { color: #ffb700; } +.hover-gold:focus { color: #ffb700; } +.hover-yellow:hover { color: #ffd700; } +.hover-yellow:focus { color: #ffd700; } +.hover-light-yellow:hover { color: #fbf1a9; } +.hover-light-yellow:focus { color: #fbf1a9; } +.hover-purple:hover { color: #5e2ca5; } +.hover-purple:focus { color: #5e2ca5; } +.hover-light-purple:hover { color: #a463f2; } +.hover-light-purple:focus { color: #a463f2; } +.hover-dark-pink:hover { color: #d5008f; } +.hover-dark-pink:focus { color: #d5008f; } +.hover-hot-pink:hover { color: #ff41b4; } +.hover-hot-pink:focus { color: #ff41b4; } +.hover-pink:hover { color: #ff80cc; } +.hover-pink:focus { color: #ff80cc; } +.hover-light-pink:hover { color: #ffa3d7; } +.hover-light-pink:focus { color: #ffa3d7; } +.hover-dark-green:hover { color: #137752; } +.hover-dark-green:focus { color: #137752; } +.hover-green:hover { color: #19a974; } +.hover-green:focus { color: #19a974; } +.hover-light-green:hover { color: #9eebcf; } +.hover-light-green:focus { color: #9eebcf; } +.hover-navy:hover { color: #001b44; } +.hover-navy:focus { color: #001b44; } +.hover-dark-blue:hover { color: #00449e; } +.hover-dark-blue:focus { color: #00449e; } +.hover-blue:hover { color: #357edd; } +.hover-blue:focus { color: #357edd; } +.hover-light-blue:hover { color: #96ccff; } +.hover-light-blue:focus { color: #96ccff; } +.hover-lightest-blue:hover { color: #cdecff; } +.hover-lightest-blue:focus { color: #cdecff; } +.hover-washed-blue:hover { color: #f6fffe; } +.hover-washed-blue:focus { color: #f6fffe; } +.hover-washed-green:hover { color: #e8fdf5; } +.hover-washed-green:focus { color: #e8fdf5; } +.hover-washed-yellow:hover { color: #fffceb; } +.hover-washed-yellow:focus { color: #fffceb; } +.hover-washed-red:hover { color: #ffdfdf; } +.hover-washed-red:focus { color: #ffdfdf; } +.hover-bg-dark-red:hover { background-color: #e7040f; } +.hover-bg-dark-red:focus { background-color: #e7040f; } +.hover-bg-red:hover { background-color: #ff4136; } +.hover-bg-red:focus { background-color: #ff4136; } +.hover-bg-light-red:hover { background-color: #ff725c; } +.hover-bg-light-red:focus { background-color: #ff725c; } +.hover-bg-orange:hover { background-color: #ff6300; } +.hover-bg-orange:focus { background-color: #ff6300; } +.hover-bg-gold:hover { background-color: #ffb700; } +.hover-bg-gold:focus { background-color: #ffb700; } +.hover-bg-yellow:hover { background-color: #ffd700; } +.hover-bg-yellow:focus { background-color: #ffd700; } +.hover-bg-light-yellow:hover { background-color: #fbf1a9; } +.hover-bg-light-yellow:focus { background-color: #fbf1a9; } +.hover-bg-purple:hover { background-color: #5e2ca5; } +.hover-bg-purple:focus { background-color: #5e2ca5; } +.hover-bg-light-purple:hover { background-color: #a463f2; } +.hover-bg-light-purple:focus { background-color: #a463f2; } +.hover-bg-dark-pink:hover { background-color: #d5008f; } +.hover-bg-dark-pink:focus { background-color: #d5008f; } +.hover-bg-hot-pink:hover { background-color: #ff41b4; } +.hover-bg-hot-pink:focus { background-color: #ff41b4; } +.hover-bg-pink:hover { background-color: #ff80cc; } +.hover-bg-pink:focus { background-color: #ff80cc; } +.hover-bg-light-pink:hover { background-color: #ffa3d7; } +.hover-bg-light-pink:focus { background-color: #ffa3d7; } +.hover-bg-dark-green:hover { background-color: #137752; } +.hover-bg-dark-green:focus { background-color: #137752; } +.hover-bg-green:hover { background-color: #19a974; } +.hover-bg-green:focus { background-color: #19a974; } +.hover-bg-light-green:hover { background-color: #9eebcf; } +.hover-bg-light-green:focus { background-color: #9eebcf; } +.hover-bg-navy:hover { background-color: #001b44; } +.hover-bg-navy:focus { background-color: #001b44; } +.hover-bg-dark-blue:hover { background-color: #00449e; } +.hover-bg-dark-blue:focus { background-color: #00449e; } +.hover-bg-blue:hover { background-color: #357edd; } +.hover-bg-blue:focus { background-color: #357edd; } +.hover-bg-light-blue:hover { background-color: #96ccff; } +.hover-bg-light-blue:focus { background-color: #96ccff; } +.hover-bg-lightest-blue:hover { background-color: #cdecff; } +.hover-bg-lightest-blue:focus { background-color: #cdecff; } +.hover-bg-washed-blue:hover { background-color: #f6fffe; } +.hover-bg-washed-blue:focus { background-color: #f6fffe; } +.hover-bg-washed-green:hover { background-color: #e8fdf5; } +.hover-bg-washed-green:focus { background-color: #e8fdf5; } +.hover-bg-washed-yellow:hover { background-color: #fffceb; } +.hover-bg-washed-yellow:focus { background-color: #fffceb; } +.hover-bg-washed-red:hover { background-color: #ffdfdf; } +.hover-bg-washed-red:focus { background-color: #ffdfdf; } +.hover-bg-inherit:hover, .hover-bg-inherit:focus { background-color: inherit; } +/* Variables */ +/* + SPACING + Docs: http://tachyons.io/docs/layout/spacing/ + + An eight step powers of two scale ranging from 0 to 16rem. Base: - f = float + p = padding + m = margin Modifiers: + a = all + h = horizontal + v = vertical + t = top + r = right + b = bottom l = left + + 0 = none + 1 = 1st step in spacing scale + 2 = 2nd step in spacing scale + 3 = 3rd step in spacing scale + 4 = 4th step in spacing scale + 5 = 5th step in spacing scale + 6 = 6th step in spacing scale + 7 = 7th step in spacing scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.pa0 { padding: 0; } +.pa1 { padding: .25rem; } +.pa2 { padding: .5rem; } +.pa3 { padding: 1rem; } +.pa4 { padding: 2rem; } +.pa5 { padding: 4rem; } +.pa6 { padding: 8rem; } +.pa7 { padding: 16rem; } +.pl0 { padding-left: 0; } +.pl1 { padding-left: .25rem; } +.pl2 { padding-left: .5rem; } +.pl3 { padding-left: 1rem; } +.pl4 { padding-left: 2rem; } +.pl5 { padding-left: 4rem; } +.pl6 { padding-left: 8rem; } +.pl7 { padding-left: 16rem; } +.pr0 { padding-right: 0; } +.pr1 { padding-right: .25rem; } +.pr2 { padding-right: .5rem; } +.pr3 { padding-right: 1rem; } +.pr4 { padding-right: 2rem; } +.pr5 { padding-right: 4rem; } +.pr6 { padding-right: 8rem; } +.pr7 { padding-right: 16rem; } +.pb0 { padding-bottom: 0; } +.pb1 { padding-bottom: .25rem; } +.pb2 { padding-bottom: .5rem; } +.pb3 { padding-bottom: 1rem; } +.pb4 { padding-bottom: 2rem; } +.pb5 { padding-bottom: 4rem; } +.pb6 { padding-bottom: 8rem; } +.pb7 { padding-bottom: 16rem; } +.pt0 { padding-top: 0; } +.pt1 { padding-top: .25rem; } +.pt2 { padding-top: .5rem; } +.pt3 { padding-top: 1rem; } +.pt4 { padding-top: 2rem; } +.pt5 { padding-top: 4rem; } +.pt6 { padding-top: 8rem; } +.pt7 { padding-top: 16rem; } +.pv0 { padding-top: 0; padding-bottom: 0; } +.pv1 { padding-top: .25rem; padding-bottom: .25rem; } +.pv2 { padding-top: .5rem; padding-bottom: .5rem; } +.pv3 { padding-top: 1rem; padding-bottom: 1rem; } +.pv4 { padding-top: 2rem; padding-bottom: 2rem; } +.pv5 { padding-top: 4rem; padding-bottom: 4rem; } +.pv6 { padding-top: 8rem; padding-bottom: 8rem; } +.pv7 { padding-top: 16rem; padding-bottom: 16rem; } +.ph0 { padding-left: 0; padding-right: 0; } +.ph1 { padding-left: .25rem; padding-right: .25rem; } +.ph2 { padding-left: .5rem; padding-right: .5rem; } +.ph3 { padding-left: 1rem; padding-right: 1rem; } +.ph4 { padding-left: 2rem; padding-right: 2rem; } +.ph5 { padding-left: 4rem; padding-right: 4rem; } +.ph6 { padding-left: 8rem; padding-right: 8rem; } +.ph7 { padding-left: 16rem; padding-right: 16rem; } +.ma0 { margin: 0; } +.ma1 { margin: .25rem; } +.ma2 { margin: .5rem; } +.ma3 { margin: 1rem; } +.ma4 { margin: 2rem; } +.ma5 { margin: 4rem; } +.ma6 { margin: 8rem; } +.ma7 { margin: 16rem; } +.ml0 { margin-left: 0; } +.ml1 { margin-left: .25rem; } +.ml2 { margin-left: .5rem; } +.ml3 { margin-left: 1rem; } +.ml4 { margin-left: 2rem; } +.ml5 { margin-left: 4rem; } +.ml6 { margin-left: 8rem; } +.ml7 { margin-left: 16rem; } +.mr0 { margin-right: 0; } +.mr1 { margin-right: .25rem; } +.mr2 { margin-right: .5rem; } +.mr3 { margin-right: 1rem; } +.mr4 { margin-right: 2rem; } +.mr5 { margin-right: 4rem; } +.mr6 { margin-right: 8rem; } +.mr7 { margin-right: 16rem; } +.mb0 { margin-bottom: 0; } +.mb1 { margin-bottom: .25rem; } +.mb2 { margin-bottom: .5rem; } +.mb3 { margin-bottom: 1rem; } +.mb4 { margin-bottom: 2rem; } +.mb5 { margin-bottom: 4rem; } +.mb6 { margin-bottom: 8rem; } +.mb7 { margin-bottom: 16rem; } +.mt0 { margin-top: 0; } +.mt1 { margin-top: .25rem; } +.mt2 { margin-top: .5rem; } +.mt3 { margin-top: 1rem; } +.mt4 { margin-top: 2rem; } +.mt5 { margin-top: 4rem; } +.mt6 { margin-top: 8rem; } +.mt7 { margin-top: 16rem; } +.mv0 { margin-top: 0; margin-bottom: 0; } +.mv1 { margin-top: .25rem; margin-bottom: .25rem; } +.mv2 { margin-top: .5rem; margin-bottom: .5rem; } +.mv3 { margin-top: 1rem; margin-bottom: 1rem; } +.mv4 { margin-top: 2rem; margin-bottom: 2rem; } +.mv5 { margin-top: 4rem; margin-bottom: 4rem; } +.mv6 { margin-top: 8rem; margin-bottom: 8rem; } +.mv7 { margin-top: 16rem; margin-bottom: 16rem; } +.mh0 { margin-left: 0; margin-right: 0; } +.mh1 { margin-left: .25rem; margin-right: .25rem; } +.mh2 { margin-left: .5rem; margin-right: .5rem; } +.mh3 { margin-left: 1rem; margin-right: 1rem; } +.mh4 { margin-left: 2rem; margin-right: 2rem; } +.mh5 { margin-left: 4rem; margin-right: 4rem; } +.mh6 { margin-left: 8rem; margin-right: 8rem; } +.mh7 { margin-left: 16rem; margin-right: 16rem; } +/* + NEGATIVE MARGINS + + Base: + n = negative + + Modifiers: + a = all + t = top r = right - n = none + b = bottom + l = left + + 1 = 1st step in spacing scale + 2 = 2nd step in spacing scale + 3 = 3rd step in spacing scale + 4 = 4th step in spacing scale + 5 = 5th step in spacing scale + 6 = 6th step in spacing scale + 7 = 7th step in spacing scale Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ -.fl { float: left; } -.fr { float: right; } -.fn { float: none; } -@container (min-width:30em) { - .fl-s { float: left; } - .fr-s { float: right; } - .fn-s { float: none; } -} -@container (min-width:48em) { - .fl-m { float: left; } - .fr-m { float: right; } - .fn-m { float: none; } -} -@container (min-width:64em) { - .fl-l { float: left; } - .fr-l { float: right; } - .fn-l { float: none; } -} -/* +.na1 { margin: -0.25rem; } +.na2 { margin: -0.5rem; } +.na3 { margin: -1rem; } +.na4 { margin: -2rem; } +.na5 { margin: -4rem; } +.na6 { margin: -8rem; } +.na7 { margin: -16rem; } +.nl1 { margin-left: -0.25rem; } +.nl2 { margin-left: -0.5rem; } +.nl3 { margin-left: -1rem; } +.nl4 { margin-left: -2rem; } +.nl5 { margin-left: -4rem; } +.nl6 { margin-left: -8rem; } +.nl7 { margin-left: -16rem; } +.nr1 { margin-right: -0.25rem; } +.nr2 { margin-right: -0.5rem; } +.nr3 { margin-right: -1rem; } +.nr4 { margin-right: -2rem; } +.nr5 { margin-right: -4rem; } +.nr6 { margin-right: -8rem; } +.nr7 { margin-right: -16rem; } +.nb1 { margin-bottom: -0.25rem; } +.nb2 { margin-bottom: -0.5rem; } +.nb3 { margin-bottom: -1rem; } +.nb4 { margin-bottom: -2rem; } +.nb5 { margin-bottom: -4rem; } +.nb6 { margin-bottom: -8rem; } +.nb7 { margin-bottom: -16rem; } +.nt1 { margin-top: -0.25rem; } +.nt2 { margin-top: -0.5rem; } +.nt3 { margin-top: -1rem; } +.nt4 { margin-top: -2rem; } +.nt5 { margin-top: -4rem; } +.nt6 { margin-top: -8rem; } +.nt7 { margin-top: -16rem; } +/* - FONT FAMILY GROUPS - Docs: http://tachyons.io/docs/typography/font-family/ + TABLES + Docs: http://tachyons.io/docs/elements/tables/ */ -.f-heading { font-family: var( --font-family-heading, sans-serif ); } -.f-body { font-family: var( --font-family-body, sans-serif ); } -.f-mono { font-family: var( --font-family-mono, monospace ); } +.collapse { border-collapse: collapse; border-spacing: 0; } +.striped--light-silver:nth-child(odd) { background-color: #aaa; } +.striped--moon-gray:nth-child(odd) { background-color: #ccc; } +.striped--light-gray:nth-child(odd) { background-color: #eee; } +.striped--near-white:nth-child(odd) { background-color: #f4f4f4; } +.stripe-light:nth-child(odd) { background-color: rgba( 255, 255, 255, .1 ); } +.stripe-dark:nth-child(odd) { background-color: rgba( 0, 0, 0, .1 ); } /* - FONT STYLE - Docs: http://tachyons.io/docs/typography/font-style/ + TEXT DECORATION + Docs: http://tachyons.io/docs/typography/text-decoration/ + Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ -.i { font-style: italic; } -.fs-normal { font-style: normal; } +.strike { text-decoration: line-through; } +.underline { text-decoration: underline; } +.no-underline { text-decoration: none; } /* - FONT WEIGHT - Docs: http://tachyons.io/docs/typography/font-weight/ + TEXT ALIGN + Docs: http://tachyons.io/docs/typography/text-align/ - Base - fw = font-weight + Base + t = text-align - Modifiers: - 1 = literal value 100 - 2 = literal value 200 - 3 = literal value 300 - 4 = literal value 400 - 5 = literal value 500 - 6 = literal value 600 - 7 = literal value 700 - 8 = literal value 800 - 9 = literal value 900 + Modifiers + l = left + r = right + c = center + j = justify + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ +.tl { text-align: left; } +.tr { text-align: right; } +.tc { text-align: center; } +.tj { text-align: justify; } +/* + + TEXT TRANSFORM + Docs: http://tachyons.io/docs/typography/text-transform/ + + Base: + tt = text-transform + + Modifiers + c = capitalize + l = lowercase + u = uppercase + n = none Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ -.normal { font-weight: normal; } -.b { font-weight: bold; } -.fw1 { font-weight: 100; } -.fw2 { font-weight: 200; } -.fw3 { font-weight: 300; } -.fw4 { font-weight: 400; } -.fw5 { font-weight: 500; } -.fw6 { font-weight: 600; } -.fw7 { font-weight: 700; } -.fw8 { font-weight: 800; } -.fw9 { font-weight: 900; } -@container (min-width:30em) { - .normal-s { font-weight: normal; } - .b-s { font-weight: bold; } - .fw1-s { font-weight: 100; } - .fw2-s { font-weight: 200; } - .fw3-s { font-weight: 300; } - .fw4-s { font-weight: 400; } - .fw5-s { font-weight: 500; } - .fw6-s { font-weight: 600; } - .fw7-s { font-weight: 700; } - .fw8-s { font-weight: 800; } - .fw9-s { font-weight: 900; } -} -@container (min-width:48em) { - .normal-m { font-weight: normal; } - .b-m { font-weight: bold; } - .fw1-m { font-weight: 100; } - .fw2-m { font-weight: 200; } - .fw3-m { font-weight: 300; } - .fw4-m { font-weight: 400; } - .fw5-m { font-weight: 500; } - .fw6-m { font-weight: 600; } - .fw7-m { font-weight: 700; } - .fw8-m { font-weight: 800; } - .fw9-m { font-weight: 900; } -} -@container (min-width:64em) { - .normal-l { font-weight: normal; } - .b-l { font-weight: bold; } - .fw1-l { font-weight: 100; } - .fw2-l { font-weight: 200; } - .fw3-l { font-weight: 300; } - .fw4-l { font-weight: 400; } - .fw5-l { font-weight: 500; } - .fw6-l { font-weight: 600; } - .fw7-l { font-weight: 700; } - .fw8-l { font-weight: 800; } - .fw9-l { font-weight: 900; } -} +.ttc { text-transform: capitalize; } +.ttl { text-transform: lowercase; } +.ttu { text-transform: uppercase; } +.ttn { text-transform: none; } /* - FORMS - -*/ -.input-reset { -webkit-appearance: none; -moz-appearance: none; appearance: none; } -.button-reset::-moz-focus-inner, .input-reset::-moz-focus-inner { border: 0; padding: 0; } -/* TODO: Variables review - - HEIGHTS - Docs: http://tachyons.io/docs/layout/heights/ + TYPE SCALE + Docs: http://tachyons.io/docs/typography/scale/ Base: - h = height - min-h = min-height - min-vh = min-height vertical screen height - vh = vertical screen height + f = font-size Modifiers - 1 = 1st step in height scale - 2 = 2nd step in height scale - 3 = 3rd step in height scale - 4 = 4th step in height scale - 5 = 5th step in height scale + 1 = 1st step in size scale + 2 = 2nd step in size scale + 3 = 3rd step in size scale + 4 = 4th step in size scale + 5 = 5th step in size scale + 6 = 6th step in size scale + 7 = 7th step in size scale - -50 = literal value 50% - -75 = literal value 75% - -100 = literal value 100% + Media Query Extensions: + -ns = not-small + -m = medium + -l = large +*/ +/* + * For Hero/Marketing Titles + * + * These generally are too large for mobile + * so be careful using them on smaller screens. + * */ +.f-6, .f-headline { font-size: 6rem; } +.f-5, .f-subheadline { font-size: 5rem; } +/* Type Scale */ +.f1 { font-size: 3rem; } +.f2 { font-size: 2.25rem; } +.f3 { font-size: 1.5rem; } +.f4 { font-size: 1.25rem; } +.f5 { font-size: 1rem; } +.f6 { font-size: .875rem; } +.f7 { font-size: .75rem; } +/* Small and hard to read for many people so use with extreme caution */ +/* - -auto = string value of auto - -inherit = string value of inherit + TYPOGRAPHY + http://tachyons.io/docs/typography/measure/ Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ -/* Height Scale */ -.h0 { height: var( --size-0, 0 ); } -.h1 { height: var( --size-1, 1rem ); } -.h2 { height: var( --size-2, 2rem ); } -.h3 { height: var( --size-3, 3rem ); } -.h4 { height: var( --size-4, 4rem ); } -.h5 { height: var( --size-5, 8rem ); } -.h6 { height: var( --size-6, 16rem ); } -.h7 { height: var( --size-7, 32rem ); } -.h8 { height: var( --size-8, 64rem ); } -/* Height Percentages - Based off of height of parent */ -.h-50 { height: 50%; } -.h-75 { height: 75%; } -.h-100 { height: 100%; } -.min-h-100 { min-height: 100%; } -/* Screen Height Percentage */ -.vh-25 { height: 25vh; } -.vh-50 { height: 50vh; } -.vh-75 { height: 75vh; } -.vh-100 { height: 100vh; } -.min-vh-100 { min-height: 100vh; } -/* String Properties */ -.h-auto { height: auto; } -.h-inherit { height: inherit; } -@container (min-width:30em) { - .h0-s { height: var( --size-0, 0 ); } - .h1-s { height: var( --size-1, 1rem ); } - .h2-s { height: var( --size-2, 2rem ); } - .h3-s { height: var( --size-3, 3rem ); } - .h4-s { height: var( --size-4, 4rem ); } - .h5-s { height: var( --size-5, 8rem ); } - .h6-s { height: var( --size-6, 16rem ); } - .h7-s { height: var( --size-7, 32rem ); } - .h8-s { height: var( --size-8, 64rem ); } - .h-50-s { height: 50%; } - .h-75-s { height: 75%; } - .h-100-s { height: 100%; } - .min-h-100-s { min-height: 100%; } - .vh-25-s { height: 25vh; } - .vh-50-s { height: 50vh; } - .vh-75-s { height: 75vh; } - .vh-100-s { height: 100vh; } - .min-vh-100-s { min-height: 100vh; } - .h-auto-s { height: auto; } - .h-inherit-s { height: inherit; } -} -@container (min-width:48em) { - .h1-m { height: 1rem; } - .h2-m { height: 2rem; } - .h3-m { height: 4rem; } - .h4-m { height: 8rem; } - .h5-m { height: 16rem; } - .h-50-m { height: 50%; } - .h-75-m { height: 75%; } - .h-100-m { height: 100%; } - .min-h-100-m { min-height: 100%; } - .vh-25-m { height: 25vh; } - .vh-50-m { height: 50vh; } - .vh-75-m { height: 75vh; } - .vh-100-m { height: 100vh; } - .min-vh-100-m { min-height: 100vh; } - .h-auto-m { height: auto; } - .h-inherit-m { height: inherit; } -} -@container (min-width:64em) { - .h1-l { height: 1rem; } - .h2-l { height: 2rem; } - .h3-l { height: 4rem; } - .h4-l { height: 8rem; } - .h5-l { height: 16rem; } - .h-50-l { height: 50%; } - .h-75-l { height: 75%; } - .h-100-l { height: 100%; } - .min-h-100-l { min-height: 100%; } - .vh-25-l { height: 25vh; } - .vh-50-l { height: 50vh; } - .vh-75-l { height: 75vh; } - .vh-100-l { height: 100vh; } - .min-vh-100-l { min-height: 100vh; } - .h-auto-l { height: auto; } - .h-inherit-l { height: inherit; } -} +/* Measure is limited to ~66 characters */ +.measure { max-width: 30em; } +/* Measure is limited to ~80 characters */ +.measure-wide { max-width: 34em; } +/* Measure is limited to ~45 characters */ +.measure-narrow { max-width: 20em; } +/* Book paragraph style - paragraphs are indented with no vertical spacing. */ +.indent { text-indent: 1em; margin-top: 0; margin-bottom: 0; } +.small-caps { font-variant: small-caps; } +/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */ +.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* - LETTER SPACING - Docs: http://tachyons.io/docs/typography/tracking/ + UTILITIES Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ -.tracked { letter-spacing: var( --letter-spacing-tracked, .1em ); } -.tracked-tight { letter-spacing: var( --letter-spacing-tight, -0.05em ); } -.tracked-mega { letter-spacing: var( --letter-spacing-large, .25em ); } -@container (min-width:30em) { - .tracked-s { letter-spacing: var( --letter-spacing-tracked, .1em ); } - .tracked-tight-s { letter-spacing: var( --letter-spacing-tight, -0.05em ); } - .tracked-mega-s { letter-spacing: var( --letter-spacing-large, .25em ); } -} -@container (min-width:48em) { - .tracked-m { letter-spacing: var( --letter-spacing-tracked, .1em ); } - .tracked-tight-m { letter-spacing: var( --letter-spacing-tight, -0.05em ); } - .tracked-mega-m { letter-spacing: var( --letter-spacing-large, .25em ); } -} -@container (min-width:64em) { - .tracked-l { letter-spacing: var( --letter-spacing-tracked, .1em ); } - .tracked-tight-l { letter-spacing: var( --letter-spacing-tight, -0.05em ); } - .tracked-mega-l { letter-spacing: var( --letter-spacing-large, .25em ); } -} +/* Equivalent to .overflow-y-scroll */ +.overflow-container { overflow-y: scroll; } +.center { margin-right: auto; margin-left: auto; } +.mr-auto { margin-right: auto; } +.ml-auto { margin-left: auto; } /* - LINE HEIGHT / LEADING - Docs: http://tachyons.io/docs/typography/line-height + VISIBILITY Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ -.lh-solid { line-height: var( --line-height-solid, 1 ); } -.lh-title { line-height: var( --line-height-title, 1.25 ); } -.lh-body { line-height: var( --line-height-body, 1.5 ); } -@container (min-width:30em) { - .lh-solid-s { line-height: var( --line-height-solid, 1 ); } - .lh-title-s { line-height: var( --line-height-title, 1.25 ); } - .lh-body-s { line-height: var( --line-height-body, 1.5 ); } -} -@container (min-width:48em) { - .lh-solid-m { line-height: var( --line-height-solid, 1 ); } - .lh-title-m { line-height: var( --line-height-title, 1.25 ); } - .lh-body-m { line-height: var( --line-height-body, 1.5 ); } -} -@container (min-width:64em) { - .lh-solid-l { line-height: var( --line-height-solid, 1 ); } - .lh-title-l { line-height: var( --line-height-title, 1.25 ); } - .lh-body-l { line-height: var( --line-height-body, 1.5 ); } -} +/* + Text that is hidden but accessible + Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility +*/ +.clip { position: fixed !important; _position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); } /* - LINKS - Docs: http://tachyons.io/docs/elements/links/ + WHITE SPACE + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large */ -.link { text-decoration: none; transition: all .15s ease-in; } -.link:link, .link:visited { transition: all .15s ease-in; } -.link:hover { transition: all .15s ease-in; } -.link:active { transition: all .15s ease-in; } -.link:focus { transition: all .15s ease-in; outline: 1px dotted currentColor; } +.ws-normal { white-space: normal; } +.nowrap { white-space: nowrap; } +.pre { white-space: pre; } /* - LISTS - http://tachyons.io/docs/elements/lists/ + VERTICAL ALIGN + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large */ -.list { list-style-type: none; } +.v-base { vertical-align: baseline; } +.v-mid { vertical-align: middle; } +.v-top { vertical-align: top; } +.v-btm { vertical-align: bottom; } /* - MAX WIDTHS - Docs: http://tachyons.io/docs/layout/max-widths/ - - Base: - mw = max-width + HOVER EFFECTS + Docs: http://tachyons.io/docs/themes/hovers/ - Modifiers - 1 = 1st step in width scale - 2 = 2nd step in width scale - 3 = 3rd step in width scale - 4 = 4th step in width scale - 5 = 5th step in width scale - 6 = 6st step in width scale - 7 = 7nd step in width scale - 8 = 8rd step in width scale - 9 = 9th step in width scale + - Dim + - Glow + - Hide Child + - Underline text + - Grow + - Pointer + - Shadow - -100 = literal value 100% +*/ +/* - -none = string value none + Dim element on hover by adding the dim class. +*/ +.dim { opacity: 1; transition: opacity .15s ease-in; } +.dim:hover, .dim:focus { opacity: .5; transition: opacity .15s ease-in; } +.dim:active { opacity: .8; transition: opacity .15s ease-out; } +/* - Media Query Extensions: - -s = small - -m = medium - -l = large + Animate opacity to 100% on hover by adding the glow class. */ -/* Max Width Percentages */ -.mw-100 { max-width: 100%; } -/* Max Width Scale */ -.mw1 { max-width: 1rem; } -.mw2 { max-width: 2rem; } -.mw3 { max-width: 4rem; } -.mw4 { max-width: 8rem; } -.mw5 { max-width: 16rem; } -.mw6 { max-width: 32rem; } -.mw7 { max-width: 48rem; } -.mw8 { max-width: 64rem; } -.mw9 { max-width: 96rem; } -/* Max Width String Properties */ -.mw-none { max-width: none; } -@container (min-width:30em) { - .mw-100-s { max-width: 100%; } - .mw1-s { max-width: 1rem; } - .mw2-s { max-width: 2rem; } - .mw3-s { max-width: 4rem; } - .mw4-s { max-width: 8rem; } - .mw5-s { max-width: 16rem; } - .mw6-s { max-width: 32rem; } - .mw7-s { max-width: 48rem; } - .mw8-s { max-width: 64rem; } - .mw9-s { max-width: 96rem; } - .mw-none-s { max-width: none; } -} -@container (min-width:48em) { - .mw-100-m { max-width: 100%; } - .mw1-m { max-width: 1rem; } - .mw2-m { max-width: 2rem; } - .mw3-m { max-width: 4rem; } - .mw4-m { max-width: 8rem; } - .mw5-m { max-width: 16rem; } - .mw6-m { max-width: 32rem; } - .mw7-m { max-width: 48rem; } - .mw8-m { max-width: 64rem; } - .mw9-m { max-width: 96rem; } - .mw-none-m { max-width: none; } -} -@container (min-width:64em) { - .mw-100-l { max-width: 100%; } - .mw1-l { max-width: 1rem; } - .mw2-l { max-width: 2rem; } - .mw3-l { max-width: 4rem; } - .mw4-l { max-width: 8rem; } - .mw5-l { max-width: 16rem; } - .mw6-l { max-width: 32rem; } - .mw7-l { max-width: 48rem; } - .mw8-l { max-width: 64rem; } - .mw9-l { max-width: 96rem; } - .mw-none-l { max-width: none; } -} +.glow { transition: opacity .15s ease-in; } +.glow:hover, .glow:focus { opacity: 1; transition: opacity .15s ease-in; } /* - WIDTHS - Docs: http://tachyons.io/docs/layout/widths/ + Hide child & reveal on hover: - Base: - w = width + Put the hide-child class on a parent element and any nested element with the + child class will be hidden and displayed on hover or focus. - Modifiers - 1 = 1st step in width scale - 2 = 2nd step in width scale - 3 = 3rd step in width scale - 4 = 4th step in width scale - 5 = 5th step in width scale - 6 = 6th step in width scale - 7 = 7th step in width scale - 8 = 8th step in width scale +
+
Hidden until hover or focus
+
Hidden until hover or focus
+
Hidden until hover or focus
+
Hidden until hover or focus
+
+*/ +.hide-child .child { opacity: 0; transition: opacity .15s ease-in; } +.hide-child:hover .child, .hide-child:focus .child, .hide-child:active .child { opacity: 1; transition: opacity .15s ease-in; } +.underline-hover:hover, .underline-hover:focus { text-decoration: underline; } +/* Can combine this with overflow-hidden to make background images grow on hover + * even if you are using background-size: cover */ +.grow { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); transition: -webkit-transform .25s ease-out; transition: transform .25s ease-out; transition: transform .25s ease-out, -webkit-transform .25s ease-out; } +.grow:hover, .grow:focus { -webkit-transform: scale( 1.05 ); transform: scale( 1.05 ); } +.grow:active { -webkit-transform: scale( .90 ); transform: scale( .90 ); } +.grow-large { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); transition: -webkit-transform .25s ease-in-out; transition: transform .25s ease-in-out; transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out; } +.grow-large:hover, .grow-large:focus { -webkit-transform: scale( 1.2 ); transform: scale( 1.2 ); } +.grow-large:active { -webkit-transform: scale( .95 ); transform: scale( .95 ); } +/* Add pointer on hover */ +.pointer:hover { cursor: pointer; } +/* + Add shadow on hover. - -10 = literal value 10% - -20 = literal value 20% - -25 = literal value 25% - -30 = literal value 30% - -33 = literal value 33% - -34 = literal value 34% - -40 = literal value 40% - -50 = literal value 50% - -60 = literal value 60% - -70 = literal value 70% - -75 = literal value 75% - -80 = literal value 80% - -90 = literal value 90% - -100 = literal value 100% + Performant box-shadow animation pattern from + http://tobiasahlin.com/blog/how-to-animate-box-shadow/ +*/ +.shadow-hover { cursor: pointer; position: relative; transition: all .5s cubic-bezier( .165, .84, .44, 1 ); } +.shadow-hover::after { content: ''; box-shadow: 0 0 16px 2px rgba( 0, 0, 0, .2 ); border-radius: inherit; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transition: opacity .5s cubic-bezier( .165, .84, .44, 1 ); } +.shadow-hover:hover::after, .shadow-hover:focus::after { opacity: 1; } +/* Combine with classes in skins and skins-pseudo for + * many different transition possibilities. */ +.bg-animate, .bg-animate:hover, .bg-animate:focus { transition: background-color .15s ease-in-out; } +/* - -third = 100% / 3 (Not supported in opera mini or IE8) - -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8) - -auto = string value auto + Z-INDEX + Base + z = z-index - Media Query Extensions: - -s = small - -m = medium - -l = large + Modifiers + -0 = literal value 0 + -1 = literal value 1 + -2 = literal value 2 + -3 = literal value 3 + -4 = literal value 4 + -5 = literal value 5 + -999 = literal value 999 + -9999 = literal value 9999 + + -max = largest accepted z-index value as integer + + -inherit = string value inherit + -initial = string value initial + -unset = string value unset + + MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index + Spec: http://www.w3.org/TR/CSS2/zindex.html + Articles: + https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ + + Tips on extending: + There might be a time worth using negative z-index values. + Or if you are using tachyons with another project, you might need to + adjust these values to suit your needs. */ -/* Width Scale */ -.w0 { width: var( --size-0, 0 ); } -.w1 { width: var( --size-1, 1rem ); } -.w2 { width: var( --size-2, 2rem ); } -.w3 { width: var( --size-3, 3rem ); } -.w4 { width: var( --size-4, 4rem ); } -.w5 { width: var( --size-5, 8rem ); } -.w6 { width: var( --size-6, 16rem ); } -.w7 { width: var( --size-7, 32rem ); } -.w8 { width: var( --size-8, 64rem ); } -.w-10 { width: 10%; } -.w-20 { width: 20%; } -.w-25 { width: 25%; } -.w-50 { width: 50%; } -.w-75 { width: 75%; } -.w-100 { width: 100%; } -.w-third { width: calc( 100% / 3 ); } -.w-two-thirds { width: calc( 100% / 1.5 ); } -.w-auto { width: auto; } -@container (min-width:30em) { - .w0-s { width: var( --size-0, 0 ); } - .w1-s { width: var( --size-1, 1rem ); } - .w2-s { width: var( --size-2, 2rem ); } - .w3-s { width: var( --size-3, 3rem ); } - .w4-s { width: var( --size-4, 4rem ); } - .w5-s { width: var( --size-5, 8rem ); } - .w6-s { width: var( --size-6, 16rem ); } - .w7-s { width: var( --size-7, 32rem ); } - .w8-s { width: var( --size-8, 64rem ); } - .w-10-s { width: 10%; } - .w-20-s { width: 20%; } - .w-25-s { width: 25%; } - .w-50-s { width: 50%; } - .w-75-s { width: 75%; } - .w-100-s { width: 100%; } - .w-third-s { width: calc( 100% / 3 ); } - .w-two-thirds-s { width: calc( 100% / 1.5 ); } - .w-auto-s { width: auto; } -} -@container (min-width:48em) { - .w0-m { width: var( --size-0, 0 ); } - .w1-m { width: var( --size-1, 1rem ); } - .w2-m { width: var( --size-2, 2rem ); } - .w3-m { width: var( --size-3, 3rem ); } - .w4-m { width: var( --size-4, 4rem ); } - .w5-m { width: var( --size-5, 8rem ); } - .w6-m { width: var( --size-6, 16rem ); } - .w7-m { width: var( --size-7, 32rem ); } - .w8-m { width: var( --size-8, 64rem ); } - .w-10-m { width: 10%; } - .w-20-m { width: 20%; } - .w-25-m { width: 25%; } - .w-50-m { width: 50%; } - .w-75-m { width: 75%; } - .w-100-m { width: 100%; } - .w-third-m { width: calc( 100% / 3 ); } - .w-two-thirds-m { width: calc( 100% / 1.5 ); } - .w-auto-m { width: auto; } -} -@container (min-width:64em) { - .w0-l { width: var( --size-0, 0 ); } - .w1-l { width: var( --size-1, 1rem ); } - .w2-l { width: var( --size-2, 2rem ); } - .w3-l { width: var( --size-3, 3rem ); } - .w4-l { width: var( --size-4, 4rem ); } - .w5-l { width: var( --size-5, 8rem ); } - .w6-l { width: var( --size-6, 16rem ); } - .w7-l { width: var( --size-7, 32rem ); } - .w8-l { width: var( --size-8, 64rem ); } - .w-10-l { width: 10%; } - .w-20-l { width: 20%; } - .w-25-l { width: 25%; } - .w-50-l { width: 50%; } - .w-75-l { width: 75%; } - .w-100-l { width: 100%; } - .w-third-l { width: calc( 100% / 3 ); } - .w-two-thirds-l { width: calc( 100% / 1.5 ); } - .w-auto-l { width: auto; } -} +.z-0 { z-index: 0; } +.z-1 { z-index: 1; } +.z-2 { z-index: 2; } +.z-3 { z-index: 3; } +.z-4 { z-index: 4; } +.z-5 { z-index: 5; } +.z-999 { z-index: 999; } +.z-9999 { z-index: 9999; } +.z-max { z-index: 2147483647; } +.z-inherit { z-index: inherit; } +.z-initial { z-index: initial; } +.z-unset { z-index: unset; } /* - OVERFLOW - - Media Query Extensions: - -s = small - -m = medium - -l = large + NESTED + Tachyons module for styling nested elements + that are generated by a cms. - */ -.overflow-visible { overflow: visible; } -.overflow-hidden { overflow: hidden; } -.overflow-scroll { overflow: scroll; } -.overflow-auto { overflow: auto; } -.overflow-x-visible { overflow-x: visible; } -.overflow-x-hidden { overflow-x: hidden; } -.overflow-x-scroll { overflow-x: scroll; } -.overflow-x-auto { overflow-x: auto; } -.overflow-y-visible { overflow-y: visible; } -.overflow-y-hidden { overflow-y: hidden; } -.overflow-y-scroll { overflow-y: scroll; } -.overflow-y-auto { overflow-y: auto; } -@container (min-width:30em) { - .overflow-visible-s { overflow: visible; } - .overflow-hidden-s { overflow: hidden; } - .overflow-scroll-s { overflow: scroll; } - .overflow-auto-s { overflow: auto; } - .overflow-x-visible-s { overflow-x: visible; } - .overflow-x-hidden-s { overflow-x: hidden; } - .overflow-x-scroll-s { overflow-x: scroll; } - .overflow-x-auto-s { overflow-x: auto; } - .overflow-y-visible-s { overflow-y: visible; } - .overflow-y-hidden-s { overflow-y: hidden; } - .overflow-y-scroll-s { overflow-y: scroll; } - .overflow-y-auto-s { overflow-y: auto; } -} -@container (min-width:48em) { - .overflow-visible-m { overflow: visible; } - .overflow-hidden-m { overflow: hidden; } - .overflow-scroll-m { overflow: scroll; } - .overflow-auto-m { overflow: auto; } - .overflow-x-visible-m { overflow-x: visible; } - .overflow-x-hidden-m { overflow-x: hidden; } - .overflow-x-scroll-m { overflow-x: scroll; } - .overflow-x-auto-m { overflow-x: auto; } - .overflow-y-visible-m { overflow-y: visible; } - .overflow-y-hidden-m { overflow-y: hidden; } - .overflow-y-scroll-m { overflow-y: scroll; } - .overflow-y-auto-m { overflow-y: auto; } -} -@container (min-width:64em) { - .overflow-visible-l { overflow: visible; } - .overflow-hidden-l { overflow: hidden; } - .overflow-scroll-l { overflow: scroll; } - .overflow-auto-l { overflow: auto; } - .overflow-x-visible-l { overflow-x: visible; } - .overflow-x-hidden-l { overflow-x: hidden; } - .overflow-x-scroll-l { overflow-x: scroll; } - .overflow-x-auto-l { overflow-x: auto; } - .overflow-y-visible-l { overflow-y: visible; } - .overflow-y-hidden-l { overflow-y: hidden; } - .overflow-y-scroll-l { overflow-y: scroll; } - .overflow-y-auto-l { overflow-y: auto; } -} +*/ +.nested-copy-line-height p, .nested-copy-line-height ul, +.nested-copy-line-height ol { line-height: 1.5; } +.nested-headline-line-height h1, .nested-headline-line-height h2, +.nested-headline-line-height h3, .nested-headline-line-height h4, +.nested-headline-line-height h5, .nested-headline-line-height h6 { line-height: 1.25; } +.nested-list-reset ul, .nested-list-reset ol { padding-left: 0; margin-left: 0; list-style-type: none; } +.nested-copy-indent p+p { text-indent: 1em; margin-top: 0; margin-bottom: 0; } +.nested-copy-separator p+p { margin-top: 1.5em; } +.nested-img img { width: 100%; max-width: 100%; display: block; } +.nested-links a { color: #357edd; transition: color .15s ease-in; } +.nested-links a:hover { color: #96ccff; transition: color .15s ease-in; } +.nested-links a:focus { color: #96ccff; transition: color .15s ease-in; } /* - POSITIONING - Docs: http://tachyons.io/docs/layout/position/ + STYLES - Media Query Extensions: - -s = small - -m = medium - -l = large + Add custom styles here. */ -.static { position: static; } -.relative { position: relative; } -.absolute { position: absolute; } -.fixed { position: fixed; } -.sticky { position: -webkit-sticky; position: sticky; } -@container (min-width:30em) { - .static-s { position: static; } - .relative-s { position: relative; } - .absolute-s { position: absolute; } - .fixed-s { position: fixed; } - .sticky-s { position: -webkit-sticky; position: sticky; } -} -@container (min-width:48em) { - .static-m { position: static; } - .relative-m { position: relative; } - .absolute-m { position: absolute; } - .fixed-m { position: fixed; } - .sticky-m { position: -webkit-sticky; position: sticky; } -} -@container (min-width:64em) { - .static-l { position: static; } - .relative-l { position: relative; } - .absolute-l { position: absolute; } - .fixed-l { position: fixed; } - .sticky-l { position: -webkit-sticky; position: sticky; } -} +/* Variables */ +/* Importing here will allow you to override any variables in the modules */ /* - OPACITY - Docs: http://tachyons.io/docs/themes/opacity/ + Tachyons + COLOR VARIABLES + + Grayscale + - Solids + - Transparencies + Colors */ -.o12 { opacity: var( --opacity-12, 1 ); } -.o11 { opacity: var( --opacity-11, .9 ); } -.o10 { opacity: var( --opacity-10, .8 ); } -.o9 { opacity: var( --opacity-9, .7 ); } -.o8 { opacity: var( --opacity-8, .6 ); } -.o7 { opacity: var( --opacity-7, .5 ); } -.o6 { opacity: var( --opacity-6, .4 ); } -.o5 { opacity: var( --opacity-5, .3 ); } -.o4 { opacity: var( --opacity-4, .2 ); } -.o3 { opacity: var( --opacity-3, .1 ); } -.o2 { opacity: var( --opacity-2, .05 ); } -.o1 { opacity: var( --opacity-1, .025 ); } -.o0 { opacity: var( --opacity-0, 0 ); } -.h-o12:hover { opacity: var( --opacity-12, 1 ); } -.h-o11:hover { opacity: var( --opacity-11, .9 ); } -.h-o10:hover { opacity: var( --opacity-10, .8 ); } -.h-o9:hover { opacity: var( --opacity-9, .7 ); } -.h-o8:hover { opacity: var( --opacity-8, .6 ); } -.h-o7:hover { opacity: var( --opacity-7, .5 ); } -.h-o6:hover { opacity: var( --opacity-6, .4 ); } -.h-o5:hover { opacity: var( --opacity-5, .3 ); } -.h-o4:hover { opacity: var( --opacity-4, .2 ); } -.h-o3:hover { opacity: var( --opacity-3, .1 ); } -.h-o2:hover { opacity: var( --opacity-2, .05 ); } -.h-o1:hover { opacity: var( --opacity-1, .025 ); } -.h-o0:hover { opacity: var( --opacity-0, 0 ); } -.f-o12:focus { opacity: var( --opacity-12, 1 ); } -.f-o11:focus { opacity: var( --opacity-11, .9 ); } -.f-o10:focus { opacity: var( --opacity-10, .8 ); } -.f-o9:focus { opacity: var( --opacity-9, .7 ); } -.f-o8:focus { opacity: var( --opacity-8, .6 ); } -.f-o7:focus { opacity: var( --opacity-7, .5 ); } -.f-o6:focus { opacity: var( --opacity-6, .4 ); } -.f-o5:focus { opacity: var( --opacity-5, .3 ); } -.f-o4:focus { opacity: var( --opacity-4, .2 ); } -.f-o3:focus { opacity: var( --opacity-3, .1 ); } -.f-o2:focus { opacity: var( --opacity-2, .05 ); } -.f-o1:focus { opacity: var( --opacity-1, .025 ); } -.f-o0:focus { opacity: var( --opacity-0, 0 ); } /* - ROTATIONS + CUSTOM MEDIA QUERIES -*/ -.rotate-45 { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); } -.rotate-90 { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); } -.rotate-135 { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); } -.rotate-180 { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); } -.rotate-225 { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); } -.rotate-270 { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); } -.rotate-315 { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); } -@container (min-width:30em) { - .rotate-45-s { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); } - .rotate-90-s { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); } - .rotate-135-s { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); } - .rotate-180-s { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); } - .rotate-225-s { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); } - .rotate-270-s { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); } - .rotate-315-s { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); } -} -@container (min-width:48em) { - .rotate-45-m { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); } - .rotate-90-m { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); } - .rotate-135-m { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); } - .rotate-180-m { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); } - .rotate-225-m { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); } - .rotate-270-m { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); } - .rotate-315-m { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); } -} -@container (min-width:64em) { - .rotate-45-l { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); } - .rotate-90-l { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); } - .rotate-135-l { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); } - .rotate-180-l { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); } - .rotate-225-l { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); } - .rotate-270-l { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); } - .rotate-315-l { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); } -} -/* - SKINS - Docs: http://tachyons.io/docs/themes/skins/ - - Classes for setting foreground and background colors on elements. - If you haven't declared a border color, but set border on an element, it will - be set to the current text color. - -*/ -/* Text colors */ -.tint-0 { color: var( --tint-0 ); } -.tint-1 { color: var( --tint-1 ); } -.tint-2 { color: var( --tint-2 ); } -.tint-3 { color: var( --tint-3 ); } -.tint-4 { color: var( --tint-4 ); } -.tint-5 { color: var( --tint-5 ); } -.tint-6 { color: var( --tint-6 ); } -.tint-7 { color: var( --tint-7 ); } -.tint-8 { color: var( --tint-8 ); } -.tint-9 { color: var( --tint-9 ); } -.tint-10 { color: var( --tint-10 ); } -.tint-11 { color: var( --tint-11 ); } -.shadow-0 { color: var( --shadow-0 ); } -.shadow-1 { color: var( --shadow-1 ); } -.shadow-2 { color: var( --shadow-2 ); } -.shadow-3 { color: var( --shadow-3 ); } -.shadow-4 { color: var( --shadow-4 ); } -.shadow-5 { color: var( --shadow-5 ); } -.shadow-6 { color: var( --shadow-6 ); } -.shadow-7 { color: var( --shadow-7 ); } -.shadow-8 { color: var( --shadow-8 ); } -.shadow-9 { color: var( --shadow-9 ); } -.shadow-10 { color: var( --shadow-10 ); } -.shadow-11 { color: var( --shadow-11 ); } -.black, .gray-0 { color: var( --gray-0 ); } -.gray-1 { color: var( --gray-1 ); } -.gray-2 { color: var( --gray-2 ); } -.gray-3 { color: var( --gray-3 ); } -.gray-4 { color: var( --gray-4 ); } -.gray-5 { color: var( --gray-5 ); } -.gray-6 { color: var( --gray-6 ); } -.gray-7 { color: var( --gray-7 ); } -.gray-8 { color: var( --gray-8 ); } -.gray-9 { color: var( --gray-9 ); } -.gray-10 { color: var( --gray-10 ); } -.white, .gray-11 { color: var( --gray-11 ); } -.slate-gray-0 { color: var( --slate-gray-0 ); } -.slate-gray-1 { color: var( --slate-gray-1 ); } -.slate-gray-2 { color: var( --slate-gray-2 ); } -.slate-gray-3 { color: var( --slate-gray-3 ); } -.slate-gray-4 { color: var( --slate-gray-4 ); } -.slate-gray-5 { color: var( --slate-gray-5 ); } -.slate-gray-6 { color: var( --slate-gray-6 ); } -.slate-gray-7 { color: var( --slate-gray-7 ); } -.slate-gray-8 { color: var( --slate-gray-8 ); } -.slate-gray-9 { color: var( --slate-gray-9 ); } -.slate-gray-10 { color: var( --slate-gray-10 ); } -.slate-gray-11 { color: var( --slate-gray-11 ); } -.blue-0 { color: var( --blue-0 ); } -.blue-1 { color: var( --blue-1 ); } -.blue-2 { color: var( --blue-2 ); } -.blue-3 { color: var( --blue-3 ); } -.blue-4 { color: var( --blue-4 ); } -.blue-5 { color: var( --blue-5 ); } -.blue-6 { color: var( --blue-6 ); } -.blue-7 { color: var( --blue-7 ); } -.blue-8 { color: var( --blue-8 ); } -.blue-9 { color: var( --blue-9 ); } -.blue-10 { color: var( --blue-10 ); } -.blue-11 { color: var( --blue-11 ); } -.indigo-0 { color: var( --indigo-0 ); } -.indigo-1 { color: var( --indigo-1 ); } -.indigo-2 { color: var( --indigo-2 ); } -.indigo-3 { color: var( --indigo-3 ); } -.indigo-4 { color: var( --indigo-4 ); } -.indigo-5 { color: var( --indigo-5 ); } -.indigo-6 { color: var( --indigo-6 ); } -.indigo-7 { color: var( --indigo-7 ); } -.indigo-8 { color: var( --indigo-8 ); } -.indigo-9 { color: var( --indigo-9 ); } -.indigo-10 { color: var( --indigo-10 ); } -.indigo-11 { color: var( --indigo-11 ); } -.violet-0 { color: var( --violet-0 ); } -.violet-1 { color: var( --violet-1 ); } -.violet-2 { color: var( --violet-2 ); } -.violet-3 { color: var( --violet-3 ); } -.violet-4 { color: var( --violet-4 ); } -.violet-5 { color: var( --violet-5 ); } -.violet-6 { color: var( --violet-6 ); } -.violet-7 { color: var( --violet-7 ); } -.violet-8 { color: var( --violet-8 ); } -.violet-9 { color: var( --violet-9 ); } -.violet-10 { color: var( --violet-10 ); } -.violet-11 { color: var( --violet-11 ); } -.magenta-0 { color: var( --magenta-0 ); } -.magenta-1 { color: var( --magenta-1 ); } -.magenta-2 { color: var( --magenta-2 ); } -.magenta-3 { color: var( --magenta-3 ); } -.magenta-4 { color: var( --magenta-4 ); } -.magenta-5 { color: var( --magenta-5 ); } -.magenta-6 { color: var( --magenta-6 ); } -.magenta-7 { color: var( --magenta-7 ); } -.magenta-8 { color: var( --magenta-8 ); } -.magenta-9 { color: var( --magenta-9 ); } -.magenta-10 { color: var( --magenta-10 ); } -.magenta-11 { color: var( --magenta-11 ); } -.red-0 { color: var( --red-0 ); } -.red-1 { color: var( --red-1 ); } -.red-2 { color: var( --red-2 ); } -.red-3 { color: var( --red-3 ); } -.red-4 { color: var( --red-4 ); } -.red-5 { color: var( --red-5 ); } -.red-6 { color: var( --red-6 ); } -.red-7 { color: var( --red-7 ); } -.red-8 { color: var( --red-8 ); } -.red-9 { color: var( --red-9 ); } -.red-10 { color: var( --red-10 ); } -.red-11 { color: var( --red-11 ); } -.red-orange-0 { color: var( --red-orange-0 ); } -.red-orange-1 { color: var( --red-orange-1 ); } -.red-orange-2 { color: var( --red-orange-2 ); } -.red-orange-3 { color: var( --red-orange-3 ); } -.red-orange-4 { color: var( --red-orange-4 ); } -.red-orange-5 { color: var( --red-orange-5 ); } -.red-orange-6 { color: var( --red-orange-6 ); } -.red-orange-7 { color: var( --red-orange-7 ); } -.red-orange-8 { color: var( --red-orange-8 ); } -.red-orange-9 { color: var( --red-orange-9 ); } -.red-orange-10 { color: var( --red-orange-10 ); } -.red-orange-11 { color: var( --red-orange-11 ); } -.orange-0 { color: var( --orange-0 ); } -.orange-1 { color: var( --orange-1 ); } -.orange-2 { color: var( --orange-2 ); } -.orange-3 { color: var( --orange-3 ); } -.orange-4 { color: var( --orange-4 ); } -.orange-5 { color: var( --orange-5 ); } -.orange-6 { color: var( --orange-6 ); } -.orange-7 { color: var( --orange-7 ); } -.orange-8 { color: var( --orange-8 ); } -.orange-9 { color: var( --orange-9 ); } -.orange-10 { color: var( --orange-10 ); } -.orange-11 { color: var( --orange-11 ); } -.gold-0 { color: var( --gold-0 ); } -.gold-1 { color: var( --gold-1 ); } -.gold-2 { color: var( --gold-2 ); } -.gold-3 { color: var( --gold-3 ); } -.gold-4 { color: var( --gold-4 ); } -.gold-5 { color: var( --gold-5 ); } -.gold-6 { color: var( --gold-6 ); } -.gold-7 { color: var( --gold-7 ); } -.gold-8 { color: var( --gold-8 ); } -.gold-9 { color: var( --gold-9 ); } -.gold-10 { color: var( --gold-10 ); } -.gold-11 { color: var( --gold-11 ); } -.yellow-0 { color: var( --yellow-0 ); } -.yellow-1 { color: var( --yellow-1 ); } -.yellow-2 { color: var( --yellow-2 ); } -.yellow-3 { color: var( --yellow-3 ); } -.yellow-4 { color: var( --yellow-4 ); } -.yellow-5 { color: var( --yellow-5 ); } -.yellow-6 { color: var( --yellow-6 ); } -.yellow-7 { color: var( --yellow-7 ); } -.yellow-8 { color: var( --yellow-8 ); } -.yellow-9 { color: var( --yellow-9 ); } -.yellow-10 { color: var( --yellow-10 ); } -.yellow-11 { color: var( --yellow-11 ); } -.green-0 { color: var( --green-0 ); } -.green-1 { color: var( --green-1 ); } -.green-2 { color: var( --green-2 ); } -.green-3 { color: var( --green-3 ); } -.green-4 { color: var( --green-4 ); } -.green-5 { color: var( --green-5 ); } -.green-6 { color: var( --green-6 ); } -.green-7 { color: var( --green-7 ); } -.green-8 { color: var( --green-8 ); } -.green-9 { color: var( --green-9 ); } -.green-10 { color: var( --green-10 ); } -.green-11 { color: var( --green-11 ); } -.teal-0 { color: var( --teal-0 ); } -.teal-1 { color: var( --teal-1 ); } -.teal-2 { color: var( --teal-2 ); } -.teal-3 { color: var( --teal-3 ); } -.teal-4 { color: var( --teal-4 ); } -.teal-5 { color: var( --teal-5 ); } -.teal-6 { color: var( --teal-6 ); } -.teal-7 { color: var( --teal-7 ); } -.teal-8 { color: var( --teal-8 ); } -.teal-9 { color: var( --teal-9 ); } -.teal-10 { color: var( --teal-10 ); } -.teal-11 { color: var( --teal-11 ); } -.cyan-0 { color: var( --cyan-0 ); } -.cyan-1 { color: var( --cyan-1 ); } -.cyan-2 { color: var( --cyan-2 ); } -.cyan-3 { color: var( --cyan-3 ); } -.cyan-4 { color: var( --cyan-4 ); } -.cyan-5 { color: var( --cyan-5 ); } -.cyan-6 { color: var( --cyan-6 ); } -.cyan-7 { color: var( --cyan-7 ); } -.cyan-8 { color: var( --cyan-8 ); } -.cyan-9 { color: var( --cyan-9 ); } -.cyan-10 { color: var( --cyan-10 ); } -.cyan-11 { color: var( --cyan-11 ); } -/* Background colors */ -.bg-tint-0 { background-color: var( --tint-0 ); } -.bg-tint-1 { background-color: var( --tint-1 ); } -.bg-tint-2 { background-color: var( --tint-2 ); } -.bg-tint-3 { background-color: var( --tint-3 ); } -.bg-tint-4 { background-color: var( --tint-4 ); } -.bg-tint-5 { background-color: var( --tint-5 ); } -.bg-tint-6 { background-color: var( --tint-6 ); } -.bg-tint-7 { background-color: var( --tint-7 ); } -.bg-tint-8 { background-color: var( --tint-8 ); } -.bg-tint-9 { background-color: var( --tint-9 ); } -.bg-tint-10 { background-color: var( --tint-10 ); } -.bg-tint-11 { background-color: var( --tint-11 ); } -.bg-shadow-0 { background-color: var( --shadow-0 ); } -.bg-shadow-1 { background-color: var( --shadow-1 ); } -.bg-shadow-2 { background-color: var( --shadow-2 ); } -.bg-shadow-3 { background-color: var( --shadow-3 ); } -.bg-shadow-4 { background-color: var( --shadow-4 ); } -.bg-shadow-5 { background-color: var( --shadow-5 ); } -.bg-shadow-6 { background-color: var( --shadow-6 ); } -.bg-shadow-7 { background-color: var( --shadow-7 ); } -.bg-shadow-8 { background-color: var( --shadow-8 ); } -.bg-shadow-9 { background-color: var( --shadow-9 ); } -.bg-shadow-10 { background-color: var( --shadow-10 ); } -.bg-shadow-11 { background-color: var( --shadow-11 ); } -.bg-black, .bg-gray-0 { background-color: var( --gray-0 ); } -.bg-gray-1 { background-color: var( --gray-1 ); } -.bg-gray-2 { background-color: var( --gray-2 ); } -.bg-gray-3 { background-color: var( --gray-3 ); } -.bg-gray-4 { background-color: var( --gray-4 ); } -.bg-gray-5 { background-color: var( --gray-5 ); } -.bg-gray-6 { background-color: var( --gray-6 ); } -.bg-gray-7 { background-color: var( --gray-7 ); } -.bg-gray-8 { background-color: var( --gray-8 ); } -.bg-gray-9 { background-color: var( --gray-9 ); } -.bg-gray-10 { background-color: var( --gray-10 ); } -.bg-white, .bg-gray-11 { background-color: var( --gray-11 ); } -.bg-slate-gray-0 { background-color: var( --slate-gray-0 ); } -.bg-slate-gray-1 { background-color: var( --slate-gray-1 ); } -.bg-slate-gray-2 { background-color: var( --slate-gray-2 ); } -.bg-slate-gray-3 { background-color: var( --slate-gray-3 ); } -.bg-slate-gray-4 { background-color: var( --slate-gray-4 ); } -.bg-slate-gray-5 { background-color: var( --slate-gray-5 ); } -.bg-slate-gray-6 { background-color: var( --slate-gray-6 ); } -.bg-slate-gray-7 { background-color: var( --slate-gray-7 ); } -.bg-slate-gray-8 { background-color: var( --slate-gray-8 ); } -.bg-slate-gray-9 { background-color: var( --slate-gray-9 ); } -.bg-slate-gray-10 { background-color: var( --slate-gray-10 ); } -.bg-slate-gray-11 { background-color: var( --slate-gray-11 ); } -.bg-blue-0 { background-color: var( --blue-0 ); } -.bg-blue-1 { background-color: var( --blue-1 ); } -.bg-blue-2 { background-color: var( --blue-2 ); } -.bg-blue-3 { background-color: var( --blue-3 ); } -.bg-blue-4 { background-color: var( --blue-4 ); } -.bg-blue-5 { background-color: var( --blue-5 ); } -.bg-blue-6 { background-color: var( --blue-6 ); } -.bg-blue-7 { background-color: var( --blue-7 ); } -.bg-blue-8 { background-color: var( --blue-8 ); } -.bg-blue-9 { background-color: var( --blue-9 ); } -.bg-blue-10 { background-color: var( --blue-10 ); } -.bg-blue-11 { background-color: var( --blue-11 ); } -.bg-indigo-0 { background-color: var( --indigo-0 ); } -.bg-indigo-1 { background-color: var( --indigo-1 ); } -.bg-indigo-2 { background-color: var( --indigo-2 ); } -.bg-indigo-3 { background-color: var( --indigo-3 ); } -.bg-indigo-4 { background-color: var( --indigo-4 ); } -.bg-indigo-5 { background-color: var( --indigo-5 ); } -.bg-indigo-6 { background-color: var( --indigo-6 ); } -.bg-indigo-7 { background-color: var( --indigo-7 ); } -.bg-indigo-8 { background-color: var( --indigo-8 ); } -.bg-indigo-9 { background-color: var( --indigo-9 ); } -.bg-indigo-10 { background-color: var( --indigo-10 ); } -.bg-indigo-11 { background-color: var( --indigo-11 ); } -.bg-violet-0 { background-color: var( --violet-0 ); } -.bg-violet-1 { background-color: var( --violet-1 ); } -.bg-violet-2 { background-color: var( --violet-2 ); } -.bg-violet-3 { background-color: var( --violet-3 ); } -.bg-violet-4 { background-color: var( --violet-4 ); } -.bg-violet-5 { background-color: var( --violet-5 ); } -.bg-violet-6 { background-color: var( --violet-6 ); } -.bg-violet-7 { background-color: var( --violet-7 ); } -.bg-violet-8 { background-color: var( --violet-8 ); } -.bg-violet-9 { background-color: var( --violet-9 ); } -.bg-violet-10 { background-color: var( --violet-10 ); } -.bg-violet-11 { background-color: var( --violet-11 ); } -.bg-magenta-0 { background-color: var( --magenta-0 ); } -.bg-magenta-1 { background-color: var( --magenta-1 ); } -.bg-magenta-2 { background-color: var( --magenta-2 ); } -.bg-magenta-3 { background-color: var( --magenta-3 ); } -.bg-magenta-4 { background-color: var( --magenta-4 ); } -.bg-magenta-5 { background-color: var( --magenta-5 ); } -.bg-magenta-6 { background-color: var( --magenta-6 ); } -.bg-magenta-7 { background-color: var( --magenta-7 ); } -.bg-magenta-8 { background-color: var( --magenta-8 ); } -.bg-magenta-9 { background-color: var( --magenta-9 ); } -.bg-magenta-10 { background-color: var( --magenta-10 ); } -.bg-magenta-11 { background-color: var( --magenta-11 ); } -.bg-red-0 { background-color: var( --red-0 ); } -.bg-red-1 { background-color: var( --red-1 ); } -.bg-red-2 { background-color: var( --red-2 ); } -.bg-red-3 { background-color: var( --red-3 ); } -.bg-red-4 { background-color: var( --red-4 ); } -.bg-red-5 { background-color: var( --red-5 ); } -.bg-red-6 { background-color: var( --red-6 ); } -.bg-red-7 { background-color: var( --red-7 ); } -.bg-red-8 { background-color: var( --red-8 ); } -.bg-red-9 { background-color: var( --red-9 ); } -.bg-red-10 { background-color: var( --red-10 ); } -.bg-red-11 { background-color: var( --red-11 ); } -.bg-red-orange-0 { background-color: var( --red-orange-0 ); } -.bg-red-orange-1 { background-color: var( --red-orange-1 ); } -.bg-red-orange-2 { background-color: var( --red-orange-2 ); } -.bg-red-orange-3 { background-color: var( --red-orange-3 ); } -.bg-red-orange-4 { background-color: var( --red-orange-4 ); } -.bg-red-orange-5 { background-color: var( --red-orange-5 ); } -.bg-red-orange-6 { background-color: var( --red-orange-6 ); } -.bg-red-orange-7 { background-color: var( --red-orange-7 ); } -.bg-red-orange-8 { background-color: var( --red-orange-8 ); } -.bg-red-orange-9 { background-color: var( --red-orange-9 ); } -.bg-red-orange-10 { background-color: var( --red-orange-10 ); } -.bg-red-orange-11 { background-color: var( --red-orange-11 ); } -.bg-orange-0 { background-color: var( --orange-0 ); } -.bg-orange-1 { background-color: var( --orange-1 ); } -.bg-orange-2 { background-color: var( --orange-2 ); } -.bg-orange-3 { background-color: var( --orange-3 ); } -.bg-orange-4 { background-color: var( --orange-4 ); } -.bg-orange-5 { background-color: var( --orange-5 ); } -.bg-orange-6 { background-color: var( --orange-6 ); } -.bg-orange-7 { background-color: var( --orange-7 ); } -.bg-orange-8 { background-color: var( --orange-8 ); } -.bg-orange-9 { background-color: var( --orange-9 ); } -.bg-orange-10 { background-color: var( --orange-10 ); } -.bg-orange-11 { background-color: var( --orange-11 ); } -.bg-gold-0 { background-color: var( --gold-0 ); } -.bg-gold-1 { background-color: var( --gold-1 ); } -.bg-gold-2 { background-color: var( --gold-2 ); } -.bg-gold-3 { background-color: var( --gold-3 ); } -.bg-gold-4 { background-color: var( --gold-4 ); } -.bg-gold-5 { background-color: var( --gold-5 ); } -.bg-gold-6 { background-color: var( --gold-6 ); } -.bg-gold-7 { background-color: var( --gold-7 ); } -.bg-gold-8 { background-color: var( --gold-8 ); } -.bg-gold-9 { background-color: var( --gold-9 ); } -.bg-gold-10 { background-color: var( --gold-10 ); } -.bg-gold-11 { background-color: var( --gold-11 ); } -.bg-yellow-0 { background-color: var( --yellow-0 ); } -.bg-yellow-1 { background-color: var( --yellow-1 ); } -.bg-yellow-2 { background-color: var( --yellow-2 ); } -.bg-yellow-3 { background-color: var( --yellow-3 ); } -.bg-yellow-4 { background-color: var( --yellow-4 ); } -.bg-yellow-5 { background-color: var( --yellow-5 ); } -.bg-yellow-6 { background-color: var( --yellow-6 ); } -.bg-yellow-7 { background-color: var( --yellow-7 ); } -.bg-yellow-8 { background-color: var( --yellow-8 ); } -.bg-yellow-9 { background-color: var( --yellow-9 ); } -.bg-yellow-10 { background-color: var( --yellow-10 ); } -.bg-yellow-11 { background-color: var( --yellow-11 ); } -.bg-green-0 { background-color: var( --green-0 ); } -.bg-green-1 { background-color: var( --green-1 ); } -.bg-green-2 { background-color: var( --green-2 ); } -.bg-green-3 { background-color: var( --green-3 ); } -.bg-green-4 { background-color: var( --green-4 ); } -.bg-green-5 { background-color: var( --green-5 ); } -.bg-green-6 { background-color: var( --green-6 ); } -.bg-green-7 { background-color: var( --green-7 ); } -.bg-green-8 { background-color: var( --green-8 ); } -.bg-green-9 { background-color: var( --green-9 ); } -.bg-green-10 { background-color: var( --green-10 ); } -.bg-green-11 { background-color: var( --green-11 ); } -.bg-teal-0 { background-color: var( --teal-0 ); } -.bg-teal-1 { background-color: var( --teal-1 ); } -.bg-teal-2 { background-color: var( --teal-2 ); } -.bg-teal-3 { background-color: var( --teal-3 ); } -.bg-teal-4 { background-color: var( --teal-4 ); } -.bg-teal-5 { background-color: var( --teal-5 ); } -.bg-teal-6 { background-color: var( --teal-6 ); } -.bg-teal-7 { background-color: var( --teal-7 ); } -.bg-teal-8 { background-color: var( --teal-8 ); } -.bg-teal-9 { background-color: var( --teal-9 ); } -.bg-teal-10 { background-color: var( --teal-10 ); } -.bg-teal-11 { background-color: var( --teal-11 ); } -.bg-cyan-0 { background-color: var( --cyan-0 ); } -.bg-cyan-1 { background-color: var( --cyan-1 ); } -.bg-cyan-2 { background-color: var( --cyan-2 ); } -.bg-cyan-3 { background-color: var( --cyan-3 ); } -.bg-cyan-4 { background-color: var( --cyan-4 ); } -.bg-cyan-5 { background-color: var( --cyan-5 ); } -.bg-cyan-6 { background-color: var( --cyan-6 ); } -.bg-cyan-7 { background-color: var( --cyan-7 ); } -.bg-cyan-8 { background-color: var( --cyan-8 ); } -.bg-cyan-9 { background-color: var( --cyan-9 ); } -.bg-cyan-10 { background-color: var( --cyan-10 ); } -.bg-cyan-11 { background-color: var( --cyan-11 ); } -.dark { background-color: black; color: white; } -.light { background-color: white; color: black; } -.blue { background-color: var( --blue-5 ); color: var( --gray-11 ); } -.blue-dark { background-color: var( --blue-3 ); color: var( --blue-9 ); } -.blue-light { color: var( --blue-3 ); background-color: var( --blue-10 ); } -.indigo { background-color: var( --indigo-5 ); color: var( --gray-11 ); } -.indigo-dark { background-color: var( --indigo-3 ); color: var( --indigo-9 ); } -.indigo-light { color: var( --indigo-3 ); background-color: var( --indigo-10 ); } -.violet { background-color: var( --violet-5 ); color: var( --gray-11 ); } -.violet-dark { background-color: var( --violet-3 ); color: var( --violet-9 ); } -.violet-light { color: var( --violet-3 ); background-color: var( --violet-10 ); } -.magenta { background-color: var( --magenta-5 ); color: var( --gray-11 ); } -.magenta-dark { background-color: var( --magenta-3 ); color: var( --magenta-9 ); } -.magenta-light { color: var( --magenta-3 ); background-color: var( --magenta-10 ); } -.red { background-color: var( --red-5 ); color: var( --gray-11 ); } -.red-dark { background-color: var( --red-3 ); color: var( --red-9 ); } -.red-light { color: var( --red-3 ); background-color: var( --red-10 ); } -.red-orange { background-color: var( --red-orange-5 ); color: var( --gray-11 ); } -.red-orange-dark { background-color: var( --red-orange-3 ); color: var( --red-orange-9 ); } -.red-orange-light { color: var( --red-orange-3 ); background-color: var( --red-orange-10 ); } -.orange { background-color: var( --orange-5 ); color: var( --gray-11 ); } -.orange-dark { background-color: var( --orange-3 ); color: var( --orange-9 ); } -.orange-light { color: var( --orange-3 ); background-color: var( --orange-10 ); } -.gold { background-color: var( --gold-5 ); color: var( --gray-11 ); } -.gold-dark { background-color: var( --gold-3 ); color: var( --gold-9 ); } -.gold-light { color: var( --gold-3 ); background-color: var( --gold-10 ); } -.yellow { background-color: var( --yellow-5 ); color: var( --gray-11 ); } -.yellow-dark { background-color: var( --yellow-3 ); color: var( --yellow-9 ); } -.yellow-light { color: var( --yellow-3 ); background-color: var( --yellow-10 ); } -.green { background-color: var( --green-5 ); color: var( --gray-11 ); } -.green-dark { background-color: var( --green-3 ); color: var( --green-9 ); } -.green-light { color: var( --green-3 ); background-color: var( --green-10 ); } -.teal { background-color: var( --teal-5 ); color: var( --gray-11 ); } -.teal-dark { background-color: var( --teal-3 ); color: var( --teal-9 ); } -.teal-light { color: var( --teal-3 ); background-color: var( --teal-10 ); } -.cyan { background-color: var( --cyan-5 ); color: var( --gray-11 ); } -.cyan-dark { background-color: var( --cyan-3 ); color: var( --cyan-9 ); } -.cyan-light { color: var( --cyan-3 ); background-color: var( --cyan-10 ); } -/* - - SKINS:PSEUDO - - Customize the color of an element when - it is focused or hovered over. This is a larger file. Feel - free to remove and edit colors that aren't needed. - - */ -.hover-overlay-tint-0:hover { color: var( --overlay-tint-0 ); } -.hover-overlay-tint-1:hover { color: var( --overlay-tint-1 ); } -.hover-overlay-tint-2:hover { color: var( --overlay-tint-2 ); } -.hover-overlay-tint-3:hover { color: var( --overlay-tint-3 ); } -.hover-overlay-tint-4:hover { color: var( --overlay-tint-4 ); } -.hover-overlay-tint-5:hover { color: var( --overlay-tint-5 ); } -.hover-overlay-tint-6:hover { color: var( --overlay-tint-6 ); } -.hover-overlay-tint-7:hover { color: var( --overlay-tint-7 ); } -.hover-overlay-tint-8:hover { color: var( --overlay-tint-8 ); } -.hover-overlay-tint-9:hover { color: var( --overlay-tint-9 ); } -.hover-overlay-tint-10:hover { color: var( --overlay-tint-10 ); } -.hover-overlay-tint-11:hover { color: var( --overlay-tint-11 ); } -.hover-overlay-shadow-0:hover { color: var( --overlay-shadow-0 ); } -.hover-overlay-shadow-1:hover { color: var( --overlay-shadow-1 ); } -.hover-overlay-shadow-2:hover { color: var( --overlay-shadow-2 ); } -.hover-overlay-shadow-3:hover { color: var( --overlay-shadow-3 ); } -.hover-overlay-shadow-4:hover { color: var( --overlay-shadow-4 ); } -.hover-overlay-shadow-5:hover { color: var( --overlay-shadow-5 ); } -.hover-overlay-shadow-6:hover { color: var( --overlay-shadow-6 ); } -.hover-overlay-shadow-7:hover { color: var( --overlay-shadow-7 ); } -.hover-overlay-shadow-8:hover { color: var( --overlay-shadow-8 ); } -.hover-overlay-shadow-9:hover { color: var( --overlay-shadow-9 ); } -.hover-overlay-shadow-10:hover { color: var( --overlay-shadow-10 ); } -.hover-overlay-shadow-11:hover { color: var( --overlay-shadow-11 ); } -.hover-gray-0:hover { color: var( --gray-0 ); } -.hover-gray-1:hover { color: var( --gray-1 ); } -.hover-gray-2:hover { color: var( --gray-2 ); } -.hover-gray-3:hover { color: var( --gray-3 ); } -.hover-gray-4:hover { color: var( --gray-4 ); } -.hover-gray-5:hover { color: var( --gray-5 ); } -.hover-gray-6:hover { color: var( --gray-6 ); } -.hover-gray-7:hover { color: var( --gray-7 ); } -.hover-gray-8:hover { color: var( --gray-8 ); } -.hover-gray-9:hover { color: var( --gray-9 ); } -.hover-gray-10:hover { color: var( --gray-10 ); } -.hover-gray-11:hover { color: var( --gray-11 ); } -.hover-slate-gray-0:hover { color: var( --slate-gray-0 ); } -.hover-slate-gray-1:hover { color: var( --slate-gray-1 ); } -.hover-slate-gray-2:hover { color: var( --slate-gray-2 ); } -.hover-slate-gray-3:hover { color: var( --slate-gray-3 ); } -.hover-slate-gray-4:hover { color: var( --slate-gray-4 ); } -.hover-slate-gray-5:hover { color: var( --slate-gray-5 ); } -.hover-slate-gray-6:hover { color: var( --slate-gray-6 ); } -.hover-slate-gray-7:hover { color: var( --slate-gray-7 ); } -.hover-slate-gray-8:hover { color: var( --slate-gray-8 ); } -.hover-slate-gray-9:hover { color: var( --slate-gray-9 ); } -.hover-slate-gray-10:hover { color: var( --slate-gray-10 ); } -.hover-slate-gray-11:hover { color: var( --slate-gray-11 ); } -.hover-blue-0:hover { color: var( --blue-0 ); } -.hover-blue-1:hover { color: var( --blue-1 ); } -.hover-blue-2:hover { color: var( --blue-2 ); } -.hover-blue-3:hover { color: var( --blue-3 ); } -.hover-blue-4:hover { color: var( --blue-4 ); } -.hover-blue-5:hover { color: var( --blue-5 ); } -.hover-blue-6:hover { color: var( --blue-6 ); } -.hover-blue-7:hover { color: var( --blue-7 ); } -.hover-blue-8:hover { color: var( --blue-8 ); } -.hover-blue-9:hover { color: var( --blue-9 ); } -.hover-blue-10:hover { color: var( --blue-10 ); } -.hover-blue-11:hover { color: var( --blue-11 ); } -.hover-indigo-0:hover { color: var( --indigo-0 ); } -.hover-indigo-1:hover { color: var( --indigo-1 ); } -.hover-indigo-2:hover { color: var( --indigo-2 ); } -.hover-indigo-3:hover { color: var( --indigo-3 ); } -.hover-indigo-4:hover { color: var( --indigo-4 ); } -.hover-indigo-5:hover { color: var( --indigo-5 ); } -.hover-indigo-6:hover { color: var( --indigo-6 ); } -.hover-indigo-7:hover { color: var( --indigo-7 ); } -.hover-indigo-8:hover { color: var( --indigo-8 ); } -.hover-indigo-9:hover { color: var( --indigo-9 ); } -.hover-indigo-10:hover { color: var( --indigo-10 ); } -.hover-indigo-11:hover { color: var( --indigo-11 ); } -.hover-violet-0:hover { color: var( --violet-0 ); } -.hover-violet-1:hover { color: var( --violet-1 ); } -.hover-violet-2:hover { color: var( --violet-2 ); } -.hover-violet-3:hover { color: var( --violet-3 ); } -.hover-violet-4:hover { color: var( --violet-4 ); } -.hover-violet-5:hover { color: var( --violet-5 ); } -.hover-violet-6:hover { color: var( --violet-6 ); } -.hover-violet-7:hover { color: var( --violet-7 ); } -.hover-violet-8:hover { color: var( --violet-8 ); } -.hover-violet-9:hover { color: var( --violet-9 ); } -.hover-violet-10:hover { color: var( --violet-10 ); } -.hover-violet-11:hover { color: var( --violet-11 ); } -.hover-magenta-0:hover { color: var( --magenta-0 ); } -.hover-magenta-1:hover { color: var( --magenta-1 ); } -.hover-magenta-2:hover { color: var( --magenta-2 ); } -.hover-magenta-3:hover { color: var( --magenta-3 ); } -.hover-magenta-4:hover { color: var( --magenta-4 ); } -.hover-magenta-5:hover { color: var( --magenta-5 ); } -.hover-magenta-6:hover { color: var( --magenta-6 ); } -.hover-magenta-7:hover { color: var( --magenta-7 ); } -.hover-magenta-8:hover { color: var( --magenta-8 ); } -.hover-magenta-9:hover { color: var( --magenta-9 ); } -.hover-magenta-10:hover { color: var( --magenta-10 ); } -.hover-magenta-11:hover { color: var( --magenta-11 ); } -.hover-red-0:hover { color: var( --red-0 ); } -.hover-red-1:hover { color: var( --red-1 ); } -.hover-red-2:hover { color: var( --red-2 ); } -.hover-red-3:hover { color: var( --red-3 ); } -.hover-red-4:hover { color: var( --red-4 ); } -.hover-red-5:hover { color: var( --red-5 ); } -.hover-red-6:hover { color: var( --red-6 ); } -.hover-red-7:hover { color: var( --red-7 ); } -.hover-red-8:hover { color: var( --red-8 ); } -.hover-red-9:hover { color: var( --red-9 ); } -.hover-red-10:hover { color: var( --red-10 ); } -.hover-red-11:hover { color: var( --red-11 ); } -.hover-red-orange-0:hover { color: var( --red-orange-0 ); } -.hover-red-orange-1:hover { color: var( --red-orange-1 ); } -.hover-red-orange-2:hover { color: var( --red-orange-2 ); } -.hover-red-orange-3:hover { color: var( --red-orange-3 ); } -.hover-red-orange-4:hover { color: var( --red-orange-4 ); } -.hover-red-orange-5:hover { color: var( --red-orange-5 ); } -.hover-red-orange-6:hover { color: var( --red-orange-6 ); } -.hover-red-orange-7:hover { color: var( --red-orange-7 ); } -.hover-red-orange-8:hover { color: var( --red-orange-8 ); } -.hover-red-orange-9:hover { color: var( --red-orange-9 ); } -.hover-red-orange-10:hover { color: var( --red-orange-10 ); } -.hover-red-orange-11:hover { color: var( --red-orange-11 ); } -.hover-orange-0:hover { color: var( --orange-0 ); } -.hover-orange-1:hover { color: var( --orange-1 ); } -.hover-orange-2:hover { color: var( --orange-2 ); } -.hover-orange-3:hover { color: var( --orange-3 ); } -.hover-orange-4:hover { color: var( --orange-4 ); } -.hover-orange-5:hover { color: var( --orange-5 ); } -.hover-orange-6:hover { color: var( --orange-6 ); } -.hover-orange-7:hover { color: var( --orange-7 ); } -.hover-orange-8:hover { color: var( --orange-8 ); } -.hover-orange-9:hover { color: var( --orange-9 ); } -.hover-orange-10:hover { color: var( --orange-10 ); } -.hover-orange-11:hover { color: var( --orange-11 ); } -.hover-gold-0:hover { color: var( --gold-0 ); } -.hover-gold-1:hover { color: var( --gold-1 ); } -.hover-gold-2:hover { color: var( --gold-2 ); } -.hover-gold-3:hover { color: var( --gold-3 ); } -.hover-gold-4:hover { color: var( --gold-4 ); } -.hover-gold-5:hover { color: var( --gold-5 ); } -.hover-gold-6:hover { color: var( --gold-6 ); } -.hover-gold-7:hover { color: var( --gold-7 ); } -.hover-gold-8:hover { color: var( --gold-8 ); } -.hover-gold-9:hover { color: var( --gold-9 ); } -.hover-gold-10:hover { color: var( --gold-10 ); } -.hover-gold-11:hover { color: var( --gold-11 ); } -.hover-yellow-0:hover { color: var( --yellow-0 ); } -.hover-yellow-1:hover { color: var( --yellow-1 ); } -.hover-yellow-2:hover { color: var( --yellow-2 ); } -.hover-yellow-3:hover { color: var( --yellow-3 ); } -.hover-yellow-4:hover { color: var( --yellow-4 ); } -.hover-yellow-5:hover { color: var( --yellow-5 ); } -.hover-yellow-6:hover { color: var( --yellow-6 ); } -.hover-yellow-7:hover { color: var( --yellow-7 ); } -.hover-yellow-8:hover { color: var( --yellow-8 ); } -.hover-yellow-9:hover { color: var( --yellow-9 ); } -.hover-yellow-10:hover { color: var( --yellow-10 ); } -.hover-yellow-11:hover { color: var( --yellow-11 ); } -.hover-green-0:hover { color: var( --green-0 ); } -.hover-green-1:hover { color: var( --green-1 ); } -.hover-green-2:hover { color: var( --green-2 ); } -.hover-green-3:hover { color: var( --green-3 ); } -.hover-green-4:hover { color: var( --green-4 ); } -.hover-green-5:hover { color: var( --green-5 ); } -.hover-green-6:hover { color: var( --green-6 ); } -.hover-green-7:hover { color: var( --green-7 ); } -.hover-green-8:hover { color: var( --green-8 ); } -.hover-green-9:hover { color: var( --green-9 ); } -.hover-green-10:hover { color: var( --green-10 ); } -.hover-green-11:hover { color: var( --green-11 ); } -.hover-teal-0:hover { color: var( --teal-0 ); } -.hover-teal-1:hover { color: var( --teal-1 ); } -.hover-teal-2:hover { color: var( --teal-2 ); } -.hover-teal-3:hover { color: var( --teal-3 ); } -.hover-teal-4:hover { color: var( --teal-4 ); } -.hover-teal-5:hover { color: var( --teal-5 ); } -.hover-teal-6:hover { color: var( --teal-6 ); } -.hover-teal-7:hover { color: var( --teal-7 ); } -.hover-teal-8:hover { color: var( --teal-8 ); } -.hover-teal-9:hover { color: var( --teal-9 ); } -.hover-teal-10:hover { color: var( --teal-10 ); } -.hover-teal-11:hover { color: var( --teal-11 ); } -.hover-cyan-0:hover { color: var( --cyan-0 ); } -.hover-cyan-1:hover { color: var( --cyan-1 ); } -.hover-cyan-2:hover { color: var( --cyan-2 ); } -.hover-cyan-3:hover { color: var( --cyan-3 ); } -.hover-cyan-4:hover { color: var( --cyan-4 ); } -.hover-cyan-5:hover { color: var( --cyan-5 ); } -.hover-cyan-6:hover { color: var( --cyan-6 ); } -.hover-cyan-7:hover { color: var( --cyan-7 ); } -.hover-cyan-8:hover { color: var( --cyan-8 ); } -.hover-cyan-9:hover { color: var( --cyan-9 ); } -.hover-cyan-10:hover { color: var( --cyan-10 ); } -.hover-cyan-11:hover { color: var( --cyan-11 ); } -/* Background colors */ -.hover-bg-overlay-tint-0:hover { background-color: var( --overlay-tint-0 ); } -.hover-bg-overlay-tint-1:hover { background-color: var( --overlay-tint-1 ); } -.hover-bg-overlay-tint-2:hover { background-color: var( --overlay-tint-2 ); } -.hover-bg-overlay-tint-3:hover { background-color: var( --overlay-tint-3 ); } -.hover-bg-overlay-tint-4:hover { background-color: var( --overlay-tint-4 ); } -.hover-bg-overlay-tint-5:hover { background-color: var( --overlay-tint-5 ); } -.hover-bg-overlay-tint-6:hover { background-color: var( --overlay-tint-6 ); } -.hover-bg-overlay-tint-7:hover { background-color: var( --overlay-tint-7 ); } -.hover-bg-overlay-tint-8:hover { background-color: var( --overlay-tint-8 ); } -.hover-bg-overlay-tint-9:hover { background-color: var( --overlay-tint-9 ); } -.hover-bg-overlay-tint-10:hover { background-color: var( --overlay-tint-10 ); } -.hover-bg-overlay-tint-11:hover { background-color: var( --overlay-tint-11 ); } -.hover-bg-overlay-shadow-0:hover { background-color: var( --overlay-shadow-0 ); } -.hover-bg-overlay-shadow-1:hover { background-color: var( --overlay-shadow-1 ); } -.hover-bg-overlay-shadow-2:hover { background-color: var( --overlay-shadow-2 ); } -.hover-bg-overlay-shadow-3:hover { background-color: var( --overlay-shadow-3 ); } -.hover-bg-overlay-shadow-4:hover { background-color: var( --overlay-shadow-4 ); } -.hover-bg-overlay-shadow-5:hover { background-color: var( --overlay-shadow-5 ); } -.hover-bg-overlay-shadow-6:hover { background-color: var( --overlay-shadow-6 ); } -.hover-bg-overlay-shadow-7:hover { background-color: var( --overlay-shadow-7 ); } -.hover-bg-overlay-shadow-8:hover { background-color: var( --overlay-shadow-8 ); } -.hover-bg-overlay-shadow-9:hover { background-color: var( --overlay-shadow-9 ); } -.hover-bg-overlay-shadow-10:hover { background-color: var( --overlay-shadow-10 ); } -.hover-bg-overlay-shadow-11:hover { background-color: var( --overlay-shadow-11 ); } -.hover-bg-gray-0:hover { background-color: var( --gray-0 ); } -.hover-bg-gray-1:hover { background-color: var( --gray-1 ); } -.hover-bg-gray-2:hover { background-color: var( --gray-2 ); } -.hover-bg-gray-3:hover { background-color: var( --gray-3 ); } -.hover-bg-gray-4:hover { background-color: var( --gray-4 ); } -.hover-bg-gray-5:hover { background-color: var( --gray-5 ); } -.hover-bg-gray-6:hover { background-color: var( --gray-6 ); } -.hover-bg-gray-7:hover { background-color: var( --gray-7 ); } -.hover-bg-gray-8:hover { background-color: var( --gray-8 ); } -.hover-bg-gray-9:hover { background-color: var( --gray-9 ); } -.hover-bg-gray-10:hover { background-color: var( --gray-10 ); } -.hover-bg-gray-11:hover { background-color: var( --gray-11 ); } -.hover-bg-slate-gray-0:hover { background-color: var( --slate-gray-0 ); } -.hover-bg-slate-gray-1:hover { background-color: var( --slate-gray-1 ); } -.hover-bg-slate-gray-2:hover { background-color: var( --slate-gray-2 ); } -.hover-bg-slate-gray-3:hover { background-color: var( --slate-gray-3 ); } -.hover-bg-slate-gray-4:hover { background-color: var( --slate-gray-4 ); } -.hover-bg-slate-gray-5:hover { background-color: var( --slate-gray-5 ); } -.hover-bg-slate-gray-6:hover { background-color: var( --slate-gray-6 ); } -.hover-bg-slate-gray-7:hover { background-color: var( --slate-gray-7 ); } -.hover-bg-slate-gray-8:hover { background-color: var( --slate-gray-8 ); } -.hover-bg-slate-gray-9:hover { background-color: var( --slate-gray-9 ); } -.hover-bg-slate-gray-10:hover { background-color: var( --slate-gray-10 ); } -.hover-bg-slate-gray-11:hover { background-color: var( --slate-gray-11 ); } -.hover-bg-blue-0:hover { background-color: var( --blue-0 ); } -.hover-bg-blue-1:hover { background-color: var( --blue-1 ); } -.hover-bg-blue-2:hover { background-color: var( --blue-2 ); } -.hover-bg-blue-3:hover { background-color: var( --blue-3 ); } -.hover-bg-blue-4:hover { background-color: var( --blue-4 ); } -.hover-bg-blue-5:hover { background-color: var( --blue-5 ); } -.hover-bg-blue-6:hover { background-color: var( --blue-6 ); } -.hover-bg-blue-7:hover { background-color: var( --blue-7 ); } -.hover-bg-blue-8:hover { background-color: var( --blue-8 ); } -.hover-bg-blue-9:hover { background-color: var( --blue-9 ); } -.hover-bg-blue-10:hover { background-color: var( --blue-10 ); } -.hover-bg-blue-11:hover { background-color: var( --blue-11 ); } -.hover-bg-indigo-0:hover { background-color: var( --indigo-0 ); } -.hover-bg-indigo-1:hover { background-color: var( --indigo-1 ); } -.hover-bg-indigo-2:hover { background-color: var( --indigo-2 ); } -.hover-bg-indigo-3:hover { background-color: var( --indigo-3 ); } -.hover-bg-indigo-4:hover { background-color: var( --indigo-4 ); } -.hover-bg-indigo-5:hover { background-color: var( --indigo-5 ); } -.hover-bg-indigo-6:hover { background-color: var( --indigo-6 ); } -.hover-bg-indigo-7:hover { background-color: var( --indigo-7 ); } -.hover-bg-indigo-8:hover { background-color: var( --indigo-8 ); } -.hover-bg-indigo-9:hover { background-color: var( --indigo-9 ); } -.hover-bg-indigo-10:hover { background-color: var( --indigo-10 ); } -.hover-bg-indigo-11:hover { background-color: var( --indigo-11 ); } -.hover-bg-violet-0:hover { background-color: var( --violet-0 ); } -.hover-bg-violet-1:hover { background-color: var( --violet-1 ); } -.hover-bg-violet-2:hover { background-color: var( --violet-2 ); } -.hover-bg-violet-3:hover { background-color: var( --violet-3 ); } -.hover-bg-violet-4:hover { background-color: var( --violet-4 ); } -.hover-bg-violet-5:hover { background-color: var( --violet-5 ); } -.hover-bg-violet-6:hover { background-color: var( --violet-6 ); } -.hover-bg-violet-7:hover { background-color: var( --violet-7 ); } -.hover-bg-violet-8:hover { background-color: var( --violet-8 ); } -.hover-bg-violet-9:hover { background-color: var( --violet-9 ); } -.hover-bg-violet-10:hover { background-color: var( --violet-10 ); } -.hover-bg-violet-11:hover { background-color: var( --violet-11 ); } -.hover-bg-magenta-0:hover { background-color: var( --magenta-0 ); } -.hover-bg-magenta-1:hover { background-color: var( --magenta-1 ); } -.hover-bg-magenta-2:hover { background-color: var( --magenta-2 ); } -.hover-bg-magenta-3:hover { background-color: var( --magenta-3 ); } -.hover-bg-magenta-4:hover { background-color: var( --magenta-4 ); } -.hover-bg-magenta-5:hover { background-color: var( --magenta-5 ); } -.hover-bg-magenta-6:hover { background-color: var( --magenta-6 ); } -.hover-bg-magenta-7:hover { background-color: var( --magenta-7 ); } -.hover-bg-magenta-8:hover { background-color: var( --magenta-8 ); } -.hover-bg-magenta-9:hover { background-color: var( --magenta-9 ); } -.hover-bg-magenta-10:hover { background-color: var( --magenta-10 ); } -.hover-bg-magenta-11:hover { background-color: var( --magenta-11 ); } -.hover-bg-red-0:hover { background-color: var( --red-0 ); } -.hover-bg-red-1:hover { background-color: var( --red-1 ); } -.hover-bg-red-2:hover { background-color: var( --red-2 ); } -.hover-bg-red-3:hover { background-color: var( --red-3 ); } -.hover-bg-red-4:hover { background-color: var( --red-4 ); } -.hover-bg-red-5:hover { background-color: var( --red-5 ); } -.hover-bg-red-6:hover { background-color: var( --red-6 ); } -.hover-bg-red-7:hover { background-color: var( --red-7 ); } -.hover-bg-red-8:hover { background-color: var( --red-8 ); } -.hover-bg-red-9:hover { background-color: var( --red-9 ); } -.hover-bg-red-10:hover { background-color: var( --red-10 ); } -.hover-bg-red-11:hover { background-color: var( --red-11 ); } -.hover-bg-red-orange-0:hover { background-color: var( --red-orange-0 ); } -.hover-bg-red-orange-1:hover { background-color: var( --red-orange-1 ); } -.hover-bg-red-orange-2:hover { background-color: var( --red-orange-2 ); } -.hover-bg-red-orange-3:hover { background-color: var( --red-orange-3 ); } -.hover-bg-red-orange-4:hover { background-color: var( --red-orange-4 ); } -.hover-bg-red-orange-5:hover { background-color: var( --red-orange-5 ); } -.hover-bg-red-orange-6:hover { background-color: var( --red-orange-6 ); } -.hover-bg-red-orange-7:hover { background-color: var( --red-orange-7 ); } -.hover-bg-red-orange-8:hover { background-color: var( --red-orange-8 ); } -.hover-bg-red-orange-9:hover { background-color: var( --red-orange-9 ); } -.hover-bg-red-orange-10:hover { background-color: var( --red-orange-10 ); } -.hover-bg-red-orange-11:hover { background-color: var( --red-orange-11 ); } -.hover-bg-orange-0:hover { background-color: var( --orange-0 ); } -.hover-bg-orange-1:hover { background-color: var( --orange-1 ); } -.hover-bg-orange-2:hover { background-color: var( --orange-2 ); } -.hover-bg-orange-3:hover { background-color: var( --orange-3 ); } -.hover-bg-orange-4:hover { background-color: var( --orange-4 ); } -.hover-bg-orange-5:hover { background-color: var( --orange-5 ); } -.hover-bg-orange-6:hover { background-color: var( --orange-6 ); } -.hover-bg-orange-7:hover { background-color: var( --orange-7 ); } -.hover-bg-orange-8:hover { background-color: var( --orange-8 ); } -.hover-bg-orange-9:hover { background-color: var( --orange-9 ); } -.hover-bg-orange-10:hover { background-color: var( --orange-10 ); } -.hover-bg-orange-11:hover { background-color: var( --orange-11 ); } -.hover-bg-gold-0:hover { background-color: var( --gold-0 ); } -.hover-bg-gold-1:hover { background-color: var( --gold-1 ); } -.hover-bg-gold-2:hover { background-color: var( --gold-2 ); } -.hover-bg-gold-3:hover { background-color: var( --gold-3 ); } -.hover-bg-gold-4:hover { background-color: var( --gold-4 ); } -.hover-bg-gold-5:hover { background-color: var( --gold-5 ); } -.hover-bg-gold-6:hover { background-color: var( --gold-6 ); } -.hover-bg-gold-7:hover { background-color: var( --gold-7 ); } -.hover-bg-gold-8:hover { background-color: var( --gold-8 ); } -.hover-bg-gold-9:hover { background-color: var( --gold-9 ); } -.hover-bg-gold-10:hover { background-color: var( --gold-10 ); } -.hover-bg-gold-11:hover { background-color: var( --gold-11 ); } -.hover-bg-yellow-0:hover { background-color: var( --yellow-0 ); } -.hover-bg-yellow-1:hover { background-color: var( --yellow-1 ); } -.hover-bg-yellow-2:hover { background-color: var( --yellow-2 ); } -.hover-bg-yellow-3:hover { background-color: var( --yellow-3 ); } -.hover-bg-yellow-4:hover { background-color: var( --yellow-4 ); } -.hover-bg-yellow-5:hover { background-color: var( --yellow-5 ); } -.hover-bg-yellow-6:hover { background-color: var( --yellow-6 ); } -.hover-bg-yellow-7:hover { background-color: var( --yellow-7 ); } -.hover-bg-yellow-8:hover { background-color: var( --yellow-8 ); } -.hover-bg-yellow-9:hover { background-color: var( --yellow-9 ); } -.hover-bg-yellow-10:hover { background-color: var( --yellow-10 ); } -.hover-bg-yellow-11:hover { background-color: var( --yellow-11 ); } -.hover-bg-green-0:hover { background-color: var( --green-0 ); } -.hover-bg-green-1:hover { background-color: var( --green-1 ); } -.hover-bg-green-2:hover { background-color: var( --green-2 ); } -.hover-bg-green-3:hover { background-color: var( --green-3 ); } -.hover-bg-green-4:hover { background-color: var( --green-4 ); } -.hover-bg-green-5:hover { background-color: var( --green-5 ); } -.hover-bg-green-6:hover { background-color: var( --green-6 ); } -.hover-bg-green-7:hover { background-color: var( --green-7 ); } -.hover-bg-green-8:hover { background-color: var( --green-8 ); } -.hover-bg-green-9:hover { background-color: var( --green-9 ); } -.hover-bg-green-10:hover { background-color: var( --green-10 ); } -.hover-bg-green-11:hover { background-color: var( --green-11 ); } -.hover-bg-teal-0:hover { background-color: var( --teal-0 ); } -.hover-bg-teal-1:hover { background-color: var( --teal-1 ); } -.hover-bg-teal-2:hover { background-color: var( --teal-2 ); } -.hover-bg-teal-3:hover { background-color: var( --teal-3 ); } -.hover-bg-teal-4:hover { background-color: var( --teal-4 ); } -.hover-bg-teal-5:hover { background-color: var( --teal-5 ); } -.hover-bg-teal-6:hover { background-color: var( --teal-6 ); } -.hover-bg-teal-7:hover { background-color: var( --teal-7 ); } -.hover-bg-teal-8:hover { background-color: var( --teal-8 ); } -.hover-bg-teal-9:hover { background-color: var( --teal-9 ); } -.hover-bg-teal-10:hover { background-color: var( --teal-10 ); } -.hover-bg-teal-11:hover { background-color: var( --teal-11 ); } -.hover-bg-cyan-0:hover { background-color: var( --cyan-0 ); } -.hover-bg-cyan-1:hover { background-color: var( --cyan-1 ); } -.hover-bg-cyan-2:hover { background-color: var( --cyan-2 ); } -.hover-bg-cyan-3:hover { background-color: var( --cyan-3 ); } -.hover-bg-cyan-4:hover { background-color: var( --cyan-4 ); } -.hover-bg-cyan-5:hover { background-color: var( --cyan-5 ); } -.hover-bg-cyan-6:hover { background-color: var( --cyan-6 ); } -.hover-bg-cyan-7:hover { background-color: var( --cyan-7 ); } -.hover-bg-cyan-8:hover { background-color: var( --cyan-8 ); } -.hover-bg-cyan-9:hover { background-color: var( --cyan-9 ); } -.hover-bg-cyan-10:hover { background-color: var( --cyan-10 ); } -.hover-bg-cyan-11:hover { background-color: var( --cyan-11 ); } -.focus-overlay-tint-0:focus { color: var( --overlay-tint-0 ); } -.focus-overlay-tint-1:focus { color: var( --overlay-tint-1 ); } -.focus-overlay-tint-2:focus { color: var( --overlay-tint-2 ); } -.focus-overlay-tint-3:focus { color: var( --overlay-tint-3 ); } -.focus-overlay-tint-4:focus { color: var( --overlay-tint-4 ); } -.focus-overlay-tint-5:focus { color: var( --overlay-tint-5 ); } -.focus-overlay-tint-6:focus { color: var( --overlay-tint-6 ); } -.focus-overlay-tint-7:focus { color: var( --overlay-tint-7 ); } -.focus-overlay-tint-8:focus { color: var( --overlay-tint-8 ); } -.focus-overlay-tint-9:focus { color: var( --overlay-tint-9 ); } -.focus-overlay-tint-10:focus { color: var( --overlay-tint-10 ); } -.focus-overlay-tint-11:focus { color: var( --overlay-tint-11 ); } -.focus-overlay-shadow-0:focus { color: var( --overlay-shadow-0 ); } -.focus-overlay-shadow-1:focus { color: var( --overlay-shadow-1 ); } -.focus-overlay-shadow-2:focus { color: var( --overlay-shadow-2 ); } -.focus-overlay-shadow-3:focus { color: var( --overlay-shadow-3 ); } -.focus-overlay-shadow-4:focus { color: var( --overlay-shadow-4 ); } -.focus-overlay-shadow-5:focus { color: var( --overlay-shadow-5 ); } -.focus-overlay-shadow-6:focus { color: var( --overlay-shadow-6 ); } -.focus-overlay-shadow-7:focus { color: var( --overlay-shadow-7 ); } -.focus-overlay-shadow-8:focus { color: var( --overlay-shadow-8 ); } -.focus-overlay-shadow-9:focus { color: var( --overlay-shadow-9 ); } -.focus-overlay-shadow-10:focus { color: var( --overlay-shadow-10 ); } -.focus-overlay-shadow-11:focus { color: var( --overlay-shadow-11 ); } -.focus-gray-0:focus { color: var( --gray-0 ); } -.focus-gray-1:focus { color: var( --gray-1 ); } -.focus-gray-2:focus { color: var( --gray-2 ); } -.focus-gray-3:focus { color: var( --gray-3 ); } -.focus-gray-4:focus { color: var( --gray-4 ); } -.focus-gray-5:focus { color: var( --gray-5 ); } -.focus-gray-6:focus { color: var( --gray-6 ); } -.focus-gray-7:focus { color: var( --gray-7 ); } -.focus-gray-8:focus { color: var( --gray-8 ); } -.focus-gray-9:focus { color: var( --gray-9 ); } -.focus-gray-10:focus { color: var( --gray-10 ); } -.focus-gray-11:focus { color: var( --gray-11 ); } -.focus-slate-gray-0:focus { color: var( --slate-gray-0 ); } -.focus-slate-gray-1:focus { color: var( --slate-gray-1 ); } -.focus-slate-gray-2:focus { color: var( --slate-gray-2 ); } -.focus-slate-gray-3:focus { color: var( --slate-gray-3 ); } -.focus-slate-gray-4:focus { color: var( --slate-gray-4 ); } -.focus-slate-gray-5:focus { color: var( --slate-gray-5 ); } -.focus-slate-gray-6:focus { color: var( --slate-gray-6 ); } -.focus-slate-gray-7:focus { color: var( --slate-gray-7 ); } -.focus-slate-gray-8:focus { color: var( --slate-gray-8 ); } -.focus-slate-gray-9:focus { color: var( --slate-gray-9 ); } -.focus-slate-gray-10:focus { color: var( --slate-gray-10 ); } -.focus-slate-gray-11:focus { color: var( --slate-gray-11 ); } -.focus-blue-0:focus { color: var( --blue-0 ); } -.focus-blue-1:focus { color: var( --blue-1 ); } -.focus-blue-2:focus { color: var( --blue-2 ); } -.focus-blue-3:focus { color: var( --blue-3 ); } -.focus-blue-4:focus { color: var( --blue-4 ); } -.focus-blue-5:focus { color: var( --blue-5 ); } -.focus-blue-6:focus { color: var( --blue-6 ); } -.focus-blue-7:focus { color: var( --blue-7 ); } -.focus-blue-8:focus { color: var( --blue-8 ); } -.focus-blue-9:focus { color: var( --blue-9 ); } -.focus-blue-10:focus { color: var( --blue-10 ); } -.focus-blue-11:focus { color: var( --blue-11 ); } -.focus-indigo-0:focus { color: var( --indigo-0 ); } -.focus-indigo-1:focus { color: var( --indigo-1 ); } -.focus-indigo-2:focus { color: var( --indigo-2 ); } -.focus-indigo-3:focus { color: var( --indigo-3 ); } -.focus-indigo-4:focus { color: var( --indigo-4 ); } -.focus-indigo-5:focus { color: var( --indigo-5 ); } -.focus-indigo-6:focus { color: var( --indigo-6 ); } -.focus-indigo-7:focus { color: var( --indigo-7 ); } -.focus-indigo-8:focus { color: var( --indigo-8 ); } -.focus-indigo-9:focus { color: var( --indigo-9 ); } -.focus-indigo-10:focus { color: var( --indigo-10 ); } -.focus-indigo-11:focus { color: var( --indigo-11 ); } -.focus-violet-0:focus { color: var( --violet-0 ); } -.focus-violet-1:focus { color: var( --violet-1 ); } -.focus-violet-2:focus { color: var( --violet-2 ); } -.focus-violet-3:focus { color: var( --violet-3 ); } -.focus-violet-4:focus { color: var( --violet-4 ); } -.focus-violet-5:focus { color: var( --violet-5 ); } -.focus-violet-6:focus { color: var( --violet-6 ); } -.focus-violet-7:focus { color: var( --violet-7 ); } -.focus-violet-8:focus { color: var( --violet-8 ); } -.focus-violet-9:focus { color: var( --violet-9 ); } -.focus-violet-10:focus { color: var( --violet-10 ); } -.focus-violet-11:focus { color: var( --violet-11 ); } -.focus-magenta-0:focus { color: var( --magenta-0 ); } -.focus-magenta-1:focus { color: var( --magenta-1 ); } -.focus-magenta-2:focus { color: var( --magenta-2 ); } -.focus-magenta-3:focus { color: var( --magenta-3 ); } -.focus-magenta-4:focus { color: var( --magenta-4 ); } -.focus-magenta-5:focus { color: var( --magenta-5 ); } -.focus-magenta-6:focus { color: var( --magenta-6 ); } -.focus-magenta-7:focus { color: var( --magenta-7 ); } -.focus-magenta-8:focus { color: var( --magenta-8 ); } -.focus-magenta-9:focus { color: var( --magenta-9 ); } -.focus-magenta-10:focus { color: var( --magenta-10 ); } -.focus-magenta-11:focus { color: var( --magenta-11 ); } -.focus-red-0:focus { color: var( --red-0 ); } -.focus-red-1:focus { color: var( --red-1 ); } -.focus-red-2:focus { color: var( --red-2 ); } -.focus-red-3:focus { color: var( --red-3 ); } -.focus-red-4:focus { color: var( --red-4 ); } -.focus-red-5:focus { color: var( --red-5 ); } -.focus-red-6:focus { color: var( --red-6 ); } -.focus-red-7:focus { color: var( --red-7 ); } -.focus-red-8:focus { color: var( --red-8 ); } -.focus-red-9:focus { color: var( --red-9 ); } -.focus-red-10:focus { color: var( --red-10 ); } -.focus-red-11:focus { color: var( --red-11 ); } -.focus-red-orange-0:focus { color: var( --red-orange-0 ); } -.focus-red-orange-1:focus { color: var( --red-orange-1 ); } -.focus-red-orange-2:focus { color: var( --red-orange-2 ); } -.focus-red-orange-3:focus { color: var( --red-orange-3 ); } -.focus-red-orange-4:focus { color: var( --red-orange-4 ); } -.focus-red-orange-5:focus { color: var( --red-orange-5 ); } -.focus-red-orange-6:focus { color: var( --red-orange-6 ); } -.focus-red-orange-7:focus { color: var( --red-orange-7 ); } -.focus-red-orange-8:focus { color: var( --red-orange-8 ); } -.focus-red-orange-9:focus { color: var( --red-orange-9 ); } -.focus-red-orange-10:focus { color: var( --red-orange-10 ); } -.focus-red-orange-11:focus { color: var( --red-orange-11 ); } -.focus-orange-0:focus { color: var( --orange-0 ); } -.focus-orange-1:focus { color: var( --orange-1 ); } -.focus-orange-2:focus { color: var( --orange-2 ); } -.focus-orange-3:focus { color: var( --orange-3 ); } -.focus-orange-4:focus { color: var( --orange-4 ); } -.focus-orange-5:focus { color: var( --orange-5 ); } -.focus-orange-6:focus { color: var( --orange-6 ); } -.focus-orange-7:focus { color: var( --orange-7 ); } -.focus-orange-8:focus { color: var( --orange-8 ); } -.focus-orange-9:focus { color: var( --orange-9 ); } -.focus-orange-10:focus { color: var( --orange-10 ); } -.focus-orange-11:focus { color: var( --orange-11 ); } -.focus-gold-0:focus { color: var( --gold-0 ); } -.focus-gold-1:focus { color: var( --gold-1 ); } -.focus-gold-2:focus { color: var( --gold-2 ); } -.focus-gold-3:focus { color: var( --gold-3 ); } -.focus-gold-4:focus { color: var( --gold-4 ); } -.focus-gold-5:focus { color: var( --gold-5 ); } -.focus-gold-6:focus { color: var( --gold-6 ); } -.focus-gold-7:focus { color: var( --gold-7 ); } -.focus-gold-8:focus { color: var( --gold-8 ); } -.focus-gold-9:focus { color: var( --gold-9 ); } -.focus-gold-10:focus { color: var( --gold-10 ); } -.focus-gold-11:focus { color: var( --gold-11 ); } -.focus-yellow-0:focus { color: var( --yellow-0 ); } -.focus-yellow-1:focus { color: var( --yellow-1 ); } -.focus-yellow-2:focus { color: var( --yellow-2 ); } -.focus-yellow-3:focus { color: var( --yellow-3 ); } -.focus-yellow-4:focus { color: var( --yellow-4 ); } -.focus-yellow-5:focus { color: var( --yellow-5 ); } -.focus-yellow-6:focus { color: var( --yellow-6 ); } -.focus-yellow-7:focus { color: var( --yellow-7 ); } -.focus-yellow-8:focus { color: var( --yellow-8 ); } -.focus-yellow-9:focus { color: var( --yellow-9 ); } -.focus-yellow-10:focus { color: var( --yellow-10 ); } -.focus-yellow-11:focus { color: var( --yellow-11 ); } -.focus-green-0:focus { color: var( --green-0 ); } -.focus-green-1:focus { color: var( --green-1 ); } -.focus-green-2:focus { color: var( --green-2 ); } -.focus-green-3:focus { color: var( --green-3 ); } -.focus-green-4:focus { color: var( --green-4 ); } -.focus-green-5:focus { color: var( --green-5 ); } -.focus-green-6:focus { color: var( --green-6 ); } -.focus-green-7:focus { color: var( --green-7 ); } -.focus-green-8:focus { color: var( --green-8 ); } -.focus-green-9:focus { color: var( --green-9 ); } -.focus-green-10:focus { color: var( --green-10 ); } -.focus-green-11:focus { color: var( --green-11 ); } -.focus-teal-0:focus { color: var( --teal-0 ); } -.focus-teal-1:focus { color: var( --teal-1 ); } -.focus-teal-2:focus { color: var( --teal-2 ); } -.focus-teal-3:focus { color: var( --teal-3 ); } -.focus-teal-4:focus { color: var( --teal-4 ); } -.focus-teal-5:focus { color: var( --teal-5 ); } -.focus-teal-6:focus { color: var( --teal-6 ); } -.focus-teal-7:focus { color: var( --teal-7 ); } -.focus-teal-8:focus { color: var( --teal-8 ); } -.focus-teal-9:focus { color: var( --teal-9 ); } -.focus-teal-10:focus { color: var( --teal-10 ); } -.focus-teal-11:focus { color: var( --teal-11 ); } -.focus-cyan-0:focus { color: var( --cyan-0 ); } -.focus-cyan-1:focus { color: var( --cyan-1 ); } -.focus-cyan-2:focus { color: var( --cyan-2 ); } -.focus-cyan-3:focus { color: var( --cyan-3 ); } -.focus-cyan-4:focus { color: var( --cyan-4 ); } -.focus-cyan-5:focus { color: var( --cyan-5 ); } -.focus-cyan-6:focus { color: var( --cyan-6 ); } -.focus-cyan-7:focus { color: var( --cyan-7 ); } -.focus-cyan-8:focus { color: var( --cyan-8 ); } -.focus-cyan-9:focus { color: var( --cyan-9 ); } -.focus-cyan-10:focus { color: var( --cyan-10 ); } -.focus-cyan-11:focus { color: var( --cyan-11 ); } -/* Background colors */ -.focus-bg-overlay-tint-0:focus { background-color: var( --overlay-tint-0 ); } -.focus-bg-overlay-tint-1:focus { background-color: var( --overlay-tint-1 ); } -.focus-bg-overlay-tint-2:focus { background-color: var( --overlay-tint-2 ); } -.focus-bg-overlay-tint-3:focus { background-color: var( --overlay-tint-3 ); } -.focus-bg-overlay-tint-4:focus { background-color: var( --overlay-tint-4 ); } -.focus-bg-overlay-tint-5:focus { background-color: var( --overlay-tint-5 ); } -.focus-bg-overlay-tint-6:focus { background-color: var( --overlay-tint-6 ); } -.focus-bg-overlay-tint-7:focus { background-color: var( --overlay-tint-7 ); } -.focus-bg-overlay-tint-8:focus { background-color: var( --overlay-tint-8 ); } -.focus-bg-overlay-tint-9:focus { background-color: var( --overlay-tint-9 ); } -.focus-bg-overlay-tint-10:focus { background-color: var( --overlay-tint-10 ); } -.focus-bg-overlay-tint-11:focus { background-color: var( --overlay-tint-11 ); } -.focus-bg-overlay-shadow-0:focus { background-color: var( --overlay-shadow-0 ); } -.focus-bg-overlay-shadow-1:focus { background-color: var( --overlay-shadow-1 ); } -.focus-bg-overlay-shadow-2:focus { background-color: var( --overlay-shadow-2 ); } -.focus-bg-overlay-shadow-3:focus { background-color: var( --overlay-shadow-3 ); } -.focus-bg-overlay-shadow-4:focus { background-color: var( --overlay-shadow-4 ); } -.focus-bg-overlay-shadow-5:focus { background-color: var( --overlay-shadow-5 ); } -.focus-bg-overlay-shadow-6:focus { background-color: var( --overlay-shadow-6 ); } -.focus-bg-overlay-shadow-7:focus { background-color: var( --overlay-shadow-7 ); } -.focus-bg-overlay-shadow-8:focus { background-color: var( --overlay-shadow-8 ); } -.focus-bg-overlay-shadow-9:focus { background-color: var( --overlay-shadow-9 ); } -.focus-bg-overlay-shadow-10:focus { background-color: var( --overlay-shadow-10 ); } -.focus-bg-overlay-shadow-11:focus { background-color: var( --overlay-shadow-11 ); } -.focus-bg-gray-0:focus { background-color: var( --gray-0 ); } -.focus-bg-gray-1:focus { background-color: var( --gray-1 ); } -.focus-bg-gray-2:focus { background-color: var( --gray-2 ); } -.focus-bg-gray-3:focus { background-color: var( --gray-3 ); } -.focus-bg-gray-4:focus { background-color: var( --gray-4 ); } -.focus-bg-gray-5:focus { background-color: var( --gray-5 ); } -.focus-bg-gray-6:focus { background-color: var( --gray-6 ); } -.focus-bg-gray-7:focus { background-color: var( --gray-7 ); } -.focus-bg-gray-8:focus { background-color: var( --gray-8 ); } -.focus-bg-gray-9:focus { background-color: var( --gray-9 ); } -.focus-bg-gray-10:focus { background-color: var( --gray-10 ); } -.focus-bg-gray-11:focus { background-color: var( --gray-11 ); } -.focus-bg-slate-gray-0:focus { background-color: var( --slate-gray-0 ); } -.focus-bg-slate-gray-1:focus { background-color: var( --slate-gray-1 ); } -.focus-bg-slate-gray-2:focus { background-color: var( --slate-gray-2 ); } -.focus-bg-slate-gray-3:focus { background-color: var( --slate-gray-3 ); } -.focus-bg-slate-gray-4:focus { background-color: var( --slate-gray-4 ); } -.focus-bg-slate-gray-5:focus { background-color: var( --slate-gray-5 ); } -.focus-bg-slate-gray-6:focus { background-color: var( --slate-gray-6 ); } -.focus-bg-slate-gray-7:focus { background-color: var( --slate-gray-7 ); } -.focus-bg-slate-gray-8:focus { background-color: var( --slate-gray-8 ); } -.focus-bg-slate-gray-9:focus { background-color: var( --slate-gray-9 ); } -.focus-bg-slate-gray-10:focus { background-color: var( --slate-gray-10 ); } -.focus-bg-slate-gray-11:focus { background-color: var( --slate-gray-11 ); } -.focus-bg-blue-0:focus { background-color: var( --blue-0 ); } -.focus-bg-blue-1:focus { background-color: var( --blue-1 ); } -.focus-bg-blue-2:focus { background-color: var( --blue-2 ); } -.focus-bg-blue-3:focus { background-color: var( --blue-3 ); } -.focus-bg-blue-4:focus { background-color: var( --blue-4 ); } -.focus-bg-blue-5:focus { background-color: var( --blue-5 ); } -.focus-bg-blue-6:focus { background-color: var( --blue-6 ); } -.focus-bg-blue-7:focus { background-color: var( --blue-7 ); } -.focus-bg-blue-8:focus { background-color: var( --blue-8 ); } -.focus-bg-blue-9:focus { background-color: var( --blue-9 ); } -.focus-bg-blue-10:focus { background-color: var( --blue-10 ); } -.focus-bg-blue-11:focus { background-color: var( --blue-11 ); } -.focus-bg-indigo-0:focus { background-color: var( --indigo-0 ); } -.focus-bg-indigo-1:focus { background-color: var( --indigo-1 ); } -.focus-bg-indigo-2:focus { background-color: var( --indigo-2 ); } -.focus-bg-indigo-3:focus { background-color: var( --indigo-3 ); } -.focus-bg-indigo-4:focus { background-color: var( --indigo-4 ); } -.focus-bg-indigo-5:focus { background-color: var( --indigo-5 ); } -.focus-bg-indigo-6:focus { background-color: var( --indigo-6 ); } -.focus-bg-indigo-7:focus { background-color: var( --indigo-7 ); } -.focus-bg-indigo-8:focus { background-color: var( --indigo-8 ); } -.focus-bg-indigo-9:focus { background-color: var( --indigo-9 ); } -.focus-bg-indigo-10:focus { background-color: var( --indigo-10 ); } -.focus-bg-indigo-11:focus { background-color: var( --indigo-11 ); } -.focus-bg-violet-0:focus { background-color: var( --violet-0 ); } -.focus-bg-violet-1:focus { background-color: var( --violet-1 ); } -.focus-bg-violet-2:focus { background-color: var( --violet-2 ); } -.focus-bg-violet-3:focus { background-color: var( --violet-3 ); } -.focus-bg-violet-4:focus { background-color: var( --violet-4 ); } -.focus-bg-violet-5:focus { background-color: var( --violet-5 ); } -.focus-bg-violet-6:focus { background-color: var( --violet-6 ); } -.focus-bg-violet-7:focus { background-color: var( --violet-7 ); } -.focus-bg-violet-8:focus { background-color: var( --violet-8 ); } -.focus-bg-violet-9:focus { background-color: var( --violet-9 ); } -.focus-bg-violet-10:focus { background-color: var( --violet-10 ); } -.focus-bg-violet-11:focus { background-color: var( --violet-11 ); } -.focus-bg-magenta-0:focus { background-color: var( --magenta-0 ); } -.focus-bg-magenta-1:focus { background-color: var( --magenta-1 ); } -.focus-bg-magenta-2:focus { background-color: var( --magenta-2 ); } -.focus-bg-magenta-3:focus { background-color: var( --magenta-3 ); } -.focus-bg-magenta-4:focus { background-color: var( --magenta-4 ); } -.focus-bg-magenta-5:focus { background-color: var( --magenta-5 ); } -.focus-bg-magenta-6:focus { background-color: var( --magenta-6 ); } -.focus-bg-magenta-7:focus { background-color: var( --magenta-7 ); } -.focus-bg-magenta-8:focus { background-color: var( --magenta-8 ); } -.focus-bg-magenta-9:focus { background-color: var( --magenta-9 ); } -.focus-bg-magenta-10:focus { background-color: var( --magenta-10 ); } -.focus-bg-magenta-11:focus { background-color: var( --magenta-11 ); } -.focus-bg-red-0:focus { background-color: var( --red-0 ); } -.focus-bg-red-1:focus { background-color: var( --red-1 ); } -.focus-bg-red-2:focus { background-color: var( --red-2 ); } -.focus-bg-red-3:focus { background-color: var( --red-3 ); } -.focus-bg-red-4:focus { background-color: var( --red-4 ); } -.focus-bg-red-5:focus { background-color: var( --red-5 ); } -.focus-bg-red-6:focus { background-color: var( --red-6 ); } -.focus-bg-red-7:focus { background-color: var( --red-7 ); } -.focus-bg-red-8:focus { background-color: var( --red-8 ); } -.focus-bg-red-9:focus { background-color: var( --red-9 ); } -.focus-bg-red-10:focus { background-color: var( --red-10 ); } -.focus-bg-red-11:focus { background-color: var( --red-11 ); } -.focus-bg-red-orange-0:focus { background-color: var( --red-orange-0 ); } -.focus-bg-red-orange-1:focus { background-color: var( --red-orange-1 ); } -.focus-bg-red-orange-2:focus { background-color: var( --red-orange-2 ); } -.focus-bg-red-orange-3:focus { background-color: var( --red-orange-3 ); } -.focus-bg-red-orange-4:focus { background-color: var( --red-orange-4 ); } -.focus-bg-red-orange-5:focus { background-color: var( --red-orange-5 ); } -.focus-bg-red-orange-6:focus { background-color: var( --red-orange-6 ); } -.focus-bg-red-orange-7:focus { background-color: var( --red-orange-7 ); } -.focus-bg-red-orange-8:focus { background-color: var( --red-orange-8 ); } -.focus-bg-red-orange-9:focus { background-color: var( --red-orange-9 ); } -.focus-bg-red-orange-10:focus { background-color: var( --red-orange-10 ); } -.focus-bg-red-orange-11:focus { background-color: var( --red-orange-11 ); } -.focus-bg-orange-0:focus { background-color: var( --orange-0 ); } -.focus-bg-orange-1:focus { background-color: var( --orange-1 ); } -.focus-bg-orange-2:focus { background-color: var( --orange-2 ); } -.focus-bg-orange-3:focus { background-color: var( --orange-3 ); } -.focus-bg-orange-4:focus { background-color: var( --orange-4 ); } -.focus-bg-orange-5:focus { background-color: var( --orange-5 ); } -.focus-bg-orange-6:focus { background-color: var( --orange-6 ); } -.focus-bg-orange-7:focus { background-color: var( --orange-7 ); } -.focus-bg-orange-8:focus { background-color: var( --orange-8 ); } -.focus-bg-orange-9:focus { background-color: var( --orange-9 ); } -.focus-bg-orange-10:focus { background-color: var( --orange-10 ); } -.focus-bg-orange-11:focus { background-color: var( --orange-11 ); } -.focus-bg-gold-0:focus { background-color: var( --gold-0 ); } -.focus-bg-gold-1:focus { background-color: var( --gold-1 ); } -.focus-bg-gold-2:focus { background-color: var( --gold-2 ); } -.focus-bg-gold-3:focus { background-color: var( --gold-3 ); } -.focus-bg-gold-4:focus { background-color: var( --gold-4 ); } -.focus-bg-gold-5:focus { background-color: var( --gold-5 ); } -.focus-bg-gold-6:focus { background-color: var( --gold-6 ); } -.focus-bg-gold-7:focus { background-color: var( --gold-7 ); } -.focus-bg-gold-8:focus { background-color: var( --gold-8 ); } -.focus-bg-gold-9:focus { background-color: var( --gold-9 ); } -.focus-bg-gold-10:focus { background-color: var( --gold-10 ); } -.focus-bg-gold-11:focus { background-color: var( --gold-11 ); } -.focus-bg-yellow-0:focus { background-color: var( --yellow-0 ); } -.focus-bg-yellow-1:focus { background-color: var( --yellow-1 ); } -.focus-bg-yellow-2:focus { background-color: var( --yellow-2 ); } -.focus-bg-yellow-3:focus { background-color: var( --yellow-3 ); } -.focus-bg-yellow-4:focus { background-color: var( --yellow-4 ); } -.focus-bg-yellow-5:focus { background-color: var( --yellow-5 ); } -.focus-bg-yellow-6:focus { background-color: var( --yellow-6 ); } -.focus-bg-yellow-7:focus { background-color: var( --yellow-7 ); } -.focus-bg-yellow-8:focus { background-color: var( --yellow-8 ); } -.focus-bg-yellow-9:focus { background-color: var( --yellow-9 ); } -.focus-bg-yellow-10:focus { background-color: var( --yellow-10 ); } -.focus-bg-yellow-11:focus { background-color: var( --yellow-11 ); } -.focus-bg-green-0:focus { background-color: var( --green-0 ); } -.focus-bg-green-1:focus { background-color: var( --green-1 ); } -.focus-bg-green-2:focus { background-color: var( --green-2 ); } -.focus-bg-green-3:focus { background-color: var( --green-3 ); } -.focus-bg-green-4:focus { background-color: var( --green-4 ); } -.focus-bg-green-5:focus { background-color: var( --green-5 ); } -.focus-bg-green-6:focus { background-color: var( --green-6 ); } -.focus-bg-green-7:focus { background-color: var( --green-7 ); } -.focus-bg-green-8:focus { background-color: var( --green-8 ); } -.focus-bg-green-9:focus { background-color: var( --green-9 ); } -.focus-bg-green-10:focus { background-color: var( --green-10 ); } -.focus-bg-green-11:focus { background-color: var( --green-11 ); } -.focus-bg-teal-0:focus { background-color: var( --teal-0 ); } -.focus-bg-teal-1:focus { background-color: var( --teal-1 ); } -.focus-bg-teal-2:focus { background-color: var( --teal-2 ); } -.focus-bg-teal-3:focus { background-color: var( --teal-3 ); } -.focus-bg-teal-4:focus { background-color: var( --teal-4 ); } -.focus-bg-teal-5:focus { background-color: var( --teal-5 ); } -.focus-bg-teal-6:focus { background-color: var( --teal-6 ); } -.focus-bg-teal-7:focus { background-color: var( --teal-7 ); } -.focus-bg-teal-8:focus { background-color: var( --teal-8 ); } -.focus-bg-teal-9:focus { background-color: var( --teal-9 ); } -.focus-bg-teal-10:focus { background-color: var( --teal-10 ); } -.focus-bg-teal-11:focus { background-color: var( --teal-11 ); } -.focus-bg-cyan-0:focus { background-color: var( --cyan-0 ); } -.focus-bg-cyan-1:focus { background-color: var( --cyan-1 ); } -.focus-bg-cyan-2:focus { background-color: var( --cyan-2 ); } -.focus-bg-cyan-3:focus { background-color: var( --cyan-3 ); } -.focus-bg-cyan-4:focus { background-color: var( --cyan-4 ); } -.focus-bg-cyan-5:focus { background-color: var( --cyan-5 ); } -.focus-bg-cyan-6:focus { background-color: var( --cyan-6 ); } -.focus-bg-cyan-7:focus { background-color: var( --cyan-7 ); } -.focus-bg-cyan-8:focus { background-color: var( --cyan-8 ); } -.focus-bg-cyan-9:focus { background-color: var( --cyan-9 ); } -.focus-bg-cyan-10:focus { background-color: var( --cyan-10 ); } -.focus-bg-cyan-11:focus { background-color: var( --cyan-11 ); } -/* - SPACING - Docs: http://tachyons.io/docs/layout/spacing/ - - An eight step powers of two scale ranging from 0 to 16rem. - - Base: - p = padding - m = margin - - Modifiers: - a = all - y = vertical - x = horizontal - t = top - r = right - b = bottom - l = left - - 0 = none - 1 = 1st step in spacing scale - 2 = 2nd step in spacing scale - 3 = 3rd step in spacing scale - 4 = 4th step in spacing scale - 5 = 5th step in spacing scale - 6 = 6th step in spacing scale - 7 = 7th step in spacing scale - 8 = 8th step in spacing scale - 9 = 9th step in spacing scale - - Media Query Extensions: - -s = small - -m = medium - -l = large - -*/ -.p0 { padding: var( --spacing-0, 0 ); } -.p1 { padding: var( --spacing-1, 2px ); } -.p2 { padding: var( --spacing-2, 4px ); } -.p3 { padding: var( --spacing-3, 8px ); } -.p4 { padding: var( --spacing-4, 16px ); } -.p5 { padding: var( --spacing-5, 32px ); } -.p6 { padding: var( --spacing-6, 64px ); } -.p7 { padding: var( --spacing-7, 128px ); } -.p8 { padding: var( --spacing-8, 256px ); } -.p9 { padding: var( --spacing-9, 512px ); } -.pl0 { padding-left: var( --spacing-0, 0 ); } -.pl1 { padding-left: var( --spacing-1, 2px ); } -.pl2 { padding-left: var( --spacing-2, 4px ); } -.pl3 { padding-left: var( --spacing-3, 8px ); } -.pl4 { padding-left: var( --spacing-4, 16px ); } -.pl5 { padding-left: var( --spacing-5, 32px ); } -.pl6 { padding-left: var( --spacing-6, 64px ); } -.pl7 { padding-left: var( --spacing-7, 128px ); } -.pl8 { padding-left: var( --spacing-8, 256px ); } -.pl9 { padding-left: var( --spacing-9, 512px ); } -.pr0 { padding-right: var( --spacing-0, 0 ); } -.pr1 { padding-right: var( --spacing-1, 2px ); } -.pr2 { padding-right: var( --spacing-2, 4px ); } -.pr3 { padding-right: var( --spacing-3, 8px ); } -.pr4 { padding-right: var( --spacing-4, 16px ); } -.pr5 { padding-right: var( --spacing-5, 32px ); } -.pr6 { padding-right: var( --spacing-6, 64px ); } -.pr7 { padding-right: var( --spacing-7, 128px ); } -.pr8 { padding-right: var( --spacing-8, 256px ); } -.pr9 { padding-right: var( --spacing-9, 512px ); } -.pb0 { padding-bottom: var( --spacing-0, 0 ); } -.pb1 { padding-bottom: var( --spacing-1, 2px ); } -.pb2 { padding-bottom: var( --spacing-2, 4px ); } -.pb3 { padding-bottom: var( --spacing-3, 8px ); } -.pb4 { padding-bottom: var( --spacing-4, 16px ); } -.pb5 { padding-bottom: var( --spacing-5, 32px ); } -.pb6 { padding-bottom: var( --spacing-6, 64px ); } -.pb7 { padding-bottom: var( --spacing-7, 128px ); } -.pb8 { padding-bottom: var( --spacing-8, 256px ); } -.pb9 { padding-bottom: var( --spacing-9, 512px ); } -.pt0 { padding-top: var( --spacing-0, 0 ); } -.pt1 { padding-top: var( --spacing-1, 2px ); } -.pt2 { padding-top: var( --spacing-2, 4px ); } -.pt3 { padding-top: var( --spacing-3, 8px ); } -.pt4 { padding-top: var( --spacing-4, 16px ); } -.pt5 { padding-top: var( --spacing-5, 32px ); } -.pt6 { padding-top: var( --spacing-6, 64px ); } -.pt7 { padding-top: var( --spacing-7, 128px ); } -.pt8 { padding-top: var( --spacing-8, 256px ); } -.pt9 { padding-top: var( --spacing-9, 512px ); } -.py0 { padding-top: var( --spacing-0, 0 ); padding-bottom: var( --spacing-0, 0 ); } -.py1 { padding-top: var( --spacing-1, 2px ); padding-bottom: var( --spacing-1, 2px ); } -.py2 { padding-top: var( --spacing-2, 4px ); padding-bottom: var( --spacing-2, 4px ); } -.py3 { padding-top: var( --spacing-3, 8px ); padding-bottom: var( --spacing-3, 8px ); } -.py4 { padding-top: var( --spacing-4, 16px ); padding-bottom: var( --spacing-4, 16px ); } -.py5 { padding-top: var( --spacing-5, 32px ); padding-bottom: var( --spacing-5, 32px ); } -.py6 { padding-top: var( --spacing-6, 64px ); padding-bottom: var( --spacing-6, 64px ); } -.py7 { padding-top: var( --spacing-7, 128px ); padding-bottom: var( --spacing-7, 128px ); } -.py8 { padding-top: var( --spacing-8, 256px ); padding-bottom: var( --spacing-8, 256px ); } -.py9 { padding-top: var( --spacing-9, 512px ); padding-bottom: var( --spacing-9, 512px ); } -.px0 { padding-left: var( --spacing-0, 0 ); padding-right: var( --spacing-0, 0 ); } -.px1 { padding-left: var( --spacing-1, 4px ); padding-right: var( --spacing-1, 4px ); } -.px2 { padding-left: var( --spacing-2, 4px ); padding-right: var( --spacing-2, 4px ); } -.px3 { padding-left: var( --spacing-3, 8px ); padding-right: var( --spacing-3, 8px ); } -.px4 { padding-left: var( --spacing-4, 16px ); padding-right: var( --spacing-4, 16px ); } -.px5 { padding-left: var( --spacing-5, 32px ); padding-right: var( --spacing-5, 32px ); } -.px6 { padding-left: var( --spacing-6, 64px ); padding-right: var( --spacing-6, 64px ); } -.px7 { padding-left: var( --spacing-7, 128px ); padding-right: var( --spacing-7, 128px ); } -.px8 { padding-left: var( --spacing-8, 256px ); padding-right: var( --spacing-8, 256px ); } -.px9 { padding-left: var( --spacing-9, 512px ); padding-right: var( --spacing-9, 512px ); } -.m0 { margin: var( --spacing-0, 0 ); } -.m1 { margin: var( --spacing-1, 2px ); } -.m2 { margin: var( --spacing-2, 4px ); } -.m3 { margin: var( --spacing-3, 8px ); } -.m4 { margin: var( --spacing-4, 16px ); } -.m5 { margin: var( --spacing-5, 32px ); } -.m6 { margin: var( --spacing-6, 64px ); } -.m7 { margin: var( --spacing-7, 128px ); } -.m8 { margin: var( --spacing-8, 256px ); } -.m9 { margin: var( --spacing-9, 512px ); } -.ml0 { margin-left: var( --spacing-0, 0 ); } -.ml1 { margin-left: var( --spacing-1, 2px ); } -.ml2 { margin-left: var( --spacing-2, 4px ); } -.ml3 { margin-left: var( --spacing-3, 8px ); } -.ml4 { margin-left: var( --spacing-4, 16px ); } -.ml5 { margin-left: var( --spacing-5, 32px ); } -.ml6 { margin-left: var( --spacing-6, 64px ); } -.ml7 { margin-left: var( --spacing-7, 128px ); } -.ml8 { margin-left: var( --spacing-8, 256px ); } -.ml9 { margin-left: var( --spacing-9, 512px ); } -.mr0 { margin-right: var( --spacing-0, 0 ); } -.mr1 { margin-right: var( --spacing-1, 2px ); } -.mr2 { margin-right: var( --spacing-2, 4px ); } -.mr3 { margin-right: var( --spacing-3, 8px ); } -.mr4 { margin-right: var( --spacing-4, 16px ); } -.mr5 { margin-right: var( --spacing-5, 32px ); } -.mr6 { margin-right: var( --spacing-6, 64px ); } -.mr7 { margin-right: var( --spacing-7, 128px ); } -.mr8 { margin-right: var( --spacing-8, 256px ); } -.mr9 { margin-right: var( --spacing-9, 512px ); } -.mb0 { margin-bottom: var( --spacing-0, 0 ); } -.mb1 { margin-bottom: var( --spacing-1, 4px ); } -.mb2 { margin-bottom: var( --spacing-2, 4px ); } -.mb3 { margin-bottom: var( --spacing-3, 8px ); } -.mb4 { margin-bottom: var( --spacing-4, 16px ); } -.mb5 { margin-bottom: var( --spacing-5, 32px ); } -.mb6 { margin-bottom: var( --spacing-6, 64px ); } -.mb7 { margin-bottom: var( --spacing-7, 128px ); } -.mb8 { margin-bottom: var( --spacing-8, 256px ); } -.mb9 { margin-bottom: var( --spacing-9, 512px ); } -.mt0 { margin-top: var( --spacing-0, 0 ); } -.mt1 { margin-top: var( --spacing-1, 2px ); } -.mt2 { margin-top: var( --spacing-2, 4px ); } -.mt3 { margin-top: var( --spacing-3, 8px ); } -.mt4 { margin-top: var( --spacing-4, 16px ); } -.mt5 { margin-top: var( --spacing-5, 32px ); } -.mt6 { margin-top: var( --spacing-6, 64px ); } -.mt7 { margin-top: var( --spacing-7, 128px ); } -.mt8 { margin-top: var( --spacing-8, 256px ); } -.mt9 { margin-top: var( --spacing-9, 512px ); } -.my0 { margin-top: var( --spacing-0, 0 ); margin-bottom: var( --spacing-0, 0 ); } -.my1 { margin-top: var( --spacing-1, 4px ); margin-bottom: var( --spacing-1, 4px ); } -.my2 { margin-top: var( --spacing-2, 4px ); margin-bottom: var( --spacing-2, 4px ); } -.my3 { margin-top: var( --spacing-3, 8px ); margin-bottom: var( --spacing-3, 8px ); } -.my4 { margin-top: var( --spacing-4, 16px ); margin-bottom: var( --spacing-4, 16px ); } -.my5 { margin-top: var( --spacing-5, 32px ); margin-bottom: var( --spacing-5, 32px ); } -.my6 { margin-top: var( --spacing-6, 64px ); margin-bottom: var( --spacing-6, 64px ); } -.my7 { margin-top: var( --spacing-7, 128px ); margin-bottom: var( --spacing-7, 128px ); } -.my8 { margin-top: var( --spacing-8, 256px ); margin-bottom: var( --spacing-8, 256px ); } -.my9 { margin-top: var( --spacing-9, 512px ); margin-bottom: var( --spacing-9, 512px ); } -.mx0 { margin-left: var( --spacing-0, 0 ); margin-right: var( --spacing-0, 0 ); } -.mx1 { margin-left: var( --spacing-1, 2px ); margin-right: var( --spacing-1, 2px ); } -.mx2 { margin-left: var( --spacing-2, 4px ); margin-right: var( --spacing-2, 4px ); } -.mx3 { margin-left: var( --spacing-3, 8px ); margin-right: var( --spacing-3, 8px ); } -.mx4 { margin-left: var( --spacing-4, 16px ); margin-right: var( --spacing-4, 16px ); } -.mx5 { margin-left: var( --spacing-5, 32px ); margin-right: var( --spacing-5, 32px ); } -.mx6 { margin-left: var( --spacing-6, 64px ); margin-right: var( --spacing-6, 64px ); } -.mx7 { margin-left: var( --spacing-7, 128px ); margin-right: var( --spacing-7, 128px ); } -.mx8 { margin-left: var( --spacing-8, 256px ); margin-right: var( --spacing-8, 256px ); } -.mx9 { margin-left: var( --spacing-9, 512px ); margin-right: var( --spacing-9, 512px ); } -@container (min-width:30em) { - .p0-s { padding: var( --spacing-0, 0 ); } - .p1-s { padding: var( --spacing-1, 2px ); } - .p2-s { padding: var( --spacing-2, 4px ); } - .p3-s { padding: var( --spacing-3, 8px ); } - .p4-s { padding: var( --spacing-4, 16px ); } - .p5-s { padding: var( --spacing-5, 32px ); } - .p6-s { padding: var( --spacing-6, 64px ); } - .p7-s { padding: var( --spacing-7, 128px ); } - .p8-s { padding: var( --spacing-8, 256px ); } - .p9-s { padding: var( --spacing-9, 512px ); } - .pl0-s { padding-left: var( --spacing-0, 0 ); } - .pl1-s { padding-left: var( --spacing-1, 2px ); } - .pl2-s { padding-left: var( --spacing-2, 4px ); } - .pl3-s { padding-left: var( --spacing-3, 8px ); } - .pl4-s { padding-left: var( --spacing-4, 16px ); } - .pl5-s { padding-left: var( --spacing-5, 32px ); } - .pl6-s { padding-left: var( --spacing-6, 64px ); } - .pl7-s { padding-left: var( --spacing-7, 128px ); } - .pl8-s { padding-left: var( --spacing-8, 256px ); } - .pl9-s { padding-left: var( --spacing-9, 512px ); } - .pr0-s { padding-right: var( --spacing-0, 0 ); } - .pr1-s { padding-right: var( --spacing-1, 2px ); } - .pr2-s { padding-right: var( --spacing-2, 4px ); } - .pr3-s { padding-right: var( --spacing-3, 8px ); } - .pr4-s { padding-right: var( --spacing-4, 16px ); } - .pr5-s { padding-right: var( --spacing-5, 32px ); } - .pr6-s { padding-right: var( --spacing-6, 64px ); } - .pr7-s { padding-right: var( --spacing-7, 128px ); } - .pr8-s { padding-right: var( --spacing-8, 256px ); } - .pr9-s { padding-right: var( --spacing-9, 512px ); } - .pb0-s { padding-bottom: var( --spacing-0, 0 ); } - .pb1-s { padding-bottom: var( --spacing-1, 2px ); } - .pb2-s { padding-bottom: var( --spacing-2, 4px ); } - .pb3-s { padding-bottom: var( --spacing-3, 8px ); } - .pb4-s { padding-bottom: var( --spacing-4, 16px ); } - .pb5-s { padding-bottom: var( --spacing-5, 32px ); } - .pb6-s { padding-bottom: var( --spacing-6, 64px ); } - .pb7-s { padding-bottom: var( --spacing-7, 128px ); } - .pb8-s { padding-bottom: var( --spacing-8, 256px ); } - .pb9-s { padding-bottom: var( --spacing-9, 512px ); } - .pt0-s { padding-top: var( --spacing-0, 0 ); } - .pt1-s { padding-top: var( --spacing-1, 2px ); } - .pt2-s { padding-top: var( --spacing-2, 4px ); } - .pt3-s { padding-top: var( --spacing-3, 8px ); } - .pt4-s { padding-top: var( --spacing-4, 16px ); } - .pt5-s { padding-top: var( --spacing-5, 32px ); } - .pt6-s { padding-top: var( --spacing-6, 64px ); } - .pt7-s { padding-top: var( --spacing-7, 128px ); } - .pt8-s { padding-top: var( --spacing-8, 256px ); } - .pt9-s { padding-top: var( --spacing-9, 512px ); } - .py0-s { padding-top: var( --spacing-0, 0 ); padding-bottom: var( --spacing-0, 0 ); } - .py1-s { padding-top: var( --spacing-1, 2px ); padding-bottom: var( --spacing-1, 2px ); } - .py2-s { padding-top: var( --spacing-2, 4px ); padding-bottom: var( --spacing-2, 4px ); } - .py3-s { padding-top: var( --spacing-3, 8px ); padding-bottom: var( --spacing-3, 8px ); } - .py4-s { padding-top: var( --spacing-4, 16px ); padding-bottom: var( --spacing-4, 16px ); } - .py5-s { padding-top: var( --spacing-5, 32px ); padding-bottom: var( --spacing-5, 32px ); } - .py6-s { padding-top: var( --spacing-6, 64px ); padding-bottom: var( --spacing-6, 64px ); } - .py7-s { padding-top: var( --spacing-7, 128px ); padding-bottom: var( --spacing-7, 128px ); } - .py8-s { padding-top: var( --spacing-8, 256px ); padding-bottom: var( --spacing-8, 256px ); } - .py9-s { padding-top: var( --spacing-9, 512px ); padding-bottom: var( --spacing-9, 512px ); } - .px0-s { padding-left: var( --spacing-0, 0 ); padding-right: var( --spacing-0, 0 ); } - .px1-s { padding-left: var( --spacing-1, 2px ); padding-right: var( --spacing-1, 2px ); } - .px2-s { padding-left: var( --spacing-2, 4px ); padding-right: var( --spacing-2, 4px ); } - .px3-s { padding-left: var( --spacing-3, 8px ); padding-right: var( --spacing-3, 8px ); } - .px4-s { padding-left: var( --spacing-4, 16px ); padding-right: var( --spacing-4, 16px ); } - .px5-s { padding-left: var( --spacing-5, 32px ); padding-right: var( --spacing-5, 32px ); } - .px6-s { padding-left: var( --spacing-6, 64px ); padding-right: var( --spacing-6, 64px ); } - .px7-s { padding-left: var( --spacing-7, 128px ); padding-right: var( --spacing-7, 128px ); } - .px8-s { padding-left: var( --spacing-8, 256px ); padding-right: var( --spacing-8, 256px ); } - .px9-s { padding-left: var( --spacing-9, 512px ); padding-right: var( --spacing-9, 512px ); } - .m0-s { margin: var( --spacing-0, 0 ); } - .m1-s { margin: var( --spacing-1, 2px ); } - .m2-s { margin: var( --spacing-2, 4px ); } - .m3-s { margin: var( --spacing-3, 8px ); } - .m4-s { margin: var( --spacing-4, 16px ); } - .m5-s { margin: var( --spacing-5, 32px ); } - .m6-s { margin: var( --spacing-6, 64px ); } - .m7-s { margin: var( --spacing-7, 128px ); } - .m8-s { margin: var( --spacing-8, 256px ); } - .m9-s { margin: var( --spacing-9, 512px ); } - .ml0-s { margin-left: var( --spacing-0, 0 ); } - .ml1-s { margin-left: var( --spacing-1, 2px ); } - .ml2-s { margin-left: var( --spacing-2, 4px ); } - .ml3-s { margin-left: var( --spacing-3, 8px ); } - .ml4-s { margin-left: var( --spacing-4, 16px ); } - .ml5-s { margin-left: var( --spacing-5, 32px ); } - .ml6-s { margin-left: var( --spacing-6, 64px ); } - .ml7-s { margin-left: var( --spacing-7, 128px ); } - .ml8-s { margin-left: var( --spacing-8, 256px ); } - .ml9-s { margin-left: var( --spacing-9, 512px ); } - .mr0-s { margin-right: var( --spacing-0, 0 ); } - .mr1-s { margin-right: var( --spacing-1, 2px ); } - .mr2-s { margin-right: var( --spacing-2, 4px ); } - .mr3-s { margin-right: var( --spacing-3, 8px ); } - .mr4-s { margin-right: var( --spacing-4, 16px ); } - .mr5-s { margin-right: var( --spacing-5, 32px ); } - .mr6-s { margin-right: var( --spacing-6, 64px ); } - .mr7-s { margin-right: var( --spacing-7, 128px ); } - .mr8-s { margin-right: var( --spacing-8, 256px ); } - .mr9-s { margin-right: var( --spacing-9, 512px ); } - .mb0-s { margin-bottom: var( --spacing-0, 0 ); } - .mb1-s { margin-bottom: var( --spacing-1, 2px ); } - .mb2-s { margin-bottom: var( --spacing-2, 4px ); } - .mb3-s { margin-bottom: var( --spacing-3, 8px ); } - .mb4-s { margin-bottom: var( --spacing-4, 16px ); } - .mb5-s { margin-bottom: var( --spacing-5, 32px ); } - .mb6-s { margin-bottom: var( --spacing-6, 64px ); } - .mb7-s { margin-bottom: var( --spacing-7, 128px ); } - .mb8-s { margin-bottom: var( --spacing-8, 256px ); } - .mb9-s { margin-bottom: var( --spacing-9, 512px ); } - .mt0-s { margin-top: var( --spacing-0, 0 ); } - .mt1-s { margin-top: var( --spacing-1, 2px ); } - .mt2-s { margin-top: var( --spacing-2, 4px ); } - .mt3-s { margin-top: var( --spacing-3, 8px ); } - .mt4-s { margin-top: var( --spacing-4, 16px ); } - .mt5-s { margin-top: var( --spacing-5, 32px ); } - .mt6-s { margin-top: var( --spacing-6, 64px ); } - .mt7-s { margin-top: var( --spacing-7, 128px ); } - .mt8-s { margin-top: var( --spacing-8, 256px ); } - .mt9-s { margin-top: var( --spacing-9, 512px ); } - .my0-s { margin-top: var( --spacing-0, 0 ); margin-bottom: var( --spacing-0, 0 ); } - .my1-s { margin-top: var( --spacing-1, 2px ); margin-bottom: var( --spacing-1, 2px ); } - .my2-s { margin-top: var( --spacing-2, 4px ); margin-bottom: var( --spacing-2, 4px ); } - .my3-s { margin-top: var( --spacing-3, 8px ); margin-bottom: var( --spacing-3, 8px ); } - .my4-s { margin-top: var( --spacing-4, 16px ); margin-bottom: var( --spacing-4, 16px ); } - .my5-s { margin-top: var( --spacing-5, 32px ); margin-bottom: var( --spacing-5, 32px ); } - .my6-s { margin-top: var( --spacing-6, 64px ); margin-bottom: var( --spacing-6, 64px ); } - .my7-s { margin-top: var( --spacing-7, 128px ); margin-bottom: var( --spacing-7, 128px ); } - .my8-s { margin-top: var( --spacing-8, 256px ); margin-bottom: var( --spacing-8, 256px ); } - .my9-s { margin-top: var( --spacing-9, 512px ); margin-bottom: var( --spacing-9, 512px ); } - .mx0-s { margin-left: var( --spacing-0, 0 ); margin-right: var( --spacing-0, 0 ); } - .mx1-s { margin-left: var( --spacing-1, 4px ); margin-right: var( --spacing-1, 4px ); } - .mx2-s { margin-left: var( --spacing-2, 4px ); margin-right: var( --spacing-2, 4px ); } - .mx3-s { margin-left: var( --spacing-3, 8px ); margin-right: var( --spacing-3, 8px ); } - .mx4-s { margin-left: var( --spacing-4, 16px ); margin-right: var( --spacing-4, 16px ); } - .mx5-s { margin-left: var( --spacing-5, 32px ); margin-right: var( --spacing-5, 32px ); } - .mx6-s { margin-left: var( --spacing-6, 64px ); margin-right: var( --spacing-6, 64px ); } - .mx7-s { margin-left: var( --spacing-7, 128px ); margin-right: var( --spacing-7, 128px ); } - .mx8-s { margin-left: var( --spacing-8, 256px ); margin-right: var( --spacing-8, 256px ); } - .mx9-s { margin-left: var( --spacing-9, 512px ); margin-right: var( --spacing-9, 512px ); } -} -@container (min-width:48em) { - .p0-m { padding: var( --spacing-0, 0 ); } - .p1-m { padding: var( --spacing-1, 2px ); } - .p2-m { padding: var( --spacing-2, 4px ); } - .p3-m { padding: var( --spacing-3, 8px ); } - .p4-m { padding: var( --spacing-4, 16px ); } - .p5-m { padding: var( --spacing-5, 32px ); } - .p6-m { padding: var( --spacing-6, 64px ); } - .p7-m { padding: var( --spacing-7, 128px ); } - .p8-m { padding: var( --spacing-8, 256px ); } - .p9-m { padding: var( --spacing-9, 512px ); } - .pl0-m { padding-left: var( --spacing-0, 0 ); } - .pl1-m { padding-left: var( --spacing-1, 2px ); } - .pl2-m { padding-left: var( --spacing-2, 4px ); } - .pl3-m { padding-left: var( --spacing-3, 8px ); } - .pl4-m { padding-left: var( --spacing-4, 16px ); } - .pl5-m { padding-left: var( --spacing-5, 32px ); } - .pl6-m { padding-left: var( --spacing-6, 64px ); } - .pl7-m { padding-left: var( --spacing-7, 128px ); } - .pl8-m { padding-left: var( --spacing-8, 256px ); } - .pl9-m { padding-left: var( --spacing-9, 512px ); } - .pr0-m { padding-right: var( --spacing-0, 0 ); } - .pr1-m { padding-right: var( --spacing-1, 2px ); } - .pr2-m { padding-right: var( --spacing-2, 4px ); } - .pr3-m { padding-right: var( --spacing-3, 8px ); } - .pr4-m { padding-right: var( --spacing-4, 16px ); } - .pr5-m { padding-right: var( --spacing-5, 32px ); } - .pr6-m { padding-right: var( --spacing-6, 64px ); } - .pr7-m { padding-right: var( --spacing-7, 128px ); } - .pr8-m { padding-right: var( --spacing-8, 256px ); } - .pr9-m { padding-right: var( --spacing-9, 512px ); } - .pb0-m { padding-bottom: var( --spacing-0, 0 ); } - .pb1-m { padding-bottom: var( --spacing-1, 2px ); } - .pb2-m { padding-bottom: var( --spacing-2, 4px ); } - .pb3-m { padding-bottom: var( --spacing-3, 8px ); } - .pb4-m { padding-bottom: var( --spacing-4, 16px ); } - .pb5-m { padding-bottom: var( --spacing-5, 32px ); } - .pb6-m { padding-bottom: var( --spacing-6, 64px ); } - .pb7-m { padding-bottom: var( --spacing-7, 128px ); } - .pb8-m { padding-bottom: var( --spacing-8, 256px ); } - .pb9-m { padding-bottom: var( --spacing-9, 512px ); } - .pt0-m { padding-top: var( --spacing-0, 0 ); } - .pt1-m { padding-top: var( --spacing-1, 2px ); } - .pt2-m { padding-top: var( --spacing-2, 4px ); } - .pt3-m { padding-top: var( --spacing-3, 8px ); } - .pt4-m { padding-top: var( --spacing-4, 16px ); } - .pt5-m { padding-top: var( --spacing-5, 32px ); } - .pt6-m { padding-top: var( --spacing-6, 64px ); } - .pt7-m { padding-top: var( --spacing-7, 128px ); } - .pt8-m { padding-top: var( --spacing-8, 256px ); } - .pt9-m { padding-top: var( --spacing-9, 512px ); } - .py0-m { padding-top: var( --spacing-0, 0 ); padding-bottom: var( --spacing-0, 0 ); } - .py1-m { padding-top: var( --spacing-1, 2px ); padding-bottom: var( --spacing-1, 2px ); } - .py2-m { padding-top: var( --spacing-2, 4px ); padding-bottom: var( --spacing-2, 4px ); } - .py3-m { padding-top: var( --spacing-3, 8px ); padding-bottom: var( --spacing-3, 8px ); } - .py4-m { padding-top: var( --spacing-4, 16px ); padding-bottom: var( --spacing-4, 16px ); } - .py5-m { padding-top: var( --spacing-5, 32px ); padding-bottom: var( --spacing-5, 32px ); } - .py6-m { padding-top: var( --spacing-6, 64px ); padding-bottom: var( --spacing-6, 64px ); } - .py7-m { padding-top: var( --spacing-7, 128px ); padding-bottom: var( --spacing-7, 128px ); } - .py8-m { padding-top: var( --spacing-8, 256px ); padding-bottom: var( --spacing-8, 256px ); } - .py9-m { padding-top: var( --spacing-9, 512px ); padding-bottom: var( --spacing-9, 512px ); } - .px0-m { padding-left: var( --spacing-0, 0 ); padding-right: var( --spacing-0, 0 ); } - .px1-m { padding-left: var( --spacing-1, 2px ); padding-right: var( --spacing-1, 2px ); } - .px2-m { padding-left: var( --spacing-2, 4px ); padding-right: var( --spacing-2, 4px ); } - .px3-m { padding-left: var( --spacing-3, 8px ); padding-right: var( --spacing-3, 8px ); } - .px4-m { padding-left: var( --spacing-4, 16px ); padding-right: var( --spacing-4, 16px ); } - .px5-m { padding-left: var( --spacing-5, 32px ); padding-right: var( --spacing-5, 32px ); } - .px6-m { padding-left: var( --spacing-6, 64px ); padding-right: var( --spacing-6, 64px ); } - .px7-m { padding-left: var( --spacing-7, 128px ); padding-right: var( --spacing-7, 128px ); } - .px8-m { padding-left: var( --spacing-8, 256px ); padding-right: var( --spacing-8, 256px ); } - .px9-m { padding-left: var( --spacing-9, 512px ); padding-right: var( --spacing-9, 512px ); } - .m0-m { margin: var( --spacing-0, 0 ); } - .m1-m { margin: var( --spacing-1, 2px ); } - .m2-m { margin: var( --spacing-2, 4px ); } - .m3-m { margin: var( --spacing-3, 8px ); } - .m4-m { margin: var( --spacing-4, 16px ); } - .m5-m { margin: var( --spacing-5, 32px ); } - .m6-m { margin: var( --spacing-6, 64px ); } - .m7-m { margin: var( --spacing-7, 128px ); } - .m8-m { margin: var( --spacing-8, 256px ); } - .m9-m { margin: var( --spacing-9, 512px ); } - .ml0-m { margin-left: var( --spacing-0, 0 ); } - .ml1-m { margin-left: var( --spacing-1, 2px ); } - .ml2-m { margin-left: var( --spacing-2, 4px ); } - .ml3-m { margin-left: var( --spacing-3, 8px ); } - .ml4-m { margin-left: var( --spacing-4, 16px ); } - .ml5-m { margin-left: var( --spacing-5, 32px ); } - .ml6-m { margin-left: var( --spacing-6, 64px ); } - .ml7-m { margin-left: var( --spacing-7, 128px ); } - .ml8-m { margin-left: var( --spacing-8, 256px ); } - .ml9-m { margin-left: var( --spacing-9, 512px ); } - .mr0-m { margin-right: var( --spacing-0, 0 ); } - .mr1-m { margin-right: var( --spacing-1, 4px ); } - .mr2-m { margin-right: var( --spacing-2, 4px ); } - .mr3-m { margin-right: var( --spacing-3, 8px ); } - .mr4-m { margin-right: var( --spacing-4, 16px ); } - .mr5-m { margin-right: var( --spacing-5, 32px ); } - .mr6-m { margin-right: var( --spacing-6, 64px ); } - .mr7-m { margin-right: var( --spacing-7, 128px ); } - .mr8-m { margin-right: var( --spacing-8, 256px ); } - .mr9-m { margin-right: var( --spacing-9, 512px ); } - .mb0-m { margin-bottom: var( --spacing-0, 0 ); } - .mb1-m { margin-bottom: var( --spacing-1, 2px ); } - .mb2-m { margin-bottom: var( --spacing-2, 4px ); } - .mb3-m { margin-bottom: var( --spacing-3, 8px ); } - .mb4-m { margin-bottom: var( --spacing-4, 16px ); } - .mb5-m { margin-bottom: var( --spacing-5, 32px ); } - .mb6-m { margin-bottom: var( --spacing-6, 64px ); } - .mb7-m { margin-bottom: var( --spacing-7, 128px ); } - .mb8-m { margin-bottom: var( --spacing-8, 256px ); } - .mb9-m { margin-bottom: var( --spacing-9, 512px ); } - .mt0-m { margin-top: var( --spacing-0, 0 ); } - .mt1-m { margin-top: var( --spacing-1, 2px ); } - .mt2-m { margin-top: var( --spacing-2, 4px ); } - .mt3-m { margin-top: var( --spacing-3, 8px ); } - .mt4-m { margin-top: var( --spacing-4, 16px ); } - .mt5-m { margin-top: var( --spacing-5, 32px ); } - .mt6-m { margin-top: var( --spacing-6, 64px ); } - .mt7-m { margin-top: var( --spacing-7, 128px ); } - .mt8-m { margin-top: var( --spacing-8, 256px ); } - .mt9-m { margin-top: var( --spacing-9, 512px ); } - .my0-m { margin-top: var( --spacing-0, 0 ); margin-bottom: var( --spacing-0, 0 ); } - .my1-m { margin-top: var( --spacing-1, 2px ); margin-bottom: var( --spacing-1, 2px ); } - .my2-m { margin-top: var( --spacing-2, 4px ); margin-bottom: var( --spacing-2, 4px ); } - .my3-m { margin-top: var( --spacing-3, 8px ); margin-bottom: var( --spacing-3, 8px ); } - .my4-m { margin-top: var( --spacing-4, 16px ); margin-bottom: var( --spacing-4, 16px ); } - .my5-m { margin-top: var( --spacing-5, 32px ); margin-bottom: var( --spacing-5, 32px ); } - .my6-m { margin-top: var( --spacing-6, 64px ); margin-bottom: var( --spacing-6, 64px ); } - .my7-m { margin-top: var( --spacing-7, 128px ); margin-bottom: var( --spacing-7, 128px ); } - .my8-m { margin-top: var( --spacing-8, 256px ); margin-bottom: var( --spacing-8, 256px ); } - .my9-m { margin-top: var( --spacing-9, 512px ); margin-bottom: var( --spacing-9, 512px ); } - .mx0-m { margin-left: var( --spacing-0, 0 ); margin-right: var( --spacing-0, 0 ); } - .mx1-m { margin-left: var( --spacing-1, 2px ); margin-right: var( --spacing-1, 2px ); } - .mx2-m { margin-left: var( --spacing-2, 4px ); margin-right: var( --spacing-2, 4px ); } - .mx3-m { margin-left: var( --spacing-3, 8px ); margin-right: var( --spacing-3, 8px ); } - .mx4-m { margin-left: var( --spacing-4, 16px ); margin-right: var( --spacing-4, 16px ); } - .mx5-m { margin-left: var( --spacing-5, 32px ); margin-right: var( --spacing-5, 32px ); } - .mx6-m { margin-left: var( --spacing-6, 64px ); margin-right: var( --spacing-6, 64px ); } - .mx7-m { margin-left: var( --spacing-7, 128px ); margin-right: var( --spacing-7, 128px ); } - .mx8-m { margin-left: var( --spacing-8, 256px ); margin-right: var( --spacing-8, 256px ); } - .mx9-m { margin-left: var( --spacing-9, 512px ); margin-right: var( --spacing-9, 512px ); } -} -@container (min-width:64em) { - .p0-l { padding: var( --spacing-0, 0 ); } - .p1-l { padding: var( --spacing-1, 2px ); } - .p2-l { padding: var( --spacing-2, 4px ); } - .p3-l { padding: var( --spacing-3, 8px ); } - .p4-l { padding: var( --spacing-4, 16px ); } - .p5-l { padding: var( --spacing-5, 32px ); } - .p6-l { padding: var( --spacing-6, 64px ); } - .p7-l { padding: var( --spacing-7, 128px ); } - .p8-l { padding: var( --spacing-8, 256px ); } - .p9-l { padding: var( --spacing-9, 512px ); } - .pl0-l { padding-left: var( --spacing-0, 0 ); } - .pl1-l { padding-left: var( --spacing-1, 2px ); } - .pl2-l { padding-left: var( --spacing-2, 4px ); } - .pl3-l { padding-left: var( --spacing-3, 8px ); } - .pl4-l { padding-left: var( --spacing-4, 16px ); } - .pl5-l { padding-left: var( --spacing-5, 32px ); } - .pl6-l { padding-left: var( --spacing-6, 64px ); } - .pl7-l { padding-left: var( --spacing-7, 128px ); } - .pl8-l { padding-left: var( --spacing-8, 256px ); } - .pl9-l { padding-left: var( --spacing-9, 512px ); } - .pr0-l { padding-right: var( --spacing-0, 0 ); } - .pr1-l { padding-right: var( --spacing-1, 2px ); } - .pr2-l { padding-right: var( --spacing-2, 4px ); } - .pr3-l { padding-right: var( --spacing-3, 8px ); } - .pr4-l { padding-right: var( --spacing-4, 16px ); } - .pr5-l { padding-right: var( --spacing-5, 32px ); } - .pr6-l { padding-right: var( --spacing-6, 64px ); } - .pr7-l { padding-right: var( --spacing-7, 128px ); } - .pr8-l { padding-right: var( --spacing-8, 256px ); } - .pr9-l { padding-right: var( --spacing-9, 512px ); } - .pb0-l { padding-bottom: var( --spacing-0, 0 ); } - .pb1-l { padding-bottom: var( --spacing-1, 2px ); } - .pb2-l { padding-bottom: var( --spacing-2, 4px ); } - .pb3-l { padding-bottom: var( --spacing-3, 8px ); } - .pb4-l { padding-bottom: var( --spacing-4, 16px ); } - .pb5-l { padding-bottom: var( --spacing-5, 32px ); } - .pb6-l { padding-bottom: var( --spacing-6, 64px ); } - .pb7-l { padding-bottom: var( --spacing-7, 128px ); } - .pb8-l { padding-bottom: var( --spacing-8, 256px ); } - .pb9-l { padding-bottom: var( --spacing-9, 512px ); } - .pt0-l { padding-top: var( --spacing-0, 0 ); } - .pt1-l { padding-top: var( --spacing-1, 2px ); } - .pt2-l { padding-top: var( --spacing-2, 4px ); } - .pt3-l { padding-top: var( --spacing-3, 8px ); } - .pt4-l { padding-top: var( --spacing-4, 16px ); } - .pt5-l { padding-top: var( --spacing-5, 32px ); } - .pt6-l { padding-top: var( --spacing-6, 64px ); } - .pt7-l { padding-top: var( --spacing-7, 128px ); } - .pt8-l { padding-top: var( --spacing-8, 256px ); } - .pt9-l { padding-top: var( --spacing-9, 512px ); } - .py0-l { padding-top: var( --spacing-0, 0 ); padding-bottom: var( --spacing-0, 0 ); } - .py1-l { padding-top: var( --spacing-1, 2px ); padding-bottom: var( --spacing-1, 2px ); } - .py2-l { padding-top: var( --spacing-2, 4px ); padding-bottom: var( --spacing-2, 4px ); } - .py3-l { padding-top: var( --spacing-3, 8px ); padding-bottom: var( --spacing-3, 8px ); } - .py4-l { padding-top: var( --spacing-4, 16px ); padding-bottom: var( --spacing-4, 16px ); } - .py5-l { padding-top: var( --spacing-5, 32px ); padding-bottom: var( --spacing-5, 32px ); } - .py6-l { padding-top: var( --spacing-6, 64px ); padding-bottom: var( --spacing-6, 64px ); } - .py7-l { padding-top: var( --spacing-7, 128px ); padding-bottom: var( --spacing-7, 128px ); } - .py8-l { padding-top: var( --spacing-8, 256px ); padding-bottom: var( --spacing-8, 256px ); } - .py9-l { padding-top: var( --spacing-9, 512px ); padding-bottom: var( --spacing-9, 512px ); } - .px0-l { padding-left: var( --spacing-0, 0 ); padding-right: var( --spacing-0, 0 ); } - .px1-l { padding-left: var( --spacing-1, 2px ); padding-right: var( --spacing-1, 2px ); } - .px2-l { padding-left: var( --spacing-2, 4px ); padding-right: var( --spacing-2, 4px ); } - .px3-l { padding-left: var( --spacing-3, 8px ); padding-right: var( --spacing-3, 8px ); } - .px4-l { padding-left: var( --spacing-4, 16px ); padding-right: var( --spacing-4, 16px ); } - .px5-l { padding-left: var( --spacing-5, 32px ); padding-right: var( --spacing-5, 32px ); } - .px6-l { padding-left: var( --spacing-6, 64px ); padding-right: var( --spacing-6, 64px ); } - .px7-l { padding-left: var( --spacing-7, 128px ); padding-right: var( --spacing-7, 128px ); } - .px8-l { padding-left: var( --spacing-8, 256px ); padding-right: var( --spacing-8, 256px ); } - .px9-l { padding-left: var( --spacing-9, 512px ); padding-right: var( --spacing-9, 512px ); } - .m0-l { margin: var( --spacing-0, 0 ); } - .m1-l { margin: var( --spacing-1, 2px ); } - .m2-l { margin: var( --spacing-2, 4px ); } - .m3-l { margin: var( --spacing-3, 8px ); } - .m4-l { margin: var( --spacing-4, 16px ); } - .m5-l { margin: var( --spacing-5, 32px ); } - .m6-l { margin: var( --spacing-6, 64px ); } - .m7-l { margin: var( --spacing-7, 128px ); } - .m8-l { margin: var( --spacing-8, 256px ); } - .m9-l { margin: var( --spacing-9, 512px ); } - .ml0-l { margin-left: var( --spacing-0, 0 ); } - .ml1-l { margin-left: var( --spacing-3, 2px ); } - .ml2-l { margin-left: var( --spacing-2, 4px ); } - .ml3-l { margin-left: var( --spacing-3, 8px ); } - .ml4-l { margin-left: var( --spacing-4, 16px ); } - .ml5-l { margin-left: var( --spacing-5, 32px ); } - .ml6-l { margin-left: var( --spacing-6, 64px ); } - .ml7-l { margin-left: var( --spacing-7, 128px ); } - .ml8-l { margin-left: var( --spacing-8, 256px ); } - .ml9-l { margin-left: var( --spacing-9, 512px ); } - .mr0-l { margin-right: var( --spacing-0, 0 ); } - .mr1-l { margin-right: var( --spacing-1, 2px ); } - .mr2-l { margin-right: var( --spacing-2, 4px ); } - .mr3-l { margin-right: var( --spacing-3, 8px ); } - .mr4-l { margin-right: var( --spacing-4, 16px ); } - .mr5-l { margin-right: var( --spacing-5, 32px ); } - .mr6-l { margin-right: var( --spacing-6, 64px ); } - .mr7-l { margin-right: var( --spacing-7, 128px ); } - .mr8-l { margin-right: var( --spacing-8, 256px ); } - .mr9-l { margin-right: var( --spacing-9, 512px ); } - .mb0-l { margin-bottom: var( --spacing-0, 0 ); } - .mb1-l { margin-bottom: var( --spacing-1, 2px ); } - .mb2-l { margin-bottom: var( --spacing-2, 4px ); } - .mb3-l { margin-bottom: var( --spacing-3, 8px ); } - .mb4-l { margin-bottom: var( --spacing-4, 16px ); } - .mb5-l { margin-bottom: var( --spacing-5, 32px ); } - .mb6-l { margin-bottom: var( --spacing-6, 64px ); } - .mb7-l { margin-bottom: var( --spacing-7, 128px ); } - .mb8-l { margin-bottom: var( --spacing-8, 256px ); } - .mb9-l { margin-bottom: var( --spacing-9, 512px ); } - .mt0-l { margin-top: var( --spacing-0, 0 ); } - .mt1-l { margin-top: var( --spacing-1, 2px ); } - .mt2-l { margin-top: var( --spacing-2, 4px ); } - .mt3-l { margin-top: var( --spacing-3, 8px ); } - .mt4-l { margin-top: var( --spacing-4, 16px ); } - .mt5-l { margin-top: var( --spacing-5, 32px ); } - .mt6-l { margin-top: var( --spacing-6, 64px ); } - .mt7-l { margin-top: var( --spacing-7, 128px ); } - .mt8-l { margin-top: var( --spacing-8, 256px ); } - .mt9-l { margin-top: var( --spacing-9, 512px ); } - .my0-l { margin-top: var( --spacing-0, 0 ); margin-bottom: var( --spacing-0, 0 ); } - .my1-l { margin-top: var( --spacing-1, 2px ); margin-bottom: var( --spacing-1, 2px ); } - .my2-l { margin-top: var( --spacing-2, 4px ); margin-bottom: var( --spacing-2, 4px ); } - .my3-l { margin-top: var( --spacing-3, 8px ); margin-bottom: var( --spacing-3, 8px ); } - .my4-l { margin-top: var( --spacing-4, 16px ); margin-bottom: var( --spacing-4, 16px ); } - .my5-l { margin-top: var( --spacing-5, 32px ); margin-bottom: var( --spacing-5, 32px ); } - .my6-l { margin-top: var( --spacing-6, 64px ); margin-bottom: var( --spacing-6, 64px ); } - .my7-l { margin-top: var( --spacing-7, 128px ); margin-bottom: var( --spacing-7, 128px ); } - .my8-l { margin-top: var( --spacing-8, 256px ); margin-bottom: var( --spacing-8, 256px ); } - .my9-l { margin-top: var( --spacing-9, 512px ); margin-bottom: var( --spacing-9, 512px ); } - .mx0-l { margin-left: var( --spacing-0, 0 ); margin-right: var( --spacing-0, 0 ); } - .mx1-l { margin-left: var( --spacing-1, 2px ); margin-right: var( --spacing-1, 2px ); } - .mx2-l { margin-left: var( --spacing-2, 4px ); margin-right: var( --spacing-2, 4px ); } - .mx3-l { margin-left: var( --spacing-3, 8px ); margin-right: var( --spacing-3, 8px ); } - .mx4-l { margin-left: var( --spacing-4, 16px ); margin-right: var( --spacing-4, 16px ); } - .mx5-l { margin-left: var( --spacing-5, 32px ); margin-right: var( --spacing-5, 32px ); } - .mx6-l { margin-left: var( --spacing-6, 64px ); margin-right: var( --spacing-6, 64px ); } - .mx7-l { margin-left: var( --spacing-7, 128px ); margin-right: var( --spacing-7, 128px ); } - .mx8-l { margin-left: var( --spacing-8, 256px ); margin-right: var( --spacing-8, 256px ); } - .mx9-l { margin-left: var( --spacing-9, 512px ); margin-right: var( --spacing-9, 512px ); } -} -/* - NEGATIVE MARGINS - - Base: - n = negative - - Modifiers: - a = all - t = top - r = right - b = bottom - l = left - - 1 = 1st step in spacing scale - 2 = 2nd step in spacing scale - 3 = 3rd step in spacing scale - 4 = 4th step in spacing scale - 5 = 5th step in spacing scale - 6 = 6th step in spacing scale - 7 = 7th step in spacing scale - - Media Query Extensions: - -s = small - -m = medium - -l = large - -*/ -.na1 { margin: calc( -1 * var( --spacing-1 ) ); } -.na2 { margin: calc( -1 * var( --spacing-2 ) ); } -.na3 { margin: calc( -1 * var( --spacing-3 ) ); } -.na4 { margin: calc( -1 * var( --spacing-4 ) ); } -.na5 { margin: calc( -1 * var( --spacing-5 ) ); } -.na6 { margin: calc( -1 * var( --spacing-6 ) ); } -.na7 { margin: calc( -1 * var( --spacing-7 ) ); } -.nl1 { margin-left: calc( -1 * var( --spacing-1 ) ); } -.nl2 { margin-left: calc( -1 * var( --spacing-2 ) ); } -.nl3 { margin-left: calc( -1 * var( --spacing-3 ) ); } -.nl4 { margin-left: calc( -1 * var( --spacing-4 ) ); } -.nl5 { margin-left: calc( -1 * var( --spacing-5 ) ); } -.nl6 { margin-left: calc( -1 * var( --spacing-6 ) ); } -.nl7 { margin-left: calc( -1 * var( --spacing-7 ) ); } -.nr1 { margin-right: calc( -1 * var( --spacing-1 ) ); } -.nr2 { margin-right: calc( -1 * var( --spacing-2 ) ); } -.nr3 { margin-right: calc( -1 * var( --spacing-3 ) ); } -.nr4 { margin-right: calc( -1 * var( --spacing-4 ) ); } -.nr5 { margin-right: calc( -1 * var( --spacing-5 ) ); } -.nr6 { margin-right: calc( -1 * var( --spacing-6 ) ); } -.nr7 { margin-right: calc( -1 * var( --spacing-7 ) ); } -.nb1 { margin-bottom: calc( -1 * var( --spacing-1 ) ); } -.nb2 { margin-bottom: calc( -1 * var( --spacing-2 ) ); } -.nb3 { margin-bottom: calc( -1 * var( --spacing-3 ) ); } -.nb4 { margin-bottom: calc( -1 * var( --spacing-4 ) ); } -.nb5 { margin-bottom: calc( -1 * var( --spacing-5 ) ); } -.nb6 { margin-bottom: calc( -1 * var( --spacing-6 ) ); } -.nb7 { margin-bottom: calc( -1 * var( --spacing-7 ) ); } -.nt1 { margin-top: calc( -1 * var( --spacing-1 ) ); } -.nt2 { margin-top: calc( -1 * var( --spacing-2 ) ); } -.nt3 { margin-top: calc( -1 * var( --spacing-3 ) ); } -.nt4 { margin-top: calc( -1 * var( --spacing-4 ) ); } -.nt5 { margin-top: calc( -1 * var( --spacing-5 ) ); } -.nt6 { margin-top: calc( -1 * var( --spacing-6 ) ); } -.nt7 { margin-top: calc( -1 * var( --spacing-7 ) ); } -@container (--breakpoint-2) { - .na1-s { margin: calc( -1 * var( --spacing-1 ) ); } - .na2-s { margin: calc( -1 * var( --spacing-2 ) ); } - .na3-s { margin: calc( -1 * var( --spacing-3 ) ); } - .na4-s { margin: calc( -1 * var( --spacing-4 ) ); } - .na5-s { margin: calc( -1 * var( --spacing-5 ) ); } - .na6-s { margin: calc( -1 * var( --spacing-6 ) ); } - .na7-s { margin: calc( -1 * var( --spacing-7 ) ); } - .nl1-s { margin-left: calc( -1 * var( --spacing-1 ) ); } - .nl2-s { margin-left: calc( -1 * var( --spacing-2 ) ); } - .nl3-s { margin-left: calc( -1 * var( --spacing-3 ) ); } - .nl4-s { margin-left: calc( -1 * var( --spacing-4 ) ); } - .nl5-s { margin-left: calc( -1 * var( --spacing-5 ) ); } - .nl6-s { margin-left: calc( -1 * var( --spacing-6 ) ); } - .nl7-s { margin-left: calc( -1 * var( --spacing-7 ) ); } - .nr1-s { margin-right: calc( -1 * var( --spacing-1 ) ); } - .nr2-s { margin-right: calc( -1 * var( --spacing-2 ) ); } - .nr3-s { margin-right: calc( -1 * var( --spacing-3 ) ); } - .nr4-s { margin-right: calc( -1 * var( --spacing-4 ) ); } - .nr5-s { margin-right: calc( -1 * var( --spacing-5 ) ); } - .nr6-s { margin-right: calc( -1 * var( --spacing-6 ) ); } - .nr7-s { margin-right: calc( -1 * var( --spacing-7 ) ); } - .nb1-s { margin-bottom: calc( -1 * var( --spacing-1 ) ); } - .nb2-s { margin-bottom: calc( -1 * var( --spacing-2 ) ); } - .nb3-s { margin-bottom: calc( -1 * var( --spacing-3 ) ); } - .nb4-s { margin-bottom: calc( -1 * var( --spacing-4 ) ); } - .nb5-s { margin-bottom: calc( -1 * var( --spacing-5 ) ); } - .nb6-s { margin-bottom: calc( -1 * var( --spacing-6 ) ); } - .nb7-s { margin-bottom: calc( -1 * var( --spacing-7 ) ); } - .nt1-s { margin-top: calc( -1 * var( --spacing-1 ) ); } - .nt2-s { margin-top: calc( -1 * var( --spacing-2 ) ); } - .nt3-s { margin-top: calc( -1 * var( --spacing-3 ) ); } - .nt4-s { margin-top: calc( -1 * var( --spacing-4 ) ); } - .nt5-s { margin-top: calc( -1 * var( --spacing-5 ) ); } - .nt6-s { margin-top: calc( -1 * var( --spacing-6 ) ); } - .nt7-s { margin-top: calc( -1 * var( --spacing-7 ) ); } -} -@container (--breakpoint-3) { - .na1-m { margin: calc( -1 * var( --spacing-1 ) ); } - .na2-m { margin: calc( -1 * var( --spacing-2 ) ); } - .na3-m { margin: calc( -1 * var( --spacing-3 ) ); } - .na4-m { margin: calc( -1 * var( --spacing-4 ) ); } - .na5-m { margin: calc( -1 * var( --spacing-5 ) ); } - .na6-m { margin: calc( -1 * var( --spacing-6 ) ); } - .na7-m { margin: calc( -1 * var( --spacing-7 ) ); } - .nl1-m { margin-left: calc( -1 * var( --spacing-1 ) ); } - .nl2-m { margin-left: calc( -1 * var( --spacing-2 ) ); } - .nl3-m { margin-left: calc( -1 * var( --spacing-3 ) ); } - .nl4-m { margin-left: calc( -1 * var( --spacing-4 ) ); } - .nl5-m { margin-left: calc( -1 * var( --spacing-5 ) ); } - .nl6-m { margin-left: calc( -1 * var( --spacing-6 ) ); } - .nl7-m { margin-left: calc( -1 * var( --spacing-7 ) ); } - .nr1-m { margin-right: calc( -1 * var( --spacing-1 ) ); } - .nr2-m { margin-right: calc( -1 * var( --spacing-2 ) ); } - .nr3-m { margin-right: calc( -1 * var( --spacing-3 ) ); } - .nr4-m { margin-right: calc( -1 * var( --spacing-4 ) ); } - .nr5-m { margin-right: calc( -1 * var( --spacing-5 ) ); } - .nr6-m { margin-right: calc( -1 * var( --spacing-6 ) ); } - .nr7-m { margin-right: calc( -1 * var( --spacing-7 ) ); } - .nb1-m { margin-bottom: calc( -1 * var( --spacing-1 ) ); } - .nb2-m { margin-bottom: calc( -1 * var( --spacing-2 ) ); } - .nb3-m { margin-bottom: calc( -1 * var( --spacing-3 ) ); } - .nb4-m { margin-bottom: calc( -1 * var( --spacing-4 ) ); } - .nb5-m { margin-bottom: calc( -1 * var( --spacing-5 ) ); } - .nb6-m { margin-bottom: calc( -1 * var( --spacing-6 ) ); } - .nb7-m { margin-bottom: calc( -1 * var( --spacing-7 ) ); } - .nt1-m { margin-top: calc( -1 * var( --spacing-1 ) ); } - .nt2-m { margin-top: calc( -1 * var( --spacing-2 ) ); } - .nt3-m { margin-top: calc( -1 * var( --spacing-3 ) ); } - .nt4-m { margin-top: calc( -1 * var( --spacing-4 ) ); } - .nt5-m { margin-top: calc( -1 * var( --spacing-5 ) ); } - .nt6-m { margin-top: calc( -1 * var( --spacing-6 ) ); } - .nt7-m { margin-top: calc( -1 * var( --spacing-7 ) ); } -} -@container (min-width:64em) { - .na1-l { margin: calc( -1 * var( --spacing-1 ) ); } - .na2-l { margin: calc( -1 * var( --spacing-2 ) ); } - .na3-l { margin: calc( -1 * var( --spacing-3 ) ); } - .na4-l { margin: calc( -1 * var( --spacing-4 ) ); } - .na5-l { margin: calc( -1 * var( --spacing-5 ) ); } - .na6-l { margin: calc( -1 * var( --spacing-6 ) ); } - .na7-l { margin: calc( -1 * var( --spacing-7 ) ); } - .nl1-l { margin-left: calc( -1 * var( --spacing-1 ) ); } - .nl2-l { margin-left: calc( -1 * var( --spacing-2 ) ); } - .nl3-l { margin-left: calc( -1 * var( --spacing-3 ) ); } - .nl4-l { margin-left: calc( -1 * var( --spacing-4 ) ); } - .nl5-l { margin-left: calc( -1 * var( --spacing-5 ) ); } - .nl6-l { margin-left: calc( -1 * var( --spacing-6 ) ); } - .nl7-l { margin-left: calc( -1 * var( --spacing-7 ) ); } - .nr1-l { margin-right: calc( -1 * var( --spacing-1 ) ); } - .nr2-l { margin-right: calc( -1 * var( --spacing-2 ) ); } - .nr3-l { margin-right: calc( -1 * var( --spacing-3 ) ); } - .nr4-l { margin-right: calc( -1 * var( --spacing-4 ) ); } - .nr5-l { margin-right: calc( -1 * var( --spacing-5 ) ); } - .nr6-l { margin-right: calc( -1 * var( --spacing-6 ) ); } - .nr7-l { margin-right: calc( -1 * var( --spacing-7 ) ); } - .nb1-l { margin-bottom: calc( -1 * var( --spacing-1 ) ); } - .nb2-l { margin-bottom: calc( -1 * var( --spacing-2 ) ); } - .nb3-l { margin-bottom: calc( -1 * var( --spacing-3 ) ); } - .nb4-l { margin-bottom: calc( -1 * var( --spacing-4 ) ); } - .nb5-l { margin-bottom: calc( -1 * var( --spacing-5 ) ); } - .nb6-l { margin-bottom: calc( -1 * var( --spacing-6 ) ); } - .nb7-l { margin-bottom: calc( -1 * var( --spacing-7 ) ); } - .nt1-l { margin-top: calc( -1 * var( --spacing-1 ) ); } - .nt2-l { margin-top: calc( -1 * var( --spacing-2 ) ); } - .nt3-l { margin-top: calc( -1 * var( --spacing-3 ) ); } - .nt4-l { margin-top: calc( -1 * var( --spacing-4 ) ); } - .nt5-l { margin-top: calc( -1 * var( --spacing-5 ) ); } - .nt6-l { margin-top: calc( -1 * var( --spacing-6 ) ); } - .nt7-l { margin-top: calc( -1 * var( --spacing-7 ) ); } -} -/* - - TABLES - Docs: http://tachyons.io/docs/elements/tables/ - -*/ -.collapse { border-collapse: collapse; border-spacing: 0; } -.striped--light:nth-child(odd) { background-color: var( --gray-10 ); } -.striped--dark:nth-child(odd) { background-color: var( --gray-0 ); } -/* - - TEXT DECORATION - Docs: http://tachyons.io/docs/typography/text-decoration/ - - - Media Query Extensions: - -s = small - -m = medium - -l = large - -*/ -.strike { text-decoration: line-through; } -.underline { text-decoration: underline; } -.no-underline { text-decoration: none; } -/* + Media query values can be changed to fit your own content. + There are no magic bullets when it comes to media query width values. + They should be declared in em units - and they should be set to meet + the needs of your content. You can also add additional media queries, + or remove some of the existing ones. - TEXT ALIGN - Docs: http://tachyons.io/docs/typography/text-align/ + These media queries can be referenced like so: - Base - t = text-align + @media (--breakpoint-not-small) { + .medium-and-larger-specific-style { + background-color: red; + } + } - Modifiers - l = left - r = right - c = center - j = justify + @media (--breakpoint-medium) { + .medium-screen-specific-style { + background-color: red; + } + } - Media Query Extensions: - -s = small - -m = medium - -l = large + @media (--breakpoint-large) { + .large-and-larger-screen-specific-style { + background-color: red; + } + } */ -.tl { text-align: left; } -.tr { text-align: right; } -.tc { text-align: center; } -.tj { text-align: justify; } -@container (min-width:30em) { - .tl-s { text-align: left; } - .tr-s { text-align: right; } - .tc-s { text-align: center; } - .tj-s { text-align: justify; } -} -@container (min-width:48em) { - .tl-m { text-align: left; } - .tr-m { text-align: right; } - .tc-m { text-align: center; } - .tj-m { text-align: justify; } -} -@container (min-width:64em) { - .tl-l { text-align: left; } - .tr-l { text-align: right; } - .tc-l { text-align: center; } - .tj-l { text-align: justify; } -} +/* Media Queries */ +/* Debugging */ /* - TEXT TRANSFORM - Docs: http://tachyons.io/docs/typography/text-transform/ - - Base: - tt = text-transform - - Modifiers - c = capitalize - l = lowercase - u = uppercase - n = none - - Media Query Extensions: - -s = small - -m = medium - -l = large - -*/ -.ttc { text-transform: capitalize; } -.ttl { text-transform: lowercase; } -.ttu { text-transform: uppercase; } -.ttn { text-transform: none; } -@container (min-width:30em) { - .ttc-s { text-transform: capitalize; } - .ttl-s { text-transform: lowercase; } - .ttu-s { text-transform: uppercase; } - .ttn-s { text-transform: none; } -} -@container (min-width:48em) { - .ttc-m { text-transform: capitalize; } - .ttl-m { text-transform: lowercase; } - .ttu-m { text-transform: uppercase; } - .ttn-m { text-transform: none; } -} -@container (min-width:64em) { - .ttc-l { text-transform: capitalize; } - .ttl-l { text-transform: lowercase; } - .ttu-l { text-transform: uppercase; } - .ttn-l { text-transform: none; } -} -/* - - TYPE SCALE - Docs: http://tachyons.io/docs/type-scale - - Base: - f = font-size + DEBUG CHILDREN + Docs: http://tachyons.io/docs/debug/ - Modifiers - 1 = 1st step in size scale - 2 = 2nd step in size scale - 3 = 3rd step in size scale - 4 = 4th step in size scale - 5 = 5th step in size scale - 6 = 6th step in size scale - 7 = 7th step in size scale - 8 = 8th step in size scale - 9 = 9th step in size scale - 10 = 10th step in size scale - 11 = 11th step in size scale - 12 = 12th step in size scale + Just add the debug class to any element to see outlines on its + children. - Media Query Extensions: - -s = small - -m = medium - -l = large */ -/* Type Scale */ -.f1 { font-size: var( --font-size-1, .75rem ); } -.f2 { font-size: var( --font-size-2, .875rem ); } -.f3 { font-size: var( --font-size-3, 1rem ); } -.f4 { font-size: var( --font-size-4, 1.125rem ); } -.f5 { font-size: var( --font-size-5, 1.25rem ); } -.f6 { font-size: var( --font-size-6, 1.5rem ); } -.f7 { font-size: var( --font-size-7, 2rem ); } -.f8 { font-size: var( --font-size-8, 3rem ); } -.f9 { font-size: var( --font-size-9, 4rem ); } -.f10 { font-size: var( --font-size-10, 6rem ); } -.f11 { font-size: var( --font-size-11, 8rem ); } -.f12 { font-size: var( --font-size-12, 12rem ); } -@container (min-width:30em) { - .f1-s { font-size: var( --font-size-1, .75rem ); } - .f2-s { font-size: var( --font-size-2, .875rem ); } - .f3-s { font-size: var( --font-size-3, 1rem ); } - .f4-s { font-size: var( --font-size-4, 1.125rem ); } - .f5-s { font-size: var( --font-size-5, 1.25rem ); } - .f6-s { font-size: var( --font-size-6, 1.5rem ); } - .f7-s { font-size: var( --font-size-7, 2rem ); } - .f8-s { font-size: var( --font-size-8, 3rem ); } - .f9-s { font-size: var( --font-size-9, 4rem ); } - .f10-s { font-size: var( --font-size-10, 6rem ); } - .f11-s { font-size: var( --font-size-11, 8rem ); } - .f12-s { font-size: var( --font-size-12, 12rem ); } -} -@container (min-width:48em) { - .f1-m { font-size: var( --font-size-1, .75rem ); } - .f2-m { font-size: var( --font-size-2, .875rem ); } - .f3-m { font-size: var( --font-size-3, 1rem ); } - .f4-m { font-size: var( --font-size-4, 1.125rem ); } - .f5-m { font-size: var( --font-size-5, 1.25rem ); } - .f6-m { font-size: var( --font-size-6, 1.5rem ); } - .f7-m { font-size: var( --font-size-7, 2rem ); } - .f8-m { font-size: var( --font-size-8, 3rem ); } - .f9-m { font-size: var( --font-size-9, 4rem ); } - .f10-m { font-size: var( --font-size-10, 6rem ); } - .f11-m { font-size: var( --font-size-11, 8rem ); } - .f12-m { font-size: var( --font-size-12, 12rem ); } -} -@container (min-width:64em) { - .f1-l { font-size: var( --font-size-1, .75rem ); } - .f2-l { font-size: var( --font-size-2, .875rem ); } - .f3-l { font-size: var( --font-size-3, 1rem ); } - .f4-l { font-size: var( --font-size-4, 1.125rem ); } - .f5-l { font-size: var( --font-size-5, 1.25rem ); } - .f6-l { font-size: var( --font-size-6, 1.5rem ); } - .f7-l { font-size: var( --font-size-7, 2rem ); } - .f8-l { font-size: var( --font-size-8, 3rem ); } - .f9-l { font-size: var( --font-size-9, 4rem ); } - .f10-l { font-size: var( --font-size-10, 6rem ); } - .f11-l { font-size: var( --font-size-11, 8rem ); } - .f12-l { font-size: var( --font-size-12, 12rem ); } -} +.debug * { outline: 1px solid gold; } +.debug-white * { outline: 1px solid white; } +.debug-black * { outline: 1px solid black; } /* - TYPOGRAPHY - http://tachyons.io/docs/typography/measure/ + DEBUG GRID + http://tachyons.io/docs/debug-grid/ - Media Query Extensions: - -s = small - -m = medium - -l = large + Can be useful for debugging layout issues + or helping to make sure things line up perfectly. + Just tack one of these classes onto a parent element. */ -/* Measure is limited to 66 characters */ -.measure { max-width: var( --measure, 66ch ); } -/* Measure is limited to ~80 characters */ -.measure-wide { max-width: var( --measure-wide, 80ch ); } -/* Measure is limited to 45 characters */ -.measure-narrow { max-width: var( --measure-narrow, 45ch ); } -/* Book paragraph style - paragraphs are indented with no vertical spacing. */ -.indent { text-indent: 1em; margin-top: 0; margin-bottom: 0; } -.small-caps { font-variant: small-caps; } -/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */ -.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -@container (min-width:30em) { - .measure-s { max-width: var( --measure, 66ch ); } - .measure-wide-s { max-width: var( --measure-wide, 80ch ); } - .measure-narrow-s { max-width: var( --measure-narrow, 45ch ); } - .small-caps-s { font-variant: small-caps; } - .indent-s { text-indent: 1em; margin-top: 0; margin-bottom: 0; } - .truncate-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -} -@container (min-width:48em) { - .measure-m { max-width: var( --measure, 66ch ); } - .measure-wide-m { max-width: var( --measure-wide, 80ch ); } - .measure-narrow-m { max-width: var( --measure-narrow, 45ch ); } - .small-caps-m { font-variant: small-caps; } - .indent-m { text-indent: 1em; margin-top: 0; margin-bottom: 0; } - .truncate-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -} -@container (min-width:64em) { - .measure-l { max-width: var( --measure, 66ch ); } - .measure-wide-l { max-width: var( --measure-wide, 80ch ); } - .measure-narrow-l { max-width: var( --measure-narrow, 45ch ); } - .small-caps-l { font-variant: small-caps; } - .indent-l { text-indent: 1em; margin-top: 0; margin-bottom: 0; } - .truncate-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -} -/* - - UTILITIES - - Media Query Extensions: - -s = small - -m = medium - -l = large - -*/ -.center { margin-right: auto; margin-left: auto; } -.mr-auto { margin-right: auto; } -.ml-auto { margin-left: auto; } -@container (min-width:30em) { - .center-s { margin-right: auto; margin-left: auto; } - .mr-auto-s { margin-right: auto; } - .ml-auto-s { margin-left: auto; } -} -@container (min-width:48em) { +.debug-grid { background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII= ) repeat top left; } +.debug-grid-16 { background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII= ) repeat top left; } +.debug-grid-8-solid { background: white url( data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw== ) repeat top left; } +.debug-grid-16-solid { background: white url( data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7 ) repeat top left; } +/* Uncomment out the line below to help debug layout issues */ +/* @import './_debug'; */ +@media screen and (min-width: 30em) { + .aspect-ratio-ns { height: 0; position: relative; } + .aspect-ratio--16x9-ns { padding-bottom: 56.25%; } + .aspect-ratio--9x16-ns { padding-bottom: 177.77%; } + .aspect-ratio--4x3-ns { padding-bottom: 75%; } + .aspect-ratio--3x4-ns { padding-bottom: 133.33%; } + .aspect-ratio--6x4-ns { padding-bottom: 66.6%; } + .aspect-ratio--4x6-ns { padding-bottom: 150%; } + .aspect-ratio--8x5-ns { padding-bottom: 62.5%; } + .aspect-ratio--5x8-ns { padding-bottom: 160%; } + .aspect-ratio--7x5-ns { padding-bottom: 71.42%; } + .aspect-ratio--5x7-ns { padding-bottom: 140%; } + .aspect-ratio--1x1-ns { padding-bottom: 100%; } + .aspect-ratio--object-ns { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; } + .cover-ns { background-size: cover !important; } + .contain-ns { background-size: contain !important; } + .bg-center-ns { background-repeat: no-repeat; background-position: center center; } + .bg-top-ns { background-repeat: no-repeat; background-position: top center; } + .bg-right-ns { background-repeat: no-repeat; background-position: center right; } + .bg-bottom-ns { background-repeat: no-repeat; background-position: bottom center; } + .bg-left-ns { background-repeat: no-repeat; background-position: center left; } + .outline-ns { outline: 1px solid; } + .outline-transparent-ns { outline: 1px solid transparent; } + .outline-0-ns { outline: 0; } + .ba-ns { border-style: solid; border-width: 1px; } + .bt-ns { border-top-style: solid; border-top-width: 1px; } + .br-ns { border-right-style: solid; border-right-width: 1px; } + .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-ns { border-left-style: solid; border-left-width: 1px; } + .bn-ns { border-style: none; border-width: 0; } + .br0-ns { border-radius: 0; } + .br1-ns { border-radius: .125rem; } + .br2-ns { border-radius: .25rem; } + .br3-ns { border-radius: .5rem; } + .br4-ns { border-radius: 1rem; } + .br-100-ns { border-radius: 100%; } + .br-pill-ns { border-radius: 9999px; } + .br--bottom-ns { border-top-left-radius: 0; border-top-right-radius: 0; } + .br--top-ns { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } + .br--right-ns { border-top-left-radius: 0; border-bottom-left-radius: 0; } + .br--left-ns { border-top-right-radius: 0; border-bottom-right-radius: 0; } + .br-inherit-ns { border-radius: inherit; } + .br-initial-ns { border-radius: initial; } + .br-unset-ns { border-radius: unset; } + .b--dotted-ns { border-style: dotted; } + .b--dashed-ns { border-style: dashed; } + .b--solid-ns { border-style: solid; } + .b--none-ns { border-style: none; } + .bw0-ns { border-width: 0; } + .bw1-ns { border-width: .125rem; } + .bw2-ns { border-width: .25rem; } + .bw3-ns { border-width: .5rem; } + .bw4-ns { border-width: 1rem; } + .bw5-ns { border-width: 2rem; } + .bt-0-ns { border-top-width: 0; } + .br-0-ns { border-right-width: 0; } + .bb-0-ns { border-bottom-width: 0; } + .bl-0-ns { border-left-width: 0; } + .shadow-1-ns { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); } + .shadow-2-ns { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); } + .shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); } + .shadow-4-ns { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); } + .shadow-5-ns { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); } + .top-0-ns { top: 0; } + .left-0-ns { left: 0; } + .right-0-ns { right: 0; } + .bottom-0-ns { bottom: 0; } + .top-1-ns { top: 1rem; } + .left-1-ns { left: 1rem; } + .right-1-ns { right: 1rem; } + .bottom-1-ns { bottom: 1rem; } + .top-2-ns { top: 2rem; } + .left-2-ns { left: 2rem; } + .right-2-ns { right: 2rem; } + .bottom-2-ns { bottom: 2rem; } + .top--1-ns { top: -1rem; } + .right--1-ns { right: -1rem; } + .bottom--1-ns { bottom: -1rem; } + .left--1-ns { left: -1rem; } + .top--2-ns { top: -2rem; } + .right--2-ns { right: -2rem; } + .bottom--2-ns { bottom: -2rem; } + .left--2-ns { left: -2rem; } + .absolute--fill-ns { top: 0; right: 0; bottom: 0; left: 0; } + .cl-ns { clear: left; } + .cr-ns { clear: right; } + .cb-ns { clear: both; } + .cn-ns { clear: none; } + .dn-ns { display: none; } + .di-ns { display: inline; } + .db-ns { display: block; } + .dib-ns { display: inline-block; } + .dit-ns { display: inline-table; } + .dt-ns { display: table; } + .dtc-ns { display: table-cell; } + .dt-row-ns { display: table-row; } + .dt-row-group-ns { display: table-row-group; } + .dt-column-ns { display: table-column; } + .dt-column-group-ns { display: table-column-group; } + .dt--fixed-ns { table-layout: fixed; width: 100%; } + .flex-ns { display: flex; } + .inline-flex-ns { display: inline-flex; } + .flex-auto-ns { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } + .flex-none-ns { flex: none; } + .flex-column-ns { flex-direction: column; } + .flex-row-ns { flex-direction: row; } + .flex-wrap-ns { flex-wrap: wrap; } + .flex-nowrap-ns { flex-wrap: nowrap; } + .flex-wrap-reverse-ns { flex-wrap: wrap-reverse; } + .flex-column-reverse-ns { flex-direction: column-reverse; } + .flex-row-reverse-ns { flex-direction: row-reverse; } + .items-start-ns { align-items: flex-start; } + .items-end-ns { align-items: flex-end; } + .items-center-ns { align-items: center; } + .items-baseline-ns { align-items: baseline; } + .items-stretch-ns { align-items: stretch; } + .self-start-ns { align-self: flex-start; } + .self-end-ns { align-self: flex-end; } + .self-center-ns { align-self: center; } + .self-baseline-ns { align-self: baseline; } + .self-stretch-ns { align-self: stretch; } + .justify-start-ns { justify-content: flex-start; } + .justify-end-ns { justify-content: flex-end; } + .justify-center-ns { justify-content: center; } + .justify-between-ns { justify-content: space-between; } + .justify-around-ns { justify-content: space-around; } + .content-start-ns { align-content: flex-start; } + .content-end-ns { align-content: flex-end; } + .content-center-ns { align-content: center; } + .content-between-ns { align-content: space-between; } + .content-around-ns { align-content: space-around; } + .content-stretch-ns { align-content: stretch; } + .order-0-ns { order: 0; } + .order-1-ns { order: 1; } + .order-2-ns { order: 2; } + .order-3-ns { order: 3; } + .order-4-ns { order: 4; } + .order-5-ns { order: 5; } + .order-6-ns { order: 6; } + .order-7-ns { order: 7; } + .order-8-ns { order: 8; } + .order-last-ns { order: 99999; } + .flex-grow-0-ns { flex-grow: 0; } + .flex-grow-1-ns { flex-grow: 1; } + .flex-shrink-0-ns { flex-shrink: 0; } + .flex-shrink-1-ns { flex-shrink: 1; } + .fl-ns { float: left; _display: inline; } + .fr-ns { float: right; _display: inline; } + .fn-ns { float: none; } + .i-ns { font-style: italic; } + .fs-normal-ns { font-style: normal; } + .normal-ns { font-weight: normal; } + .b-ns { font-weight: bold; } + .fw1-ns { font-weight: 100; } + .fw2-ns { font-weight: 200; } + .fw3-ns { font-weight: 300; } + .fw4-ns { font-weight: 400; } + .fw5-ns { font-weight: 500; } + .fw6-ns { font-weight: 600; } + .fw7-ns { font-weight: 700; } + .fw8-ns { font-weight: 800; } + .fw9-ns { font-weight: 900; } + .h1-ns { height: 1rem; } + .h2-ns { height: 2rem; } + .h3-ns { height: 4rem; } + .h4-ns { height: 8rem; } + .h5-ns { height: 16rem; } + .h-25-ns { height: 25%; } + .h-50-ns { height: 50%; } + .h-75-ns { height: 75%; } + .h-100-ns { height: 100%; } + .min-h-100-ns { min-height: 100%; } + .vh-25-ns { height: 25vh; } + .vh-50-ns { height: 50vh; } + .vh-75-ns { height: 75vh; } + .vh-100-ns { height: 100vh; } + .min-vh-100-ns { min-height: 100vh; } + .h-auto-ns { height: auto; } + .h-inherit-ns { height: inherit; } + .tracked-ns { letter-spacing: .1em; } + .tracked-tight-ns { letter-spacing: -.05em; } + .tracked-mega-ns { letter-spacing: .25em; } + .lh-solid-ns { line-height: 1; } + .lh-title-ns { line-height: 1.25; } + .lh-copy-ns { line-height: 1.5; } + .mw-100-ns { max-width: 100%; } + .mw1-ns { max-width: 1rem; } + .mw2-ns { max-width: 2rem; } + .mw3-ns { max-width: 4rem; } + .mw4-ns { max-width: 8rem; } + .mw5-ns { max-width: 16rem; } + .mw6-ns { max-width: 32rem; } + .mw7-ns { max-width: 48rem; } + .mw8-ns { max-width: 64rem; } + .mw9-ns { max-width: 96rem; } + .mw-none-ns { max-width: none; } + .w1-ns { width: 1rem; } + .w2-ns { width: 2rem; } + .w3-ns { width: 4rem; } + .w4-ns { width: 8rem; } + .w5-ns { width: 16rem; } + .w-10-ns { width: 10%; } + .w-20-ns { width: 20%; } + .w-25-ns { width: 25%; } + .w-30-ns { width: 30%; } + .w-33-ns { width: 33%; } + .w-34-ns { width: 34%; } + .w-40-ns { width: 40%; } + .w-50-ns { width: 50%; } + .w-60-ns { width: 60%; } + .w-70-ns { width: 70%; } + .w-75-ns { width: 75%; } + .w-80-ns { width: 80%; } + .w-90-ns { width: 90%; } + .w-100-ns { width: 100%; } + .w-third-ns { width: 33.33333%; } + .w-two-thirds-ns { width: 66.66667%; } + .w-auto-ns { width: auto; } + .overflow-visible-ns { overflow: visible; } + .overflow-hidden-ns { overflow: hidden; } + .overflow-scroll-ns { overflow: scroll; } + .overflow-auto-ns { overflow: auto; } + .overflow-x-visible-ns { overflow-x: visible; } + .overflow-x-hidden-ns { overflow-x: hidden; } + .overflow-x-scroll-ns { overflow-x: scroll; } + .overflow-x-auto-ns { overflow-x: auto; } + .overflow-y-visible-ns { overflow-y: visible; } + .overflow-y-hidden-ns { overflow-y: hidden; } + .overflow-y-scroll-ns { overflow-y: scroll; } + .overflow-y-auto-ns { overflow-y: auto; } + .static-ns { position: static; } + .relative-ns { position: relative; } + .absolute-ns { position: absolute; } + .fixed-ns { position: fixed; } + .rotate-45-ns { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); } + .rotate-90-ns { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); } + .rotate-135-ns { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); } + .rotate-180-ns { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); } + .rotate-225-ns { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); } + .rotate-270-ns { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); } + .rotate-315-ns { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); } + .pa0-ns { padding: 0; } + .pa1-ns { padding: .25rem; } + .pa2-ns { padding: .5rem; } + .pa3-ns { padding: 1rem; } + .pa4-ns { padding: 2rem; } + .pa5-ns { padding: 4rem; } + .pa6-ns { padding: 8rem; } + .pa7-ns { padding: 16rem; } + .pl0-ns { padding-left: 0; } + .pl1-ns { padding-left: .25rem; } + .pl2-ns { padding-left: .5rem; } + .pl3-ns { padding-left: 1rem; } + .pl4-ns { padding-left: 2rem; } + .pl5-ns { padding-left: 4rem; } + .pl6-ns { padding-left: 8rem; } + .pl7-ns { padding-left: 16rem; } + .pr0-ns { padding-right: 0; } + .pr1-ns { padding-right: .25rem; } + .pr2-ns { padding-right: .5rem; } + .pr3-ns { padding-right: 1rem; } + .pr4-ns { padding-right: 2rem; } + .pr5-ns { padding-right: 4rem; } + .pr6-ns { padding-right: 8rem; } + .pr7-ns { padding-right: 16rem; } + .pb0-ns { padding-bottom: 0; } + .pb1-ns { padding-bottom: .25rem; } + .pb2-ns { padding-bottom: .5rem; } + .pb3-ns { padding-bottom: 1rem; } + .pb4-ns { padding-bottom: 2rem; } + .pb5-ns { padding-bottom: 4rem; } + .pb6-ns { padding-bottom: 8rem; } + .pb7-ns { padding-bottom: 16rem; } + .pt0-ns { padding-top: 0; } + .pt1-ns { padding-top: .25rem; } + .pt2-ns { padding-top: .5rem; } + .pt3-ns { padding-top: 1rem; } + .pt4-ns { padding-top: 2rem; } + .pt5-ns { padding-top: 4rem; } + .pt6-ns { padding-top: 8rem; } + .pt7-ns { padding-top: 16rem; } + .pv0-ns { padding-top: 0; padding-bottom: 0; } + .pv1-ns { padding-top: .25rem; padding-bottom: .25rem; } + .pv2-ns { padding-top: .5rem; padding-bottom: .5rem; } + .pv3-ns { padding-top: 1rem; padding-bottom: 1rem; } + .pv4-ns { padding-top: 2rem; padding-bottom: 2rem; } + .pv5-ns { padding-top: 4rem; padding-bottom: 4rem; } + .pv6-ns { padding-top: 8rem; padding-bottom: 8rem; } + .pv7-ns { padding-top: 16rem; padding-bottom: 16rem; } + .ph0-ns { padding-left: 0; padding-right: 0; } + .ph1-ns { padding-left: .25rem; padding-right: .25rem; } + .ph2-ns { padding-left: .5rem; padding-right: .5rem; } + .ph3-ns { padding-left: 1rem; padding-right: 1rem; } + .ph4-ns { padding-left: 2rem; padding-right: 2rem; } + .ph5-ns { padding-left: 4rem; padding-right: 4rem; } + .ph6-ns { padding-left: 8rem; padding-right: 8rem; } + .ph7-ns { padding-left: 16rem; padding-right: 16rem; } + .ma0-ns { margin: 0; } + .ma1-ns { margin: .25rem; } + .ma2-ns { margin: .5rem; } + .ma3-ns { margin: 1rem; } + .ma4-ns { margin: 2rem; } + .ma5-ns { margin: 4rem; } + .ma6-ns { margin: 8rem; } + .ma7-ns { margin: 16rem; } + .ml0-ns { margin-left: 0; } + .ml1-ns { margin-left: .25rem; } + .ml2-ns { margin-left: .5rem; } + .ml3-ns { margin-left: 1rem; } + .ml4-ns { margin-left: 2rem; } + .ml5-ns { margin-left: 4rem; } + .ml6-ns { margin-left: 8rem; } + .ml7-ns { margin-left: 16rem; } + .mr0-ns { margin-right: 0; } + .mr1-ns { margin-right: .25rem; } + .mr2-ns { margin-right: .5rem; } + .mr3-ns { margin-right: 1rem; } + .mr4-ns { margin-right: 2rem; } + .mr5-ns { margin-right: 4rem; } + .mr6-ns { margin-right: 8rem; } + .mr7-ns { margin-right: 16rem; } + .mb0-ns { margin-bottom: 0; } + .mb1-ns { margin-bottom: .25rem; } + .mb2-ns { margin-bottom: .5rem; } + .mb3-ns { margin-bottom: 1rem; } + .mb4-ns { margin-bottom: 2rem; } + .mb5-ns { margin-bottom: 4rem; } + .mb6-ns { margin-bottom: 8rem; } + .mb7-ns { margin-bottom: 16rem; } + .mt0-ns { margin-top: 0; } + .mt1-ns { margin-top: .25rem; } + .mt2-ns { margin-top: .5rem; } + .mt3-ns { margin-top: 1rem; } + .mt4-ns { margin-top: 2rem; } + .mt5-ns { margin-top: 4rem; } + .mt6-ns { margin-top: 8rem; } + .mt7-ns { margin-top: 16rem; } + .mv0-ns { margin-top: 0; margin-bottom: 0; } + .mv1-ns { margin-top: .25rem; margin-bottom: .25rem; } + .mv2-ns { margin-top: .5rem; margin-bottom: .5rem; } + .mv3-ns { margin-top: 1rem; margin-bottom: 1rem; } + .mv4-ns { margin-top: 2rem; margin-bottom: 2rem; } + .mv5-ns { margin-top: 4rem; margin-bottom: 4rem; } + .mv6-ns { margin-top: 8rem; margin-bottom: 8rem; } + .mv7-ns { margin-top: 16rem; margin-bottom: 16rem; } + .mh0-ns { margin-left: 0; margin-right: 0; } + .mh1-ns { margin-left: .25rem; margin-right: .25rem; } + .mh2-ns { margin-left: .5rem; margin-right: .5rem; } + .mh3-ns { margin-left: 1rem; margin-right: 1rem; } + .mh4-ns { margin-left: 2rem; margin-right: 2rem; } + .mh5-ns { margin-left: 4rem; margin-right: 4rem; } + .mh6-ns { margin-left: 8rem; margin-right: 8rem; } + .mh7-ns { margin-left: 16rem; margin-right: 16rem; } + .na1-ns { margin: -0.25rem; } + .na2-ns { margin: -0.5rem; } + .na3-ns { margin: -1rem; } + .na4-ns { margin: -2rem; } + .na5-ns { margin: -4rem; } + .na6-ns { margin: -8rem; } + .na7-ns { margin: -16rem; } + .nl1-ns { margin-left: -0.25rem; } + .nl2-ns { margin-left: -0.5rem; } + .nl3-ns { margin-left: -1rem; } + .nl4-ns { margin-left: -2rem; } + .nl5-ns { margin-left: -4rem; } + .nl6-ns { margin-left: -8rem; } + .nl7-ns { margin-left: -16rem; } + .nr1-ns { margin-right: -0.25rem; } + .nr2-ns { margin-right: -0.5rem; } + .nr3-ns { margin-right: -1rem; } + .nr4-ns { margin-right: -2rem; } + .nr5-ns { margin-right: -4rem; } + .nr6-ns { margin-right: -8rem; } + .nr7-ns { margin-right: -16rem; } + .nb1-ns { margin-bottom: -0.25rem; } + .nb2-ns { margin-bottom: -0.5rem; } + .nb3-ns { margin-bottom: -1rem; } + .nb4-ns { margin-bottom: -2rem; } + .nb5-ns { margin-bottom: -4rem; } + .nb6-ns { margin-bottom: -8rem; } + .nb7-ns { margin-bottom: -16rem; } + .nt1-ns { margin-top: -0.25rem; } + .nt2-ns { margin-top: -0.5rem; } + .nt3-ns { margin-top: -1rem; } + .nt4-ns { margin-top: -2rem; } + .nt5-ns { margin-top: -4rem; } + .nt6-ns { margin-top: -8rem; } + .nt7-ns { margin-top: -16rem; } + .strike-ns { text-decoration: line-through; } + .underline-ns { text-decoration: underline; } + .no-underline-ns { text-decoration: none; } + .tl-ns { text-align: left; } + .tr-ns { text-align: right; } + .tc-ns { text-align: center; } + .tj-ns { text-align: justify; } + .ttc-ns { text-transform: capitalize; } + .ttl-ns { text-transform: lowercase; } + .ttu-ns { text-transform: uppercase; } + .ttn-ns { text-transform: none; } + .f-6-ns, .f-headline-ns { font-size: 6rem; } + .f-5-ns, .f-subheadline-ns { font-size: 5rem; } + .f1-ns { font-size: 3rem; } + .f2-ns { font-size: 2.25rem; } + .f3-ns { font-size: 1.5rem; } + .f4-ns { font-size: 1.25rem; } + .f5-ns { font-size: 1rem; } + .f6-ns { font-size: .875rem; } + .f7-ns { font-size: .75rem; } + .measure-ns { max-width: 30em; } + .measure-wide-ns { max-width: 34em; } + .measure-narrow-ns { max-width: 20em; } + .indent-ns { text-indent: 1em; margin-top: 0; margin-bottom: 0; } + .small-caps-ns { font-variant: small-caps; } + .truncate-ns { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + .center-ns { margin-right: auto; margin-left: auto; } + .mr-auto-ns { margin-right: auto; } + .ml-auto-ns { margin-left: auto; } + .clip-ns { position: fixed !important; _position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); } + .ws-normal-ns { white-space: normal; } + .nowrap-ns { white-space: nowrap; } + .pre-ns { white-space: pre; } + .v-base-ns { vertical-align: baseline; } + .v-mid-ns { vertical-align: middle; } + .v-top-ns { vertical-align: top; } + .v-btm-ns { vertical-align: bottom; } +} +@media screen and (min-width: 30em) and (max-width: 60em) { + .aspect-ratio-m { height: 0; position: relative; } + .aspect-ratio--16x9-m { padding-bottom: 56.25%; } + .aspect-ratio--9x16-m { padding-bottom: 177.77%; } + .aspect-ratio--4x3-m { padding-bottom: 75%; } + .aspect-ratio--3x4-m { padding-bottom: 133.33%; } + .aspect-ratio--6x4-m { padding-bottom: 66.6%; } + .aspect-ratio--4x6-m { padding-bottom: 150%; } + .aspect-ratio--8x5-m { padding-bottom: 62.5%; } + .aspect-ratio--5x8-m { padding-bottom: 160%; } + .aspect-ratio--7x5-m { padding-bottom: 71.42%; } + .aspect-ratio--5x7-m { padding-bottom: 140%; } + .aspect-ratio--1x1-m { padding-bottom: 100%; } + .aspect-ratio--object-m { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; } + .cover-m { background-size: cover !important; } + .contain-m { background-size: contain !important; } + .bg-center-m { background-repeat: no-repeat; background-position: center center; } + .bg-top-m { background-repeat: no-repeat; background-position: top center; } + .bg-right-m { background-repeat: no-repeat; background-position: center right; } + .bg-bottom-m { background-repeat: no-repeat; background-position: bottom center; } + .bg-left-m { background-repeat: no-repeat; background-position: center left; } + .outline-m { outline: 1px solid; } + .outline-transparent-m { outline: 1px solid transparent; } + .outline-0-m { outline: 0; } + .ba-m { border-style: solid; border-width: 1px; } + .bt-m { border-top-style: solid; border-top-width: 1px; } + .br-m { border-right-style: solid; border-right-width: 1px; } + .bb-m { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-m { border-left-style: solid; border-left-width: 1px; } + .bn-m { border-style: none; border-width: 0; } + .br0-m { border-radius: 0; } + .br1-m { border-radius: .125rem; } + .br2-m { border-radius: .25rem; } + .br3-m { border-radius: .5rem; } + .br4-m { border-radius: 1rem; } + .br-100-m { border-radius: 100%; } + .br-pill-m { border-radius: 9999px; } + .br--bottom-m { border-top-left-radius: 0; border-top-right-radius: 0; } + .br--top-m { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } + .br--right-m { border-top-left-radius: 0; border-bottom-left-radius: 0; } + .br--left-m { border-top-right-radius: 0; border-bottom-right-radius: 0; } + .br-inherit-m { border-radius: inherit; } + .br-initial-m { border-radius: initial; } + .br-unset-m { border-radius: unset; } + .b--dotted-m { border-style: dotted; } + .b--dashed-m { border-style: dashed; } + .b--solid-m { border-style: solid; } + .b--none-m { border-style: none; } + .bw0-m { border-width: 0; } + .bw1-m { border-width: .125rem; } + .bw2-m { border-width: .25rem; } + .bw3-m { border-width: .5rem; } + .bw4-m { border-width: 1rem; } + .bw5-m { border-width: 2rem; } + .bt-0-m { border-top-width: 0; } + .br-0-m { border-right-width: 0; } + .bb-0-m { border-bottom-width: 0; } + .bl-0-m { border-left-width: 0; } + .shadow-1-m { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); } + .shadow-2-m { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); } + .shadow-3-m { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); } + .shadow-4-m { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); } + .shadow-5-m { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); } + .top-0-m { top: 0; } + .left-0-m { left: 0; } + .right-0-m { right: 0; } + .bottom-0-m { bottom: 0; } + .top-1-m { top: 1rem; } + .left-1-m { left: 1rem; } + .right-1-m { right: 1rem; } + .bottom-1-m { bottom: 1rem; } + .top-2-m { top: 2rem; } + .left-2-m { left: 2rem; } + .right-2-m { right: 2rem; } + .bottom-2-m { bottom: 2rem; } + .top--1-m { top: -1rem; } + .right--1-m { right: -1rem; } + .bottom--1-m { bottom: -1rem; } + .left--1-m { left: -1rem; } + .top--2-m { top: -2rem; } + .right--2-m { right: -2rem; } + .bottom--2-m { bottom: -2rem; } + .left--2-m { left: -2rem; } + .absolute--fill-m { top: 0; right: 0; bottom: 0; left: 0; } + .cl-m { clear: left; } + .cr-m { clear: right; } + .cb-m { clear: both; } + .cn-m { clear: none; } + .dn-m { display: none; } + .di-m { display: inline; } + .db-m { display: block; } + .dib-m { display: inline-block; } + .dit-m { display: inline-table; } + .dt-m { display: table; } + .dtc-m { display: table-cell; } + .dt-row-m { display: table-row; } + .dt-row-group-m { display: table-row-group; } + .dt-column-m { display: table-column; } + .dt-column-group-m { display: table-column-group; } + .dt--fixed-m { table-layout: fixed; width: 100%; } + .flex-m { display: flex; } + .inline-flex-m { display: inline-flex; } + .flex-auto-m { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } + .flex-none-m { flex: none; } + .flex-column-m { flex-direction: column; } + .flex-row-m { flex-direction: row; } + .flex-wrap-m { flex-wrap: wrap; } + .flex-nowrap-m { flex-wrap: nowrap; } + .flex-wrap-reverse-m { flex-wrap: wrap-reverse; } + .flex-column-reverse-m { flex-direction: column-reverse; } + .flex-row-reverse-m { flex-direction: row-reverse; } + .items-start-m { align-items: flex-start; } + .items-end-m { align-items: flex-end; } + .items-center-m { align-items: center; } + .items-baseline-m { align-items: baseline; } + .items-stretch-m { align-items: stretch; } + .self-start-m { align-self: flex-start; } + .self-end-m { align-self: flex-end; } + .self-center-m { align-self: center; } + .self-baseline-m { align-self: baseline; } + .self-stretch-m { align-self: stretch; } + .justify-start-m { justify-content: flex-start; } + .justify-end-m { justify-content: flex-end; } + .justify-center-m { justify-content: center; } + .justify-between-m { justify-content: space-between; } + .justify-around-m { justify-content: space-around; } + .content-start-m { align-content: flex-start; } + .content-end-m { align-content: flex-end; } + .content-center-m { align-content: center; } + .content-between-m { align-content: space-between; } + .content-around-m { align-content: space-around; } + .content-stretch-m { align-content: stretch; } + .order-0-m { order: 0; } + .order-1-m { order: 1; } + .order-2-m { order: 2; } + .order-3-m { order: 3; } + .order-4-m { order: 4; } + .order-5-m { order: 5; } + .order-6-m { order: 6; } + .order-7-m { order: 7; } + .order-8-m { order: 8; } + .order-last-m { order: 99999; } + .flex-grow-0-m { flex-grow: 0; } + .flex-grow-1-m { flex-grow: 1; } + .flex-shrink-0-m { flex-shrink: 0; } + .flex-shrink-1-m { flex-shrink: 1; } + .fl-m { float: left; _display: inline; } + .fr-m { float: right; _display: inline; } + .fn-m { float: none; } + .i-m { font-style: italic; } + .fs-normal-m { font-style: normal; } + .normal-m { font-weight: normal; } + .b-m { font-weight: bold; } + .fw1-m { font-weight: 100; } + .fw2-m { font-weight: 200; } + .fw3-m { font-weight: 300; } + .fw4-m { font-weight: 400; } + .fw5-m { font-weight: 500; } + .fw6-m { font-weight: 600; } + .fw7-m { font-weight: 700; } + .fw8-m { font-weight: 800; } + .fw9-m { font-weight: 900; } + .h1-m { height: 1rem; } + .h2-m { height: 2rem; } + .h3-m { height: 4rem; } + .h4-m { height: 8rem; } + .h5-m { height: 16rem; } + .h-25-m { height: 25%; } + .h-50-m { height: 50%; } + .h-75-m { height: 75%; } + .h-100-m { height: 100%; } + .min-h-100-m { min-height: 100%; } + .vh-25-m { height: 25vh; } + .vh-50-m { height: 50vh; } + .vh-75-m { height: 75vh; } + .vh-100-m { height: 100vh; } + .min-vh-100-m { min-height: 100vh; } + .h-auto-m { height: auto; } + .h-inherit-m { height: inherit; } + .tracked-m { letter-spacing: .1em; } + .tracked-tight-m { letter-spacing: -.05em; } + .tracked-mega-m { letter-spacing: .25em; } + .lh-solid-m { line-height: 1; } + .lh-title-m { line-height: 1.25; } + .lh-copy-m { line-height: 1.5; } + .mw-100-m { max-width: 100%; } + .mw1-m { max-width: 1rem; } + .mw2-m { max-width: 2rem; } + .mw3-m { max-width: 4rem; } + .mw4-m { max-width: 8rem; } + .mw5-m { max-width: 16rem; } + .mw6-m { max-width: 32rem; } + .mw7-m { max-width: 48rem; } + .mw8-m { max-width: 64rem; } + .mw9-m { max-width: 96rem; } + .mw-none-m { max-width: none; } + .w1-m { width: 1rem; } + .w2-m { width: 2rem; } + .w3-m { width: 4rem; } + .w4-m { width: 8rem; } + .w5-m { width: 16rem; } + .w-10-m { width: 10%; } + .w-20-m { width: 20%; } + .w-25-m { width: 25%; } + .w-30-m { width: 30%; } + .w-33-m { width: 33%; } + .w-34-m { width: 34%; } + .w-40-m { width: 40%; } + .w-50-m { width: 50%; } + .w-60-m { width: 60%; } + .w-70-m { width: 70%; } + .w-75-m { width: 75%; } + .w-80-m { width: 80%; } + .w-90-m { width: 90%; } + .w-100-m { width: 100%; } + .w-third-m { width: 33.33333%; } + .w-two-thirds-m { width: 66.66667%; } + .w-auto-m { width: auto; } + .overflow-visible-m { overflow: visible; } + .overflow-hidden-m { overflow: hidden; } + .overflow-scroll-m { overflow: scroll; } + .overflow-auto-m { overflow: auto; } + .overflow-x-visible-m { overflow-x: visible; } + .overflow-x-hidden-m { overflow-x: hidden; } + .overflow-x-scroll-m { overflow-x: scroll; } + .overflow-x-auto-m { overflow-x: auto; } + .overflow-y-visible-m { overflow-y: visible; } + .overflow-y-hidden-m { overflow-y: hidden; } + .overflow-y-scroll-m { overflow-y: scroll; } + .overflow-y-auto-m { overflow-y: auto; } + .static-m { position: static; } + .relative-m { position: relative; } + .absolute-m { position: absolute; } + .fixed-m { position: fixed; } + .rotate-45-m { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); } + .rotate-90-m { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); } + .rotate-135-m { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); } + .rotate-180-m { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); } + .rotate-225-m { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); } + .rotate-270-m { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); } + .rotate-315-m { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); } + .pa0-m { padding: 0; } + .pa1-m { padding: .25rem; } + .pa2-m { padding: .5rem; } + .pa3-m { padding: 1rem; } + .pa4-m { padding: 2rem; } + .pa5-m { padding: 4rem; } + .pa6-m { padding: 8rem; } + .pa7-m { padding: 16rem; } + .pl0-m { padding-left: 0; } + .pl1-m { padding-left: .25rem; } + .pl2-m { padding-left: .5rem; } + .pl3-m { padding-left: 1rem; } + .pl4-m { padding-left: 2rem; } + .pl5-m { padding-left: 4rem; } + .pl6-m { padding-left: 8rem; } + .pl7-m { padding-left: 16rem; } + .pr0-m { padding-right: 0; } + .pr1-m { padding-right: .25rem; } + .pr2-m { padding-right: .5rem; } + .pr3-m { padding-right: 1rem; } + .pr4-m { padding-right: 2rem; } + .pr5-m { padding-right: 4rem; } + .pr6-m { padding-right: 8rem; } + .pr7-m { padding-right: 16rem; } + .pb0-m { padding-bottom: 0; } + .pb1-m { padding-bottom: .25rem; } + .pb2-m { padding-bottom: .5rem; } + .pb3-m { padding-bottom: 1rem; } + .pb4-m { padding-bottom: 2rem; } + .pb5-m { padding-bottom: 4rem; } + .pb6-m { padding-bottom: 8rem; } + .pb7-m { padding-bottom: 16rem; } + .pt0-m { padding-top: 0; } + .pt1-m { padding-top: .25rem; } + .pt2-m { padding-top: .5rem; } + .pt3-m { padding-top: 1rem; } + .pt4-m { padding-top: 2rem; } + .pt5-m { padding-top: 4rem; } + .pt6-m { padding-top: 8rem; } + .pt7-m { padding-top: 16rem; } + .pv0-m { padding-top: 0; padding-bottom: 0; } + .pv1-m { padding-top: .25rem; padding-bottom: .25rem; } + .pv2-m { padding-top: .5rem; padding-bottom: .5rem; } + .pv3-m { padding-top: 1rem; padding-bottom: 1rem; } + .pv4-m { padding-top: 2rem; padding-bottom: 2rem; } + .pv5-m { padding-top: 4rem; padding-bottom: 4rem; } + .pv6-m { padding-top: 8rem; padding-bottom: 8rem; } + .pv7-m { padding-top: 16rem; padding-bottom: 16rem; } + .ph0-m { padding-left: 0; padding-right: 0; } + .ph1-m { padding-left: .25rem; padding-right: .25rem; } + .ph2-m { padding-left: .5rem; padding-right: .5rem; } + .ph3-m { padding-left: 1rem; padding-right: 1rem; } + .ph4-m { padding-left: 2rem; padding-right: 2rem; } + .ph5-m { padding-left: 4rem; padding-right: 4rem; } + .ph6-m { padding-left: 8rem; padding-right: 8rem; } + .ph7-m { padding-left: 16rem; padding-right: 16rem; } + .ma0-m { margin: 0; } + .ma1-m { margin: .25rem; } + .ma2-m { margin: .5rem; } + .ma3-m { margin: 1rem; } + .ma4-m { margin: 2rem; } + .ma5-m { margin: 4rem; } + .ma6-m { margin: 8rem; } + .ma7-m { margin: 16rem; } + .ml0-m { margin-left: 0; } + .ml1-m { margin-left: .25rem; } + .ml2-m { margin-left: .5rem; } + .ml3-m { margin-left: 1rem; } + .ml4-m { margin-left: 2rem; } + .ml5-m { margin-left: 4rem; } + .ml6-m { margin-left: 8rem; } + .ml7-m { margin-left: 16rem; } + .mr0-m { margin-right: 0; } + .mr1-m { margin-right: .25rem; } + .mr2-m { margin-right: .5rem; } + .mr3-m { margin-right: 1rem; } + .mr4-m { margin-right: 2rem; } + .mr5-m { margin-right: 4rem; } + .mr6-m { margin-right: 8rem; } + .mr7-m { margin-right: 16rem; } + .mb0-m { margin-bottom: 0; } + .mb1-m { margin-bottom: .25rem; } + .mb2-m { margin-bottom: .5rem; } + .mb3-m { margin-bottom: 1rem; } + .mb4-m { margin-bottom: 2rem; } + .mb5-m { margin-bottom: 4rem; } + .mb6-m { margin-bottom: 8rem; } + .mb7-m { margin-bottom: 16rem; } + .mt0-m { margin-top: 0; } + .mt1-m { margin-top: .25rem; } + .mt2-m { margin-top: .5rem; } + .mt3-m { margin-top: 1rem; } + .mt4-m { margin-top: 2rem; } + .mt5-m { margin-top: 4rem; } + .mt6-m { margin-top: 8rem; } + .mt7-m { margin-top: 16rem; } + .mv0-m { margin-top: 0; margin-bottom: 0; } + .mv1-m { margin-top: .25rem; margin-bottom: .25rem; } + .mv2-m { margin-top: .5rem; margin-bottom: .5rem; } + .mv3-m { margin-top: 1rem; margin-bottom: 1rem; } + .mv4-m { margin-top: 2rem; margin-bottom: 2rem; } + .mv5-m { margin-top: 4rem; margin-bottom: 4rem; } + .mv6-m { margin-top: 8rem; margin-bottom: 8rem; } + .mv7-m { margin-top: 16rem; margin-bottom: 16rem; } + .mh0-m { margin-left: 0; margin-right: 0; } + .mh1-m { margin-left: .25rem; margin-right: .25rem; } + .mh2-m { margin-left: .5rem; margin-right: .5rem; } + .mh3-m { margin-left: 1rem; margin-right: 1rem; } + .mh4-m { margin-left: 2rem; margin-right: 2rem; } + .mh5-m { margin-left: 4rem; margin-right: 4rem; } + .mh6-m { margin-left: 8rem; margin-right: 8rem; } + .mh7-m { margin-left: 16rem; margin-right: 16rem; } + .na1-m { margin: -0.25rem; } + .na2-m { margin: -0.5rem; } + .na3-m { margin: -1rem; } + .na4-m { margin: -2rem; } + .na5-m { margin: -4rem; } + .na6-m { margin: -8rem; } + .na7-m { margin: -16rem; } + .nl1-m { margin-left: -0.25rem; } + .nl2-m { margin-left: -0.5rem; } + .nl3-m { margin-left: -1rem; } + .nl4-m { margin-left: -2rem; } + .nl5-m { margin-left: -4rem; } + .nl6-m { margin-left: -8rem; } + .nl7-m { margin-left: -16rem; } + .nr1-m { margin-right: -0.25rem; } + .nr2-m { margin-right: -0.5rem; } + .nr3-m { margin-right: -1rem; } + .nr4-m { margin-right: -2rem; } + .nr5-m { margin-right: -4rem; } + .nr6-m { margin-right: -8rem; } + .nr7-m { margin-right: -16rem; } + .nb1-m { margin-bottom: -0.25rem; } + .nb2-m { margin-bottom: -0.5rem; } + .nb3-m { margin-bottom: -1rem; } + .nb4-m { margin-bottom: -2rem; } + .nb5-m { margin-bottom: -4rem; } + .nb6-m { margin-bottom: -8rem; } + .nb7-m { margin-bottom: -16rem; } + .nt1-m { margin-top: -0.25rem; } + .nt2-m { margin-top: -0.5rem; } + .nt3-m { margin-top: -1rem; } + .nt4-m { margin-top: -2rem; } + .nt5-m { margin-top: -4rem; } + .nt6-m { margin-top: -8rem; } + .nt7-m { margin-top: -16rem; } + .strike-m { text-decoration: line-through; } + .underline-m { text-decoration: underline; } + .no-underline-m { text-decoration: none; } + .tl-m { text-align: left; } + .tr-m { text-align: right; } + .tc-m { text-align: center; } + .tj-m { text-align: justify; } + .ttc-m { text-transform: capitalize; } + .ttl-m { text-transform: lowercase; } + .ttu-m { text-transform: uppercase; } + .ttn-m { text-transform: none; } + .f-6-m, .f-headline-m { font-size: 6rem; } + .f-5-m, .f-subheadline-m { font-size: 5rem; } + .f1-m { font-size: 3rem; } + .f2-m { font-size: 2.25rem; } + .f3-m { font-size: 1.5rem; } + .f4-m { font-size: 1.25rem; } + .f5-m { font-size: 1rem; } + .f6-m { font-size: .875rem; } + .f7-m { font-size: .75rem; } + .measure-m { max-width: 30em; } + .measure-wide-m { max-width: 34em; } + .measure-narrow-m { max-width: 20em; } + .indent-m { text-indent: 1em; margin-top: 0; margin-bottom: 0; } + .small-caps-m { font-variant: small-caps; } + .truncate-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-m { margin-right: auto; margin-left: auto; } .mr-auto-m { margin-right: auto; } .ml-auto-m { margin-left: auto; } + .clip-m { position: fixed !important; _position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); } + .ws-normal-m { white-space: normal; } + .nowrap-m { white-space: nowrap; } + .pre-m { white-space: pre; } + .v-base-m { vertical-align: baseline; } + .v-mid-m { vertical-align: middle; } + .v-top-m { vertical-align: top; } + .v-btm-m { vertical-align: bottom; } } -@container (min-width:64em) { +@media screen and (min-width: 60em) { + .aspect-ratio-l { height: 0; position: relative; } + .aspect-ratio--16x9-l { padding-bottom: 56.25%; } + .aspect-ratio--9x16-l { padding-bottom: 177.77%; } + .aspect-ratio--4x3-l { padding-bottom: 75%; } + .aspect-ratio--3x4-l { padding-bottom: 133.33%; } + .aspect-ratio--6x4-l { padding-bottom: 66.6%; } + .aspect-ratio--4x6-l { padding-bottom: 150%; } + .aspect-ratio--8x5-l { padding-bottom: 62.5%; } + .aspect-ratio--5x8-l { padding-bottom: 160%; } + .aspect-ratio--7x5-l { padding-bottom: 71.42%; } + .aspect-ratio--5x7-l { padding-bottom: 140%; } + .aspect-ratio--1x1-l { padding-bottom: 100%; } + .aspect-ratio--object-l { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; } + .cover-l { background-size: cover !important; } + .contain-l { background-size: contain !important; } + .bg-center-l { background-repeat: no-repeat; background-position: center center; } + .bg-top-l { background-repeat: no-repeat; background-position: top center; } + .bg-right-l { background-repeat: no-repeat; background-position: center right; } + .bg-bottom-l { background-repeat: no-repeat; background-position: bottom center; } + .bg-left-l { background-repeat: no-repeat; background-position: center left; } + .outline-l { outline: 1px solid; } + .outline-transparent-l { outline: 1px solid transparent; } + .outline-0-l { outline: 0; } + .ba-l { border-style: solid; border-width: 1px; } + .bt-l { border-top-style: solid; border-top-width: 1px; } + .br-l { border-right-style: solid; border-right-width: 1px; } + .bb-l { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-l { border-left-style: solid; border-left-width: 1px; } + .bn-l { border-style: none; border-width: 0; } + .br0-l { border-radius: 0; } + .br1-l { border-radius: .125rem; } + .br2-l { border-radius: .25rem; } + .br3-l { border-radius: .5rem; } + .br4-l { border-radius: 1rem; } + .br-100-l { border-radius: 100%; } + .br-pill-l { border-radius: 9999px; } + .br--bottom-l { border-top-left-radius: 0; border-top-right-radius: 0; } + .br--top-l { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } + .br--right-l { border-top-left-radius: 0; border-bottom-left-radius: 0; } + .br--left-l { border-top-right-radius: 0; border-bottom-right-radius: 0; } + .br-inherit-l { border-radius: inherit; } + .br-initial-l { border-radius: initial; } + .br-unset-l { border-radius: unset; } + .b--dotted-l { border-style: dotted; } + .b--dashed-l { border-style: dashed; } + .b--solid-l { border-style: solid; } + .b--none-l { border-style: none; } + .bw0-l { border-width: 0; } + .bw1-l { border-width: .125rem; } + .bw2-l { border-width: .25rem; } + .bw3-l { border-width: .5rem; } + .bw4-l { border-width: 1rem; } + .bw5-l { border-width: 2rem; } + .bt-0-l { border-top-width: 0; } + .br-0-l { border-right-width: 0; } + .bb-0-l { border-bottom-width: 0; } + .bl-0-l { border-left-width: 0; } + .shadow-1-l { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); } + .shadow-2-l { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); } + .shadow-3-l { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); } + .shadow-4-l { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); } + .shadow-5-l { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); } + .top-0-l { top: 0; } + .left-0-l { left: 0; } + .right-0-l { right: 0; } + .bottom-0-l { bottom: 0; } + .top-1-l { top: 1rem; } + .left-1-l { left: 1rem; } + .right-1-l { right: 1rem; } + .bottom-1-l { bottom: 1rem; } + .top-2-l { top: 2rem; } + .left-2-l { left: 2rem; } + .right-2-l { right: 2rem; } + .bottom-2-l { bottom: 2rem; } + .top--1-l { top: -1rem; } + .right--1-l { right: -1rem; } + .bottom--1-l { bottom: -1rem; } + .left--1-l { left: -1rem; } + .top--2-l { top: -2rem; } + .right--2-l { right: -2rem; } + .bottom--2-l { bottom: -2rem; } + .left--2-l { left: -2rem; } + .absolute--fill-l { top: 0; right: 0; bottom: 0; left: 0; } + .cl-l { clear: left; } + .cr-l { clear: right; } + .cb-l { clear: both; } + .cn-l { clear: none; } + .dn-l { display: none; } + .di-l { display: inline; } + .db-l { display: block; } + .dib-l { display: inline-block; } + .dit-l { display: inline-table; } + .dt-l { display: table; } + .dtc-l { display: table-cell; } + .dt-row-l { display: table-row; } + .dt-row-group-l { display: table-row-group; } + .dt-column-l { display: table-column; } + .dt-column-group-l { display: table-column-group; } + .dt--fixed-l { table-layout: fixed; width: 100%; } + .flex-l { display: flex; } + .inline-flex-l { display: inline-flex; } + .flex-auto-l { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } + .flex-none-l { flex: none; } + .flex-column-l { flex-direction: column; } + .flex-row-l { flex-direction: row; } + .flex-wrap-l { flex-wrap: wrap; } + .flex-nowrap-l { flex-wrap: nowrap; } + .flex-wrap-reverse-l { flex-wrap: wrap-reverse; } + .flex-column-reverse-l { flex-direction: column-reverse; } + .flex-row-reverse-l { flex-direction: row-reverse; } + .items-start-l { align-items: flex-start; } + .items-end-l { align-items: flex-end; } + .items-center-l { align-items: center; } + .items-baseline-l { align-items: baseline; } + .items-stretch-l { align-items: stretch; } + .self-start-l { align-self: flex-start; } + .self-end-l { align-self: flex-end; } + .self-center-l { align-self: center; } + .self-baseline-l { align-self: baseline; } + .self-stretch-l { align-self: stretch; } + .justify-start-l { justify-content: flex-start; } + .justify-end-l { justify-content: flex-end; } + .justify-center-l { justify-content: center; } + .justify-between-l { justify-content: space-between; } + .justify-around-l { justify-content: space-around; } + .content-start-l { align-content: flex-start; } + .content-end-l { align-content: flex-end; } + .content-center-l { align-content: center; } + .content-between-l { align-content: space-between; } + .content-around-l { align-content: space-around; } + .content-stretch-l { align-content: stretch; } + .order-0-l { order: 0; } + .order-1-l { order: 1; } + .order-2-l { order: 2; } + .order-3-l { order: 3; } + .order-4-l { order: 4; } + .order-5-l { order: 5; } + .order-6-l { order: 6; } + .order-7-l { order: 7; } + .order-8-l { order: 8; } + .order-last-l { order: 99999; } + .flex-grow-0-l { flex-grow: 0; } + .flex-grow-1-l { flex-grow: 1; } + .flex-shrink-0-l { flex-shrink: 0; } + .flex-shrink-1-l { flex-shrink: 1; } + .fl-l { float: left; _display: inline; } + .fr-l { float: right; _display: inline; } + .fn-l { float: none; } + .i-l { font-style: italic; } + .fs-normal-l { font-style: normal; } + .normal-l { font-weight: normal; } + .b-l { font-weight: bold; } + .fw1-l { font-weight: 100; } + .fw2-l { font-weight: 200; } + .fw3-l { font-weight: 300; } + .fw4-l { font-weight: 400; } + .fw5-l { font-weight: 500; } + .fw6-l { font-weight: 600; } + .fw7-l { font-weight: 700; } + .fw8-l { font-weight: 800; } + .fw9-l { font-weight: 900; } + .h1-l { height: 1rem; } + .h2-l { height: 2rem; } + .h3-l { height: 4rem; } + .h4-l { height: 8rem; } + .h5-l { height: 16rem; } + .h-25-l { height: 25%; } + .h-50-l { height: 50%; } + .h-75-l { height: 75%; } + .h-100-l { height: 100%; } + .min-h-100-l { min-height: 100%; } + .vh-25-l { height: 25vh; } + .vh-50-l { height: 50vh; } + .vh-75-l { height: 75vh; } + .vh-100-l { height: 100vh; } + .min-vh-100-l { min-height: 100vh; } + .h-auto-l { height: auto; } + .h-inherit-l { height: inherit; } + .tracked-l { letter-spacing: .1em; } + .tracked-tight-l { letter-spacing: -.05em; } + .tracked-mega-l { letter-spacing: .25em; } + .lh-solid-l { line-height: 1; } + .lh-title-l { line-height: 1.25; } + .lh-copy-l { line-height: 1.5; } + .mw-100-l { max-width: 100%; } + .mw1-l { max-width: 1rem; } + .mw2-l { max-width: 2rem; } + .mw3-l { max-width: 4rem; } + .mw4-l { max-width: 8rem; } + .mw5-l { max-width: 16rem; } + .mw6-l { max-width: 32rem; } + .mw7-l { max-width: 48rem; } + .mw8-l { max-width: 64rem; } + .mw9-l { max-width: 96rem; } + .mw-none-l { max-width: none; } + .w1-l { width: 1rem; } + .w2-l { width: 2rem; } + .w3-l { width: 4rem; } + .w4-l { width: 8rem; } + .w5-l { width: 16rem; } + .w-10-l { width: 10%; } + .w-20-l { width: 20%; } + .w-25-l { width: 25%; } + .w-30-l { width: 30%; } + .w-33-l { width: 33%; } + .w-34-l { width: 34%; } + .w-40-l { width: 40%; } + .w-50-l { width: 50%; } + .w-60-l { width: 60%; } + .w-70-l { width: 70%; } + .w-75-l { width: 75%; } + .w-80-l { width: 80%; } + .w-90-l { width: 90%; } + .w-100-l { width: 100%; } + .w-third-l { width: 33.33333%; } + .w-two-thirds-l { width: 66.66667%; } + .w-auto-l { width: auto; } + .overflow-visible-l { overflow: visible; } + .overflow-hidden-l { overflow: hidden; } + .overflow-scroll-l { overflow: scroll; } + .overflow-auto-l { overflow: auto; } + .overflow-x-visible-l { overflow-x: visible; } + .overflow-x-hidden-l { overflow-x: hidden; } + .overflow-x-scroll-l { overflow-x: scroll; } + .overflow-x-auto-l { overflow-x: auto; } + .overflow-y-visible-l { overflow-y: visible; } + .overflow-y-hidden-l { overflow-y: hidden; } + .overflow-y-scroll-l { overflow-y: scroll; } + .overflow-y-auto-l { overflow-y: auto; } + .static-l { position: static; } + .relative-l { position: relative; } + .absolute-l { position: absolute; } + .fixed-l { position: fixed; } + .rotate-45-l { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); } + .rotate-90-l { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); } + .rotate-135-l { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); } + .rotate-180-l { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); } + .rotate-225-l { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); } + .rotate-270-l { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); } + .rotate-315-l { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); } + .pa0-l { padding: 0; } + .pa1-l { padding: .25rem; } + .pa2-l { padding: .5rem; } + .pa3-l { padding: 1rem; } + .pa4-l { padding: 2rem; } + .pa5-l { padding: 4rem; } + .pa6-l { padding: 8rem; } + .pa7-l { padding: 16rem; } + .pl0-l { padding-left: 0; } + .pl1-l { padding-left: .25rem; } + .pl2-l { padding-left: .5rem; } + .pl3-l { padding-left: 1rem; } + .pl4-l { padding-left: 2rem; } + .pl5-l { padding-left: 4rem; } + .pl6-l { padding-left: 8rem; } + .pl7-l { padding-left: 16rem; } + .pr0-l { padding-right: 0; } + .pr1-l { padding-right: .25rem; } + .pr2-l { padding-right: .5rem; } + .pr3-l { padding-right: 1rem; } + .pr4-l { padding-right: 2rem; } + .pr5-l { padding-right: 4rem; } + .pr6-l { padding-right: 8rem; } + .pr7-l { padding-right: 16rem; } + .pb0-l { padding-bottom: 0; } + .pb1-l { padding-bottom: .25rem; } + .pb2-l { padding-bottom: .5rem; } + .pb3-l { padding-bottom: 1rem; } + .pb4-l { padding-bottom: 2rem; } + .pb5-l { padding-bottom: 4rem; } + .pb6-l { padding-bottom: 8rem; } + .pb7-l { padding-bottom: 16rem; } + .pt0-l { padding-top: 0; } + .pt1-l { padding-top: .25rem; } + .pt2-l { padding-top: .5rem; } + .pt3-l { padding-top: 1rem; } + .pt4-l { padding-top: 2rem; } + .pt5-l { padding-top: 4rem; } + .pt6-l { padding-top: 8rem; } + .pt7-l { padding-top: 16rem; } + .pv0-l { padding-top: 0; padding-bottom: 0; } + .pv1-l { padding-top: .25rem; padding-bottom: .25rem; } + .pv2-l { padding-top: .5rem; padding-bottom: .5rem; } + .pv3-l { padding-top: 1rem; padding-bottom: 1rem; } + .pv4-l { padding-top: 2rem; padding-bottom: 2rem; } + .pv5-l { padding-top: 4rem; padding-bottom: 4rem; } + .pv6-l { padding-top: 8rem; padding-bottom: 8rem; } + .pv7-l { padding-top: 16rem; padding-bottom: 16rem; } + .ph0-l { padding-left: 0; padding-right: 0; } + .ph1-l { padding-left: .25rem; padding-right: .25rem; } + .ph2-l { padding-left: .5rem; padding-right: .5rem; } + .ph3-l { padding-left: 1rem; padding-right: 1rem; } + .ph4-l { padding-left: 2rem; padding-right: 2rem; } + .ph5-l { padding-left: 4rem; padding-right: 4rem; } + .ph6-l { padding-left: 8rem; padding-right: 8rem; } + .ph7-l { padding-left: 16rem; padding-right: 16rem; } + .ma0-l { margin: 0; } + .ma1-l { margin: .25rem; } + .ma2-l { margin: .5rem; } + .ma3-l { margin: 1rem; } + .ma4-l { margin: 2rem; } + .ma5-l { margin: 4rem; } + .ma6-l { margin: 8rem; } + .ma7-l { margin: 16rem; } + .ml0-l { margin-left: 0; } + .ml1-l { margin-left: .25rem; } + .ml2-l { margin-left: .5rem; } + .ml3-l { margin-left: 1rem; } + .ml4-l { margin-left: 2rem; } + .ml5-l { margin-left: 4rem; } + .ml6-l { margin-left: 8rem; } + .ml7-l { margin-left: 16rem; } + .mr0-l { margin-right: 0; } + .mr1-l { margin-right: .25rem; } + .mr2-l { margin-right: .5rem; } + .mr3-l { margin-right: 1rem; } + .mr4-l { margin-right: 2rem; } + .mr5-l { margin-right: 4rem; } + .mr6-l { margin-right: 8rem; } + .mr7-l { margin-right: 16rem; } + .mb0-l { margin-bottom: 0; } + .mb1-l { margin-bottom: .25rem; } + .mb2-l { margin-bottom: .5rem; } + .mb3-l { margin-bottom: 1rem; } + .mb4-l { margin-bottom: 2rem; } + .mb5-l { margin-bottom: 4rem; } + .mb6-l { margin-bottom: 8rem; } + .mb7-l { margin-bottom: 16rem; } + .mt0-l { margin-top: 0; } + .mt1-l { margin-top: .25rem; } + .mt2-l { margin-top: .5rem; } + .mt3-l { margin-top: 1rem; } + .mt4-l { margin-top: 2rem; } + .mt5-l { margin-top: 4rem; } + .mt6-l { margin-top: 8rem; } + .mt7-l { margin-top: 16rem; } + .mv0-l { margin-top: 0; margin-bottom: 0; } + .mv1-l { margin-top: .25rem; margin-bottom: .25rem; } + .mv2-l { margin-top: .5rem; margin-bottom: .5rem; } + .mv3-l { margin-top: 1rem; margin-bottom: 1rem; } + .mv4-l { margin-top: 2rem; margin-bottom: 2rem; } + .mv5-l { margin-top: 4rem; margin-bottom: 4rem; } + .mv6-l { margin-top: 8rem; margin-bottom: 8rem; } + .mv7-l { margin-top: 16rem; margin-bottom: 16rem; } + .mh0-l { margin-left: 0; margin-right: 0; } + .mh1-l { margin-left: .25rem; margin-right: .25rem; } + .mh2-l { margin-left: .5rem; margin-right: .5rem; } + .mh3-l { margin-left: 1rem; margin-right: 1rem; } + .mh4-l { margin-left: 2rem; margin-right: 2rem; } + .mh5-l { margin-left: 4rem; margin-right: 4rem; } + .mh6-l { margin-left: 8rem; margin-right: 8rem; } + .mh7-l { margin-left: 16rem; margin-right: 16rem; } + .na1-l { margin: -0.25rem; } + .na2-l { margin: -0.5rem; } + .na3-l { margin: -1rem; } + .na4-l { margin: -2rem; } + .na5-l { margin: -4rem; } + .na6-l { margin: -8rem; } + .na7-l { margin: -16rem; } + .nl1-l { margin-left: -0.25rem; } + .nl2-l { margin-left: -0.5rem; } + .nl3-l { margin-left: -1rem; } + .nl4-l { margin-left: -2rem; } + .nl5-l { margin-left: -4rem; } + .nl6-l { margin-left: -8rem; } + .nl7-l { margin-left: -16rem; } + .nr1-l { margin-right: -0.25rem; } + .nr2-l { margin-right: -0.5rem; } + .nr3-l { margin-right: -1rem; } + .nr4-l { margin-right: -2rem; } + .nr5-l { margin-right: -4rem; } + .nr6-l { margin-right: -8rem; } + .nr7-l { margin-right: -16rem; } + .nb1-l { margin-bottom: -0.25rem; } + .nb2-l { margin-bottom: -0.5rem; } + .nb3-l { margin-bottom: -1rem; } + .nb4-l { margin-bottom: -2rem; } + .nb5-l { margin-bottom: -4rem; } + .nb6-l { margin-bottom: -8rem; } + .nb7-l { margin-bottom: -16rem; } + .nt1-l { margin-top: -0.25rem; } + .nt2-l { margin-top: -0.5rem; } + .nt3-l { margin-top: -1rem; } + .nt4-l { margin-top: -2rem; } + .nt5-l { margin-top: -4rem; } + .nt6-l { margin-top: -8rem; } + .nt7-l { margin-top: -16rem; } + .strike-l { text-decoration: line-through; } + .underline-l { text-decoration: underline; } + .no-underline-l { text-decoration: none; } + .tl-l { text-align: left; } + .tr-l { text-align: right; } + .tc-l { text-align: center; } + .tj-l { text-align: justify; } + .ttc-l { text-transform: capitalize; } + .ttl-l { text-transform: lowercase; } + .ttu-l { text-transform: uppercase; } + .ttn-l { text-transform: none; } + .f-6-l, .f-headline-l { font-size: 6rem; } + .f-5-l, .f-subheadline-l { font-size: 5rem; } + .f1-l { font-size: 3rem; } + .f2-l { font-size: 2.25rem; } + .f3-l { font-size: 1.5rem; } + .f4-l { font-size: 1.25rem; } + .f5-l { font-size: 1rem; } + .f6-l { font-size: .875rem; } + .f7-l { font-size: .75rem; } + .measure-l { max-width: 30em; } + .measure-wide-l { max-width: 34em; } + .measure-narrow-l { max-width: 20em; } + .indent-l { text-indent: 1em; margin-top: 0; margin-bottom: 0; } + .small-caps-l { font-variant: small-caps; } + .truncate-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-l { margin-right: auto; margin-left: auto; } .mr-auto-l { margin-right: auto; } .ml-auto-l { margin-left: auto; } -} -/* - - VISIBILITY - - Media Query Extensions: - -s = small - -m = medium - -l = large - -*/ -/* - Text that is hidden but accessible - Ref: https://accessibility.18f.gov/hidden-content/ -*/ -.clip { border: 0; clip: rect( 0 0 0 0 ); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } -@container (min-width:30em) { - .clip-s { border: 0; clip: rect( 0 0 0 0 ); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } -} -@container (min-width:48em) { - .clip-m { border: 0; clip: rect( 0 0 0 0 ); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } -} -@container (min-width:64em) { - .clip-l { border: 0; clip: rect( 0 0 0 0 ); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } -} -/* - - WHITE SPACE - - Media Query Extensions: - -s = small - -m = medium - -l = large - -*/ -.ws-normal { white-space: normal; } -.nowrap { white-space: nowrap; } -.pre { white-space: pre; } -@container (min-width:30em) { - .ws-normal-s { white-space: normal; } - .nowrap-s { white-space: nowrap; } - .pre-s { white-space: pre; } -} -@container (min-width:48em) { - .ws-normal-m { white-space: normal; } - .nowrap-m { white-space: nowrap; } - .pre-m { white-space: pre; } -} -@container (min-width:64em) { + .clip-l { position: fixed !important; _position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); } .ws-normal-l { white-space: normal; } .nowrap-l { white-space: nowrap; } .pre-l { white-space: pre; } -} -/* - - VERTICAL ALIGN - - Media Query Extensions: - -s = small - -m = medium - -l = large - -*/ -.v-base { vertical-align: baseline; } -.v-mid { vertical-align: middle; } -.v-top { vertical-align: top; } -.v-btm { vertical-align: bottom; } -@container (min-width:30em) { - .v-base-s { vertical-align: baseline; } - .v-mid-s { vertical-align: middle; } - .v-top-s { vertical-align: top; } - .v-btm-s { vertical-align: bottom; } -} -@container (min-width:48em) { - .v-base-m { vertical-align: baseline; } - .v-mid-m { vertical-align: middle; } - .v-top-m { vertical-align: top; } - .v-btm-m { vertical-align: bottom; } -} -@container (min-width:64em) { .v-base-l { vertical-align: baseline; } .v-mid-l { vertical-align: middle; } .v-top-l { vertical-align: top; } .v-btm-l { vertical-align: bottom; } } -/* - - HOVER EFFECTS - Docs: http://tachyons.io/docs/themes/hovers/ - - - Dim - - Glow - - Hide Child - - Underline text - - Grow - - Pointer - - Shadow - - Colors - -*/ -/* - - Dim element on hover by adding the dim class. - -*/ -.dim { opacity: 1; transition: opacity .15s ease-in; } -.dim:hover, .dim:focus { opacity: .5; transition: opacity .15s ease-in; } -.dim:active { opacity: .8; transition: opacity .15s ease-out; } -/* - - Animate opacity to 100% on hover by adding the glow class. - -*/ -.glow { transition: opacity .15s ease-in; } -.glow:hover, .glow:focus { opacity: 1; transition: opacity .15s ease-in; } -/* - - Hide child & reveal on hover: - - Put the hide-child class on a parent element and any nested element with the - child class will be hidden and displayed on hover or focus. - -
-
Hidden until hover or focus
-
Hidden until hover or focus
-
Hidden until hover or focus
-
Hidden until hover or focus
-
-*/ -.hide-child .child { opacity: 0; transition: opacity .15s ease-in; } -.hide-child:hover .child, .hide-child:focus .child, .hide-child:active .child { opacity: 1; transition: opacity .15s ease-in; } -.underline-hover:hover, .underline-hover:focus { text-decoration: underline; } -/* Can combine this with overflow-hidden to make background images grow on hover - * even if you are using background-size: cover */ -.grow { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); transition: -webkit-transform .25s ease-out; transition: transform .25s ease-out; transition: transform .25s ease-out, -webkit-transform .25s ease-out; } -.grow:hover, .grow:focus { -webkit-transform: scale( 1.05 ); transform: scale( 1.05 ); } -.grow:active { -webkit-transform: scale( .90 ); transform: scale( .90 ); } -.grow-large { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); transition: -webkit-transform .25s ease-in-out; transition: transform .25s ease-in-out; transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out; } -.grow-large:hover, .grow-large:focus { -webkit-transform: scale( 1.2 ); transform: scale( 1.2 ); } -.grow-large:active { -webkit-transform: scale( .95 ); transform: scale( .95 ); } -/* Add pointer on hover */ -.pointer { cursor: pointer; } -.trans-all { transition: all .25s cubic-bezier( .165, .84, .44, 1 ); } -/* - * TODO: Test and rename - Add shadow on hover. - - Performant box-shadow animation pattern from - http://tobiasahlin.com/blog/how-to-animate-box-shadow/ - -.shadow-hover { - cursor: pointer; - position: relative; - transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); -} - -.shadow-hover::after { - content: ''; - box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 ); - border-radius: inherit; - opacity: 0; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: -1; - transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); -} - -.shadow-hover:hover::after, -.shadow-hover:focus::after { - opacity: 1; -} -*/ -/* Combine with classes in skins and skins-pseudo for - * many different transition possibilities. */ -.trans-bg { transition: background-color .25s ease-in-out; } -.trans-color { transition: color .25s ease-in-out; } -.hover-filter-none:hover { -webkit-filter: none; filter: none; } -.hover-filter-blur-none:hover { -webkit-filter: blur( 0 ); filter: blur( 0 ); } -.hover-filter-blur:hover { -webkit-filter: blur( 96px ); filter: blur( 96px ); } -.hover-grayscale-0:hover { -webkit-filter: grayscale( 0 ); filter: grayscale( 0 ); } -.hover-grayscale-50:hover { -webkit-filter: grayscale( 50% ); filter: grayscale( 50% ); } -.hover-grayscale-100:hover { -webkit-filter: grayscale( 100% ); filter: grayscale( 100% ); } -/* - - Z-INDEX - - Base - z = z-index - - Modifiers - -0 = literal value 0 - -1 = literal value 1 - -2 = literal value 2 - -3 = literal value 3 - -4 = literal value 4 - -5 = literal value 5 - -999 = literal value 999 - -9999 = literal value 9999 - - -max = largest accepted z-index value as integer - - -inherit = string value inherit - -initial = string value initial - -unset = string value unset - - MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index - Spec: http://www.w3.org/TR/CSS2/zindex.html - Articles: - https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ - - Tips on extending: - There might be a time worth using negative z-index values. - Or if you are using tachyons with another project, you might need to - adjust these values to suit your needs. - -*/ -.z-0 { z-index: 0; } -.z-1 { z-index: 1; } -.z-2 { z-index: 2; } -.z-3 { z-index: 3; } -.z-4 { z-index: 4; } -.z-5 { z-index: 5; } -.z-999 { z-index: 999; } -.z-9999 { z-index: 9999; } -.z-max { z-index: 2147483647; } -.z-inherit { z-index: inherit; } -.z-initial { z-index: initial; } -.z-unset { z-index: unset; } -/* - - NESTED - Tachyons module for styling nested elements - that are generated by a cms. - -*/ -.nested-copy-line-height p, .nested-copy-line-height ul, -.nested-copy-line-height ol { line-height: var( --line-height-body, 1.5 ); } -.nested-headline-line-height h1, .nested-headline-line-height h2, -.nested-headline-line-height h3, .nested-headline-line-height h4, -.nested-headline-line-height h5, .nested-headline-line-height h6 { line-height: var( --line-height-title, 1.25 ); } -.nested-list-reset ul, .nested-list-reset ol { padding-left: 0; margin-left: 0; list-style-type: none; } -.nested-copy-indent p+p { text-indent: 1em; margin-top: 0; margin-bottom: 0; } -.nested-copy-separator p+p { margin-top: 1.5em; } -.nested-img img { width: 100%; max-width: 100%; display: block; } -.nested-links a { color: var( --blue-5 ); transition: color .15s ease-in; } -.nested-links a:hover, .nested-links a:focus { color: var( --blue-3 ); transition: color .15s ease-in; } -/* - - STYLES - - Add custom styles here. - -*/ -/* Debugging */ -/* - - DEBUG CHILDREN - Docs: http://tachyons.io/docs/debug/ - - Just add the debug class to any element to see outlines on its - children. - -*/ -.debug * { --debug-color: 128 0 90; --debug-opacity: .8; outline: 1px solid rbg( var( --debug-color, 128 0 90 ) / ( --debug-opacity, .8 ) ); } -/* - - DEBUG GRID - http://tachyons.io/docs/debug-grid/ - - Can be useful for debugging layout issues - or helping to make sure things line up perfectly. - Just tack this class onto a parent element - -*/ -.debug-grid { --grid-size: 16px; --grid-color: var( --magenta-9 ); background-image: repeating-linear-gradient( 0deg, var( --grid-color ), var( --grid-color ) 1px, transparent 1px, transparent var( --grid-size ) ), repeating-linear-gradient( 90deg, var( --grid-color ), var( --grid-color ) 1px, transparent 1px, transparent var( --grid-size ) ); background-size: 100% var( --grid-size ); } -/* Uncomment out the line below to help debug layout issues */ -/* @import './_debug'; */ -@media (prefers-color-scheme: dark) { --shadow-color: 255 255 255; } diff --git a/css/tachyons.min.css b/css/tachyons.min.css index bdfbd7904..4555f3db3 100644 --- a/css/tachyons.min.css +++ b/css/tachyons.min.css @@ -1,3 +1,3 @@ -/*! TACHYONS v5.0.0.beta | http://tachyons.io */ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],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{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{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-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--tint-0:hsla(0,0%,100%,.035);--tint-1:hsla(0,0%,100%,.1);--tint-2:hsla(0,0%,100%,.19);--tint-3:hsla(0,0%,100%,.28);--tint-4:hsla(0,0%,100%,.36);--tint-5:hsla(0,0%,100%,.45);--tint-6:hsla(0,0%,100%,.55);--tint-7:hsla(0,0%,100%,.64);--tint-8:hsla(0,0%,100%,.73);--tint-9:hsla(0,0%,100%,.815);--tint-10:hsla(0,0%,100%,.895);--tint-11:hsla(0,0%,100%,.94);--shadow-11:rgba(0,0,0,.94);--shadow-10:rgba(0,0,0,.895);--shadow-9:rgba(0,0,0,.815);--shadow-8:rgba(0,0,0,.73);--shadow-7:rgba(0,0,0,.64);--shadow-6:rgba(0,0,0,.55);--shadow-5:rgba(0,0,0,.45);--shadow-4:rgba(0,0,0,.36);--shadow-3:rgba(0,0,0,.28);--shadow-2:rgba(0,0,0,.19);--shadow-1:rgba(0,0,0,.1);--shadow-0:rgba(0,0,0,.035);--gray-0:#000;--gray-1:#171717;--gray-2:#2f2f2f;--gray-3:#464646;--gray-4:#5e5e5e;--gray-5:#757575;--gray-6:#8c8c8c;--gray-7:#a3a3a3;--gray-8:#bababa;--gray-9:#d1d1d1;--gray-10:#e8e8e8;--gray-11:#fff;--slate-gray-0:#09090b;--slate-gray-1:#1d1d22;--slate-gray-2:#313138;--slate-gray-3:#45444f;--slate-gray-4:#595866;--slate-gray-5:#6d6c7d;--slate-gray-6:#838292;--slate-gray-7:#9a9aa7;--slate-gray-8:#b2b1bb;--slate-gray-9:#c9c9d0;--slate-gray-10:#e1e0e4;--slate-gray-11:#f8f8f9;--blue-1:#071e3f;--blue-2:#0c3166;--blue-3:#10448d;--blue-4:#1556b4;--blue-5:#1969db;--blue-6:#317fed;--blue-7:#5797f0;--blue-8:#7daef4;--blue-9:#a3c6f7;--blue-10:#c9ddfa;--blue-11:#eff5fe;--indigo-0:#080614;--indigo-1:#19143f;--indigo-2:#2a216a;--indigo-3:#3a2e95;--indigo-4:#4b3bc0;--indigo-5:#5c49eb;--indigo-6:#725fff;--indigo-7:#8c7cff;--indigo-8:#a69aff;--indigo-9:#c0b7ff;--indigo-10:#dad5ff;--indigo-11:#f4f3ff;--violet-0:#110517;--violet-1:#2e0d3e;--violet-2:#4b1465;--violet-3:#681c8c;--violet-4:#8424b3;--violet-5:#a12cda;--violet-6:#b543ec;--violet-7:#c366f0;--violet-8:#d089f3;--violet-9:#deabf7;--violet-10:#eccefa;--violet-11:#f9f0fe;--magenta-0:#13040f;--magenta-1:#350a2c;--magenta-2:#581148;--magenta-3:#7b1765;--magenta-4:#9e1e82;--magenta-5:#c1249e;--magenta-6:#d43cb2;--magenta-7:#dc61c1;--magenta-8:#e485cf;--magenta-9:#eca9dd;--magenta-10:#f4ceec;--magenta-11:#fcf2fa;--red-0:#120205;--red-1:#39050f;--red-2:#5f0819;--red-3:#860b24;--red-4:#ac0e2e;--red-5:#d31138;--red-6:#e7284e;--red-7:#ec506f;--red-8:#f07790;--red-9:#f49fb0;--red-10:#f9c7d1;--red-11:#fdeef1;--red-orange-0:#190b05;--red-orange-1:#3d1307;--red-orange-2:#601b0a;--red-orange-3:#84240c;--red-orange-4:#a72c0e;--red-orange-5:#cb3411;--red-orange-6:#ee3c13;--red-orange-7:#fe562f;--red-orange-8:#fe7d5e;--red-orange-9:#ffa48e;--red-orange-10:#ffccbe;--red-orange-11:#fff3ee;--orange-0:#150d04;--orange-1:#2e1c08;--orange-2:#472a0c;--orange-3:#603910;--orange-4:#794714;--orange-5:#a65d13;--orange-6:#d37413;--orange-7:#ff8a14;--orange-8:#ffa54a;--orange-9:#ffc081;--orange-10:#ffdab7;--orange-11:#fff5ed;--gold-0:#140e05;--gold-1:#2c1f0a;--gold-2:#432f0e;--gold-3:#5b4013;--gold-4:#725118;--gold-5:#946818;--gold-6:#d4950d;--gold-7:#eeb028;--gold-8:#f2c259;--gold-9:#f7d38a;--gold-10:#fbe5bc;--gold-11:#fff5e9;--yellow-0:#111006;--yellow-1:#252405;--yellow-2:#3a3804;--yellow-3:#4e4d03;--yellow-4:#636101;--yellow-5:#777500;--yellow-6:#ccc500;--yellow-7:#fcf433;--yellow-8:#fdf67a;--yellow-9:#fdf89b;--yellow-10:#fef9bb;--yellow-11:#fefadb;--green-0:#091108;--green-1:#0f2611;--green-2:#153c1a;--green-3:#1b5122;--green-4:#21662b;--green-5:#25833a;--green-6:#26b056;--green-7:#35d272;--green-8:#63dd90;--green-9:#90e8ae;--green-10:#bdf3cc;--green-11:#eafeea;--teal-0:#07100c;--teal-1:#0c231a;--teal-2:#113628;--teal-3:#164936;--teal-4:#1b5b45;--teal-5:#177f63;--teal-6:#12a282;--teal-7:#2abb9b;--teal-8:#5acab1;--teal-9:#8bdac7;--teal-10:#bbe9dc;--teal-11:#ecf8f2;--cyan-0:#0a1211;--cyan-1:#102425;--cyan-2:#153639;--cyan-3:#1b484c;--cyan-4:#215a60;--cyan-5:#247981;--cyan-6:#24a9b6;--cyan-7:#28d6e6;--cyan-8:#57e0ec;--cyan-9:#85eaf2;--cyan-10:#b4f5f9;--cyan-11:#e2ffff;--transparent:hsla(0,0,0,0);@supports (color:color(display-p3 1 1 1)){:root{--blue-0:color(display-p3 0 .07 .25);--blue-1:color(display-p3 0 .09 .32);--blue-2:color(display-p3 0 .11 .42);--blue-3:color(display-p3 0 .15 .53);--blue-4:color(display-p3 0 .16 .7);--blue-5:color(display-p3 0 .22 .88);--blue-6:color(display-p3 .06 .37 1);--blue-7:color(display-p3 .38 .59 1);--blue-8:color(display-p3 .66 .79 1);--blue-9:color(display-p3 .79 .86 .99);--blue-10:color(display-p3 .87 .92 .99);--blue-11:color(display-p3 .92 .95 1);--indigo-0:color(display-p3 .06 .03 .21);--indigo-1:color(display-p3 .09 .07 .26);--indigo-2:color(display-p3 .15 .11 .42);--indigo-3:color(display-p3 .18 .14 .57);--indigo-4:color(display-p3 .2 .18 .75);--indigo-5:color(display-p3 .26 .22 1);--indigo-6:color(display-p3 .28 .28 1);--indigo-7:color(display-p3 .47 .49 1);--indigo-8:color(display-p3 .67 .68 1);--indigo-9:color(display-p3 .81 .81 .98);--indigo-10:color(display-p3 .87 .92 .99);--indigo-11:color(display-p3 .92 .95 1)}}--degrees-1:0;--degrees-2:45deg;--degrees-3:90deg;--degrees-4:135deg;--degrees-5:180deg;--degrees-6:225deg;--degrees-7:270deg;--degrees-8:315deg;--gradient-degree-0:var(--degrees-1,0);--gradient-degree:var(--degrees-2,45deg);--gradient-degree-2:var(--degrees-4,135deg);--gradient-stripe-width:12px;--gradient-stripe-width-2:var(--border-width-1);--gradient-color-1:var(--blue-2);--gradient-color-2:var(--magenta-6);--gradient-color-3:var(--red-5);--gradient-color-4:var(--indigo-5);--gradient-color-5:var(--violet-0);--gradient-color-6:var(--violet-5);--gradient-color-7:var(--magenta-0);--gradient-color-8:var(--magenta-5);--gradient-color-9:var(--red-0);--gradient-color-10:var(--red-5);--gradient-color-11:var(--red-orange-0);--gradient-color-12:var(--red-orange-5);--gradient-color-13:var(--orange-0);--gradient-color-14:var(--orange-5);--gradient-color-15:var(--gold-0);--gradient-color-16:var(--gold-5);--gradient-color-17:var(--yellow-0);--gradient-color-18:var(--yellow-5);--gradient-color-19:var(--green-0);--gradient-color-20:var(--green-5);--gradient-color-21:var(--teal-0);--gradient-color-22:var(--teal-5);--gradient-color-23:var(--cyan-0);--gradient-color-24:var(--cyan-5);--gradient-stop:50%;--font-size-1:12px;--font-size-2:14px;--font-size-3:16px;--font-size-4:20px;--font-size-5:24px;--font-size-6:32px;--font-size-7:48px;--font-size-8:64px;--font-size-9:96px;--font-size-10:128px;--font-size-11:192px;--font-size-12:256px;--measure-narrow:45ch;--measure:66ch;--measure-wide:80ch;--border-radius-0:0;--border-radius-1:4px;--border-radius-2:6px;--border-radius-3:8px;--border-radius-4:12px;--border-radius-5:16px;--border-radius-6:20px;--border-radius-7:24px;--border-radius-8:32px;--border-radius-9:48px;--border-radius-10:64px;--border-radius-11:9999px;--border-radius:var(--border-radius-2);--border-width-0:0;--border-width-1:1px;--border-width-2:2px;--border-width-3:4px;--border-width-4:8px;--border-width-5:16px;--border-width:var(--border-width-1,1px);--border-color:var(--gray-5,gray);--line-height-solid:1;--line-height-heading:1.25;--line-height-body:1.5;--letter-spacing-tracked:.1em;--letter-spacing-tight:-0.05em;--letter-spacing-large:.25em;--font-family-heading:Inter,-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;--font-family-body:Inter,-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;--font-family-mono:Inconsolata,Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace;--spacing-0:0;--spacing-1:2px;--spacing-2:4px;--spacing-3:8px;--spacing-4:16px;--spacing-5:32px;--spacing-6:64px;--spacing-7:128px;--spacing-8:256px;--spacing-9:512px;--size-0:0;--size-1:1rem;--size-2:2rem;--size-3:3rem;--size-4:4rem;--size-5:8rem;--size-6:16rem;--size-7:32rem;--size-8:64rem;--shadow-color:0 0 0;--shadow-color-invert:255 255 255;--shadow-border-width:1px;--shadow-opacity:.25;--opacity-0:0;--opacity-1:.025;--opacity-2:.05;--opacity-3:.1;--opacity-4:.2;--opacity-5:.3;--opacity-6:.4;--opacity-7:.5;--opacity-8:.6;--opacity-9:.7;--opacity-10:.8;--opacity-11:.9;--opacity-12:1;--duration-0:125ms;--duration-1:250ms;--duration-2:500ms;--easing-function-0:cubic-bezier(.543,1.086,.5,-0.383);--easing-function-1:ease;--easing-function-2:ease-out;--easing-function-3:ease-in-out;--easing-function-4:linear}.gradient-1{background:linear-gradient(var(--gradient-degree),var(--gradient-color-1),var(--gradient-color-2))}.gradient-2{background:linear-gradient(var(--gradient-degree),var(--gradient-color-1) var(--gradient-stop),var(--gradient-color-2) var(--gradient-stop))}.gradient-3{background:repeating-linear-gradient(var(--gradient-degree),transparent,transparent var(--gradient-stripe-width),var(--gradient-color-1) var(--gradient-stripe-width),var(--gradient-color-1) calc(var(--gradient-stripe-width) + var(--gradient-stripe-width-2)))}.gradient-4{background:repeating-radial-gradient(circle,transparent 0,transparent var(--gradient-stripe-width),var(--gradient-color-1) var(--gradient-stripe-width),var(--gradient-color-1) calc(var(--gradient-stripe-width) + var(--gradient-stripe-width-2)))}*,.border-box,.border-box:after,.border-box:before,:after,:before{box-sizing:border-box}.content-box{box-sizing:content-box}.container-size{container-type:size}.container-inline,.root{container-type:inline-size}.container-normal{container-type:normal}@container (min-width:30em){.container-size-s{container-type:size}.container-inline-s{container-type:inline-size}.container-normal-s{container-type:normal}}@container (min-width:48em){.container-size-m{container-type:size}.container-inline-m{container-type:inline-size}.container-normal-m{container-type:normal}}@container (min-width:64em){.container-size-l{container-type:size}.container-inline-l{container-type:inline-size}.container-normal-l{container-type:normal}}.unset{all:unset}.initial{all:initial}.inherit{all:inherit}.revert{all:revert}.aspect-ratio-16x9{aspect-ratio:16/9}.aspect-ratio-9x16{aspect-ratio:9/16}.aspect-ratio-4x3{aspect-ratio:4/3}.aspect-ratio-3x4{aspect-ratio:3/4}.aspect-ratio-6x4{aspect-ratio:6/4}.aspect-ratio-4x6{aspect-ratio:4/6}.aspect-ratio-8x5{aspect-ratio:8/5}.aspect-ratio-5x8{aspect-ratio:5/8}.aspect-ratio-7x5{aspect-ratio:7/5}.aspect-ratio-5x7{aspect-ratio:5/7}.aspect-ratio-1x1,.aspect-ratio-square{aspect-ratio:1/1}@container (min-width:30em){.aspect-ratio-16x9-s{aspect-ratio:16/9}.aspect-ratio-9x16-s{aspect-ratio:9/16}.aspect-ratio-4x3-s{aspect-ratio:4/3}.aspect-ratio-3x4-s{aspect-ratio:3/4}.aspect-ratio-6x4-s{aspect-ratio:6/4}.aspect-ratio-4x6-s{aspect-ratio:4/6}.aspect-ratio-8x5-s{aspect-ratio:8/5}.aspect-ratio-5x8-s{aspect-ratio:5/8}.aspect-ratio-7x5-s{aspect-ratio:7/5}.aspect-ratio-5x7-s{aspect-ratio:5/7}.aspect-ratio-1x1-s,.aspect-ratio-square-s{aspect-ratio:1/1}}@container (min-width:48em){.aspect-ratio-16x9-m{aspect-ratio:16/9}.aspect-ratio-9x16-m{aspect-ratio:9/16}.aspect-ratio-4x3-m{aspect-ratio:4/3}.aspect-ratio-3x4-m{aspect-ratio:3/4}.aspect-ratio-6x4-m{aspect-ratio:6/4}.aspect-ratio-4x6-m{aspect-ratio:4/6}.aspect-ratio-8x5-m{aspect-ratio:8/5}.aspect-ratio-5x8-m{aspect-ratio:5/8}.aspect-ratio-7x5-m{aspect-ratio:7/5}.aspect-ratio-5x7-m{aspect-ratio:5/7}.aspect-ratio-1x1-m,.aspect-ratio-square-m{aspect-ratio:1/1}}@container (min-width:64em){.aspect-ratio-16x9-l{aspect-ratio:16/9}.aspect-ratio-9x16-l{aspect-ratio:9/16}.aspect-ratio-4x3-l{aspect-ratio:4/3}.aspect-ratio-3x4-l{aspect-ratio:3/4}.aspect-ratio-6x4-l{aspect-ratio:6/4}.aspect-ratio-4x6-l{aspect-ratio:4/6}.aspect-ratio-8x5-l{aspect-ratio:8/5}.aspect-ratio-5x8-l{aspect-ratio:5/8}.aspect-ratio-7x5-l{aspect-ratio:7/5}.aspect-ratio-5x7-l{aspect-ratio:5/7}.aspect-ratio-1x1-l,.aspect-ratio-square-l{aspect-ratio:1/1}}img{display:block;max-width:100%}.random-image{background-image:url(https://source.unsplash.com/random);background-size:cover}.random-image-landscape{background-image:url(https://source.unsplash.com/random/1920x1080);background-size:cover}.random-image-portrait{background-image:url(https://source.unsplash.com/random/1080x1920);background-size:cover}.cover{background-size:cover!important}.contain{background-size:contain!important}.bg1{background-size:4px}.bg2{background-size:8px}.bg3{background-size:16px}.bg4{background-size:32px}.bg5{background-size:64px}.bg6{background-size:100%}.bg7{background-size:150%}.bg8{background-size:200%}@container (min-width:30em){.cover-s{background-size:cover!important}.contain-s{background-size:contain!important}.bg1-s{background-size:4px}.bg2-s{background-size:8px}.bg3-s{background-size:16px}.bg4-s{background-size:32px}.bg5-s{background-size:64px}.bg6-s{background-size:100%}.bg7-s{background-size:150%}.bg8-s{background-size:200%}}@container (min-width:48em){.cover-m{background-size:cover!important}.contain-m{background-size:contain!important}.bg1-m{background-size:4px}.bg2-m{background-size:8px}.bg3-m{background-size:16px}.bg4-m{background-size:32px}.bg5-m{background-size:64px}.bg6-m{background-size:100%}.bg7-m{background-size:150%}.bg8-m{background-size:200%}}@container (min-width:64em){.cover-l{background-size:cover!important}.contain-l{background-size:contain!important}.bg1-l{background-size:4px}.bg2-l{background-size:8px}.bg3-l{background-size:16px}.bg4-l{background-size:32px}.bg5-l{background-size:64px}.bg6-l{background-size:100%}.bg7-l{background-size:150%}.bg8-l{background-size:200%}}.bg-center{background-position:50%}.bg-center,.bg-top{background-repeat:no-repeat}.bg-top{background-position:top}.bg-right{background-position:100%}.bg-bottom,.bg-right{background-repeat:no-repeat}.bg-bottom{background-position:bottom}.bg-left{background-repeat:no-repeat;background-position:0}@container (min-width:30em){.bg-center-s{background-position:50%}.bg-center-s,.bg-top-s{background-repeat:no-repeat}.bg-top-s{background-position:top}.bg-right-s{background-position:100%}.bg-bottom-s,.bg-right-s{background-repeat:no-repeat}.bg-bottom-s{background-position:bottom}.bg-left-s{background-repeat:no-repeat;background-position:0}}@container (min-width:48em){.bg-center-m{background-position:50%}.bg-center-m,.bg-top-m{background-repeat:no-repeat}.bg-top-m{background-position:top}.bg-right-m{background-position:100%}.bg-bottom-m,.bg-right-m{background-repeat:no-repeat}.bg-bottom-m{background-position:bottom}.bg-left-m{background-repeat:no-repeat;background-position:0}}@container (min-width:64em){.bg-center-l{background-position:50%}.bg-center-l,.bg-top-l{background-repeat:no-repeat}.bg-top-l{background-position:top}.bg-right-l{background-position:100%}.bg-bottom-l,.bg-right-l{background-repeat:no-repeat}.bg-bottom-l{background-position:bottom}.bg-left-l{background-repeat:no-repeat;background-position:0}}.outline{outline:var(--border-width,1px) solid currentColor}.outline-color{outline:var(--border-width,1px) solid var(--border-color,gray)}.outline-transparent{outline:var(--border-width,1px) solid transparent}.outline-0{outline:0}@container (min-width:30em){.outline-s{outline:var(--border-width,1px) solid currentColor}.outline-color-s{outline:var(--border-width,1px) solid var(--border-color,gray)}.outline-transparent-s{outline:var(--border-width,1px) solid transparent}.outline-0-s{outline:0}}@container (min-width:48em){.outline-m{outline:var(--border-width,1px) solid currentColor}.outline-color-m{outline:var(--border-width,1px) solid var(--border-color,gray)}.outline-transparent-m{outline:var(--border-width,1px) solid transparent}.outline-0-m{outline:0}}@container (min-width:64em){.outline-l{outline:var(--border-width,1px) solid currentColor}.outline-color-l{outline:var(--border-width,1px) solid var(--border-color,gray)}.outline-transparent-l{outline:var(--border-width,1px) solid transparent}.outline-0-l{outline:0}}.ba{border-style:solid;border-width:var(--border-width,1px)}.bt{border-top-style:solid;border-top-width:var(--border-width,1px)}.br{border-right-style:solid;border-right-width:var(--border-width,1px)}.bb{border-bottom-style:solid;border-bottom-width:var(--border-width,1px)}.bl{border-left-style:solid;border-left-width:var(--border-width,1px)}.bn{border-style:none;border-width:0}@container (min-width:30em){.ba-s{border-style:solid;border-width:var(--border-width,1px)}.bt-s{border-top-style:solid;border-top-width:var(--border-width,1px)}.br-s{border-right-style:solid;border-right-width:var(--border-width,1px)}.bb-s{border-bottom-style:solid;border-bottom-width:var(--border-width,1px)}.bl-s{border-left-style:solid;border-left-width:var(--border-width,1px)}.bn-s{border-style:none;border-width:0}}@container (min-width:48em){.ba-m{border-style:solid;border-width:var(--border-width,1px)}.bt-m{border-top-style:solid;border-top-width:var(--border-width,1px)}.br-m{border-right-style:solid;border-right-width:var(--border-width,1px)}.bb-m{border-bottom-style:solid;border-bottom-width:var(--border-width,1px)}.bl-m{border-left-style:solid;border-left-width:var(--border-width,1px)}.bn-m{border-style:none;border-width:0}}@container (min-width:64em){.ba-l{border-style:solid;border-width:var(--border-width,1px)}.bt-l{border-top-style:solid;border-top-width:var(--border-width,1px)}.br-l{border-right-style:solid;border-right-width:var(--border-width,1px)}.bb-l{border-bottom-style:solid;border-bottom-width:var(--border-width,1px)}.bl-l{border-left-style:solid;border-left-width:var(--border-width,1px)}.bn-l{border-style:none;border-width:0}}.b--color{border-color:var(--border-color,gray)}.b--light{border-color:var(--overlay-tint-2,gray)}.b--dark{border-color:var(--overlay-shadow-9,gray)}.b--transparent{border-color:transparent}.b--current{border-color:currentColor}.b--inherit{border-color:inherit}.b--initial{border-color:initial}.b--unset{border-color:unset}.br-primary{border-radius:var(--border-radius,6px)}.br0{border-radius:var(--border-radius-0,0)}.br1{border-radius:var(--border-radius-1,4px)}.br2{border-radius:var(--border-radius-2,6px)}.br3{border-radius:var(--border-radius-3,8px)}.br4{border-radius:var(--border-radius-4,12px)}.br5{border-radius:var(--border-radius-5,16px)}.br6{border-radius:var(--border-radius-6,20px)}.br7{border-radius:var(--border-radius-7,24px)}.br8{border-radius:var(--border-radius-8,32px)}.br9{border-radius:var(--border-radius-9,48px)}.br10{border-radius:var(--border-radius-10,64px)}.br11{border-radius:var(--border-radius-11,9999px)}.br--bottom{border-top-left-radius:0;border-top-right-radius:0}.br--top{border-bottom-right-radius:0}.br--right,.br--top{border-bottom-left-radius:0}.br--right{border-top-left-radius:0}.br--left{border-top-right-radius:0;border-bottom-right-radius:0}.br-inherit{border-radius:inherit}.br-initial{border-radius:initial}.br-unset{border-radius:unset}@container (min-width:30em){.br-primary-s{border-radius:var(--border-radius,6px)}.br0-s{border-radius:var(--border-radius-0,0)}.br1-s{border-radius:var(--border-radius-1,4px)}.br2-s{border-radius:var(--border-radius-2,6px)}.br3-s{border-radius:var(--border-radius-3,8px)}.br4-s{border-radius:var(--border-radius-4,12px)}.br5-s{border-radius:var(--border-radius-5,16px)}.br6-s{border-radius:var(--border-radius-6,20px)}.br7-s{border-radius:var(--border-radius-7,24px)}.br8-s{border-radius:var(--border-radius-8,32px)}.br9-s{border-radius:var(--border-radius-9,48px)}.br10-s{border-radius:var(--border-radius-10,64px)}.br11-s{border-radius:var(--border-radius-11,9999px)}.br--bottom-s{border-top-left-radius:0;border-top-right-radius:0}.br--top-s{border-bottom-right-radius:0}.br--right-s,.br--top-s{border-bottom-left-radius:0}.br--right-s{border-top-left-radius:0}.br--left-s{border-top-right-radius:0;border-bottom-right-radius:0}.br-inherit-s{border-radius:inherit}.br-initial-s{border-radius:initial}.br-unset-s{border-radius:unset}}@container (min-width:48em){.br-primary-m{border-radius:var(--border-radius,6px)}.br0-m{border-radius:var(--border-radius-0,0)}.br1-m{border-radius:var(--border-radius-1,4px)}.br2-m{border-radius:var(--border-radius-2,6px)}.br3-m{border-radius:var(--border-radius-3,8px)}.br4-m{border-radius:var(--border-radius-4,12px)}.br5-m{border-radius:var(--border-radius-5,16px)}.br6-m{border-radius:var(--border-radius-6,20px)}.br7-m{border-radius:var(--border-radius-7,24px)}.br8-m{border-radius:var(--border-radius-8,32px)}.br9-m{border-radius:var(--border-radius-9,48px)}.br10-m{border-radius:var(--border-radius-10,64px)}.br11-m{border-radius:var(--border-radius-11,9999px)}.br--bottom-m{border-top-left-radius:0;border-top-right-radius:0}.br--top-m{border-bottom-right-radius:0}.br--right-m,.br--top-m{border-bottom-left-radius:0}.br--right-m{border-top-left-radius:0}.br--left-m{border-top-right-radius:0;border-bottom-right-radius:0}.br-inherit-m{border-radius:inherit}.br-initial-m{border-radius:initial}.br-unset-m{border-radius:unset}}@container (min-width:64em){.br-primary-l{border-radius:var(--border-radius,6px)}.br0-l{border-radius:var(--border-radius-0,0)}.br1-l{border-radius:var(--border-radius-1,4px)}.br2-l{border-radius:var(--border-radius-2,6px)}.br3-l{border-radius:var(--border-radius-3,8px)}.br4-l{border-radius:var(--border-radius-4,12px)}.br5-l{border-radius:var(--border-radius-5,16px)}.br6-l{border-radius:var(--border-radius-6,20px)}.br7-l{border-radius:var(--border-radius-7,24px)}.br8-l{border-radius:var(--border-radius-8,32px)}.br9-l{border-radius:var(--border-radius-9,48px)}.br10-l{border-radius:var(--border-radius-10,64px)}.br11-l{border-radius:var(--border-radius-11,9999px)}.br--bottom-l{border-top-left-radius:0;border-top-right-radius:0}.br--top-l{border-bottom-right-radius:0}.br--right-l,.br--top-l{border-bottom-left-radius:0}.br--right-l{border-top-left-radius:0}.br--left-l{border-top-right-radius:0;border-bottom-right-radius:0}.br-inherit-l{border-radius:inherit}.br-initial-l{border-radius:initial}.br-unset-l{border-radius:unset}}.b--dotted{border-style:dotted}.b--dashed{border-style:dashed}.b--solid{border-style:solid}.b--none{border-style:none}@container (min-width:30em){.b--dotted-s{border-style:dotted}.b--dashed-s{border-style:dashed}.b--solid-s{border-style:solid}.b--none-s{border-style:none}}@container (min-width:48em){.b--dotted-m{border-style:dotted}.b--dashed-m{border-style:dashed}.b--solid-m{border-style:solid}.b--none-m{border-style:none}}@container (min-width:64em){.b--dotted-l{border-style:dotted}.b--dashed-l{border-style:dashed}.b--solid-l{border-style:solid}.b--none-l{border-style:none}}.bw{border-width:var(--border-width,1px)}.bw0{border-width:var(--border-width-0,0)}.bw1{border-width:var(--border-width-1,1px)}.bw2{border-width:var(--border-width-2,2px)}.bw3{border-width:var(--border-width-3,4px)}.bw4{border-width:var(--border-width-4,8px)}.bw5{border-width:var(--border-width-5,16px)}.bt-0{border-top-width:0}.br-0{border-right-width:0}.bb-0{border-bottom-width:0}.bl-0{border-left-width:0}@container (min-width:30em){.bw-s{border-width:var(--border-width,1px)}.bw0-s{border-width:var(--border-width-0,0)}.bw1-s{border-width:var(--border-width-1,1px)}.bw2-s{border-width:var(--border-width-2,2px)}.bw3-s{border-width:var(--border-width-3,4px)}.bw4-s{border-width:var(--border-width-4,8px)}.bw5-s{border-width:var(--border-width-5,16px)}.bt-0-s{border-top-width:0}.br-0-s{border-right-width:0}.bb-0-s{border-bottom-width:0}.bl-0-s{border-left-width:0}}@container (min-width:48em){.bw-m{border-width:var(--border-width,1px)}.bw0-m{border-width:var(--border-width-0,0)}.bw1-m{border-width:var(--border-width-1,1px)}.bw2-m{border-width:var(--border-width-2,2px)}.bw3-m{border-width:var(--border-width-3,4px)}.bw4-m{border-width:var(--border-width-4,8px)}.bw5-m{border-width:var(--border-width-5,16px)}.bt-0-m{border-top-width:0}.br-0-m{border-right-width:0}.bb-0-m{border-bottom-width:0}.bl-0-m{border-left-width:0}}@container (min-width:64em){.bw-l{border-width:var(--border-width,1px)}.bw0-l{border-width:var(--border-width-0,0)}.bw1-l{border-width:var(--border-width-1,1px)}.bw2-l{border-width:var(--border-width-2,2px)}.bw3-l{border-width:var(--border-width-3,4px)}.bw4-l{border-width:var(--border-width-4,8px)}.bw5-l{border-width:var(--border-width-5,16px)}.bt-0-l{border-top-width:0}.br-0-l{border-right-width:0}.bb-0-l{border-bottom-width:0}.bl-0-l{border-left-width:0}}.shadow{box-shadow:var(--shadow,inset 0 0 1px 0 rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.5)))}.shadow-hover:focus,.shadow-hover:hover{--shadow-opacity:.6}.shadow-border-1{box-shadow:inset 0 0 var(--shadow-border-width,1px) 0 rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.125))}.shadow-border-2{box-shadow:inset 0 0 var(--shadow-border-width,1px) 0 rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.25))}.shadow-border-3{box-shadow:inset 0 0 var(--shadow-border-width) 0 currentColor}.shadow-border-4{box-shadow:inset 0 0 2px 0 rgb(var(--shadow-color-light,255 255 255)/var(--shadow-opacity,.125))}.shadow-border-5{box-shadow:inset 0 0 2px 0 rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.125))}.shadow-border-6{box-shadow:inset 0 0 2px 0 currentColor}.shadow-1{box-shadow:0 1px 1px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.125)),0 2px 2px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.125)),0 4px 4px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.125)),0 8px 8px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.125)),0 16px 16px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.125))}.shadow-2{box-shadow:0 1px 1px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.125)),0 2px 2px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.125)),0 4px 4px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.125)),0 8px 8px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.125))}.shadow-3{--shadow-opacity:.11;box-shadow:0 1px 1px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.11)),0 2px 2px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.11)),0 4px 4px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.11)),0 8px 8px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.11)),0 16px 16px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.11)),0 32px 32px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.11))}.shadow-4{--shadow-opacity:.05;box-shadow:0 1px 1px rgb(var(--shadow-color,0 0 0)/calc(var(--shadow-opacity, .25) * 5)),0 2px 2px rgb(var(--shadow-color,0 0 0)/calc(var(--shadow-opacity, .2) * 4)),0 4px 4px rgb(var(--shadow-color,0 0 0)/calc(var(--shadow-opacity, .15) * 3)),0 8px 8px rgb(var(--shadow-color,0 0 0)/calc(var(--shadow-opacity, .1) * 2)),0 16px 16px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.05))}.shadow-5{--shadow-opacity:.08;box-shadow:0 var(--shadow-y) 1px rgb(var(--shadow-color,0 0 0)/calc(var(--shadow-opacity, .08) * 1)),0 calc(var(--shadow-y) * 2) 2px rgb(var(--shadow-color,0 0 0)/calc(var(--shadow-opacity, .12) * 1.5)),0 calc(var(--shadow-y) * 4) 4px rgb(var(--shadow-color,0 0 0)/calc(var(--shadow-opacity, .16) * 2)),0 calc(var(--shadow-y) * 8) 8px rgb(var(--shadow-color,0 0 0)/calc(var(--shadow-opacity, .2) * 2.5))}.shadow-6{--shadow-opacity:.07;box-shadow:0 1px 2px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.7)),0 2px 4px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.7)),0 4px 8px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.7)),0 8px 16px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.7)),0 16px 32px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.7)),0 32px 64px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.7))}.shadow-7{--shadow-opacity:.11;box-shadow:0 1px 1px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.11)),0 2px 2px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.11)),0 4px 4px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.11)),0 6px 8px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.11)),0 8px 16px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.11))}.shadow-8{--shadow-opacity:.09;box-shadow:0 2px 1px rgb(var(--shadow-color,0 0 0)/.09),0 4px 2px rgb(var(--shadow-color,0 0 0)/.09),0 8px 4px rgb(var(--shadow-color,0 0 0)/.09),0 16px 8px rgb(var(--shadow-color,0 0 0)/.09),0 32px 16px rgb(var(--shadow-color,0 0 0)/.09)}.text-shadow-1{text-shadow:rgb(var(--shadow-color)) -4px 4px 0}.text-shadow-2{text-shadow:rgb(var(--shadow-color)) -8px 8px 0}.text-shadow-3{text-shadow:rgb(var(--shadow-color)/var(--shadow-opacity,.5)) -8px 8px 0}.text-shadow-4{text-shadow:rgba(var(--shadow-color)/var(--shadow-opacity,.5)) -4px 4px 8px}.text-shadow-5{text-shadow:rgb(var(--shadow-color)) 2px 0 0,rgb(var(--shadow-color)) 0 2px 0,rgb(var(--shadow-color)) -2px 0 0,rgb(var(--shadow-color)) 0 -2px 0,rgb(var(--shadow-color)) -2px -2px 0,rgb(var(--shadow-color)) 2px -2px 0,rgb(var(--shadow-color)) 2px 2px 0,rgb(var(--shadow-color)) -2px 2px 0}.text-shadow-6{text-shadow:rgb(var(--shadow-color-invert)) 2px 0 0,rgb(var(--shadow-color-invert)) 0 2px 0,rgb(var(--shadow-color-invert)) -2px 0 0,rgb(var(--shadow-color-invert)) 0 -2px 0,rgb(var(--shadow-color-invert)) -2px -2px 0,rgb(var(--shadow-color-invert)) 2px -2px 0,rgb(var(--shadow-color-invert)) 2px 2px 0,rgb(var(--shadow-color-invert)) -2px 2px 0}.pre{max-width:100%;overflow:auto}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.top-1{top:var(--size,1rem)}.right-1{right:var(--size,1rem)}.bottom-1{bottom:var(--size,1rem)}.left-1{left:var(--size,1rem)}.top-2{top:calc(var(--size, 1rem) * 2)}.right-2{right:calc(var(--size, 1rem) * 2)}.bottom-2{bottom:calc(var(--size, 1rem) * 2)}.left-2{left:calc(var(--size, 1rem) * 2)}.top--1{top:calc(var(--size, 1rem) * -1)}.right--1{right:calc(var(--size, 1rem) * -1)}.bottom--1{bottom:calc(var(--size, 1rem) * -1)}.left--1{left:calc(var(--size, 1rem) * -1)}.top--2{top:calc(var(--size, 1rem) * -2)}.right--2{right:calc(var(--size, 1rem) * -2)}.bottom--2{bottom:calc(var(--size, 1rem) * -2)}.left--2{left:calc(var(--size, 1rem) * -2)}.inset-0{inset:0}@container (min-width:30em){.top-0-s{top:0}.left-0-s{left:0}.right-0-s{right:0}.bottom-0-s{bottom:0}.top-1-s{top:var(--size,1rem)}.left-1-s{left:var(--size,1rem)}.right-1-s{right:var(--size,1rem)}.bottom-1-s{bottom:var(--size,1rem)}.top-2-s{top:calc(var(--size, 1rem) * 2)}.left-2-s{left:calc(var(--size, 1rem) * 2)}.right-2-s{right:calc(var(--size, 1rem) * 2)}.bottom-2-s{bottom:calc(var(--size, 1rem) * 2)}.top--1-s{top:calc(var(--size, 1rem) * -1)}.right--1-s{right:calc(var(--size, 1rem) * -1)}.bottom--1-s{bottom:calc(var(--size, 1rem) * -1)}.left--1-s{left:calc(var(--size, 1rem) * -1)}.top--2-s{top:calc(var(--size, 1rem) * -2)}.right--2-s{right:calc(var(--size, 1rem) * -2)}.bottom--2-s{bottom:calc(var(--size, 1rem) * -2)}.left--2-s{left:calc(var(--size, 1rem) * -2)}.inset-0-s{inset:0}}@container (min-width:48em){.top-0-m{top:0}.left-0-m{left:0}.right-0-m{right:0}.bottom-0-m{bottom:0}.top-1-m{top:var(--size,1rem)}.left-1-m{left:var(--size,1rem)}.right-1-m{right:var(--size,1rem)}.bottom-1-m{bottom:var(--size,1rem)}.top-2-m{top:calc(var(--size, 1rem) * 2)}.left-2-m{left:calc(var(--size, 1rem) * 2)}.right-2-m{right:calc(var(--size, 1rem) * 2)}.bottom-2-m{bottom:calc(var(--size, 1rem) * 2)}.top--1-m{top:calc(var(--size, 1rem) * -1)}.right--1-m{right:calc(var(--size, 1rem) * -1)}.bottom--1-m{bottom:calc(var(--size, 1rem) * -1)}.left--1-m{left:calc(var(--size, 1rem) * -1)}.top--2-m{top:calc(var(--size, 1rem) * -2)}.right--2-m{right:calc(var(--size, 1rem) * -2)}.bottom--2-m{bottom:calc(var(--size, 1rem) * -2)}.left--2-m{left:calc(var(--size, 1rem) * -2)}.inset-0-m{inset:0}}@container (min-width:64em){.top-0-l{top:0}.left-0-l{left:0}.right-0-l{right:0}.bottom-0-l{bottom:0}.top-1-l{top:var(--size,1rem)}.left-1-l{left:var(--size,1rem)}.right-1-l{right:var(--size,1rem)}.bottom-1-l{bottom:var(--size,1rem)}.top-2-l{top:calc(var(--size, 1rem) * 2)}.left-2-l{left:calc(var(--size, 1rem) * 2)}.right-2-l{right:calc(var(--size, 1rem) * 2)}.bottom-2-l{bottom:calc(var(--size, 1rem) * 2)}.top--1-l{top:calc(var(--size, 1rem) * -1)}.right--1-l{right:calc(var(--size, 1rem) * -1)}.bottom--1-l{bottom:calc(var(--size, 1rem) * -1)}.left--1-l{left:calc(var(--size, 1rem) * -1)}.top--2-l{top:calc(var(--size, 1rem) * -2)}.right--2-l{right:calc(var(--size, 1rem) * -2)}.bottom--2-l{bottom:calc(var(--size, 1rem) * -2)}.left--2-l{left:calc(var(--size, 1rem) * -2)}.inset-0-l{inset:0}}.cf:after,.cf:before{content:" ";display:table}.cf:after{clear:both}.cl{clear:left}.cr{clear:right}.cb{clear:both}.cn{clear:none}.dn{display:none}.di{display:inline}.db{display:block}.dib{display:inline-block}.df,.flex{display:flex}.dif,.inline-flex{display:inline-flex}.dg,.grid{display:grid}.dig,.inline-grid{display:inline-grid}@container (min-width:30em){.dn-s{display:none}.di-s{display:inline}.db-s{display:block}.dib-s{display:inline-block}.df-s,.flex-s{display:flex}.dif-s,.inline-flex-s{display:inline-flex}.dg-s,.grid-s{display:grid}.dig-s,.inline-grid-s{display:inline-grid}}@container (min-width:48em){.dn-m{display:none}.di-m{display:inline}.db-m{display:block}.dib-m{display:inline-block}.df-m,.flex-m{display:flex}.dif-m,.inline-flex-m{display:inline-flex}.dg-m,.grid-m{display:grid}.dig-m,.inline-grid-m{display:inline-grid}}@container (min-width:64em){.dn-l{display:none}.di-l{display:inline}.db-l{display:block}.dib-l{display:inline-block}.df-l,.flex-l{display:flex}.dif-l,.inline-flex-l{display:inline-flex}.dg-l,.grid-l{display:grid}.dig-l,.inline-grid-l{display:inline-grid}}.glass1{background:hsla(0,0%,100%,0)}.glass1,.glass2{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.15)}.glass2{background:hsla(0,0%,100%,.05)}.glass3{background:hsla(0,0%,100%,.15)}.glass3,.glass4{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.15)}.glass4{background:hsla(0,0%,100%,.25)}.glass5{background:hsla(0,0%,100%,0)}.glass5,.glass6{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid hsla(0,0%,100%,.15)}.glass6{background:hsla(0,0%,100%,.05)}.glass7{background:hsla(0,0%,100%,.15)}.glass7,.glass8{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid hsla(0,0%,100%,.15)}.glass8{background:hsla(0,0%,100%,.25)}.glass9{background:hsla(0,0%,100%,.25)}.glass9,.glass10{box-shadow:0 4px 30px rgba(0,0,0,.1);border:1px solid hsla(0,0%,100%,.15)}.glass10{background:hsla(0,0%,100%,0)}.glass1-hover:hover{background:hsla(0,0%,100%,0)}.glass1-hover:hover,.glass2-hover:hover{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.15)}.glass2-hover:hover{background:hsla(0,0%,100%,.05)}.glass3-hover:hover{background:hsla(0,0%,100%,.15)}.glass3-hover:hover,.glass4-hover:hover{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.15)}.glass4-hover:hover{background:hsla(0,0%,100%,.25)}.glass5-hover:hover{background:hsla(0,0%,100%,0)}.glass5-hover:hover,.glass6-hover:hover{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid hsla(0,0%,100%,.15)}.glass6-hover:hover{background:hsla(0,0%,100%,.05)}.glass7-hover:hover{background:hsla(0,0%,100%,.15)}.glass7-hover:hover,.glass8-hover:hover{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid hsla(0,0%,100%,.15)}.glass8-hover:hover{background:hsla(0,0%,100%,.25)}.glass9-hover:hover{background:hsla(0,0%,100%,.25)}.glass9-hover:hover,.glass10-hover:hover{box-shadow:0 4px 30px rgba(0,0,0,.1);border:1px solid hsla(0,0%,100%,.15)}.glass10-hover:hover{background:hsla(0,0%,100%,0)}.glass1-focus:focus{background:hsla(0,0%,100%,0)}.glass1-focus:focus,.glass2-focus:focus{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.15)}.glass2-focus:focus{background:hsla(0,0%,100%,.05)}.glass3-focus:focus{background:hsla(0,0%,100%,.15)}.glass3-focus:focus,.glass4-focus:focus{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.15)}.glass4-focus:focus{background:hsla(0,0%,100%,.25)}.glass5-focus:focus{background:hsla(0,0%,100%,0)}.glass5-focus:focus,.glass6-focus:focus{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid hsla(0,0%,100%,.15)}.glass6-focus:focus{background:hsla(0,0%,100%,.05)}.glass7-focus:focus{background:hsla(0,0%,100%,.15)}.glass7-focus:focus,.glass8-focus:focus{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid hsla(0,0%,100%,.15)}.glass8-focus:focus{background:hsla(0,0%,100%,.25)}.glass9-focus:focus{background:hsla(0,0%,100%,.25)}.glass9-focus:focus,.glass10-focus:focus{box-shadow:0 4px 30px rgba(0,0,0,.1);border:1px solid hsla(0,0%,100%,.15)}.glass10-focus:focus{background:hsla(0,0%,100%,0)}.g0{gap:var(--spacing-0,0)}.g1{gap:var(--spacing-1,4px)}.g2{gap:var(--spacing-2,8px)}.g3{gap:var(--spacing-3,16px)}.g4{gap:var(--spacing-4,32px)}.g5{gap:var(--spacing-5,64px)}.g6{gap:var(--spacing-6,128px)}.g7{gap:var(--spacing-7,256px)}@container (min-width:30em){.g0-s{gap:var(--spacing-0,0)}.g1-s{gap:var(--spacing-1,4px)}.g2-s{gap:var(--spacing-2,8px)}.g3-s{gap:var(--spacing-3,16px)}.g4-s{gap:var(--spacing-4,32px)}.g5-s{gap:var(--spacing-5,64px)}.g6-s{gap:var(--spacing-6,128px)}.g7-s{gap:var(--spacing-7,256px)}}@container (min-width:48em){.g0-m{gap:var(--spacing-0,0)}.g1-m{gap:var(--spacing-1,4px)}.g2-m{gap:var(--spacing-2,8px)}.g3-m{gap:var(--spacing-3,16px)}.g4-m{gap:var(--spacing-4,32px)}.g5-m{gap:var(--spacing-5,64px)}.g6-m{gap:var(--spacing-6,128px)}.g7-m{gap:var(--spacing-7,256px)}}@container (min-width:64em){.g0-l{gap:var(--spacing-0)}.g1-l{gap:var(--spacing-1)}.g2-l{gap:var(--spacing-2)}.g3-l{gap:var(--spacing-3)}.g4-l{gap:var(--spacing-4)}.g5-l{gap:var(--spacing-5)}.g6-l{gap:var(--spacing-6)}.g7-l{gap:var(--spacing-7)}}.gc0{gap-column:var(--spacing-0,0)}.gc1{gap-column:var(--spacing-1,4px)}.gc2{gap-column:var(--spacing-2,8px)}.gc3{gap-column:var(--spacing-3,16px)}.gc4{gap-column:var(--spacing-4,32px)}.gc5{gap-column:var(--spacing-5,64px)}.gc6{gap-column:var(--spacing-6,128px)}.gc7{gap-column:var(--spacing-7,256px)}@container (min-width:30em){.gc0-s{gap-column:var(--spacing-0,0)}.gc1-s{gap-column:var(--spacing-1,4px)}.gc2-s{gap-column:var(--spacing-2,8px)}.gc3-s{gap-column:var(--spacing-3,16px)}.gc4-s{gap-column:var(--spacing-4,32px)}.gc5-s{gap-column:var(--spacing-5,64px)}.gc6-s{gap-column:var(--spacing-6,128px)}.gc7-s{gap-column:var(--spacing-7,256px)}}@container (min-width:48em){.gc0-m{gap-column:var(--spacing-0,0)}.gc1-m{gap-column:var(--spacing-1,4px)}.gc2-m{gap-column:var(--spacing-2,8px)}.gc3-m{gap-column:var(--spacing-3,16px)}.gc4-m{gap-column:var(--spacing-4,32px)}.gc5-m{gap-column:var(--spacing-5,64px)}.gc6-m{gap-column:var(--spacing-6,128px)}.gc7-m{gap-column:var(--spacing-7,256px)}}@container (min-width:64em){.gc0-l{gap-column:var(--spacing-0)}.gc1-l{gap-column:var(--spacing-1)}.gc2-l{gap-column:var(--spacing-2)}.gc3-l{gap-column:var(--spacing-3)}.gc4-l{gap-column:var(--spacing-4)}.gc5-l{gap-column:var(--spacing-5)}.gc6-l{gap-column:var(--spacing-6)}.gc7-l{gap-column:var(--spacing-7)}}.gr0{gap-row:var(--spacing-0,0)}.gr1{gap-row:var(--spacing-1,4px)}.gr2{gap-row:var(--spacing-2,8px)}.gr3{gap-row:var(--spacing-3,16px)}.gr4{gap-row:var(--spacing-4,32px)}.gr5{gap-row:var(--spacing-5,64px)}.gr6{gap-row:var(--spacing-6,128px)}.gr7{gap-row:var(--spacing-7,256px)}@container (min-width:30em){.gr0-s{gap-row:var(--spacing-0,0)}.gr1-s{gap-row:var(--spacing-1,4px)}.gr2-s{gap-row:var(--spacing-2,8px)}.gr3-s{gap-row:var(--spacing-3,16px)}.gr4-s{gap-row:var(--spacing-4,32px)}.gr5-s{gap-row:var(--spacing-5,64px)}.gr6-s{gap-row:var(--spacing-6,128px)}.gr7-s{gap-row:var(--spacing-7,256px)}}@container (min-width:48em){.gr0-m{gap-row:var(--spacing-0,0)}.gr1-m{gap-row:var(--spacing-1,4px)}.gr2-m{gap-row:var(--spacing-2,8px)}.gr3-m{gap-row:var(--spacing-3,16px)}.gr4-m{gap-row:var(--spacing-4,32px)}.gr5-m{gap-row:var(--spacing-5,64px)}.gr6-m{gap-row:var(--spacing-6,128px)}.gr7-m{gap-row:var(--spacing-7,256px)}}@container (min-width:64em){.gr0-l{gap-row:var(--spacing-0)}.gr1-l{gap-row:var(--spacing-1)}.gr2-l{gap-row:var(--spacing-2)}.gr3-l{gap-row:var(--spacing-3)}.gr4-l{gap-row:var(--spacing-4)}.gr5-l{gap-row:var(--spacing-5)}.gr6-l{gap-row:var(--spacing-6)}.gr7-l{gap-row:var(--spacing-7)}}.cols-1{grid-template-columns:repeat(1,1fr)}.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}.cols-5{grid-template-columns:repeat(5,1fr)}.cols-6{grid-template-columns:repeat(6,1fr)}.cols-7{grid-template-columns:repeat(7,1fr)}.cols-8{grid-template-columns:repeat(8,1fr)}.cols-9{grid-template-columns:repeat(9,1fr)}.cols-10{grid-template-columns:repeat(10,1fr)}.cols-11{grid-template-columns:repeat(11,1fr)}.cols-12{grid-template-columns:repeat(12,1fr)}.cols-13{grid-template-columns:repeat(13,1fr)}.cols-14{grid-template-columns:repeat(14,1fr)}.cols-15{grid-template-columns:repeat(15,1fr)}.cols-16{grid-template-columns:repeat(16,1fr)}.cols-min-32{grid-template-columns:repeat(auto-fill,minmax(32px,1fr))}.cols-min-64{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}.cols-min-128{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}.cols-min-192{grid-template-columns:repeat(auto-fill,minmax(192px,1fr))}.cols-min-240{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.cols-min-256{grid-template-columns:repeat(auto-fill,minmax(256px,1fr))}.cols-min-320{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.cols-min-480{grid-template-columns:repeat(auto-fill,minmax(480px,1fr))}.masonry{grid-template-columns:masonry}.subgrid{grid-template-columns:subgrid}.cols-none{grid-template-columns:none}@container (min-width:30em){.cols-1-s{grid-template-columns:repeat(1,1fr)}.cols-2-s{grid-template-columns:repeat(2,1fr)}.cols-3-s{grid-template-columns:repeat(3,1fr)}.cols-4-s{grid-template-columns:repeat(4,1fr)}.cols-5-s{grid-template-columns:repeat(5,1fr)}.cols-6-s{grid-template-columns:repeat(6,1fr)}.cols-7-s{grid-template-columns:repeat(7,1fr)}.cols-8-s{grid-template-columns:repeat(8,1fr)}.cols-9-s{grid-template-columns:repeat(9,1fr)}.cols-10-s{grid-template-columns:repeat(10,1fr)}.cols-11-s{grid-template-columns:repeat(11,1fr)}.cols-12-s{grid-template-columns:repeat(12,1fr)}.cols-13-s{grid-template-columns:repeat(13,1fr)}.cols-14-s{grid-template-columns:repeat(14,1fr)}.cols-15-s{grid-template-columns:repeat(15,1fr)}.cols-16-s{grid-template-columns:repeat(16,1fr)}.cols-min-32-s,.cols-min-64-s{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}.cols-min-128-s{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}.cols-min-192-s{grid-template-columns:repeat(auto-fill,minmax(192px,1fr))}.cols-min-240-s{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.cols-min-256-s{grid-template-columns:repeat(auto-fill,minmax(256px,1fr))}.cols-min-320-s{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.cols-min-480-s{grid-template-columns:repeat(auto-fill,minmax(480px,1fr))}.masonry-s{grid-template-columns:masonry}.subgrid-s{grid-template-columns:subgrid}.cols-none-s{grid-template-columns:none}}@container (min-width:48em){.cols-1-m{grid-template-columns:repeat(1,1fr)}.cols-2-m{grid-template-columns:repeat(2,1fr)}.cols-3-m{grid-template-columns:repeat(3,1fr)}.cols-4-m{grid-template-columns:repeat(4,1fr)}.cols-5-m{grid-template-columns:repeat(5,1fr)}.cols-6-m{grid-template-columns:repeat(6,1fr)}.cols-7-m{grid-template-columns:repeat(7,1fr)}.cols-8-m{grid-template-columns:repeat(8,1fr)}.cols-9-m{grid-template-columns:repeat(9,1fr)}.cols-10-m{grid-template-columns:repeat(10,1fr)}.cols-11-m{grid-template-columns:repeat(11,1fr)}.cols-12-m{grid-template-columns:repeat(12,1fr)}.cols-13-m{grid-template-columns:repeat(13,1fr)}.cols-14-m{grid-template-columns:repeat(14,1fr)}.cols-15-m{grid-template-columns:repeat(15,1fr)}.cols-16-m{grid-template-columns:repeat(16,1fr)}.cols-min-64-m{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}.cols-min-128-m{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}.cols-min-192-m{grid-template-columns:repeat(auto-fill,minmax(192px,1fr))}.cols-min-240-m{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.cols-min-256-m{grid-template-columns:repeat(auto-fill,minmax(256px,1fr))}.cols-min-320-m{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.cols-min-480-m{grid-template-columns:repeat(auto-fill,minmax(480px,1fr))}.masonry-m{grid-template-columns:masonry}.subgrid-m{grid-template-columns:subgrid}.cols-none-m{grid-template-columns:none}}@container (min-width:64em){.cols-1-l{grid-template-columns:repeat(1,1fr)}.cols-2-l{grid-template-columns:repeat(2,1fr)}.cols-3-l{grid-template-columns:repeat(3,1fr)}.cols-4-l{grid-template-columns:repeat(4,1fr)}.cols-5-l{grid-template-columns:repeat(5,1fr)}.cols-6-l{grid-template-columns:repeat(6,1fr)}.cols-7-l{grid-template-columns:repeat(7,1fr)}.cols-8-l{grid-template-columns:repeat(8,1fr)}.cols-9-l{grid-template-columns:repeat(9,1fr)}.cols-10-l{grid-template-columns:repeat(10,1fr)}.cols-11-l{grid-template-columns:repeat(11,1fr)}.cols-12-l{grid-template-columns:repeat(12,1fr)}.cols-13-l{grid-template-columns:repeat(13,1fr)}.cols-14-l{grid-template-columns:repeat(14,1fr)}.cols-15-l{grid-template-columns:repeat(15,1fr)}.cols-16-l{grid-template-columns:repeat(16,1fr)}.cols-min-64-l{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}.cols-min-128-l{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}.cols-min-192-l{grid-template-columns:repeat(auto-fill,minmax(192px,1fr))}.cols-min-240-l{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.cols-min-256-l{grid-template-columns:repeat(auto-fill,minmax(256px,1fr))}.cols-min-320-l{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.cols-min-480-l{grid-template-columns:repeat(auto-fill,minmax(480px,1fr))}.masonry-l{grid-template-columns:masonry}.subgrid-l{grid-template-columns:subgrid}.cols-none-l{grid-template-columns:none}}.col-1{grid-column:span 1/span 1}.col-2{grid-column:span 2/span 2}.col-3{grid-column:span 3/span 3}.col-4{grid-column:span 4/span 4}.col-5{grid-column:span 5/span 5}.col-6{grid-column:span 6/span 6}.col-7{grid-column:span 7/span 7}.col-8{grid-column:span 8/span 8}.col-9{grid-column:span 9/span 9}.col-10{grid-column:span 10/span 10}.col-11{grid-column:span 11/span 11}.col-12{grid-column:span 12/span 12}.col-13{grid-column:span 13/span 13}.col-14{grid-column:span 14/span 14}.col-15{grid-column:span 15/span 15}.col-16{grid-column:span 16/span 16}.col-full{grid-column:1/-1}.col-center1{grid-column:2/-2}.col-center2{grid-column:3/-3}.col-center3{grid-column:4/-4}.col-center4{grid-column:6/-6}.col-auto{grid-column:auto}.start-1{grid-column-start:1}.start-2{grid-column-start:2}.start-3{grid-column-start:3}.start-4{grid-column-start:4}.start-5{grid-column-start:5}.start-6{grid-column-start:6}.start-7{grid-column-start:7}.start-8{grid-column-start:8}.start-9{grid-column-start:9}.start-10{grid-column-start:10}.start-11{grid-column-start:11}.start-12{grid-column-start:12}.start-13{grid-column-start:13}.start-14{grid-column-start:14}.start-15{grid-column-start:15}.end-1{grid-column-end:1}.end-2{grid-column-end:2}.end-3{grid-column-end:3}.end-4{grid-column-end:4}.end-5{grid-column-end:5}.end-6{grid-column-end:6}.end-7{grid-column-end:7}.end-8{grid-column-end:8}.end-9{grid-column-end:9}.end-10{grid-column-end:10}.end-11{grid-column-end:11}.end-12{grid-column-end:12}.end-13{grid-column-end:13}.end-14{grid-column-end:14}.end-15{grid-column-end:15}.end-16{grid-column-end:16}@container (min-width:30em){.col-1-s{grid-column:span 1/span 1}.col-2-s{grid-column:span 2/span 2}.col-3-s{grid-column:span 3/span 3}.col-4-s{grid-column:span 4/span 4}.col-5-s{grid-column:span 5/span 5}.col-6-s{grid-column:span 6/span 6}.col-7-s{grid-column:span 7/span 7}.col-8-s{grid-column:span 8/span 8}.col-9-s{grid-column:span 9/span 9}.col-10-s{grid-column:span 10/span 10}.col-11-s{grid-column:span 11/span 11}.col-12-s{grid-column:span 12/span 12}.col-13-s{grid-column:span 13/span 13}.col-14-s{grid-column:span 14/span 14}.col-15-s{grid-column:span 15/span 15}.col-16-s{grid-column:span 16/span 16}.col-full-s{grid-column:1/-1}.col-center1-s{grid-column:2/-2}.col-center2-s{grid-column:3/-3}.col-center3-s{grid-column:4/-4}.col-center4-s{grid-column:6/-6}.col-auto-s{grid-column:auto}.start-1-s{grid-column-start:1}.start-2-s{grid-column-start:2}.start-3-s{grid-column-start:3}.start-4-s{grid-column-start:4}.start-5-s{grid-column-start:5}.start-6-s{grid-column-start:6}.start-7-s{grid-column-start:7}.start-8-s{grid-column-start:8}.start-9-s{grid-column-start:9}.start-10-s{grid-column-start:10}.start-11-s{grid-column-start:11}.start-12-s{grid-column-start:12}.start-13-s{grid-column-start:13}.start-14-s{grid-column-start:14}.start-15-s{grid-column-start:15}.end-1-s{grid-column-end:1}.end-2-s{grid-column-end:2}.end-3-s{grid-column-end:3}.end-4-s{grid-column-end:4}.end-5-s{grid-column-end:5}.end-6-s{grid-column-end:6}.end-7-s{grid-column-end:7}.end-8-s{grid-column-end:8}.end-9-s{grid-column-end:9}.end-10-s{grid-column-end:10}.end-11-s{grid-column-end:11}.end-12-s{grid-column-end:12}.end-13-s{grid-column-end:13}.end-14-s{grid-column-end:14}.end-15-s{grid-column-end:15}.end-16-s{grid-column-end:16}}@container (min-width:48em){.col-1-m{grid-column:span 1/span 1}.col-2-m{grid-column:span 2/span 2}.col-3-m{grid-column:span 3/span 3}.col-4-m{grid-column:span 4/span 4}.col-5-m{grid-column:span 5/span 5}.col-6-m{grid-column:span 6/span 6}.col-7-m{grid-column:span 7/span 7}.col-8-m{grid-column:span 8/span 8}.col-9-m{grid-column:span 9/span 9}.col-10-m{grid-column:span 10/span 10}.col-11-m{grid-column:span 11/span 11}.col-12-m{grid-column:span 12/span 12}.col-13-m{grid-column:span 13/span 13}.col-14-m{grid-column:span 14/span 14}.col-15-m{grid-column:span 15/span 15}.col-16-m{grid-column:span 16/span 16}.col-full-m{grid-column:1/-1}.col-center1-m{grid-column:2/-2}.col-center2-m{grid-column:3/-3}.col-center3-m{grid-column:4/-4}.col-center4-m{grid-column:6/-6}.col-auto-m{grid-column:auto}.start-1-m{grid-column-start:1}.start-2-m{grid-column-start:2}.start-3-m{grid-column-start:3}.start-4-m{grid-column-start:4}.start-5-m{grid-column-start:5}.start-6-m{grid-column-start:6}.start-7-m{grid-column-start:7}.start-8-m{grid-column-start:8}.start-9-m{grid-column-start:9}.start-10-m{grid-column-start:10}.start-11-m{grid-column-start:11}.start-12-m{grid-column-start:12}.start-13-m{grid-column-start:13}.start-14-m{grid-column-start:14}.start-15-m{grid-column-start:15}.end-1-m{grid-column-end:1}.end-2-m{grid-column-end:2}.end-3-m{grid-column-end:3}.end-4-m{grid-column-end:4}.end-5-m{grid-column-end:5}.end-6-m{grid-column-end:6}.end-7-m{grid-column-end:7}.end-8-m{grid-column-end:8}.end-9-m{grid-column-end:9}.end-10-m{grid-column-end:10}.end-11-m{grid-column-end:11}.end-12-m{grid-column-end:12}.end-13-m{grid-column-end:13}.end-14-m{grid-column-end:14}.end-15-m{grid-column-end:15}.end-16-m{grid-column-end:16}}@container (min-width:64em){.col-1-l{grid-column:span 1/span 1}.col-2-l{grid-column:span 2/span 2}.col-3-l{grid-column:span 3/span 3}.col-4-l{grid-column:span 4/span 4}.col-5-l{grid-column:span 5/span 5}.col-6-l{grid-column:span 6/span 6}.col-7-l{grid-column:span 7/span 7}.col-8-l{grid-column:span 8/span 8}.col-9-l{grid-column:span 9/span 9}.col-10-l{grid-column:span 10/span 10}.col-11-l{grid-column:span 11/span 11}.col-12-l{grid-column:span 12/span 12}.col-13-l{grid-column:span 13/span 13}.col-14-l{grid-column:span 14/span 14}.col-15-l{grid-column:span 15/span 15}.col-16-l{grid-column:span 16/span 16}.col-full-l{grid-column:1/-1}.col-center1-l{grid-column:2/-2}.col-center2-l{grid-column:3/-3}.col-center3-l{grid-column:4/-4}.col-center4-l{grid-column:6/-6}.col-auto-l{grid-column:auto}.start-1-l{grid-column-start:1}.start-2-l{grid-column-start:2}.start-3-l{grid-column-start:3}.start-4-l{grid-column-start:4}.start-5-l{grid-column-start:5}.start-6-l{grid-column-start:6}.start-7-l{grid-column-start:7}.start-8-l{grid-column-start:8}.start-9-l{grid-column-start:9}.start-10-l{grid-column-start:10}.start-11-l{grid-column-start:11}.start-12-l{grid-column-start:12}.start-13-l{grid-column-start:13}.start-14-l{grid-column-start:14}.start-15-l{grid-column-start:15}.end-1-l{grid-column-end:1}.end-2-l{grid-column-end:2}.end-3-l{grid-column-end:3}.end-4-l{grid-column-end:4}.end-5-l{grid-column-end:5}.end-6-l{grid-column-end:6}.end-7-l{grid-column-end:7}.end-8-l{grid-column-end:8}.end-9-l{grid-column-end:9}.end-10-l{grid-column-end:10}.end-11-l{grid-column-end:11}.end-12-l{grid-column-end:12}.end-13-l{grid-column-end:13}.end-14-l{grid-column-end:14}.end-15-l{grid-column-end:15}.end-16-l{grid-column-end:16}}.row-auto{grid-row:auto}.row-start-1{grid-row-start:1}.row-start-2{grid-row-start:2}.row-start-3{grid-row-start:3}.row-start-4{grid-row-start:4}.row-start-5{grid-row-start:5}.row-start-6{grid-row-start:6}.row-start-7{grid-row-start:7}.row-start-8{grid-row-start:8}.row-start-9{grid-row-start:9}.row-start-10{grid-row-start:10}.row-start-11{grid-row-start:11}.row-start-12{grid-row-start:12}.row-start-13{grid-row-start:13}.row-start-14{grid-row-start:14}.row-start-15{grid-row-start:15}.row-start-16{grid-row-start:16}.row-end-1{grid-row-end:1}.row-end-2{grid-row-end:2}.row-end-3{grid-row-end:3}.row-end-4{grid-row-end:4}.row-end-5{grid-row-end:5}.row-end-6{grid-row-end:6}.row-end-7{grid-row-end:7}.row-end-8{grid-row-end:8}.row-end-9{grid-row-end:9}.row-end-10{grid-row-end:10}.row-end-11{grid-row-end:11}.row-end-12{grid-row-end:12}.row-end-13{grid-row-end:13}.row-end-14{grid-row-end:14}.row-end-15{grid-row-end:15}.row-end-16{grid-row-end:16}@container (min-width:30em){.row-auto-s{grid-row:auto}.row-start-1-s{grid-row-start:1}.row-start-2-s{grid-row-start:2}.row-start-3-s{grid-row-start:3}.row-start-4-s{grid-row-start:4}.row-start-5-s{grid-row-start:5}.row-start-6-s{grid-row-start:6}.row-start-7-s{grid-row-start:7}.row-start-8-s{grid-row-start:8}.row-start-9-s{grid-row-start:9}.row-start-10-s{grid-row-start:10}.row-start-11-s{grid-row-start:11}.row-start-12-s{grid-row-start:12}.row-start-13-s{grid-row-start:13}.row-start-14-s{grid-row-start:14}.row-start-15-s{grid-row-start:15}.row-start-16-s{grid-row-start:16}.row-end-1-s{grid-row-end:1}.row-end-2-s{grid-row-end:2}.row-end-3-s{grid-row-end:3}.row-end-4-s{grid-row-end:4}.row-end-5-s{grid-row-end:5}.row-end-6-s{grid-row-end:6}.row-end-7-s{grid-row-end:7}.row-end-8-s{grid-row-end:8}.row-end-9-s{grid-row-end:9}.row-end-10-s{grid-row-end:10}.row-end-11-s{grid-row-end:11}.row-end-12-s{grid-row-end:12}.row-end-13-s{grid-row-end:13}.row-end-14-s{grid-row-end:14}.row-end-15-s{grid-row-end:15}.row-end-16-s{grid-row-end:16}}@container (min-width:48em){.row-auto-m{grid-row:auto}.row-start-1-m{grid-row-start:1}.row-start-2-m{grid-row-start:2}.row-start-3-m{grid-row-start:3}.row-start-4-m{grid-row-start:4}.row-start-5-m{grid-row-start:5}.row-start-6-m{grid-row-start:6}.row-start-7-m{grid-row-start:7}.row-start-8-m{grid-row-start:8}.row-start-9-m{grid-row-start:9}.row-start-10-m{grid-row-start:10}.row-start-11-m{grid-row-start:11}.row-start-12-m{grid-row-start:12}.row-start-13-m{grid-row-start:13}.row-start-14-m{grid-row-start:14}.row-start-15-m{grid-row-start:15}.row-start-16-m{grid-row-start:16}.row-end-1-m{grid-row-end:1}.row-end-2-m{grid-row-end:2}.row-end-3-m{grid-row-end:3}.row-end-4-m{grid-row-end:4}.row-end-5-m{grid-row-end:5}.row-end-6-m{grid-row-end:6}.row-end-7-m{grid-row-end:7}.row-end-8-m{grid-row-end:8}.row-end-9-m{grid-row-end:9}.row-end-10-m{grid-row-end:10}.row-end-11-m{grid-row-end:11}.row-end-12-m{grid-row-end:12}.row-end-13-m{grid-row-end:13}.row-end-14-m{grid-row-end:14}.row-end-15-m{grid-row-end:15}.row-end-16-m{grid-row-end:16}}@container (min-width:64em){.row-auto-l{grid-row:auto}.row-start-1-l{grid-row-start:1}.row-start-2-l{grid-row-start:2}.row-start-3-l{grid-row-start:3}.row-start-4-l{grid-row-start:4}.row-start-5-l{grid-row-start:5}.row-start-6-l{grid-row-start:6}.row-start-7-l{grid-row-start:7}.row-start-8-l{grid-row-start:8}.row-start-9-l{grid-row-start:9}.row-start-10-l{grid-row-start:10}.row-start-11-l{grid-row-start:11}.row-start-12-l{grid-row-start:12}.row-start-13-l{grid-row-start:13}.row-start-14-l{grid-row-start:14}.row-start-15-l{grid-row-start:15}.row-start-16-l{grid-row-start:16}.row-end-1-l{grid-row-end:1}.row-end-2-l{grid-row-end:2}.row-end-3-l{grid-row-end:3}.row-end-4-l{grid-row-end:4}.row-end-5-l{grid-row-end:5}.row-end-6-l{grid-row-end:6}.row-end-7-l{grid-row-end:7}.row-end-8-l{grid-row-end:8}.row-end-9-l{grid-row-end:9}.row-end-10-l{grid-row-end:10}.row-end-11-l{grid-row-end:11}.row-end-12-l{grid-row-end:12}.row-end-13-l{grid-row-end:13}.row-end-14-l{grid-row-end:14}.row-end-15-l{grid-row-end:15}.row-end-16-l{grid-row-end:16}}.filter-none{-webkit-filter:none;filter:none}.blur1{-webkit-filter:blur(4px);filter:blur(4px)}.blur2{-webkit-filter:blur(16px);filter:blur(16px)}.blur3{-webkit-filter:blur(96px);filter:blur(96px)}.grayscale1{-webkit-filter:grayscale(0);filter:grayscale(0)}.grayscale2{-webkit-filter:grayscale(50%);filter:grayscale(50%)}.grayscale3{-webkit-filter:grayscale(100%);filter:grayscale(100%)}.hue-rotate0{-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}.hue-rotate1{-webkit-filter:hue-rotate(45deg);filter:hue-rotate(45deg)}.hue-rotate2{-webkit-filter:hue-rotate(90deg);filter:hue-rotate(90deg)}.hue-rotate3{-webkit-filter:hue-rotate(135deg);filter:hue-rotate(135deg)}.hue-rotate4{-webkit-filter:hue-rotate(180deg);filter:hue-rotate(180deg)}.hue-rotate5{-webkit-filter:hue-rotate(225deg);filter:hue-rotate(225deg)}.hue-rotate6{-webkit-filter:hue-rotate(270deg);filter:hue-rotate(270deg)}.hue-rotate7{-webkit-filter:hue-rotate(315deg);filter:hue-rotate(315deg)}.invert{-webkit-filter:invert(100%);filter:invert(100%)}.filter-none-hover:hover{-webkit-filter:none;filter:none}.blur1-hover:hover{-webkit-filter:blur(4px);filter:blur(4px)}.blur2-hover:hover{-webkit-filter:blur(16px);filter:blur(16px)}.blur3-hover:hover{-webkit-filter:blur(96px);filter:blur(96px)}.grayscale1-hover:hover{-webkit-filter:grayscale(0);filter:grayscale(0)}.grayscale2-hover:hover{-webkit-filter:grayscale(50%);filter:grayscale(50%)}.grayscale3-hover:hover{-webkit-filter:grayscale(100%);filter:grayscale(100%)}.hue-rotate0-hover:hover{-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}.hue-rotate1-hover:hover{-webkit-filter:hue-rotate(45deg);filter:hue-rotate(45deg)}.hue-rotate2-hover:hover{-webkit-filter:hue-rotate(90deg);filter:hue-rotate(90deg)}.hue-rotate3-hover:hover{-webkit-filter:hue-rotate(135deg);filter:hue-rotate(135deg)}.hue-rotate4-hover:hover{-webkit-filter:hue-rotate(180deg);filter:hue-rotate(180deg)}.hue-rotate5-hover:hover{-webkit-filter:hue-rotate(225deg);filter:hue-rotate(225deg)}.hue-rotate6-hover:hover{-webkit-filter:hue-rotate(270deg);filter:hue-rotate(270deg)}.hue-rotate7-hover:hover{-webkit-filter:hue-rotate(315deg);filter:hue-rotate(315deg)}.invert-hover:hover{-webkit-filter:invert(100%);filter:invert(100%)}.blur1-focus:focus{-webkit-filter:blur(4px);filter:blur(4px)}.blur2-focus:focus{-webkit-filter:blur(16px);filter:blur(16px)}.blur3-focus:focus{-webkit-filter:blur(96px);filter:blur(96px)}.grayscale1-focus:focus{-webkit-filter:grayscale(0);filter:grayscale(0)}.grayscale2-focus:focus{-webkit-filter:grayscale(50%);filter:grayscale(50%)}.grayscale3-focus:focus{-webkit-filter:grayscale(100%);filter:grayscale(100%)}.hue-rotate0-focus:focus{-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}.hue-rotate1-focus:focus{-webkit-filter:hue-rotate(45deg);filter:hue-rotate(45deg)}.hue-rotate2-focus:focus{-webkit-filter:hue-rotate(90deg);filter:hue-rotate(90deg)}.hue-rotate3-focus:focus{-webkit-filter:hue-rotate(135deg);filter:hue-rotate(135deg)}.hue-rotate4-focus:focus{-webkit-filter:hue-rotate(180deg);filter:hue-rotate(180deg)}.hue-rotate5-focus:focus{-webkit-filter:hue-rotate(225deg);filter:hue-rotate(225deg)}.hue-rotate6-focus:focus{-webkit-filter:hue-rotate(270deg);filter:hue-rotate(270deg)}.hue-rotate7-focus:focus{-webkit-filter:hue-rotate(315deg);filter:hue-rotate(315deg)}.invert-focus:focus{-webkit-filter:invert(100%);filter:invert(100%)}.flex-auto{flex:1 1 auto;min-width:0;min-height:0}.flex-none{flex:none}.flex-grow-0{flex-grow:0}.flex-grow-1{flex-grow:1}.flex-shrink-0{flex-shrink:0}.flex-shrink-1{flex-shrink:1}@container (min-width:30em){.flex-s{display:flex}.inline-flex-s{display:inline-flex}.flex-auto-s{flex:1 1 auto;min-width:0;min-height:0}.flex-none-s{flex:none}.flex-grow-0-s{flex-grow:0}.flex-grow-1-s{flex-grow:1}.flex-shrink-0-s{flex-shrink:0}.flex-shrink-1-s{flex-shrink:1}}@container (min-width:48em){.flex-m{display:flex}.inline-flex-m{display:inline-flex}.flex-auto-m{flex:1 1 auto;min-width:0;min-height:0}.flex-none-m{flex:none}.flex-grow-0-m{flex-grow:0}.flex-grow-1-m{flex-grow:1}.flex-shrink-0-m{flex-shrink:0}.flex-shrink-1-m{flex-shrink:1}}@container (min-width:64em){.flex-l{display:flex}.inline-flex-l{display:inline-flex}.flex-auto-l{flex:1 1 auto;min-width:0;min-height:0}.flex-none-l{flex:none}.flex-grow-0-l{flex-grow:0}.flex-grow-1-l{flex-grow:1}.flex-shrink-0-l{flex-shrink:0}.flex-shrink-1-l{flex-shrink:1}}.flex-column{flex-direction:column}.flex-row{flex-direction:row}.flex-column-reverse{flex-direction:column-reverse}.flex-row-reverse{flex-direction:row-reverse}@container (min-width:30em){.flex-column-s{flex-direction:column}.flex-row-s{flex-direction:row}.flex-column-reverse-s{flex-direction:column-reverse}.flex-row-reverse-s{flex-direction:row-reverse}}@container (min-width:48em){.flex-column-m{flex-direction:column}.flex-row-m{flex-direction:row}.flex-column-reverse-m{flex-direction:column-reverse}.flex-row-reverse-m{flex-direction:row-reverse}}@container (min-width:64em){.flex-column-l{flex-direction:column}.flex-row-l{flex-direction:row}.flex-column-reverse-l{flex-direction:column-reverse}.flex-row-reverse-l{flex-direction:row-reverse}}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}@container (min-width:30em){.flex-wrap-s{flex-wrap:wrap}.flex-nowrap-s{flex-wrap:nowrap}.flex-wrap-reverse-s{flex-wrap:wrap-reverse}}@container (min-width:48em){.flex-wrap-m{flex-wrap:wrap}.flex-nowrap-m{flex-wrap:nowrap}.flex-wrap-reverse-m{flex-wrap:wrap-reverse}}@container (min-width:64em){.flex-wrap-l{flex-wrap:wrap}.flex-nowrap-l{flex-wrap:nowrap}.flex-wrap-reverse-l{flex-wrap:wrap-reverse}}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}@container (min-width:30em){.items-start-s{align-items:flex-start}.items-end-s{align-items:flex-end}.items-center-s{align-items:center}.items-baseline-s{align-items:baseline}.items-stretch-s{align-items:stretch}}@container (min-width:48em){.items-start-m{align-items:flex-start}.items-end-m{align-items:flex-end}.items-center-m{align-items:center}.items-baseline-m{align-items:baseline}.items-stretch-m{align-items:stretch}}@container (min-width:64em){.items-start-l{align-items:flex-start}.items-end-l{align-items:flex-end}.items-center-l{align-items:center}.items-baseline-l{align-items:baseline}.items-stretch-l{align-items:stretch}}.content-start{align-content:flex-start}.content-end{align-content:flex-end}.content-center{align-content:center}.content-between{align-content:space-between}.content-around{align-content:space-around}.content-stretch{align-content:stretch}@container (min-width:30em){.content-start-s{align-content:flex-start}.content-end-s{align-content:flex-end}.content-center-s{align-content:center}.content-between-s{align-content:space-between}.content-around-s{align-content:space-around}.content-stretch-s{align-content:stretch}}@container (min-width:48em){.content-start-m{align-content:flex-start}.content-end-m{align-content:flex-end}.content-center-m{align-content:center}.content-between-m{align-content:space-between}.content-around-m{align-content:space-around}.content-stretch-m{align-content:stretch}}@container (min-width:64em){.content-start-l{align-content:flex-start}.content-end-l{align-content:flex-end}.content-center-l{align-content:center}.content-between-l{align-content:space-between}.content-around-l{align-content:space-around}.content-stretch-l{align-content:stretch}}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-center{align-self:center}.self-baseline{align-self:baseline}.self-stretch{align-self:stretch}@container (min-width:30em){.self-start-s{align-self:flex-start}.self-end-s{align-self:flex-end}.self-center-s{align-self:center}.self-baseline-s{align-self:baseline}.self-stretch-s{align-self:stretch}}@container (min-width:48em){.self-start-m{align-self:flex-start}.self-end-m{align-self:flex-end}.self-center-m{align-self:center}.self-baseline-m{align-self:baseline}.self-stretch-m{align-self:stretch}}@container (min-width:64em){.self-start-l{align-self:flex-start}.self-end-l{align-self:flex-end}.self-center-l{align-self:center}.self-baseline-l{align-self:baseline}.self-stretch-l{align-self:stretch}}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.justify-self-center{justify-self:center}.justify-self-stretch{justify-self:stretch}@container (min-width:30em){.justify-self-start-s{justify-self:start}.justify-self-end-s{justify-self:end}.justify-self-center-s{justify-self:center}.justify-self-stretch-s{justify-self:stretch}}@container (min-width:48em){.justify-self-start-m{justify-self:start}.justify-self-end-m{justify-self:end}.justify-self-center-m{justify-self:center}.justify-self-stretch-m{justify-self:stretch}}@container (min-width:64em){.justify-self-start-l{justify-self:start}.justify-self-end-l{justify-self:end}.justify-self-center-l{justify-self:center}.justify-self-stretch-l{justify-self:stretch}}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}@container (min-width:30em){.justify-start-s{justify-content:flex-start}.justify-end-s{justify-content:flex-end}.justify-center-s{justify-content:center}.justify-between-s{justify-content:space-between}.justify-around-s{justify-content:space-around}}@container (min-width:48em){.justify-start-m{justify-content:flex-start}.justify-end-m{justify-content:flex-end}.justify-center-m{justify-content:center}.justify-between-m{justify-content:space-between}.justify-around-m{justify-content:space-around}}@container (min-width:64em){.justify-start-l{justify-content:flex-start}.justify-end-l{justify-content:flex-end}.justify-center-l{justify-content:center}.justify-between-l{justify-content:space-between}.justify-around-l{justify-content:space-around}}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-last{order:99999}@container (min-width:30em){.order-0-s{order:0}.order-1-s{order:1}.order-2-s{order:2}.order-3-s{order:3}.order-4-s{order:4}.order-5-s{order:5}.order-6-s{order:6}.order-7-s{order:7}.order-8-s{order:8}.order-last-s{order:99999}}@container (min-width:48em){.order-0-m{order:0}.order-1-m{order:1}.order-2-m{order:2}.order-3-m{order:3}.order-4-m{order:4}.order-5-m{order:5}.order-6-m{order:6}.order-7-m{order:7}.order-8-m{order:8}.order-last-m{order:99999}}@container (min-width:64em){.order-0-l{order:0}.order-1-l{order:1}.order-2-l{order:2}.order-3-l{order:3}.order-4-l{order:4}.order-5-l{order:5}.order-6-l{order:6}.order-7-l{order:7}.order-8-l{order:8}.order-last-l{order:99999}}.fl{float:left}.fr{float:right}.fn{float:none}@container (min-width:30em){.fl-s{float:left}.fr-s{float:right}.fn-s{float:none}}@container (min-width:48em){.fl-m{float:left}.fr-m{float:right}.fn-m{float:none}}@container (min-width:64em){.fl-l{float:left}.fr-l{float:right}.fn-l{float:none}}.f-heading{font-family:var(--font-family-heading,sans-serif)}.f-body{font-family:var(--font-family-body,sans-serif)}.f-mono{font-family:var(--font-family-mono,monospace)}.i{font-style:italic}.fs-normal{font-style:normal}.normal{font-weight:400}.b{font-weight:700}.fw1{font-weight:100}.fw2{font-weight:200}.fw3{font-weight:300}.fw4{font-weight:400}.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}.fw9{font-weight:900}@container (min-width:30em){.normal-s{font-weight:400}.b-s{font-weight:700}.fw1-s{font-weight:100}.fw2-s{font-weight:200}.fw3-s{font-weight:300}.fw4-s{font-weight:400}.fw5-s{font-weight:500}.fw6-s{font-weight:600}.fw7-s{font-weight:700}.fw8-s{font-weight:800}.fw9-s{font-weight:900}}@container (min-width:48em){.normal-m{font-weight:400}.b-m{font-weight:700}.fw1-m{font-weight:100}.fw2-m{font-weight:200}.fw3-m{font-weight:300}.fw4-m{font-weight:400}.fw5-m{font-weight:500}.fw6-m{font-weight:600}.fw7-m{font-weight:700}.fw8-m{font-weight:800}.fw9-m{font-weight:900}}@container (min-width:64em){.normal-l{font-weight:400}.b-l{font-weight:700}.fw1-l{font-weight:100}.fw2-l{font-weight:200}.fw3-l{font-weight:300}.fw4-l{font-weight:400}.fw5-l{font-weight:500}.fw6-l{font-weight:600}.fw7-l{font-weight:700}.fw8-l{font-weight:800}.fw9-l{font-weight:900}}.input-reset{-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-reset::-moz-focus-inner,.input-reset::-moz-focus-inner{border:0;padding:0}.h0{height:var(--size-0,0)}.h1{height:var(--size-1,1rem)}.h2{height:var(--size-2,2rem)}.h3{height:var(--size-3,3rem)}.h4{height:var(--size-4,4rem)}.h5{height:var(--size-5,8rem)}.h6{height:var(--size-6,16rem)}.h7{height:var(--size-7,32rem)}.h8{height:var(--size-8,64rem)}.h-50{height:50%}.h-75{height:75%}.h-100{height:100%}.min-h-100{min-height:100%}.vh-25{height:25vh}.vh-50{height:50vh}.vh-75{height:75vh}.vh-100{height:100vh}.min-vh-100{min-height:100vh}.h-auto{height:auto}.h-inherit{height:inherit}@container (min-width:30em){.h0-s{height:var(--size-0,0)}.h1-s{height:var(--size-1,1rem)}.h2-s{height:var(--size-2,2rem)}.h3-s{height:var(--size-3,3rem)}.h4-s{height:var(--size-4,4rem)}.h5-s{height:var(--size-5,8rem)}.h6-s{height:var(--size-6,16rem)}.h7-s{height:var(--size-7,32rem)}.h8-s{height:var(--size-8,64rem)}.h-50-s{height:50%}.h-75-s{height:75%}.h-100-s{height:100%}.min-h-100-s{min-height:100%}.vh-25-s{height:25vh}.vh-50-s{height:50vh}.vh-75-s{height:75vh}.vh-100-s{height:100vh}.min-vh-100-s{min-height:100vh}.h-auto-s{height:auto}.h-inherit-s{height:inherit}}@container (min-width:48em){.h1-m{height:1rem}.h2-m{height:2rem}.h3-m{height:4rem}.h4-m{height:8rem}.h5-m{height:16rem}.h-50-m{height:50%}.h-75-m{height:75%}.h-100-m{height:100%}.min-h-100-m{min-height:100%}.vh-25-m{height:25vh}.vh-50-m{height:50vh}.vh-75-m{height:75vh}.vh-100-m{height:100vh}.min-vh-100-m{min-height:100vh}.h-auto-m{height:auto}.h-inherit-m{height:inherit}}@container (min-width:64em){.h1-l{height:1rem}.h2-l{height:2rem}.h3-l{height:4rem}.h4-l{height:8rem}.h5-l{height:16rem}.h-50-l{height:50%}.h-75-l{height:75%}.h-100-l{height:100%}.min-h-100-l{min-height:100%}.vh-25-l{height:25vh}.vh-50-l{height:50vh}.vh-75-l{height:75vh}.vh-100-l{height:100vh}.min-vh-100-l{min-height:100vh}.h-auto-l{height:auto}.h-inherit-l{height:inherit}}.tracked{letter-spacing:var(--letter-spacing-tracked,.1em)}.tracked-tight{letter-spacing:var(--letter-spacing-tight,-.05em)}.tracked-mega{letter-spacing:var(--letter-spacing-large,.25em)}@container (min-width:30em){.tracked-s{letter-spacing:var(--letter-spacing-tracked,.1em)}.tracked-tight-s{letter-spacing:var(--letter-spacing-tight,-.05em)}.tracked-mega-s{letter-spacing:var(--letter-spacing-large,.25em)}}@container (min-width:48em){.tracked-m{letter-spacing:var(--letter-spacing-tracked,.1em)}.tracked-tight-m{letter-spacing:var(--letter-spacing-tight,-.05em)}.tracked-mega-m{letter-spacing:var(--letter-spacing-large,.25em)}}@container (min-width:64em){.tracked-l{letter-spacing:var(--letter-spacing-tracked,.1em)}.tracked-tight-l{letter-spacing:var(--letter-spacing-tight,-.05em)}.tracked-mega-l{letter-spacing:var(--letter-spacing-large,.25em)}}.lh-solid{line-height:var(--line-height-solid,1)}.lh-title{line-height:var(--line-height-title,1.25)}.lh-body{line-height:var(--line-height-body,1.5)}@container (min-width:30em){.lh-solid-s{line-height:var(--line-height-solid,1)}.lh-title-s{line-height:var(--line-height-title,1.25)}.lh-body-s{line-height:var(--line-height-body,1.5)}}@container (min-width:48em){.lh-solid-m{line-height:var(--line-height-solid,1)}.lh-title-m{line-height:var(--line-height-title,1.25)}.lh-body-m{line-height:var(--line-height-body,1.5)}}@container (min-width:64em){.lh-solid-l{line-height:var(--line-height-solid,1)}.lh-title-l{line-height:var(--line-height-title,1.25)}.lh-body-l{line-height:var(--line-height-body,1.5)}}.link{text-decoration:none}.link,.link:active,.link:focus,.link:hover,.link:link,.link:visited{transition:all .15s ease-in}.link:focus{outline:1px dotted currentColor}.list{list-style-type:none}.mw-100{max-width:100%}.mw1{max-width:1rem}.mw2{max-width:2rem}.mw3{max-width:4rem}.mw4{max-width:8rem}.mw5{max-width:16rem}.mw6{max-width:32rem}.mw7{max-width:48rem}.mw8{max-width:64rem}.mw9{max-width:96rem}.mw-none{max-width:none}@container (min-width:30em){.mw-100-s{max-width:100%}.mw1-s{max-width:1rem}.mw2-s{max-width:2rem}.mw3-s{max-width:4rem}.mw4-s{max-width:8rem}.mw5-s{max-width:16rem}.mw6-s{max-width:32rem}.mw7-s{max-width:48rem}.mw8-s{max-width:64rem}.mw9-s{max-width:96rem}.mw-none-s{max-width:none}}@container (min-width:48em){.mw-100-m{max-width:100%}.mw1-m{max-width:1rem}.mw2-m{max-width:2rem}.mw3-m{max-width:4rem}.mw4-m{max-width:8rem}.mw5-m{max-width:16rem}.mw6-m{max-width:32rem}.mw7-m{max-width:48rem}.mw8-m{max-width:64rem}.mw9-m{max-width:96rem}.mw-none-m{max-width:none}}@container (min-width:64em){.mw-100-l{max-width:100%}.mw1-l{max-width:1rem}.mw2-l{max-width:2rem}.mw3-l{max-width:4rem}.mw4-l{max-width:8rem}.mw5-l{max-width:16rem}.mw6-l{max-width:32rem}.mw7-l{max-width:48rem}.mw8-l{max-width:64rem}.mw9-l{max-width:96rem}.mw-none-l{max-width:none}}.w0{width:var(--size-0,0)}.w1{width:var(--size-1,1rem)}.w2{width:var(--size-2,2rem)}.w3{width:var(--size-3,3rem)}.w4{width:var(--size-4,4rem)}.w5{width:var(--size-5,8rem)}.w6{width:var(--size-6,16rem)}.w7{width:var(--size-7,32rem)}.w8{width:var(--size-8,64rem)}.w-10{width:10%}.w-20{width:20%}.w-25{width:25%}.w-50{width:50%}.w-75{width:75%}.w-100{width:100%}.w-third{width:33.33333%}.w-two-thirds{width:66.66667%}.w-auto{width:auto}@container (min-width:30em){.w0-s{width:var(--size-0,0)}.w1-s{width:var(--size-1,1rem)}.w2-s{width:var(--size-2,2rem)}.w3-s{width:var(--size-3,3rem)}.w4-s{width:var(--size-4,4rem)}.w5-s{width:var(--size-5,8rem)}.w6-s{width:var(--size-6,16rem)}.w7-s{width:var(--size-7,32rem)}.w8-s{width:var(--size-8,64rem)}.w-10-s{width:10%}.w-20-s{width:20%}.w-25-s{width:25%}.w-50-s{width:50%}.w-75-s{width:75%}.w-100-s{width:100%}.w-third-s{width:33.33333%}.w-two-thirds-s{width:66.66667%}.w-auto-s{width:auto}}@container (min-width:48em){.w0-m{width:var(--size-0,0)}.w1-m{width:var(--size-1,1rem)}.w2-m{width:var(--size-2,2rem)}.w3-m{width:var(--size-3,3rem)}.w4-m{width:var(--size-4,4rem)}.w5-m{width:var(--size-5,8rem)}.w6-m{width:var(--size-6,16rem)}.w7-m{width:var(--size-7,32rem)}.w8-m{width:var(--size-8,64rem)}.w-10-m{width:10%}.w-20-m{width:20%}.w-25-m{width:25%}.w-50-m{width:50%}.w-75-m{width:75%}.w-100-m{width:100%}.w-third-m{width:33.33333%}.w-two-thirds-m{width:66.66667%}.w-auto-m{width:auto}}@container (min-width:64em){.w0-l{width:var(--size-0,0)}.w1-l{width:var(--size-1,1rem)}.w2-l{width:var(--size-2,2rem)}.w3-l{width:var(--size-3,3rem)}.w4-l{width:var(--size-4,4rem)}.w5-l{width:var(--size-5,8rem)}.w6-l{width:var(--size-6,16rem)}.w7-l{width:var(--size-7,32rem)}.w8-l{width:var(--size-8,64rem)}.w-10-l{width:10%}.w-20-l{width:20%}.w-25-l{width:25%}.w-50-l{width:50%}.w-75-l{width:75%}.w-100-l{width:100%}.w-third-l{width:33.33333%}.w-two-thirds-l{width:66.66667%}.w-auto-l{width:auto}}.overflow-visible{overflow:visible}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.overflow-x-visible{overflow-x:visible}.overflow-x-hidden{overflow-x:hidden}.overflow-x-scroll{overflow-x:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-visible{overflow-y:visible}.overflow-y-hidden{overflow-y:hidden}.overflow-y-scroll{overflow-y:scroll}.overflow-y-auto{overflow-y:auto}@container (min-width:30em){.overflow-visible-s{overflow:visible}.overflow-hidden-s{overflow:hidden}.overflow-scroll-s{overflow:scroll}.overflow-auto-s{overflow:auto}.overflow-x-visible-s{overflow-x:visible}.overflow-x-hidden-s{overflow-x:hidden}.overflow-x-scroll-s{overflow-x:scroll}.overflow-x-auto-s{overflow-x:auto}.overflow-y-visible-s{overflow-y:visible}.overflow-y-hidden-s{overflow-y:hidden}.overflow-y-scroll-s{overflow-y:scroll}.overflow-y-auto-s{overflow-y:auto}}@container (min-width:48em){.overflow-visible-m{overflow:visible}.overflow-hidden-m{overflow:hidden}.overflow-scroll-m{overflow:scroll}.overflow-auto-m{overflow:auto}.overflow-x-visible-m{overflow-x:visible}.overflow-x-hidden-m{overflow-x:hidden}.overflow-x-scroll-m{overflow-x:scroll}.overflow-x-auto-m{overflow-x:auto}.overflow-y-visible-m{overflow-y:visible}.overflow-y-hidden-m{overflow-y:hidden}.overflow-y-scroll-m{overflow-y:scroll}.overflow-y-auto-m{overflow-y:auto}}@container (min-width:64em){.overflow-visible-l{overflow:visible}.overflow-hidden-l{overflow:hidden}.overflow-scroll-l{overflow:scroll}.overflow-auto-l{overflow:auto}.overflow-x-visible-l{overflow-x:visible}.overflow-x-hidden-l{overflow-x:hidden}.overflow-x-scroll-l{overflow-x:scroll}.overflow-x-auto-l{overflow-x:auto}.overflow-y-visible-l{overflow-y:visible}.overflow-y-hidden-l{overflow-y:hidden}.overflow-y-scroll-l{overflow-y:scroll}.overflow-y-auto-l{overflow-y:auto}}.static{position:static}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:-webkit-sticky;position:sticky}@container (min-width:30em){.static-s{position:static}.relative-s{position:relative}.absolute-s{position:absolute}.fixed-s{position:fixed}.sticky-s{position:-webkit-sticky;position:sticky}}@container (min-width:48em){.static-m{position:static}.relative-m{position:relative}.absolute-m{position:absolute}.fixed-m{position:fixed}.sticky-m{position:-webkit-sticky;position:sticky}}@container (min-width:64em){.static-l{position:static}.relative-l{position:relative}.absolute-l{position:absolute}.fixed-l{position:fixed}.sticky-l{position:-webkit-sticky;position:sticky}}.o12{opacity:var(--opacity-12,1)}.o11{opacity:var(--opacity-11,.9)}.o10{opacity:var(--opacity-10,.8)}.o9{opacity:var(--opacity-9,.7)}.o8{opacity:var(--opacity-8,.6)}.o7{opacity:var(--opacity-7,.5)}.o6{opacity:var(--opacity-6,.4)}.o5{opacity:var(--opacity-5,.3)}.o4{opacity:var(--opacity-4,.2)}.o3{opacity:var(--opacity-3,.1)}.o2{opacity:var(--opacity-2,.05)}.o1{opacity:var(--opacity-1,.025)}.o0{opacity:var(--opacity-0,0)}.h-o12:hover{opacity:var(--opacity-12,1)}.h-o11:hover{opacity:var(--opacity-11,.9)}.h-o10:hover{opacity:var(--opacity-10,.8)}.h-o9:hover{opacity:var(--opacity-9,.7)}.h-o8:hover{opacity:var(--opacity-8,.6)}.h-o7:hover{opacity:var(--opacity-7,.5)}.h-o6:hover{opacity:var(--opacity-6,.4)}.h-o5:hover{opacity:var(--opacity-5,.3)}.h-o4:hover{opacity:var(--opacity-4,.2)}.h-o3:hover{opacity:var(--opacity-3,.1)}.h-o2:hover{opacity:var(--opacity-2,.05)}.h-o1:hover{opacity:var(--opacity-1,.025)}.h-o0:hover{opacity:var(--opacity-0,0)}.f-o12:focus{opacity:var(--opacity-12,1)}.f-o11:focus{opacity:var(--opacity-11,.9)}.f-o10:focus{opacity:var(--opacity-10,.8)}.f-o9:focus{opacity:var(--opacity-9,.7)}.f-o8:focus{opacity:var(--opacity-8,.6)}.f-o7:focus{opacity:var(--opacity-7,.5)}.f-o6:focus{opacity:var(--opacity-6,.4)}.f-o5:focus{opacity:var(--opacity-5,.3)}.f-o4:focus{opacity:var(--opacity-4,.2)}.f-o3:focus{opacity:var(--opacity-3,.1)}.f-o2:focus{opacity:var(--opacity-2,.05)}.f-o1:focus{opacity:var(--opacity-1,.025)}.f-o0:focus{opacity:var(--opacity-0,0)}.rotate-45{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.rotate-135{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rotate-225{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.rotate-315{-webkit-transform:rotate(315deg);transform:rotate(315deg)}@container (min-width:30em){.rotate-45-s{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.rotate-90-s{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.rotate-135-s{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.rotate-180-s{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rotate-225-s{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.rotate-270-s{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.rotate-315-s{-webkit-transform:rotate(315deg);transform:rotate(315deg)}}@container (min-width:48em){.rotate-45-m{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.rotate-90-m{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.rotate-135-m{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.rotate-180-m{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rotate-225-m{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.rotate-270-m{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.rotate-315-m{-webkit-transform:rotate(315deg);transform:rotate(315deg)}}@container (min-width:64em){.rotate-45-l{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.rotate-90-l{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.rotate-135-l{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.rotate-180-l{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rotate-225-l{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.rotate-270-l{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.rotate-315-l{-webkit-transform:rotate(315deg);transform:rotate(315deg)}}.tint-0{color:var(--tint-0)}.tint-1{color:var(--tint-1)}.tint-2{color:var(--tint-2)}.tint-3{color:var(--tint-3)}.tint-4{color:var(--tint-4)}.tint-5{color:var(--tint-5)}.tint-6{color:var(--tint-6)}.tint-7{color:var(--tint-7)}.tint-8{color:var(--tint-8)}.tint-9{color:var(--tint-9)}.tint-10{color:var(--tint-10)}.tint-11{color:var(--tint-11)}.shadow-0{color:var(--shadow-0)}.shadow-1{color:var(--shadow-1)}.shadow-2{color:var(--shadow-2)}.shadow-3{color:var(--shadow-3)}.shadow-4{color:var(--shadow-4)}.shadow-5{color:var(--shadow-5)}.shadow-6{color:var(--shadow-6)}.shadow-7{color:var(--shadow-7)}.shadow-8{color:var(--shadow-8)}.shadow-9{color:var(--shadow-9)}.shadow-10{color:var(--shadow-10)}.shadow-11{color:var(--shadow-11)}.black,.gray-0{color:var(--gray-0)}.gray-1{color:var(--gray-1)}.gray-2{color:var(--gray-2)}.gray-3{color:var(--gray-3)}.gray-4{color:var(--gray-4)}.gray-5{color:var(--gray-5)}.gray-6{color:var(--gray-6)}.gray-7{color:var(--gray-7)}.gray-8{color:var(--gray-8)}.gray-9{color:var(--gray-9)}.gray-10{color:var(--gray-10)}.gray-11,.white{color:var(--gray-11)}.slate-gray-0{color:var(--slate-gray-0)}.slate-gray-1{color:var(--slate-gray-1)}.slate-gray-2{color:var(--slate-gray-2)}.slate-gray-3{color:var(--slate-gray-3)}.slate-gray-4{color:var(--slate-gray-4)}.slate-gray-5{color:var(--slate-gray-5)}.slate-gray-6{color:var(--slate-gray-6)}.slate-gray-7{color:var(--slate-gray-7)}.slate-gray-8{color:var(--slate-gray-8)}.slate-gray-9{color:var(--slate-gray-9)}.slate-gray-10{color:var(--slate-gray-10)}.slate-gray-11{color:var(--slate-gray-11)}.blue-0{color:var(--blue-0)}.blue-1{color:var(--blue-1)}.blue-2{color:var(--blue-2)}.blue-3{color:var(--blue-3)}.blue-4{color:var(--blue-4)}.blue-5{color:var(--blue-5)}.blue-6{color:var(--blue-6)}.blue-7{color:var(--blue-7)}.blue-8{color:var(--blue-8)}.blue-9{color:var(--blue-9)}.blue-10{color:var(--blue-10)}.blue-11{color:var(--blue-11)}.indigo-0{color:var(--indigo-0)}.indigo-1{color:var(--indigo-1)}.indigo-2{color:var(--indigo-2)}.indigo-3{color:var(--indigo-3)}.indigo-4{color:var(--indigo-4)}.indigo-5{color:var(--indigo-5)}.indigo-6{color:var(--indigo-6)}.indigo-7{color:var(--indigo-7)}.indigo-8{color:var(--indigo-8)}.indigo-9{color:var(--indigo-9)}.indigo-10{color:var(--indigo-10)}.indigo-11{color:var(--indigo-11)}.violet-0{color:var(--violet-0)}.violet-1{color:var(--violet-1)}.violet-2{color:var(--violet-2)}.violet-3{color:var(--violet-3)}.violet-4{color:var(--violet-4)}.violet-5{color:var(--violet-5)}.violet-6{color:var(--violet-6)}.violet-7{color:var(--violet-7)}.violet-8{color:var(--violet-8)}.violet-9{color:var(--violet-9)}.violet-10{color:var(--violet-10)}.violet-11{color:var(--violet-11)}.magenta-0{color:var(--magenta-0)}.magenta-1{color:var(--magenta-1)}.magenta-2{color:var(--magenta-2)}.magenta-3{color:var(--magenta-3)}.magenta-4{color:var(--magenta-4)}.magenta-5{color:var(--magenta-5)}.magenta-6{color:var(--magenta-6)}.magenta-7{color:var(--magenta-7)}.magenta-8{color:var(--magenta-8)}.magenta-9{color:var(--magenta-9)}.magenta-10{color:var(--magenta-10)}.magenta-11{color:var(--magenta-11)}.red-0{color:var(--red-0)}.red-1{color:var(--red-1)}.red-2{color:var(--red-2)}.red-3{color:var(--red-3)}.red-4{color:var(--red-4)}.red-5{color:var(--red-5)}.red-6{color:var(--red-6)}.red-7{color:var(--red-7)}.red-8{color:var(--red-8)}.red-9{color:var(--red-9)}.red-10{color:var(--red-10)}.red-11{color:var(--red-11)}.red-orange-0{color:var(--red-orange-0)}.red-orange-1{color:var(--red-orange-1)}.red-orange-2{color:var(--red-orange-2)}.red-orange-3{color:var(--red-orange-3)}.red-orange-4{color:var(--red-orange-4)}.red-orange-5{color:var(--red-orange-5)}.red-orange-6{color:var(--red-orange-6)}.red-orange-7{color:var(--red-orange-7)}.red-orange-8{color:var(--red-orange-8)}.red-orange-9{color:var(--red-orange-9)}.red-orange-10{color:var(--red-orange-10)}.red-orange-11{color:var(--red-orange-11)}.orange-0{color:var(--orange-0)}.orange-1{color:var(--orange-1)}.orange-2{color:var(--orange-2)}.orange-3{color:var(--orange-3)}.orange-4{color:var(--orange-4)}.orange-5{color:var(--orange-5)}.orange-6{color:var(--orange-6)}.orange-7{color:var(--orange-7)}.orange-8{color:var(--orange-8)}.orange-9{color:var(--orange-9)}.orange-10{color:var(--orange-10)}.orange-11{color:var(--orange-11)}.gold-0{color:var(--gold-0)}.gold-1{color:var(--gold-1)}.gold-2{color:var(--gold-2)}.gold-3{color:var(--gold-3)}.gold-4{color:var(--gold-4)}.gold-5{color:var(--gold-5)}.gold-6{color:var(--gold-6)}.gold-7{color:var(--gold-7)}.gold-8{color:var(--gold-8)}.gold-9{color:var(--gold-9)}.gold-10{color:var(--gold-10)}.gold-11{color:var(--gold-11)}.yellow-0{color:var(--yellow-0)}.yellow-1{color:var(--yellow-1)}.yellow-2{color:var(--yellow-2)}.yellow-3{color:var(--yellow-3)}.yellow-4{color:var(--yellow-4)}.yellow-5{color:var(--yellow-5)}.yellow-6{color:var(--yellow-6)}.yellow-7{color:var(--yellow-7)}.yellow-8{color:var(--yellow-8)}.yellow-9{color:var(--yellow-9)}.yellow-10{color:var(--yellow-10)}.yellow-11{color:var(--yellow-11)}.green-0{color:var(--green-0)}.green-1{color:var(--green-1)}.green-2{color:var(--green-2)}.green-3{color:var(--green-3)}.green-4{color:var(--green-4)}.green-5{color:var(--green-5)}.green-6{color:var(--green-6)}.green-7{color:var(--green-7)}.green-8{color:var(--green-8)}.green-9{color:var(--green-9)}.green-10{color:var(--green-10)}.green-11{color:var(--green-11)}.teal-0{color:var(--teal-0)}.teal-1{color:var(--teal-1)}.teal-2{color:var(--teal-2)}.teal-3{color:var(--teal-3)}.teal-4{color:var(--teal-4)}.teal-5{color:var(--teal-5)}.teal-6{color:var(--teal-6)}.teal-7{color:var(--teal-7)}.teal-8{color:var(--teal-8)}.teal-9{color:var(--teal-9)}.teal-10{color:var(--teal-10)}.teal-11{color:var(--teal-11)}.cyan-0{color:var(--cyan-0)}.cyan-1{color:var(--cyan-1)}.cyan-2{color:var(--cyan-2)}.cyan-3{color:var(--cyan-3)}.cyan-4{color:var(--cyan-4)}.cyan-5{color:var(--cyan-5)}.cyan-6{color:var(--cyan-6)}.cyan-7{color:var(--cyan-7)}.cyan-8{color:var(--cyan-8)}.cyan-9{color:var(--cyan-9)}.cyan-10{color:var(--cyan-10)}.cyan-11{color:var(--cyan-11)}.bg-tint-0{background-color:var(--tint-0)}.bg-tint-1{background-color:var(--tint-1)}.bg-tint-2{background-color:var(--tint-2)}.bg-tint-3{background-color:var(--tint-3)}.bg-tint-4{background-color:var(--tint-4)}.bg-tint-5{background-color:var(--tint-5)}.bg-tint-6{background-color:var(--tint-6)}.bg-tint-7{background-color:var(--tint-7)}.bg-tint-8{background-color:var(--tint-8)}.bg-tint-9{background-color:var(--tint-9)}.bg-tint-10{background-color:var(--tint-10)}.bg-tint-11{background-color:var(--tint-11)}.bg-shadow-0{background-color:var(--shadow-0)}.bg-shadow-1{background-color:var(--shadow-1)}.bg-shadow-2{background-color:var(--shadow-2)}.bg-shadow-3{background-color:var(--shadow-3)}.bg-shadow-4{background-color:var(--shadow-4)}.bg-shadow-5{background-color:var(--shadow-5)}.bg-shadow-6{background-color:var(--shadow-6)}.bg-shadow-7{background-color:var(--shadow-7)}.bg-shadow-8{background-color:var(--shadow-8)}.bg-shadow-9{background-color:var(--shadow-9)}.bg-shadow-10{background-color:var(--shadow-10)}.bg-shadow-11{background-color:var(--shadow-11)}.bg-black,.bg-gray-0{background-color:var(--gray-0)}.bg-gray-1{background-color:var(--gray-1)}.bg-gray-2{background-color:var(--gray-2)}.bg-gray-3{background-color:var(--gray-3)}.bg-gray-4{background-color:var(--gray-4)}.bg-gray-5{background-color:var(--gray-5)}.bg-gray-6{background-color:var(--gray-6)}.bg-gray-7{background-color:var(--gray-7)}.bg-gray-8{background-color:var(--gray-8)}.bg-gray-9{background-color:var(--gray-9)}.bg-gray-10{background-color:var(--gray-10)}.bg-gray-11,.bg-white{background-color:var(--gray-11)}.bg-slate-gray-0{background-color:var(--slate-gray-0)}.bg-slate-gray-1{background-color:var(--slate-gray-1)}.bg-slate-gray-2{background-color:var(--slate-gray-2)}.bg-slate-gray-3{background-color:var(--slate-gray-3)}.bg-slate-gray-4{background-color:var(--slate-gray-4)}.bg-slate-gray-5{background-color:var(--slate-gray-5)}.bg-slate-gray-6{background-color:var(--slate-gray-6)}.bg-slate-gray-7{background-color:var(--slate-gray-7)}.bg-slate-gray-8{background-color:var(--slate-gray-8)}.bg-slate-gray-9{background-color:var(--slate-gray-9)}.bg-slate-gray-10{background-color:var(--slate-gray-10)}.bg-slate-gray-11{background-color:var(--slate-gray-11)}.bg-blue-0{background-color:var(--blue-0)}.bg-blue-1{background-color:var(--blue-1)}.bg-blue-2{background-color:var(--blue-2)}.bg-blue-3{background-color:var(--blue-3)}.bg-blue-4{background-color:var(--blue-4)}.bg-blue-5{background-color:var(--blue-5)}.bg-blue-6{background-color:var(--blue-6)}.bg-blue-7{background-color:var(--blue-7)}.bg-blue-8{background-color:var(--blue-8)}.bg-blue-9{background-color:var(--blue-9)}.bg-blue-10{background-color:var(--blue-10)}.bg-blue-11{background-color:var(--blue-11)}.bg-indigo-0{background-color:var(--indigo-0)}.bg-indigo-1{background-color:var(--indigo-1)}.bg-indigo-2{background-color:var(--indigo-2)}.bg-indigo-3{background-color:var(--indigo-3)}.bg-indigo-4{background-color:var(--indigo-4)}.bg-indigo-5{background-color:var(--indigo-5)}.bg-indigo-6{background-color:var(--indigo-6)}.bg-indigo-7{background-color:var(--indigo-7)}.bg-indigo-8{background-color:var(--indigo-8)}.bg-indigo-9{background-color:var(--indigo-9)}.bg-indigo-10{background-color:var(--indigo-10)}.bg-indigo-11{background-color:var(--indigo-11)}.bg-violet-0{background-color:var(--violet-0)}.bg-violet-1{background-color:var(--violet-1)}.bg-violet-2{background-color:var(--violet-2)}.bg-violet-3{background-color:var(--violet-3)}.bg-violet-4{background-color:var(--violet-4)}.bg-violet-5{background-color:var(--violet-5)}.bg-violet-6{background-color:var(--violet-6)}.bg-violet-7{background-color:var(--violet-7)}.bg-violet-8{background-color:var(--violet-8)}.bg-violet-9{background-color:var(--violet-9)}.bg-violet-10{background-color:var(--violet-10)}.bg-violet-11{background-color:var(--violet-11)}.bg-magenta-0{background-color:var(--magenta-0)}.bg-magenta-1{background-color:var(--magenta-1)}.bg-magenta-2{background-color:var(--magenta-2)}.bg-magenta-3{background-color:var(--magenta-3)}.bg-magenta-4{background-color:var(--magenta-4)}.bg-magenta-5{background-color:var(--magenta-5)}.bg-magenta-6{background-color:var(--magenta-6)}.bg-magenta-7{background-color:var(--magenta-7)}.bg-magenta-8{background-color:var(--magenta-8)}.bg-magenta-9{background-color:var(--magenta-9)}.bg-magenta-10{background-color:var(--magenta-10)}.bg-magenta-11{background-color:var(--magenta-11)}.bg-red-0{background-color:var(--red-0)}.bg-red-1{background-color:var(--red-1)}.bg-red-2{background-color:var(--red-2)}.bg-red-3{background-color:var(--red-3)}.bg-red-4{background-color:var(--red-4)}.bg-red-5{background-color:var(--red-5)}.bg-red-6{background-color:var(--red-6)}.bg-red-7{background-color:var(--red-7)}.bg-red-8{background-color:var(--red-8)}.bg-red-9{background-color:var(--red-9)}.bg-red-10{background-color:var(--red-10)}.bg-red-11{background-color:var(--red-11)}.bg-red-orange-0{background-color:var(--red-orange-0)}.bg-red-orange-1{background-color:var(--red-orange-1)}.bg-red-orange-2{background-color:var(--red-orange-2)}.bg-red-orange-3{background-color:var(--red-orange-3)}.bg-red-orange-4{background-color:var(--red-orange-4)}.bg-red-orange-5{background-color:var(--red-orange-5)}.bg-red-orange-6{background-color:var(--red-orange-6)}.bg-red-orange-7{background-color:var(--red-orange-7)}.bg-red-orange-8{background-color:var(--red-orange-8)}.bg-red-orange-9{background-color:var(--red-orange-9)}.bg-red-orange-10{background-color:var(--red-orange-10)}.bg-red-orange-11{background-color:var(--red-orange-11)}.bg-orange-0{background-color:var(--orange-0)}.bg-orange-1{background-color:var(--orange-1)}.bg-orange-2{background-color:var(--orange-2)}.bg-orange-3{background-color:var(--orange-3)}.bg-orange-4{background-color:var(--orange-4)}.bg-orange-5{background-color:var(--orange-5)}.bg-orange-6{background-color:var(--orange-6)}.bg-orange-7{background-color:var(--orange-7)}.bg-orange-8{background-color:var(--orange-8)}.bg-orange-9{background-color:var(--orange-9)}.bg-orange-10{background-color:var(--orange-10)}.bg-orange-11{background-color:var(--orange-11)}.bg-gold-0{background-color:var(--gold-0)}.bg-gold-1{background-color:var(--gold-1)}.bg-gold-2{background-color:var(--gold-2)}.bg-gold-3{background-color:var(--gold-3)}.bg-gold-4{background-color:var(--gold-4)}.bg-gold-5{background-color:var(--gold-5)}.bg-gold-6{background-color:var(--gold-6)}.bg-gold-7{background-color:var(--gold-7)}.bg-gold-8{background-color:var(--gold-8)}.bg-gold-9{background-color:var(--gold-9)}.bg-gold-10{background-color:var(--gold-10)}.bg-gold-11{background-color:var(--gold-11)}.bg-yellow-0{background-color:var(--yellow-0)}.bg-yellow-1{background-color:var(--yellow-1)}.bg-yellow-2{background-color:var(--yellow-2)}.bg-yellow-3{background-color:var(--yellow-3)}.bg-yellow-4{background-color:var(--yellow-4)}.bg-yellow-5{background-color:var(--yellow-5)}.bg-yellow-6{background-color:var(--yellow-6)}.bg-yellow-7{background-color:var(--yellow-7)}.bg-yellow-8{background-color:var(--yellow-8)}.bg-yellow-9{background-color:var(--yellow-9)}.bg-yellow-10{background-color:var(--yellow-10)}.bg-yellow-11{background-color:var(--yellow-11)}.bg-green-0{background-color:var(--green-0)}.bg-green-1{background-color:var(--green-1)}.bg-green-2{background-color:var(--green-2)}.bg-green-3{background-color:var(--green-3)}.bg-green-4{background-color:var(--green-4)}.bg-green-5{background-color:var(--green-5)}.bg-green-6{background-color:var(--green-6)}.bg-green-7{background-color:var(--green-7)}.bg-green-8{background-color:var(--green-8)}.bg-green-9{background-color:var(--green-9)}.bg-green-10{background-color:var(--green-10)}.bg-green-11{background-color:var(--green-11)}.bg-teal-0{background-color:var(--teal-0)}.bg-teal-1{background-color:var(--teal-1)}.bg-teal-2{background-color:var(--teal-2)}.bg-teal-3{background-color:var(--teal-3)}.bg-teal-4{background-color:var(--teal-4)}.bg-teal-5{background-color:var(--teal-5)}.bg-teal-6{background-color:var(--teal-6)}.bg-teal-7{background-color:var(--teal-7)}.bg-teal-8{background-color:var(--teal-8)}.bg-teal-9{background-color:var(--teal-9)}.bg-teal-10{background-color:var(--teal-10)}.bg-teal-11{background-color:var(--teal-11)}.bg-cyan-0{background-color:var(--cyan-0)}.bg-cyan-1{background-color:var(--cyan-1)}.bg-cyan-2{background-color:var(--cyan-2)}.bg-cyan-3{background-color:var(--cyan-3)}.bg-cyan-4{background-color:var(--cyan-4)}.bg-cyan-5{background-color:var(--cyan-5)}.bg-cyan-6{background-color:var(--cyan-6)}.bg-cyan-7{background-color:var(--cyan-7)}.bg-cyan-8{background-color:var(--cyan-8)}.bg-cyan-9{background-color:var(--cyan-9)}.bg-cyan-10{background-color:var(--cyan-10)}.bg-cyan-11{background-color:var(--cyan-11)}.dark{background-color:#000;color:#fff}.light{background-color:#fff;color:#000}.blue{background-color:var(--blue-5);color:var(--gray-11)}.blue-dark{background-color:var(--blue-3);color:var(--blue-9)}.blue-light{color:var(--blue-3);background-color:var(--blue-10)}.indigo{background-color:var(--indigo-5);color:var(--gray-11)}.indigo-dark{background-color:var(--indigo-3);color:var(--indigo-9)}.indigo-light{color:var(--indigo-3);background-color:var(--indigo-10)}.violet{background-color:var(--violet-5);color:var(--gray-11)}.violet-dark{background-color:var(--violet-3);color:var(--violet-9)}.violet-light{color:var(--violet-3);background-color:var(--violet-10)}.magenta{background-color:var(--magenta-5);color:var(--gray-11)}.magenta-dark{background-color:var(--magenta-3);color:var(--magenta-9)}.magenta-light{color:var(--magenta-3);background-color:var(--magenta-10)}.red{background-color:var(--red-5);color:var(--gray-11)}.red-dark{background-color:var(--red-3);color:var(--red-9)}.red-light{color:var(--red-3);background-color:var(--red-10)}.red-orange{background-color:var(--red-orange-5);color:var(--gray-11)}.red-orange-dark{background-color:var(--red-orange-3);color:var(--red-orange-9)}.red-orange-light{color:var(--red-orange-3);background-color:var(--red-orange-10)}.orange{background-color:var(--orange-5);color:var(--gray-11)}.orange-dark{background-color:var(--orange-3);color:var(--orange-9)}.orange-light{color:var(--orange-3);background-color:var(--orange-10)}.gold{background-color:var(--gold-5);color:var(--gray-11)}.gold-dark{background-color:var(--gold-3);color:var(--gold-9)}.gold-light{color:var(--gold-3);background-color:var(--gold-10)}.yellow{background-color:var(--yellow-5);color:var(--gray-11)}.yellow-dark{background-color:var(--yellow-3);color:var(--yellow-9)}.yellow-light{color:var(--yellow-3);background-color:var(--yellow-10)}.green{background-color:var(--green-5);color:var(--gray-11)}.green-dark{background-color:var(--green-3);color:var(--green-9)}.green-light{color:var(--green-3);background-color:var(--green-10)}.teal{background-color:var(--teal-5);color:var(--gray-11)}.teal-dark{background-color:var(--teal-3);color:var(--teal-9)}.teal-light{color:var(--teal-3);background-color:var(--teal-10)}.cyan{background-color:var(--cyan-5);color:var(--gray-11)}.cyan-dark{background-color:var(--cyan-3);color:var(--cyan-9)}.cyan-light{color:var(--cyan-3);background-color:var(--cyan-10)}.hover-overlay-tint-0:hover{color:var(--overlay-tint-0)}.hover-overlay-tint-1:hover{color:var(--overlay-tint-1)}.hover-overlay-tint-2:hover{color:var(--overlay-tint-2)}.hover-overlay-tint-3:hover{color:var(--overlay-tint-3)}.hover-overlay-tint-4:hover{color:var(--overlay-tint-4)}.hover-overlay-tint-5:hover{color:var(--overlay-tint-5)}.hover-overlay-tint-6:hover{color:var(--overlay-tint-6)}.hover-overlay-tint-7:hover{color:var(--overlay-tint-7)}.hover-overlay-tint-8:hover{color:var(--overlay-tint-8)}.hover-overlay-tint-9:hover{color:var(--overlay-tint-9)}.hover-overlay-tint-10:hover{color:var(--overlay-tint-10)}.hover-overlay-tint-11:hover{color:var(--overlay-tint-11)}.hover-overlay-shadow-0:hover{color:var(--overlay-shadow-0)}.hover-overlay-shadow-1:hover{color:var(--overlay-shadow-1)}.hover-overlay-shadow-2:hover{color:var(--overlay-shadow-2)}.hover-overlay-shadow-3:hover{color:var(--overlay-shadow-3)}.hover-overlay-shadow-4:hover{color:var(--overlay-shadow-4)}.hover-overlay-shadow-5:hover{color:var(--overlay-shadow-5)}.hover-overlay-shadow-6:hover{color:var(--overlay-shadow-6)}.hover-overlay-shadow-7:hover{color:var(--overlay-shadow-7)}.hover-overlay-shadow-8:hover{color:var(--overlay-shadow-8)}.hover-overlay-shadow-9:hover{color:var(--overlay-shadow-9)}.hover-overlay-shadow-10:hover{color:var(--overlay-shadow-10)}.hover-overlay-shadow-11:hover{color:var(--overlay-shadow-11)}.hover-gray-0:hover{color:var(--gray-0)}.hover-gray-1:hover{color:var(--gray-1)}.hover-gray-2:hover{color:var(--gray-2)}.hover-gray-3:hover{color:var(--gray-3)}.hover-gray-4:hover{color:var(--gray-4)}.hover-gray-5:hover{color:var(--gray-5)}.hover-gray-6:hover{color:var(--gray-6)}.hover-gray-7:hover{color:var(--gray-7)}.hover-gray-8:hover{color:var(--gray-8)}.hover-gray-9:hover{color:var(--gray-9)}.hover-gray-10:hover{color:var(--gray-10)}.hover-gray-11:hover{color:var(--gray-11)}.hover-slate-gray-0:hover{color:var(--slate-gray-0)}.hover-slate-gray-1:hover{color:var(--slate-gray-1)}.hover-slate-gray-2:hover{color:var(--slate-gray-2)}.hover-slate-gray-3:hover{color:var(--slate-gray-3)}.hover-slate-gray-4:hover{color:var(--slate-gray-4)}.hover-slate-gray-5:hover{color:var(--slate-gray-5)}.hover-slate-gray-6:hover{color:var(--slate-gray-6)}.hover-slate-gray-7:hover{color:var(--slate-gray-7)}.hover-slate-gray-8:hover{color:var(--slate-gray-8)}.hover-slate-gray-9:hover{color:var(--slate-gray-9)}.hover-slate-gray-10:hover{color:var(--slate-gray-10)}.hover-slate-gray-11:hover{color:var(--slate-gray-11)}.hover-blue-0:hover{color:var(--blue-0)}.hover-blue-1:hover{color:var(--blue-1)}.hover-blue-2:hover{color:var(--blue-2)}.hover-blue-3:hover{color:var(--blue-3)}.hover-blue-4:hover{color:var(--blue-4)}.hover-blue-5:hover{color:var(--blue-5)}.hover-blue-6:hover{color:var(--blue-6)}.hover-blue-7:hover{color:var(--blue-7)}.hover-blue-8:hover{color:var(--blue-8)}.hover-blue-9:hover{color:var(--blue-9)}.hover-blue-10:hover{color:var(--blue-10)}.hover-blue-11:hover{color:var(--blue-11)}.hover-indigo-0:hover{color:var(--indigo-0)}.hover-indigo-1:hover{color:var(--indigo-1)}.hover-indigo-2:hover{color:var(--indigo-2)}.hover-indigo-3:hover{color:var(--indigo-3)}.hover-indigo-4:hover{color:var(--indigo-4)}.hover-indigo-5:hover{color:var(--indigo-5)}.hover-indigo-6:hover{color:var(--indigo-6)}.hover-indigo-7:hover{color:var(--indigo-7)}.hover-indigo-8:hover{color:var(--indigo-8)}.hover-indigo-9:hover{color:var(--indigo-9)}.hover-indigo-10:hover{color:var(--indigo-10)}.hover-indigo-11:hover{color:var(--indigo-11)}.hover-violet-0:hover{color:var(--violet-0)}.hover-violet-1:hover{color:var(--violet-1)}.hover-violet-2:hover{color:var(--violet-2)}.hover-violet-3:hover{color:var(--violet-3)}.hover-violet-4:hover{color:var(--violet-4)}.hover-violet-5:hover{color:var(--violet-5)}.hover-violet-6:hover{color:var(--violet-6)}.hover-violet-7:hover{color:var(--violet-7)}.hover-violet-8:hover{color:var(--violet-8)}.hover-violet-9:hover{color:var(--violet-9)}.hover-violet-10:hover{color:var(--violet-10)}.hover-violet-11:hover{color:var(--violet-11)}.hover-magenta-0:hover{color:var(--magenta-0)}.hover-magenta-1:hover{color:var(--magenta-1)}.hover-magenta-2:hover{color:var(--magenta-2)}.hover-magenta-3:hover{color:var(--magenta-3)}.hover-magenta-4:hover{color:var(--magenta-4)}.hover-magenta-5:hover{color:var(--magenta-5)}.hover-magenta-6:hover{color:var(--magenta-6)}.hover-magenta-7:hover{color:var(--magenta-7)}.hover-magenta-8:hover{color:var(--magenta-8)}.hover-magenta-9:hover{color:var(--magenta-9)}.hover-magenta-10:hover{color:var(--magenta-10)}.hover-magenta-11:hover{color:var(--magenta-11)}.hover-red-0:hover{color:var(--red-0)}.hover-red-1:hover{color:var(--red-1)}.hover-red-2:hover{color:var(--red-2)}.hover-red-3:hover{color:var(--red-3)}.hover-red-4:hover{color:var(--red-4)}.hover-red-5:hover{color:var(--red-5)}.hover-red-6:hover{color:var(--red-6)}.hover-red-7:hover{color:var(--red-7)}.hover-red-8:hover{color:var(--red-8)}.hover-red-9:hover{color:var(--red-9)}.hover-red-10:hover{color:var(--red-10)}.hover-red-11:hover{color:var(--red-11)}.hover-red-orange-0:hover{color:var(--red-orange-0)}.hover-red-orange-1:hover{color:var(--red-orange-1)}.hover-red-orange-2:hover{color:var(--red-orange-2)}.hover-red-orange-3:hover{color:var(--red-orange-3)}.hover-red-orange-4:hover{color:var(--red-orange-4)}.hover-red-orange-5:hover{color:var(--red-orange-5)}.hover-red-orange-6:hover{color:var(--red-orange-6)}.hover-red-orange-7:hover{color:var(--red-orange-7)}.hover-red-orange-8:hover{color:var(--red-orange-8)}.hover-red-orange-9:hover{color:var(--red-orange-9)}.hover-red-orange-10:hover{color:var(--red-orange-10)}.hover-red-orange-11:hover{color:var(--red-orange-11)}.hover-orange-0:hover{color:var(--orange-0)}.hover-orange-1:hover{color:var(--orange-1)}.hover-orange-2:hover{color:var(--orange-2)}.hover-orange-3:hover{color:var(--orange-3)}.hover-orange-4:hover{color:var(--orange-4)}.hover-orange-5:hover{color:var(--orange-5)}.hover-orange-6:hover{color:var(--orange-6)}.hover-orange-7:hover{color:var(--orange-7)}.hover-orange-8:hover{color:var(--orange-8)}.hover-orange-9:hover{color:var(--orange-9)}.hover-orange-10:hover{color:var(--orange-10)}.hover-orange-11:hover{color:var(--orange-11)}.hover-gold-0:hover{color:var(--gold-0)}.hover-gold-1:hover{color:var(--gold-1)}.hover-gold-2:hover{color:var(--gold-2)}.hover-gold-3:hover{color:var(--gold-3)}.hover-gold-4:hover{color:var(--gold-4)}.hover-gold-5:hover{color:var(--gold-5)}.hover-gold-6:hover{color:var(--gold-6)}.hover-gold-7:hover{color:var(--gold-7)}.hover-gold-8:hover{color:var(--gold-8)}.hover-gold-9:hover{color:var(--gold-9)}.hover-gold-10:hover{color:var(--gold-10)}.hover-gold-11:hover{color:var(--gold-11)}.hover-yellow-0:hover{color:var(--yellow-0)}.hover-yellow-1:hover{color:var(--yellow-1)}.hover-yellow-2:hover{color:var(--yellow-2)}.hover-yellow-3:hover{color:var(--yellow-3)}.hover-yellow-4:hover{color:var(--yellow-4)}.hover-yellow-5:hover{color:var(--yellow-5)}.hover-yellow-6:hover{color:var(--yellow-6)}.hover-yellow-7:hover{color:var(--yellow-7)}.hover-yellow-8:hover{color:var(--yellow-8)}.hover-yellow-9:hover{color:var(--yellow-9)}.hover-yellow-10:hover{color:var(--yellow-10)}.hover-yellow-11:hover{color:var(--yellow-11)}.hover-green-0:hover{color:var(--green-0)}.hover-green-1:hover{color:var(--green-1)}.hover-green-2:hover{color:var(--green-2)}.hover-green-3:hover{color:var(--green-3)}.hover-green-4:hover{color:var(--green-4)}.hover-green-5:hover{color:var(--green-5)}.hover-green-6:hover{color:var(--green-6)}.hover-green-7:hover{color:var(--green-7)}.hover-green-8:hover{color:var(--green-8)}.hover-green-9:hover{color:var(--green-9)}.hover-green-10:hover{color:var(--green-10)}.hover-green-11:hover{color:var(--green-11)}.hover-teal-0:hover{color:var(--teal-0)}.hover-teal-1:hover{color:var(--teal-1)}.hover-teal-2:hover{color:var(--teal-2)}.hover-teal-3:hover{color:var(--teal-3)}.hover-teal-4:hover{color:var(--teal-4)}.hover-teal-5:hover{color:var(--teal-5)}.hover-teal-6:hover{color:var(--teal-6)}.hover-teal-7:hover{color:var(--teal-7)}.hover-teal-8:hover{color:var(--teal-8)}.hover-teal-9:hover{color:var(--teal-9)}.hover-teal-10:hover{color:var(--teal-10)}.hover-teal-11:hover{color:var(--teal-11)}.hover-cyan-0:hover{color:var(--cyan-0)}.hover-cyan-1:hover{color:var(--cyan-1)}.hover-cyan-2:hover{color:var(--cyan-2)}.hover-cyan-3:hover{color:var(--cyan-3)}.hover-cyan-4:hover{color:var(--cyan-4)}.hover-cyan-5:hover{color:var(--cyan-5)}.hover-cyan-6:hover{color:var(--cyan-6)}.hover-cyan-7:hover{color:var(--cyan-7)}.hover-cyan-8:hover{color:var(--cyan-8)}.hover-cyan-9:hover{color:var(--cyan-9)}.hover-cyan-10:hover{color:var(--cyan-10)}.hover-cyan-11:hover{color:var(--cyan-11)}.hover-bg-overlay-tint-0:hover{background-color:var(--overlay-tint-0)}.hover-bg-overlay-tint-1:hover{background-color:var(--overlay-tint-1)}.hover-bg-overlay-tint-2:hover{background-color:var(--overlay-tint-2)}.hover-bg-overlay-tint-3:hover{background-color:var(--overlay-tint-3)}.hover-bg-overlay-tint-4:hover{background-color:var(--overlay-tint-4)}.hover-bg-overlay-tint-5:hover{background-color:var(--overlay-tint-5)}.hover-bg-overlay-tint-6:hover{background-color:var(--overlay-tint-6)}.hover-bg-overlay-tint-7:hover{background-color:var(--overlay-tint-7)}.hover-bg-overlay-tint-8:hover{background-color:var(--overlay-tint-8)}.hover-bg-overlay-tint-9:hover{background-color:var(--overlay-tint-9)}.hover-bg-overlay-tint-10:hover{background-color:var(--overlay-tint-10)}.hover-bg-overlay-tint-11:hover{background-color:var(--overlay-tint-11)}.hover-bg-overlay-shadow-0:hover{background-color:var(--overlay-shadow-0)}.hover-bg-overlay-shadow-1:hover{background-color:var(--overlay-shadow-1)}.hover-bg-overlay-shadow-2:hover{background-color:var(--overlay-shadow-2)}.hover-bg-overlay-shadow-3:hover{background-color:var(--overlay-shadow-3)}.hover-bg-overlay-shadow-4:hover{background-color:var(--overlay-shadow-4)}.hover-bg-overlay-shadow-5:hover{background-color:var(--overlay-shadow-5)}.hover-bg-overlay-shadow-6:hover{background-color:var(--overlay-shadow-6)}.hover-bg-overlay-shadow-7:hover{background-color:var(--overlay-shadow-7)}.hover-bg-overlay-shadow-8:hover{background-color:var(--overlay-shadow-8)}.hover-bg-overlay-shadow-9:hover{background-color:var(--overlay-shadow-9)}.hover-bg-overlay-shadow-10:hover{background-color:var(--overlay-shadow-10)}.hover-bg-overlay-shadow-11:hover{background-color:var(--overlay-shadow-11)}.hover-bg-gray-0:hover{background-color:var(--gray-0)}.hover-bg-gray-1:hover{background-color:var(--gray-1)}.hover-bg-gray-2:hover{background-color:var(--gray-2)}.hover-bg-gray-3:hover{background-color:var(--gray-3)}.hover-bg-gray-4:hover{background-color:var(--gray-4)}.hover-bg-gray-5:hover{background-color:var(--gray-5)}.hover-bg-gray-6:hover{background-color:var(--gray-6)}.hover-bg-gray-7:hover{background-color:var(--gray-7)}.hover-bg-gray-8:hover{background-color:var(--gray-8)}.hover-bg-gray-9:hover{background-color:var(--gray-9)}.hover-bg-gray-10:hover{background-color:var(--gray-10)}.hover-bg-gray-11:hover{background-color:var(--gray-11)}.hover-bg-slate-gray-0:hover{background-color:var(--slate-gray-0)}.hover-bg-slate-gray-1:hover{background-color:var(--slate-gray-1)}.hover-bg-slate-gray-2:hover{background-color:var(--slate-gray-2)}.hover-bg-slate-gray-3:hover{background-color:var(--slate-gray-3)}.hover-bg-slate-gray-4:hover{background-color:var(--slate-gray-4)}.hover-bg-slate-gray-5:hover{background-color:var(--slate-gray-5)}.hover-bg-slate-gray-6:hover{background-color:var(--slate-gray-6)}.hover-bg-slate-gray-7:hover{background-color:var(--slate-gray-7)}.hover-bg-slate-gray-8:hover{background-color:var(--slate-gray-8)}.hover-bg-slate-gray-9:hover{background-color:var(--slate-gray-9)}.hover-bg-slate-gray-10:hover{background-color:var(--slate-gray-10)}.hover-bg-slate-gray-11:hover{background-color:var(--slate-gray-11)}.hover-bg-blue-0:hover{background-color:var(--blue-0)}.hover-bg-blue-1:hover{background-color:var(--blue-1)}.hover-bg-blue-2:hover{background-color:var(--blue-2)}.hover-bg-blue-3:hover{background-color:var(--blue-3)}.hover-bg-blue-4:hover{background-color:var(--blue-4)}.hover-bg-blue-5:hover{background-color:var(--blue-5)}.hover-bg-blue-6:hover{background-color:var(--blue-6)}.hover-bg-blue-7:hover{background-color:var(--blue-7)}.hover-bg-blue-8:hover{background-color:var(--blue-8)}.hover-bg-blue-9:hover{background-color:var(--blue-9)}.hover-bg-blue-10:hover{background-color:var(--blue-10)}.hover-bg-blue-11:hover{background-color:var(--blue-11)}.hover-bg-indigo-0:hover{background-color:var(--indigo-0)}.hover-bg-indigo-1:hover{background-color:var(--indigo-1)}.hover-bg-indigo-2:hover{background-color:var(--indigo-2)}.hover-bg-indigo-3:hover{background-color:var(--indigo-3)}.hover-bg-indigo-4:hover{background-color:var(--indigo-4)}.hover-bg-indigo-5:hover{background-color:var(--indigo-5)}.hover-bg-indigo-6:hover{background-color:var(--indigo-6)}.hover-bg-indigo-7:hover{background-color:var(--indigo-7)}.hover-bg-indigo-8:hover{background-color:var(--indigo-8)}.hover-bg-indigo-9:hover{background-color:var(--indigo-9)}.hover-bg-indigo-10:hover{background-color:var(--indigo-10)}.hover-bg-indigo-11:hover{background-color:var(--indigo-11)}.hover-bg-violet-0:hover{background-color:var(--violet-0)}.hover-bg-violet-1:hover{background-color:var(--violet-1)}.hover-bg-violet-2:hover{background-color:var(--violet-2)}.hover-bg-violet-3:hover{background-color:var(--violet-3)}.hover-bg-violet-4:hover{background-color:var(--violet-4)}.hover-bg-violet-5:hover{background-color:var(--violet-5)}.hover-bg-violet-6:hover{background-color:var(--violet-6)}.hover-bg-violet-7:hover{background-color:var(--violet-7)}.hover-bg-violet-8:hover{background-color:var(--violet-8)}.hover-bg-violet-9:hover{background-color:var(--violet-9)}.hover-bg-violet-10:hover{background-color:var(--violet-10)}.hover-bg-violet-11:hover{background-color:var(--violet-11)}.hover-bg-magenta-0:hover{background-color:var(--magenta-0)}.hover-bg-magenta-1:hover{background-color:var(--magenta-1)}.hover-bg-magenta-2:hover{background-color:var(--magenta-2)}.hover-bg-magenta-3:hover{background-color:var(--magenta-3)}.hover-bg-magenta-4:hover{background-color:var(--magenta-4)}.hover-bg-magenta-5:hover{background-color:var(--magenta-5)}.hover-bg-magenta-6:hover{background-color:var(--magenta-6)}.hover-bg-magenta-7:hover{background-color:var(--magenta-7)}.hover-bg-magenta-8:hover{background-color:var(--magenta-8)}.hover-bg-magenta-9:hover{background-color:var(--magenta-9)}.hover-bg-magenta-10:hover{background-color:var(--magenta-10)}.hover-bg-magenta-11:hover{background-color:var(--magenta-11)}.hover-bg-red-0:hover{background-color:var(--red-0)}.hover-bg-red-1:hover{background-color:var(--red-1)}.hover-bg-red-2:hover{background-color:var(--red-2)}.hover-bg-red-3:hover{background-color:var(--red-3)}.hover-bg-red-4:hover{background-color:var(--red-4)}.hover-bg-red-5:hover{background-color:var(--red-5)}.hover-bg-red-6:hover{background-color:var(--red-6)}.hover-bg-red-7:hover{background-color:var(--red-7)}.hover-bg-red-8:hover{background-color:var(--red-8)}.hover-bg-red-9:hover{background-color:var(--red-9)}.hover-bg-red-10:hover{background-color:var(--red-10)}.hover-bg-red-11:hover{background-color:var(--red-11)}.hover-bg-red-orange-0:hover{background-color:var(--red-orange-0)}.hover-bg-red-orange-1:hover{background-color:var(--red-orange-1)}.hover-bg-red-orange-2:hover{background-color:var(--red-orange-2)}.hover-bg-red-orange-3:hover{background-color:var(--red-orange-3)}.hover-bg-red-orange-4:hover{background-color:var(--red-orange-4)}.hover-bg-red-orange-5:hover{background-color:var(--red-orange-5)}.hover-bg-red-orange-6:hover{background-color:var(--red-orange-6)}.hover-bg-red-orange-7:hover{background-color:var(--red-orange-7)}.hover-bg-red-orange-8:hover{background-color:var(--red-orange-8)}.hover-bg-red-orange-9:hover{background-color:var(--red-orange-9)}.hover-bg-red-orange-10:hover{background-color:var(--red-orange-10)}.hover-bg-red-orange-11:hover{background-color:var(--red-orange-11)}.hover-bg-orange-0:hover{background-color:var(--orange-0)}.hover-bg-orange-1:hover{background-color:var(--orange-1)}.hover-bg-orange-2:hover{background-color:var(--orange-2)}.hover-bg-orange-3:hover{background-color:var(--orange-3)}.hover-bg-orange-4:hover{background-color:var(--orange-4)}.hover-bg-orange-5:hover{background-color:var(--orange-5)}.hover-bg-orange-6:hover{background-color:var(--orange-6)}.hover-bg-orange-7:hover{background-color:var(--orange-7)}.hover-bg-orange-8:hover{background-color:var(--orange-8)}.hover-bg-orange-9:hover{background-color:var(--orange-9)}.hover-bg-orange-10:hover{background-color:var(--orange-10)}.hover-bg-orange-11:hover{background-color:var(--orange-11)}.hover-bg-gold-0:hover{background-color:var(--gold-0)}.hover-bg-gold-1:hover{background-color:var(--gold-1)}.hover-bg-gold-2:hover{background-color:var(--gold-2)}.hover-bg-gold-3:hover{background-color:var(--gold-3)}.hover-bg-gold-4:hover{background-color:var(--gold-4)}.hover-bg-gold-5:hover{background-color:var(--gold-5)}.hover-bg-gold-6:hover{background-color:var(--gold-6)}.hover-bg-gold-7:hover{background-color:var(--gold-7)}.hover-bg-gold-8:hover{background-color:var(--gold-8)}.hover-bg-gold-9:hover{background-color:var(--gold-9)}.hover-bg-gold-10:hover{background-color:var(--gold-10)}.hover-bg-gold-11:hover{background-color:var(--gold-11)}.hover-bg-yellow-0:hover{background-color:var(--yellow-0)}.hover-bg-yellow-1:hover{background-color:var(--yellow-1)}.hover-bg-yellow-2:hover{background-color:var(--yellow-2)}.hover-bg-yellow-3:hover{background-color:var(--yellow-3)}.hover-bg-yellow-4:hover{background-color:var(--yellow-4)}.hover-bg-yellow-5:hover{background-color:var(--yellow-5)}.hover-bg-yellow-6:hover{background-color:var(--yellow-6)}.hover-bg-yellow-7:hover{background-color:var(--yellow-7)}.hover-bg-yellow-8:hover{background-color:var(--yellow-8)}.hover-bg-yellow-9:hover{background-color:var(--yellow-9)}.hover-bg-yellow-10:hover{background-color:var(--yellow-10)}.hover-bg-yellow-11:hover{background-color:var(--yellow-11)}.hover-bg-green-0:hover{background-color:var(--green-0)}.hover-bg-green-1:hover{background-color:var(--green-1)}.hover-bg-green-2:hover{background-color:var(--green-2)}.hover-bg-green-3:hover{background-color:var(--green-3)}.hover-bg-green-4:hover{background-color:var(--green-4)}.hover-bg-green-5:hover{background-color:var(--green-5)}.hover-bg-green-6:hover{background-color:var(--green-6)}.hover-bg-green-7:hover{background-color:var(--green-7)}.hover-bg-green-8:hover{background-color:var(--green-8)}.hover-bg-green-9:hover{background-color:var(--green-9)}.hover-bg-green-10:hover{background-color:var(--green-10)}.hover-bg-green-11:hover{background-color:var(--green-11)}.hover-bg-teal-0:hover{background-color:var(--teal-0)}.hover-bg-teal-1:hover{background-color:var(--teal-1)}.hover-bg-teal-2:hover{background-color:var(--teal-2)}.hover-bg-teal-3:hover{background-color:var(--teal-3)}.hover-bg-teal-4:hover{background-color:var(--teal-4)}.hover-bg-teal-5:hover{background-color:var(--teal-5)}.hover-bg-teal-6:hover{background-color:var(--teal-6)}.hover-bg-teal-7:hover{background-color:var(--teal-7)}.hover-bg-teal-8:hover{background-color:var(--teal-8)}.hover-bg-teal-9:hover{background-color:var(--teal-9)}.hover-bg-teal-10:hover{background-color:var(--teal-10)}.hover-bg-teal-11:hover{background-color:var(--teal-11)}.hover-bg-cyan-0:hover{background-color:var(--cyan-0)}.hover-bg-cyan-1:hover{background-color:var(--cyan-1)}.hover-bg-cyan-2:hover{background-color:var(--cyan-2)}.hover-bg-cyan-3:hover{background-color:var(--cyan-3)}.hover-bg-cyan-4:hover{background-color:var(--cyan-4)}.hover-bg-cyan-5:hover{background-color:var(--cyan-5)}.hover-bg-cyan-6:hover{background-color:var(--cyan-6)}.hover-bg-cyan-7:hover{background-color:var(--cyan-7)}.hover-bg-cyan-8:hover{background-color:var(--cyan-8)}.hover-bg-cyan-9:hover{background-color:var(--cyan-9)}.hover-bg-cyan-10:hover{background-color:var(--cyan-10)}.hover-bg-cyan-11:hover{background-color:var(--cyan-11)}.focus-overlay-tint-0:focus{color:var(--overlay-tint-0)}.focus-overlay-tint-1:focus{color:var(--overlay-tint-1)}.focus-overlay-tint-2:focus{color:var(--overlay-tint-2)}.focus-overlay-tint-3:focus{color:var(--overlay-tint-3)}.focus-overlay-tint-4:focus{color:var(--overlay-tint-4)}.focus-overlay-tint-5:focus{color:var(--overlay-tint-5)}.focus-overlay-tint-6:focus{color:var(--overlay-tint-6)}.focus-overlay-tint-7:focus{color:var(--overlay-tint-7)}.focus-overlay-tint-8:focus{color:var(--overlay-tint-8)}.focus-overlay-tint-9:focus{color:var(--overlay-tint-9)}.focus-overlay-tint-10:focus{color:var(--overlay-tint-10)}.focus-overlay-tint-11:focus{color:var(--overlay-tint-11)}.focus-overlay-shadow-0:focus{color:var(--overlay-shadow-0)}.focus-overlay-shadow-1:focus{color:var(--overlay-shadow-1)}.focus-overlay-shadow-2:focus{color:var(--overlay-shadow-2)}.focus-overlay-shadow-3:focus{color:var(--overlay-shadow-3)}.focus-overlay-shadow-4:focus{color:var(--overlay-shadow-4)}.focus-overlay-shadow-5:focus{color:var(--overlay-shadow-5)}.focus-overlay-shadow-6:focus{color:var(--overlay-shadow-6)}.focus-overlay-shadow-7:focus{color:var(--overlay-shadow-7)}.focus-overlay-shadow-8:focus{color:var(--overlay-shadow-8)}.focus-overlay-shadow-9:focus{color:var(--overlay-shadow-9)}.focus-overlay-shadow-10:focus{color:var(--overlay-shadow-10)}.focus-overlay-shadow-11:focus{color:var(--overlay-shadow-11)}.focus-gray-0:focus{color:var(--gray-0)}.focus-gray-1:focus{color:var(--gray-1)}.focus-gray-2:focus{color:var(--gray-2)}.focus-gray-3:focus{color:var(--gray-3)}.focus-gray-4:focus{color:var(--gray-4)}.focus-gray-5:focus{color:var(--gray-5)}.focus-gray-6:focus{color:var(--gray-6)}.focus-gray-7:focus{color:var(--gray-7)}.focus-gray-8:focus{color:var(--gray-8)}.focus-gray-9:focus{color:var(--gray-9)}.focus-gray-10:focus{color:var(--gray-10)}.focus-gray-11:focus{color:var(--gray-11)}.focus-slate-gray-0:focus{color:var(--slate-gray-0)}.focus-slate-gray-1:focus{color:var(--slate-gray-1)}.focus-slate-gray-2:focus{color:var(--slate-gray-2)}.focus-slate-gray-3:focus{color:var(--slate-gray-3)}.focus-slate-gray-4:focus{color:var(--slate-gray-4)}.focus-slate-gray-5:focus{color:var(--slate-gray-5)}.focus-slate-gray-6:focus{color:var(--slate-gray-6)}.focus-slate-gray-7:focus{color:var(--slate-gray-7)}.focus-slate-gray-8:focus{color:var(--slate-gray-8)}.focus-slate-gray-9:focus{color:var(--slate-gray-9)}.focus-slate-gray-10:focus{color:var(--slate-gray-10)}.focus-slate-gray-11:focus{color:var(--slate-gray-11)}.focus-blue-0:focus{color:var(--blue-0)}.focus-blue-1:focus{color:var(--blue-1)}.focus-blue-2:focus{color:var(--blue-2)}.focus-blue-3:focus{color:var(--blue-3)}.focus-blue-4:focus{color:var(--blue-4)}.focus-blue-5:focus{color:var(--blue-5)}.focus-blue-6:focus{color:var(--blue-6)}.focus-blue-7:focus{color:var(--blue-7)}.focus-blue-8:focus{color:var(--blue-8)}.focus-blue-9:focus{color:var(--blue-9)}.focus-blue-10:focus{color:var(--blue-10)}.focus-blue-11:focus{color:var(--blue-11)}.focus-indigo-0:focus{color:var(--indigo-0)}.focus-indigo-1:focus{color:var(--indigo-1)}.focus-indigo-2:focus{color:var(--indigo-2)}.focus-indigo-3:focus{color:var(--indigo-3)}.focus-indigo-4:focus{color:var(--indigo-4)}.focus-indigo-5:focus{color:var(--indigo-5)}.focus-indigo-6:focus{color:var(--indigo-6)}.focus-indigo-7:focus{color:var(--indigo-7)}.focus-indigo-8:focus{color:var(--indigo-8)}.focus-indigo-9:focus{color:var(--indigo-9)}.focus-indigo-10:focus{color:var(--indigo-10)}.focus-indigo-11:focus{color:var(--indigo-11)}.focus-violet-0:focus{color:var(--violet-0)}.focus-violet-1:focus{color:var(--violet-1)}.focus-violet-2:focus{color:var(--violet-2)}.focus-violet-3:focus{color:var(--violet-3)}.focus-violet-4:focus{color:var(--violet-4)}.focus-violet-5:focus{color:var(--violet-5)}.focus-violet-6:focus{color:var(--violet-6)}.focus-violet-7:focus{color:var(--violet-7)}.focus-violet-8:focus{color:var(--violet-8)}.focus-violet-9:focus{color:var(--violet-9)}.focus-violet-10:focus{color:var(--violet-10)}.focus-violet-11:focus{color:var(--violet-11)}.focus-magenta-0:focus{color:var(--magenta-0)}.focus-magenta-1:focus{color:var(--magenta-1)}.focus-magenta-2:focus{color:var(--magenta-2)}.focus-magenta-3:focus{color:var(--magenta-3)}.focus-magenta-4:focus{color:var(--magenta-4)}.focus-magenta-5:focus{color:var(--magenta-5)}.focus-magenta-6:focus{color:var(--magenta-6)}.focus-magenta-7:focus{color:var(--magenta-7)}.focus-magenta-8:focus{color:var(--magenta-8)}.focus-magenta-9:focus{color:var(--magenta-9)}.focus-magenta-10:focus{color:var(--magenta-10)}.focus-magenta-11:focus{color:var(--magenta-11)}.focus-red-0:focus{color:var(--red-0)}.focus-red-1:focus{color:var(--red-1)}.focus-red-2:focus{color:var(--red-2)}.focus-red-3:focus{color:var(--red-3)}.focus-red-4:focus{color:var(--red-4)}.focus-red-5:focus{color:var(--red-5)}.focus-red-6:focus{color:var(--red-6)}.focus-red-7:focus{color:var(--red-7)}.focus-red-8:focus{color:var(--red-8)}.focus-red-9:focus{color:var(--red-9)}.focus-red-10:focus{color:var(--red-10)}.focus-red-11:focus{color:var(--red-11)}.focus-red-orange-0:focus{color:var(--red-orange-0)}.focus-red-orange-1:focus{color:var(--red-orange-1)}.focus-red-orange-2:focus{color:var(--red-orange-2)}.focus-red-orange-3:focus{color:var(--red-orange-3)}.focus-red-orange-4:focus{color:var(--red-orange-4)}.focus-red-orange-5:focus{color:var(--red-orange-5)}.focus-red-orange-6:focus{color:var(--red-orange-6)}.focus-red-orange-7:focus{color:var(--red-orange-7)}.focus-red-orange-8:focus{color:var(--red-orange-8)}.focus-red-orange-9:focus{color:var(--red-orange-9)}.focus-red-orange-10:focus{color:var(--red-orange-10)}.focus-red-orange-11:focus{color:var(--red-orange-11)}.focus-orange-0:focus{color:var(--orange-0)}.focus-orange-1:focus{color:var(--orange-1)}.focus-orange-2:focus{color:var(--orange-2)}.focus-orange-3:focus{color:var(--orange-3)}.focus-orange-4:focus{color:var(--orange-4)}.focus-orange-5:focus{color:var(--orange-5)}.focus-orange-6:focus{color:var(--orange-6)}.focus-orange-7:focus{color:var(--orange-7)}.focus-orange-8:focus{color:var(--orange-8)}.focus-orange-9:focus{color:var(--orange-9)}.focus-orange-10:focus{color:var(--orange-10)}.focus-orange-11:focus{color:var(--orange-11)}.focus-gold-0:focus{color:var(--gold-0)}.focus-gold-1:focus{color:var(--gold-1)}.focus-gold-2:focus{color:var(--gold-2)}.focus-gold-3:focus{color:var(--gold-3)}.focus-gold-4:focus{color:var(--gold-4)}.focus-gold-5:focus{color:var(--gold-5)}.focus-gold-6:focus{color:var(--gold-6)}.focus-gold-7:focus{color:var(--gold-7)}.focus-gold-8:focus{color:var(--gold-8)}.focus-gold-9:focus{color:var(--gold-9)}.focus-gold-10:focus{color:var(--gold-10)}.focus-gold-11:focus{color:var(--gold-11)}.focus-yellow-0:focus{color:var(--yellow-0)}.focus-yellow-1:focus{color:var(--yellow-1)}.focus-yellow-2:focus{color:var(--yellow-2)}.focus-yellow-3:focus{color:var(--yellow-3)}.focus-yellow-4:focus{color:var(--yellow-4)}.focus-yellow-5:focus{color:var(--yellow-5)}.focus-yellow-6:focus{color:var(--yellow-6)}.focus-yellow-7:focus{color:var(--yellow-7)}.focus-yellow-8:focus{color:var(--yellow-8)}.focus-yellow-9:focus{color:var(--yellow-9)}.focus-yellow-10:focus{color:var(--yellow-10)}.focus-yellow-11:focus{color:var(--yellow-11)}.focus-green-0:focus{color:var(--green-0)}.focus-green-1:focus{color:var(--green-1)}.focus-green-2:focus{color:var(--green-2)}.focus-green-3:focus{color:var(--green-3)}.focus-green-4:focus{color:var(--green-4)}.focus-green-5:focus{color:var(--green-5)}.focus-green-6:focus{color:var(--green-6)}.focus-green-7:focus{color:var(--green-7)}.focus-green-8:focus{color:var(--green-8)}.focus-green-9:focus{color:var(--green-9)}.focus-green-10:focus{color:var(--green-10)}.focus-green-11:focus{color:var(--green-11)}.focus-teal-0:focus{color:var(--teal-0)}.focus-teal-1:focus{color:var(--teal-1)}.focus-teal-2:focus{color:var(--teal-2)}.focus-teal-3:focus{color:var(--teal-3)}.focus-teal-4:focus{color:var(--teal-4)}.focus-teal-5:focus{color:var(--teal-5)}.focus-teal-6:focus{color:var(--teal-6)}.focus-teal-7:focus{color:var(--teal-7)}.focus-teal-8:focus{color:var(--teal-8)}.focus-teal-9:focus{color:var(--teal-9)}.focus-teal-10:focus{color:var(--teal-10)}.focus-teal-11:focus{color:var(--teal-11)}.focus-cyan-0:focus{color:var(--cyan-0)}.focus-cyan-1:focus{color:var(--cyan-1)}.focus-cyan-2:focus{color:var(--cyan-2)}.focus-cyan-3:focus{color:var(--cyan-3)}.focus-cyan-4:focus{color:var(--cyan-4)}.focus-cyan-5:focus{color:var(--cyan-5)}.focus-cyan-6:focus{color:var(--cyan-6)}.focus-cyan-7:focus{color:var(--cyan-7)}.focus-cyan-8:focus{color:var(--cyan-8)}.focus-cyan-9:focus{color:var(--cyan-9)}.focus-cyan-10:focus{color:var(--cyan-10)}.focus-cyan-11:focus{color:var(--cyan-11)}.focus-bg-overlay-tint-0:focus{background-color:var(--overlay-tint-0)}.focus-bg-overlay-tint-1:focus{background-color:var(--overlay-tint-1)}.focus-bg-overlay-tint-2:focus{background-color:var(--overlay-tint-2)}.focus-bg-overlay-tint-3:focus{background-color:var(--overlay-tint-3)}.focus-bg-overlay-tint-4:focus{background-color:var(--overlay-tint-4)}.focus-bg-overlay-tint-5:focus{background-color:var(--overlay-tint-5)}.focus-bg-overlay-tint-6:focus{background-color:var(--overlay-tint-6)}.focus-bg-overlay-tint-7:focus{background-color:var(--overlay-tint-7)}.focus-bg-overlay-tint-8:focus{background-color:var(--overlay-tint-8)}.focus-bg-overlay-tint-9:focus{background-color:var(--overlay-tint-9)}.focus-bg-overlay-tint-10:focus{background-color:var(--overlay-tint-10)}.focus-bg-overlay-tint-11:focus{background-color:var(--overlay-tint-11)}.focus-bg-overlay-shadow-0:focus{background-color:var(--overlay-shadow-0)}.focus-bg-overlay-shadow-1:focus{background-color:var(--overlay-shadow-1)}.focus-bg-overlay-shadow-2:focus{background-color:var(--overlay-shadow-2)}.focus-bg-overlay-shadow-3:focus{background-color:var(--overlay-shadow-3)}.focus-bg-overlay-shadow-4:focus{background-color:var(--overlay-shadow-4)}.focus-bg-overlay-shadow-5:focus{background-color:var(--overlay-shadow-5)}.focus-bg-overlay-shadow-6:focus{background-color:var(--overlay-shadow-6)}.focus-bg-overlay-shadow-7:focus{background-color:var(--overlay-shadow-7)}.focus-bg-overlay-shadow-8:focus{background-color:var(--overlay-shadow-8)}.focus-bg-overlay-shadow-9:focus{background-color:var(--overlay-shadow-9)}.focus-bg-overlay-shadow-10:focus{background-color:var(--overlay-shadow-10)}.focus-bg-overlay-shadow-11:focus{background-color:var(--overlay-shadow-11)}.focus-bg-gray-0:focus{background-color:var(--gray-0)}.focus-bg-gray-1:focus{background-color:var(--gray-1)}.focus-bg-gray-2:focus{background-color:var(--gray-2)}.focus-bg-gray-3:focus{background-color:var(--gray-3)}.focus-bg-gray-4:focus{background-color:var(--gray-4)}.focus-bg-gray-5:focus{background-color:var(--gray-5)}.focus-bg-gray-6:focus{background-color:var(--gray-6)}.focus-bg-gray-7:focus{background-color:var(--gray-7)}.focus-bg-gray-8:focus{background-color:var(--gray-8)}.focus-bg-gray-9:focus{background-color:var(--gray-9)}.focus-bg-gray-10:focus{background-color:var(--gray-10)}.focus-bg-gray-11:focus{background-color:var(--gray-11)}.focus-bg-slate-gray-0:focus{background-color:var(--slate-gray-0)}.focus-bg-slate-gray-1:focus{background-color:var(--slate-gray-1)}.focus-bg-slate-gray-2:focus{background-color:var(--slate-gray-2)}.focus-bg-slate-gray-3:focus{background-color:var(--slate-gray-3)}.focus-bg-slate-gray-4:focus{background-color:var(--slate-gray-4)}.focus-bg-slate-gray-5:focus{background-color:var(--slate-gray-5)}.focus-bg-slate-gray-6:focus{background-color:var(--slate-gray-6)}.focus-bg-slate-gray-7:focus{background-color:var(--slate-gray-7)}.focus-bg-slate-gray-8:focus{background-color:var(--slate-gray-8)}.focus-bg-slate-gray-9:focus{background-color:var(--slate-gray-9)}.focus-bg-slate-gray-10:focus{background-color:var(--slate-gray-10)}.focus-bg-slate-gray-11:focus{background-color:var(--slate-gray-11)}.focus-bg-blue-0:focus{background-color:var(--blue-0)}.focus-bg-blue-1:focus{background-color:var(--blue-1)}.focus-bg-blue-2:focus{background-color:var(--blue-2)}.focus-bg-blue-3:focus{background-color:var(--blue-3)}.focus-bg-blue-4:focus{background-color:var(--blue-4)}.focus-bg-blue-5:focus{background-color:var(--blue-5)}.focus-bg-blue-6:focus{background-color:var(--blue-6)}.focus-bg-blue-7:focus{background-color:var(--blue-7)}.focus-bg-blue-8:focus{background-color:var(--blue-8)}.focus-bg-blue-9:focus{background-color:var(--blue-9)}.focus-bg-blue-10:focus{background-color:var(--blue-10)}.focus-bg-blue-11:focus{background-color:var(--blue-11)}.focus-bg-indigo-0:focus{background-color:var(--indigo-0)}.focus-bg-indigo-1:focus{background-color:var(--indigo-1)}.focus-bg-indigo-2:focus{background-color:var(--indigo-2)}.focus-bg-indigo-3:focus{background-color:var(--indigo-3)}.focus-bg-indigo-4:focus{background-color:var(--indigo-4)}.focus-bg-indigo-5:focus{background-color:var(--indigo-5)}.focus-bg-indigo-6:focus{background-color:var(--indigo-6)}.focus-bg-indigo-7:focus{background-color:var(--indigo-7)}.focus-bg-indigo-8:focus{background-color:var(--indigo-8)}.focus-bg-indigo-9:focus{background-color:var(--indigo-9)}.focus-bg-indigo-10:focus{background-color:var(--indigo-10)}.focus-bg-indigo-11:focus{background-color:var(--indigo-11)}.focus-bg-violet-0:focus{background-color:var(--violet-0)}.focus-bg-violet-1:focus{background-color:var(--violet-1)}.focus-bg-violet-2:focus{background-color:var(--violet-2)}.focus-bg-violet-3:focus{background-color:var(--violet-3)}.focus-bg-violet-4:focus{background-color:var(--violet-4)}.focus-bg-violet-5:focus{background-color:var(--violet-5)}.focus-bg-violet-6:focus{background-color:var(--violet-6)}.focus-bg-violet-7:focus{background-color:var(--violet-7)}.focus-bg-violet-8:focus{background-color:var(--violet-8)}.focus-bg-violet-9:focus{background-color:var(--violet-9)}.focus-bg-violet-10:focus{background-color:var(--violet-10)}.focus-bg-violet-11:focus{background-color:var(--violet-11)}.focus-bg-magenta-0:focus{background-color:var(--magenta-0)}.focus-bg-magenta-1:focus{background-color:var(--magenta-1)}.focus-bg-magenta-2:focus{background-color:var(--magenta-2)}.focus-bg-magenta-3:focus{background-color:var(--magenta-3)}.focus-bg-magenta-4:focus{background-color:var(--magenta-4)}.focus-bg-magenta-5:focus{background-color:var(--magenta-5)}.focus-bg-magenta-6:focus{background-color:var(--magenta-6)}.focus-bg-magenta-7:focus{background-color:var(--magenta-7)}.focus-bg-magenta-8:focus{background-color:var(--magenta-8)}.focus-bg-magenta-9:focus{background-color:var(--magenta-9)}.focus-bg-magenta-10:focus{background-color:var(--magenta-10)}.focus-bg-magenta-11:focus{background-color:var(--magenta-11)}.focus-bg-red-0:focus{background-color:var(--red-0)}.focus-bg-red-1:focus{background-color:var(--red-1)}.focus-bg-red-2:focus{background-color:var(--red-2)}.focus-bg-red-3:focus{background-color:var(--red-3)}.focus-bg-red-4:focus{background-color:var(--red-4)}.focus-bg-red-5:focus{background-color:var(--red-5)}.focus-bg-red-6:focus{background-color:var(--red-6)}.focus-bg-red-7:focus{background-color:var(--red-7)}.focus-bg-red-8:focus{background-color:var(--red-8)}.focus-bg-red-9:focus{background-color:var(--red-9)}.focus-bg-red-10:focus{background-color:var(--red-10)}.focus-bg-red-11:focus{background-color:var(--red-11)}.focus-bg-red-orange-0:focus{background-color:var(--red-orange-0)}.focus-bg-red-orange-1:focus{background-color:var(--red-orange-1)}.focus-bg-red-orange-2:focus{background-color:var(--red-orange-2)}.focus-bg-red-orange-3:focus{background-color:var(--red-orange-3)}.focus-bg-red-orange-4:focus{background-color:var(--red-orange-4)}.focus-bg-red-orange-5:focus{background-color:var(--red-orange-5)}.focus-bg-red-orange-6:focus{background-color:var(--red-orange-6)}.focus-bg-red-orange-7:focus{background-color:var(--red-orange-7)}.focus-bg-red-orange-8:focus{background-color:var(--red-orange-8)}.focus-bg-red-orange-9:focus{background-color:var(--red-orange-9)}.focus-bg-red-orange-10:focus{background-color:var(--red-orange-10)}.focus-bg-red-orange-11:focus{background-color:var(--red-orange-11)}.focus-bg-orange-0:focus{background-color:var(--orange-0)}.focus-bg-orange-1:focus{background-color:var(--orange-1)}.focus-bg-orange-2:focus{background-color:var(--orange-2)}.focus-bg-orange-3:focus{background-color:var(--orange-3)}.focus-bg-orange-4:focus{background-color:var(--orange-4)}.focus-bg-orange-5:focus{background-color:var(--orange-5)}.focus-bg-orange-6:focus{background-color:var(--orange-6)}.focus-bg-orange-7:focus{background-color:var(--orange-7)}.focus-bg-orange-8:focus{background-color:var(--orange-8)}.focus-bg-orange-9:focus{background-color:var(--orange-9)}.focus-bg-orange-10:focus{background-color:var(--orange-10)}.focus-bg-orange-11:focus{background-color:var(--orange-11)}.focus-bg-gold-0:focus{background-color:var(--gold-0)}.focus-bg-gold-1:focus{background-color:var(--gold-1)}.focus-bg-gold-2:focus{background-color:var(--gold-2)}.focus-bg-gold-3:focus{background-color:var(--gold-3)}.focus-bg-gold-4:focus{background-color:var(--gold-4)}.focus-bg-gold-5:focus{background-color:var(--gold-5)}.focus-bg-gold-6:focus{background-color:var(--gold-6)}.focus-bg-gold-7:focus{background-color:var(--gold-7)}.focus-bg-gold-8:focus{background-color:var(--gold-8)}.focus-bg-gold-9:focus{background-color:var(--gold-9)}.focus-bg-gold-10:focus{background-color:var(--gold-10)}.focus-bg-gold-11:focus{background-color:var(--gold-11)}.focus-bg-yellow-0:focus{background-color:var(--yellow-0)}.focus-bg-yellow-1:focus{background-color:var(--yellow-1)}.focus-bg-yellow-2:focus{background-color:var(--yellow-2)}.focus-bg-yellow-3:focus{background-color:var(--yellow-3)}.focus-bg-yellow-4:focus{background-color:var(--yellow-4)}.focus-bg-yellow-5:focus{background-color:var(--yellow-5)}.focus-bg-yellow-6:focus{background-color:var(--yellow-6)}.focus-bg-yellow-7:focus{background-color:var(--yellow-7)}.focus-bg-yellow-8:focus{background-color:var(--yellow-8)}.focus-bg-yellow-9:focus{background-color:var(--yellow-9)}.focus-bg-yellow-10:focus{background-color:var(--yellow-10)}.focus-bg-yellow-11:focus{background-color:var(--yellow-11)}.focus-bg-green-0:focus{background-color:var(--green-0)}.focus-bg-green-1:focus{background-color:var(--green-1)}.focus-bg-green-2:focus{background-color:var(--green-2)}.focus-bg-green-3:focus{background-color:var(--green-3)}.focus-bg-green-4:focus{background-color:var(--green-4)}.focus-bg-green-5:focus{background-color:var(--green-5)}.focus-bg-green-6:focus{background-color:var(--green-6)}.focus-bg-green-7:focus{background-color:var(--green-7)}.focus-bg-green-8:focus{background-color:var(--green-8)}.focus-bg-green-9:focus{background-color:var(--green-9)}.focus-bg-green-10:focus{background-color:var(--green-10)}.focus-bg-green-11:focus{background-color:var(--green-11)}.focus-bg-teal-0:focus{background-color:var(--teal-0)}.focus-bg-teal-1:focus{background-color:var(--teal-1)}.focus-bg-teal-2:focus{background-color:var(--teal-2)}.focus-bg-teal-3:focus{background-color:var(--teal-3)}.focus-bg-teal-4:focus{background-color:var(--teal-4)}.focus-bg-teal-5:focus{background-color:var(--teal-5)}.focus-bg-teal-6:focus{background-color:var(--teal-6)}.focus-bg-teal-7:focus{background-color:var(--teal-7)}.focus-bg-teal-8:focus{background-color:var(--teal-8)}.focus-bg-teal-9:focus{background-color:var(--teal-9)}.focus-bg-teal-10:focus{background-color:var(--teal-10)}.focus-bg-teal-11:focus{background-color:var(--teal-11)}.focus-bg-cyan-0:focus{background-color:var(--cyan-0)}.focus-bg-cyan-1:focus{background-color:var(--cyan-1)}.focus-bg-cyan-2:focus{background-color:var(--cyan-2)}.focus-bg-cyan-3:focus{background-color:var(--cyan-3)}.focus-bg-cyan-4:focus{background-color:var(--cyan-4)}.focus-bg-cyan-5:focus{background-color:var(--cyan-5)}.focus-bg-cyan-6:focus{background-color:var(--cyan-6)}.focus-bg-cyan-7:focus{background-color:var(--cyan-7)}.focus-bg-cyan-8:focus{background-color:var(--cyan-8)}.focus-bg-cyan-9:focus{background-color:var(--cyan-9)}.focus-bg-cyan-10:focus{background-color:var(--cyan-10)}.focus-bg-cyan-11:focus{background-color:var(--cyan-11)}.p0{padding:var(--spacing-0,0)}.p1{padding:var(--spacing-1,2px)}.p2{padding:var(--spacing-2,4px)}.p3{padding:var(--spacing-3,8px)}.p4{padding:var(--spacing-4,16px)}.p5{padding:var(--spacing-5,32px)}.p6{padding:var(--spacing-6,64px)}.p7{padding:var(--spacing-7,128px)}.p8{padding:var(--spacing-8,256px)}.p9{padding:var(--spacing-9,512px)}.pl0{padding-left:var(--spacing-0,0)}.pl1{padding-left:var(--spacing-1,2px)}.pl2{padding-left:var(--spacing-2,4px)}.pl3{padding-left:var(--spacing-3,8px)}.pl4{padding-left:var(--spacing-4,16px)}.pl5{padding-left:var(--spacing-5,32px)}.pl6{padding-left:var(--spacing-6,64px)}.pl7{padding-left:var(--spacing-7,128px)}.pl8{padding-left:var(--spacing-8,256px)}.pl9{padding-left:var(--spacing-9,512px)}.pr0{padding-right:var(--spacing-0,0)}.pr1{padding-right:var(--spacing-1,2px)}.pr2{padding-right:var(--spacing-2,4px)}.pr3{padding-right:var(--spacing-3,8px)}.pr4{padding-right:var(--spacing-4,16px)}.pr5{padding-right:var(--spacing-5,32px)}.pr6{padding-right:var(--spacing-6,64px)}.pr7{padding-right:var(--spacing-7,128px)}.pr8{padding-right:var(--spacing-8,256px)}.pr9{padding-right:var(--spacing-9,512px)}.pb0{padding-bottom:var(--spacing-0,0)}.pb1{padding-bottom:var(--spacing-1,2px)}.pb2{padding-bottom:var(--spacing-2,4px)}.pb3{padding-bottom:var(--spacing-3,8px)}.pb4{padding-bottom:var(--spacing-4,16px)}.pb5{padding-bottom:var(--spacing-5,32px)}.pb6{padding-bottom:var(--spacing-6,64px)}.pb7{padding-bottom:var(--spacing-7,128px)}.pb8{padding-bottom:var(--spacing-8,256px)}.pb9{padding-bottom:var(--spacing-9,512px)}.pt0{padding-top:var(--spacing-0,0)}.pt1{padding-top:var(--spacing-1,2px)}.pt2{padding-top:var(--spacing-2,4px)}.pt3{padding-top:var(--spacing-3,8px)}.pt4{padding-top:var(--spacing-4,16px)}.pt5{padding-top:var(--spacing-5,32px)}.pt6{padding-top:var(--spacing-6,64px)}.pt7{padding-top:var(--spacing-7,128px)}.pt8{padding-top:var(--spacing-8,256px)}.pt9{padding-top:var(--spacing-9,512px)}.py0{padding-top:var(--spacing-0,0);padding-bottom:var(--spacing-0,0)}.py1{padding-top:var(--spacing-1,2px);padding-bottom:var(--spacing-1,2px)}.py2{padding-top:var(--spacing-2,4px);padding-bottom:var(--spacing-2,4px)}.py3{padding-top:var(--spacing-3,8px);padding-bottom:var(--spacing-3,8px)}.py4{padding-top:var(--spacing-4,16px);padding-bottom:var(--spacing-4,16px)}.py5{padding-top:var(--spacing-5,32px);padding-bottom:var(--spacing-5,32px)}.py6{padding-top:var(--spacing-6,64px);padding-bottom:var(--spacing-6,64px)}.py7{padding-top:var(--spacing-7,128px);padding-bottom:var(--spacing-7,128px)}.py8{padding-top:var(--spacing-8,256px);padding-bottom:var(--spacing-8,256px)}.py9{padding-top:var(--spacing-9,512px);padding-bottom:var(--spacing-9,512px)}.px0{padding-left:var(--spacing-0,0);padding-right:var(--spacing-0,0)}.px1{padding-left:var(--spacing-1,4px);padding-right:var(--spacing-1,4px)}.px2{padding-left:var(--spacing-2,4px);padding-right:var(--spacing-2,4px)}.px3{padding-left:var(--spacing-3,8px);padding-right:var(--spacing-3,8px)}.px4{padding-left:var(--spacing-4,16px);padding-right:var(--spacing-4,16px)}.px5{padding-left:var(--spacing-5,32px);padding-right:var(--spacing-5,32px)}.px6{padding-left:var(--spacing-6,64px);padding-right:var(--spacing-6,64px)}.px7{padding-left:var(--spacing-7,128px);padding-right:var(--spacing-7,128px)}.px8{padding-left:var(--spacing-8,256px);padding-right:var(--spacing-8,256px)}.px9{padding-left:var(--spacing-9,512px);padding-right:var(--spacing-9,512px)}.m0{margin:var(--spacing-0,0)}.m1{margin:var(--spacing-1,2px)}.m2{margin:var(--spacing-2,4px)}.m3{margin:var(--spacing-3,8px)}.m4{margin:var(--spacing-4,16px)}.m5{margin:var(--spacing-5,32px)}.m6{margin:var(--spacing-6,64px)}.m7{margin:var(--spacing-7,128px)}.m8{margin:var(--spacing-8,256px)}.m9{margin:var(--spacing-9,512px)}.ml0{margin-left:var(--spacing-0,0)}.ml1{margin-left:var(--spacing-1,2px)}.ml2{margin-left:var(--spacing-2,4px)}.ml3{margin-left:var(--spacing-3,8px)}.ml4{margin-left:var(--spacing-4,16px)}.ml5{margin-left:var(--spacing-5,32px)}.ml6{margin-left:var(--spacing-6,64px)}.ml7{margin-left:var(--spacing-7,128px)}.ml8{margin-left:var(--spacing-8,256px)}.ml9{margin-left:var(--spacing-9,512px)}.mr0{margin-right:var(--spacing-0,0)}.mr1{margin-right:var(--spacing-1,2px)}.mr2{margin-right:var(--spacing-2,4px)}.mr3{margin-right:var(--spacing-3,8px)}.mr4{margin-right:var(--spacing-4,16px)}.mr5{margin-right:var(--spacing-5,32px)}.mr6{margin-right:var(--spacing-6,64px)}.mr7{margin-right:var(--spacing-7,128px)}.mr8{margin-right:var(--spacing-8,256px)}.mr9{margin-right:var(--spacing-9,512px)}.mb0{margin-bottom:var(--spacing-0,0)}.mb1{margin-bottom:var(--spacing-1,4px)}.mb2{margin-bottom:var(--spacing-2,4px)}.mb3{margin-bottom:var(--spacing-3,8px)}.mb4{margin-bottom:var(--spacing-4,16px)}.mb5{margin-bottom:var(--spacing-5,32px)}.mb6{margin-bottom:var(--spacing-6,64px)}.mb7{margin-bottom:var(--spacing-7,128px)}.mb8{margin-bottom:var(--spacing-8,256px)}.mb9{margin-bottom:var(--spacing-9,512px)}.mt0{margin-top:var(--spacing-0,0)}.mt1{margin-top:var(--spacing-1,2px)}.mt2{margin-top:var(--spacing-2,4px)}.mt3{margin-top:var(--spacing-3,8px)}.mt4{margin-top:var(--spacing-4,16px)}.mt5{margin-top:var(--spacing-5,32px)}.mt6{margin-top:var(--spacing-6,64px)}.mt7{margin-top:var(--spacing-7,128px)}.mt8{margin-top:var(--spacing-8,256px)}.mt9{margin-top:var(--spacing-9,512px)}.my0{margin-top:var(--spacing-0,0);margin-bottom:var(--spacing-0,0)}.my1{margin-top:var(--spacing-1,4px);margin-bottom:var(--spacing-1,4px)}.my2{margin-top:var(--spacing-2,4px);margin-bottom:var(--spacing-2,4px)}.my3{margin-top:var(--spacing-3,8px);margin-bottom:var(--spacing-3,8px)}.my4{margin-top:var(--spacing-4,16px);margin-bottom:var(--spacing-4,16px)}.my5{margin-top:var(--spacing-5,32px);margin-bottom:var(--spacing-5,32px)}.my6{margin-top:var(--spacing-6,64px);margin-bottom:var(--spacing-6,64px)}.my7{margin-top:var(--spacing-7,128px);margin-bottom:var(--spacing-7,128px)}.my8{margin-top:var(--spacing-8,256px);margin-bottom:var(--spacing-8,256px)}.my9{margin-top:var(--spacing-9,512px);margin-bottom:var(--spacing-9,512px)}.mx0{margin-left:var(--spacing-0,0);margin-right:var(--spacing-0,0)}.mx1{margin-left:var(--spacing-1,2px);margin-right:var(--spacing-1,2px)}.mx2{margin-left:var(--spacing-2,4px);margin-right:var(--spacing-2,4px)}.mx3{margin-left:var(--spacing-3,8px);margin-right:var(--spacing-3,8px)}.mx4{margin-left:var(--spacing-4,16px);margin-right:var(--spacing-4,16px)}.mx5{margin-left:var(--spacing-5,32px);margin-right:var(--spacing-5,32px)}.mx6{margin-left:var(--spacing-6,64px);margin-right:var(--spacing-6,64px)}.mx7{margin-left:var(--spacing-7,128px);margin-right:var(--spacing-7,128px)}.mx8{margin-left:var(--spacing-8,256px);margin-right:var(--spacing-8,256px)}.mx9{margin-left:var(--spacing-9,512px);margin-right:var(--spacing-9,512px)}@container (min-width:30em){.p0-s{padding:var(--spacing-0,0)}.p1-s{padding:var(--spacing-1,2px)}.p2-s{padding:var(--spacing-2,4px)}.p3-s{padding:var(--spacing-3,8px)}.p4-s{padding:var(--spacing-4,16px)}.p5-s{padding:var(--spacing-5,32px)}.p6-s{padding:var(--spacing-6,64px)}.p7-s{padding:var(--spacing-7,128px)}.p8-s{padding:var(--spacing-8,256px)}.p9-s{padding:var(--spacing-9,512px)}.pl0-s{padding-left:var(--spacing-0,0)}.pl1-s{padding-left:var(--spacing-1,2px)}.pl2-s{padding-left:var(--spacing-2,4px)}.pl3-s{padding-left:var(--spacing-3,8px)}.pl4-s{padding-left:var(--spacing-4,16px)}.pl5-s{padding-left:var(--spacing-5,32px)}.pl6-s{padding-left:var(--spacing-6,64px)}.pl7-s{padding-left:var(--spacing-7,128px)}.pl8-s{padding-left:var(--spacing-8,256px)}.pl9-s{padding-left:var(--spacing-9,512px)}.pr0-s{padding-right:var(--spacing-0,0)}.pr1-s{padding-right:var(--spacing-1,2px)}.pr2-s{padding-right:var(--spacing-2,4px)}.pr3-s{padding-right:var(--spacing-3,8px)}.pr4-s{padding-right:var(--spacing-4,16px)}.pr5-s{padding-right:var(--spacing-5,32px)}.pr6-s{padding-right:var(--spacing-6,64px)}.pr7-s{padding-right:var(--spacing-7,128px)}.pr8-s{padding-right:var(--spacing-8,256px)}.pr9-s{padding-right:var(--spacing-9,512px)}.pb0-s{padding-bottom:var(--spacing-0,0)}.pb1-s{padding-bottom:var(--spacing-1,2px)}.pb2-s{padding-bottom:var(--spacing-2,4px)}.pb3-s{padding-bottom:var(--spacing-3,8px)}.pb4-s{padding-bottom:var(--spacing-4,16px)}.pb5-s{padding-bottom:var(--spacing-5,32px)}.pb6-s{padding-bottom:var(--spacing-6,64px)}.pb7-s{padding-bottom:var(--spacing-7,128px)}.pb8-s{padding-bottom:var(--spacing-8,256px)}.pb9-s{padding-bottom:var(--spacing-9,512px)}.pt0-s{padding-top:var(--spacing-0,0)}.pt1-s{padding-top:var(--spacing-1,2px)}.pt2-s{padding-top:var(--spacing-2,4px)}.pt3-s{padding-top:var(--spacing-3,8px)}.pt4-s{padding-top:var(--spacing-4,16px)}.pt5-s{padding-top:var(--spacing-5,32px)}.pt6-s{padding-top:var(--spacing-6,64px)}.pt7-s{padding-top:var(--spacing-7,128px)}.pt8-s{padding-top:var(--spacing-8,256px)}.pt9-s{padding-top:var(--spacing-9,512px)}.py0-s{padding-top:var(--spacing-0,0);padding-bottom:var(--spacing-0,0)}.py1-s{padding-top:var(--spacing-1,2px);padding-bottom:var(--spacing-1,2px)}.py2-s{padding-top:var(--spacing-2,4px);padding-bottom:var(--spacing-2,4px)}.py3-s{padding-top:var(--spacing-3,8px);padding-bottom:var(--spacing-3,8px)}.py4-s{padding-top:var(--spacing-4,16px);padding-bottom:var(--spacing-4,16px)}.py5-s{padding-top:var(--spacing-5,32px);padding-bottom:var(--spacing-5,32px)}.py6-s{padding-top:var(--spacing-6,64px);padding-bottom:var(--spacing-6,64px)}.py7-s{padding-top:var(--spacing-7,128px);padding-bottom:var(--spacing-7,128px)}.py8-s{padding-top:var(--spacing-8,256px);padding-bottom:var(--spacing-8,256px)}.py9-s{padding-top:var(--spacing-9,512px);padding-bottom:var(--spacing-9,512px)}.px0-s{padding-left:var(--spacing-0,0);padding-right:var(--spacing-0,0)}.px1-s{padding-left:var(--spacing-1,2px);padding-right:var(--spacing-1,2px)}.px2-s{padding-left:var(--spacing-2,4px);padding-right:var(--spacing-2,4px)}.px3-s{padding-left:var(--spacing-3,8px);padding-right:var(--spacing-3,8px)}.px4-s{padding-left:var(--spacing-4,16px);padding-right:var(--spacing-4,16px)}.px5-s{padding-left:var(--spacing-5,32px);padding-right:var(--spacing-5,32px)}.px6-s{padding-left:var(--spacing-6,64px);padding-right:var(--spacing-6,64px)}.px7-s{padding-left:var(--spacing-7,128px);padding-right:var(--spacing-7,128px)}.px8-s{padding-left:var(--spacing-8,256px);padding-right:var(--spacing-8,256px)}.px9-s{padding-left:var(--spacing-9,512px);padding-right:var(--spacing-9,512px)}.m0-s{margin:var(--spacing-0,0)}.m1-s{margin:var(--spacing-1,2px)}.m2-s{margin:var(--spacing-2,4px)}.m3-s{margin:var(--spacing-3,8px)}.m4-s{margin:var(--spacing-4,16px)}.m5-s{margin:var(--spacing-5,32px)}.m6-s{margin:var(--spacing-6,64px)}.m7-s{margin:var(--spacing-7,128px)}.m8-s{margin:var(--spacing-8,256px)}.m9-s{margin:var(--spacing-9,512px)}.ml0-s{margin-left:var(--spacing-0,0)}.ml1-s{margin-left:var(--spacing-1,2px)}.ml2-s{margin-left:var(--spacing-2,4px)}.ml3-s{margin-left:var(--spacing-3,8px)}.ml4-s{margin-left:var(--spacing-4,16px)}.ml5-s{margin-left:var(--spacing-5,32px)}.ml6-s{margin-left:var(--spacing-6,64px)}.ml7-s{margin-left:var(--spacing-7,128px)}.ml8-s{margin-left:var(--spacing-8,256px)}.ml9-s{margin-left:var(--spacing-9,512px)}.mr0-s{margin-right:var(--spacing-0,0)}.mr1-s{margin-right:var(--spacing-1,2px)}.mr2-s{margin-right:var(--spacing-2,4px)}.mr3-s{margin-right:var(--spacing-3,8px)}.mr4-s{margin-right:var(--spacing-4,16px)}.mr5-s{margin-right:var(--spacing-5,32px)}.mr6-s{margin-right:var(--spacing-6,64px)}.mr7-s{margin-right:var(--spacing-7,128px)}.mr8-s{margin-right:var(--spacing-8,256px)}.mr9-s{margin-right:var(--spacing-9,512px)}.mb0-s{margin-bottom:var(--spacing-0,0)}.mb1-s{margin-bottom:var(--spacing-1,2px)}.mb2-s{margin-bottom:var(--spacing-2,4px)}.mb3-s{margin-bottom:var(--spacing-3,8px)}.mb4-s{margin-bottom:var(--spacing-4,16px)}.mb5-s{margin-bottom:var(--spacing-5,32px)}.mb6-s{margin-bottom:var(--spacing-6,64px)}.mb7-s{margin-bottom:var(--spacing-7,128px)}.mb8-s{margin-bottom:var(--spacing-8,256px)}.mb9-s{margin-bottom:var(--spacing-9,512px)}.mt0-s{margin-top:var(--spacing-0,0)}.mt1-s{margin-top:var(--spacing-1,2px)}.mt2-s{margin-top:var(--spacing-2,4px)}.mt3-s{margin-top:var(--spacing-3,8px)}.mt4-s{margin-top:var(--spacing-4,16px)}.mt5-s{margin-top:var(--spacing-5,32px)}.mt6-s{margin-top:var(--spacing-6,64px)}.mt7-s{margin-top:var(--spacing-7,128px)}.mt8-s{margin-top:var(--spacing-8,256px)}.mt9-s{margin-top:var(--spacing-9,512px)}.my0-s{margin-top:var(--spacing-0,0);margin-bottom:var(--spacing-0,0)}.my1-s{margin-top:var(--spacing-1,2px);margin-bottom:var(--spacing-1,2px)}.my2-s{margin-top:var(--spacing-2,4px);margin-bottom:var(--spacing-2,4px)}.my3-s{margin-top:var(--spacing-3,8px);margin-bottom:var(--spacing-3,8px)}.my4-s{margin-top:var(--spacing-4,16px);margin-bottom:var(--spacing-4,16px)}.my5-s{margin-top:var(--spacing-5,32px);margin-bottom:var(--spacing-5,32px)}.my6-s{margin-top:var(--spacing-6,64px);margin-bottom:var(--spacing-6,64px)}.my7-s{margin-top:var(--spacing-7,128px);margin-bottom:var(--spacing-7,128px)}.my8-s{margin-top:var(--spacing-8,256px);margin-bottom:var(--spacing-8,256px)}.my9-s{margin-top:var(--spacing-9,512px);margin-bottom:var(--spacing-9,512px)}.mx0-s{margin-left:var(--spacing-0,0);margin-right:var(--spacing-0,0)}.mx1-s{margin-left:var(--spacing-1,4px);margin-right:var(--spacing-1,4px)}.mx2-s{margin-left:var(--spacing-2,4px);margin-right:var(--spacing-2,4px)}.mx3-s{margin-left:var(--spacing-3,8px);margin-right:var(--spacing-3,8px)}.mx4-s{margin-left:var(--spacing-4,16px);margin-right:var(--spacing-4,16px)}.mx5-s{margin-left:var(--spacing-5,32px);margin-right:var(--spacing-5,32px)}.mx6-s{margin-left:var(--spacing-6,64px);margin-right:var(--spacing-6,64px)}.mx7-s{margin-left:var(--spacing-7,128px);margin-right:var(--spacing-7,128px)}.mx8-s{margin-left:var(--spacing-8,256px);margin-right:var(--spacing-8,256px)}.mx9-s{margin-left:var(--spacing-9,512px);margin-right:var(--spacing-9,512px)}}@container (min-width:48em){.p0-m{padding:var(--spacing-0,0)}.p1-m{padding:var(--spacing-1,2px)}.p2-m{padding:var(--spacing-2,4px)}.p3-m{padding:var(--spacing-3,8px)}.p4-m{padding:var(--spacing-4,16px)}.p5-m{padding:var(--spacing-5,32px)}.p6-m{padding:var(--spacing-6,64px)}.p7-m{padding:var(--spacing-7,128px)}.p8-m{padding:var(--spacing-8,256px)}.p9-m{padding:var(--spacing-9,512px)}.pl0-m{padding-left:var(--spacing-0,0)}.pl1-m{padding-left:var(--spacing-1,2px)}.pl2-m{padding-left:var(--spacing-2,4px)}.pl3-m{padding-left:var(--spacing-3,8px)}.pl4-m{padding-left:var(--spacing-4,16px)}.pl5-m{padding-left:var(--spacing-5,32px)}.pl6-m{padding-left:var(--spacing-6,64px)}.pl7-m{padding-left:var(--spacing-7,128px)}.pl8-m{padding-left:var(--spacing-8,256px)}.pl9-m{padding-left:var(--spacing-9,512px)}.pr0-m{padding-right:var(--spacing-0,0)}.pr1-m{padding-right:var(--spacing-1,2px)}.pr2-m{padding-right:var(--spacing-2,4px)}.pr3-m{padding-right:var(--spacing-3,8px)}.pr4-m{padding-right:var(--spacing-4,16px)}.pr5-m{padding-right:var(--spacing-5,32px)}.pr6-m{padding-right:var(--spacing-6,64px)}.pr7-m{padding-right:var(--spacing-7,128px)}.pr8-m{padding-right:var(--spacing-8,256px)}.pr9-m{padding-right:var(--spacing-9,512px)}.pb0-m{padding-bottom:var(--spacing-0,0)}.pb1-m{padding-bottom:var(--spacing-1,2px)}.pb2-m{padding-bottom:var(--spacing-2,4px)}.pb3-m{padding-bottom:var(--spacing-3,8px)}.pb4-m{padding-bottom:var(--spacing-4,16px)}.pb5-m{padding-bottom:var(--spacing-5,32px)}.pb6-m{padding-bottom:var(--spacing-6,64px)}.pb7-m{padding-bottom:var(--spacing-7,128px)}.pb8-m{padding-bottom:var(--spacing-8,256px)}.pb9-m{padding-bottom:var(--spacing-9,512px)}.pt0-m{padding-top:var(--spacing-0,0)}.pt1-m{padding-top:var(--spacing-1,2px)}.pt2-m{padding-top:var(--spacing-2,4px)}.pt3-m{padding-top:var(--spacing-3,8px)}.pt4-m{padding-top:var(--spacing-4,16px)}.pt5-m{padding-top:var(--spacing-5,32px)}.pt6-m{padding-top:var(--spacing-6,64px)}.pt7-m{padding-top:var(--spacing-7,128px)}.pt8-m{padding-top:var(--spacing-8,256px)}.pt9-m{padding-top:var(--spacing-9,512px)}.py0-m{padding-top:var(--spacing-0,0);padding-bottom:var(--spacing-0,0)}.py1-m{padding-top:var(--spacing-1,2px);padding-bottom:var(--spacing-1,2px)}.py2-m{padding-top:var(--spacing-2,4px);padding-bottom:var(--spacing-2,4px)}.py3-m{padding-top:var(--spacing-3,8px);padding-bottom:var(--spacing-3,8px)}.py4-m{padding-top:var(--spacing-4,16px);padding-bottom:var(--spacing-4,16px)}.py5-m{padding-top:var(--spacing-5,32px);padding-bottom:var(--spacing-5,32px)}.py6-m{padding-top:var(--spacing-6,64px);padding-bottom:var(--spacing-6,64px)}.py7-m{padding-top:var(--spacing-7,128px);padding-bottom:var(--spacing-7,128px)}.py8-m{padding-top:var(--spacing-8,256px);padding-bottom:var(--spacing-8,256px)}.py9-m{padding-top:var(--spacing-9,512px);padding-bottom:var(--spacing-9,512px)}.px0-m{padding-left:var(--spacing-0,0);padding-right:var(--spacing-0,0)}.px1-m{padding-left:var(--spacing-1,2px);padding-right:var(--spacing-1,2px)}.px2-m{padding-left:var(--spacing-2,4px);padding-right:var(--spacing-2,4px)}.px3-m{padding-left:var(--spacing-3,8px);padding-right:var(--spacing-3,8px)}.px4-m{padding-left:var(--spacing-4,16px);padding-right:var(--spacing-4,16px)}.px5-m{padding-left:var(--spacing-5,32px);padding-right:var(--spacing-5,32px)}.px6-m{padding-left:var(--spacing-6,64px);padding-right:var(--spacing-6,64px)}.px7-m{padding-left:var(--spacing-7,128px);padding-right:var(--spacing-7,128px)}.px8-m{padding-left:var(--spacing-8,256px);padding-right:var(--spacing-8,256px)}.px9-m{padding-left:var(--spacing-9,512px);padding-right:var(--spacing-9,512px)}.m0-m{margin:var(--spacing-0,0)}.m1-m{margin:var(--spacing-1,2px)}.m2-m{margin:var(--spacing-2,4px)}.m3-m{margin:var(--spacing-3,8px)}.m4-m{margin:var(--spacing-4,16px)}.m5-m{margin:var(--spacing-5,32px)}.m6-m{margin:var(--spacing-6,64px)}.m7-m{margin:var(--spacing-7,128px)}.m8-m{margin:var(--spacing-8,256px)}.m9-m{margin:var(--spacing-9,512px)}.ml0-m{margin-left:var(--spacing-0,0)}.ml1-m{margin-left:var(--spacing-1,2px)}.ml2-m{margin-left:var(--spacing-2,4px)}.ml3-m{margin-left:var(--spacing-3,8px)}.ml4-m{margin-left:var(--spacing-4,16px)}.ml5-m{margin-left:var(--spacing-5,32px)}.ml6-m{margin-left:var(--spacing-6,64px)}.ml7-m{margin-left:var(--spacing-7,128px)}.ml8-m{margin-left:var(--spacing-8,256px)}.ml9-m{margin-left:var(--spacing-9,512px)}.mr0-m{margin-right:var(--spacing-0,0)}.mr1-m{margin-right:var(--spacing-1,4px)}.mr2-m{margin-right:var(--spacing-2,4px)}.mr3-m{margin-right:var(--spacing-3,8px)}.mr4-m{margin-right:var(--spacing-4,16px)}.mr5-m{margin-right:var(--spacing-5,32px)}.mr6-m{margin-right:var(--spacing-6,64px)}.mr7-m{margin-right:var(--spacing-7,128px)}.mr8-m{margin-right:var(--spacing-8,256px)}.mr9-m{margin-right:var(--spacing-9,512px)}.mb0-m{margin-bottom:var(--spacing-0,0)}.mb1-m{margin-bottom:var(--spacing-1,2px)}.mb2-m{margin-bottom:var(--spacing-2,4px)}.mb3-m{margin-bottom:var(--spacing-3,8px)}.mb4-m{margin-bottom:var(--spacing-4,16px)}.mb5-m{margin-bottom:var(--spacing-5,32px)}.mb6-m{margin-bottom:var(--spacing-6,64px)}.mb7-m{margin-bottom:var(--spacing-7,128px)}.mb8-m{margin-bottom:var(--spacing-8,256px)}.mb9-m{margin-bottom:var(--spacing-9,512px)}.mt0-m{margin-top:var(--spacing-0,0)}.mt1-m{margin-top:var(--spacing-1,2px)}.mt2-m{margin-top:var(--spacing-2,4px)}.mt3-m{margin-top:var(--spacing-3,8px)}.mt4-m{margin-top:var(--spacing-4,16px)}.mt5-m{margin-top:var(--spacing-5,32px)}.mt6-m{margin-top:var(--spacing-6,64px)}.mt7-m{margin-top:var(--spacing-7,128px)}.mt8-m{margin-top:var(--spacing-8,256px)}.mt9-m{margin-top:var(--spacing-9,512px)}.my0-m{margin-top:var(--spacing-0,0);margin-bottom:var(--spacing-0,0)}.my1-m{margin-top:var(--spacing-1,2px);margin-bottom:var(--spacing-1,2px)}.my2-m{margin-top:var(--spacing-2,4px);margin-bottom:var(--spacing-2,4px)}.my3-m{margin-top:var(--spacing-3,8px);margin-bottom:var(--spacing-3,8px)}.my4-m{margin-top:var(--spacing-4,16px);margin-bottom:var(--spacing-4,16px)}.my5-m{margin-top:var(--spacing-5,32px);margin-bottom:var(--spacing-5,32px)}.my6-m{margin-top:var(--spacing-6,64px);margin-bottom:var(--spacing-6,64px)}.my7-m{margin-top:var(--spacing-7,128px);margin-bottom:var(--spacing-7,128px)}.my8-m{margin-top:var(--spacing-8,256px);margin-bottom:var(--spacing-8,256px)}.my9-m{margin-top:var(--spacing-9,512px);margin-bottom:var(--spacing-9,512px)}.mx0-m{margin-left:var(--spacing-0,0);margin-right:var(--spacing-0,0)}.mx1-m{margin-left:var(--spacing-1,2px);margin-right:var(--spacing-1,2px)}.mx2-m{margin-left:var(--spacing-2,4px);margin-right:var(--spacing-2,4px)}.mx3-m{margin-left:var(--spacing-3,8px);margin-right:var(--spacing-3,8px)}.mx4-m{margin-left:var(--spacing-4,16px);margin-right:var(--spacing-4,16px)}.mx5-m{margin-left:var(--spacing-5,32px);margin-right:var(--spacing-5,32px)}.mx6-m{margin-left:var(--spacing-6,64px);margin-right:var(--spacing-6,64px)}.mx7-m{margin-left:var(--spacing-7,128px);margin-right:var(--spacing-7,128px)}.mx8-m{margin-left:var(--spacing-8,256px);margin-right:var(--spacing-8,256px)}.mx9-m{margin-left:var(--spacing-9,512px);margin-right:var(--spacing-9,512px)}}@container (min-width:64em){.p0-l{padding:var(--spacing-0,0)}.p1-l{padding:var(--spacing-1,2px)}.p2-l{padding:var(--spacing-2,4px)}.p3-l{padding:var(--spacing-3,8px)}.p4-l{padding:var(--spacing-4,16px)}.p5-l{padding:var(--spacing-5,32px)}.p6-l{padding:var(--spacing-6,64px)}.p7-l{padding:var(--spacing-7,128px)}.p8-l{padding:var(--spacing-8,256px)}.p9-l{padding:var(--spacing-9,512px)}.pl0-l{padding-left:var(--spacing-0,0)}.pl1-l{padding-left:var(--spacing-1,2px)}.pl2-l{padding-left:var(--spacing-2,4px)}.pl3-l{padding-left:var(--spacing-3,8px)}.pl4-l{padding-left:var(--spacing-4,16px)}.pl5-l{padding-left:var(--spacing-5,32px)}.pl6-l{padding-left:var(--spacing-6,64px)}.pl7-l{padding-left:var(--spacing-7,128px)}.pl8-l{padding-left:var(--spacing-8,256px)}.pl9-l{padding-left:var(--spacing-9,512px)}.pr0-l{padding-right:var(--spacing-0,0)}.pr1-l{padding-right:var(--spacing-1,2px)}.pr2-l{padding-right:var(--spacing-2,4px)}.pr3-l{padding-right:var(--spacing-3,8px)}.pr4-l{padding-right:var(--spacing-4,16px)}.pr5-l{padding-right:var(--spacing-5,32px)}.pr6-l{padding-right:var(--spacing-6,64px)}.pr7-l{padding-right:var(--spacing-7,128px)}.pr8-l{padding-right:var(--spacing-8,256px)}.pr9-l{padding-right:var(--spacing-9,512px)}.pb0-l{padding-bottom:var(--spacing-0,0)}.pb1-l{padding-bottom:var(--spacing-1,2px)}.pb2-l{padding-bottom:var(--spacing-2,4px)}.pb3-l{padding-bottom:var(--spacing-3,8px)}.pb4-l{padding-bottom:var(--spacing-4,16px)}.pb5-l{padding-bottom:var(--spacing-5,32px)}.pb6-l{padding-bottom:var(--spacing-6,64px)}.pb7-l{padding-bottom:var(--spacing-7,128px)}.pb8-l{padding-bottom:var(--spacing-8,256px)}.pb9-l{padding-bottom:var(--spacing-9,512px)}.pt0-l{padding-top:var(--spacing-0,0)}.pt1-l{padding-top:var(--spacing-1,2px)}.pt2-l{padding-top:var(--spacing-2,4px)}.pt3-l{padding-top:var(--spacing-3,8px)}.pt4-l{padding-top:var(--spacing-4,16px)}.pt5-l{padding-top:var(--spacing-5,32px)}.pt6-l{padding-top:var(--spacing-6,64px)}.pt7-l{padding-top:var(--spacing-7,128px)}.pt8-l{padding-top:var(--spacing-8,256px)}.pt9-l{padding-top:var(--spacing-9,512px)}.py0-l{padding-top:var(--spacing-0,0);padding-bottom:var(--spacing-0,0)}.py1-l{padding-top:var(--spacing-1,2px);padding-bottom:var(--spacing-1,2px)}.py2-l{padding-top:var(--spacing-2,4px);padding-bottom:var(--spacing-2,4px)}.py3-l{padding-top:var(--spacing-3,8px);padding-bottom:var(--spacing-3,8px)}.py4-l{padding-top:var(--spacing-4,16px);padding-bottom:var(--spacing-4,16px)}.py5-l{padding-top:var(--spacing-5,32px);padding-bottom:var(--spacing-5,32px)}.py6-l{padding-top:var(--spacing-6,64px);padding-bottom:var(--spacing-6,64px)}.py7-l{padding-top:var(--spacing-7,128px);padding-bottom:var(--spacing-7,128px)}.py8-l{padding-top:var(--spacing-8,256px);padding-bottom:var(--spacing-8,256px)}.py9-l{padding-top:var(--spacing-9,512px);padding-bottom:var(--spacing-9,512px)}.px0-l{padding-left:var(--spacing-0,0);padding-right:var(--spacing-0,0)}.px1-l{padding-left:var(--spacing-1,2px);padding-right:var(--spacing-1,2px)}.px2-l{padding-left:var(--spacing-2,4px);padding-right:var(--spacing-2,4px)}.px3-l{padding-left:var(--spacing-3,8px);padding-right:var(--spacing-3,8px)}.px4-l{padding-left:var(--spacing-4,16px);padding-right:var(--spacing-4,16px)}.px5-l{padding-left:var(--spacing-5,32px);padding-right:var(--spacing-5,32px)}.px6-l{padding-left:var(--spacing-6,64px);padding-right:var(--spacing-6,64px)}.px7-l{padding-left:var(--spacing-7,128px);padding-right:var(--spacing-7,128px)}.px8-l{padding-left:var(--spacing-8,256px);padding-right:var(--spacing-8,256px)}.px9-l{padding-left:var(--spacing-9,512px);padding-right:var(--spacing-9,512px)}.m0-l{margin:var(--spacing-0,0)}.m1-l{margin:var(--spacing-1,2px)}.m2-l{margin:var(--spacing-2,4px)}.m3-l{margin:var(--spacing-3,8px)}.m4-l{margin:var(--spacing-4,16px)}.m5-l{margin:var(--spacing-5,32px)}.m6-l{margin:var(--spacing-6,64px)}.m7-l{margin:var(--spacing-7,128px)}.m8-l{margin:var(--spacing-8,256px)}.m9-l{margin:var(--spacing-9,512px)}.ml0-l{margin-left:var(--spacing-0,0)}.ml1-l{margin-left:var(--spacing-3,2px)}.ml2-l{margin-left:var(--spacing-2,4px)}.ml3-l{margin-left:var(--spacing-3,8px)}.ml4-l{margin-left:var(--spacing-4,16px)}.ml5-l{margin-left:var(--spacing-5,32px)}.ml6-l{margin-left:var(--spacing-6,64px)}.ml7-l{margin-left:var(--spacing-7,128px)}.ml8-l{margin-left:var(--spacing-8,256px)}.ml9-l{margin-left:var(--spacing-9,512px)}.mr0-l{margin-right:var(--spacing-0,0)}.mr1-l{margin-right:var(--spacing-1,2px)}.mr2-l{margin-right:var(--spacing-2,4px)}.mr3-l{margin-right:var(--spacing-3,8px)}.mr4-l{margin-right:var(--spacing-4,16px)}.mr5-l{margin-right:var(--spacing-5,32px)}.mr6-l{margin-right:var(--spacing-6,64px)}.mr7-l{margin-right:var(--spacing-7,128px)}.mr8-l{margin-right:var(--spacing-8,256px)}.mr9-l{margin-right:var(--spacing-9,512px)}.mb0-l{margin-bottom:var(--spacing-0,0)}.mb1-l{margin-bottom:var(--spacing-1,2px)}.mb2-l{margin-bottom:var(--spacing-2,4px)}.mb3-l{margin-bottom:var(--spacing-3,8px)}.mb4-l{margin-bottom:var(--spacing-4,16px)}.mb5-l{margin-bottom:var(--spacing-5,32px)}.mb6-l{margin-bottom:var(--spacing-6,64px)}.mb7-l{margin-bottom:var(--spacing-7,128px)}.mb8-l{margin-bottom:var(--spacing-8,256px)}.mb9-l{margin-bottom:var(--spacing-9,512px)}.mt0-l{margin-top:var(--spacing-0,0)}.mt1-l{margin-top:var(--spacing-1,2px)}.mt2-l{margin-top:var(--spacing-2,4px)}.mt3-l{margin-top:var(--spacing-3,8px)}.mt4-l{margin-top:var(--spacing-4,16px)}.mt5-l{margin-top:var(--spacing-5,32px)}.mt6-l{margin-top:var(--spacing-6,64px)}.mt7-l{margin-top:var(--spacing-7,128px)}.mt8-l{margin-top:var(--spacing-8,256px)}.mt9-l{margin-top:var(--spacing-9,512px)}.my0-l{margin-top:var(--spacing-0,0);margin-bottom:var(--spacing-0,0)}.my1-l{margin-top:var(--spacing-1,2px);margin-bottom:var(--spacing-1,2px)}.my2-l{margin-top:var(--spacing-2,4px);margin-bottom:var(--spacing-2,4px)}.my3-l{margin-top:var(--spacing-3,8px);margin-bottom:var(--spacing-3,8px)}.my4-l{margin-top:var(--spacing-4,16px);margin-bottom:var(--spacing-4,16px)}.my5-l{margin-top:var(--spacing-5,32px);margin-bottom:var(--spacing-5,32px)}.my6-l{margin-top:var(--spacing-6,64px);margin-bottom:var(--spacing-6,64px)}.my7-l{margin-top:var(--spacing-7,128px);margin-bottom:var(--spacing-7,128px)}.my8-l{margin-top:var(--spacing-8,256px);margin-bottom:var(--spacing-8,256px)}.my9-l{margin-top:var(--spacing-9,512px);margin-bottom:var(--spacing-9,512px)}.mx0-l{margin-left:var(--spacing-0,0);margin-right:var(--spacing-0,0)}.mx1-l{margin-left:var(--spacing-1,2px);margin-right:var(--spacing-1,2px)}.mx2-l{margin-left:var(--spacing-2,4px);margin-right:var(--spacing-2,4px)}.mx3-l{margin-left:var(--spacing-3,8px);margin-right:var(--spacing-3,8px)}.mx4-l{margin-left:var(--spacing-4,16px);margin-right:var(--spacing-4,16px)}.mx5-l{margin-left:var(--spacing-5,32px);margin-right:var(--spacing-5,32px)}.mx6-l{margin-left:var(--spacing-6,64px);margin-right:var(--spacing-6,64px)}.mx7-l{margin-left:var(--spacing-7,128px);margin-right:var(--spacing-7,128px)}.mx8-l{margin-left:var(--spacing-8,256px);margin-right:var(--spacing-8,256px)}.mx9-l{margin-left:var(--spacing-9,512px);margin-right:var(--spacing-9,512px)}}.na1{margin:calc(-1 * var(--spacing-1))}.na2{margin:calc(-1 * var(--spacing-2))}.na3{margin:calc(-1 * var(--spacing-3))}.na4{margin:calc(-1 * var(--spacing-4))}.na5{margin:calc(-1 * var(--spacing-5))}.na6{margin:calc(-1 * var(--spacing-6))}.na7{margin:calc(-1 * var(--spacing-7))}.nl1{margin-left:calc(-1 * var(--spacing-1))}.nl2{margin-left:calc(-1 * var(--spacing-2))}.nl3{margin-left:calc(-1 * var(--spacing-3))}.nl4{margin-left:calc(-1 * var(--spacing-4))}.nl5{margin-left:calc(-1 * var(--spacing-5))}.nl6{margin-left:calc(-1 * var(--spacing-6))}.nl7{margin-left:calc(-1 * var(--spacing-7))}.nr1{margin-right:calc(-1 * var(--spacing-1))}.nr2{margin-right:calc(-1 * var(--spacing-2))}.nr3{margin-right:calc(-1 * var(--spacing-3))}.nr4{margin-right:calc(-1 * var(--spacing-4))}.nr5{margin-right:calc(-1 * var(--spacing-5))}.nr6{margin-right:calc(-1 * var(--spacing-6))}.nr7{margin-right:calc(-1 * var(--spacing-7))}.nb1{margin-bottom:calc(-1 * var(--spacing-1))}.nb2{margin-bottom:calc(-1 * var(--spacing-2))}.nb3{margin-bottom:calc(-1 * var(--spacing-3))}.nb4{margin-bottom:calc(-1 * var(--spacing-4))}.nb5{margin-bottom:calc(-1 * var(--spacing-5))}.nb6{margin-bottom:calc(-1 * var(--spacing-6))}.nb7{margin-bottom:calc(-1 * var(--spacing-7))}.nt1{margin-top:calc(-1 * var(--spacing-1))}.nt2{margin-top:calc(-1 * var(--spacing-2))}.nt3{margin-top:calc(-1 * var(--spacing-3))}.nt4{margin-top:calc(-1 * var(--spacing-4))}.nt5{margin-top:calc(-1 * var(--spacing-5))}.nt6{margin-top:calc(-1 * var(--spacing-6))}.nt7{margin-top:calc(-1 * var(--spacing-7))}@container (--breakpoint-2){.na1-s{margin:calc(-1 * var(--spacing-1))}.na2-s{margin:calc(-1 * var(--spacing-2))}.na3-s{margin:calc(-1 * var(--spacing-3))}.na4-s{margin:calc(-1 * var(--spacing-4))}.na5-s{margin:calc(-1 * var(--spacing-5))}.na6-s{margin:calc(-1 * var(--spacing-6))}.na7-s{margin:calc(-1 * var(--spacing-7))}.nl1-s{margin-left:calc(-1 * var(--spacing-1))}.nl2-s{margin-left:calc(-1 * var(--spacing-2))}.nl3-s{margin-left:calc(-1 * var(--spacing-3))}.nl4-s{margin-left:calc(-1 * var(--spacing-4))}.nl5-s{margin-left:calc(-1 * var(--spacing-5))}.nl6-s{margin-left:calc(-1 * var(--spacing-6))}.nl7-s{margin-left:calc(-1 * var(--spacing-7))}.nr1-s{margin-right:calc(-1 * var(--spacing-1))}.nr2-s{margin-right:calc(-1 * var(--spacing-2))}.nr3-s{margin-right:calc(-1 * var(--spacing-3))}.nr4-s{margin-right:calc(-1 * var(--spacing-4))}.nr5-s{margin-right:calc(-1 * var(--spacing-5))}.nr6-s{margin-right:calc(-1 * var(--spacing-6))}.nr7-s{margin-right:calc(-1 * var(--spacing-7))}.nb1-s{margin-bottom:calc(-1 * var(--spacing-1))}.nb2-s{margin-bottom:calc(-1 * var(--spacing-2))}.nb3-s{margin-bottom:calc(-1 * var(--spacing-3))}.nb4-s{margin-bottom:calc(-1 * var(--spacing-4))}.nb5-s{margin-bottom:calc(-1 * var(--spacing-5))}.nb6-s{margin-bottom:calc(-1 * var(--spacing-6))}.nb7-s{margin-bottom:calc(-1 * var(--spacing-7))}.nt1-s{margin-top:calc(-1 * var(--spacing-1))}.nt2-s{margin-top:calc(-1 * var(--spacing-2))}.nt3-s{margin-top:calc(-1 * var(--spacing-3))}.nt4-s{margin-top:calc(-1 * var(--spacing-4))}.nt5-s{margin-top:calc(-1 * var(--spacing-5))}.nt6-s{margin-top:calc(-1 * var(--spacing-6))}.nt7-s{margin-top:calc(-1 * var(--spacing-7))}}@container (--breakpoint-3){.na1-m{margin:calc(-1 * var(--spacing-1))}.na2-m{margin:calc(-1 * var(--spacing-2))}.na3-m{margin:calc(-1 * var(--spacing-3))}.na4-m{margin:calc(-1 * var(--spacing-4))}.na5-m{margin:calc(-1 * var(--spacing-5))}.na6-m{margin:calc(-1 * var(--spacing-6))}.na7-m{margin:calc(-1 * var(--spacing-7))}.nl1-m{margin-left:calc(-1 * var(--spacing-1))}.nl2-m{margin-left:calc(-1 * var(--spacing-2))}.nl3-m{margin-left:calc(-1 * var(--spacing-3))}.nl4-m{margin-left:calc(-1 * var(--spacing-4))}.nl5-m{margin-left:calc(-1 * var(--spacing-5))}.nl6-m{margin-left:calc(-1 * var(--spacing-6))}.nl7-m{margin-left:calc(-1 * var(--spacing-7))}.nr1-m{margin-right:calc(-1 * var(--spacing-1))}.nr2-m{margin-right:calc(-1 * var(--spacing-2))}.nr3-m{margin-right:calc(-1 * var(--spacing-3))}.nr4-m{margin-right:calc(-1 * var(--spacing-4))}.nr5-m{margin-right:calc(-1 * var(--spacing-5))}.nr6-m{margin-right:calc(-1 * var(--spacing-6))}.nr7-m{margin-right:calc(-1 * var(--spacing-7))}.nb1-m{margin-bottom:calc(-1 * var(--spacing-1))}.nb2-m{margin-bottom:calc(-1 * var(--spacing-2))}.nb3-m{margin-bottom:calc(-1 * var(--spacing-3))}.nb4-m{margin-bottom:calc(-1 * var(--spacing-4))}.nb5-m{margin-bottom:calc(-1 * var(--spacing-5))}.nb6-m{margin-bottom:calc(-1 * var(--spacing-6))}.nb7-m{margin-bottom:calc(-1 * var(--spacing-7))}.nt1-m{margin-top:calc(-1 * var(--spacing-1))}.nt2-m{margin-top:calc(-1 * var(--spacing-2))}.nt3-m{margin-top:calc(-1 * var(--spacing-3))}.nt4-m{margin-top:calc(-1 * var(--spacing-4))}.nt5-m{margin-top:calc(-1 * var(--spacing-5))}.nt6-m{margin-top:calc(-1 * var(--spacing-6))}.nt7-m{margin-top:calc(-1 * var(--spacing-7))}}@container (min-width:64em){.na1-l{margin:calc(-1 * var(--spacing-1))}.na2-l{margin:calc(-1 * var(--spacing-2))}.na3-l{margin:calc(-1 * var(--spacing-3))}.na4-l{margin:calc(-1 * var(--spacing-4))}.na5-l{margin:calc(-1 * var(--spacing-5))}.na6-l{margin:calc(-1 * var(--spacing-6))}.na7-l{margin:calc(-1 * var(--spacing-7))}.nl1-l{margin-left:calc(-1 * var(--spacing-1))}.nl2-l{margin-left:calc(-1 * var(--spacing-2))}.nl3-l{margin-left:calc(-1 * var(--spacing-3))}.nl4-l{margin-left:calc(-1 * var(--spacing-4))}.nl5-l{margin-left:calc(-1 * var(--spacing-5))}.nl6-l{margin-left:calc(-1 * var(--spacing-6))}.nl7-l{margin-left:calc(-1 * var(--spacing-7))}.nr1-l{margin-right:calc(-1 * var(--spacing-1))}.nr2-l{margin-right:calc(-1 * var(--spacing-2))}.nr3-l{margin-right:calc(-1 * var(--spacing-3))}.nr4-l{margin-right:calc(-1 * var(--spacing-4))}.nr5-l{margin-right:calc(-1 * var(--spacing-5))}.nr6-l{margin-right:calc(-1 * var(--spacing-6))}.nr7-l{margin-right:calc(-1 * var(--spacing-7))}.nb1-l{margin-bottom:calc(-1 * var(--spacing-1))}.nb2-l{margin-bottom:calc(-1 * var(--spacing-2))}.nb3-l{margin-bottom:calc(-1 * var(--spacing-3))}.nb4-l{margin-bottom:calc(-1 * var(--spacing-4))}.nb5-l{margin-bottom:calc(-1 * var(--spacing-5))}.nb6-l{margin-bottom:calc(-1 * var(--spacing-6))}.nb7-l{margin-bottom:calc(-1 * var(--spacing-7))}.nt1-l{margin-top:calc(-1 * var(--spacing-1))}.nt2-l{margin-top:calc(-1 * var(--spacing-2))}.nt3-l{margin-top:calc(-1 * var(--spacing-3))}.nt4-l{margin-top:calc(-1 * var(--spacing-4))}.nt5-l{margin-top:calc(-1 * var(--spacing-5))}.nt6-l{margin-top:calc(-1 * var(--spacing-6))}.nt7-l{margin-top:calc(-1 * var(--spacing-7))}}.collapse{border-collapse:collapse;border-spacing:0}.striped--light:nth-child(odd){background-color:var(--gray-10)}.striped--dark:nth-child(odd){background-color:var(--gray-0)}.strike{text-decoration:line-through}.underline{text-decoration:underline}.no-underline{text-decoration:none}.tl{text-align:left}.tr{text-align:right}.tc{text-align:center}.tj{text-align:justify}@container (min-width:30em){.tl-s{text-align:left}.tr-s{text-align:right}.tc-s{text-align:center}.tj-s{text-align:justify}}@container (min-width:48em){.tl-m{text-align:left}.tr-m{text-align:right}.tc-m{text-align:center}.tj-m{text-align:justify}}@container (min-width:64em){.tl-l{text-align:left}.tr-l{text-align:right}.tc-l{text-align:center}.tj-l{text-align:justify}}.ttc{text-transform:capitalize}.ttl{text-transform:lowercase}.ttu{text-transform:uppercase}.ttn{text-transform:none}@container (min-width:30em){.ttc-s{text-transform:capitalize}.ttl-s{text-transform:lowercase}.ttu-s{text-transform:uppercase}.ttn-s{text-transform:none}}@container (min-width:48em){.ttc-m{text-transform:capitalize}.ttl-m{text-transform:lowercase}.ttu-m{text-transform:uppercase}.ttn-m{text-transform:none}}@container (min-width:64em){.ttc-l{text-transform:capitalize}.ttl-l{text-transform:lowercase}.ttu-l{text-transform:uppercase}.ttn-l{text-transform:none}}.f1{font-size:var(--font-size-1,.75rem)}.f2{font-size:var(--font-size-2,.875rem)}.f3{font-size:var(--font-size-3,1rem)}.f4{font-size:var(--font-size-4,1.125rem)}.f5{font-size:var(--font-size-5,1.25rem)}.f6{font-size:var(--font-size-6,1.5rem)}.f7{font-size:var(--font-size-7,2rem)}.f8{font-size:var(--font-size-8,3rem)}.f9{font-size:var(--font-size-9,4rem)}.f10{font-size:var(--font-size-10,6rem)}.f11{font-size:var(--font-size-11,8rem)}.f12{font-size:var(--font-size-12,12rem)}@container (min-width:30em){.f1-s{font-size:var(--font-size-1,.75rem)}.f2-s{font-size:var(--font-size-2,.875rem)}.f3-s{font-size:var(--font-size-3,1rem)}.f4-s{font-size:var(--font-size-4,1.125rem)}.f5-s{font-size:var(--font-size-5,1.25rem)}.f6-s{font-size:var(--font-size-6,1.5rem)}.f7-s{font-size:var(--font-size-7,2rem)}.f8-s{font-size:var(--font-size-8,3rem)}.f9-s{font-size:var(--font-size-9,4rem)}.f10-s{font-size:var(--font-size-10,6rem)}.f11-s{font-size:var(--font-size-11,8rem)}.f12-s{font-size:var(--font-size-12,12rem)}}@container (min-width:48em){.f1-m{font-size:var(--font-size-1,.75rem)}.f2-m{font-size:var(--font-size-2,.875rem)}.f3-m{font-size:var(--font-size-3,1rem)}.f4-m{font-size:var(--font-size-4,1.125rem)}.f5-m{font-size:var(--font-size-5,1.25rem)}.f6-m{font-size:var(--font-size-6,1.5rem)}.f7-m{font-size:var(--font-size-7,2rem)}.f8-m{font-size:var(--font-size-8,3rem)}.f9-m{font-size:var(--font-size-9,4rem)}.f10-m{font-size:var(--font-size-10,6rem)}.f11-m{font-size:var(--font-size-11,8rem)}.f12-m{font-size:var(--font-size-12,12rem)}}@container (min-width:64em){.f1-l{font-size:var(--font-size-1,.75rem)}.f2-l{font-size:var(--font-size-2,.875rem)}.f3-l{font-size:var(--font-size-3,1rem)}.f4-l{font-size:var(--font-size-4,1.125rem)}.f5-l{font-size:var(--font-size-5,1.25rem)}.f6-l{font-size:var(--font-size-6,1.5rem)}.f7-l{font-size:var(--font-size-7,2rem)}.f8-l{font-size:var(--font-size-8,3rem)}.f9-l{font-size:var(--font-size-9,4rem)}.f10-l{font-size:var(--font-size-10,6rem)}.f11-l{font-size:var(--font-size-11,8rem)}.f12-l{font-size:var(--font-size-12,12rem)}}.measure{max-width:var(--measure,66ch)}.measure-wide{max-width:var(--measure-wide,80ch)}.measure-narrow{max-width:var(--measure-narrow,45ch)}.indent{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps{font-variant:small-caps}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@container (min-width:30em){.measure-s{max-width:var(--measure,66ch)}.measure-wide-s{max-width:var(--measure-wide,80ch)}.measure-narrow-s{max-width:var(--measure-narrow,45ch)}.small-caps-s{font-variant:small-caps}.indent-s{text-indent:1em;margin-top:0;margin-bottom:0}.truncate-s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@container (min-width:48em){.measure-m{max-width:var(--measure,66ch)}.measure-wide-m{max-width:var(--measure-wide,80ch)}.measure-narrow-m{max-width:var(--measure-narrow,45ch)}.small-caps-m{font-variant:small-caps}.indent-m{text-indent:1em;margin-top:0;margin-bottom:0}.truncate-m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@container (min-width:64em){.measure-l{max-width:var(--measure,66ch)}.measure-wide-l{max-width:var(--measure-wide,80ch)}.measure-narrow-l{max-width:var(--measure-narrow,45ch)}.small-caps-l{font-variant:small-caps}.indent-l{text-indent:1em;margin-top:0;margin-bottom:0}.truncate-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.center{margin-left:auto}.center,.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}@container (min-width:30em){.center-s{margin-left:auto}.center-s,.mr-auto-s{margin-right:auto}.ml-auto-s{margin-left:auto}}@container (min-width:48em){.center-m{margin-left:auto}.center-m,.mr-auto-m{margin-right:auto}.ml-auto-m{margin-left:auto}}@container (min-width:64em){.center-l{margin-left:auto}.center-l,.mr-auto-l{margin-right:auto}.ml-auto-l{margin-left:auto}}.clip{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}@container (min-width:30em){.clip-s{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}}@container (min-width:48em){.clip-m{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}}@container (min-width:64em){.clip-l{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}}.ws-normal{white-space:normal}.nowrap{white-space:nowrap}.pre{white-space:pre}@container (min-width:30em){.ws-normal-s{white-space:normal}.nowrap-s{white-space:nowrap}.pre-s{white-space:pre}}@container (min-width:48em){.ws-normal-m{white-space:normal}.nowrap-m{white-space:nowrap}.pre-m{white-space:pre}}@container (min-width:64em){.ws-normal-l{white-space:normal}.nowrap-l{white-space:nowrap}.pre-l{white-space:pre}}.v-base{vertical-align:baseline}.v-mid{vertical-align:middle}.v-top{vertical-align:top}.v-btm{vertical-align:bottom}@container (min-width:30em){.v-base-s{vertical-align:baseline}.v-mid-s{vertical-align:middle}.v-top-s{vertical-align:top}.v-btm-s{vertical-align:bottom}}@container (min-width:48em){.v-base-m{vertical-align:baseline}.v-mid-m{vertical-align:middle}.v-top-m{vertical-align:top}.v-btm-m{vertical-align:bottom}}@container (min-width:64em){.v-base-l{vertical-align:baseline}.v-mid-l{vertical-align:middle}.v-top-l{vertical-align:top}.v-btm-l{vertical-align:bottom}}.dim{opacity:1}.dim,.dim:focus,.dim:hover{transition:opacity .15s ease-in}.dim:focus,.dim:hover{opacity:.5}.dim:active{opacity:.8;transition:opacity .15s ease-out}.glow,.glow:focus,.glow:hover{transition:opacity .15s ease-in}.glow:focus,.glow:hover{opacity:1}.hide-child .child{opacity:0;transition:opacity .15s ease-in}.hide-child:active .child,.hide-child:focus .child,.hide-child:hover .child{opacity:1;transition:opacity .15s ease-in}.underline-hover:focus,.underline-hover:hover{text-decoration:underline}.grow{-moz-osx-font-smoothing:grayscale;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);transition:-webkit-transform .25s ease-out;transition:transform .25s ease-out;transition:transform .25s ease-out,-webkit-transform .25s ease-out}.grow:focus,.grow:hover{-webkit-transform:scale(1.05);transform:scale(1.05)}.grow:active{-webkit-transform:scale(.9);transform:scale(.9)}.grow-large{-moz-osx-font-smoothing:grayscale;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);transition:-webkit-transform .25s ease-in-out;transition:transform .25s ease-in-out;transition:transform .25s ease-in-out,-webkit-transform .25s ease-in-out}.grow-large:focus,.grow-large:hover{-webkit-transform:scale(1.2);transform:scale(1.2)}.grow-large:active{-webkit-transform:scale(.95);transform:scale(.95)}.pointer{cursor:pointer}.trans-all{transition:all .25s cubic-bezier(.165,.84,.44,1)}.trans-bg{transition:background-color .25s ease-in-out}.trans-color{transition:color .25s ease-in-out}.hover-filter-none:hover{-webkit-filter:none;filter:none}.hover-filter-blur-none:hover{-webkit-filter:blur(0);filter:blur(0)}.hover-filter-blur:hover{-webkit-filter:blur(96px);filter:blur(96px)}.hover-grayscale-0:hover{-webkit-filter:grayscale(0);filter:grayscale(0)}.hover-grayscale-50:hover{-webkit-filter:grayscale(50%);filter:grayscale(50%)}.hover-grayscale-100:hover{-webkit-filter:grayscale(100%);filter:grayscale(100%)}.z-0{z-index:0}.z-1{z-index:1}.z-2{z-index:2}.z-3{z-index:3}.z-4{z-index:4}.z-5{z-index:5}.z-999{z-index:6}.z-9999{z-index:7}.z-max{z-index:8}.z-inherit{z-index:inherit}.z-initial{z-index:auto}.z-unset{z-index:unset}.nested-copy-line-height ol,.nested-copy-line-height p,.nested-copy-line-height ul{line-height:var(--line-height-body,1.5)}.nested-headline-line-height h1,.nested-headline-line-height h2,.nested-headline-line-height h3,.nested-headline-line-height h4,.nested-headline-line-height h5,.nested-headline-line-height h6{line-height:var(--line-height-title,1.25)}.nested-list-reset ol,.nested-list-reset ul{padding-left:0;margin-left:0;list-style-type:none}.nested-copy-indent p+p{text-indent:1em;margin-top:0;margin-bottom:0}.nested-copy-separator p+p{margin-top:1.5em}.nested-img img{width:100%;max-width:100%;display:block}.nested-links a{color:var(--blue-5);transition:color .15s ease-in}.nested-links a:focus,.nested-links a:hover{color:var(--blue-3);transition:color .15s ease-in}.debug *{--debug-color:128 0 90;--debug-opacity:.8;outline:1px solid rbg(var(--debug-color,128 0 90)/(--debug-opacity,.8))}.debug-grid{--grid-size:16px;--grid-color:var(--magenta-9);background-image:repeating-linear-gradient(0deg,var(--grid-color),var(--grid-color) 1px,transparent 0,transparent var(--grid-size)),repeating-linear-gradient(90deg,var(--grid-color),var(--grid-color) 1px,transparent 0,transparent var(--grid-size));background-size:100% var(--grid-size)}@media (prefers-color-scheme:dark){--shadow-color:255 255 255} +/*! TACHYONS v4.12.0 | http://tachyons.io */ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],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{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{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-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}.border-box,a,article,aside,blockquote,body,code,dd,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,input[type=email],input[type=number],input[type=password],input[type=tel],input[type=text],input[type=url],legend,li,main,nav,ol,p,pre,section,table,td,textarea,th,tr,ul{box-sizing:border-box}.aspect-ratio{height:0;position:relative}.aspect-ratio--16x9{padding-bottom:56.25%}.aspect-ratio--9x16{padding-bottom:177.77%}.aspect-ratio--4x3{padding-bottom:75%}.aspect-ratio--3x4{padding-bottom:133.33%}.aspect-ratio--6x4{padding-bottom:66.6%}.aspect-ratio--4x6{padding-bottom:150%}.aspect-ratio--8x5{padding-bottom:62.5%}.aspect-ratio--5x8{padding-bottom:160%}.aspect-ratio--7x5{padding-bottom:71.42%}.aspect-ratio--5x7{padding-bottom:140%}.aspect-ratio--1x1{padding-bottom:100%}.aspect-ratio--object{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:100}img{max-width:100%}.cover{background-size:cover!important}.contain{background-size:contain!important}.bg-center{background-position:50%}.bg-center,.bg-top{background-repeat:no-repeat}.bg-top{background-position:top}.bg-right{background-position:100%}.bg-bottom,.bg-right{background-repeat:no-repeat}.bg-bottom{background-position:bottom}.bg-left{background-repeat:no-repeat;background-position:0}.outline{outline:1px solid}.outline-transparent{outline:1px solid transparent}.outline-0{outline:0}.ba{border-style:solid;border-width:1px}.bt{border-top-style:solid;border-top-width:1px}.br{border-right-style:solid;border-right-width:1px}.bb{border-bottom-style:solid;border-bottom-width:1px}.bl{border-left-style:solid;border-left-width:1px}.bn{border-style:none;border-width:0}.b--black{border-color:#000}.b--near-black{border-color:#111}.b--dark-gray{border-color:#333}.b--mid-gray{border-color:#555}.b--gray{border-color:#777}.b--silver{border-color:#999}.b--light-silver{border-color:#aaa}.b--moon-gray{border-color:#ccc}.b--light-gray{border-color:#eee}.b--near-white{border-color:#f4f4f4}.b--white{border-color:#fff}.b--white-90{border-color:hsla(0,0%,100%,.9)}.b--white-80{border-color:hsla(0,0%,100%,.8)}.b--white-70{border-color:hsla(0,0%,100%,.7)}.b--white-60{border-color:hsla(0,0%,100%,.6)}.b--white-50{border-color:hsla(0,0%,100%,.5)}.b--white-40{border-color:hsla(0,0%,100%,.4)}.b--white-30{border-color:hsla(0,0%,100%,.3)}.b--white-20{border-color:hsla(0,0%,100%,.2)}.b--white-10{border-color:hsla(0,0%,100%,.1)}.b--white-05{border-color:hsla(0,0%,100%,.05)}.b--white-025{border-color:hsla(0,0%,100%,.025)}.b--white-0125{border-color:hsla(0,0%,100%,.0125)}.b--black-90{border-color:rgba(0,0,0,.9)}.b--black-80{border-color:rgba(0,0,0,.8)}.b--black-70{border-color:rgba(0,0,0,.7)}.b--black-60{border-color:rgba(0,0,0,.6)}.b--black-50{border-color:rgba(0,0,0,.5)}.b--black-40{border-color:rgba(0,0,0,.4)}.b--black-30{border-color:rgba(0,0,0,.3)}.b--black-20{border-color:rgba(0,0,0,.2)}.b--black-10{border-color:rgba(0,0,0,.1)}.b--black-05{border-color:rgba(0,0,0,.05)}.b--black-025{border-color:rgba(0,0,0,.025)}.b--black-0125{border-color:rgba(0,0,0,.0125)}.b--dark-red{border-color:#e7040f}.b--red{border-color:#ff4136}.b--light-red{border-color:#ff725c}.b--orange{border-color:#ff6300}.b--gold{border-color:#ffb700}.b--yellow{border-color:gold}.b--light-yellow{border-color:#fbf1a9}.b--purple{border-color:#5e2ca5}.b--light-purple{border-color:#a463f2}.b--dark-pink{border-color:#d5008f}.b--hot-pink{border-color:#ff41b4}.b--pink{border-color:#ff80cc}.b--light-pink{border-color:#ffa3d7}.b--dark-green{border-color:#137752}.b--green{border-color:#19a974}.b--light-green{border-color:#9eebcf}.b--navy{border-color:#001b44}.b--dark-blue{border-color:#00449e}.b--blue{border-color:#357edd}.b--light-blue{border-color:#96ccff}.b--lightest-blue{border-color:#cdecff}.b--washed-blue{border-color:#f6fffe}.b--washed-green{border-color:#e8fdf5}.b--washed-yellow{border-color:#fffceb}.b--washed-red{border-color:#ffdfdf}.b--transparent{border-color:transparent}.b--inherit{border-color:inherit}.b--initial{border-color:initial}.b--unset{border-color:unset}.br0{border-radius:0}.br1{border-radius:.125rem}.br2{border-radius:.25rem}.br3{border-radius:.5rem}.br4{border-radius:1rem}.br-100{border-radius:100%}.br-pill{border-radius:9999px}.br--bottom{border-top-left-radius:0;border-top-right-radius:0}.br--top{border-bottom-right-radius:0}.br--right,.br--top{border-bottom-left-radius:0}.br--right{border-top-left-radius:0}.br--left{border-top-right-radius:0;border-bottom-right-radius:0}.br-inherit{border-radius:inherit}.br-initial{border-radius:initial}.br-unset{border-radius:unset}.b--dotted{border-style:dotted}.b--dashed{border-style:dashed}.b--solid{border-style:solid}.b--none{border-style:none}.bw0{border-width:0}.bw1{border-width:.125rem}.bw2{border-width:.25rem}.bw3{border-width:.5rem}.bw4{border-width:1rem}.bw5{border-width:2rem}.bt-0{border-top-width:0}.br-0{border-right-width:0}.bb-0{border-bottom-width:0}.bl-0{border-left-width:0}.shadow-1{box-shadow:0 0 4px 2px rgba(0,0,0,.2)}.shadow-2{box-shadow:0 0 8px 2px rgba(0,0,0,.2)}.shadow-3{box-shadow:2px 2px 4px 2px rgba(0,0,0,.2)}.shadow-4{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)}.shadow-5{box-shadow:4px 4px 8px 0 rgba(0,0,0,.2)}.pre{overflow-x:auto;overflow-y:hidden;overflow:scroll}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.top-1{top:1rem}.right-1{right:1rem}.bottom-1{bottom:1rem}.left-1{left:1rem}.top-2{top:2rem}.right-2{right:2rem}.bottom-2{bottom:2rem}.left-2{left:2rem}.top--1{top:-1rem}.right--1{right:-1rem}.bottom--1{bottom:-1rem}.left--1{left:-1rem}.top--2{top:-2rem}.right--2{right:-2rem}.bottom--2{bottom:-2rem}.left--2{left:-2rem}.absolute--fill{top:0;right:0;bottom:0;left:0}.cf:after,.cf:before{content:" ";display:table}.cf:after{clear:both}.cf{*zoom:1}.cl{clear:left}.cr{clear:right}.cb{clear:both}.cn{clear:none}.dn{display:none}.di{display:inline}.db{display:block}.dib{display:inline-block}.dit{display:inline-table}.dt{display:table}.dtc{display:table-cell}.dt-row{display:table-row}.dt-row-group{display:table-row-group}.dt-column{display:table-column}.dt-column-group{display:table-column-group}.dt--fixed{table-layout:fixed;width:100%}.flex{display:flex}.inline-flex{display:inline-flex}.flex-auto{flex:1 1 auto;min-width:0;min-height:0}.flex-none{flex:none}.flex-column{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.flex-column-reverse{flex-direction:column-reverse}.flex-row-reverse{flex-direction:row-reverse}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-center{align-self:center}.self-baseline{align-self:baseline}.self-stretch{align-self:stretch}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.content-start{align-content:flex-start}.content-end{align-content:flex-end}.content-center{align-content:center}.content-between{align-content:space-between}.content-around{align-content:space-around}.content-stretch{align-content:stretch}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-last{order:99999}.flex-grow-0{flex-grow:0}.flex-grow-1{flex-grow:1}.flex-shrink-0{flex-shrink:0}.flex-shrink-1{flex-shrink:1}.fl{float:left}.fl,.fr{_display:inline}.fr{float:right}.fn{float:none}.sans-serif{font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif}.serif{font-family:georgia,times,serif}.system-sans-serif{font-family:sans-serif}.system-serif{font-family:serif}.code,code{font-family:Consolas,monaco,monospace}.courier{font-family:Courier Next,courier,monospace}.helvetica{font-family:helvetica neue,helvetica,sans-serif}.avenir{font-family:avenir next,avenir,sans-serif}.athelas{font-family:athelas,georgia,serif}.georgia{font-family:georgia,serif}.times{font-family:times,serif}.bodoni{font-family:Bodoni MT,serif}.calisto{font-family:Calisto MT,serif}.garamond{font-family:garamond,serif}.baskerville{font-family:baskerville,serif}.i{font-style:italic}.fs-normal{font-style:normal}.normal{font-weight:400}.b{font-weight:700}.fw1{font-weight:100}.fw2{font-weight:200}.fw3{font-weight:300}.fw4{font-weight:400}.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}.fw9{font-weight:900}.input-reset{-webkit-appearance:none;-moz-appearance:none}.button-reset::-moz-focus-inner,.input-reset::-moz-focus-inner{border:0;padding:0}.h1{height:1rem}.h2{height:2rem}.h3{height:4rem}.h4{height:8rem}.h5{height:16rem}.h-25{height:25%}.h-50{height:50%}.h-75{height:75%}.h-100{height:100%}.min-h-100{min-height:100%}.vh-25{height:25vh}.vh-50{height:50vh}.vh-75{height:75vh}.vh-100{height:100vh}.min-vh-100{min-height:100vh}.h-auto{height:auto}.h-inherit{height:inherit}.tracked{letter-spacing:.1em}.tracked-tight{letter-spacing:-.05em}.tracked-mega{letter-spacing:.25em}.lh-solid{line-height:1}.lh-title{line-height:1.25}.lh-copy{line-height:1.5}.link{text-decoration:none}.link,.link:active,.link:focus,.link:hover,.link:link,.link:visited{transition:color .15s ease-in}.link:focus{outline:1px dotted currentColor}.list{list-style-type:none}.mw-100{max-width:100%}.mw1{max-width:1rem}.mw2{max-width:2rem}.mw3{max-width:4rem}.mw4{max-width:8rem}.mw5{max-width:16rem}.mw6{max-width:32rem}.mw7{max-width:48rem}.mw8{max-width:64rem}.mw9{max-width:96rem}.mw-none{max-width:none}.w1{width:1rem}.w2{width:2rem}.w3{width:4rem}.w4{width:8rem}.w5{width:16rem}.w-10{width:10%}.w-20{width:20%}.w-25{width:25%}.w-30{width:30%}.w-33{width:33%}.w-34{width:34%}.w-40{width:40%}.w-50{width:50%}.w-60{width:60%}.w-70{width:70%}.w-75{width:75%}.w-80{width:80%}.w-90{width:90%}.w-100{width:100%}.w-third{width:33.33333%}.w-two-thirds{width:66.66667%}.w-auto{width:auto}.overflow-visible{overflow:visible}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.overflow-x-visible{overflow-x:visible}.overflow-x-hidden{overflow-x:hidden}.overflow-x-scroll{overflow-x:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-visible{overflow-y:visible}.overflow-y-hidden{overflow-y:hidden}.overflow-y-scroll{overflow-y:scroll}.overflow-y-auto{overflow-y:auto}.static{position:static}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.o-100{opacity:1}.o-90{opacity:.9}.o-80{opacity:.8}.o-70{opacity:.7}.o-60{opacity:.6}.o-50{opacity:.5}.o-40{opacity:.4}.o-30{opacity:.3}.o-20{opacity:.2}.o-10{opacity:.1}.o-05{opacity:.05}.o-025{opacity:.025}.o-0{opacity:0}.rotate-45{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.rotate-135{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rotate-225{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.rotate-315{-webkit-transform:rotate(315deg);transform:rotate(315deg)}.black-90{color:rgba(0,0,0,.9)}.black-80{color:rgba(0,0,0,.8)}.black-70{color:rgba(0,0,0,.7)}.black-60{color:rgba(0,0,0,.6)}.black-50{color:rgba(0,0,0,.5)}.black-40{color:rgba(0,0,0,.4)}.black-30{color:rgba(0,0,0,.3)}.black-20{color:rgba(0,0,0,.2)}.black-10{color:rgba(0,0,0,.1)}.black-05{color:rgba(0,0,0,.05)}.white-90{color:hsla(0,0%,100%,.9)}.white-80{color:hsla(0,0%,100%,.8)}.white-70{color:hsla(0,0%,100%,.7)}.white-60{color:hsla(0,0%,100%,.6)}.white-50{color:hsla(0,0%,100%,.5)}.white-40{color:hsla(0,0%,100%,.4)}.white-30{color:hsla(0,0%,100%,.3)}.white-20{color:hsla(0,0%,100%,.2)}.white-10{color:hsla(0,0%,100%,.1)}.black{color:#000}.near-black{color:#111}.dark-gray{color:#333}.mid-gray{color:#555}.gray{color:#777}.silver{color:#999}.light-silver{color:#aaa}.moon-gray{color:#ccc}.light-gray{color:#eee}.near-white{color:#f4f4f4}.white{color:#fff}.dark-red{color:#e7040f}.red{color:#ff4136}.light-red{color:#ff725c}.orange{color:#ff6300}.gold{color:#ffb700}.yellow{color:gold}.light-yellow{color:#fbf1a9}.purple{color:#5e2ca5}.light-purple{color:#a463f2}.dark-pink{color:#d5008f}.hot-pink{color:#ff41b4}.pink{color:#ff80cc}.light-pink{color:#ffa3d7}.dark-green{color:#137752}.green{color:#19a974}.light-green{color:#9eebcf}.navy{color:#001b44}.dark-blue{color:#00449e}.blue{color:#357edd}.light-blue{color:#96ccff}.lightest-blue{color:#cdecff}.washed-blue{color:#f6fffe}.washed-green{color:#e8fdf5}.washed-yellow{color:#fffceb}.washed-red{color:#ffdfdf}.color-inherit{color:inherit}.bg-black-90{background-color:rgba(0,0,0,.9)}.bg-black-80{background-color:rgba(0,0,0,.8)}.bg-black-70{background-color:rgba(0,0,0,.7)}.bg-black-60{background-color:rgba(0,0,0,.6)}.bg-black-50{background-color:rgba(0,0,0,.5)}.bg-black-40{background-color:rgba(0,0,0,.4)}.bg-black-30{background-color:rgba(0,0,0,.3)}.bg-black-20{background-color:rgba(0,0,0,.2)}.bg-black-10{background-color:rgba(0,0,0,.1)}.bg-black-05{background-color:rgba(0,0,0,.05)}.bg-white-90{background-color:hsla(0,0%,100%,.9)}.bg-white-80{background-color:hsla(0,0%,100%,.8)}.bg-white-70{background-color:hsla(0,0%,100%,.7)}.bg-white-60{background-color:hsla(0,0%,100%,.6)}.bg-white-50{background-color:hsla(0,0%,100%,.5)}.bg-white-40{background-color:hsla(0,0%,100%,.4)}.bg-white-30{background-color:hsla(0,0%,100%,.3)}.bg-white-20{background-color:hsla(0,0%,100%,.2)}.bg-white-10{background-color:hsla(0,0%,100%,.1)}.bg-black{background-color:#000}.bg-near-black{background-color:#111}.bg-dark-gray{background-color:#333}.bg-mid-gray{background-color:#555}.bg-gray{background-color:#777}.bg-silver{background-color:#999}.bg-light-silver{background-color:#aaa}.bg-moon-gray{background-color:#ccc}.bg-light-gray{background-color:#eee}.bg-near-white{background-color:#f4f4f4}.bg-white{background-color:#fff}.bg-transparent{background-color:transparent}.bg-dark-red{background-color:#e7040f}.bg-red{background-color:#ff4136}.bg-light-red{background-color:#ff725c}.bg-orange{background-color:#ff6300}.bg-gold{background-color:#ffb700}.bg-yellow{background-color:gold}.bg-light-yellow{background-color:#fbf1a9}.bg-purple{background-color:#5e2ca5}.bg-light-purple{background-color:#a463f2}.bg-dark-pink{background-color:#d5008f}.bg-hot-pink{background-color:#ff41b4}.bg-pink{background-color:#ff80cc}.bg-light-pink{background-color:#ffa3d7}.bg-dark-green{background-color:#137752}.bg-green{background-color:#19a974}.bg-light-green{background-color:#9eebcf}.bg-navy{background-color:#001b44}.bg-dark-blue{background-color:#00449e}.bg-blue{background-color:#357edd}.bg-light-blue{background-color:#96ccff}.bg-lightest-blue{background-color:#cdecff}.bg-washed-blue{background-color:#f6fffe}.bg-washed-green{background-color:#e8fdf5}.bg-washed-yellow{background-color:#fffceb}.bg-washed-red{background-color:#ffdfdf}.bg-inherit{background-color:inherit}.hover-black:focus,.hover-black:hover{color:#000}.hover-near-black:focus,.hover-near-black:hover{color:#111}.hover-dark-gray:focus,.hover-dark-gray:hover{color:#333}.hover-mid-gray:focus,.hover-mid-gray:hover{color:#555}.hover-gray:focus,.hover-gray:hover{color:#777}.hover-silver:focus,.hover-silver:hover{color:#999}.hover-light-silver:focus,.hover-light-silver:hover{color:#aaa}.hover-moon-gray:focus,.hover-moon-gray:hover{color:#ccc}.hover-light-gray:focus,.hover-light-gray:hover{color:#eee}.hover-near-white:focus,.hover-near-white:hover{color:#f4f4f4}.hover-white:focus,.hover-white:hover{color:#fff}.hover-black-90:focus,.hover-black-90:hover{color:rgba(0,0,0,.9)}.hover-black-80:focus,.hover-black-80:hover{color:rgba(0,0,0,.8)}.hover-black-70:focus,.hover-black-70:hover{color:rgba(0,0,0,.7)}.hover-black-60:focus,.hover-black-60:hover{color:rgba(0,0,0,.6)}.hover-black-50:focus,.hover-black-50:hover{color:rgba(0,0,0,.5)}.hover-black-40:focus,.hover-black-40:hover{color:rgba(0,0,0,.4)}.hover-black-30:focus,.hover-black-30:hover{color:rgba(0,0,0,.3)}.hover-black-20:focus,.hover-black-20:hover{color:rgba(0,0,0,.2)}.hover-black-10:focus,.hover-black-10:hover{color:rgba(0,0,0,.1)}.hover-white-90:focus,.hover-white-90:hover{color:hsla(0,0%,100%,.9)}.hover-white-80:focus,.hover-white-80:hover{color:hsla(0,0%,100%,.8)}.hover-white-70:focus,.hover-white-70:hover{color:hsla(0,0%,100%,.7)}.hover-white-60:focus,.hover-white-60:hover{color:hsla(0,0%,100%,.6)}.hover-white-50:focus,.hover-white-50:hover{color:hsla(0,0%,100%,.5)}.hover-white-40:focus,.hover-white-40:hover{color:hsla(0,0%,100%,.4)}.hover-white-30:focus,.hover-white-30:hover{color:hsla(0,0%,100%,.3)}.hover-white-20:focus,.hover-white-20:hover{color:hsla(0,0%,100%,.2)}.hover-white-10:focus,.hover-white-10:hover{color:hsla(0,0%,100%,.1)}.hover-inherit:focus,.hover-inherit:hover{color:inherit}.hover-bg-black:focus,.hover-bg-black:hover{background-color:#000}.hover-bg-near-black:focus,.hover-bg-near-black:hover{background-color:#111}.hover-bg-dark-gray:focus,.hover-bg-dark-gray:hover{background-color:#333}.hover-bg-mid-gray:focus,.hover-bg-mid-gray:hover{background-color:#555}.hover-bg-gray:focus,.hover-bg-gray:hover{background-color:#777}.hover-bg-silver:focus,.hover-bg-silver:hover{background-color:#999}.hover-bg-light-silver:focus,.hover-bg-light-silver:hover{background-color:#aaa}.hover-bg-moon-gray:focus,.hover-bg-moon-gray:hover{background-color:#ccc}.hover-bg-light-gray:focus,.hover-bg-light-gray:hover{background-color:#eee}.hover-bg-near-white:focus,.hover-bg-near-white:hover{background-color:#f4f4f4}.hover-bg-white:focus,.hover-bg-white:hover{background-color:#fff}.hover-bg-transparent:focus,.hover-bg-transparent:hover{background-color:transparent}.hover-bg-black-90:focus,.hover-bg-black-90:hover{background-color:rgba(0,0,0,.9)}.hover-bg-black-80:focus,.hover-bg-black-80:hover{background-color:rgba(0,0,0,.8)}.hover-bg-black-70:focus,.hover-bg-black-70:hover{background-color:rgba(0,0,0,.7)}.hover-bg-black-60:focus,.hover-bg-black-60:hover{background-color:rgba(0,0,0,.6)}.hover-bg-black-50:focus,.hover-bg-black-50:hover{background-color:rgba(0,0,0,.5)}.hover-bg-black-40:focus,.hover-bg-black-40:hover{background-color:rgba(0,0,0,.4)}.hover-bg-black-30:focus,.hover-bg-black-30:hover{background-color:rgba(0,0,0,.3)}.hover-bg-black-20:focus,.hover-bg-black-20:hover{background-color:rgba(0,0,0,.2)}.hover-bg-black-10:focus,.hover-bg-black-10:hover{background-color:rgba(0,0,0,.1)}.hover-bg-white-90:focus,.hover-bg-white-90:hover{background-color:hsla(0,0%,100%,.9)}.hover-bg-white-80:focus,.hover-bg-white-80:hover{background-color:hsla(0,0%,100%,.8)}.hover-bg-white-70:focus,.hover-bg-white-70:hover{background-color:hsla(0,0%,100%,.7)}.hover-bg-white-60:focus,.hover-bg-white-60:hover{background-color:hsla(0,0%,100%,.6)}.hover-bg-white-50:focus,.hover-bg-white-50:hover{background-color:hsla(0,0%,100%,.5)}.hover-bg-white-40:focus,.hover-bg-white-40:hover{background-color:hsla(0,0%,100%,.4)}.hover-bg-white-30:focus,.hover-bg-white-30:hover{background-color:hsla(0,0%,100%,.3)}.hover-bg-white-20:focus,.hover-bg-white-20:hover{background-color:hsla(0,0%,100%,.2)}.hover-bg-white-10:focus,.hover-bg-white-10:hover{background-color:hsla(0,0%,100%,.1)}.hover-dark-red:focus,.hover-dark-red:hover{color:#e7040f}.hover-red:focus,.hover-red:hover{color:#ff4136}.hover-light-red:focus,.hover-light-red:hover{color:#ff725c}.hover-orange:focus,.hover-orange:hover{color:#ff6300}.hover-gold:focus,.hover-gold:hover{color:#ffb700}.hover-yellow:focus,.hover-yellow:hover{color:gold}.hover-light-yellow:focus,.hover-light-yellow:hover{color:#fbf1a9}.hover-purple:focus,.hover-purple:hover{color:#5e2ca5}.hover-light-purple:focus,.hover-light-purple:hover{color:#a463f2}.hover-dark-pink:focus,.hover-dark-pink:hover{color:#d5008f}.hover-hot-pink:focus,.hover-hot-pink:hover{color:#ff41b4}.hover-pink:focus,.hover-pink:hover{color:#ff80cc}.hover-light-pink:focus,.hover-light-pink:hover{color:#ffa3d7}.hover-dark-green:focus,.hover-dark-green:hover{color:#137752}.hover-green:focus,.hover-green:hover{color:#19a974}.hover-light-green:focus,.hover-light-green:hover{color:#9eebcf}.hover-navy:focus,.hover-navy:hover{color:#001b44}.hover-dark-blue:focus,.hover-dark-blue:hover{color:#00449e}.hover-blue:focus,.hover-blue:hover{color:#357edd}.hover-light-blue:focus,.hover-light-blue:hover{color:#96ccff}.hover-lightest-blue:focus,.hover-lightest-blue:hover{color:#cdecff}.hover-washed-blue:focus,.hover-washed-blue:hover{color:#f6fffe}.hover-washed-green:focus,.hover-washed-green:hover{color:#e8fdf5}.hover-washed-yellow:focus,.hover-washed-yellow:hover{color:#fffceb}.hover-washed-red:focus,.hover-washed-red:hover{color:#ffdfdf}.hover-bg-dark-red:focus,.hover-bg-dark-red:hover{background-color:#e7040f}.hover-bg-red:focus,.hover-bg-red:hover{background-color:#ff4136}.hover-bg-light-red:focus,.hover-bg-light-red:hover{background-color:#ff725c}.hover-bg-orange:focus,.hover-bg-orange:hover{background-color:#ff6300}.hover-bg-gold:focus,.hover-bg-gold:hover{background-color:#ffb700}.hover-bg-yellow:focus,.hover-bg-yellow:hover{background-color:gold}.hover-bg-light-yellow:focus,.hover-bg-light-yellow:hover{background-color:#fbf1a9}.hover-bg-purple:focus,.hover-bg-purple:hover{background-color:#5e2ca5}.hover-bg-light-purple:focus,.hover-bg-light-purple:hover{background-color:#a463f2}.hover-bg-dark-pink:focus,.hover-bg-dark-pink:hover{background-color:#d5008f}.hover-bg-hot-pink:focus,.hover-bg-hot-pink:hover{background-color:#ff41b4}.hover-bg-pink:focus,.hover-bg-pink:hover{background-color:#ff80cc}.hover-bg-light-pink:focus,.hover-bg-light-pink:hover{background-color:#ffa3d7}.hover-bg-dark-green:focus,.hover-bg-dark-green:hover{background-color:#137752}.hover-bg-green:focus,.hover-bg-green:hover{background-color:#19a974}.hover-bg-light-green:focus,.hover-bg-light-green:hover{background-color:#9eebcf}.hover-bg-navy:focus,.hover-bg-navy:hover{background-color:#001b44}.hover-bg-dark-blue:focus,.hover-bg-dark-blue:hover{background-color:#00449e}.hover-bg-blue:focus,.hover-bg-blue:hover{background-color:#357edd}.hover-bg-light-blue:focus,.hover-bg-light-blue:hover{background-color:#96ccff}.hover-bg-lightest-blue:focus,.hover-bg-lightest-blue:hover{background-color:#cdecff}.hover-bg-washed-blue:focus,.hover-bg-washed-blue:hover{background-color:#f6fffe}.hover-bg-washed-green:focus,.hover-bg-washed-green:hover{background-color:#e8fdf5}.hover-bg-washed-yellow:focus,.hover-bg-washed-yellow:hover{background-color:#fffceb}.hover-bg-washed-red:focus,.hover-bg-washed-red:hover{background-color:#ffdfdf}.hover-bg-inherit:focus,.hover-bg-inherit:hover{background-color:inherit}.pa0{padding:0}.pa1{padding:.25rem}.pa2{padding:.5rem}.pa3{padding:1rem}.pa4{padding:2rem}.pa5{padding:4rem}.pa6{padding:8rem}.pa7{padding:16rem}.pl0{padding-left:0}.pl1{padding-left:.25rem}.pl2{padding-left:.5rem}.pl3{padding-left:1rem}.pl4{padding-left:2rem}.pl5{padding-left:4rem}.pl6{padding-left:8rem}.pl7{padding-left:16rem}.pr0{padding-right:0}.pr1{padding-right:.25rem}.pr2{padding-right:.5rem}.pr3{padding-right:1rem}.pr4{padding-right:2rem}.pr5{padding-right:4rem}.pr6{padding-right:8rem}.pr7{padding-right:16rem}.pb0{padding-bottom:0}.pb1{padding-bottom:.25rem}.pb2{padding-bottom:.5rem}.pb3{padding-bottom:1rem}.pb4{padding-bottom:2rem}.pb5{padding-bottom:4rem}.pb6{padding-bottom:8rem}.pb7{padding-bottom:16rem}.pt0{padding-top:0}.pt1{padding-top:.25rem}.pt2{padding-top:.5rem}.pt3{padding-top:1rem}.pt4{padding-top:2rem}.pt5{padding-top:4rem}.pt6{padding-top:8rem}.pt7{padding-top:16rem}.pv0{padding-top:0;padding-bottom:0}.pv1{padding-top:.25rem;padding-bottom:.25rem}.pv2{padding-top:.5rem;padding-bottom:.5rem}.pv3{padding-top:1rem;padding-bottom:1rem}.pv4{padding-top:2rem;padding-bottom:2rem}.pv5{padding-top:4rem;padding-bottom:4rem}.pv6{padding-top:8rem;padding-bottom:8rem}.pv7{padding-top:16rem;padding-bottom:16rem}.ph0{padding-left:0;padding-right:0}.ph1{padding-left:.25rem;padding-right:.25rem}.ph2{padding-left:.5rem;padding-right:.5rem}.ph3{padding-left:1rem;padding-right:1rem}.ph4{padding-left:2rem;padding-right:2rem}.ph5{padding-left:4rem;padding-right:4rem}.ph6{padding-left:8rem;padding-right:8rem}.ph7{padding-left:16rem;padding-right:16rem}.ma0{margin:0}.ma1{margin:.25rem}.ma2{margin:.5rem}.ma3{margin:1rem}.ma4{margin:2rem}.ma5{margin:4rem}.ma6{margin:8rem}.ma7{margin:16rem}.ml0{margin-left:0}.ml1{margin-left:.25rem}.ml2{margin-left:.5rem}.ml3{margin-left:1rem}.ml4{margin-left:2rem}.ml5{margin-left:4rem}.ml6{margin-left:8rem}.ml7{margin-left:16rem}.mr0{margin-right:0}.mr1{margin-right:.25rem}.mr2{margin-right:.5rem}.mr3{margin-right:1rem}.mr4{margin-right:2rem}.mr5{margin-right:4rem}.mr6{margin-right:8rem}.mr7{margin-right:16rem}.mb0{margin-bottom:0}.mb1{margin-bottom:.25rem}.mb2{margin-bottom:.5rem}.mb3{margin-bottom:1rem}.mb4{margin-bottom:2rem}.mb5{margin-bottom:4rem}.mb6{margin-bottom:8rem}.mb7{margin-bottom:16rem}.mt0{margin-top:0}.mt1{margin-top:.25rem}.mt2{margin-top:.5rem}.mt3{margin-top:1rem}.mt4{margin-top:2rem}.mt5{margin-top:4rem}.mt6{margin-top:8rem}.mt7{margin-top:16rem}.mv0{margin-top:0;margin-bottom:0}.mv1{margin-top:.25rem;margin-bottom:.25rem}.mv2{margin-top:.5rem;margin-bottom:.5rem}.mv3{margin-top:1rem;margin-bottom:1rem}.mv4{margin-top:2rem;margin-bottom:2rem}.mv5{margin-top:4rem;margin-bottom:4rem}.mv6{margin-top:8rem;margin-bottom:8rem}.mv7{margin-top:16rem;margin-bottom:16rem}.mh0{margin-left:0;margin-right:0}.mh1{margin-left:.25rem;margin-right:.25rem}.mh2{margin-left:.5rem;margin-right:.5rem}.mh3{margin-left:1rem;margin-right:1rem}.mh4{margin-left:2rem;margin-right:2rem}.mh5{margin-left:4rem;margin-right:4rem}.mh6{margin-left:8rem;margin-right:8rem}.mh7{margin-left:16rem;margin-right:16rem}.na1{margin:-.25rem}.na2{margin:-.5rem}.na3{margin:-1rem}.na4{margin:-2rem}.na5{margin:-4rem}.na6{margin:-8rem}.na7{margin:-16rem}.nl1{margin-left:-.25rem}.nl2{margin-left:-.5rem}.nl3{margin-left:-1rem}.nl4{margin-left:-2rem}.nl5{margin-left:-4rem}.nl6{margin-left:-8rem}.nl7{margin-left:-16rem}.nr1{margin-right:-.25rem}.nr2{margin-right:-.5rem}.nr3{margin-right:-1rem}.nr4{margin-right:-2rem}.nr5{margin-right:-4rem}.nr6{margin-right:-8rem}.nr7{margin-right:-16rem}.nb1{margin-bottom:-.25rem}.nb2{margin-bottom:-.5rem}.nb3{margin-bottom:-1rem}.nb4{margin-bottom:-2rem}.nb5{margin-bottom:-4rem}.nb6{margin-bottom:-8rem}.nb7{margin-bottom:-16rem}.nt1{margin-top:-.25rem}.nt2{margin-top:-.5rem}.nt3{margin-top:-1rem}.nt4{margin-top:-2rem}.nt5{margin-top:-4rem}.nt6{margin-top:-8rem}.nt7{margin-top:-16rem}.collapse{border-collapse:collapse;border-spacing:0}.striped--light-silver:nth-child(odd){background-color:#aaa}.striped--moon-gray:nth-child(odd){background-color:#ccc}.striped--light-gray:nth-child(odd){background-color:#eee}.striped--near-white:nth-child(odd){background-color:#f4f4f4}.stripe-light:nth-child(odd){background-color:hsla(0,0%,100%,.1)}.stripe-dark:nth-child(odd){background-color:rgba(0,0,0,.1)}.strike{text-decoration:line-through}.underline{text-decoration:underline}.no-underline{text-decoration:none}.tl{text-align:left}.tr{text-align:right}.tc{text-align:center}.tj{text-align:justify}.ttc{text-transform:capitalize}.ttl{text-transform:lowercase}.ttu{text-transform:uppercase}.ttn{text-transform:none}.f-6,.f-headline{font-size:6rem}.f-5,.f-subheadline{font-size:5rem}.f1{font-size:3rem}.f2{font-size:2.25rem}.f3{font-size:1.5rem}.f4{font-size:1.25rem}.f5{font-size:1rem}.f6{font-size:.875rem}.f7{font-size:.75rem}.measure{max-width:30em}.measure-wide{max-width:34em}.measure-narrow{max-width:20em}.indent{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps{font-variant:small-caps}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overflow-container{overflow-y:scroll}.center{margin-left:auto}.center,.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.clip{position:fixed!important;_position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.ws-normal{white-space:normal}.nowrap{white-space:nowrap}.pre{white-space:pre}.v-base{vertical-align:baseline}.v-mid{vertical-align:middle}.v-top{vertical-align:top}.v-btm{vertical-align:bottom}.dim{opacity:1}.dim,.dim:focus,.dim:hover{transition:opacity .15s ease-in}.dim:focus,.dim:hover{opacity:.5}.dim:active{opacity:.8;transition:opacity .15s ease-out}.glow,.glow:focus,.glow:hover{transition:opacity .15s ease-in}.glow:focus,.glow:hover{opacity:1}.hide-child .child{opacity:0;transition:opacity .15s ease-in}.hide-child:active .child,.hide-child:focus .child,.hide-child:hover .child{opacity:1;transition:opacity .15s ease-in}.underline-hover:focus,.underline-hover:hover{text-decoration:underline}.grow{-moz-osx-font-smoothing:grayscale;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);transition:-webkit-transform .25s ease-out;transition:transform .25s ease-out;transition:transform .25s ease-out,-webkit-transform .25s ease-out}.grow:focus,.grow:hover{-webkit-transform:scale(1.05);transform:scale(1.05)}.grow:active{-webkit-transform:scale(.9);transform:scale(.9)}.grow-large{-moz-osx-font-smoothing:grayscale;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);transition:-webkit-transform .25s ease-in-out;transition:transform .25s ease-in-out;transition:transform .25s ease-in-out,-webkit-transform .25s ease-in-out}.grow-large:focus,.grow-large:hover{-webkit-transform:scale(1.2);transform:scale(1.2)}.grow-large:active{-webkit-transform:scale(.95);transform:scale(.95)}.pointer:hover,.shadow-hover{cursor:pointer}.shadow-hover{position:relative;transition:all .5s cubic-bezier(.165,.84,.44,1)}.shadow-hover:after{content:"";box-shadow:0 0 16px 2px rgba(0,0,0,.2);border-radius:inherit;opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;transition:opacity .5s cubic-bezier(.165,.84,.44,1)}.shadow-hover:focus:after,.shadow-hover:hover:after{opacity:1}.bg-animate,.bg-animate:focus,.bg-animate:hover{transition:background-color .15s ease-in-out}.z-0{z-index:0}.z-1{z-index:1}.z-2{z-index:2}.z-3{z-index:3}.z-4{z-index:4}.z-5{z-index:5}.z-999{z-index:999}.z-9999{z-index:9999}.z-max{z-index:2147483647}.z-inherit{z-index:inherit}.z-initial{z-index:auto}.z-unset{z-index:unset}.nested-copy-line-height ol,.nested-copy-line-height p,.nested-copy-line-height ul{line-height:1.5}.nested-headline-line-height h1,.nested-headline-line-height h2,.nested-headline-line-height h3,.nested-headline-line-height h4,.nested-headline-line-height h5,.nested-headline-line-height h6{line-height:1.25}.nested-list-reset ol,.nested-list-reset ul{padding-left:0;margin-left:0;list-style-type:none}.nested-copy-indent p+p{text-indent:1em;margin-top:0;margin-bottom:0}.nested-copy-separator p+p{margin-top:1.5em}.nested-img img{width:100%;max-width:100%;display:block}.nested-links a{color:#357edd;transition:color .15s ease-in}.nested-links a:focus,.nested-links a:hover{color:#96ccff;transition:color .15s ease-in}.debug *{outline:1px solid gold}.debug-white *{outline:1px solid #fff}.debug-black *{outline:1px solid #000}.debug-grid{background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII=) repeat 0 0}.debug-grid-16{background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII=) repeat 0 0}.debug-grid-8-solid{background:#fff url(data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw==) repeat 0 0}.debug-grid-16-solid{background:#fff url(data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7) repeat 0 0}@media screen and (min-width:30em){.aspect-ratio-ns{height:0;position:relative}.aspect-ratio--16x9-ns{padding-bottom:56.25%}.aspect-ratio--9x16-ns{padding-bottom:177.77%}.aspect-ratio--4x3-ns{padding-bottom:75%}.aspect-ratio--3x4-ns{padding-bottom:133.33%}.aspect-ratio--6x4-ns{padding-bottom:66.6%}.aspect-ratio--4x6-ns{padding-bottom:150%}.aspect-ratio--8x5-ns{padding-bottom:62.5%}.aspect-ratio--5x8-ns{padding-bottom:160%}.aspect-ratio--7x5-ns{padding-bottom:71.42%}.aspect-ratio--5x7-ns{padding-bottom:140%}.aspect-ratio--1x1-ns{padding-bottom:100%}.aspect-ratio--object-ns{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:100}.cover-ns{background-size:cover!important}.contain-ns{background-size:contain!important}.bg-center-ns{background-position:50%}.bg-center-ns,.bg-top-ns{background-repeat:no-repeat}.bg-top-ns{background-position:top}.bg-right-ns{background-position:100%}.bg-bottom-ns,.bg-right-ns{background-repeat:no-repeat}.bg-bottom-ns{background-position:bottom}.bg-left-ns{background-repeat:no-repeat;background-position:0}.outline-ns{outline:1px solid}.outline-transparent-ns{outline:1px solid transparent}.outline-0-ns{outline:0}.ba-ns{border-style:solid;border-width:1px}.bt-ns{border-top-style:solid;border-top-width:1px}.br-ns{border-right-style:solid;border-right-width:1px}.bb-ns{border-bottom-style:solid;border-bottom-width:1px}.bl-ns{border-left-style:solid;border-left-width:1px}.bn-ns{border-style:none;border-width:0}.br0-ns{border-radius:0}.br1-ns{border-radius:.125rem}.br2-ns{border-radius:.25rem}.br3-ns{border-radius:.5rem}.br4-ns{border-radius:1rem}.br-100-ns{border-radius:100%}.br-pill-ns{border-radius:9999px}.br--bottom-ns{border-top-left-radius:0;border-top-right-radius:0}.br--top-ns{border-bottom-right-radius:0}.br--right-ns,.br--top-ns{border-bottom-left-radius:0}.br--right-ns{border-top-left-radius:0}.br--left-ns{border-top-right-radius:0;border-bottom-right-radius:0}.br-inherit-ns{border-radius:inherit}.br-initial-ns{border-radius:initial}.br-unset-ns{border-radius:unset}.b--dotted-ns{border-style:dotted}.b--dashed-ns{border-style:dashed}.b--solid-ns{border-style:solid}.b--none-ns{border-style:none}.bw0-ns{border-width:0}.bw1-ns{border-width:.125rem}.bw2-ns{border-width:.25rem}.bw3-ns{border-width:.5rem}.bw4-ns{border-width:1rem}.bw5-ns{border-width:2rem}.bt-0-ns{border-top-width:0}.br-0-ns{border-right-width:0}.bb-0-ns{border-bottom-width:0}.bl-0-ns{border-left-width:0}.shadow-1-ns{box-shadow:0 0 4px 2px rgba(0,0,0,.2)}.shadow-2-ns{box-shadow:0 0 8px 2px rgba(0,0,0,.2)}.shadow-3-ns{box-shadow:2px 2px 4px 2px rgba(0,0,0,.2)}.shadow-4-ns{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)}.shadow-5-ns{box-shadow:4px 4px 8px 0 rgba(0,0,0,.2)}.top-0-ns{top:0}.left-0-ns{left:0}.right-0-ns{right:0}.bottom-0-ns{bottom:0}.top-1-ns{top:1rem}.left-1-ns{left:1rem}.right-1-ns{right:1rem}.bottom-1-ns{bottom:1rem}.top-2-ns{top:2rem}.left-2-ns{left:2rem}.right-2-ns{right:2rem}.bottom-2-ns{bottom:2rem}.top--1-ns{top:-1rem}.right--1-ns{right:-1rem}.bottom--1-ns{bottom:-1rem}.left--1-ns{left:-1rem}.top--2-ns{top:-2rem}.right--2-ns{right:-2rem}.bottom--2-ns{bottom:-2rem}.left--2-ns{left:-2rem}.absolute--fill-ns{top:0;right:0;bottom:0;left:0}.cl-ns{clear:left}.cr-ns{clear:right}.cb-ns{clear:both}.cn-ns{clear:none}.dn-ns{display:none}.di-ns{display:inline}.db-ns{display:block}.dib-ns{display:inline-block}.dit-ns{display:inline-table}.dt-ns{display:table}.dtc-ns{display:table-cell}.dt-row-ns{display:table-row}.dt-row-group-ns{display:table-row-group}.dt-column-ns{display:table-column}.dt-column-group-ns{display:table-column-group}.dt--fixed-ns{table-layout:fixed;width:100%}.flex-ns{display:flex}.inline-flex-ns{display:inline-flex}.flex-auto-ns{flex:1 1 auto;min-width:0;min-height:0}.flex-none-ns{flex:none}.flex-column-ns{flex-direction:column}.flex-row-ns{flex-direction:row}.flex-wrap-ns{flex-wrap:wrap}.flex-nowrap-ns{flex-wrap:nowrap}.flex-wrap-reverse-ns{flex-wrap:wrap-reverse}.flex-column-reverse-ns{flex-direction:column-reverse}.flex-row-reverse-ns{flex-direction:row-reverse}.items-start-ns{align-items:flex-start}.items-end-ns{align-items:flex-end}.items-center-ns{align-items:center}.items-baseline-ns{align-items:baseline}.items-stretch-ns{align-items:stretch}.self-start-ns{align-self:flex-start}.self-end-ns{align-self:flex-end}.self-center-ns{align-self:center}.self-baseline-ns{align-self:baseline}.self-stretch-ns{align-self:stretch}.justify-start-ns{justify-content:flex-start}.justify-end-ns{justify-content:flex-end}.justify-center-ns{justify-content:center}.justify-between-ns{justify-content:space-between}.justify-around-ns{justify-content:space-around}.content-start-ns{align-content:flex-start}.content-end-ns{align-content:flex-end}.content-center-ns{align-content:center}.content-between-ns{align-content:space-between}.content-around-ns{align-content:space-around}.content-stretch-ns{align-content:stretch}.order-0-ns{order:0}.order-1-ns{order:1}.order-2-ns{order:2}.order-3-ns{order:3}.order-4-ns{order:4}.order-5-ns{order:5}.order-6-ns{order:6}.order-7-ns{order:7}.order-8-ns{order:8}.order-last-ns{order:99999}.flex-grow-0-ns{flex-grow:0}.flex-grow-1-ns{flex-grow:1}.flex-shrink-0-ns{flex-shrink:0}.flex-shrink-1-ns{flex-shrink:1}.fl-ns{float:left}.fl-ns,.fr-ns{_display:inline}.fr-ns{float:right}.fn-ns{float:none}.i-ns{font-style:italic}.fs-normal-ns{font-style:normal}.normal-ns{font-weight:400}.b-ns{font-weight:700}.fw1-ns{font-weight:100}.fw2-ns{font-weight:200}.fw3-ns{font-weight:300}.fw4-ns{font-weight:400}.fw5-ns{font-weight:500}.fw6-ns{font-weight:600}.fw7-ns{font-weight:700}.fw8-ns{font-weight:800}.fw9-ns{font-weight:900}.h1-ns{height:1rem}.h2-ns{height:2rem}.h3-ns{height:4rem}.h4-ns{height:8rem}.h5-ns{height:16rem}.h-25-ns{height:25%}.h-50-ns{height:50%}.h-75-ns{height:75%}.h-100-ns{height:100%}.min-h-100-ns{min-height:100%}.vh-25-ns{height:25vh}.vh-50-ns{height:50vh}.vh-75-ns{height:75vh}.vh-100-ns{height:100vh}.min-vh-100-ns{min-height:100vh}.h-auto-ns{height:auto}.h-inherit-ns{height:inherit}.tracked-ns{letter-spacing:.1em}.tracked-tight-ns{letter-spacing:-.05em}.tracked-mega-ns{letter-spacing:.25em}.lh-solid-ns{line-height:1}.lh-title-ns{line-height:1.25}.lh-copy-ns{line-height:1.5}.mw-100-ns{max-width:100%}.mw1-ns{max-width:1rem}.mw2-ns{max-width:2rem}.mw3-ns{max-width:4rem}.mw4-ns{max-width:8rem}.mw5-ns{max-width:16rem}.mw6-ns{max-width:32rem}.mw7-ns{max-width:48rem}.mw8-ns{max-width:64rem}.mw9-ns{max-width:96rem}.mw-none-ns{max-width:none}.w1-ns{width:1rem}.w2-ns{width:2rem}.w3-ns{width:4rem}.w4-ns{width:8rem}.w5-ns{width:16rem}.w-10-ns{width:10%}.w-20-ns{width:20%}.w-25-ns{width:25%}.w-30-ns{width:30%}.w-33-ns{width:33%}.w-34-ns{width:34%}.w-40-ns{width:40%}.w-50-ns{width:50%}.w-60-ns{width:60%}.w-70-ns{width:70%}.w-75-ns{width:75%}.w-80-ns{width:80%}.w-90-ns{width:90%}.w-100-ns{width:100%}.w-third-ns{width:33.33333%}.w-two-thirds-ns{width:66.66667%}.w-auto-ns{width:auto}.overflow-visible-ns{overflow:visible}.overflow-hidden-ns{overflow:hidden}.overflow-scroll-ns{overflow:scroll}.overflow-auto-ns{overflow:auto}.overflow-x-visible-ns{overflow-x:visible}.overflow-x-hidden-ns{overflow-x:hidden}.overflow-x-scroll-ns{overflow-x:scroll}.overflow-x-auto-ns{overflow-x:auto}.overflow-y-visible-ns{overflow-y:visible}.overflow-y-hidden-ns{overflow-y:hidden}.overflow-y-scroll-ns{overflow-y:scroll}.overflow-y-auto-ns{overflow-y:auto}.static-ns{position:static}.relative-ns{position:relative}.absolute-ns{position:absolute}.fixed-ns{position:fixed}.rotate-45-ns{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.rotate-90-ns{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.rotate-135-ns{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.rotate-180-ns{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rotate-225-ns{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.rotate-270-ns{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.rotate-315-ns{-webkit-transform:rotate(315deg);transform:rotate(315deg)}.pa0-ns{padding:0}.pa1-ns{padding:.25rem}.pa2-ns{padding:.5rem}.pa3-ns{padding:1rem}.pa4-ns{padding:2rem}.pa5-ns{padding:4rem}.pa6-ns{padding:8rem}.pa7-ns{padding:16rem}.pl0-ns{padding-left:0}.pl1-ns{padding-left:.25rem}.pl2-ns{padding-left:.5rem}.pl3-ns{padding-left:1rem}.pl4-ns{padding-left:2rem}.pl5-ns{padding-left:4rem}.pl6-ns{padding-left:8rem}.pl7-ns{padding-left:16rem}.pr0-ns{padding-right:0}.pr1-ns{padding-right:.25rem}.pr2-ns{padding-right:.5rem}.pr3-ns{padding-right:1rem}.pr4-ns{padding-right:2rem}.pr5-ns{padding-right:4rem}.pr6-ns{padding-right:8rem}.pr7-ns{padding-right:16rem}.pb0-ns{padding-bottom:0}.pb1-ns{padding-bottom:.25rem}.pb2-ns{padding-bottom:.5rem}.pb3-ns{padding-bottom:1rem}.pb4-ns{padding-bottom:2rem}.pb5-ns{padding-bottom:4rem}.pb6-ns{padding-bottom:8rem}.pb7-ns{padding-bottom:16rem}.pt0-ns{padding-top:0}.pt1-ns{padding-top:.25rem}.pt2-ns{padding-top:.5rem}.pt3-ns{padding-top:1rem}.pt4-ns{padding-top:2rem}.pt5-ns{padding-top:4rem}.pt6-ns{padding-top:8rem}.pt7-ns{padding-top:16rem}.pv0-ns{padding-top:0;padding-bottom:0}.pv1-ns{padding-top:.25rem;padding-bottom:.25rem}.pv2-ns{padding-top:.5rem;padding-bottom:.5rem}.pv3-ns{padding-top:1rem;padding-bottom:1rem}.pv4-ns{padding-top:2rem;padding-bottom:2rem}.pv5-ns{padding-top:4rem;padding-bottom:4rem}.pv6-ns{padding-top:8rem;padding-bottom:8rem}.pv7-ns{padding-top:16rem;padding-bottom:16rem}.ph0-ns{padding-left:0;padding-right:0}.ph1-ns{padding-left:.25rem;padding-right:.25rem}.ph2-ns{padding-left:.5rem;padding-right:.5rem}.ph3-ns{padding-left:1rem;padding-right:1rem}.ph4-ns{padding-left:2rem;padding-right:2rem}.ph5-ns{padding-left:4rem;padding-right:4rem}.ph6-ns{padding-left:8rem;padding-right:8rem}.ph7-ns{padding-left:16rem;padding-right:16rem}.ma0-ns{margin:0}.ma1-ns{margin:.25rem}.ma2-ns{margin:.5rem}.ma3-ns{margin:1rem}.ma4-ns{margin:2rem}.ma5-ns{margin:4rem}.ma6-ns{margin:8rem}.ma7-ns{margin:16rem}.ml0-ns{margin-left:0}.ml1-ns{margin-left:.25rem}.ml2-ns{margin-left:.5rem}.ml3-ns{margin-left:1rem}.ml4-ns{margin-left:2rem}.ml5-ns{margin-left:4rem}.ml6-ns{margin-left:8rem}.ml7-ns{margin-left:16rem}.mr0-ns{margin-right:0}.mr1-ns{margin-right:.25rem}.mr2-ns{margin-right:.5rem}.mr3-ns{margin-right:1rem}.mr4-ns{margin-right:2rem}.mr5-ns{margin-right:4rem}.mr6-ns{margin-right:8rem}.mr7-ns{margin-right:16rem}.mb0-ns{margin-bottom:0}.mb1-ns{margin-bottom:.25rem}.mb2-ns{margin-bottom:.5rem}.mb3-ns{margin-bottom:1rem}.mb4-ns{margin-bottom:2rem}.mb5-ns{margin-bottom:4rem}.mb6-ns{margin-bottom:8rem}.mb7-ns{margin-bottom:16rem}.mt0-ns{margin-top:0}.mt1-ns{margin-top:.25rem}.mt2-ns{margin-top:.5rem}.mt3-ns{margin-top:1rem}.mt4-ns{margin-top:2rem}.mt5-ns{margin-top:4rem}.mt6-ns{margin-top:8rem}.mt7-ns{margin-top:16rem}.mv0-ns{margin-top:0;margin-bottom:0}.mv1-ns{margin-top:.25rem;margin-bottom:.25rem}.mv2-ns{margin-top:.5rem;margin-bottom:.5rem}.mv3-ns{margin-top:1rem;margin-bottom:1rem}.mv4-ns{margin-top:2rem;margin-bottom:2rem}.mv5-ns{margin-top:4rem;margin-bottom:4rem}.mv6-ns{margin-top:8rem;margin-bottom:8rem}.mv7-ns{margin-top:16rem;margin-bottom:16rem}.mh0-ns{margin-left:0;margin-right:0}.mh1-ns{margin-left:.25rem;margin-right:.25rem}.mh2-ns{margin-left:.5rem;margin-right:.5rem}.mh3-ns{margin-left:1rem;margin-right:1rem}.mh4-ns{margin-left:2rem;margin-right:2rem}.mh5-ns{margin-left:4rem;margin-right:4rem}.mh6-ns{margin-left:8rem;margin-right:8rem}.mh7-ns{margin-left:16rem;margin-right:16rem}.na1-ns{margin:-.25rem}.na2-ns{margin:-.5rem}.na3-ns{margin:-1rem}.na4-ns{margin:-2rem}.na5-ns{margin:-4rem}.na6-ns{margin:-8rem}.na7-ns{margin:-16rem}.nl1-ns{margin-left:-.25rem}.nl2-ns{margin-left:-.5rem}.nl3-ns{margin-left:-1rem}.nl4-ns{margin-left:-2rem}.nl5-ns{margin-left:-4rem}.nl6-ns{margin-left:-8rem}.nl7-ns{margin-left:-16rem}.nr1-ns{margin-right:-.25rem}.nr2-ns{margin-right:-.5rem}.nr3-ns{margin-right:-1rem}.nr4-ns{margin-right:-2rem}.nr5-ns{margin-right:-4rem}.nr6-ns{margin-right:-8rem}.nr7-ns{margin-right:-16rem}.nb1-ns{margin-bottom:-.25rem}.nb2-ns{margin-bottom:-.5rem}.nb3-ns{margin-bottom:-1rem}.nb4-ns{margin-bottom:-2rem}.nb5-ns{margin-bottom:-4rem}.nb6-ns{margin-bottom:-8rem}.nb7-ns{margin-bottom:-16rem}.nt1-ns{margin-top:-.25rem}.nt2-ns{margin-top:-.5rem}.nt3-ns{margin-top:-1rem}.nt4-ns{margin-top:-2rem}.nt5-ns{margin-top:-4rem}.nt6-ns{margin-top:-8rem}.nt7-ns{margin-top:-16rem}.strike-ns{text-decoration:line-through}.underline-ns{text-decoration:underline}.no-underline-ns{text-decoration:none}.tl-ns{text-align:left}.tr-ns{text-align:right}.tc-ns{text-align:center}.tj-ns{text-align:justify}.ttc-ns{text-transform:capitalize}.ttl-ns{text-transform:lowercase}.ttu-ns{text-transform:uppercase}.ttn-ns{text-transform:none}.f-6-ns,.f-headline-ns{font-size:6rem}.f-5-ns,.f-subheadline-ns{font-size:5rem}.f1-ns{font-size:3rem}.f2-ns{font-size:2.25rem}.f3-ns{font-size:1.5rem}.f4-ns{font-size:1.25rem}.f5-ns{font-size:1rem}.f6-ns{font-size:.875rem}.f7-ns{font-size:.75rem}.measure-ns{max-width:30em}.measure-wide-ns{max-width:34em}.measure-narrow-ns{max-width:20em}.indent-ns{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps-ns{font-variant:small-caps}.truncate-ns{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.center-ns{margin-left:auto}.center-ns,.mr-auto-ns{margin-right:auto}.ml-auto-ns{margin-left:auto}.clip-ns{position:fixed!important;_position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.ws-normal-ns{white-space:normal}.nowrap-ns{white-space:nowrap}.pre-ns{white-space:pre}.v-base-ns{vertical-align:baseline}.v-mid-ns{vertical-align:middle}.v-top-ns{vertical-align:top}.v-btm-ns{vertical-align:bottom}}@media screen and (min-width:30em) and (max-width:60em){.aspect-ratio-m{height:0;position:relative}.aspect-ratio--16x9-m{padding-bottom:56.25%}.aspect-ratio--9x16-m{padding-bottom:177.77%}.aspect-ratio--4x3-m{padding-bottom:75%}.aspect-ratio--3x4-m{padding-bottom:133.33%}.aspect-ratio--6x4-m{padding-bottom:66.6%}.aspect-ratio--4x6-m{padding-bottom:150%}.aspect-ratio--8x5-m{padding-bottom:62.5%}.aspect-ratio--5x8-m{padding-bottom:160%}.aspect-ratio--7x5-m{padding-bottom:71.42%}.aspect-ratio--5x7-m{padding-bottom:140%}.aspect-ratio--1x1-m{padding-bottom:100%}.aspect-ratio--object-m{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:100}.cover-m{background-size:cover!important}.contain-m{background-size:contain!important}.bg-center-m{background-position:50%}.bg-center-m,.bg-top-m{background-repeat:no-repeat}.bg-top-m{background-position:top}.bg-right-m{background-position:100%}.bg-bottom-m,.bg-right-m{background-repeat:no-repeat}.bg-bottom-m{background-position:bottom}.bg-left-m{background-repeat:no-repeat;background-position:0}.outline-m{outline:1px solid}.outline-transparent-m{outline:1px solid transparent}.outline-0-m{outline:0}.ba-m{border-style:solid;border-width:1px}.bt-m{border-top-style:solid;border-top-width:1px}.br-m{border-right-style:solid;border-right-width:1px}.bb-m{border-bottom-style:solid;border-bottom-width:1px}.bl-m{border-left-style:solid;border-left-width:1px}.bn-m{border-style:none;border-width:0}.br0-m{border-radius:0}.br1-m{border-radius:.125rem}.br2-m{border-radius:.25rem}.br3-m{border-radius:.5rem}.br4-m{border-radius:1rem}.br-100-m{border-radius:100%}.br-pill-m{border-radius:9999px}.br--bottom-m{border-top-left-radius:0;border-top-right-radius:0}.br--top-m{border-bottom-right-radius:0}.br--right-m,.br--top-m{border-bottom-left-radius:0}.br--right-m{border-top-left-radius:0}.br--left-m{border-top-right-radius:0;border-bottom-right-radius:0}.br-inherit-m{border-radius:inherit}.br-initial-m{border-radius:initial}.br-unset-m{border-radius:unset}.b--dotted-m{border-style:dotted}.b--dashed-m{border-style:dashed}.b--solid-m{border-style:solid}.b--none-m{border-style:none}.bw0-m{border-width:0}.bw1-m{border-width:.125rem}.bw2-m{border-width:.25rem}.bw3-m{border-width:.5rem}.bw4-m{border-width:1rem}.bw5-m{border-width:2rem}.bt-0-m{border-top-width:0}.br-0-m{border-right-width:0}.bb-0-m{border-bottom-width:0}.bl-0-m{border-left-width:0}.shadow-1-m{box-shadow:0 0 4px 2px rgba(0,0,0,.2)}.shadow-2-m{box-shadow:0 0 8px 2px rgba(0,0,0,.2)}.shadow-3-m{box-shadow:2px 2px 4px 2px rgba(0,0,0,.2)}.shadow-4-m{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)}.shadow-5-m{box-shadow:4px 4px 8px 0 rgba(0,0,0,.2)}.top-0-m{top:0}.left-0-m{left:0}.right-0-m{right:0}.bottom-0-m{bottom:0}.top-1-m{top:1rem}.left-1-m{left:1rem}.right-1-m{right:1rem}.bottom-1-m{bottom:1rem}.top-2-m{top:2rem}.left-2-m{left:2rem}.right-2-m{right:2rem}.bottom-2-m{bottom:2rem}.top--1-m{top:-1rem}.right--1-m{right:-1rem}.bottom--1-m{bottom:-1rem}.left--1-m{left:-1rem}.top--2-m{top:-2rem}.right--2-m{right:-2rem}.bottom--2-m{bottom:-2rem}.left--2-m{left:-2rem}.absolute--fill-m{top:0;right:0;bottom:0;left:0}.cl-m{clear:left}.cr-m{clear:right}.cb-m{clear:both}.cn-m{clear:none}.dn-m{display:none}.di-m{display:inline}.db-m{display:block}.dib-m{display:inline-block}.dit-m{display:inline-table}.dt-m{display:table}.dtc-m{display:table-cell}.dt-row-m{display:table-row}.dt-row-group-m{display:table-row-group}.dt-column-m{display:table-column}.dt-column-group-m{display:table-column-group}.dt--fixed-m{table-layout:fixed;width:100%}.flex-m{display:flex}.inline-flex-m{display:inline-flex}.flex-auto-m{flex:1 1 auto;min-width:0;min-height:0}.flex-none-m{flex:none}.flex-column-m{flex-direction:column}.flex-row-m{flex-direction:row}.flex-wrap-m{flex-wrap:wrap}.flex-nowrap-m{flex-wrap:nowrap}.flex-wrap-reverse-m{flex-wrap:wrap-reverse}.flex-column-reverse-m{flex-direction:column-reverse}.flex-row-reverse-m{flex-direction:row-reverse}.items-start-m{align-items:flex-start}.items-end-m{align-items:flex-end}.items-center-m{align-items:center}.items-baseline-m{align-items:baseline}.items-stretch-m{align-items:stretch}.self-start-m{align-self:flex-start}.self-end-m{align-self:flex-end}.self-center-m{align-self:center}.self-baseline-m{align-self:baseline}.self-stretch-m{align-self:stretch}.justify-start-m{justify-content:flex-start}.justify-end-m{justify-content:flex-end}.justify-center-m{justify-content:center}.justify-between-m{justify-content:space-between}.justify-around-m{justify-content:space-around}.content-start-m{align-content:flex-start}.content-end-m{align-content:flex-end}.content-center-m{align-content:center}.content-between-m{align-content:space-between}.content-around-m{align-content:space-around}.content-stretch-m{align-content:stretch}.order-0-m{order:0}.order-1-m{order:1}.order-2-m{order:2}.order-3-m{order:3}.order-4-m{order:4}.order-5-m{order:5}.order-6-m{order:6}.order-7-m{order:7}.order-8-m{order:8}.order-last-m{order:99999}.flex-grow-0-m{flex-grow:0}.flex-grow-1-m{flex-grow:1}.flex-shrink-0-m{flex-shrink:0}.flex-shrink-1-m{flex-shrink:1}.fl-m{float:left}.fl-m,.fr-m{_display:inline}.fr-m{float:right}.fn-m{float:none}.i-m{font-style:italic}.fs-normal-m{font-style:normal}.normal-m{font-weight:400}.b-m{font-weight:700}.fw1-m{font-weight:100}.fw2-m{font-weight:200}.fw3-m{font-weight:300}.fw4-m{font-weight:400}.fw5-m{font-weight:500}.fw6-m{font-weight:600}.fw7-m{font-weight:700}.fw8-m{font-weight:800}.fw9-m{font-weight:900}.h1-m{height:1rem}.h2-m{height:2rem}.h3-m{height:4rem}.h4-m{height:8rem}.h5-m{height:16rem}.h-25-m{height:25%}.h-50-m{height:50%}.h-75-m{height:75%}.h-100-m{height:100%}.min-h-100-m{min-height:100%}.vh-25-m{height:25vh}.vh-50-m{height:50vh}.vh-75-m{height:75vh}.vh-100-m{height:100vh}.min-vh-100-m{min-height:100vh}.h-auto-m{height:auto}.h-inherit-m{height:inherit}.tracked-m{letter-spacing:.1em}.tracked-tight-m{letter-spacing:-.05em}.tracked-mega-m{letter-spacing:.25em}.lh-solid-m{line-height:1}.lh-title-m{line-height:1.25}.lh-copy-m{line-height:1.5}.mw-100-m{max-width:100%}.mw1-m{max-width:1rem}.mw2-m{max-width:2rem}.mw3-m{max-width:4rem}.mw4-m{max-width:8rem}.mw5-m{max-width:16rem}.mw6-m{max-width:32rem}.mw7-m{max-width:48rem}.mw8-m{max-width:64rem}.mw9-m{max-width:96rem}.mw-none-m{max-width:none}.w1-m{width:1rem}.w2-m{width:2rem}.w3-m{width:4rem}.w4-m{width:8rem}.w5-m{width:16rem}.w-10-m{width:10%}.w-20-m{width:20%}.w-25-m{width:25%}.w-30-m{width:30%}.w-33-m{width:33%}.w-34-m{width:34%}.w-40-m{width:40%}.w-50-m{width:50%}.w-60-m{width:60%}.w-70-m{width:70%}.w-75-m{width:75%}.w-80-m{width:80%}.w-90-m{width:90%}.w-100-m{width:100%}.w-third-m{width:33.33333%}.w-two-thirds-m{width:66.66667%}.w-auto-m{width:auto}.overflow-visible-m{overflow:visible}.overflow-hidden-m{overflow:hidden}.overflow-scroll-m{overflow:scroll}.overflow-auto-m{overflow:auto}.overflow-x-visible-m{overflow-x:visible}.overflow-x-hidden-m{overflow-x:hidden}.overflow-x-scroll-m{overflow-x:scroll}.overflow-x-auto-m{overflow-x:auto}.overflow-y-visible-m{overflow-y:visible}.overflow-y-hidden-m{overflow-y:hidden}.overflow-y-scroll-m{overflow-y:scroll}.overflow-y-auto-m{overflow-y:auto}.static-m{position:static}.relative-m{position:relative}.absolute-m{position:absolute}.fixed-m{position:fixed}.rotate-45-m{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.rotate-90-m{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.rotate-135-m{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.rotate-180-m{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rotate-225-m{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.rotate-270-m{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.rotate-315-m{-webkit-transform:rotate(315deg);transform:rotate(315deg)}.pa0-m{padding:0}.pa1-m{padding:.25rem}.pa2-m{padding:.5rem}.pa3-m{padding:1rem}.pa4-m{padding:2rem}.pa5-m{padding:4rem}.pa6-m{padding:8rem}.pa7-m{padding:16rem}.pl0-m{padding-left:0}.pl1-m{padding-left:.25rem}.pl2-m{padding-left:.5rem}.pl3-m{padding-left:1rem}.pl4-m{padding-left:2rem}.pl5-m{padding-left:4rem}.pl6-m{padding-left:8rem}.pl7-m{padding-left:16rem}.pr0-m{padding-right:0}.pr1-m{padding-right:.25rem}.pr2-m{padding-right:.5rem}.pr3-m{padding-right:1rem}.pr4-m{padding-right:2rem}.pr5-m{padding-right:4rem}.pr6-m{padding-right:8rem}.pr7-m{padding-right:16rem}.pb0-m{padding-bottom:0}.pb1-m{padding-bottom:.25rem}.pb2-m{padding-bottom:.5rem}.pb3-m{padding-bottom:1rem}.pb4-m{padding-bottom:2rem}.pb5-m{padding-bottom:4rem}.pb6-m{padding-bottom:8rem}.pb7-m{padding-bottom:16rem}.pt0-m{padding-top:0}.pt1-m{padding-top:.25rem}.pt2-m{padding-top:.5rem}.pt3-m{padding-top:1rem}.pt4-m{padding-top:2rem}.pt5-m{padding-top:4rem}.pt6-m{padding-top:8rem}.pt7-m{padding-top:16rem}.pv0-m{padding-top:0;padding-bottom:0}.pv1-m{padding-top:.25rem;padding-bottom:.25rem}.pv2-m{padding-top:.5rem;padding-bottom:.5rem}.pv3-m{padding-top:1rem;padding-bottom:1rem}.pv4-m{padding-top:2rem;padding-bottom:2rem}.pv5-m{padding-top:4rem;padding-bottom:4rem}.pv6-m{padding-top:8rem;padding-bottom:8rem}.pv7-m{padding-top:16rem;padding-bottom:16rem}.ph0-m{padding-left:0;padding-right:0}.ph1-m{padding-left:.25rem;padding-right:.25rem}.ph2-m{padding-left:.5rem;padding-right:.5rem}.ph3-m{padding-left:1rem;padding-right:1rem}.ph4-m{padding-left:2rem;padding-right:2rem}.ph5-m{padding-left:4rem;padding-right:4rem}.ph6-m{padding-left:8rem;padding-right:8rem}.ph7-m{padding-left:16rem;padding-right:16rem}.ma0-m{margin:0}.ma1-m{margin:.25rem}.ma2-m{margin:.5rem}.ma3-m{margin:1rem}.ma4-m{margin:2rem}.ma5-m{margin:4rem}.ma6-m{margin:8rem}.ma7-m{margin:16rem}.ml0-m{margin-left:0}.ml1-m{margin-left:.25rem}.ml2-m{margin-left:.5rem}.ml3-m{margin-left:1rem}.ml4-m{margin-left:2rem}.ml5-m{margin-left:4rem}.ml6-m{margin-left:8rem}.ml7-m{margin-left:16rem}.mr0-m{margin-right:0}.mr1-m{margin-right:.25rem}.mr2-m{margin-right:.5rem}.mr3-m{margin-right:1rem}.mr4-m{margin-right:2rem}.mr5-m{margin-right:4rem}.mr6-m{margin-right:8rem}.mr7-m{margin-right:16rem}.mb0-m{margin-bottom:0}.mb1-m{margin-bottom:.25rem}.mb2-m{margin-bottom:.5rem}.mb3-m{margin-bottom:1rem}.mb4-m{margin-bottom:2rem}.mb5-m{margin-bottom:4rem}.mb6-m{margin-bottom:8rem}.mb7-m{margin-bottom:16rem}.mt0-m{margin-top:0}.mt1-m{margin-top:.25rem}.mt2-m{margin-top:.5rem}.mt3-m{margin-top:1rem}.mt4-m{margin-top:2rem}.mt5-m{margin-top:4rem}.mt6-m{margin-top:8rem}.mt7-m{margin-top:16rem}.mv0-m{margin-top:0;margin-bottom:0}.mv1-m{margin-top:.25rem;margin-bottom:.25rem}.mv2-m{margin-top:.5rem;margin-bottom:.5rem}.mv3-m{margin-top:1rem;margin-bottom:1rem}.mv4-m{margin-top:2rem;margin-bottom:2rem}.mv5-m{margin-top:4rem;margin-bottom:4rem}.mv6-m{margin-top:8rem;margin-bottom:8rem}.mv7-m{margin-top:16rem;margin-bottom:16rem}.mh0-m{margin-left:0;margin-right:0}.mh1-m{margin-left:.25rem;margin-right:.25rem}.mh2-m{margin-left:.5rem;margin-right:.5rem}.mh3-m{margin-left:1rem;margin-right:1rem}.mh4-m{margin-left:2rem;margin-right:2rem}.mh5-m{margin-left:4rem;margin-right:4rem}.mh6-m{margin-left:8rem;margin-right:8rem}.mh7-m{margin-left:16rem;margin-right:16rem}.na1-m{margin:-.25rem}.na2-m{margin:-.5rem}.na3-m{margin:-1rem}.na4-m{margin:-2rem}.na5-m{margin:-4rem}.na6-m{margin:-8rem}.na7-m{margin:-16rem}.nl1-m{margin-left:-.25rem}.nl2-m{margin-left:-.5rem}.nl3-m{margin-left:-1rem}.nl4-m{margin-left:-2rem}.nl5-m{margin-left:-4rem}.nl6-m{margin-left:-8rem}.nl7-m{margin-left:-16rem}.nr1-m{margin-right:-.25rem}.nr2-m{margin-right:-.5rem}.nr3-m{margin-right:-1rem}.nr4-m{margin-right:-2rem}.nr5-m{margin-right:-4rem}.nr6-m{margin-right:-8rem}.nr7-m{margin-right:-16rem}.nb1-m{margin-bottom:-.25rem}.nb2-m{margin-bottom:-.5rem}.nb3-m{margin-bottom:-1rem}.nb4-m{margin-bottom:-2rem}.nb5-m{margin-bottom:-4rem}.nb6-m{margin-bottom:-8rem}.nb7-m{margin-bottom:-16rem}.nt1-m{margin-top:-.25rem}.nt2-m{margin-top:-.5rem}.nt3-m{margin-top:-1rem}.nt4-m{margin-top:-2rem}.nt5-m{margin-top:-4rem}.nt6-m{margin-top:-8rem}.nt7-m{margin-top:-16rem}.strike-m{text-decoration:line-through}.underline-m{text-decoration:underline}.no-underline-m{text-decoration:none}.tl-m{text-align:left}.tr-m{text-align:right}.tc-m{text-align:center}.tj-m{text-align:justify}.ttc-m{text-transform:capitalize}.ttl-m{text-transform:lowercase}.ttu-m{text-transform:uppercase}.ttn-m{text-transform:none}.f-6-m,.f-headline-m{font-size:6rem}.f-5-m,.f-subheadline-m{font-size:5rem}.f1-m{font-size:3rem}.f2-m{font-size:2.25rem}.f3-m{font-size:1.5rem}.f4-m{font-size:1.25rem}.f5-m{font-size:1rem}.f6-m{font-size:.875rem}.f7-m{font-size:.75rem}.measure-m{max-width:30em}.measure-wide-m{max-width:34em}.measure-narrow-m{max-width:20em}.indent-m{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps-m{font-variant:small-caps}.truncate-m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.center-m{margin-left:auto}.center-m,.mr-auto-m{margin-right:auto}.ml-auto-m{margin-left:auto}.clip-m{position:fixed!important;_position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.ws-normal-m{white-space:normal}.nowrap-m{white-space:nowrap}.pre-m{white-space:pre}.v-base-m{vertical-align:baseline}.v-mid-m{vertical-align:middle}.v-top-m{vertical-align:top}.v-btm-m{vertical-align:bottom}}@media screen and (min-width:60em){.aspect-ratio-l{height:0;position:relative}.aspect-ratio--16x9-l{padding-bottom:56.25%}.aspect-ratio--9x16-l{padding-bottom:177.77%}.aspect-ratio--4x3-l{padding-bottom:75%}.aspect-ratio--3x4-l{padding-bottom:133.33%}.aspect-ratio--6x4-l{padding-bottom:66.6%}.aspect-ratio--4x6-l{padding-bottom:150%}.aspect-ratio--8x5-l{padding-bottom:62.5%}.aspect-ratio--5x8-l{padding-bottom:160%}.aspect-ratio--7x5-l{padding-bottom:71.42%}.aspect-ratio--5x7-l{padding-bottom:140%}.aspect-ratio--1x1-l{padding-bottom:100%}.aspect-ratio--object-l{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:100}.cover-l{background-size:cover!important}.contain-l{background-size:contain!important}.bg-center-l{background-position:50%}.bg-center-l,.bg-top-l{background-repeat:no-repeat}.bg-top-l{background-position:top}.bg-right-l{background-position:100%}.bg-bottom-l,.bg-right-l{background-repeat:no-repeat}.bg-bottom-l{background-position:bottom}.bg-left-l{background-repeat:no-repeat;background-position:0}.outline-l{outline:1px solid}.outline-transparent-l{outline:1px solid transparent}.outline-0-l{outline:0}.ba-l{border-style:solid;border-width:1px}.bt-l{border-top-style:solid;border-top-width:1px}.br-l{border-right-style:solid;border-right-width:1px}.bb-l{border-bottom-style:solid;border-bottom-width:1px}.bl-l{border-left-style:solid;border-left-width:1px}.bn-l{border-style:none;border-width:0}.br0-l{border-radius:0}.br1-l{border-radius:.125rem}.br2-l{border-radius:.25rem}.br3-l{border-radius:.5rem}.br4-l{border-radius:1rem}.br-100-l{border-radius:100%}.br-pill-l{border-radius:9999px}.br--bottom-l{border-top-left-radius:0;border-top-right-radius:0}.br--top-l{border-bottom-right-radius:0}.br--right-l,.br--top-l{border-bottom-left-radius:0}.br--right-l{border-top-left-radius:0}.br--left-l{border-top-right-radius:0;border-bottom-right-radius:0}.br-inherit-l{border-radius:inherit}.br-initial-l{border-radius:initial}.br-unset-l{border-radius:unset}.b--dotted-l{border-style:dotted}.b--dashed-l{border-style:dashed}.b--solid-l{border-style:solid}.b--none-l{border-style:none}.bw0-l{border-width:0}.bw1-l{border-width:.125rem}.bw2-l{border-width:.25rem}.bw3-l{border-width:.5rem}.bw4-l{border-width:1rem}.bw5-l{border-width:2rem}.bt-0-l{border-top-width:0}.br-0-l{border-right-width:0}.bb-0-l{border-bottom-width:0}.bl-0-l{border-left-width:0}.shadow-1-l{box-shadow:0 0 4px 2px rgba(0,0,0,.2)}.shadow-2-l{box-shadow:0 0 8px 2px rgba(0,0,0,.2)}.shadow-3-l{box-shadow:2px 2px 4px 2px rgba(0,0,0,.2)}.shadow-4-l{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)}.shadow-5-l{box-shadow:4px 4px 8px 0 rgba(0,0,0,.2)}.top-0-l{top:0}.left-0-l{left:0}.right-0-l{right:0}.bottom-0-l{bottom:0}.top-1-l{top:1rem}.left-1-l{left:1rem}.right-1-l{right:1rem}.bottom-1-l{bottom:1rem}.top-2-l{top:2rem}.left-2-l{left:2rem}.right-2-l{right:2rem}.bottom-2-l{bottom:2rem}.top--1-l{top:-1rem}.right--1-l{right:-1rem}.bottom--1-l{bottom:-1rem}.left--1-l{left:-1rem}.top--2-l{top:-2rem}.right--2-l{right:-2rem}.bottom--2-l{bottom:-2rem}.left--2-l{left:-2rem}.absolute--fill-l{top:0;right:0;bottom:0;left:0}.cl-l{clear:left}.cr-l{clear:right}.cb-l{clear:both}.cn-l{clear:none}.dn-l{display:none}.di-l{display:inline}.db-l{display:block}.dib-l{display:inline-block}.dit-l{display:inline-table}.dt-l{display:table}.dtc-l{display:table-cell}.dt-row-l{display:table-row}.dt-row-group-l{display:table-row-group}.dt-column-l{display:table-column}.dt-column-group-l{display:table-column-group}.dt--fixed-l{table-layout:fixed;width:100%}.flex-l{display:flex}.inline-flex-l{display:inline-flex}.flex-auto-l{flex:1 1 auto;min-width:0;min-height:0}.flex-none-l{flex:none}.flex-column-l{flex-direction:column}.flex-row-l{flex-direction:row}.flex-wrap-l{flex-wrap:wrap}.flex-nowrap-l{flex-wrap:nowrap}.flex-wrap-reverse-l{flex-wrap:wrap-reverse}.flex-column-reverse-l{flex-direction:column-reverse}.flex-row-reverse-l{flex-direction:row-reverse}.items-start-l{align-items:flex-start}.items-end-l{align-items:flex-end}.items-center-l{align-items:center}.items-baseline-l{align-items:baseline}.items-stretch-l{align-items:stretch}.self-start-l{align-self:flex-start}.self-end-l{align-self:flex-end}.self-center-l{align-self:center}.self-baseline-l{align-self:baseline}.self-stretch-l{align-self:stretch}.justify-start-l{justify-content:flex-start}.justify-end-l{justify-content:flex-end}.justify-center-l{justify-content:center}.justify-between-l{justify-content:space-between}.justify-around-l{justify-content:space-around}.content-start-l{align-content:flex-start}.content-end-l{align-content:flex-end}.content-center-l{align-content:center}.content-between-l{align-content:space-between}.content-around-l{align-content:space-around}.content-stretch-l{align-content:stretch}.order-0-l{order:0}.order-1-l{order:1}.order-2-l{order:2}.order-3-l{order:3}.order-4-l{order:4}.order-5-l{order:5}.order-6-l{order:6}.order-7-l{order:7}.order-8-l{order:8}.order-last-l{order:99999}.flex-grow-0-l{flex-grow:0}.flex-grow-1-l{flex-grow:1}.flex-shrink-0-l{flex-shrink:0}.flex-shrink-1-l{flex-shrink:1}.fl-l{float:left}.fl-l,.fr-l{_display:inline}.fr-l{float:right}.fn-l{float:none}.i-l{font-style:italic}.fs-normal-l{font-style:normal}.normal-l{font-weight:400}.b-l{font-weight:700}.fw1-l{font-weight:100}.fw2-l{font-weight:200}.fw3-l{font-weight:300}.fw4-l{font-weight:400}.fw5-l{font-weight:500}.fw6-l{font-weight:600}.fw7-l{font-weight:700}.fw8-l{font-weight:800}.fw9-l{font-weight:900}.h1-l{height:1rem}.h2-l{height:2rem}.h3-l{height:4rem}.h4-l{height:8rem}.h5-l{height:16rem}.h-25-l{height:25%}.h-50-l{height:50%}.h-75-l{height:75%}.h-100-l{height:100%}.min-h-100-l{min-height:100%}.vh-25-l{height:25vh}.vh-50-l{height:50vh}.vh-75-l{height:75vh}.vh-100-l{height:100vh}.min-vh-100-l{min-height:100vh}.h-auto-l{height:auto}.h-inherit-l{height:inherit}.tracked-l{letter-spacing:.1em}.tracked-tight-l{letter-spacing:-.05em}.tracked-mega-l{letter-spacing:.25em}.lh-solid-l{line-height:1}.lh-title-l{line-height:1.25}.lh-copy-l{line-height:1.5}.mw-100-l{max-width:100%}.mw1-l{max-width:1rem}.mw2-l{max-width:2rem}.mw3-l{max-width:4rem}.mw4-l{max-width:8rem}.mw5-l{max-width:16rem}.mw6-l{max-width:32rem}.mw7-l{max-width:48rem}.mw8-l{max-width:64rem}.mw9-l{max-width:96rem}.mw-none-l{max-width:none}.w1-l{width:1rem}.w2-l{width:2rem}.w3-l{width:4rem}.w4-l{width:8rem}.w5-l{width:16rem}.w-10-l{width:10%}.w-20-l{width:20%}.w-25-l{width:25%}.w-30-l{width:30%}.w-33-l{width:33%}.w-34-l{width:34%}.w-40-l{width:40%}.w-50-l{width:50%}.w-60-l{width:60%}.w-70-l{width:70%}.w-75-l{width:75%}.w-80-l{width:80%}.w-90-l{width:90%}.w-100-l{width:100%}.w-third-l{width:33.33333%}.w-two-thirds-l{width:66.66667%}.w-auto-l{width:auto}.overflow-visible-l{overflow:visible}.overflow-hidden-l{overflow:hidden}.overflow-scroll-l{overflow:scroll}.overflow-auto-l{overflow:auto}.overflow-x-visible-l{overflow-x:visible}.overflow-x-hidden-l{overflow-x:hidden}.overflow-x-scroll-l{overflow-x:scroll}.overflow-x-auto-l{overflow-x:auto}.overflow-y-visible-l{overflow-y:visible}.overflow-y-hidden-l{overflow-y:hidden}.overflow-y-scroll-l{overflow-y:scroll}.overflow-y-auto-l{overflow-y:auto}.static-l{position:static}.relative-l{position:relative}.absolute-l{position:absolute}.fixed-l{position:fixed}.rotate-45-l{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.rotate-90-l{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.rotate-135-l{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.rotate-180-l{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rotate-225-l{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.rotate-270-l{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.rotate-315-l{-webkit-transform:rotate(315deg);transform:rotate(315deg)}.pa0-l{padding:0}.pa1-l{padding:.25rem}.pa2-l{padding:.5rem}.pa3-l{padding:1rem}.pa4-l{padding:2rem}.pa5-l{padding:4rem}.pa6-l{padding:8rem}.pa7-l{padding:16rem}.pl0-l{padding-left:0}.pl1-l{padding-left:.25rem}.pl2-l{padding-left:.5rem}.pl3-l{padding-left:1rem}.pl4-l{padding-left:2rem}.pl5-l{padding-left:4rem}.pl6-l{padding-left:8rem}.pl7-l{padding-left:16rem}.pr0-l{padding-right:0}.pr1-l{padding-right:.25rem}.pr2-l{padding-right:.5rem}.pr3-l{padding-right:1rem}.pr4-l{padding-right:2rem}.pr5-l{padding-right:4rem}.pr6-l{padding-right:8rem}.pr7-l{padding-right:16rem}.pb0-l{padding-bottom:0}.pb1-l{padding-bottom:.25rem}.pb2-l{padding-bottom:.5rem}.pb3-l{padding-bottom:1rem}.pb4-l{padding-bottom:2rem}.pb5-l{padding-bottom:4rem}.pb6-l{padding-bottom:8rem}.pb7-l{padding-bottom:16rem}.pt0-l{padding-top:0}.pt1-l{padding-top:.25rem}.pt2-l{padding-top:.5rem}.pt3-l{padding-top:1rem}.pt4-l{padding-top:2rem}.pt5-l{padding-top:4rem}.pt6-l{padding-top:8rem}.pt7-l{padding-top:16rem}.pv0-l{padding-top:0;padding-bottom:0}.pv1-l{padding-top:.25rem;padding-bottom:.25rem}.pv2-l{padding-top:.5rem;padding-bottom:.5rem}.pv3-l{padding-top:1rem;padding-bottom:1rem}.pv4-l{padding-top:2rem;padding-bottom:2rem}.pv5-l{padding-top:4rem;padding-bottom:4rem}.pv6-l{padding-top:8rem;padding-bottom:8rem}.pv7-l{padding-top:16rem;padding-bottom:16rem}.ph0-l{padding-left:0;padding-right:0}.ph1-l{padding-left:.25rem;padding-right:.25rem}.ph2-l{padding-left:.5rem;padding-right:.5rem}.ph3-l{padding-left:1rem;padding-right:1rem}.ph4-l{padding-left:2rem;padding-right:2rem}.ph5-l{padding-left:4rem;padding-right:4rem}.ph6-l{padding-left:8rem;padding-right:8rem}.ph7-l{padding-left:16rem;padding-right:16rem}.ma0-l{margin:0}.ma1-l{margin:.25rem}.ma2-l{margin:.5rem}.ma3-l{margin:1rem}.ma4-l{margin:2rem}.ma5-l{margin:4rem}.ma6-l{margin:8rem}.ma7-l{margin:16rem}.ml0-l{margin-left:0}.ml1-l{margin-left:.25rem}.ml2-l{margin-left:.5rem}.ml3-l{margin-left:1rem}.ml4-l{margin-left:2rem}.ml5-l{margin-left:4rem}.ml6-l{margin-left:8rem}.ml7-l{margin-left:16rem}.mr0-l{margin-right:0}.mr1-l{margin-right:.25rem}.mr2-l{margin-right:.5rem}.mr3-l{margin-right:1rem}.mr4-l{margin-right:2rem}.mr5-l{margin-right:4rem}.mr6-l{margin-right:8rem}.mr7-l{margin-right:16rem}.mb0-l{margin-bottom:0}.mb1-l{margin-bottom:.25rem}.mb2-l{margin-bottom:.5rem}.mb3-l{margin-bottom:1rem}.mb4-l{margin-bottom:2rem}.mb5-l{margin-bottom:4rem}.mb6-l{margin-bottom:8rem}.mb7-l{margin-bottom:16rem}.mt0-l{margin-top:0}.mt1-l{margin-top:.25rem}.mt2-l{margin-top:.5rem}.mt3-l{margin-top:1rem}.mt4-l{margin-top:2rem}.mt5-l{margin-top:4rem}.mt6-l{margin-top:8rem}.mt7-l{margin-top:16rem}.mv0-l{margin-top:0;margin-bottom:0}.mv1-l{margin-top:.25rem;margin-bottom:.25rem}.mv2-l{margin-top:.5rem;margin-bottom:.5rem}.mv3-l{margin-top:1rem;margin-bottom:1rem}.mv4-l{margin-top:2rem;margin-bottom:2rem}.mv5-l{margin-top:4rem;margin-bottom:4rem}.mv6-l{margin-top:8rem;margin-bottom:8rem}.mv7-l{margin-top:16rem;margin-bottom:16rem}.mh0-l{margin-left:0;margin-right:0}.mh1-l{margin-left:.25rem;margin-right:.25rem}.mh2-l{margin-left:.5rem;margin-right:.5rem}.mh3-l{margin-left:1rem;margin-right:1rem}.mh4-l{margin-left:2rem;margin-right:2rem}.mh5-l{margin-left:4rem;margin-right:4rem}.mh6-l{margin-left:8rem;margin-right:8rem}.mh7-l{margin-left:16rem;margin-right:16rem}.na1-l{margin:-.25rem}.na2-l{margin:-.5rem}.na3-l{margin:-1rem}.na4-l{margin:-2rem}.na5-l{margin:-4rem}.na6-l{margin:-8rem}.na7-l{margin:-16rem}.nl1-l{margin-left:-.25rem}.nl2-l{margin-left:-.5rem}.nl3-l{margin-left:-1rem}.nl4-l{margin-left:-2rem}.nl5-l{margin-left:-4rem}.nl6-l{margin-left:-8rem}.nl7-l{margin-left:-16rem}.nr1-l{margin-right:-.25rem}.nr2-l{margin-right:-.5rem}.nr3-l{margin-right:-1rem}.nr4-l{margin-right:-2rem}.nr5-l{margin-right:-4rem}.nr6-l{margin-right:-8rem}.nr7-l{margin-right:-16rem}.nb1-l{margin-bottom:-.25rem}.nb2-l{margin-bottom:-.5rem}.nb3-l{margin-bottom:-1rem}.nb4-l{margin-bottom:-2rem}.nb5-l{margin-bottom:-4rem}.nb6-l{margin-bottom:-8rem}.nb7-l{margin-bottom:-16rem}.nt1-l{margin-top:-.25rem}.nt2-l{margin-top:-.5rem}.nt3-l{margin-top:-1rem}.nt4-l{margin-top:-2rem}.nt5-l{margin-top:-4rem}.nt6-l{margin-top:-8rem}.nt7-l{margin-top:-16rem}.strike-l{text-decoration:line-through}.underline-l{text-decoration:underline}.no-underline-l{text-decoration:none}.tl-l{text-align:left}.tr-l{text-align:right}.tc-l{text-align:center}.tj-l{text-align:justify}.ttc-l{text-transform:capitalize}.ttl-l{text-transform:lowercase}.ttu-l{text-transform:uppercase}.ttn-l{text-transform:none}.f-6-l,.f-headline-l{font-size:6rem}.f-5-l,.f-subheadline-l{font-size:5rem}.f1-l{font-size:3rem}.f2-l{font-size:2.25rem}.f3-l{font-size:1.5rem}.f4-l{font-size:1.25rem}.f5-l{font-size:1rem}.f6-l{font-size:.875rem}.f7-l{font-size:.75rem}.measure-l{max-width:30em}.measure-wide-l{max-width:34em}.measure-narrow-l{max-width:20em}.indent-l{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps-l{font-variant:small-caps}.truncate-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.center-l{margin-left:auto}.center-l,.mr-auto-l{margin-right:auto}.ml-auto-l{margin-left:auto}.clip-l{position:fixed!important;_position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.ws-normal-l{white-space:normal}.nowrap-l{white-space:nowrap}.pre-l{white-space:pre}.v-base-l{vertical-align:baseline}.v-mid-l{vertical-align:middle}.v-top-l{vertical-align:top}.v-btm-l{vertical-align:bottom}} diff --git a/index.html b/index.html index 21b3a87f1..f9914d633 100644 --- a/index.html +++ b/index.html @@ -6,433 +6,12 @@ - - + + - - + - -
- Tachyons - -
-
-
-
-

An inline notification that can be centered or not

Learn more
-

The fastest and lightest way to style the web

-

- Start building with Tachyons today. Use one of many off the shelf themes or bring your own variables to the party. -

- -
-
-
- - -
-

Card title example

-

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -

-
- - - -
-

Card title example

-

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -

-
- - - - -
-

Card title example

-

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -

-
- -
-
-
-
A definition term
-
Description
-
-
-
GitHub Stars
-
11.4k+
-
-
-
File Size
-
24kb
-
-
-
Amazing Colors
-
144
-
-
-
Configurability
-
100%
-
-
-
Possible designs
-
Inifinite
-
-
-
-

An alert banner for a new feature or notification

Learn more
-
-
-
-
-

This is a banner title

-

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. -

-
- Click here -
-
-
-

This is a banner title

-

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. -

-
- Click here -
-
-
-

This is a banner title

-

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. -

-
- Click here -
-
-
-
-

CSS Variables are the future

-

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. -

-
- Click here - Learn more → -
-
-
-
-
-
- -
-
-

A large section panel title

-

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -

-
- Click here - Learn more → -
-
-
-
-
-
-
- - - -
-
- - -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

Aa

-

Aa

-

Aa

-

Aa

-

Aa

-

Aa

-

Aa

-

Aa

-

Aa

-

Aa

-

Aa

-
diff --git a/package.json b/package.json index 152995255..ac025637c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tachyons", - "version": "5.0.0-beta.0", + "version": "4.12.0", "description": "Functional CSS for humans", "author": "mrmrs", "style": "css/tachyons.min.css", @@ -11,46 +11,39 @@ ], "repository": "tachyons-css/tachyons", "keywords": [ - "UI", - "UI design", "css", "oocss", "postcss", "functional css", - "utility css", "design", "responsive", "performance" ], "license": "MIT", "devDependencies": { - "brotli-size": "^4.0.0", "copy-files": "^0.1.0", "immutable-css-cli": "^1.1.1", - "normalize.css": "^8.0.1", - "tachyons-cli": "^1.3.3", + "normalize.css": "^8.0.0", "tachyons-modules": "^1.1.10", + "tachyons-cli": "^1.3.2", "watch": "^1.0.2" }, "contributors": [ { - "name": "Adam Morse", - "url": "https://mrmrs.cc" + "name": "adam morse", + "email": "hi@mrmrs.cc" }, { - "name": "John Otander", - "url": "https://johnotander.com" + "name": "john otander", + "url": "http://johnotander.com" } ], "scripts": { "start": "npm run build:watch", "mutations": "immutable-css src/tachyons.css --strict", - "build": "npm run build:css && npm run build:minify && brotli-size css/tachyons.min.css", - "build:css": "tachyons src/tachyons.css --preserveVariables > css/tachyons.css", - "build:minify": "tachyons src/tachyons.css --minify --preserveVariables > css/tachyons.min.css", + "build": "npm run build:css && npm run build:minify", + "build:css": "tachyons src/tachyons.css > css/tachyons.css", + "build:minify": "tachyons src/tachyons.css --minify > css/tachyons.min.css", "build:watch": "watch \"npm run build\" ./src/" - }, - "dependencies": { - "gzip-size": "^7.0.0" } } diff --git a/src/_align-content.css b/src/_align-content.css deleted file mode 100644 index f92bf03dc..000000000 --- a/src/_align-content.css +++ /dev/null @@ -1,44 +0,0 @@ -/* - - ALIGN-CONTENT - - Media Query Extensions: - -s = small - -m = medium - -l = large - - MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content - -*/ - -.content-start { align-content: flex-start; } -.content-end { align-content: flex-end; } -.content-center { align-content: center; } -.content-between { align-content: space-between; } -.content-around { align-content: space-around; } -.content-stretch { align-content: stretch; } - -@container (min-width:30em) { - .content-start-s { align-content: flex-start; } - .content-end-s { align-content: flex-end; } - .content-center-s { align-content: center; } - .content-between-s { align-content: space-between; } - .content-around-s { align-content: space-around; } - .content-stretch-s { align-content: stretch; } -} -@container (min-width:48em) { - .content-start-m { align-content: flex-start; } - .content-end-m { align-content: flex-end; } - .content-center-m { align-content: center; } - .content-between-m { align-content: space-between; } - .content-around-m { align-content: space-around; } - .content-stretch-m { align-content: stretch; } -} -@container (min-width:64em) { - .content-start-l { align-content: flex-start; } - .content-end-l { align-content: flex-end; } - .content-center-l { align-content: center; } - .content-between-l { align-content: space-between; } - .content-around-l { align-content: space-around; } - .content-stretch-l { align-content: stretch; } -} diff --git a/src/_align-items.css b/src/_align-items.css deleted file mode 100644 index 6f3f6e838..000000000 --- a/src/_align-items.css +++ /dev/null @@ -1,40 +0,0 @@ -/* - - ALIGN-ITEMS - - Media Query Extensions: - -s = small - -m = medium - -l = large - -*/ - -.items-start { align-items: flex-start; } -.items-end { align-items: flex-end; } -.items-center { align-items: center; } -.items-baseline { align-items: baseline; } -.items-stretch { align-items: stretch; } - -@container (min-width:30em) { - .items-start-s { align-items: flex-start; } - .items-end-s { align-items: flex-end; } - .items-center-s { align-items: center; } - .items-baseline-s { align-items: baseline; } - .items-stretch-s { align-items: stretch; } -} - -@container (min-width:48em) { - .items-start-m { align-items: flex-start; } - .items-end-m { align-items: flex-end; } - .items-center-m { align-items: center; } - .items-baseline-m { align-items: baseline; } - .items-stretch-m { align-items: stretch; } -} - -@container (min-width:64em) { - .items-start-l { align-items: flex-start; } - .items-end-l { align-items: flex-end; } - .items-center-l { align-items: center; } - .items-baseline-l { align-items: baseline; } - .items-stretch-l { align-items: stretch; } -} diff --git a/src/_align-self.css b/src/_align-self.css deleted file mode 100644 index 4c01d3744..000000000 --- a/src/_align-self.css +++ /dev/null @@ -1,41 +0,0 @@ -/* - - ALIGN-SELF - - Media Query Extensions: - -s = small - -m = medium - -l = large - -*/ - -.self-start { align-self: flex-start; } -.self-end { align-self: flex-end; } -.self-center { align-self: center; } -.self-baseline { align-self: baseline; } -.self-stretch { align-self: stretch; } - -@container (min-width:30em) { - .self-start-s { align-self: flex-start; } - .self-end-s { align-self: flex-end; } - .self-center-s { align-self: center; } - .self-baseline-s { align-self: baseline; } - .self-stretch-s { align-self: stretch; } -} - -@container (min-width:48em) { - .self-start-m { align-self: flex-start; } - .self-end-m { align-self: flex-end; } - .self-center-m { align-self: center; } - .self-baseline-m { align-self: baseline; } - .self-stretch-m { align-self: stretch; } - -} - -@container (min-width:64em) { - .self-start-l { align-self: flex-start; } - .self-end-l { align-self: flex-end; } - .self-center-l { align-self: center; } - .self-baseline-l { align-self: baseline; } - .self-stretch-l { align-self: stretch; } -} diff --git a/src/_all.css b/src/_all.css deleted file mode 100644 index 7756409e1..000000000 --- a/src/_all.css +++ /dev/null @@ -1,12 +0,0 @@ -/* - - ALL - - MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/all - -*/ - -.unset { all: unset; } -.initial { all: initial; } -.inherit { all: inherit; } -.revert { all: revert; } diff --git a/src/_aspect-ratios.css b/src/_aspect-ratios.css index 0273fe5c2..1ee67e1d9 100644 --- a/src/_aspect-ratios.css +++ b/src/_aspect-ratios.css @@ -1,86 +1,135 @@ /* ASPECT RATIOS - MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio */ +/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc. + * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e + * Make sure there are no height and width attributes on the embedded media. + * Adapted from: https://github.com/suitcss/components-flex-embed + * + * Example: + * + *
+ * + *
+ * + * */ + +.aspect-ratio { + height: 0; + position: relative; +} -.aspect-ratio-16x9 { aspect-ratio: 16 / 9; } -.aspect-ratio-9x16 { aspect-ratio: 9 / 16; } - -.aspect-ratio-4x3 { aspect-ratio: 4 / 3; } -.aspect-ratio-3x4 { aspect-ratio: 3 / 4; } - -.aspect-ratio-6x4 { aspect-ratio: 6 / 4; } -.aspect-ratio-4x6 { aspect-ratio: 4 / 6; } - -.aspect-ratio-8x5 { aspect-ratio: 8 / 5; } -.aspect-ratio-5x8 { aspect-ratio: 5 / 8; } - -.aspect-ratio-7x5 { aspect-ratio: 7 / 5; } -.aspect-ratio-5x7 { aspect-ratio: 5 / 7; } - -.aspect-ratio-square, -.aspect-ratio-1x1 { aspect-ratio: 1 / 1; } - +.aspect-ratio--16x9 { padding-bottom: 56.25%; } +.aspect-ratio--9x16 { padding-bottom: 177.77%; } -@container (min-width:30em){ - .aspect-ratio-16x9-s { aspect-ratio: 16 / 9; } - .aspect-ratio-9x16-s { aspect-ratio: 9 / 16; } +.aspect-ratio--4x3 { padding-bottom: 75%; } +.aspect-ratio--3x4 { padding-bottom: 133.33%; } - .aspect-ratio-4x3-s { aspect-ratio: 4 / 3; } - .aspect-ratio-3x4-s { aspect-ratio: 3 / 4; } +.aspect-ratio--6x4 { padding-bottom: 66.6%; } +.aspect-ratio--4x6 { padding-bottom: 150%; } - .aspect-ratio-6x4-s { aspect-ratio: 6 / 4; } - .aspect-ratio-4x6-s { aspect-ratio: 4 / 6; } +.aspect-ratio--8x5 { padding-bottom: 62.5%; } +.aspect-ratio--5x8 { padding-bottom: 160%; } - .aspect-ratio-8x5-s { aspect-ratio: 8 / 5; } - .aspect-ratio-5x8-s { aspect-ratio: 5 / 8; } +.aspect-ratio--7x5 { padding-bottom: 71.42%; } +.aspect-ratio--5x7 { padding-bottom: 140%; } - .aspect-ratio-7x5-s { aspect-ratio: 7 / 5; } - .aspect-ratio-5x7-s { aspect-ratio: 5 / 7; } +.aspect-ratio--1x1 { padding-bottom: 100%; } - .aspect-ratio-square-s, - .aspect-ratio-1x1-s { aspect-ratio: 1 / 1; } +.aspect-ratio--object { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; } -@container (min-width:48em){ - .aspect-ratio-16x9-m { aspect-ratio: 16 / 9; } - .aspect-ratio-9x16-m { aspect-ratio: 9 / 16; } - - .aspect-ratio-4x3-m { aspect-ratio: 4 / 3; } - .aspect-ratio-3x4-m { aspect-ratio: 3 / 4; } - - .aspect-ratio-6x4-m { aspect-ratio: 6 / 4; } - .aspect-ratio-4x6-m { aspect-ratio: 4 / 6; } - - .aspect-ratio-8x5-m { aspect-ratio: 8 / 5; } - .aspect-ratio-5x8-m { aspect-ratio: 5 / 8; } - - .aspect-ratio-7x5-m { aspect-ratio: 7 / 5; } - .aspect-ratio-5x7-m { aspect-ratio: 5 / 7; } - - .aspect-ratio-square-m, - .aspect-ratio-1x1-m { aspect-ratio: 1 / 1; } +@media (--breakpoint-not-small){ + .aspect-ratio-ns { + height: 0; + position: relative; + } + .aspect-ratio--16x9-ns { padding-bottom: 56.25%; } + .aspect-ratio--9x16-ns { padding-bottom: 177.77%; } + .aspect-ratio--4x3-ns { padding-bottom: 75%; } + .aspect-ratio--3x4-ns { padding-bottom: 133.33%; } + .aspect-ratio--6x4-ns { padding-bottom: 66.6%; } + .aspect-ratio--4x6-ns { padding-bottom: 150%; } + .aspect-ratio--8x5-ns { padding-bottom: 62.5%; } + .aspect-ratio--5x8-ns { padding-bottom: 160%; } + .aspect-ratio--7x5-ns { padding-bottom: 71.42%; } + .aspect-ratio--5x7-ns { padding-bottom: 140%; } + .aspect-ratio--1x1-ns { padding-bottom: 100%; } + .aspect-ratio--object-ns { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + } } -@container (min-width:64em){ - .aspect-ratio-16x9-l { aspect-ratio: 16 / 9; } - .aspect-ratio-9x16-l { aspect-ratio: 9 / 16; } - - .aspect-ratio-4x3-l { aspect-ratio: 4 / 3; } - .aspect-ratio-3x4-l { aspect-ratio: 3 / 4; } - - .aspect-ratio-6x4-l { aspect-ratio: 6 / 4; } - .aspect-ratio-4x6-l { aspect-ratio: 4 / 6; } - - .aspect-ratio-8x5-l { aspect-ratio: 8 / 5; } - .aspect-ratio-5x8-l { aspect-ratio: 5 / 8; } - - .aspect-ratio-7x5-l { aspect-ratio: 7 / 5; } - .aspect-ratio-5x7-l { aspect-ratio: 5 / 7; } +@media (--breakpoint-medium){ + .aspect-ratio-m { + height: 0; + position: relative; + } + .aspect-ratio--16x9-m { padding-bottom: 56.25%; } + .aspect-ratio--9x16-m { padding-bottom: 177.77%; } + .aspect-ratio--4x3-m { padding-bottom: 75%; } + .aspect-ratio--3x4-m { padding-bottom: 133.33%; } + .aspect-ratio--6x4-m { padding-bottom: 66.6%; } + .aspect-ratio--4x6-m { padding-bottom: 150%; } + .aspect-ratio--8x5-m { padding-bottom: 62.5%; } + .aspect-ratio--5x8-m { padding-bottom: 160%; } + .aspect-ratio--7x5-m { padding-bottom: 71.42%; } + .aspect-ratio--5x7-m { padding-bottom: 140%; } + .aspect-ratio--1x1-m { padding-bottom: 100%; } + .aspect-ratio--object-m { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + } +} - .aspect-ratio-square-l, - .aspect-ratio-1x1-l { aspect-ratio: 1 / 1; } +@media (--breakpoint-large){ + .aspect-ratio-l { + height: 0; + position: relative; + } + .aspect-ratio--16x9-l { padding-bottom: 56.25%; } + .aspect-ratio--9x16-l { padding-bottom: 177.77%; } + .aspect-ratio--4x3-l { padding-bottom: 75%; } + .aspect-ratio--3x4-l { padding-bottom: 133.33%; } + .aspect-ratio--6x4-l { padding-bottom: 66.6%; } + .aspect-ratio--4x6-l { padding-bottom: 150%; } + .aspect-ratio--8x5-l { padding-bottom: 62.5%; } + .aspect-ratio--5x8-l { padding-bottom: 160%; } + .aspect-ratio--7x5-l { padding-bottom: 71.42%; } + .aspect-ratio--5x7-l { padding-bottom: 140%; } + .aspect-ratio--1x1-l { padding-bottom: 100%; } + .aspect-ratio--object-l { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + } } diff --git a/src/_backdrop-filters.css b/src/_backdrop-filters.css deleted file mode 100644 index 3ee2fb733..000000000 --- a/src/_backdrop-filters.css +++ /dev/null @@ -1,76 +0,0 @@ -/* - - BACKDROP-FILTER EFFECTS - - - Blur - - Grayscale - - Hue Rotate - - Invert - - INTERACTIONS - - Hover - - Focus - -*/ - -.filter-none { filter: none; } - -.blur1 { filter: blur(4px); } -.blur2 { filter: blur(16px); } -.blur3 { filter: blur(96px); } - -.grayscale1 { filter: grayscale(0); } -.grayscale2 { filter: grayscale(50%); } -.grayscale3 { filter: grayscale(100%); } - -.hue-rotate0 { filter: hue-rotate(0deg);} -.hue-rotate1 { filter: hue-rotate(45deg);} -.hue-rotate2 { filter: hue-rotate(90deg);} -.hue-rotate3 { filter: hue-rotate(135deg);} -.hue-rotate4 { filter: hue-rotate(180deg);} -.hue-rotate5 { filter: hue-rotate(225deg);} -.hue-rotate6 { filter: hue-rotate(270deg);} -.hue-rotate7 { filter: hue-rotate(315deg);} - -.invert { filter: invert(100%); } - -/* TODO: Add drop-shadow */ - -.filter-none-hover:hover { filter: none; } - -.blur1-hover:hover { filter: blur(4px); } -.blur2-hover:hover { filter: blur(16px); } -.blur3-hover:hover { filter: blur(96px); } - -.grayscale1-hover:hover { filter: grayscale(0); } -.grayscale2-hover:hover { filter: grayscale(50%); } -.grayscale3-hover:hover { filter: grayscale(100%); } - -.hue-rotate0-hover:hover { filter: hue-rotate(0deg);} -.hue-rotate1-hover:hover { filter: hue-rotate(45deg);} -.hue-rotate2-hover:hover { filter: hue-rotate(90deg);} -.hue-rotate3-hover:hover { filter: hue-rotate(135deg);} -.hue-rotate4-hover:hover { filter: hue-rotate(180deg);} -.hue-rotate5-hover:hover { filter: hue-rotate(225deg);} -.hue-rotate6-hover:hover { filter: hue-rotate(270deg);} -.hue-rotate7-hover:hover { filter: hue-rotate(315deg);} - -.invert-hover:hover { filter: invert(100%); } - -.blur1-focus:focus { filter: blur(4px); } -.blur2-focus:focus { filter: blur(16px); } -.blur3-focus:focus { filter: blur(96px); } - -.grayscale1-focus:focus { filter: grayscale(0); } -.grayscale2-focus:focus { filter: grayscale(50%); } -.grayscale3-focus:focus { filter: grayscale(100%); } - -.hue-rotate0-focus:focus { filter: hue-rotate(0deg);} -.hue-rotate1-focus:focus { filter: hue-rotate(45deg);} -.hue-rotate2-focus:focus { filter: hue-rotate(90deg);} -.hue-rotate3-focus:focus { filter: hue-rotate(135deg);} -.hue-rotate4-focus:focus { filter: hue-rotate(180deg);} -.hue-rotate5-focus:focus { filter: hue-rotate(225deg);} -.hue-rotate6-focus:focus { filter: hue-rotate(270deg);} -.hue-rotate7-focus:focus { filter: hue-rotate(315deg);} - -.invert-focus:focus { filter: invert(100%); } diff --git a/src/_background-position.css b/src/_background-position.css index a656019c3..4d850b6a5 100644 --- a/src/_background-position.css +++ b/src/_background-position.css @@ -13,7 +13,7 @@ -left = center left Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -44,34 +44,34 @@ background-position: center left; } -@container (min-width:30em) { - .bg-center-s { +@media (--breakpoint-not-small) { + .bg-center-ns { background-repeat: no-repeat; background-position: center center; } - .bg-top-s { + .bg-top-ns { background-repeat: no-repeat; background-position: top center; } - .bg-right-s { + .bg-right-ns { background-repeat: no-repeat; background-position: center right; } - .bg-bottom-s { + .bg-bottom-ns { background-repeat: no-repeat; background-position: bottom center; } - .bg-left-s { + .bg-left-ns { background-repeat: no-repeat; background-position: center left; } } -@container (min-width:48em) { +@media (--breakpoint-medium) { .bg-center-m { background-repeat: no-repeat; background-position: center center; @@ -98,7 +98,7 @@ } } -@container (min-width:64em) { +@media (--breakpoint-large) { .bg-center-l { background-repeat: no-repeat; background-position: center center; diff --git a/src/_background-size.css b/src/_background-size.css index e2492cbe0..18afe5c7c 100644 --- a/src/_background-size.css +++ b/src/_background-size.css @@ -4,7 +4,7 @@ Docs: http://tachyons.io/docs/themes/background-size/ Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -15,52 +15,20 @@ on an html element. */ - .cover { background-size: cover!important; } + .cover { background-size: cover!important; } .contain { background-size: contain!important; } - .bg1 { background-size: 4px; } - .bg2 { background-size: 8px; } - .bg3 { background-size: 16px; } - .bg4 { background-size: 32px; } - .bg5 { background-size: 64px; } - .bg6 { background-size: 100%; } - .bg7 { background-size: 150%; } - .bg8 { background-size: 200%; } -@container (min-width:30em) { - .cover-s { background-size: cover!important; } - .contain-s { background-size: contain!important; } - .bg1-s { background-size: 4px; } - .bg2-s { background-size: 8px; } - .bg3-s { background-size: 16px; } - .bg4-s { background-size: 32px; } - .bg5-s { background-size: 64px; } - .bg6-s { background-size: 100%; } - .bg7-s { background-size: 150%; } - .bg8-s { background-size: 200%; } +@media (--breakpoint-not-small) { + .cover-ns { background-size: cover!important; } + .contain-ns { background-size: contain!important; } } -@container (min-width:48em) { +@media (--breakpoint-medium) { .cover-m { background-size: cover!important; } .contain-m { background-size: contain!important; } - .bg1-m { background-size: 4px; } - .bg2-m { background-size: 8px; } - .bg3-m { background-size: 16px; } - .bg4-m { background-size: 32px; } - .bg5-m { background-size: 64px; } - .bg6-m { background-size: 100%; } - .bg7-m { background-size: 150%; } - .bg8-m { background-size: 200%; } } -@container (min-width:64em) { +@media (--breakpoint-large) { .cover-l { background-size: cover!important; } .contain-l { background-size: contain!important; } - .bg1-l { background-size: 4px; } - .bg2-l { background-size: 8px; } - .bg3-l { background-size: 16px; } - .bg4-l { background-size: 32px; } - .bg5-l { background-size: 64px; } - .bg6-l { background-size: 100%; } - .bg7-l { background-size: 150%; } - .bg8-l { background-size: 200%; } } diff --git a/src/_border-colors.css b/src/_border-colors.css index 307c72ea2..dc1577d22 100644 --- a/src/_border-colors.css +++ b/src/_border-colors.css @@ -18,11 +18,71 @@ */ -.b--color { border-color: var(--border-color, gray); } -.b--light { border-color: var(--overlay-tint-2, gray); } -.b--dark { border-color: var(--overlay-shadow-9, gray); } -.b--transparent { border-color: transparent; } -.b--current { border-color: currentColor; } +.b--black { border-color: var(--black); } +.b--near-black { border-color: var(--near-black); } +.b--dark-gray { border-color: var(--dark-gray); } +.b--mid-gray { border-color: var(--mid-gray); } +.b--gray { border-color: var(--gray); } +.b--silver { border-color: var(--silver); } +.b--light-silver { border-color: var(--light-silver); } +.b--moon-gray { border-color: var(--moon-gray); } +.b--light-gray { border-color: var(--light-gray); } +.b--near-white { border-color: var(--near-white); } +.b--white { border-color: var(--white); } + +.b--white-90 { border-color: var(--white-90); } +.b--white-80 { border-color: var(--white-80); } +.b--white-70 { border-color: var(--white-70); } +.b--white-60 { border-color: var(--white-60); } +.b--white-50 { border-color: var(--white-50); } +.b--white-40 { border-color: var(--white-40); } +.b--white-30 { border-color: var(--white-30); } +.b--white-20 { border-color: var(--white-20); } +.b--white-10 { border-color: var(--white-10); } +.b--white-05 { border-color: var(--white-05); } +.b--white-025 { border-color: var(--white-025); } +.b--white-0125 { border-color: var(--white-0125); } + +.b--black-90 { border-color: var(--black-90); } +.b--black-80 { border-color: var(--black-80); } +.b--black-70 { border-color: var(--black-70); } +.b--black-60 { border-color: var(--black-60); } +.b--black-50 { border-color: var(--black-50); } +.b--black-40 { border-color: var(--black-40); } +.b--black-30 { border-color: var(--black-30); } +.b--black-20 { border-color: var(--black-20); } +.b--black-10 { border-color: var(--black-10); } +.b--black-05 { border-color: var(--black-05); } +.b--black-025 { border-color: var(--black-025); } +.b--black-0125 { border-color: var(--black-0125); } + +.b--dark-red { border-color: var(--dark-red); } +.b--red { border-color: var(--red); } +.b--light-red { border-color: var(--light-red); } +.b--orange { border-color: var(--orange); } +.b--gold { border-color: var(--gold); } +.b--yellow { border-color: var(--yellow); } +.b--light-yellow { border-color: var(--light-yellow); } +.b--purple { border-color: var(--purple); } +.b--light-purple { border-color: var(--light-purple); } +.b--dark-pink { border-color: var(--dark-pink); } +.b--hot-pink { border-color: var(--hot-pink); } +.b--pink { border-color: var(--pink); } +.b--light-pink { border-color: var(--light-pink); } +.b--dark-green { border-color: var(--dark-green); } +.b--green { border-color: var(--green); } +.b--light-green { border-color: var(--light-green); } +.b--navy { border-color: var(--navy); } +.b--dark-blue { border-color: var(--dark-blue); } +.b--blue { border-color: var(--blue); } +.b--light-blue { border-color: var(--light-blue); } +.b--lightest-blue { border-color: var(--lightest-blue); } +.b--washed-blue { border-color: var(--washed-blue); } +.b--washed-green { border-color: var(--washed-green); } +.b--washed-yellow { border-color: var(--washed-yellow); } +.b--washed-red { border-color: var(--washed-red); } + +.b--transparent { border-color: var(--transparent); } .b--inherit { border-color: inherit; } .b--initial { border-color: initial; } .b--unset { border-color: unset; } diff --git a/src/_border-radius.css b/src/_border-radius.css index 7df6fc070..da39b9919 100644 --- a/src/_border-radius.css +++ b/src/_border-radius.css @@ -2,7 +2,6 @@ BORDER RADIUS Docs: http://tachyons.io/docs/themes/border-radius/ - Interactive examples: https://components.ai/u/system/cl7crcjia022509masfvq73ny/cl7ztbozs1650909l6rllmvpko Base: br = border-radius @@ -13,34 +12,25 @@ 2 = 2nd step in scale 3 = 3rd step in scale 4 = 4th step in scale - 5 = 5th step in scale - 6 = 6th step in scale Literal values: -100 = 100% -pill = 9999px Media Query Extensions: - -n = small + -ns = not-small -m = medium -l = large */ - .br-primary { border-radius: var(--border-radius, 6px); } - .br0 { border-radius: var(--border-radius-0, 0); } - .br1 { border-radius: var(--border-radius-1, 4px); } - .br2 { border-radius: var(--border-radius-2, 6px); } - .br3 { border-radius: var(--border-radius-3, 8px); } - .br4 { border-radius: var(--border-radius-4, 12px); } - .br5 { border-radius: var(--border-radius-5, 16px); } - .br6 { border-radius: var(--border-radius-6, 20px); } - .br7 { border-radius: var(--border-radius-7, 24px); } - .br8 { border-radius: var(--border-radius-8, 32px); } - .br9 { border-radius: var(--border-radius-9, 48px); } - .br10 { border-radius: var(--border-radius-10, 64px); } - .br11 { border-radius: var(--border-radius-11, 9999px); } - + .br0 { border-radius: 0; } + .br1 { border-radius: .125rem; } + .br2 { border-radius: .25rem; } + .br3 { border-radius: .5rem; } + .br4 { border-radius: 1rem; } + .br-100 { border-radius: 100%; } + .br-pill { border-radius: 9999px; } .br--bottom { border-top-left-radius: 0; border-top-right-radius: 0; @@ -61,55 +51,43 @@ .br-initial { border-radius: initial; } .br-unset { border-radius: unset; } -@container (min-width:30em) { - .br-primary-s { border-radius: var(--border-radius, 6px); } - .br0-s { border-radius: var(--border-radius-0, 0); } - .br1-s { border-radius: var(--border-radius-1, 4px); } - .br2-s { border-radius: var(--border-radius-2, 6px); } - .br3-s { border-radius: var(--border-radius-3, 8px); } - .br4-s { border-radius: var(--border-radius-4, 12px); } - .br5-s { border-radius: var(--border-radius-5, 16px); } - .br6-s { border-radius: var(--border-radius-6, 20px); } - .br7-s { border-radius: var(--border-radius-7, 24px); } - .br8-s { border-radius: var(--border-radius-8, 32px); } - .br9-s { border-radius: var(--border-radius-9, 48px); } - .br10-s { border-radius: var(--border-radius-10, 64px); } - .br11-s { border-radius: var(--border-radius-11, 9999px); } - .br--bottom-s { +@media (--breakpoint-not-small) { + .br0-ns { border-radius: 0; } + .br1-ns { border-radius: .125rem; } + .br2-ns { border-radius: .25rem; } + .br3-ns { border-radius: .5rem; } + .br4-ns { border-radius: 1rem; } + .br-100-ns { border-radius: 100%; } + .br-pill-ns { border-radius: 9999px; } + .br--bottom-ns { border-top-left-radius: 0; border-top-right-radius: 0; } - .br--top-s { + .br--top-ns { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } - .br--right-s { + .br--right-ns { border-top-left-radius: 0; border-bottom-left-radius: 0; } - .br--left-s { + .br--left-ns { border-top-right-radius: 0; border-bottom-right-radius: 0; } - .br-inherit-s { border-radius: inherit; } - .br-initial-s { border-radius: initial; } - .br-unset-s { border-radius: unset; } + .br-inherit-ns { border-radius: inherit; } + .br-initial-ns { border-radius: initial; } + .br-unset-ns { border-radius: unset; } } -@container (min-width:48em) { - .br-primary-m { border-radius: var(--border-radius, 6px); } - .br0-m { border-radius: var(--border-radius-0, 0); } - .br1-m { border-radius: var(--border-radius-1, 4px); } - .br2-m { border-radius: var(--border-radius-2, 6px); } - .br3-m { border-radius: var(--border-radius-3, 8px); } - .br4-m { border-radius: var(--border-radius-4, 12px); } - .br5-m { border-radius: var(--border-radius-5, 16px); } - .br6-m { border-radius: var(--border-radius-6, 20px); } - .br7-m { border-radius: var(--border-radius-7, 24px); } - .br8-m { border-radius: var(--border-radius-8, 32px); } - .br9-m { border-radius: var(--border-radius-9, 48px); } - .br10-m { border-radius: var(--border-radius-10, 64px); } - .br11-m { border-radius: var(--border-radius-11, 9999px); } +@media (--breakpoint-medium) { + .br0-m { border-radius: 0; } + .br1-m { border-radius: .125rem; } + .br2-m { border-radius: .25rem; } + .br3-m { border-radius: .5rem; } + .br4-m { border-radius: 1rem; } + .br-100-m { border-radius: 100%; } + .br-pill-m { border-radius: 9999px; } .br--bottom-m { border-top-left-radius: 0; border-top-right-radius: 0; @@ -131,20 +109,14 @@ .br-unset-m { border-radius: unset; } } -@container (min-width:64em) { - .br-primary-l { border-radius: var(--border-radius, 6px); } - .br0-l { border-radius: var(--border-radius-0, 0); } - .br1-l { border-radius: var(--border-radius-1, 4px); } - .br2-l { border-radius: var(--border-radius-2, 6px); } - .br3-l { border-radius: var(--border-radius-3, 8px); } - .br4-l { border-radius: var(--border-radius-4, 12px); } - .br5-l { border-radius: var(--border-radius-5, 16px); } - .br6-l { border-radius: var(--border-radius-6, 20px); } - .br7-l { border-radius: var(--border-radius-7, 24px); } - .br8-l { border-radius: var(--border-radius-8, 32px); } - .br9-l { border-radius: var(--border-radius-9, 48px); } - .br10-l { border-radius: var(--border-radius-10, 64px); } - .br11-l { border-radius: var(--border-radius-11, 9999px); } +@media (--breakpoint-large) { + .br0-l { border-radius: 0; } + .br1-l { border-radius: .125rem; } + .br2-l { border-radius: .25rem; } + .br3-l { border-radius: .5rem; } + .br4-l { border-radius: 1rem; } + .br-100-l { border-radius: 100%; } + .br-pill-l { border-radius: 9999px; } .br--bottom-l { border-top-left-radius: 0; border-top-right-radius: 0; diff --git a/src/_border-style.css b/src/_border-style.css index 0802860d1..b9eb61b3d 100644 --- a/src/_border-style.css +++ b/src/_border-style.css @@ -15,7 +15,7 @@ --solid = solid Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -26,21 +26,21 @@ .b--solid { border-style: solid; } .b--none { border-style: none; } -@container (min-width:30em) { - .b--dotted-s { border-style: dotted; } - .b--dashed-s { border-style: dashed; } - .b--solid-s { border-style: solid; } - .b--none-s { border-style: none; } +@media (--breakpoint-not-small) { + .b--dotted-ns { border-style: dotted; } + .b--dashed-ns { border-style: dashed; } + .b--solid-ns { border-style: solid; } + .b--none-ns { border-style: none; } } -@container (min-width:48em) { +@media (--breakpoint-medium) { .b--dotted-m { border-style: dotted; } .b--dashed-m { border-style: dashed; } .b--solid-m { border-style: solid; } .b--none-m { border-style: none; } } -@container (min-width:64em) { +@media (--breakpoint-large) { .b--dotted-l { border-style: dotted; } .b--dashed-l { border-style: dashed; } .b--solid-l { border-style: solid; } diff --git a/src/_border-widths.css b/src/_border-widths.css index 394e0d0d4..e3b6885d0 100644 --- a/src/_border-widths.css +++ b/src/_border-widths.css @@ -15,19 +15,18 @@ 5 = 5th step in border-width scale Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ -.bw { border-width: var(--border-width,1px); } -.bw0 { border-width: var(--border-width-0,0); } -.bw1 { border-width: var(--border-width-1,1px); } -.bw2 { border-width: var(--border-width-2,2px); } -.bw3 { border-width: var(--border-width-3,4px); } -.bw4 { border-width: var(--border-width-4,8px); } -.bw5 { border-width: var(--border-width-5,16px); } +.bw0 { border-width: 0; } +.bw1 { border-width: .125rem; } +.bw2 { border-width: .25rem; } +.bw3 { border-width: .5rem; } +.bw4 { border-width: 1rem; } +.bw5 { border-width: 2rem; } /* Resets */ .bt-0 { border-top-width: 0; } @@ -35,42 +34,39 @@ .bb-0 { border-bottom-width: 0; } .bl-0 { border-left-width: 0; } -@container (min-width:30em) { - .bw-s { border-width: var(--border-width,1px); } - .bw0-s { border-width: var(--border-width-0,0); } - .bw1-s { border-width: var(--border-width-1,1px); } - .bw2-s { border-width: var(--border-width-2,2px); } - .bw3-s { border-width: var(--border-width-3,4px); } - .bw4-s { border-width: var(--border-width-4,8px); } - .bw5-s { border-width: var(--border-width-5,16px); } - .bt-0-s { border-top-width: 0; } - .br-0-s { border-right-width: 0; } - .bb-0-s { border-bottom-width: 0; } - .bl-0-s { border-left-width: 0; } +@media (--breakpoint-not-small) { + .bw0-ns { border-width: 0; } + .bw1-ns { border-width: .125rem; } + .bw2-ns { border-width: .25rem; } + .bw3-ns { border-width: .5rem; } + .bw4-ns { border-width: 1rem; } + .bw5-ns { border-width: 2rem; } + .bt-0-ns { border-top-width: 0; } + .br-0-ns { border-right-width: 0; } + .bb-0-ns { border-bottom-width: 0; } + .bl-0-ns { border-left-width: 0; } } -@container (min-width:48em) { - .bw-m { border-width: var(--border-width,1px); } - .bw0-m { border-width: var(--border-width-0,0); } - .bw1-m { border-width: var(--border-width-1,1px); } - .bw2-m { border-width: var(--border-width-2,2px); } - .bw3-m { border-width: var(--border-width-3,4px); } - .bw4-m { border-width: var(--border-width-4,8px); } - .bw5-m { border-width: var(--border-width-5,16px); } +@media (--breakpoint-medium) { + .bw0-m { border-width: 0; } + .bw1-m { border-width: .125rem; } + .bw2-m { border-width: .25rem; } + .bw3-m { border-width: .5rem; } + .bw4-m { border-width: 1rem; } + .bw5-m { border-width: 2rem; } .bt-0-m { border-top-width: 0; } .br-0-m { border-right-width: 0; } .bb-0-m { border-bottom-width: 0; } .bl-0-m { border-left-width: 0; } } -@container (min-width:64em) { - .bw-l { border-width: var(--border-width,1px); } - .bw0-l { border-width: var(--border-width-0,0); } - .bw1-l { border-width: var(--border-width-1,1px); } - .bw2-l { border-width: var(--border-width-2,2px); } - .bw3-l { border-width: var(--border-width-3,4px); } - .bw4-l { border-width: var(--border-width-4,8px); } - .bw5-l { border-width: var(--border-width-5,16px); } +@media (--breakpoint-large) { + .bw0-l { border-width: 0; } + .bw1-l { border-width: .125rem; } + .bw2-l { border-width: .25rem; } + .bw3-l { border-width: .5rem; } + .bw4-l { border-width: 1rem; } + .bw5-l { border-width: 2rem; } .bt-0-l { border-top-width: 0; } .br-0-l { border-right-width: 0; } .bb-0-l { border-bottom-width: 0; } diff --git a/src/_borders.css b/src/_borders.css index 6e5f442e9..ce49e4292 100644 --- a/src/_borders.css +++ b/src/_borders.css @@ -15,44 +15,44 @@ n = none Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ - .ba { border-style: solid; border-width: var(--border-width, 1px); } - .bt { border-top-style: solid; border-top-width: var(--border-width, 1px); } - .br { border-right-style: solid; border-right-width: var(--border-width, 1px); } - .bb { border-bottom-style: solid; border-bottom-width: var(--border-width, 1px); } - .bl { border-left-style: solid; border-left-width: var(--border-width, 1px); } + .ba { border-style: solid; border-width: 1px; } + .bt { border-top-style: solid; border-top-width: 1px; } + .br { border-right-style: solid; border-right-width: 1px; } + .bb { border-bottom-style: solid; border-bottom-width: 1px; } + .bl { border-left-style: solid; border-left-width: 1px; } .bn { border-style: none; border-width: 0; } -@container (min-width:30em) { - .ba-s { border-style: solid; border-width: var(--border-width, 1px); } - .bt-s { border-top-style: solid; border-top-width: var(--border-width, 1px); } - .br-s { border-right-style: solid; border-right-width: var(--border-width, 1px); } - .bb-s { border-bottom-style: solid; border-bottom-width: var(--border-width, 1px); } - .bl-s { border-left-style: solid; border-left-width: var(--border-width, 1px); } - .bn-s { border-style: none; border-width: 0; } +@media (--breakpoint-not-small) { + .ba-ns { border-style: solid; border-width: 1px; } + .bt-ns { border-top-style: solid; border-top-width: 1px; } + .br-ns { border-right-style: solid; border-right-width: 1px; } + .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-ns { border-left-style: solid; border-left-width: 1px; } + .bn-ns { border-style: none; border-width: 0; } } -@container (min-width:48em) { - .ba-m { border-style: solid; border-width: var(--border-width, 1px); } - .bt-m { border-top-style: solid; border-top-width: var(--border-width, 1px); } - .br-m { border-right-style: solid; border-right-width: var(--border-width, 1px); } - .bb-m { border-bottom-style: solid; border-bottom-width: var(--border-width, 1px); } - .bl-m { border-left-style: solid; border-left-width: var(--border-width, 1px); } +@media (--breakpoint-medium) { + .ba-m { border-style: solid; border-width: 1px; } + .bt-m { border-top-style: solid; border-top-width: 1px; } + .br-m { border-right-style: solid; border-right-width: 1px; } + .bb-m { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-m { border-left-style: solid; border-left-width: 1px; } .bn-m { border-style: none; border-width: 0; } } -@container (min-width:64em) { - .ba-l { border-style: solid; border-width: var(--border-width, 1px); } - .bt-l { border-top-style: solid; border-top-width: var(--border-width, 1px); } - .br-l { border-right-style: solid; border-right-width: var(--border-width, 1px); } - .bb-l { border-bottom-style: solid; border-bottom-width: var(--border-width, 1px); } - .bl-l { border-left-style: solid; border-left-width: var(--border-width, 1px); } +@media (--breakpoint-large) { + .ba-l { border-style: solid; border-width: 1px; } + .bt-l { border-top-style: solid; border-top-width: 1px; } + .br-l { border-right-style: solid; border-right-width: 1px; } + .bb-l { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-l { border-left-style: solid; border-left-width: 1px; } .bn-l { border-style: none; border-width: 0; } } diff --git a/src/_box-shadow.css b/src/_box-shadow.css index 419ee9952..e744bc745 100644 --- a/src/_box-shadow.css +++ b/src/_box-shadow.css @@ -3,120 +3,39 @@ BOX-SHADOW Docs: http://tachyons.io/docs/themes/box-shadow/ - REF - Layered shadows: https://tobiasahlin.com/blog/layered-smooth-box-shadows/ - Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ -.shadow { - box-shadow: var(--shadow, inset 0 0 1px 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .5))); -} - -.shadow-hover:hover, -.shadow-hover:focus { - --shadow-opacity: .6; -} - -/* - * TODO: potential pattern - .shadow-hover:hover { - --shadow-opacity: .09; - --shadow-x: 1px; - --shadow-y: 1px; - --shadow-blur: 1px; - --shadow-spread: 1px; - --shadow-multiplier: 2; - } -*/ - -/* Box shadow based borders */ - -.shadow-border-1 { box-shadow: inset 0 0 var(--shadow-border-width, 1px) 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)); } -.shadow-border-2 { box-shadow: inset 0 0 var(--shadow-border-width, 1px) 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .25)); } -.shadow-border-3 { box-shadow: inset 0 0 var(--shadow-border-width) 0 currentColor; } -.shadow-border-4 { box-shadow: inset 0 0 2px 0 rgb(var(--shadow-color-light, 255 255 255) / var(--shadow-opacity, .125)); } -.shadow-border-5 { box-shadow: inset 0 0 2px 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125))} -.shadow-border-6 { box-shadow: inset 0 0 2px 0 currentColor; } - -.shadow-1 { - box-shadow: - 0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), - 0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), - 0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), - 0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), - 0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)); -} - -.shadow-2 { - box-shadow: - 0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), - 0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), - 0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), - 0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)); -} - -.shadow-3 { - --shadow-opacity: .11; - box-shadow: - 0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)), - 0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)), - 0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)), - 0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)), - 0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)), - 0 32px 32px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)); -} - -.shadow-4 { - --shadow-opacity: .05; - box-shadow: - 0 1px 1px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.25) * 5)), - 0 2px 2px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.20) * 4)), - 0 4px 4px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.15) * 3)), - 0 8px 8px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.10) * 2)), - 0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.05)); -} - -.shadow-5 { - --shadow-opacity: .08; - box-shadow: - 0 var(--shadow-y) 1px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.08) * 1)), - 0 calc(var(--shadow-y) * 2) 2px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.12) * 1.5)), - 0 calc(var(--shadow-y) * 4) 4px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.16) * 2)), - 0 calc(var(--shadow-y) * 8) 8px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.20) * 2.5)); -} - -.shadow-6 { - --shadow-opacity: .07; - box-shadow: - 0 1px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)), - 0 2px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)), - 0 4px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)), - 0 8px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)), - 0 16px 32px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)), - 0 32px 64px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)); -} - -.shadow-7 { - --shadow-opacity: .11; - box-shadow: - 0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)), - 0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)), - 0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)), - 0 6px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)), - 0 8px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)); -} - -.shadow-8 { - --shadow-opacity: .09; - box-shadow: - 0 2px 1px rgb(var(--shadow-color, 0 0 0) / 0.09), - 0 4px 2px rgb(var(--shadow-color, 0 0 0) / 0.09), - 0 8px 4px rgb(var(--shadow-color, 0 0 0) / 0.09), - 0 16px 8px rgb(var(--shadow-color, 0 0 0) / 0.09), - 0 32px 16px rgb(var(--shadow-color, 0 0 0) / 0.09); +.shadow-1 { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); } +.shadow-2 { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); } +.shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); } +.shadow-4 { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); } +.shadow-5 { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); } + +@media (--breakpoint-not-small) { + .shadow-1-ns { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); } + .shadow-2-ns { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); } + .shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); } + .shadow-4-ns { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); } + .shadow-5-ns { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); } +} + +@media (--breakpoint-medium) { + .shadow-1-m { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); } + .shadow-2-m { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); } + .shadow-3-m { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); } + .shadow-4-m { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); } + .shadow-5-m { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); } +} + +@media (--breakpoint-large) { + .shadow-1-l { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); } + .shadow-2-l { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); } + .shadow-3-l { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); } + .shadow-4-l { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); } + .shadow-5-l { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); } } diff --git a/src/_box-sizing.css b/src/_box-sizing.css index 787750660..8a965e090 100644 --- a/src/_box-sizing.css +++ b/src/_box-sizing.css @@ -4,10 +4,45 @@ */ -*, -*::before, -*::after, -.border-box, -.border-box::before, -.border-box::after { box-sizing: border-box; } -.content-box { box-sizing: content-box; } +html, +body, +div, +article, +aside, +section, +main, +nav, +footer, +header, +form, +fieldset, +legend, +pre, +code, +a, +h1,h2,h3,h4,h5,h6, +p, +ul, +ol, +li, +dl, +dt, +dd, +blockquote, +figcaption, +figure, +textarea, +table, +td, +th, +tr, +input[type="email"], +input[type="number"], +input[type="password"], +input[type="tel"], +input[type="text"], +input[type="url"], +.border-box { + box-sizing: border-box; +} + diff --git a/src/_clears.css b/src/_clears.css index ed0f984d8..14d8e1d40 100644 --- a/src/_clears.css +++ b/src/_clears.css @@ -11,8 +11,30 @@ .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } +.cf { *zoom: 1; } .cl { clear: left; } .cr { clear: right; } .cb { clear: both; } .cn { clear: none; } + +@media (--breakpoint-not-small) { + .cl-ns { clear: left; } + .cr-ns { clear: right; } + .cb-ns { clear: both; } + .cn-ns { clear: none; } +} + +@media (--breakpoint-medium) { + .cl-m { clear: left; } + .cr-m { clear: right; } + .cb-m { clear: both; } + .cn-m { clear: none; } +} + +@media (--breakpoint-large) { + .cl-l { clear: left; } + .cr-l { clear: right; } + .cb-l { clear: both; } + .cn-l { clear: none; } +} diff --git a/src/_code.css b/src/_code.css index 765d75e10..ac691f30d 100644 --- a/src/_code.css +++ b/src/_code.css @@ -5,6 +5,7 @@ */ .pre { - max-width: 100%; - overflow: auto; + overflow-x: auto; + overflow-y: hidden; + overflow: scroll; } diff --git a/src/_colors.css b/src/_colors.css new file mode 100644 index 000000000..7280aeca3 --- /dev/null +++ b/src/_colors.css @@ -0,0 +1,80 @@ +/* + + Tachyons + COLOR VARIABLES + + Grayscale + - Solids + - Transparencies + Colors + +*/ + +:root { + --black: #000; + --near-black: #111; + --dark-gray:#333; + --mid-gray:#555; + --gray: #777; + --silver: #999; + --light-silver: #aaa; + --moon-gray: #ccc; + --light-gray: #eee; + --near-white: #f4f4f4; + --white: #fff; + + --transparent:transparent; + + --black-90: rgba(0,0,0,.9); + --black-80: rgba(0,0,0,.8); + --black-70: rgba(0,0,0,.7); + --black-60: rgba(0,0,0,.6); + --black-50: rgba(0,0,0,.5); + --black-40: rgba(0,0,0,.4); + --black-30: rgba(0,0,0,.3); + --black-20: rgba(0,0,0,.2); + --black-10: rgba(0,0,0,.1); + --black-05: rgba(0,0,0,.05); + --black-025: rgba(0,0,0,.025); + --black-0125: rgba(0,0,0,.0125); + + --white-90: rgba(255,255,255,.9); + --white-80: rgba(255,255,255,.8); + --white-70: rgba(255,255,255,.7); + --white-60: rgba(255,255,255,.6); + --white-50: rgba(255,255,255,.5); + --white-40: rgba(255,255,255,.4); + --white-30: rgba(255,255,255,.3); + --white-20: rgba(255,255,255,.2); + --white-10: rgba(255,255,255,.1); + --white-05: rgba(255,255,255,.05); + --white-025: rgba(255,255,255,.025); + --white-0125: rgba(255,255,255,.0125); + + --dark-red: #e7040f; + --red: #ff4136; + --light-red: #ff725c; + --orange: #ff6300; + --gold: #ffb700; + --yellow: #ffd700; + --light-yellow: #fbf1a9; + --purple: #5e2ca5; + --light-purple: #a463f2; + --dark-pink: #d5008f; + --hot-pink: #ff41b4; + --pink: #ff80cc; + --light-pink: #ffa3d7; + --dark-green: #137752; + --green: #19a974; + --light-green: #9eebcf; + --navy: #001b44; + --dark-blue: #00449e; + --blue: #357edd; + --light-blue: #96ccff; + --lightest-blue: #cdecff; + --washed-blue: #f6fffe; + --washed-green: #e8fdf5; + --washed-yellow: #fffceb; + --washed-red: #ffdfdf; + +} diff --git a/src/_container-type.css b/src/_container-type.css deleted file mode 100644 index 8749a4434..000000000 --- a/src/_container-type.css +++ /dev/null @@ -1,35 +0,0 @@ -/* - - CONTAINER-TYPE - - Media Query Extensions: - -s = small - -m = medium - -l = large - - MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/container-type - -*/ - -.container-size { container-type: size; } -.root, -.container-inline { container-type: inline-size; } -.container-normal { container-type: normal; } - -@container (min-width:30em) { - .container-size-s { container-type: size; } - .container-inline-s { container-type: inline-size; } - .container-normal-s { container-type: normal; } -} - -@container (min-width:48em) { - .container-size-m { container-type: size; } - .container-inline-m { container-type: inline-size; } - .container-normal-m { container-type: normal; } -} - -@container (min-width:64em) { - .container-size-l { container-type: size; } - .container-inline-l { container-type: inline-size; } - .container-normal-l { container-type: normal; } -} diff --git a/src/_coordinates.css b/src/_coordinates.css index 2bc08162f..bf8e6d787 100644 --- a/src/_coordinates.css +++ b/src/_coordinates.css @@ -19,7 +19,7 @@ --2 = literal value -2 Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -30,96 +30,117 @@ .bottom-0 { bottom: 0; } .left-0 { left: 0; } -.top-1 { top: var(--size, 1rem); } -.right-1 { right: var(--size, 1rem); } -.bottom-1 { bottom: var(--size, 1rem); } -.left-1 { left: var(--size, 1rem); } - -.top-2 { top: calc(var(--size, 1rem) * 2); } -.right-2 { right: calc(var(--size, 1rem) * 2); } -.bottom-2 { bottom: calc(var(--size, 1rem) * 2); } -.left-2 { left: calc(var(--size, 1rem) * 2); } - -.top--1 { top: calc(var(--size, 1rem) * -1); } -.right--1 { right: calc(var(--size, 1rem) * -1); } -.bottom--1 { bottom: calc(var(--size, 1rem) * -1); } -.left--1 { left: calc(var(--size, 1rem) * -1); } - -.top--2 { top: calc(var(--size, 1rem) * -2); } -.right--2 { right: calc(var(--size, 1rem) * -2); } -.bottom--2 { bottom: calc(var(--size, 1rem) * -2); } -.left--2 { left: calc(var(--size, 1rem) * -2); } - -.inset-0 { inset: 0; } - -@container (min-width:30em) { - .top-0-s { top: 0; } - .left-0-s { left: 0; } - .right-0-s { right: 0; } - .bottom-0-s { bottom: 0; } - .top-1-s { top: var(--size, 1rem); } - .left-1-s { left: var(--size, 1rem); } - .right-1-s { right: var(--size, 1rem); } - .bottom-1-s { bottom: var(--size, 1rem); } - .top-2-s { top: calc(var(--size, 1rem) * 2); } - .left-2-s { left: calc(var(--size, 1rem) * 2); } - .right-2-s { right: calc(var(--size, 1rem) * 2); } - .bottom-2-s { bottom: calc(var(--size, 1rem) * 2); } - .top--1-s { top: calc(var(--size, 1rem) * -1); } - .right--1-s { right: calc(var(--size, 1rem) * -1); } - .bottom--1-s { bottom: calc(var(--size, 1rem) * -1); } - .left--1-s { left: calc(var(--size, 1rem) * -1); } - .top--2-s { top: calc(var(--size, 1rem) * -2); } - .right--2-s { right: calc(var(--size, 1rem) * -2); } - .bottom--2-s { bottom: calc(var(--size, 1rem) * -2); } - .left--2-s { left: calc(var(--size, 1rem) * -2); } - .inset-0-s { inset: 0; } +.top-1 { top: 1rem; } +.right-1 { right: 1rem; } +.bottom-1 { bottom: 1rem; } +.left-1 { left: 1rem; } + +.top-2 { top: 2rem; } +.right-2 { right: 2rem; } +.bottom-2 { bottom: 2rem; } +.left-2 { left: 2rem; } + +.top--1 { top: -1rem; } +.right--1 { right: -1rem; } +.bottom--1 { bottom: -1rem; } +.left--1 { left: -1rem; } + +.top--2 { top: -2rem; } +.right--2 { right: -2rem; } +.bottom--2 { bottom: -2rem; } +.left--2 { left: -2rem; } + + +.absolute--fill { + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +@media (--breakpoint-not-small) { + .top-0-ns { top: 0; } + .left-0-ns { left: 0; } + .right-0-ns { right: 0; } + .bottom-0-ns { bottom: 0; } + .top-1-ns { top: 1rem; } + .left-1-ns { left: 1rem; } + .right-1-ns { right: 1rem; } + .bottom-1-ns { bottom: 1rem; } + .top-2-ns { top: 2rem; } + .left-2-ns { left: 2rem; } + .right-2-ns { right: 2rem; } + .bottom-2-ns { bottom: 2rem; } + .top--1-ns { top: -1rem; } + .right--1-ns { right: -1rem; } + .bottom--1-ns { bottom: -1rem; } + .left--1-ns { left: -1rem; } + .top--2-ns { top: -2rem; } + .right--2-ns { right: -2rem; } + .bottom--2-ns { bottom: -2rem; } + .left--2-ns { left: -2rem; } + .absolute--fill-ns { + top: 0; + right: 0; + bottom: 0; + left: 0; + } } -@container (min-width:48em) { +@media (--breakpoint-medium) { .top-0-m { top: 0; } .left-0-m { left: 0; } .right-0-m { right: 0; } .bottom-0-m { bottom: 0; } - .top-1-m { top: var(--size, 1rem); } - .left-1-m { left: var(--size, 1rem); } - .right-1-m { right: var(--size, 1rem); } - .bottom-1-m { bottom: var(--size, 1rem); } - .top-2-m { top: calc(var(--size, 1rem) * 2); } - .left-2-m { left: calc(var(--size, 1rem) * 2); } - .right-2-m { right: calc(var(--size, 1rem) * 2); } - .bottom-2-m { bottom: calc(var(--size, 1rem) * 2); } - .top--1-m { top: calc(var(--size, 1rem) * -1); } - .right--1-m { right: calc(var(--size, 1rem) * -1); } - .bottom--1-m { bottom: calc(var(--size, 1rem) * -1); } - .left--1-m { left: calc(var(--size, 1rem) * -1); } - .top--2-m { top: calc(var(--size, 1rem) * -2); } - .right--2-m { right: calc(var(--size, 1rem) * -2); } - .bottom--2-m { bottom: calc(var(--size, 1rem) * -2); } - .left--2-m { left: calc(var(--size, 1rem) * -2); } - .inset-0-m { inset: 0; } + .top-1-m { top: 1rem; } + .left-1-m { left: 1rem; } + .right-1-m { right: 1rem; } + .bottom-1-m { bottom: 1rem; } + .top-2-m { top: 2rem; } + .left-2-m { left: 2rem; } + .right-2-m { right: 2rem; } + .bottom-2-m { bottom: 2rem; } + .top--1-m { top: -1rem; } + .right--1-m { right: -1rem; } + .bottom--1-m { bottom: -1rem; } + .left--1-m { left: -1rem; } + .top--2-m { top: -2rem; } + .right--2-m { right: -2rem; } + .bottom--2-m { bottom: -2rem; } + .left--2-m { left: -2rem; } + .absolute--fill-m { + top: 0; + right: 0; + bottom: 0; + left: 0; + } } -@container (min-width:64em) { +@media (--breakpoint-large) { .top-0-l { top: 0; } .left-0-l { left: 0; } .right-0-l { right: 0; } .bottom-0-l { bottom: 0; } - .top-1-l { top: var(--size, 1rem); } - .left-1-l { left: var(--size, 1rem); } - .right-1-l { right: var(--size, 1rem); } - .bottom-1-l { bottom: var(--size, 1rem); } - .top-2-l { top: calc(var(--size, 1rem) * 2); } - .left-2-l { left: calc(var(--size, 1rem) * 2); } - .right-2-l { right: calc(var(--size, 1rem) * 2); } - .bottom-2-l { bottom: calc(var(--size, 1rem) * 2); } - .top--1-l { top: calc(var(--size, 1rem) * -1); } - .right--1-l { right: calc(var(--size, 1rem) * -1); } - .bottom--1-l { bottom: calc(var(--size, 1rem) * -1); } - .left--1-l { left: calc(var(--size, 1rem) * -1); } - .top--2-l { top: calc(var(--size, 1rem) * -2); } - .right--2-l { right: calc(var(--size, 1rem) * -2); } - .bottom--2-l { bottom: calc(var(--size, 1rem) * -2); } - .left--2-l { left: calc(var(--size, 1rem) * -2); } - .inset-0-l { inset: 0; } + .top-1-l { top: 1rem; } + .left-1-l { left: 1rem; } + .right-1-l { right: 1rem; } + .bottom-1-l { bottom: 1rem; } + .top-2-l { top: 2rem; } + .left-2-l { left: 2rem; } + .right-2-l { right: 2rem; } + .bottom-2-l { bottom: 2rem; } + .top--1-l { top: -1rem; } + .right--1-l { right: -1rem; } + .bottom--1-l { bottom: -1rem; } + .left--1-l { left: -1rem; } + .top--2-l { top: -2rem; } + .right--2-l { right: -2rem; } + .bottom--2-l { bottom: -2rem; } + .left--2-l { left: -2rem; } + .absolute--fill-l { + top: 0; + right: 0; + bottom: 0; + left: 0; + } } diff --git a/src/_debug-children.css b/src/_debug-children.css index 2bbab02a1..10204dacc 100644 --- a/src/_debug-children.css +++ b/src/_debug-children.css @@ -8,10 +8,7 @@ */ -.debug * { - --debug-color: 128 0 90; - --debug-opacity: .8; - outline: 1px solid rbg(var(--debug-color, 128 0 90) / (--debug-opacity, .8)); -} - +.debug * { outline: 1px solid gold; } +.debug-white * { outline: 1px solid white; } +.debug-black * { outline: 1px solid black; } diff --git a/src/_debug-grid.css b/src/_debug-grid.css index 612b82d2e..8bb85bc56 100644 --- a/src/_debug-grid.css +++ b/src/_debug-grid.css @@ -1,21 +1,26 @@ -/* +/* DEBUG GRID http://tachyons.io/docs/debug-grid/ Can be useful for debugging layout issues or helping to make sure things line up perfectly. - Just tack this class onto a parent element + Just tack one of these classes onto a parent element. */ .debug-grid { - --grid-size: 16px; - --grid-color: var(--magenta-9); + background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII=) repeat top left; +} + +.debug-grid-16 { + background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII=) repeat top left; +} - background-image: - repeating-linear-gradient(0deg, var(--grid-color), var(--grid-color) 1px, transparent 1px, transparent var(--grid-size)), - repeating-linear-gradient(90deg, var(--grid-color), var(--grid-color) 1px, transparent 1px, transparent var(--grid-size)); - background-size: 100% var(--grid-size); +.debug-grid-8-solid { + background:white url(data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw==) repeat top left; } +.debug-grid-16-solid { + background:white url(data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7) repeat top left; +} diff --git a/src/_debug.css b/src/_debug.css index bbd7ff5fc..f09f2b519 100644 --- a/src/_debug.css +++ b/src/_debug.css @@ -11,123 +11,122 @@ */ -body { outline: 1px solid var(--blue-0)!important; } -article { outline: 1px solid var(--blue-1)!important; } -nav { outline: 1px solid var(--blue-2)!important; } -aside { outline: 1px solid var(--blue-3)!important; } -section { outline: 1px solid var(--blue-4)!important; } -header { outline: 1px solid var(--blue-5)!important; } -footer { outline: 1px solid var(--blue-6)!important; } -h1 { outline: 1px solid var(--blue-7)!important; } -h2 { outline: 1px solid var(--blue-8)!important; } -h3 { outline: 1px solid var(--blue-9)!important; } -h4 { outline: 1px solid var(--blue-10)!important; } -h5 { outline: 1px solid var(--blue-11)!important; } -h6 { outline: 1px solid var(--indigo-0)!important; } -main { outline: 1px solid var(--indigo-1)!important; } -address { outline: 1px solid var(--indigo-2)!important; } -div { outline: 1px solid var(--indigo-3)!important; } - - -p { outline: 1px solid var(--red-0)!important; } -hr { outline: 1px solid var(--red-1)!important; } -pre { outline: 1px solid var(--red-2)!important; } -blockquote { outline: 1px solid var(--red-3)!important; } -ol { outline: 1px solid var(--red-4)!important; } -ul { outline: 1px solid var(--red-5)!important; } -li { outline: 1px solid var(--red-6)!important; } -dl { outline: 1px solid var(--red-7)!important; } -dt { outline: 1px solid var(--red-8)!important; } -dd { outline: 1px solid var(--red-9)!important; } -figure { outline: 1px solid var(--red-10)!important; } -figcaption { outline: 1px solid var(--red-11)!important; } - - - -table { outline: 1px solid var(--teal-2)!important; } -caption { outline: 1px solid var(--teal-3)!important; } -thead { outline: 1px solid var(--teal-4)!important; } -tbody { outline: 1px solid var(--teal-5)!important; } -tfoot { outline: 1px solid var(--teal-6)!important; } -tr { outline: 1px solid var(--teal-7)!important; } -th { outline: 1px solid var(--teal-8)!important; } -td { outline: 1px solid var(--teal-9)!important; } -col { outline: 1px solid var(--teal-10)!important; } -colgroup { outline: 1px solid var(--teal-11)!important; } - - -button { outline: 1px solid var(--magenta-0)!important; } -datalist { outline: 1px solid var(--magenta-1)!important; } -fieldset { outline: 1px solid var(--magenta-2)!important; } -form { outline: 1px solid var(--magenta-3)!important; } -input { outline: 1px solid var(--magenta-4)!important; } -keygen { outline: 1px solid var(--magenta-5)!important; } -label { outline: 1px solid var(--magenta-6)!important; } -legend { outline: 1px solid var(--magenta-7)!important; } -meter { outline: 1px solid var(--magenta-8)!important; } -optgroup { outline: 1px solid var(--magenta-9)!important; } -option { outline: 1px solid var(--magenta-10)!important; } -output { outline: 1px solid var(--magenta-11)!important; } -progress { outline: 1px solid var(--violet-0)!important; } -select { outline: 1px solid var(--violet-1)!important; } -textarea { outline: 1px solid var(--violet-2)!important; } - - - -details { outline: 1px solid var(--cyan-0)!important; } -summary { outline: 1px solid var(--cyan-1)!important; } -command { outline: 1px solid var(--cyan-2)!important; } -menu { outline: 1px solid var(--cyan-3)!important; } - - - -del { outline: 1px solid var(--red-5)!important; } -ins { outline: 1px solid var(--green-5)!important; } - - - -img { outline: 1px solid var(--green-0)!important; } -iframe { outline: 1px solid var(--green-1)!important; } -embed { outline: 1px solid var(--green-2)!important; } -object { outline: 1px solid var(--green-3)!important; } -param { outline: 1px solid var(--green-4)!important; } -video { outline: 1px solid var(--green-6)!important; } -audio { outline: 1px solid var(--green-7)!important; } -source { outline: 1px solid var(--green-8)!important; } -canvas { outline: 1px solid var(--green-9)!important; } -track { outline: 1px solid var(--green-10)!important; } -map { outline: 1px solid var(--green-11)!important; } -area { outline: 1px solid var(--cyan-5)!important; } - - - -a { outline: 1px solid var(--violet-0)!important; } -em { outline: 1px solid var(--violet-1)!important; } -strong { outline: 1px solid var(--violet-2)!important; } -i { outline: 1px solid var(--violet-3)!important; } -b { outline: 1px solid var(--violet-4)!important; } -u { outline: 1px solid var(--violet-5)!important; } -s { outline: 1px solid var(--violet-6)!important; } -small { outline: 1px solid var(--violet-7)!important; } -abbr { outline: 1px solid var(--violet-8)!important; } -q { outline: 1px solid var(--violet-9)!important; } -cite { outline: 1px solid var(--violet-10)!important; } -dfn { outline: 1px solid var(--violet-11)!important; } -sub { outline: 1px solid var(--red-orange-0)!important; } -sup { outline: 1px solid var(--red-orange-1)!important; } -time { outline: 1px solid var(--red-orange-2)!important; } -code { outline: 1px solid var(--red-orange-3)!important; } -kbd { outline: 1px solid var(--red-orange-4)!important; } -samp { outline: 1px solid var(--red-orange-5)!important; } -var { outline: 1px solid var(--red-orange-6)!important; } -mark { outline: 1px solid var(--red-orange-7)!important; } -bdi { outline: 1px solid var(--red-orange-8)!important; } -bdo { outline: 1px solid var(--red-orange-9)!important; } -ruby { outline: 1px solid var(--red-orange-10)!important; } -ruby { outline: 1px solid var(--red-orange-11)!important; } -rt { outline: 1px solid var(--yellow-6)!important; } -rp { outline: 1px solid var(--yellow-7)!important; } -span { outline: 1px solid var(--yellow-8)!important; } -br { outline: 1px solid var(--yellow-9)!important; } -wbr { outline: 1px solid var(--yellow-10)!important; } +body { outline: 1px solid #2980B9!important; } +article { outline: 1px solid #3498DB!important; } +nav { outline: 1px solid #0088C3!important; } +aside { outline: 1px solid #33A0CE!important; } +section { outline: 1px solid #66B8DA!important; } +header { outline: 1px solid #99CFE7!important; } +footer { outline: 1px solid #CCE7F3!important; } +h1 { outline: 1px solid #162544!important; } +h2 { outline: 1px solid #314E6E!important; } +h3 { outline: 1px solid #3E5E85!important; } +h4 { outline: 1px solid #449BAF!important; } +h5 { outline: 1px solid #C7D1CB!important; } +h6 { outline: 1px solid #4371D0!important; } +main { outline: 1px solid #2F4F90!important; } +address { outline: 1px solid #1A2C51!important; } +div { outline: 1px solid #036CDB!important; } + + +p { outline: 1px solid #AC050B!important; } +hr { outline: 1px solid #FF063F!important; } +pre { outline: 1px solid #850440!important; } +blockquote { outline: 1px solid #F1B8E7!important; } +ol { outline: 1px solid #FF050C!important; } +ul { outline: 1px solid #D90416!important; } +li { outline: 1px solid #D90416!important; } +dl { outline: 1px solid #FD3427!important; } +dt { outline: 1px solid #FF0043!important; } +dd { outline: 1px solid #E80174!important; } +figure { outline: 1px solid #FF00BB!important; } +figcaption { outline: 1px solid #BF0032!important; } + + + +table { outline: 1px solid #00CC99!important; } +caption { outline: 1px solid #37FFC4!important; } +thead { outline: 1px solid #98DACA!important; } +tbody { outline: 1px solid #64A7A0!important; } +tfoot { outline: 1px solid #22746B!important; } +tr { outline: 1px solid #86C0B2!important; } +th { outline: 1px solid #A1E7D6!important; } +td { outline: 1px solid #3F5A54!important; } +col { outline: 1px solid #6C9A8F!important; } +colgroup { outline: 1px solid #6C9A9D!important; } + + +button { outline: 1px solid #DA8301!important; } +datalist { outline: 1px solid #C06000!important; } +fieldset { outline: 1px solid #D95100!important; } +form { outline: 1px solid #D23600!important; } +input { outline: 1px solid #FCA600!important; } +keygen { outline: 1px solid #B31E00!important; } +label { outline: 1px solid #EE8900!important; } +legend { outline: 1px solid #DE6D00!important; } +meter { outline: 1px solid #E8630C!important; } +optgroup { outline: 1px solid #B33600!important; } +option { outline: 1px solid #FF8A00!important; } +output { outline: 1px solid #FF9619!important; } +progress { outline: 1px solid #E57C00!important; } +select { outline: 1px solid #E26E0F!important; } +textarea { outline: 1px solid #CC5400!important; } + + + +details { outline: 1px solid #33848F!important; } +summary { outline: 1px solid #60A1A6!important; } +command { outline: 1px solid #438DA1!important; } +menu { outline: 1px solid #449DA6!important; } + + + +del { outline: 1px solid #BF0000!important; } +ins { outline: 1px solid #400000!important; } + + + +img { outline: 1px solid #22746B!important; } +iframe { outline: 1px solid #64A7A0!important; } +embed { outline: 1px solid #98DACA!important; } +object { outline: 1px solid #00CC99!important; } +param { outline: 1px solid #37FFC4!important; } +video { outline: 1px solid #6EE866!important; } +audio { outline: 1px solid #027353!important; } +source { outline: 1px solid #012426!important; } +canvas { outline: 1px solid #A2F570!important; } +track { outline: 1px solid #59A600!important; } +map { outline: 1px solid #7BE500!important; } +area { outline: 1px solid #305900!important; } + + + +a { outline: 1px solid #FF62AB!important; } +em { outline: 1px solid #800B41!important; } +strong { outline: 1px solid #FF1583!important; } +i { outline: 1px solid #803156!important; } +b { outline: 1px solid #CC1169!important; } +u { outline: 1px solid #FF0430!important; } +s { outline: 1px solid #F805E3!important; } +small { outline: 1px solid #D107B2!important; } +abbr { outline: 1px solid #4A0263!important; } +q { outline: 1px solid #240018!important; } +cite { outline: 1px solid #64003C!important; } +dfn { outline: 1px solid #B4005A!important; } +sub { outline: 1px solid #DBA0C8!important; } +sup { outline: 1px solid #CC0256!important; } +time { outline: 1px solid #D6606D!important; } +code { outline: 1px solid #E04251!important; } +kbd { outline: 1px solid #5E001F!important; } +samp { outline: 1px solid #9C0033!important; } +var { outline: 1px solid #D90047!important; } +mark { outline: 1px solid #FF0053!important; } +bdi { outline: 1px solid #BF3668!important; } +bdo { outline: 1px solid #6F1400!important; } +ruby { outline: 1px solid #FF7B93!important; } +rt { outline: 1px solid #FF2F54!important; } +rp { outline: 1px solid #803E49!important; } +span { outline: 1px solid #CC2643!important; } +br { outline: 1px solid #DB687D!important; } +wbr { outline: 1px solid #DB175B!important; } diff --git a/src/_display.css b/src/_display.css index 3ecfd30ef..5eb68b307 100644 --- a/src/_display.css +++ b/src/_display.css @@ -10,86 +10,95 @@ n = none b = block ib = inline-block - if = inline-flex - ig = inline-grid - f = flex - g = grid + it = inline-table + t = table + tc = table-cell + t-row = table-row + t-columm = table-column + t-column-group = table-column-group Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ -.dn { display: none; } -.di { display: inline; } -.db { display: block; } -.dib { display: inline-block; } -.df, .flex { display: flex; } -.dif, .inline-flex { display: inline-flex; } -.dg, -.grid { - display: grid; -} +.dn { display: none; } +.di { display: inline; } +.db { display: block; } +.dib { display: inline-block; } +.dit { display: inline-table; } +.dt { display: table; } +.dtc { display: table-cell; } +.dt-row { display: table-row; } +.dt-row-group { display: table-row-group; } +.dt-column { display: table-column; } +.dt-column-group { display: table-column-group; } -.dig, -.inline-grid { - display: inline-grid; +/* + This will set table to full width and then + all cells will be equal width +*/ +.dt--fixed { + table-layout: fixed; + width: 100%; } -@container (min-width:30em) { - .dn-s { display: none; } - .di-s { display: inline; } - .db-s { display: block; } - .dib-s { display: inline-block; } - .df-s, .flex-s { display: flex; } - .dif-s, .inline-flex-s { display: inline-flex; } - .dg-s, - .grid-s { - display: grid; - } +@media (--breakpoint-not-small) { + .dn-ns { display: none; } + .di-ns { display: inline; } + .db-ns { display: block; } + .dib-ns { display: inline-block; } + .dit-ns { display: inline-table; } + .dt-ns { display: table; } + .dtc-ns { display: table-cell; } + .dt-row-ns { display: table-row; } + .dt-row-group-ns { display: table-row-group; } + .dt-column-ns { display: table-column; } + .dt-column-group-ns { display: table-column-group; } - .dig-s, - .inline-grid-s { - display: inline-grid; + .dt--fixed-ns { + table-layout: fixed; + width: 100%; } } -@container (min-width:48em) { +@media (--breakpoint-medium) { + .dn-m { display: none; } + .di-m { display: inline; } + .db-m { display: block; } + .dib-m { display: inline-block; } + .dit-m { display: inline-table; } + .dt-m { display: table; } + .dtc-m { display: table-cell; } + .dt-row-m { display: table-row; } + .dt-row-group-m { display: table-row-group; } + .dt-column-m { display: table-column; } + .dt-column-group-m { display: table-column-group; } - .dn-m { display: none; } - .di-m { display: inline; } - .db-m { display: block; } - .dib-m { display: inline-block; } - .df-m, .flex-m { display: flex; } - .dif-m, .inline-flex-m { display: inline-flex; } - .dg-m, - .grid-m { - display: grid; - } - - .dig-m, - .inline-grid-m { - display: inline-grid; + .dt--fixed-m { + table-layout: fixed; + width: 100%; } } -@container (min-width:64em) { - .dn-l { display: none; } - .di-l { display: inline; } - .db-l { display: block; } - .dib-l { display: inline-block; } - .df-l, .flex-l { display: flex; } - .dif-l, .inline-flex-l { display: inline-flex; } - .dg-l, - .grid-l { - display: grid; - } +@media (--breakpoint-large) { + .dn-l { display: none; } + .di-l { display: inline; } + .db-l { display: block; } + .dib-l { display: inline-block; } + .dit-l { display: inline-table; } + .dt-l { display: table; } + .dtc-l { display: table-cell; } + .dt-row-l { display: table-row; } + .dt-row-group-l { display: table-row-group; } + .dt-column-l { display: table-column; } + .dt-column-group-l { display: table-column-group; } - .dig-l, - .inline-grid-l { - display: inline-grid; + .dt--fixed-l { + table-layout: fixed; + width: 100%; } } diff --git a/src/_element-defaults.css b/src/_element-defaults.css deleted file mode 100644 index 5a8026261..000000000 --- a/src/_element-defaults.css +++ /dev/null @@ -1,113 +0,0 @@ -html {} - -body {} -article {} -section {} -nav {} -aside {} -h1 {} -h2 {} -h3 {} -h4 {} -h5 {} -h6 {} -header {} -footer {} -address {} - -p {} -hr {} -pre {} -blockquote {} -ol {} -ul {} -li {} -dl {} -dt {} -dd {} -figure {} -figcaption {} -main {} -div {} - -a {} -em {} -strong {} -small {} -s {} -cite {} -q {} -dfn {} -abbr {} -ruby {} -rt {} -rp {} -data {} -time {} -code {} -var {} -samp {} -kbd {} -sub {} -sup {} -i {} -b {} -u {} -mark {} -bdi {} -bdo {} -span {} -br {} -wbr {} - -area {} -map {} - -ins {} -del {} - -picture {} -source {} -img {} -iframe {} -embed {} -object {} -param {} -video {} -audio {} -track {} - -table {} -caption {} -colgroup {} -col {} -tbody {} -thead {} -tfoot {} -tr {} -td {} -th {} - -form {} -fieldset {} -legend {} -label {} -input {} -button {} -select {} -datalist {} -optgroup {} -option {} -textarea {} -output {} -progress {} -meter {} - -details {} -summary {} -dialog {} -menu {} -menuitem {} -slot {} -template {} - diff --git a/src/_filters.css b/src/_filters.css deleted file mode 100644 index 0d805eda4..000000000 --- a/src/_filters.css +++ /dev/null @@ -1,73 +0,0 @@ -/* - - FILTER EFFECTS - - - Blur - - Grayscale - - Hue Rotate - - Invert - -*/ - -.filter-none { filter: none; } - -.blur1 { filter: blur(4px); } -.blur2 { filter: blur(16px); } -.blur3 { filter: blur(96px); } - -.grayscale1 { filter: grayscale(0); } -.grayscale2 { filter: grayscale(50%); } -.grayscale3 { filter: grayscale(100%); } - -.hue-rotate0 { filter: hue-rotate(0deg);} -.hue-rotate1 { filter: hue-rotate(45deg);} -.hue-rotate2 { filter: hue-rotate(90deg);} -.hue-rotate3 { filter: hue-rotate(135deg);} -.hue-rotate4 { filter: hue-rotate(180deg);} -.hue-rotate5 { filter: hue-rotate(225deg);} -.hue-rotate6 { filter: hue-rotate(270deg);} -.hue-rotate7 { filter: hue-rotate(315deg);} - -.invert { filter: invert(100%); } - -/* TODO: Add drop-shadow */ - -.filter-none-hover:hover { filter: none; } - -.blur1-hover:hover { filter: blur(4px); } -.blur2-hover:hover { filter: blur(16px); } -.blur3-hover:hover { filter: blur(96px); } - -.grayscale1-hover:hover { filter: grayscale(0); } -.grayscale2-hover:hover { filter: grayscale(50%); } -.grayscale3-hover:hover { filter: grayscale(100%); } - -.hue-rotate0-hover:hover { filter: hue-rotate(0deg);} -.hue-rotate1-hover:hover { filter: hue-rotate(45deg);} -.hue-rotate2-hover:hover { filter: hue-rotate(90deg);} -.hue-rotate3-hover:hover { filter: hue-rotate(135deg);} -.hue-rotate4-hover:hover { filter: hue-rotate(180deg);} -.hue-rotate5-hover:hover { filter: hue-rotate(225deg);} -.hue-rotate6-hover:hover { filter: hue-rotate(270deg);} -.hue-rotate7-hover:hover { filter: hue-rotate(315deg);} - -.invert-hover:hover { filter: invert(100%); } - -.blur1-focus:focus { filter: blur(4px); } -.blur2-focus:focus { filter: blur(16px); } -.blur3-focus:focus { filter: blur(96px); } - -.grayscale1-focus:focus { filter: grayscale(0); } -.grayscale2-focus:focus { filter: grayscale(50%); } -.grayscale3-focus:focus { filter: grayscale(100%); } - -.hue-rotate0-focus:focus { filter: hue-rotate(0deg);} -.hue-rotate1-focus:focus { filter: hue-rotate(45deg);} -.hue-rotate2-focus:focus { filter: hue-rotate(90deg);} -.hue-rotate3-focus:focus { filter: hue-rotate(135deg);} -.hue-rotate4-focus:focus { filter: hue-rotate(180deg);} -.hue-rotate5-focus:focus { filter: hue-rotate(225deg);} -.hue-rotate6-focus:focus { filter: hue-rotate(270deg);} -.hue-rotate7-focus:focus { filter: hue-rotate(315deg);} - -.invert-focus:focus { filter: invert(100%); } diff --git a/src/_flex-direction.css b/src/_flex-direction.css deleted file mode 100644 index 738c25096..000000000 --- a/src/_flex-direction.css +++ /dev/null @@ -1,37 +0,0 @@ -/* - - FLEX-DIRECTION - - Media Query Extensions: - -s = small - -m = medium - -l = large - -*/ - - -.flex-column { flex-direction: column; } -.flex-row { flex-direction: row; } -.flex-column-reverse { flex-direction: column-reverse; } -.flex-row-reverse { flex-direction: row-reverse; } - -@container (min-width:30em) { - .flex-column-s { flex-direction: column; } - .flex-row-s { flex-direction: row; } - .flex-column-reverse-s { flex-direction: column-reverse; } - .flex-row-reverse-s { flex-direction: row-reverse; } -} - -@container (min-width:48em) { - .flex-column-m { flex-direction: column; } - .flex-row-m { flex-direction: row; } - .flex-column-reverse-m { flex-direction: column-reverse; } - .flex-row-reverse-m { flex-direction: row-reverse; } -} - -@container (min-width:64em) { - .flex-column-l { flex-direction: column; } - .flex-row-l { flex-direction: row; } - .flex-column-reverse-l { flex-direction: column-reverse; } - .flex-row-reverse-l { flex-direction: row-reverse; } -} diff --git a/src/_flex-wrap.css b/src/_flex-wrap.css deleted file mode 100644 index ff32bb829..000000000 --- a/src/_flex-wrap.css +++ /dev/null @@ -1,32 +0,0 @@ -/* - - FLEX-WRAP - - Media Query Extensions: - -s = small - -m = medium - -l = large - -*/ - -.flex-wrap { flex-wrap: wrap; } -.flex-nowrap { flex-wrap: nowrap; } -.flex-wrap-reverse { flex-wrap: wrap-reverse; } - -@container (min-width:30em) { - .flex-wrap-s { flex-wrap: wrap; } - .flex-nowrap-s { flex-wrap: nowrap; } - .flex-wrap-reverse-s { flex-wrap: wrap-reverse; } -} - -@container (min-width:48em) { - .flex-wrap-m { flex-wrap: wrap; } - .flex-nowrap-m { flex-wrap: nowrap; } - .flex-wrap-reverse-m { flex-wrap: wrap-reverse; } -} - -@container (min-width:64em) { - .flex-wrap-l { flex-wrap: wrap; } - .flex-nowrap-l { flex-wrap: nowrap; } - .flex-wrap-reverse-l { flex-wrap: wrap-reverse; } -} diff --git a/src/_flexbox.css b/src/_flexbox.css index 292b8fa97..5002be7cd 100644 --- a/src/_flexbox.css +++ b/src/_flexbox.css @@ -3,12 +3,15 @@ FLEXBOX Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ +.flex { display: flex; } +.inline-flex { display: inline-flex; } + /* 1. Fix for Chrome 44 bug. * https://code.google.com/p/chromium/issues/detail?id=506893 */ .flex-auto { @@ -19,29 +22,115 @@ .flex-none { flex: none; } +.flex-column { flex-direction: column; } +.flex-row { flex-direction: row; } +.flex-wrap { flex-wrap: wrap; } +.flex-nowrap { flex-wrap: nowrap; } +.flex-wrap-reverse { flex-wrap: wrap-reverse; } +.flex-column-reverse { flex-direction: column-reverse; } +.flex-row-reverse { flex-direction: row-reverse; } + +.items-start { align-items: flex-start; } +.items-end { align-items: flex-end; } +.items-center { align-items: center; } +.items-baseline { align-items: baseline; } +.items-stretch { align-items: stretch; } + +.self-start { align-self: flex-start; } +.self-end { align-self: flex-end; } +.self-center { align-self: center; } +.self-baseline { align-self: baseline; } +.self-stretch { align-self: stretch; } + +.justify-start { justify-content: flex-start; } +.justify-end { justify-content: flex-end; } +.justify-center { justify-content: center; } +.justify-between { justify-content: space-between; } +.justify-around { justify-content: space-around; } + +.content-start { align-content: flex-start; } +.content-end { align-content: flex-end; } +.content-center { align-content: center; } +.content-between { align-content: space-between; } +.content-around { align-content: space-around; } +.content-stretch { align-content: stretch; } + +.order-0 { order: 0; } +.order-1 { order: 1; } +.order-2 { order: 2; } +.order-3 { order: 3; } +.order-4 { order: 4; } +.order-5 { order: 5; } +.order-6 { order: 6; } +.order-7 { order: 7; } +.order-8 { order: 8; } +.order-last { order: 99999; } + .flex-grow-0 { flex-grow: 0; } .flex-grow-1 { flex-grow: 1; } .flex-shrink-0 { flex-shrink: 0; } .flex-shrink-1 { flex-shrink: 1; } -@container (min-width:30em) { - .flex-s { display: flex; } - .inline-flex-s { display: inline-flex; } - .flex-auto-s { +@media (--breakpoint-not-small) { + .flex-ns { display: flex; } + .inline-flex-ns { display: inline-flex; } + .flex-auto-ns { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } - .flex-none-s { flex: none; } + .flex-none-ns { flex: none; } + .flex-column-ns { flex-direction: column; } + .flex-row-ns { flex-direction: row; } + .flex-wrap-ns { flex-wrap: wrap; } + .flex-nowrap-ns { flex-wrap: nowrap; } + .flex-wrap-reverse-ns { flex-wrap: wrap-reverse; } + .flex-column-reverse-ns { flex-direction: column-reverse; } + .flex-row-reverse-ns { flex-direction: row-reverse; } + .items-start-ns { align-items: flex-start; } + .items-end-ns { align-items: flex-end; } + .items-center-ns { align-items: center; } + .items-baseline-ns { align-items: baseline; } + .items-stretch-ns { align-items: stretch; } + + .self-start-ns { align-self: flex-start; } + .self-end-ns { align-self: flex-end; } + .self-center-ns { align-self: center; } + .self-baseline-ns { align-self: baseline; } + .self-stretch-ns { align-self: stretch; } + + .justify-start-ns { justify-content: flex-start; } + .justify-end-ns { justify-content: flex-end; } + .justify-center-ns { justify-content: center; } + .justify-between-ns { justify-content: space-between; } + .justify-around-ns { justify-content: space-around; } + + .content-start-ns { align-content: flex-start; } + .content-end-ns { align-content: flex-end; } + .content-center-ns { align-content: center; } + .content-between-ns { align-content: space-between; } + .content-around-ns { align-content: space-around; } + .content-stretch-ns { align-content: stretch; } - .flex-grow-0-s { flex-grow: 0; } - .flex-grow-1-s { flex-grow: 1; } + .order-0-ns { order: 0; } + .order-1-ns { order: 1; } + .order-2-ns { order: 2; } + .order-3-ns { order: 3; } + .order-4-ns { order: 4; } + .order-5-ns { order: 5; } + .order-6-ns { order: 6; } + .order-7-ns { order: 7; } + .order-8-ns { order: 8; } + .order-last-ns { order: 99999; } - .flex-shrink-0-s { flex-shrink: 0; } - .flex-shrink-1-s { flex-shrink: 1; } + .flex-grow-0-ns { flex-grow: 0; } + .flex-grow-1-ns { flex-grow: 1; } + + .flex-shrink-0-ns { flex-shrink: 0; } + .flex-shrink-1-ns { flex-shrink: 1; } } -@container (min-width:48em) { +@media (--breakpoint-medium) { .flex-m { display: flex; } .inline-flex-m { display: inline-flex; } .flex-auto-m { @@ -50,6 +139,48 @@ min-height: 0; /* 1 */ } .flex-none-m { flex: none; } + .flex-column-m { flex-direction: column; } + .flex-row-m { flex-direction: row; } + .flex-wrap-m { flex-wrap: wrap; } + .flex-nowrap-m { flex-wrap: nowrap; } + .flex-wrap-reverse-m { flex-wrap: wrap-reverse; } + .flex-column-reverse-m { flex-direction: column-reverse; } + .flex-row-reverse-m { flex-direction: row-reverse; } + .items-start-m { align-items: flex-start; } + .items-end-m { align-items: flex-end; } + .items-center-m { align-items: center; } + .items-baseline-m { align-items: baseline; } + .items-stretch-m { align-items: stretch; } + + .self-start-m { align-self: flex-start; } + .self-end-m { align-self: flex-end; } + .self-center-m { align-self: center; } + .self-baseline-m { align-self: baseline; } + .self-stretch-m { align-self: stretch; } + + .justify-start-m { justify-content: flex-start; } + .justify-end-m { justify-content: flex-end; } + .justify-center-m { justify-content: center; } + .justify-between-m { justify-content: space-between; } + .justify-around-m { justify-content: space-around; } + + .content-start-m { align-content: flex-start; } + .content-end-m { align-content: flex-end; } + .content-center-m { align-content: center; } + .content-between-m { align-content: space-between; } + .content-around-m { align-content: space-around; } + .content-stretch-m { align-content: stretch; } + + .order-0-m { order: 0; } + .order-1-m { order: 1; } + .order-2-m { order: 2; } + .order-3-m { order: 3; } + .order-4-m { order: 4; } + .order-5-m { order: 5; } + .order-6-m { order: 6; } + .order-7-m { order: 7; } + .order-8-m { order: 8; } + .order-last-m { order: 99999; } .flex-grow-0-m { flex-grow: 0; } .flex-grow-1-m { flex-grow: 1; } @@ -58,7 +189,7 @@ .flex-shrink-1-m { flex-shrink: 1; } } -@container (min-width:64em) { +@media (--breakpoint-large) { .flex-l { display: flex; } .inline-flex-l { display: inline-flex; } .flex-auto-l { @@ -67,6 +198,49 @@ min-height: 0; /* 1 */ } .flex-none-l { flex: none; } + .flex-column-l { flex-direction: column; } + .flex-row-l { flex-direction: row; } + .flex-wrap-l { flex-wrap: wrap; } + .flex-nowrap-l { flex-wrap: nowrap; } + .flex-wrap-reverse-l { flex-wrap: wrap-reverse; } + .flex-column-reverse-l { flex-direction: column-reverse; } + .flex-row-reverse-l { flex-direction: row-reverse; } + + .items-start-l { align-items: flex-start; } + .items-end-l { align-items: flex-end; } + .items-center-l { align-items: center; } + .items-baseline-l { align-items: baseline; } + .items-stretch-l { align-items: stretch; } + + .self-start-l { align-self: flex-start; } + .self-end-l { align-self: flex-end; } + .self-center-l { align-self: center; } + .self-baseline-l { align-self: baseline; } + .self-stretch-l { align-self: stretch; } + + .justify-start-l { justify-content: flex-start; } + .justify-end-l { justify-content: flex-end; } + .justify-center-l { justify-content: center; } + .justify-between-l { justify-content: space-between; } + .justify-around-l { justify-content: space-around; } + + .content-start-l { align-content: flex-start; } + .content-end-l { align-content: flex-end; } + .content-center-l { align-content: center; } + .content-between-l { align-content: space-between; } + .content-around-l { align-content: space-around; } + .content-stretch-l { align-content: stretch; } + + .order-0-l { order: 0; } + .order-1-l { order: 1; } + .order-2-l { order: 2; } + .order-3-l { order: 3; } + .order-4-l { order: 4; } + .order-5-l { order: 5; } + .order-6-l { order: 6; } + .order-7-l { order: 7; } + .order-8-l { order: 8; } + .order-last-l { order: 99999; } .flex-grow-0-l { flex-grow: 0; } .flex-grow-1-l { flex-grow: 1; } diff --git a/src/_floats.css b/src/_floats.css index 46684347d..d5b391201 100644 --- a/src/_floats.css +++ b/src/_floats.css @@ -18,7 +18,7 @@ n = none Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -26,24 +26,24 @@ -.fl { float: left; } -.fr { float: right; } +.fl { float: left; _display: inline; } +.fr { float: right; _display: inline; } .fn { float: none; } -@container (min-width:30em) { - .fl-s { float: left; } - .fr-s { float: right; } - .fn-s { float: none; } +@media (--breakpoint-not-small) { + .fl-ns { float: left; _display: inline; } + .fr-ns { float: right; _display: inline; } + .fn-ns { float: none; } } -@container (min-width:48em) { - .fl-m { float: left; } - .fr-m { float: right; } +@media (--breakpoint-medium) { + .fl-m { float: left; _display: inline; } + .fr-m { float: right; _display: inline; } .fn-m { float: none; } } -@container (min-width:64em) { - .fl-l { float: left; } - .fr-l { float: right; } +@media (--breakpoint-large) { + .fl-l { float: left; _display: inline; } + .fr-l { float: right; _display: inline; } .fn-l { float: none; } } diff --git a/src/_font-family.css b/src/_font-family.css index 15ad41e25..f719fa334 100644 --- a/src/_font-family.css +++ b/src/_font-family.css @@ -1,10 +1,100 @@ -/* +/* FONT FAMILY GROUPS Docs: http://tachyons.io/docs/typography/font-family/ */ -.f-heading { font-family: var(--font-family-heading, sans-serif); } -.f-body { font-family: var(--font-family-body, sans-serif); } -.f-mono { font-family: var(--font-family-mono, monospace); } + +.sans-serif { + font-family: -apple-system, BlinkMacSystemFont, + 'avenir next', avenir, + 'helvetica neue', helvetica, + ubuntu, + roboto, noto, + 'segoe ui', arial, + sans-serif; +} + +.serif { + font-family: georgia, + times, + serif; +} + +.system-sans-serif { + font-family: sans-serif; +} + +.system-serif { + font-family: serif; +} + + +/* Monospaced Typefaces (for code) */ + +/* From http://cssfontstack.com */ +code, .code { + font-family: Consolas, + monaco, + monospace; +} + +.courier { + font-family: 'Courier Next', + courier, + monospace; +} + + +/* Sans-Serif Typefaces */ + +.helvetica { + font-family: 'helvetica neue', helvetica, + sans-serif; +} + +.avenir { + font-family: 'avenir next', avenir, + sans-serif; +} + + +/* Serif Typefaces */ + +.athelas { + font-family: athelas, + georgia, + serif; +} + +.georgia { + font-family: georgia, + serif; +} + +.times { + font-family: times, + serif; +} + +.bodoni { + font-family: "Bodoni MT", + serif; +} + +.calisto { + font-family: "Calisto MT", + serif; +} + +.garamond { + font-family: garamond, + serif; +} + +.baskerville { + font-family: baskerville, + serif; +} + diff --git a/src/_font-style.css b/src/_font-style.css index 8e3c3629d..d095dfea5 100644 --- a/src/_font-style.css +++ b/src/_font-style.css @@ -4,7 +4,7 @@ Docs: http://tachyons.io/docs/typography/font-style/ Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -13,3 +13,17 @@ .i { font-style: italic; } .fs-normal { font-style: normal; } +@media (--breakpoint-not-small) { + .i-ns { font-style: italic; } + .fs-normal-ns { font-style: normal; } +} + +@media (--breakpoint-medium) { + .i-m { font-style: italic; } + .fs-normal-m { font-style: normal; } +} + +@media (--breakpoint-large) { + .i-l { font-style: italic; } + .fs-normal-l { font-style: normal; } +} diff --git a/src/_font-weight.css b/src/_font-weight.css index 54b88cb86..990a05a7f 100644 --- a/src/_font-weight.css +++ b/src/_font-weight.css @@ -18,7 +18,7 @@ 9 = literal value 900 Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -37,21 +37,21 @@ .fw9 { font-weight: 900; } -@container (min-width:30em) { - .normal-s { font-weight: normal; } - .b-s { font-weight: bold; } - .fw1-s { font-weight: 100; } - .fw2-s { font-weight: 200; } - .fw3-s { font-weight: 300; } - .fw4-s { font-weight: 400; } - .fw5-s { font-weight: 500; } - .fw6-s { font-weight: 600; } - .fw7-s { font-weight: 700; } - .fw8-s { font-weight: 800; } - .fw9-s { font-weight: 900; } +@media (--breakpoint-not-small) { + .normal-ns { font-weight: normal; } + .b-ns { font-weight: bold; } + .fw1-ns { font-weight: 100; } + .fw2-ns { font-weight: 200; } + .fw3-ns { font-weight: 300; } + .fw4-ns { font-weight: 400; } + .fw5-ns { font-weight: 500; } + .fw6-ns { font-weight: 600; } + .fw7-ns { font-weight: 700; } + .fw8-ns { font-weight: 800; } + .fw9-ns { font-weight: 900; } } -@container (min-width:48em) { +@media (--breakpoint-medium) { .normal-m { font-weight: normal; } .b-m { font-weight: bold; } .fw1-m { font-weight: 100; } @@ -65,7 +65,7 @@ .fw9-m { font-weight: 900; } } -@container (min-width:64em) { +@media (--breakpoint-large) { .normal-l { font-weight: normal; } .b-l { font-weight: bold; } .fw1-l { font-weight: 100; } diff --git a/src/_forms.css b/src/_forms.css index 3f27a94a4..fe0b8ab6c 100644 --- a/src/_forms.css +++ b/src/_forms.css @@ -7,7 +7,6 @@ .input-reset { -webkit-appearance: none; -moz-appearance: none; - appearance: none; } .button-reset::-moz-focus-inner, diff --git a/src/_gap-column.css b/src/_gap-column.css deleted file mode 100644 index 7367316b9..000000000 --- a/src/_gap-column.css +++ /dev/null @@ -1,59 +0,0 @@ -/* - GAP: GRID AND FLEX SPACING - Docs: http://tachyons.io/docs/layout/gap/ - - Base: - g = gap - - - Media Query Extensions: - -s = small - -m = medium - -l = large - -*/ - - -.gc0 { gap-column: var(--spacing-0, 0); } -.gc1 { gap-column: var(--spacing-1, 4px); } -.gc2 { gap-column: var(--spacing-2, 8px); } -.gc3 { gap-column: var(--spacing-3, 16px); } -.gc4 { gap-column: var(--spacing-4, 32px); } -.gc5 { gap-column: var(--spacing-5, 64px); } -.gc6 { gap-column: var(--spacing-6, 128px); } -.gc7 { gap-column: var(--spacing-7, 256px); } - -@container (min-width:30em) { - .gc0-s { gap-column: var(--spacing-0, 0); } - .gc1-s { gap-column: var(--spacing-1, 4px); } - .gc2-s { gap-column: var(--spacing-2, 8px); } - .gc3-s { gap-column: var(--spacing-3, 16px); } - .gc4-s { gap-column: var(--spacing-4, 32px); } - .gc5-s { gap-column: var(--spacing-5, 64px); } - .gc6-s { gap-column: var(--spacing-6, 128px); } - .gc7-s { gap-column: var(--spacing-7, 256px); } -} - -@container (min-width:48em) { - .gc0-m { gap-column: var(--spacing-0, 0); } - .gc1-m { gap-column: var(--spacing-1, 4px); } - .gc2-m { gap-column: var(--spacing-2, 8px); } - .gc3-m { gap-column: var(--spacing-3, 16px); } - .gc4-m { gap-column: var(--spacing-4, 32px); } - .gc5-m { gap-column: var(--spacing-5, 64px); } - .gc6-m { gap-column: var(--spacing-6, 128px); } - .gc7-m { gap-column: var(--spacing-7, 256px); } -} - - -@container (min-width:64em) { - .gc0-l { gap-column: var(--spacing-0); } - .gc1-l { gap-column: var(--spacing-1); } - .gc2-l { gap-column: var(--spacing-2); } - .gc3-l { gap-column: var(--spacing-3); } - .gc4-l { gap-column: var(--spacing-4); } - .gc5-l { gap-column: var(--spacing-5); } - .gc6-l { gap-column: var(--spacing-6); } - .gc7-l { gap-column: var(--spacing-7); } -} - diff --git a/src/_gap-row.css b/src/_gap-row.css deleted file mode 100644 index a32a39f20..000000000 --- a/src/_gap-row.css +++ /dev/null @@ -1,59 +0,0 @@ -/* - GAP: GRID AND FLEX SPACING - Docs: http://tachyons.io/docs/layout/gap/ - - Base: - g = gap - - - Media Query Extensions: - -s = small - -m = medium - -l = large - -*/ - - -.gr0 { gap-row: var(--spacing-0, 0); } -.gr1 { gap-row: var(--spacing-1, 4px); } -.gr2 { gap-row: var(--spacing-2, 8px); } -.gr3 { gap-row: var(--spacing-3, 16px); } -.gr4 { gap-row: var(--spacing-4, 32px); } -.gr5 { gap-row: var(--spacing-5, 64px); } -.gr6 { gap-row: var(--spacing-6, 128px); } -.gr7 { gap-row: var(--spacing-7, 256px); } - -@container (min-width:30em) { - .gr0-s { gap-row: var(--spacing-0, 0); } - .gr1-s { gap-row: var(--spacing-1, 4px); } - .gr2-s { gap-row: var(--spacing-2, 8px); } - .gr3-s { gap-row: var(--spacing-3, 16px); } - .gr4-s { gap-row: var(--spacing-4, 32px); } - .gr5-s { gap-row: var(--spacing-5, 64px); } - .gr6-s { gap-row: var(--spacing-6, 128px); } - .gr7-s { gap-row: var(--spacing-7, 256px); } -} - -@container (min-width:48em) { - .gr0-m { gap-row: var(--spacing-0, 0); } - .gr1-m { gap-row: var(--spacing-1, 4px); } - .gr2-m { gap-row: var(--spacing-2, 8px); } - .gr3-m { gap-row: var(--spacing-3, 16px); } - .gr4-m { gap-row: var(--spacing-4, 32px); } - .gr5-m { gap-row: var(--spacing-5, 64px); } - .gr6-m { gap-row: var(--spacing-6, 128px); } - .gr7-m { gap-row: var(--spacing-7, 256px); } -} - - -@container (min-width:64em) { - .gr0-l { gap-row: var(--spacing-0); } - .gr1-l { gap-row: var(--spacing-1); } - .gr2-l { gap-row: var(--spacing-2); } - .gr3-l { gap-row: var(--spacing-3); } - .gr4-l { gap-row: var(--spacing-4); } - .gr5-l { gap-row: var(--spacing-5); } - .gr6-l { gap-row: var(--spacing-6); } - .gr7-l { gap-row: var(--spacing-7); } -} - diff --git a/src/_gap.css b/src/_gap.css deleted file mode 100644 index 26cce6752..000000000 --- a/src/_gap.css +++ /dev/null @@ -1,59 +0,0 @@ -/* - GAP: GRID AND FLEX SPACING - Docs: http://tachyons.io/docs/layout/gap/ - - Base: - g = gap - - - Media Query Extensions: - -s = small - -m = medium - -l = large - -*/ - - -.g0 { gap: var(--spacing-0, 0); } -.g1 { gap: var(--spacing-1, 4px); } -.g2 { gap: var(--spacing-2, 8px); } -.g3 { gap: var(--spacing-3, 16px); } -.g4 { gap: var(--spacing-4, 32px); } -.g5 { gap: var(--spacing-5, 64px); } -.g6 { gap: var(--spacing-6, 128px); } -.g7 { gap: var(--spacing-7, 256px); } - -@container (min-width:30em) { - .g0-s { gap: var(--spacing-0, 0); } - .g1-s { gap: var(--spacing-1, 4px); } - .g2-s { gap: var(--spacing-2, 8px); } - .g3-s { gap: var(--spacing-3, 16px); } - .g4-s { gap: var(--spacing-4, 32px); } - .g5-s { gap: var(--spacing-5, 64px); } - .g6-s { gap: var(--spacing-6, 128px); } - .g7-s { gap: var(--spacing-7, 256px); } -} - -@container (min-width:48em) { - .g0-m { gap: var(--spacing-0, 0); } - .g1-m { gap: var(--spacing-1, 4px); } - .g2-m { gap: var(--spacing-2, 8px); } - .g3-m { gap: var(--spacing-3, 16px); } - .g4-m { gap: var(--spacing-4, 32px); } - .g5-m { gap: var(--spacing-5, 64px); } - .g6-m { gap: var(--spacing-6, 128px); } - .g7-m { gap: var(--spacing-7, 256px); } -} - - -@container (min-width:64em) { - .g0-l { gap: var(--spacing-0); } - .g1-l { gap: var(--spacing-1); } - .g2-l { gap: var(--spacing-2); } - .g3-l { gap: var(--spacing-3); } - .g4-l { gap: var(--spacing-4); } - .g5-l { gap: var(--spacing-5); } - .g6-l { gap: var(--spacing-6); } - .g7-l { gap: var(--spacing-7); } -} - diff --git a/src/_glass.css b/src/_glass.css deleted file mode 100644 index 0fb72838f..000000000 --- a/src/_glass.css +++ /dev/null @@ -1,202 +0,0 @@ -.glass1 { - background: rgba(255, 255, 255, 0); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass2 { - background: rgba(255, 255, 255, 0.05); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass3 { - background: rgba(255, 255, 255, 0.15); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass4 { - background: rgba(255, 255, 255, 0.25); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass5 { - background: rgba(255, 255, 255, 0); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(16px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass6 { - background: rgba(255, 255, 255, 0.05); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(16px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass7 { - background: rgba(255, 255, 255, 0.15); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(16px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass8 { - background: rgba(255, 255, 255, 0.25); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(16px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass9 { - background: rgba(255, 255, 255, 0.25); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass10 { - background: rgba(255, 255, 255, 0); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass1-hover:hover { - background: rgba(255, 255, 255, 0); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass2-hover:hover { - background: rgba(255, 255, 255, 0.05); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass3-hover:hover { - background: rgba(255, 255, 255, 0.15); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass4-hover:hover { - background: rgba(255, 255, 255, 0.25); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass5-hover:hover { - background: rgba(255, 255, 255, 0); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(16px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass6-hover:hover { - background: rgba(255, 255, 255, 0.05); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(16px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass7-hover:hover { - background: rgba(255, 255, 255, 0.15); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(16px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass8-hover:hover { - background: rgba(255, 255, 255, 0.25); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(16px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass9-hover:hover { - background: rgba(255, 255, 255, 0.25); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass10-hover:hover { - background: rgba(255, 255, 255, 0); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass1-focus:focus { - background: rgba(255, 255, 255, 0); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass2-focus:focus { - background: rgba(255, 255, 255, 0.05); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass3-focus:focus { - background: rgba(255, 255, 255, 0.15); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass4-focus:focus { - background: rgba(255, 255, 255, 0.25); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass5-focus:focus { - background: rgba(255, 255, 255, 0); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(16px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass6-focus:focus { - background: rgba(255, 255, 255, 0.05); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(16px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass7-focus:focus { - background: rgba(255, 255, 255, 0.15); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(16px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass8-focus:focus { - background: rgba(255, 255, 255, 0.25); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(16px); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass9-focus:focus { - background: rgba(255, 255, 255, 0.25); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.glass10-focus:focus { - background: rgba(255, 255, 255, 0); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - border: 1px solid rgba(255, 255, 255, 0.15); -} diff --git a/src/_gradients.css b/src/_gradients.css deleted file mode 100644 index f6113a612..000000000 --- a/src/_gradients.css +++ /dev/null @@ -1,57 +0,0 @@ -/* - - GRADIENTS - - -*/ - -.gradient-1 { - background: linear-gradient( - var(--gradient-degree), - var(--gradient-color-1), - var(--gradient-color-2) - ); -} - -.gradient-2 { - background: linear-gradient( - var(--gradient-degree), - var(--gradient-color-1) var(--gradient-stop), - var(--gradient-color-2) var(--gradient-stop) - ); -} - -.gradient-3 { - background: repeating-linear-gradient( - var(--gradient-degree), - transparent 0px, - transparent var(--gradient-stripe-width), - var(--gradient-color-1) var(--gradient-stripe-width), - var(--gradient-color-1) calc(var(--gradient-stripe-width) + var(--gradient-stripe-width-2)) - ); -} - -.gradient-4 { - background: repeating-radial-gradient( - circle, - transparent 0px, - transparent var(--gradient-stripe-width), - var(--gradient-color-1) var(--gradient-stripe-width), - var(--gradient-color-1) calc(var(--gradient-stripe-width) + var(--gradient-stripe-width-2)) - ); -} - - - -@container (min-width:30em) { - -} - -@container (min-width:48em) { - -} - -@container (min-width:64em) { - -} - diff --git a/src/_grid-column.css b/src/_grid-column.css deleted file mode 100644 index 436ee79bd..000000000 --- a/src/_grid-column.css +++ /dev/null @@ -1,242 +0,0 @@ -/* - - Grid Column - Docs: http://tachyons.io/docs/grid-column - - This sets the width of the element via declaring how many columns wide it should be - - Base: - cols = columns - -*/ - -.col-1 { grid-column: span 1 / span 1; } -.col-2 { grid-column: span 2 / span 2; } -.col-3 { grid-column: span 3 / span 3; } -.col-4 { grid-column: span 4 / span 4; } -.col-5 { grid-column: span 5 / span 5; } -.col-6 { grid-column: span 6 / span 6; } -.col-7 { grid-column: span 7 / span 7; } -.col-8 { grid-column: span 8 / span 8; } -.col-9 { grid-column: span 9 / span 9; } -.col-10 { grid-column: span 10 / span 10; } -.col-11 { grid-column: span 11 / span 11; } -.col-12 { grid-column: span 12 / span 12; } -.col-13 { grid-column: span 13 / span 13; } -.col-14 { grid-column: span 14 / span 14; } -.col-15 { grid-column: span 15 / span 15; } -.col-16 { grid-column: span 16 / span 16; } -.col-full { grid-column: 1 / -1; } -.col-center1 { grid-column: 2 / -2; } -.col-center2 { grid-column: 3 / -3; } -.col-center3 { grid-column: 4 / -4; } -.col-center4 { grid-column: 6 / -6; } -.col-auto { grid-column: auto; } - -.start-1 { grid-column-start: 1; } -.start-2 { grid-column-start: 2; } -.start-3 { grid-column-start: 3; } -.start-4 { grid-column-start: 4; } -.start-5 { grid-column-start: 5; } -.start-6 { grid-column-start: 6; } -.start-7 { grid-column-start: 7; } -.start-8 { grid-column-start: 8; } -.start-9 { grid-column-start: 9; } -.start-10 { grid-column-start: 10; } -.start-11 { grid-column-start: 11; } -.start-12 { grid-column-start: 12; } -.start-13 { grid-column-start: 13; } -.start-14 { grid-column-start: 14; } -.start-15 { grid-column-start: 15; } - -.end-1 { grid-column-end: 1; } -.end-2 { grid-column-end: 2; } -.end-3 { grid-column-end: 3; } -.end-4 { grid-column-end: 4; } -.end-5 { grid-column-end: 5; } -.end-6 { grid-column-end: 6; } -.end-7 { grid-column-end: 7; } -.end-8 { grid-column-end: 8; } -.end-9 { grid-column-end: 9; } -.end-10 { grid-column-end: 10; } -.end-11 { grid-column-end: 11; } -.end-12 { grid-column-end: 12; } -.end-13 { grid-column-end: 13; } -.end-14 { grid-column-end: 14; } -.end-15 { grid-column-end: 15; } -.end-16 { grid-column-end: 16; } - -@container (min-width:30em) { - .col-1-s { grid-column: span 1 / span 1; } - .col-2-s { grid-column: span 2 / span 2; } - .col-3-s { grid-column: span 3 / span 3; } - .col-4-s { grid-column: span 4 / span 4; } - .col-5-s { grid-column: span 5 / span 5; } - .col-6-s { grid-column: span 6 / span 6; } - .col-7-s { grid-column: span 7 / span 7; } - .col-8-s { grid-column: span 8 / span 8; } - .col-9-s { grid-column: span 9 / span 9; } - .col-10-s { grid-column: span 10 / span 10; } - .col-11-s { grid-column: span 11 / span 11; } - .col-12-s { grid-column: span 12 / span 12; } - .col-13-s { grid-column: span 13 / span 13; } - .col-14-s { grid-column: span 14 / span 14; } - .col-15-s { grid-column: span 15 / span 15; } - .col-16-s { grid-column: span 16 / span 16; } - .col-full-s { grid-column: 1 / -1; } - .col-center1-s { grid-column: 2 / -2; } - .col-center2-s { grid-column: 3 / -3; } - .col-center3-s { grid-column: 4 / -4; } - .col-center4-s { grid-column: 6 / -6; } - .col-auto-s { grid-column: auto; } - - .start-1-s { grid-column-start: 1; } - .start-2-s { grid-column-start: 2; } - .start-3-s { grid-column-start: 3; } - .start-4-s { grid-column-start: 4; } - .start-5-s { grid-column-start: 5; } - .start-6-s { grid-column-start: 6; } - .start-7-s { grid-column-start: 7; } - .start-8-s { grid-column-start: 8; } - .start-9-s { grid-column-start: 9; } - .start-10-s { grid-column-start: 10; } - .start-11-s { grid-column-start: 11; } - .start-12-s { grid-column-start: 12; } - .start-13-s { grid-column-start: 13; } - .start-14-s { grid-column-start: 14; } - .start-15-s { grid-column-start: 15; } - - .end-1-s { grid-column-end: 1; } - .end-2-s { grid-column-end: 2; } - .end-3-s { grid-column-end: 3; } - .end-4-s { grid-column-end: 4; } - .end-5-s { grid-column-end: 5; } - .end-6-s { grid-column-end: 6; } - .end-7-s { grid-column-end: 7; } - .end-8-s { grid-column-end: 8; } - .end-9-s { grid-column-end: 9; } - .end-10-s { grid-column-end: 10; } - .end-11-s { grid-column-end: 11; } - .end-12-s { grid-column-end: 12; } - .end-13-s { grid-column-end: 13; } - .end-14-s { grid-column-end: 14; } - .end-15-s { grid-column-end: 15; } - .end-16-s { grid-column-end: 16; } - -} - -@container (min-width:48em) { - .col-1-m { grid-column: span 1 / span 1; } - .col-2-m { grid-column: span 2 / span 2; } - .col-3-m { grid-column: span 3 / span 3; } - .col-4-m { grid-column: span 4 / span 4; } - .col-5-m { grid-column: span 5 / span 5; } - .col-6-m { grid-column: span 6 / span 6; } - .col-7-m { grid-column: span 7 / span 7; } - .col-8-m { grid-column: span 8 / span 8; } - .col-9-m { grid-column: span 9 / span 9; } - .col-10-m { grid-column: span 10 / span 10; } - .col-11-m { grid-column: span 11 / span 11; } - .col-12-m { grid-column: span 12 / span 12; } - .col-13-m { grid-column: span 13 / span 13; } - .col-14-m { grid-column: span 14 / span 14; } - .col-15-m { grid-column: span 15 / span 15; } - .col-16-m { grid-column: span 16 / span 16; } - .col-full-m { grid-column: 1 / -1; } - .col-center1-m { grid-column: 2 / -2; } - .col-center2-m { grid-column: 3 / -3; } - .col-center3-m { grid-column: 4 / -4; } - .col-center4-m { grid-column: 6 / -6; } - .col-auto-m { grid-column: auto; } - - .start-1-m { grid-column-start: 1; } - .start-2-m { grid-column-start: 2; } - .start-3-m { grid-column-start: 3; } - .start-4-m { grid-column-start: 4; } - .start-5-m { grid-column-start: 5; } - .start-6-m { grid-column-start: 6; } - .start-7-m { grid-column-start: 7; } - .start-8-m { grid-column-start: 8; } - .start-9-m { grid-column-start: 9; } - .start-10-m { grid-column-start: 10; } - .start-11-m { grid-column-start: 11; } - .start-12-m { grid-column-start: 12; } - .start-13-m { grid-column-start: 13; } - .start-14-m { grid-column-start: 14; } - .start-15-m { grid-column-start: 15; } - - .end-1-m { grid-column-end: 1; } - .end-2-m { grid-column-end: 2; } - .end-3-m { grid-column-end: 3; } - .end-4-m { grid-column-end: 4; } - .end-5-m { grid-column-end: 5; } - .end-6-m { grid-column-end: 6; } - .end-7-m { grid-column-end: 7; } - .end-8-m { grid-column-end: 8; } - .end-9-m { grid-column-end: 9; } - .end-10-m { grid-column-end: 10; } - .end-11-m { grid-column-end: 11; } - .end-12-m { grid-column-end: 12; } - .end-13-m { grid-column-end: 13; } - .end-14-m { grid-column-end: 14; } - .end-15-m { grid-column-end: 15; } - .end-16-m { grid-column-end: 16; } -} - -@container (min-width:64em) { - .col-1-l { grid-column: span 1 / span 1; } - .col-2-l { grid-column: span 2 / span 2; } - .col-3-l { grid-column: span 3 / span 3; } - .col-4-l { grid-column: span 4 / span 4; } - .col-5-l { grid-column: span 5 / span 5; } - .col-6-l { grid-column: span 6 / span 6; } - .col-7-l { grid-column: span 7 / span 7; } - .col-8-l { grid-column: span 8 / span 8; } - .col-9-l { grid-column: span 9 / span 9; } - .col-10-l { grid-column: span 10 / span 10; } - .col-11-l { grid-column: span 11 / span 11; } - .col-12-l { grid-column: span 12 / span 12; } - .col-13-l { grid-column: span 13 / span 13; } - .col-14-l { grid-column: span 14 / span 14; } - .col-15-l { grid-column: span 15 / span 15; } - .col-16-l { grid-column: span 16 / span 16; } - .col-full-l { grid-column: 1 / -1; } - .col-center1-l { grid-column: 2 / -2; } - .col-center2-l { grid-column: 3 / -3; } - .col-center3-l { grid-column: 4 / -4; } - .col-center4-l { grid-column: 6 / -6; } - .col-auto-l { grid-column: auto; } - - .start-1-l { grid-column-start: 1; } - .start-2-l { grid-column-start: 2; } - .start-3-l { grid-column-start: 3; } - .start-4-l { grid-column-start: 4; } - .start-5-l { grid-column-start: 5; } - .start-6-l { grid-column-start: 6; } - .start-7-l { grid-column-start: 7; } - .start-8-l { grid-column-start: 8; } - .start-9-l { grid-column-start: 9; } - .start-10-l { grid-column-start: 10; } - .start-11-l { grid-column-start: 11; } - .start-12-l { grid-column-start: 12; } - .start-13-l { grid-column-start: 13; } - .start-14-l { grid-column-start: 14; } - .start-15-l { grid-column-start: 15; } - - .end-1-l { grid-column-end: 1; } - .end-2-l { grid-column-end: 2; } - .end-3-l { grid-column-end: 3; } - .end-4-l { grid-column-end: 4; } - .end-5-l { grid-column-end: 5; } - .end-6-l { grid-column-end: 6; } - .end-7-l { grid-column-end: 7; } - .end-8-l { grid-column-end: 8; } - .end-9-l { grid-column-end: 9; } - .end-10-l { grid-column-end: 10; } - .end-11-l { grid-column-end: 11; } - .end-12-l { grid-column-end: 12; } - .end-13-l { grid-column-end: 13; } - .end-14-l { grid-column-end: 14; } - .end-15-l { grid-column-end: 15; } - .end-16-l { grid-column-end: 16; } -} diff --git a/src/_grid-row.css b/src/_grid-row.css deleted file mode 100644 index d69f1ceba..000000000 --- a/src/_grid-row.css +++ /dev/null @@ -1,161 +0,0 @@ -/* - - Grid Row - Docs: http://tachyons.io/docs/layout/grid-column-row - - This sets the width of the element via declaring how many columns wide it should be - - Base: - cols = columns - -*/ - -.row-auto { grid-row: auto; } - -.row-start-1 { grid-row-start: 1; } -.row-start-2 { grid-row-start: 2; } -.row-start-3 { grid-row-start: 3; } -.row-start-4 { grid-row-start: 4; } -.row-start-5 { grid-row-start: 5; } -.row-start-6 { grid-row-start: 6; } -.row-start-7 { grid-row-start: 7; } -.row-start-8 { grid-row-start: 8; } -.row-start-9 { grid-row-start: 9; } -.row-start-10 { grid-row-start: 10; } -.row-start-11 { grid-row-start: 11; } -.row-start-12 { grid-row-start: 12; } -.row-start-13 { grid-row-start: 13; } -.row-start-14 { grid-row-start: 14; } -.row-start-15 { grid-row-start: 15; } -.row-start-16 { grid-row-start: 16; } - -.row-end-1 { grid-row-end: 1; } -.row-end-2 { grid-row-end: 2; } -.row-end-3 { grid-row-end: 3; } -.row-end-4 { grid-row-end: 4; } -.row-end-5 { grid-row-end: 5; } -.row-end-6 { grid-row-end: 6; } -.row-end-7 { grid-row-end: 7; } -.row-end-8 { grid-row-end: 8; } -.row-end-9 { grid-row-end: 9; } -.row-end-10 { grid-row-end: 10; } -.row-end-11 { grid-row-end: 11; } -.row-end-12 { grid-row-end: 12; } -.row-end-13 { grid-row-end: 13; } -.row-end-14 { grid-row-end: 14; } -.row-end-15 { grid-row-end: 15; } -.row-end-16 { grid-row-end: 16; } - -@container (min-width:30em) { - .row-auto-s { grid-row: auto; } - - .row-start-1-s { grid-row-start: 1; } - .row-start-2-s { grid-row-start: 2; } - .row-start-3-s { grid-row-start: 3; } - .row-start-4-s { grid-row-start: 4; } - .row-start-5-s { grid-row-start: 5; } - .row-start-6-s { grid-row-start: 6; } - .row-start-7-s { grid-row-start: 7; } - .row-start-8-s { grid-row-start: 8; } - .row-start-9-s { grid-row-start: 9; } - .row-start-10-s { grid-row-start: 10; } - .row-start-11-s { grid-row-start: 11; } - .row-start-12-s { grid-row-start: 12; } - .row-start-13-s { grid-row-start: 13; } - .row-start-14-s { grid-row-start: 14; } - .row-start-15-s { grid-row-start: 15; } - .row-start-16-s { grid-row-start: 16; } - - .row-end-1-s { grid-row-end: 1; } - .row-end-2-s { grid-row-end: 2; } - .row-end-3-s { grid-row-end: 3; } - .row-end-4-s { grid-row-end: 4; } - .row-end-5-s { grid-row-end: 5; } - .row-end-6-s { grid-row-end: 6; } - .row-end-7-s { grid-row-end: 7; } - .row-end-8-s { grid-row-end: 8; } - .row-end-9-s { grid-row-end: 9; } - .row-end-10-s { grid-row-end: 10; } - .row-end-11-s { grid-row-end: 11; } - .row-end-12-s { grid-row-end: 12; } - .row-end-13-s { grid-row-end: 13; } - .row-end-14-s { grid-row-end: 14; } - .row-end-15-s { grid-row-end: 15; } - .row-end-16-s { grid-row-end: 16; } -} - -@container (min-width:48em) { - .row-auto-m { grid-row: auto; } - - .row-start-1-m { grid-row-start: 1; } - .row-start-2-m { grid-row-start: 2; } - .row-start-3-m { grid-row-start: 3; } - .row-start-4-m { grid-row-start: 4; } - .row-start-5-m { grid-row-start: 5; } - .row-start-6-m { grid-row-start: 6; } - .row-start-7-m { grid-row-start: 7; } - .row-start-8-m { grid-row-start: 8; } - .row-start-9-m { grid-row-start: 9; } - .row-start-10-m { grid-row-start: 10; } - .row-start-11-m { grid-row-start: 11; } - .row-start-12-m { grid-row-start: 12; } - .row-start-13-m { grid-row-start: 13; } - .row-start-14-m { grid-row-start: 14; } - .row-start-15-m { grid-row-start: 15; } - .row-start-16-m { grid-row-start: 16; } - - .row-end-1-m { grid-row-end: 1; } - .row-end-2-m { grid-row-end: 2; } - .row-end-3-m { grid-row-end: 3; } - .row-end-4-m { grid-row-end: 4; } - .row-end-5-m { grid-row-end: 5; } - .row-end-6-m { grid-row-end: 6; } - .row-end-7-m { grid-row-end: 7; } - .row-end-8-m { grid-row-end: 8; } - .row-end-9-m { grid-row-end: 9; } - .row-end-10-m { grid-row-end: 10; } - .row-end-11-m { grid-row-end: 11; } - .row-end-12-m { grid-row-end: 12; } - .row-end-13-m { grid-row-end: 13; } - .row-end-14-m { grid-row-end: 14; } - .row-end-15-m { grid-row-end: 15; } - .row-end-16-m { grid-row-end: 16; } -} - -@container (min-width:64em) { - .row-auto-l { grid-row: auto; } - - .row-start-1-l { grid-row-start: 1; } - .row-start-2-l { grid-row-start: 2; } - .row-start-3-l { grid-row-start: 3; } - .row-start-4-l { grid-row-start: 4; } - .row-start-5-l { grid-row-start: 5; } - .row-start-6-l { grid-row-start: 6; } - .row-start-7-l { grid-row-start: 7; } - .row-start-8-l { grid-row-start: 8; } - .row-start-9-l { grid-row-start: 9; } - .row-start-10-l { grid-row-start: 10; } - .row-start-11-l { grid-row-start: 11; } - .row-start-12-l { grid-row-start: 12; } - .row-start-13-l { grid-row-start: 13; } - .row-start-14-l { grid-row-start: 14; } - .row-start-15-l { grid-row-start: 15; } - .row-start-16-l { grid-row-start: 16; } - - .row-end-1-l { grid-row-end: 1; } - .row-end-2-l { grid-row-end: 2; } - .row-end-3-l { grid-row-end: 3; } - .row-end-4-l { grid-row-end: 4; } - .row-end-5-l { grid-row-end: 5; } - .row-end-6-l { grid-row-end: 6; } - .row-end-7-l { grid-row-end: 7; } - .row-end-8-l { grid-row-end: 8; } - .row-end-9-l { grid-row-end: 9; } - .row-end-10-l { grid-row-end: 10; } - .row-end-11-l { grid-row-end: 11; } - .row-end-12-l { grid-row-end: 12; } - .row-end-13-l { grid-row-end: 13; } - .row-end-14-l { grid-row-end: 14; } - .row-end-15-l { grid-row-end: 15; } - .row-end-16-l { grid-row-end: 16; } -} diff --git a/src/_grid-template-columns.css b/src/_grid-template-columns.css deleted file mode 100644 index c7590c705..000000000 --- a/src/_grid-template-columns.css +++ /dev/null @@ -1,135 +0,0 @@ -/* - - Grid Template Columns - Docs: http://tachyons.io/docs/layout/grid-template-columns/ - - Base: - cols = columns - -*/ - -.cols-1 { grid-template-columns: repeat(1, 1fr) } -.cols-2 { grid-template-columns: repeat(2, 1fr) } -.cols-3 { grid-template-columns: repeat(3, 1fr) } -.cols-4 { grid-template-columns: repeat(4, 1fr) } -.cols-5 { grid-template-columns: repeat(5, 1fr) } -.cols-6 { grid-template-columns: repeat(6, 1fr) } -.cols-7 { grid-template-columns: repeat(7, 1fr) } -.cols-8 { grid-template-columns: repeat(8, 1fr) } -.cols-9 { grid-template-columns: repeat(9, 1fr) } -.cols-10 { grid-template-columns: repeat(10, 1fr) } -.cols-11 { grid-template-columns: repeat(11, 1fr) } -.cols-12 { grid-template-columns: repeat(12, 1fr) } -.cols-13 { grid-template-columns: repeat(13, 1fr) } -.cols-14 { grid-template-columns: repeat(14, 1fr) } -.cols-15 { grid-template-columns: repeat(15, 1fr) } -.cols-16 { grid-template-columns: repeat(16, 1fr) } - -.cols-min-32 { grid-template-columns: repeat(auto-fill, minmax( 32px, 1fr )); } -.cols-min-64 { grid-template-columns: repeat(auto-fill, minmax( 64px, 1fr )); } -.cols-min-128 { grid-template-columns: repeat(auto-fill, minmax( 128px, 1fr )); } -.cols-min-192 { grid-template-columns: repeat(auto-fill, minmax( 192px, 1fr )); } -.cols-min-240 { grid-template-columns: repeat(auto-fill, minmax( 240px, 1fr )); } -.cols-min-256 { grid-template-columns: repeat(auto-fill, minmax( 256px, 1fr )); } -.cols-min-320 { grid-template-columns: repeat(auto-fill, minmax( 320px, 1fr )); } -.cols-min-480 { grid-template-columns: repeat(auto-fill, minmax( 480px, 1fr )); } - -.masonry { grid-template-columns: masonry } -.subgrid { grid-template-columns: subgrid } -.cols-none { grid-template-columns: none } - - -@container (min-width:30em) { - .cols-1-s { grid-template-columns: repeat(1, 1fr) } - .cols-2-s { grid-template-columns: repeat(2, 1fr) } - .cols-3-s { grid-template-columns: repeat(3, 1fr) } - .cols-4-s { grid-template-columns: repeat(4, 1fr) } - .cols-5-s { grid-template-columns: repeat(5, 1fr) } - .cols-6-s { grid-template-columns: repeat(6, 1fr) } - .cols-7-s { grid-template-columns: repeat(7, 1fr) } - .cols-8-s { grid-template-columns: repeat(8, 1fr) } - .cols-9-s { grid-template-columns: repeat(9, 1fr) } - .cols-10-s { grid-template-columns: repeat(10, 1fr) } - .cols-11-s { grid-template-columns: repeat(11, 1fr) } - .cols-12-s { grid-template-columns: repeat(12, 1fr) } - .cols-13-s { grid-template-columns: repeat(13, 1fr) } - .cols-14-s { grid-template-columns: repeat(14, 1fr) } - .cols-15-s { grid-template-columns: repeat(15, 1fr) } - .cols-16-s { grid-template-columns: repeat(16, 1fr) } - - .cols-min-32-s { grid-template-columns: repeat(auto-fill, minmax( 64px, 1fr )); } - .cols-min-64-s { grid-template-columns: repeat(auto-fill, minmax( 64px, 1fr )); } - .cols-min-128-s { grid-template-columns: repeat(auto-fill, minmax( 128px, 1fr )); } - .cols-min-192-s { grid-template-columns: repeat(auto-fill, minmax( 192px, 1fr )); } - .cols-min-240-s { grid-template-columns: repeat(auto-fill, minmax( 240px, 1fr )); } - .cols-min-256-s { grid-template-columns: repeat(auto-fill, minmax( 256px, 1fr )); } - .cols-min-320-s { grid-template-columns: repeat(auto-fill, minmax( 320px, 1fr )); } - .cols-min-480-s { grid-template-columns: repeat(auto-fill, minmax( 480px, 1fr )); } - - .masonry-s { grid-template-columns: masonry } - .subgrid-s { grid-template-columns: subgrid } - .cols-none-s { grid-template-columns: none } -} - -@container (min-width:48em) { - .cols-1-m { grid-template-columns: repeat(1, 1fr) } - .cols-2-m { grid-template-columns: repeat(2, 1fr) } - .cols-3-m { grid-template-columns: repeat(3, 1fr) } - .cols-4-m { grid-template-columns: repeat(4, 1fr) } - .cols-5-m { grid-template-columns: repeat(5, 1fr) } - .cols-6-m { grid-template-columns: repeat(6, 1fr) } - .cols-7-m { grid-template-columns: repeat(7, 1fr) } - .cols-8-m { grid-template-columns: repeat(8, 1fr) } - .cols-9-m { grid-template-columns: repeat(9, 1fr) } - .cols-10-m { grid-template-columns: repeat(10, 1fr) } - .cols-11-m { grid-template-columns: repeat(11, 1fr) } - .cols-12-m { grid-template-columns: repeat(12, 1fr) } - .cols-13-m { grid-template-columns: repeat(13, 1fr) } - .cols-14-m { grid-template-columns: repeat(14, 1fr) } - .cols-15-m { grid-template-columns: repeat(15, 1fr) } - .cols-16-m { grid-template-columns: repeat(16, 1fr) } - - .cols-min-64-m { grid-template-columns: repeat(auto-fill, minmax( 64px, 1fr )); } - .cols-min-128-m { grid-template-columns: repeat(auto-fill, minmax( 128px, 1fr )); } - .cols-min-192-m { grid-template-columns: repeat(auto-fill, minmax( 192px, 1fr )); } - .cols-min-240-m { grid-template-columns: repeat(auto-fill, minmax( 240px, 1fr )); } - .cols-min-256-m { grid-template-columns: repeat(auto-fill, minmax( 256px, 1fr )); } - .cols-min-320-m { grid-template-columns: repeat(auto-fill, minmax( 320px, 1fr )); } - .cols-min-480-m { grid-template-columns: repeat(auto-fill, minmax( 480px, 1fr )); } - - .masonry-m { grid-template-columns: masonry } - .subgrid-m { grid-template-columns: subgrid } - .cols-none-m { grid-template-columns: none } -} - -@container (min-width:64em) { - .cols-1-l { grid-template-columns: repeat(1, 1fr) } - .cols-2-l { grid-template-columns: repeat(2, 1fr) } - .cols-3-l { grid-template-columns: repeat(3, 1fr) } - .cols-4-l { grid-template-columns: repeat(4, 1fr) } - .cols-5-l { grid-template-columns: repeat(5, 1fr) } - .cols-6-l { grid-template-columns: repeat(6, 1fr) } - .cols-7-l { grid-template-columns: repeat(7, 1fr) } - .cols-8-l { grid-template-columns: repeat(8, 1fr) } - .cols-9-l { grid-template-columns: repeat(9, 1fr) } - .cols-10-l { grid-template-columns: repeat(10, 1fr) } - .cols-11-l { grid-template-columns: repeat(11, 1fr) } - .cols-12-l { grid-template-columns: repeat(12, 1fr) } - .cols-13-l { grid-template-columns: repeat(13, 1fr) } - .cols-14-l { grid-template-columns: repeat(14, 1fr) } - .cols-15-l { grid-template-columns: repeat(15, 1fr) } - .cols-16-l { grid-template-columns: repeat(16, 1fr) } - - .cols-min-64-l { grid-template-columns: repeat(auto-fill, minmax( 64px, 1fr )); } - .cols-min-128-l { grid-template-columns: repeat(auto-fill, minmax( 128px, 1fr )); } - .cols-min-192-l { grid-template-columns: repeat(auto-fill, minmax( 192px, 1fr )); } - .cols-min-240-l { grid-template-columns: repeat(auto-fill, minmax( 240px, 1fr )); } - .cols-min-256-l { grid-template-columns: repeat(auto-fill, minmax( 256px, 1fr )); } - .cols-min-320-l { grid-template-columns: repeat(auto-fill, minmax( 320px, 1fr )); } - .cols-min-480-l { grid-template-columns: repeat(auto-fill, minmax( 480px, 1fr )); } - - .masonry-l { grid-template-columns: masonry } - .subgrid-l { grid-template-columns: subgrid } - .cols-none-l { grid-template-columns: none } -} - diff --git a/src/_grid.css b/src/_grid.css deleted file mode 100644 index 47aae0b4f..000000000 --- a/src/_grid.css +++ /dev/null @@ -1,23 +0,0 @@ -/* - - Grid - - Media Query Extensions: - -s = small - -m = medium - -l = large - -*/ - -.flow-row { grid-auto-flow: row; } -.flow-column { grid-auto-flow: column; } -.flow-dense { grid-auto-flow: dense; } - - -@container (min-width:30em) { -} -@container (min-width:48em) { -} - -@container (min-width:64em) { -} diff --git a/src/_heights.css b/src/_heights.css index 61ea8b6e1..99a93b678 100644 --- a/src/_heights.css +++ b/src/_heights.css @@ -1,4 +1,4 @@ -/* TODO: Variables review +/* HEIGHTS Docs: http://tachyons.io/docs/layout/heights/ @@ -16,6 +16,7 @@ 4 = 4th step in height scale 5 = 5th step in height scale + -25 = literal value 25% -50 = literal value 50% -75 = literal value 75% -100 = literal value 100% @@ -24,7 +25,7 @@ -inherit = string value of inherit Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -32,18 +33,15 @@ /* Height Scale */ -.h0 { height: var(--size-0, 0); } -.h1 { height: var(--size-1, 1rem); } -.h2 { height: var(--size-2, 2rem); } -.h3 { height: var(--size-3, 3rem); } -.h4 { height: var(--size-4, 4rem); } -.h5 { height: var(--size-5, 8rem); } -.h6 { height: var(--size-6, 16rem); } -.h7 { height: var(--size-7, 32rem); } -.h8 { height: var(--size-8, 64rem); } +.h1 { height: 1rem; } +.h2 { height: 2rem; } +.h3 { height: 4rem; } +.h4 { height: 8rem; } +.h5 { height: 16rem; } /* Height Percentages - Based off of height of parent */ +.h-25 { height: 25%; } .h-50 { height: 50%; } .h-75 { height: 75%; } .h-100 { height: 100%; } @@ -65,35 +63,33 @@ .h-auto { height: auto; } .h-inherit { height: inherit; } -@container (min-width:30em) { - .h0-s { height: var(--size-0, 0); } - .h1-s { height: var(--size-1, 1rem); } - .h2-s { height: var(--size-2, 2rem); } - .h3-s { height: var(--size-3, 3rem); } - .h4-s { height: var(--size-4, 4rem); } - .h5-s { height: var(--size-5, 8rem); } - .h6-s { height: var(--size-6, 16rem); } - .h7-s { height: var(--size-7, 32rem); } - .h8-s { height: var(--size-8, 64rem); } - .h-50-s { height: 50%; } - .h-75-s { height: 75%; } - .h-100-s { height: 100%; } - .min-h-100-s { min-height: 100%; } - .vh-25-s { height: 25vh; } - .vh-50-s { height: 50vh; } - .vh-75-s { height: 75vh; } - .vh-100-s { height: 100vh; } - .min-vh-100-s { min-height: 100vh; } - .h-auto-s { height: auto; } - .h-inherit-s { height: inherit; } +@media (--breakpoint-not-small) { + .h1-ns { height: 1rem; } + .h2-ns { height: 2rem; } + .h3-ns { height: 4rem; } + .h4-ns { height: 8rem; } + .h5-ns { height: 16rem; } + .h-25-ns { height: 25%; } + .h-50-ns { height: 50%; } + .h-75-ns { height: 75%; } + .h-100-ns { height: 100%; } + .min-h-100-ns { min-height: 100%; } + .vh-25-ns { height: 25vh; } + .vh-50-ns { height: 50vh; } + .vh-75-ns { height: 75vh; } + .vh-100-ns { height: 100vh; } + .min-vh-100-ns { min-height: 100vh; } + .h-auto-ns { height: auto; } + .h-inherit-ns { height: inherit; } } -@container (min-width:48em) { +@media (--breakpoint-medium) { .h1-m { height: 1rem; } .h2-m { height: 2rem; } .h3-m { height: 4rem; } .h4-m { height: 8rem; } .h5-m { height: 16rem; } + .h-25-m { height: 25%; } .h-50-m { height: 50%; } .h-75-m { height: 75%; } .h-100-m { height: 100%; } @@ -107,12 +103,13 @@ .h-inherit-m { height: inherit; } } -@container (min-width:64em) { +@media (--breakpoint-large) { .h1-l { height: 1rem; } .h2-l { height: 2rem; } .h3-l { height: 4rem; } .h4-l { height: 8rem; } .h5-l { height: 16rem; } + .h-25-l { height: 25%; } .h-50-l { height: 50%; } .h-75-l { height: 75%; } .h-100-l { height: 100%; } diff --git a/src/_hovers.css b/src/_hovers.css index 2fb32c604..d92e9c4d4 100644 --- a/src/_hovers.css +++ b/src/_hovers.css @@ -10,7 +10,6 @@ - Grow - Pointer - Shadow - - Colors */ @@ -29,8 +28,7 @@ transition: opacity .15s ease-in; } .dim:active { - opacity: .8; - transition: opacity .15s ease-out; + opacity: .8; transition: opacity .15s ease-out; } /* @@ -115,20 +113,16 @@ /* Add pointer on hover */ -.pointer { +.pointer:hover { cursor: pointer; } -.trans-all { - transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1); -} - /* - * TODO: Test and rename Add shadow on hover. Performant box-shadow animation pattern from http://tobiasahlin.com/blog/how-to-animate-box-shadow/ +*/ .shadow-hover { cursor: pointer; @@ -154,24 +148,13 @@ .shadow-hover:focus::after { opacity: 1; } -*/ /* Combine with classes in skins and skins-pseudo for * many different transition possibilities. */ -.trans-bg { - transition: background-color .25s ease-in-out; +.bg-animate, +.bg-animate:hover, +.bg-animate:focus { + transition: background-color .15s ease-in-out; } -.trans-color { - transition: color .25s ease-in-out; -} - -.hover-filter-none:hover { filter: none; } - -.hover-filter-blur-none:hover { filter: blur(0); } -.hover-filter-blur:hover { filter: blur(96px); } - -.hover-grayscale-0:hover { filter: grayscale(0); } -.hover-grayscale-50:hover { filter: grayscale(50%); } -.hover-grayscale-100:hover { filter: grayscale(100%); } diff --git a/src/_images.css b/src/_images.css index 406c0bfc5..0298ceae7 100644 --- a/src/_images.css +++ b/src/_images.css @@ -5,19 +5,7 @@ */ -img { display: block; max-width: 100%; } +/* Responsive images! */ -.random-image { - background-image: url(https://source.unsplash.com/random/); - background-size: cover; -} +img { max-width: 100%; } -.random-image-landscape { - background-image: url(https://source.unsplash.com/random/1920x1080); - background-size: cover; -} - -.random-image-portrait { - background-image: url(https://source.unsplash.com/random/1080x1920); - background-size: cover; -} diff --git a/src/_justify-content.css b/src/_justify-content.css deleted file mode 100644 index 6bd329a35..000000000 --- a/src/_justify-content.css +++ /dev/null @@ -1,41 +0,0 @@ -/* - - JUSTIFY-CONTENT - - Media Query Extensions: - -s = small - -m = medium - -l = large - - MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content - -*/ - -.justify-start { justify-content: flex-start; } -.justify-end { justify-content: flex-end; } -.justify-center { justify-content: center; } -.justify-between { justify-content: space-between; } -.justify-around { justify-content: space-around; } - -@container (min-width:30em) { - .justify-start-s { justify-content: flex-start; } - .justify-end-s { justify-content: flex-end; } - .justify-center-s { justify-content: center; } - .justify-between-s { justify-content: space-between; } - .justify-around-s { justify-content: space-around; } -} -@container (min-width:48em) { - .justify-start-m { justify-content: flex-start; } - .justify-end-m { justify-content: flex-end; } - .justify-center-m { justify-content: center; } - .justify-between-m { justify-content: space-between; } - .justify-around-m { justify-content: space-around; } - -} -@container (min-width:64em) { - .justify-start-l { justify-content: flex-start; } - .justify-end-l { justify-content: flex-end; } - .justify-center-l { justify-content: center; } - .justify-between-l { justify-content: space-between; } - .justify-around-l { justify-content: space-around; } -} diff --git a/src/_justify-self.css b/src/_justify-self.css deleted file mode 100644 index 1b1cad7f3..000000000 --- a/src/_justify-self.css +++ /dev/null @@ -1,36 +0,0 @@ -/* - - JUSTIFY-SELF - - Media Query Extensions: - -s = small - -m = medium - -l = large - - MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self - -*/ - -.justify-self-start { justify-self: start; } -.justify-self-end { justify-self: end; } -.justify-self-center { justify-self: center; } -.justify-self-stretch{ justify-self: stretch; } - -@container (min-width:30em) { - .justify-self-start-s { justify-self: start; } - .justify-self-end-s { justify-self: end; } - .justify-self-center-s { justify-self: center; } - .justify-self-stretch-s { justify-self: stretch; } -} -@container (min-width:48em) { - .justify-self-start-m { justify-self: start; } - .justify-self-end-m { justify-self: end; } - .justify-self-center-m { justify-self: center; } - .justify-self-stretch-m { justify-self: stretch; } -} -@container (min-width:64em) { - .justify-self-start-l { justify-self: start; } - .justify-self-end-l { justify-self: end; } - .justify-self-center-l { justify-self: center; } - .justify-self-stretch-l { justify-self: stretch; } -} diff --git a/src/_letter-spacing.css b/src/_letter-spacing.css index 46e61a7dc..d22651306 100644 --- a/src/_letter-spacing.css +++ b/src/_letter-spacing.css @@ -4,30 +4,30 @@ Docs: http://tachyons.io/docs/typography/tracking/ Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ -.tracked { letter-spacing: var(--letter-spacing-tracked, .1em); } -.tracked-tight { letter-spacing: var(--letter-spacing-tight, -0.05em); } -.tracked-mega { letter-spacing: var(--letter-spacing-large, .25em); } +.tracked { letter-spacing: .1em; } +.tracked-tight { letter-spacing: -.05em; } +.tracked-mega { letter-spacing: .25em; } -@container (min-width:30em) { - .tracked-s { letter-spacing: var(--letter-spacing-tracked, .1em); } - .tracked-tight-s { letter-spacing: var(--letter-spacing-tight, -0.05em); } - .tracked-mega-s { letter-spacing: var(--letter-spacing-large, .25em); } +@media (--breakpoint-not-small) { + .tracked-ns { letter-spacing: .1em; } + .tracked-tight-ns { letter-spacing: -.05em; } + .tracked-mega-ns { letter-spacing: .25em; } } -@container (min-width:48em) { - .tracked-m { letter-spacing: var(--letter-spacing-tracked, .1em); } - .tracked-tight-m { letter-spacing: var(--letter-spacing-tight, -0.05em); } - .tracked-mega-m { letter-spacing: var(--letter-spacing-large, .25em); } +@media (--breakpoint-medium) { + .tracked-m { letter-spacing: .1em; } + .tracked-tight-m { letter-spacing: -.05em; } + .tracked-mega-m { letter-spacing: .25em; } } -@container (min-width:64em) { - .tracked-l { letter-spacing: var(--letter-spacing-tracked, .1em); } - .tracked-tight-l { letter-spacing: var(--letter-spacing-tight, -0.05em); } - .tracked-mega-l { letter-spacing: var(--letter-spacing-large, .25em); } +@media (--breakpoint-large) { + .tracked-l { letter-spacing: .1em; } + .tracked-tight-l { letter-spacing: -.05em; } + .tracked-mega-l { letter-spacing: .25em; } } diff --git a/src/_line-height.css b/src/_line-height.css index 97b2b2a98..afbef0db4 100644 --- a/src/_line-height.css +++ b/src/_line-height.css @@ -4,31 +4,31 @@ Docs: http://tachyons.io/docs/typography/line-height Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ - .lh-solid { line-height: var(--line-height-solid, 1); } - .lh-title { line-height: var(--line-height-title, 1.25); } - .lh-body { line-height: var(--line-height-body, 1.5); } + .lh-solid { line-height: 1; } + .lh-title { line-height: 1.25; } + .lh-copy { line-height: 1.5; } -@container (min-width:30em) { - .lh-solid-s { line-height: var(--line-height-solid, 1); } - .lh-title-s { line-height: var(--line-height-title, 1.25); } - .lh-body-s { line-height: var(--line-height-body, 1.5); } +@media (--breakpoint-not-small) { + .lh-solid-ns { line-height: 1; } + .lh-title-ns { line-height: 1.25; } + .lh-copy-ns { line-height: 1.5; } } -@container (min-width:48em) { - .lh-solid-m { line-height: var(--line-height-solid, 1); } - .lh-title-m { line-height: var(--line-height-title, 1.25); } - .lh-body-m { line-height: var(--line-height-body, 1.5); } +@media (--breakpoint-medium) { + .lh-solid-m { line-height: 1; } + .lh-title-m { line-height: 1.25; } + .lh-copy-m { line-height: 1.5; } } -@container (min-width:64em) { - .lh-solid-l { line-height: var(--line-height-solid, 1); } - .lh-title-l { line-height: var(--line-height-title, 1.25); } - .lh-body-l { line-height: var(--line-height-body, 1.5); } +@media (--breakpoint-large) { + .lh-solid-l { line-height: 1; } + .lh-title-l { line-height: 1.25; } + .lh-copy-l { line-height: 1.5; } } diff --git a/src/_links.css b/src/_links.css index 882fcb4b2..6c9a2c876 100644 --- a/src/_links.css +++ b/src/_links.css @@ -7,21 +7,21 @@ .link { text-decoration: none; - transition: all .15s ease-in; + transition: color .15s ease-in; } .link:link, .link:visited { - transition: all .15s ease-in; + transition: color .15s ease-in; } .link:hover { - transition: all .15s ease-in; + transition: color .15s ease-in; } .link:active { - transition: all .15s ease-in; + transition: color .15s ease-in; } .link:focus { - transition: all .15s ease-in; + transition: color .15s ease-in; outline: 1px dotted currentColor; } diff --git a/src/_max-widths.css b/src/_max-widths.css index e601333af..e4175fae8 100644 --- a/src/_max-widths.css +++ b/src/_max-widths.css @@ -23,7 +23,7 @@ Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -49,23 +49,23 @@ .mw-none { max-width: none; } -@container (min-width:30em) { - .mw-100-s { max-width: 100%; } +@media (--breakpoint-not-small) { + .mw-100-ns { max-width: 100%; } - .mw1-s { max-width: 1rem; } - .mw2-s { max-width: 2rem; } - .mw3-s { max-width: 4rem; } - .mw4-s { max-width: 8rem; } - .mw5-s { max-width: 16rem; } - .mw6-s { max-width: 32rem; } - .mw7-s { max-width: 48rem; } - .mw8-s { max-width: 64rem; } - .mw9-s { max-width: 96rem; } + .mw1-ns { max-width: 1rem; } + .mw2-ns { max-width: 2rem; } + .mw3-ns { max-width: 4rem; } + .mw4-ns { max-width: 8rem; } + .mw5-ns { max-width: 16rem; } + .mw6-ns { max-width: 32rem; } + .mw7-ns { max-width: 48rem; } + .mw8-ns { max-width: 64rem; } + .mw9-ns { max-width: 96rem; } - .mw-none-s { max-width: none; } + .mw-none-ns { max-width: none; } } -@container (min-width:48em) { +@media (--breakpoint-medium) { .mw-100-m { max-width: 100%; } .mw1-m { max-width: 1rem; } @@ -81,7 +81,7 @@ .mw-none-m { max-width: none; } } -@container (min-width:64em) { +@media (--breakpoint-large) { .mw-100-l { max-width: 100%; } .mw1-l { max-width: 1rem; } diff --git a/src/_media-queries.css b/src/_media-queries.css index f71695222..d8a4c938a 100644 --- a/src/_media-queries.css +++ b/src/_media-queries.css @@ -10,20 +10,20 @@ These media queries can be referenced like so: - @container (min-width:30em) { - .example-s { + @media (--breakpoint-not-small) { + .medium-and-larger-specific-style { background-color: red; } } - @container (min-width:48em) { - .example-m { + @media (--breakpoint-medium) { + .medium-screen-specific-style { background-color: red; } } - @container (min-width:64em) { - .example-l { + @media (--breakpoint-large) { + .large-and-larger-screen-specific-style { background-color: red; } } @@ -31,6 +31,6 @@ */ /* Media Queries */ -@custom-media min-width:30em screen and (min-width: 30em); -@custom-media min-width:48em screen and (min-width: 48em); -@custom-media min-width:64em screen and (min-width: 60em); +@custom-media --breakpoint-not-small screen and (min-width: 30em); +@custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em); +@custom-media --breakpoint-large screen and (min-width: 60em); diff --git a/src/_module-template.css b/src/_module-template.css index 0e4376555..0447e0c1e 100644 --- a/src/_module-template.css +++ b/src/_module-template.css @@ -8,15 +8,15 @@ */ -@container (min-width:30em) { +@media (--breakpoint-not-small) { } -@container (min-width:48em) { +@media (--breakpoint-medium) { } -@container (min-width:64em) { +@media (--breakpoint-large) { } diff --git a/src/_negative-margins.css b/src/_negative-margins.css index 2a77dbfea..c31912ac8 100644 --- a/src/_negative-margins.css +++ b/src/_negative-margins.css @@ -20,7 +20,7 @@ 7 = 7th step in spacing scale Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -28,172 +28,172 @@ -.na1 { margin: calc(-1 * var(--spacing-1)); } -.na2 { margin: calc(-1 * var(--spacing-2)); } -.na3 { margin: calc(-1 * var(--spacing-3)); } -.na4 { margin: calc(-1 * var(--spacing-4)); } -.na5 { margin: calc(-1 * var(--spacing-5)); } -.na6 { margin: calc(-1 * var(--spacing-6)); } -.na7 { margin: calc(-1 * var(--spacing-7)); } - -.nl1 { margin-left: calc(-1 * var(--spacing-1)); } -.nl2 { margin-left: calc(-1 * var(--spacing-2)); } -.nl3 { margin-left: calc(-1 * var(--spacing-3)); } -.nl4 { margin-left: calc(-1 * var(--spacing-4)); } -.nl5 { margin-left: calc(-1 * var(--spacing-5)); } -.nl6 { margin-left: calc(-1 * var(--spacing-6)); } -.nl7 { margin-left: calc(-1 * var(--spacing-7)); } - -.nr1 { margin-right: calc(-1 * var(--spacing-1)); } -.nr2 { margin-right: calc(-1 * var(--spacing-2)); } -.nr3 { margin-right: calc(-1 * var(--spacing-3)); } -.nr4 { margin-right: calc(-1 * var(--spacing-4)); } -.nr5 { margin-right: calc(-1 * var(--spacing-5)); } -.nr6 { margin-right: calc(-1 * var(--spacing-6)); } -.nr7 { margin-right: calc(-1 * var(--spacing-7)); } - -.nb1 { margin-bottom: calc(-1 * var(--spacing-1)); } -.nb2 { margin-bottom: calc(-1 * var(--spacing-2)); } -.nb3 { margin-bottom: calc(-1 * var(--spacing-3)); } -.nb4 { margin-bottom: calc(-1 * var(--spacing-4)); } -.nb5 { margin-bottom: calc(-1 * var(--spacing-5)); } -.nb6 { margin-bottom: calc(-1 * var(--spacing-6)); } -.nb7 { margin-bottom: calc(-1 * var(--spacing-7)); } - -.nt1 { margin-top: calc(-1 * var(--spacing-1)); } -.nt2 { margin-top: calc(-1 * var(--spacing-2)); } -.nt3 { margin-top: calc(-1 * var(--spacing-3)); } -.nt4 { margin-top: calc(-1 * var(--spacing-4)); } -.nt5 { margin-top: calc(-1 * var(--spacing-5)); } -.nt6 { margin-top: calc(-1 * var(--spacing-6)); } -.nt7 { margin-top: calc(-1 * var(--spacing-7)); } - -@container (--breakpoint-2) { - - .na1-s { margin: calc(-1 * var(--spacing-1)); } - .na2-s { margin: calc(-1 * var(--spacing-2)); } - .na3-s { margin: calc(-1 * var(--spacing-3)); } - .na4-s { margin: calc(-1 * var(--spacing-4)); } - .na5-s { margin: calc(-1 * var(--spacing-5)); } - .na6-s { margin: calc(-1 * var(--spacing-6)); } - .na7-s { margin: calc(-1 * var(--spacing-7)); } - - .nl1-s { margin-left: calc(-1 * var(--spacing-1)); } - .nl2-s { margin-left: calc(-1 * var(--spacing-2)); } - .nl3-s { margin-left: calc(-1 * var(--spacing-3)); } - .nl4-s { margin-left: calc(-1 * var(--spacing-4)); } - .nl5-s { margin-left: calc(-1 * var(--spacing-5)); } - .nl6-s { margin-left: calc(-1 * var(--spacing-6)); } - .nl7-s { margin-left: calc(-1 * var(--spacing-7)); } - - .nr1-s { margin-right: calc(-1 * var(--spacing-1)); } - .nr2-s { margin-right: calc(-1 * var(--spacing-2)); } - .nr3-s { margin-right: calc(-1 * var(--spacing-3)); } - .nr4-s { margin-right: calc(-1 * var(--spacing-4)); } - .nr5-s { margin-right: calc(-1 * var(--spacing-5)); } - .nr6-s { margin-right: calc(-1 * var(--spacing-6)); } - .nr7-s { margin-right: calc(-1 * var(--spacing-7)); } - - .nb1-s { margin-bottom: calc(-1 * var(--spacing-1)); } - .nb2-s { margin-bottom: calc(-1 * var(--spacing-2)); } - .nb3-s { margin-bottom: calc(-1 * var(--spacing-3)); } - .nb4-s { margin-bottom: calc(-1 * var(--spacing-4)); } - .nb5-s { margin-bottom: calc(-1 * var(--spacing-5)); } - .nb6-s { margin-bottom: calc(-1 * var(--spacing-6)); } - .nb7-s { margin-bottom: calc(-1 * var(--spacing-7)); } - - .nt1-s { margin-top: calc(-1 * var(--spacing-1)); } - .nt2-s { margin-top: calc(-1 * var(--spacing-2)); } - .nt3-s { margin-top: calc(-1 * var(--spacing-3)); } - .nt4-s { margin-top: calc(-1 * var(--spacing-4)); } - .nt5-s { margin-top: calc(-1 * var(--spacing-5)); } - .nt6-s { margin-top: calc(-1 * var(--spacing-6)); } - .nt7-s { margin-top: calc(-1 * var(--spacing-7)); } +.na1 { margin: calc(-1 * var(--spacing-extra-small)); } +.na2 { margin: calc(-1 * var(--spacing-small)); } +.na3 { margin: calc(-1 * var(--spacing-medium)); } +.na4 { margin: calc(-1 * var(--spacing-large)); } +.na5 { margin: calc(-1 * var(--spacing-extra-large)); } +.na6 { margin: calc(-1 * var(--spacing-extra-extra-large)); } +.na7 { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); } + +.nl1 { margin-left: calc(-1 * var(--spacing-extra-small)); } +.nl2 { margin-left: calc(-1 * var(--spacing-small)); } +.nl3 { margin-left: calc(-1 * var(--spacing-medium)); } +.nl4 { margin-left: calc(-1 * var(--spacing-large)); } +.nl5 { margin-left: calc(-1 * var(--spacing-extra-large)); } +.nl6 { margin-left: calc(-1 * var(--spacing-extra-extra-large)); } +.nl7 { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); } + +.nr1 { margin-right: calc(-1 * var(--spacing-extra-small)); } +.nr2 { margin-right: calc(-1 * var(--spacing-small)); } +.nr3 { margin-right: calc(-1 * var(--spacing-medium)); } +.nr4 { margin-right: calc(-1 * var(--spacing-large)); } +.nr5 { margin-right: calc(-1 * var(--spacing-extra-large)); } +.nr6 { margin-right: calc(-1 * var(--spacing-extra-extra-large)); } +.nr7 { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); } + +.nb1 { margin-bottom: calc(-1 * var(--spacing-extra-small)); } +.nb2 { margin-bottom: calc(-1 * var(--spacing-small)); } +.nb3 { margin-bottom: calc(-1 * var(--spacing-medium)); } +.nb4 { margin-bottom: calc(-1 * var(--spacing-large)); } +.nb5 { margin-bottom: calc(-1 * var(--spacing-extra-large)); } +.nb6 { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); } +.nb7 { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); } + +.nt1 { margin-top: calc(-1 * var(--spacing-extra-small)); } +.nt2 { margin-top: calc(-1 * var(--spacing-small)); } +.nt3 { margin-top: calc(-1 * var(--spacing-medium)); } +.nt4 { margin-top: calc(-1 * var(--spacing-large)); } +.nt5 { margin-top: calc(-1 * var(--spacing-extra-large)); } +.nt6 { margin-top: calc(-1 * var(--spacing-extra-extra-large)); } +.nt7 { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); } + +@media (--breakpoint-not-small) { + + .na1-ns { margin: calc(-1 * var(--spacing-extra-small)); } + .na2-ns { margin: calc(-1 * var(--spacing-small)); } + .na3-ns { margin: calc(-1 * var(--spacing-medium)); } + .na4-ns { margin: calc(-1 * var(--spacing-large)); } + .na5-ns { margin: calc(-1 * var(--spacing-extra-large)); } + .na6-ns { margin: calc(-1 * var(--spacing-extra-extra-large)); } + .na7-ns { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); } + + .nl1-ns { margin-left: calc(-1 * var(--spacing-extra-small)); } + .nl2-ns { margin-left: calc(-1 * var(--spacing-small)); } + .nl3-ns { margin-left: calc(-1 * var(--spacing-medium)); } + .nl4-ns { margin-left: calc(-1 * var(--spacing-large)); } + .nl5-ns { margin-left: calc(-1 * var(--spacing-extra-large)); } + .nl6-ns { margin-left: calc(-1 * var(--spacing-extra-extra-large)); } + .nl7-ns { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); } + + .nr1-ns { margin-right: calc(-1 * var(--spacing-extra-small)); } + .nr2-ns { margin-right: calc(-1 * var(--spacing-small)); } + .nr3-ns { margin-right: calc(-1 * var(--spacing-medium)); } + .nr4-ns { margin-right: calc(-1 * var(--spacing-large)); } + .nr5-ns { margin-right: calc(-1 * var(--spacing-extra-large)); } + .nr6-ns { margin-right: calc(-1 * var(--spacing-extra-extra-large)); } + .nr7-ns { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); } + + .nb1-ns { margin-bottom: calc(-1 * var(--spacing-extra-small)); } + .nb2-ns { margin-bottom: calc(-1 * var(--spacing-small)); } + .nb3-ns { margin-bottom: calc(-1 * var(--spacing-medium)); } + .nb4-ns { margin-bottom: calc(-1 * var(--spacing-large)); } + .nb5-ns { margin-bottom: calc(-1 * var(--spacing-extra-large)); } + .nb6-ns { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); } + .nb7-ns { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); } + + .nt1-ns { margin-top: calc(-1 * var(--spacing-extra-small)); } + .nt2-ns { margin-top: calc(-1 * var(--spacing-small)); } + .nt3-ns { margin-top: calc(-1 * var(--spacing-medium)); } + .nt4-ns { margin-top: calc(-1 * var(--spacing-large)); } + .nt5-ns { margin-top: calc(-1 * var(--spacing-extra-large)); } + .nt6-ns { margin-top: calc(-1 * var(--spacing-extra-extra-large)); } + .nt7-ns { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); } } -@container (--breakpoint-3) { - .na1-m { margin: calc(-1 * var(--spacing-1)); } - .na2-m { margin: calc(-1 * var(--spacing-2)); } - .na3-m { margin: calc(-1 * var(--spacing-3)); } - .na4-m { margin: calc(-1 * var(--spacing-4)); } - .na5-m { margin: calc(-1 * var(--spacing-5)); } - .na6-m { margin: calc(-1 * var(--spacing-6)); } - .na7-m { margin: calc(-1 * var(--spacing-7)); } - - .nl1-m { margin-left: calc(-1 * var(--spacing-1)); } - .nl2-m { margin-left: calc(-1 * var(--spacing-2)); } - .nl3-m { margin-left: calc(-1 * var(--spacing-3)); } - .nl4-m { margin-left: calc(-1 * var(--spacing-4)); } - .nl5-m { margin-left: calc(-1 * var(--spacing-5)); } - .nl6-m { margin-left: calc(-1 * var(--spacing-6)); } - .nl7-m { margin-left: calc(-1 * var(--spacing-7)); } - - .nr1-m { margin-right: calc(-1 * var(--spacing-1)); } - .nr2-m { margin-right: calc(-1 * var(--spacing-2)); } - .nr3-m { margin-right: calc(-1 * var(--spacing-3)); } - .nr4-m { margin-right: calc(-1 * var(--spacing-4)); } - .nr5-m { margin-right: calc(-1 * var(--spacing-5)); } - .nr6-m { margin-right: calc(-1 * var(--spacing-6)); } - .nr7-m { margin-right: calc(-1 * var(--spacing-7)); } - - .nb1-m { margin-bottom: calc(-1 * var(--spacing-1)); } - .nb2-m { margin-bottom: calc(-1 * var(--spacing-2)); } - .nb3-m { margin-bottom: calc(-1 * var(--spacing-3)); } - .nb4-m { margin-bottom: calc(-1 * var(--spacing-4)); } - .nb5-m { margin-bottom: calc(-1 * var(--spacing-5)); } - .nb6-m { margin-bottom: calc(-1 * var(--spacing-6)); } - .nb7-m { margin-bottom: calc(-1 * var(--spacing-7)); } - - .nt1-m { margin-top: calc(-1 * var(--spacing-1)); } - .nt2-m { margin-top: calc(-1 * var(--spacing-2)); } - .nt3-m { margin-top: calc(-1 * var(--spacing-3)); } - .nt4-m { margin-top: calc(-1 * var(--spacing-4)); } - .nt5-m { margin-top: calc(-1 * var(--spacing-5)); } - .nt6-m { margin-top: calc(-1 * var(--spacing-6)); } - .nt7-m { margin-top: calc(-1 * var(--spacing-7)); } +@media (--breakpoint-medium) { + .na1-m { margin: calc(-1 * var(--spacing-extra-small)); } + .na2-m { margin: calc(-1 * var(--spacing-small)); } + .na3-m { margin: calc(-1 * var(--spacing-medium)); } + .na4-m { margin: calc(-1 * var(--spacing-large)); } + .na5-m { margin: calc(-1 * var(--spacing-extra-large)); } + .na6-m { margin: calc(-1 * var(--spacing-extra-extra-large)); } + .na7-m { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); } + + .nl1-m { margin-left: calc(-1 * var(--spacing-extra-small)); } + .nl2-m { margin-left: calc(-1 * var(--spacing-small)); } + .nl3-m { margin-left: calc(-1 * var(--spacing-medium)); } + .nl4-m { margin-left: calc(-1 * var(--spacing-large)); } + .nl5-m { margin-left: calc(-1 * var(--spacing-extra-large)); } + .nl6-m { margin-left: calc(-1 * var(--spacing-extra-extra-large)); } + .nl7-m { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); } + + .nr1-m { margin-right: calc(-1 * var(--spacing-extra-small)); } + .nr2-m { margin-right: calc(-1 * var(--spacing-small)); } + .nr3-m { margin-right: calc(-1 * var(--spacing-medium)); } + .nr4-m { margin-right: calc(-1 * var(--spacing-large)); } + .nr5-m { margin-right: calc(-1 * var(--spacing-extra-large)); } + .nr6-m { margin-right: calc(-1 * var(--spacing-extra-extra-large)); } + .nr7-m { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); } + + .nb1-m { margin-bottom: calc(-1 * var(--spacing-extra-small)); } + .nb2-m { margin-bottom: calc(-1 * var(--spacing-small)); } + .nb3-m { margin-bottom: calc(-1 * var(--spacing-medium)); } + .nb4-m { margin-bottom: calc(-1 * var(--spacing-large)); } + .nb5-m { margin-bottom: calc(-1 * var(--spacing-extra-large)); } + .nb6-m { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); } + .nb7-m { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); } + + .nt1-m { margin-top: calc(-1 * var(--spacing-extra-small)); } + .nt2-m { margin-top: calc(-1 * var(--spacing-small)); } + .nt3-m { margin-top: calc(-1 * var(--spacing-medium)); } + .nt4-m { margin-top: calc(-1 * var(--spacing-large)); } + .nt5-m { margin-top: calc(-1 * var(--spacing-extra-large)); } + .nt6-m { margin-top: calc(-1 * var(--spacing-extra-extra-large)); } + .nt7-m { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); } } -@container (min-width:64em) { - .na1-l { margin: calc(-1 * var(--spacing-1)); } - .na2-l { margin: calc(-1 * var(--spacing-2)); } - .na3-l { margin: calc(-1 * var(--spacing-3)); } - .na4-l { margin: calc(-1 * var(--spacing-4)); } - .na5-l { margin: calc(-1 * var(--spacing-5)); } - .na6-l { margin: calc(-1 * var(--spacing-6)); } - .na7-l { margin: calc(-1 * var(--spacing-7)); } - - .nl1-l { margin-left: calc(-1 * var(--spacing-1)); } - .nl2-l { margin-left: calc(-1 * var(--spacing-2)); } - .nl3-l { margin-left: calc(-1 * var(--spacing-3)); } - .nl4-l { margin-left: calc(-1 * var(--spacing-4)); } - .nl5-l { margin-left: calc(-1 * var(--spacing-5)); } - .nl6-l { margin-left: calc(-1 * var(--spacing-6)); } - .nl7-l { margin-left: calc(-1 * var(--spacing-7)); } - - .nr1-l { margin-right: calc(-1 * var(--spacing-1)); } - .nr2-l { margin-right: calc(-1 * var(--spacing-2)); } - .nr3-l { margin-right: calc(-1 * var(--spacing-3)); } - .nr4-l { margin-right: calc(-1 * var(--spacing-4)); } - .nr5-l { margin-right: calc(-1 * var(--spacing-5)); } - .nr6-l { margin-right: calc(-1 * var(--spacing-6)); } - .nr7-l { margin-right: calc(-1 * var(--spacing-7)); } - - .nb1-l { margin-bottom: calc(-1 * var(--spacing-1)); } - .nb2-l { margin-bottom: calc(-1 * var(--spacing-2)); } - .nb3-l { margin-bottom: calc(-1 * var(--spacing-3)); } - .nb4-l { margin-bottom: calc(-1 * var(--spacing-4)); } - .nb5-l { margin-bottom: calc(-1 * var(--spacing-5)); } - .nb6-l { margin-bottom: calc(-1 * var(--spacing-6)); } - .nb7-l { margin-bottom: calc(-1 * var(--spacing-7)); } - - .nt1-l { margin-top: calc(-1 * var(--spacing-1)); } - .nt2-l { margin-top: calc(-1 * var(--spacing-2)); } - .nt3-l { margin-top: calc(-1 * var(--spacing-3)); } - .nt4-l { margin-top: calc(-1 * var(--spacing-4)); } - .nt5-l { margin-top: calc(-1 * var(--spacing-5)); } - .nt6-l { margin-top: calc(-1 * var(--spacing-6)); } - .nt7-l { margin-top: calc(-1 * var(--spacing-7)); } +@media (--breakpoint-large) { + .na1-l { margin: calc(-1 * var(--spacing-extra-small)); } + .na2-l { margin: calc(-1 * var(--spacing-small)); } + .na3-l { margin: calc(-1 * var(--spacing-medium)); } + .na4-l { margin: calc(-1 * var(--spacing-large)); } + .na5-l { margin: calc(-1 * var(--spacing-extra-large)); } + .na6-l { margin: calc(-1 * var(--spacing-extra-extra-large)); } + .na7-l { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); } + + .nl1-l { margin-left: calc(-1 * var(--spacing-extra-small)); } + .nl2-l { margin-left: calc(-1 * var(--spacing-small)); } + .nl3-l { margin-left: calc(-1 * var(--spacing-medium)); } + .nl4-l { margin-left: calc(-1 * var(--spacing-large)); } + .nl5-l { margin-left: calc(-1 * var(--spacing-extra-large)); } + .nl6-l { margin-left: calc(-1 * var(--spacing-extra-extra-large)); } + .nl7-l { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); } + + .nr1-l { margin-right: calc(-1 * var(--spacing-extra-small)); } + .nr2-l { margin-right: calc(-1 * var(--spacing-small)); } + .nr3-l { margin-right: calc(-1 * var(--spacing-medium)); } + .nr4-l { margin-right: calc(-1 * var(--spacing-large)); } + .nr5-l { margin-right: calc(-1 * var(--spacing-extra-large)); } + .nr6-l { margin-right: calc(-1 * var(--spacing-extra-extra-large)); } + .nr7-l { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); } + + .nb1-l { margin-bottom: calc(-1 * var(--spacing-extra-small)); } + .nb2-l { margin-bottom: calc(-1 * var(--spacing-small)); } + .nb3-l { margin-bottom: calc(-1 * var(--spacing-medium)); } + .nb4-l { margin-bottom: calc(-1 * var(--spacing-large)); } + .nb5-l { margin-bottom: calc(-1 * var(--spacing-extra-large)); } + .nb6-l { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); } + .nb7-l { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); } + + .nt1-l { margin-top: calc(-1 * var(--spacing-extra-small)); } + .nt2-l { margin-top: calc(-1 * var(--spacing-small)); } + .nt3-l { margin-top: calc(-1 * var(--spacing-medium)); } + .nt4-l { margin-top: calc(-1 * var(--spacing-large)); } + .nt5-l { margin-top: calc(-1 * var(--spacing-extra-large)); } + .nt6-l { margin-top: calc(-1 * var(--spacing-extra-extra-large)); } + .nt7-l { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); } } diff --git a/src/_nested.css b/src/_nested.css index e9eef457c..ddefc4231 100644 --- a/src/_nested.css +++ b/src/_nested.css @@ -9,7 +9,7 @@ .nested-copy-line-height p, .nested-copy-line-height ul, .nested-copy-line-height ol { - line-height: var(--line-height-body, 1.5); + line-height: 1.5; } .nested-headline-line-height h1, @@ -18,7 +18,7 @@ .nested-headline-line-height h4, .nested-headline-line-height h5, .nested-headline-line-height h6 { - line-height: var(--line-height-title, 1.25); + line-height: 1.25; } .nested-list-reset ul, @@ -45,13 +45,13 @@ } .nested-links a { - color: var(--blue-5); + color: var(--blue); transition: color .15s ease-in; } .nested-links a:hover, .nested-links a:focus { - color: var(--blue-3); + color: var(--light-blue); transition: color .15s ease-in; } diff --git a/src/_normalize.css b/src/_normalize.css index 192eb9ce4..47b010e47 100644 --- a/src/_normalize.css +++ b/src/_normalize.css @@ -1,4 +1,4 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ @@ -24,14 +24,6 @@ body { margin: 0; } -/** - * Render the `main` element consistently in IE. - */ - -main { - display: block; -} - /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. diff --git a/src/_opacity.css b/src/_opacity.css index f16a22649..3f2a39bbc 100644 --- a/src/_opacity.css +++ b/src/_opacity.css @@ -5,44 +5,16 @@ */ -.o12 { opacity: var(--opacity-12, 1); } -.o11 { opacity: var(--opacity-11,.9); } -.o10 { opacity: var(--opacity-10,.8); } -.o9 { opacity: var(--opacity-9,.7); } -.o8 { opacity: var(--opacity-8,.6); } -.o7 { opacity: var(--opacity-7,.5); } -.o6 { opacity: var(--opacity-6,.4); } -.o5 { opacity: var(--opacity-5,.3); } -.o4 { opacity: var(--opacity-4,.2); } -.o3 { opacity: var(--opacity-3,.1); } -.o2 { opacity: var(--opacity-2,.05); } -.o1 { opacity: var(--opacity-1,.025);} -.o0 { opacity: var(--opacity-0,0); } - -.h-o12:hover { opacity: var(--opacity-12, 1); } -.h-o11:hover { opacity: var(--opacity-11,.9); } -.h-o10:hover { opacity: var(--opacity-10,.8); } -.h-o9:hover { opacity: var(--opacity-9,.7); } -.h-o8:hover { opacity: var(--opacity-8,.6); } -.h-o7:hover { opacity: var(--opacity-7,.5); } -.h-o6:hover { opacity: var(--opacity-6,.4); } -.h-o5:hover { opacity: var(--opacity-5,.3); } -.h-o4:hover { opacity: var(--opacity-4,.2); } -.h-o3:hover { opacity: var(--opacity-3,.1); } -.h-o2:hover { opacity: var(--opacity-2,.05); } -.h-o1:hover { opacity: var(--opacity-1,.025);} -.h-o0:hover { opacity: var(--opacity-0,0); } - -.f-o12:focus { opacity: var(--opacity-12, 1); } -.f-o11:focus { opacity: var(--opacity-11,.9); } -.f-o10:focus { opacity: var(--opacity-10,.8); } -.f-o9:focus { opacity: var(--opacity-9,.7); } -.f-o8:focus { opacity: var(--opacity-8,.6); } -.f-o7:focus { opacity: var(--opacity-7,.5); } -.f-o6:focus { opacity: var(--opacity-6,.4); } -.f-o5:focus { opacity: var(--opacity-5,.3); } -.f-o4:focus { opacity: var(--opacity-4,.2); } -.f-o3:focus { opacity: var(--opacity-3,.1); } -.f-o2:focus { opacity: var(--opacity-2,.05); } -.f-o1:focus { opacity: var(--opacity-1,.025);} -.f-o0:focus { opacity: var(--opacity-0,0); } +.o-100 { opacity: 1; } +.o-90 { opacity: .9; } +.o-80 { opacity: .8; } +.o-70 { opacity: .7; } +.o-60 { opacity: .6; } +.o-50 { opacity: .5; } +.o-40 { opacity: .4; } +.o-30 { opacity: .3; } +.o-20 { opacity: .2; } +.o-10 { opacity: .1; } +.o-05 { opacity: .05; } +.o-025 { opacity: .025; } +.o-0 { opacity: 0; } diff --git a/src/_order.css b/src/_order.css deleted file mode 100644 index df0c82921..000000000 --- a/src/_order.css +++ /dev/null @@ -1,60 +0,0 @@ -/* - - ORDER - - Media Query Extensions: - -s = small - -m = medium - -l = large - -*/ - -.order-0 { order: 0; } -.order-1 { order: 1; } -.order-2 { order: 2; } -.order-3 { order: 3; } -.order-4 { order: 4; } -.order-5 { order: 5; } -.order-6 { order: 6; } -.order-7 { order: 7; } -.order-8 { order: 8; } -.order-last { order: 99999; } - -@container (min-width:30em) { - .order-0-s { order: 0; } - .order-1-s { order: 1; } - .order-2-s { order: 2; } - .order-3-s { order: 3; } - .order-4-s { order: 4; } - .order-5-s { order: 5; } - .order-6-s { order: 6; } - .order-7-s { order: 7; } - .order-8-s { order: 8; } - .order-last-s { order: 99999; } -} -@container (min-width:48em) { - .order-0-m { order: 0; } - .order-1-m { order: 1; } - .order-2-m { order: 2; } - .order-3-m { order: 3; } - .order-4-m { order: 4; } - .order-5-m { order: 5; } - .order-6-m { order: 6; } - .order-7-m { order: 7; } - .order-8-m { order: 8; } - .order-last-m { order: 99999; } - -} - -@container (min-width:64em) { - .order-0-l { order: 0; } - .order-1-l { order: 1; } - .order-2-l { order: 2; } - .order-3-l { order: 3; } - .order-4-l { order: 4; } - .order-5-l { order: 5; } - .order-6-l { order: 6; } - .order-7-l { order: 7; } - .order-8-l { order: 8; } - .order-last-l { order: 99999; } -} diff --git a/src/_outlines.css b/src/_outlines.css index d80fce175..e9b0ed996 100644 --- a/src/_outlines.css +++ b/src/_outlines.css @@ -3,34 +3,30 @@ OUTLINES Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ -.outline { outline: var(--border-width, 1px) solid currentColor; } -.outline-color { outline: var(--border-width, 1px) solid var(--border-color, gray); } -.outline-transparent { outline: var(--border-width, 1px) solid transparent; } +.outline { outline: 1px solid; } +.outline-transparent { outline: 1px solid transparent; } .outline-0 { outline: 0; } -@container (min-width:30em) { - .outline-s { outline: var(--border-width, 1px) solid currentColor; } - .outline-color-s { outline: var(--border-width, 1px) solid var(--border-color, gray); } - .outline-transparent-s { outline: var(--border-width, 1px) solid transparent; } - .outline-0-s { outline: 0; } +@media (--breakpoint-not-small) { + .outline-ns { outline: 1px solid; } + .outline-transparent-ns { outline: 1px solid transparent; } + .outline-0-ns { outline: 0; } } -@container (min-width:48em) { - .outline-m { outline: var(--border-width, 1px) solid currentColor; } - .outline-color-m { outline: var(--border-width, 1px) solid var(--border-color, gray); } - .outline-transparent-m { outline: var(--border-width, 1px) solid transparent; } +@media (--breakpoint-medium) { + .outline-m { outline: 1px solid; } + .outline-transparent-m { outline: 1px solid transparent; } .outline-0-m { outline: 0; } } -@container (min-width:64em) { - .outline-l { outline: var(--border-width, 1px) solid currentColor; } - .outline-color-l { outline: var(--border-width, 1px) solid var(--border-color, gray); } - .outline-transparent-l { outline: var(--border-width, 1px) solid transparent; } +@media (--breakpoint-large) { + .outline-l { outline: 1px solid; } + .outline-transparent-l { outline: 1px solid transparent; } .outline-0-l { outline: 0; } } diff --git a/src/_overflow.css b/src/_overflow.css index 92182d07c..82ca8ebbc 100644 --- a/src/_overflow.css +++ b/src/_overflow.css @@ -3,7 +3,7 @@ OVERFLOW Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -24,23 +24,23 @@ .overflow-y-scroll { overflow-y: scroll; } .overflow-y-auto { overflow-y: auto; } -@container (min-width:30em) { - .overflow-visible-s { overflow: visible; } - .overflow-hidden-s { overflow: hidden; } - .overflow-scroll-s { overflow: scroll; } - .overflow-auto-s { overflow: auto; } - .overflow-x-visible-s { overflow-x: visible; } - .overflow-x-hidden-s { overflow-x: hidden; } - .overflow-x-scroll-s { overflow-x: scroll; } - .overflow-x-auto-s { overflow-x: auto; } +@media (--breakpoint-not-small) { + .overflow-visible-ns { overflow: visible; } + .overflow-hidden-ns { overflow: hidden; } + .overflow-scroll-ns { overflow: scroll; } + .overflow-auto-ns { overflow: auto; } + .overflow-x-visible-ns { overflow-x: visible; } + .overflow-x-hidden-ns { overflow-x: hidden; } + .overflow-x-scroll-ns { overflow-x: scroll; } + .overflow-x-auto-ns { overflow-x: auto; } - .overflow-y-visible-s { overflow-y: visible; } - .overflow-y-hidden-s { overflow-y: hidden; } - .overflow-y-scroll-s { overflow-y: scroll; } - .overflow-y-auto-s { overflow-y: auto; } + .overflow-y-visible-ns { overflow-y: visible; } + .overflow-y-hidden-ns { overflow-y: hidden; } + .overflow-y-scroll-ns { overflow-y: scroll; } + .overflow-y-auto-ns { overflow-y: auto; } } -@container (min-width:48em) { +@media (--breakpoint-medium) { .overflow-visible-m { overflow: visible; } .overflow-hidden-m { overflow: hidden; } .overflow-scroll-m { overflow: scroll; } @@ -57,7 +57,7 @@ .overflow-y-auto-m { overflow-y: auto; } } -@container (min-width:64em) { +@media (--breakpoint-large) { .overflow-visible-l { overflow: visible; } .overflow-hidden-l { overflow: hidden; } .overflow-scroll-l { overflow: scroll; } diff --git a/src/_position.css b/src/_position.css index 7f715381c..eaccbdf24 100644 --- a/src/_position.css +++ b/src/_position.css @@ -4,7 +4,7 @@ Docs: http://tachyons.io/docs/layout/position/ Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -14,28 +14,24 @@ .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } -.sticky { position: sticky; } -@container (min-width:30em) { - .static-s { position: static; } - .relative-s { position: relative; } - .absolute-s { position: absolute; } - .fixed-s { position: fixed; } - .sticky-s { position: sticky; } +@media (--breakpoint-not-small) { + .static-ns { position: static; } + .relative-ns { position: relative; } + .absolute-ns { position: absolute; } + .fixed-ns { position: fixed; } } -@container (min-width:48em) { +@media (--breakpoint-medium) { .static-m { position: static; } .relative-m { position: relative; } .absolute-m { position: absolute; } .fixed-m { position: fixed; } - .sticky-m { position: sticky; } } -@container (min-width:64em) { +@media (--breakpoint-large) { .static-l { position: static; } .relative-l { position: relative; } .absolute-l { position: absolute; } .fixed-l { position: fixed; } - .sticky-l { position: sticky; } } diff --git a/src/_rotations.css b/src/_rotations.css index 4611b7e11..5adf7aad2 100644 --- a/src/_rotations.css +++ b/src/_rotations.css @@ -12,17 +12,17 @@ .rotate-270 { transform: rotate(270deg); } .rotate-315 { transform: rotate(315deg); } -@container (min-width:30em){ - .rotate-45-s { transform: rotate(45deg); } - .rotate-90-s { transform: rotate(90deg); } - .rotate-135-s { transform: rotate(135deg); } - .rotate-180-s { transform: rotate(180deg); } - .rotate-225-s { transform: rotate(225deg); } - .rotate-270-s { transform: rotate(270deg); } - .rotate-315-s { transform: rotate(315deg); } +@media (--breakpoint-not-small){ + .rotate-45-ns { transform: rotate(45deg); } + .rotate-90-ns { transform: rotate(90deg); } + .rotate-135-ns { transform: rotate(135deg); } + .rotate-180-ns { transform: rotate(180deg); } + .rotate-225-ns { transform: rotate(225deg); } + .rotate-270-ns { transform: rotate(270deg); } + .rotate-315-ns { transform: rotate(315deg); } } -@container (min-width:48em){ +@media (--breakpoint-medium){ .rotate-45-m { transform: rotate(45deg); } .rotate-90-m { transform: rotate(90deg); } .rotate-135-m { transform: rotate(135deg); } @@ -32,7 +32,7 @@ .rotate-315-m { transform: rotate(315deg); } } -@container (min-width:64em){ +@media (--breakpoint-large){ .rotate-45-l { transform: rotate(45deg); } .rotate-90-l { transform: rotate(90deg); } .rotate-135-l { transform: rotate(135deg); } diff --git a/src/_skins-pseudo.css b/src/_skins-pseudo.css index 4e4bc8933..593abf862 100644 --- a/src/_skins-pseudo.css +++ b/src/_skins-pseudo.css @@ -3,784 +3,234 @@ SKINS:PSEUDO Customize the color of an element when - it is focused or hovered over. This is a larger file. Feel - free to remove and edit colors that aren't needed. + it is focused or hovered over. */ -.hover-overlay-tint-0:hover { color: var( --overlay-tint-0); } -.hover-overlay-tint-1:hover { color: var( --overlay-tint-1); } -.hover-overlay-tint-2:hover { color: var( --overlay-tint-2); } -.hover-overlay-tint-3:hover { color: var( --overlay-tint-3); } -.hover-overlay-tint-4:hover { color: var( --overlay-tint-4); } -.hover-overlay-tint-5:hover { color: var( --overlay-tint-5); } -.hover-overlay-tint-6:hover { color: var( --overlay-tint-6); } -.hover-overlay-tint-7:hover { color: var( --overlay-tint-7); } -.hover-overlay-tint-8:hover { color: var( --overlay-tint-8); } -.hover-overlay-tint-9:hover { color: var( --overlay-tint-9); } -.hover-overlay-tint-10:hover { color: var( --overlay-tint-10); } -.hover-overlay-tint-11:hover { color: var( --overlay-tint-11); } -.hover-overlay-shadow-0:hover { color: var( --overlay-shadow-0); } -.hover-overlay-shadow-1:hover { color: var( --overlay-shadow-1); } -.hover-overlay-shadow-2:hover { color: var( --overlay-shadow-2); } -.hover-overlay-shadow-3:hover { color: var( --overlay-shadow-3); } -.hover-overlay-shadow-4:hover { color: var( --overlay-shadow-4); } -.hover-overlay-shadow-5:hover { color: var( --overlay-shadow-5); } -.hover-overlay-shadow-6:hover { color: var( --overlay-shadow-6); } -.hover-overlay-shadow-7:hover { color: var( --overlay-shadow-7); } -.hover-overlay-shadow-8:hover { color: var( --overlay-shadow-8); } -.hover-overlay-shadow-9:hover { color: var( --overlay-shadow-9); } -.hover-overlay-shadow-10:hover { color: var( --overlay-shadow-10); } -.hover-overlay-shadow-11:hover { color: var( --overlay-shadow-11); } -.hover-gray-0:hover { color: var( --gray-0); } -.hover-gray-1:hover { color: var( --gray-1); } -.hover-gray-2:hover { color: var( --gray-2); } -.hover-gray-3:hover { color: var( --gray-3); } -.hover-gray-4:hover { color: var( --gray-4); } -.hover-gray-5:hover { color: var( --gray-5); } -.hover-gray-6:hover { color: var( --gray-6); } -.hover-gray-7:hover { color: var( --gray-7); } -.hover-gray-8:hover { color: var( --gray-8); } -.hover-gray-9:hover { color: var( --gray-9); } -.hover-gray-10:hover { color: var( --gray-10); } -.hover-gray-11:hover { color: var( --gray-11); } -.hover-slate-gray-0:hover { color: var( --slate-gray-0); } -.hover-slate-gray-1:hover { color: var( --slate-gray-1); } -.hover-slate-gray-2:hover { color: var( --slate-gray-2); } -.hover-slate-gray-3:hover { color: var( --slate-gray-3); } -.hover-slate-gray-4:hover { color: var( --slate-gray-4); } -.hover-slate-gray-5:hover { color: var( --slate-gray-5); } -.hover-slate-gray-6:hover { color: var( --slate-gray-6); } -.hover-slate-gray-7:hover { color: var( --slate-gray-7); } -.hover-slate-gray-8:hover { color: var( --slate-gray-8); } -.hover-slate-gray-9:hover { color: var( --slate-gray-9); } -.hover-slate-gray-10:hover { color: var( --slate-gray-10); } -.hover-slate-gray-11:hover { color: var( --slate-gray-11); } -.hover-blue-0:hover { color: var( --blue-0); } -.hover-blue-1:hover { color: var( --blue-1); } -.hover-blue-2:hover { color: var( --blue-2); } -.hover-blue-3:hover { color: var( --blue-3); } -.hover-blue-4:hover { color: var( --blue-4); } -.hover-blue-5:hover { color: var( --blue-5); } -.hover-blue-6:hover { color: var( --blue-6); } -.hover-blue-7:hover { color: var( --blue-7); } -.hover-blue-8:hover { color: var( --blue-8); } -.hover-blue-9:hover { color: var( --blue-9); } -.hover-blue-10:hover { color: var( --blue-10); } -.hover-blue-11:hover { color: var( --blue-11); } -.hover-indigo-0:hover { color: var( --indigo-0); } -.hover-indigo-1:hover { color: var( --indigo-1); } -.hover-indigo-2:hover { color: var( --indigo-2); } -.hover-indigo-3:hover { color: var( --indigo-3); } -.hover-indigo-4:hover { color: var( --indigo-4); } -.hover-indigo-5:hover { color: var( --indigo-5); } -.hover-indigo-6:hover { color: var( --indigo-6); } -.hover-indigo-7:hover { color: var( --indigo-7); } -.hover-indigo-8:hover { color: var( --indigo-8); } -.hover-indigo-9:hover { color: var( --indigo-9); } -.hover-indigo-10:hover { color: var( --indigo-10); } -.hover-indigo-11:hover { color: var( --indigo-11); } -.hover-violet-0:hover { color: var( --violet-0); } -.hover-violet-1:hover { color: var( --violet-1); } -.hover-violet-2:hover { color: var( --violet-2); } -.hover-violet-3:hover { color: var( --violet-3); } -.hover-violet-4:hover { color: var( --violet-4); } -.hover-violet-5:hover { color: var( --violet-5); } -.hover-violet-6:hover { color: var( --violet-6); } -.hover-violet-7:hover { color: var( --violet-7); } -.hover-violet-8:hover { color: var( --violet-8); } -.hover-violet-9:hover { color: var( --violet-9); } -.hover-violet-10:hover { color: var( --violet-10); } -.hover-violet-11:hover { color: var( --violet-11); } -.hover-magenta-0:hover { color: var( --magenta-0); } -.hover-magenta-1:hover { color: var( --magenta-1); } -.hover-magenta-2:hover { color: var( --magenta-2); } -.hover-magenta-3:hover { color: var( --magenta-3); } -.hover-magenta-4:hover { color: var( --magenta-4); } -.hover-magenta-5:hover { color: var( --magenta-5); } -.hover-magenta-6:hover { color: var( --magenta-6); } -.hover-magenta-7:hover { color: var( --magenta-7); } -.hover-magenta-8:hover { color: var( --magenta-8); } -.hover-magenta-9:hover { color: var( --magenta-9); } -.hover-magenta-10:hover { color: var( --magenta-10); } -.hover-magenta-11:hover { color: var( --magenta-11); } -.hover-red-0:hover { color: var( --red-0); } -.hover-red-1:hover { color: var( --red-1); } -.hover-red-2:hover { color: var( --red-2); } -.hover-red-3:hover { color: var( --red-3); } -.hover-red-4:hover { color: var( --red-4); } -.hover-red-5:hover { color: var( --red-5); } -.hover-red-6:hover { color: var( --red-6); } -.hover-red-7:hover { color: var( --red-7); } -.hover-red-8:hover { color: var( --red-8); } -.hover-red-9:hover { color: var( --red-9); } -.hover-red-10:hover { color: var( --red-10); } -.hover-red-11:hover { color: var( --red-11); } -.hover-red-orange-0:hover { color: var( --red-orange-0); } -.hover-red-orange-1:hover { color: var( --red-orange-1); } -.hover-red-orange-2:hover { color: var( --red-orange-2); } -.hover-red-orange-3:hover { color: var( --red-orange-3); } -.hover-red-orange-4:hover { color: var( --red-orange-4); } -.hover-red-orange-5:hover { color: var( --red-orange-5); } -.hover-red-orange-6:hover { color: var( --red-orange-6); } -.hover-red-orange-7:hover { color: var( --red-orange-7); } -.hover-red-orange-8:hover { color: var( --red-orange-8); } -.hover-red-orange-9:hover { color: var( --red-orange-9); } -.hover-red-orange-10:hover { color: var( --red-orange-10); } -.hover-red-orange-11:hover { color: var( --red-orange-11); } -.hover-orange-0:hover { color: var( --orange-0); } -.hover-orange-1:hover { color: var( --orange-1); } -.hover-orange-2:hover { color: var( --orange-2); } -.hover-orange-3:hover { color: var( --orange-3); } -.hover-orange-4:hover { color: var( --orange-4); } -.hover-orange-5:hover { color: var( --orange-5); } -.hover-orange-6:hover { color: var( --orange-6); } -.hover-orange-7:hover { color: var( --orange-7); } -.hover-orange-8:hover { color: var( --orange-8); } -.hover-orange-9:hover { color: var( --orange-9); } -.hover-orange-10:hover { color: var( --orange-10); } -.hover-orange-11:hover { color: var( --orange-11); } -.hover-gold-0:hover { color: var( --gold-0); } -.hover-gold-1:hover { color: var( --gold-1); } -.hover-gold-2:hover { color: var( --gold-2); } -.hover-gold-3:hover { color: var( --gold-3); } -.hover-gold-4:hover { color: var( --gold-4); } -.hover-gold-5:hover { color: var( --gold-5); } -.hover-gold-6:hover { color: var( --gold-6); } -.hover-gold-7:hover { color: var( --gold-7); } -.hover-gold-8:hover { color: var( --gold-8); } -.hover-gold-9:hover { color: var( --gold-9); } -.hover-gold-10:hover { color: var( --gold-10); } -.hover-gold-11:hover { color: var( --gold-11); } -.hover-yellow-0:hover { color: var( --yellow-0); } -.hover-yellow-1:hover { color: var( --yellow-1); } -.hover-yellow-2:hover { color: var( --yellow-2); } -.hover-yellow-3:hover { color: var( --yellow-3); } -.hover-yellow-4:hover { color: var( --yellow-4); } -.hover-yellow-5:hover { color: var( --yellow-5); } -.hover-yellow-6:hover { color: var( --yellow-6); } -.hover-yellow-7:hover { color: var( --yellow-7); } -.hover-yellow-8:hover { color: var( --yellow-8); } -.hover-yellow-9:hover { color: var( --yellow-9); } -.hover-yellow-10:hover { color: var( --yellow-10); } -.hover-yellow-11:hover { color: var( --yellow-11); } -.hover-green-0:hover { color: var( --green-0); } -.hover-green-1:hover { color: var( --green-1); } -.hover-green-2:hover { color: var( --green-2); } -.hover-green-3:hover { color: var( --green-3); } -.hover-green-4:hover { color: var( --green-4); } -.hover-green-5:hover { color: var( --green-5); } -.hover-green-6:hover { color: var( --green-6); } -.hover-green-7:hover { color: var( --green-7); } -.hover-green-8:hover { color: var( --green-8); } -.hover-green-9:hover { color: var( --green-9); } -.hover-green-10:hover { color: var( --green-10); } -.hover-green-11:hover { color: var( --green-11); } -.hover-teal-0:hover { color: var( --teal-0); } -.hover-teal-1:hover { color: var( --teal-1); } -.hover-teal-2:hover { color: var( --teal-2); } -.hover-teal-3:hover { color: var( --teal-3); } -.hover-teal-4:hover { color: var( --teal-4); } -.hover-teal-5:hover { color: var( --teal-5); } -.hover-teal-6:hover { color: var( --teal-6); } -.hover-teal-7:hover { color: var( --teal-7); } -.hover-teal-8:hover { color: var( --teal-8); } -.hover-teal-9:hover { color: var( --teal-9); } -.hover-teal-10:hover { color: var( --teal-10); } -.hover-teal-11:hover { color: var( --teal-11); } -.hover-cyan-0:hover { color: var( --cyan-0); } -.hover-cyan-1:hover { color: var( --cyan-1); } -.hover-cyan-2:hover { color: var( --cyan-2); } -.hover-cyan-3:hover { color: var( --cyan-3); } -.hover-cyan-4:hover { color: var( --cyan-4); } -.hover-cyan-5:hover { color: var( --cyan-5); } -.hover-cyan-6:hover { color: var( --cyan-6); } -.hover-cyan-7:hover { color: var( --cyan-7); } -.hover-cyan-8:hover { color: var( --cyan-8); } -.hover-cyan-9:hover { color: var( --cyan-9); } -.hover-cyan-10:hover { color: var( --cyan-10); } -.hover-cyan-11:hover { color: var( --cyan-11); } +.hover-black:hover, +.hover-black:focus { color: var(--black); } +.hover-near-black:hover, +.hover-near-black:focus { color: var(--near-black); } +.hover-dark-gray:hover, +.hover-dark-gray:focus { color: var(--dark-gray); } +.hover-mid-gray:hover, +.hover-mid-gray:focus { color: var(--mid-gray); } +.hover-gray:hover, +.hover-gray:focus { color: var(--gray); } +.hover-silver:hover, +.hover-silver:focus { color: var(--silver); } +.hover-light-silver:hover, +.hover-light-silver:focus { color: var(--light-silver); } +.hover-moon-gray:hover, +.hover-moon-gray:focus { color: var(--moon-gray); } +.hover-light-gray:hover, +.hover-light-gray:focus { color: var(--light-gray); } +.hover-near-white:hover, +.hover-near-white:focus { color: var(--near-white); } +.hover-white:hover, +.hover-white:focus { color: var(--white); } -/* Background colors */ +.hover-black-90:hover, +.hover-black-90:focus { color: var(--black-90); } +.hover-black-80:hover, +.hover-black-80:focus { color: var(--black-80); } +.hover-black-70:hover, +.hover-black-70:focus { color: var(--black-70); } +.hover-black-60:hover, +.hover-black-60:focus { color: var(--black-60); } +.hover-black-50:hover, +.hover-black-50:focus { color: var(--black-50); } +.hover-black-40:hover, +.hover-black-40:focus { color: var(--black-40); } +.hover-black-30:hover, +.hover-black-30:focus { color: var(--black-30); } +.hover-black-20:hover, +.hover-black-20:focus { color: var(--black-20); } +.hover-black-10:hover, +.hover-black-10:focus { color: var(--black-10); } +.hover-white-90:hover, +.hover-white-90:focus { color: var(--white-90); } +.hover-white-80:hover, +.hover-white-80:focus { color: var(--white-80); } +.hover-white-70:hover, +.hover-white-70:focus { color: var(--white-70); } +.hover-white-60:hover, +.hover-white-60:focus { color: var(--white-60); } +.hover-white-50:hover, +.hover-white-50:focus { color: var(--white-50); } +.hover-white-40:hover, +.hover-white-40:focus { color: var(--white-40); } +.hover-white-30:hover, +.hover-white-30:focus { color: var(--white-30); } +.hover-white-20:hover, +.hover-white-20:focus { color: var(--white-20); } +.hover-white-10:hover, +.hover-white-10:focus { color: var(--white-10); } +.hover-inherit:hover, +.hover-inherit:focus { color: inherit; } -.hover-bg-overlay-tint-0:hover { background-color: var( --overlay-tint-0); } -.hover-bg-overlay-tint-1:hover { background-color: var( --overlay-tint-1); } -.hover-bg-overlay-tint-2:hover { background-color: var( --overlay-tint-2); } -.hover-bg-overlay-tint-3:hover { background-color: var( --overlay-tint-3); } -.hover-bg-overlay-tint-4:hover { background-color: var( --overlay-tint-4); } -.hover-bg-overlay-tint-5:hover { background-color: var( --overlay-tint-5); } -.hover-bg-overlay-tint-6:hover { background-color: var( --overlay-tint-6); } -.hover-bg-overlay-tint-7:hover { background-color: var( --overlay-tint-7); } -.hover-bg-overlay-tint-8:hover { background-color: var( --overlay-tint-8); } -.hover-bg-overlay-tint-9:hover { background-color: var( --overlay-tint-9); } -.hover-bg-overlay-tint-10:hover { background-color: var( --overlay-tint-10); } -.hover-bg-overlay-tint-11:hover { background-color: var( --overlay-tint-11); } -.hover-bg-overlay-shadow-0:hover { background-color: var( --overlay-shadow-0); } -.hover-bg-overlay-shadow-1:hover { background-color: var( --overlay-shadow-1); } -.hover-bg-overlay-shadow-2:hover { background-color: var( --overlay-shadow-2); } -.hover-bg-overlay-shadow-3:hover { background-color: var( --overlay-shadow-3); } -.hover-bg-overlay-shadow-4:hover { background-color: var( --overlay-shadow-4); } -.hover-bg-overlay-shadow-5:hover { background-color: var( --overlay-shadow-5); } -.hover-bg-overlay-shadow-6:hover { background-color: var( --overlay-shadow-6); } -.hover-bg-overlay-shadow-7:hover { background-color: var( --overlay-shadow-7); } -.hover-bg-overlay-shadow-8:hover { background-color: var( --overlay-shadow-8); } -.hover-bg-overlay-shadow-9:hover { background-color: var( --overlay-shadow-9); } -.hover-bg-overlay-shadow-10:hover { background-color: var( --overlay-shadow-10); } -.hover-bg-overlay-shadow-11:hover { background-color: var( --overlay-shadow-11); } -.hover-bg-gray-0:hover { background-color: var( --gray-0); } -.hover-bg-gray-1:hover { background-color: var( --gray-1); } -.hover-bg-gray-2:hover { background-color: var( --gray-2); } -.hover-bg-gray-3:hover { background-color: var( --gray-3); } -.hover-bg-gray-4:hover { background-color: var( --gray-4); } -.hover-bg-gray-5:hover { background-color: var( --gray-5); } -.hover-bg-gray-6:hover { background-color: var( --gray-6); } -.hover-bg-gray-7:hover { background-color: var( --gray-7); } -.hover-bg-gray-8:hover { background-color: var( --gray-8); } -.hover-bg-gray-9:hover { background-color: var( --gray-9); } -.hover-bg-gray-10:hover { background-color: var( --gray-10); } -.hover-bg-gray-11:hover { background-color: var( --gray-11); } -.hover-bg-slate-gray-0:hover { background-color: var( --slate-gray-0); } -.hover-bg-slate-gray-1:hover { background-color: var( --slate-gray-1); } -.hover-bg-slate-gray-2:hover { background-color: var( --slate-gray-2); } -.hover-bg-slate-gray-3:hover { background-color: var( --slate-gray-3); } -.hover-bg-slate-gray-4:hover { background-color: var( --slate-gray-4); } -.hover-bg-slate-gray-5:hover { background-color: var( --slate-gray-5); } -.hover-bg-slate-gray-6:hover { background-color: var( --slate-gray-6); } -.hover-bg-slate-gray-7:hover { background-color: var( --slate-gray-7); } -.hover-bg-slate-gray-8:hover { background-color: var( --slate-gray-8); } -.hover-bg-slate-gray-9:hover { background-color: var( --slate-gray-9); } -.hover-bg-slate-gray-10:hover { background-color: var( --slate-gray-10); } -.hover-bg-slate-gray-11:hover { background-color: var( --slate-gray-11); } -.hover-bg-blue-0:hover { background-color: var( --blue-0); } -.hover-bg-blue-1:hover { background-color: var( --blue-1); } -.hover-bg-blue-2:hover { background-color: var( --blue-2); } -.hover-bg-blue-3:hover { background-color: var( --blue-3); } -.hover-bg-blue-4:hover { background-color: var( --blue-4); } -.hover-bg-blue-5:hover { background-color: var( --blue-5); } -.hover-bg-blue-6:hover { background-color: var( --blue-6); } -.hover-bg-blue-7:hover { background-color: var( --blue-7); } -.hover-bg-blue-8:hover { background-color: var( --blue-8); } -.hover-bg-blue-9:hover { background-color: var( --blue-9); } -.hover-bg-blue-10:hover { background-color: var( --blue-10); } -.hover-bg-blue-11:hover { background-color: var( --blue-11); } -.hover-bg-indigo-0:hover { background-color: var( --indigo-0); } -.hover-bg-indigo-1:hover { background-color: var( --indigo-1); } -.hover-bg-indigo-2:hover { background-color: var( --indigo-2); } -.hover-bg-indigo-3:hover { background-color: var( --indigo-3); } -.hover-bg-indigo-4:hover { background-color: var( --indigo-4); } -.hover-bg-indigo-5:hover { background-color: var( --indigo-5); } -.hover-bg-indigo-6:hover { background-color: var( --indigo-6); } -.hover-bg-indigo-7:hover { background-color: var( --indigo-7); } -.hover-bg-indigo-8:hover { background-color: var( --indigo-8); } -.hover-bg-indigo-9:hover { background-color: var( --indigo-9); } -.hover-bg-indigo-10:hover { background-color: var( --indigo-10); } -.hover-bg-indigo-11:hover { background-color: var( --indigo-11); } -.hover-bg-violet-0:hover { background-color: var( --violet-0); } -.hover-bg-violet-1:hover { background-color: var( --violet-1); } -.hover-bg-violet-2:hover { background-color: var( --violet-2); } -.hover-bg-violet-3:hover { background-color: var( --violet-3); } -.hover-bg-violet-4:hover { background-color: var( --violet-4); } -.hover-bg-violet-5:hover { background-color: var( --violet-5); } -.hover-bg-violet-6:hover { background-color: var( --violet-6); } -.hover-bg-violet-7:hover { background-color: var( --violet-7); } -.hover-bg-violet-8:hover { background-color: var( --violet-8); } -.hover-bg-violet-9:hover { background-color: var( --violet-9); } -.hover-bg-violet-10:hover { background-color: var( --violet-10); } -.hover-bg-violet-11:hover { background-color: var( --violet-11); } -.hover-bg-magenta-0:hover { background-color: var( --magenta-0); } -.hover-bg-magenta-1:hover { background-color: var( --magenta-1); } -.hover-bg-magenta-2:hover { background-color: var( --magenta-2); } -.hover-bg-magenta-3:hover { background-color: var( --magenta-3); } -.hover-bg-magenta-4:hover { background-color: var( --magenta-4); } -.hover-bg-magenta-5:hover { background-color: var( --magenta-5); } -.hover-bg-magenta-6:hover { background-color: var( --magenta-6); } -.hover-bg-magenta-7:hover { background-color: var( --magenta-7); } -.hover-bg-magenta-8:hover { background-color: var( --magenta-8); } -.hover-bg-magenta-9:hover { background-color: var( --magenta-9); } -.hover-bg-magenta-10:hover { background-color: var( --magenta-10); } -.hover-bg-magenta-11:hover { background-color: var( --magenta-11); } -.hover-bg-red-0:hover { background-color: var( --red-0); } -.hover-bg-red-1:hover { background-color: var( --red-1); } -.hover-bg-red-2:hover { background-color: var( --red-2); } -.hover-bg-red-3:hover { background-color: var( --red-3); } -.hover-bg-red-4:hover { background-color: var( --red-4); } -.hover-bg-red-5:hover { background-color: var( --red-5); } -.hover-bg-red-6:hover { background-color: var( --red-6); } -.hover-bg-red-7:hover { background-color: var( --red-7); } -.hover-bg-red-8:hover { background-color: var( --red-8); } -.hover-bg-red-9:hover { background-color: var( --red-9); } -.hover-bg-red-10:hover { background-color: var( --red-10); } -.hover-bg-red-11:hover { background-color: var( --red-11); } -.hover-bg-red-orange-0:hover { background-color: var( --red-orange-0); } -.hover-bg-red-orange-1:hover { background-color: var( --red-orange-1); } -.hover-bg-red-orange-2:hover { background-color: var( --red-orange-2); } -.hover-bg-red-orange-3:hover { background-color: var( --red-orange-3); } -.hover-bg-red-orange-4:hover { background-color: var( --red-orange-4); } -.hover-bg-red-orange-5:hover { background-color: var( --red-orange-5); } -.hover-bg-red-orange-6:hover { background-color: var( --red-orange-6); } -.hover-bg-red-orange-7:hover { background-color: var( --red-orange-7); } -.hover-bg-red-orange-8:hover { background-color: var( --red-orange-8); } -.hover-bg-red-orange-9:hover { background-color: var( --red-orange-9); } -.hover-bg-red-orange-10:hover { background-color: var( --red-orange-10); } -.hover-bg-red-orange-11:hover { background-color: var( --red-orange-11); } -.hover-bg-orange-0:hover { background-color: var( --orange-0); } -.hover-bg-orange-1:hover { background-color: var( --orange-1); } -.hover-bg-orange-2:hover { background-color: var( --orange-2); } -.hover-bg-orange-3:hover { background-color: var( --orange-3); } -.hover-bg-orange-4:hover { background-color: var( --orange-4); } -.hover-bg-orange-5:hover { background-color: var( --orange-5); } -.hover-bg-orange-6:hover { background-color: var( --orange-6); } -.hover-bg-orange-7:hover { background-color: var( --orange-7); } -.hover-bg-orange-8:hover { background-color: var( --orange-8); } -.hover-bg-orange-9:hover { background-color: var( --orange-9); } -.hover-bg-orange-10:hover { background-color: var( --orange-10); } -.hover-bg-orange-11:hover { background-color: var( --orange-11); } -.hover-bg-gold-0:hover { background-color: var( --gold-0); } -.hover-bg-gold-1:hover { background-color: var( --gold-1); } -.hover-bg-gold-2:hover { background-color: var( --gold-2); } -.hover-bg-gold-3:hover { background-color: var( --gold-3); } -.hover-bg-gold-4:hover { background-color: var( --gold-4); } -.hover-bg-gold-5:hover { background-color: var( --gold-5); } -.hover-bg-gold-6:hover { background-color: var( --gold-6); } -.hover-bg-gold-7:hover { background-color: var( --gold-7); } -.hover-bg-gold-8:hover { background-color: var( --gold-8); } -.hover-bg-gold-9:hover { background-color: var( --gold-9); } -.hover-bg-gold-10:hover { background-color: var( --gold-10); } -.hover-bg-gold-11:hover { background-color: var( --gold-11); } -.hover-bg-yellow-0:hover { background-color: var( --yellow-0); } -.hover-bg-yellow-1:hover { background-color: var( --yellow-1); } -.hover-bg-yellow-2:hover { background-color: var( --yellow-2); } -.hover-bg-yellow-3:hover { background-color: var( --yellow-3); } -.hover-bg-yellow-4:hover { background-color: var( --yellow-4); } -.hover-bg-yellow-5:hover { background-color: var( --yellow-5); } -.hover-bg-yellow-6:hover { background-color: var( --yellow-6); } -.hover-bg-yellow-7:hover { background-color: var( --yellow-7); } -.hover-bg-yellow-8:hover { background-color: var( --yellow-8); } -.hover-bg-yellow-9:hover { background-color: var( --yellow-9); } -.hover-bg-yellow-10:hover { background-color: var( --yellow-10); } -.hover-bg-yellow-11:hover { background-color: var( --yellow-11); } -.hover-bg-green-0:hover { background-color: var( --green-0); } -.hover-bg-green-1:hover { background-color: var( --green-1); } -.hover-bg-green-2:hover { background-color: var( --green-2); } -.hover-bg-green-3:hover { background-color: var( --green-3); } -.hover-bg-green-4:hover { background-color: var( --green-4); } -.hover-bg-green-5:hover { background-color: var( --green-5); } -.hover-bg-green-6:hover { background-color: var( --green-6); } -.hover-bg-green-7:hover { background-color: var( --green-7); } -.hover-bg-green-8:hover { background-color: var( --green-8); } -.hover-bg-green-9:hover { background-color: var( --green-9); } -.hover-bg-green-10:hover { background-color: var( --green-10); } -.hover-bg-green-11:hover { background-color: var( --green-11); } -.hover-bg-teal-0:hover { background-color: var( --teal-0); } -.hover-bg-teal-1:hover { background-color: var( --teal-1); } -.hover-bg-teal-2:hover { background-color: var( --teal-2); } -.hover-bg-teal-3:hover { background-color: var( --teal-3); } -.hover-bg-teal-4:hover { background-color: var( --teal-4); } -.hover-bg-teal-5:hover { background-color: var( --teal-5); } -.hover-bg-teal-6:hover { background-color: var( --teal-6); } -.hover-bg-teal-7:hover { background-color: var( --teal-7); } -.hover-bg-teal-8:hover { background-color: var( --teal-8); } -.hover-bg-teal-9:hover { background-color: var( --teal-9); } -.hover-bg-teal-10:hover { background-color: var( --teal-10); } -.hover-bg-teal-11:hover { background-color: var( --teal-11); } -.hover-bg-cyan-0:hover { background-color: var( --cyan-0); } -.hover-bg-cyan-1:hover { background-color: var( --cyan-1); } -.hover-bg-cyan-2:hover { background-color: var( --cyan-2); } -.hover-bg-cyan-3:hover { background-color: var( --cyan-3); } -.hover-bg-cyan-4:hover { background-color: var( --cyan-4); } -.hover-bg-cyan-5:hover { background-color: var( --cyan-5); } -.hover-bg-cyan-6:hover { background-color: var( --cyan-6); } -.hover-bg-cyan-7:hover { background-color: var( --cyan-7); } -.hover-bg-cyan-8:hover { background-color: var( --cyan-8); } -.hover-bg-cyan-9:hover { background-color: var( --cyan-9); } -.hover-bg-cyan-10:hover { background-color: var( --cyan-10); } -.hover-bg-cyan-11:hover { background-color: var( --cyan-11); } +.hover-bg-black:hover, +.hover-bg-black:focus { background-color: var(--black); } +.hover-bg-near-black:hover, +.hover-bg-near-black:focus { background-color: var(--near-black); } +.hover-bg-dark-gray:hover, +.hover-bg-dark-gray:focus { background-color: var(--dark-gray); } +.hover-bg-mid-gray:hover, +.hover-bg-mid-gray:focus { background-color: var(--mid-gray); } +.hover-bg-gray:hover, +.hover-bg-gray:focus { background-color: var(--gray); } +.hover-bg-silver:hover, +.hover-bg-silver:focus { background-color: var(--silver); } +.hover-bg-light-silver:hover, +.hover-bg-light-silver:focus { background-color: var(--light-silver); } +.hover-bg-moon-gray:hover, +.hover-bg-moon-gray:focus { background-color: var(--moon-gray); } +.hover-bg-light-gray:hover, +.hover-bg-light-gray:focus { background-color: var(--light-gray); } +.hover-bg-near-white:hover, +.hover-bg-near-white:focus { background-color: var(--near-white); } +.hover-bg-white:hover, +.hover-bg-white:focus { background-color: var(--white); } +.hover-bg-transparent:hover, +.hover-bg-transparent:focus { background-color: var(--transparent); } -.focus-overlay-tint-0:focus { color: var( --overlay-tint-0); } -.focus-overlay-tint-1:focus { color: var( --overlay-tint-1); } -.focus-overlay-tint-2:focus { color: var( --overlay-tint-2); } -.focus-overlay-tint-3:focus { color: var( --overlay-tint-3); } -.focus-overlay-tint-4:focus { color: var( --overlay-tint-4); } -.focus-overlay-tint-5:focus { color: var( --overlay-tint-5); } -.focus-overlay-tint-6:focus { color: var( --overlay-tint-6); } -.focus-overlay-tint-7:focus { color: var( --overlay-tint-7); } -.focus-overlay-tint-8:focus { color: var( --overlay-tint-8); } -.focus-overlay-tint-9:focus { color: var( --overlay-tint-9); } -.focus-overlay-tint-10:focus { color: var( --overlay-tint-10); } -.focus-overlay-tint-11:focus { color: var( --overlay-tint-11); } -.focus-overlay-shadow-0:focus { color: var( --overlay-shadow-0); } -.focus-overlay-shadow-1:focus { color: var( --overlay-shadow-1); } -.focus-overlay-shadow-2:focus { color: var( --overlay-shadow-2); } -.focus-overlay-shadow-3:focus { color: var( --overlay-shadow-3); } -.focus-overlay-shadow-4:focus { color: var( --overlay-shadow-4); } -.focus-overlay-shadow-5:focus { color: var( --overlay-shadow-5); } -.focus-overlay-shadow-6:focus { color: var( --overlay-shadow-6); } -.focus-overlay-shadow-7:focus { color: var( --overlay-shadow-7); } -.focus-overlay-shadow-8:focus { color: var( --overlay-shadow-8); } -.focus-overlay-shadow-9:focus { color: var( --overlay-shadow-9); } -.focus-overlay-shadow-10:focus { color: var( --overlay-shadow-10); } -.focus-overlay-shadow-11:focus { color: var( --overlay-shadow-11); } -.focus-gray-0:focus { color: var( --gray-0); } -.focus-gray-1:focus { color: var( --gray-1); } -.focus-gray-2:focus { color: var( --gray-2); } -.focus-gray-3:focus { color: var( --gray-3); } -.focus-gray-4:focus { color: var( --gray-4); } -.focus-gray-5:focus { color: var( --gray-5); } -.focus-gray-6:focus { color: var( --gray-6); } -.focus-gray-7:focus { color: var( --gray-7); } -.focus-gray-8:focus { color: var( --gray-8); } -.focus-gray-9:focus { color: var( --gray-9); } -.focus-gray-10:focus { color: var( --gray-10); } -.focus-gray-11:focus { color: var( --gray-11); } -.focus-slate-gray-0:focus { color: var( --slate-gray-0); } -.focus-slate-gray-1:focus { color: var( --slate-gray-1); } -.focus-slate-gray-2:focus { color: var( --slate-gray-2); } -.focus-slate-gray-3:focus { color: var( --slate-gray-3); } -.focus-slate-gray-4:focus { color: var( --slate-gray-4); } -.focus-slate-gray-5:focus { color: var( --slate-gray-5); } -.focus-slate-gray-6:focus { color: var( --slate-gray-6); } -.focus-slate-gray-7:focus { color: var( --slate-gray-7); } -.focus-slate-gray-8:focus { color: var( --slate-gray-8); } -.focus-slate-gray-9:focus { color: var( --slate-gray-9); } -.focus-slate-gray-10:focus { color: var( --slate-gray-10); } -.focus-slate-gray-11:focus { color: var( --slate-gray-11); } -.focus-blue-0:focus { color: var( --blue-0); } -.focus-blue-1:focus { color: var( --blue-1); } -.focus-blue-2:focus { color: var( --blue-2); } -.focus-blue-3:focus { color: var( --blue-3); } -.focus-blue-4:focus { color: var( --blue-4); } -.focus-blue-5:focus { color: var( --blue-5); } -.focus-blue-6:focus { color: var( --blue-6); } -.focus-blue-7:focus { color: var( --blue-7); } -.focus-blue-8:focus { color: var( --blue-8); } -.focus-blue-9:focus { color: var( --blue-9); } -.focus-blue-10:focus { color: var( --blue-10); } -.focus-blue-11:focus { color: var( --blue-11); } -.focus-indigo-0:focus { color: var( --indigo-0); } -.focus-indigo-1:focus { color: var( --indigo-1); } -.focus-indigo-2:focus { color: var( --indigo-2); } -.focus-indigo-3:focus { color: var( --indigo-3); } -.focus-indigo-4:focus { color: var( --indigo-4); } -.focus-indigo-5:focus { color: var( --indigo-5); } -.focus-indigo-6:focus { color: var( --indigo-6); } -.focus-indigo-7:focus { color: var( --indigo-7); } -.focus-indigo-8:focus { color: var( --indigo-8); } -.focus-indigo-9:focus { color: var( --indigo-9); } -.focus-indigo-10:focus { color: var( --indigo-10); } -.focus-indigo-11:focus { color: var( --indigo-11); } -.focus-violet-0:focus { color: var( --violet-0); } -.focus-violet-1:focus { color: var( --violet-1); } -.focus-violet-2:focus { color: var( --violet-2); } -.focus-violet-3:focus { color: var( --violet-3); } -.focus-violet-4:focus { color: var( --violet-4); } -.focus-violet-5:focus { color: var( --violet-5); } -.focus-violet-6:focus { color: var( --violet-6); } -.focus-violet-7:focus { color: var( --violet-7); } -.focus-violet-8:focus { color: var( --violet-8); } -.focus-violet-9:focus { color: var( --violet-9); } -.focus-violet-10:focus { color: var( --violet-10); } -.focus-violet-11:focus { color: var( --violet-11); } -.focus-magenta-0:focus { color: var( --magenta-0); } -.focus-magenta-1:focus { color: var( --magenta-1); } -.focus-magenta-2:focus { color: var( --magenta-2); } -.focus-magenta-3:focus { color: var( --magenta-3); } -.focus-magenta-4:focus { color: var( --magenta-4); } -.focus-magenta-5:focus { color: var( --magenta-5); } -.focus-magenta-6:focus { color: var( --magenta-6); } -.focus-magenta-7:focus { color: var( --magenta-7); } -.focus-magenta-8:focus { color: var( --magenta-8); } -.focus-magenta-9:focus { color: var( --magenta-9); } -.focus-magenta-10:focus { color: var( --magenta-10); } -.focus-magenta-11:focus { color: var( --magenta-11); } -.focus-red-0:focus { color: var( --red-0); } -.focus-red-1:focus { color: var( --red-1); } -.focus-red-2:focus { color: var( --red-2); } -.focus-red-3:focus { color: var( --red-3); } -.focus-red-4:focus { color: var( --red-4); } -.focus-red-5:focus { color: var( --red-5); } -.focus-red-6:focus { color: var( --red-6); } -.focus-red-7:focus { color: var( --red-7); } -.focus-red-8:focus { color: var( --red-8); } -.focus-red-9:focus { color: var( --red-9); } -.focus-red-10:focus { color: var( --red-10); } -.focus-red-11:focus { color: var( --red-11); } -.focus-red-orange-0:focus { color: var( --red-orange-0); } -.focus-red-orange-1:focus { color: var( --red-orange-1); } -.focus-red-orange-2:focus { color: var( --red-orange-2); } -.focus-red-orange-3:focus { color: var( --red-orange-3); } -.focus-red-orange-4:focus { color: var( --red-orange-4); } -.focus-red-orange-5:focus { color: var( --red-orange-5); } -.focus-red-orange-6:focus { color: var( --red-orange-6); } -.focus-red-orange-7:focus { color: var( --red-orange-7); } -.focus-red-orange-8:focus { color: var( --red-orange-8); } -.focus-red-orange-9:focus { color: var( --red-orange-9); } -.focus-red-orange-10:focus { color: var( --red-orange-10); } -.focus-red-orange-11:focus { color: var( --red-orange-11); } -.focus-orange-0:focus { color: var( --orange-0); } -.focus-orange-1:focus { color: var( --orange-1); } -.focus-orange-2:focus { color: var( --orange-2); } -.focus-orange-3:focus { color: var( --orange-3); } -.focus-orange-4:focus { color: var( --orange-4); } -.focus-orange-5:focus { color: var( --orange-5); } -.focus-orange-6:focus { color: var( --orange-6); } -.focus-orange-7:focus { color: var( --orange-7); } -.focus-orange-8:focus { color: var( --orange-8); } -.focus-orange-9:focus { color: var( --orange-9); } -.focus-orange-10:focus { color: var( --orange-10); } -.focus-orange-11:focus { color: var( --orange-11); } -.focus-gold-0:focus { color: var( --gold-0); } -.focus-gold-1:focus { color: var( --gold-1); } -.focus-gold-2:focus { color: var( --gold-2); } -.focus-gold-3:focus { color: var( --gold-3); } -.focus-gold-4:focus { color: var( --gold-4); } -.focus-gold-5:focus { color: var( --gold-5); } -.focus-gold-6:focus { color: var( --gold-6); } -.focus-gold-7:focus { color: var( --gold-7); } -.focus-gold-8:focus { color: var( --gold-8); } -.focus-gold-9:focus { color: var( --gold-9); } -.focus-gold-10:focus { color: var( --gold-10); } -.focus-gold-11:focus { color: var( --gold-11); } -.focus-yellow-0:focus { color: var( --yellow-0); } -.focus-yellow-1:focus { color: var( --yellow-1); } -.focus-yellow-2:focus { color: var( --yellow-2); } -.focus-yellow-3:focus { color: var( --yellow-3); } -.focus-yellow-4:focus { color: var( --yellow-4); } -.focus-yellow-5:focus { color: var( --yellow-5); } -.focus-yellow-6:focus { color: var( --yellow-6); } -.focus-yellow-7:focus { color: var( --yellow-7); } -.focus-yellow-8:focus { color: var( --yellow-8); } -.focus-yellow-9:focus { color: var( --yellow-9); } -.focus-yellow-10:focus { color: var( --yellow-10); } -.focus-yellow-11:focus { color: var( --yellow-11); } -.focus-green-0:focus { color: var( --green-0); } -.focus-green-1:focus { color: var( --green-1); } -.focus-green-2:focus { color: var( --green-2); } -.focus-green-3:focus { color: var( --green-3); } -.focus-green-4:focus { color: var( --green-4); } -.focus-green-5:focus { color: var( --green-5); } -.focus-green-6:focus { color: var( --green-6); } -.focus-green-7:focus { color: var( --green-7); } -.focus-green-8:focus { color: var( --green-8); } -.focus-green-9:focus { color: var( --green-9); } -.focus-green-10:focus { color: var( --green-10); } -.focus-green-11:focus { color: var( --green-11); } -.focus-teal-0:focus { color: var( --teal-0); } -.focus-teal-1:focus { color: var( --teal-1); } -.focus-teal-2:focus { color: var( --teal-2); } -.focus-teal-3:focus { color: var( --teal-3); } -.focus-teal-4:focus { color: var( --teal-4); } -.focus-teal-5:focus { color: var( --teal-5); } -.focus-teal-6:focus { color: var( --teal-6); } -.focus-teal-7:focus { color: var( --teal-7); } -.focus-teal-8:focus { color: var( --teal-8); } -.focus-teal-9:focus { color: var( --teal-9); } -.focus-teal-10:focus { color: var( --teal-10); } -.focus-teal-11:focus { color: var( --teal-11); } -.focus-cyan-0:focus { color: var( --cyan-0); } -.focus-cyan-1:focus { color: var( --cyan-1); } -.focus-cyan-2:focus { color: var( --cyan-2); } -.focus-cyan-3:focus { color: var( --cyan-3); } -.focus-cyan-4:focus { color: var( --cyan-4); } -.focus-cyan-5:focus { color: var( --cyan-5); } -.focus-cyan-6:focus { color: var( --cyan-6); } -.focus-cyan-7:focus { color: var( --cyan-7); } -.focus-cyan-8:focus { color: var( --cyan-8); } -.focus-cyan-9:focus { color: var( --cyan-9); } -.focus-cyan-10:focus { color: var( --cyan-10); } -.focus-cyan-11:focus { color: var( --cyan-11); } +.hover-bg-black-90:hover, +.hover-bg-black-90:focus { background-color: var(--black-90); } +.hover-bg-black-80:hover, +.hover-bg-black-80:focus { background-color: var(--black-80); } +.hover-bg-black-70:hover, +.hover-bg-black-70:focus { background-color: var(--black-70); } +.hover-bg-black-60:hover, +.hover-bg-black-60:focus { background-color: var(--black-60); } +.hover-bg-black-50:hover, +.hover-bg-black-50:focus { background-color: var(--black-50); } +.hover-bg-black-40:hover, +.hover-bg-black-40:focus { background-color: var(--black-40); } +.hover-bg-black-30:hover, +.hover-bg-black-30:focus { background-color: var(--black-30); } +.hover-bg-black-20:hover, +.hover-bg-black-20:focus { background-color: var(--black-20); } +.hover-bg-black-10:hover, +.hover-bg-black-10:focus { background-color: var(--black-10); } +.hover-bg-white-90:hover, +.hover-bg-white-90:focus { background-color: var(--white-90); } +.hover-bg-white-80:hover, +.hover-bg-white-80:focus { background-color: var(--white-80); } +.hover-bg-white-70:hover, +.hover-bg-white-70:focus { background-color: var(--white-70); } +.hover-bg-white-60:hover, +.hover-bg-white-60:focus { background-color: var(--white-60); } +.hover-bg-white-50:hover, +.hover-bg-white-50:focus { background-color: var(--white-50); } +.hover-bg-white-40:hover, +.hover-bg-white-40:focus { background-color: var(--white-40); } +.hover-bg-white-30:hover, +.hover-bg-white-30:focus { background-color: var(--white-30); } +.hover-bg-white-20:hover, +.hover-bg-white-20:focus { background-color: var(--white-20); } +.hover-bg-white-10:hover, +.hover-bg-white-10:focus { background-color: var(--white-10); } -/* Background colors */ - -.focus-bg-overlay-tint-0:focus { background-color: var( --overlay-tint-0); } -.focus-bg-overlay-tint-1:focus { background-color: var( --overlay-tint-1); } -.focus-bg-overlay-tint-2:focus { background-color: var( --overlay-tint-2); } -.focus-bg-overlay-tint-3:focus { background-color: var( --overlay-tint-3); } -.focus-bg-overlay-tint-4:focus { background-color: var( --overlay-tint-4); } -.focus-bg-overlay-tint-5:focus { background-color: var( --overlay-tint-5); } -.focus-bg-overlay-tint-6:focus { background-color: var( --overlay-tint-6); } -.focus-bg-overlay-tint-7:focus { background-color: var( --overlay-tint-7); } -.focus-bg-overlay-tint-8:focus { background-color: var( --overlay-tint-8); } -.focus-bg-overlay-tint-9:focus { background-color: var( --overlay-tint-9); } -.focus-bg-overlay-tint-10:focus { background-color: var( --overlay-tint-10); } -.focus-bg-overlay-tint-11:focus { background-color: var( --overlay-tint-11); } -.focus-bg-overlay-shadow-0:focus { background-color: var( --overlay-shadow-0); } -.focus-bg-overlay-shadow-1:focus { background-color: var( --overlay-shadow-1); } -.focus-bg-overlay-shadow-2:focus { background-color: var( --overlay-shadow-2); } -.focus-bg-overlay-shadow-3:focus { background-color: var( --overlay-shadow-3); } -.focus-bg-overlay-shadow-4:focus { background-color: var( --overlay-shadow-4); } -.focus-bg-overlay-shadow-5:focus { background-color: var( --overlay-shadow-5); } -.focus-bg-overlay-shadow-6:focus { background-color: var( --overlay-shadow-6); } -.focus-bg-overlay-shadow-7:focus { background-color: var( --overlay-shadow-7); } -.focus-bg-overlay-shadow-8:focus { background-color: var( --overlay-shadow-8); } -.focus-bg-overlay-shadow-9:focus { background-color: var( --overlay-shadow-9); } -.focus-bg-overlay-shadow-10:focus { background-color: var( --overlay-shadow-10); } -.focus-bg-overlay-shadow-11:focus { background-color: var( --overlay-shadow-11); } -.focus-bg-gray-0:focus { background-color: var( --gray-0); } -.focus-bg-gray-1:focus { background-color: var( --gray-1); } -.focus-bg-gray-2:focus { background-color: var( --gray-2); } -.focus-bg-gray-3:focus { background-color: var( --gray-3); } -.focus-bg-gray-4:focus { background-color: var( --gray-4); } -.focus-bg-gray-5:focus { background-color: var( --gray-5); } -.focus-bg-gray-6:focus { background-color: var( --gray-6); } -.focus-bg-gray-7:focus { background-color: var( --gray-7); } -.focus-bg-gray-8:focus { background-color: var( --gray-8); } -.focus-bg-gray-9:focus { background-color: var( --gray-9); } -.focus-bg-gray-10:focus { background-color: var( --gray-10); } -.focus-bg-gray-11:focus { background-color: var( --gray-11); } -.focus-bg-slate-gray-0:focus { background-color: var( --slate-gray-0); } -.focus-bg-slate-gray-1:focus { background-color: var( --slate-gray-1); } -.focus-bg-slate-gray-2:focus { background-color: var( --slate-gray-2); } -.focus-bg-slate-gray-3:focus { background-color: var( --slate-gray-3); } -.focus-bg-slate-gray-4:focus { background-color: var( --slate-gray-4); } -.focus-bg-slate-gray-5:focus { background-color: var( --slate-gray-5); } -.focus-bg-slate-gray-6:focus { background-color: var( --slate-gray-6); } -.focus-bg-slate-gray-7:focus { background-color: var( --slate-gray-7); } -.focus-bg-slate-gray-8:focus { background-color: var( --slate-gray-8); } -.focus-bg-slate-gray-9:focus { background-color: var( --slate-gray-9); } -.focus-bg-slate-gray-10:focus { background-color: var( --slate-gray-10); } -.focus-bg-slate-gray-11:focus { background-color: var( --slate-gray-11); } -.focus-bg-blue-0:focus { background-color: var( --blue-0); } -.focus-bg-blue-1:focus { background-color: var( --blue-1); } -.focus-bg-blue-2:focus { background-color: var( --blue-2); } -.focus-bg-blue-3:focus { background-color: var( --blue-3); } -.focus-bg-blue-4:focus { background-color: var( --blue-4); } -.focus-bg-blue-5:focus { background-color: var( --blue-5); } -.focus-bg-blue-6:focus { background-color: var( --blue-6); } -.focus-bg-blue-7:focus { background-color: var( --blue-7); } -.focus-bg-blue-8:focus { background-color: var( --blue-8); } -.focus-bg-blue-9:focus { background-color: var( --blue-9); } -.focus-bg-blue-10:focus { background-color: var( --blue-10); } -.focus-bg-blue-11:focus { background-color: var( --blue-11); } -.focus-bg-indigo-0:focus { background-color: var( --indigo-0); } -.focus-bg-indigo-1:focus { background-color: var( --indigo-1); } -.focus-bg-indigo-2:focus { background-color: var( --indigo-2); } -.focus-bg-indigo-3:focus { background-color: var( --indigo-3); } -.focus-bg-indigo-4:focus { background-color: var( --indigo-4); } -.focus-bg-indigo-5:focus { background-color: var( --indigo-5); } -.focus-bg-indigo-6:focus { background-color: var( --indigo-6); } -.focus-bg-indigo-7:focus { background-color: var( --indigo-7); } -.focus-bg-indigo-8:focus { background-color: var( --indigo-8); } -.focus-bg-indigo-9:focus { background-color: var( --indigo-9); } -.focus-bg-indigo-10:focus { background-color: var( --indigo-10); } -.focus-bg-indigo-11:focus { background-color: var( --indigo-11); } -.focus-bg-violet-0:focus { background-color: var( --violet-0); } -.focus-bg-violet-1:focus { background-color: var( --violet-1); } -.focus-bg-violet-2:focus { background-color: var( --violet-2); } -.focus-bg-violet-3:focus { background-color: var( --violet-3); } -.focus-bg-violet-4:focus { background-color: var( --violet-4); } -.focus-bg-violet-5:focus { background-color: var( --violet-5); } -.focus-bg-violet-6:focus { background-color: var( --violet-6); } -.focus-bg-violet-7:focus { background-color: var( --violet-7); } -.focus-bg-violet-8:focus { background-color: var( --violet-8); } -.focus-bg-violet-9:focus { background-color: var( --violet-9); } -.focus-bg-violet-10:focus { background-color: var( --violet-10); } -.focus-bg-violet-11:focus { background-color: var( --violet-11); } -.focus-bg-magenta-0:focus { background-color: var( --magenta-0); } -.focus-bg-magenta-1:focus { background-color: var( --magenta-1); } -.focus-bg-magenta-2:focus { background-color: var( --magenta-2); } -.focus-bg-magenta-3:focus { background-color: var( --magenta-3); } -.focus-bg-magenta-4:focus { background-color: var( --magenta-4); } -.focus-bg-magenta-5:focus { background-color: var( --magenta-5); } -.focus-bg-magenta-6:focus { background-color: var( --magenta-6); } -.focus-bg-magenta-7:focus { background-color: var( --magenta-7); } -.focus-bg-magenta-8:focus { background-color: var( --magenta-8); } -.focus-bg-magenta-9:focus { background-color: var( --magenta-9); } -.focus-bg-magenta-10:focus { background-color: var( --magenta-10); } -.focus-bg-magenta-11:focus { background-color: var( --magenta-11); } -.focus-bg-red-0:focus { background-color: var( --red-0); } -.focus-bg-red-1:focus { background-color: var( --red-1); } -.focus-bg-red-2:focus { background-color: var( --red-2); } -.focus-bg-red-3:focus { background-color: var( --red-3); } -.focus-bg-red-4:focus { background-color: var( --red-4); } -.focus-bg-red-5:focus { background-color: var( --red-5); } -.focus-bg-red-6:focus { background-color: var( --red-6); } -.focus-bg-red-7:focus { background-color: var( --red-7); } -.focus-bg-red-8:focus { background-color: var( --red-8); } -.focus-bg-red-9:focus { background-color: var( --red-9); } -.focus-bg-red-10:focus { background-color: var( --red-10); } -.focus-bg-red-11:focus { background-color: var( --red-11); } -.focus-bg-red-orange-0:focus { background-color: var( --red-orange-0); } -.focus-bg-red-orange-1:focus { background-color: var( --red-orange-1); } -.focus-bg-red-orange-2:focus { background-color: var( --red-orange-2); } -.focus-bg-red-orange-3:focus { background-color: var( --red-orange-3); } -.focus-bg-red-orange-4:focus { background-color: var( --red-orange-4); } -.focus-bg-red-orange-5:focus { background-color: var( --red-orange-5); } -.focus-bg-red-orange-6:focus { background-color: var( --red-orange-6); } -.focus-bg-red-orange-7:focus { background-color: var( --red-orange-7); } -.focus-bg-red-orange-8:focus { background-color: var( --red-orange-8); } -.focus-bg-red-orange-9:focus { background-color: var( --red-orange-9); } -.focus-bg-red-orange-10:focus { background-color: var( --red-orange-10); } -.focus-bg-red-orange-11:focus { background-color: var( --red-orange-11); } -.focus-bg-orange-0:focus { background-color: var( --orange-0); } -.focus-bg-orange-1:focus { background-color: var( --orange-1); } -.focus-bg-orange-2:focus { background-color: var( --orange-2); } -.focus-bg-orange-3:focus { background-color: var( --orange-3); } -.focus-bg-orange-4:focus { background-color: var( --orange-4); } -.focus-bg-orange-5:focus { background-color: var( --orange-5); } -.focus-bg-orange-6:focus { background-color: var( --orange-6); } -.focus-bg-orange-7:focus { background-color: var( --orange-7); } -.focus-bg-orange-8:focus { background-color: var( --orange-8); } -.focus-bg-orange-9:focus { background-color: var( --orange-9); } -.focus-bg-orange-10:focus { background-color: var( --orange-10); } -.focus-bg-orange-11:focus { background-color: var( --orange-11); } -.focus-bg-gold-0:focus { background-color: var( --gold-0); } -.focus-bg-gold-1:focus { background-color: var( --gold-1); } -.focus-bg-gold-2:focus { background-color: var( --gold-2); } -.focus-bg-gold-3:focus { background-color: var( --gold-3); } -.focus-bg-gold-4:focus { background-color: var( --gold-4); } -.focus-bg-gold-5:focus { background-color: var( --gold-5); } -.focus-bg-gold-6:focus { background-color: var( --gold-6); } -.focus-bg-gold-7:focus { background-color: var( --gold-7); } -.focus-bg-gold-8:focus { background-color: var( --gold-8); } -.focus-bg-gold-9:focus { background-color: var( --gold-9); } -.focus-bg-gold-10:focus { background-color: var( --gold-10); } -.focus-bg-gold-11:focus { background-color: var( --gold-11); } -.focus-bg-yellow-0:focus { background-color: var( --yellow-0); } -.focus-bg-yellow-1:focus { background-color: var( --yellow-1); } -.focus-bg-yellow-2:focus { background-color: var( --yellow-2); } -.focus-bg-yellow-3:focus { background-color: var( --yellow-3); } -.focus-bg-yellow-4:focus { background-color: var( --yellow-4); } -.focus-bg-yellow-5:focus { background-color: var( --yellow-5); } -.focus-bg-yellow-6:focus { background-color: var( --yellow-6); } -.focus-bg-yellow-7:focus { background-color: var( --yellow-7); } -.focus-bg-yellow-8:focus { background-color: var( --yellow-8); } -.focus-bg-yellow-9:focus { background-color: var( --yellow-9); } -.focus-bg-yellow-10:focus { background-color: var( --yellow-10); } -.focus-bg-yellow-11:focus { background-color: var( --yellow-11); } -.focus-bg-green-0:focus { background-color: var( --green-0); } -.focus-bg-green-1:focus { background-color: var( --green-1); } -.focus-bg-green-2:focus { background-color: var( --green-2); } -.focus-bg-green-3:focus { background-color: var( --green-3); } -.focus-bg-green-4:focus { background-color: var( --green-4); } -.focus-bg-green-5:focus { background-color: var( --green-5); } -.focus-bg-green-6:focus { background-color: var( --green-6); } -.focus-bg-green-7:focus { background-color: var( --green-7); } -.focus-bg-green-8:focus { background-color: var( --green-8); } -.focus-bg-green-9:focus { background-color: var( --green-9); } -.focus-bg-green-10:focus { background-color: var( --green-10); } -.focus-bg-green-11:focus { background-color: var( --green-11); } -.focus-bg-teal-0:focus { background-color: var( --teal-0); } -.focus-bg-teal-1:focus { background-color: var( --teal-1); } -.focus-bg-teal-2:focus { background-color: var( --teal-2); } -.focus-bg-teal-3:focus { background-color: var( --teal-3); } -.focus-bg-teal-4:focus { background-color: var( --teal-4); } -.focus-bg-teal-5:focus { background-color: var( --teal-5); } -.focus-bg-teal-6:focus { background-color: var( --teal-6); } -.focus-bg-teal-7:focus { background-color: var( --teal-7); } -.focus-bg-teal-8:focus { background-color: var( --teal-8); } -.focus-bg-teal-9:focus { background-color: var( --teal-9); } -.focus-bg-teal-10:focus { background-color: var( --teal-10); } -.focus-bg-teal-11:focus { background-color: var( --teal-11); } -.focus-bg-cyan-0:focus { background-color: var( --cyan-0); } -.focus-bg-cyan-1:focus { background-color: var( --cyan-1); } -.focus-bg-cyan-2:focus { background-color: var( --cyan-2); } -.focus-bg-cyan-3:focus { background-color: var( --cyan-3); } -.focus-bg-cyan-4:focus { background-color: var( --cyan-4); } -.focus-bg-cyan-5:focus { background-color: var( --cyan-5); } -.focus-bg-cyan-6:focus { background-color: var( --cyan-6); } -.focus-bg-cyan-7:focus { background-color: var( --cyan-7); } -.focus-bg-cyan-8:focus { background-color: var( --cyan-8); } -.focus-bg-cyan-9:focus { background-color: var( --cyan-9); } -.focus-bg-cyan-10:focus { background-color: var( --cyan-10); } -.focus-bg-cyan-11:focus { background-color: var( --cyan-11); } +.hover-dark-red:hover, +.hover-dark-red:focus { color: var(--dark-red); } +.hover-red:hover, +.hover-red:focus { color: var(--red); } +.hover-light-red:hover, +.hover-light-red:focus { color: var(--light-red); } +.hover-orange:hover, +.hover-orange:focus { color: var(--orange); } +.hover-gold:hover, +.hover-gold:focus { color: var(--gold); } +.hover-yellow:hover, +.hover-yellow:focus { color: var(--yellow); } +.hover-light-yellow:hover, +.hover-light-yellow:focus { color: var(--light-yellow); } +.hover-purple:hover, +.hover-purple:focus { color: var(--purple); } +.hover-light-purple:hover, +.hover-light-purple:focus { color: var(--light-purple); } +.hover-dark-pink:hover, +.hover-dark-pink:focus { color: var(--dark-pink); } +.hover-hot-pink:hover, +.hover-hot-pink:focus { color: var(--hot-pink); } +.hover-pink:hover, +.hover-pink:focus { color: var(--pink); } +.hover-light-pink:hover, +.hover-light-pink:focus { color: var(--light-pink); } +.hover-dark-green:hover, +.hover-dark-green:focus { color: var(--dark-green); } +.hover-green:hover, +.hover-green:focus { color: var(--green); } +.hover-light-green:hover, +.hover-light-green:focus { color: var(--light-green); } +.hover-navy:hover, +.hover-navy:focus { color: var(--navy); } +.hover-dark-blue:hover, +.hover-dark-blue:focus { color: var(--dark-blue); } +.hover-blue:hover, +.hover-blue:focus { color: var(--blue); } +.hover-light-blue:hover, +.hover-light-blue:focus { color: var(--light-blue); } +.hover-lightest-blue:hover, +.hover-lightest-blue:focus { color: var(--lightest-blue); } +.hover-washed-blue:hover, +.hover-washed-blue:focus { color: var(--washed-blue); } +.hover-washed-green:hover, +.hover-washed-green:focus { color: var(--washed-green); } +.hover-washed-yellow:hover, +.hover-washed-yellow:focus { color: var(--washed-yellow); } +.hover-washed-red:hover, +.hover-washed-red:focus { color: var(--washed-red); } +.hover-bg-dark-red:hover, +.hover-bg-dark-red:focus { background-color: var(--dark-red); } +.hover-bg-red:hover, +.hover-bg-red:focus { background-color: var(--red); } +.hover-bg-light-red:hover, +.hover-bg-light-red:focus { background-color: var(--light-red); } +.hover-bg-orange:hover, +.hover-bg-orange:focus { background-color: var(--orange); } +.hover-bg-gold:hover, +.hover-bg-gold:focus { background-color: var(--gold); } +.hover-bg-yellow:hover, +.hover-bg-yellow:focus { background-color: var(--yellow); } +.hover-bg-light-yellow:hover, +.hover-bg-light-yellow:focus { background-color: var(--light-yellow); } +.hover-bg-purple:hover, +.hover-bg-purple:focus { background-color: var(--purple); } +.hover-bg-light-purple:hover, +.hover-bg-light-purple:focus { background-color: var(--light-purple); } +.hover-bg-dark-pink:hover, +.hover-bg-dark-pink:focus { background-color: var(--dark-pink); } +.hover-bg-hot-pink:hover, +.hover-bg-hot-pink:focus { background-color: var(--hot-pink); } +.hover-bg-pink:hover, +.hover-bg-pink:focus { background-color: var(--pink); } +.hover-bg-light-pink:hover, +.hover-bg-light-pink:focus { background-color: var(--light-pink); } +.hover-bg-dark-green:hover, +.hover-bg-dark-green:focus { background-color: var(--dark-green); } +.hover-bg-green:hover, +.hover-bg-green:focus { background-color: var(--green); } +.hover-bg-light-green:hover, +.hover-bg-light-green:focus { background-color: var(--light-green); } +.hover-bg-navy:hover, +.hover-bg-navy:focus { background-color: var(--navy); } +.hover-bg-dark-blue:hover, +.hover-bg-dark-blue:focus { background-color: var(--dark-blue); } +.hover-bg-blue:hover, +.hover-bg-blue:focus { background-color: var(--blue); } +.hover-bg-light-blue:hover, +.hover-bg-light-blue:focus { background-color: var(--light-blue); } +.hover-bg-lightest-blue:hover, +.hover-bg-lightest-blue:focus { background-color: var(--lightest-blue); } +.hover-bg-washed-blue:hover, +.hover-bg-washed-blue:focus { background-color: var(--washed-blue); } +.hover-bg-washed-green:hover, +.hover-bg-washed-green:focus { background-color: var(--washed-green); } +.hover-bg-washed-yellow:hover, +.hover-bg-washed-yellow:focus { background-color: var(--washed-yellow); } +.hover-bg-washed-red:hover, +.hover-bg-washed-red:focus { background-color: var(--washed-red); } +.hover-bg-inherit:hover, +.hover-bg-inherit:focus { background-color: inherit; } diff --git a/src/_skins.css b/src/_skins.css index 25eca4346..d445e71a9 100644 --- a/src/_skins.css +++ b/src/_skins.css @@ -1,4 +1,5 @@ /* + SKINS Docs: http://tachyons.io/docs/themes/skins/ @@ -10,583 +11,126 @@ /* Text colors */ -.tint-0 { color: var(--tint-0); } -.tint-1 { color: var(--tint-1); } -.tint-2 { color: var(--tint-2); } -.tint-3 { color: var(--tint-3); } -.tint-4 { color: var(--tint-4); } -.tint-5 { color: var(--tint-5); } -.tint-6 { color: var(--tint-6); } -.tint-7 { color: var(--tint-7); } -.tint-8 { color: var(--tint-8); } -.tint-9 { color: var(--tint-9); } -.tint-10 { color: var(--tint-10); } -.tint-11 { color: var(--tint-11); } -.shadow-0 { color: var(--shadow-0); } -.shadow-1 { color: var(--shadow-1); } -.shadow-2 { color: var(--shadow-2); } -.shadow-3 { color: var(--shadow-3); } -.shadow-4 { color: var(--shadow-4); } -.shadow-5 { color: var(--shadow-5); } -.shadow-6 { color: var(--shadow-6); } -.shadow-7 { color: var(--shadow-7); } -.shadow-8 { color: var(--shadow-8); } -.shadow-9 { color: var(--shadow-9); } -.shadow-10 { color: var(--shadow-10); } -.shadow-11 { color: var(--shadow-11); } -.black, -.gray-0 { color: var(--gray-0); } -.gray-1 { color: var(--gray-1); } -.gray-2 { color: var(--gray-2); } -.gray-3 { color: var(--gray-3); } -.gray-4 { color: var(--gray-4); } -.gray-5 { color: var(--gray-5); } -.gray-6 { color: var(--gray-6); } -.gray-7 { color: var(--gray-7); } -.gray-8 { color: var(--gray-8); } -.gray-9 { color: var(--gray-9); } -.gray-10 { color: var(--gray-10); } -.white, .gray-11 { color: var(--gray-11); } -.slate-gray-0 { color: var(--slate-gray-0); } -.slate-gray-1 { color: var(--slate-gray-1); } -.slate-gray-2 { color: var(--slate-gray-2); } -.slate-gray-3 { color: var(--slate-gray-3); } -.slate-gray-4 { color: var(--slate-gray-4); } -.slate-gray-5 { color: var(--slate-gray-5); } -.slate-gray-6 { color: var(--slate-gray-6); } -.slate-gray-7 { color: var(--slate-gray-7); } -.slate-gray-8 { color: var(--slate-gray-8); } -.slate-gray-9 { color: var(--slate-gray-9); } -.slate-gray-10 { color: var(--slate-gray-10); } -.slate-gray-11 { color: var(--slate-gray-11); } -.blue-0 { color: var(--blue-0); } -.blue-1 { color: var(--blue-1); } -.blue-2 { color: var(--blue-2); } -.blue-3 { color: var(--blue-3); } -.blue-4 { color: var(--blue-4); } -.blue-5 { color: var(--blue-5); } -.blue-6 { color: var(--blue-6); } -.blue-7 { color: var(--blue-7); } -.blue-8 { color: var(--blue-8); } -.blue-9 { color: var(--blue-9); } -.blue-10 { color: var(--blue-10); } -.blue-11 { color: var(--blue-11); } -.indigo-0 { color: var(--indigo-0); } -.indigo-1 { color: var(--indigo-1); } -.indigo-2 { color: var(--indigo-2); } -.indigo-3 { color: var(--indigo-3); } -.indigo-4 { color: var(--indigo-4); } -.indigo-5 { color: var(--indigo-5); } -.indigo-6 { color: var(--indigo-6); } -.indigo-7 { color: var(--indigo-7); } -.indigo-8 { color: var(--indigo-8); } -.indigo-9 { color: var(--indigo-9); } -.indigo-10 { color: var(--indigo-10); } -.indigo-11 { color: var(--indigo-11); } -.violet-0 { color: var(--violet-0); } -.violet-1 { color: var(--violet-1); } -.violet-2 { color: var(--violet-2); } -.violet-3 { color: var(--violet-3); } -.violet-4 { color: var(--violet-4); } -.violet-5 { color: var(--violet-5); } -.violet-6 { color: var(--violet-6); } -.violet-7 { color: var(--violet-7); } -.violet-8 { color: var(--violet-8); } -.violet-9 { color: var(--violet-9); } -.violet-10 { color: var(--violet-10); } -.violet-11 { color: var(--violet-11); } -.magenta-0 { color: var(--magenta-0); } -.magenta-1 { color: var(--magenta-1); } -.magenta-2 { color: var(--magenta-2); } -.magenta-3 { color: var(--magenta-3); } -.magenta-4 { color: var(--magenta-4); } -.magenta-5 { color: var(--magenta-5); } -.magenta-6 { color: var(--magenta-6); } -.magenta-7 { color: var(--magenta-7); } -.magenta-8 { color: var(--magenta-8); } -.magenta-9 { color: var(--magenta-9); } -.magenta-10 { color: var(--magenta-10); } -.magenta-11 { color: var(--magenta-11); } -.red-0 { color: var(--red-0); } -.red-1 { color: var(--red-1); } -.red-2 { color: var(--red-2); } -.red-3 { color: var(--red-3); } -.red-4 { color: var(--red-4); } -.red-5 { color: var(--red-5); } -.red-6 { color: var(--red-6); } -.red-7 { color: var(--red-7); } -.red-8 { color: var(--red-8); } -.red-9 { color: var(--red-9); } -.red-10 { color: var(--red-10); } -.red-11 { color: var(--red-11); } -.red-orange-0 { color: var(--red-orange-0); } -.red-orange-1 { color: var(--red-orange-1); } -.red-orange-2 { color: var(--red-orange-2); } -.red-orange-3 { color: var(--red-orange-3); } -.red-orange-4 { color: var(--red-orange-4); } -.red-orange-5 { color: var(--red-orange-5); } -.red-orange-6 { color: var(--red-orange-6); } -.red-orange-7 { color: var(--red-orange-7); } -.red-orange-8 { color: var(--red-orange-8); } -.red-orange-9 { color: var(--red-orange-9); } -.red-orange-10 { color: var(--red-orange-10); } -.red-orange-11 { color: var(--red-orange-11); } -.orange-0 { color: var(--orange-0); } -.orange-1 { color: var(--orange-1); } -.orange-2 { color: var(--orange-2); } -.orange-3 { color: var(--orange-3); } -.orange-4 { color: var(--orange-4); } -.orange-5 { color: var(--orange-5); } -.orange-6 { color: var(--orange-6); } -.orange-7 { color: var(--orange-7); } -.orange-8 { color: var(--orange-8); } -.orange-9 { color: var(--orange-9); } -.orange-10 { color: var(--orange-10); } -.orange-11 { color: var(--orange-11); } -.gold-0 { color: var(--gold-0); } -.gold-1 { color: var(--gold-1); } -.gold-2 { color: var(--gold-2); } -.gold-3 { color: var(--gold-3); } -.gold-4 { color: var(--gold-4); } -.gold-5 { color: var(--gold-5); } -.gold-6 { color: var(--gold-6); } -.gold-7 { color: var(--gold-7); } -.gold-8 { color: var(--gold-8); } -.gold-9 { color: var(--gold-9); } -.gold-10 { color: var(--gold-10); } -.gold-11 { color: var(--gold-11); } -.yellow-0 { color: var(--yellow-0); } -.yellow-1 { color: var(--yellow-1); } -.yellow-2 { color: var(--yellow-2); } -.yellow-3 { color: var(--yellow-3); } -.yellow-4 { color: var(--yellow-4); } -.yellow-5 { color: var(--yellow-5); } -.yellow-6 { color: var(--yellow-6); } -.yellow-7 { color: var(--yellow-7); } -.yellow-8 { color: var(--yellow-8); } -.yellow-9 { color: var(--yellow-9); } -.yellow-10 { color: var(--yellow-10); } -.yellow-11 { color: var(--yellow-11); } -.green-0 { color: var(--green-0); } -.green-1 { color: var(--green-1); } -.green-2 { color: var(--green-2); } -.green-3 { color: var(--green-3); } -.green-4 { color: var(--green-4); } -.green-5 { color: var(--green-5); } -.green-6 { color: var(--green-6); } -.green-7 { color: var(--green-7); } -.green-8 { color: var(--green-8); } -.green-9 { color: var(--green-9); } -.green-10 { color: var(--green-10); } -.green-11 { color: var(--green-11); } -.teal-0 { color: var(--teal-0); } -.teal-1 { color: var(--teal-1); } -.teal-2 { color: var(--teal-2); } -.teal-3 { color: var(--teal-3); } -.teal-4 { color: var(--teal-4); } -.teal-5 { color: var(--teal-5); } -.teal-6 { color: var(--teal-6); } -.teal-7 { color: var(--teal-7); } -.teal-8 { color: var(--teal-8); } -.teal-9 { color: var(--teal-9); } -.teal-10 { color: var(--teal-10); } -.teal-11 { color: var(--teal-11); } -.cyan-0 { color: var(--cyan-0); } -.cyan-1 { color: var(--cyan-1); } -.cyan-2 { color: var(--cyan-2); } -.cyan-3 { color: var(--cyan-3); } -.cyan-4 { color: var(--cyan-4); } -.cyan-5 { color: var(--cyan-5); } -.cyan-6 { color: var(--cyan-6); } -.cyan-7 { color: var(--cyan-7); } -.cyan-8 { color: var(--cyan-8); } -.cyan-9 { color: var(--cyan-9); } -.cyan-10 { color: var(--cyan-10); } -.cyan-11 { color: var(--cyan-11); } - -/* Background colors */ - -.bg-tint-0 { background-color: var(--tint-0); } -.bg-tint-1 { background-color: var(--tint-1); } -.bg-tint-2 { background-color: var(--tint-2); } -.bg-tint-3 { background-color: var(--tint-3); } -.bg-tint-4 { background-color: var(--tint-4); } -.bg-tint-5 { background-color: var(--tint-5); } -.bg-tint-6 { background-color: var(--tint-6); } -.bg-tint-7 { background-color: var(--tint-7); } -.bg-tint-8 { background-color: var(--tint-8); } -.bg-tint-9 { background-color: var(--tint-9); } -.bg-tint-10 { background-color: var(--tint-10); } -.bg-tint-11 { background-color: var(--tint-11); } -.bg-shadow-0 { background-color: var(--shadow-0); } -.bg-shadow-1 { background-color: var(--shadow-1); } -.bg-shadow-2 { background-color: var(--shadow-2); } -.bg-shadow-3 { background-color: var(--shadow-3); } -.bg-shadow-4 { background-color: var(--shadow-4); } -.bg-shadow-5 { background-color: var(--shadow-5); } -.bg-shadow-6 { background-color: var(--shadow-6); } -.bg-shadow-7 { background-color: var(--shadow-7); } -.bg-shadow-8 { background-color: var(--shadow-8); } -.bg-shadow-9 { background-color: var(--shadow-9); } -.bg-shadow-10 { background-color: var(--shadow-10); } -.bg-shadow-11 { background-color: var(--shadow-11); } -.bg-black, -.bg-gray-0 { background-color: var(--gray-0); } -.bg-gray-1 { background-color: var(--gray-1); } -.bg-gray-2 { background-color: var(--gray-2); } -.bg-gray-3 { background-color: var(--gray-3); } -.bg-gray-4 { background-color: var(--gray-4); } -.bg-gray-5 { background-color: var(--gray-5); } -.bg-gray-6 { background-color: var(--gray-6); } -.bg-gray-7 { background-color: var(--gray-7); } -.bg-gray-8 { background-color: var(--gray-8); } -.bg-gray-9 { background-color: var(--gray-9); } -.bg-gray-10 { background-color: var(--gray-10); } -.bg-white, -.bg-gray-11 { background-color: var(--gray-11); } -.bg-slate-gray-0 { background-color: var(--slate-gray-0); } -.bg-slate-gray-1 { background-color: var(--slate-gray-1); } -.bg-slate-gray-2 { background-color: var(--slate-gray-2); } -.bg-slate-gray-3 { background-color: var(--slate-gray-3); } -.bg-slate-gray-4 { background-color: var(--slate-gray-4); } -.bg-slate-gray-5 { background-color: var(--slate-gray-5); } -.bg-slate-gray-6 { background-color: var(--slate-gray-6); } -.bg-slate-gray-7 { background-color: var(--slate-gray-7); } -.bg-slate-gray-8 { background-color: var(--slate-gray-8); } -.bg-slate-gray-9 { background-color: var(--slate-gray-9); } -.bg-slate-gray-10 { background-color: var(--slate-gray-10); } -.bg-slate-gray-11 { background-color: var(--slate-gray-11); } -.bg-blue-0 { background-color: var(--blue-0); } -.bg-blue-1 { background-color: var(--blue-1); } -.bg-blue-2 { background-color: var(--blue-2); } -.bg-blue-3 { background-color: var(--blue-3); } -.bg-blue-4 { background-color: var(--blue-4); } -.bg-blue-5 { background-color: var(--blue-5); } -.bg-blue-6 { background-color: var(--blue-6); } -.bg-blue-7 { background-color: var(--blue-7); } -.bg-blue-8 { background-color: var(--blue-8); } -.bg-blue-9 { background-color: var(--blue-9); } -.bg-blue-10 { background-color: var(--blue-10); } -.bg-blue-11 { background-color: var(--blue-11); } -.bg-indigo-0 { background-color: var(--indigo-0); } -.bg-indigo-1 { background-color: var(--indigo-1); } -.bg-indigo-2 { background-color: var(--indigo-2); } -.bg-indigo-3 { background-color: var(--indigo-3); } -.bg-indigo-4 { background-color: var(--indigo-4); } -.bg-indigo-5 { background-color: var(--indigo-5); } -.bg-indigo-6 { background-color: var(--indigo-6); } -.bg-indigo-7 { background-color: var(--indigo-7); } -.bg-indigo-8 { background-color: var(--indigo-8); } -.bg-indigo-9 { background-color: var(--indigo-9); } -.bg-indigo-10 { background-color: var(--indigo-10); } -.bg-indigo-11 { background-color: var(--indigo-11); } -.bg-violet-0 { background-color: var(--violet-0); } -.bg-violet-1 { background-color: var(--violet-1); } -.bg-violet-2 { background-color: var(--violet-2); } -.bg-violet-3 { background-color: var(--violet-3); } -.bg-violet-4 { background-color: var(--violet-4); } -.bg-violet-5 { background-color: var(--violet-5); } -.bg-violet-6 { background-color: var(--violet-6); } -.bg-violet-7 { background-color: var(--violet-7); } -.bg-violet-8 { background-color: var(--violet-8); } -.bg-violet-9 { background-color: var(--violet-9); } -.bg-violet-10 { background-color: var(--violet-10); } -.bg-violet-11 { background-color: var(--violet-11); } -.bg-magenta-0 { background-color: var(--magenta-0); } -.bg-magenta-1 { background-color: var(--magenta-1); } -.bg-magenta-2 { background-color: var(--magenta-2); } -.bg-magenta-3 { background-color: var(--magenta-3); } -.bg-magenta-4 { background-color: var(--magenta-4); } -.bg-magenta-5 { background-color: var(--magenta-5); } -.bg-magenta-6 { background-color: var(--magenta-6); } -.bg-magenta-7 { background-color: var(--magenta-7); } -.bg-magenta-8 { background-color: var(--magenta-8); } -.bg-magenta-9 { background-color: var(--magenta-9); } -.bg-magenta-10 { background-color: var(--magenta-10); } -.bg-magenta-11 { background-color: var(--magenta-11); } -.bg-red-0 { background-color: var(--red-0); } -.bg-red-1 { background-color: var(--red-1); } -.bg-red-2 { background-color: var(--red-2); } -.bg-red-3 { background-color: var(--red-3); } -.bg-red-4 { background-color: var(--red-4); } -.bg-red-5 { background-color: var(--red-5); } -.bg-red-6 { background-color: var(--red-6); } -.bg-red-7 { background-color: var(--red-7); } -.bg-red-8 { background-color: var(--red-8); } -.bg-red-9 { background-color: var(--red-9); } -.bg-red-10 { background-color: var(--red-10); } -.bg-red-11 { background-color: var(--red-11); } -.bg-red-orange-0 { background-color: var(--red-orange-0); } -.bg-red-orange-1 { background-color: var(--red-orange-1); } -.bg-red-orange-2 { background-color: var(--red-orange-2); } -.bg-red-orange-3 { background-color: var(--red-orange-3); } -.bg-red-orange-4 { background-color: var(--red-orange-4); } -.bg-red-orange-5 { background-color: var(--red-orange-5); } -.bg-red-orange-6 { background-color: var(--red-orange-6); } -.bg-red-orange-7 { background-color: var(--red-orange-7); } -.bg-red-orange-8 { background-color: var(--red-orange-8); } -.bg-red-orange-9 { background-color: var(--red-orange-9); } -.bg-red-orange-10 { background-color: var(--red-orange-10); } -.bg-red-orange-11 { background-color: var(--red-orange-11); } -.bg-orange-0 { background-color: var(--orange-0); } -.bg-orange-1 { background-color: var(--orange-1); } -.bg-orange-2 { background-color: var(--orange-2); } -.bg-orange-3 { background-color: var(--orange-3); } -.bg-orange-4 { background-color: var(--orange-4); } -.bg-orange-5 { background-color: var(--orange-5); } -.bg-orange-6 { background-color: var(--orange-6); } -.bg-orange-7 { background-color: var(--orange-7); } -.bg-orange-8 { background-color: var(--orange-8); } -.bg-orange-9 { background-color: var(--orange-9); } -.bg-orange-10 { background-color: var(--orange-10); } -.bg-orange-11 { background-color: var(--orange-11); } -.bg-gold-0 { background-color: var(--gold-0); } -.bg-gold-1 { background-color: var(--gold-1); } -.bg-gold-2 { background-color: var(--gold-2); } -.bg-gold-3 { background-color: var(--gold-3); } -.bg-gold-4 { background-color: var(--gold-4); } -.bg-gold-5 { background-color: var(--gold-5); } -.bg-gold-6 { background-color: var(--gold-6); } -.bg-gold-7 { background-color: var(--gold-7); } -.bg-gold-8 { background-color: var(--gold-8); } -.bg-gold-9 { background-color: var(--gold-9); } -.bg-gold-10 { background-color: var(--gold-10); } -.bg-gold-11 { background-color: var(--gold-11); } -.bg-yellow-0 { background-color: var(--yellow-0); } -.bg-yellow-1 { background-color: var(--yellow-1); } -.bg-yellow-2 { background-color: var(--yellow-2); } -.bg-yellow-3 { background-color: var(--yellow-3); } -.bg-yellow-4 { background-color: var(--yellow-4); } -.bg-yellow-5 { background-color: var(--yellow-5); } -.bg-yellow-6 { background-color: var(--yellow-6); } -.bg-yellow-7 { background-color: var(--yellow-7); } -.bg-yellow-8 { background-color: var(--yellow-8); } -.bg-yellow-9 { background-color: var(--yellow-9); } -.bg-yellow-10 { background-color: var(--yellow-10); } -.bg-yellow-11 { background-color: var(--yellow-11); } -.bg-green-0 { background-color: var(--green-0); } -.bg-green-1 { background-color: var(--green-1); } -.bg-green-2 { background-color: var(--green-2); } -.bg-green-3 { background-color: var(--green-3); } -.bg-green-4 { background-color: var(--green-4); } -.bg-green-5 { background-color: var(--green-5); } -.bg-green-6 { background-color: var(--green-6); } -.bg-green-7 { background-color: var(--green-7); } -.bg-green-8 { background-color: var(--green-8); } -.bg-green-9 { background-color: var(--green-9); } -.bg-green-10 { background-color: var(--green-10); } -.bg-green-11 { background-color: var(--green-11); } -.bg-teal-0 { background-color: var(--teal-0); } -.bg-teal-1 { background-color: var(--teal-1); } -.bg-teal-2 { background-color: var(--teal-2); } -.bg-teal-3 { background-color: var(--teal-3); } -.bg-teal-4 { background-color: var(--teal-4); } -.bg-teal-5 { background-color: var(--teal-5); } -.bg-teal-6 { background-color: var(--teal-6); } -.bg-teal-7 { background-color: var(--teal-7); } -.bg-teal-8 { background-color: var(--teal-8); } -.bg-teal-9 { background-color: var(--teal-9); } -.bg-teal-10 { background-color: var(--teal-10); } -.bg-teal-11 { background-color: var(--teal-11); } -.bg-cyan-0 { background-color: var(--cyan-0); } -.bg-cyan-1 { background-color: var(--cyan-1); } -.bg-cyan-2 { background-color: var(--cyan-2); } -.bg-cyan-3 { background-color: var(--cyan-3); } -.bg-cyan-4 { background-color: var(--cyan-4); } -.bg-cyan-5 { background-color: var(--cyan-5); } -.bg-cyan-6 { background-color: var(--cyan-6); } -.bg-cyan-7 { background-color: var(--cyan-7); } -.bg-cyan-8 { background-color: var(--cyan-8); } -.bg-cyan-9 { background-color: var(--cyan-9); } -.bg-cyan-10 { background-color: var(--cyan-10); } -.bg-cyan-11 { background-color: var(--cyan-11); } - -.dark { - background-color: black; - color: white; -} - -.light { - background-color: white; - color: black; -} - -.blue { - background-color: var(--blue-5); - color: var(--gray-11); -} - -.blue-dark { - background-color: var(--blue-3); - color: var(--blue-9); -} - -.blue-light { - color: var(--blue-3); - background-color: var(--blue-10); -} - -.indigo { - background-color: var(--indigo-5); - color: var(--gray-11); -} - -.indigo-dark { - background-color: var(--indigo-3); - color: var(--indigo-9); -} - -.indigo-light { - color: var(--indigo-3); - background-color: var(--indigo-10); -} - -.violet { - background-color: var(--violet-5); - color: var(--gray-11); -} - -.violet-dark { - background-color: var(--violet-3); - color: var(--violet-9); -} - -.violet-light { - color: var(--violet-3); - background-color: var(--violet-10); -} - -.magenta { - background-color: var(--magenta-5); - color: var(--gray-11); -} - -.magenta-dark { - background-color: var(--magenta-3); - color: var(--magenta-9); -} - -.magenta-light { - color: var(--magenta-3); - background-color: var(--magenta-10); -} - -.red { - background-color: var(--red-5); - color: var(--gray-11); -} - -.red-dark { - background-color: var(--red-3); - color: var(--red-9); -} +.black-90 { color: var(--black-90); } +.black-80 { color: var(--black-80); } +.black-70 { color: var(--black-70); } +.black-60 { color: var(--black-60); } +.black-50 { color: var(--black-50); } +.black-40 { color: var(--black-40); } +.black-30 { color: var(--black-30); } +.black-20 { color: var(--black-20); } +.black-10 { color: var(--black-10); } +.black-05 { color: var(--black-05); } + +.white-90 { color: var(--white-90); } +.white-80 { color: var(--white-80); } +.white-70 { color: var(--white-70); } +.white-60 { color: var(--white-60); } +.white-50 { color: var(--white-50); } +.white-40 { color: var(--white-40); } +.white-30 { color: var(--white-30); } +.white-20 { color: var(--white-20); } +.white-10 { color: var(--white-10); } + +.black { color: var(--black); } +.near-black { color: var(--near-black); } +.dark-gray { color: var(--dark-gray); } +.mid-gray { color: var(--mid-gray); } +.gray { color: var(--gray); } +.silver { color: var(--silver); } +.light-silver { color: var(--light-silver); } +.moon-gray { color: var(--moon-gray); } +.light-gray { color: var(--light-gray); } +.near-white { color: var(--near-white); } +.white { color: var(--white); } + +.dark-red { color: var(--dark-red); } +.red { color: var(--red); } +.light-red { color: var(--light-red); } +.orange { color: var(--orange); } +.gold { color: var(--gold); } +.yellow { color: var(--yellow); } +.light-yellow { color: var(--light-yellow); } +.purple { color: var(--purple); } +.light-purple { color: var(--light-purple); } +.dark-pink { color: var(--dark-pink); } +.hot-pink { color: var(--hot-pink); } +.pink { color: var(--pink); } +.light-pink { color: var(--light-pink); } +.dark-green { color: var(--dark-green); } +.green { color: var(--green); } +.light-green { color: var(--light-green); } +.navy { color: var(--navy); } +.dark-blue { color: var(--dark-blue); } +.blue { color: var(--blue); } +.light-blue { color: var(--light-blue); } +.lightest-blue { color: var(--lightest-blue); } +.washed-blue { color: var(--washed-blue); } +.washed-green { color: var(--washed-green); } +.washed-yellow { color: var(--washed-yellow); } +.washed-red { color: var(--washed-red); } +.color-inherit { color: inherit; } -.red-light { - color: var(--red-3); - background-color: var(--red-10); -} -.red-orange { - background-color: var(--red-orange-5); - color: var(--gray-11); -} -.red-orange-dark { - background-color: var(--red-orange-3); - color: var(--red-orange-9); -} - -.red-orange-light { - color: var(--red-orange-3); - background-color: var(--red-orange-10); -} - -.orange { - background-color: var(--orange-5); - color: var(--gray-11); -} - -.orange-dark { - background-color: var(--orange-3); - color: var(--orange-9); -} - -.orange-light { - color: var(--orange-3); - background-color: var(--orange-10); -} - -.gold { - background-color: var(--gold-5); - color: var(--gray-11); -} - -.gold-dark { - background-color: var(--gold-3); - color: var(--gold-9); -} - -.gold-light { - color: var(--gold-3); - background-color: var(--gold-10); -} - -.yellow { - background-color: var(--yellow-5); - color: var(--gray-11); -} - -.yellow-dark { - background-color: var(--yellow-3); - color: var(--yellow-9); -} - -.yellow-light { - color: var(--yellow-3); - background-color: var(--yellow-10); -} - -.green { - background-color: var(--green-5); - color: var(--gray-11); -} - -.green-dark { - background-color: var(--green-3); - color: var(--green-9); -} - -.green-light { - color: var(--green-3); - background-color: var(--green-10); -} - -.teal { - background-color: var(--teal-5); - color: var(--gray-11); -} - -.teal-dark { - background-color: var(--teal-3); - color: var(--teal-9); -} - -.teal-light { - color: var(--teal-3); - background-color: var(--teal-10); -} - -.cyan { - background-color: var(--cyan-5); - color: var(--gray-11); -} - -.cyan-dark { - background-color: var(--cyan-3); - color: var(--cyan-9); -} +/* Background colors */ -.cyan-light { - color: var(--cyan-3); - background-color: var(--cyan-10); -} +.bg-black-90 { background-color: var(--black-90); } +.bg-black-80 { background-color: var(--black-80); } +.bg-black-70 { background-color: var(--black-70); } +.bg-black-60 { background-color: var(--black-60); } +.bg-black-50 { background-color: var(--black-50); } +.bg-black-40 { background-color: var(--black-40); } +.bg-black-30 { background-color: var(--black-30); } +.bg-black-20 { background-color: var(--black-20); } +.bg-black-10 { background-color: var(--black-10); } +.bg-black-05 { background-color: var(--black-05); } +.bg-white-90 { background-color: var(--white-90); } +.bg-white-80 { background-color: var(--white-80); } +.bg-white-70 { background-color: var(--white-70); } +.bg-white-60 { background-color: var(--white-60); } +.bg-white-50 { background-color: var(--white-50); } +.bg-white-40 { background-color: var(--white-40); } +.bg-white-30 { background-color: var(--white-30); } +.bg-white-20 { background-color: var(--white-20); } +.bg-white-10 { background-color: var(--white-10); } + +.bg-black { background-color: var(--black); } +.bg-near-black { background-color: var(--near-black); } +.bg-dark-gray { background-color: var(--dark-gray); } +.bg-mid-gray { background-color: var(--mid-gray); } +.bg-gray { background-color: var(--gray); } +.bg-silver { background-color: var(--silver); } +.bg-light-silver { background-color: var(--light-silver); } +.bg-moon-gray { background-color: var(--moon-gray); } +.bg-light-gray { background-color: var(--light-gray); } +.bg-near-white { background-color: var(--near-white); } +.bg-white { background-color: var(--white); } +.bg-transparent { background-color: var(--transparent); } + +.bg-dark-red { background-color: var(--dark-red); } +.bg-red { background-color: var(--red); } +.bg-light-red { background-color: var(--light-red); } +.bg-orange { background-color: var(--orange); } +.bg-gold { background-color: var(--gold); } +.bg-yellow { background-color: var(--yellow); } +.bg-light-yellow { background-color: var(--light-yellow); } +.bg-purple { background-color: var(--purple); } +.bg-light-purple { background-color: var(--light-purple); } +.bg-dark-pink { background-color: var(--dark-pink); } +.bg-hot-pink { background-color: var(--hot-pink); } +.bg-pink { background-color: var(--pink); } +.bg-light-pink { background-color: var(--light-pink); } +.bg-dark-green { background-color: var(--dark-green); } +.bg-green { background-color: var(--green); } +.bg-light-green { background-color: var(--light-green); } +.bg-navy { background-color: var(--navy); } +.bg-dark-blue { background-color: var(--dark-blue); } +.bg-blue { background-color: var(--blue); } +.bg-light-blue { background-color: var(--light-blue); } +.bg-lightest-blue { background-color: var(--lightest-blue); } +.bg-washed-blue { background-color: var(--washed-blue); } +.bg-washed-green { background-color: var(--washed-green); } +.bg-washed-yellow { background-color: var(--washed-yellow); } +.bg-washed-red { background-color: var(--washed-red); } +.bg-inherit { background-color: inherit; } diff --git a/src/_spacing.css b/src/_spacing.css index 6991ea4e9..805712620 100644 --- a/src/_spacing.css +++ b/src/_spacing.css @@ -1,3 +1,16 @@ +/* Variables */ + +:root { + --spacing-none: 0; + --spacing-extra-small: .25rem; + --spacing-small: .5rem; + --spacing-medium: 1rem; + --spacing-large: 2rem; + --spacing-extra-large: 4rem; + --spacing-extra-extra-large: 8rem; + --spacing-extra-extra-extra-large: 16rem; +} + /* SPACING Docs: http://tachyons.io/docs/layout/spacing/ @@ -10,8 +23,8 @@ Modifiers: a = all - y = vertical - x = horizontal + h = horizontal + v = vertical t = top r = right b = bottom @@ -25,1118 +38,915 @@ 5 = 5th step in spacing scale 6 = 6th step in spacing scale 7 = 7th step in spacing scale - 8 = 8th step in spacing scale - 9 = 9th step in spacing scale Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ -.p0 { padding: var(--spacing-0, 0); } -.p1 { padding: var(--spacing-1, 2px); } -.p2 { padding: var(--spacing-2, 4px); } -.p3 { padding: var(--spacing-3, 8px); } -.p4 { padding: var(--spacing-4, 16px); } -.p5 { padding: var(--spacing-5, 32px); } -.p6 { padding: var(--spacing-6, 64px); } -.p7 { padding: var(--spacing-7, 128px); } -.p8 { padding: var(--spacing-8, 256px); } -.p9 { padding: var(--spacing-9, 512px); } - -.pl0 { padding-left: var(--spacing-0, 0); } -.pl1 { padding-left: var(--spacing-1, 2px); } -.pl2 { padding-left: var(--spacing-2, 4px); } -.pl3 { padding-left: var(--spacing-3, 8px); } -.pl4 { padding-left: var(--spacing-4, 16px); } -.pl5 { padding-left: var(--spacing-5, 32px); } -.pl6 { padding-left: var(--spacing-6, 64px); } -.pl7 { padding-left: var(--spacing-7, 128px); } -.pl8 { padding-left: var(--spacing-8, 256px); } -.pl9 { padding-left: var(--spacing-9, 512px); } - -.pr0 { padding-right: var(--spacing-0, 0); } -.pr1 { padding-right: var(--spacing-1, 2px); } -.pr2 { padding-right: var(--spacing-2, 4px); } -.pr3 { padding-right: var(--spacing-3, 8px); } -.pr4 { padding-right: var(--spacing-4, 16px); } -.pr5 { padding-right: var(--spacing-5, 32px); } -.pr6 { padding-right: var(--spacing-6, 64px); } -.pr7 { padding-right: var(--spacing-7, 128px); } -.pr8 { padding-right: var(--spacing-8, 256px); } -.pr9 { padding-right: var(--spacing-9, 512px); } - -.pb0 { padding-bottom: var(--spacing-0, 0); } -.pb1 { padding-bottom: var(--spacing-1, 2px); } -.pb2 { padding-bottom: var(--spacing-2, 4px); } -.pb3 { padding-bottom: var(--spacing-3, 8px); } -.pb4 { padding-bottom: var(--spacing-4, 16px); } -.pb5 { padding-bottom: var(--spacing-5, 32px); } -.pb6 { padding-bottom: var(--spacing-6, 64px); } -.pb7 { padding-bottom: var(--spacing-7, 128px); } -.pb8 { padding-bottom: var(--spacing-8, 256px); } -.pb9 { padding-bottom: var(--spacing-9, 512px); } - -.pt0 { padding-top: var(--spacing-0, 0); } -.pt1 { padding-top: var(--spacing-1, 2px); } -.pt2 { padding-top: var(--spacing-2, 4px); } -.pt3 { padding-top: var(--spacing-3, 8px); } -.pt4 { padding-top: var(--spacing-4, 16px); } -.pt5 { padding-top: var(--spacing-5, 32px); } -.pt6 { padding-top: var(--spacing-6, 64px); } -.pt7 { padding-top: var(--spacing-7, 128px); } -.pt8 { padding-top: var(--spacing-8, 256px); } -.pt9 { padding-top: var(--spacing-9, 512px); } - -.py0 { - padding-top: var(--spacing-0, 0); - padding-bottom: var(--spacing-0, 0); -} -.py1 { - padding-top: var(--spacing-1, 2px); - padding-bottom: var(--spacing-1, 2px); -} -.py2 { - padding-top: var(--spacing-2, 4px); - padding-bottom: var(--spacing-2, 4px); -} -.py3 { - padding-top: var(--spacing-3, 8px); - padding-bottom: var(--spacing-3, 8px); -} -.py4 { - padding-top: var(--spacing-4, 16px); - padding-bottom: var(--spacing-4, 16px); -} -.py5 { - padding-top: var(--spacing-5, 32px); - padding-bottom: var(--spacing-5, 32px); -} -.py6 { - padding-top: var(--spacing-6, 64px); - padding-bottom: var(--spacing-6, 64px); -} -.py7 { - padding-top: var(--spacing-7, 128px); - padding-bottom: var(--spacing-7, 128px); -} -.py8 { - padding-top: var(--spacing-8, 256px); - padding-bottom: var(--spacing-8, 256px); -} -.py9 { - padding-top: var(--spacing-9, 512px); - padding-bottom: var(--spacing-9, 512px); -} +.pa0 { padding: var(--spacing-none); } +.pa1 { padding: var(--spacing-extra-small); } +.pa2 { padding: var(--spacing-small); } +.pa3 { padding: var(--spacing-medium); } +.pa4 { padding: var(--spacing-large); } +.pa5 { padding: var(--spacing-extra-large); } +.pa6 { padding: var(--spacing-extra-extra-large); } +.pa7 { padding: var(--spacing-extra-extra-extra-large); } -.px0 { - padding-left: var(--spacing-0, 0); - padding-right: var(--spacing-0, 0); -} -.px1 { - padding-left: var(--spacing-1, 4px); - padding-right: var(--spacing-1, 4px); -} -.px2 { - padding-left: var(--spacing-2, 4px); - padding-right: var(--spacing-2, 4px); -} -.px3 { - padding-left: var(--spacing-3, 8px); - padding-right: var(--spacing-3, 8px); -} -.px4 { - padding-left: var(--spacing-4, 16px); - padding-right: var(--spacing-4, 16px); -} -.px5 { - padding-left: var(--spacing-5, 32px); - padding-right: var(--spacing-5, 32px); -} -.px6 { - padding-left: var(--spacing-6, 64px); - padding-right: var(--spacing-6, 64px); -} -.px7 { - padding-left: var(--spacing-7, 128px); - padding-right: var(--spacing-7, 128px); -} -.px8 { - padding-left: var(--spacing-8, 256px); - padding-right: var(--spacing-8, 256px); -} -.px9 { - padding-left: var(--spacing-9, 512px); - padding-right: var(--spacing-9, 512px); -} +.pl0 { padding-left: var(--spacing-none); } +.pl1 { padding-left: var(--spacing-extra-small); } +.pl2 { padding-left: var(--spacing-small); } +.pl3 { padding-left: var(--spacing-medium); } +.pl4 { padding-left: var(--spacing-large); } +.pl5 { padding-left: var(--spacing-extra-large); } +.pl6 { padding-left: var(--spacing-extra-extra-large); } +.pl7 { padding-left: var(--spacing-extra-extra-extra-large); } -.m0 { margin: var(--spacing-0, 0); } -.m1 { margin: var(--spacing-1, 2px); } -.m2 { margin: var(--spacing-2, 4px); } -.m3 { margin: var(--spacing-3, 8px); } -.m4 { margin: var(--spacing-4, 16px); } -.m5 { margin: var(--spacing-5, 32px); } -.m6 { margin: var(--spacing-6, 64px); } -.m7 { margin: var(--spacing-7, 128px); } -.m8 { margin: var(--spacing-8, 256px); } -.m9 { margin: var(--spacing-9, 512px); } - -.ml0 { margin-left: var(--spacing-0, 0); } -.ml1 { margin-left: var(--spacing-1, 2px); } -.ml2 { margin-left: var(--spacing-2, 4px); } -.ml3 { margin-left: var(--spacing-3, 8px); } -.ml4 { margin-left: var(--spacing-4, 16px); } -.ml5 { margin-left: var(--spacing-5, 32px); } -.ml6 { margin-left: var(--spacing-6, 64px); } -.ml7 { margin-left: var(--spacing-7, 128px); } -.ml8 { margin-left: var(--spacing-8, 256px); } -.ml9 { margin-left: var(--spacing-9, 512px); } - -.mr0 { margin-right: var(--spacing-0, 0); } -.mr1 { margin-right: var(--spacing-1, 2px); } -.mr2 { margin-right: var(--spacing-2, 4px); } -.mr3 { margin-right: var(--spacing-3, 8px); } -.mr4 { margin-right: var(--spacing-4, 16px); } -.mr5 { margin-right: var(--spacing-5, 32px); } -.mr6 { margin-right: var(--spacing-6, 64px); } -.mr7 { margin-right: var(--spacing-7, 128px); } -.mr8 { margin-right: var(--spacing-8, 256px); } -.mr9 { margin-right: var(--spacing-9, 512px); } - -.mb0 { margin-bottom: var(--spacing-0, 0); } -.mb1 { margin-bottom: var(--spacing-1, 4px); } -.mb2 { margin-bottom: var(--spacing-2, 4px); } -.mb3 { margin-bottom: var(--spacing-3, 8px); } -.mb4 { margin-bottom: var(--spacing-4, 16px); } -.mb5 { margin-bottom: var(--spacing-5, 32px); } -.mb6 { margin-bottom: var(--spacing-6, 64px); } -.mb7 { margin-bottom: var(--spacing-7, 128px); } -.mb8 { margin-bottom: var(--spacing-8, 256px); } -.mb9 { margin-bottom: var(--spacing-9, 512px); } - -.mt0 { margin-top: var(--spacing-0, 0); } -.mt1 { margin-top: var(--spacing-1, 2px); } -.mt2 { margin-top: var(--spacing-2, 4px); } -.mt3 { margin-top: var(--spacing-3, 8px); } -.mt4 { margin-top: var(--spacing-4, 16px); } -.mt5 { margin-top: var(--spacing-5, 32px); } -.mt6 { margin-top: var(--spacing-6, 64px); } -.mt7 { margin-top: var(--spacing-7, 128px); } -.mt8 { margin-top: var(--spacing-8, 256px); } -.mt9 { margin-top: var(--spacing-9, 512px); } - -.my0 { - margin-top: var(--spacing-0, 0); - margin-bottom: var(--spacing-0, 0); -} -.my1 { - margin-top: var(--spacing-1, 4px); - margin-bottom: var(--spacing-1, 4px); -} -.my2 { - margin-top: var(--spacing-2, 4px); - margin-bottom: var(--spacing-2, 4px); -} -.my3 { - margin-top: var(--spacing-3, 8px); - margin-bottom: var(--spacing-3, 8px); -} -.my4 { - margin-top: var(--spacing-4, 16px); - margin-bottom: var(--spacing-4, 16px); -} -.my5 { - margin-top: var(--spacing-5, 32px); - margin-bottom: var(--spacing-5, 32px); -} -.my6 { - margin-top: var(--spacing-6, 64px); - margin-bottom: var(--spacing-6, 64px); -} -.my7 { - margin-top: var(--spacing-7, 128px); - margin-bottom: var(--spacing-7, 128px); -} -.my8 { - margin-top: var(--spacing-8, 256px); - margin-bottom: var(--spacing-8, 256px); -} -.my9 { - margin-top: var(--spacing-9, 512px); - margin-bottom: var(--spacing-9, 512px); -} - -.mx0 { - margin-left: var(--spacing-0, 0); - margin-right: var(--spacing-0, 0); -} -.mx1 { - margin-left: var(--spacing-1, 2px); - margin-right: var(--spacing-1, 2px); -} -.mx2 { - margin-left: var(--spacing-2, 4px); - margin-right: var(--spacing-2, 4px); -} -.mx3 { - margin-left: var(--spacing-3, 8px); - margin-right: var(--spacing-3, 8px); -} -.mx4 { - margin-left: var(--spacing-4, 16px); - margin-right: var(--spacing-4, 16px); -} -.mx5 { - margin-left: var(--spacing-5, 32px); - margin-right: var(--spacing-5, 32px); -} -.mx6 { - margin-left: var(--spacing-6, 64px); - margin-right: var(--spacing-6, 64px); -} -.mx7 { - margin-left: var(--spacing-7, 128px); - margin-right: var(--spacing-7, 128px); -} -.mx8 { - margin-left: var(--spacing-8, 256px); - margin-right: var(--spacing-8, 256px); -} -.mx9 { - margin-left: var(--spacing-9, 512px); - margin-right: var(--spacing-9, 512px); -} - -@container (min-width:30em) { - .p0-s { padding: var(--spacing-0, 0); } - .p1-s { padding: var(--spacing-1, 2px); } - .p2-s { padding: var(--spacing-2, 4px); } - .p3-s { padding: var(--spacing-3, 8px); } - .p4-s { padding: var(--spacing-4, 16px); } - .p5-s { padding: var(--spacing-5, 32px); } - .p6-s { padding: var(--spacing-6, 64px); } - .p7-s { padding: var(--spacing-7, 128px); } - .p8-s { padding: var(--spacing-8, 256px); } - .p9-s { padding: var(--spacing-9, 512px); } - - .pl0-s { padding-left: var(--spacing-0, 0); } - .pl1-s { padding-left: var(--spacing-1, 2px); } - .pl2-s { padding-left: var(--spacing-2, 4px); } - .pl3-s { padding-left: var(--spacing-3, 8px); } - .pl4-s { padding-left: var(--spacing-4, 16px); } - .pl5-s { padding-left: var(--spacing-5, 32px); } - .pl6-s { padding-left: var(--spacing-6, 64px); } - .pl7-s { padding-left: var(--spacing-7, 128px); } - .pl8-s { padding-left: var(--spacing-8, 256px); } - .pl9-s { padding-left: var(--spacing-9, 512px); } - - .pr0-s { padding-right: var(--spacing-0, 0); } - .pr1-s { padding-right: var(--spacing-1, 2px); } - .pr2-s { padding-right: var(--spacing-2, 4px); } - .pr3-s { padding-right: var(--spacing-3, 8px); } - .pr4-s { padding-right: var(--spacing-4, 16px); } - .pr5-s { padding-right: var(--spacing-5, 32px); } - .pr6-s { padding-right: var(--spacing-6, 64px); } - .pr7-s { padding-right: var(--spacing-7, 128px); } - .pr8-s { padding-right: var(--spacing-8, 256px); } - .pr9-s { padding-right: var(--spacing-9, 512px); } - - .pb0-s { padding-bottom: var(--spacing-0, 0); } - .pb1-s { padding-bottom: var(--spacing-1, 2px); } - .pb2-s { padding-bottom: var(--spacing-2, 4px); } - .pb3-s { padding-bottom: var(--spacing-3, 8px); } - .pb4-s { padding-bottom: var(--spacing-4, 16px); } - .pb5-s { padding-bottom: var(--spacing-5, 32px); } - .pb6-s { padding-bottom: var(--spacing-6, 64px); } - .pb7-s { padding-bottom: var(--spacing-7, 128px); } - .pb8-s { padding-bottom: var(--spacing-8, 256px); } - .pb9-s { padding-bottom: var(--spacing-9, 512px); } - - .pt0-s { padding-top: var(--spacing-0, 0); } - .pt1-s { padding-top: var(--spacing-1, 2px); } - .pt2-s { padding-top: var(--spacing-2, 4px); } - .pt3-s { padding-top: var(--spacing-3, 8px); } - .pt4-s { padding-top: var(--spacing-4, 16px); } - .pt5-s { padding-top: var(--spacing-5, 32px); } - .pt6-s { padding-top: var(--spacing-6, 64px); } - .pt7-s { padding-top: var(--spacing-7, 128px); } - .pt8-s { padding-top: var(--spacing-8, 256px); } - .pt9-s { padding-top: var(--spacing-9, 512px); } - - .py0-s { - padding-top: var(--spacing-0, 0); - padding-bottom: var(--spacing-0, 0); - } - .py1-s { - padding-top: var(--spacing-1, 2px); - padding-bottom: var(--spacing-1, 2px); - } - .py2-s { - padding-top: var(--spacing-2, 4px); - padding-bottom: var(--spacing-2, 4px); - } - .py3-s { - padding-top: var(--spacing-3, 8px); - padding-bottom: var(--spacing-3, 8px); - } - .py4-s { - padding-top: var(--spacing-4, 16px); - padding-bottom: var(--spacing-4, 16px); - } - .py5-s { - padding-top: var(--spacing-5, 32px); - padding-bottom: var(--spacing-5, 32px); - } - .py6-s { - padding-top: var(--spacing-6, 64px); - padding-bottom: var(--spacing-6, 64px); - } - .py7-s { - padding-top: var(--spacing-7, 128px); - padding-bottom: var(--spacing-7, 128px); - } - .py8-s { - padding-top: var(--spacing-8, 256px); - padding-bottom: var(--spacing-8, 256px); - } - .py9-s { - padding-top: var(--spacing-9, 512px); - padding-bottom: var(--spacing-9, 512px); - } - - .px0-s { - padding-left: var(--spacing-0, 0); - padding-right: var(--spacing-0, 0); - } - .px1-s { - padding-left: var(--spacing-1, 2px); - padding-right: var(--spacing-1, 2px); - } - .px2-s { - padding-left: var(--spacing-2, 4px); - padding-right: var(--spacing-2, 4px); - } - .px3-s { - padding-left: var(--spacing-3, 8px); - padding-right: var(--spacing-3, 8px); - } - .px4-s { - padding-left: var(--spacing-4, 16px); - padding-right: var(--spacing-4, 16px); - } - .px5-s { - padding-left: var(--spacing-5, 32px); - padding-right: var(--spacing-5, 32px); - } - .px6-s { - padding-left: var(--spacing-6, 64px); - padding-right: var(--spacing-6, 64px); - } - .px7-s { - padding-left: var(--spacing-7, 128px); - padding-right: var(--spacing-7, 128px); - } - .px8-s { - padding-left: var(--spacing-8, 256px); - padding-right: var(--spacing-8, 256px); - } - .px9-s { - padding-left: var(--spacing-9, 512px); - padding-right: var(--spacing-9, 512px); - } - - .m0-s { margin: var(--spacing-0, 0); } - .m1-s { margin: var(--spacing-1, 2px); } - .m2-s { margin: var(--spacing-2, 4px); } - .m3-s { margin: var(--spacing-3, 8px); } - .m4-s { margin: var(--spacing-4, 16px); } - .m5-s { margin: var(--spacing-5, 32px); } - .m6-s { margin: var(--spacing-6, 64px); } - .m7-s { margin: var(--spacing-7, 128px); } - .m8-s { margin: var(--spacing-8, 256px); } - .m9-s { margin: var(--spacing-9, 512px); } - - .ml0-s { margin-left: var(--spacing-0, 0); } - .ml1-s { margin-left: var(--spacing-1, 2px); } - .ml2-s { margin-left: var(--spacing-2, 4px); } - .ml3-s { margin-left: var(--spacing-3, 8px); } - .ml4-s { margin-left: var(--spacing-4, 16px); } - .ml5-s { margin-left: var(--spacing-5, 32px); } - .ml6-s { margin-left: var(--spacing-6, 64px); } - .ml7-s { margin-left: var(--spacing-7, 128px); } - .ml8-s { margin-left: var(--spacing-8, 256px); } - .ml9-s { margin-left: var(--spacing-9, 512px); } - - .mr0-s { margin-right: var(--spacing-0, 0); } - .mr1-s { margin-right: var(--spacing-1, 2px); } - .mr2-s { margin-right: var(--spacing-2, 4px); } - .mr3-s { margin-right: var(--spacing-3, 8px); } - .mr4-s { margin-right: var(--spacing-4, 16px); } - .mr5-s { margin-right: var(--spacing-5, 32px); } - .mr6-s { margin-right: var(--spacing-6, 64px); } - .mr7-s { margin-right: var(--spacing-7, 128px); } - .mr8-s { margin-right: var(--spacing-8, 256px); } - .mr9-s { margin-right: var(--spacing-9, 512px); } - - .mb0-s { margin-bottom: var(--spacing-0, 0); } - .mb1-s { margin-bottom: var(--spacing-1, 2px); } - .mb2-s { margin-bottom: var(--spacing-2, 4px); } - .mb3-s { margin-bottom: var(--spacing-3, 8px); } - .mb4-s { margin-bottom: var(--spacing-4, 16px); } - .mb5-s { margin-bottom: var(--spacing-5, 32px); } - .mb6-s { margin-bottom: var(--spacing-6, 64px); } - .mb7-s { margin-bottom: var(--spacing-7, 128px); } - .mb8-s { margin-bottom: var(--spacing-8, 256px); } - .mb9-s { margin-bottom: var(--spacing-9, 512px); } - - .mt0-s { margin-top: var(--spacing-0, 0); } - .mt1-s { margin-top: var(--spacing-1, 2px); } - .mt2-s { margin-top: var(--spacing-2, 4px); } - .mt3-s { margin-top: var(--spacing-3, 8px); } - .mt4-s { margin-top: var(--spacing-4, 16px); } - .mt5-s { margin-top: var(--spacing-5, 32px); } - .mt6-s { margin-top: var(--spacing-6, 64px); } - .mt7-s { margin-top: var(--spacing-7, 128px); } - .mt8-s { margin-top: var(--spacing-8, 256px); } - .mt9-s { margin-top: var(--spacing-9, 512px); } - - .my0-s { - margin-top: var(--spacing-0, 0); - margin-bottom: var(--spacing-0, 0); - } - .my1-s { - margin-top: var(--spacing-1, 2px); - margin-bottom: var(--spacing-1, 2px); - } - .my2-s { - margin-top: var(--spacing-2, 4px); - margin-bottom: var(--spacing-2, 4px); - } - .my3-s { - margin-top: var(--spacing-3, 8px); - margin-bottom: var(--spacing-3, 8px); - } - .my4-s { - margin-top: var(--spacing-4, 16px); - margin-bottom: var(--spacing-4, 16px); - } - .my5-s { - margin-top: var(--spacing-5, 32px); - margin-bottom: var(--spacing-5, 32px); - } - .my6-s { - margin-top: var(--spacing-6, 64px); - margin-bottom: var(--spacing-6, 64px); - } - .my7-s { - margin-top: var(--spacing-7, 128px); - margin-bottom: var(--spacing-7, 128px); - } - .my8-s { - margin-top: var(--spacing-8, 256px); - margin-bottom: var(--spacing-8, 256px); - } - .my9-s { - margin-top: var(--spacing-9, 512px); - margin-bottom: var(--spacing-9, 512px); - } - - .mx0-s { - margin-left: var(--spacing-0, 0); - margin-right: var(--spacing-0, 0); - } - .mx1-s { - margin-left: var(--spacing-1, 4px); - margin-right: var(--spacing-1, 4px); - } - .mx2-s { - margin-left: var(--spacing-2, 4px); - margin-right: var(--spacing-2, 4px); - } - .mx3-s { - margin-left: var(--spacing-3, 8px); - margin-right: var(--spacing-3, 8px); - } - .mx4-s { - margin-left: var(--spacing-4, 16px); - margin-right: var(--spacing-4, 16px); - } - .mx5-s { - margin-left: var(--spacing-5, 32px); - margin-right: var(--spacing-5, 32px); - } - .mx6-s { - margin-left: var(--spacing-6, 64px); - margin-right: var(--spacing-6, 64px); - } - .mx7-s { - margin-left: var(--spacing-7, 128px); - margin-right: var(--spacing-7, 128px); - } - .mx8-s { - margin-left: var(--spacing-8, 256px); - margin-right: var(--spacing-8, 256px); - } - .mx9-s { - margin-left: var(--spacing-9, 512px); - margin-right: var(--spacing-9, 512px); - } +.pr0 { padding-right: var(--spacing-none); } +.pr1 { padding-right: var(--spacing-extra-small); } +.pr2 { padding-right: var(--spacing-small); } +.pr3 { padding-right: var(--spacing-medium); } +.pr4 { padding-right: var(--spacing-large); } +.pr5 { padding-right: var(--spacing-extra-large); } +.pr6 { padding-right: var(--spacing-extra-extra-large); } +.pr7 { padding-right: var(--spacing-extra-extra-extra-large); } -} +.pb0 { padding-bottom: var(--spacing-none); } +.pb1 { padding-bottom: var(--spacing-extra-small); } +.pb2 { padding-bottom: var(--spacing-small); } +.pb3 { padding-bottom: var(--spacing-medium); } +.pb4 { padding-bottom: var(--spacing-large); } +.pb5 { padding-bottom: var(--spacing-extra-large); } +.pb6 { padding-bottom: var(--spacing-extra-extra-large); } +.pb7 { padding-bottom: var(--spacing-extra-extra-extra-large); } -@container (min-width:48em) { - .p0-m { padding: var(--spacing-0, 0); } - .p1-m { padding: var(--spacing-1, 2px); } - .p2-m { padding: var(--spacing-2, 4px); } - .p3-m { padding: var(--spacing-3, 8px); } - .p4-m { padding: var(--spacing-4, 16px); } - .p5-m { padding: var(--spacing-5, 32px); } - .p6-m { padding: var(--spacing-6, 64px); } - .p7-m { padding: var(--spacing-7, 128px); } - .p8-m { padding: var(--spacing-8, 256px); } - .p9-m { padding: var(--spacing-9, 512px); } - - .pl0-m { padding-left: var(--spacing-0, 0); } - .pl1-m { padding-left: var(--spacing-1, 2px); } - .pl2-m { padding-left: var(--spacing-2, 4px); } - .pl3-m { padding-left: var(--spacing-3, 8px); } - .pl4-m { padding-left: var(--spacing-4, 16px); } - .pl5-m { padding-left: var(--spacing-5, 32px); } - .pl6-m { padding-left: var(--spacing-6, 64px); } - .pl7-m { padding-left: var(--spacing-7, 128px); } - .pl8-m { padding-left: var(--spacing-8, 256px); } - .pl9-m { padding-left: var(--spacing-9, 512px); } - - .pr0-m { padding-right: var(--spacing-0, 0); } - .pr1-m { padding-right: var(--spacing-1, 2px); } - .pr2-m { padding-right: var(--spacing-2, 4px); } - .pr3-m { padding-right: var(--spacing-3, 8px); } - .pr4-m { padding-right: var(--spacing-4, 16px); } - .pr5-m { padding-right: var(--spacing-5, 32px); } - .pr6-m { padding-right: var(--spacing-6, 64px); } - .pr7-m { padding-right: var(--spacing-7, 128px); } - .pr8-m { padding-right: var(--spacing-8, 256px); } - .pr9-m { padding-right: var(--spacing-9, 512px); } - - .pb0-m { padding-bottom: var(--spacing-0, 0); } - .pb1-m { padding-bottom: var(--spacing-1, 2px); } - .pb2-m { padding-bottom: var(--spacing-2, 4px); } - .pb3-m { padding-bottom: var(--spacing-3, 8px); } - .pb4-m { padding-bottom: var(--spacing-4, 16px); } - .pb5-m { padding-bottom: var(--spacing-5, 32px); } - .pb6-m { padding-bottom: var(--spacing-6, 64px); } - .pb7-m { padding-bottom: var(--spacing-7, 128px); } - .pb8-m { padding-bottom: var(--spacing-8, 256px); } - .pb9-m { padding-bottom: var(--spacing-9, 512px); } - - .pt0-m { padding-top: var(--spacing-0, 0); } - .pt1-m { padding-top: var(--spacing-1, 2px); } - .pt2-m { padding-top: var(--spacing-2, 4px); } - .pt3-m { padding-top: var(--spacing-3, 8px); } - .pt4-m { padding-top: var(--spacing-4, 16px); } - .pt5-m { padding-top: var(--spacing-5, 32px); } - .pt6-m { padding-top: var(--spacing-6, 64px); } - .pt7-m { padding-top: var(--spacing-7, 128px); } - .pt8-m { padding-top: var(--spacing-8, 256px); } - .pt9-m { padding-top: var(--spacing-9, 512px); } - - .py0-m { - padding-top: var(--spacing-0, 0); - padding-bottom: var(--spacing-0, 0); - } - .py1-m { - padding-top: var(--spacing-1, 2px); - padding-bottom: var(--spacing-1, 2px); - } - .py2-m { - padding-top: var(--spacing-2, 4px); - padding-bottom: var(--spacing-2, 4px); - } - .py3-m { - padding-top: var(--spacing-3, 8px); - padding-bottom: var(--spacing-3, 8px); - } - .py4-m { - padding-top: var(--spacing-4, 16px); - padding-bottom: var(--spacing-4, 16px); - } - .py5-m { - padding-top: var(--spacing-5, 32px); - padding-bottom: var(--spacing-5, 32px); - } - .py6-m { - padding-top: var(--spacing-6, 64px); - padding-bottom: var(--spacing-6, 64px); - } - .py7-m { - padding-top: var(--spacing-7, 128px); - padding-bottom: var(--spacing-7, 128px); - } - .py8-m { - padding-top: var(--spacing-8, 256px); - padding-bottom: var(--spacing-8, 256px); - } - .py9-m { - padding-top: var(--spacing-9, 512px); - padding-bottom: var(--spacing-9, 512px); - } - - .px0-m { - padding-left: var(--spacing-0, 0); - padding-right: var(--spacing-0, 0); - } - .px1-m { - padding-left: var(--spacing-1, 2px); - padding-right: var(--spacing-1, 2px); - } - .px2-m { - padding-left: var(--spacing-2, 4px); - padding-right: var(--spacing-2, 4px); - } - .px3-m { - padding-left: var(--spacing-3, 8px); - padding-right: var(--spacing-3, 8px); - } - .px4-m { - padding-left: var(--spacing-4, 16px); - padding-right: var(--spacing-4, 16px); - } - .px5-m { - padding-left: var(--spacing-5, 32px); - padding-right: var(--spacing-5, 32px); - } - .px6-m { - padding-left: var(--spacing-6, 64px); - padding-right: var(--spacing-6, 64px); - } - .px7-m { - padding-left: var(--spacing-7, 128px); - padding-right: var(--spacing-7, 128px); - } - .px8-m { - padding-left: var(--spacing-8, 256px); - padding-right: var(--spacing-8, 256px); - } - .px9-m { - padding-left: var(--spacing-9, 512px); - padding-right: var(--spacing-9, 512px); - } - - .m0-m { margin: var(--spacing-0, 0); } - .m1-m { margin: var(--spacing-1, 2px); } - .m2-m { margin: var(--spacing-2, 4px); } - .m3-m { margin: var(--spacing-3, 8px); } - .m4-m { margin: var(--spacing-4, 16px); } - .m5-m { margin: var(--spacing-5, 32px); } - .m6-m { margin: var(--spacing-6, 64px); } - .m7-m { margin: var(--spacing-7, 128px); } - .m8-m { margin: var(--spacing-8, 256px); } - .m9-m { margin: var(--spacing-9, 512px); } - - .ml0-m { margin-left: var(--spacing-0, 0); } - .ml1-m { margin-left: var(--spacing-1, 2px); } - .ml2-m { margin-left: var(--spacing-2, 4px); } - .ml3-m { margin-left: var(--spacing-3, 8px); } - .ml4-m { margin-left: var(--spacing-4, 16px); } - .ml5-m { margin-left: var(--spacing-5, 32px); } - .ml6-m { margin-left: var(--spacing-6, 64px); } - .ml7-m { margin-left: var(--spacing-7, 128px); } - .ml8-m { margin-left: var(--spacing-8, 256px); } - .ml9-m { margin-left: var(--spacing-9, 512px); } - - .mr0-m { margin-right: var(--spacing-0, 0); } - .mr1-m { margin-right: var(--spacing-1, 4px); } - .mr2-m { margin-right: var(--spacing-2, 4px); } - .mr3-m { margin-right: var(--spacing-3, 8px); } - .mr4-m { margin-right: var(--spacing-4, 16px); } - .mr5-m { margin-right: var(--spacing-5, 32px); } - .mr6-m { margin-right: var(--spacing-6, 64px); } - .mr7-m { margin-right: var(--spacing-7, 128px); } - .mr8-m { margin-right: var(--spacing-8, 256px); } - .mr9-m { margin-right: var(--spacing-9, 512px); } - - .mb0-m { margin-bottom: var(--spacing-0, 0); } - .mb1-m { margin-bottom: var(--spacing-1, 2px); } - .mb2-m { margin-bottom: var(--spacing-2, 4px); } - .mb3-m { margin-bottom: var(--spacing-3, 8px); } - .mb4-m { margin-bottom: var(--spacing-4, 16px); } - .mb5-m { margin-bottom: var(--spacing-5, 32px); } - .mb6-m { margin-bottom: var(--spacing-6, 64px); } - .mb7-m { margin-bottom: var(--spacing-7, 128px); } - .mb8-m { margin-bottom: var(--spacing-8, 256px); } - .mb9-m { margin-bottom: var(--spacing-9, 512px); } - - .mt0-m { margin-top: var(--spacing-0, 0); } - .mt1-m { margin-top: var(--spacing-1, 2px); } - .mt2-m { margin-top: var(--spacing-2, 4px); } - .mt3-m { margin-top: var(--spacing-3, 8px); } - .mt4-m { margin-top: var(--spacing-4, 16px); } - .mt5-m { margin-top: var(--spacing-5, 32px); } - .mt6-m { margin-top: var(--spacing-6, 64px); } - .mt7-m { margin-top: var(--spacing-7, 128px); } - .mt8-m { margin-top: var(--spacing-8, 256px); } - .mt9-m { margin-top: var(--spacing-9, 512px); } - - .my0-m { - margin-top: var(--spacing-0, 0); - margin-bottom: var(--spacing-0, 0); - } - .my1-m { - margin-top: var(--spacing-1, 2px); - margin-bottom: var(--spacing-1, 2px); - } - .my2-m { - margin-top: var(--spacing-2, 4px); - margin-bottom: var(--spacing-2, 4px); - } - .my3-m { - margin-top: var(--spacing-3, 8px); - margin-bottom: var(--spacing-3, 8px); - } - .my4-m { - margin-top: var(--spacing-4, 16px); - margin-bottom: var(--spacing-4, 16px); - } - .my5-m { - margin-top: var(--spacing-5, 32px); - margin-bottom: var(--spacing-5, 32px); - } - .my6-m { - margin-top: var(--spacing-6, 64px); - margin-bottom: var(--spacing-6, 64px); - } - .my7-m { - margin-top: var(--spacing-7, 128px); - margin-bottom: var(--spacing-7, 128px); - } - .my8-m { - margin-top: var(--spacing-8, 256px); - margin-bottom: var(--spacing-8, 256px); - } - .my9-m { - margin-top: var(--spacing-9, 512px); - margin-bottom: var(--spacing-9, 512px); - } - - .mx0-m { - margin-left: var(--spacing-0, 0); - margin-right: var(--spacing-0, 0); - } - .mx1-m { - margin-left: var(--spacing-1, 2px); - margin-right: var(--spacing-1, 2px); - } - .mx2-m { - margin-left: var(--spacing-2, 4px); - margin-right: var(--spacing-2, 4px); - } - .mx3-m { - margin-left: var(--spacing-3, 8px); - margin-right: var(--spacing-3, 8px); - } - .mx4-m { - margin-left: var(--spacing-4, 16px); - margin-right: var(--spacing-4, 16px); - } - .mx5-m { - margin-left: var(--spacing-5, 32px); - margin-right: var(--spacing-5, 32px); - } - .mx6-m { - margin-left: var(--spacing-6, 64px); - margin-right: var(--spacing-6, 64px); - } - .mx7-m { - margin-left: var(--spacing-7, 128px); - margin-right: var(--spacing-7, 128px); - } - .mx8-m { - margin-left: var(--spacing-8, 256px); - margin-right: var(--spacing-8, 256px); - } - .mx9-m { - margin-left: var(--spacing-9, 512px); - margin-right: var(--spacing-9, 512px); - } +.pt0 { padding-top: var(--spacing-none); } +.pt1 { padding-top: var(--spacing-extra-small); } +.pt2 { padding-top: var(--spacing-small); } +.pt3 { padding-top: var(--spacing-medium); } +.pt4 { padding-top: var(--spacing-large); } +.pt5 { padding-top: var(--spacing-extra-large); } +.pt6 { padding-top: var(--spacing-extra-extra-large); } +.pt7 { padding-top: var(--spacing-extra-extra-extra-large); } + +.pv0 { + padding-top: var(--spacing-none); + padding-bottom: var(--spacing-none); +} +.pv1 { + padding-top: var(--spacing-extra-small); + padding-bottom: var(--spacing-extra-small); +} +.pv2 { + padding-top: var(--spacing-small); + padding-bottom: var(--spacing-small); +} +.pv3 { + padding-top: var(--spacing-medium); + padding-bottom: var(--spacing-medium); +} +.pv4 { + padding-top: var(--spacing-large); + padding-bottom: var(--spacing-large); +} +.pv5 { + padding-top: var(--spacing-extra-large); + padding-bottom: var(--spacing-extra-large); +} +.pv6 { + padding-top: var(--spacing-extra-extra-large); + padding-bottom: var(--spacing-extra-extra-large); +} + +.pv7 { + padding-top: var(--spacing-extra-extra-extra-large); + padding-bottom: var(--spacing-extra-extra-extra-large); +} + +.ph0 { + padding-left: var(--spacing-none); + padding-right: var(--spacing-none); +} + +.ph1 { + padding-left: var(--spacing-extra-small); + padding-right: var(--spacing-extra-small); +} + +.ph2 { + padding-left: var(--spacing-small); + padding-right: var(--spacing-small); +} + +.ph3 { + padding-left: var(--spacing-medium); + padding-right: var(--spacing-medium); +} + +.ph4 { + padding-left: var(--spacing-large); + padding-right: var(--spacing-large); +} + +.ph5 { + padding-left: var(--spacing-extra-large); + padding-right: var(--spacing-extra-large); +} + +.ph6 { + padding-left: var(--spacing-extra-extra-large); + padding-right: var(--spacing-extra-extra-large); +} + +.ph7 { + padding-left: var(--spacing-extra-extra-extra-large); + padding-right: var(--spacing-extra-extra-extra-large); +} + +.ma0 { margin: var(--spacing-none); } +.ma1 { margin: var(--spacing-extra-small); } +.ma2 { margin: var(--spacing-small); } +.ma3 { margin: var(--spacing-medium); } +.ma4 { margin: var(--spacing-large); } +.ma5 { margin: var(--spacing-extra-large); } +.ma6 { margin: var(--spacing-extra-extra-large); } +.ma7 { margin: var(--spacing-extra-extra-extra-large); } + +.ml0 { margin-left: var(--spacing-none); } +.ml1 { margin-left: var(--spacing-extra-small); } +.ml2 { margin-left: var(--spacing-small); } +.ml3 { margin-left: var(--spacing-medium); } +.ml4 { margin-left: var(--spacing-large); } +.ml5 { margin-left: var(--spacing-extra-large); } +.ml6 { margin-left: var(--spacing-extra-extra-large); } +.ml7 { margin-left: var(--spacing-extra-extra-extra-large); } -} +.mr0 { margin-right: var(--spacing-none); } +.mr1 { margin-right: var(--spacing-extra-small); } +.mr2 { margin-right: var(--spacing-small); } +.mr3 { margin-right: var(--spacing-medium); } +.mr4 { margin-right: var(--spacing-large); } +.mr5 { margin-right: var(--spacing-extra-large); } +.mr6 { margin-right: var(--spacing-extra-extra-large); } +.mr7 { margin-right: var(--spacing-extra-extra-extra-large); } -@container (min-width:64em) { - .p0-l { padding: var(--spacing-0, 0); } - .p1-l { padding: var(--spacing-1, 2px); } - .p2-l { padding: var(--spacing-2, 4px); } - .p3-l { padding: var(--spacing-3, 8px); } - .p4-l { padding: var(--spacing-4, 16px); } - .p5-l { padding: var(--spacing-5, 32px); } - .p6-l { padding: var(--spacing-6, 64px); } - .p7-l { padding: var(--spacing-7, 128px); } - .p8-l { padding: var(--spacing-8, 256px); } - .p9-l { padding: var(--spacing-9, 512px); } - - .pl0-l { padding-left: var(--spacing-0, 0); } - .pl1-l { padding-left: var(--spacing-1, 2px); } - .pl2-l { padding-left: var(--spacing-2, 4px); } - .pl3-l { padding-left: var(--spacing-3, 8px); } - .pl4-l { padding-left: var(--spacing-4, 16px); } - .pl5-l { padding-left: var(--spacing-5, 32px); } - .pl6-l { padding-left: var(--spacing-6, 64px); } - .pl7-l { padding-left: var(--spacing-7, 128px); } - .pl8-l { padding-left: var(--spacing-8, 256px); } - .pl9-l { padding-left: var(--spacing-9, 512px); } - - .pr0-l { padding-right: var(--spacing-0, 0); } - .pr1-l { padding-right: var(--spacing-1, 2px); } - .pr2-l { padding-right: var(--spacing-2, 4px); } - .pr3-l { padding-right: var(--spacing-3, 8px); } - .pr4-l { padding-right: var(--spacing-4, 16px); } - .pr5-l { padding-right: var(--spacing-5, 32px); } - .pr6-l { padding-right: var(--spacing-6, 64px); } - .pr7-l { padding-right: var(--spacing-7, 128px); } - .pr8-l { padding-right: var(--spacing-8, 256px); } - .pr9-l { padding-right: var(--spacing-9, 512px); } - - .pb0-l { padding-bottom: var(--spacing-0, 0); } - .pb1-l { padding-bottom: var(--spacing-1, 2px); } - .pb2-l { padding-bottom: var(--spacing-2, 4px); } - .pb3-l { padding-bottom: var(--spacing-3, 8px); } - .pb4-l { padding-bottom: var(--spacing-4, 16px); } - .pb5-l { padding-bottom: var(--spacing-5, 32px); } - .pb6-l { padding-bottom: var(--spacing-6, 64px); } - .pb7-l { padding-bottom: var(--spacing-7, 128px); } - .pb8-l { padding-bottom: var(--spacing-8, 256px); } - .pb9-l { padding-bottom: var(--spacing-9, 512px); } - - .pt0-l { padding-top: var(--spacing-0, 0); } - .pt1-l { padding-top: var(--spacing-1, 2px); } - .pt2-l { padding-top: var(--spacing-2, 4px); } - .pt3-l { padding-top: var(--spacing-3, 8px); } - .pt4-l { padding-top: var(--spacing-4, 16px); } - .pt5-l { padding-top: var(--spacing-5, 32px); } - .pt6-l { padding-top: var(--spacing-6, 64px); } - .pt7-l { padding-top: var(--spacing-7, 128px); } - .pt8-l { padding-top: var(--spacing-8, 256px); } - .pt9-l { padding-top: var(--spacing-9, 512px); } - - .py0-l { - padding-top: var(--spacing-0, 0); - padding-bottom: var(--spacing-0, 0); - } - .py1-l { - padding-top: var(--spacing-1, 2px); - padding-bottom: var(--spacing-1, 2px); - } - .py2-l { - padding-top: var(--spacing-2, 4px); - padding-bottom: var(--spacing-2, 4px); - } - .py3-l { - padding-top: var(--spacing-3, 8px); - padding-bottom: var(--spacing-3, 8px); - } - .py4-l { - padding-top: var(--spacing-4, 16px); - padding-bottom: var(--spacing-4, 16px); - } - .py5-l { - padding-top: var(--spacing-5, 32px); - padding-bottom: var(--spacing-5, 32px); - } - .py6-l { - padding-top: var(--spacing-6, 64px); - padding-bottom: var(--spacing-6, 64px); - } - .py7-l { - padding-top: var(--spacing-7, 128px); - padding-bottom: var(--spacing-7, 128px); - } - .py8-l { - padding-top: var(--spacing-8, 256px); - padding-bottom: var(--spacing-8, 256px); - } - .py9-l { - padding-top: var(--spacing-9, 512px); - padding-bottom: var(--spacing-9, 512px); - } - - .px0-l { - padding-left: var(--spacing-0, 0); - padding-right: var(--spacing-0, 0); - } - .px1-l { - padding-left: var(--spacing-1, 2px); - padding-right: var(--spacing-1, 2px); - } - .px2-l { - padding-left: var(--spacing-2, 4px); - padding-right: var(--spacing-2, 4px); - } - .px3-l { - padding-left: var(--spacing-3, 8px); - padding-right: var(--spacing-3, 8px); - } - .px4-l { - padding-left: var(--spacing-4, 16px); - padding-right: var(--spacing-4, 16px); - } - .px5-l { - padding-left: var(--spacing-5, 32px); - padding-right: var(--spacing-5, 32px); - } - .px6-l { - padding-left: var(--spacing-6, 64px); - padding-right: var(--spacing-6, 64px); - } - .px7-l { - padding-left: var(--spacing-7, 128px); - padding-right: var(--spacing-7, 128px); - } - .px8-l { - padding-left: var(--spacing-8, 256px); - padding-right: var(--spacing-8, 256px); - } - .px9-l { - padding-left: var(--spacing-9, 512px); - padding-right: var(--spacing-9, 512px); - } - - .m0-l { margin: var(--spacing-0, 0); } - .m1-l { margin: var(--spacing-1, 2px); } - .m2-l { margin: var(--spacing-2, 4px); } - .m3-l { margin: var(--spacing-3, 8px); } - .m4-l { margin: var(--spacing-4, 16px); } - .m5-l { margin: var(--spacing-5, 32px); } - .m6-l { margin: var(--spacing-6, 64px); } - .m7-l { margin: var(--spacing-7, 128px); } - .m8-l { margin: var(--spacing-8, 256px); } - .m9-l { margin: var(--spacing-9, 512px); } - - .ml0-l { margin-left: var(--spacing-0, 0); } - .ml1-l { margin-left: var(--spacing-3, 2px); } - .ml2-l { margin-left: var(--spacing-2, 4px); } - .ml3-l { margin-left: var(--spacing-3, 8px); } - .ml4-l { margin-left: var(--spacing-4, 16px); } - .ml5-l { margin-left: var(--spacing-5, 32px); } - .ml6-l { margin-left: var(--spacing-6, 64px); } - .ml7-l { margin-left: var(--spacing-7, 128px); } - .ml8-l { margin-left: var(--spacing-8, 256px); } - .ml9-l { margin-left: var(--spacing-9, 512px); } - - .mr0-l { margin-right: var(--spacing-0, 0); } - .mr1-l { margin-right: var(--spacing-1, 2px); } - .mr2-l { margin-right: var(--spacing-2, 4px); } - .mr3-l { margin-right: var(--spacing-3, 8px); } - .mr4-l { margin-right: var(--spacing-4, 16px); } - .mr5-l { margin-right: var(--spacing-5, 32px); } - .mr6-l { margin-right: var(--spacing-6, 64px); } - .mr7-l { margin-right: var(--spacing-7, 128px); } - .mr8-l { margin-right: var(--spacing-8, 256px); } - .mr9-l { margin-right: var(--spacing-9, 512px); } - - .mb0-l { margin-bottom: var(--spacing-0, 0); } - .mb1-l { margin-bottom: var(--spacing-1, 2px); } - .mb2-l { margin-bottom: var(--spacing-2, 4px); } - .mb3-l { margin-bottom: var(--spacing-3, 8px); } - .mb4-l { margin-bottom: var(--spacing-4, 16px); } - .mb5-l { margin-bottom: var(--spacing-5, 32px); } - .mb6-l { margin-bottom: var(--spacing-6, 64px); } - .mb7-l { margin-bottom: var(--spacing-7, 128px); } - .mb8-l { margin-bottom: var(--spacing-8, 256px); } - .mb9-l { margin-bottom: var(--spacing-9, 512px); } - - .mt0-l { margin-top: var(--spacing-0, 0); } - .mt1-l { margin-top: var(--spacing-1, 2px); } - .mt2-l { margin-top: var(--spacing-2, 4px); } - .mt3-l { margin-top: var(--spacing-3, 8px); } - .mt4-l { margin-top: var(--spacing-4, 16px); } - .mt5-l { margin-top: var(--spacing-5, 32px); } - .mt6-l { margin-top: var(--spacing-6, 64px); } - .mt7-l { margin-top: var(--spacing-7, 128px); } - .mt8-l { margin-top: var(--spacing-8, 256px); } - .mt9-l { margin-top: var(--spacing-9, 512px); } - - .my0-l { - margin-top: var(--spacing-0, 0); - margin-bottom: var(--spacing-0, 0); - } - .my1-l { - margin-top: var(--spacing-1, 2px); - margin-bottom: var(--spacing-1, 2px); - } - .my2-l { - margin-top: var(--spacing-2, 4px); - margin-bottom: var(--spacing-2, 4px); - } - .my3-l { - margin-top: var(--spacing-3, 8px); - margin-bottom: var(--spacing-3, 8px); - } - .my4-l { - margin-top: var(--spacing-4, 16px); - margin-bottom: var(--spacing-4, 16px); - } - .my5-l { - margin-top: var(--spacing-5, 32px); - margin-bottom: var(--spacing-5, 32px); - } - .my6-l { - margin-top: var(--spacing-6, 64px); - margin-bottom: var(--spacing-6, 64px); - } - .my7-l { - margin-top: var(--spacing-7, 128px); - margin-bottom: var(--spacing-7, 128px); - } - .my8-l { - margin-top: var(--spacing-8, 256px); - margin-bottom: var(--spacing-8, 256px); - } - .my9-l { - margin-top: var(--spacing-9, 512px); - margin-bottom: var(--spacing-9, 512px); - } - - .mx0-l { - margin-left: var(--spacing-0, 0); - margin-right: var(--spacing-0, 0); - } - .mx1-l { - margin-left: var(--spacing-1, 2px); - margin-right: var(--spacing-1, 2px); - } - .mx2-l { - margin-left: var(--spacing-2, 4px); - margin-right: var(--spacing-2, 4px); - } - .mx3-l { - margin-left: var(--spacing-3, 8px); - margin-right: var(--spacing-3, 8px); - } - .mx4-l { - margin-left: var(--spacing-4, 16px); - margin-right: var(--spacing-4, 16px); - } - .mx5-l { - margin-left: var(--spacing-5, 32px); - margin-right: var(--spacing-5, 32px); - } - .mx6-l { - margin-left: var(--spacing-6, 64px); - margin-right: var(--spacing-6, 64px); - } - .mx7-l { - margin-left: var(--spacing-7, 128px); - margin-right: var(--spacing-7, 128px); - } - .mx8-l { - margin-left: var(--spacing-8, 256px); - margin-right: var(--spacing-8, 256px); - } - .mx9-l { - margin-left: var(--spacing-9, 512px); - margin-right: var(--spacing-9, 512px); +.mb0 { margin-bottom: var(--spacing-none); } +.mb1 { margin-bottom: var(--spacing-extra-small); } +.mb2 { margin-bottom: var(--spacing-small); } +.mb3 { margin-bottom: var(--spacing-medium); } +.mb4 { margin-bottom: var(--spacing-large); } +.mb5 { margin-bottom: var(--spacing-extra-large); } +.mb6 { margin-bottom: var(--spacing-extra-extra-large); } +.mb7 { margin-bottom: var(--spacing-extra-extra-extra-large); } + +.mt0 { margin-top: var(--spacing-none); } +.mt1 { margin-top: var(--spacing-extra-small); } +.mt2 { margin-top: var(--spacing-small); } +.mt3 { margin-top: var(--spacing-medium); } +.mt4 { margin-top: var(--spacing-large); } +.mt5 { margin-top: var(--spacing-extra-large); } +.mt6 { margin-top: var(--spacing-extra-extra-large); } +.mt7 { margin-top: var(--spacing-extra-extra-extra-large); } + +.mv0 { + margin-top: var(--spacing-none); + margin-bottom: var(--spacing-none); +} +.mv1 { + margin-top: var(--spacing-extra-small); + margin-bottom: var(--spacing-extra-small); +} +.mv2 { + margin-top: var(--spacing-small); + margin-bottom: var(--spacing-small); +} +.mv3 { + margin-top: var(--spacing-medium); + margin-bottom: var(--spacing-medium); +} +.mv4 { + margin-top: var(--spacing-large); + margin-bottom: var(--spacing-large); +} +.mv5 { + margin-top: var(--spacing-extra-large); + margin-bottom: var(--spacing-extra-large); +} +.mv6 { + margin-top: var(--spacing-extra-extra-large); + margin-bottom: var(--spacing-extra-extra-large); +} +.mv7 { + margin-top: var(--spacing-extra-extra-extra-large); + margin-bottom: var(--spacing-extra-extra-extra-large); +} + +.mh0 { + margin-left: var(--spacing-none); + margin-right: var(--spacing-none); +} +.mh1 { + margin-left: var(--spacing-extra-small); + margin-right: var(--spacing-extra-small); +} +.mh2 { + margin-left: var(--spacing-small); + margin-right: var(--spacing-small); +} +.mh3 { + margin-left: var(--spacing-medium); + margin-right: var(--spacing-medium); +} +.mh4 { + margin-left: var(--spacing-large); + margin-right: var(--spacing-large); +} +.mh5 { + margin-left: var(--spacing-extra-large); + margin-right: var(--spacing-extra-large); +} +.mh6 { + margin-left: var(--spacing-extra-extra-large); + margin-right: var(--spacing-extra-extra-large); +} +.mh7 { + margin-left: var(--spacing-extra-extra-extra-large); + margin-right: var(--spacing-extra-extra-extra-large); +} + +@media (--breakpoint-not-small) { + .pa0-ns { padding: var(--spacing-none); } + .pa1-ns { padding: var(--spacing-extra-small); } + .pa2-ns { padding: var(--spacing-small); } + .pa3-ns { padding: var(--spacing-medium); } + .pa4-ns { padding: var(--spacing-large); } + .pa5-ns { padding: var(--spacing-extra-large); } + .pa6-ns { padding: var(--spacing-extra-extra-large); } + .pa7-ns { padding: var(--spacing-extra-extra-extra-large); } + + .pl0-ns { padding-left: var(--spacing-none); } + .pl1-ns { padding-left: var(--spacing-extra-small); } + .pl2-ns { padding-left: var(--spacing-small); } + .pl3-ns { padding-left: var(--spacing-medium); } + .pl4-ns { padding-left: var(--spacing-large); } + .pl5-ns { padding-left: var(--spacing-extra-large); } + .pl6-ns { padding-left: var(--spacing-extra-extra-large); } + .pl7-ns { padding-left: var(--spacing-extra-extra-extra-large); } + + .pr0-ns { padding-right: var(--spacing-none); } + .pr1-ns { padding-right: var(--spacing-extra-small); } + .pr2-ns { padding-right: var(--spacing-small); } + .pr3-ns { padding-right: var(--spacing-medium); } + .pr4-ns { padding-right: var(--spacing-large); } + .pr5-ns { padding-right: var(--spacing-extra-large); } + .pr6-ns { padding-right: var(--spacing-extra-extra-large); } + .pr7-ns { padding-right: var(--spacing-extra-extra-extra-large); } + + .pb0-ns { padding-bottom: var(--spacing-none); } + .pb1-ns { padding-bottom: var(--spacing-extra-small); } + .pb2-ns { padding-bottom: var(--spacing-small); } + .pb3-ns { padding-bottom: var(--spacing-medium); } + .pb4-ns { padding-bottom: var(--spacing-large); } + .pb5-ns { padding-bottom: var(--spacing-extra-large); } + .pb6-ns { padding-bottom: var(--spacing-extra-extra-large); } + .pb7-ns { padding-bottom: var(--spacing-extra-extra-extra-large); } + + .pt0-ns { padding-top: var(--spacing-none); } + .pt1-ns { padding-top: var(--spacing-extra-small); } + .pt2-ns { padding-top: var(--spacing-small); } + .pt3-ns { padding-top: var(--spacing-medium); } + .pt4-ns { padding-top: var(--spacing-large); } + .pt5-ns { padding-top: var(--spacing-extra-large); } + .pt6-ns { padding-top: var(--spacing-extra-extra-large); } + .pt7-ns { padding-top: var(--spacing-extra-extra-extra-large); } + + .pv0-ns { + padding-top: var(--spacing-none); + padding-bottom: var(--spacing-none); + } + .pv1-ns { + padding-top: var(--spacing-extra-small); + padding-bottom: var(--spacing-extra-small); + } + .pv2-ns { + padding-top: var(--spacing-small); + padding-bottom: var(--spacing-small); + } + .pv3-ns { + padding-top: var(--spacing-medium); + padding-bottom: var(--spacing-medium); + } + .pv4-ns { + padding-top: var(--spacing-large); + padding-bottom: var(--spacing-large); + } + .pv5-ns { + padding-top: var(--spacing-extra-large); + padding-bottom: var(--spacing-extra-large); + } + .pv6-ns { + padding-top: var(--spacing-extra-extra-large); + padding-bottom: var(--spacing-extra-extra-large); + } + .pv7-ns { + padding-top: var(--spacing-extra-extra-extra-large); + padding-bottom: var(--spacing-extra-extra-extra-large); + } + .ph0-ns { + padding-left: var(--spacing-none); + padding-right: var(--spacing-none); + } + .ph1-ns { + padding-left: var(--spacing-extra-small); + padding-right: var(--spacing-extra-small); + } + .ph2-ns { + padding-left: var(--spacing-small); + padding-right: var(--spacing-small); + } + .ph3-ns { + padding-left: var(--spacing-medium); + padding-right: var(--spacing-medium); + } + .ph4-ns { + padding-left: var(--spacing-large); + padding-right: var(--spacing-large); + } + .ph5-ns { + padding-left: var(--spacing-extra-large); + padding-right: var(--spacing-extra-large); + } + .ph6-ns { + padding-left: var(--spacing-extra-extra-large); + padding-right: var(--spacing-extra-extra-large); + } + .ph7-ns { + padding-left: var(--spacing-extra-extra-extra-large); + padding-right: var(--spacing-extra-extra-extra-large); + } + + .ma0-ns { margin: var(--spacing-none); } + .ma1-ns { margin: var(--spacing-extra-small); } + .ma2-ns { margin: var(--spacing-small); } + .ma3-ns { margin: var(--spacing-medium); } + .ma4-ns { margin: var(--spacing-large); } + .ma5-ns { margin: var(--spacing-extra-large); } + .ma6-ns { margin: var(--spacing-extra-extra-large); } + .ma7-ns { margin: var(--spacing-extra-extra-extra-large); } + + .ml0-ns { margin-left: var(--spacing-none); } + .ml1-ns { margin-left: var(--spacing-extra-small); } + .ml2-ns { margin-left: var(--spacing-small); } + .ml3-ns { margin-left: var(--spacing-medium); } + .ml4-ns { margin-left: var(--spacing-large); } + .ml5-ns { margin-left: var(--spacing-extra-large); } + .ml6-ns { margin-left: var(--spacing-extra-extra-large); } + .ml7-ns { margin-left: var(--spacing-extra-extra-extra-large); } + + .mr0-ns { margin-right: var(--spacing-none); } + .mr1-ns { margin-right: var(--spacing-extra-small); } + .mr2-ns { margin-right: var(--spacing-small); } + .mr3-ns { margin-right: var(--spacing-medium); } + .mr4-ns { margin-right: var(--spacing-large); } + .mr5-ns { margin-right: var(--spacing-extra-large); } + .mr6-ns { margin-right: var(--spacing-extra-extra-large); } + .mr7-ns { margin-right: var(--spacing-extra-extra-extra-large); } + + .mb0-ns { margin-bottom: var(--spacing-none); } + .mb1-ns { margin-bottom: var(--spacing-extra-small); } + .mb2-ns { margin-bottom: var(--spacing-small); } + .mb3-ns { margin-bottom: var(--spacing-medium); } + .mb4-ns { margin-bottom: var(--spacing-large); } + .mb5-ns { margin-bottom: var(--spacing-extra-large); } + .mb6-ns { margin-bottom: var(--spacing-extra-extra-large); } + .mb7-ns { margin-bottom: var(--spacing-extra-extra-extra-large); } + + .mt0-ns { margin-top: var(--spacing-none); } + .mt1-ns { margin-top: var(--spacing-extra-small); } + .mt2-ns { margin-top: var(--spacing-small); } + .mt3-ns { margin-top: var(--spacing-medium); } + .mt4-ns { margin-top: var(--spacing-large); } + .mt5-ns { margin-top: var(--spacing-extra-large); } + .mt6-ns { margin-top: var(--spacing-extra-extra-large); } + .mt7-ns { margin-top: var(--spacing-extra-extra-extra-large); } + + .mv0-ns { + margin-top: var(--spacing-none); + margin-bottom: var(--spacing-none); + } + .mv1-ns { + margin-top: var(--spacing-extra-small); + margin-bottom: var(--spacing-extra-small); + } + .mv2-ns { + margin-top: var(--spacing-small); + margin-bottom: var(--spacing-small); + } + .mv3-ns { + margin-top: var(--spacing-medium); + margin-bottom: var(--spacing-medium); + } + .mv4-ns { + margin-top: var(--spacing-large); + margin-bottom: var(--spacing-large); + } + .mv5-ns { + margin-top: var(--spacing-extra-large); + margin-bottom: var(--spacing-extra-large); + } + .mv6-ns { + margin-top: var(--spacing-extra-extra-large); + margin-bottom: var(--spacing-extra-extra-large); + } + .mv7-ns { + margin-top: var(--spacing-extra-extra-extra-large); + margin-bottom: var(--spacing-extra-extra-extra-large); + } + + .mh0-ns { + margin-left: var(--spacing-none); + margin-right: var(--spacing-none); + } + .mh1-ns { + margin-left: var(--spacing-extra-small); + margin-right: var(--spacing-extra-small); + } + .mh2-ns { + margin-left: var(--spacing-small); + margin-right: var(--spacing-small); + } + .mh3-ns { + margin-left: var(--spacing-medium); + margin-right: var(--spacing-medium); + } + .mh4-ns { + margin-left: var(--spacing-large); + margin-right: var(--spacing-large); + } + .mh5-ns { + margin-left: var(--spacing-extra-large); + margin-right: var(--spacing-extra-large); + } + .mh6-ns { + margin-left: var(--spacing-extra-extra-large); + margin-right: var(--spacing-extra-extra-large); + } + .mh7-ns { + margin-left: var(--spacing-extra-extra-extra-large); + margin-right: var(--spacing-extra-extra-extra-large); + } + +} + +@media (--breakpoint-medium) { + .pa0-m { padding: var(--spacing-none); } + .pa1-m { padding: var(--spacing-extra-small); } + .pa2-m { padding: var(--spacing-small); } + .pa3-m { padding: var(--spacing-medium); } + .pa4-m { padding: var(--spacing-large); } + .pa5-m { padding: var(--spacing-extra-large); } + .pa6-m { padding: var(--spacing-extra-extra-large); } + .pa7-m { padding: var(--spacing-extra-extra-extra-large); } + + .pl0-m { padding-left: var(--spacing-none); } + .pl1-m { padding-left: var(--spacing-extra-small); } + .pl2-m { padding-left: var(--spacing-small); } + .pl3-m { padding-left: var(--spacing-medium); } + .pl4-m { padding-left: var(--spacing-large); } + .pl5-m { padding-left: var(--spacing-extra-large); } + .pl6-m { padding-left: var(--spacing-extra-extra-large); } + .pl7-m { padding-left: var(--spacing-extra-extra-extra-large); } + + .pr0-m { padding-right: var(--spacing-none); } + .pr1-m { padding-right: var(--spacing-extra-small); } + .pr2-m { padding-right: var(--spacing-small); } + .pr3-m { padding-right: var(--spacing-medium); } + .pr4-m { padding-right: var(--spacing-large); } + .pr5-m { padding-right: var(--spacing-extra-large); } + .pr6-m { padding-right: var(--spacing-extra-extra-large); } + .pr7-m { padding-right: var(--spacing-extra-extra-extra-large); } + + .pb0-m { padding-bottom: var(--spacing-none); } + .pb1-m { padding-bottom: var(--spacing-extra-small); } + .pb2-m { padding-bottom: var(--spacing-small); } + .pb3-m { padding-bottom: var(--spacing-medium); } + .pb4-m { padding-bottom: var(--spacing-large); } + .pb5-m { padding-bottom: var(--spacing-extra-large); } + .pb6-m { padding-bottom: var(--spacing-extra-extra-large); } + .pb7-m { padding-bottom: var(--spacing-extra-extra-extra-large); } + + .pt0-m { padding-top: var(--spacing-none); } + .pt1-m { padding-top: var(--spacing-extra-small); } + .pt2-m { padding-top: var(--spacing-small); } + .pt3-m { padding-top: var(--spacing-medium); } + .pt4-m { padding-top: var(--spacing-large); } + .pt5-m { padding-top: var(--spacing-extra-large); } + .pt6-m { padding-top: var(--spacing-extra-extra-large); } + .pt7-m { padding-top: var(--spacing-extra-extra-extra-large); } + + .pv0-m { + padding-top: var(--spacing-none); + padding-bottom: var(--spacing-none); + } + .pv1-m { + padding-top: var(--spacing-extra-small); + padding-bottom: var(--spacing-extra-small); + } + .pv2-m { + padding-top: var(--spacing-small); + padding-bottom: var(--spacing-small); + } + .pv3-m { + padding-top: var(--spacing-medium); + padding-bottom: var(--spacing-medium); + } + .pv4-m { + padding-top: var(--spacing-large); + padding-bottom: var(--spacing-large); + } + .pv5-m { + padding-top: var(--spacing-extra-large); + padding-bottom: var(--spacing-extra-large); + } + .pv6-m { + padding-top: var(--spacing-extra-extra-large); + padding-bottom: var(--spacing-extra-extra-large); + } + .pv7-m { + padding-top: var(--spacing-extra-extra-extra-large); + padding-bottom: var(--spacing-extra-extra-extra-large); + } + + .ph0-m { + padding-left: var(--spacing-none); + padding-right: var(--spacing-none); + } + .ph1-m { + padding-left: var(--spacing-extra-small); + padding-right: var(--spacing-extra-small); + } + .ph2-m { + padding-left: var(--spacing-small); + padding-right: var(--spacing-small); + } + .ph3-m { + padding-left: var(--spacing-medium); + padding-right: var(--spacing-medium); + } + .ph4-m { + padding-left: var(--spacing-large); + padding-right: var(--spacing-large); + } + .ph5-m { + padding-left: var(--spacing-extra-large); + padding-right: var(--spacing-extra-large); + } + .ph6-m { + padding-left: var(--spacing-extra-extra-large); + padding-right: var(--spacing-extra-extra-large); + } + .ph7-m { + padding-left: var(--spacing-extra-extra-extra-large); + padding-right: var(--spacing-extra-extra-extra-large); + } + + .ma0-m { margin: var(--spacing-none); } + .ma1-m { margin: var(--spacing-extra-small); } + .ma2-m { margin: var(--spacing-small); } + .ma3-m { margin: var(--spacing-medium); } + .ma4-m { margin: var(--spacing-large); } + .ma5-m { margin: var(--spacing-extra-large); } + .ma6-m { margin: var(--spacing-extra-extra-large); } + .ma7-m { margin: var(--spacing-extra-extra-extra-large); } + + .ml0-m { margin-left: var(--spacing-none); } + .ml1-m { margin-left: var(--spacing-extra-small); } + .ml2-m { margin-left: var(--spacing-small); } + .ml3-m { margin-left: var(--spacing-medium); } + .ml4-m { margin-left: var(--spacing-large); } + .ml5-m { margin-left: var(--spacing-extra-large); } + .ml6-m { margin-left: var(--spacing-extra-extra-large); } + .ml7-m { margin-left: var(--spacing-extra-extra-extra-large); } + + .mr0-m { margin-right: var(--spacing-none); } + .mr1-m { margin-right: var(--spacing-extra-small); } + .mr2-m { margin-right: var(--spacing-small); } + .mr3-m { margin-right: var(--spacing-medium); } + .mr4-m { margin-right: var(--spacing-large); } + .mr5-m { margin-right: var(--spacing-extra-large); } + .mr6-m { margin-right: var(--spacing-extra-extra-large); } + .mr7-m { margin-right: var(--spacing-extra-extra-extra-large); } + + .mb0-m { margin-bottom: var(--spacing-none); } + .mb1-m { margin-bottom: var(--spacing-extra-small); } + .mb2-m { margin-bottom: var(--spacing-small); } + .mb3-m { margin-bottom: var(--spacing-medium); } + .mb4-m { margin-bottom: var(--spacing-large); } + .mb5-m { margin-bottom: var(--spacing-extra-large); } + .mb6-m { margin-bottom: var(--spacing-extra-extra-large); } + .mb7-m { margin-bottom: var(--spacing-extra-extra-extra-large); } + + .mt0-m { margin-top: var(--spacing-none); } + .mt1-m { margin-top: var(--spacing-extra-small); } + .mt2-m { margin-top: var(--spacing-small); } + .mt3-m { margin-top: var(--spacing-medium); } + .mt4-m { margin-top: var(--spacing-large); } + .mt5-m { margin-top: var(--spacing-extra-large); } + .mt6-m { margin-top: var(--spacing-extra-extra-large); } + .mt7-m { margin-top: var(--spacing-extra-extra-extra-large); } + + .mv0-m { + margin-top: var(--spacing-none); + margin-bottom: var(--spacing-none); + } + .mv1-m { + margin-top: var(--spacing-extra-small); + margin-bottom: var(--spacing-extra-small); + } + .mv2-m { + margin-top: var(--spacing-small); + margin-bottom: var(--spacing-small); + } + .mv3-m { + margin-top: var(--spacing-medium); + margin-bottom: var(--spacing-medium); + } + .mv4-m { + margin-top: var(--spacing-large); + margin-bottom: var(--spacing-large); + } + .mv5-m { + margin-top: var(--spacing-extra-large); + margin-bottom: var(--spacing-extra-large); + } + .mv6-m { + margin-top: var(--spacing-extra-extra-large); + margin-bottom: var(--spacing-extra-extra-large); + } + .mv7-m { + margin-top: var(--spacing-extra-extra-extra-large); + margin-bottom: var(--spacing-extra-extra-extra-large); + } + + .mh0-m { + margin-left: var(--spacing-none); + margin-right: var(--spacing-none); + } + .mh1-m { + margin-left: var(--spacing-extra-small); + margin-right: var(--spacing-extra-small); + } + .mh2-m { + margin-left: var(--spacing-small); + margin-right: var(--spacing-small); + } + .mh3-m { + margin-left: var(--spacing-medium); + margin-right: var(--spacing-medium); + } + .mh4-m { + margin-left: var(--spacing-large); + margin-right: var(--spacing-large); + } + .mh5-m { + margin-left: var(--spacing-extra-large); + margin-right: var(--spacing-extra-large); + } + .mh6-m { + margin-left: var(--spacing-extra-extra-large); + margin-right: var(--spacing-extra-extra-large); + } + .mh7-m { + margin-left: var(--spacing-extra-extra-extra-large); + margin-right: var(--spacing-extra-extra-extra-large); + } + +} + +@media (--breakpoint-large) { + .pa0-l { padding: var(--spacing-none); } + .pa1-l { padding: var(--spacing-extra-small); } + .pa2-l { padding: var(--spacing-small); } + .pa3-l { padding: var(--spacing-medium); } + .pa4-l { padding: var(--spacing-large); } + .pa5-l { padding: var(--spacing-extra-large); } + .pa6-l { padding: var(--spacing-extra-extra-large); } + .pa7-l { padding: var(--spacing-extra-extra-extra-large); } + + .pl0-l { padding-left: var(--spacing-none); } + .pl1-l { padding-left: var(--spacing-extra-small); } + .pl2-l { padding-left: var(--spacing-small); } + .pl3-l { padding-left: var(--spacing-medium); } + .pl4-l { padding-left: var(--spacing-large); } + .pl5-l { padding-left: var(--spacing-extra-large); } + .pl6-l { padding-left: var(--spacing-extra-extra-large); } + .pl7-l { padding-left: var(--spacing-extra-extra-extra-large); } + + .pr0-l { padding-right: var(--spacing-none); } + .pr1-l { padding-right: var(--spacing-extra-small); } + .pr2-l { padding-right: var(--spacing-small); } + .pr3-l { padding-right: var(--spacing-medium); } + .pr4-l { padding-right: var(--spacing-large); } + .pr5-l { padding-right: var(--spacing-extra-large); } + .pr6-l { padding-right: var(--spacing-extra-extra-large); } + .pr7-l { padding-right: var(--spacing-extra-extra-extra-large); } + + .pb0-l { padding-bottom: var(--spacing-none); } + .pb1-l { padding-bottom: var(--spacing-extra-small); } + .pb2-l { padding-bottom: var(--spacing-small); } + .pb3-l { padding-bottom: var(--spacing-medium); } + .pb4-l { padding-bottom: var(--spacing-large); } + .pb5-l { padding-bottom: var(--spacing-extra-large); } + .pb6-l { padding-bottom: var(--spacing-extra-extra-large); } + .pb7-l { padding-bottom: var(--spacing-extra-extra-extra-large); } + + .pt0-l { padding-top: var(--spacing-none); } + .pt1-l { padding-top: var(--spacing-extra-small); } + .pt2-l { padding-top: var(--spacing-small); } + .pt3-l { padding-top: var(--spacing-medium); } + .pt4-l { padding-top: var(--spacing-large); } + .pt5-l { padding-top: var(--spacing-extra-large); } + .pt6-l { padding-top: var(--spacing-extra-extra-large); } + .pt7-l { padding-top: var(--spacing-extra-extra-extra-large); } + + .pv0-l { + padding-top: var(--spacing-none); + padding-bottom: var(--spacing-none); + } + .pv1-l { + padding-top: var(--spacing-extra-small); + padding-bottom: var(--spacing-extra-small); + } + .pv2-l { + padding-top: var(--spacing-small); + padding-bottom: var(--spacing-small); + } + .pv3-l { + padding-top: var(--spacing-medium); + padding-bottom: var(--spacing-medium); + } + .pv4-l { + padding-top: var(--spacing-large); + padding-bottom: var(--spacing-large); + } + .pv5-l { + padding-top: var(--spacing-extra-large); + padding-bottom: var(--spacing-extra-large); + } + .pv6-l { + padding-top: var(--spacing-extra-extra-large); + padding-bottom: var(--spacing-extra-extra-large); + } + .pv7-l { + padding-top: var(--spacing-extra-extra-extra-large); + padding-bottom: var(--spacing-extra-extra-extra-large); + } + + .ph0-l { + padding-left: var(--spacing-none); + padding-right: var(--spacing-none); + } + .ph1-l { + padding-left: var(--spacing-extra-small); + padding-right: var(--spacing-extra-small); + } + .ph2-l { + padding-left: var(--spacing-small); + padding-right: var(--spacing-small); + } + .ph3-l { + padding-left: var(--spacing-medium); + padding-right: var(--spacing-medium); + } + .ph4-l { + padding-left: var(--spacing-large); + padding-right: var(--spacing-large); + } + .ph5-l { + padding-left: var(--spacing-extra-large); + padding-right: var(--spacing-extra-large); + } + .ph6-l { + padding-left: var(--spacing-extra-extra-large); + padding-right: var(--spacing-extra-extra-large); + } + .ph7-l { + padding-left: var(--spacing-extra-extra-extra-large); + padding-right: var(--spacing-extra-extra-extra-large); + } + + .ma0-l { margin: var(--spacing-none); } + .ma1-l { margin: var(--spacing-extra-small); } + .ma2-l { margin: var(--spacing-small); } + .ma3-l { margin: var(--spacing-medium); } + .ma4-l { margin: var(--spacing-large); } + .ma5-l { margin: var(--spacing-extra-large); } + .ma6-l { margin: var(--spacing-extra-extra-large); } + .ma7-l { margin: var(--spacing-extra-extra-extra-large); } + + .ml0-l { margin-left: var(--spacing-none); } + .ml1-l { margin-left: var(--spacing-extra-small); } + .ml2-l { margin-left: var(--spacing-small); } + .ml3-l { margin-left: var(--spacing-medium); } + .ml4-l { margin-left: var(--spacing-large); } + .ml5-l { margin-left: var(--spacing-extra-large); } + .ml6-l { margin-left: var(--spacing-extra-extra-large); } + .ml7-l { margin-left: var(--spacing-extra-extra-extra-large); } + + .mr0-l { margin-right: var(--spacing-none); } + .mr1-l { margin-right: var(--spacing-extra-small); } + .mr2-l { margin-right: var(--spacing-small); } + .mr3-l { margin-right: var(--spacing-medium); } + .mr4-l { margin-right: var(--spacing-large); } + .mr5-l { margin-right: var(--spacing-extra-large); } + .mr6-l { margin-right: var(--spacing-extra-extra-large); } + .mr7-l { margin-right: var(--spacing-extra-extra-extra-large); } + + .mb0-l { margin-bottom: var(--spacing-none); } + .mb1-l { margin-bottom: var(--spacing-extra-small); } + .mb2-l { margin-bottom: var(--spacing-small); } + .mb3-l { margin-bottom: var(--spacing-medium); } + .mb4-l { margin-bottom: var(--spacing-large); } + .mb5-l { margin-bottom: var(--spacing-extra-large); } + .mb6-l { margin-bottom: var(--spacing-extra-extra-large); } + .mb7-l { margin-bottom: var(--spacing-extra-extra-extra-large); } + + .mt0-l { margin-top: var(--spacing-none); } + .mt1-l { margin-top: var(--spacing-extra-small); } + .mt2-l { margin-top: var(--spacing-small); } + .mt3-l { margin-top: var(--spacing-medium); } + .mt4-l { margin-top: var(--spacing-large); } + .mt5-l { margin-top: var(--spacing-extra-large); } + .mt6-l { margin-top: var(--spacing-extra-extra-large); } + .mt7-l { margin-top: var(--spacing-extra-extra-extra-large); } + + .mv0-l { + margin-top: var(--spacing-none); + margin-bottom: var(--spacing-none); + } + .mv1-l { + margin-top: var(--spacing-extra-small); + margin-bottom: var(--spacing-extra-small); + } + .mv2-l { + margin-top: var(--spacing-small); + margin-bottom: var(--spacing-small); + } + .mv3-l { + margin-top: var(--spacing-medium); + margin-bottom: var(--spacing-medium); + } + .mv4-l { + margin-top: var(--spacing-large); + margin-bottom: var(--spacing-large); + } + .mv5-l { + margin-top: var(--spacing-extra-large); + margin-bottom: var(--spacing-extra-large); + } + .mv6-l { + margin-top: var(--spacing-extra-extra-large); + margin-bottom: var(--spacing-extra-extra-large); + } + .mv7-l { + margin-top: var(--spacing-extra-extra-extra-large); + margin-bottom: var(--spacing-extra-extra-extra-large); + } + + .mh0-l { + margin-left: var(--spacing-none); + margin-right: var(--spacing-none); + } + .mh1-l { + margin-left: var(--spacing-extra-small); + margin-right: var(--spacing-extra-small); + } + .mh2-l { + margin-left: var(--spacing-small); + margin-right: var(--spacing-small); + } + .mh3-l { + margin-left: var(--spacing-medium); + margin-right: var(--spacing-medium); + } + .mh4-l { + margin-left: var(--spacing-large); + margin-right: var(--spacing-large); + } + .mh5-l { + margin-left: var(--spacing-extra-large); + margin-right: var(--spacing-extra-large); + } + .mh6-l { + margin-left: var(--spacing-extra-extra-large); + margin-right: var(--spacing-extra-extra-large); + } + .mh7-l { + margin-left: var(--spacing-extra-extra-extra-large); + margin-right: var(--spacing-extra-extra-extra-large); } } diff --git a/src/_tables.css b/src/_tables.css index 8bcd27c41..d1f145a85 100644 --- a/src/_tables.css +++ b/src/_tables.css @@ -10,10 +10,26 @@ border-spacing: 0; } -.striped--light:nth-child(odd) { - background-color: var(--gray-10); +.striped--light-silver:nth-child(odd) { + background-color: var(--light-silver); } -.striped--dark:nth-child(odd) { - background-color: var(--gray-0); +.striped--moon-gray:nth-child(odd) { + background-color: var(--moon-gray); +} + +.striped--light-gray:nth-child(odd) { + background-color: var(--light-gray); +} + +.striped--near-white:nth-child(odd) { + background-color: var(--near-white); +} + +.stripe-light:nth-child(odd) { + background-color: var(--white-10); +} + +.stripe-dark:nth-child(odd) { + background-color: var(--black-10); } diff --git a/src/_text-align.css b/src/_text-align.css index 530a80a50..48211fb87 100644 --- a/src/_text-align.css +++ b/src/_text-align.css @@ -13,7 +13,7 @@ j = justify Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -24,21 +24,21 @@ .tc { text-align: center; } .tj { text-align: justify; } -@container (min-width:30em) { - .tl-s { text-align: left; } - .tr-s { text-align: right; } - .tc-s { text-align: center; } - .tj-s { text-align: justify; } +@media (--breakpoint-not-small) { + .tl-ns { text-align: left; } + .tr-ns { text-align: right; } + .tc-ns { text-align: center; } + .tj-ns { text-align: justify; } } -@container (min-width:48em) { +@media (--breakpoint-medium) { .tl-m { text-align: left; } .tr-m { text-align: right; } .tc-m { text-align: center; } .tj-m { text-align: justify; } } -@container (min-width:64em) { +@media (--breakpoint-large) { .tl-l { text-align: left; } .tr-l { text-align: right; } .tc-l { text-align: center; } diff --git a/src/_text-decoration.css b/src/_text-decoration.css index 16ddb0615..574de2764 100644 --- a/src/_text-decoration.css +++ b/src/_text-decoration.css @@ -5,7 +5,7 @@ Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -14,3 +14,22 @@ .strike { text-decoration: line-through; } .underline { text-decoration: underline; } .no-underline { text-decoration: none; } + + +@media (--breakpoint-not-small) { + .strike-ns { text-decoration: line-through; } + .underline-ns { text-decoration: underline; } + .no-underline-ns { text-decoration: none; } +} + +@media (--breakpoint-medium) { + .strike-m { text-decoration: line-through; } + .underline-m { text-decoration: underline; } + .no-underline-m { text-decoration: none; } +} + +@media (--breakpoint-large) { + .strike-l { text-decoration: line-through; } + .underline-l { text-decoration: underline; } + .no-underline-l { text-decoration: none; } +} diff --git a/src/_text-shadow.css b/src/_text-shadow.css deleted file mode 100644 index 5d9944c23..000000000 --- a/src/_text-shadow.css +++ /dev/null @@ -1,32 +0,0 @@ -/* - - TEXT-SHADOW - Docs: http://tachyons.io/docs/themes/text-shadow/ - - Media Query Extensions: - -s = small - -m = medium - -l = large - - */ - -.text-shadow-1 { text-shadow: rgb(var(--shadow-color)) -4px 4px 0px; } -.text-shadow-2 { text-shadow: rgb(var(--shadow-color)) -8px 8px 0px; } -.text-shadow-3 { text-shadow: rgb(var(--shadow-color) / var(--shadow-opacity ,.5)) -8px 8px 0px; } -.text-shadow-4 { text-shadow: rgba(var(--shadow-color) / var(--shadow-opacity, .5)) -4px 4px 8px; } -.text-shadow-5 { text-shadow: rgb(var(--shadow-color)) 2px 0px 0px, rgb(var(--shadow-color)) 0px 2px 0px, rgb(var(--shadow-color)) -2px 0px 0px, rgb(var(--shadow-color)) 0px -2px 0px, rgb(var(--shadow-color)) -2px -2px 0px, rgb(var(--shadow-color)) 2px -2px 0px, rgb(var(--shadow-color)) 2px 2px 0px, rgb(var(--shadow-color)) -2px 2px 0px; } -.text-shadow-6 { text-shadow: rgb(var(--shadow-color-invert)) 2px 0px 0px, rgb(var(--shadow-color-invert)) 0px 2px 0px, rgb(var(--shadow-color-invert)) -2px 0px 0px, rgb(var(--shadow-color-invert)) 0px -2px 0px, rgb(var(--shadow-color-invert)) -2px -2px 0px, rgb(var(--shadow-color-invert)) 2px -2px 0px, rgb(var(--shadow-color-invert)) 2px 2px 0px, rgb(var(--shadow-color-invert)) -2px 2px 0px; } - - -@container (min-width:30em) { - -} - -@container (min-width:48em) { - -} - -@container (min-width:64em) { - -} - diff --git a/src/_text-transform.css b/src/_text-transform.css index 1fb639058..50ae73e79 100644 --- a/src/_text-transform.css +++ b/src/_text-transform.css @@ -13,7 +13,7 @@ n = none Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -24,21 +24,21 @@ .ttu { text-transform: uppercase; } .ttn { text-transform: none; } -@container (min-width:30em) { - .ttc-s { text-transform: capitalize; } - .ttl-s { text-transform: lowercase; } - .ttu-s { text-transform: uppercase; } - .ttn-s { text-transform: none; } +@media (--breakpoint-not-small) { + .ttc-ns { text-transform: capitalize; } + .ttl-ns { text-transform: lowercase; } + .ttu-ns { text-transform: uppercase; } + .ttn-ns { text-transform: none; } } -@container (min-width:48em) { +@media (--breakpoint-medium) { .ttc-m { text-transform: capitalize; } .ttl-m { text-transform: lowercase; } .ttu-m { text-transform: uppercase; } .ttn-m { text-transform: none; } } -@container (min-width:64em) { +@media (--breakpoint-large) { .ttc-l { text-transform: capitalize; } .ttl-l { text-transform: lowercase; } .ttu-l { text-transform: uppercase; } diff --git a/src/_type-scale.css b/src/_type-scale.css index fdac5f17f..673b54caf 100644 --- a/src/_type-scale.css +++ b/src/_type-scale.css @@ -1,7 +1,7 @@ -/* +/* TYPE SCALE - Docs: http://tachyons.io/docs/type-scale + Docs: http://tachyons.io/docs/typography/scale/ Base: f = font-size @@ -14,75 +14,82 @@ 5 = 5th step in size scale 6 = 6th step in size scale 7 = 7th step in size scale - 8 = 8th step in size scale - 9 = 9th step in size scale - 10 = 10th step in size scale - 11 = 11th step in size scale - 12 = 12th step in size scale Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ -/* Type Scale */ +/* + * For Hero/Marketing Titles + * + * These generally are too large for mobile + * so be careful using them on smaller screens. + * */ + +.f-6, +.f-headline { + font-size: 6rem; +} +.f-5, +.f-subheadline { + font-size: 5rem; +} + -.f1 { font-size: var(--font-size-1, .75rem); } -.f2 { font-size: var(--font-size-2, .875rem); } -.f3 { font-size: var(--font-size-3, 1rem); } -.f4 { font-size: var(--font-size-4, 1.125rem); } -.f5 { font-size: var(--font-size-5, 1.25rem); } -.f6 { font-size: var(--font-size-6, 1.5rem); } -.f7 { font-size: var(--font-size-7, 2rem); } -.f8 { font-size: var(--font-size-8, 3rem); } -.f9 { font-size: var(--font-size-9, 4rem); } -.f10 { font-size: var(--font-size-10, 6rem); } -.f11 { font-size: var(--font-size-11, 8rem); } -.f12 { font-size: var(--font-size-12, 12rem); } +/* Type Scale */ +.f1 { font-size: 3rem; } +.f2 { font-size: 2.25rem; } +.f3 { font-size: 1.5rem; } +.f4 { font-size: 1.25rem; } +.f5 { font-size: 1rem; } +.f6 { font-size: .875rem; } +.f7 { font-size: .75rem; } /* Small and hard to read for many people so use with extreme caution */ -@container (min-width:30em){ - .f1-s { font-size: var(--font-size-1, .75rem); } - .f2-s { font-size: var(--font-size-2, .875rem); } - .f3-s { font-size: var(--font-size-3, 1rem); } - .f4-s { font-size: var(--font-size-4, 1.125rem); } - .f5-s { font-size: var(--font-size-5, 1.25rem); } - .f6-s { font-size: var(--font-size-6, 1.5rem); } - .f7-s { font-size: var(--font-size-7, 2rem); } - .f8-s { font-size: var(--font-size-8, 3rem); } - .f9-s { font-size: var(--font-size-9, 4rem); } - .f10-s { font-size: var(--font-size-10, 6rem); } - .f11-s { font-size: var(--font-size-11, 8rem); } - .f12-s { font-size: var(--font-size-12, 12rem); } +@media (--breakpoint-not-small){ + .f-6-ns, + .f-headline-ns { font-size: 6rem; } + .f-5-ns, + .f-subheadline-ns { font-size: 5rem; } + .f1-ns { font-size: 3rem; } + .f2-ns { font-size: 2.25rem; } + .f3-ns { font-size: 1.5rem; } + .f4-ns { font-size: 1.25rem; } + .f5-ns { font-size: 1rem; } + .f6-ns { font-size: .875rem; } + .f7-ns { font-size: .75rem; } } -@container (min-width:48em) { - .f1-m { font-size: var(--font-size-1, .75rem); } - .f2-m { font-size: var(--font-size-2, .875rem); } - .f3-m { font-size: var(--font-size-3, 1rem); } - .f4-m { font-size: var(--font-size-4, 1.125rem); } - .f5-m { font-size: var(--font-size-5, 1.25rem); } - .f6-m { font-size: var(--font-size-6, 1.5rem); } - .f7-m { font-size: var(--font-size-7, 2rem); } - .f8-m { font-size: var(--font-size-8, 3rem); } - .f9-m { font-size: var(--font-size-9, 4rem); } - .f10-m { font-size: var(--font-size-10, 6rem); } - .f11-m { font-size: var(--font-size-11, 8rem); } - .f12-m { font-size: var(--font-size-12, 12rem); } +@media (--breakpoint-medium) { + .f-6-m, + .f-headline-m { font-size: 6rem; } + .f-5-m, + .f-subheadline-m { font-size: 5rem; } + .f1-m { font-size: 3rem; } + .f2-m { font-size: 2.25rem; } + .f3-m { font-size: 1.5rem; } + .f4-m { font-size: 1.25rem; } + .f5-m { font-size: 1rem; } + .f6-m { font-size: .875rem; } + .f7-m { font-size: .75rem; } } -@container (min-width:64em) { - .f1-l { font-size: var(--font-size-1, .75rem); } - .f2-l { font-size: var(--font-size-2, .875rem); } - .f3-l { font-size: var(--font-size-3, 1rem); } - .f4-l { font-size: var(--font-size-4, 1.125rem); } - .f5-l { font-size: var(--font-size-5, 1.25rem); } - .f6-l { font-size: var(--font-size-6, 1.5rem); } - .f7-l { font-size: var(--font-size-7, 2rem); } - .f8-l { font-size: var(--font-size-8, 3rem); } - .f9-l { font-size: var(--font-size-9, 4rem); } - .f10-l { font-size: var(--font-size-10, 6rem); } - .f11-l { font-size: var(--font-size-11, 8rem); } - .f12-l { font-size: var(--font-size-12, 12rem); } +@media (--breakpoint-large) { + .f-6-l, + .f-headline-l { + font-size: 6rem; + } + .f-5-l, + .f-subheadline-l { + font-size: 5rem; + } + .f1-l { font-size: 3rem; } + .f2-l { font-size: 2.25rem; } + .f3-l { font-size: 1.5rem; } + .f4-l { font-size: 1.25rem; } + .f5-l { font-size: 1rem; } + .f6-l { font-size: .875rem; } + .f7-l { font-size: .75rem; } } diff --git a/src/_typography.css b/src/_typography.css index e430892b0..4a4103840 100644 --- a/src/_typography.css +++ b/src/_typography.css @@ -4,26 +4,27 @@ http://tachyons.io/docs/typography/measure/ Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ -/* Measure is limited to 66 characters */ + +/* Measure is limited to ~66 characters */ .measure { - max-width: var(--measure, 66ch); + max-width: 30em; } /* Measure is limited to ~80 characters */ .measure-wide { - max-width: var(--measure-wide, 80ch); + max-width: 34em; } -/* Measure is limited to 45 characters */ +/* Measure is limited to ~45 characters */ .measure-narrow { - max-width: var(--measure-narrow, 45ch); + max-width: 20em; } /* Book paragraph style - paragraphs are indented with no vertical spacing. */ @@ -45,33 +46,49 @@ text-overflow: ellipsis; } -@container (min-width:30em) { - .measure-s { max-width: var(--measure, 66ch); } - .measure-wide-s { max-width: var(--measure-wide, 80ch); } - .measure-narrow-s { max-width: var(--measure-narrow, 45ch); } - .small-caps-s { font-variant: small-caps; } - .indent-s { +@media (--breakpoint-not-small) { + .measure-ns { + max-width: 30em; + } + .measure-wide-ns { + max-width: 34em; + } + .measure-narrow-ns { + max-width: 20em; + } + .indent-ns { text-indent: 1em; margin-top: 0; margin-bottom: 0; } - .truncate-s { + .small-caps-ns { + font-variant: small-caps; + } + .truncate-ns { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } -@container (min-width:48em) { - .measure-m { max-width: var(--measure, 66ch); } - .measure-wide-m { max-width: var(--measure-wide, 80ch); } - .measure-narrow-m { max-width: var(--measure-narrow, 45ch); } - .small-caps-m { font-variant: small-caps; } +@media (--breakpoint-medium) { + .measure-m { + max-width: 30em; + } + .measure-wide-m { + max-width: 34em; + } + .measure-narrow-m { + max-width: 20em; + } .indent-m { text-indent: 1em; margin-top: 0; margin-bottom: 0; } + .small-caps-m { + font-variant: small-caps; + } .truncate-m { white-space: nowrap; overflow: hidden; @@ -79,16 +96,24 @@ } } -@container (min-width:64em) { - .measure-l { max-width: var(--measure, 66ch); } - .measure-wide-l { max-width: var(--measure-wide, 80ch); } - .measure-narrow-l { max-width: var(--measure-narrow, 45ch); } - .small-caps-l { font-variant: small-caps; } +@media (--breakpoint-large) { + .measure-l { + max-width: 30em; + } + .measure-wide-l { + max-width: 34em; + } + .measure-narrow-l { + max-width: 20em; + } .indent-l { text-indent: 1em; margin-top: 0; margin-bottom: 0; } + .small-caps-l { + font-variant: small-caps; + } .truncate-l { white-space: nowrap; overflow: hidden; diff --git a/src/_utilities.css b/src/_utilities.css index 6f5b92591..6dc7c55fe 100644 --- a/src/_utilities.css +++ b/src/_utilities.css @@ -3,12 +3,17 @@ UTILITIES Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large */ +/* Equivalent to .overflow-y-scroll */ +.overflow-container { + overflow-y: scroll; +} + .center { margin-right: auto; margin-left: auto; @@ -17,16 +22,16 @@ .mr-auto { margin-right: auto; } .ml-auto { margin-left: auto; } -@container (min-width:30em){ - .center-s { +@media (--breakpoint-not-small){ + .center-ns { margin-right: auto; margin-left: auto; } - .mr-auto-s { margin-right: auto; } - .ml-auto-s { margin-left: auto; } + .mr-auto-ns { margin-right: auto; } + .ml-auto-ns { margin-left: auto; } } -@container (min-width:48em){ +@media (--breakpoint-medium){ .center-m { margin-right: auto; margin-left: auto; @@ -35,7 +40,7 @@ .ml-auto-m { margin-left: auto; } } -@container (min-width:64em){ +@media (--breakpoint-large){ .center-l { margin-right: auto; margin-left: auto; diff --git a/src/_variables.css b/src/_variables.css deleted file mode 100644 index 9100a5abe..000000000 --- a/src/_variables.css +++ /dev/null @@ -1,392 +0,0 @@ -/* - - VARIABLES - - -*/ - -:root { - - /* - * COLORS - * A balanced color system optimized for accessibility - * Theme generated with https://components.ai/theme - * The first six steps in each scale are accessible with white - * - */ - - --tint-0: hsla(0, 0%, 100%, 0.035); - --tint-1: hsla(0, 0%, 100%, 0.1); - --tint-2: hsla(0, 0%, 100%, 0.19); - --tint-3: hsla(0, 0%, 100%, 0.28); - --tint-4: hsla(0, 0%, 100%, 0.36); - --tint-5: hsla(0, 0%, 100%, 0.45); - --tint-6: hsla(0, 0%, 100%, 0.55); - --tint-7: hsla(0, 0%, 100%, 0.64); - --tint-8: hsla(0, 0%, 100%, 0.73); - --tint-9: hsla(0, 0%, 100%, 0.815); - --tint-10: hsla(0, 0%, 100%, 0.895); - --tint-11: hsla(0, 0%, 100%, 0.94); - --shadow-11: hsla(0, 0%, 0%, 0.94); - --shadow-10: hsla(0, 0%, 0%, 0.895); - --shadow-9: hsla(0, 0%, 0%, 0.815); - --shadow-8: hsla(0, 0%, 0%, 0.73); - --shadow-7: hsla(0, 0%, 0%, 0.64); - --shadow-6: hsla(0, 0%, 0%, 0.55); - --shadow-5: hsla(0, 0%, 0%, 0.45); - --shadow-4: hsla(0, 0%, 0%, 0.36); - --shadow-3: hsla(0, 0%, 0%, 0.28); - --shadow-2: hsla(0, 0%, 0%, 0.19); - --shadow-1: hsla(0, 0%, 0%, 0.1); - --shadow-0: hsla(0, 0%, 0%, 0.035); - --gray-0: #000000; - --gray-1: #171717; - --gray-2: #2f2f2f; - --gray-3: #464646; - --gray-4: #5e5e5e; - --gray-5: #757575; - --gray-6: #8c8c8c; - --gray-7: #a3a3a3; - --gray-8: #bababa; - --gray-9: #d1d1d1; - --gray-10: #e8e8e8; - --gray-11: #ffffff; - --slate-gray-0: #09090b; - --slate-gray-1: #1d1d22; - --slate-gray-2: #313138; - --slate-gray-3: #45444f; - --slate-gray-4: #595866; - --slate-gray-5: #6d6c7d; - --slate-gray-6: #838292; - --slate-gray-7: #9a9aa7; - --slate-gray-8: #b2b1bb; - --slate-gray-9: #c9c9d0; - --slate-gray-10: #e1e0e4; - --slate-gray-11: #f8f8f9; - --blue-1: #071e3f; - --blue-2: #0c3166; - --blue-3: #10448d; - --blue-4: #1556b4; - --blue-5: #1969db; - --blue-6: #317fed; - --blue-7: #5797f0; - --blue-8: #7daef4; - --blue-9: #a3c6f7; - --blue-10: #c9ddfa; - --blue-11: #eff5fe; - --indigo-0: #080614; - --indigo-1: #19143f; - --indigo-2: #2a216a; - --indigo-3: #3a2e95; - --indigo-4: #4b3bc0; - --indigo-5: #5c49eb; - --indigo-6: #725fff; - --indigo-7: #8c7cff; - --indigo-8: #a69aff; - --indigo-9: #c0b7ff; - --indigo-10: #dad5ff; - --indigo-11: #f4f3ff; - --violet-0: #110517; - --violet-1: #2e0d3e; - --violet-2: #4b1465; - --violet-3: #681c8c; - --violet-4: #8424b3; - --violet-5: #a12cda; - --violet-6: #b543ec; - --violet-7: #c366f0; - --violet-8: #d089f3; - --violet-9: #deabf7; - --violet-10: #eccefa; - --violet-11: #f9f0fe; - --magenta-0: #13040f; - --magenta-1: #350a2c; - --magenta-2: #581148; - --magenta-3: #7b1765; - --magenta-4: #9e1e82; - --magenta-5: #c1249e; - --magenta-6: #d43cb2; - --magenta-7: #dc61c1; - --magenta-8: #e485cf; - --magenta-9: #eca9dd; - --magenta-10: #f4ceec; - --magenta-11: #fcf2fa; - --red-0: #120205; - --red-1: #39050f; - --red-2: #5f0819; - --red-3: #860b24; - --red-4: #ac0e2e; - --red-5: #d31138; - --red-6: #e7284e; - --red-7: #ec506f; - --red-8: #f07790; - --red-9: #f49fb0; - --red-10: #f9c7d1; - --red-11: #fdeef1; - --red-orange-0: #190b05; - --red-orange-1: #3d1307; - --red-orange-2: #601b0a; - --red-orange-3: #84240c; - --red-orange-4: #a72c0e; - --red-orange-5: #cb3411; - --red-orange-6: #ee3c13; - --red-orange-7: #fe562f; - --red-orange-8: #fe7d5e; - --red-orange-9: #ffa48e; - --red-orange-10: #ffccbe; - --red-orange-11: #fff3ee; - --orange-0: #150d04; - --orange-1: #2e1c08; - --orange-2: #472a0c; - --orange-3: #603910; - --orange-4: #794714; - --orange-5: #a65d13; - --orange-6: #d37413; - --orange-7: #ff8a14; - --orange-8: #ffa54a; - --orange-9: #ffc081; - --orange-10: #ffdab7; - --orange-11: #fff5ed; - --gold-0: #140e05; - --gold-1: #2c1f0a; - --gold-2: #432f0e; - --gold-3: #5b4013; - --gold-4: #725118; - --gold-5: #946818; - --gold-6: #d4950d; - --gold-7: #eeb028; - --gold-8: #f2c259; - --gold-9: #f7d38a; - --gold-10: #fbe5bc; - --gold-11: #fff5e9; - --yellow-0: #111006; - --yellow-1: #252405; - --yellow-2: #3a3804; - --yellow-3: #4e4d03; - --yellow-4: #636101; - --yellow-5: #777500; - --yellow-6: #ccc500; - --yellow-7: #fcf433; - --yellow-8: #fdf67a; - --yellow-9: #fdf89b; - --yellow-10: #fef9bb; - --yellow-11: #fefadb; - --green-0: #091108; - --green-1: #0f2611; - --green-2: #153c1a; - --green-3: #1b5122; - --green-4: #21662b; - --green-5: #25833a; - --green-6: #26b056; - --green-7: #35d272; - --green-8: #63dd90; - --green-9: #90e8ae; - --green-10: #bdf3cc; - --green-11: #eafeea; - --teal-0: #07100c; - --teal-1: #0c231a; - --teal-2: #113628; - --teal-3: #164936; - --teal-4: #1b5b45; - --teal-5: #177f63; - --teal-6: #12a282; - --teal-7: #2abb9b; - --teal-8: #5acab1; - --teal-9: #8bdac7; - --teal-10: #bbe9dc; - --teal-11: #ecf8f2; - --cyan-0: #0a1211; - --cyan-1: #102425; - --cyan-2: #153639; - --cyan-3: #1b484c; - --cyan-4: #215a60; - --cyan-5: #247981; - --cyan-6: #24a9b6; - --cyan-7: #28d6e6; - --cyan-8: #57e0ec; - --cyan-9: #85eaf2; - --cyan-10: #b4f5f9; - --cyan-11: #e2ffff; - --transparent: hsla(0,0,0,0); - - @supports (color: color(display-p3 1 1 1)) { - :root { - --blue-0: color(display-p3 0 0.07 0.25); - --blue-1: color(display-p3 0 0.09 0.32); - --blue-2: color(display-p3 0 0.11 0.42); - --blue-3: color(display-p3 0 0.15 0.53); - --blue-4: color(display-p3 0 0.16 0.7); - --blue-5: color(display-p3 0 0.22 0.88); - --blue-6: color(display-p3 0.06 0.37 1); - --blue-7: color(display-p3 0.38 0.59 1 ); - --blue-8: color(display-p3 0.66 0.79 1); - --blue-9: color(display-p3 0.79 0.86 0.99); - --blue-10: color(display-p3 0.87 0.92 0.99); - --blue-11: color(display-p3 0.92 0.95 1); - --indigo-0: color(display-p3 0.06 0.03 0.21); - --indigo-1: color(display-p3 0.09 0.07 0.26); - --indigo-2: color(display-p3 0.15 0.11 0.42); - --indigo-3: color(display-p3 0.18 0.14 0.57); - --indigo-4: color(display-p3 0.2 0.18 0.75); - --indigo-5: color(display-p3 0.26 0.22 1); - --indigo-6: color(display-p3 0.28 0.28 1); - --indigo-7: color(display-p3 0.47 0.49 1); - --indigo-8: color(display-p3 0.67 0.68 1); - --indigo-9: color(display-p3 0.81 0.81 0.98); - --indigo-10: color(display-p3 0.87 0.92 0.99); - --indigo-11: color(display-p3 0.92 0.95 1); - } - } - - --degrees-1: 0; - --degrees-2: 45deg; - --degrees-3: 90deg; - --degrees-4: 135deg; - --degrees-5: 180deg; - --degrees-6: 225deg; - --degrees-7: 270deg; - --degrees-8: 315deg; - - --gradient-degree-0: var(--degrees-1, 0); - --gradient-degree: var(--degrees-2, 45deg); - --gradient-degree-2: var(--degrees-4, 135deg); - - --gradient-stripe-width: 12px; - --gradient-stripe-width-2: var(--border-width-1); - - --gradient-color-1: var(--blue-2); - --gradient-color-2: var(--magenta-6); - --gradient-color-3: var(--red-5); - --gradient-color-4: var(--indigo-5); - --gradient-color-5: var(--violet-0); - --gradient-color-6: var(--violet-5); - --gradient-color-7: var(--magenta-0); - --gradient-color-8: var(--magenta-5); - --gradient-color-9: var(--red-0); - --gradient-color-10: var(--red-5); - --gradient-color-11: var(--red-orange-0); - --gradient-color-12: var(--red-orange-5); - --gradient-color-13: var(--orange-0); - --gradient-color-14: var(--orange-5); - --gradient-color-15: var(--gold-0); - --gradient-color-16: var(--gold-5); - --gradient-color-17: var(--yellow-0); - --gradient-color-18: var(--yellow-5); - --gradient-color-19: var(--green-0); - --gradient-color-20: var(--green-5); - --gradient-color-21: var(--teal-0); - --gradient-color-22: var(--teal-5); - --gradient-color-23: var(--cyan-0); - --gradient-color-24: var(--cyan-5); - - --gradient-stop: 50%; - - --font-size-1: 12px; - --font-size-2: 14px; - --font-size-3: 16px; - --font-size-4: 20px; - --font-size-5: 24px; - --font-size-6: 32px; - --font-size-7: 48px; - --font-size-8: 64px; - --font-size-9: 96px; - --font-size-10: 128px; - --font-size-11: 192px; - --font-size-12: 256px; - - --measure-narrow: 45ch; - --measure: 66ch; - --measure-wide: 80ch; - - --border-radius-0: 0; - --border-radius-1: 4px; - --border-radius-2: 6px; - --border-radius-3: 8px; - --border-radius-4: 12px; - --border-radius-5: 16px; - --border-radius-6: 20px; - --border-radius-7: 24px; - --border-radius-8: 32px; - --border-radius-9: 48px; - --border-radius-10: 64px; - --border-radius-11: 9999px; - --border-radius: var(--border-radius-2); - - --border-width-0: 0; - --border-width-1: 1px; - --border-width-2: 2px; - --border-width-3: 4px; - --border-width-4: 8px; - --border-width-5: 16px; - - --border-width: var(--border-width-1,1px); - --border-color: var(--gray-5, gray); - - --line-height-solid: 1; - --line-height-heading: 1.25; - --line-height-body: 1.5; - - --letter-spacing-tracked: 0.1em; - --letter-spacing-tight: -0.05em; - --letter-spacing-large: 0.25em; - - --font-family-heading: Inter, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; - --font-family-body: Inter, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; - --font-family-mono: Inconsolata, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; - - --spacing-0: 0; - --spacing-1: 2px; - --spacing-2: 4px; - --spacing-3: 8px; - --spacing-4: 16px; - --spacing-5: 32px; - --spacing-6: 64px; - --spacing-7: 128px; - --spacing-8: 256px; - --spacing-9: 512px; - - --size-0: 0; - --size-1: 1rem; - --size-2: 2rem; - --size-3: 3rem; - --size-4: 4rem; - --size-5: 8rem; - --size-6: 16rem; - --size-7: 32rem; - --size-8: 64rem; - - --shadow-color: 0 0 0; - --shadow-color-invert: 255 255 255; - --shadow-border-width: 1px; - --shadow-opacity: .25; - - /* Opacity scale */ - - --opacity-0: 0; - --opacity-1: .025; - --opacity-2: .05; - --opacity-3: .1; - --opacity-4: .2; - --opacity-5: .3; - --opacity-6: .4; - --opacity-7: .5; - --opacity-8: .6; - --opacity-9: .7; - --opacity-10: .8; - --opacity-11: .9; - --opacity-12: 1; - - --duration-0: 125ms; - --duration-1: 250ms; - --duration-2: 500ms; - - --easing-function-0: cubic-bezier(0.543, 1.086, 0.5, -0.383); - --easing-function-1: ease; - --easing-function-2: ease-out; - --easing-function-3: ease-in-out; - --easing-function-4: linear; - -} - -@media (prefers-color-scheme: dark) { - --shadow-color: 255 255 255; -} diff --git a/src/_vertical-align.css b/src/_vertical-align.css index 650183fec..83f911484 100644 --- a/src/_vertical-align.css +++ b/src/_vertical-align.css @@ -3,7 +3,7 @@ VERTICAL ALIGN Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -14,21 +14,21 @@ .v-top { vertical-align: top; } .v-btm { vertical-align: bottom; } -@container (min-width:30em) { - .v-base-s { vertical-align: baseline; } - .v-mid-s { vertical-align: middle; } - .v-top-s { vertical-align: top; } - .v-btm-s { vertical-align: bottom; } +@media (--breakpoint-not-small) { + .v-base-ns { vertical-align: baseline; } + .v-mid-ns { vertical-align: middle; } + .v-top-ns { vertical-align: top; } + .v-btm-ns { vertical-align: bottom; } } -@container (min-width:48em) { +@media (--breakpoint-medium) { .v-base-m { vertical-align: baseline; } .v-mid-m { vertical-align: middle; } .v-top-m { vertical-align: top; } .v-btm-m { vertical-align: bottom; } } -@container (min-width:64em) { +@media (--breakpoint-large) { .v-base-l { vertical-align: baseline; } .v-mid-l { vertical-align: middle; } .v-top-l { vertical-align: top; } diff --git a/src/_visibility.css b/src/_visibility.css index c1a393022..f5a8c44b6 100644 --- a/src/_visibility.css +++ b/src/_visibility.css @@ -3,7 +3,7 @@ VISIBILITY Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -12,56 +12,40 @@ /* Text that is hidden but accessible - Ref: https://accessibility.18f.gov/hidden-content/ + Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ .clip { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); } -@container (min-width:30em) { - .clip-s { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; +@media (--breakpoint-not-small) { + .clip-ns { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); } } -@container (min-width:48em) { +@media (--breakpoint-medium) { .clip-m { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); } } -@container (min-width:64em) { +@media (--breakpoint-large) { .clip-l { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); } } diff --git a/src/_white-space.css b/src/_white-space.css index bc22a2ab8..3902f1f7c 100644 --- a/src/_white-space.css +++ b/src/_white-space.css @@ -3,7 +3,7 @@ WHITE SPACE Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -14,19 +14,19 @@ .nowrap { white-space: nowrap; } .pre { white-space: pre; } -@container (min-width:30em) { - .ws-normal-s { white-space: normal; } - .nowrap-s { white-space: nowrap; } - .pre-s { white-space: pre; } +@media (--breakpoint-not-small) { + .ws-normal-ns { white-space: normal; } + .nowrap-ns { white-space: nowrap; } + .pre-ns { white-space: pre; } } -@container (min-width:48em) { +@media (--breakpoint-medium) { .ws-normal-m { white-space: normal; } .nowrap-m { white-space: nowrap; } .pre-m { white-space: pre; } } -@container (min-width:64em) { +@media (--breakpoint-large) { .ws-normal-l { white-space: normal; } .nowrap-l { white-space: nowrap; } .pre-l { white-space: pre; } diff --git a/src/_widths.css b/src/_widths.css index 3814ebf99..bfbd5163a 100644 --- a/src/_widths.css +++ b/src/_widths.css @@ -12,9 +12,6 @@ 3 = 3rd step in width scale 4 = 4th step in width scale 5 = 5th step in width scale - 6 = 6th step in width scale - 7 = 7th step in width scale - 8 = 8th step in width scale -10 = literal value 10% -20 = literal value 20% @@ -37,7 +34,7 @@ Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -45,84 +42,100 @@ /* Width Scale */ -.w0 { width: var(--size-0, 0); } -.w1 { width: var(--size-1, 1rem); } -.w2 { width: var(--size-2, 2rem); } -.w3 { width: var(--size-3, 3rem); } -.w4 { width: var(--size-4, 4rem); } -.w5 { width: var(--size-5, 8rem); } -.w6 { width: var(--size-6, 16rem); } -.w7 { width: var(--size-7, 32rem); } -.w8 { width: var(--size-8, 64rem); } +.w1 { width: 1rem; } +.w2 { width: 2rem; } +.w3 { width: 4rem; } +.w4 { width: 8rem; } +.w5 { width: 16rem; } .w-10 { width: 10%; } .w-20 { width: 20%; } .w-25 { width: 25%; } +.w-30 { width: 30%; } +.w-33 { width: 33%; } +.w-34 { width: 34%; } +.w-40 { width: 40%; } .w-50 { width: 50%; } +.w-60 { width: 60%; } +.w-70 { width: 70%; } .w-75 { width: 75%; } +.w-80 { width: 80%; } +.w-90 { width: 90%; } .w-100 { width: 100%; } .w-third { width: calc(100% / 3); } .w-two-thirds { width: calc(100% / 1.5); } .w-auto { width: auto; } -@container (min-width:30em) { - .w0-s { width: var(--size-0, 0); } - .w1-s { width: var(--size-1, 1rem); } - .w2-s { width: var(--size-2, 2rem); } - .w3-s { width: var(--size-3, 3rem); } - .w4-s { width: var(--size-4, 4rem); } - .w5-s { width: var(--size-5, 8rem); } - .w6-s { width: var(--size-6, 16rem); } - .w7-s { width: var(--size-7, 32rem); } - .w8-s { width: var(--size-8, 64rem); } - .w-10-s { width: 10%; } - .w-20-s { width: 20%; } - .w-25-s { width: 25%; } - .w-50-s { width: 50%; } - .w-75-s { width: 75%; } - .w-100-s { width: 100%; } - .w-third-s { width: calc(100% / 3); } - .w-two-thirds-s { width: calc(100% / 1.5); } - .w-auto-s { width: auto; } +@media (--breakpoint-not-small) { + .w1-ns { width: 1rem; } + .w2-ns { width: 2rem; } + .w3-ns { width: 4rem; } + .w4-ns { width: 8rem; } + .w5-ns { width: 16rem; } + .w-10-ns { width: 10%; } + .w-20-ns { width: 20%; } + .w-25-ns { width: 25%; } + .w-30-ns { width: 30%; } + .w-33-ns { width: 33%; } + .w-34-ns { width: 34%; } + .w-40-ns { width: 40%; } + .w-50-ns { width: 50%; } + .w-60-ns { width: 60%; } + .w-70-ns { width: 70%; } + .w-75-ns { width: 75%; } + .w-80-ns { width: 80%; } + .w-90-ns { width: 90%; } + .w-100-ns { width: 100%; } + .w-third-ns { width: calc(100% / 3); } + .w-two-thirds-ns { width: calc(100% / 1.5); } + .w-auto-ns { width: auto; } } -@container (min-width:48em) { - .w0-m { width: var(--size-0, 0); } - .w1-m { width: var(--size-1, 1rem); } - .w2-m { width: var(--size-2, 2rem); } - .w3-m { width: var(--size-3, 3rem); } - .w4-m { width: var(--size-4, 4rem); } - .w5-m { width: var(--size-5, 8rem); } - .w6-m { width: var(--size-6, 16rem); } - .w7-m { width: var(--size-7, 32rem); } - .w8-m { width: var(--size-8, 64rem); } +@media (--breakpoint-medium) { + .w1-m { width: 1rem; } + .w2-m { width: 2rem; } + .w3-m { width: 4rem; } + .w4-m { width: 8rem; } + .w5-m { width: 16rem; } .w-10-m { width: 10%; } .w-20-m { width: 20%; } .w-25-m { width: 25%; } + .w-30-m { width: 30%; } + .w-33-m { width: 33%; } + .w-34-m { width: 34%; } + .w-40-m { width: 40%; } .w-50-m { width: 50%; } + .w-60-m { width: 60%; } + .w-70-m { width: 70%; } .w-75-m { width: 75%; } + .w-80-m { width: 80%; } + .w-90-m { width: 90%; } .w-100-m { width: 100%; } .w-third-m { width: calc(100% / 3); } .w-two-thirds-m { width: calc(100% / 1.5); } .w-auto-m { width: auto; } } -@container (min-width:64em) { - .w0-l { width: var(--size-0, 0); } - .w1-l { width: var(--size-1, 1rem); } - .w2-l { width: var(--size-2, 2rem); } - .w3-l { width: var(--size-3, 3rem); } - .w4-l { width: var(--size-4, 4rem); } - .w5-l { width: var(--size-5, 8rem); } - .w6-l { width: var(--size-6, 16rem); } - .w7-l { width: var(--size-7, 32rem); } - .w8-l { width: var(--size-8, 64rem); } +@media (--breakpoint-large) { + .w1-l { width: 1rem; } + .w2-l { width: 2rem; } + .w3-l { width: 4rem; } + .w4-l { width: 8rem; } + .w5-l { width: 16rem; } .w-10-l { width: 10%; } .w-20-l { width: 20%; } .w-25-l { width: 25%; } + .w-30-l { width: 30%; } + .w-33-l { width: 33%; } + .w-34-l { width: 34%; } + .w-40-l { width: 40%; } .w-50-l { width: 50%; } + .w-60-l { width: 60%; } + .w-70-l { width: 70%; } .w-75-l { width: 75%; } + .w-80-l { width: 80%; } + .w-90-l { width: 90%; } .w-100-l { width: 100%; } .w-third-l { width: calc(100% / 3); } .w-two-thirds-l { width: calc(100% / 1.5); } diff --git a/src/_word-break.css b/src/_word-break.css index ee764de43..bc88931a0 100644 --- a/src/_word-break.css +++ b/src/_word-break.css @@ -6,7 +6,7 @@ word = word-break Media Query Extensions: - -s = small + -ns = not-small -m = medium -l = large @@ -16,19 +16,19 @@ .word-wrap { word-break: break-all; } .word-nowrap { word-break: keep-all; } -@container (min-width:30em) { - .word-normal-s { word-break: normal; } - .word-wrap-s { word-break: break-all; } - .word-nowrap-s { word-break: keep-all; } +@media (--breakpoint-not-small) { + .word-normal-ns { word-break: normal; } + .word-wrap-ns { word-break: break-all; } + .word-nowrap-ns { word-break: keep-all; } } -@container (min-width:48em) { +@media (--breakpoint-medium) { .word-normal-m { word-break: normal; } .word-wrap-m { word-break: break-all; } .word-nowrap-m { word-break: keep-all; } } -@container (min-width:64em) { +@media (--breakpoint-large) { .word-normal-l { word-break: normal; } .word-wrap-l { word-break: break-all; } .word-nowrap-l { word-break: keep-all; } diff --git a/src/tachyons.css b/src/tachyons.css index b7f8b6822..115e63d7e 100644 --- a/src/tachyons.css +++ b/src/tachyons.css @@ -1,4 +1,4 @@ -/*! TACHYONS v5.0.0.beta | http://tachyons.io */ +/*! TACHYONS v4.12.0 | http://tachyons.io */ /* * @@ -27,18 +27,9 @@ /* External Library Includes */ @import './_normalize'; -/* Variables */ -/* Importing here will allow you to override any variables in the modules */ -@import './_media-queries'; -@import './_variables'; - -@import './_gradients'; - /* Modules */ @import './_box-sizing'; -@import './_container-type'; -@import './_all'; @import './_aspect-ratios'; @import './_images'; @import './_background-size'; @@ -50,29 +41,11 @@ @import './_border-style'; @import './_border-widths'; @import './_box-shadow'; -@import './_text-shadow'; @import './_code'; @import './_coordinates'; @import './_clears'; @import './_display'; -@import './_glass'; -@import './_gap'; -@import './_gap-column'; -@import './_gap-row'; -@import './_grid-template-columns'; -@import './_grid-column'; -@import './_grid-row'; -@import './_backdrop-filters'; -@import './_filters'; @import './_flexbox'; -@import './_flex-direction'; -@import './_flex-wrap'; -@import './_align-items'; -@import './_align-content'; -@import './_align-self'; -@import './_justify-self'; -@import './_justify-content'; -@import './_order'; @import './_floats'; @import './_font-family'; @import './_font-style'; @@ -108,6 +81,10 @@ @import './_nested'; @import './_styles'; +/* Variables */ +/* Importing here will allow you to override any variables in the modules */ +@import './_colors'; +@import './_media-queries'; /* Debugging */ @import './_debug-children'; diff --git a/yarn.lock b/yarn.lock deleted file mode 100644 index 27e6f02d4..000000000 --- a/yarn.lock +++ /dev/null @@ -1,2383 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -# yarn lockfile v1 - - -acorn@^6.0.4: - version "6.4.2" - resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6" - integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ== - -alphanum-sort@^1.0.1, alphanum-sort@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3" - integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM= - -ansi-regex@^2.0.0: - version "2.1.1" - resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df" - integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8= - -ansi-styles@^2.2.1: - version "2.2.1" - resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe" - integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4= - -ansi-styles@^3.2.1: - version "3.2.1" - resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d" - integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA== - dependencies: - color-convert "^1.9.0" - -application-config-path@^0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/application-config-path/-/application-config-path-0.1.0.tgz#193c5f0a86541a4c66fba1e2dc38583362ea5e8f" - integrity sha1-GTxfCoZUGkxm+6Hi3DhYM2LqXo8= - -application-config@~1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/application-config/-/application-config-1.0.1.tgz#5aa2e2a5ed6abd2e5d1d473d3596f574044fe9e7" - integrity sha1-WqLipe1qvS5dHUc9NZb1dARP6ec= - dependencies: - application-config-path "^0.1.0" - mkdirp "^0.5.1" - -argparse@^1.0.7: - version "1.0.10" - resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911" - integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg== - dependencies: - sprintf-js "~1.0.2" - -array-find-index@^1.0.1: - version "1.0.2" - resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1" - integrity sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E= - -arrify@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d" - integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0= - -async@^0.9.0: - version "0.9.2" - resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d" - integrity sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0= - -author-regex@^0.2.1: - version "0.2.1" - resolved "https://registry.yarnpkg.com/author-regex/-/author-regex-0.2.1.tgz#8bdefaac6065a931799bec07eeef51b940e08f3c" - integrity sha1-i976rGBlqTF5m+wH7u9RuUDgjzw= - -authors-to-markdown@^0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/authors-to-markdown/-/authors-to-markdown-0.1.0.tgz#a3380064289a725f40cd152144c21faa37fd162b" - integrity sha1-ozgAZCiacl9AzRUhRMIfqjf9Fis= - dependencies: - is-blank "^1.1.0" - normalize-url "^1.4.1" - parse-author "^0.2.1" - -autoprefixer@^6.3.1: - version "6.7.7" - resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014" - integrity sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ= - dependencies: - browserslist "^1.7.6" - caniuse-db "^1.0.30000634" - normalize-range "^0.1.2" - num2fraction "^1.2.2" - postcss "^5.2.16" - postcss-value-parser "^3.2.3" - -autoprefixer@^8.1.0: - version "8.6.5" - resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-8.6.5.tgz#343f3d193ed568b3208e00117a1b96eb691d4ee9" - integrity sha512-PLWJN3Xo/rycNkx+mp8iBDMTm3FeWe4VmYaZDSqL5QQB9sLsQkG5k8n+LNDFnhh9kdq2K+egL/icpctOmDHwig== - dependencies: - browserslist "^3.2.8" - caniuse-lite "^1.0.30000864" - normalize-range "^0.1.2" - num2fraction "^1.2.2" - postcss "^6.0.23" - postcss-value-parser "^3.2.3" - -balanced-match@^0.4.2: - version "0.4.2" - resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838" - integrity sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg= - -balanced-match@^1.0.0: - version "1.0.2" - resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee" - integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw== - -bl@~1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/bl/-/bl-1.1.2.tgz#fdca871a99713aa00d19e3bbba41c44787a65398" - integrity sha1-/cqHGplxOqANGeO7ukHER4emU5g= - dependencies: - readable-stream "~2.0.5" - -bluebird@^3.1.1: - version "3.7.2" - resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f" - integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg== - -brace-expansion@^1.1.7: - version "1.1.11" - resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" - integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA== - dependencies: - balanced-match "^1.0.0" - concat-map "0.0.1" - -browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6: - version "1.7.7" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.7.tgz#0bd76704258be829b2398bb50e4b62d1a166b0b9" - integrity sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk= - dependencies: - caniuse-db "^1.0.30000639" - electron-to-chromium "^1.2.7" - -browserslist@^3.2.8: - version "3.2.8" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.2.8.tgz#b0005361d6471f0f5952797a76fc985f1f978fc6" - integrity sha512-WHVocJYavUwVgVViC0ORikPHQquXwVh939TaelZ4WDqpWgTX/FsGhl/+P4qBUAGcRvtOgDgC+xftNWWp2RUTAQ== - dependencies: - caniuse-lite "^1.0.30000844" - electron-to-chromium "^1.3.47" - -bytes@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6" - integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg== - -camelcase-keys@^2.0.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7" - integrity sha1-MIvur/3ygRkFHvodkyITyRuPkuc= - dependencies: - camelcase "^2.0.0" - map-obj "^1.0.0" - -camelcase-keys@^4.0.0: - version "4.2.0" - resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-4.2.0.tgz#a2aa5fb1af688758259c32c141426d78923b9b77" - integrity sha1-oqpfsa9oh1glnDLBQUJteJI7m3c= - dependencies: - camelcase "^4.1.0" - map-obj "^2.0.0" - quick-lru "^1.0.0" - -camelcase@^2.0.0: - version "2.1.1" - resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f" - integrity sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8= - -camelcase@^4.1.0: - version "4.1.0" - resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd" - integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0= - -caniuse-api@^1.5.2: - version "1.6.1" - resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c" - integrity sha1-tTTnxzTE+B7F++isoq0kNUuWLGw= - dependencies: - browserslist "^1.3.6" - caniuse-db "^1.0.30000529" - lodash.memoize "^4.1.2" - lodash.uniq "^4.5.0" - -caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639: - version "1.0.30001271" - resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30001271.tgz#043576964c24f28d072ec8c935db153ed506620a" - integrity sha512-V7/O06sNu6e54ArdzLA1xFuYJ+kK9XXsO4pYa53ixujAVX/OVCGvDfRICSgkxdk8pdMZ+tA1v5ylLKDHNwUqEg== - -caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30000864: - version "1.0.30001271" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001271.tgz#0dda0c9bcae2cf5407cd34cac304186616cc83e8" - integrity sha512-BBruZFWmt3HFdVPS8kceTBIguKxu4f99n5JNp06OlPD/luoAMIaIK5ieV5YjnBLH3Nysai9sxj9rpJj4ZisXOA== - -capture-stack-trace@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d" - integrity sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw== - -chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3: - version "1.1.3" - resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98" - integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg= - dependencies: - ansi-styles "^2.2.1" - escape-string-regexp "^1.0.2" - has-ansi "^2.0.0" - strip-ansi "^3.0.0" - supports-color "^2.0.0" - -chalk@^2.4.1, chalk@^2.4.2: - version "2.4.2" - resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" - integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== - dependencies: - ansi-styles "^3.2.1" - escape-string-regexp "^1.0.5" - supports-color "^5.3.0" - -clap@^1.0.9: - version "1.2.3" - resolved "https://registry.yarnpkg.com/clap/-/clap-1.2.3.tgz#4f36745b32008492557f46412d66d50cb99bce51" - integrity sha512-4CoL/A3hf90V3VIEjeuhSvlGFEHKzOz+Wfc2IVZc+FaUgU0ZQafJTP49fvnULipOPcAfqhyI2duwQyns6xqjYA== - dependencies: - chalk "^1.1.3" - -class-repeat@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/class-repeat/-/class-repeat-1.0.2.tgz#3aa3e4b6ee044e10a03a6650b064d3a335d275e9" - integrity sha512-Waqktb/IbBVtQCZI8Esj3zWEetYEJDRN3J0D4TkH/H+ybHLM3Ma6BGk8lrssAtvjBUS3hFnaqVXAyaGHtLefYw== - dependencies: - css-selector-tokenizer "^0.5.4" - get-css-classes "^1.1.0" - has-class-selector "^1.0.0" - is-present "^1.0.0" - -clone@^1.0.2: - version "1.0.4" - resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e" - integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4= - -coa@~1.0.1: - version "1.0.4" - resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.4.tgz#a9ef153660d6a86a8bdec0289a5c684d217432fd" - integrity sha1-qe8VNmDWqGqL3sAomlxoTSF0Mv0= - dependencies: - q "^1.1.2" - -color-convert@^0.5.2: - version "0.5.3" - resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd" - integrity sha1-vbbGnOZg+t/+CwAHzER+G59ygr0= - -color-convert@^1.3.0, color-convert@^1.9.0: - version "1.9.3" - resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" - integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== - dependencies: - color-name "1.1.3" - -color-name@1.1.3: - version "1.1.3" - resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" - integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= - -color-name@^1.0.0: - version "1.1.4" - resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" - integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== - -color-string@^0.3.0: - version "0.3.0" - resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991" - integrity sha1-J9RvtnAlxcL6JZk7+/V55HhBuZE= - dependencies: - color-name "^1.0.0" - -color@^0.11.0: - version "0.11.4" - resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764" - integrity sha1-bXtcdPtl6EHNSHkq0e1eB7kE12Q= - dependencies: - clone "^1.0.2" - color-convert "^1.3.0" - color-string "^0.3.0" - -colormin@^1.0.5: - version "1.1.2" - resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133" - integrity sha1-6i90IKcrlogaOKrlnsEkpvcpgTM= - dependencies: - color "^0.11.0" - css-color-names "0.0.4" - has "^1.0.1" - -colors@~0.6.0-1: - version "0.6.2" - resolved "https://registry.yarnpkg.com/colors/-/colors-0.6.2.tgz#2423fe6678ac0c5dae8852e5d0e5be08c997abcc" - integrity sha1-JCP+ZnisDF2uiFLl0OW+CMmXq8w= - -colors@~1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63" - integrity sha1-FopHAXVran9RoSzgyXv6KMCE7WM= - -commander@~2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/commander/-/commander-2.1.0.tgz#d121bbae860d9992a3d517ba96f56588e47c6781" - integrity sha1-0SG7roYNmZKj1Re6lvVliOR8Z4E= - -comment-regex@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/comment-regex/-/comment-regex-1.0.1.tgz#e070d2c4db33231955d0979d27c918fcb6f93565" - integrity sha512-IWlN//Yfby92tOIje7J18HkNmWRR7JESA/BK8W7wqY/akITpU5B0JQWnbTjCfdChSrDNb0DrdA9jfAxiiBXyiQ== - -concat-map@0.0.1: - version "0.0.1" - resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" - integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s= - -copy-files@^0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/copy-files/-/copy-files-0.1.0.tgz#fa38385dc047ef88193c1c61b6a253a8a427f116" - integrity sha1-+jg4XcBH74gZPBxhtqJTqKQn8RY= - dependencies: - async "^0.9.0" - lodash "^2.4.1" - mkdirp "^0.5.0" - -core-util-is@~1.0.0: - version "1.0.3" - resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85" - integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ== - -create-error-class@^3.0.0: - version "3.0.2" - resolved "https://registry.yarnpkg.com/create-error-class/-/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6" - integrity sha1-Br56vvlHo/FKMP1hBnHUAbyot7Y= - dependencies: - capture-stack-trace "^1.0.0" - -css-color-converter@^1.0.2: - version "1.1.1" - resolved "https://registry.yarnpkg.com/css-color-converter/-/css-color-converter-1.1.1.tgz#a2d4dfd37615c1e365dc02f57ea82e43e473793c" - integrity sha512-Fx7twabisBA+FQQ72VY/gzoSXL8RfzqKtldotbpeJjwFUYwUPBd5fm6ut/mK2T8JMPWph2CY1TpVIhy4I0ko+Q== - dependencies: - color-convert "^0.5.2" - color-name "^1.0.0" - -css-color-names@0.0.1: - version "0.0.1" - resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.1.tgz#5d0548fa256456ede4a9a0c2ac7ab19d3eb1ad81" - integrity sha1-XQVI+iVkVu3kqaDCrHqxnT6xrYE= - -css-color-names@0.0.4: - version "0.0.4" - resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" - integrity sha1-gIrcLnnPhHOAabZGyyDsJ762KeA= - -css-mqpacker@^6.0.2: - version "6.0.2" - resolved "https://registry.yarnpkg.com/css-mqpacker/-/css-mqpacker-6.0.2.tgz#ced48675c644e846b3c9459e0a473f2aead1ff31" - integrity sha512-01xogFCcK6KQmUS+EwSS5R5Sq/mp9rjLBw/7ej+xPZHKE0gzjsWk8uJpFuKOllQrVEOJqt7Y8H6rCNG+sMIg+Q== - dependencies: - minimist "^1.2.0" - postcss "^6.0.16" - -css-mqpacker@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/css-mqpacker/-/css-mqpacker-7.0.0.tgz#48f4a0ff45b81ec661c4a33ed80b9db8a026333b" - integrity sha512-temVrWS+sB4uocE2quhW8ru/KguDmGhCU7zN213KxtDvWOH3WS/ZUStfpF4fdCT7W8fPpFrQdWRFqtFtPPfBLA== - dependencies: - minimist "^1.2.0" - postcss "^7.0.0" - -css-selector-tokenizer@^0.5.4: - version "0.5.4" - resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.5.4.tgz#139bafd34a35fd0c1428487049e0699e6f6a2c21" - integrity sha1-E5uv00o1/QwUKEhwSeBpnm9qLCE= - dependencies: - cssesc "^0.1.0" - fastparse "^1.1.1" - -css-selector-tokenizer@^0.7.3: - version "0.7.3" - resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.3.tgz#735f26186e67c749aaf275783405cf0661fae8f1" - integrity sha512-jWQv3oCEL5kMErj4wRnK/OPoBi0D+P1FR2cDCKYPaMeD2eW3/mttav8HT4hT1CKopiJI/psEULjkClhvJo4Lvg== - dependencies: - cssesc "^3.0.0" - fastparse "^1.1.2" - -css-shorthand-expand@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/css-shorthand-expand/-/css-shorthand-expand-1.2.0.tgz#bd6ac8d79f99928581eaca9fe05a03d316d17fe5" - integrity sha512-L3RS1VNYuXgMOfVGX4WzP9AFK6KL0JuioSoO8661egEac2eHX9/s4yFO8mgK6QEtm8UmU8IvuKzPgdQpU0DhpQ== - dependencies: - css-color-names "0.0.1" - css-url-regex "0.0.1" - hex-color-regex "^1.0.1" - hsl-regex "^1.0.0" - hsla-regex "^1.0.0" - map-obj "^1.0.0" - repeat-element "^1.1.0" - rgb-regex "^1.0.1" - rgba-regex "^1.0.0" - xtend "^4.0.0" - -css-shorthand-properties@^1.0.0: - version "1.1.1" - resolved "https://registry.yarnpkg.com/css-shorthand-properties/-/css-shorthand-properties-1.1.1.tgz#1c808e63553c283f289f2dd56fcee8f3337bd935" - integrity sha512-Md+Juc7M3uOdbAFwOYlTrccIZ7oCFuzrhKYQjdeUEW/sE1hv17Jp/Bws+ReOPpGVBTYCBoYo+G17V5Qo8QQ75A== - -css-unit-converter@^1.0.0, css-unit-converter@^1.1.1: - version "1.1.2" - resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21" - integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA== - -css-url-regex@0.0.1: - version "0.0.1" - resolved "https://registry.yarnpkg.com/css-url-regex/-/css-url-regex-0.0.1.tgz#e05af8c6c290d451ef1632b455ea5c81b4b1395c" - integrity sha1-4Fr4xsKQ1FHvFjK0VepcgbSxOVw= - -cssesc@^0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4" - integrity sha1-yBSQPkViM3GgR3tAEJqq++6t27Q= - -cssesc@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" - integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg== - -cssnano@^3.10.0: - version "3.10.0" - resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38" - integrity sha1-Tzj2zqK5sX+gFJDyPx3GjqZcHDg= - dependencies: - autoprefixer "^6.3.1" - decamelize "^1.1.2" - defined "^1.0.0" - has "^1.0.1" - object-assign "^4.0.1" - postcss "^5.0.14" - postcss-calc "^5.2.0" - postcss-colormin "^2.1.8" - postcss-convert-values "^2.3.4" - postcss-discard-comments "^2.0.4" - postcss-discard-duplicates "^2.0.1" - postcss-discard-empty "^2.0.1" - postcss-discard-overridden "^0.1.1" - postcss-discard-unused "^2.2.1" - postcss-filter-plugins "^2.0.0" - postcss-merge-idents "^2.1.5" - postcss-merge-longhand "^2.0.1" - postcss-merge-rules "^2.0.3" - postcss-minify-font-values "^1.0.2" - postcss-minify-gradients "^1.0.1" - postcss-minify-params "^1.0.4" - postcss-minify-selectors "^2.0.4" - postcss-normalize-charset "^1.1.0" - postcss-normalize-url "^3.0.7" - postcss-ordered-values "^2.1.0" - postcss-reduce-idents "^2.2.2" - postcss-reduce-initial "^1.0.0" - postcss-reduce-transforms "^1.0.3" - postcss-svgo "^2.1.1" - postcss-unique-selectors "^2.0.2" - postcss-value-parser "^3.2.3" - postcss-zindex "^2.0.1" - -csso@~2.3.1: - version "2.3.2" - resolved "https://registry.yarnpkg.com/csso/-/csso-2.3.2.tgz#ddd52c587033f49e94b71fc55569f252e8ff5f85" - integrity sha1-3dUsWHAz9J6Utx/FVWnyUuj/X4U= - dependencies: - clap "^1.0.9" - source-map "^0.5.3" - -cssstats@^3.4.0: - version "3.5.0" - resolved "https://registry.yarnpkg.com/cssstats/-/cssstats-3.5.0.tgz#53c0ab66563b72f6c4fd2a31913fae69c72b6658" - integrity sha512-qMCnl95QRKJsaFPIqV8LCUSHtkXqG/uOPdhTCTXZnyKDCMjtZrjqA2IjUIt7iukvvItDTrK5ObNN7fZLfpknxA== - dependencies: - bytes "^3.1.0" - css-selector-tokenizer "^0.7.3" - css-shorthand-expand "^1.2.0" - gzip-size "^5.1.1" - has-class-selector "^3.5.0" - has-element-selector "^3.5.0" - has-id-selector "^3.5.0" - has-pseudo-class "^3.5.0" - has-pseudo-element "^3.5.0" - is-blank "^2.1.0" - is-css-shorthand "^1.0.1" - is-present "^1.0.0" - is-vendor-prefixed "^3.5.0" - lodash "^4.17.20" - postcss "^8.1.4" - postcss-safe-parser "^5.0.2" - specificity "^0.4.1" - -currently-unhandled@^0.4.1: - version "0.4.1" - resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea" - integrity sha1-mI3zP+qxke95mmE2nddsF635V+o= - dependencies: - array-find-index "^1.0.1" - -decamelize-keys@^1.0.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9" - integrity sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk= - dependencies: - decamelize "^1.1.0" - map-obj "^1.0.0" - -decamelize@^1.1.0, decamelize@^1.1.2: - version "1.2.0" - resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290" - integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA= - -dedent@^0.7.0: - version "0.7.0" - resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c" - integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw= - -defined@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693" - integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM= - -detect-newline@^1.0.3: - version "1.0.3" - resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-1.0.3.tgz#e97b1003877d70c09af1af35bfadff168de4920d" - integrity sha1-6XsQA4d9cMCa8a81v63/Fo3kkg0= - dependencies: - get-stdin "^4.0.1" - minimist "^1.1.0" - -duplexer2@~0.0.2: - version "0.0.2" - resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.0.2.tgz#c614dcf67e2fb14995a91711e5a617e8a60a31db" - integrity sha1-xhTc9n4vsUmVqRcR5aYX6KYKMds= - dependencies: - readable-stream "~1.1.9" - -duplexer3@^0.1.4: - version "0.1.4" - resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2" - integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI= - -duplexer@^0.1.1, duplexer@^0.1.2: - version "0.1.2" - resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6" - integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg== - -electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.47: - version "1.3.879" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.879.tgz#4aba9700cfb241fb95c6ed69e31785e3d1605a43" - integrity sha512-zJo+D9GwbJvM31IdFmwcGvychhk4KKbKYo2GWlsn+C/dxz2NwmbhGJjWwTfFSF2+eFH7VvfA8MCZ8SOqTrlnpw== - -encoding@^0.1.11: - version "0.1.13" - resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9" - integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A== - dependencies: - iconv-lite "^0.6.2" - -error-ex@^1.2.0, error-ex@^1.3.1: - version "1.3.2" - resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf" - integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g== - dependencies: - is-arrayish "^0.2.1" - -escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.3, escape-string-regexp@^1.0.5: - version "1.0.5" - resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" - integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ= - -esprima@^2.6.0: - version "2.7.3" - resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581" - integrity sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE= - -exec-sh@^0.2.0: - version "0.2.2" - resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.2.2.tgz#2a5e7ffcbd7d0ba2755bdecb16e5a427dfbdec36" - integrity sha512-FIUCJz1RbuS0FKTdaAafAByGS0CPvU3R0MeHxgtl+djzCc//F8HakL8GzmVNZanasTbTAY/3DRFA0KpVqj/eAw== - dependencies: - merge "^1.2.0" - -extend-options@0.0.1: - version "0.0.1" - resolved "https://registry.yarnpkg.com/extend-options/-/extend-options-0.0.1.tgz#e93c83312438c13565e64ec2b6ce86a9829dd17b" - integrity sha1-6TyDMSQ4wTVl5k7Cts6GqYKd0Xs= - -extend@^3.0.1: - version "3.0.2" - resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa" - integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g== - -fastparse@^1.1.1, fastparse@^1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9" - integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ== - -fetch-vcr@^1.1.0: - version "1.1.2" - resolved "https://registry.yarnpkg.com/fetch-vcr/-/fetch-vcr-1.1.2.tgz#8cfee49c45b464366b97fe550487dde15b948d21" - integrity sha512-bFOx3+5YtViximcqhG05tqMlsyPRXNOmiToDCf6TyVUCKHYP/vGPmn0HUhGVNd1jI0KpElwz+RH3X/ZQo0Asfg== - dependencies: - node-fetch "^1.6.3" - whatwg-fetch "^2.0.3" - -file-exists@^0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/file-exists/-/file-exists-0.1.1.tgz#993d3fffb5b49d11fefcc8f45c2355027440803c" - integrity sha1-mT0//7W0nRH+/Mj0XCNVAnRAgDw= - -file-exists@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/file-exists/-/file-exists-1.0.0.tgz#e6d269b56567b8922581398e990dd7078f72d616" - integrity sha1-5tJptWVnuJIlgTmOmQ3XB49y1hY= - -file-exists@^5.0.1: - version "5.0.1" - resolved "https://registry.yarnpkg.com/file-exists/-/file-exists-5.0.1.tgz#1dcd017f787fc7be7a09a6ef3e6a3550cea31198" - integrity sha512-TeBMgeKbdSsQtcY2XqKY/yTa4BciMD/Gw8YcND0XMDZt4CDj87l1Wl4x7K0ravZ80tZcyIGMD0hj2VSRPR8M8Q== - -find-up@^1.0.0: - version "1.1.2" - resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f" - integrity sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8= - dependencies: - path-exists "^2.0.0" - pinkie-promise "^2.0.0" - -find-up@^2.0.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7" - integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c= - dependencies: - locate-path "^2.0.0" - -findup@^0.1.5: - version "0.1.5" - resolved "https://registry.yarnpkg.com/findup/-/findup-0.1.5.tgz#8ad929a3393bac627957a7e5de4623b06b0e2ceb" - integrity sha1-itkpozk7rGJ5V6fl3kYjsGsOLOs= - dependencies: - colors "~0.6.0-1" - commander "~2.1.0" - -flatten@^1.0.2: - version "1.0.3" - resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b" - integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg== - -function-bind@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" - integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A== - -gather-stream@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/gather-stream/-/gather-stream-1.0.0.tgz#b33994af457a8115700d410f317733cbe7a0904b" - integrity sha1-szmUr0V6gRVwDUEPMXczy+egkEs= - -get-css-classes@1.1.0, get-css-classes@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/get-css-classes/-/get-css-classes-1.1.0.tgz#5b44ea8a192cece7567c04574633a92aa44917b3" - integrity sha1-W0Tqihks7OdWfARXRjOpKqRJF7M= - dependencies: - css-selector-tokenizer "^0.5.4" - lodash "^4.5.0" - -get-github-user@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/get-github-user/-/get-github-user-1.1.0.tgz#0bd4d9552bd6ace51d3aa4495b5d0be313a0bceb" - integrity sha512-vqpEnWS1bbCA0AiND1NfpS3SfzL9WRZr3NmtImUsSKAFDQaFaUnbiuwdi1WAgi5ZWcuEmjlzcIlVd0CSuiG/KQ== - dependencies: - acorn "^6.0.4" - bluebird "^3.1.1" - ghauth "^3.2.0" - is-array "^1.0.1" - meow "^3.6.0" - octokat "^0.10.0" - -get-stdin@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe" - integrity sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4= - -get-stream@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14" - integrity sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ= - -gh-got@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/gh-got/-/gh-got-3.0.0.tgz#b0f9d1b1be08a1f862f299b03809b4848c19dfd5" - integrity sha1-sPnRsb4Iofhi8pmwOAm0hIwZ39U= - dependencies: - got "^6.2.0" - -ghauth@^3.2.0: - version "3.2.1" - resolved "https://registry.yarnpkg.com/ghauth/-/ghauth-3.2.1.tgz#45d7556437164ad8b4b037c02c627fd55019e31a" - integrity sha1-RddVZDcWSti0sDfALGJ/1VAZ4xo= - dependencies: - application-config "~1.0.0" - bl "~1.1.2" - hyperquest "~2.0.0" - mkdirp "~0.5.1" - read "~1.0.7" - xtend "~4.0.1" - -github-repositories@^3.0.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/github-repositories/-/github-repositories-3.1.0.tgz#f6205b1b5d552aa7fabaab2826b98a2238ff0d7b" - integrity sha512-KTyFo+Lyvkiogl8qO26rxA3tBWWjdzd9yTFkVADPbdWrDdyTStro5GfgZBjstkG2Tvp2P1b8Z85JNtZ8N9TL7g== - dependencies: - chalk "^1.0.0" - gh-got "^3.0.0" - is-github-user-or-org "^1.0.0" - meow "^3.3.0" - -glob@^5.0.14: - version "5.0.15" - resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1" - integrity sha1-G8k2ueAvSmA/zCIuz3Yz0wuLk7E= - dependencies: - inflight "^1.0.4" - inherits "2" - minimatch "2 || 3" - once "^1.3.0" - path-is-absolute "^1.0.0" - -got@^6.2.0: - version "6.7.1" - resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0" - integrity sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA= - dependencies: - create-error-class "^3.0.0" - duplexer3 "^0.1.4" - get-stream "^3.0.0" - is-redirect "^1.0.0" - is-retry-allowed "^1.0.0" - is-stream "^1.0.0" - lowercase-keys "^1.0.0" - safe-buffer "^5.0.1" - timed-out "^4.0.0" - unzip-response "^2.0.1" - url-parse-lax "^1.0.0" - -graceful-fs@^4.1.2: - version "4.2.8" - resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a" - integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg== - -gzip-size@^5.1.1: - version "5.1.1" - resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274" - integrity sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA== - dependencies: - duplexer "^0.1.1" - pify "^4.0.1" - -gzip-size@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-7.0.0.tgz#9f9644251f15bc78460fccef4055ae5a5562ac60" - integrity sha512-O1Ld7Dr+nqPnmGpdhzLmMTQ4vAsD+rHwMm1NLUmoUFFymBOMKxCCrtDxqdBRYXdeEPEi3SyoR4TizJLQrnKBNA== - dependencies: - duplexer "^0.1.2" - -has-ansi@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91" - integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE= - dependencies: - ansi-regex "^2.0.0" - -has-class-selector@1.0.0, has-class-selector@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/has-class-selector/-/has-class-selector-1.0.0.tgz#a7bf51becdc2d77dff2509203ed69f34450e0c2d" - integrity sha1-p79Rvs3C133/JQkgPtafNEUODC0= - -has-class-selector@^3.5.0: - version "3.5.0" - resolved "https://registry.yarnpkg.com/has-class-selector/-/has-class-selector-3.5.0.tgz#10a7c7fc064e3accca5258230ec518b7f885af0e" - integrity sha512-LwqCUH7UOMvMSd59kJPi2mOkjy3G9tH7gGzvFWPSS8iWx/G1tB0cxaVE+60aIxS167U/AMJdLJoywVnSPYLVTQ== - -has-element-selector@^3.5.0: - version "3.5.0" - resolved "https://registry.yarnpkg.com/has-element-selector/-/has-element-selector-3.5.0.tgz#fb8b624c025baefbf44f3c9ead37be97b6d38eae" - integrity sha512-9pQD/ierNOtMTYWS2BFUhE0t4jJvbOQj2fdgdIL7Onsl24H1lPb593KB/oQSdN5/IUUS8dK62QFdwkLQZJKVow== - dependencies: - css-selector-tokenizer "^0.7.3" - -has-flag@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa" - integrity sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo= - -has-flag@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" - integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0= - -has-id-selector@^3.5.0: - version "3.5.0" - resolved "https://registry.yarnpkg.com/has-id-selector/-/has-id-selector-3.5.0.tgz#308ae4e93eff0b94a5c3dd115d3a93df11719df5" - integrity sha512-J7GcjNIB0k0Qt5OtB97ayopnbx5CNkCX+TdB6VjyFVrNO2/CVYbQtHKxH0fmNX1DZmF0pYD6t7NuTurd3eaUpw== - -has-pseudo-class@^3.5.0: - version "3.5.0" - resolved "https://registry.yarnpkg.com/has-pseudo-class/-/has-pseudo-class-3.5.0.tgz#21f0cd6f45a465461a45323c56363780c5316452" - integrity sha512-QEXBW/4F/z6s7/UWA8d1s0bl8GvITIZZulzrvVKBQoJ88h3Wb3mhUL7hWGAMnWZaUPBVOUzmWofYyxTC5GhoDg== - dependencies: - pseudo-classes "1.0.0" - -has-pseudo-element@^3.5.0: - version "3.5.0" - resolved "https://registry.yarnpkg.com/has-pseudo-element/-/has-pseudo-element-3.5.0.tgz#9d493726e4ed8e38b32f64df82dfa60e8127490f" - integrity sha512-dCdKsjtIIE+rn1H82fBCX7uJqFU0FTwB1LjSumhMLbVx1eeRjKHlXh4ddv0Ep3NQ0OoFX+kDJRKSDdQo9W4Mcw== - dependencies: - pseudo-elements "1.1.0" - -has@^1.0.1, has@^1.0.3: - version "1.0.3" - resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796" - integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw== - dependencies: - function-bind "^1.1.1" - -hex-color-regex@^1.0.1: - version "1.1.0" - resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e" - integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ== - -hosted-git-info@^2.1.4: - version "2.8.9" - resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9" - integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw== - -hsl-regex@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e" - integrity sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4= - -hsla-regex@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38" - integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg= - -html-comment-regex@^1.1.0: - version "1.1.2" - resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7" - integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ== - -hyperquest@~2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/hyperquest/-/hyperquest-2.0.0.tgz#3d1a0c5d83295bcde5c75a978ddaae4096f83c02" - integrity sha1-PRoMXYMpW83lx1qXjdquQJb4PAI= - dependencies: - duplexer2 "~0.0.2" - through2 "~0.6.3" - -iconv-lite@^0.6.2: - version "0.6.3" - resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501" - integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw== - dependencies: - safer-buffer ">= 2.1.2 < 3.0.0" - -immutable-css-cli@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/immutable-css-cli/-/immutable-css-cli-1.1.1.tgz#40d1c03cdf49b6b5aa767005e5251dc5bf782bdb" - integrity sha1-QNHAPN9JtrWqdnAF5SUdxb94K9s= - dependencies: - chalk "^1.1.1" - file-exists "^1.0.0" - immutable-css "^1.1.1" - is-blank "^1.1.0" - is-css "^1.0.0" - meow "^3.7.0" - postcss "^5.0.14" - postcss-import "^7.1.3" - -immutable-css@^1.1.1, immutable-css@^1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/immutable-css/-/immutable-css-1.1.2.tgz#4415166322a93d500facf268a1c7f9070ff4618a" - integrity sha1-RBUWYyKpPVAPrPJoocf5Bw/0YYo= - dependencies: - extend-options "0.0.1" - file-exists "^0.1.1" - get-css-classes "1.1.0" - glob "^5.0.14" - has-class-selector "1.0.0" - is-css "^1.0.0" - meow "^3.3.0" - postcss "^5.0.10" - specificity "^0.1.4" - -indent-string@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80" - integrity sha1-ji1INIdCEhtKghi3oTfppSBJ3IA= - dependencies: - repeating "^2.0.0" - -indent-string@^3.0.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289" - integrity sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok= - -indexes-of@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607" - integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc= - -inflight@^1.0.4: - version "1.0.6" - resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9" - integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk= - dependencies: - once "^1.3.0" - wrappy "1" - -inherits@2, inherits@~2.0.1: - version "2.0.4" - resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c" - integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== - -is-absolute-url@^2.0.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6" - integrity sha1-UFMN+4T8yap9vnhS6Do3uTufKqY= - -is-array@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/is-array/-/is-array-1.0.1.tgz#e9850cc2cc860c3bc0977e84ccf0dd464584279a" - integrity sha1-6YUMwsyGDDvAl36EzPDdRkWEJ5o= - -is-arrayish@^0.2.1: - version "0.2.1" - resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d" - integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0= - -is-blank@1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/is-blank/-/is-blank-1.0.0.tgz#60e39beb41f92c3b27acbb5029cb0f29f983ee67" - integrity sha1-YOOb60H5LDsnrLtQKcsPKfmD7mc= - dependencies: - is-empty "0.0.1" - is-whitespace "^0.3.0" - -is-blank@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/is-blank/-/is-blank-1.1.0.tgz#9274ddbd46363cb767075c385d4ab88c6a64dc17" - integrity sha1-knTdvUY2PLdnB1w4XUq4jGpk3Bc= - dependencies: - is-empty "0.0.1" - is-whitespace "^0.3.0" - -is-blank@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/is-blank/-/is-blank-2.1.0.tgz#69a73d3c0d4f417dfffb207a2795c0f0e576de04" - integrity sha1-aac9PA1PQX3/+yB6J5XA8OV23gQ= - dependencies: - is-empty latest - is-whitespace latest - -is-core-module@^2.2.0: - version "2.8.0" - resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.0.tgz#0321336c3d0925e497fd97f5d95cb114a5ccd548" - integrity sha512-vd15qHsaqrRL7dtH6QNuy0ndJmRDrS9HAM1CAiSifNUFv4x1a0CCVsj18hJ1mShxIG6T2i1sO78MkP56r0nYRw== - dependencies: - has "^1.0.3" - -is-css-shorthand@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/is-css-shorthand/-/is-css-shorthand-1.0.1.tgz#30f95d03210605fedfdd128e53dac4a4437a933c" - integrity sha1-MPldAyEGBf7f3RKOU9rEpEN6kzw= - dependencies: - css-shorthand-properties "^1.0.0" - -is-css@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/is-css/-/is-css-1.0.0.tgz#9c4ee1110691e0a7df9e5e6aa7816bae3d526d38" - integrity sha1-nE7hEQaR4Kffnl5qp4Frrj1SbTg= - -is-empty@0.0.1: - version "0.0.1" - resolved "https://registry.yarnpkg.com/is-empty/-/is-empty-0.0.1.tgz#09fdc3d649dda5969156c0853a9b76bd781c5a33" - integrity sha1-Cf3D1kndpZaRVsCFOpt2vXgcWjM= - -is-empty@latest: - version "1.2.0" - resolved "https://registry.yarnpkg.com/is-empty/-/is-empty-1.2.0.tgz#de9bb5b278738a05a0b09a57e1fb4d4a341a9f6b" - integrity sha1-3pu1snhzigWgsJpX4ftNSjQan2s= - -is-finite@^1.0.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.1.0.tgz#904135c77fb42c0641d6aa1bcdbc4daa8da082f3" - integrity sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w== - -is-github-user-or-org@^1.0.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/is-github-user-or-org/-/is-github-user-or-org-1.2.0.tgz#2d59c08159235f52b9844c09e92c69c72078e8c7" - integrity sha512-NAVgQRRkNasb2MPDoiCKKRFZNS3s05GY2R+5mvwHwHjliyj18NQYKFXqc5BZlk1KnwReo0xTiH9WYkpvikA/Pw== - dependencies: - get-github-user "^1.1.0" - ghauth "^3.2.0" - meow "^3.6.0" - pify "^2.3.0" - -is-plain-obj@^1.0.0, is-plain-obj@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e" - integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4= - -is-present@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/is-present/-/is-present-1.0.0.tgz#29c9b8e8e6e786a594c292fc7239aa24be70b80c" - integrity sha1-Kcm46ObnhqWUwpL8cjmqJL5wuAw= - dependencies: - is-blank "1.0.0" - -is-redirect@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24" - integrity sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ= - -is-retry-allowed@^1.0.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz#d778488bd0a4666a3be8a1482b9f2baafedea8b4" - integrity sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg== - -is-stream@^1.0.0, is-stream@^1.0.1: - version "1.1.0" - resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44" - integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ= - -is-svg@^2.0.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.1.0.tgz#cf61090da0d9efbcab8722deba6f032208dbb0e9" - integrity sha1-z2EJDaDZ77yrhyLeum8DIgjbsOk= - dependencies: - html-comment-regex "^1.1.0" - -is-utf8@^0.2.0: - version "0.2.1" - resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72" - integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI= - -is-vendor-prefixed@^3.5.0: - version "3.5.0" - resolved "https://registry.yarnpkg.com/is-vendor-prefixed/-/is-vendor-prefixed-3.5.0.tgz#11c823e3abc9f3a7857bebbe8bb6e8fb26c0b35b" - integrity sha512-GR7WA90X9bIOxv0NiYGQZXDubruQOcDjvRXyU76uHpjwUo6kJMmai0ivJrwg5Fxxbq78OpnuMbaMkIVbAc2NBA== - dependencies: - vendor-prefixes "1.0.0" - -is-whitespace@^0.3.0, is-whitespace@latest: - version "0.3.0" - resolved "https://registry.yarnpkg.com/is-whitespace/-/is-whitespace-0.3.0.tgz#1639ecb1be036aec69a54cbb401cfbed7114ab7f" - integrity sha1-Fjnssb4DauxppUy7QBz77XEUq38= - -isarray@0.0.1: - version "0.0.1" - resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf" - integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8= - -isarray@~1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11" - integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE= - -js-base64@^2.1.9: - version "2.6.4" - resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4" - integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ== - -js-yaml@~3.7.0: - version "3.7.0" - resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80" - integrity sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A= - dependencies: - argparse "^1.0.7" - esprima "^2.6.0" - -json-parse-better-errors@^1.0.1: - version "1.0.2" - resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9" - integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw== - -load-json-file@^1.0.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0" - integrity sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA= - dependencies: - graceful-fs "^4.1.2" - parse-json "^2.2.0" - pify "^2.0.0" - pinkie-promise "^2.0.0" - strip-bom "^2.0.0" - -load-json-file@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b" - integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs= - dependencies: - graceful-fs "^4.1.2" - parse-json "^4.0.0" - pify "^3.0.0" - strip-bom "^3.0.0" - -locate-path@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e" - integrity sha1-K1aLJl7slExtnA3pw9u7ygNUzY4= - dependencies: - p-locate "^2.0.0" - path-exists "^3.0.0" - -lodash.memoize@^4.1.2: - version "4.1.2" - resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" - integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4= - -lodash.uniq@^4.5.0: - version "4.5.0" - resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" - integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M= - -lodash@^2.4.1: - version "2.4.2" - resolved "https://registry.yarnpkg.com/lodash/-/lodash-2.4.2.tgz#fadd834b9683073da179b3eae6d9c0d15053f73e" - integrity sha1-+t2DS5aDBz2hebPq5tnA0VBT9z4= - -lodash@^4.16.4, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.5.0: - version "4.17.21" - resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" - integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== - -loud-rejection@^1.0.0: - version "1.6.0" - resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f" - integrity sha1-W0b4AUft7leIcPCG0Eghz5mOVR8= - dependencies: - currently-unhandled "^0.4.1" - signal-exit "^3.0.0" - -lowercase-keys@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f" - integrity sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA== - -map-obj@^1.0.0, map-obj@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d" - integrity sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0= - -map-obj@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-2.0.0.tgz#a65cd29087a92598b8791257a523e021222ac1f9" - integrity sha1-plzSkIepJZi4eRJXpSPgISIqwfk= - -math-expression-evaluator@^1.2.14: - version "1.3.8" - resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.3.8.tgz#320da3b2bc1512f4f50fc3020b2b1cd5c8e9d577" - integrity sha512-9FbRY3i6U+CbHgrdNbAUaisjWTozkm1ZfupYQJiZ87NtYHk2Zh9DvxMgp/fifxVhqTLpd5fCCLossUbpZxGeKw== - -meow@^3.3.0, meow@^3.6.0, meow@^3.7.0: - version "3.7.0" - resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb" - integrity sha1-cstmi0JSKCkKu/qFaJJYcwioAfs= - dependencies: - camelcase-keys "^2.0.0" - decamelize "^1.1.2" - loud-rejection "^1.0.0" - map-obj "^1.0.1" - minimist "^1.1.3" - normalize-package-data "^2.3.4" - object-assign "^4.0.1" - read-pkg-up "^1.0.1" - redent "^1.0.0" - trim-newlines "^1.0.0" - -meow@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/meow/-/meow-5.0.0.tgz#dfc73d63a9afc714a5e371760eb5c88b91078aa4" - integrity sha512-CbTqYU17ABaLefO8vCU153ZZlprKYWDljcndKKDCFcYQITzWCXZAVk4QMFZPgvzrnUQ3uItnIE/LoUOwrT15Ig== - dependencies: - camelcase-keys "^4.0.0" - decamelize-keys "^1.0.0" - loud-rejection "^1.0.0" - minimist-options "^3.0.1" - normalize-package-data "^2.3.4" - read-pkg-up "^3.0.0" - redent "^2.0.0" - trim-newlines "^2.0.0" - yargs-parser "^10.0.0" - -merge@^1.2.0: - version "1.2.1" - resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.1.tgz#38bebf80c3220a8a487b6fcfb3941bb11720c145" - integrity sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ== - -"minimatch@2 || 3": - version "3.0.4" - resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083" - integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA== - dependencies: - brace-expansion "^1.1.7" - -minimist-options@^3.0.1: - version "3.0.2" - resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-3.0.2.tgz#fba4c8191339e13ecf4d61beb03f070103f3d954" - integrity sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ== - dependencies: - arrify "^1.0.1" - is-plain-obj "^1.1.0" - -minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5: - version "1.2.5" - resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" - integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw== - -mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1: - version "0.5.5" - resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def" - integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ== - dependencies: - minimist "^1.2.5" - -mute-stream@~0.0.4: - version "0.0.8" - resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d" - integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA== - -nanoid@^3.1.30: - version "3.1.30" - resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362" - integrity sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ== - -node-fetch@^1.6.3: - version "1.7.3" - resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef" - integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ== - dependencies: - encoding "^0.1.11" - is-stream "^1.0.1" - -node-fetch@^2.0.0: - version "2.6.5" - resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.5.tgz#42735537d7f080a7e5f78b6c549b7146be1742fd" - integrity sha512-mmlIVHJEu5rnIxgEgez6b9GgWXbkZj5YZ7fx+2r94a2E+Uirsp6HsPTPlomfdHtpt/B0cdKviwkoaM6pyvUOpQ== - dependencies: - whatwg-url "^5.0.0" - -normalize-package-data@^2.3.2, normalize-package-data@^2.3.4: - version "2.5.0" - resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8" - integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA== - dependencies: - hosted-git-info "^2.1.4" - resolve "^1.10.0" - semver "2 || 3 || 4 || 5" - validate-npm-package-license "^3.0.1" - -normalize-range@^0.1.2: - version "0.1.2" - resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942" - integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI= - -normalize-url@^1.4.0, normalize-url@^1.4.1: - version "1.9.1" - resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c" - integrity sha1-LMDWazHqIwNkWENuNiDYWVTGbDw= - dependencies: - object-assign "^4.0.1" - prepend-http "^1.0.0" - query-string "^4.1.0" - sort-keys "^1.0.0" - -normalize.css@^8.0.1: - version "8.0.1" - resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3" - integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg== - -num2fraction@^1.2.2: - version "1.2.2" - resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede" - integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4= - -object-assign@^4.0.1, object-assign@^4.1.0: - version "4.1.1" - resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" - integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM= - -octokat@^0.10.0: - version "0.10.0" - resolved "https://registry.yarnpkg.com/octokat/-/octokat-0.10.0.tgz#a56846178199f36ddfc8979c9749ffea65736508" - integrity sha512-VJ21L1gMlByYMurduLYiOcI8AwlZkUV8OXRN8pMXsbkIqIVqn0tgdTfxzWM9spX4VJTTG02OgqwDTqQsOmDing== - dependencies: - fetch-vcr "^1.1.0" - lodash "^4.16.4" - node-fetch "^2.0.0" - -once@^1.3.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1" - integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E= - dependencies: - wrappy "1" - -p-limit@^1.1.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8" - integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q== - dependencies: - p-try "^1.0.0" - -p-locate@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43" - integrity sha1-IKAQOyIqcMj9OcwuWAaA893l7EM= - dependencies: - p-limit "^1.1.0" - -p-try@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3" - integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M= - -parse-author@^0.2.1: - version "0.2.2" - resolved "https://registry.yarnpkg.com/parse-author/-/parse-author-0.2.2.tgz#302d1b8e4c66519d1c45dd95103d3328c4498efd" - integrity sha1-MC0bjkxmUZ0cRd2VED0zKMRJjv0= - dependencies: - author-regex "^0.2.1" - -parse-json@^2.2.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9" - integrity sha1-9ID0BDTvgHQfhGkJn43qGPVaTck= - dependencies: - error-ex "^1.2.0" - -parse-json@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0" - integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA= - dependencies: - error-ex "^1.3.1" - json-parse-better-errors "^1.0.1" - -path-exists@^2.0.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b" - integrity sha1-D+tsZPD8UY2adU3V77YscCJ2H0s= - dependencies: - pinkie-promise "^2.0.0" - -path-exists@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515" - integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU= - -path-is-absolute@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f" - integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18= - -path-parse@^1.0.6: - version "1.0.7" - resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" - integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== - -path-type@^1.0.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441" - integrity sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE= - dependencies: - graceful-fs "^4.1.2" - pify "^2.0.0" - pinkie-promise "^2.0.0" - -path-type@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f" - integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg== - dependencies: - pify "^3.0.0" - -perfectionist@^2.4.0: - version "2.4.0" - resolved "https://registry.yarnpkg.com/perfectionist/-/perfectionist-2.4.0.tgz#c147ad3714e126467f1764129ee72df861d47ea0" - integrity sha1-wUetNxThJkZ/F2QSnuct+GHUfqA= - dependencies: - comment-regex "^1.0.0" - defined "^1.0.0" - minimist "^1.2.0" - postcss "^5.0.8" - postcss-scss "^0.3.0" - postcss-value-parser "^3.3.0" - read-file-stdin "^0.2.0" - string.prototype.repeat "^0.2.0" - vendors "^1.0.0" - write-file-stdout "0.0.2" - -picocolors@^0.2.1: - version "0.2.1" - resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f" - integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA== - -picocolors@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" - integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== - -pify@^2.0.0, pify@^2.3.0: - version "2.3.0" - resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c" - integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw= - -pify@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176" - integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY= - -pify@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231" - integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g== - -pinkie-promise@^2.0.0, pinkie-promise@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa" - integrity sha1-ITXW36ejWMBprJsXh3YogihFD/o= - dependencies: - pinkie "^2.0.0" - -pinkie@^2.0.0: - version "2.0.4" - resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870" - integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA= - -postcss-calc@^5.2.0: - version "5.3.1" - resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e" - integrity sha1-d7rnypKK2FcW4v2kLyYb98HWW14= - dependencies: - postcss "^5.0.2" - postcss-message-helpers "^2.0.0" - reduce-css-calc "^1.2.6" - -postcss-calc@^6.0.1: - version "6.0.2" - resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-6.0.2.tgz#4d9a43e27dbbf27d095fecb021ac6896e2318337" - integrity sha512-fiznXjEN5T42Qm7qqMCVJXS3roaj9r4xsSi+meaBVe7CJBl8t/QLOXu02Z2E6oWAMWIvCuF6JrvzFekmVEbOKA== - dependencies: - css-unit-converter "^1.1.1" - postcss "^7.0.2" - postcss-selector-parser "^2.2.2" - reduce-css-calc "^2.0.0" - -postcss-class-repeat@^0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/postcss-class-repeat/-/postcss-class-repeat-0.1.1.tgz#09fb9730399cc8612a38346cbb02b99b5b50b596" - integrity sha512-0+G/JGaxsJP+a1+epFQ/XCCe9fnpr04Iq0LVp0/9DEZPcP66a/nIECgFDjwNLSOYiDnEv8p4SoWGiMqkzFd5uA== - dependencies: - class-repeat "^1.0.2" - has-class-selector "^1.0.0" - is-present "^1.0.0" - postcss "^5.0.19" - -postcss-colormin@^2.1.8: - version "2.2.2" - resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-2.2.2.tgz#6631417d5f0e909a3d7ec26b24c8a8d1e4f96e4b" - integrity sha1-ZjFBfV8OkJo9fsJrJMio0eT5bks= - dependencies: - colormin "^1.0.5" - postcss "^5.0.13" - postcss-value-parser "^3.2.3" - -postcss-conditionals@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/postcss-conditionals/-/postcss-conditionals-2.1.0.tgz#4d1f62aa540458ce7ab779f71656901c8f8e929a" - integrity sha1-TR9iqlQEWM56t3n3FlaQHI+Okpo= - dependencies: - css-color-converter "^1.0.2" - css-unit-converter "^1.0.0" - postcss "^5.0.4" - -postcss-convert-values@^2.3.4: - version "2.6.1" - resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.6.1.tgz#bbd8593c5c1fd2e3d1c322bb925dcae8dae4d62d" - integrity sha1-u9hZPFwf0uPRwyK7kl3K6Nrk1i0= - dependencies: - postcss "^5.0.11" - postcss-value-parser "^3.1.2" - -postcss-css-variables@^0.8.0: - version "0.8.1" - resolved "https://registry.yarnpkg.com/postcss-css-variables/-/postcss-css-variables-0.8.1.tgz#a52e5ef1a2eb633a8a4f5fc434d6d85d40fe7310" - integrity sha1-pS5e8aLrYzqKT1/ENNbYXUD+cxA= - dependencies: - escape-string-regexp "^1.0.3" - extend "^3.0.1" - postcss "^6.0.8" - -postcss-custom-media@^6.0.0: - version "6.0.0" - resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-6.0.0.tgz#be532784110ecb295044fb5395a18006eb21a737" - integrity sha1-vlMnhBEOyylQRPtTlaGABushpzc= - dependencies: - postcss "^6.0.1" - -postcss-discard-comments@^2.0.4: - version "2.0.4" - resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d" - integrity sha1-vv6J+v1bPazlzM5Rt2uBUUvgDj0= - dependencies: - postcss "^5.0.14" - -postcss-discard-duplicates@^2.0.1: - version "2.1.0" - resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.1.0.tgz#b9abf27b88ac188158a5eb12abcae20263b91932" - integrity sha1-uavye4isGIFYpesSq8riAmO5GTI= - dependencies: - postcss "^5.0.4" - -postcss-discard-empty@^2.0.1: - version "2.1.0" - resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz#d2b4bd9d5ced5ebd8dcade7640c7d7cd7f4f92b5" - integrity sha1-0rS9nVztXr2Nyt52QMfXzX9PkrU= - dependencies: - postcss "^5.0.14" - -postcss-discard-overridden@^0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz#8b1eaf554f686fb288cd874c55667b0aa3668d58" - integrity sha1-ix6vVU9ob7KIzYdMVWZ7CqNmjVg= - dependencies: - postcss "^5.0.16" - -postcss-discard-unused@^2.2.1: - version "2.2.3" - resolved "https://registry.yarnpkg.com/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz#bce30b2cc591ffc634322b5fb3464b6d934f4433" - integrity sha1-vOMLLMWR/8Y0Mitfs0ZLbZNPRDM= - dependencies: - postcss "^5.0.14" - uniqs "^2.0.0" - -postcss-extend-rule@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/postcss-extend-rule/-/postcss-extend-rule-1.1.0.tgz#11e4d590ffe4253b853ef1fc03be7167da607d38" - integrity sha512-+NXtLOY49Xcx9173SJAYj41esTRTpihSLoKpj5yzoBki9PZK4HF37AH9AVyCeLFJL9fzhh0YFuk/3eyeZ9d/jw== - dependencies: - postcss "^6.0.11" - postcss-nesting "^4.2.1" - -postcss-filter-plugins@^2.0.0: - version "2.0.3" - resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.3.tgz#82245fdf82337041645e477114d8e593aa18b8ec" - integrity sha512-T53GVFsdinJhgwm7rg1BzbeBRomOg9y5MBVhGcsV0CxurUdVj1UlPdKtn7aqYA/c/QVkzKMjq2bSV5dKG5+AwQ== - dependencies: - postcss "^5.0.4" - -postcss-import@^11.1.0: - version "11.1.0" - resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-11.1.0.tgz#55c9362c9192994ec68865d224419df1db2981f0" - integrity sha512-5l327iI75POonjxkXgdRCUS+AlzAdBx4pOvMEhTKTCjb1p8IEeVR9yx3cPbmN7LIWJLbfnIXxAhoB4jpD0c/Cw== - dependencies: - postcss "^6.0.1" - postcss-value-parser "^3.2.3" - read-cache "^1.0.0" - resolve "^1.1.7" - -postcss-import@^7.1.3: - version "7.1.3" - resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-7.1.3.tgz#92d1021af2a60df4ddc0acf3aa7ff7726a4d6c90" - integrity sha1-ktECGvKmDfTdwKzzqn/3cmpNbJA= - dependencies: - glob "^5.0.14" - object-assign "^4.0.1" - postcss "^5.0.2" - postcss-message-helpers "^2.0.0" - resolve "^1.1.6" - -postcss-merge-idents@^2.1.5: - version "2.1.7" - resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270" - integrity sha1-TFUwMTwI4dWzu/PSu8dH4njuonA= - dependencies: - has "^1.0.1" - postcss "^5.0.10" - postcss-value-parser "^3.1.1" - -postcss-merge-longhand@^2.0.1: - version "2.0.2" - resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-2.0.2.tgz#23d90cd127b0a77994915332739034a1a4f3d658" - integrity sha1-I9kM0Sewp3mUkVMyc5A0oaTz1lg= - dependencies: - postcss "^5.0.4" - -postcss-merge-rules@^2.0.3: - version "2.1.2" - resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz#d1df5dfaa7b1acc3be553f0e9e10e87c61b5f721" - integrity sha1-0d9d+qexrMO+VT8OnhDofGG19yE= - dependencies: - browserslist "^1.5.2" - caniuse-api "^1.5.2" - postcss "^5.0.4" - postcss-selector-parser "^2.2.2" - vendors "^1.0.0" - -postcss-message-helpers@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz#a4f2f4fab6e4fe002f0aed000478cdf52f9ba60e" - integrity sha1-pPL0+rbk/gAvCu0ABHjN9S+bpg4= - -postcss-minify-font-values@^1.0.2: - version "1.0.5" - resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz#4b58edb56641eba7c8474ab3526cafd7bbdecb69" - integrity sha1-S1jttWZB66fIR0qzUmyv17vey2k= - dependencies: - object-assign "^4.0.1" - postcss "^5.0.4" - postcss-value-parser "^3.0.2" - -postcss-minify-gradients@^1.0.1: - version "1.0.5" - resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz#5dbda11373703f83cfb4a3ea3881d8d75ff5e6e1" - integrity sha1-Xb2hE3NwP4PPtKPqOIHY11/15uE= - dependencies: - postcss "^5.0.12" - postcss-value-parser "^3.3.0" - -postcss-minify-params@^1.0.4: - version "1.2.2" - resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz#ad2ce071373b943b3d930a3fa59a358c28d6f1f3" - integrity sha1-rSzgcTc7lDs9kwo/pZo1jCjW8fM= - dependencies: - alphanum-sort "^1.0.1" - postcss "^5.0.2" - postcss-value-parser "^3.0.2" - uniqs "^2.0.0" - -postcss-minify-selectors@^2.0.4: - version "2.1.1" - resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz#b2c6a98c0072cf91b932d1a496508114311735bf" - integrity sha1-ssapjAByz5G5MtGkllCBFDEXNb8= - dependencies: - alphanum-sort "^1.0.2" - has "^1.0.1" - postcss "^5.0.14" - postcss-selector-parser "^2.0.0" - -postcss-nesting@^4.2.1: - version "4.2.1" - resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-4.2.1.tgz#0483bce338b3f0828ced90ff530b29b98b00300d" - integrity sha512-IkyWXICwagCnlaviRexi7qOdwPw3+xVVjgFfGsxmztvRVaNxAlrypOIKqDE5mxY+BVxnId1rnUKBRQoNE2VDaA== - dependencies: - postcss "^6.0.11" - -postcss-normalize-charset@^1.1.0: - version "1.1.1" - resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1" - integrity sha1-757nEhLX/nWceO0WL2HtYrXLk/E= - dependencies: - postcss "^5.0.5" - -postcss-normalize-url@^3.0.7: - version "3.0.8" - resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz#108f74b3f2fcdaf891a2ffa3ea4592279fc78222" - integrity sha1-EI90s/L82viRov+j6kWSJ5/HgiI= - dependencies: - is-absolute-url "^2.0.0" - normalize-url "^1.4.0" - postcss "^5.0.14" - postcss-value-parser "^3.2.3" - -postcss-ordered-values@^2.1.0: - version "2.2.3" - resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.3.tgz#eec6c2a67b6c412a8db2042e77fe8da43f95c11d" - integrity sha1-7sbCpntsQSqNsgQud/6NpD+VwR0= - dependencies: - postcss "^5.0.4" - postcss-value-parser "^3.0.1" - -postcss-reduce-idents@^2.2.2: - version "2.4.0" - resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz#c2c6d20cc958284f6abfbe63f7609bf409059ad3" - integrity sha1-wsbSDMlYKE9qv75j92Cb9AkFmtM= - dependencies: - postcss "^5.0.4" - postcss-value-parser "^3.0.2" - -postcss-reduce-initial@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-1.0.1.tgz#68f80695f045d08263a879ad240df8dd64f644ea" - integrity sha1-aPgGlfBF0IJjqHmtJA343WT2ROo= - dependencies: - postcss "^5.0.4" - -postcss-reduce-transforms@^1.0.3: - version "1.0.4" - resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz#ff76f4d8212437b31c298a42d2e1444025771ae1" - integrity sha1-/3b02CEkN7McKYpC0uFEQCV3GuE= - dependencies: - has "^1.0.1" - postcss "^5.0.8" - postcss-value-parser "^3.0.1" - -postcss-rtl@^1.2.3: - version "1.7.3" - resolved "https://registry.yarnpkg.com/postcss-rtl/-/postcss-rtl-1.7.3.tgz#5019bf2826e90972fba8ad061c7f80d43c817bfb" - integrity sha512-PMwlrQSeZKChNJQGtWz9Xfk3rY1W7P5Jp4sFRXVufczQIH6vRhTNSc5gnEwKHaWrU8SMoZMi2VY7ihOmwVvW7g== - dependencies: - rtlcss "2.5.0" - -postcss-safe-parser@^5.0.2: - version "5.0.2" - resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-5.0.2.tgz#459dd27df6bc2ba64608824ba39e45dacf5e852d" - integrity sha512-jDUfCPJbKOABhwpUKcqCVbbXiloe/QXMcbJ6Iipf3sDIihEzTqRCeMBfRaOHxhBuTYqtASrI1KJWxzztZU4qUQ== - dependencies: - postcss "^8.1.0" - -postcss-scss@^0.3.0: - version "0.3.1" - resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-0.3.1.tgz#65c610d8e2a7ee0e62b1835b71b8870734816e4b" - integrity sha1-ZcYQ2OKn7g5isYNbcbiHBzSBbks= - dependencies: - postcss "^5.2.4" - -postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2: - version "2.2.3" - resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90" - integrity sha1-+UN3iGBsPJrO4W/+jYsWKX8nu5A= - dependencies: - flatten "^1.0.2" - indexes-of "^1.0.1" - uniq "^1.0.1" - -postcss-svgo@^2.1.1: - version "2.1.6" - resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.6.tgz#b6df18aa613b666e133f08adb5219c2684ac108d" - integrity sha1-tt8YqmE7Zm4TPwittSGcJoSsEI0= - dependencies: - is-svg "^2.0.0" - postcss "^5.0.14" - postcss-value-parser "^3.2.3" - svgo "^0.7.0" - -postcss-unique-selectors@^2.0.2: - version "2.0.2" - resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz#981d57d29ddcb33e7b1dfe1fd43b8649f933ca1d" - integrity sha1-mB1X0p3csz57Hf4f1DuGSfkzyh0= - dependencies: - alphanum-sort "^1.0.1" - postcss "^5.0.4" - uniqs "^2.0.0" - -postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0: - version "3.3.1" - resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281" - integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ== - -postcss-zindex@^2.0.1: - version "2.2.0" - resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-2.2.0.tgz#d2109ddc055b91af67fc4cb3b025946639d2af22" - integrity sha1-0hCd3AVbka9n/EyzsCWUZjnSryI= - dependencies: - has "^1.0.1" - postcss "^5.0.4" - uniqs "^2.0.0" - -postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.19, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.8, postcss@^5.2.16, postcss@^5.2.4: - version "5.2.18" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5" - integrity sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg== - dependencies: - chalk "^1.1.3" - js-base64 "^2.1.9" - source-map "^0.5.6" - supports-color "^3.2.3" - -postcss@^6.0.1, postcss@^6.0.11, postcss@^6.0.16, postcss@^6.0.19, postcss@^6.0.23, postcss@^6.0.8: - version "6.0.23" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324" - integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag== - dependencies: - chalk "^2.4.1" - source-map "^0.6.1" - supports-color "^5.4.0" - -postcss@^7.0.0, postcss@^7.0.2: - version "7.0.39" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309" - integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA== - dependencies: - picocolors "^0.2.1" - source-map "^0.6.1" - -postcss@^8.1.0, postcss@^8.1.4: - version "8.3.11" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.11.tgz#c3beca7ea811cd5e1c4a3ec6d2e7599ef1f8f858" - integrity sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA== - dependencies: - nanoid "^3.1.30" - picocolors "^1.0.0" - source-map-js "^0.6.2" - -prepend-http@^1.0.0, prepend-http@^1.0.1: - version "1.0.4" - resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" - integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= - -process-nextick-args@~1.0.6: - version "1.0.7" - resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3" - integrity sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M= - -pseudo-classes@1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/pseudo-classes/-/pseudo-classes-1.0.0.tgz#60a69b67395c36ff119c4d1c86e1981785206b96" - integrity sha1-YKabZzlcNv8RnE0chuGYF4Uga5Y= - -pseudo-elements@1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/pseudo-elements/-/pseudo-elements-1.1.0.tgz#9ba6dd8ac3ce1f3d7d36d4355aa3e28d08391f28" - integrity sha1-m6bdisPOHz19NtQ1WqPijQg5Hyg= - -q@^1.1.2: - version "1.5.1" - resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7" - integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc= - -query-string@^4.1.0: - version "4.3.4" - resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb" - integrity sha1-u7aTucqRXCMlFbIosaArYJBD2+s= - dependencies: - object-assign "^4.1.0" - strict-uri-encode "^1.0.0" - -quick-lru@^1.0.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8" - integrity sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g= - -read-cache@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774" - integrity sha1-5mTvMRYRZsl1HNvo28+GtftY93Q= - dependencies: - pify "^2.3.0" - -read-file-stdin@^0.2.0: - version "0.2.1" - resolved "https://registry.yarnpkg.com/read-file-stdin/-/read-file-stdin-0.2.1.tgz#25eccff3a153b6809afacb23ee15387db9e0ee61" - integrity sha1-JezP86FTtoCa+ssj7hU4fbng7mE= - dependencies: - gather-stream "^1.0.0" - -read-pkg-up@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02" - integrity sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI= - dependencies: - find-up "^1.0.0" - read-pkg "^1.0.0" - -read-pkg-up@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07" - integrity sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc= - dependencies: - find-up "^2.0.0" - read-pkg "^3.0.0" - -read-pkg@^1.0.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28" - integrity sha1-9f+qXs0pyzHAR0vKfXVra7KePyg= - dependencies: - load-json-file "^1.0.0" - normalize-package-data "^2.3.2" - path-type "^1.0.0" - -read-pkg@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389" - integrity sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k= - dependencies: - load-json-file "^4.0.0" - normalize-package-data "^2.3.2" - path-type "^3.0.0" - -read@~1.0.7: - version "1.0.7" - resolved "https://registry.yarnpkg.com/read/-/read-1.0.7.tgz#b3da19bd052431a97671d44a42634adf710b40c4" - integrity sha1-s9oZvQUkMal2cdRKQmNK33ELQMQ= - dependencies: - mute-stream "~0.0.4" - -"readable-stream@>=1.0.33-1 <1.1.0-0": - version "1.0.34" - resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c" - integrity sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw= - dependencies: - core-util-is "~1.0.0" - inherits "~2.0.1" - isarray "0.0.1" - string_decoder "~0.10.x" - -readable-stream@~1.1.9: - version "1.1.14" - resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9" - integrity sha1-fPTFTvZI44EwhMY23SB54WbAgdk= - dependencies: - core-util-is "~1.0.0" - inherits "~2.0.1" - isarray "0.0.1" - string_decoder "~0.10.x" - -readable-stream@~2.0.5: - version "2.0.6" - resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e" - integrity sha1-j5A0HmilPMySh4jaz80Rs265t44= - dependencies: - core-util-is "~1.0.0" - inherits "~2.0.1" - isarray "~1.0.0" - process-nextick-args "~1.0.6" - string_decoder "~0.10.x" - util-deprecate "~1.0.1" - -redent@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde" - integrity sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94= - dependencies: - indent-string "^2.1.0" - strip-indent "^1.0.1" - -redent@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/redent/-/redent-2.0.0.tgz#c1b2007b42d57eb1389079b3c8333639d5e1ccaa" - integrity sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo= - dependencies: - indent-string "^3.0.0" - strip-indent "^2.0.0" - -reduce-css-calc@^1.2.6: - version "1.3.0" - resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716" - integrity sha1-dHyRTgSWFKTJz7umKYca0dKSdxY= - dependencies: - balanced-match "^0.4.2" - math-expression-evaluator "^1.2.14" - reduce-function-call "^1.0.1" - -reduce-css-calc@^2.0.0: - version "2.1.8" - resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03" - integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg== - dependencies: - css-unit-converter "^1.1.1" - postcss-value-parser "^3.3.0" - -reduce-function-call@^1.0.1: - version "1.0.3" - resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.3.tgz#60350f7fb252c0a67eb10fd4694d16909971300f" - integrity sha512-Hl/tuV2VDgWgCSEeWMLwxLZqX7OK59eU1guxXsRKTAyeYimivsKdtcV4fu3r710tpG5GmDKDhQ0HSZLExnNmyQ== - dependencies: - balanced-match "^1.0.0" - -repeat-element@^1.1.0: - version "1.1.4" - resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.4.tgz#be681520847ab58c7568ac75fbfad28ed42d39e9" - integrity sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ== - -repeating@^2.0.0: - version "2.0.1" - resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda" - integrity sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo= - dependencies: - is-finite "^1.0.0" - -resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0: - version "1.20.0" - resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975" - integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A== - dependencies: - is-core-module "^2.2.0" - path-parse "^1.0.6" - -rgb-regex@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1" - integrity sha1-wODWiC3w4jviVKR16O3UGRX+rrE= - -rgba-regex@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3" - integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM= - -rtlcss@2.5.0: - version "2.5.0" - resolved "https://registry.yarnpkg.com/rtlcss/-/rtlcss-2.5.0.tgz#455549e49113f9e1cf83169a44de526c816de8a4" - integrity sha512-NCVdF45w70/3CQeqVvQ84bu2HN8agNn+CDjw+RxXaiWb7mPOmEvltdd1z4qzm9kin4Jnu9ShFBIx28yvWerZ2g== - dependencies: - chalk "^2.4.2" - findup "^0.1.5" - mkdirp "^0.5.1" - postcss "^6.0.23" - strip-json-comments "^2.0.0" - -safe-buffer@^5.0.1: - version "5.2.1" - resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6" - integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ== - -"safer-buffer@>= 2.1.2 < 3.0.0": - version "2.1.2" - resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" - integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== - -sax@~1.2.1: - version "1.2.4" - resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" - integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== - -"semver@2 || 3 || 4 || 5": - version "5.7.1" - resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7" - integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ== - -signal-exit@^3.0.0: - version "3.0.5" - resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.5.tgz#9e3e8cc0c75a99472b44321033a7702e7738252f" - integrity sha512-KWcOiKeQj6ZyXx7zq4YxSMgHRlod4czeBQZrPb8OKcohcqAXShm7E20kEMle9WBt26hFcAf0qLOcp5zmY7kOqQ== - -single-trailing-newline@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/single-trailing-newline/-/single-trailing-newline-1.0.0.tgz#81f0ad2ad645181945c80952a5c1414992ee9664" - integrity sha1-gfCtKtZFGBlFyAlSpcFBSZLulmQ= - dependencies: - detect-newline "^1.0.3" - -sort-keys@^1.0.0: - version "1.1.2" - resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad" - integrity sha1-RBttTTRnmPG05J6JIK37oOVD+a0= - dependencies: - is-plain-obj "^1.0.0" - -source-map-js@^0.6.2: - version "0.6.2" - resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e" - integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug== - -source-map@^0.5.3, source-map@^0.5.6: - version "0.5.7" - resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" - integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w= - -source-map@^0.6.1: - version "0.6.1" - resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" - integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== - -spdx-correct@^3.0.0: - version "3.1.1" - resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9" - integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w== - dependencies: - spdx-expression-parse "^3.0.0" - spdx-license-ids "^3.0.0" - -spdx-exceptions@^2.1.0: - version "2.3.0" - resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d" - integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A== - -spdx-expression-parse@^3.0.0: - version "3.0.1" - resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679" - integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q== - dependencies: - spdx-exceptions "^2.1.0" - spdx-license-ids "^3.0.0" - -spdx-license-ids@^3.0.0: - version "3.0.10" - resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.10.tgz#0d9becccde7003d6c658d487dd48a32f0bf3014b" - integrity sha512-oie3/+gKf7QtpitB0LYLETe+k8SifzsX4KixvpOsbI6S0kRiRQ5MKOio8eMSAKQ17N06+wdEOXRiId+zOxo0hA== - -specificity@^0.1.4: - version "0.1.6" - resolved "https://registry.yarnpkg.com/specificity/-/specificity-0.1.6.tgz#aa501048f96e69485ddc95ef9f7a5b77f01232aa" - integrity sha1-qlAQSPluaUhd3JXvn3pbd/ASMqo= - -specificity@^0.4.1: - version "0.4.1" - resolved "https://registry.yarnpkg.com/specificity/-/specificity-0.4.1.tgz#aab5e645012db08ba182e151165738d00887b019" - integrity sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg== - -sprintf-js@~1.0.2: - version "1.0.3" - resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c" - integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw= - -strict-uri-encode@^1.0.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713" - integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM= - -string.prototype.repeat@^0.2.0: - version "0.2.0" - resolved "https://registry.yarnpkg.com/string.prototype.repeat/-/string.prototype.repeat-0.2.0.tgz#aba36de08dcee6a5a337d49b2ea1da1b28fc0ecf" - integrity sha1-q6Nt4I3O5qWjN9SbLqHaGyj8Ds8= - -string_decoder@~0.10.x: - version "0.10.31" - resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94" - integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ= - -strip-ansi@^3.0.0: - version "3.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf" - integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8= - dependencies: - ansi-regex "^2.0.0" - -strip-bom@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e" - integrity sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4= - dependencies: - is-utf8 "^0.2.0" - -strip-bom@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3" - integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM= - -strip-indent@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2" - integrity sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI= - dependencies: - get-stdin "^4.0.1" - -strip-indent@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68" - integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g= - -strip-json-comments@^2.0.0: - version "2.0.1" - resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" - integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo= - -supports-color@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" - integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc= - -supports-color@^3.2.3: - version "3.2.3" - resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6" - integrity sha1-ZawFBLOVQXHYpklGsq48u4pfVPY= - dependencies: - has-flag "^1.0.0" - -supports-color@^5.3.0, supports-color@^5.4.0: - version "5.5.0" - resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" - integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== - dependencies: - has-flag "^3.0.0" - -svgo@^0.7.0: - version "0.7.2" - resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5" - integrity sha1-n1dyQTlSE1xv779Ar+ak+qiLS7U= - dependencies: - coa "~1.0.1" - colors "~1.1.2" - csso "~2.3.1" - js-yaml "~3.7.0" - mkdirp "~0.5.1" - sax "~1.2.1" - whet.extend "~0.9.9" - -tachyons-build-css@^1.8.1: - version "1.8.1" - resolved "https://registry.yarnpkg.com/tachyons-build-css/-/tachyons-build-css-1.8.1.tgz#2392ab48ddd0030f79b24a2834f04a65b713e762" - integrity sha512-UwoA8X/tvv7UiI3F6I/1lMu1YBnh3F+8vbfnGxZHeMWwY6GlIpz8P4my1LCAfQDpamWO3Y6p9xufjhUOROFydA== - dependencies: - autoprefixer "^8.1.0" - css-mqpacker "^6.0.2" - cssnano "^3.10.0" - perfectionist "^2.4.0" - postcss "^6.0.19" - postcss-calc "^6.0.1" - postcss-class-repeat "^0.1.1" - postcss-conditionals "^2.1.0" - postcss-css-variables "^0.8.0" - postcss-custom-media "^6.0.0" - postcss-discard-comments "^2.0.4" - postcss-extend-rule "^1.1.0" - postcss-import "^11.1.0" - postcss-rtl "^1.2.3" - -tachyons-cli@^1.3.3: - version "1.3.3" - resolved "https://registry.yarnpkg.com/tachyons-cli/-/tachyons-cli-1.3.3.tgz#616de915e6b3057e71e9891f9c8eb53efee661e4" - integrity sha512-U3P0HoKY9CXNwJGR9H9xPbr9Mc1qjVgCIkVmSwCNp+TcI9TVQCB0HMnIA1H/TdFLg42PLyezPEwvyebR3FngBQ== - dependencies: - authors-to-markdown "^0.1.0" - chalk "^2.4.2" - copy-files "^0.1.0" - css-mqpacker "^7.0.0" - cssstats "^3.4.0" - dedent "^0.7.0" - file-exists "^5.0.1" - immutable-css "^1.1.2" - is-blank "^2.1.0" - is-present "^1.0.0" - lodash "^4.17.15" - meow "^5.0.0" - mkdirp "^0.5.1" - single-trailing-newline "^1.0.0" - tachyons-build-css "^1.8.1" - -tachyons-modules@^1.1.10: - version "1.1.10" - resolved "https://registry.yarnpkg.com/tachyons-modules/-/tachyons-modules-1.1.10.tgz#2475da90c62f86dafd47b7c95d52496f7623e165" - integrity sha1-JHXakMYvhtr9R7fJXVJJb3Yj4WU= - dependencies: - github-repositories "^3.0.0" - is-present "^1.0.0" - pinkie-promise "^2.0.1" - -through2@~0.6.3: - version "0.6.5" - resolved "https://registry.yarnpkg.com/through2/-/through2-0.6.5.tgz#41ab9c67b29d57209071410e1d7a7a968cd3ad48" - integrity sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg= - dependencies: - readable-stream ">=1.0.33-1 <1.1.0-0" - xtend ">=4.0.0 <4.1.0-0" - -timed-out@^4.0.0: - version "4.0.1" - resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f" - integrity sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8= - -tr46@~0.0.3: - version "0.0.3" - resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a" - integrity sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o= - -trim-newlines@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613" - integrity sha1-WIeWa7WCpFA6QetST301ARgVphM= - -trim-newlines@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-2.0.0.tgz#b403d0b91be50c331dfc4b82eeceb22c3de16d20" - integrity sha1-tAPQuRvlDDMd/EuC7s6yLD3hbSA= - -uniq@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff" - integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8= - -uniqs@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02" - integrity sha1-/+3ks2slKQaW5uFl1KWe25mOawI= - -unzip-response@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97" - integrity sha1-0vD3N9FrBhXnKmk17QQhRXLVb5c= - -url-parse-lax@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-1.0.0.tgz#7af8f303645e9bd79a272e7a14ac68bc0609da73" - integrity sha1-evjzA2Rem9eaJy56FKxovAYJ2nM= - dependencies: - prepend-http "^1.0.1" - -util-deprecate@~1.0.1: - version "1.0.2" - resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" - integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8= - -validate-npm-package-license@^3.0.1: - version "3.0.4" - resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a" - integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew== - dependencies: - spdx-correct "^3.0.0" - spdx-expression-parse "^3.0.0" - -vendor-prefixes@1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/vendor-prefixes/-/vendor-prefixes-1.0.0.tgz#1c7b92ece46e2f1a06c5a907613f5d50045df531" - integrity sha1-HHuS7ORuLxoGxakHYT9dUARd9TE= - -vendors@^1.0.0: - version "1.0.4" - resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e" - integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w== - -watch@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/watch/-/watch-1.0.2.tgz#340a717bde765726fa0aa07d721e0147a551df0c" - integrity sha1-NApxe952Vyb6CqB9ch4BR6VR3ww= - dependencies: - exec-sh "^0.2.0" - minimist "^1.2.0" - -webidl-conversions@^3.0.0: - version "3.0.1" - resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871" - integrity sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE= - -whatwg-fetch@^2.0.3: - version "2.0.4" - resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f" - integrity sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng== - -whatwg-url@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d" - integrity sha1-lmRU6HZUYuN2RNNib2dCzotwll0= - dependencies: - tr46 "~0.0.3" - webidl-conversions "^3.0.0" - -whet.extend@~0.9.9: - version "0.9.9" - resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1" - integrity sha1-+HfVv2SMl+WqVC+twW1qJZucEaE= - -wrappy@1: - version "1.0.2" - resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" - integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8= - -write-file-stdout@0.0.2: - version "0.0.2" - resolved "https://registry.yarnpkg.com/write-file-stdout/-/write-file-stdout-0.0.2.tgz#c252d7c7c5b1b402897630e3453c7bfe690d9ca1" - integrity sha1-wlLXx8WxtAKJdjDjRTx7/mkNnKE= - -"xtend@>=4.0.0 <4.1.0-0", xtend@^4.0.0, xtend@~4.0.1: - version "4.0.2" - resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54" - integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ== - -yargs-parser@^10.0.0: - version "10.1.0" - resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-10.1.0.tgz#7202265b89f7e9e9f2e5765e0fe735a905edbaa8" - integrity sha512-VCIyR1wJoEBZUqk5PA+oOBF6ypbwh5aNB3I50guxAL/quggdfs4TtNHQrSazFA3fYZ+tEqfs0zIGlv0c/rgjbQ== - dependencies: - camelcase "^4.1.0"