_configuration.sass

// 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

$body-color: $color-text !default
$body-background-color: $color-background !default
$link-color: $color-text !default
$link-underline-offset: 0.2em !default

// Grid
$grid-gutter: px2rem(64) !default
$grid-max-width: px2rem(1980) !default
$grid-gutter-sm: px2rem(44) !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
$spacing-section-y: px2rem(36) !default

// TYPOGRAPHY

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

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

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

// h2
$h2-font-family: $heading-font-family !default
$h2-size-desktop: 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-font-family: $heading-font-family !default
$h3-size-desktop: px2rem(28) !default
$h3-size: px2rem(20) !default
$h3-line-height: 130% !default
$h3-weight: bold !default
$h3-text-transform: none !default

// h4
$h4-font-family: $heading-font-family !default
$h4-size-desktop: px2rem(22) !default
$h4-size: px2rem(16) !default
$h4-line-height: 130% !default
$h4-weight: bold !default
$h4-text-transform: none !default

// h5 or Section
$h5-font-family: $heading-font-family !default
$h5-size-desktop: 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-font-family: $heading-font-family !default
$h6-size-desktop: px2rem(20) !default
$h6-size: px2rem(14) !default
$h6-line-height: 130% !default
$h6-weight: $heading-font-weight !default
$h6-text-transform: uppercase !default

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

$lead-sidebar-font-family: $lead-font-family !default
$lead-sidebar-size-desktop: px2rem(32) !default
$lead-sidebar-line-height: $lead-line-height !default
$lead-sidebar-weight: $lead-weight !default

$lead-hero-font-family: $lead-sidebar-font-family !default
$lead-hero-size: $lead-size !default
$lead-hero-size-desktop: $lead-sidebar-size-desktop !default
$lead-hero-line-height: $lead-sidebar-line-height !default
$lead-hero-weight: $lead-sidebar-weight !default

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

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

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

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

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

// Buttons
$btn-font-size-desktop: px2rem(18) !default // TODO
$btn-font-size: px2rem(14) !default
$btn-padding-x-desktop: $spacing1 !default
$btn-padding-y-desktop: px2rem(15) !default
$btn-padding-x: $spacing1 !default
$btn-padding-y: $spacing0 !default
$btn-border-radius: px2rem(4) !default
$btn-border: 1px solid $color-text !default
$btn-hover-background: $color-background-alt !default

// Form
$form-btn-color: $color-background !default
$form-btn-background-color: $color-accent !default
$form-input-border-radius: 4px !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-modal: 72 !default
$zindex-aside: 48 !default
$zindex-footer: 50 !default

// Header
$header-color: $color-text !default
$header-hover-color: $color-accent !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-sticky-background !default
$header-sticky-color: $header-color !default
$header-sticky-transition: $header-transition !default
$header-nav-padding-y: px2rem(20) !default
$header-nav-padding-y-desktop: px2rem(30) !default
$header-logo-height: 32px !default
$header-logo-height-desktop: $header-logo-height !default
$header-height: 87px !default
$header-height-desktop: 96px !default
$header-sticky-invert-logo: false !default
$header-border-bottom-width: 1px !default

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

// Footer
$footer-color: $color-text !default
$footer-background-color: $color-background-alt !default
$footer-logo-height: $header-logo-height !default
$footer-logo-height-desktop: $footer-logo-height !default

// Hero
$hero-height: 300px !default
$hero-height-desktop: 500px !default
$hero-color: $color-text !default
$hero-background-color: $color-background-alt !default

// Breadcrumb
$breadcrumb-color: $hero-color !default
$breadcrumb-color-active: $hero-color !default
$breadcrumb-icon: "caret-right" !default
$breadcrumb-icon-color: $color-text-alt !default

// Icons
$icons: ()
$icons: map-merge($icons, ("arrow": "\ff01"))
$icons: map-merge($icons, ("arrow-first": "\e906"))
$icons: map-merge($icons, ("arrow-last": "\e907"))
$icons: map-merge($icons, ("arrow-left": "\ff02"))
$icons: map-merge($icons, ("arrow-next": "\e909"))
$icons: map-merge($icons, ("arrow-previous": "\e908"))
$icons: map-merge($icons, ("arrow-right": "\ff00"))
$icons: map-merge($icons, ("burger": "\e902"))
$icons: map-merge($icons, ("burger-close": "\e905"))
$icons: map-merge($icons, ("caret": "\e904"))
$icons: map-merge($icons, ("caret-top": "\e914"))
$icons: map-merge($icons, ("caret-right": "\e913"))
$icons: map-merge($icons, ("caret-left": "\e912"))
$icons: map-merge($icons, ("caret-bottom": "\e911"))
$icons: map-merge($icons, ("check": "\ff06"))
$icons: map-merge($icons, ("check-inline": "\ff07"))
$icons: map-merge($icons, ("close": "\e90e"))
$icons: map-merge($icons, ("copy": "\ff03"))
$icons: map-merge($icons, ("copy-inline": "\ff04"))
$icons: map-merge($icons, ("download": "\e900"))
$icons: map-merge($icons, ("eye": "\e901"))
$icons: map-merge($icons, ("facebook": "\e90b"))
$icons: map-merge($icons, ("globe": "\ff10"))
$icons: map-merge($icons, ("instagram": "\e90a"))
$icons: map-merge($icons, ("link-blank": "\e903"))
$icons: map-merge($icons, ("link-blank-block": "\ff05"))
$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, ("social-facebook": "\ee01"))
$icons: map-merge($icons, ("social-instagram": "\ee02"))
$icons: map-merge($icons, ("social-linkedin": "\ee03"))
$icons: map-merge($icons, ("social-mastodon": "\ee04"))
$icons: map-merge($icons, ("social-peertube": "\ee05"))
$icons: map-merge($icons, ("social-rss": "\ee06"))
$icons: map-merge($icons, ("social-tiktok": "\ee07"))
$icons: map-merge($icons, ("social-vimeo": "\ee08"))
$icons: map-merge($icons, ("social-x": "\ee09"))
$icons: map-merge($icons, ("social-youtube": "\ee0a"))
$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, desktop: 992px, 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-background-color: $color-background-alt !default
$toc-font-family: $body-font-family !default
$toc-font-size: $body-size !default
$toc-font-size-desktop: $body-size-desktop !default
$toc-line-height: $body-line-height !default
$toc-title-font-family: $meta-font-family !default
$toc-title-font-size: $meta-size !default
$toc-title-font-size-desktop: $meta-size-desktop !default
$toc-sticky-transition: 0.4s
$toc-overlay-color: $body-overlay-color !default

// Table
$table-head-font-size: $h4-size !default
$table-head-font-size-desktop: $h4-size-desktop !default
$table-body-size: $body-size !default
$table-body-size-desktop: $body-size-desktop !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-call-to-action-button-hover-background: $color-text-alt !default
$block-call-to-action-button-hover-color: $color-background !default

// Block chapter
$block-chapter-layout-accent-background: $color-accent !default
$block-chapter-layout-accent-color: $color-background !default
$block-chapter-layout-alt-background: $color-background-alt !default
$block-chapter-layout-alt-color: $color-text !default

// Block definitions
$block-definition-border-color: $color-border !default
$block-definition-border-color-hovered: $color-accent !default
$block-definition-color-hovered: $color-accent !default
$block-definition-font-size: $body-size !default
$block-definition-font-size-desktop: $body-size-desktop !default

// Block pages
$block-pages-card-background: $color-background-alt !default
$block-pages-card-page-background: $color-background !default
$block-pages-card-page-color: $color-text !default
$block-pages-card-page-background-hover: $color-accent !default
$block-pages-card-page-color-hover: $color-background !default

// Block posts
$block-posts-grid-columns: 3 !default

// Block timeline
$block-timeline-horizontal-background: $color-background-alt !default
$block-timeline-horizontal-color: $color-text !default

// Block testimonials
$block-testimonials-xl-font-size: $quote-size-desktop-short !default
$block-testimonials-xl-line-height: $quote-line-height !default
$block-testimonials-xl-font-size-long-text: $quote-size-desktop-long !default
$block-testimonials-xl-line-height-long-text: $quote-line-height !default
$block-testimonials-color: $color-accent !default
$block-testimonials-font-family: $quote-font-family !default
$block-testimonials-font-size: $quote-size !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-accent !default

// Block key_figures

// TODO : overkill ?
$block-key_figures-number-font-family: $heading-font-family !default
$block-key_figures-unit-font-weight: normal !default
$block-key_figures-number-font-weight: bold !default

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

$block-key_figures-font-size-desktop: px2rem(18) !default
$block-key_figures-number-font-size-desktop: 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 !default

// Block image
$block-image-max-height-with-sidebar: calc(100vh - var(--header-height)) !default
$block-image-max-height-without-sidebar: none !default

// Sections
$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-text-alt !default
// Si layout posts grid (ne concerne pas les blocks posts)
$posts-grid-columns: $block-posts-grid-columns !default

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

// Program
$program-essential-font-size: $meta-size !default
$program-essential-font-size-desktop: $meta-size-desktop !default
$program-share-font-size: $meta-size !default
$program-share-font-size-desktop: $meta-size-desktop !default
$program-zindex-toc: $zindex-toc !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

// Icons
$icon-burger-margin-right: -12px
$icon-close-margin-right: -12px
$icon-toc-margin-right: -14px
$icon-arrow-previous-margin-left: -22px // cf. testimonial
$icon-social-margin-right: -14px