/** * Tema: Economía Circular - Manual de Marca * * Colores Principales: * - Blanco: #FFFFFF * - Azul: #003399 * * Colores Complementarios: * - Amarillo: #FFCC00 * - Lavanda: #9889FF * * Para aplicar este tema, agregar la clase "theme-circular-economy" al elemento * Ejemplo: */ /* ============================================ VARIABLES DEL TEMA ============================================ */ .theme-circular-economy { /* Variables CSS personalizadas para el tema */ --theme-primary: #003399; /* Azul principal */ --theme-primary-dark: #011b40; /* Azul oscuro (variación) */ --theme-primary-light: #3568cf; /* Azul claro (variación) */ --theme-primary-dark-2: #002566; --theme-accent-yellow: #FFCC00; /* Amarillo complementario */ --theme-accent-lavender: #9889FF; /* Lavanda complementario */ --theme-white: #FFFFFF; /* Blanco */ --theme-bg-light: #F5F7FF; /* Fondo claro azulado */ --theme-bg-lavender: #F0EDFF; /* Fondo claro lavanda */ --theme-bg-yellow: #FFF9E6; /* Fondo claro amarillo */ --theme-bg-gray: #F8F9FC; /* Fondo gris claro */ } /* ============================================ COLORES PRINCIPALES - REEMPLAZO DE VERDES ============================================ */ /* Color principal verde (#5BBB7B) -> Azul (#003399) */ .theme-circular-economy a:hover, .theme-circular-economy .btn:hover { color: var(--theme-primary) !important; } .theme-circular-economy .btn-thm, .theme-circular-economy .btn-primary { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; color: var(--theme-white) !important; } .theme-circular-economy .btn-thm:hover, .theme-circular-economy .btn-primary:hover { background-color: var(--theme-primary) !important; border-color: var(--theme-primary-light) !important; color: var(--theme-white) !important; } .theme-circular-economy .btn-thm:before, .theme-circular-economy .ud-btn:before, .theme-circular-economy .btn-gray:before, .theme-circular-economy .btn-dark:before, .theme-circular-economy .btn-light-thm:before, .theme-circular-economy .btn-light-white:before, .theme-circular-economy .btn-thm2:before, .theme-circular-economy .btn-home3:before, .theme-circular-economy .btn-thm3:before, .theme-circular-economy .btn-thm4:before, .theme-circular-economy .btn-thm-border:before, .theme-circular-economy .btn-dark-border:before, .theme-circular-economy .btn-white:before, .theme-circular-economy .btn-light-gray:before, .theme-circular-economy .btn-transparent:before, .theme-circular-economy .btn-transparent2:before { background-color: var(--theme-primary) !important; } .theme-circular-economy .btn-thm:hover:before { background-color: var(--theme-primary-light) !important; border-color: var(--theme-primary-light) !important; } .theme-circular-economy .btn-thm-border { border-color: var(--theme-primary) !important; color: var(--theme-primary) !important; } .theme-circular-economy .btn-thm-border:hover { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; } .theme-circular-economy .btn-dark:hover { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; } .theme-circular-economy .btn-light-thm { background-color: rgba(0, 51, 153, 0.1) !important; color: var(--theme-primary) !important; } .theme-circular-economy .btn-thm2 { background-color: var(--theme-primary-light) !important; color: var(--theme-white) !important; } .theme-circular-economy .btn-thm2:hover { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; color: var(--theme-white) !important; } .theme-circular-economy .btn-thm3 { border-color: var(--theme-primary) !important; color: var(--theme-primary) !important; } .theme-circular-economy .btn-thm4 { background-color: var(--theme-primary-dark) !important; color: var(--theme-white) !important; } .theme-circular-economy .btn-white:hover, .theme-circular-economy .btn-white2:hover { border-color: var(--theme-primary) !important; color: var(--theme-white) !important; } .theme-circular-economy .btn-outline-primary { background-color: transparent !important; border-color: var(--theme-primary) !important; color: var(--theme-primary) !important; &:hover { background-color: var(--theme-primary-light) !important; border-color: var(--theme-primary) !important; color: var(--theme-white) !important; } } .theme-circular-economy .btn-outline-white { background-color: transparent !important; border-color: var(--theme-white) !important; color: var(--theme-white) !important; font-size: 16px; font-weight: 600; &:hover { background-color: var(--theme-white) !important; border-color: var(--theme-white) !important; color: var(--theme-primary) !important; } &:before { background-color: var(--theme-white) !important; } } .theme-circular-economy .btn-outline-secondary { background-color: transparent !important; border-color: #cdd0d4 !important; color: #42474c !important; &:hover { background-color: #eff1f9 !important; border-color: #c4c7ca !important; color: #42474c !important; } &:before { background-color: var(--theme-white) !important; } } .theme-circular-economy .btn-outline-primary:before { background-color: var(--theme-primary) !important; } .theme-circular-economy .btn-yellow { background-color: var(--theme-accent-yellow) !important; border-color: var(--theme-accent-yellow) !important; color: var(--theme-primary) !important; font-weight: 600 !important; &:hover { background-color: #fff !important; border-color: #a2bdf5 !important; color: var(--theme-primary) !important; } &:before { background-color: var(--theme-white) !important; } } /* Pagination */ .theme-circular-economy .mbp_pagination { & .page-item { &.active { & .page-link { background-color: var(--theme-primary) !important; color: #ffffff !important; } } } } /* Formularios */ .theme-circular-economy .form-select { border-radius: 8px; border: 2px solid transparent; box-shadow: none; height: 50px; outline: 1px solid #afafaf; padding-left: 20px; } .theme-circular-economy .text-thm { color: var(--theme-primary) !important; } /* ============================================ TEXTOS Y COLORES DE TEXTO ============================================ */ .theme-circular-economy .text-primary { color: var(--theme-primary) !important; } .theme-circular-economy .text-white { color: var(--theme-white) !important; } .theme-circular-economy .text-yellow { color: var(--theme-accent-yellow) !important; } .theme-circular-economy .text-primary-light { color: #c0c6d6 !important; } .theme-circular-economy .text-dark { color: var(--theme-primary-dark-2) !important; } /* ============================================ FONDOS Y BACKGROUNDS ============================================ */ .theme-circular-economy .bgc-thm { background-color: var(--theme-primary) !important; } .theme-circular-economy .bgc-thm2 { background-color: var(--theme-primary-dark) !important; } .theme-circular-economy .bgc-thm3 { background-color: var(--theme-bg-light) !important; } .theme-circular-economy .bg-accent-yellow { background-color: var(--theme-accent-yellow) !important; & h2 { color: var(--theme-primary) !important; } & .paragraph { color: var(--theme-primary) !important; } } .theme-circular-economy .bg-accent-lavender { background-color: #fffbeb !important; } .theme-circular-economy .bgc-primary { background-color: var(--theme-primary-light) !important; } .theme-circular-economy .bgc-lavender { background-color: var(--theme-bg-lavender) !important; } .theme-circular-economy .bgc-yellow { background-color: var(--theme-bg-yellow) !important; } .theme-circular-economy .bgc-white { background-color: var(--theme-white) !important; } /* Header */ .theme-circular-economy header .add-joining { font-weight: 600 !important; } /* Hero */ .theme-circular-economy .hero-home { background: linear-gradient(135deg, var(--theme-primary) 0%, #002266 100%); & .home11-hero-content { & h2 { color: var(--theme-white) !important; } & p { color: var(--theme-white) !important; } & .btn { color: var(--theme-white) !important; } } & .home11-hero-img{ & img { width: 100% !important; height: auto !important; object-fit: cover !important; border-radius: 0px 80px 0px 80px !important; } & .iconbox-small1 { bottom: 100px; left: -30px; } & .iconbox-small2 { top: 100px; } } } /* Indicators */ .theme-circular-economy .indicators-home { background-color: var(--theme-white) !important; margin-top: -50px; margin-left: 15px; margin-right: 15px; max-width: 850px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 51, 153, 0.1); } /* Mobile responsive */ @media (max-width: 575.98px) { .theme-circular-economy .indicators-home { margin-top: -20px; } } /* Featured Categories */ .theme-circular-economy .featured-categories { background-color: transparent !important; & .iconbox-style1 { background-color: var(--theme-bg-gray); &:hover { background-color: var(--theme-bg-gray) !important; border-color: var(--theme-primary) !important; & .icon { color: var(--theme-primary) !important; &:before { background-color: transparent !important; } } & .title a { color: var(--theme-primary) !important; } & .text { color: var(--headings-color) !important; } } } } /* Popular services */ .theme-circular-economy .popular-services { background-color: var(--theme-bg-gray) !important; & .list-thumb { height: 170px; & img { max-width: 100%; height: auto; object-fit: cover; } } & .list-content { & .list-text { background-color: rgba(152, 137, 255, 0.15); color: #5a4bce; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; width: fit-content; } & .list-title { line-height: 1.2; & a { color: var(--theme-primary) !important; &:hover { text-decoration: none; color: #575757 !important; } } } & .review-meta { display: none !important; } & .list-meta { flex-direction: column; align-items: start !important; & .d-flex { display: none !important; } & .btn-view-detail { margin: 5px auto 0 auto !important; padding: 4px 12px; display: block; &:hover { background-color: var(--theme-primary-light) !important; border-color: var(--theme-primary-light) !important; color: var(--theme-white) !important; } } } } } /* Responsive */ @media (max-width: 768px) { .theme-circular-economy .popular-services { & .list-thumb { height: auto; & img { max-width: 100%; height: auto; object-fit: cover; } } } } /* How it works */ .theme-circular-economy .how-it-works { background-color: var(--theme-primary) !important; & .main-title { & h2 { color: var(--theme-white) !important; } & p { color: var(--theme-white) !important; } } & .iconbox-style1 { background-color: transparent !important; &:hover { background-color: transparent !important; } & .icon { background-color: rgba(255, 255, 255, 0.15) !important; color: var(--theme-white) !important; } &.after_style { &:before { background-color: #4465b1 !important; } } & .details { & h4 { color: var(--theme-white) !important; } & p { color: var(--theme-white) !important; } } } } /* Why join us */ .theme-circular-economy .why-join-us { background-color: transparent !important; & .home13-ctaimg-1 { & img { max-width: 100%; height: auto; object-fit: cover; } } } /* Our Partners */ .theme-circular-economy .our-partners { background-color: transparent !important; & .partner_item { & img { max-width: 100%; height: 50px; object-fit: cover; } } } /* CTA Sections */ .theme-circular-economy .home11-cta-3 { background: var(--theme-accent-yellow) !important; height: 350px; & .cta-title { color: var(--theme-primary) !important; } } /* Footer */ .theme-circular-economy .footer-style1 { background-color: var(--theme-primary-dark) !important; & .link-style1.at-home11 { & a { color: #b0b0b0; &:hover { color: #ffffff !important; } } & .copyright-text { color: #b0b0b0 !important; } } & .mailchimp-style1 { & .form-control { background-color: #ffffff0d !important; &::placeholder { color: #b0b0b0 !important; } } & button { color: var(--theme-accent-lavender) !important; } } } /* ============================================ LOGIN & REGISTER PAGES - LAYOUT 2 COLUMNAS CON BOOTSTRAP ============================================ */ .login-page, .register-page { margin: 0; padding: 0; } /* Asegurar que bg-primary use el color del tema */ .login-page .bg-primary, .register-page .bg-primary { background-color: var(--theme-primary) !important; } /* Ajustes para el min-vh-100 */ .min-vh-100 { min-height: 100vh; } /* ============================================ REGISTER - MULTI-STEP FORM ============================================ */ /* Progress Bar */ .theme-circular-economy .register-progress { margin-bottom: 40px; } .theme-circular-economy .progress-steps { position: relative; padding: 20px 0; } .theme-circular-economy .step-item { flex: 1; text-align: center; position: relative; z-index: 2; } .theme-circular-economy .step-number { width: 40px; height: 40px; border-radius: 50%; background-color: #e0e0e0; color: #999; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 18px; margin: 0 auto 10px; transition: all 0.3s ease; border: 3px solid #e0e0e0; } .theme-circular-economy .step-item.active .step-number, .theme-circular-economy .step-item.completed .step-number { background-color: var(--theme-primary); color: var(--theme-white); border-color: var(--theme-primary); } .theme-circular-economy .step-item.completed .step-number::before { /*content: "\f00c"; font-family: "Font Awesome 6 Pro"; font-weight: 900;*/ } .theme-circular-economy .step-label { font-size: 14px; color: #999; font-weight: 500; transition: color 0.3s ease; } .theme-circular-economy .step-item.active .step-label, .theme-circular-economy .step-item.completed .step-label { color: var(--theme-primary); font-weight: 600; } .theme-circular-economy .step-line { flex: 1; height: 3px; background-color: #e0e0e0; margin: 0 10px; margin-top: -25px; position: relative; z-index: 1; transition: background-color 0.3s ease; } .theme-circular-economy .step-line.completed { background-color: var(--theme-primary); } /* Form Steps */ .theme-circular-economy .form-step { display: none; animation: fadeIn 0.3s ease; } .theme-circular-economy .form-step.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Interest Cards */ .interest-cards-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; } .interest-card-wrapper { position: relative; } .interest-radio { position: absolute; opacity: 0; width: 0; height: 0; } .interest-card { display: flex; flex-direction: column; align-items: center; padding: 30px 20px; background: #f8f9fc; border: 2px solid #e0e0e0; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; text-align: center; height: 100%; } .interest-card:hover { border-color: var(--theme-primary); background: #f5f7ff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 51, 153, 0.1); } .interest-radio:checked + .interest-card { border-color: var(--theme-primary); background: #f5f7ff; box-shadow: 0 4px 16px rgba(0, 51, 153, 0.15); } .interest-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-size: 28px; } .interest-icon-blue { background: rgba(0, 51, 153, 0.1); color: var(--theme-primary); } .interest-icon-green { background: rgba(34, 197, 94, 0.1); color: #22c55e; } .interest-icon-yellow { background: rgba(255, 204, 0, 0.1); color: var(--theme-accent-yellow); } .interest-title { font-size: 18px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; } .interest-subtitle { font-size: 14px; color: #666; } /* Info Box */ .theme-circular-economy .info-box { border-left: 4px solid var(--theme-primary); } .theme-circular-economy .info-box ul { list-style: none; } .theme-circular-economy .info-box ul li { position: relative; padding-left: 20px; margin-bottom: 8px; } .theme-circular-economy .info-box ul li::before { content: "\f00c"; font-family: "Font Awesome 6 Pro"; font-weight: 900; position: absolute; left: 0; color: var(--theme-primary); } /* Form Controls */ .theme-circular-economy .form-check-input:checked { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; } .theme-circular-economy .form-check-input:focus { border-color: var(--theme-primary) !important; box-shadow: 0 0 0 0.2rem rgba(0, 51, 153, 0.25) !important; } .theme-circular-economy .form-control.is-invalid, .theme-circular-economy .form-select.is-invalid { border-color: #dc3545 !important; } .theme-circular-economy .form-control.is-invalid:focus, .theme-circular-economy .form-select.is-invalid:focus { border-color: #dc3545 !important; box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important; } .theme-circular-economy .radio-group .form-check, .theme-circular-economy .checkbox-group .form-check { padding: 12px; border: 1px solid #e0e0e0; border-radius: 8px; transition: all 0.3s ease; } .theme-circular-economy .radio-group .form-check:hover, .theme-circular-economy .checkbox-group .form-check:hover { border-color: var(--theme-primary); background-color: var(--theme-bg-light); } .theme-circular-economy .radio-group .form-check-input:checked ~ .form-check-label, .theme-circular-economy .checkbox-group .form-check-input:checked ~ .form-check-label { color: var(--theme-primary); font-weight: 600; } /* Responsive Register Form */ @media (max-width: 1024px) { .interest-cards-container { grid-template-columns: 1fr; gap: 15px; } } @media (max-width: 768px) { .theme-circular-economy .step-label { font-size: 12px; } .theme-circular-economy .step-number { width: 40px; height: 40px; font-size: 16px; } .theme-circular-economy .step-line { margin-top: -20px; } .theme-circular-economy .register-progress { margin-bottom: 30px; } } /* ============================================ DROPZONE STYLE - FILE UPLOAD ============================================ */ .dropzone-wrapper { position: relative; } .file-input-hidden { position: absolute; width: 0; height: 0; opacity: 0; overflow: hidden; z-index: -1; } .dropzone-area { border: 2px dashed #d0d7de; border-radius: 12px; padding: 40px 20px; text-align: center; background-color: #fafbfc; transition: all 0.3s ease; cursor: pointer; position: relative; min-height: 180px; display: flex; align-items: center; justify-content: center; } .dropzone-area:hover { border-color: var(--theme-primary); background-color: #f5f7ff; } .dropzone-area.drag-over { border-color: var(--theme-primary); background-color: #f0f4ff; border-style: solid; } .dropzone-area.has-file { border-color: var(--theme-primary); background-color: #f5f7ff; padding: 20px; min-height: auto; } .dropzone-content { width: 100%; } .dropzone-icon { font-size: 48px; color: var(--theme-primary); margin-bottom: 16px; display: block; } .dropzone-text { font-size: 16px; font-weight: 500; color: #1a1a1a; margin: 0; } .dropzone-text-small { font-size: 14px; margin: 8px 0; } .dropzone-preview { width: 100%; padding: 16px; background: white; border-radius: 8px; border: 1px solid #e1e8ed; } .dropzone-file-icon { font-size: 32px; color: var(--theme-primary); } .dropzone-file-name { font-size: 14px; color: #1a1a1a; word-break: break-word; } .dropzone-file-size { font-size: 12px; } .btn-remove-file { padding: 4px 8px; font-size: 18px; line-height: 1; border: none; background: none; color: #dc3545; cursor: pointer; transition: color 0.2s; } .btn-remove-file:hover { color: #c82333; } .btn-remove-file:focus { outline: none; box-shadow: none; } /* Ocultar contenido cuando hay archivo */ .dropzone-area.has-file .dropzone-content { display: none; } .dropzone-area.has-file .dropzone-preview { display: block !important; } /* Responsive para dropzone */ @media (max-width: 768px) { .dropzone-area { padding: 30px 15px; min-height: 150px; } .dropzone-icon { font-size: 36px; margin-bottom: 12px; } .dropzone-text { font-size: 14px; } } /* ============================================ SUSTAINABLE IMPACT SECTION - PRODUCT DETAIL ============================================ */ .sustainable-impact-section { margin: 40px 0; } .impact-header-box { text-align: center; } .impact-header-box .border-box { border: 2px solid #000; border-radius: 4px; display: inline-block; min-width: 300px; } .impact-header-box h2 { font-size: 32px; font-weight: 700; color: #000; margin-bottom: 8px; } .impact-header-box p { font-size: 14px; color: #666; } .impact-card { padding: 24px; background-color: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; } .impact-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); transform: translateY(-2px); } .impact-card h5 { font-size: 18px; font-weight: 600; color: #000; margin-bottom: 16px; } .impact-percentage { text-align: center; } .impact-percentage .h2 { font-size: 36px; font-weight: 700; color: #000; } .impact-card .progress { background-color: #e9ecef; border-radius: 12px; overflow: hidden; } .impact-card .progress-bar { background-color: var(--theme-accent-lavender) !important; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; } .impact-card .text { font-size: 14px; line-height: 1.6; color: #333; } .impact-card .text strong { font-weight: 700; color: #000; } .impact-certification-box { background-color: var(--theme-bg-lavender) !important; border: 1px solid var(--theme-accent-lavender) !important; border-radius: 12px; padding: 24px; } .impact-certification-box h4 { color: var(--theme-primary) !important; font-weight: 600; font-size: 20px; margin-bottom: 12px; } .impact-certification-box .text { font-size: 14px; line-height: 1.6; color: #333; } .impact-certification-box .text strong { font-weight: 700; color: #000; } .cert-icon i { color: var(--theme-accent-lavender) !important; } /* Responsive para Sustainable Impact */ @media (max-width: 768px) { .impact-header-box h2 { font-size: 24px; } .impact-header-box .border-box { min-width: auto; width: 100%; padding: 12px !important; } .impact-card { padding: 20px; margin-bottom: 20px; } .impact-percentage .h2 { font-size: 28px; } .impact-certification-box { padding: 20px; } .impact-certification-box .d-flex { flex-direction: column; text-align: center; } .cert-icon { margin-bottom: 16px; margin-right: 0 !important; } } /* ============================================ CATEGORIES STYLE ============================================ */ .theme-circular-economy .categories-list-section, .theme-circular-economy .related-products, .theme-circular-economy .products-section { & .list-thumb { height: 170px; & img { max-width: 100%; height: auto; object-fit: cover; } } & .list-content { & .list-text { background-color: rgba(152, 137, 255, 0.15); color: #5a4bce; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; width: fit-content; } & .list-title { & a { color: var(--theme-primary) !important; &:hover { text-decoration-color: var(--theme-primary) !important; } } } & .review-meta { display: none !important; } & .list-meta { flex-direction: column; align-items: start !important; & .d-flex { display: none !important; } & .btn-view-detail { margin: 5px auto 0 auto !important; padding: 4px 12px; display: block; &:hover { background-color: var(--theme-primary-light) !important; border-color: var(--theme-primary-light) !important; color: var(--theme-white) !important; } } } } & .mbp_pagination { & .page-item.active { & .page-link { background-color: var(--theme-primary); color: #ffffff; } } } } /* ============================================ DIRECTORY - SKILL TAGS Y VERIFICACIÓN ============================================ */ /* Tags con fondo lavanda light */ .theme-circular-economy .freelancer-style1 .skill-tags .tag, .theme-circular-economy .skill-tags .tag, .theme-circular-economy .service-about .skill-tags .tag { background-color: var(--theme-bg-lavender) !important; color: var(--theme-primary) !important; padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; border: none; } /* Badge de verificación */ .theme-circular-economy .verified-badge { display: inline-flex; align-items: center; justify-content: center; } .theme-circular-economy .verified-badge i { font-size: 18px; color: var(--theme-primary) !important; } .theme-circular-economy .verified-badge:hover { opacity: 0.8; } /* ============================================ DIRECTORY DETAIL - ESTILOS ESPECÍFICOS ============================================ */ /* Certificación boxes */ .theme-circular-economy .certification-box { background-color: var(--theme-bg-lavender); transition: all 0.3s ease; } .theme-circular-economy .certification-box:hover { box-shadow: 0 4px 12px rgba(0, 51, 153, 0.15); transform: translateY(-2px); } /* Contact info icons */ .theme-circular-economy .contact-info .icon i { color: var(--theme-primary) !important; } /* Productos y servicios cards */ .theme-circular-economy .iconbox-style1.contact-style.text-center { padding: 24px; border-radius: 12px; border: 1px solid #e9ecef; transition: all 0.3s ease; } .theme-circular-economy .iconbox-style1.contact-style.text-center:hover { border-color: var(--theme-primary); box-shadow: 0 4px 12px rgba(0, 51, 153, 0.1); } .theme-circular-economy .iconbox-style1.contact-style.text-center .icon span { color: var(--theme-primary) !important; } .theme-circular-economy .nav-link { color: var(--theme-primary) !important; &:hover { color: var(--theme-primary-light) !important; } }