File manager

File manager - Edit - /var/www/html/homologBancodetalentos/public/css/style.css

Back
/* ============================================ Banco de Talentos - Angra dos Reis ============================================ / @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); @font-face { font-family: 'Regular'; src: url('...images/fonts/Materialicons-Regular.otf') format('otf'); font-weight: normal; font-style: normal; } .p-60 { padding: 60px 0; } .p-70 { padding: 70px 0; } .p-80 { padding: 80px 0; } .pb-80 { padding-bottom: 80px; } .bg-fundo { background-color: #ffffff; } :root { --primary-purple: #511282; --secondary-teal: #5DBFB3; --light-purple: #E8D9F3; --text-dark: #333333; --text-light: #666666; --white: #FFFFFF; --footer-purple: #511282; --manus-purple: #6f42c1; --manus-light-purple: #e9dffc; --manus-dark-purple: #4a148c; --manus-background: #fbf8fc; --manus-text-gray: #888888; } .primary-purple { color: var(--primary-purple); } .bg-primary-purple { background-color: var(--primary-purple); } { margin: 0; padding: 0; box-sizing: border-box; font-family: Montserrat, sans-serif; } body { font-family: 'Regular', Tahoma, Geneva, Verdana, sans-serif; color: var(--primary-purple); line-height: 1.6; background-color: #ffffff; } /* HOME / / Carrossel Moderno / .carousel-wrapper { width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; border-radius: 2rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .carousel-wrapper::-webkit-scrollbar { height: 8px; } .carousel-wrapper::-webkit-scrollbar-thumb { background: rgba(81, 18, 130, 0.35); border-radius: 999px; } .carousel-track { display: flex; flex-wrap: nowrap; gap: 1.5rem; width: max-content; min-width: 100%; padding: 1rem 0; } / Cards de Notícia / .noticia-card { flex: 0 0 30%; min-width: 260px; border-radius: 1rem; box-shadow: 0 2px 16px rgba(81, 18, 130, 0.10); cursor: pointer; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); background: #511282; display: flex; flex-direction: column; height: 100%; overflow: hidden; } .noticia-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(81, 18, 130, 0.22); } .noticia-card-image { position: relative; width: 100%; height: 185px; overflow: hidden; background: linear-gradient(135deg, #6a3aaa 0%, #511282 100%); } .noticia-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); } .noticia-card:hover .noticia-card-image img { transform: scale(1.06); } .noticia-card-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(81,18,130,0.55) 100%); transition: opacity 0.3s ease; } .noticia-card:hover .noticia-card-overlay { opacity: 0.8; } .noticia-card-content { padding: 1.25rem 1.5rem 1.5rem; flex-grow: 1; display: flex; flex-direction: column; gap: 0.5rem; } .noticia-card-title { font-size: 0.975rem; font-weight: 600; line-height: 1.45; color: #ffffff; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .tb-news-date { display: inline-block; color: #e0cef5; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.03em; background: rgba(255,255,255,0.12); border-radius: 999px; padding: 0.15rem 0.65rem; width: fit-content; } .tb-news-summary { color: #e8d9f8; margin: 0; font-size: 0.855rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .tb-news-empty { width: 100%; background: #f8f8fc; border: 1px dashed #c9b0e5; border-radius: 0.8rem; padding: 1rem; color: #6c6680; } .tb-news-loading { display: inline-flex; margin-bottom: 0.5rem; color: #6b4d8e; font-size: 0.9rem; } .tb-news-loading.is-hidden { display: none; } .tb-news-section__title { font-size: 2rem; font-weight: 700; letter-spacing: -0.5px; } .tb-news-section__subtitle { font-size: 0.875rem; } .tb-noticias-main, .tb-noticia-main { padding-top: calc(var(--tb-nav-offset) + 1.5rem) !important; } / Card Vazio / .noticia-card-empty { min-height: 300px; justify-content: center; align-items: center; text-align: center; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); } .noticia-card-empty h3 { color: #666; font-size: 1.1rem; margin: 0; } .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 44px; height: 44px; border: 2px solid rgba(81, 18, 130, 0.15); border-radius: 50%; background: white; color: #511282; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 10px rgba(81, 18, 130, 0.12); } .carousel-btn:hover { background: #511282; color: white; border-color: #511282; box-shadow: 0 6px 18px rgba(81, 18, 130, 0.30); transform: translateY(-50%) scale(1.08); } .carousel-btn:active { transform: translateY(-50%) scale(0.95); } .carousel-btn-prev { left: -28px; } .carousel-btn-next { right: -28px; } / ============================================ Navbar - ============================================ / .nav-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #7c3aed, #00c9a7); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .nav-avatar-img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .btn-nav-perfil { background: transparent; border: 2px solid rgba(255, 255, 255, 0.35); color: #fff; border-radius: 50px; padding: 3px 12px 3px 4px; transition: all 0.2s; } .btn-nav-perfil:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.7); color: #fff; } .nav-username { font-size: 13px; font-weight: 500; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dropdown-menu { border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); border: 1px solid rgba(0, 0, 0, 0.08); min-width: 220px; padding: 6px; } .dropdown-item { border-radius: 8px; padding: 8px 12px; font-size: 14px; } .dropdown-item-text { padding: 6px 12px; font-size: 13px; display: block; } / Âncora na home: offset para a navbar fixa ao usar #cadastro-candidato / #cadastro-candidato { scroll-margin-top: 100px; } .btn-cadastro-curriculo { cursor: pointer; font-weight: 500; } .navbar-custom { background-color: var(--primary-purple); padding: 0; position: relative; } / Linha colorida no topo / .navbar-custom::before { background: linear-gradient(90deg, rgba(44, 160, 200, 1) 0%, rgb(44, 200, 140) 23%, rgba(55, 134, 98, 1) 41%, rgba(215, 139, 51, 1) 57%, rgba(202, 100, 53, 1) 74%, rgba(130, 60, 87, 1) 87%, rgba(84, 58, 110, 1) 100%); content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; } .navbar-custom .navbar-brand { padding: 4px 16px; } .navbar-custom .navbar-toggler { border: none; margin-right: 12px; } .navbar-custom .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } / Estilo dos links / .navbar-custom .nav-link { color: rgba(255, 255, 255, 0.88); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.06em; padding: 1.35rem 1.5rem; border-radius: 0; margin: 0; transition: background 0.2s ease, color 0.2s ease; position: relative; } .navbar-custom .nav-link:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); } .navbar-custom .nav-link.active { color: #ffffff !important; font-weight: 700; background: rgba(255, 255, 255, 0.12); } .nav-item:hover { background-color: transparent; } .navbar-custom .nav-item { border-right: 1px solid rgba(255, 255, 255, 0.15); } .navbar-custom .nav-item:last-child { border-right: none; } / Ações da direita / .navbar-custom .navbar-actions { padding: 0 16px; gap: 10px; } .btn-nav-entrar, .btn-nav-cadastre { background-color: transparent; border: none; color: var(--white); padding: 8px 20px; font-size: 0.95rem; font-weight: 500; transition: background-color 0.3s ease; display: flex; align-items: center; gap: 8px; } .btn-nav-entrar:hover, .btn-nav-cadastre:hover { color: #ffffffd3; } / ============================================ Vagas Section ============================================ / .vagas-section { padding: 4rem 0; } .vaga-card { background-color: var(--white); border-radius: 12px; padding: 2rem; margin-bottom: 1.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .vaga-card:hover { transform: translateY(-5px); box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15); } .vaga-icon { width: 60px; height: 60px; background-color: var(--primary-purple); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; } .vaga-icon i { color: var(--white); font-size: 1.8rem; } .vaga-title { font-size: 1.5rem; font-weight: 600; color: var(--text-dark); margin-bottom: 0.5rem; } .vaga-badge { background-color: var(--light-purple); color: var(--primary-purple); padding: 0.3rem 1rem; border-radius: 20px; font-size: 0.9rem; display: inline-block; margin-bottom: 0.5rem; } .vaga-location { color: var(--text-light); font-size: 0.95rem; } / ============================================ Carousel Controls ============================================ / .carousel-control-prev, .carousel-control-next { width: 50px; height: 50px; background-color: var(--primary-purple); border-radius: 50%; opacity: 0.8; transition: opacity 0.3s ease; } .carousel-control-prev:hover, .carousel-control-next:hover { opacity: 1; } / ============================================ Vagas Carousel Nav Buttons ============================================ / .vagas-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 44px; height: 44px; border: 2px solid rgba(81, 18, 130, 0.2); border-radius: 50%; background: white; color: #511282; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; box-shadow: 0 2px 10px rgba(81, 18, 130, 0.15); flex-shrink: 0; } .vagas-nav-btn:hover { background: #511282; color: white; border-color: #511282; box-shadow: 0 6px 18px rgba(81, 18, 130, 0.30); } .vagas-nav-prev { left: -22px; } .vagas-nav-next { right: -22px; } / ============================================ Formulário Fale Conosco ============================================ / .contact-section { padding: 4rem 0; background-color: var(--white); } .contact-title { color: var(--primary-purple); font-size: 3rem; font-weight: 700; margin-bottom: 1rem; } .contact-subtitle { color: var(--text-light); font-size: 1.2rem; margin-bottom: 3rem; } .form-control { border: 4px solid primary-purple; border-radius: 8px; padding: 0.8rem 1rem; font-size: 1rem; transition: border-color 0.3s ease; } .form-control:focus { border-color: var(--primary-purple); box-shadow: 0 0 0 0.2rem rgba(81, 18, 130, 0.25); } .btn-submit { background-color: var(--primary-purple); color: var(--white); padding: 1rem 3rem; border: none; border-radius: 30px; font-size: 1.1rem; font-weight: 600; transition: all 0.3s ease; width: 100%; } .btn-submit:hover { background-color: #4e0e80; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(81, 18, 130, 0.3); } / ============================================ Footer ============================================ / .footer { background: linear-gradient(160deg, #3b0d5e 0%, #511282 55%, #420f6e 100%); color: var(--white); padding: 0 0 0; position: relative; } / Faixa arco-íris no topo (espelha o navbar) / .footer-rainbow { display: none; height: 4px; background: linear-gradient( 90deg, #e74c3c 0%, #e67e22 14%, #f1c40f 28%, #2ecc71 43%, #3498db 57%, #9b59b6 71%, #e91e63 85%, #e74c3c 100% ); } .footer .container { padding-top: 2.75rem; padding-bottom: 0; } / --- Logo e tagline --- / .footer-logo { max-width: 240px; height: auto; opacity: 0.96; } .footer-tagline { font-size: 0.875rem; color: rgba(255,255,255,0.6); line-height: 1.55; max-width: 260px; margin: 0; } / --- Card "Fale com o Bt" --- / .footer-help-card { display: flex; align-items: flex-start; gap: 1rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 1rem; padding: 1.35rem 1.5rem; } .footer-help-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 0.65rem; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #fff; } .footer-help-title { font-size: 1.1rem; font-weight: 700; color: #fff; margin: 0; line-height: 1.4; } / --- Linhas de contato --- / .footer-contacts { display: flex; flex-direction: column; gap: 1rem; } .footer-contact-row { display: flex; align-items: flex-start; gap: 0.875rem; } .footer-contact-pill { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; color: #fff; margin-top: 0.1rem; } .footer-info-label { color: #FFD700; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 0.15rem; } .footer-info-value { font-size: 0.9375rem; font-weight: 500; color: rgba(255,255,255,0.9); margin: 0; line-height: 1.4; } .footer-email { font-size: 0.875rem; word-break: break-all; } / --- Divisória --- / .footer-hr { border: none; border-top: 1px solid rgba(255,255,255,0.12); margin: 2rem 0 1.25rem; } / --- Barra inferior --- / .footer-bottom { padding-bottom: 1.75rem; } .footer-address { font-size: 0.8125rem; color: rgba(255,255,255,0.5); margin: 0; line-height: 1.6; } .footer-copyright { font-size: 0.8125rem; color: rgba(255,255,255,0.5); margin: 0; line-height: 1.6; } / --- Links --- / .footer a { color: var(--white); text-decoration: none; transition: opacity 0.2s ease; } .footer a:hover { opacity: 0.75; } / --- Main row --- / .footer-main { padding-bottom: 0.5rem; } .btn-entrar { background-color: #f2fcff; color: #000000; border-radius: 30px; padding: 8px 20px; border: none; } .btn-entrar:hover { background: #ffffffda; transition: 0.2s; } / ============================================ Página Sobre ============================================ / .text-purple { color: #511282; } .bg-cadastro { background-color: #511282; } .about-content { font-size: 1.1rem; line-height: 1.8; color: var(--text-dark); } .about-content h2 { color: var(--primary-purple); margin-top: 2rem; margin-bottom: 1rem; } .about-content p { margin-bottom: 1.5rem; } .btn-custom { background-color: rgb(255, 255, 255); color: #5a32a3; padding: 12px 30px; font-weight: 400; transition: all 0.3s; border-radius: 30px; } .btn-custom:hover { background-color: #ffffff1e; transform: translateY(-2px); color: white; } .card-option { border: 2px solid; border-radius: 15px; transition: all 0.3s; cursor: pointer; height: 100%; } .card-option:hover { border-color: #6f42c1; transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .card-option.active { border-color: #6f42c1; } / ============================================ Página Vagas ============================================ / .filters h6 { font-weight: 600; color: #555; } .filters label { display: block; margin-bottom: 4px; font-size: 14px; color: #444; } .job-card { background: #fff; border-radius: 30px; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05); padding: 20px; margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between; } .job-icon { background: #f3e8ff; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #6b21a8; margin-right: 20px; } .job-info h5 { margin: 0; font-weight: 600; color: #333; } .job-info p { margin: 2px 0 0; color: #666; font-size: 14px; } .job-info--link:hover h5 { color: #6b21a8; } .job-info--link:hover p { color: #555; } .tag { background: #ede9fe; color: #6b21a8; border-radius: 20px; padding: 4px 10px; font-size: 12px; font-weight: 500; } / Status da candidatura na listagem / detalhe de vagas (substitui o botão "Detalhes") / .job-application-status { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 38px; padding: 0.4rem 1.2rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; white-space: nowrap; border: 2px solid transparent; box-shadow: 0 2px 12px rgba(88, 28, 135, 0.1); transition: box-shadow 0.2s ease, transform 0.2s ease; } .job-application-status:hover { box-shadow: 0 4px 18px rgba(88, 28, 135, 0.16); transform: translateY(-1px); } .job-application-status__icon { font-size: 1.125rem; line-height: 1; flex-shrink: 0; } .job-application-status__label { padding-top: 1px; } .job-application-status--enrolled { background: linear-gradient(135deg, #ffffff 0%, #faf7ff 38%, #ede9fe 100%); border-color: #a78bfa; color: #4c1d95; box-shadow: 0 2px 14px rgba(109, 40, 217, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.85); } .job-application-status--enrolled .job-application-status__icon { color: #7c3aed; } .job-application-status--pipeline { background: #ffffff; border-color: #ddd6fe; color: #5b21b6; box-shadow: 0 1px 10px rgba(107, 33, 168, 0.08); } .job-application-status--pipeline .job-application-status__icon { color: #8b5cf6; } .job-application-status--compact { min-height: 34px; padding: 0.3rem 0.95rem; font-size: 0.8rem; } .job-application-status--compact .job-application-status__icon { font-size: 1rem; } @media (prefers-reduced-motion: reduce) { .job-application-status { transition: none; } .job-application-status:hover { transform: none; } } .btn-details { background-color: #6b21a8; border-radius: 30px; padding: 6px 18px; font-weight: 500; transition: 0.2s; } .btn-details:hover { background-color: #581c87; } .filters { background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .search-bar { background: #fff; border-radius: 50px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .search-bar input, .search-bar select { border-radius: 20px; } .btn-search { border-radius: 20px; background-color: #6b21a8 !important; color: #fff !important; font-weight: 600; font-size: .875rem; padding: .5rem 1rem; border: 2px solid #6b21a8 !important; white-space: nowrap; transition: background-color .2s, border-color .2s; } .btn-search:hover, .btn-search:focus, .btn-search:active { background-color: #581c87 !important; border-color: #581c87 !important; color: #fff !important; } .btn-search-clear { border-radius: 20px; background-color: #f3e8ff !important; color: #6b21a8 !important; font-weight: 600; font-size: .875rem; padding: .5rem 1rem; border: 2px solid #d8b4fe !important; white-space: nowrap; transition: background-color .2s, border-color .2s; } .btn-search-clear:hover, .btn-search-clear:focus, .btn-search-clear:active { background-color: #e9d5ff !important; border-color: #a855f7 !important; color: #581c87 !important; } / PAGINAÇÃO / .pagination { justify-content: center; } .pagination .page-item .page-link { border-radius: 50px; color: #6b21a8; border: none; margin: 0 5px; } .pagination .page-item.active .page-link { background-color: #6b21a8; color: #fff; } .pagination .page-item .page-link:hover { background-color: #ede9fe; color: #6b21a8; } .pagination-summary { text-align: center; color: #666; font-size: 14px; margin-bottom: 10px; } / ============================================ Página Empresas ============================================ / .section-title { color: #5a1f7d; font-weight: 700; font-size: 2.5rem; margin: 3rem 0 2rem 0; text-align: center; } .company-card { background: linear-gradient(135deg, #5a1f7d 0%, #6b2a8f 100%); border: none; border-radius: 1rem; height: 250px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; text-align: center; transition: transform 0.3s, box-shadow 0.3s; cursor: pointer; padding: 2rem; min-height: 250px; } .company-card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(90, 31, 125, 0.3); } .company-icon { width: 80px; height: 80px; border-radius: 50%; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; } .company-icon-dark { background-color: #1a3a4a; } .company-icon-light { background-color: rgb(236, 236, 236); color: white; } .company-name { font-weight: 600; font-size: 1.1rem; line-height: 1.4; word-wrap: break-word; } .companies-container { padding: 2rem 0; } / ============================================ Página Login ============================================ / / Login — layout em talent-bank/sso-entrar.css / .card { border-radius: 15px; / Bordas arredondadas / overflow: hidden; / Garante que o footer arredonde junto / border: none; / Limita a largura do card para melhor visualização / } .card-login { width: 70vh; height: 75vh; / largura desejada / border-radius: 22px; overflow: hidden; border: none; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); background: #ffffff; } .card-footer-custom { height: 30vh; background: #5b1080; color: #fff; display: flex; / ativa o flexbox / justify-content: center; / centraliza horizontalmente / align-items: center; / centraliza verticalmente / flex-direction: column; / mantém o texto e botões empilhados / text-align: center; } .card-title { color: var(--text-dark); font-weight: bold; } / Estilização do botão primário (Acessar) / .btn-primary { background-color: var(--primary-purple); border-color: var(--primary-purple); border-radius: 50px; / Bordas bem arredondadas / padding: 10px 0; font-weight: bold; transition: background-color 0.3s ease; } .btn-primary:hover { background-color: #400e66; / Um roxo um pouco mais escuro no hover / border-color: #400e66; } / Estilização dos botões secundários (Sou candidato, Sou empresa) / .btn-secondary { background-color: var(--secondary-teal); border-color: var(--secondary-teal); color: var(--white); border-radius: 50px; font-weight: bold; padding: 10px 20px; flex-grow: 0.2; / Para ocupar espaço igual / max-width: 45%; / Limita a largura para que fiquem lado a lado / transition: background-color 0.3s ease; } .btn-secondary:hover { background-color: #4aa59c; / Um verde-azulado um pouco mais escuro no hover / border-color: #4aa59c; } / Estilização do rodapé do card / .card-footer { background-color: var(--footer-purple); color: var(--white); padding: 10px 10px !important; } .card-footer h5 { font-weight: bold; color: var(--white); } / Estilização dos inputs / .form-control { border-radius: 8px; padding: 10px } .input-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group .input-group-text { background-color: var(--white); border-left: none; border-top-right-radius: 8px; border-bottom-right-radius: 8px; padding: 10px 15px; color: var(--text-light); } / Link "Esqueci minha senha" / .form-text { color: var(--text-light); font-size: 0.9rem; text-decoration: none; } .form-text:hover { color: var(--primary-purple); } / CADASTRO / .container-main { max-width: 1000px; margin: 0 auto; background-color: white; padding: 3rem; border-radius: 0.5rem; } .page-title { font-size: 1.25rem; font-weight: 400; color: #333; margin-bottom: 2rem; } / Stepper Styles / .stepper-bg-line { position: absolute; top: 18px; left: 0; right: 0; height: 2px; background: #ddd; z-index: 0; } .stepper-progress-line { position: absolute; top: 18px; left: 0; height: 2px; background: #5b1fad; z-index: 1; width: 0%; transition: width 0.4s; } .stepper-container { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3rem; position: relative; } .stepper-line { position: absolute; top: 20px; left: 0; right: 0; height: 2px; background-color: #e0e0e0; z-index: 0; } .stepper-items { display: flex; justify-content: space-between; width: 100%; position: relative; z-index: 1; } .stepper-item { display: flex; flex-direction: column; align-items: center; flex: 1; cursor: pointer; user-select: none; } .stepper-item:hover .stepper-circle { filter: brightness(1.12); transform: scale(1.08); } .stepper-circle { width: 36px; height: 36px; border-radius: 50%; background-color: #ddd; border: 3px solid #ddd; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; transition: all 0.3s ease; } .stepper-item.active .stepper-circle { background-color: #5a1f7d; border-color: #5a1f7d; color: white; } .stepper-item.active .stepper-circle::after { content: '✓'; font-size: 1.2rem; } .stepper-label { font-size: 0.78rem; color: #999; text-align: center; font-weight: 500; } .stepper-item.active .stepper-label { color: #5a1f7d; font-weight: 600; } / Section Styles / .section-box { border: 1px solid #e0e0e0; border-radius: 0.5rem; padding: 2rem; margin-bottom: 2rem; background-color: #fafafa; } .section-subtitle { font-size: 0.9rem; color: #666; margin-bottom: 1.5rem; } .section-label { font-size: 0.9rem; font-weight: 600; color: #5a1f7d; margin-bottom: 1rem; display: block; } / Photo Upload Section / .photo-section { display: flex; align-items: flex-start; gap: 2rem; } .photo-placeholder { width: 120px; height: 120px; border-radius: 0.5rem; background: linear-gradient(135deg, #e8d5f2 0%, #d4b5e8 100%); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: #5a1f7d; flex-shrink: 0; } .photo-upload-area { flex: 1; border: 2px dashed #5a1f7d; border-radius: 0.5rem; padding: 1.5rem; text-align: center; background-color: #f9f5ff; cursor: pointer; transition: all 0.3s; } .photo-upload-area:hover { background-color: #f0e6ff; } .photo-upload-icon { font-size: 1.5rem; color: #5a1f7d; margin-right: 0.5rem; } .photo-upload-text { font-size: 0.95rem; color: #5a1f7d; font-weight: 500; } .photo-upload-hint { font-size: 0.8rem; color: #999; margin-top: 1rem; } / Checkbox Styles / .checkbox-group { display: flex; flex-direction: column; gap: 1rem; } .checkbox-item { display: flex; align-items: flex-start; gap: 0.75rem; } .checkbox-item input[type="checkbox"] { width: 18px; height: 18px; margin-top: 0.25rem; cursor: pointer; accent-color: #5a1f7d; } .checkbox-item label { font-size: 0.9rem; color: #666; cursor: pointer; margin: 0; } .checkbox-item a { color: #5a1f7d; text-decoration: none; font-weight: 500; } .checkbox-item a:hover { text-decoration: underline; } / Input password toggle / .password-toggle { position: relative; } .password-toggle .toggle-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 1rem; } .password-toggle input { padding-right: 40px; } / ============================================ ACCORDION STYLES ============================================ / .accordion-header { background: transparent; border: none; padding: 0; margin: 0; } .accordion-item { border: none; margin-bottom: 1rem; border-radius: 12px !important; border-color: transparent; overflow: hidden; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; } .accordion-button { background: linear-gradient(to right, #511282, #935ceb); color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-right: 0.75rem; } .accordion-button::after { background-image: none !important; border: none !important; content: "+"; width: 34px; height: 34px; min-width: 34px; font-size: 1.1rem; font-weight: 700; color: #511282; background-color: #e9ecef; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease; margin-left: 12px; box-shadow: none; } .accordion-button:not(.collapsed) { color: #fff !important; } .accordion-button:not(.collapsed)::after { content: "−"; transform: rotate(180deg); background-color: #511282; color: #fff !important; } .accordion-button:focus, .accordion-button:not(.collapsed) { box-shadow: none; background-color: transparent; } / ============================================ SOBRE ============================================ / .img-men { max-height: 480px; width: auto; height: auto; object-fit: contain; display: block; z-index: 2; margin-bottom: -1px; } .img-woman { max-height: 450px; width: auto; height: auto; object-fit: contain; display: block; z-index: 1; margin-bottom: -33px; } .me-negativo { margin-right: -130px; } .ms-negativo { margin-left: -20px; } / ============================================ Detalhes vagas — layout moderno ============================================ / .detalhes-vaga-page { background: linear-gradient(180deg, #f8f6fc 0%, #ffffff 28%, #ffffff 100%); min-height: 60vh; } .detalhes-vaga-container { max-width: 1040px; } .detalhes-vaga-shell { display: flex; flex-direction: column; gap: 1.5rem; } .detalhes-vaga-hero { background: #fff; border-radius: 1.25rem; padding: 1.35rem 1.5rem 1.5rem; border: 1px solid rgba(109, 40, 217, 0.12); box-shadow: 0 12px 40px rgba(81, 18, 130, 0.07); } .detalhes-vaga-hero__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .detalhes-vaga-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; justify-content: flex-start; } .detalhes-vaga-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.85rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; color: var(--manus-dark-purple); background: var(--manus-light-purple); border: 1px solid rgba(109, 40, 217, 0.15); } .detalhes-vaga-chip i { font-size: 0.9rem; opacity: 0.85; } .detalhes-vaga-chip--muted { background: #f4f4f5; color: #52525b; border-color: rgba(0, 0, 0, 0.06); } .detalhes-vaga-hero__title { font-size: clamp(1.75rem, 4vw, 2.35rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: #18181b; margin: 0; padding-bottom: 0.75rem; border-bottom: 3px solid var(--manus-purple); max-width: 42rem; } .detalhes-vaga-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; } @media (min-width: 992px) { .detalhes-vaga-grid { grid-template-columns: 1fr minmax(240px, 280px); gap: 1.5rem; } } .detalhes-vaga-main { display: flex; flex-direction: column; gap: 1rem; } .detalhes-vaga-two { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .detalhes-vaga-two { grid-template-columns: 1fr 1fr; } } .detalhes-vaga-card { background: #fff; border-radius: 1rem; border: 1px solid rgba(109, 40, 217, 0.1); box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04); overflow: hidden; } .detalhes-vaga-card__title { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--manus-purple); margin: 0; padding: 0.85rem 1.25rem; background: linear-gradient(90deg, rgba(243, 232, 255, 0.65) 0%, rgba(255, 255, 255, 0) 100%); border-bottom: 1px solid rgba(109, 40, 217, 0.08); } .detalhes-vaga-card__body { padding: 1.1rem 1.25rem 1.25rem; } .detalhes-vaga-prose { font-size: 0.9375rem; line-height: 1.65; color: #3f3f46; white-space: pre-wrap; } .detalhes-vaga-empty { font-size: 0.9375rem; line-height: 1.5; color: #a1a1aa; font-style: italic; } .detalhes-vaga-aside { display: flex; flex-direction: column; gap: 0.75rem; } .detalhes-vaga-stat { background: #fff; border-radius: 1rem; border: 1px solid rgba(109, 40, 217, 0.12); padding: 1.1rem 1.2rem; box-shadow: 0 4px 16px rgba(81, 18, 130, 0.05); } .detalhes-vaga-stat__label { display: block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #71717a; margin-bottom: 0.35rem; } .detalhes-vaga-stat__value { font-size: 1.75rem; font-weight: 700; color: var(--manus-dark-purple); line-height: 1.1; margin: 0; } .detalhes-vaga-stat__value--sm { font-size: 1.05rem; font-weight: 600; line-height: 1.35; } .detalhes-vaga-stat__hint { font-size: 0.8125rem; color: #71717a; margin: 0.35rem 0 0; } .detalhes-vaga-actions { background: #fff; border-radius: 1rem; border: 1px solid rgba(109, 40, 217, 0.1); padding: 1.25rem 1.35rem; box-shadow: 0 8px 28px rgba(81, 18, 130, 0.06); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } .detalhes-vaga-actions__form { margin: 0; } .detalhes-vaga-actions__info { display: flex; align-items: center; gap: 0.6rem; flex: 1; font-size: 0.9375rem; color: #3f3f46; font-weight: 500; } .detalhes-vaga-hero__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid rgba(109, 40, 217, 0.08); } .detalhes-vaga-summary-item { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; color: #3f3f46; } .detalhes-vaga-summary-item i { color: var(--manus-purple); font-size: 0.95rem; } .detalhes-vaga-summary-item .text-muted { font-weight: 400; font-size: 0.85rem; } .detalhes-vaga-summary-sep { color: #d4d4d8; font-weight: 400; } .detalhes-vaga-card__title i { opacity: 0.8; } .detalhes-vaga-stat__label i { opacity: 0.7; } #detalhes-vagas { padding: 0; } .detalhes-vaga-hero .detalhes-vaga-back { background: rgba(249, 245, 255, 0.85); } @media (max-width: 575.98px) { .detalhes-vaga-hero__top { flex-direction: column; align-items: stretch; } .detalhes-vaga-hero__meta { justify-content: flex-start; } } .detalhes-vaga-back { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1.1rem 0.5rem 0.85rem; border-radius: 999px; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em; color: var(--manus-dark-purple); background: #fff; border: 1px solid rgba(109, 40, 217, 0.22); text-decoration: none; box-shadow: 0 1px 4px rgba(88, 28, 135, 0.06); transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; } .detalhes-vaga-back:hover { color: var(--manus-dark-purple); background: var(--manus-light-purple); border-color: rgba(109, 40, 217, 0.38); box-shadow: 0 4px 14px rgba(88, 28, 135, 0.1); } .detalhes-vaga-back:focus-visible { outline: 2px solid var(--manus-purple); outline-offset: 3px; } .detalhes-vaga-back i { font-size: 1.05rem; line-height: 1; } @media (prefers-reduced-motion: reduce) { .detalhes-vaga-back { transition: none; } } .text-sm-90 { font-size: 0.9em; } .bg-manus-background { background-color: var(--manus-background) !important; } .text-manus-dark-purple { color: var(--manus-dark-purple) !important; } .bg-manus-light-purple { background-color: var(--manus-light-purple) !important; } .text-manus-text-gray { color: var(--manus-text-gray) !important; } / ── Nome da empresa nas vagas ────────────────────────────── / .job-company-name { font-size: 0.82rem; font-weight: 600; color: var(--manus-purple); display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.2rem !important; } .job-company-name i { font-size: 0.78rem; } .detalhes-vaga-hero__company { font-size: 0.95rem; color: #6b7280; display: flex; align-items: center; gap: 0.25rem; } .detalhes-vaga-hero__company i { opacity: 0.7; } / ── Banner de compatibilidade por área de interesse ──────── / .vagas-compatibility-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1rem; padding: 0.85rem 1.1rem; border-radius: 0.75rem; font-size: 0.9rem; } .vagas-compatibility-banner--active { background: linear-gradient(135deg, #f5f0ff 0%, #ede9fe 100%); border: 1px solid rgba(109, 40, 217, 0.2); } .vagas-compatibility-banner--hint { background: #fffbeb; border: 1px solid #fde68a; } .vagas-compatibility-banner__info { display: flex; align-items: center; gap: 0.65rem; flex: 1; min-width: 0; } .vagas-compatibility-banner--active .vagas-compatibility-banner__info > i { font-size: 1.2rem; color: var(--manus-purple); flex-shrink: 0; } .vagas-compatibility-banner--hint .vagas-compatibility-banner__info > i { font-size: 1.1rem; color: #d97706; flex-shrink: 0; } .vagas-compatibility-banner__label { color: #4b5563; display: block; line-height: 1.3; } .vagas-compatibility-banner__areas { color: var(--manus-dark-purple); display: block; } .vagas-compatibility-banner__btn { display: inline-flex; align-items: center; font-size: 0.82rem; font-weight: 600; padding: 0.35rem 0.9rem; border-radius: 999px; white-space: nowrap; text-decoration: none; background: var(--manus-purple); color: #fff; border: 1px solid var(--manus-purple); transition: background 0.15s, border-color 0.15s; flex-shrink: 0; } .vagas-compatibility-banner__btn:hover { background: var(--manus-dark-purple); border-color: var(--manus-dark-purple); color: #fff; } .vagas-compatibility-banner__btn--hint { background: transparent; color: #92400e; border-color: #d97706; } .vagas-compatibility-banner__btn--hint:hover { background: #fde68a; border-color: #d97706; color: #78350f; } .vagas-compatibility-banner--override { background: #f0f4ff; border: 1px solid #c7d2fe; } .vagas-compatibility-banner--override .vagas-compatibility-banner__info > i { font-size: 1.1rem; color: #4f46e5; flex-shrink: 0; } .vagas-compatibility-banner__btn--override { background: transparent; color: #3730a3; border-color: #6366f1; } .vagas-compatibility-banner__btn--override:hover { background: #e0e7ff; border-color: #4f46e5; color: #3730a3; } / ── Empty state de vagas ─────────────────────────────────── / .vagas-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 1.5rem; gap: 0.85rem; } .vagas-empty-state__icon { width: 4rem; height: 4rem; border-radius: 50%; background: var(--manus-light-purple); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; color: var(--manus-purple); } .vagas-empty-state__title { font-weight: 700; color: #1f2937; margin: 0; } .vagas-empty-state__text { color: #6b7280; font-size: 0.95rem; max-width: 38ch; margin: 0; } .vagas-empty-state__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; justify-content: center; margin-top: 0.5rem; } / ── Modal currículo candidato ─────────────────────────────── / .curriculo-section { padding-bottom: 1rem; border-bottom: 1px solid #f0eaf9; } .curriculo-section:last-child { border-bottom: none; padding-bottom: 0; } .curriculo-section__title { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--manus-purple); margin-bottom: 0.75rem; } .curriculo-item { padding-left: 0.75rem; border-left: 3px solid var(--manus-light-purple); } .curriculo-btn { font-size: 0.72rem; font-weight: 600; padding: 0.18rem 0.65rem; border-radius: 999px; border: 1px solid rgba(109, 40, 217, 0.35); background: var(--manus-light-purple); color: var(--manus-dark-purple); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; line-height: 1.5; } .curriculo-btn:hover, .curriculo-btn:focus-visible { background: var(--manus-purple); border-color: var(--manus-purple); color: #fff; outline: none; } .btn-manus-purple { background-color: var(--manus-purple) !important; border-color: var(--manus-purple) !important; color: white !important; } .btn-manus-purple:hover { background-color: var(--manus-dark-purple) !important; border-color: var(--manus-dark-purple) !important; } .btn-outline-manus-purple { background-color: transparent !important; border-color: var(--manus-purple) !important; color: var(--manus-purple) !important; } .btn-outline-manus-purple:hover { background-color: var(--manus-purple) !important; color: white !important; } / ============================================ Componentes compartilhados ============================================ / .navbar-logo { height: 48px; } / ============================================ Home (extraido de inline) ============================================ / .btn-ver-todas { background: var(--primary-purple); color: #fff; padding: 12px 35px; border-radius: 50px; text-decoration: none; font-weight: 500; transition: all 0.3s ease; } .vaga-local { color: #777; font-size: 0.9rem; } .vaga-titulo { color: #2c1b47; font-weight: 600; } .vaga-tipo { background-color: #e5dbf7 !important; color: #5e17eb; font-weight: 500; } .vaga-descricao { font-size: 0.9rem; color: #555; } .btn-vaga { background: var(--primary-purple); color: #fff; padding: 10px 20px; border-radius: 30px; text-decoration: none; font-size: 0.9rem; transition: all 0.3s ease; } .cards-container { scroll-behavior: smooth; scrollbar-width: none; display: flex; justify-content: center; gap: 20px; padding: 20px 0; margin: 0 auto; max-width: 900px; overflow: hidden; scroll-snap-type: x mandatory; } .cards-container::-webkit-scrollbar { display: none; } .vaga-card { width: 280px; background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; flex-shrink: 0; opacity: 0.7; transform: scale(0.9); scroll-snap-align: center; } .vaga-card.active { transform: scale(1.1); opacity: 1; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); z-index: 2; } / ============================================ Mobile only (sem impacto desktop) ============================================ / @media (max-width: 991px) { .navbar-custom .navbar-nav { padding: 1rem 0; } .navbar-custom .nav-item { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .navbar-custom .nav-item:last-child { border-bottom: none; } .navbar-custom .nav-link { padding: 12px 16px; } .navbar-custom .navbar-actions { flex-direction: column; width: 100%; gap: 8px; padding: 12px 16px; } .btn-nav-entrar, .btn-nav-cadastre { width: 100%; justify-content: center; } .footer-help-card { flex-direction: column; align-items: flex-start; } .footer-tagline { max-width: 100%; } .footer-bottom .col-md-4 { margin-top: 0.5rem; } .page-home .vagas-section .col-3, .page-home .vagas-section .col-9, .page-home .col-6, .page-home .col-3 { width: 100%; max-width: 100%; flex: 0 0 100%; } .page-home .vagas-section .section-title, .page-home .vagas-section .text-end, .page-home .section-title.text-start { text-align: center !important; padding-left: 0 !important; padding-right: 0 !important; } .page-home .vagas-section .mt-5 { margin-top: 1.25rem !important; } .page-home .carousel-control-prev, .page-home .carousel-control-next { width: 38px; height: 38px; } .page-home .home-overlap-section { margin-top: 1rem !important; } .page-home .accordion+.col-6, .page-home .row.mt-5>.col-6:last-child { margin-top: 1.5rem; justify-content: center !important; } .page-home .bg-teal-section .col-3 { margin-bottom: 1.5rem; } .page-vagas .job-card { flex-direction: column; align-items: flex-start; gap: 14px; } .page-vagas .job-card>.d-flex { width: 100%; } .page-vagas .job-card .btn-details { width: 100%; } .page-vagas .job-card .job-application-status { width: 100%; justify-content: center; } .page-vagas .job-card .btn-details a { display: block; width: 100%; } .page-vagas .pagination { flex-wrap: wrap; gap: 6px; } .page-detalhes-vagas .detalhes-vaga-hero__title { font-size: 1.65rem; line-height: 1.2; } .cv-page, .cad-empresa-page { margin-top: 0 !important; padding-top: 1.5rem !important; } .page-perfil-layout { margin-top: 0 !important; padding-top: 1.5rem !important; } .page-perfil-layout__card-top { border-radius: 30px !important; } .page-perfil .d-flex.justify-content-between { justify-content: flex-start !important; gap: 20px; } .page-perfil-layout .d-flex.justify-content-between.flex-wrap { justify-content: flex-start !important; gap: 20px; } } @media (max-width: 768px) { .section-title { font-size: 2rem; } .contact-title { font-size: 2rem; } .footer-logo { max-width: 180px; } .footer-help-title { font-size: 1rem; } .img-men, .img-woman { max-height: 200px; } .me-negativo, .ms-negativo { margin: 0; } .noticia-card { flex: 0 0 240px; } .carousel-btn { width: 40px; height: 40px; } .carousel-btn-prev { left: -20px; } .carousel-btn-next { right: -20px; } .noticia-card-content { padding: 1rem; } .noticia-card-title { font-size: 0.9rem; } .page-home .section-title { font-size: 1.8rem; line-height: 1.25; } .page-home .cards-container { max-width: 100%; justify-content: flex-start; overflow-x: auto; padding: 14px 10px; gap: 14px; } .page-home .vaga-card { width: min(84vw, 300px); } .page-home .vaga-card.active { transform: scale(1); opacity: 1; } .page-home .carousel-btn { width: 40px; height: 40px; } .page-home .carousel-btn-prev { left: -12px; } .page-home .carousel-btn-next { right: -12px; } .page-home .noticia-card-content { padding: 1rem; } .page-home .noticia-card-title { font-size: 0.9rem; } .page-cadastre-se .stepper-item .small, .page-alterar-cadastro .stepper-item .small { font-size: 0.68rem !important; } .page-cadastre-se .stepper-circle, .page-alterar-cadastro .stepper-circle { width: 32px !important; height: 32px !important; font-size: 0.86rem !important; } .page-cadastre-se .d-flex.justify-content-between.position-relative, .page-alterar-cadastro .d-flex.justify-content-between.position-relative { gap: 8px; } .page-cadastre-se h1, .page-alterar-cadastro h1 { font-size: 1.1rem !important; } .page-cadastre-se .p-4, .page-alterar-cadastro .p-4 { padding: 1rem !important; } .page-cadastre-se .d-flex.justify-content-between, .page-alterar-cadastro .d-flex.justify-content-between { flex-direction: column; gap: 10px; } .page-cadastre-se .d-flex.justify-content-between .btn, .page-alterar-cadastro .d-flex.justify-content-between .btn { width: 100%; } } @media (max-width: 576px) { .navbar-logo { height: 32px; } .page-home .noticia-card { flex: 0 0 200px; } .page-home .noticia-card-image { height: 150px; } .page-home .carousel-btn { width: 36px; height: 36px; } .page-home .carousel-btn svg { width: 18px; height: 18px; } .page-cadastre-se .stepper-item .small, .page-alterar-cadastro .stepper-item .small { display: none; } } / ============================================ Layout compartilhado (perfil / perfil-empresa) Espelha a estética de pages/perfil.blade.php ============================================ / .page-perfil-layout { background-color: #ffffff; margin-top: 0; } .page-perfil-layout__card-top { border-radius: 100px; border-color: #e0e0e0 !important; background-color: #fff; box-shadow: none; } .page-perfil-layout__block { min-width: 200px; } .page-perfil-layout__label { font-size: 0.8rem; } .page-perfil-layout__title-strong { font-size: 1.6rem; } .page-perfil-layout__icon-circle { width: 65px; height: 65px; flex-shrink: 0; } .page-perfil-layout__icon-circle i { font-size: 1.8rem; } .page-perfil-layout__icon-circle--sm { width: 48px; height: 48px; } .page-perfil-layout__icon-circle--sm i { font-size: 1.2rem; } .page-perfil-layout__icon-circle--purple { background-color: #f0eaff; color: #4b10a9; } .page-perfil-layout__icon-circle--green { background-color: #e6f9f1; color: #157347; } .page-perfil-layout__icon-circle--yellow { background-color: #fff8e1; color: #d39e00; } .page-perfil-layout__divider { width: 1px; height: 50px; background-color: #eee; } .page-perfil-layout__divider--spacer { background-color: #ffffff; } .page-perfil-layout__card-content { border-radius: 40px; border-color: #e0e0e0 !important; background-color: #fff; min-height: 250px; box-shadow: none; } .page-perfil-layout__section-title { color: #444; font-size: 1.25rem; } .page-perfil-layout__empty-text { font-size: 0.9rem; } .page-perfil-layout__logout { font-size: 1.1rem; } .page-perfil-layout__logout i { font-size: 1.3rem; } / Conteúdo específico da área de vagas (mantém informações; só visual alinhado) / .page-perfil-empresa__btn-criar { background-color: #4b2d8a; border: none; border-radius: 8px; } .page-perfil-empresa__btn-criar:hover { background-color: #3d2473; color: #fff; } .page-perfil-empresa__vaga-row { border: 1px solid #e0e0e0; border-radius: 20px; padding: 1rem 1.25rem; } .page-perfil-empresa__vaga-head { min-width: 200px; } .page-perfil-empresa__tag { background-color: #f0eaff; color: #4b10a9; font-weight: 500; } .page-perfil-empresa__select { min-width: 130px; border-color: #e0e0e0; } .page-perfil-empresa__btn-action { border: none; border-radius: 8px; } .page-perfil-empresa__btn-action--primary { background-color: #4b2d8a; } .page-perfil-empresa__btn-action--primary:hover { background-color: #3d2473; color: #fff; } .page-perfil-empresa__btn-action--accent { background-color: #6d4bbf; } .page-perfil-empresa__btn-action--accent:hover { background-color: #5c3fa3; color: #fff; } .candidatos-vaga-toolbar { padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid #e8e4f0; } .candidatos-vaga-toolbar__intro { min-width: 0; } .candidatos-vaga-toolbar__count { font-size: 0.95em; } .candidatos-vaga-back { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; } .candidatos-vaga-back:hover { text-decoration: underline !important; } .candidatos-vaga-back .bi { font-size: 1.05rem; line-height: 1; } .candidatos-vaga-titulo { color: #444; } .candidatos-vaga-vazio { font-size: 0.9rem; } .candidatos-vaga-name { font-size: 0.95rem; } .candidatos-vaga-date { font-size: 0.82rem; } .candidatos-vaga-status-select { min-width: 150px; } / Login (entrar) — layout em talent-bank/sso-entrar.css / .login-card-wrap { width: 100%; max-width: 560px; border-radius: 20px; overflow: hidden; border: none; } .login-input { border-radius: 10px; padding: 12px 16px; border-color: #ccc; } .login-input--senha { padding-right: 44px; } .login-toggle-pwd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #aaa; font-size: 1.1rem; } .login-btn-acessar { background-color: #5b1fad; color: #fff; border-radius: 50px; padding: 12px; font-size: 1.05rem; border: none; } .login-btn-acessar:hover { background-color: #4a1990; color: #fff; } .login-card-footer { background-color: #4a1090; } .login-footer-titulo { font-size: 1.2rem; line-height: 1.4; } .login-btn-cadastro { background-color: #00c9a7; color: #fff; border-radius: 50px; font-size: 0.95rem; border: none; } .login-btn-cadastro:hover { background-color: #00b396; color: #fff; } .login-link-esqueci { font-size: 0.9rem; } .perfil-sair-btn { font-size: 1.1rem; } .perfil-sair-btn i { font-size: 1.3rem; } / ============================================ Criação de vaga ============================================ / .cad-vaga-page { background-color: #ffffff; min-height: 100vh; } .cad-vaga-titulo { font-size: 1.3rem; color: #222; } .cad-vaga-subtitulo { font-size: 0.85rem; } .cad-vaga-card { background: #fff; border-radius: 12px; border: 1px solid #e8e4f3; padding: 1.5rem; } .cad-vaga-badge { background: #5b1fad; font-size: 0.75rem; color: #fff; } .cad-vaga-btn-salvar { background: #5b1fad; color: #fff; border-radius: 50px; border: none; } .cad-vaga-btn-salvar:hover { background: #4a1990; color: #fff; } .step-save-btn { border: 1.5px solid #5b1fad; color: #5b1fad; border-radius: 50px; background: transparent; transition: background .18s, color .18s; } .step-save-btn:hover { background: #f3ecff; color: #4a1990; border-color: #4a1990; } .step-save-btn:disabled { opacity: .7; } .cad-vaga-btn-voltar { background: #fff; color: #5b1fad; border: 1.5px solid #5b1fad; border-radius: 50px; } .cad-vaga-btn-voltar:hover { background: #f3ecfc; color: #5b1fad; } .cad-vaga-section-title { color: #5b1fad; font-size: 1.1rem; } .pwd-input-wrap, .position-relative:has(> .form-control) { display: grid; grid-template-columns: 1fr; align-items: center; } .pwd-input-wrap .form-control, .position-relative:has(> .form-control) > .form-control { grid-area: 1 / 1; width: 100%; } .pwd-input-wrap .pwd-toggle-icon, .position-relative:has(> .form-control) > .pwd-toggle-icon { position: relative; grid-area: 1 / 1; justify-self: end; align-self: center; top: auto; bottom: auto; right: auto; margin-right: 12px; height: 20px; transform: none; } .pwd-toggle-icon { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 0 !important; z-index: 2; cursor: pointer; color: #aaa; } .pwd-toggle-icon i { line-height: 1; } .photo-preview-circle { width: 80px; height: 80px; background: #ede9f8; color: #5b1fad; font-size: 2rem; } .photo-upload-click-area { border: 1.5px dashed #b39ddb; border-radius: 10px; cursor: pointer; background: #faf8ff; } .photo-preview-img { width: 80px; height: 80px; object-fit: cover; } .pwd-strength-progress { height: 4px; } .pwd-strength-progress .progress-bar { transition: width 0.3s; } .pwd-strength-text { font-size: 0.75rem; } / ============================================ Página Cadastre-se ============================================ / .cadastre-page { background-color: #f8f7fc; min-height: 100vh; padding-top: 120px !important; } / ============================================ Página Cadastro Empresa ============================================ / .cad-empresa-page { background-color: #ffffff; min-height: 100vh; padding-top: var(--tb-nav-offset, 7rem) !important; } / ============================================ Página Currículo ============================================ / .cv-page { background-color: #faf9fb; margin-top: 0; } .cv-page__title { color: #1a1a1a; font-size: 1.4rem; } .cv-page__back-link { color: #5b21b6; font-size: 0.95rem; } .cv-page__card { border-radius: 24px; overflow: hidden; background-color: #fff; } .cv-page__header { background-color: #f2f3f5; } .cv-page__photo { width: 88px; height: 88px; object-fit: cover; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); } .cv-page__name { color: #1a1a1a; font-size: 1.2rem; } .cv-page__role { color: #5b21b6; font-size: 0.92rem; } .cv-page__btn-download { background-color: #5b21b6; border-radius: 50px; font-size: 0.9rem; border: none; } .cv-page__btn-download:hover { background-color: #4a1990; color: #fff; } .cv-page__section-label { color: #5b21b6; font-size: 0.95rem; } .cv-page__edit-link { color: #5b21b6; font-size: 0.88rem; } .cv-page__resume-text { color: #555; font-size: 0.88rem; line-height: 1.7; text-align: justify; } .cv-page__data-grid { font-size: 0.88rem; } .cv-page__section-divider { border-bottom: 1px solid #e8e8e8; } .cv-page__date-text { color: #888; font-size: 0.82rem; } .cv-page__item-title { color: #1a1a1a; font-size: 0.92rem; } .cv-page__item-subtitle { color: #777; font-size: 0.85rem; } .cv-page__empty-text { color: #999; font-size: 0.88rem; } .cv-page__language-wrap { max-width: 420px; } .cv-page__language-name { color: #1a1a1a; font-size: 0.88rem; } .cv-page__progress { height: 6px; background-color: #e2e2e2; border-radius: 10px; } .cv-page__progress-fill { background-color: #5b21b6; border-radius: 10px; } .cv-page__level-text { color: #999; font-size: 0.82rem; } .cv-page__skill-item { font-size: 0.88rem; color: #444; } .cv-page__skill-check { color: #5b21b6; } / ============================================ Página Esqueci Senha ============================================ / .forgot-page { min-height: 100vh; padding-top: 110px; padding-bottom: 40px; } .forgot-page__container { min-height: calc(100vh - 150px); } .forgot-page__card { max-width: 500px; } / ============================================ Utilitários adicionais ============================================ */ .home-overlap-section { margin-top: -140px; } .bg-teal-section { background-color: #2fd6c5; } .link-purple { color: #4b10a9; } .link-purple:hover { color: #3a0d85; } .page-perfil-layout__avatar { width: 70px; height: 70px; object-fit: cover; } .icon-rotate-45 { transform: rotate(45deg); } .error-page-container { max-width: 520px; }

| ver. 1.4 | Github | . | PHP 8.3.28 | Generation time: 0.02 | proxy | phpinfo | Settings