/* * ============================================================ * TM Seguros — style-override.css * Homologación de paleta al color identidad del logotipo * * Color extraído directamente del logo.png: * Navy primario: #0F2A45 (color dominante del logotipo) * Navy claro: #1A4270 (hover / acento) * Navy oscuro: #081929 (dark / footer) * Gold acento: #C8A96E (detalle premium — opcional) * * INSTRUCCIONES DE USO: * Agregar en el de CADA página HTML, DESPUÉS de style.css: * * ============================================================ */ /* ============================================================ 1. VARIABLES GLOBALES — redefinición del sistema de color ============================================================ */ :root { --bs-primary: #0F2A45; --bs-primary-rgb: 15, 42, 69; --bs-dark: #081929; --bs-dark-rgb: 8, 25, 41; --bs-light: #F4F6F9; --bs-light-rgb: 244, 246, 249; /* Acento navy claro para hovers */ --tm-navy-hover: #1A4270; /* Acento gold para detalles premium (uso opcional) */ --tm-gold: #C8A96E; } /* ============================================================ 2. COLORES DE TEXTO Y FONDO — clases utilitarias Bootstrap ============================================================ */ .text-primary { color: #0F2A45 !important; } .bg-primary { background-color: #0F2A45 !important; } .border-primary { border-color: #0F2A45 !important; } .text-dark { color: #081929 !important; } .bg-dark { background-color: #081929 !important; } .text-light { color: #F4F6F9 !important; } .bg-light { background-color: #F4F6F9 !important; } /* ============================================================ 3. BOTONES ============================================================ */ .btn-primary { background-color: #0F2A45 !important; border-color: #0F2A45 !important; color: #ffffff !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: #1A4270 !important; border-color: #1A4270 !important; color: #ffffff !important; } .btn-outline-primary { color: #0F2A45 !important; border-color: #0F2A45 !important; } .btn-outline-primary:hover { background-color: #0F2A45 !important; color: #ffffff !important; } .btn-light:hover { background-color: #0F2A45 !important; color: #ffffff !important; } .btn-dark { background-color: #081929 !important; border-color: #081929 !important; } .btn-dark:hover { background-color: #0F2A45 !important; color: #ffffff !important; } /* ============================================================ 4. NAVBAR Y TOPBAR ============================================================ */ /* Topbar: íconos e iconos sociales */ .topbar a i, .topbar .text-primary, .topbar .fas.text-primary, .topbar .fab.text-primary { color: #0F2A45 !important; } .topbar .border-primary { border-color: #0F2A45 !important; } /* Dropdown hover */ .topbar .dropdown .dropdown-menu a:hover, .dropdown .dropdown-menu .dropdown-item:hover { background-color: #0F2A45 !important; color: #ffffff !important; } /* Nav links activos y hover */ .navbar-light .navbar-nav .nav-item:hover, .navbar-light .navbar-nav .nav-item.active, .navbar-light .navbar-nav .nav-item:hover .nav-link, .navbar-light .navbar-nav .nav-item.active .nav-link { color: #0F2A45 !important; } /* Toggler móvil */ .navbar.navbar-expand-lg .navbar-toggler { border-color: #0F2A45 !important; color: #0F2A45 !important; } /* Navbar dropdown arrow */ .topbar .dropdown-toggle::after, .navbar .dropdown-toggle::after { color: #0F2A45 !important; } /* ============================================================ 5. LOGO — dimensiones controladas y consistentes ============================================================ */ /* Tamaño fijo del logo en todas las páginas */ .navbar-brand img, .navbar-light .navbar-brand img, .nav-bar .navbar-light .navbar-brand img { height: 52px !important; width: auto !important; max-height: 52px !important; object-fit: contain; display: block; } /* ============================================================ 6. HERO / CAROUSEL ============================================================ */ .header-carousel-item.bg-primary, .header-carousel .header-carousel-item.bg-primary { background-color: #0F2A45 !important; } /* Fondo de la leyenda del hero */ .header-carousel .header-carousel-item .carousel-caption { background: rgba(8, 25, 41, 0.35); } /* Flechas de navegación del carousel */ .header-carousel .owl-nav .owl-prev, .header-carousel .owl-nav .owl-next { color: #0F2A45 !important; } .header-carousel .owl-nav .owl-prev:hover, .header-carousel .owl-nav .owl-next:hover { background-color: #0F2A45 !important; color: #ffffff !important; } /* ============================================================ 7. BREADCRUMB (páginas interiores) ============================================================ */ .bg-breadcrumb, .bg-breadcrumb-1, .bg-breadcrumb-2, .bg-breadcrumb-3, .bg-breadcrumb-4 { background-blend-mode: multiply; } /* Sobreescribir el overlay azul brillante por el navy */ .bg-breadcrumb { background-image: linear-gradient(rgba(15, 42, 69, 0.88), rgba(8, 25, 41, 0.5)), url(../img/bg-breadcrumb.jpg) !important; } .bg-breadcrumb-1 { background-image: linear-gradient(rgba(15, 42, 69, 0.88), rgba(8, 25, 41, 0.5)), url(../img/bg-breadcrumb-1.jpg) !important; } .bg-breadcrumb-2 { background-image: linear-gradient(rgba(15, 42, 69, 0.88), rgba(8, 25, 41, 0.5)), url(../img/bg-breadcrumb-2.jpg) !important; } .bg-breadcrumb-3 { background-image: linear-gradient(rgba(15, 42, 69, 0.88), rgba(8, 25, 41, 0.5)), url(../img/bg-breadcrumb-3.jpg) !important; } .bg-breadcrumb-4 { background-image: linear-gradient(rgba(15, 42, 69, 0.88), rgba(8, 25, 41, 0.5)), url(../img/bg-breadcrumb-4.jpg) !important; } /* ============================================================ 8. SERVICIOS ============================================================ */ .service .service-item .service-img::after { background: rgba(15, 42, 69, 0.25) !important; } .service .service-item .service-img .service-icon i { color: #0F2A45 !important; } .service .service-item:hover .service-img .service-icon { background-color: #0F2A45 !important; } .service .service-item .service-content::after { background-color: #0F2A45 !important; } .service .service-item:hover .service-content .service-content-inner .btn.btn-primary { color: #0F2A45 !important; background-color: #ffffff !important; } /* ============================================================ 9. BLOG ============================================================ */ .blog .blog-item .blog-img::after { background: rgba(15, 42, 69, 0.25) !important; } .blog .blog-item .blog-img .blog-categiry { background-color: #0F2A45 !important; } .blog .blog-item:hover .blog-content a.btn:hover { color: #0F2A45 !important; } /* ============================================================ 10. EQUIPO ============================================================ */ .team .team-item .team-title { background-color: #0F2A45 !important; } .team .team-item:hover .team-title { background-color: #081929 !important; } /* ============================================================ 11. FOOTER ============================================================ */ .footer { background-color: #081929 !important; } .footer .footer-item a:hover { color: #C8A96E !important; /* gold — distingue los hover en fondo oscuro */ } .footer .footer-item .footer-btn a { color: #0F2A45 !important; } .footer .footer-item .footer-btn a:hover { background-color: #0F2A45 !important; } .footer .footer-item .footer-btn a:hover i { color: #ffffff !important; } .copyright { background-color: #040e18 !important; } /* Separador footer */ [style*="border-top: 1px solid rgba(255, 255, 255"] { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } /* ============================================================ 12. ELEMENTOS VARIOS ============================================================ */ /* Spinner */ .spinner-border.text-primary { color: #0F2A45 !important; } /* Back to top */ .back-to-top { background-color: #0F2A45 !important; border-color: #0F2A45 !important; } .back-to-top:hover { background-color: #1A4270 !important; } /* íconos primarios sueltos */ i.text-primary, .fas.text-primary, .far.text-primary, .fab.text-primary, .fa.text-primary { color: #0F2A45 !important; } /* Checks de lista */ .fa.fa-check.text-primary { color: #0F2A45 !important; } /* Contadores (about section) */ .counter-item .text-primary, span.text-primary { color: #0F2A45 !important; } /* Headings de sección */ h4.text-primary { color: #0F2A45 !important; } /* Links con color primario */ a.text-primary, a.border-bottom.text-white { color: #ffffff !important; } /* Botones cuadrados de calendario en navbar */ .btn-light.btn-lg-square { color: #0F2A45 !important; } /* Íconos cuadrados en secciones */ .btn-xl-square.bg-primary { background-color: #0F2A45 !important; }