// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
// Color system
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #cfcfcf;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
$dark-black: #151515;
$light-green: #bbe05a;
$gray-dark: #2b2b2b;
$gray-dark-100: #30312b;
$gray-dark-200: #242829;
$dark-gray-300: #282828;
$purple-dark: #2e0344;
$purple-sec: #49066d;
$yellow: #FFAC1F;
$blue: #73d7ff;
$indigo: #6610f2;
$purple: #6C2691;
$pink: #d63384;
$red: #f00;
$orange: #fd7e14;
$yellow: #ffb029;
$green: #198754;
$teal: #c694e5;
$cyan: #0dcaf0;
// scss-docs-start colors-map
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800,
"light-green": $light-green
);
// scss-docs-end colors-map
$primary: $purple;
$secondary: $yellow;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;
// scss-docs-start theme-colors-map
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark,
"white": $white
);
// scss-docs-end theme-colors-map
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
$min-contrast-ratio: 4.5;
// Customize the light and dark text colors for use in our color contrast function.
$color-contrast-dark: $black;
$color-contrast-light: $white;
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-caret: true;
$enable-rounded: true;
$enable-shadows: false;
$enable-gradients: false;
$enable-transitions: true;
$enable-reduced-motion: true;
$enable-smooth-scroll: true;
$enable-grid-classes: true;
$enable-button-pointers: true;
$enable-rfs: true;
$enable-validation-icons: true;
$enable-negative-margins: false;
$enable-deprecation-messages: true;
$enable-important-utilities: true;
$spacer: 0.625rem;
$spacers: ();
$spacers: map-merge(
(
0: 0,
5: ($spacer * .5),
10: ($spacer * 1),
15: ($spacer * 1.5),
20: ($spacer * 2),
25: ($spacer * 2.5),
30: ($spacer * 3),
),
$spacers
);
// Body
//
// Settings for the `` element.
$body-bg: $white;
$body-color: $dark-black;
// Links
//
// Style anchor elements.
$link-color: $primary;
$link-decoration: none;
$link-shade-percentage: 20%;
$link-hover-color: shift-color($link-color, $link-shade-percentage);
$link-hover-decoration: null;
// Paragraphs
//
// Style p element.
$paragraph-margin-bottom: 22px;
// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
// scss-docs-start grid-breakpoints
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1500px,
xxxl: 1800px
);
// scss-docs-end grid-breakpoints
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
// scss-docs-start container-max-widths
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1160px,
xxl:1160px,
xxxl: 1160px
);
// scss-docs-end container-max-widths
@include _assert-ascending($container-max-widths, "$container-max-widths");
// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12;
$grid-gutter-width: 30px;
$gutters: $spacers;
$border-radius: 50px;
$border-radius-sm: 25px;
$border-radius-lg: 100px;
// Container padding
$container-padding-x: $grid-gutter-width / 2;
$base-min-width: 375px;
// This is the default html and body font-size for the base rem value.
$rem-base: 16px;
// Typography
//
// Font, line-height, and color for body text, headings, and more.
$arial-font: Arial, Helvetica, sans-serif;
$gotham-font: 'gotham', $arial-font;
$dm-sans-font: 'DM Sans', $arial-font;
// stylelint-enable value-keyword-case
$font-family-base: $dm-sans-font;
// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
// $font-size-base effects the font size of the body text
$font-size-root: null;
$font-size-base: 18px;
$line-height-base: 1.34;
$h1-font-size: 88px;
$h2-font-size: 56px;
$h3-font-size: 40px;
$h4-font-size: 24px;
$h5-font-size: 20px;
$h6-font-size: 18px;
// scss-docs-start font-sizes
$font-sizes: (
1: $h1-font-size,
2: $h2-font-size,
3: $h3-font-size,
4: $h4-font-size,
5: $h5-font-size,
6: $h6-font-size
);
// scss-docs-end font-sizes
$headings-margin-bottom: $spacer / 2;
$headings-font-family: $gotham-font;
$headings-font-style: null;
$headings-font-weight: 800;
$headings-line-height: 1.15;
$headings-color: $purple-sec;
// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.
$btn-padding-y: 17px;
$btn-padding-x: 40px;
$btn-font-family: $headings-font-family;
$btn-font-size: 24px;
$btn-line-height: 1.3;
$btn-white-space: null;
$btn-padding-y-sm: $input-btn-padding-y-sm;
$btn-padding-x-sm: $input-btn-padding-x-sm;
$btn-font-size-sm: $input-btn-font-size-sm;
$btn-padding-y-lg: 15px;
$btn-padding-x-lg: 44px;
$btn-font-size-lg: 32px;
$btn-border-width: $input-btn-border-width;
$btn-font-weight: $font-weight-bold;
$btn-box-shadow: none;
$btn-focus-box-shadow: none;
$btn-disabled-opacity: .65;
$btn-active-box-shadow: none;
$btn-link-color: $white;
$btn-link-hover-color: $link-hover-color;
$btn-link-disabled-color: $gray-600;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius;
$btn-border-radius-sm: $border-radius-sm;
$btn-border-radius-lg: $border-radius-lg;
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
// scss-docs-start navbar-theme-variables
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,");
$navbar-light-toggler-border-color: inherit;
$accordion-icon-color: #3D045C;
$accordion-icon-active-color: #3D045C;
$accordion-button-icon: url("data:image/svg+xml,");
$accordion-button-active-icon: url("data:image/svg+xml,");