/* ============================================================================ BRAND TOKENS — Base neutre plateforme (noir / blanc / gris) Plateforme : Alu-Rex Partners ---------------------------------------------------------------------------- Fallback global avant le CSS généré par installateur (`assets/css/generated/{slug}.css`). Chaque site écrase ces valeurs au build via `scripts/lib/generate-theme-css.js`. 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: #333333; --brand-primary-rgb: 51, 51, 51; --brand-primary-dark: #2a2a2a; --brand-primary-light: #4d4d4d; --brand-secondary: #111111; --brand-dark: #111111; --brand-dark-rgb: 17, 17, 17; --brand-dark-soft: #1f1f1f; --brand-dark-2: #292929; --brand-bg-soft: #ebebeb; --brand-bg-softer: #f5f5f5; --brand-bg-white: #ffffff; --brand-text-heading: #333333; --brand-text-body: #333333; --brand-text-muted: #666666; --brand-text-soft: #999999; --brand-text-on-dark: rgba(255, 255, 255, 0.85); /* --- Bordures --- */ --brand-border: #cccccc; --brand-border-dark: #222222; --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.7); --brand-hero-overlay-mid: rgba(0, 0, 0, 0.5); --brand-hero-overlay-soft: rgba(0, 0, 0, 0.2); /* --- Navigation (menu sur hero / header transparent) --- */ --brand-nav-text: #ffffff; --brand-nav-text-hover: var(--brand-primary); --brand-nav-text-active: var(--brand-primary); --brand-nav-bg: rgba(255, 255, 255, 0.1); --brand-nav-bg-opacity: 10; --brand-nav-bg-blur: 10px; /* --- Boutons CTA --- */ --brand-btn-bg: var(--brand-primary); --brand-btn-icon-bg: var(--brand-primary-dark); --brand-btn-icon-color: var(--brand-bg-white); --brand-btn-text: var(--brand-bg-white); --brand-btn-radius: 5px; --brand-btn-padding: 5px; --brand-btn-padding-lg: 7px; --brand-btn-icon-radius: max(0px, calc(var(--brand-btn-radius) - var(--brand-btn-padding))); --brand-btn-icon-radius-lg: max(0px, calc(var(--brand-btn-radius) - var(--brand-btn-padding-lg))); --brand-btn-hover-fill: var(--brand-dark); /* --- Cartes & panneaux (boîtes) --- */ --brand-card-radius: 16px; /* --- Lueurs & dégradés décoratifs (sections sombres, produits, processus) --- */ --brand-glow-05: rgba(51, 51, 51, 0.05); --brand-glow-15: rgba(51, 51, 51, 0.15); --brand-glow-25: rgba(51, 51, 51, 0.25); --brand-glow-30: rgba(51, 51, 51, 0.3); --brand-glow-35: rgba(51, 51, 51, 0.35); --brand-glow-45: rgba(51, 51, 51, 0.45); /* --- 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. ============================================================================ */ /* ----- Titres de section — typo unifiée (classe boreal-sec-heading) ----- */ body :is(#smooth-content, .tj-footer-section) .boreal-sec-heading .sec-title { font-family: var(--tj-ff-heading); font-size: clamp(2rem, 1rem + 2vw, 3rem); font-weight: var(--brand-font-heading-weight, var(--tj-fw-bold, 700)); line-height: 1.15; letter-spacing: var(--brand-font-heading-letter-spacing, -0.01em); color: var(--tj-color-heading-primary); } body :is(#smooth-content, .tj-footer-section) .boreal-sec-heading .sec-title span { color: inherit; } body :is(#smooth-content, .tj-footer-section) .boreal-sec-heading--center { text-align: center; max-width: 34rem; margin-inline: auto; } body :is(#smooth-content, .tj-footer-section) .boreal-sec-heading--start { text-align: start; margin-inline: 0; max-width: none; } body :is(#smooth-content, .tj-footer-section) .boreal-sec-heading .desc { font-size: var(--tj-fs-body, 1rem); line-height: 1.6; margin-top: 1.125rem; } /* ----- Rayon global des boîtes (cartes, héros, sections, panneaux…) ----- Piloté par --brand-card-radius (admin / themes/installers/*.json → CSS généré). Exceptions : boutons CTA, pastilles rondes, icônes, menu mobile, lecteur vidéo. */ body :is(#smooth-content, .tj-footer-section) :is( /* Héros & bannières */ .tj-slider-section, .tj-slider-item, .tj-banner-section, .banner-area, [class*="banner-"], [class*="hero-"], [class*="slider-wrapper"], [class*="slider-content"], [class*="slider-bg"], [class*="thumb-item"], /* Sections encadrées (dont « Built for every climate » / service-2) */ section[class*="tj-"], [class*="tj-"][class*="-section"], [class*="-wrapper"], [class*="content-wrap"], [class*="-area"]:not(.btn-area), /* Cartes, panneaux, blocs */ [class*="-card"], [class*="-box"], [class*="-panel"], [class*="-item"], [class*="feature-"], [class*="blog-"], [class*="post-"], [class*="testimonial-"], [class*="project-"], [class*="team-"], [class*="pricing-"], [class*="faq-"], [class*="choose-"], [class*="about-"], [class*="contact-"], [class*="widget-"], [class*="subscribe"], [class*="cta-"], [class*="page-header"], [class*="page-kicker"], [class*="boreal-"], [class*="h5-"], [class*="h6-"], [class*="h7-"], [class*="h8-"], [class*="h9-"], [class*="h10-"], .nice-select, blockquote, table, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea, iframe ):not( .tj-primary-btn, .tj-primary-btn-lg, .tj-icon-btn, .tji-icon-btn, .text-btn, .btn-icon, .btn-fill, .video-btn, .banner-scroll, .scroll-down, .tj-scroll-btn, [class*="__icon"], .service-icon, .process-step, .swiper-slide, .swiper-wrapper, .swiper-pagination, .mean-container, .mobile_menu, .vbox-container, img, picture, video, svg, button, /* Cartes image + texte : rayons gérés plus bas */ .boreal-service-card__media, .boreal-service-card__body, .blog-item > .blog-thumb, .blog-item > .blog-content, .h6-service-item > .h6-service-thumb, .h6-service-item > .h6-service-content, .boreal-services-solutions__card, .boreal-services-solutions__panel, .boreal-services-solutions__media, .tj-choose-section.h8-choose, .h8-choose-banner, .alu-rex-panel ) { border-radius: var(--brand-card-radius) !important; } /* Formulaire de contact — champs toujours à coins droits */ body :is(#smooth-content, .tj-footer-section) .contact-form .form-input :is( input, textarea, select, .nice-select ) { border-radius: 0 !important; } body :is(#smooth-content, .tj-footer-section) .contact-form .form-input .nice-select .list { border-radius: 0 !important; } /* Médias dans boîtes : coins = rayon de la boîte parente */ body :is(#smooth-content, .tj-footer-section) :is( .banner-img img, .banner-vimeo-bg, .banner-vimeo-poster, .banner-vimeo-iframe, .service-item__media img, .tj-slider-item .slider-bg-image__media, .tj-slider-item .thumb-item img, [class*="-card"] img, [class*="-box"] img, [class*="banner-"] img ):not( .boreal-service-card__media img, .blog-item .blog-thumb img, .h6-service-item .h6-service-thumb img ) { border-radius: inherit !important; } /* Cartes image en tête + corps texte : haut arrondi, bas de l'image droit */ body :is(#smooth-content, .tj-footer-section) :is( .boreal-service-card__media, .blog-item > .blog-thumb, .h6-service-item > .h6-service-thumb ) { border-radius: var(--brand-card-radius) var(--brand-card-radius) 0 0 !important; overflow: hidden; } body :is(#smooth-content, .tj-footer-section) :is( .boreal-service-card__body, .blog-item > .blog-content, .h6-service-item > .h6-service-content ) { border-radius: 0 0 var(--brand-card-radius) var(--brand-card-radius) !important; } body :is(#smooth-content, .tj-footer-section) :is( .boreal-service-card .boreal-service-card__media img, .blog-item .blog-thumb img, .h6-service-item .h6-service-thumb img, .boreal-services-solutions__media img, .tj-choose-section.h8-choose .h8-choose-banner img ) { border-radius: 0 !important; } /* Grille services Solutions — coins arrondis sur les bords extérieurs seulement */ body :is(#smooth-content, .tj-footer-section) .boreal-services-solutions__card { border-radius: 0 !important; overflow: visible !important; } body :is(#smooth-content, .tj-footer-section) .boreal-services-solutions__panel { border-radius: var(--brand-card-radius) 0 0 var(--brand-card-radius) !important; } body :is(#smooth-content, .tj-footer-section) .boreal-services-solutions__media { border-radius: 0 var(--brand-card-radius) var(--brand-card-radius) 0 !important; overflow: hidden; } /* Alu-Rex benefits — coins arrondis sur les bords extérieurs seulement (jointure droite) */ body :is(#smooth-content, .tj-footer-section) .tj-choose-section.h8-choose { border-radius: 0 !important; overflow: visible !important; } body :is(#smooth-content, .tj-footer-section) .tj-choose-section.h8-choose .h8-choose-banner { border-radius: var(--brand-card-radius) 0 0 var(--brand-card-radius) !important; overflow: hidden; } body :is(#smooth-content, .tj-footer-section) .tj-choose-section.h8-choose .h8-choose-banner img { border-radius: 0 !important; } body :is(#smooth-content, .tj-footer-section) .tj-choose-section.h8-choose .alu-rex-panel { border-radius: 0 var(--brand-card-radius) var(--brand-card-radius) 0 !important; } body :is(#smooth-content, .tj-footer-section) .tj-choose-section.h8-choose .alu-rex-panel .sec-title { color: var(--alurex-benefits-title-color, var(--tj-color-common-white)); } body :is(#smooth-content, .tj-footer-section) .tj-choose-section.h8-choose .alu-rex-panel::after { border-radius: 0 var(--brand-card-radius) var(--brand-card-radius) 0 !important; } @media only screen and (max-width: 991px) { body :is(#smooth-content, .tj-footer-section) .tj-choose-section.h8-choose .h8-choose-banner { border-radius: 0 0 var(--brand-card-radius) var(--brand-card-radius) !important; } body :is(#smooth-content, .tj-footer-section) .tj-choose-section.h8-choose .alu-rex-panel, body :is(#smooth-content, .tj-footer-section) .tj-choose-section.h8-choose .alu-rex-panel::after { border-radius: var(--brand-card-radius) var(--brand-card-radius) 0 0 !important; } } .text-btn .btn-icon { border-radius: max(0px, calc(var(--brand-card-radius) * 0.35)) !important; } /* Barre de navigation & retour en haut (hors #smooth-content) */ body .header-area .header-wrapper, body .header-area.header-sticky, body .header-top, body .header-area .search_popup, body .lang-switcher, body .lang-switcher__option, #tj-back-to-top, #tj-back-to-top-percentage { border-radius: var(--brand-card-radius) !important; } /* ----- 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 `