/* ============================================================================ BRAND TOKENS — Installateur pilote : Gouttières Boréal (#1) Plateforme : Alu-Rex Partners ---------------------------------------------------------------------------- Single source of truth pour l'identité visuelle de CET installateur. Pour dupliquer ce site pour un autre client (white-label) : 1. Copier ce fichier dans le nouveau projet 2. Modifier UNIQUEMENT la SECTION 1 (Identité de marque) 3. Tout le reste du site (theme Bexon + composants custom) se reskin automatiquement. Ordre de chargement recommandé dans : 1. main.css (theme Bexon de base) 2. brand-tokens.css (← ce fichier — override les couleurs/fonts) 3. typography-system.css (système typo fluide) 4. button-fill-hover.css (effet hover boutons) ============================================================================ */ /* ============================================================================ SECTION 1 — IDENTITÉ DE MARQUE 👈 SEULE SECTION À MODIFIER PAR CLIENT ============================================================================ */ :root { /* --- Couleur primaire de la marque (CTA, accents, liens, surlignages) --- */ --brand-primary: #7d9674; /* Boréal — vert mousse */ --brand-primary-rgb: 125, 150, 116; /* version RGB pour rgba() */ --brand-primary-dark: #5e7656; --brand-primary-light: #9aaf8e; /* --- Couleur sombre (hero, footer, sections sombres) --- */ --brand-dark: #0c1e21; /* Boréal — noir-vert profond */ --brand-dark-soft: #18292c; --brand-dark-2: #202e30; /* --- Surfaces claires (sections de fond) --- */ --brand-bg-soft: #d8e5e5; /* fond accent (cartes, etc.) */ --brand-bg-softer: #ecf0f0; /* fond global (body) */ --brand-bg-white: #ffffff; /* --- Couleurs de texte --- */ --brand-text-heading: #0c1e21; /* titres */ --brand-text-body: #364e52; /* paragraphes */ --brand-text-muted: #67787a; /* meta / captions */ --brand-text-soft: #a9b8b8; /* texte secondaire sur fond clair */ --brand-text-on-dark: rgba(255, 255, 255, 0.85); /* --- Bordures --- */ --brand-border: #c9d1d1; --brand-border-dark: #313d3d; --brand-border-on-dark: rgba(255, 255, 255, 0.20); /* --- Typographie --- General Sans (Indian Type Foundry) — variable font self-hostée. Déclarée dans `assets/css/fonts.css`. La fallback stack utilise les polices système pour 0 ms de FOIT avant que la font ne charge. */ --brand-font-body: 'General Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --brand-font-heading: 'General Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --brand-font-display: 'General Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* --- Logo & assets --- Utilisable via : background-image: var(--brand-logo); */ --brand-logo: url('../images/logos/Logo_gouttieres_boreal.svg'); --brand-logo-white: url('../images/logos/Logo_gouttieres_boreal.svg'); --brand-favicon: url('../images/fav.png'); /* --- Hero overlay (dégradé du slider d'accueil) --- */ --brand-hero-overlay: rgba(0, 0, 0, 0.6); /* gauche (opaque) */ --brand-hero-overlay-mid: rgba(0, 0, 0, 0.4); /* milieu */ --brand-hero-overlay-soft: rgba(0, 0, 0, 0.1); /* droite (presque clair)*/ /* --- Coordonnées de l'entreprise (utilisables via attr() ou JS si besoin) Note : ces tokens sont informatifs — les coordonnées affichées restent pour l'instant dans les pages HTML. */ --brand-name: 'Gouttières Boréal'; --brand-phone: '(418) 655-2342'; --brand-email: 'info@gouttieresboreal.com'; } /* ============================================================================ SECTION 2 — MAPPING DES VARIABLES BEXON ---------------------------------------------------------------------------- Réassigne les variables natives du template Bexon depuis les brand tokens. ⚠️ NE PAS modifier cette section sauf si tu veux découpler la marque du theme Bexon. Modifie la SECTION 1 à la place. ============================================================================ */ :root { /* Couleurs de marque ----------------------------------------------------- */ --tj-color-theme-primary: var(--brand-primary); --tj-color-theme-bg: var(--brand-bg-soft); --tj-color-theme-bg-2: var(--brand-bg-soft); --tj-color-theme-bg-3: var(--brand-dark-2); --tj-color-theme-dark: var(--brand-dark); --tj-color-theme-dark-2: var(--brand-dark-soft); --tj-color-theme-dark-3: var(--brand-text-body); --tj-color-theme-dark-4: var(--brand-text-muted); /* Texte ----------------------------------------------------------------- */ --tj-color-heading-primary: var(--brand-text-heading); --tj-color-text-body: var(--brand-text-body); --tj-color-text-body-2: var(--brand-text-soft); --tj-color-text-body-3: var(--brand-text-muted); --tj-color-text-body-4: var(--brand-dark-soft); --tj-color-text-body-5: var(--brand-text-on-dark); /* Surfaces -------------------------------------------------------------- */ --tj-color-grey-1: var(--brand-bg-softer); --tj-color-grey-2: var(--brand-text-soft); --tj-color-common-white: var(--brand-bg-white); /* Bordures -------------------------------------------------------------- */ --tj-color-border-1: var(--brand-border); --tj-color-border-2: var(--brand-border-dark); --tj-color-border-4: var(--brand-border-on-dark); /* Typographie ----------------------------------------------------------- */ --tj-ff-body: var(--brand-font-body); --tj-ff-heading: var(--brand-font-heading); } /* ============================================================================ SECTION 3 — COMPOSANTS CUSTOM ---------------------------------------------------------------------------- Branche les composants ajoutés au site (button-fill, hero overlay…) sur les brand tokens. Si tu ajoutes de nouveaux composants custom, attache-les ici plutôt que de hardcoder une couleur. ============================================================================ */ /* ----- Bouton « fill hover » (assets/css/button-fill-hover.css) ----- Couleur de remplissage par défaut + variantes utilitaires. La classe `.btn-fill` (à appliquer sur n'importe quel `` ou `