Stylesheets

foundations!!!.css

/*
GLOBAL DESIGN TOKENS
-
Global design tokens have no awareness of intention, design or usage context.
*/


@font-face {
  font-family: "Suisse Int'l";
  src: url("../SuisseIntl/SuisseIntl-UltraLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Suisse Int'l";
  src: url("../SuisseIntl/SuisseIntl-Book.otf") format("opentype");
  font-weight: 450;
  font-style: normal;
}

@font-face {   font-family: "Suisse Int'l";
  src: url("../SuisseIntl/SuisseIntl-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}


:root {
/* || Breakpoints */
  --breakpoint-small-mini: 744px;
  --breakpoint-small: 1133px;
  --breakpoint-medium: 1366px;
  --breakpoint-large: 1440px;
  --breakpoint-xxlarge: 2560px;

/* || SPACING */
  --no-space: 0px;
  --s-space-xxs: 4px;
  --s-space-xs: 8px;
  --s-space-sm: 16px;
  --s-space-md: 24px;
  --s-space-lg: 32px;
  --s-space-xl: 48px;
  --s-space-xxl: 64px;
  --l-space-xs: 80px;
  --l-space-sm: 104px;
  --l-space-md: 240px;

/* || Typography */
  /* Font Family */
  --font-family: "Suisse Int'l";

  /* Font Sizes */
  --font-size-peta: 3rem;
  --font-size-tera: 2.25rem;
  --font-size-giga: 1.625rem;
  --font-size-mega: 1.25rem;
  --font-size-kilo: 1.063rem;
  --font-size-milli: 0.875rem;

  /* Font Weight */
  --font-weight-light: 300;
  --font-weight-book: 450;
  --font-weight-semibold: 600;

  /* Line Height */
  --line-height-tiny: 100%;
  --line-height-small: 120%;
  --line-height-medium: 135%;
  --line-height-tall: 140%;
  --line-height-extra-tall: 150%;

  /* Letter Spacing */
  --letter-spacing-none: 0%;
  --letter-spacing-kilo: 1%;
  --letter-spacing-mega: 3%;


/* || Color */
  /* Gray Palette */
  --gray-dark: #434343;
  --gray-medium: #9E9E9E;
  --gray-primary: #D9D9D9;
  --gray-light: #F7F7F7;

  /* Black Palette */
  --black-dark: #000000;
  --black-primary: #171717;
  --white-primary: #FFFFFF;

  /* Secondary Palette */
  --yellow-dark: #DAED68;
  --yellow-light: #BEAB19;

  --orange-dark: #F1693E;
  --orange-light: #E4562B;

  --red-dark: #F00925;
  --red-light: #D12B3f;

  --pink-dark: #F92A83;
  --pink-light: #F92A83;

  --orchid-dark: #C263A7;
  --orchid-light: #C12D97;

  --green-dark: #00987D;
  --green-light: #00987D;

  --lt-blue-dark: #80AAe9;
  --lt-blue-light: #3A7CDF;

  --blue-dark: #006BE6;
  --blue-light: #2061A9;


/* || BORDER THICKNESS */
  --no-border: 0px;
  --border-thin: 1px;
  --border-skinny: 2px;
  --border-medium: 4px;

/* || BORDER RADIUS */
  --square: 0px;
  --softly-rounded: 4px;
  --rounded: 8px;
  --pill: 100%;

/* || OPACITY */
  --opacity-total: 1;
  --opacity-high: 0.8;
  --opacity-medium: 0.5;
  --opacity-soft: 0.3;
  --opacity-light: 0.15;
  --opacity-bright: 0.1;
  --opacity-zero: 0;

/* || MOTION */
  --easing-slow-entry-fast-exit: cubic-bezier(0, 0, 0.4, 1);
  --easing-fast-entrace-slow-exit: cubic-bezier(0.45, 0, 1, 1);
  --easing-slow-entrace-slow-exit: cubic-bezier(0.45, 0, 0.4, 1);

/* || DURATION */
  --took-off: 100ms;
  --super-fast: 260ms;
  --good-driver: 560ms;
  --slow: 800ms;
  --really-slow: 1s;
  --nanas-driving: 2s;

/* || Z-INDEX */
  --zindex-underworld: 0;
  --zindex-first-level: 1;
  --zindex-second-level: 2;
  --zindex-third-level: 3;
  --zindex--fourth-level: 4;
  --zindex-fifth-level: 5;
  --zindex-sixth-level: 6;
  --zindex-seventh-level: 7;
  --zindex-eighth-level: 8;
  --zindex-outer-space: 9;