/*#region ======================== Color Zone ======================== */ :root { /* Couleurs du thème */ --color-base: rgb(0,0,0); /* texte de body */ --color-primary: #A81401; /* WCAG AA pour le texte blac */ --color-primary-light: #f0969d; --color-primary-extralight: #f9d4d7; --color-secondary: #95c11f; --color-secondary-light: #b7cc89; --color-secondary-extralight: #e4ebd0; --color-theme-blue-darker: #174ED7; --color-theme-blue: #0084fa; --color-theme-blue-light: #8ab4ea; --color-theme-blue-extralight: #d1dcf7; --color-theme-bluegreen: #00C3BB; --color-theme-bluegreen-light: #7ee0dc; --color-theme-bluegreen-extralight: #b6e8e6; --color-theme-green-darker: #508A0C; --color-theme-green: #95c11f; --color-theme-green-light: #bde05b; --color-theme-green-extralight: #e1f5aa; --color-theme-orange: #F0AD4E; --color-theme-orange-light: #fde991; --color-theme-orange-extralight:#fef6d2; --color-theme-yellow: #fdd525; --color-theme-yellow-light: #fde991; --color-theme-yellow-extralight:#fef6d2; --color-theme-red-extradarker: #5A0B06; --color-theme-red-darker: #880E02; --color-theme-red: #A81401; --color-theme-red-light: #f9a1a1; --color-theme-red-extralight: #fcd9d9; --color-light: #FFF; --color-smoke: #f8f8f8; --color-muted: #e7e9ed; --color-colored-dark: #182844; --color-mediumdark-grey: #515151; --color-grey: #808080; --color-medium-grey: var(--color-grey, #808080); --color-grey-light: #919191; --color-grey-extralight: #e2e2e2; --color-primary-grey: hsl(0, 0%, 30%); --color-black: #313131; --color-inverse : #333; --color-ghost : transparent; --color-muted : #e7e9ed; /* Loader */ --loader-color: var(--color-theme-green); /* Application dans le template : évoiter les couleurs directes ici afin d'écviter les répétations. Préférer des variable du dessus. */ /* Theme */ --color-theme-bg: #fff; --color-models: var(--color-theme-red-extradarker); --color-models-light: var(--color-theme-red-light); --color-models-extralight: var(--color-theme-red-extralight); --color-models-txt: #fff; --color-landhouses: var(--color-theme-green); --color-landhouses-light: var(--color-theme-bluegreen-light); --color-landhouses-extralight: var(--color-theme-bluegreen-extralight); --color-landhouses-txt: #fff; --color-lands: var(--color-theme-green-darker); --color-lands-light: var(--color-theme-green); --color-lands-extralight: var(--color-theme-green-extralight); --color-lands-txt: #fff; --color-agencies-darker: var(--color-theme-red-darker); --color-agencies: var(--color-theme-red); --color-agencies-light: var(--color-theme-red-light); --color-agencies-extralight: var(--color-theme-red-extralight); --color-agencies-txt: #fff; /*#region Forme SVG */ /* Arrières plans de couleurs */ --bigshapes-color: var(--color-primary); /* Couleur */ --bigshapes-opacity: 1; /* opacité */ --bigshapes-blend-mode: color; /* Mode de fusion */ /*#endregion*/ /*#region NAVS */ /* main */ --nav-main-link-color: var(--color-base); --nav-main-hover-color: var(--color-secondary); --nav-main-active-color: var(--color-primary); --nav-main-bg: var(--color-light); --nav-main-lvl2-bg: var(--color-light); --nav-main-lvl2--hover_bg: var(--color-smoke); /* shortcuts (boutons de droite) */ --nav-shortcuts-links-color: #001F45; --nav-shortcuts-accent-color: var(--color-theme-red); /* Small / 3D */ --nav-small-bg: var(--color-primary); --nav-small-list-link-color: #ffffffbb; --nav-small-list-link-hover-color: var(--color-light); --nav-small-list-link-hover-bg: #ffffff1c; --nav-small-list-link-currt-color: #fff; --nav-small-list-link-currt-hover-color:#fff; /* Footer social */ --nav-small-socials-link-color: var(--color-light); --nav-small-socials-link-hover-color: var(--color-light); /* tabbar */ --tabbar-bg-color: rgba(255, 255, 255, 0.72); /* + effet de blur */ /* #endregion */ /*#region Footer */ --color-footer-bg-1: var(--color-theme-red); --color-footer-bg-2: var(--color-theme-red-darker); --color-footer-font: #fff; /* Footer Sub */ --color__footer_sub-bg: #fff; --color__footer_sub-txt: #000; /*#endregion*/ /*#region Accueil */ /* Slider */ --home-slider-main-hoverlay-color: transparent; /* rgba(0, 0, 0, 0) */ /*#endregion*/ /*#region Contenus */ /* Surlignage */ --color-highlighted_txt: var(--color-theme-green); /*#endregion*/ /*#endregion /Colors =========================================================== */ /*#region ======================== FONTS Zone ======================== */ --font-size-body: clamp(1rem, 0.7813rem + 0.4688vw, 1.4rem); --font-size-desktop: min(max(1rem, 4vw), 22px); --font-icon-MFC: 'icon-mfc'; /*#endregion*/ /*#region ======================== Pictos Zone ======================== */ /* Pour obtenir des icônes/picto de plusieurs couleurs, un sprite SVG est présent du site. (Ne pas confondre avec les font-icône, à utiliser comme tu sais déjà le faire.) Liste des pictos et exemple sur Codepen : https://codepen.io/Entities/pen/yLbxZJy?editors=1100 Les couleurs de ces pictos sont modifiables via CSS (oui, c'est chouette), Les pictos utilisent par défaut la currentColor (c'est à dire la couleur du texte de votre élément). Comme ces éléments sont dans le shaddow DOM, il n'est pas possible de les modifier via des propriétés CSS classique, d'où l'usage des propriétés personnalisées CSS. Il est possible de la modifier ainsi : à n'utiliser que localement pour modifier l'existant et ne pas utiliser sur :root Exemple avec un thème banana : Pour insérer un picto : Les couleurs de ces pictos sont modifiables via CSS (oui, c'est chouette), Les pictos utilisent par défaut la currentColor (c'est à dire la couleur du texte de votre élément). Comme ces éléments sont dans le shaddow DOM, il n'est pas possible de les modifier via des propriétés CSS classique, d'où l'usage des propriétés personnalisées CSS. ! à n'utiliser que localement pour modifier l'existant ! et ne pas utiliser sur :root… Il est possible de la modifier ainsi : ? Exemple avec un thème banana : .picto-sprite.banana { --picto-color-base: yellow; --picto-color-contrast: brown; --picto-color-opacity: .5; } */ }