_configuration.sass

// TODO: ranger

// MAIN COLORS
$color-accent: #0038FF !default
$color-text: #000000 !default
$color-text-alt: #454545 !default
$color-border: rgba(0, 0, 0, 0.30) !default
$color-background-alt: #F2F2F2 !default
$color-background: #FFFFFF !default

// TODO : faut-il mettre les largeur de border dans le config ? overkill ?

$body-color: $color-text !default
$body-background-color: $color-background !default
$link-color: $color-text !default

// TYPOGRAPHY

// Fonts family
$body-font-family: "Georgia", "Times", serif !default
$heading-font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif !default

// Base
$font-size-base: 16px !default
$line-height-base: 140% !default

// Headings
$heading-font-weight: normal !default

// h1
$h1-size-md: px2rem(60) !default
$h1-size: px2rem(30) !default
$h1-line-height: 120% !default
$h1-weight: bold !default
$h1-text-transform: none !default

// h2
$h2-size-md: px2rem(40) !default
$h2-size: px2rem(24) !default
$h2-line-height: 120% !default
$h2-weight: $heading-font-weight !default
$h2-text-transform: none !default

// h3
$h3-size-md: px2rem(28) !default
$h3-size: px2rem(20) !default
$h3-line-height: 130% !default
$h3-weight: bold !default
$h3-text-transform: none !default

// h4
$h4-size-md: px2rem(24) !default
$h4-size: px2rem(16) !default
$h4-line-height: 130% !default
$h4-weight: bold !default
$h4-text-transform: none !default

// h5 or Section
$h5-size-md: px2rem(24) !default
$h5-size: px2rem(20) !default
$h5-line-height: 130% !default
$h5-weight: $heading-font-weight !default
$h5-text-transform: uppercase !default

// h6 or Tab
$h6-size-md: px2rem(20) !default
$h6-size: px2rem(14) !default
$h6-line-height: 18% !default
$h6-weight: $heading-font-weight !default
$h6-text-transform: uppercase !default

// Lead
$lead-font-family: $heading-font-family !default
$lead-size-md: px2rem(60) !default
$lead-size: px2rem(24) !default
$lead-line-height: 120% !default
$lead-weight: $heading-font-weight !default

// Body
$body-size-md: px2rem(22) !default
$body-size: px2rem(16) !default
$body-line-height: 160% !default
$body-weight: normal !default

// Small
$small-font-family: $body-font-family !default
$small-size-md: px2rem(18) !default
$small-size: px2rem(14) !default
$small-line-height: 160% !default
$small-weight: normal !default

// Signature
$signature-font-family: $heading-font-family !default
$signature-size-md: px2rem(22)
$signature-size: px2rem(18)
$signature-line-height: 130% !default
$signature-weight: $heading-font-weight !default

// Meta
$meta-font-family: $heading-font-family !default
$meta-size-md: px2rem(18)
$meta-size: px2rem(14)
$meta-line-height: 150% !default
$meta-weight: $heading-font-weight !default

// Quotes
$quote-size-md: px2rem(24) !default
$quote-size-short: px2rem(60) !default
$quote-size-long: px2rem(40) !default
$quote-line-height: 120% !default
$quote-weight: normal !default
$quote-style: italic !default

// Buttons
$btn-font-size-md: px2rem(18) !default // TODO
$btn-font-size: px2rem(14) !default
$btn-padding-x-md: px2rem(50) !default
$btn-padding-y-md: px2rem(15) !default
$btn-padding-x: px2rem(20) !default
$btn-padding-y: px2rem(13) !default
$btn-border-radius: px2rem(4) !default

// Breadcrumb
$breadcrumb-color: $color-text !default

// Spacing
$spacing0: px2rem(12) !default
$spacing1: px2rem(24) !default
$spacing2: px2rem(48) !default
$spacing3: px2rem(64) !default
$spacing4: px2rem(128) !default
$spacing5: px2rem(256) !default

// TODO: choisir entre margin top / bottom --> https://matthewjamestaylor.com/css-margin-top-vs-bottom

// Grid
$grid-gutter: px2rem(64) !default
$grid-max-width: px2rem(1980) !default
$grid-gutter-sm: px2rem(40) !default

// Z-index
$zindex-nav-accessibility: 1010 !default
$zindex-stretched-link: 2 !default
$zindex-header: 52 !default
$zindex-body-overlay: 51 !default
$zindex-toc: 60 !default
$zindex-toc-cta: 49 !default
$zindex-aside: 48 !default

// Header
$header-color: $color-text !default
$header-hover-color: rgba($header-color, 0.7) !default // TODO : Réflechir à plus élégant / générique
$header-background: $color-background-alt !default
$header-transition: 0.3s !default
$header-dropdown-full: false !default
$header-dropdown-background: $header-background !default
$header-dropdown-color: $header-color !default
$header-dropdown-transition: $header-transition !default
$header-sticky-enabled: true !default
$header-sticky-background: $color-background !default
$header-sticky-dropdown-background: $header-background !default
$header-sticky-color: $header-color !default
$header-sticky-transition: $header-transition !default
$header-nav-padding-y: $spacing0 !default
$header-logo-height: 20px !default
$header-logo-height-md: $header-logo-height !default
$header-height: 84px !default
$header-height-md: 74px !default

// Navs
$body-overlay-color: rgba(0, 0, 0, 0.3) !default

// Footer
$footer-color: $color-text !default
$footer-background-color: color-contrast($color-background, 3%) !default
$footer-logo-height: $header-logo-height !default
$footer-logo-height-md: $footer-logo-height !default

// Hero
$hero-height: 375px !default
$hero-height-md: 550px !default
$hero-color: $color-text !default
$hero-background-color: $color-background-alt !default

// Icons
$icons: ()
$icons: map-merge($icons, ("arrow": "\e905"))
$icons: map-merge($icons, ("arrow-first": "\e906"))
$icons: map-merge($icons, ("arrow-last": "\e907"))
$icons: map-merge($icons, ("arrow-left": "\e908"))
$icons: map-merge($icons, ("arrow-right": "\e909"))
$icons: map-merge($icons, ("burger": "\e902"))
$icons: map-merge($icons, ("caret": "\e904"))
$icons: map-merge($icons, ("caret-bottom": "\e911"))
$icons: map-merge($icons, ("caret-left": "\e912"))
$icons: map-merge($icons, ("caret-right": "\e913"))
$icons: map-merge($icons, ("caret-top": "\e914"))
$icons: map-merge($icons, ("close": "\e90e"))
$icons: map-merge($icons, ("download": "\e900"))
$icons: map-merge($icons, ("eye": "\e901"))
$icons: map-merge($icons, ("facebook": "\e90b"))
$icons: map-merge($icons, ("instagram": "\e90a"))
$icons: map-merge($icons, ("link-blank": "\e903"))
$icons: map-merge($icons, ("linkedin": "\e90c"))
$icons: map-merge($icons, ("list-hyphen": "\e917"))
$icons: map-merge($icons, ("pause": "\e90f"))
$icons: map-merge($icons, ("play": "\e910"))
$icons: map-merge($icons, ("search": "\e916"))
$icons: map-merge($icons, ("social": "\e915"))
$icons: map-merge($icons, ("toc": "\e918"))
$icons: map-merge($icons, ("twitter": "\e90d"))

// Breakpoints
// TODO: réécrire en sass les mixins bootstrap
$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px)  !default

// System

// Table of content
$toc-color: $color-text !default
$toc-active-color: $color-accent !default // TODO : checker ce que ça fait
$toc-font-family: $body-font-family !default
$toc-font-size: $body-size !default
$toc-font-size-md: $body-size-md !default
$toc-line-height: $h4-line-height !default
$toc-title-font-family: $toc-font-family !default
$toc-title-font-size: $toc-font-size !default
$toc-title-font-size-md: $toc-font-size-md !default

// Table
$table-head-font-size: $body-size !default
$table-head-font-size-md: $body-size !default
$table-body-size: $small-size !default
$table-body-size-md: $small-size-md !default

// BLOCKS

// Block call to action
$block-call-to-action-background: $color-accent !default
$block-call-to-action-color: $color-background !default
$block-call-to-action-button-background: $color-background !default
$block-call-to-action-button-color: $color-text !default

// Block definitions
$block-definition-border-color: $color-border !default
$block-definition-border-color-hovered: color-contrast($block-definition-border-color, 100%) !default
$block-definition-font-size: $body-size !default
$block-definition-font-size-md: $body-size-md !default

// Block pages
$block-pages-card-background: color-contrast($color-background, 10%) !default
$block-pages-card-page-background: invert($color-text) !default
$block-pages-card-page-color: $color-text !default
$block-pages-card-page-background-hover: color-contrast($color-background, 100%) !default
$block-pages-card-page-color-hover: invert($color-text) !default

// Block timeline
$block-timeline-horizontal-background: black !default
$block-timeline-horizontal-color: white !default

// Block testimonials
$block-testimonials-xl-font-size: $quote-size-short !default
$block-testimonials-xl-line-height: $quote-line-height !default
$block-testimonials-xl-font-size-long-text: $quote-size-long !default
$block-testimonials-xl-line-height-long-text: $quote-line-height !default
$block-testimonials-color: $color-accent !default
$block-testimonials-font-size: $quote-size-md !default
$block-testimonials-line-height: $quote-line-height !default
$block-testimonials-style: $quote-style !default
$block-testimonials-pagination-background: $color-border !default
$block-testimonials-pagination-progress-background: $color-text !default

// Block key_figures
$block-key_figures-font-size: px2rem(16) !default
$block-key_figures-number-font-size: px2rem(32) !default

$block-key_figures-font-size-md: px2rem(18) !default
$block-key_figures-number-font-size-md: px2rem(40) !default

$block-key_figures-font-size-lg: px2rem(20) !default
$block-key_figures-number-font-size-lg: px2rem(50) !default

$block-key_figures-font-size-xl: $block-key_figures-font-size-lg !default
$block-key_figures-number-font-size-xl: px2rem(60) !default

$block-key_figures-font-size-xxl: $block-key_figures-font-size-xl !default
$block-key_figures-number-font-size-xxl: px2rem(80) !default

// Block gallery
$block-gallery-carousel-background: $color-background-alt

// Sections
$article-title-size: $h4-size !default
$article-title-size-md: $h4-size-md !default
$article-media-background: color-contrast($color-background, 3%) !default
$article-media-aspect-ratio: 2 !default

$post-media-background: $article-media-background !default
$post-categories-color: color-contrast($color-text, 20%) !default
$post-time-color: color-contrast($color-text, 20%) !default

// Person
$persons-avatar-background-color: $color-background-alt !default

// Program
$program-essential-font-size: $h5-size !default
$program-essential-font-size-md: $h5-size-md !default
$program-share-font-size: $h5-size !default
$program-share-font-size-md: $h5-size-md !default
$program-zindex-toc: $zindex-toc !default

// Layout posts list (ne concerne pas les blocks posts)
$posts-layout-list: false !default

// MISC

// Animations
$arrow-ease-transition: cubic-bezier(0, 0.65, 0.4, 1.2) !default
$arrow-ease-transition-2: cubic-bezier(0, 0.65, 0.4, 1) !default