// // Purpose config file // This is a starter configuration file to help developers customize the appearance of the website // More options will be added soon for dark mode and more ... // Color system // // White/Grays/Black colors $white: #FFF; $gray-50: #FAFAFA; // Alternate background $gray-100: #F5F9FC; // Base background $gray-200: #E7EAF0; $gray-300: #CFD6DF; $gray-400: #ABB6C5; $gray-500: #8898A9; // Disabled text $gray-600: #6B7B93; // Placeholder text $gray-700: #525F7F; // Text content $gray-800: #2D3748; // Text content $gray-900: #16192C; // Text content $black: #000; // Base colors // // The color variations from 100 to 900 will be automatically generated $blue: #0099FF; $indigo: #5C60F5; $purple: #8957FF; $pink: #0099FF; $magenta: #EE33FF; $red: #FF3366; $orange: #FF8C00; $yellow: #FFBB00; $green: #00CC88; $teal: #22DDDD; $cyan: #00D4FF; // Theme colors // // Choose the colors corresponding to your brand $primary: $pink; $secondary: $gray-300; $tertiary: $pink; $success: $green; $info: $cyan; $warning: $orange; $danger: $red; $light: $gray-200; $dark: $gray-900; // Body // // Settings for the `` element. $body-bg: $dark; $body-color: $white; $body-text-align: null; // Components // // Define common box shadow and border radius sizes and more. $border-width: 1px; $border-color: $gray-200; $border-radius-sm: .25rem; $border-radius: .375rem; $border-radius-lg: .5rem; $border-radius-xl: .75rem; $border-radius-2xl: 1rem; $border-radius-3xl: 1.5rem; $border-radius-4xl: 3rem; $border-radius-5xl: 4rem; $border-radius-6xl: 5rem; $border-radius-7xl: 6rem; $border-radius-8xl: 7rem; $border-radius-pill: 50rem; $border-radius-circle: 50%; $box-shadow-sm: 0px 1px 1px 0px rgba(10, 22, 70, 0.1), 0px 0px 1px 0px rgba(10, 22, 70, 0.06); $box-shadow: 0px 3px 3px -1px rgba(10, 22, 70, 0.1), 0px 0px 1px 0px rgba(10, 22, 70, 0.06); $box-shadow-lg: 0px 6px 6px -1px rgba(10, 22, 70, 0.1), 0px 0px 1px 0px rgba(10, 22, 70, 0.06); $box-shadow-xl: 0px 9px 9px -1px rgba(10, 22, 70, 0.1), 0px 0px 1px 0px rgba(10, 22, 70, 0.06); $box-shadow-2xl: 0px 16px 16px -1px rgba(10, 22, 70, 0.1), 0px 0px 1px 0px rgba(10, 22, 70, 0.06); $box-shadow-3xl: 0px 32px 40px -2px rgba(10, 22, 70, 0.11), 0px 0px 1px 0px rgba(10, 22, 70, 0.06); $box-shadow-4xl: 0px 36px 50px 0 rgba(10, 22, 70, 0.1), 0px 0px 1px 0px rgba(10, 22, 70, 0.06); $box-shadow-inset: inset 0 1px 2px rgba($black, .075); $box-shadow-outline: 0 0 0 3px rgba(66, 153, 225, 0.5); $box-shadow-focus: 0 0 0 3px rgba(66, 153, 225, 0.5); // General component settings $component-active-color: $white; $component-active-bg: $primary; // Links // // Style anchor elements. $link-color: $primary; $link-decoration: none; $link-hover-color: shade-color($link-color, 15%); $link-hover-decoration: none; // Darken percentage for links with `.text-*` class (e.g. `.text-success`) $emphasized-link-hover-darken-percentage: 15%; // Typography $font-sans-serif: "Open Sans"; $font-display: $font-sans-serif; $font-monospace: null; $font-serif: null; $font-weight-lighter: lighter; $font-weight-light: 300; $font-weight-normal: 400; $font-weight-semibold: 500; $font-weight-bold: 600; $font-weight-bolder: bolder; $font-weight-black: 800; $line-height-base: 1.625; $headings-color: $gray-900;