/* ========================================================================== Carreiras -- portal público de vagas. FOLHA PRÓPRIA, separada do theme.css de propósito. As telas internas são densas porque quem as usa passa o dia nelas; esta é a primeira coisa que um candidato vê da iGreen, e página de carreira é peça de marca. Misturar as duas faria uma arrastar a outra a cada ajuste. ─── REFORMA DE 10/09/2026 ──────────────────────────────────────────────── Pedido do usuário: *"teria como melhorar o carreiras.igreenfinance.com, um layout extremamente maravilhoso com SVGs, animações, algo bem top -- tipo igreenenergy.com"*. Mock aprovado: D:/mocks/igreenFinance/carreiras-2026.html. O que veio da referência (igreenenergy.com, o site que a empresa mostra ao cliente): fundo quase preto com brilho verde, uma palavra do título em verde-neon, cartões de vidro escuro com borda fininha, rótulo miúdo em caixa alta antes de cada seção, numeração 01/02/03 e botão-pílula com brilho. DOIS TEMAS, e o claro não é o escuro com as cores trocadas na mão: tudo o que muda está em token, inclusive os brilhos do fundo e a cor do texto dentro do botão verde. Um valor escrito fora dos tokens é um valor que vai ficar preto no tema claro no dia em que ninguém estiver olhando. ANIMAÇÃO SEM BIBLIOTECA. A CSP do portal é `script-src 'self'`: não há CDN nem script inline. O movimento é CSS e SMIL (`` no SVG), que o navegador executa sozinho; só a contagem dos números e o "aparecer ao rolar" moram em assets/js/carreiras.js. Author: Dario C Oliveira ========================================================================== */ /* ── FONTES DA MARCA, SERVIDAS DAQUI ────────────────────────────────────── Elas estavam sendo pedidas ao Google Fonts, e a CSP bloqueava a requisição ("violates ... style-src") -- desde que o portal existe ele renderizava na fonte padrão do sistema. São os arquivos variáveis oficiais, subset latino: um arquivo cobre todos os pesos da família. */ @font-face{font-family:'Sora';font-style:normal;font-weight:400 700;font-display:swap; src:url('../fonts/sora-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329, U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Sora';font-style:normal;font-weight:400 700;font-display:swap; src:url('../fonts/sora-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329, U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap; src:url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329, U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap; src:url('../fonts/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329, U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ── TOKENS ─────────────────────────────────────────────────────────────── O escuro é o padrão (é o visual da referência). O claro existe porque foi pedido junto, e porque candidato lendo descrição longa de vaga no celular ao sol agradece. */ :root{ --fundo:#04090A; --fundo-2:#070E0D; --painel:#0A1412; --painel-2:#0D1B18; --linha:rgba(78,231,95,.13); --linha-2:rgba(78,231,95,.26); --neon:#4EE75F; --verde:#17A34A; --verde-fundo:rgba(78,231,95,.09); --tinta:#EAF3EE; --tinta-2:#9FB3A8; --tinta-3:#6C8177; --tinta-botao:#04240F; --vidro:rgba(10,20,18,.82); --topo-fundo:rgba(4,9,10,.72); --campo:rgba(255,255,255,.03); --brilho-a:rgba(23,163,74,.30); --brilho-b:rgba(78,231,95,.20); --brilho-c:rgba(13,120,60,.26); --grade:rgba(78,231,95,.07); --sombra:0 24px 60px -40px rgba(0,0,0,.9); --sombra-neon:0 26px 60px -34px rgba(78,231,95,.5); --aviso-fundo:rgba(224,160,48,.10); --aviso-linha:rgba(224,160,48,.35); --aviso-tinta:#E0A030; --erro-fundo:rgba(255,107,107,.10); --erro-linha:rgba(255,107,107,.35); --erro-tinta:#FF9B9B; --sora:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif; --inter:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; } :root[data-theme="light"]{ --fundo:#F5F9F6; --fundo-2:#FFFFFF; --painel:#FFFFFF; --painel-2:#F2F8F4; --linha:#DDE9E1; --linha-2:#BADFC8; --neon:#0F7A3D; --verde:#17A34A; --verde-fundo:#E8F6EE; --tinta:#10241A; --tinta-2:#4A5C52; --tinta-3:#7C8C84; --tinta-botao:#FFFFFF; --vidro:rgba(255,255,255,.92); --topo-fundo:rgba(255,255,255,.86); --campo:#FFFFFF; --brilho-a:rgba(23,163,74,.16); --brilho-b:rgba(15,122,61,.12); --brilho-c:rgba(23,163,74,.10); --grade:rgba(15,122,61,.07); --sombra:0 18px 44px -30px rgba(16,36,26,.5); --sombra-neon:0 22px 50px -32px rgba(15,122,61,.45); --aviso-fundo:#FFF7E6; --aviso-linha:#F2E0B5; --aviso-tinta:#7A5A12; --erro-fundo:#FDECEC; --erro-linha:#F5C2C2; --erro-tinta:#8A2020; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--fundo);color:var(--tinta);font-family:var(--inter); font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden; min-height:100vh;display:flex;flex-direction:column} body>main{flex:1 0 auto} h1,h2,h3{font-family:var(--sora);letter-spacing:-.02em;margin:0;line-height:1.14} a{color:inherit;text-decoration:none} img{max-width:100%} .env{max-width:1180px;margin:0 auto;padding:0 24px;width:100%} .neon{color:var(--neon)} /* Rótulo miúdo antes do título da seção -- direto da referência. */ .olho{font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase; color:var(--neon);margin-bottom:14px;display:flex;align-items:center;gap:9px} .olho::before{content:'';width:22px;height:1px;background:var(--neon);opacity:.6} /* ── TOPO ─────────────────────────────────────────────────────────────── */ .topo{position:sticky;top:0;z-index:60;background:var(--topo-fundo); backdrop-filter:blur(14px);border-bottom:1px solid var(--linha)} .topo .env{display:flex;align-items:center;gap:18px;height:72px} .marca{display:flex;align-items:center;gap:11px;font-family:var(--sora);font-weight:700;font-size:1.05rem;color:var(--tinta)} /* A altura manda e a largura segue: a lâmpada é mais alta que larga, e travar a largura a amassaria. width/height no reservam o espaço antes de a imagem chegar -- sem isso o cabeçalho pula ao carregar. */ .marca .simbolo{height:38px;width:auto;display:block} .marca small{display:block;font-family:var(--inter);font-weight:600;font-size:.56rem; letter-spacing:.24em;color:var(--tinta-3);margin-top:-2px} .topo nav{margin-left:auto;display:flex;gap:24px;font-size:.89rem;font-weight:500;align-items:center} .topo nav a{color:var(--tinta-2);transition:color .15s} .topo nav a:hover{color:var(--neon)} .topo nav a.btn{color:var(--tinta-botao)} /* O alternador de tema. Ícone só, do tamanho de um alvo de toque. */ .tema{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none; background:var(--campo);border:1px solid var(--linha);color:var(--tinta-2);cursor:pointer; transition:border-color .15s,color .15s,transform .15s} .tema:hover{border-color:var(--neon);color:var(--neon);transform:translateY(-1px)} .tema .lua{display:none} :root[data-theme="light"] .tema .sol{display:none} :root[data-theme="light"] .tema .lua{display:block} /* ── BOTÕES ───────────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent; border-radius:999px;padding:12px 24px;font:600 .92rem var(--inter);cursor:pointer; transition:transform .15s,box-shadow .15s,background .15s,border-color .15s,color .15s} .btn.pri{background:linear-gradient(135deg,var(--neon),var(--verde));color:var(--tinta-botao); box-shadow:0 10px 30px -12px rgba(23,163,74,.7)} .btn.pri:hover{transform:translateY(-2px);box-shadow:0 16px 40px -14px rgba(23,163,74,.85)} .btn.sec{background:var(--campo);border-color:var(--linha-2);color:var(--tinta)} .btn.sec:hover{border-color:var(--neon);color:var(--neon);transform:translateY(-2px)} .btn.grande{padding:15px 28px;font-size:.98rem;width:100%} .btn .seta{transition:transform .18s} .btn:hover .seta{transform:translateX(3px)} /* ── HERO ─────────────────────────────────────────────────────────────── */ .hero{position:relative;overflow:hidden;padding:70px 0 72px} /* Três camadas de fundo: aurora que respira, grade que desliza e o conteúdo. Nenhuma delas pede JS. */ .hero .aurora{position:absolute;inset:-20% -10%;pointer-events:none; background: radial-gradient(700px 520px at 18% 8%, var(--brilho-a), transparent 62%), radial-gradient(760px 620px at 88% 22%, var(--brilho-b), transparent 60%), radial-gradient(600px 500px at 60% 108%, var(--brilho-c), transparent 62%); animation:aurora 18s ease-in-out infinite alternate} @keyframes aurora{from{transform:translate3d(-1.5%,-1%,0) scale(1)} to{transform:translate3d(2%,2%,0) scale(1.06)}} .hero .grade{position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:linear-gradient(var(--grade) 1px,transparent 1px), linear-gradient(90deg,var(--grade) 1px,transparent 1px); background-size:58px 58px; -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000 20%,transparent 78%); mask-image:radial-gradient(70% 60% at 50% 40%,#000 20%,transparent 78%); animation:grade 26s linear infinite} @keyframes grade{to{background-position:58px 58px}} .hero .env{position:relative;z-index:2} .hero .duplo{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center} .selo{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:600; letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2); background:var(--verde-fundo);border:1px solid var(--linha-2); border-radius:999px;padding:7px 15px;margin-bottom:22px} .selo i{width:7px;height:7px;border-radius:50%;background:var(--neon); animation:pulso 2.4s ease-out infinite} @keyframes pulso{0%{box-shadow:0 0 0 0 rgba(78,231,95,.55)} 70%{box-shadow:0 0 0 11px rgba(78,231,95,0)} 100%{box-shadow:0 0 0 0 rgba(78,231,95,0)}} .hero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);margin-bottom:18px;max-width:16ch} .hero .lead{font-size:1.06rem;color:var(--tinta-2);max-width:52ch;margin:0 0 12px} .hero .lead-2{font-size:.95rem;color:var(--tinta-3);max-width:52ch;margin:0 0 28px} .acoes{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px} .provas{display:flex;gap:20px;flex-wrap:wrap;font-size:.82rem;color:var(--tinta-2)} .provas span{display:inline-flex;align-items:center;gap:7px} /* ── A ARTE DO HERO ───────────────────────────────────────────────────── */ .arte{position:relative;display:grid;place-items:center;min-height:430px} .arte svg{width:min(100%,440px);height:auto;overflow:visible} .anel-lento{transform-origin:250px 250px;animation:gira 40s linear infinite} .anel-rapido{transform-origin:250px 250px;animation:gira 24s linear infinite reverse} @keyframes gira{to{transform:rotate(360deg)}} .respira{transform-origin:250px 250px;animation:respira 5s ease-in-out infinite} @keyframes respira{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.045);opacity:1}} /* O traço do raio se desenha sozinho, uma vez, e fica. */ .tracado{stroke-dasharray:520;stroke-dashoffset:520;animation:desenha 2.4s .3s ease-out forwards} @keyframes desenha{to{stroke-dashoffset:0}} .cintila{animation:cintila 3s ease-in-out infinite} @keyframes cintila{0%,100%{opacity:.25}50%{opacity:1}} /* Fichas de vidro flutuando sobre a arte. Os números são reais, do cadastro. */ .ficha{position:absolute;display:flex;align-items:center;gap:10px; background:var(--vidro);border:1px solid var(--linha-2);border-radius:14px; padding:11px 15px;backdrop-filter:blur(8px);box-shadow:var(--sombra); animation:flutua 6s ease-in-out infinite} .ficha b{font-family:var(--sora);font-size:1.02rem;display:block;line-height:1.15} .ficha em{font-style:normal;font-size:.7rem;color:var(--tinta-3);letter-spacing:.04em} .ficha .pt{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none; background:var(--verde-fundo);border:1px solid var(--linha-2);color:var(--neon)} .ficha.a{top:6%;left:-4%;animation-delay:-1s} .ficha.b{bottom:12%;right:-6%;animation-delay:-3.2s} .ficha.c{bottom:38%;left:-9%;animation-delay:-4.6s} @keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}} /* ── NÚMEROS E BUSCA ──────────────────────────────────────────────────── */ .numeros{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr); gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:18px; overflow:hidden;margin-top:16px} .numeros div{background:var(--fundo-2);padding:24px 26px} .numeros b{font-family:var(--sora);font-size:2.1rem;display:block;line-height:1; background:linear-gradient(120deg,var(--tinta),var(--neon));-webkit-background-clip:text; background-clip:text;color:transparent} .numeros span{font-size:.82rem;color:var(--tinta-3)} .busca{position:relative;z-index:5;margin-top:44px} .busca-caixa{background:var(--painel-2);border:1px solid var(--linha-2);border-radius:20px; padding:18px;display:grid;gap:14px;grid-template-columns:1.3fr 1fr 1fr auto;align-items:end; box-shadow:var(--sombra-neon)} .campo label{display:block;font-size:.68rem;font-weight:700;color:var(--tinta-3); text-transform:uppercase;letter-spacing:.12em;margin-bottom:7px} .campo input,.campo select,.campo textarea{width:100%;background:var(--campo);color:var(--tinta); border:1px solid var(--linha);border-radius:12px;padding:12px 14px;font:400 .93rem var(--inter)} .campo input::placeholder,.campo textarea::placeholder{color:var(--tinta-3)} .campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--neon); box-shadow:0 0 0 3px var(--verde-fundo)} .busca-caixa .btn{height:46px} /* ── SEÇÕES ───────────────────────────────────────────────────────────── */ .secao{padding:76px 0} .secao.linha-topo{border-top:1px solid var(--linha)} .cabeca{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:30px} .cabeca h2{font-size:clamp(1.6rem,3vw,2rem)} .cabeca .sub{color:var(--tinta-2);margin:8px 0 0;font-size:.95rem} .selo-n{display:inline-block;background:var(--verde-fundo);border:1px solid var(--linha-2);color:var(--neon); border-radius:999px;padding:5px 14px;font-size:.82rem;font-weight:700;font-family:var(--sora)} /* ── LISTA DE VAGAS ───────────────────────────────────────────────────── */ .lista{display:grid;gap:14px} .vaga{position:relative;display:flex;gap:22px;align-items:center;flex-wrap:wrap; background:linear-gradient(180deg,var(--painel-2),var(--painel)); border:1px solid var(--linha);border-radius:18px;padding:24px 26px 24px 32px;overflow:hidden; transition:border-color .18s,transform .18s,box-shadow .18s} /* O brilho que acende no hover é um gradiente que muda de opacidade -- sem JS, sem custo de layout. */ .vaga::after{content:'';position:absolute;inset:0;opacity:0;pointer-events:none; background:radial-gradient(420px 200px at 12% 0%,var(--verde-fundo),transparent 70%); transition:opacity .25s} .vaga:hover::after{opacity:1} .vaga::before{content:'';position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:0 4px 4px 0; background:linear-gradient(180deg,var(--neon),transparent)} .vaga:hover{border-color:var(--linha-2);transform:translateY(-3px);box-shadow:var(--sombra-neon)} .vaga:hover::before{background:linear-gradient(180deg,var(--neon),var(--verde))} .vaga .corpo{flex:1;min-width:260px;position:relative} .vaga h3{font-size:1.32rem;margin-bottom:10px} .vaga .quando{font-size:.78rem;color:var(--tinta-3);white-space:nowrap;position:relative} .vaga .btn{position:relative} .tags{display:flex;gap:7px;flex-wrap:wrap} .tag{font-size:.75rem;font-weight:500;color:var(--tinta-2);background:var(--campo); border:1px solid var(--linha);border-radius:8px;padding:4px 10px} .tag.verde{background:var(--verde-fundo);border-color:var(--linha-2);color:var(--neon);font-weight:600} /* Filtros rápidos: área e lugar viraram pílulas. Eram dois grids de quatro colunas com um cartão dentro -- três quartos da tela vazios. */ .pilulas{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:22px} .pilulas .rot{color:var(--tinta-3);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700} .pilula{display:inline-flex;align-items:center;gap:9px;background:var(--campo); border:1px solid var(--linha);border-radius:999px;padding:9px 16px;font-size:.86rem; color:var(--tinta-2);transition:border-color .15s,color .15s,transform .15s} .pilula:hover{border-color:var(--neon);color:var(--neon);transform:translateY(-2px)} .pilula b{font-family:var(--sora);color:var(--neon);font-size:.9rem} .pilula.limpar{border-style:dashed} /* ── POR QUE AQUI ─────────────────────────────────────────────────────── */ .motivos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .motivo{position:relative;background:linear-gradient(180deg,var(--painel-2),var(--painel)); border:1px solid var(--linha);border-radius:18px;padding:28px 26px 30px;overflow:hidden; transition:border-color .18s,transform .18s} .motivo:hover{border-color:var(--linha-2);transform:translateY(-3px)} .motivo .n{position:absolute;top:22px;right:24px;font-family:var(--sora);font-size:.72rem; color:var(--tinta-3);letter-spacing:.1em} .motivo .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px; background:var(--verde-fundo);border:1px solid var(--linha-2);color:var(--neon)} .motivo h3{font-size:1.06rem;margin-bottom:8px} .motivo p{color:var(--tinta-2);margin:0;font-size:.92rem} /* ── COMO É O PROCESSO ────────────────────────────────────────────────── */ .trilha{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:12px} .trilha .fio{position:absolute;top:23px;left:6%;right:6%;height:2px;overflow:visible} .etapa{position:relative;padding-top:60px} .etapa .bola{position:absolute;top:12px;left:0;width:24px;height:24px;border-radius:50%; background:var(--fundo);border:2px solid var(--neon);display:grid;place-items:center; font-family:var(--sora);font-size:.7rem;font-weight:700;color:var(--neon); box-shadow:0 0 0 6px var(--verde-fundo)} .etapa b{display:block;font-family:var(--sora);font-size:1rem;margin-bottom:5px} .etapa p{color:var(--tinta-2);margin:0;font-size:.9rem} /* ── DÚVIDAS ──────────────────────────────────────────
nativo: abre e fecha sem JS, e o texto existe no HTML mesmo fechado -- é o que o buscador indexa e o leitor de tela alcança. */ .duvidas{display:grid;gap:10px} .duvida{background:var(--painel);border:1px solid var(--linha);border-radius:14px; padding:2px 20px;transition:border-color .15s} .duvida[open]{border-color:var(--linha-2)} .duvida summary{cursor:pointer;list-style:none;padding:16px 0;font-family:var(--sora); font-weight:600;font-size:1rem;display:flex;align-items:center;gap:12px} .duvida summary::-webkit-details-marker{display:none} .duvida summary::after{content:'+';margin-left:auto;color:var(--neon);font-size:1.3rem; font-weight:400;line-height:1;transition:transform .2s} .duvida[open] summary::after{transform:rotate(45deg)} .duvida summary:hover{color:var(--neon)} .duvida p{margin:0 0 18px;color:var(--tinta-2);font-size:.94rem;max-width:80ch} /* ── CHAMADA FINAL ────────────────────────────────────────────────────── */ .chamada{position:relative;overflow:hidden;border:1px solid var(--linha-2);border-radius:26px; padding:52px 46px;background:linear-gradient(135deg,var(--verde-fundo),transparent 60%); display:flex;gap:26px;align-items:center;flex-wrap:wrap} .chamada::after{content:'';position:absolute;width:420px;height:420px;right:-120px;top:-160px; border-radius:50%;background:radial-gradient(circle,var(--brilho-b),transparent 62%); animation:respira 7s ease-in-out infinite;pointer-events:none} .chamada h2{font-size:clamp(1.5rem,3vw,1.9rem);margin-bottom:8px;position:relative} .chamada p{color:var(--tinta-2);margin:0;max-width:56ch;position:relative} .chamada .btn{position:relative;margin-left:auto} /* ── A PÁGINA DA VAGA ──────────────────────────────────── O QUADRO OBJETIVO NUNCA FICOU AO LADO. A view escreve `
` com o texto da vaga e a `