/* * assets/css/jpv_variables.css * Variables globales CSS * * @author SIMON Stephane * @version 1.1.0 */ /* Résoudre les URL depuis ce fichier, même lorsqu'un autre CSS utilise var(). */ @property --welcome-image { syntax: " | none"; inherits: true; initial-value: none; } @property --login-logo { syntax: " | none"; inherits: true; initial-value: none; } @property --login-mobile-background { syntax: " | none"; inherits: true; initial-value: none; } /* Images partagées par les CSS de l’espace client. */ @property --customer-sidebar-image { syntax: " | none"; inherits: true; initial-value: none; } @property --customer-panel-image { syntax: " | none"; inherits: true; initial-value: none; } @property --customer-banner-image { syntax: " | none"; inherits: true; initial-value: none; } @property --customer-sidebar-logo { syntax: " | none"; inherits: true; initial-value: none; } @property --customer-sidebar-mobile-logo { syntax: " | none"; inherits: true; initial-value: none; } @property --customer-watermark-image { syntax: " | none"; inherits: true; initial-value: none; } :root { /*========== PRIMARY COLORS ==========*/ --primary-dark: #02093D; --primary-main: #2C4594; /* Bleu (logo) */ /*========== SECONDARY COLORS ==========*/ --secondary-dark: #333333; --secondary-mid: #7A7979; /* Gris (logo) */ --secondary-easy: #EEF0F2; /* Gris clair */ /*========== TERTIARY COLORS ==========*/ --tertiary-main: #5DD9C1; /* Vert-cyan */ --tertiary-mid: #00a2ff; /* Bleu intermédiaire */ --tertiary-easy: #A0DDFF; /* Bleu clair (variante légèrement moins saturée) */ --gradient-mid: #5A9EDC; /* Bleu clair des separations JPV */ /*========== UTILITY COLORS ==========*/ --container-bg: #EEF0F2; --text-dark: #121c3f; --text-main: #2C4594; --text-secondary: #333333; --inter-card-text-color: var(--primary-main); --white-color: #ffffff; /*========== IMAGES ET FONDS DU THÈME ==========*/ /* URL relatives à ce fichier source dans assets/css/. */ --welcome-image: url("../images/home/new-showcase-Rc3A_Fh.webp"); --welcome-background: var(--welcome-image); --login-logo: url("../images/logo/jpv-assurances-colorful-VPsFjQy.svg"); --login-mobile-background: url("../images/login_page/login-mobile1-76qtXXR.webp"); --login-card-background: rgba(255, 255, 255, 0.4); --login-disabled-background: rgba(44, 69, 148, 0.9); --section-gradient: linear-gradient(to right, var(--primary-main), var(--gradient-mid), var(--tertiary-main)); --footer-background: var(--primary-dark); --footer-secondary-background: rgba(122, 121, 121, 0.8); /* Header et menu Contact. */ --header-brand-width: 190px; --header-brand-mobile-width: 130px; --contact-header-background: var(--section-gradient); --contact-focus-shadow: 0 0 0 0.25rem rgba(44, 69, 148, 0.3); /*========== SÉRÉNY'PATTES ==========*/ --pets-accent-rgb: 44, 69, 148; --pets-shadow-rgb: 18, 28, 63; --pets-lead-color: #4b5676; --pets-points-color: #53607d; --pets-text-color: #58647f; --pets-panel-text-color: rgba(255, 255, 255, 0.84); --pets-page-background: radial-gradient(circle at top left, rgba(160, 221, 255, 0.35), transparent 32%), linear-gradient(180deg, #f7fbff 0%, #ffffff 34%, #f5f8fd 100%); --pets-panel-gradient: linear-gradient(165deg, rgba(2, 9, 61, 0.96) 0%, rgba(44, 69, 148, 0.96) 38%, rgba(0, 162, 255, 0.9) 100%); --pets-button-gradient: linear-gradient(135deg, var(--primary-main) 0%, var(--tertiary-mid) 100%); --pets-divider-gradient: linear-gradient(90deg, var(--primary-main) 0%, var(--gradient-mid) 52%, var(--tertiary-main) 100%); --pets-cta-gradient: var(--pets-divider-gradient); --pets-icon-background: linear-gradient(135deg, rgba(44, 69, 148, 0.10) 0%, rgba(90, 158, 220, 0.14) 55%, rgba(93, 217, 193, 0.12) 100%); --pets-guarantees-background: linear-gradient(180deg, rgba(44, 69, 148, 0.03) 0%, rgba(44, 69, 148, 0.08) 100%); /*========== ESPACE CLIENT ==========*/ --customer-sidebar-image: url("../images/customer/backgrounds/nav-bg-eGTCDEu.webp"); --customer-panel-image: url("../images/customer/backgrounds/noisy-bg2-kdJcwfq.jpeg"); --customer-banner-image: url("../images/customer/backgrounds/head-content--zoxOZ6.jpg"); --customer-sidebar-logo: url("../images/logo/LOGO_JPV_blanc-RLD65Mu.png"); --customer-sidebar-mobile-logo: url("../images/logo/LOGO_JPV_couleur-LPfe6x8.png"); --customer-watermark-image: url("../images/logo/jpv-only-fili-light1-ab3OS8l.svg"); --customer-sidebar-background: var(--primary-main) var(--customer-sidebar-image) top left; --customer-panel-background: var(--customer-panel-image); --customer-banner-background: var(--customer-banner-image); --customer-logo-surface: transparent; --customer-logo-size: contain; --customer-logo-margin: 0; --customer-logo-spacing: 0; --customer-logo-height: 170px; --customer-body-color: var(--primary-dark); --customer-heading-color: var(--primary-dark); --customer-accent-rgb: 44, 69, 148; --customer-shadow-rgb: 2, 9, 61; --customer-selection-border: #b5bfd9; --customer-selection-active-border: #50dd1d; --customer-selection-active-background: rgba(0, 0, 0, 0.05); --customer-selection-indicator: var(--tertiary-mid); --customer-selection-focus-shadow: rgba(80, 221, 29, 0.5); --customer-toggle-on-background: linear-gradient(to right, #9fe883, #5af100); --customer-toggle-off-background: linear-gradient(to right, #ff5555, #fbbebe); --customer-toggle-frame-background: linear-gradient(to bottom, #d0c4b8, #f5ece5); --customer-toggle-button-background: #e4ddcf; --customer-toggle-grip-background: radial-gradient(circle at 50% 0, #f6f0e9, #bebcb0); --customer-document-background: #59B8F13D; --customer-document-accent-rgb: 89, 184, 241; --customer-document-shadow-rgb: 29, 93, 139; --customer-document-active-background: #D7EEFC; --customer-contract-gradient-start: #1e82c5; --customer-services-gradient: linear-gradient(90deg, rgba(2,9,61,0.8) 0%, rgba(0,162,255,0.7) 53%, rgba(148,216,255,0.9) 100%); --customer-services-header-background: radial-gradient(circle at 82% 18%, rgba(255, 255, 255, .28) 0, rgba(255, 255, 255, 0) 30%), linear-gradient(115deg, rgba(2, 9, 61, .95) 0%, rgba(18, 74, 129, .96) 38%, rgba(0, 140, 210, .9) 68%, rgba(117, 201, 242, .82) 100%); /* Cartes de navigation, boutons secondaires et sous-menus. */ --button-hover-background: var(--customer-panel-background); --button-reverse-hover-color: var(--primary-main); --button-shine-opacity: 1; --customer-card-background: #f8f9fa; --customer-card-header-background: var(--customer-banner-background); --customer-card-header-color: var(--white-color); --customer-card-header-accent: none; --customer-card-hover-transform: scale(1.02); --customer-secondary-button-background: var(--primary-main); --customer-secondary-button-color: var(--white-color); --customer-secondary-button-border: none; --customer-secondary-button-hover-background: var(--customer-panel-background); --customer-secondary-button-hover-color: var(--white-color); --customer-secondary-button-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); --customer-secondary-button-hover-shadow: 0 6px 15px rgba(0, 0, 0, 0.25); --customer-submenu-background: rgba(255, 255, 255, 0.6); --customer-submenu-mobile-background: var(--container-bg); --customer-submenu-text-color: var(--primary-main); --customer-submenu-divider-color: var(--primary-main); /*========== CARDS SERVICES COLORS ===========*/ --card-gold: #ffd700; --card-red: #942c45; --card-green: #45942c; /*========== CARDS BORDER COLOR ===========*/ --border-card-color: #939393; /*========== JPV COLORS ==========*/ --jpv-dark: #121c3f; --jpv-main: #2C4594; /*======= Customer Sidebar =======*/ --header-height: 3.5rem; --sidebar-width: 219px; /*======= Font and Typorgraphy =======*/ --body-font: "Rubik", sans-serif; --jpv-font: "La Belle Aurore", cursive; --normal-font-size: 0.938rem; --small-font-size: 0.75rem; --smaller-font-size: 0.7rem; --text-primary-color: #2C4594; /*======= Font Weight =======*/ --font-light: 300; --font-medium: 500; } @media screen and (min-width: 991px) { :root { --normal-font-size: 1rem; --small-font-size: 0.875rem; --smaller-font-size: 0.813rem; } }