/* ============================================================ MISSÃO: SEU ROBÔ EM 3 DIAS Mobile first. Breakpoints: 480px, 768px, 1024px. Os tokens e o CSS crítico do hero estão inline no . Estrutura de cor: seções escuras com texto claro alternando com uma seção clara de texto escuro. A inversão é o que cria separação real entre as seções (10.99:1), em vez dos quatro cinzas quase idênticos de antes (1.07 a 1.19:1). ============================================================ */ /* ------------------------------------------------------------ BASE ------------------------------------------------------------ */ h1,h2,h3,p,ul,ol,figure{margin:0} ul,ol{padding:0; list-style:none} button{font:inherit; color:inherit; background:none; border:0; cursor:pointer} button,a,input,summary{-webkit-tap-highlight-color:transparent} :focus-visible{outline:2px solid var(--amber); outline-offset:2px; border-radius:2px} .skip-link{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--amber); color:var(--amber-deep); padding:12px 18px; font-weight:600; text-decoration:none; } .skip-link:focus{left:8px; top:8px} .section__title{ font-family:var(--font-display); font-weight:800; font-size:24px; line-height:1.2; letter-spacing:-.015em; color:#fff; margin:0 0 24px; } /* o card ocupa a coluna toda; quem tem medida de leitura e o texto */ .prosa{max-width:62ch} /* ------------------------------------------------------------ BOTÕES ------------------------------------------------------------ */ .btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:56px; padding:14px 20px; font-family:var(--font-body); font-weight:600; font-size:17px; letter-spacing:.01em; text-transform:uppercase; border-radius:4px; transition:background-color .18s var(--ease-toque), transform .12s var(--ease-toque), box-shadow .18s var(--ease-toque); } .btn--primary{ background:var(--amber); color:var(--amber-deep); /* o âmbar é a coisa mais quente da página: ganha um halo contido */ box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 6px 20px -6px rgba(245,166,35,.5); } .btn--primary:active{ background:var(--amber-warm); transform:scale(.98); box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 2px 8px -4px rgba(245,166,35,.4); } .btn[disabled]{opacity:.75; cursor:default} .btn[disabled]:active{transform:none} .btn__spinner{ width:18px; height:18px; flex:none; display:none; border:2px solid rgba(92,58,6,.3); border-top-color:var(--amber-deep); border-radius:50%; animation:girar .7s linear infinite; } .btn.is-loading .btn__spinner{display:block} @keyframes girar{to{transform:rotate(360deg)}} /* ------------------------------------------------------------ FORMULÁRIO ------------------------------------------------------------ */ .form-card{ background:var(--bg-raised); /* hairline translúcida em vez de borda cinza sólida */ border:1px solid rgba(200,204,212,.12); border-radius:8px; padding:20px; box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 18px 40px -20px rgba(0,0,0,.8); } .field{margin-bottom:16px} .field__label{ display:block; font-family:var(--font-mono); font-size:13px; color:var(--metal-mid); margin-bottom:6px; letter-spacing:.02em; } .field__input{ width:100%; min-height:52px; padding:12px 14px; /* 16px é o mínimo: abaixo disso o iOS dá zoom ao focar */ font-family:var(--font-body); font-size:16px; line-height:1.4; color:var(--metal-light); background:var(--bg-oficina); border:1px solid rgba(200,204,212,.16); border-radius:6px; transition:border-color .18s var(--ease-toque), box-shadow .18s var(--ease-toque); } .field__input::placeholder{color:#8B909C} .field__input:focus{ border-color:var(--amber); outline:none; box-shadow:0 0 0 3px rgba(245,166,35,.18); } .field__input:focus-visible{outline:2px solid var(--amber); outline-offset:1px} .field__input[aria-invalid="true"]{border-color:#E06B5A} .field__error{ font-family:var(--font-mono); font-size:13px; color:#E89A8C; margin-top:6px; line-height:1.4; } .form__note{ font-family:var(--font-mono); font-size:13px; line-height:1.5; color:var(--metal-mid); margin-top:12px; text-align:center; } .form__fail{ font-family:var(--font-mono); font-size:13px; color:#E89A8C; margin-top:12px; text-align:center; line-height:1.5; } /* honeypot: fora da tela, nunca display:none */ .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden} .form-success{padding:16px 4px; text-align:center} .form-success__title{ font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--amber); margin-bottom:10px; } .form-success__body{color:var(--metal-light); font-size:17px; line-height:1.6} /* ------------------------------------------------------------ BARRA DE CTA FIXA — só abaixo de 768px Com o palco fixo alongando a página, ela é a principal rede de segurança pra quem não quer rolar até o fim. ------------------------------------------------------------ */ .barra-cta{ position:fixed; left:0; right:0; bottom:0; z-index:50; background:rgba(11,12,18,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid rgba(200,204,212,.12); padding:10px var(--pad); padding-bottom:calc(10px + env(safe-area-inset-bottom)); transform:translateY(8px); opacity:0; transition:opacity .2s var(--ease-entrada), transform .2s var(--ease-entrada); pointer-events:none; } .barra-cta.is-visivel{transform:translateY(0); opacity:1; pointer-events:auto} .barra-cta[hidden]{display:none} .btn--barra{min-height:52px; font-size:16px} /* A barra é escura e o botão âmbar tem só 1.29 de contraste contra ela: sobre a seção clara isso deixaria o botão sem contorno. O anel escuro garante a silhueta em qualquer fundo. */ .btn--barra{box-shadow:0 0 0 1px rgba(11,12,18,.55), 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 18px -8px rgba(245,166,35,.55)} @media (min-width:768px){ .barra-cta{display:none} } /* ------------------------------------------------------------ NAVEGADOR DE MISSÕES — TRILHO ÚNICO Uma rolagem contínua atravessa as nove missões dos três dias. O palco trava (position:sticky) e as missões passam por cima. As abas acompanham a rolagem e servem de atalho. Cada missão recebe 45dvh de rolagem, não uma tela inteira: com uma tela por missão o trilho iria a 12 telas e empurraria o CTA final para 17.6 telas no mobile. A 45dvh o trilho fica em 4 telas, o mesmo tamanho de antes, agora cobrindo os 3 dias. ------------------------------------------------------------ */ .missoes{background:var(--bg-oficina); padding:44px 0 0} .missoes__topo{padding-bottom:16px} /* --- Abas: grudam no topo e acompanham a rolagem --- */ .dias-barra{ position:sticky; top:0; z-index:20; background:rgba(11,12,18,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(200,204,212,.12); } .dias{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; } .dias__tab{ min-height:52px; padding:8px 4px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-family:var(--font-mono); font-size:13px; letter-spacing:.06em; color:var(--metal-mid); text-transform:uppercase; transition:color .22s var(--ease-toque); } .dias__tab.is-active{color:var(--metal-light)} .dias__data-inline{font-size:11px; opacity:.7; letter-spacing:.04em} /* Indicador que desliza entre as abas conforme a rolagem avança */ .dias__indicador{ position:absolute; bottom:-1px; left:0; width:calc(100% / 3); height:2px; background:var(--amber); transform:translateX(var(--ind-x, 0)); transition:transform .35s var(--ease-entrada); pointer-events:none; } /* --- O trilho --- */ .trilho{position:relative} .palco{ position:sticky; top:0; height:100dvh; overflow:hidden; background:var(--bg-oficina); } /* As nove estações empilhadas, só a ativa visível */ .palco__est{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .5s var(--ease-entrada), visibility .5s; } .palco__est.is-ativa{opacity:1; visibility:visible} .palco__est picture{display:block; width:100%; height:100%} .palco__est img{width:100%; height:100%; object-fit:cover; object-position:center} /* Gradiente que garante leitura do texto sobre a arte. O de baixo é alto porque é onde o texto da missão vive. */ .palco::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1; background: linear-gradient(to bottom, rgba(11,12,18,.88) 0%, rgba(11,12,18,.30) 20%, rgba(11,12,18,0) 40%, rgba(11,12,18,.55) 60%, rgba(11,12,18,.94) 82%, rgba(11,12,18,.99) 100%); } /* Contador de progresso: mostra onde a pessoa está nas nove */ .palco__progresso{ position:absolute; z-index:2; right:var(--pad); top:18px; font-family:var(--font-mono); font-size:22px; font-weight:500; color:var(--amber); letter-spacing:.02em; line-height:1; text-shadow:0 2px 12px rgba(11,12,18,.9); } .palco__progresso span{font-size:13px; color:var(--metal-mid)} /* --- As missões que passam por cima --- O texto se ancora à VIEWPORT, não ao fim do passo: com o palco travado, o "fim" de um bloco cai fora da tela e o texto some. */ .passos{position:relative; z-index:2; pointer-events:none} .passo{min-height:45dvh; position:relative} /* o primeiro e o último ganham folga pra abrir e fechar o trilho */ .passo:first-child{padding-top:28dvh} .passo:last-child{padding-bottom:28dvh} .passo__cx{ position:sticky; /* Trava acima da barra fixa de CTA, que ocupa ~72px do rodapé mais a safe area. Sem essa folga a barra cobre o texto. */ top:calc(100dvh - 320px); height:190px; display:flex; flex-direction:column; justify-content:flex-end; max-width:620px; margin-inline:auto; width:100%; padding:0 var(--pad); opacity:0; transform:translateY(16px); transition:opacity .4s var(--ease-entrada), transform .4s var(--ease-entrada); } .passo.is-ativa .passo__cx{opacity:1; transform:none} .passo__n{ font-family:var(--font-mono); font-size:13px; font-weight:500; color:var(--amber); letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px; } .passo__t{ font-family:var(--font-display); font-weight:800; font-size:28px; line-height:1.15; letter-spacing:-.02em; color:#fff; text-shadow:0 2px 20px rgba(11,12,18,.9); } /* Marcadores: só no desktop, sobre a cena completa. Só os do dia ativo aparecem. */ .marcador{display:none} .tooltip{display:none} /* --- Pontos: nove, agrupados por dia --- */ .pontos{ display:flex; justify-content:center; align-items:center; gap:14px; padding:22px 0 6px; background:var(--bg-oficina); position:relative; z-index:3; } .pontos__grupo{display:flex; gap:2px} .ponto{width:30px; height:44px; display:grid; place-items:center; position:relative} .ponto::after{ content:""; width:8px; height:8px; border-radius:50%; background:rgba(200,204,212,.28); transition:background-color .22s var(--ease-toque), transform .22s var(--ease-entrada); } .ponto.is-active::after{background:var(--amber); transform:scale(1.4)} .ponto.is-passado::after{background:rgba(245,166,35,.45)} /* --- Listas: os três dias, sempre legíveis sem interação --- */ .listas{ background:var(--bg-oficina); padding-top:12px; padding-bottom:48px; position:relative; z-index:3; display:grid; gap:28px; } .lista__cab{ display:flex; align-items:baseline; gap:10px; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid rgba(200,204,212,.12); } .lista__cab-dia{ font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--metal-light); letter-spacing:-.01em; } .lista__cab-data{ font-family:var(--font-mono); font-size:12px; color:var(--metal-mid); letter-spacing:.04em; } .lista{display:grid; gap:8px} /* vidro: fundo translucido sobre a oficina, borda-luz no topo e blur. o item ocupa a altura toda da linha pra alinhar entre as colunas. */ .lista__item{ display:flex; align-items:center; gap:12px; width:100%; height:100%; min-height:52px; padding:12px 14px; text-align:left; background:linear-gradient(160deg, rgba(200,204,212,.16), rgba(200,204,212,.055) 62%); backdrop-filter:blur(12px) saturate(1.1); -webkit-backdrop-filter:blur(12px) saturate(1.1); border:1px solid rgba(200,204,212,.14); border-left:3px solid transparent; border-radius:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 2px 10px rgba(0,0,0,.22); transition:border-color .22s var(--ease-toque), background-color .22s var(--ease-toque), transform .22s var(--ease-toque), box-shadow .22s var(--ease-toque); } .lista__item:hover{ transform:translateY(-1px); border-color:rgba(200,204,212,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 6px 18px rgba(0,0,0,.28); } .lista__item.is-active{ border-left-color:var(--amber); background:linear-gradient(180deg, rgba(245,166,35,.13), rgba(245,166,35,.05)); box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(245,166,35,.14); } /* line-height casado com o do texto pra o numero alinhar na 1a linha */ .lista__num{ font-family:var(--font-mono); font-size:13px; color:var(--metal-mid); flex:none; line-height:1.45; align-self:flex-start; } .lista__item.is-active .lista__num{color:var(--amber)} .lista__txt{font-size:16px; line-height:1.45; color:var(--metal-light)} @media (prefers-reduced-motion:reduce){ .lista__item{transition:none} .lista__item:hover{transform:none} } /* ------------------------------------------------------------ O QUE É O SDK — FICHA DE PERSONAGEM Registro de RPG retro sem virar fantasia: a página já tem mono, âmbar e fundo de oficina. O que a seção acrescenta é a gramática de menu de console — cantos chanfrados no lugar do raio, filete de scanline, barras de atributo, setas de seleção. O chanfro vem de clip-path em vez de border-radius: é o detalhe que diferencia "card" de "slot equipável", e reaproveita o mesmo corte diagonal que a fita do cronograma já usa. Continua escura porque a seção seguinte (.explica) é a clara: inverter aqui mataria o salto de contraste entre as duas. ------------------------------------------------------------ */ .sdk{ background:var(--bg-oficina); padding:52px 0 56px; position:relative; overflow:hidden; } /* grade de menu antigo, fraca o bastante pra ser textura e não padrão */ .sdk::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image: linear-gradient(rgba(200,204,212,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(200,204,212,.045) 1px, transparent 1px); background-size:44px 44px; /* some nas bordas pra não brigar com as seções vizinhas */ -webkit-mask-image:radial-gradient(120% 85% at 50% 45%, #000 30%, transparent 78%); mask-image:radial-gradient(120% 85% at 50% 45%, #000 30%, transparent 78%); } .sdk__inner{position:relative; z-index:1} .sdk__eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber); margin-bottom:10px; } .sdk .section__title{margin-bottom:20px} .sdk__prosa{margin-bottom:28px} /* O reset da prosa desta seção mora junto com `.prosa p`, mais abaixo: as duas empatam em especificidade e a ordem é que decide. */ /* --- Rodapé do console --- Fecha a ficha em vez de deixar o texto solto embaixo dela: mesmo chanfro e mesma família de fundo dos dois painéis, então lê como a terceira peça do mesmo aparelho. */ .sdk__rodape{ --corte:14px; margin-top:16px; padding:22px 20px; background:linear-gradient(180deg, rgba(42,48,64,.9), rgba(30,34,48,.92)); border:1px solid rgba(200,204,212,.14); clip-path:polygon( var(--corte) 0, 100% 0, 100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%, 0 100%, 0 var(--corte)); box-shadow:inset 0 1px 0 rgba(255,255,255,.07); } .sdk__fecho{ color:var(--metal-light); font-size:17px; line-height:1.6; max-width:62ch; } /* Selo do remate: o argumento mais forte da seção ganha corpo de etiqueta âmbar em vez de virar mais uma linha de parágrafo. */ /* flex-start, não center: no mobile o texto quebra em quatro linhas e o ícone centralizado ficava boiando no meio delas. */ .selo{ display:flex; align-items:flex-start; gap:14px; margin-top:18px; padding:14px 16px; background:rgba(245,166,35,.09); border:1px solid rgba(245,166,35,.3); border-left:3px solid var(--amber); } .selo__marca{ flex:none; font-family:var(--font-mono); font-size:15px; font-weight:500; color:var(--amber-deep); background:var(--amber); padding:6px 9px; line-height:1; letter-spacing:-.02em; } .selo__txt{ font-family:var(--font-mono); font-size:14px; line-height:1.55; color:var(--metal-light); } .selo__txt strong{color:var(--amber); font-weight:500} /* --- O tabuleiro: personagem + slots --- */ .ficha{display:grid; gap:16px} /* corte de canto compartilhado: é o que dá a leitura de "painel de console" nos dois blocos da ficha */ .ficha__perso, .ficha__slots{ --corte:14px; background:linear-gradient(180deg, rgba(42,48,64,.9), rgba(30,34,48,.92)); border:1px solid rgba(200,204,212,.14); clip-path:polygon( var(--corte) 0, 100% 0, 100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%, 0 100%, 0 var(--corte)); padding:20px; box-shadow:inset 0 1px 0 rgba(255,255,255,.07); } /* --- Coluna do personagem --- */ .perso__moldura{ position:relative; background:var(--bg-oficina); border:1px solid rgba(200,204,212,.12); aspect-ratio:1/1; overflow:hidden; } /* A arte é clara e o painel é escuro: sem tratamento ela vira um retângulo branco cortado no meio da ficha. A vinheta escurece as bordas e costura o retrato ao painel, deixando o centro (onde o robô está) intacto. */ .perso__moldura::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(78% 78% at 50% 46%, transparent 42%, rgba(11,12,18,.28) 72%, rgba(11,12,18,.62) 100%); } /* cover, não contain: a arte é quadrada como a moldura, e o cover garante que não sobre faixa de fundo se o arredondamento não fechar. Sem image-rendering:pixelated de propósito: o slot renderiza a ~308px e o arquivo tem 640, então o browser SEMPRE reduz. Pixelated desliga a filtragem justamente aí e serrilha o traço; a suavização padrão é a correta para reduzir. */ .perso__arte{width:100%; height:100%; object-fit:cover} /* selo de nível no canto, como ficha de personagem */ .perso__nivel{ position:absolute; right:0; top:0; z-index:2; display:flex; align-items:baseline; gap:4px; padding:6px 12px 6px 16px; background:var(--amber); color:var(--amber-deep); clip-path:polygon(14px 0, 100% 0, 100% 100%, 0 100%); font-family:var(--font-mono); font-size:18px; font-weight:500; line-height:1; } .perso__nivel span{font-size:11px; letter-spacing:.1em} .perso__nome{ font-family:var(--font-display); font-weight:800; font-size:22px; color:#fff; letter-spacing:-.01em; margin-top:16px; } .perso__classe{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--metal-mid); margin-top:4px; } /* --- Barras de atributo --- */ .stats{ display:grid; gap:10px; margin-top:18px; padding-top:16px; border-top:1px solid rgba(200,204,212,.12); } .stat{ display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:4px 10px; } .stat__rot{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--metal-mid); } .stat__val{ font-family:var(--font-mono); font-size:15px; font-weight:500; color:var(--amber); line-height:1; margin:0; } .stat__val--zero{color:var(--metal-light)} /* a barra ocupa as duas colunas, embaixo do par rótulo/valor */ .stat__barra{ grid-column:1 / -1; height:6px; background:rgba(11,12,18,.8); border:1px solid rgba(200,204,212,.1); overflow:hidden; } .stat__barra span{ display:block; height:100%; width:var(--fill); background:linear-gradient(90deg, rgba(245,166,35,.55), var(--amber)); } /* --- Coluna dos slots --- */ .slots__cab{ font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--metal-mid); padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid rgba(200,204,212,.12); } .slot{ --corte-s:10px; background:rgba(11,12,18,.55); border:1px solid rgba(200,204,212,.12); clip-path:polygon( var(--corte-s) 0, 100% 0, 100% calc(100% - var(--corte-s)), calc(100% - var(--corte-s)) 100%, 0 100%, 0 var(--corte-s)); padding:12px 14px; margin-bottom:10px; transition:border-color .22s var(--ease-toque), background-color .22s var(--ease-toque); } /* enquanto a pessoa mexe, o slot acende: confirma que ela mudou algo */ .slot.is-mexido{ border-color:rgba(245,166,35,.4); background:rgba(245,166,35,.07); } .slot__rot{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--metal-mid); margin-bottom:8px; } .slot__icone{color:var(--amber); font-size:10px} /* Sem JS as setas não fazem nada, então nem aparecem: o slot vira rótulo + valor, e a copy continua inteira. A classe .js entra no no começo do main.js. */ .slot__seletor{display:grid; grid-template-columns:1fr; align-items:center; gap:6px} .js .slot__seletor{grid-template-columns:44px 1fr 44px} .slot__seta{display:none} .js .slot__seta{ min-height:44px; display:grid; place-items:center; font-family:var(--font-mono); font-size:22px; line-height:1; color:var(--metal-light); background:rgba(200,204,212,.08); border:1px solid rgba(200,204,212,.14); transition:background-color .18s var(--ease-toque), color .18s var(--ease-toque), border-color .18s var(--ease-toque); } .slot__seta:hover{background:rgba(245,166,35,.16); border-color:rgba(245,166,35,.4); color:var(--amber)} .slot__seta:active{background:var(--amber); color:var(--amber-deep)} .slot__valor{ font-family:var(--font-body); font-weight:600; font-size:16px; line-height:1.3; color:#fff; text-align:center; min-height:42px; display:flex; align-items:center; justify-content:center; } .slot__contagem{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--metal-dark); text-align:center; margin-top:6px; } /* --- Tags de cobertura: mercados e prazo --- Todas visíveis de uma vez, sem seta e sem rolagem: são o que o robô alcança, não um parâmetro que se escolhe um por vez. Ficam ligadas por padrão porque o SDK cobre todas. */ .tags{display:grid; gap:12px; margin-top:4px; margin-bottom:14px} .tags__rot{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--metal-mid); margin-bottom:8px; } .tags__icone{color:var(--amber); font-size:10px} .tags__lista{display:flex; flex-wrap:wrap; gap:8px} /* mesmo chanfro dos slots, em escala menor */ .tag{ --corte-t:7px; padding:9px 14px; min-height:40px; font-family:var(--font-mono); font-size:13px; letter-spacing:.02em; color:var(--metal-mid); background:rgba(11,12,18,.55); border:1px solid rgba(200,204,212,.14); clip-path:polygon( var(--corte-t) 0, 100% 0, 100% calc(100% - var(--corte-t)), calc(100% - var(--corte-t)) 100%, 0 100%, 0 var(--corte-t)); transition:background-color .18s var(--ease-toque), border-color .18s var(--ease-toque), color .18s var(--ease-toque); } /* ligada: o estado padrão, já que o SDK cobre todos os mercados */ .tag.is-on{ color:var(--amber); border-color:rgba(245,166,35,.42); background:rgba(245,166,35,.10); } .tag:hover{border-color:rgba(245,166,35,.55)} /* desligada continua legível: é escolha do usuário, não indisponível */ .tag:not(.is-on){color:var(--metal-mid)} /* --- Contador de combinações: o remate da seção --- */ .combo{ display:grid; gap:4px; text-align:center; margin-top:16px; padding:16px 14px; background:rgba(245,166,35,.08); border:1px solid rgba(245,166,35,.28); } .combo__rot{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-warm); } .combo__num{ font-family:var(--font-display); font-weight:800; font-size:34px; line-height:1.05; letter-spacing:-.02em; color:var(--amber); } .combo__nota{ font-family:var(--font-mono); font-size:11px; line-height:1.5; color:var(--metal-mid); } /* ------------------------------------------------------------ COPY EXPLICATIVA — A SEÇÃO CLARA Inversão completa: fundo claro, texto escuro. É o que dá o salto de contraste entre seções. ------------------------------------------------------------ */ /* a arte manda nesta secao e ela e clara: a secao volta a ser a inversao clara da pagina. legibilidade vem de card por bloco. */ .explica{ background:var(--paper); color:var(--tinta-mid); padding:52px 0 56px; position:relative; overflow:hidden; } /* mapa claro quase sem tratamento: so um veu nas bordas pra costurar com as secoes escuras vizinhas. */ .explica__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; background:url("assets/mapa-light.webp") center center / cover no-repeat; } .explica__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(201,206,218,.75) 0%, rgba(201,206,218,.06) 14%, rgba(201,206,218,.06) 86%, rgba(201,206,218,.75) 100%); } .explica__inner{max-width:720px; position:relative; z-index:1} /* titulo direto sobre a arte: halo claro resolve o contraste sem precisar de caixa em volta. */ .explica .section__title{ color:var(--tinta); text-shadow:0 2px 14px rgba(233,236,242,.95), 0 1px 3px rgba(233,236,242,.9); } /* cada bloco de texto e um card de vidro escuro sobre a arte clara: o contraste invertido faz o card saltar do fundo. */ .prosa{display:grid; gap:14px} .prosa p{ color:var(--metal-light); margin:0; background:rgba(11,12,18,.80); backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15); border:1px solid rgba(200,204,212,.12); border-radius:12px; padding:18px 20px; box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 8px 24px -12px rgba(0,0,0,.7); } .prosa__lead{ font-size:19px; line-height:1.55; color:#fff; border-left:3px solid var(--amber); } /* Na seção escura a prosa não usa o card de vidro que a .explica precisa pra se destacar da arte clara. As duas regras vivem aqui, depois de `.prosa p` e `.prosa__lead`, porque empatam em especificidade com elas e só ganham pela ordem — e o reset vem antes do lead pela mesma razão. */ .sdk .prosa p{ background:none; border:0; border-radius:0; padding:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } /* O lead larga o card mas mantém o filete âmbar, sua marca na página. Precisa do `p` no seletor: sem ele a regra é (0,2,0) e perde para o reset acima, que é (0,2,1) por causa do seletor de tipo. */ .sdk .prosa p.prosa__lead{ border-left:3px solid var(--amber); padding-left:16px; } /* unico bloco acionavel da secao: vidro mais opaco que a prosa e filete ambar no topo, pra ser o card de maior peso. */ .pre-req{ position:relative; background:rgba(11,12,18,.82); backdrop-filter:blur(16px) saturate(1.15); -webkit-backdrop-filter:blur(16px) saturate(1.15); border:1px solid rgba(245,166,35,.22); border-radius:14px; padding:24px; margin-top:28px; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 20px 44px -20px rgba(0,0,0,.8); overflow:hidden; } .pre-req::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg, var(--amber), rgba(245,166,35,.12)); } .pre-req__title{ font-family:var(--font-display); font-weight:800; font-size:18px; color:#fff; margin-bottom:16px; line-height:1.3; letter-spacing:-.01em; } .pre-req__list{display:grid; gap:10px} .pre-req__list li{ position:relative; padding-left:20px; color:var(--metal-light); font-size:16px; line-height:1.5; } .pre-req__list li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:2px; background:var(--amber); border-radius:2px; } /* rodape de credibilidade: vidro mais discreto que os outros cards, pra nao competir com o pre-req. */ .instrutores{margin-top:24px} .instrutores__titulo{ font-family:var(--font-display); font-weight:800; font-size:18px; line-height:1.3; letter-spacing:-.01em; color:var(--tinta); margin-bottom:14px; /* sobre a arte clara, o mesmo halo que o titulo da secao usa */ text-shadow:0 2px 14px rgba(233,236,242,.95), 0 1px 3px rgba(233,236,242,.9); } .instrutores__grid{display:grid; gap:12px} /* sobre arte clara o vidro deixa passar luz demais: .66 + metal-mid reprovava em AA (2.76:1). mais opacidade e texto mais claro. */ .instrutor{ background:rgba(11,12,18,.78); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(200,204,212,.10); border-radius:12px; padding:18px 20px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 22px -14px rgba(0,0,0,.6); } .instrutor__nome{ font-family:var(--font-display); font-weight:800; font-size:17px; color:#fff; margin-bottom:6px; letter-spacing:-.01em; } /* Credencial: o resumo que se lê antes da bio. Corpo menor que o da bio pra ler como etiqueta; quando o texto é longo ela quebra em duas linhas, e o line-height folgado mantém isso legível. */ .instrutor__cred{ font-family:var(--font-mono); font-size:12px; line-height:1.5; letter-spacing:-.01em; color:var(--amber); padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid rgba(200,204,212,.12); } /* corpo menor que o da pagina: a bio e longa e nao deve competir com a prosa principal da secao. */ .instrutor__bio{font-size:14.5px; line-height:1.55; color:var(--metal-light)} /* ------------------------------------------------------------ CRONOGRAMA — volta ao escuro Estrutura de card de torneio: fita cortada no canto, emblema centralizado, cabeçalho com divisor e o horário num rodapé separado. O emblema vem do mesmo traço das ilustrações. ------------------------------------------------------------ */ .cronograma{background:var(--bg-base); padding:52px 0 56px} .crono__grid{display:grid; gap:16px} .crono__card{ position:relative; display:flex; flex-direction:column; background:linear-gradient(180deg, #2E3547 0%, var(--bg-raised) 42%); border:1px solid rgba(200,204,212,.1); border-radius:10px; padding:20px 20px 0; overflow:hidden; box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 14px 32px -22px rgba(0,0,0,.9); } .crono__card--destaque{ border-color:rgba(245,166,35,.5); background:linear-gradient(180deg, #3A3320 0%, var(--bg-raised) 42%); box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 0 0 1px rgba(245,166,35,.12), 0 16px 36px -22px rgba(245,166,35,.35); } /* Fita de canto com o corte diagonal */ .crono__fita{ position:absolute; top:0; left:0; z-index:2; background:rgba(200,204,212,.14); /* o canto inferior direito é cortado na diagonal */ clip-path:polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); padding:7px 26px 7px 18px; } .crono__fita span{ font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--metal-light); } .crono__card--destaque .crono__fita{background:var(--amber)} .crono__card--destaque .crono__fita span{color:var(--amber-deep)} /* Cabeçalho: emblema + etapa + título, com divisor embaixo */ .crono__topo{ text-align:center; padding:22px 0 18px; margin-top:14px; border-bottom:1px solid rgba(200,204,212,.12); } /* O PNG da badge é opaco e traz um retângulo de fundo junto. A máscara hexagonal recorta a silhueta e o fundo do card aparece em volta, sem precisar de alfa no arquivo. */ .crono__badge{ width:96px; height:96px; margin:0 auto 12px; --hex:polygon(50% 1%, 94% 26%, 94% 74%, 50% 99%, 6% 74%, 6% 26%); clip-path:var(--hex); filter:drop-shadow(0 8px 16px rgba(0,0,0,.6)); } .crono__etapa{ font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--metal-mid); margin-bottom:6px; } .crono__card--destaque .crono__etapa{color:var(--amber)} .crono__titulo{ font-family:var(--font-display); font-weight:800; font-size:19px; line-height:1.25; letter-spacing:-.01em; color:#fff; } .crono__missoes{display:grid; gap:9px; padding:18px 0; flex:1} .crono__missoes li{ position:relative; padding-left:18px; font-size:16px; line-height:1.45; color:var(--metal-light); } .crono__missoes li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:2px; background:rgba(245,166,35,.6); border-radius:2px; } /* Rodapé do card: data e horário separados por uma faixa */ .crono__quando{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 -20px; padding:14px 20px; background:rgba(11,12,18,.45); border-top:1px solid rgba(200,204,212,.1); font-family:var(--font-mono); font-size:13px; letter-spacing:.02em; } .crono__data{color:var(--metal-mid)} .crono__hora{ color:var(--metal-light); font-weight:500; padding:3px 10px; border-radius:4px; background:rgba(200,204,212,.1); } .crono__card--destaque .crono__hora{ background:rgba(245,166,35,.16); color:var(--amber); } /* ------------------------------------------------------------ FAQ — segunda seção clara ------------------------------------------------------------ */ .faq{background:var(--paper); color:var(--tinta-mid); padding:52px 0 56px} .faq__inner{max-width:720px} .faq .section__title{color:var(--tinta)} .faq__item{border-bottom:1px solid rgba(17,20,32,.14)} .faq__q{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:52px; padding:16px 0; cursor:pointer; font-weight:600; font-size:17px; line-height:1.4; color:var(--tinta); list-style:none; transition:color .18s var(--ease-toque); } .faq__q::-webkit-details-marker{display:none} .faq__q::after{ content:"+"; flex:none; font-family:var(--font-mono); font-size:20px; color:var(--amber-deep); line-height:1; transition:transform .25s var(--ease-entrada); } .faq__item[open] .faq__q::after{content:"–"; transform:rotate(180deg)} .faq__a{padding:0 0 18px} .faq__a p{color:var(--tinta-mid); font-size:16px; line-height:1.6; max-width:62ch} /* ------------------------------------------------------------ CTA FINAL + RODAPÉ ------------------------------------------------------------ */ .cta-final{background:var(--bg-deep); padding:52px 0 56px; position:relative; overflow:hidden} /* mesma logica do hero: crop sem texto no mobile, arte integral no desktop */ .cta-final__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; background:url("assets/background-mobile.webp") center 40% / cover no-repeat; } .cta-final__bg::after{ content:""; position:absolute; inset:0; background:rgba(23,26,38,.84); } .cta-final__inner{max-width:560px; position:relative; z-index:1} .cta-final__title{ font-family:var(--font-display); font-weight:800; font-size:24px; line-height:1.2; letter-spacing:-.015em; color:#fff; margin-bottom:24px; text-align:center; } .rodape{background:var(--bg-deep); padding:0 0 32px} .rodape__txt{ font-family:var(--font-mono); font-size:13px; color:var(--metal-mid); text-align:center; line-height:1.5; } /* Espaço extra no fim pra barra fixa não cobrir o rodapé */ @media (max-width:767px){ .rodape{padding-bottom:96px} } /* ------------------------------------------------------------ MOTION — entrada de seções ------------------------------------------------------------ */ .revela{ opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease-entrada), transform .5s var(--ease-entrada); } .revela.is-dentro{opacity:1; transform:translateY(0)} /* ============================================================ ≥480px ============================================================ */ @media (min-width:480px){ .dias__tab{font-size:14px} .passo__t{font-size:32px} } /* ============================================================ ≥768px ============================================================ */ @media (min-width:768px){ :root{--pad:32px} .hero{padding:200px 0 64px} .hero__title{font-size:44px} .hero__sub{font-size:17px; max-width:46ch} .section__title{font-size:30px; margin-bottom:28px} .cta-final__title{font-size:30px} .form-card{padding:24px} /* os dois lado a lado, com altura igual pra as bios de tamanhos diferentes fecharem na mesma linha de base */ .instrutores__grid{grid-template-columns:1fr 1fr; gap:16px; align-items:stretch} .instrutores__titulo{font-size:20px} .missoes{padding-top:64px} .sdk{padding:72px 0} .explica{padding:72px 0} /* personagem à esquerda, slots à direita: a leitura vira "esse é o robô / isso é o que você equipa nele" */ /* start, não stretch: a coluna do personagem é naturalmente mais alta (retrato + 5 barras) e esticar a dos slots junto só abria um vazio no rodapé dela. Cada painel fecha onde o conteúdo acaba. */ .ficha{grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:20px; align-items:start} .ficha__perso,.ficha__slots{padding:24px} .sdk__rodape{margin-top:20px; padding:26px 24px} /* Sem limite a linha ia a ~101 caracteres. Cuidado com o `ch`: na Inter o dígito é largo (10.7px), então 78ch já era a largura inteira do painel e não mordia. 66ch põe a linha em ~80. */ .sdk__fecho{max-width:66ch} .selo{padding:16px 18px; gap:16px} .selo__txt{font-size:15px} .combo__num{font-size:40px} .cronograma{padding:72px 0} .faq{padding:72px 0} .cta-final{padding:72px 0 80px} .passo__t{font-size:38px} .passo__cx{top:calc(100dvh - 250px); height:190px} /* Os três dias lado a lado: as nove missões cabem numa tela só. as 3 missoes dividem a altura em faixas iguais (1fr cada), entao a linha 2 de um dia comeca na mesma altura que a dos vizinhos, mesmo quando um titulo ocupa duas linhas de texto. */ .listas{grid-template-columns:repeat(3,1fr); gap:20px; padding-bottom:56px} .lista__grupo{display:flex; flex-direction:column} .lista{flex:1; grid-auto-rows:1fr} .lista__item{align-items:flex-start; min-height:64px} .palco__progresso{font-size:26px; top:22px} } /* ============================================================ ≥1024px No desktop o palco usa a cena completa (16:9), não o recorte vertical: ampliar o 4:5 numa tela larga estoura a imagem. ============================================================ */ @media (min-width:1024px){ body{font-size:18px; line-height:1.7} .hero{padding:72px 0 80px} .hero__title{font-size:56px} .hero__grid{ display:grid; grid-template-columns:1fr 460px; gap:56px; align-items:center; } .hero__copy{position:relative; z-index:2} .hero__sub{font-size:18px} .hero::after{ content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(120% 90% at 78% 40%, rgba(245,166,35,.09), transparent 62%); pointer-events:none; } /* desktop: ha largura pra arte completa, com o personagem e a composicao inteira. troca o crop mobile pela ilustracao integral. */ .hero__bg{ background:url("assets/background.webp") center 72% / cover no-repeat; } /* a arte fica em forca total no miolo/direita. dois veus somados: um lateral, que escurece a faixa da copy, e um no topo, que apaga o titulo embutido na arte. */ .hero__bg::after{ background: linear-gradient(180deg, rgba(23,26,38,.99) 0%, rgba(23,26,38,.97) 12%, rgba(23,26,38,.72) 22%, transparent 38%), linear-gradient(90deg, rgba(23,26,38,.97) 0%, rgba(23,26,38,.94) 28%, rgba(23,26,38,.62) 44%, rgba(23,26,38,.20) 58%, rgba(23,26,38,.12) 100%); } .section__title{font-size:36px; margin-bottom:32px} .cta-final__title{font-size:36px} /* desktop: arte integral. o conteudo e centralizado e estreito, entao o veu abre nas laterais e so fecha atras do titulo e do form. */ .cta-final__bg{ background:url("assets/background.webp") center 62% / cover no-repeat; } .cta-final__bg::after{ background: linear-gradient(180deg, rgba(23,26,38,.99) 0%, rgba(23,26,38,.96) 16%, rgba(23,26,38,.70) 25%, transparent 40%), radial-gradient(58% 96% at 50% 55%, rgba(23,26,38,.93) 42%, rgba(23,26,38,.72) 68%, rgba(23,26,38,.34) 100%); } .prosa{max-width:68ch} .faq__a p{max-width:68ch} .ficha{grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:24px} /* com largura sobrando os quatro slots viram 2×2: a ficha inteira cabe numa tela, sem a coluna direita virando uma torre */ /* Slots agrupados no topo, contador ancorado no rodapé do painel. Distribuir a folga entre as linhas (space-between) abria buracos entre os slots, e esticar a linha do contador inflava a caixa. */ .ficha__slots{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; align-content:start; } .slots__cab{grid-column:1 / -1} .slot{margin-bottom:12px} /* Um grupo por linha, cada um com a largura inteira do painel. Lado a lado sobravam 37px pra caber os seis mercados e "Cripto" caía sozinha numa segunda linha; espremer o padding resolveria na régua mas encolheria o alvo de toque. */ .tags{grid-column:1 / -1; grid-template-columns:1fr; gap:14px} .combo{grid-column:1 / -1; margin-top:4px} .combo__num{font-size:46px} .perso__nome{font-size:24px} .dias__tab{font-size:14px} .dias{max-width:560px} /* a cena completa cobre a tela, sem moldura */ .palco__est img{object-fit:cover} .passo__t{font-size:44px} .passo__cx{max-width:780px; margin-inline:0; padding-left:5vw; top:calc(100dvh - 300px); height:220px} /* Marcadores sobre a cena completa. Só os do dia ativo aparecem: os nove de uma vez virariam ruído. */ .marcador{display:none} .marcador.is-do-dia{ display:grid; place-items:center; position:absolute; left:var(--mx); top:52%; z-index:3; width:40px; height:40px; margin:-20px 0 0 -20px; background:rgba(11,12,18,.8); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:2px solid rgba(200,204,212,.7); border-radius:50%; font-family:var(--font-mono); font-size:14px; color:var(--metal-light); transition:background-color .22s var(--ease-toque), border-color .22s var(--ease-toque), color .22s var(--ease-toque), transform .22s var(--ease-entrada); } .marcador.is-do-dia:hover, .marcador.is-do-dia:focus-visible, .marcador.is-do-dia.is-active{ background:var(--amber); border-color:var(--amber); color:var(--amber-deep); transform:scale(1.12); } .tooltip{ display:block; position:absolute; z-index:5; max-width:280px; padding:10px 14px; background:rgba(11,12,18,.94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(200,204,212,.28); border-radius:6px; font-size:15px; line-height:1.4; color:var(--metal-light); transform:translate(-50%,-100%); pointer-events:none; box-shadow:0 12px 30px -10px rgba(0,0,0,.8); } .tooltip[hidden]{display:none} .crono__grid{grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch} .crono__card{padding:24px 24px 0} .crono__quando{margin:0 -24px; padding:14px 24px} .crono__badge{width:112px; height:112px} .crono__titulo{font-size:20px} } /* ============================================================ PERFORMANCE — seções abaixo da dobra O palco fica de fora: content-visibility atrapalha sticky. ============================================================ */ .cronograma,.faq{ content-visibility:auto; contain-intrinsic-size:auto 800px; } /* a ficha do SDK fica de fora: o clip-path dos painéis precisa das medidas reais pra não recortar torto no primeiro paint */ /* ============================================================ MOVIMENTO REDUZIDO O palco não pode só parar de animar: sem o pin sobrariam telas vazias. Ele degrada para uma imagem por dia em fluxo normal (nove seguidas seria excesso), e as listas continuam completas. ============================================================ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .revela{opacity:1; transform:none} .trilho{display:flex; flex-direction:column; gap:12px; padding:0 var(--pad) 8px} .palco{ position:static; height:auto; overflow:visible; display:flex; flex-direction:column; gap:12px; } .palco::after{display:none} .palco__progresso{display:none} .palco__est{ position:static; opacity:1; visibility:visible; aspect-ratio:4/5; border-radius:8px; overflow:hidden; } /* só a primeira estação de cada dia */ .palco__est:not([data-est="0"]):not([data-est="3"]):not([data-est="6"]){display:none} .palco__est img{height:auto} .passos{display:none} .marcador{display:none} .dias-barra{position:static} .dias__indicador{display:none} }