/*================================================== RESET E CONFIGURAÇÕES GLOBAIS (Fonte Montserrat deve ser carregada via no ) ==================================================*/ * { font-family: 'Montserrat', sans-serif; } /*================================================== BODY E FUNDO ==================================================*/ body { background-color: #f7f8fc; } .fundo-artistico { background: url(../Content/img/fundo_topo_artístico.webp) no-repeat center top; background-position: bottom; /* caso queira que o fundo se ajuste: */ background-size: cover; } .fundo-investigativo { background: url(../Content/img/fundo_topo_investigativo.webp) no-repeat center top; background-position: bottom; /* caso queira que o fundo se ajuste: */ background-size: cover; } .fundo-empreendedor { background: url(../Content/img/fundo_topo_empreendedor.webp) no-repeat center top; background-position: bottom; /* caso queira que o fundo se ajuste: */ background-size: cover; } .fundo-realista { background: url(../Content/img/fundo_topo_realista.webp) no-repeat center top; background-position: bottom; /* caso queira que o fundo se ajuste: */ background-size: cover; } .fundo-social { background: url(../Content/img/fundo_topo_social.webp) no-repeat center top; background-position: bottom; /* caso queira que o fundo se ajuste: */ background-size: cover; } .fundo-convencional { background: url(../Content/img/fundo_topo_convencional.webp) no-repeat center top; background-position: bottom; /* caso queira que o fundo se ajuste: */ background-size: cover; } .rodape { background-color: #214f93; } /*================================================== TIPOGRAFIA E TEXTOS ==================================================*/ .texto { color: #214f93; } .texto-laranja { color: #f47330; } .fs-grande { font-size: 50px; } .mt-custom { margin-top: 100px; } .blue { color: #fff; background-color: rgb(29, 81, 148); } .orange { color: orange !important; } /*================================================== BOTÕES ==================================================*/ /* Botão laranja principal */ .botao { background-color: #f47330; color: #fff; } .botao:hover { background-color: #be561e; color: #fff; } /* Botão cinza */ .btn-cinza { background-color: #afafaf; color: #fff; } .btn-cinza:hover { background-color: #646464; color: #fff; } .btn-reiniciar { background-color: #C4C4C4; color: #214f93; } /* Botão outline customizado */ .btn-outline-custom { border-color: #e05a22; color: #e05a22; font-weight: 500; border-radius: 50px; padding: 0.375rem 1.25rem; transition: background-color 0.3s, color 0.3s; } .btn-outline-custom:hover { background-color: #e05a22; color: #fff; } /*================================================== CURSOR ==================================================*/ .escolha { cursor: pointer; } /*================================================== CÍRCULOS DE PERCENTUAL ==================================================*/ .circle { width: 90px; height: 90px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 1.5rem; margin: 0 auto 0.5rem auto; } /* Cores específicas por perfil */ .artistico { background-color: #599b48; } .investigativo { background-color: #6db3ff; } .empreendedor { background-color: #7200c9; } .realista { background-color: #e73b65; } .social { background-color: #ffd68b; color: #3a3a99; } .convencional { background-color: #e05a22; } /*================================================== Gráficos ==================================================*/ .progress { height: 30px; border-radius: 10px; background-color: #ced4da; /* cor cinza do background */ } .progress-bar { border-radius: 10px; font-weight: 600; font-size: 0.9rem; padding-left: 10px; line-height: 30px; } .grafico-geral { background-color: #609c36; } .investigativo-grafico { background-color: #66b8ff; /* azul claro */ } .social-grafico { background-color: #ffcf7d; /* amarelo claro */ color: #000; } .empreendedor-grafico { background-color: #7000cc; /* roxo */ } .realistico-grafico { background-color: #ec3661; /* rosa/vermelho */ } .artistico-grafico { background-color: #609c36; /* verde */ } .convencional-grafico { background-color: #d96432; /* laranja */ } .card-custom { border: 1px solid #23478a; border-radius: 12px; } .card-header-custom { background-color: #e0e2e6; color: #23478a; font-weight: 700; border-bottom: 1px solid #23478a; border-top-left-radius: 12px; border-top-right-radius: 12px; padding: 0.75rem 1.25rem; font-size: 1.1rem; } /*================================================== SEÇÕES PERSONALIZADAS ==================================================*/ .bg-light-custom { background-color: #f7f9ff; padding: 2rem; border-radius: 0.5rem; margin-top: 3rem; }