/** * ============================================================================ * HERO DOWNBAR COMPONENT - SHARED STYLES * ============================================================================ * * Componente reutilizable para la barra inferior del hero * Usado en: Inversionistas, ASG, Comercialización, Portafolio, etc. * * ============================================================================ * INSTALACIÓN * ============================================================================ * * 1. Importar en el de tu HTML: * * * 2. O importar en tu CSS: * @import url('/shared/css/components/downbar.css'); * * ============================================================================ * ESTRUCTURA HTML BÁSICA * ============================================================================ * *
*
* CONOCE *

ASG

*
*
*

ESTRATEGIA DE SUSTENTABILIDAD

*
*
* * ============================================================================ * EJEMPLOS DE USO * ============================================================================ * * EJEMPLO 1: Variante Azul (Inversionistas) * ------------------------------------------ *
*
* CONOCE *

INVERSIONISTAS

*
*
*

Información Financiera

*
*
* * Resultado: * - Fondo izquierdo: Azul (#0096A9) * - Texto izquierdo: Blanco * - Fondo derecho: Beige (#F5F3F1) * - Título derecho: Gris oscuro (#545859) * * * EJEMPLO 2: Variante Naranja (ASG Sustentabilidad) * -------------------------------------------------- *
*
* CONOCE *

ASG

*
*
*

ESTRATEGIA DE SUSTENTABILIDAD

*
*
* * Resultado: * - Fondo izquierdo: Naranja (#BE4D00) * - Texto izquierdo: Blanco * - Fondo derecho: Beige (#F5F3F1) * - Título derecho: Gris oscuro (#545859) * * * EJEMPLO 3: Variante Roja (Corporativo) * --------------------------------------- *
*
* CONOCE *

NUESTRA

*
*
*

HISTORIA

*
*
* * Resultado: * - Fondo izquierdo: Rojo (#d7282f) * - Texto izquierdo: Blanco * - Fondo derecho: Beige (#F5F3F1) * - Título derecho: Gris oscuro (#545859) * * * EJEMPLO 4: Variante Beige (Comercialización) * --------------------------------------------- *
*
* CONOCE *

NUESTROS

*
*
*

SERVICIOS

*
*
* * Resultado: * - Fondo izquierdo: Beige (#CFC493) * - Texto izquierdo: Gris oscuro (#545859) ⚠️ Texto oscuro en fondo claro * - Fondo derecho: Beige claro (#F5F3F1) * - Título derecho: Gris oscuro (#545859) * * * EJEMPLO 5: Variante Oscura (Dark Mode) * --------------------------------------- *
*
* EXPLORA *

NUESTRO

*
*
*

CONTENIDO

*
*
* * Resultado: * - Fondo izquierdo: Gris oscuro (#2C2C2C) * - Texto izquierdo: Blanco * - Fondo derecho: Gris medio (#545859) * - Título derecho: Blanco ⚠️ Título claro en fondo oscuro * * ============================================================================ * VARIANTES DISPONIBLES * ============================================================================ * * --blue : Azul corporativo (#0096A9) - Inversionistas * --red : Rojo corporativo (#d7282f) - Páginas corporativas * --orange : Naranja (#BE4D00) - ASG Sustentabilidad * --olive : Verde olivo (#BABC16) - Portafolio * --gray : Gris corporativo (#545859) - Páginas institucionales * --beige : Beige (#CFC493) - Comercialización * --dark : Modo oscuro (#2C2C2C) - Páginas especiales * * ============================================================================ * CREAR VARIANTE PERSONALIZADA * ============================================================================ * * En tu archivo CSS específico de página: * * .main__hero__downbar--custom { * background-color: #YOUR_COLOR; * } * * .main__hero__downbar--custom .main__hero_downbar__text > span, * .main__hero__downbar--custom .main__hero_downbar__text > p { * color: #YOUR_TEXT_COLOR; * } * * .main__hero__downbar--custom .main__hero_downbar__title { * background-color: #YOUR_BG_COLOR; * } * * .main__hero__downbar--custom .main__hero_downbar__title > h2 { * color: #YOUR_TITLE_COLOR; * } * * Uso: *
* *
* * ============================================================================ * CARACTERÍSTICAS * ============================================================================ * * ✅ Animación automática de deslizamiento (derecha a izquierda) * ✅ 7 variantes de color predefinidas * ✅ Responsive design (desktop, tablet, mobile) * ✅ Compatible con i18n (data-i18n) * ✅ Accesible (HTML5 semántico) * ✅ Reutilizable en todas las páginas * * ============================================================================ * PERSONALIZACIÓN AVANZADA * ============================================================================ * * Desactivar animación: * .main__hero_downbar__title { * animation: none !important; * left: 0 !important; * } * * Cambiar duración de animación: * .main__hero_downbar__title { * animation: startTitle 3s both; * } * * Cambiar altura: * .main__hero__downbar { * height: 120px; * } * * ============================================================================ * RESPONSIVE BEHAVIOR * ============================================================================ * * Desktop (>1000px): Layout horizontal con animación * Tablet/Mobile (≤1000px): Layout vertical sin animación * Mobile (≤768px): Tamaños de fuente reducidos * * ============================================================================ */ /* ======================================== BASE STYLES ======================================== */ .main__hero__downbar { background-color: #0096A9; /* Azul por defecto */ display: flex; position: relative; top: 0; /* Default - puede ser sobrescrito por variantes */ height: 100px; width: 100%; margin-top: 0; } /* ======================================== LEFT SECTION - Text Area ======================================== */ .main__hero_downbar__text { display: flex; flex-direction: column; justify-content: center; width: 40%; height: 100px; padding-left: 25%; margin-right: 40px; } .main__hero_downbar__text > span { color: #FFF; font-family: Raleway; font-size: 12px; font-style: normal; font-weight: 300; line-height: 12px; letter-spacing: 1px; text-transform: uppercase; text-align: end; } .main__hero_downbar__text > p { color: #FFF; font-family: Raleway; font-size: 18px; font-style: normal; font-weight: 700; line-height: 19.8px; letter-spacing: 1px; text-transform: uppercase; text-align: end; } /* ======================================== RIGHT SECTION - Title Area ======================================== */ .main__hero_downbar__title { display: flex; width: 60%; background-color: #F5F3F1; /* Beige por defecto */ align-items: center; position: relative; left: 1500px; animation: startTitle 2s both; } .main__hero_downbar__title > h2 { color: #545859; /* Gris oscuro por defecto */ font-family: Fjalla One; font-size: 38px; font-style: normal; font-weight: 400; line-height: 50px; letter-spacing: 1px; text-transform: uppercase; padding-left: 40px; } /* ======================================== ANIMATION ======================================== */ @keyframes startTitle { 0% { left: 1500px; } 100% { left: 0px; } } /* ======================================== COLOR VARIANTS ======================================== */ /* BLUE VARIANT (Default - Inversionistas) */ .main__hero__downbar--blue { background-color: #0096A9; } .main__hero__downbar--blue .main__hero_downbar__text > span, .main__hero__downbar--blue .main__hero_downbar__text > p { color: #FFF; } .main__hero__downbar--blue .main__hero_downbar__title { background-color: #F5F3F1; } .main__hero__downbar--blue .main__hero_downbar__title > h2 { color: #545859; } /* RED VARIANT (Rojo corporativo) */ .main__hero__downbar--red { background-color: #d7282f; } .main__hero__downbar--red .main__hero_downbar__text > span, .main__hero__downbar--red .main__hero_downbar__text > p { color: #FFF; } .main__hero__downbar--red .main__hero_downbar__title { background-color: #F5F3F1; } .main__hero__downbar--red .main__hero_downbar__title > h2 { color: #545859; } /* ORANGE VARIANT (ASG Sustentabilidad) */ .main__hero__downbar--orange { background-color: #BE4D00; } .main__hero__downbar--orange .main__hero_downbar__text > span, .main__hero__downbar--orange .main__hero_downbar__text > p { color: #FFF; } .main__hero__downbar--orange .main__hero_downbar__title { background-color: #F5F3F1; } .main__hero__downbar--orange .main__hero_downbar__title > h2 { color: #545859; } /* OLIVE VARIANT (Verde olivo) */ .main__hero__downbar--olive { background-color: #BABC16; } .main__hero__downbar--olive .main__hero_downbar__text > span, .main__hero__downbar--olive .main__hero_downbar__text > p { color: #FFF; } .main__hero__downbar--olive .main__hero_downbar__title { background-color: #F5F3F1; } .main__hero__downbar--olive .main__hero_downbar__title > h2 { color: #545859; } /* GRAY VARIANT (Gris corporativo) */ .main__hero__downbar--gray { background-color: #545859; } .main__hero__downbar--gray .main__hero_downbar__text > span, .main__hero__downbar--gray .main__hero_downbar__text > p { color: #FFF; } .main__hero__downbar--gray .main__hero_downbar__title { background-color: #F5F3F1; } .main__hero__downbar--gray .main__hero_downbar__title > h2 { color: #545859; } /* BEIGE VARIANT (Comercialización) */ .main__hero__downbar--beige { background-color: #CFC493; } .main__hero__downbar--beige .main__hero_downbar__text > span, .main__hero__downbar--beige .main__hero_downbar__text > p { color: #545859; /* Texto oscuro en fondo claro */ } .main__hero__downbar--beige .main__hero_downbar__title { background-color: #F5F3F1; } .main__hero__downbar--beige .main__hero_downbar__title > h2 { color: #545859; } /* DARK VARIANT (Fondo oscuro con texto claro) */ .main__hero__downbar--dark { background-color: #2C2C2C; } .main__hero__downbar--dark .main__hero_downbar__text > span, .main__hero__downbar--dark .main__hero_downbar__text > p { color: #FFF; } .main__hero__downbar--dark .main__hero_downbar__title { background-color: #545859; } .main__hero__downbar--dark .main__hero_downbar__title > h2 { color: #FFF; } /* ======================================== RESPONSIVE DESIGN ======================================== */ @media (max-width: 1000px) { .main__hero__downbar { flex-direction: column; height: auto; top: 0; } .main__hero_downbar__text { width: 100%; padding: 20px; text-align: center; } .main__hero_downbar__text > span, .main__hero_downbar__text > p { text-align: center; } .main__hero_downbar__title { width: 100%; padding: 20px; left: 0; animation: none; /* Desactivar animación en móvil */ } .main__hero_downbar__title > h2 { font-size: 28px; line-height: 35px; padding-left: 0; text-align: center; } } @media (max-width: 768px) { .main__hero_downbar__title > h2 { font-size: 24px; line-height: 30px; } }