path: root/lab/assets/css/branches-et-canopee.css

@import 'normalize.css';
@import 'chota.min.css';

/* font-size:
 * HTML font size is 16px on most browsers, sometimes 14px.
 * Chota sets `font-size: 62.5%;`, that is 10px on most browsers.
 */

:root {
  /* Blanc cassé (offset autour de #main-page) */
  --bg-color: #f4f4f4;
  /* Bleu turquoise du ciel au lion */
  --bg-secondary-color: #cafaef;
  /* Gris violet du sol */
  --bg-ternary-color: #c7c9e2;
  --bg-canopee-color: #151a05;
  --color-canopee: #a0c43c;
  --bg-branche-color: #381e02;
  --color-primary: #14854F;
  --color-text-light: #fafafa;
  --color-lightGrey: #d2d6dd;
  --color-grey: #747681;
  --color-darkGrey: #3f4144;
  --color-error: #d43939;
  --color-success: #28bd14;
  --grid-maxWidth: 120rem;
  --grid-gutter: 0rem;
  --font-size: 1.6rem;
  --font-color: #333333;
  --font-family-sans: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next",
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
  --font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
}

body {
  background-color: var(--bg-color);
}

#main-page {
  background-color: var(--bg-ternary-color);
  padding: 0;
}

header {
  margin-bottom: 4rem;
}

header>nav {
  background-color: var(--bg-canopee-color);
  padding-left: 1rem;
  padding-right: 1rem;
}

#logo {
  font-size: 3.2rem;
  color: var(--color-text-light);
}

section div {
  padding-left: 4rem;
  padding-right: 4rem;
  margin-top: 2rem;
}

section p {
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 2rem;
}

section .canopee {
  border-radius: 3rem;
  background-color: var(--bg-canopee-color);
  color: var(--color-canopee);
  margin-bottom: 4rem;
}

section .canopee.left {
  margin-left: 0;
  padding-left: 6rem;
  border-top-left-radius: 0rem;
  border-bottom-left-radius: 0rem;
}

section .canopee.right {
  margin-right: 0;
  border-top-right-radius: 0rem;
  border-bottom-right-radius: 0rem;
}

section .canopee p {
  font-size: 1.6rem;
}

section .branche {
  background-color: var(--bg-branche-color);
  color: var(--color-text-light);
  padding-bottom: 4rem;
  padding-top: 4rem;
}

section .branche p {
  font-size: 2.6rem;
  margin: 0;
}

footer {
  padding: 4rem;
  border-top: 1px solid var(--bg-color);
}