From 2ab786cc405650dece4ee7be194b6ef5db03aee8 Mon Sep 17 00:00:00 2001 From: subhadipbhowmik Date: Thu, 26 Sep 2024 20:12:56 +0530 Subject: [PATCH] Basic Structure Created with Components --- clipcss/_breakpoints.scss | 104 +- clipcss/_grid.scss | 142 +- clipcss/_variables.scss | 4 +- clipcss/components/_card.scss | 25 +- clipcss/components/_navbar.scss | 30 + clipcss/index.scss | 1 + css/index.css | 4766 ++----------------------------- gulpfile.js | 7 +- index.html | 18 +- package-lock.json | 514 ++++ package.json | 1 + sass/index.scss | 1 + site.html | 95 + 13 files changed, 1111 insertions(+), 4597 deletions(-) create mode 100644 clipcss/components/_navbar.scss create mode 100644 sass/index.scss create mode 100644 site.html diff --git a/clipcss/_breakpoints.scss b/clipcss/_breakpoints.scss index 556e99f..08dffa0 100644 --- a/clipcss/_breakpoints.scss +++ b/clipcss/_breakpoints.scss @@ -1,46 +1,82 @@ $breakpoints: ( - "xs": 0, - "sm": 480px, - "md": 720px, - "lg": 960px, - "xl": 1200px, - "xxl": 1400px + "xs": 0, + "sm": 480px, + "md": 720px, + "lg": 960px, + "xl": 1200px, + "xxl": 1400px ); -// A more general mixin for breakpoints -@mixin breakpoint($size) { - @media (min-width: map-get($breakpoints, $size)) { - @content; - } +@mixin xs(){ + @media (min-width: map-get($breakpoints, "xs")) { + @content; + } } -// Handling specific breakpoints -.responsive-text { - // Default (for xs, or smallest screens) - color: red; +@mixin sm(){ + @media (min-width: map-get($breakpoints, "sm")) { + @content; + } +} + +@mixin md(){ + @media (min-width: map-get($breakpoints, "md")) { + @content; + } +} + +@mixin lg(){ + @media (min-width: map-get($breakpoints, "lg")) { + @content; + } +} + +@mixin xl(){ + @media (min-width: map-get($breakpoints, "xl")) { + @content; + } +} - @include breakpoint("sm") { - color: blue; - } +@mixin xxl(){ + @media (min-width: map-get($breakpoints, "xxl")) { + @content; + } +} + + +@mixin breakpoint($bp: 0){ + @media (min-width: $bp) { + @content; + } +} - @include breakpoint("md") { - color: green; - } +.responsive-text{ + @include xs(){ + color: red; + } - @include breakpoint("lg") { - color: yellow; - } + @include sm(){ + color: blue; + } - @include breakpoint("xl") { - color: purple; - } + @include md(){ + color: green; + } - @include breakpoint("xxl") { - color: orange; - } + @include lg(){ + color: yellow; + } - // Custom breakpoint beyond predefined ones - @include breakpoint(1600px) { - color: pink; - } + @include xl(){ + color: purple; + } + + @include xxl(){ + color: orange; + } + + @include breakpoint(1600px){ + color: pink; + } } + diff --git a/clipcss/_grid.scss b/clipcss/_grid.scss index 7130438..879013d 100644 --- a/clipcss/_grid.scss +++ b/clipcss/_grid.scss @@ -1,56 +1,122 @@ @use 'sass:math'; $grid-columns: 12; +$grid-gaps: ( + "0": 0, + "1": 4px, + "2": 8px, + "3": 12px, + "4": 16px, + "5": 20px, + "6": 24px, + "7": 28px, + "8": 32px, + "9": 36px, + "10": 40px, + "11": 44px, + "12": 48px, + "13": 52px, + "14": 56px, + "15": 60px, + "16": 64px, + "17": 68px, + "18": 72px, + "19": 76px, + "20": 80px, + "21": 84px, + "22": 88px, + "23": 92px, + "24": 96px, + "25": 100px +); + +$layout-values: flex-start, flex-end , center, space-between, space-around, space-evenly; + .container { - width: 100%; - max-width: 1200px; - margin: 0 auto; - padding: 0 20px; - box-sizing: border-box; + width: 100%; + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; } .row { - display: flex; - flex-flow: row wrap; + display: flex; + flex-flow: row wrap; } -@include xs() { - @for $i from 1 through $grid-columns { - .col-xs-#{$i} { - box-sizing: border-box; - flex-grow: 0; - width: math.div($i * 100%, $grid-columns); - } - } +// grid gaps +@each $key, $value in $grid-gaps { + .gap-#{$key} > * { + padding: $value; + } + + .gap-#{$key}{ + margin-left: -$value; + margin-right: -$value; + } } -@include sm() { - @for $i from 1 through $grid-columns { - .col-sm-#{$i} { - box-sizing: border-box; - flex-grow: 0; - width: math.div($i * 100%, $grid-columns); - } - } +// justify content classes +@each $value in $layout-values { + .justify-#{$value} { + justify-content: $value; + } } -@include md() { - @for $i from 1 through $grid-columns { - .col-md-#{$i} { - box-sizing: border-box; - flex-grow: 0; - width: math.div($i * 100%, $grid-columns); - } +// Column definitions for different breakpoints +@for $i from 1 through $grid-columns { + // Extra small columns (xs) + .col-xs-#{$i} { + box-sizing: border-box; + flex-grow: 0; + width: math.div($i * 100%, $grid-columns); + } + + // Small columns (sm) + @include sm() { + .col-sm-#{$i} { + box-sizing: border-box; + flex-grow: 0; + width: math.div($i * 100%, $grid-columns); } -} + } + + // Medium columns (md) + @include md() { + .col-md-#{$i} { + box-sizing: border-box; + flex-grow: 0; + width: math.div($i * 100%, $grid-columns); + } + } + + // Large columns (lg) + @include lg() { + .col-lg-#{$i} { + box-sizing: border-box; + flex-grow: 0; + width: math.div($i * 100%, $grid-columns); + } + } + + // Extra-large columns (xl) + @include xl() { + .col-xl-#{$i} { + box-sizing: border-box; + flex-grow: 0; + width: math.div($i * 100%, $grid-columns); + } + } -@include lg() { - @for $i from 1 through $grid-columns { - .col-lg-#{$i} { - box-sizing: border-box; - flex-grow: 0; - width: math.div($i * 100%, $grid-columns); - } + // Extra-extra-large columns (xxl) + @include xxl() { + .col-xxl-#{$i} { + box-sizing: border-box; + flex-grow: 0; + width: math.div($i * 100%, $grid-columns); } + } } + diff --git a/clipcss/_variables.scss b/clipcss/_variables.scss index 60018e5..f323c79 100644 --- a/clipcss/_variables.scss +++ b/clipcss/_variables.scss @@ -33,9 +33,7 @@ $colors: ( */ // Spacing Variables -$spacer: 1rem; -$base-space: 0.7rem; -$base-margin: 1.7rem; +$base-margin: 4px; $base-padding: 4px; // Border Variables diff --git a/clipcss/components/_card.scss b/clipcss/components/_card.scss index d3ead6c..602e472 100644 --- a/clipcss/components/_card.scss +++ b/clipcss/components/_card.scss @@ -23,36 +23,37 @@ // Ensure proper layout and padding across different breakpoints @include xs() { - padding: $base-padding-xs; // Adjust padding for small screens - font-size: $base-font-size-xs; + padding: $base-padding; // Adjust padding for small screens + font-size: $base-font-size; } @include sm() { - padding: $base-padding-sm; - font-size: $base-font-size-sm; + padding: $base-padding; + font-size: $base-font-size; } @include md() { - padding: $base-padding-md; - font-size: $base-font-size-md; + padding: $base-padding; + font-size: $base-font-size; } @include lg() { - padding: $base-padding-lg; - font-size: $base-font-size-lg; + padding: $base-padding; + font-size: $base-font-size; } @include xl() { - padding: $base-padding-xl; - font-size: $base-font-size-xl; + padding: $base-padding; + font-size: $base-font-size; } @include xxl() { - padding: $base-padding-xxl; - font-size: $base-font-size-xxl; + padding: $base-padding; + font-size: $base-font-size; } } // Debugging the border-radius @debug "Checking the radius of the card"; @debug math.div($base-border-radius, 4); + diff --git a/clipcss/components/_navbar.scss b/clipcss/components/_navbar.scss new file mode 100644 index 0000000..9e9cba2 --- /dev/null +++ b/clipcss/components/_navbar.scss @@ -0,0 +1,30 @@ +@use 'sass:math'; + +%flex-layout{ + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + box-sizing: border-box; +} + +.navbar{ + @extend %flex-layout; + padding: $base-padding $base-padding * 2; + box-shadow: $base-box-shadow; + + .site-title{ + font-size: $base-font-size * 1.5; + } + + .container{ + @extend %flex-layout; + } +} + +@each $key, $val in $colors { + .navbar-#{$key} { + @extend .navbar; + background-color: $val; + } +} \ No newline at end of file diff --git a/clipcss/index.scss b/clipcss/index.scss index ecc6ce5..a5691f3 100644 --- a/clipcss/index.scss +++ b/clipcss/index.scss @@ -13,6 +13,7 @@ /* Components (button, card, navbar) */ @import "components/card"; @import "components/button"; +@import "components/navbar"; /* Utilities (margin, padding, opacity, display, etc.) */ @import "utilities"; diff --git a/css/index.css b/css/index.css index c7d7d92..fffcf0f 100644 --- a/css/index.css +++ b/css/index.css @@ -27,11 +27,6 @@ a { text-decoration: none; } -hr { - border: 0; - border-top: 1px dotted #efefef; -} - img { max-width: 100%; } @@ -46,40 +41,6 @@ span { padding: 4px; } -.responsive-text { - color: red; -} -@media (min-width: 480px) { - .responsive-text { - color: blue; - } -} -@media (min-width: 720px) { - .responsive-text { - color: green; - } -} -@media (min-width: 960px) { - .responsive-text { - color: yellow; - } -} -@media (min-width: 1200px) { - .responsive-text { - color: purple; - } -} -@media (min-width: 1400px) { - .responsive-text { - color: orange; - } -} -@media (min-width: ) { - .responsive-text { - color: pink; - } -} - .container { width: 100%; max-width: 1200px; @@ -93,4609 +54,438 @@ span { flex-flow: row wrap; } -.col-xs-1 { - box-sizing: border-box; - flex-grow: 0; - width: 8.3333333333%; -} - -.col-xs-2 { - box-sizing: border-box; - flex-grow: 0; - width: 16.6666666667%; -} - -.col-xs-3 { - box-sizing: border-box; - flex-grow: 0; - width: 25%; -} - -.col-xs-4 { - box-sizing: border-box; - flex-grow: 0; - width: 33.3333333333%; -} - -.col-xs-5 { - box-sizing: border-box; - flex-grow: 0; - width: 41.6666666667%; -} - -.col-xs-6 { - box-sizing: border-box; - flex-grow: 0; - width: 50%; -} - -.col-xs-7 { - box-sizing: border-box; - flex-grow: 0; - width: 58.3333333333%; -} - -.col-xs-8 { - box-sizing: border-box; - flex-grow: 0; - width: 66.6666666667%; -} - -.col-xs-9 { - box-sizing: border-box; - flex-grow: 0; - width: 75%; -} - -.col-xs-10 { - box-sizing: border-box; - flex-grow: 0; - width: 83.3333333333%; +.gap-2 > * { + padding: 8px; } -.col-xs-11 { - box-sizing: border-box; - flex-grow: 0; - width: 91.6666666667%; +.gap-2 { + margin-left: -8px; + margin-right: -8px; } -.col-xs-12 { - box-sizing: border-box; - flex-grow: 0; - width: 100%; +.justify-center { + justify-content: center; } - -@media (min-width: 576px) { - .col-sm-1 { - box-sizing: border-box; - flex-grow: 0; - width: 8.3333333333%; - } - .col-sm-2 { - box-sizing: border-box; - flex-grow: 0; - width: 16.6666666667%; - } - .col-sm-3 { +@media (min-width: 960px) { + .col-lg-3 { box-sizing: border-box; flex-grow: 0; width: 25%; } - .col-sm-4 { - box-sizing: border-box; - flex-grow: 0; - width: 33.3333333333%; - } - .col-sm-5 { - box-sizing: border-box; - flex-grow: 0; - width: 41.6666666667%; - } - .col-sm-6 { - box-sizing: border-box; - flex-grow: 0; - width: 50%; - } - .col-sm-7 { - box-sizing: border-box; - flex-grow: 0; - width: 58.3333333333%; - } - .col-sm-8 { - box-sizing: border-box; - flex-grow: 0; - width: 66.6666666667%; - } - .col-sm-9 { - box-sizing: border-box; - flex-grow: 0; - width: 75%; - } - .col-sm-10 { - box-sizing: border-box; - flex-grow: 0; - width: 83.3333333333%; - } - .col-sm-11 { - box-sizing: border-box; - flex-grow: 0; - width: 91.6666666667%; - } - .col-sm-12 { - box-sizing: border-box; - flex-grow: 0; - width: 100%; - } } -@media (min-width: 768px) { - .col-md-1 { - box-sizing: border-box; - flex-grow: 0; - width: 8.3333333333%; - } - .col-md-2 { - box-sizing: border-box; - flex-grow: 0; - width: 16.6666666667%; - } - .col-md-3 { - box-sizing: border-box; - flex-grow: 0; - width: 25%; - } +@media (min-width: 720px) { .col-md-4 { box-sizing: border-box; flex-grow: 0; width: 33.3333333333%; } - .col-md-5 { - box-sizing: border-box; - flex-grow: 0; - width: 41.6666666667%; - } - .col-md-6 { - box-sizing: border-box; - flex-grow: 0; - width: 50%; - } - .col-md-7 { - box-sizing: border-box; - flex-grow: 0; - width: 58.3333333333%; - } - .col-md-8 { - box-sizing: border-box; - flex-grow: 0; - width: 66.6666666667%; - } - .col-md-9 { - box-sizing: border-box; - flex-grow: 0; - width: 75%; - } - .col-md-10 { - box-sizing: border-box; - flex-grow: 0; - width: 83.3333333333%; - } - .col-md-11 { - box-sizing: border-box; - flex-grow: 0; - width: 91.6666666667%; - } - .col-md-12 { - box-sizing: border-box; - flex-grow: 0; - width: 100%; - } } -@media (min-width: 992px) { - .col-lg-1 { - box-sizing: border-box; - flex-grow: 0; - width: 8.3333333333%; - } - .col-lg-2 { - box-sizing: border-box; - flex-grow: 0; - width: 16.6666666667%; - } - .col-lg-3 { - box-sizing: border-box; - flex-grow: 0; - width: 25%; - } - .col-lg-4 { - box-sizing: border-box; - flex-grow: 0; - width: 33.3333333333%; - } - .col-lg-5 { - box-sizing: border-box; - flex-grow: 0; - width: 41.6666666667%; - } - .col-lg-6 { + +@media (min-width: 480px) { + .col-sm-6 { box-sizing: border-box; flex-grow: 0; width: 50%; } - .col-lg-7 { - box-sizing: border-box; - flex-grow: 0; - width: 58.3333333333%; - } - .col-lg-8 { - box-sizing: border-box; - flex-grow: 0; - width: 66.6666666667%; - } - .col-lg-9 { - box-sizing: border-box; - flex-grow: 0; - width: 75%; - } - .col-lg-10 { - box-sizing: border-box; - flex-grow: 0; - width: 83.3333333333%; - } - .col-lg-11 { - box-sizing: border-box; - flex-grow: 0; - width: 91.6666666667%; - } - .col-lg-12 { - box-sizing: border-box; - flex-grow: 0; - width: 100%; - } } -@media (min-width: 1200px) { - .col-xl-1 { - box-sizing: border-box; - flex-grow: 0; - width: 8.3333333333%; - } - .col-xl-2 { - box-sizing: border-box; - flex-grow: 0; - width: 16.6666666667%; - } - .col-xl-3 { - box-sizing: border-box; - flex-grow: 0; - width: 25%; - } - .col-xl-4 { - box-sizing: border-box; - flex-grow: 0; - width: 33.3333333333%; - } - .col-xl-5 { - box-sizing: border-box; - flex-grow: 0; - width: 41.6666666667%; - } - .col-xl-6 { - box-sizing: border-box; - flex-grow: 0; - width: 50%; - } - .col-xl-7 { - box-sizing: border-box; - flex-grow: 0; - width: 58.3333333333%; - } - .col-xl-8 { - box-sizing: border-box; - flex-grow: 0; - width: 66.6666666667%; - } - .col-xl-9 { - box-sizing: border-box; - flex-grow: 0; - width: 75%; - } - .col-xl-10 { - box-sizing: border-box; - flex-grow: 0; - width: 83.3333333333%; - } - .col-xl-11 { - box-sizing: border-box; - flex-grow: 0; - width: 91.6666666667%; - } - .col-xl-12 { - box-sizing: border-box; - flex-grow: 0; - width: 100%; - } -} -@media (min-width: 1400px) { - .col-xxl-1 { - box-sizing: border-box; - flex-grow: 0; - width: 8.3333333333%; - } - .col-xxl-2 { - box-sizing: border-box; - flex-grow: 0; - width: 16.6666666667%; - } - .col-xxl-3 { - box-sizing: border-box; - flex-grow: 0; - width: 25%; - } - .col-xxl-4 { - box-sizing: border-box; - flex-grow: 0; - width: 33.3333333333%; - } - .col-xxl-5 { - box-sizing: border-box; - flex-grow: 0; - width: 41.6666666667%; - } - .col-xxl-6 { - box-sizing: border-box; - flex-grow: 0; - width: 50%; - } - .col-xxl-7 { - box-sizing: border-box; - flex-grow: 0; - width: 58.3333333333%; - } - .col-xxl-8 { - box-sizing: border-box; - flex-grow: 0; - width: 66.6666666667%; - } - .col-xxl-9 { - box-sizing: border-box; - flex-grow: 0; - width: 75%; - } - .col-xxl-10 { - box-sizing: border-box; - flex-grow: 0; - width: 83.3333333333%; - } - .col-xxl-11 { - box-sizing: border-box; - flex-grow: 0; - width: 91.6666666667%; - } - .col-xxl-12 { - box-sizing: border-box; - flex-grow: 0; - width: 100%; - } +.col-xs-12 { + box-sizing: border-box; + flex-grow: 0; + width: 100%; } /* Colours */ .text-primary { color: #4f46e5; } -.text-hover-primary:hover { - color: #4f46e5; -} - .bg-primary { - background-color: #4f46e5; -} - -.text-primary-light-1 { - color: rgb(96.6, 88.5, 231.6); -} - -.text-hover-primary-light-1:hover { - color: rgb(96.6, 88.5, 231.6); -} - -.bg-primary-light-1 { - background-color: rgb(96.6, 88.5, 231.6); -} - -.text-primary-light-2 { - color: rgb(114.2, 107, 234.2); -} - -.text-hover-primary-light-2:hover { - color: rgb(114.2, 107, 234.2); -} - -.bg-primary-light-2 { - background-color: rgb(114.2, 107, 234.2); -} - -.text-primary-light-3 { - color: rgb(131.8, 125.5, 236.8); -} - -.text-hover-primary-light-3:hover { - color: rgb(131.8, 125.5, 236.8); -} - -.bg-primary-light-3 { - background-color: rgb(131.8, 125.5, 236.8); -} - -.text-primary-light-4 { - color: rgb(149.4, 144, 239.4); -} - -.text-hover-primary-light-4:hover { - color: rgb(149.4, 144, 239.4); -} - -.bg-primary-light-4 { - background-color: rgb(149.4, 144, 239.4); -} - -.text-primary-light-5 { - color: rgb(167, 162.5, 242); -} - -.text-hover-primary-light-5:hover { - color: rgb(167, 162.5, 242); -} - -.bg-primary-light-5 { - background-color: rgb(167, 162.5, 242); -} - -.text-primary-light-6 { - color: rgb(184.6, 181, 244.6); -} - -.text-hover-primary-light-6:hover { - color: rgb(184.6, 181, 244.6); -} - -.bg-primary-light-6 { - background-color: rgb(184.6, 181, 244.6); -} - -.text-primary-light-7 { - color: rgb(202.2, 199.5, 247.2); -} - -.text-hover-primary-light-7:hover { - color: rgb(202.2, 199.5, 247.2); -} - -.bg-primary-light-7 { - background-color: rgb(202.2, 199.5, 247.2); -} - -.text-primary-light-8 { - color: rgb(219.8, 218, 249.8); -} - -.text-hover-primary-light-8:hover { - color: rgb(219.8, 218, 249.8); -} - -.bg-primary-light-8 { - background-color: rgb(219.8, 218, 249.8); -} - -.text-primary-light-9 { - color: rgb(237.4, 236.5, 252.4); -} - -.text-hover-primary-light-9:hover { - color: rgb(237.4, 236.5, 252.4); -} - -.bg-primary-light-9 { - background-color: rgb(237.4, 236.5, 252.4); -} - -.text-primary-dark-1 { - color: rgb(71.1, 63, 206.1); -} - -.text-hover-primary-dark-1:hover { - color: rgb(71.1, 63, 206.1); -} - -.bg-primary-dark-1 { - background-color: rgb(71.1, 63, 206.1); -} - -.text-primary-dark-2 { - color: rgb(63.2, 56, 183.2); -} - -.text-hover-primary-dark-2:hover { - color: rgb(63.2, 56, 183.2); -} - -.bg-primary-dark-2 { - background-color: rgb(63.2, 56, 183.2); -} - -.text-primary-dark-3 { - color: rgb(55.3, 49, 160.3); -} - -.text-hover-primary-dark-3:hover { - color: rgb(55.3, 49, 160.3); -} - -.bg-primary-dark-3 { - background-color: rgb(55.3, 49, 160.3); -} - -.text-primary-dark-4 { - color: rgb(47.4, 42, 137.4); -} - -.text-hover-primary-dark-4:hover { - color: rgb(47.4, 42, 137.4); -} - -.bg-primary-dark-4 { - background-color: rgb(47.4, 42, 137.4); -} - -.text-primary-dark-5 { - color: rgb(39.5, 35, 114.5); -} - -.text-hover-primary-dark-5:hover { - color: rgb(39.5, 35, 114.5); -} - -.bg-primary-dark-5 { - background-color: rgb(39.5, 35, 114.5); -} - -.text-primary-dark-6 { - color: rgb(31.6, 28, 91.6); -} - -.text-hover-primary-dark-6:hover { - color: rgb(31.6, 28, 91.6); -} - -.bg-primary-dark-6 { - background-color: rgb(31.6, 28, 91.6); -} - -.text-primary-dark-7 { - color: rgb(23.7, 21, 68.7); -} - -.text-hover-primary-dark-7:hover { - color: rgb(23.7, 21, 68.7); -} - -.bg-primary-dark-7 { - background-color: rgb(23.7, 21, 68.7); -} - -.text-primary-dark-8 { - color: rgb(15.8, 14, 45.8); -} - -.text-hover-primary-dark-8:hover { - color: rgb(15.8, 14, 45.8); -} - -.bg-primary-dark-8 { - background-color: rgb(15.8, 14, 45.8); -} - -.text-primary-dark-9 { - color: rgb(7.9, 7, 22.9); -} - -.text-hover-primary-dark-9:hover { - color: rgb(7.9, 7, 22.9); -} - -.bg-primary-dark-9 { - background-color: rgb(7.9, 7, 22.9); -} - -.text-secondary { - color: #ec4899; -} - -.text-hover-secondary:hover { - color: #ec4899; -} - -.bg-secondary { - background-color: #ec4899; -} - -.text-secondary-light-1 { - color: rgb(237.9, 90.3, 163.2); -} - -.text-hover-secondary-light-1:hover { - color: rgb(237.9, 90.3, 163.2); -} - -.bg-secondary-light-1 { - background-color: rgb(237.9, 90.3, 163.2); -} - -.text-secondary-light-2 { - color: rgb(239.8, 108.6, 173.4); -} - -.text-hover-secondary-light-2:hover { - color: rgb(239.8, 108.6, 173.4); -} - -.bg-secondary-light-2 { - background-color: rgb(239.8, 108.6, 173.4); -} - -.text-secondary-light-3 { - color: rgb(241.7, 126.9, 183.6); -} - -.text-hover-secondary-light-3:hover { - color: rgb(241.7, 126.9, 183.6); -} - -.bg-secondary-light-3 { - background-color: rgb(241.7, 126.9, 183.6); -} - -.text-secondary-light-4 { - color: rgb(243.6, 145.2, 193.8); -} - -.text-hover-secondary-light-4:hover { - color: rgb(243.6, 145.2, 193.8); -} - -.bg-secondary-light-4 { - background-color: rgb(243.6, 145.2, 193.8); -} - -.text-secondary-light-5 { - color: rgb(245.5, 163.5, 204); -} - -.text-hover-secondary-light-5:hover { - color: rgb(245.5, 163.5, 204); -} - -.bg-secondary-light-5 { - background-color: rgb(245.5, 163.5, 204); -} - -.text-secondary-light-6 { - color: rgb(247.4, 181.8, 214.2); -} - -.text-hover-secondary-light-6:hover { - color: rgb(247.4, 181.8, 214.2); -} - -.bg-secondary-light-6 { - background-color: rgb(247.4, 181.8, 214.2); -} - -.text-secondary-light-7 { - color: rgb(249.3, 200.1, 224.4); -} - -.text-hover-secondary-light-7:hover { - color: rgb(249.3, 200.1, 224.4); -} - -.bg-secondary-light-7 { - background-color: rgb(249.3, 200.1, 224.4); -} - -.text-secondary-light-8 { - color: rgb(251.2, 218.4, 234.6); -} - -.text-hover-secondary-light-8:hover { - color: rgb(251.2, 218.4, 234.6); -} - -.bg-secondary-light-8 { - background-color: rgb(251.2, 218.4, 234.6); -} - -.text-secondary-light-9 { - color: rgb(253.1, 236.7, 244.8); -} - -.text-hover-secondary-light-9:hover { - color: rgb(253.1, 236.7, 244.8); -} - -.bg-secondary-light-9 { - background-color: rgb(253.1, 236.7, 244.8); -} - -.text-secondary-dark-1 { - color: rgb(212.4, 64.8, 137.7); -} - -.text-hover-secondary-dark-1:hover { - color: rgb(212.4, 64.8, 137.7); -} - -.bg-secondary-dark-1 { - background-color: rgb(212.4, 64.8, 137.7); -} - -.text-secondary-dark-2 { - color: rgb(188.8, 57.6, 122.4); -} - -.text-hover-secondary-dark-2:hover { - color: rgb(188.8, 57.6, 122.4); -} - -.bg-secondary-dark-2 { - background-color: rgb(188.8, 57.6, 122.4); -} - -.text-secondary-dark-3 { - color: rgb(165.2, 50.4, 107.1); -} - -.text-hover-secondary-dark-3:hover { - color: rgb(165.2, 50.4, 107.1); -} - -.bg-secondary-dark-3 { - background-color: rgb(165.2, 50.4, 107.1); -} - -.text-secondary-dark-4 { - color: rgb(141.6, 43.2, 91.8); -} - -.text-hover-secondary-dark-4:hover { - color: rgb(141.6, 43.2, 91.8); -} - -.bg-secondary-dark-4 { - background-color: rgb(141.6, 43.2, 91.8); -} - -.text-secondary-dark-5 { - color: rgb(118, 36, 76.5); -} - -.text-hover-secondary-dark-5:hover { - color: rgb(118, 36, 76.5); -} - -.bg-secondary-dark-5 { - background-color: rgb(118, 36, 76.5); -} - -.text-secondary-dark-6 { - color: rgb(94.4, 28.8, 61.2); -} - -.text-hover-secondary-dark-6:hover { - color: rgb(94.4, 28.8, 61.2); -} - -.bg-secondary-dark-6 { - background-color: rgb(94.4, 28.8, 61.2); -} - -.text-secondary-dark-7 { - color: rgb(70.8, 21.6, 45.9); -} - -.text-hover-secondary-dark-7:hover { - color: rgb(70.8, 21.6, 45.9); -} - -.bg-secondary-dark-7 { - background-color: rgb(70.8, 21.6, 45.9); -} - -.text-secondary-dark-8 { - color: rgb(47.2, 14.4, 30.6); -} - -.text-hover-secondary-dark-8:hover { - color: rgb(47.2, 14.4, 30.6); -} - -.bg-secondary-dark-8 { - background-color: rgb(47.2, 14.4, 30.6); -} - -.text-secondary-dark-9 { - color: rgb(23.6, 7.2, 15.3); -} - -.text-hover-secondary-dark-9:hover { - color: rgb(23.6, 7.2, 15.3); -} - -.bg-secondary-dark-9 { - background-color: rgb(23.6, 7.2, 15.3); -} - -.text-info { - color: #3b82f6; -} - -.text-hover-info:hover { - color: #3b82f6; -} - -.bg-info { - background-color: #3b82f6; -} - -.text-info-light-1 { - color: rgb(78.6, 142.5, 246.9); -} - -.text-hover-info-light-1:hover { - color: rgb(78.6, 142.5, 246.9); -} - -.bg-info-light-1 { - background-color: rgb(78.6, 142.5, 246.9); -} - -.text-info-light-2 { - color: rgb(98.2, 155, 247.8); -} - -.text-hover-info-light-2:hover { - color: rgb(98.2, 155, 247.8); -} - -.bg-info-light-2 { - background-color: rgb(98.2, 155, 247.8); -} - -.text-info-light-3 { - color: rgb(117.8, 167.5, 248.7); -} - -.text-hover-info-light-3:hover { - color: rgb(117.8, 167.5, 248.7); -} - -.bg-info-light-3 { - background-color: rgb(117.8, 167.5, 248.7); -} - -.text-info-light-4 { - color: rgb(137.4, 180, 249.6); -} - -.text-hover-info-light-4:hover { - color: rgb(137.4, 180, 249.6); -} - -.bg-info-light-4 { - background-color: rgb(137.4, 180, 249.6); -} - -.text-info-light-5 { - color: rgb(157, 192.5, 250.5); -} - -.text-hover-info-light-5:hover { - color: rgb(157, 192.5, 250.5); -} - -.bg-info-light-5 { - background-color: rgb(157, 192.5, 250.5); -} - -.text-info-light-6 { - color: rgb(176.6, 205, 251.4); -} - -.text-hover-info-light-6:hover { - color: rgb(176.6, 205, 251.4); -} - -.bg-info-light-6 { - background-color: rgb(176.6, 205, 251.4); -} - -.text-info-light-7 { - color: rgb(196.2, 217.5, 252.3); -} - -.text-hover-info-light-7:hover { - color: rgb(196.2, 217.5, 252.3); -} - -.bg-info-light-7 { - background-color: rgb(196.2, 217.5, 252.3); -} - -.text-info-light-8 { - color: rgb(215.8, 230, 253.2); -} - -.text-hover-info-light-8:hover { - color: rgb(215.8, 230, 253.2); -} - -.bg-info-light-8 { - background-color: rgb(215.8, 230, 253.2); -} - -.text-info-light-9 { - color: rgb(235.4, 242.5, 254.1); -} - -.text-hover-info-light-9:hover { - color: rgb(235.4, 242.5, 254.1); -} - -.bg-info-light-9 { - background-color: rgb(235.4, 242.5, 254.1); -} - -.text-info-dark-1 { - color: rgb(53.1, 117, 221.4); -} - -.text-hover-info-dark-1:hover { - color: rgb(53.1, 117, 221.4); -} - -.bg-info-dark-1 { - background-color: rgb(53.1, 117, 221.4); -} - -.text-info-dark-2 { - color: rgb(47.2, 104, 196.8); -} - -.text-hover-info-dark-2:hover { - color: rgb(47.2, 104, 196.8); -} - -.bg-info-dark-2 { - background-color: rgb(47.2, 104, 196.8); -} - -.text-info-dark-3 { - color: rgb(41.3, 91, 172.2); -} - -.text-hover-info-dark-3:hover { - color: rgb(41.3, 91, 172.2); -} - -.bg-info-dark-3 { - background-color: rgb(41.3, 91, 172.2); -} - -.text-info-dark-4 { - color: rgb(35.4, 78, 147.6); -} - -.text-hover-info-dark-4:hover { - color: rgb(35.4, 78, 147.6); -} - -.bg-info-dark-4 { - background-color: rgb(35.4, 78, 147.6); -} - -.text-info-dark-5 { - color: rgb(29.5, 65, 123); -} - -.text-hover-info-dark-5:hover { - color: rgb(29.5, 65, 123); -} - -.bg-info-dark-5 { - background-color: rgb(29.5, 65, 123); -} - -.text-info-dark-6 { - color: rgb(23.6, 52, 98.4); -} - -.text-hover-info-dark-6:hover { - color: rgb(23.6, 52, 98.4); -} - -.bg-info-dark-6 { - background-color: rgb(23.6, 52, 98.4); -} - -.text-info-dark-7 { - color: rgb(17.7, 39, 73.8); -} - -.text-hover-info-dark-7:hover { - color: rgb(17.7, 39, 73.8); -} - -.bg-info-dark-7 { - background-color: rgb(17.7, 39, 73.8); -} - -.text-info-dark-8 { - color: rgb(11.8, 26, 49.2); -} - -.text-hover-info-dark-8:hover { - color: rgb(11.8, 26, 49.2); -} - -.bg-info-dark-8 { - background-color: rgb(11.8, 26, 49.2); -} - -.text-info-dark-9 { - color: rgb(5.9, 13, 24.6); -} - -.text-hover-info-dark-9:hover { - color: rgb(5.9, 13, 24.6); -} - -.bg-info-dark-9 { - background-color: rgb(5.9, 13, 24.6); -} - -.text-success { - color: #22c55e; -} - -.text-hover-success:hover { - color: #22c55e; -} - -.bg-success { - background-color: #22c55e; -} - -.text-success-light-1 { - color: rgb(56.1, 202.8, 110.1); -} - -.text-hover-success-light-1:hover { - color: rgb(56.1, 202.8, 110.1); -} - -.bg-success-light-1 { - background-color: rgb(56.1, 202.8, 110.1); -} - -.text-success-light-2 { - color: rgb(78.2, 208.6, 126.2); -} - -.text-hover-success-light-2:hover { - color: rgb(78.2, 208.6, 126.2); -} - -.bg-success-light-2 { - background-color: rgb(78.2, 208.6, 126.2); -} - -.text-success-light-3 { - color: rgb(100.3, 214.4, 142.3); -} - -.text-hover-success-light-3:hover { - color: rgb(100.3, 214.4, 142.3); -} - -.bg-success-light-3 { - background-color: rgb(100.3, 214.4, 142.3); -} - -.text-success-light-4 { - color: rgb(122.4, 220.2, 158.4); -} - -.text-hover-success-light-4:hover { - color: rgb(122.4, 220.2, 158.4); -} - -.bg-success-light-4 { - background-color: rgb(122.4, 220.2, 158.4); -} - -.text-success-light-5 { - color: rgb(144.5, 226, 174.5); -} - -.text-hover-success-light-5:hover { - color: rgb(144.5, 226, 174.5); -} - -.bg-success-light-5 { - background-color: rgb(144.5, 226, 174.5); -} - -.text-success-light-6 { - color: rgb(166.6, 231.8, 190.6); -} - -.text-hover-success-light-6:hover { - color: rgb(166.6, 231.8, 190.6); -} - -.bg-success-light-6 { - background-color: rgb(166.6, 231.8, 190.6); -} - -.text-success-light-7 { - color: rgb(188.7, 237.6, 206.7); -} - -.text-hover-success-light-7:hover { - color: rgb(188.7, 237.6, 206.7); -} - -.bg-success-light-7 { - background-color: rgb(188.7, 237.6, 206.7); -} - -.text-success-light-8 { - color: rgb(210.8, 243.4, 222.8); -} - -.text-hover-success-light-8:hover { - color: rgb(210.8, 243.4, 222.8); -} - -.bg-success-light-8 { - background-color: rgb(210.8, 243.4, 222.8); -} - -.text-success-light-9 { - color: rgb(232.9, 249.2, 238.9); -} - -.text-hover-success-light-9:hover { - color: rgb(232.9, 249.2, 238.9); -} - -.bg-success-light-9 { - background-color: rgb(232.9, 249.2, 238.9); -} - -.text-success-dark-1 { - color: rgb(30.6, 177.3, 84.6); -} - -.text-hover-success-dark-1:hover { - color: rgb(30.6, 177.3, 84.6); -} - -.bg-success-dark-1 { - background-color: rgb(30.6, 177.3, 84.6); -} - -.text-success-dark-2 { - color: rgb(27.2, 157.6, 75.2); -} - -.text-hover-success-dark-2:hover { - color: rgb(27.2, 157.6, 75.2); -} - -.bg-success-dark-2 { - background-color: rgb(27.2, 157.6, 75.2); -} - -.text-success-dark-3 { - color: rgb(23.8, 137.9, 65.8); -} - -.text-hover-success-dark-3:hover { - color: rgb(23.8, 137.9, 65.8); -} - -.bg-success-dark-3 { - background-color: rgb(23.8, 137.9, 65.8); -} - -.text-success-dark-4 { - color: rgb(20.4, 118.2, 56.4); -} - -.text-hover-success-dark-4:hover { - color: rgb(20.4, 118.2, 56.4); -} - -.bg-success-dark-4 { - background-color: rgb(20.4, 118.2, 56.4); -} - -.text-success-dark-5 { - color: rgb(17, 98.5, 47); -} - -.text-hover-success-dark-5:hover { - color: rgb(17, 98.5, 47); -} - -.bg-success-dark-5 { - background-color: rgb(17, 98.5, 47); -} - -.text-success-dark-6 { - color: rgb(13.6, 78.8, 37.6); -} - -.text-hover-success-dark-6:hover { - color: rgb(13.6, 78.8, 37.6); -} - -.bg-success-dark-6 { - background-color: rgb(13.6, 78.8, 37.6); -} - -.text-success-dark-7 { - color: rgb(10.2, 59.1, 28.2); -} - -.text-hover-success-dark-7:hover { - color: rgb(10.2, 59.1, 28.2); -} - -.bg-success-dark-7 { - background-color: rgb(10.2, 59.1, 28.2); -} - -.text-success-dark-8 { - color: rgb(6.8, 39.4, 18.8); -} - -.text-hover-success-dark-8:hover { - color: rgb(6.8, 39.4, 18.8); -} - -.bg-success-dark-8 { - background-color: rgb(6.8, 39.4, 18.8); -} - -.text-success-dark-9 { - color: rgb(3.4, 19.7, 9.4); -} - -.text-hover-success-dark-9:hover { - color: rgb(3.4, 19.7, 9.4); -} - -.bg-success-dark-9 { - background-color: rgb(3.4, 19.7, 9.4); -} - -.text-error { - color: #ef4444; -} - -.text-hover-error:hover { - color: #ef4444; -} - -.bg-error { - background-color: #ef4444; -} - -.text-error-light-1 { - color: rgb(240.6, 86.7, 86.7); -} - -.text-hover-error-light-1:hover { - color: rgb(240.6, 86.7, 86.7); -} - -.bg-error-light-1 { - background-color: rgb(240.6, 86.7, 86.7); -} - -.text-error-light-2 { - color: rgb(242.2, 105.4, 105.4); -} - -.text-hover-error-light-2:hover { - color: rgb(242.2, 105.4, 105.4); -} - -.bg-error-light-2 { - background-color: rgb(242.2, 105.4, 105.4); -} - -.text-error-light-3 { - color: rgb(243.8, 124.1, 124.1); -} - -.text-hover-error-light-3:hover { - color: rgb(243.8, 124.1, 124.1); -} - -.bg-error-light-3 { - background-color: rgb(243.8, 124.1, 124.1); -} - -.text-error-light-4 { - color: rgb(245.4, 142.8, 142.8); -} - -.text-hover-error-light-4:hover { - color: rgb(245.4, 142.8, 142.8); -} - -.bg-error-light-4 { - background-color: rgb(245.4, 142.8, 142.8); -} - -.text-error-light-5 { - color: rgb(247, 161.5, 161.5); -} - -.text-hover-error-light-5:hover { - color: rgb(247, 161.5, 161.5); -} - -.bg-error-light-5 { - background-color: rgb(247, 161.5, 161.5); -} - -.text-error-light-6 { - color: rgb(248.6, 180.2, 180.2); -} - -.text-hover-error-light-6:hover { - color: rgb(248.6, 180.2, 180.2); -} - -.bg-error-light-6 { - background-color: rgb(248.6, 180.2, 180.2); -} - -.text-error-light-7 { - color: rgb(250.2, 198.9, 198.9); -} - -.text-hover-error-light-7:hover { - color: rgb(250.2, 198.9, 198.9); -} - -.bg-error-light-7 { - background-color: rgb(250.2, 198.9, 198.9); -} - -.text-error-light-8 { - color: rgb(251.8, 217.6, 217.6); -} - -.text-hover-error-light-8:hover { - color: rgb(251.8, 217.6, 217.6); -} - -.bg-error-light-8 { - background-color: rgb(251.8, 217.6, 217.6); -} - -.text-error-light-9 { - color: rgb(253.4, 236.3, 236.3); -} - -.text-hover-error-light-9:hover { - color: rgb(253.4, 236.3, 236.3); -} - -.bg-error-light-9 { - background-color: rgb(253.4, 236.3, 236.3); -} - -.text-error-dark-1 { - color: rgb(215.1, 61.2, 61.2); -} - -.text-hover-error-dark-1:hover { - color: rgb(215.1, 61.2, 61.2); -} - -.bg-error-dark-1 { - background-color: rgb(215.1, 61.2, 61.2); -} - -.text-error-dark-2 { - color: rgb(191.2, 54.4, 54.4); -} - -.text-hover-error-dark-2:hover { - color: rgb(191.2, 54.4, 54.4); -} - -.bg-error-dark-2 { - background-color: rgb(191.2, 54.4, 54.4); -} - -.text-error-dark-3 { - color: rgb(167.3, 47.6, 47.6); -} - -.text-hover-error-dark-3:hover { - color: rgb(167.3, 47.6, 47.6); -} - -.bg-error-dark-3 { - background-color: rgb(167.3, 47.6, 47.6); -} - -.text-error-dark-4 { - color: rgb(143.4, 40.8, 40.8); -} - -.text-hover-error-dark-4:hover { - color: rgb(143.4, 40.8, 40.8); -} - -.bg-error-dark-4 { - background-color: rgb(143.4, 40.8, 40.8); -} - -.text-error-dark-5 { - color: rgb(119.5, 34, 34); -} - -.text-hover-error-dark-5:hover { - color: rgb(119.5, 34, 34); -} - -.bg-error-dark-5 { - background-color: rgb(119.5, 34, 34); -} - -.text-error-dark-6 { - color: rgb(95.6, 27.2, 27.2); -} - -.text-hover-error-dark-6:hover { - color: rgb(95.6, 27.2, 27.2); -} - -.bg-error-dark-6 { - background-color: rgb(95.6, 27.2, 27.2); -} - -.text-error-dark-7 { - color: rgb(71.7, 20.4, 20.4); -} - -.text-hover-error-dark-7:hover { - color: rgb(71.7, 20.4, 20.4); -} - -.bg-error-dark-7 { - background-color: rgb(71.7, 20.4, 20.4); -} - -.text-error-dark-8 { - color: rgb(47.8, 13.6, 13.6); -} - -.text-hover-error-dark-8:hover { - color: rgb(47.8, 13.6, 13.6); -} - -.bg-error-dark-8 { - background-color: rgb(47.8, 13.6, 13.6); -} - -.text-error-dark-9 { - color: rgb(23.9, 6.8, 6.8); -} - -.text-hover-error-dark-9:hover { - color: rgb(23.9, 6.8, 6.8); -} - -.bg-error-dark-9 { - background-color: rgb(23.9, 6.8, 6.8); -} - -.text-warning { - color: #fbbf24; -} - -.text-hover-warning:hover { - color: #fbbf24; -} - -.bg-warning { - background-color: #fbbf24; -} - -.text-warning-light-1 { - color: rgb(251.4, 197.4, 57.9); -} - -.text-hover-warning-light-1:hover { - color: rgb(251.4, 197.4, 57.9); -} - -.bg-warning-light-1 { - background-color: rgb(251.4, 197.4, 57.9); -} - -.text-warning-light-2 { - color: rgb(251.8, 203.8, 79.8); -} - -.text-hover-warning-light-2:hover { - color: rgb(251.8, 203.8, 79.8); -} - -.bg-warning-light-2 { - background-color: rgb(251.8, 203.8, 79.8); -} - -.text-warning-light-3 { - color: rgb(252.2, 210.2, 101.7); -} - -.text-hover-warning-light-3:hover { - color: rgb(252.2, 210.2, 101.7); -} - -.bg-warning-light-3 { - background-color: rgb(252.2, 210.2, 101.7); -} - -.text-warning-light-4 { - color: rgb(252.6, 216.6, 123.6); -} - -.text-hover-warning-light-4:hover { - color: rgb(252.6, 216.6, 123.6); -} - -.bg-warning-light-4 { - background-color: rgb(252.6, 216.6, 123.6); -} - -.text-warning-light-5 { - color: rgb(253, 223, 145.5); -} - -.text-hover-warning-light-5:hover { - color: rgb(253, 223, 145.5); -} - -.bg-warning-light-5 { - background-color: rgb(253, 223, 145.5); -} - -.text-warning-light-6 { - color: rgb(253.4, 229.4, 167.4); -} - -.text-hover-warning-light-6:hover { - color: rgb(253.4, 229.4, 167.4); -} - -.bg-warning-light-6 { - background-color: rgb(253.4, 229.4, 167.4); -} - -.text-warning-light-7 { - color: rgb(253.8, 235.8, 189.3); -} - -.text-hover-warning-light-7:hover { - color: rgb(253.8, 235.8, 189.3); -} - -.bg-warning-light-7 { - background-color: rgb(253.8, 235.8, 189.3); -} - -.text-warning-light-8 { - color: rgb(254.2, 242.2, 211.2); -} - -.text-hover-warning-light-8:hover { - color: rgb(254.2, 242.2, 211.2); -} - -.bg-warning-light-8 { - background-color: rgb(254.2, 242.2, 211.2); -} - -.text-warning-light-9 { - color: rgb(254.6, 248.6, 233.1); -} - -.text-hover-warning-light-9:hover { - color: rgb(254.6, 248.6, 233.1); -} - -.bg-warning-light-9 { - background-color: rgb(254.6, 248.6, 233.1); -} - -.text-warning-dark-1 { - color: rgb(225.9, 171.9, 32.4); -} - -.text-hover-warning-dark-1:hover { - color: rgb(225.9, 171.9, 32.4); -} - -.bg-warning-dark-1 { - background-color: rgb(225.9, 171.9, 32.4); -} - -.text-warning-dark-2 { - color: rgb(200.8, 152.8, 28.8); -} - -.text-hover-warning-dark-2:hover { - color: rgb(200.8, 152.8, 28.8); -} - -.bg-warning-dark-2 { - background-color: rgb(200.8, 152.8, 28.8); -} - -.text-warning-dark-3 { - color: rgb(175.7, 133.7, 25.2); -} - -.text-hover-warning-dark-3:hover { - color: rgb(175.7, 133.7, 25.2); -} - -.bg-warning-dark-3 { - background-color: rgb(175.7, 133.7, 25.2); -} - -.text-warning-dark-4 { - color: rgb(150.6, 114.6, 21.6); -} - -.text-hover-warning-dark-4:hover { - color: rgb(150.6, 114.6, 21.6); -} - -.bg-warning-dark-4 { - background-color: rgb(150.6, 114.6, 21.6); -} - -.text-warning-dark-5 { - color: rgb(125.5, 95.5, 18); -} - -.text-hover-warning-dark-5:hover { - color: rgb(125.5, 95.5, 18); -} - -.bg-warning-dark-5 { - background-color: rgb(125.5, 95.5, 18); -} - -.text-warning-dark-6 { - color: rgb(100.4, 76.4, 14.4); -} - -.text-hover-warning-dark-6:hover { - color: rgb(100.4, 76.4, 14.4); -} - -.bg-warning-dark-6 { - background-color: rgb(100.4, 76.4, 14.4); -} - -.text-warning-dark-7 { - color: rgb(75.3, 57.3, 10.8); -} - -.text-hover-warning-dark-7:hover { - color: rgb(75.3, 57.3, 10.8); -} - -.bg-warning-dark-7 { - background-color: rgb(75.3, 57.3, 10.8); -} - -.text-warning-dark-8 { - color: rgb(50.2, 38.2, 7.2); -} - -.text-hover-warning-dark-8:hover { - color: rgb(50.2, 38.2, 7.2); -} - -.bg-warning-dark-8 { - background-color: rgb(50.2, 38.2, 7.2); -} - -.text-warning-dark-9 { - color: rgb(25.1, 19.1, 3.6); -} - -.text-hover-warning-dark-9:hover { - color: rgb(25.1, 19.1, 3.6); -} - -.bg-warning-dark-9 { - background-color: rgb(25.1, 19.1, 3.6); -} - -.text-blue { - color: #3b82f6; -} - -.text-hover-blue:hover { - color: #3b82f6; -} - -.bg-blue { - background-color: #3b82f6; -} - -.text-blue-light-1 { - color: rgb(78.6, 142.5, 246.9); -} - -.text-hover-blue-light-1:hover { - color: rgb(78.6, 142.5, 246.9); -} - -.bg-blue-light-1 { - background-color: rgb(78.6, 142.5, 246.9); -} - -.text-blue-light-2 { - color: rgb(98.2, 155, 247.8); -} - -.text-hover-blue-light-2:hover { - color: rgb(98.2, 155, 247.8); -} - -.bg-blue-light-2 { - background-color: rgb(98.2, 155, 247.8); -} - -.text-blue-light-3 { - color: rgb(117.8, 167.5, 248.7); -} - -.text-hover-blue-light-3:hover { - color: rgb(117.8, 167.5, 248.7); -} - -.bg-blue-light-3 { - background-color: rgb(117.8, 167.5, 248.7); -} - -.text-blue-light-4 { - color: rgb(137.4, 180, 249.6); -} - -.text-hover-blue-light-4:hover { - color: rgb(137.4, 180, 249.6); -} - -.bg-blue-light-4 { - background-color: rgb(137.4, 180, 249.6); -} - -.text-blue-light-5 { - color: rgb(157, 192.5, 250.5); -} - -.text-hover-blue-light-5:hover { - color: rgb(157, 192.5, 250.5); -} - -.bg-blue-light-5 { - background-color: rgb(157, 192.5, 250.5); -} - -.text-blue-light-6 { - color: rgb(176.6, 205, 251.4); -} - -.text-hover-blue-light-6:hover { - color: rgb(176.6, 205, 251.4); -} - -.bg-blue-light-6 { - background-color: rgb(176.6, 205, 251.4); -} - -.text-blue-light-7 { - color: rgb(196.2, 217.5, 252.3); -} - -.text-hover-blue-light-7:hover { - color: rgb(196.2, 217.5, 252.3); -} - -.bg-blue-light-7 { - background-color: rgb(196.2, 217.5, 252.3); -} - -.text-blue-light-8 { - color: rgb(215.8, 230, 253.2); -} - -.text-hover-blue-light-8:hover { - color: rgb(215.8, 230, 253.2); -} - -.bg-blue-light-8 { - background-color: rgb(215.8, 230, 253.2); -} - -.text-blue-light-9 { - color: rgb(235.4, 242.5, 254.1); -} - -.text-hover-blue-light-9:hover { - color: rgb(235.4, 242.5, 254.1); -} - -.bg-blue-light-9 { - background-color: rgb(235.4, 242.5, 254.1); -} - -.text-blue-dark-1 { - color: rgb(53.1, 117, 221.4); -} - -.text-hover-blue-dark-1:hover { - color: rgb(53.1, 117, 221.4); -} - -.bg-blue-dark-1 { - background-color: rgb(53.1, 117, 221.4); -} - -.text-blue-dark-2 { - color: rgb(47.2, 104, 196.8); -} - -.text-hover-blue-dark-2:hover { - color: rgb(47.2, 104, 196.8); -} - -.bg-blue-dark-2 { - background-color: rgb(47.2, 104, 196.8); -} - -.text-blue-dark-3 { - color: rgb(41.3, 91, 172.2); -} - -.text-hover-blue-dark-3:hover { - color: rgb(41.3, 91, 172.2); -} - -.bg-blue-dark-3 { - background-color: rgb(41.3, 91, 172.2); -} - -.text-blue-dark-4 { - color: rgb(35.4, 78, 147.6); -} - -.text-hover-blue-dark-4:hover { - color: rgb(35.4, 78, 147.6); -} - -.bg-blue-dark-4 { - background-color: rgb(35.4, 78, 147.6); -} - -.text-blue-dark-5 { - color: rgb(29.5, 65, 123); -} - -.text-hover-blue-dark-5:hover { - color: rgb(29.5, 65, 123); -} - -.bg-blue-dark-5 { - background-color: rgb(29.5, 65, 123); -} - -.text-blue-dark-6 { - color: rgb(23.6, 52, 98.4); -} - -.text-hover-blue-dark-6:hover { - color: rgb(23.6, 52, 98.4); -} - -.bg-blue-dark-6 { - background-color: rgb(23.6, 52, 98.4); -} - -.text-blue-dark-7 { - color: rgb(17.7, 39, 73.8); -} - -.text-hover-blue-dark-7:hover { - color: rgb(17.7, 39, 73.8); -} - -.bg-blue-dark-7 { - background-color: rgb(17.7, 39, 73.8); -} - -.text-blue-dark-8 { - color: rgb(11.8, 26, 49.2); -} - -.text-hover-blue-dark-8:hover { - color: rgb(11.8, 26, 49.2); -} - -.bg-blue-dark-8 { - background-color: rgb(11.8, 26, 49.2); -} - -.text-blue-dark-9 { - color: rgb(5.9, 13, 24.6); -} - -.text-hover-blue-dark-9:hover { - color: rgb(5.9, 13, 24.6); -} - -.bg-blue-dark-9 { - background-color: rgb(5.9, 13, 24.6); -} - -.text-red { - color: #ef4444; -} - -.text-hover-red:hover { - color: #ef4444; -} - -.bg-red { - background-color: #ef4444; -} - -.text-red-light-1 { - color: rgb(240.6, 86.7, 86.7); -} - -.text-hover-red-light-1:hover { - color: rgb(240.6, 86.7, 86.7); -} - -.bg-red-light-1 { - background-color: rgb(240.6, 86.7, 86.7); -} - -.text-red-light-2 { - color: rgb(242.2, 105.4, 105.4); -} - -.text-hover-red-light-2:hover { - color: rgb(242.2, 105.4, 105.4); -} - -.bg-red-light-2 { - background-color: rgb(242.2, 105.4, 105.4); -} - -.text-red-light-3 { - color: rgb(243.8, 124.1, 124.1); -} - -.text-hover-red-light-3:hover { - color: rgb(243.8, 124.1, 124.1); -} - -.bg-red-light-3 { - background-color: rgb(243.8, 124.1, 124.1); -} - -.text-red-light-4 { - color: rgb(245.4, 142.8, 142.8); -} - -.text-hover-red-light-4:hover { - color: rgb(245.4, 142.8, 142.8); -} - -.bg-red-light-4 { - background-color: rgb(245.4, 142.8, 142.8); -} - -.text-red-light-5 { - color: rgb(247, 161.5, 161.5); -} - -.text-hover-red-light-5:hover { - color: rgb(247, 161.5, 161.5); -} - -.bg-red-light-5 { - background-color: rgb(247, 161.5, 161.5); -} - -.text-red-light-6 { - color: rgb(248.6, 180.2, 180.2); -} - -.text-hover-red-light-6:hover { - color: rgb(248.6, 180.2, 180.2); -} - -.bg-red-light-6 { - background-color: rgb(248.6, 180.2, 180.2); -} - -.text-red-light-7 { - color: rgb(250.2, 198.9, 198.9); -} - -.text-hover-red-light-7:hover { - color: rgb(250.2, 198.9, 198.9); -} - -.bg-red-light-7 { - background-color: rgb(250.2, 198.9, 198.9); -} - -.text-red-light-8 { - color: rgb(251.8, 217.6, 217.6); -} - -.text-hover-red-light-8:hover { - color: rgb(251.8, 217.6, 217.6); -} - -.bg-red-light-8 { - background-color: rgb(251.8, 217.6, 217.6); -} - -.text-red-light-9 { - color: rgb(253.4, 236.3, 236.3); -} - -.text-hover-red-light-9:hover { - color: rgb(253.4, 236.3, 236.3); -} - -.bg-red-light-9 { - background-color: rgb(253.4, 236.3, 236.3); -} - -.text-red-dark-1 { - color: rgb(215.1, 61.2, 61.2); -} - -.text-hover-red-dark-1:hover { - color: rgb(215.1, 61.2, 61.2); -} - -.bg-red-dark-1 { - background-color: rgb(215.1, 61.2, 61.2); -} - -.text-red-dark-2 { - color: rgb(191.2, 54.4, 54.4); -} - -.text-hover-red-dark-2:hover { - color: rgb(191.2, 54.4, 54.4); -} - -.bg-red-dark-2 { - background-color: rgb(191.2, 54.4, 54.4); -} - -.text-red-dark-3 { - color: rgb(167.3, 47.6, 47.6); -} - -.text-hover-red-dark-3:hover { - color: rgb(167.3, 47.6, 47.6); -} - -.bg-red-dark-3 { - background-color: rgb(167.3, 47.6, 47.6); -} - -.text-red-dark-4 { - color: rgb(143.4, 40.8, 40.8); -} - -.text-hover-red-dark-4:hover { - color: rgb(143.4, 40.8, 40.8); -} - -.bg-red-dark-4 { - background-color: rgb(143.4, 40.8, 40.8); -} - -.text-red-dark-5 { - color: rgb(119.5, 34, 34); -} - -.text-hover-red-dark-5:hover { - color: rgb(119.5, 34, 34); -} - -.bg-red-dark-5 { - background-color: rgb(119.5, 34, 34); -} - -.text-red-dark-6 { - color: rgb(95.6, 27.2, 27.2); -} - -.text-hover-red-dark-6:hover { - color: rgb(95.6, 27.2, 27.2); -} - -.bg-red-dark-6 { - background-color: rgb(95.6, 27.2, 27.2); -} - -.text-red-dark-7 { - color: rgb(71.7, 20.4, 20.4); -} - -.text-hover-red-dark-7:hover { - color: rgb(71.7, 20.4, 20.4); -} - -.bg-red-dark-7 { - background-color: rgb(71.7, 20.4, 20.4); -} - -.text-red-dark-8 { - color: rgb(47.8, 13.6, 13.6); -} - -.text-hover-red-dark-8:hover { - color: rgb(47.8, 13.6, 13.6); -} - -.bg-red-dark-8 { - background-color: rgb(47.8, 13.6, 13.6); -} - -.text-red-dark-9 { - color: rgb(23.9, 6.8, 6.8); -} - -.text-hover-red-dark-9:hover { - color: rgb(23.9, 6.8, 6.8); -} - -.bg-red-dark-9 { - background-color: rgb(23.9, 6.8, 6.8); -} - -.text-green { - color: #22c55e; -} - -.text-hover-green:hover { - color: #22c55e; -} - -.bg-green { - background-color: #22c55e; -} - -.text-green-light-1 { - color: rgb(56.1, 202.8, 110.1); -} - -.text-hover-green-light-1:hover { - color: rgb(56.1, 202.8, 110.1); -} - -.bg-green-light-1 { - background-color: rgb(56.1, 202.8, 110.1); -} - -.text-green-light-2 { - color: rgb(78.2, 208.6, 126.2); -} - -.text-hover-green-light-2:hover { - color: rgb(78.2, 208.6, 126.2); -} - -.bg-green-light-2 { - background-color: rgb(78.2, 208.6, 126.2); -} - -.text-green-light-3 { - color: rgb(100.3, 214.4, 142.3); -} - -.text-hover-green-light-3:hover { - color: rgb(100.3, 214.4, 142.3); -} - -.bg-green-light-3 { - background-color: rgb(100.3, 214.4, 142.3); -} - -.text-green-light-4 { - color: rgb(122.4, 220.2, 158.4); -} - -.text-hover-green-light-4:hover { - color: rgb(122.4, 220.2, 158.4); -} - -.bg-green-light-4 { - background-color: rgb(122.4, 220.2, 158.4); -} - -.text-green-light-5 { - color: rgb(144.5, 226, 174.5); -} - -.text-hover-green-light-5:hover { - color: rgb(144.5, 226, 174.5); -} - -.bg-green-light-5 { - background-color: rgb(144.5, 226, 174.5); -} - -.text-green-light-6 { - color: rgb(166.6, 231.8, 190.6); -} - -.text-hover-green-light-6:hover { - color: rgb(166.6, 231.8, 190.6); -} - -.bg-green-light-6 { - background-color: rgb(166.6, 231.8, 190.6); -} - -.text-green-light-7 { - color: rgb(188.7, 237.6, 206.7); -} - -.text-hover-green-light-7:hover { - color: rgb(188.7, 237.6, 206.7); -} - -.bg-green-light-7 { - background-color: rgb(188.7, 237.6, 206.7); -} - -.text-green-light-8 { - color: rgb(210.8, 243.4, 222.8); -} - -.text-hover-green-light-8:hover { - color: rgb(210.8, 243.4, 222.8); -} - -.bg-green-light-8 { - background-color: rgb(210.8, 243.4, 222.8); -} - -.text-green-light-9 { - color: rgb(232.9, 249.2, 238.9); -} - -.text-hover-green-light-9:hover { - color: rgb(232.9, 249.2, 238.9); -} - -.bg-green-light-9 { - background-color: rgb(232.9, 249.2, 238.9); -} - -.text-green-dark-1 { - color: rgb(30.6, 177.3, 84.6); -} - -.text-hover-green-dark-1:hover { - color: rgb(30.6, 177.3, 84.6); -} - -.bg-green-dark-1 { - background-color: rgb(30.6, 177.3, 84.6); -} - -.text-green-dark-2 { - color: rgb(27.2, 157.6, 75.2); -} - -.text-hover-green-dark-2:hover { - color: rgb(27.2, 157.6, 75.2); -} - -.bg-green-dark-2 { - background-color: rgb(27.2, 157.6, 75.2); -} - -.text-green-dark-3 { - color: rgb(23.8, 137.9, 65.8); -} - -.text-hover-green-dark-3:hover { - color: rgb(23.8, 137.9, 65.8); -} - -.bg-green-dark-3 { - background-color: rgb(23.8, 137.9, 65.8); -} - -.text-green-dark-4 { - color: rgb(20.4, 118.2, 56.4); -} - -.text-hover-green-dark-4:hover { - color: rgb(20.4, 118.2, 56.4); -} - -.bg-green-dark-4 { - background-color: rgb(20.4, 118.2, 56.4); -} - -.text-green-dark-5 { - color: rgb(17, 98.5, 47); -} - -.text-hover-green-dark-5:hover { - color: rgb(17, 98.5, 47); -} - -.bg-green-dark-5 { - background-color: rgb(17, 98.5, 47); -} - -.text-green-dark-6 { - color: rgb(13.6, 78.8, 37.6); -} - -.text-hover-green-dark-6:hover { - color: rgb(13.6, 78.8, 37.6); -} - -.bg-green-dark-6 { - background-color: rgb(13.6, 78.8, 37.6); -} - -.text-green-dark-7 { - color: rgb(10.2, 59.1, 28.2); -} - -.text-hover-green-dark-7:hover { - color: rgb(10.2, 59.1, 28.2); -} - -.bg-green-dark-7 { - background-color: rgb(10.2, 59.1, 28.2); -} - -.text-green-dark-8 { - color: rgb(6.8, 39.4, 18.8); -} - -.text-hover-green-dark-8:hover { - color: rgb(6.8, 39.4, 18.8); -} - -.bg-green-dark-8 { - background-color: rgb(6.8, 39.4, 18.8); -} - -.text-green-dark-9 { - color: rgb(3.4, 19.7, 9.4); -} - -.text-hover-green-dark-9:hover { - color: rgb(3.4, 19.7, 9.4); -} - -.bg-green-dark-9 { - background-color: rgb(3.4, 19.7, 9.4); -} - -.text-yellow { - color: #fbbf24; -} - -.text-hover-yellow:hover { - color: #fbbf24; -} - -.bg-yellow { - background-color: #fbbf24; -} - -.text-yellow-light-1 { - color: rgb(251.4, 197.4, 57.9); -} - -.text-hover-yellow-light-1:hover { - color: rgb(251.4, 197.4, 57.9); -} - -.bg-yellow-light-1 { - background-color: rgb(251.4, 197.4, 57.9); -} - -.text-yellow-light-2 { - color: rgb(251.8, 203.8, 79.8); -} - -.text-hover-yellow-light-2:hover { - color: rgb(251.8, 203.8, 79.8); -} - -.bg-yellow-light-2 { - background-color: rgb(251.8, 203.8, 79.8); -} - -.text-yellow-light-3 { - color: rgb(252.2, 210.2, 101.7); -} - -.text-hover-yellow-light-3:hover { - color: rgb(252.2, 210.2, 101.7); -} - -.bg-yellow-light-3 { - background-color: rgb(252.2, 210.2, 101.7); -} - -.text-yellow-light-4 { - color: rgb(252.6, 216.6, 123.6); -} - -.text-hover-yellow-light-4:hover { - color: rgb(252.6, 216.6, 123.6); -} - -.bg-yellow-light-4 { - background-color: rgb(252.6, 216.6, 123.6); -} - -.text-yellow-light-5 { - color: rgb(253, 223, 145.5); -} - -.text-hover-yellow-light-5:hover { - color: rgb(253, 223, 145.5); -} - -.bg-yellow-light-5 { - background-color: rgb(253, 223, 145.5); -} - -.text-yellow-light-6 { - color: rgb(253.4, 229.4, 167.4); -} - -.text-hover-yellow-light-6:hover { - color: rgb(253.4, 229.4, 167.4); -} - -.bg-yellow-light-6 { - background-color: rgb(253.4, 229.4, 167.4); -} - -.text-yellow-light-7 { - color: rgb(253.8, 235.8, 189.3); -} - -.text-hover-yellow-light-7:hover { - color: rgb(253.8, 235.8, 189.3); -} - -.bg-yellow-light-7 { - background-color: rgb(253.8, 235.8, 189.3); -} - -.text-yellow-light-8 { - color: rgb(254.2, 242.2, 211.2); -} - -.text-hover-yellow-light-8:hover { - color: rgb(254.2, 242.2, 211.2); -} - -.bg-yellow-light-8 { - background-color: rgb(254.2, 242.2, 211.2); -} - -.text-yellow-light-9 { - color: rgb(254.6, 248.6, 233.1); -} - -.text-hover-yellow-light-9:hover { - color: rgb(254.6, 248.6, 233.1); -} - -.bg-yellow-light-9 { - background-color: rgb(254.6, 248.6, 233.1); -} - -.text-yellow-dark-1 { - color: rgb(225.9, 171.9, 32.4); -} - -.text-hover-yellow-dark-1:hover { - color: rgb(225.9, 171.9, 32.4); -} - -.bg-yellow-dark-1 { - background-color: rgb(225.9, 171.9, 32.4); -} - -.text-yellow-dark-2 { - color: rgb(200.8, 152.8, 28.8); -} - -.text-hover-yellow-dark-2:hover { - color: rgb(200.8, 152.8, 28.8); -} - -.bg-yellow-dark-2 { - background-color: rgb(200.8, 152.8, 28.8); -} - -.text-yellow-dark-3 { - color: rgb(175.7, 133.7, 25.2); -} - -.text-hover-yellow-dark-3:hover { - color: rgb(175.7, 133.7, 25.2); -} - -.bg-yellow-dark-3 { - background-color: rgb(175.7, 133.7, 25.2); -} - -.text-yellow-dark-4 { - color: rgb(150.6, 114.6, 21.6); -} - -.text-hover-yellow-dark-4:hover { - color: rgb(150.6, 114.6, 21.6); -} - -.bg-yellow-dark-4 { - background-color: rgb(150.6, 114.6, 21.6); -} - -.text-yellow-dark-5 { - color: rgb(125.5, 95.5, 18); -} - -.text-hover-yellow-dark-5:hover { - color: rgb(125.5, 95.5, 18); -} - -.bg-yellow-dark-5 { - background-color: rgb(125.5, 95.5, 18); -} - -.text-yellow-dark-6 { - color: rgb(100.4, 76.4, 14.4); -} - -.text-hover-yellow-dark-6:hover { - color: rgb(100.4, 76.4, 14.4); -} - -.bg-yellow-dark-6 { - background-color: rgb(100.4, 76.4, 14.4); -} - -.text-yellow-dark-7 { - color: rgb(75.3, 57.3, 10.8); -} - -.text-hover-yellow-dark-7:hover { - color: rgb(75.3, 57.3, 10.8); -} - -.bg-yellow-dark-7 { - background-color: rgb(75.3, 57.3, 10.8); -} - -.text-yellow-dark-8 { - color: rgb(50.2, 38.2, 7.2); -} - -.text-hover-yellow-dark-8:hover { - color: rgb(50.2, 38.2, 7.2); -} - -.bg-yellow-dark-8 { - background-color: rgb(50.2, 38.2, 7.2); -} - -.text-yellow-dark-9 { - color: rgb(25.1, 19.1, 3.6); -} - -.text-hover-yellow-dark-9:hover { - color: rgb(25.1, 19.1, 3.6); -} - -.bg-yellow-dark-9 { - background-color: rgb(25.1, 19.1, 3.6); -} - -.text-orange { - color: #fb923c; -} - -.text-hover-orange:hover { - color: #fb923c; -} - -.bg-orange { - background-color: #fb923c; -} - -.text-orange-light-1 { - color: rgb(251.4, 156.9, 79.5); -} - -.text-hover-orange-light-1:hover { - color: rgb(251.4, 156.9, 79.5); -} - -.bg-orange-light-1 { - background-color: rgb(251.4, 156.9, 79.5); -} - -.text-orange-light-2 { - color: rgb(251.8, 167.8, 99); -} - -.text-hover-orange-light-2:hover { - color: rgb(251.8, 167.8, 99); -} - -.bg-orange-light-2 { - background-color: rgb(251.8, 167.8, 99); -} - -.text-orange-light-3 { - color: rgb(252.2, 178.7, 118.5); -} - -.text-hover-orange-light-3:hover { - color: rgb(252.2, 178.7, 118.5); -} - -.bg-orange-light-3 { - background-color: rgb(252.2, 178.7, 118.5); -} - -.text-orange-light-4 { - color: rgb(252.6, 189.6, 138); -} - -.text-hover-orange-light-4:hover { - color: rgb(252.6, 189.6, 138); -} - -.bg-orange-light-4 { - background-color: rgb(252.6, 189.6, 138); -} - -.text-orange-light-5 { - color: rgb(253, 200.5, 157.5); -} - -.text-hover-orange-light-5:hover { - color: rgb(253, 200.5, 157.5); -} - -.bg-orange-light-5 { - background-color: rgb(253, 200.5, 157.5); -} - -.text-orange-light-6 { - color: rgb(253.4, 211.4, 177); -} - -.text-hover-orange-light-6:hover { - color: rgb(253.4, 211.4, 177); -} - -.bg-orange-light-6 { - background-color: rgb(253.4, 211.4, 177); -} - -.text-orange-light-7 { - color: rgb(253.8, 222.3, 196.5); -} - -.text-hover-orange-light-7:hover { - color: rgb(253.8, 222.3, 196.5); -} - -.bg-orange-light-7 { - background-color: rgb(253.8, 222.3, 196.5); -} - -.text-orange-light-8 { - color: rgb(254.2, 233.2, 216); -} - -.text-hover-orange-light-8:hover { - color: rgb(254.2, 233.2, 216); -} - -.bg-orange-light-8 { - background-color: rgb(254.2, 233.2, 216); -} - -.text-orange-light-9 { - color: rgb(254.6, 244.1, 235.5); -} - -.text-hover-orange-light-9:hover { - color: rgb(254.6, 244.1, 235.5); -} - -.bg-orange-light-9 { - background-color: rgb(254.6, 244.1, 235.5); -} - -.text-orange-dark-1 { - color: rgb(225.9, 131.4, 54); -} - -.text-hover-orange-dark-1:hover { - color: rgb(225.9, 131.4, 54); -} - -.bg-orange-dark-1 { - background-color: rgb(225.9, 131.4, 54); -} - -.text-orange-dark-2 { - color: rgb(200.8, 116.8, 48); -} - -.text-hover-orange-dark-2:hover { - color: rgb(200.8, 116.8, 48); -} - -.bg-orange-dark-2 { - background-color: rgb(200.8, 116.8, 48); -} - -.text-orange-dark-3 { - color: rgb(175.7, 102.2, 42); -} - -.text-hover-orange-dark-3:hover { - color: rgb(175.7, 102.2, 42); -} - -.bg-orange-dark-3 { - background-color: rgb(175.7, 102.2, 42); -} - -.text-orange-dark-4 { - color: rgb(150.6, 87.6, 36); -} - -.text-hover-orange-dark-4:hover { - color: rgb(150.6, 87.6, 36); -} - -.bg-orange-dark-4 { - background-color: rgb(150.6, 87.6, 36); -} - -.text-orange-dark-5 { - color: rgb(125.5, 73, 30); -} - -.text-hover-orange-dark-5:hover { - color: rgb(125.5, 73, 30); -} - -.bg-orange-dark-5 { - background-color: rgb(125.5, 73, 30); -} - -.text-orange-dark-6 { - color: rgb(100.4, 58.4, 24); -} - -.text-hover-orange-dark-6:hover { - color: rgb(100.4, 58.4, 24); -} - -.bg-orange-dark-6 { - background-color: rgb(100.4, 58.4, 24); -} - -.text-orange-dark-7 { - color: rgb(75.3, 43.8, 18); -} - -.text-hover-orange-dark-7:hover { - color: rgb(75.3, 43.8, 18); -} - -.bg-orange-dark-7 { - background-color: rgb(75.3, 43.8, 18); -} - -.text-orange-dark-8 { - color: rgb(50.2, 29.2, 12); -} - -.text-hover-orange-dark-8:hover { - color: rgb(50.2, 29.2, 12); -} - -.bg-orange-dark-8 { - background-color: rgb(50.2, 29.2, 12); -} - -.text-orange-dark-9 { - color: rgb(25.1, 14.6, 6); -} - -.text-hover-orange-dark-9:hover { - color: rgb(25.1, 14.6, 6); -} - -.bg-orange-dark-9 { - background-color: rgb(25.1, 14.6, 6); -} - -.text-gray { - color: #9ca3af; -} - -.text-hover-gray:hover { - color: #9ca3af; -} - -.bg-gray { - background-color: #9ca3af; -} - -.text-gray-light-1 { - color: rgb(165.9, 172.2, 183); -} - -.text-hover-gray-light-1:hover { - color: rgb(165.9, 172.2, 183); -} - -.bg-gray-light-1 { - background-color: rgb(165.9, 172.2, 183); -} - -.text-gray-light-2 { - color: rgb(175.8, 181.4, 191); -} - -.text-hover-gray-light-2:hover { - color: rgb(175.8, 181.4, 191); -} - -.bg-gray-light-2 { - background-color: rgb(175.8, 181.4, 191); -} - -.text-gray-light-3 { - color: rgb(185.7, 190.6, 199); -} - -.text-hover-gray-light-3:hover { - color: rgb(185.7, 190.6, 199); -} - -.bg-gray-light-3 { - background-color: rgb(185.7, 190.6, 199); -} - -.text-gray-light-4 { - color: rgb(195.6, 199.8, 207); -} - -.text-hover-gray-light-4:hover { - color: rgb(195.6, 199.8, 207); -} - -.bg-gray-light-4 { - background-color: rgb(195.6, 199.8, 207); -} - -.text-gray-light-5 { - color: rgb(205.5, 209, 215); -} - -.text-hover-gray-light-5:hover { - color: rgb(205.5, 209, 215); -} - -.bg-gray-light-5 { - background-color: rgb(205.5, 209, 215); -} - -.text-gray-light-6 { - color: rgb(215.4, 218.2, 223); -} - -.text-hover-gray-light-6:hover { - color: rgb(215.4, 218.2, 223); -} - -.bg-gray-light-6 { - background-color: rgb(215.4, 218.2, 223); -} - -.text-gray-light-7 { - color: rgb(225.3, 227.4, 231); -} - -.text-hover-gray-light-7:hover { - color: rgb(225.3, 227.4, 231); -} - -.bg-gray-light-7 { - background-color: rgb(225.3, 227.4, 231); -} - -.text-gray-light-8 { - color: rgb(235.2, 236.6, 239); -} - -.text-hover-gray-light-8:hover { - color: rgb(235.2, 236.6, 239); -} - -.bg-gray-light-8 { - background-color: rgb(235.2, 236.6, 239); -} - -.text-gray-light-9 { - color: rgb(245.1, 245.8, 247); -} - -.text-hover-gray-light-9:hover { - color: rgb(245.1, 245.8, 247); -} - -.bg-gray-light-9 { - background-color: rgb(245.1, 245.8, 247); -} - -.text-gray-dark-1 { - color: rgb(140.4, 146.7, 157.5); -} - -.text-hover-gray-dark-1:hover { - color: rgb(140.4, 146.7, 157.5); -} - -.bg-gray-dark-1 { - background-color: rgb(140.4, 146.7, 157.5); -} - -.text-gray-dark-2 { - color: rgb(124.8, 130.4, 140); -} - -.text-hover-gray-dark-2:hover { - color: rgb(124.8, 130.4, 140); -} - -.bg-gray-dark-2 { - background-color: rgb(124.8, 130.4, 140); -} - -.text-gray-dark-3 { - color: rgb(109.2, 114.1, 122.5); -} - -.text-hover-gray-dark-3:hover { - color: rgb(109.2, 114.1, 122.5); -} - -.bg-gray-dark-3 { - background-color: rgb(109.2, 114.1, 122.5); -} - -.text-gray-dark-4 { - color: rgb(93.6, 97.8, 105); -} - -.text-hover-gray-dark-4:hover { - color: rgb(93.6, 97.8, 105); -} - -.bg-gray-dark-4 { - background-color: rgb(93.6, 97.8, 105); -} - -.text-gray-dark-5 { - color: rgb(78, 81.5, 87.5); -} - -.text-hover-gray-dark-5:hover { - color: rgb(78, 81.5, 87.5); -} - -.bg-gray-dark-5 { - background-color: rgb(78, 81.5, 87.5); -} - -.text-gray-dark-6 { - color: rgb(62.4, 65.2, 70); -} - -.text-hover-gray-dark-6:hover { - color: rgb(62.4, 65.2, 70); -} - -.bg-gray-dark-6 { - background-color: rgb(62.4, 65.2, 70); -} - -.text-gray-dark-7 { - color: rgb(46.8, 48.9, 52.5); -} - -.text-hover-gray-dark-7:hover { - color: rgb(46.8, 48.9, 52.5); -} - -.bg-gray-dark-7 { - background-color: rgb(46.8, 48.9, 52.5); -} - -.text-gray-dark-8 { - color: rgb(31.2, 32.6, 35); -} - -.text-hover-gray-dark-8:hover { - color: rgb(31.2, 32.6, 35); -} - -.bg-gray-dark-8 { - background-color: rgb(31.2, 32.6, 35); -} - -.text-gray-dark-9 { - color: rgb(15.6, 16.3, 17.5); -} - -.text-hover-gray-dark-9:hover { - color: rgb(15.6, 16.3, 17.5); -} - -.bg-gray-dark-9 { - background-color: rgb(15.6, 16.3, 17.5); -} - -.text-purple { - color: #8b5cf6; -} - -.text-hover-purple:hover { - color: #8b5cf6; -} - -.bg-purple { - background-color: #8b5cf6; -} - -.text-purple-light-1 { - color: rgb(150.6, 108.3, 246.9); -} - -.text-hover-purple-light-1:hover { - color: rgb(150.6, 108.3, 246.9); -} - -.bg-purple-light-1 { - background-color: rgb(150.6, 108.3, 246.9); -} - -.text-purple-light-2 { - color: rgb(162.2, 124.6, 247.8); -} - -.text-hover-purple-light-2:hover { - color: rgb(162.2, 124.6, 247.8); -} - -.bg-purple-light-2 { - background-color: rgb(162.2, 124.6, 247.8); -} - -.text-purple-light-3 { - color: rgb(173.8, 140.9, 248.7); -} - -.text-hover-purple-light-3:hover { - color: rgb(173.8, 140.9, 248.7); -} - -.bg-purple-light-3 { - background-color: rgb(173.8, 140.9, 248.7); -} - -.text-purple-light-4 { - color: rgb(185.4, 157.2, 249.6); -} - -.text-hover-purple-light-4:hover { - color: rgb(185.4, 157.2, 249.6); -} - -.bg-purple-light-4 { - background-color: rgb(185.4, 157.2, 249.6); -} - -.text-purple-light-5 { - color: rgb(197, 173.5, 250.5); -} - -.text-hover-purple-light-5:hover { - color: rgb(197, 173.5, 250.5); -} - -.bg-purple-light-5 { - background-color: rgb(197, 173.5, 250.5); -} - -.text-purple-light-6 { - color: rgb(208.6, 189.8, 251.4); -} - -.text-hover-purple-light-6:hover { - color: rgb(208.6, 189.8, 251.4); -} - -.bg-purple-light-6 { - background-color: rgb(208.6, 189.8, 251.4); -} - -.text-purple-light-7 { - color: rgb(220.2, 206.1, 252.3); -} - -.text-hover-purple-light-7:hover { - color: rgb(220.2, 206.1, 252.3); -} - -.bg-purple-light-7 { - background-color: rgb(220.2, 206.1, 252.3); -} - -.text-purple-light-8 { - color: rgb(231.8, 222.4, 253.2); -} - -.text-hover-purple-light-8:hover { - color: rgb(231.8, 222.4, 253.2); -} - -.bg-purple-light-8 { - background-color: rgb(231.8, 222.4, 253.2); -} - -.text-purple-light-9 { - color: rgb(243.4, 238.7, 254.1); -} - -.text-hover-purple-light-9:hover { - color: rgb(243.4, 238.7, 254.1); -} - -.bg-purple-light-9 { - background-color: rgb(243.4, 238.7, 254.1); -} - -.text-purple-dark-1 { - color: rgb(125.1, 82.8, 221.4); -} - -.text-hover-purple-dark-1:hover { - color: rgb(125.1, 82.8, 221.4); -} - -.bg-purple-dark-1 { - background-color: rgb(125.1, 82.8, 221.4); -} - -.text-purple-dark-2 { - color: rgb(111.2, 73.6, 196.8); -} - -.text-hover-purple-dark-2:hover { - color: rgb(111.2, 73.6, 196.8); -} - -.bg-purple-dark-2 { - background-color: rgb(111.2, 73.6, 196.8); -} - -.text-purple-dark-3 { - color: rgb(97.3, 64.4, 172.2); -} - -.text-hover-purple-dark-3:hover { - color: rgb(97.3, 64.4, 172.2); -} - -.bg-purple-dark-3 { - background-color: rgb(97.3, 64.4, 172.2); -} - -.text-purple-dark-4 { - color: rgb(83.4, 55.2, 147.6); -} - -.text-hover-purple-dark-4:hover { - color: rgb(83.4, 55.2, 147.6); -} - -.bg-purple-dark-4 { - background-color: rgb(83.4, 55.2, 147.6); -} - -.text-purple-dark-5 { - color: rgb(69.5, 46, 123); -} - -.text-hover-purple-dark-5:hover { - color: rgb(69.5, 46, 123); -} - -.bg-purple-dark-5 { - background-color: rgb(69.5, 46, 123); -} - -.text-purple-dark-6 { - color: rgb(55.6, 36.8, 98.4); -} - -.text-hover-purple-dark-6:hover { - color: rgb(55.6, 36.8, 98.4); -} - -.bg-purple-dark-6 { - background-color: rgb(55.6, 36.8, 98.4); -} - -.text-purple-dark-7 { - color: rgb(41.7, 27.6, 73.8); -} - -.text-hover-purple-dark-7:hover { - color: rgb(41.7, 27.6, 73.8); -} - -.bg-purple-dark-7 { - background-color: rgb(41.7, 27.6, 73.8); -} - -.text-purple-dark-8 { - color: rgb(27.8, 18.4, 49.2); -} - -.text-hover-purple-dark-8:hover { - color: rgb(27.8, 18.4, 49.2); -} - -.bg-purple-dark-8 { - background-color: rgb(27.8, 18.4, 49.2); -} - -.text-purple-dark-9 { - color: rgb(13.9, 9.2, 24.6); -} - -.text-hover-purple-dark-9:hover { - color: rgb(13.9, 9.2, 24.6); -} - -.bg-purple-dark-9 { - background-color: rgb(13.9, 9.2, 24.6); -} - -.text-white { - color: #fff; -} - -.text-hover-white:hover { - color: #fff; -} - -.bg-white { - background-color: #fff; -} - -.text-black { - color: #000; -} - -.text-hover-black:hover { - color: #000; -} - -.bg-black { - background-color: #000; -} - -/* Components (button, card, navbar) */ -.card { - display: block; - padding: 4px; - border: 1px solid #ddd; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - margin: 1.7rem; - border-radius: 2px; -} -.card .card-title { - color: #4f46e5; - padding-bottom: 4px; - font-weight: bold; -} -.card .card-body { - font-size: 1rem; -} -.card .card-body a { - text-decoration: underline; -} - -.btn { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fff; -} - -.btn-primary { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #4f46e5; -} -.btn-primary:hover { - background-color: rgb(100.2701421801, 92.3578199052, 232.1421800948); -} - -.btn-outline-primary { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fff; - border: 1px solid #4f46e5; -} -.btn-outline-primary:hover { - background-color: #4f46e5; -} - -.btn-complement-primary { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #4f46e5; - color: rgb(224.2298578199, 232.1421800948, 92.3578199052); -} -.btn-complement-primary:hover { - color: #4f46e5; - background-color: rgb(224.2298578199, 232.1421800948, 92.3578199052); -} - -.btn-secondary { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #ec4899; -} -.btn-secondary:hover { - background-color: rgb(238.3985148515, 95.1014851485, 165.8762376238); -} - -.btn-outline-secondary { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fff; - border: 1px solid #ec4899; -} -.btn-outline-secondary:hover { - background-color: #ec4899; -} - -.btn-complement-secondary { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #ec4899; - color: rgb(95.1014851485, 238.3985148515, 167.6237623762); -} -.btn-complement-secondary:hover { - color: #ec4899; - background-color: rgb(95.1014851485, 238.3985148515, 167.6237623762); -} - -.btn-info { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #3b82f6; -} -.btn-info:hover { - background-color: rgb(83.3804878049, 145.5487804878, 247.1195121951); -} - -.btn-outline-info { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fff; - border: 1px solid #3b82f6; -} -.btn-outline-info:hover { - background-color: #3b82f6; -} - -.btn-complement-info { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #3b82f6; - color: rgb(247.1195121951, 184.9512195122, 83.3804878049); -} -.btn-complement-info:hover { - color: #3b82f6; - background-color: rgb(247.1195121951, 184.9512195122, 83.3804878049); -} - -.btn-success { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #22c55e; -} -.btn-success:hover { - background-color: rgb(38.8116883117, 217.6883116883, 104.6558441558); -} - -.btn-outline-success { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fff; - border: 1px solid #22c55e; -} -.btn-outline-success:hover { - background-color: #22c55e; -} - -.btn-complement-success { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #22c55e; - color: rgb(217.6883116883, 38.8116883117, 151.8441558442); -} -.btn-complement-success:hover { - color: #22c55e; - background-color: rgb(217.6883116883, 38.8116883117, 151.8441558442); -} - -.btn-error { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #ef4444; -} -.btn-error:hover { - background-color: rgb(241.0098522167, 91.4901477833, 91.4901477833); -} - -.btn-outline-error { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fff; - border: 1px solid #ef4444; -} -.btn-outline-error:hover { - background-color: #ef4444; -} - -.btn-complement-error { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #ef4444; - color: rgb(91.4901477833, 241.0098522167, 241.0098522167); -} -.btn-complement-error:hover { - color: #ef4444; - background-color: rgb(91.4901477833, 241.0098522167, 241.0098522167); -} - -.btn-warning { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fbbf24; -} -.btn-warning:hover { - background-color: rgb(251.4573991031, 198.3183856502, 61.0426008969); -} - -.btn-outline-warning { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fff; - border: 1px solid #fbbf24; -} -.btn-outline-warning:hover { - background-color: #fbbf24; -} - -.btn-complement-warning { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fbbf24; - color: rgb(61.0426008969, 114.1816143498, 251.4573991031); -} -.btn-complement-warning:hover { - color: #fbbf24; - background-color: rgb(61.0426008969, 114.1816143498, 251.4573991031); -} - -.btn-blue { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #3b82f6; -} -.btn-blue:hover { - background-color: rgb(83.3804878049, 145.5487804878, 247.1195121951); -} - -.btn-outline-blue { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fff; - border: 1px solid #3b82f6; -} -.btn-outline-blue:hover { - background-color: #3b82f6; -} - -.btn-complement-blue { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #3b82f6; - color: rgb(247.1195121951, 184.9512195122, 83.3804878049); -} -.btn-complement-blue:hover { - color: #3b82f6; - background-color: rgb(247.1195121951, 184.9512195122, 83.3804878049); -} - -.btn-red { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #ef4444; -} -.btn-red:hover { - background-color: rgb(241.0098522167, 91.4901477833, 91.4901477833); -} - -.btn-outline-red { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fff; - border: 1px solid #ef4444; -} -.btn-outline-red:hover { - background-color: #ef4444; -} - -.btn-complement-red { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #ef4444; - color: rgb(91.4901477833, 241.0098522167, 241.0098522167); -} -.btn-complement-red:hover { - color: #ef4444; - background-color: rgb(91.4901477833, 241.0098522167, 241.0098522167); -} - -.btn-green { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #22c55e; -} -.btn-green:hover { - background-color: rgb(38.8116883117, 217.6883116883, 104.6558441558); -} - -.btn-outline-green { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fff; - border: 1px solid #22c55e; -} -.btn-outline-green:hover { - background-color: #22c55e; -} - -.btn-complement-green { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #22c55e; - color: rgb(217.6883116883, 38.8116883117, 151.8441558442); -} -.btn-complement-green:hover { - color: #22c55e; - background-color: rgb(217.6883116883, 38.8116883117, 151.8441558442); -} - -.btn-yellow { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fbbf24; -} -.btn-yellow:hover { - background-color: rgb(251.4573991031, 198.3183856502, 61.0426008969); -} - -.btn-outline-yellow { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fff; - border: 1px solid #fbbf24; -} -.btn-outline-yellow:hover { - background-color: #fbbf24; -} - -.btn-complement-yellow { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fbbf24; - color: rgb(61.0426008969, 114.1816143498, 251.4573991031); -} -.btn-complement-yellow:hover { - color: #fbbf24; - background-color: rgb(61.0426008969, 114.1816143498, 251.4573991031); -} - -.btn-orange { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fb923c; -} -.btn-orange:hover { - background-color: rgb(251.5125628141, 159.9673366834, 84.9874371859); -} - -.btn-outline-orange { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fff; - border: 1px solid #fb923c; -} -.btn-outline-orange:hover { - background-color: #fb923c; -} - -.btn-complement-orange { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fb923c; - color: rgb(84.9874371859, 176.5326633166, 251.5125628141); -} -.btn-complement-orange:hover { - color: #fb923c; - background-color: rgb(84.9874371859, 176.5326633166, 251.5125628141); -} - -.btn-gray { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #9ca3af; -} -.btn-gray:hover { - background-color: rgb(170.1033519553, 176.1061452514, 186.3966480447); -} - -.btn-outline-gray { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fff; - border: 1px solid #9ca3af; -} -.btn-outline-gray:hover { - background-color: #9ca3af; -} - -.btn-complement-gray { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #9ca3af; - color: rgb(186.3966480447, 180.3938547486, 170.1033519553); -} -.btn-complement-gray:hover { - color: #9ca3af; - background-color: rgb(186.3966480447, 180.3938547486, 170.1033519553); -} - -.btn-purple { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #8b5cf6; -} -.btn-purple:hover { - background-color: rgb(156.1976744186, 116.1656976744, 247.3343023256); -} - -.btn-outline-purple { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fff; - border: 1px solid #8b5cf6; -} -.btn-outline-purple:hover { - background-color: #8b5cf6; -} - -.btn-complement-purple { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #8b5cf6; - color: rgb(207.3023255814, 247.3343023256, 116.1656976744); -} -.btn-complement-purple:hover { - color: #8b5cf6; - background-color: rgb(207.3023255814, 247.3343023256, 116.1656976744); -} - -.btn-white { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fff; -} -.btn-white:hover { - background-color: white; -} - -.btn-outline-white { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fff; - border: 1px solid #fff; -} -.btn-outline-white:hover { - background-color: #fff; -} - -.btn-complement-white { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fff; - color: white; -} -.btn-complement-white:hover { - color: #fff; - background-color: white; -} - -.btn-black { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #000; -} -.btn-black:hover { - background-color: rgb(12.75, 12.75, 12.75); -} - -.btn-outline-black { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #fff; - border: 1px solid #000; -} -.btn-outline-black:hover { - background-color: #000; -} - -.btn-complement-black { - text-decoration: none; - cursor: pointer; - display: inline-block; - border: 0; - padding: 4px 8px; - border-radius: 8px; - background-color: #000; - color: rgb(12.75, 12.75, 12.75); -} -.btn-complement-black:hover { - color: #000; - background-color: rgb(12.75, 12.75, 12.75); -} - -/* Utilities (margin, padding, opacity, display, etc.) */ -.p-0 { - padding: 0; -} - -.p-1 { - padding: 4px; -} - -.p-2 { - padding: 8px; -} - -.p-3 { - padding: 12px; -} - -.p-4 { - padding: 16px; -} - -.p-5 { - padding: 20px; -} - -.p-6 { - padding: 24px; -} - -.p-7 { - padding: 28px; -} - -.p-8 { - padding: 32px; -} - -.p-9 { - padding: 36px; -} - -.p-10 { - padding: 40px; -} - -.pl-0 { - padding-left: 0; -} - -.pl-1 { - padding-left: 4px; -} - -.pl-2 { - padding-left: 8px; -} - -.pl-3 { - padding-left: 12px; -} - -.pl-4 { - padding-left: 16px; -} - -.pl-5 { - padding-left: 20px; -} - -.pl-6 { - padding-left: 24px; -} - -.pl-7 { - padding-left: 28px; -} - -.pl-8 { - padding-left: 32px; -} - -.pl-9 { - padding-left: 36px; -} - -.pl-10 { - padding-left: 40px; -} - -.pr-0 { - padding-right: 0; -} - -.pr-1 { - padding-right: 4px; -} - -.pr-2 { - padding-right: 8px; -} - -.pr-3 { - padding-right: 12px; -} - -.pr-4 { - padding-right: 16px; -} - -.pr-5 { - padding-right: 20px; -} - -.pr-6 { - padding-right: 24px; -} - -.pr-7 { - padding-right: 28px; -} - -.pr-8 { - padding-right: 32px; -} - -.pr-9 { - padding-right: 36px; -} - -.pr-10 { - padding-right: 40px; -} - -.pt-0 { - padding-top: 0; -} - -.pt-1 { - padding-top: 4px; -} - -.pt-2 { - padding-top: 8px; -} - -.pt-3 { - padding-top: 12px; -} - -.pt-4 { - padding-top: 16px; -} - -.pt-5 { - padding-top: 20px; -} - -.pt-6 { - padding-top: 24px; -} - -.pt-7 { - padding-top: 28px; -} - -.pt-8 { - padding-top: 32px; -} - -.pt-9 { - padding-top: 36px; -} - -.pt-10 { - padding-top: 40px; -} - -.pb-0 { - padding-bottom: 0; -} - -.pb-1 { - padding-bottom: 4px; -} - -.pb-2 { - padding-bottom: 8px; -} - -.pb-3 { - padding-bottom: 12px; -} - -.pb-4 { - padding-bottom: 16px; -} - -.pb-5 { - padding-bottom: 20px; -} - -.pb-6 { - padding-bottom: 24px; -} - -.pb-7 { - padding-bottom: 28px; -} - -.pb-8 { - padding-bottom: 32px; -} - -.pb-9 { - padding-bottom: 36px; -} - -.pb-10 { - padding-bottom: 40px; -} - -.m-0 { - margin: 0; -} - -.m-1 { - margin: 1.7rem; -} - -.m-2 { - margin: 3.4rem; -} - -.m-3 { - margin: 5.1rem; -} - -.m-4 { - margin: 6.8rem; -} - -.m-5 { - margin: 8.5rem; -} - -.m-6 { - margin: 10.2rem; -} - -.m-7 { - margin: 11.9rem; -} - -.m-8 { - margin: 13.6rem; -} - -.m-9 { - margin: 15.3rem; + background-color: #4f46e5; } -.m-10 { - margin: 17rem; +.bg-primary-light-2 { + background-color: rgb(114.2, 107, 234.2); } -.ml-0 { - margin-left: 0; +.bg-primary-light-4 { + background-color: rgb(149.4, 144, 239.4); } -.ml-1 { - margin-left: 1.7rem; +.bg-primary-light-6 { + background-color: rgb(184.6, 181, 244.6); } -.ml-2 { - margin-left: 3.4rem; +.bg-primary-light-8 { + background-color: rgb(219.8, 218, 249.8); } -.ml-3 { - margin-left: 5.1rem; +.bg-primary-dark-2 { + background-color: rgb(63.2, 56, 183.2); } -.ml-4 { - margin-left: 6.8rem; +.bg-primary-dark-4 { + background-color: rgb(47.4, 42, 137.4); } -.ml-5 { - margin-left: 8.5rem; +.bg-primary-dark-6 { + background-color: rgb(31.6, 28, 91.6); } -.ml-6 { - margin-left: 10.2rem; +.bg-primary-dark-8 { + background-color: rgb(15.8, 14, 45.8); } -.ml-7 { - margin-left: 11.9rem; +.text-secondary { + color: #ec4899; } -.ml-8 { - margin-left: 13.6rem; +.text-hover-secondary:hover { + color: #ec4899; } -.ml-9 { - margin-left: 15.3rem; +.bg-secondary { + background-color: #ec4899; } -.ml-10 { - margin-left: 17rem; +.bg-secondary-light-9 { + background-color: rgb(253.1, 236.7, 244.8); } -.mr-0 { - margin-right: 0; +.text-info { + color: #3b82f6; } -.mr-1 { - margin-right: 1.7rem; +.bg-info { + background-color: #3b82f6; } -.mr-2 { - margin-right: 3.4rem; +.text-error { + color: #ef4444; } -.mr-3 { - margin-right: 5.1rem; +.bg-error { + background-color: #ef4444; } -.mr-4 { - margin-right: 6.8rem; +.text-blue { + color: #3b82f6; } -.mr-5 { - margin-right: 8.5rem; +.bg-blue { + background-color: #3b82f6; } -.mr-6 { - margin-right: 10.2rem; +.text-red { + color: #ef4444; } -.mr-7 { - margin-right: 11.9rem; +.bg-red { + background-color: #ef4444; } -.mr-8 { - margin-right: 13.6rem; +.text-green { + color: #22c55e; } -.mr-9 { - margin-right: 15.3rem; +.bg-green { + background-color: #22c55e; } -.mr-10 { - margin-right: 17rem; +.text-yellow { + color: #fbbf24; } -.mt-0 { - margin-top: 0; +.bg-yellow { + background-color: #fbbf24; } -.mt-1 { - margin-top: 1.7rem; +.text-orange { + color: #fb923c; } -.mt-2 { - margin-top: 3.4rem; +.bg-orange { + background-color: #fb923c; } -.mt-3 { - margin-top: 5.1rem; +.text-hover-orange-light-1:hover { + color: rgb(251.4, 156.9, 79.5); } -.mt-4 { - margin-top: 6.8rem; +.text-gray { + color: #9ca3af; } -.mt-5 { - margin-top: 8.5rem; +.bg-gray { + background-color: #9ca3af; } -.mt-6 { - margin-top: 10.2rem; +.bg-gray-light-7 { + background-color: rgb(225.3, 227.4, 231); } -.mt-7 { - margin-top: 11.9rem; +.text-purple { + color: #8b5cf6; } -.mt-8 { - margin-top: 13.6rem; +.bg-purple { + background-color: #8b5cf6; } -.mt-9 { - margin-top: 15.3rem; +.text-white { + color: #fff; } -.mt-10 { - margin-top: 17rem; +.text-hover-white:hover { + color: #fff; } -.mb-0 { - margin-bottom: 0; +/* Components (button, card, navbar) */ +.card { + display: block; + padding: 4px; + border: 1px solid #ddd; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + margin: 4px; + border-radius: 2px; } - -.mb-1 { - margin-bottom: 1.7rem; +.card .card-title { + color: #4f46e5; + padding-bottom: 4px; + font-weight: bold; } - -.mb-2 { - margin-bottom: 3.4rem; +.card .card-body { + font-size: 1rem; } - -.mb-3 { - margin-bottom: 5.1rem; +.card .card-body a { + text-decoration: underline; } - -.mb-4 { - margin-bottom: 6.8rem; +@media (min-width: 0) { + .card { + padding: 4px; + font-size: 1rem; + } } - -.mb-5 { - margin-bottom: 8.5rem; +@media (min-width: 480px) { + .card { + padding: 4px; + font-size: 1rem; + } } - -.mb-6 { - margin-bottom: 10.2rem; +@media (min-width: 720px) { + .card { + padding: 4px; + font-size: 1rem; + } } - -.mb-7 { - margin-bottom: 11.9rem; +@media (min-width: 960px) { + .card { + padding: 4px; + font-size: 1rem; + } } - -.mb-8 { - margin-bottom: 13.6rem; +@media (min-width: 1200px) { + .card { + padding: 4px; + font-size: 1rem; + } } - -.mb-9 { - margin-bottom: 15.3rem; +@media (min-width: 1400px) { + .card { + padding: 4px; + font-size: 1rem; + } } -.mb-10 { - margin-bottom: 17rem; +.btn { + text-decoration: none; + cursor: pointer; + display: inline-block; + border: 0; + padding: 4px 8px; + border-radius: 8px; + background-color: #fff; } -.o-10 { - opacity: 0.1; +.btn-primary { + text-decoration: none; + cursor: pointer; + display: inline-block; + border: 0; + padding: 4px 8px; + border-radius: 8px; + background-color: #4f46e5; } - -.o-20 { - opacity: 0.2; +.btn-primary:hover { + background-color: rgb(100.2701421801, 92.3578199052, 232.1421800948); } -.o-30 { - opacity: 0.3; +.btn-complement-primary { + text-decoration: none; + cursor: pointer; + display: inline-block; + border: 0; + padding: 4px 8px; + border-radius: 8px; + background-color: #4f46e5; + color: rgb(224.2298578199, 232.1421800948, 92.3578199052); } - -.o-40 { - opacity: 0.4; +.btn-complement-primary:hover { + color: #4f46e5; + background-color: rgb(224.2298578199, 232.1421800948, 92.3578199052); } -.o-50 { - opacity: 0.5; +.btn-secondary { + text-decoration: none; + cursor: pointer; + display: inline-block; + border: 0; + padding: 4px 8px; + border-radius: 8px; + background-color: #ec4899; } - -.o-60 { - opacity: 0.6; +.btn-secondary:hover { + background-color: rgb(238.3985148515, 95.1014851485, 165.8762376238); } -.o-70 { - opacity: 0.7; +.btn-info { + text-decoration: none; + cursor: pointer; + display: inline-block; + border: 0; + padding: 4px 8px; + border-radius: 8px; + background-color: #3b82f6; } - -.o-80 { - opacity: 0.8; +.btn-info:hover { + background-color: rgb(83.3804878049, 145.5487804878, 247.1195121951); } -.o-90 { - opacity: 0.9; +.btn-error { + text-decoration: none; + cursor: pointer; + display: inline-block; + border: 0; + padding: 4px 8px; + border-radius: 8px; + background-color: #ef4444; } - -.o-100 { - opacity: 1; +.btn-error:hover { + background-color: rgb(241.0098522167, 91.4901477833, 91.4901477833); } -.br { +.btn-outline-orange { + text-decoration: none; + cursor: pointer; + display: inline-block; + border: 0; + padding: 4px 8px; border-radius: 8px; + background-color: #fff; + border: 1px solid #fb923c; } - -.br-none { - border-radius: 0; +.btn-outline-orange:hover { + background-color: #fb923c; } -.br-sm { +.btn-outline-purple { + text-decoration: none; + cursor: pointer; + display: inline-block; + border: 0; + padding: 4px 8px; border-radius: 8px; + background-color: #fff; + border: 1px solid #8b5cf6; } - -.br-md { - border-radius: 16px; +.btn-outline-purple:hover { + background-color: #8b5cf6; } -.br-lg { - border-radius: 24px; +.navbar .container, .navbar-primary .container, .navbar, .navbar-primary { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + box-sizing: border-box; } -.br-xl { - border-radius: 32px; +.navbar, .navbar-primary { + padding: 4px 8px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); +} +.navbar .site-title, .navbar-primary .site-title { + font-size: 1.5rem; +} +.navbar-primary { + background-color: #4f46e5; } -.br-2xl { - border-radius: 40px; +/* Utilities (margin, padding, opacity, display, etc.) */ +.p-0 { + padding: 0; } -.br-3xl { - border-radius: 48px; +.p-3 { + padding: 12px; } -.br-4xl { - border-radius: 56px; +.p-10 { + padding: 40px; } -.br-5xl { - border-radius: 64px; +.pt-3 { + padding-top: 12px; } -.br-full { - border-radius: 9999px; +.pt-4 { + padding-top: 16px; } -.d-n { - display: none; +.pb-3 { + padding-bottom: 12px; } -.d-b { - display: block; +.pb-4 { + padding-bottom: 16px; } -.d-i { - display: inline; +.m-1 { + margin: 4px; } -.d-f { - display: flex; +.ml-1 { + margin-left: 4px; } -.d-i-b { - display: inline-block; +.ml-4 { + margin-left: 16px; } -.cursor-auto { - cursor: auto; +.mt-1 { + margin-top: 4px; } -.cursor { - cursor: default; +.mt-2 { + margin-top: 8px; } -.cursor-pointer { - cursor: pointer; +.mt-5 { + margin-top: 20px; } -.cursor-wait { - cursor: wait; +.mb-2 { + margin-bottom: 8px; } -.cursor-text { - cursor: text; +.mb-3 { + margin-bottom: 12px; } -.cursor-move { - cursor: move; +.br { + border-radius: 8px; } -.cursor-not-allowed { - cursor: not-allowed; +.br-sm { + border-radius: 8px; } .fs-xs { @@ -4718,38 +508,6 @@ span { font-size: 1.5rem; } -.fw-thin { - font-weight: 100; -} - -.fw-extra-light { - font-weight: 200; -} - -.fw-light { - font-weight: 300; -} - -.fw-normal { - font-weight: 400; -} - -.fw-medium { - font-weight: 500; -} - -.fw-semi-bold { - font-weight: 600; -} - -.fw-bold { - font-weight: 700; -} - -.fw-extra-bold { - font-weight: 800; -} - .fw-black { font-weight: 900; } \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 0991a54..ece4ac0 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,14 +1,17 @@ const {src, dest, watch, series} = require('gulp'); const sass = require('gulp-sass')(require('sass')); +const purgecss = require('gulp-purgecss'); + function buildStyles() { - return src('clipcss/**/*.scss') + return src('sass/**/*.scss') .pipe(sass()) + .pipe(purgecss({content: ['*.html']})) .pipe(dest('css')); } function watchTasks() { - watch(['clipcss/**/*.scss'], buildStyles); + watch(['sass/**/*.scss', '*.html'], buildStyles); } exports.default = series(buildStyles, watchTasks) \ No newline at end of file diff --git a/index.html b/index.html index c9010f9..0a7e654 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,16 @@ +

Colors

@@ -91,7 +101,7 @@

Card Title

-
+

Card Title

This is some content inside the card. It can include text, images, or anything else you like!

@@ -102,7 +112,7 @@

Card Title

-
+

Card Title

This is some content inside the card. It can include text, images, or anything else you like!

@@ -113,7 +123,7 @@

Card Title

-
+

Card Title

This is some content inside the card. It can include text, images, or anything else you like!

@@ -124,7 +134,7 @@

Card Title

-
+

Card Title

This is some content inside the card. It can include text, images, or anything else you like!

diff --git a/package-lock.json b/package-lock.json index 9d10825..c7d4f76 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "devDependencies": { "gulp": "^5.0.0", + "gulp-purgecss": "^6.0.0", "gulp-sass": "^5.1.0", "sass": "^1.79.3" } @@ -37,6 +38,120 @@ "node": ">=10.13.0" } }, + "node_modules/@isaacs/cliui": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", + "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", + "dev": true, + "license": "ISC", + "dependencies": { + "string-width": "^5.1.2", + "string-width-cjs": "npm:string-width@^4.2.0", + "strip-ansi": "^7.0.1", + "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", + "wrap-ansi": "^8.1.0", + "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@isaacs/cliui/node_modules/ansi-regex": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", + "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, + "node_modules/@isaacs/cliui/node_modules/ansi-styles": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", + "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@isaacs/cliui/node_modules/emoji-regex": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", + "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@isaacs/cliui/node_modules/string-width": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", + "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", + "dev": true, + "license": "MIT", + "dependencies": { + "eastasianwidth": "^0.2.0", + "emoji-regex": "^9.2.2", + "strip-ansi": "^7.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@isaacs/cliui/node_modules/strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^6.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" + } + }, + "node_modules/@isaacs/cliui/node_modules/wrap-ansi": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", + "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^6.1.0", + "string-width": "^5.0.1", + "strip-ansi": "^7.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, + "node_modules/@pkgjs/parseargs": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", + "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==", + "dev": true, + "license": "MIT", + "optional": true, + "engines": { + "node": ">=14" + } + }, "node_modules/ansi-colors": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz", @@ -200,6 +315,13 @@ "node": ">=10.13.0" } }, + "node_modules/balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true, + "license": "MIT" + }, "node_modules/bare-events": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.5.0.tgz", @@ -254,6 +376,16 @@ "readable-stream": "^3.4.0" } }, + "node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "license": "MIT", + "dependencies": { + "balanced-match": "^1.0.0" + } + }, "node_modules/braces": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", @@ -383,6 +515,16 @@ "dev": true, "license": "MIT" }, + "node_modules/commander": { + "version": "12.1.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz", + "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/convert-source-map": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", @@ -404,6 +546,50 @@ "node": ">= 10.13.0" } }, + "node_modules/cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, + "license": "MIT", + "dependencies": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/cross-spawn/node_modules/which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "license": "ISC", + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "node-which": "bin/node-which" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true, + "license": "MIT", + "bin": { + "cssesc": "bin/cssesc" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/detect-file": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz", @@ -428,6 +614,13 @@ "node": ">= 10.13.0" } }, + "node_modules/eastasianwidth": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", + "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", + "dev": true, + "license": "MIT" + }, "node_modules/emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", @@ -605,6 +798,23 @@ "node": ">=0.10.0" } }, + "node_modules/foreground-child": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz", + "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==", + "dev": true, + "license": "ISC", + "dependencies": { + "cross-spawn": "^7.0.0", + "signal-exit": "^4.0.1" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/fs-mkdirp-stream": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/fs-mkdirp-stream/-/fs-mkdirp-stream-2.0.1.tgz", @@ -654,6 +864,27 @@ "node": "6.* || 8.* || >= 10.*" } }, + "node_modules/glob": { + "version": "10.4.5", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", + "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", + "dev": true, + "license": "ISC", + "dependencies": { + "foreground-child": "^3.1.0", + "jackspeak": "^3.1.2", + "minimatch": "^9.0.4", + "minipass": "^7.1.2", + "package-json-from-dist": "^1.0.0", + "path-scurry": "^1.11.1" + }, + "bin": { + "glob": "dist/esm/bin.mjs" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/glob-parent": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", @@ -812,6 +1043,33 @@ "node": ">=10.13.0" } }, + "node_modules/gulp-purgecss": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/gulp-purgecss/-/gulp-purgecss-6.0.0.tgz", + "integrity": "sha512-NZS8GQ8Yga/exoI0Coq6VOvjP5DL13NwcFc6K70zIWM3ZVsyr4KgoepeYaOqH5gOCMv7vbzX0q4TeCNmi1687w==", + "dev": true, + "license": "MIT", + "dependencies": { + "glob": "^10.3.10", + "plugin-error": "^2.0.0", + "purgecss": "^6.0.0", + "through2": "^4.0.1", + "vinyl-sourcemaps-apply": "^0.2.1" + } + }, + "node_modules/gulp-purgecss/node_modules/plugin-error": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-2.0.1.tgz", + "integrity": "sha512-zMakqvIDyY40xHOvzXka0kUvf40nYIuwRE8dWhti2WtjQZ31xAgBZBhxsK7vK3QbRXS1Xms/LO7B5cuAsfB2Gg==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-colors": "^1.0.1" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/gulp-sass": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-5.1.0.tgz", @@ -1139,6 +1397,22 @@ "node": ">=0.10.0" } }, + "node_modules/jackspeak": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz", + "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "@isaacs/cliui": "^8.0.2" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + }, + "optionalDependencies": { + "@pkgjs/parseargs": "^0.11.0" + } + }, "node_modules/last-run": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/last-run/-/last-run-2.0.0.tgz", @@ -1185,6 +1459,13 @@ "dev": true, "license": "MIT" }, + "node_modules/lru-cache": { + "version": "10.4.3", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", + "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==", + "dev": true, + "license": "ISC" + }, "node_modules/map-cache": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz", @@ -1209,6 +1490,32 @@ "node": ">=8.6" } }, + "node_modules/minimatch": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "dev": true, + "license": "ISC", + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/minipass": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", + "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, "node_modules/mute-stdout": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/mute-stdout/-/mute-stdout-2.0.0.tgz", @@ -1219,6 +1526,25 @@ "node": ">= 10.13.0" } }, + "node_modules/nanoid": { + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, "node_modules/normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", @@ -1281,6 +1607,13 @@ "wrappy": "1" } }, + "node_modules/package-json-from-dist": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz", + "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==", + "dev": true, + "license": "BlueOak-1.0.0" + }, "node_modules/parse-filepath": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz", @@ -1306,6 +1639,16 @@ "node": ">=0.10.0" } }, + "node_modules/path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", @@ -1336,6 +1679,23 @@ "node": ">=0.10.0" } }, + "node_modules/path-scurry": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz", + "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "lru-cache": "^10.2.0", + "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" + }, + "engines": { + "node": ">=16 || 14 >=14.18" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/picocolors": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz", @@ -1372,6 +1732,65 @@ "node": ">= 0.10" } }, + "node_modules/postcss": { + "version": "8.4.47", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz", + "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.1.0", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/postcss-selector-parser": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", + "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", + "dev": true, + "license": "MIT", + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/purgecss": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-6.0.0.tgz", + "integrity": "sha512-s3EBxg5RSWmpqd0KGzNqPiaBbWDz1/As+2MzoYVGMqgDqRTLBhJW6sywfTBek7OwNfoS/6pS0xdtvChNhFj2cw==", + "dev": true, + "license": "MIT", + "dependencies": { + "commander": "^12.0.0", + "glob": "^10.3.10", + "postcss": "^8.4.4", + "postcss-selector-parser": "^6.0.7" + }, + "bin": { + "purgecss": "bin/purgecss.js" + } + }, "node_modules/queue-tick": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz", @@ -1613,6 +2032,42 @@ "node": ">= 10.13.0" } }, + "node_modules/shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "license": "MIT", + "dependencies": { + "shebang-regex": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", @@ -1700,6 +2155,22 @@ "node": ">=8" } }, + "node_modules/string-width-cjs": { + "name": "string-width", + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "license": "MIT", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/strip-ansi": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", @@ -1713,6 +2184,20 @@ "node": ">=8" } }, + "node_modules/strip-ansi-cjs": { + "name": "strip-ansi", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -1769,6 +2254,16 @@ "b4a": "^1.6.4" } }, + "node_modules/through2": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz", + "integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==", + "dev": true, + "license": "MIT", + "dependencies": { + "readable-stream": "3" + } + }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -1974,6 +2469,25 @@ "url": "https://github.com/chalk/wrap-ansi?sponsor=1" } }, + "node_modules/wrap-ansi-cjs": { + "name": "wrap-ansi", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", diff --git a/package.json b/package.json index e44463f..72806ba 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "license": "MIT", "devDependencies": { "gulp": "^5.0.0", + "gulp-purgecss": "^6.0.0", "gulp-sass": "^5.1.0", "sass": "^1.79.3" } diff --git a/sass/index.scss b/sass/index.scss new file mode 100644 index 0000000..27be78a --- /dev/null +++ b/sass/index.scss @@ -0,0 +1 @@ +@import 'clipcss'; \ No newline at end of file diff --git a/site.html b/site.html new file mode 100644 index 0000000..f03cdd9 --- /dev/null +++ b/site.html @@ -0,0 +1,95 @@ + + + + + + + My Portfolio + + + + +
+ + + +
+
+
+

+
Black-Belt
+
Your Website
+

+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+ View Our Work +
+
+ +
+
+
+ + +
+
+

About Shinobi Designs

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa ipsam animi aliquid sequi fuga, nam nesciunt dolore libero dolorem exercitationem aliquam cupiditate atque illo, quae dicta doloribus et? Ab ipsam inventore quam asperiores, sequi unde tenetur accusamus, distinctio magni necessitatibus quis deserunt id alias. Iste eum ea labore rerum voluptatibus.

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Soluta nam, corrupti dolorum inventore perspiciatis id illum repellat iste amet sapiente ducimus nihil molestias quasi, totam, ratione minima molestiae blanditiis iure consequatur praesentium debitis. Nulla maiores doloremque tempore nobis dolorum amet!

+
+
+ + +
+
+

Some of Our Work

+
+
+
+

Mario Club

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, hic!

+
+
+
+
+

Ninja Food

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, hic!

+
+
+
+
+

Just Add Marmite

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, hic!

+
+
+
+
+

Ninja Notes

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, hic!

+
+
+
+
+ +
+
+
+ + + + + \ No newline at end of file