/* ============================================================ KAEV - estante de pastas do portfolio Incluido por index.html (secao #portfolio) e por portfolio.html. Fonte unica: mexer aqui muda nos dois. .pf-btn tem nome proprio porque .btn ja existe no index e e outro botao. ============================================================ */ /* Paleta e medidas. O leitor mora no , FORA da estante. Se as variaveis ficarem so na estante, o leitor perde as cores e o fundo fica transparente. Por isso os dois recebem. */ .kaev-estante, .kaev-portfolio, .leitor{ --azul:#1506FF; --magenta:#FF00FE; --preto:#000000; --branco:#FFFFFF; } .kaev-estante, .kaev-portfolio{ --pasta-w:330px; /* largura da pasta */ --pasta-h:230px; /* altura do corpo */ --raio:20px; --aba-w:44%; --aba-h:30px; --sombra:14px; --bolso:.66; --dentro:52px; /* quanto do conteudo fica escondido */ --espia:46px; /* quanto do conteudo aparece */ --item:31%; --celula:330px; --vao:58px; --passo-ms:400ms; color:var(--branco); font-family:'Plex','IBM Plex Mono',ui-monospace,monospace; } /* ============ MOLDURA DA SECAO: a pagina que a Kelita aprovou ============ */ .kaev-portfolio{ position:relative; overflow:hidden; padding:clamp(3.5rem,7vw,6rem) 0 clamp(3rem,6vw,5rem); background:var(--azul); } .kaev-portfolio__foto{ position:absolute;inset:0;z-index:0; background:url('assets/foto-fundo.jpg') center 42% / cover no-repeat; } .kaev-portfolio__foto::after{ content:'';position:absolute;inset:0; background: linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,.30) 34%, rgba(0,0,0,.42) 72%, rgba(0,0,0,.75) 100%), rgba(21,6,255,.26); } .kaev-portfolio__grao{ position:absolute;inset:0;z-index:4;pointer-events:none; background-image:radial-gradient(var(--preto) 1px,transparent 1px); background-size:4px 4px;opacity:.10;mix-blend-mode:multiply; } .kaev-portfolio .deco{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} .kaev-portfolio .deco img{position:absolute;display:block} .kaev-portfolio .d-aster-br{bottom:-110px;right:-80px;width:340px;transform:rotate(14deg);opacity:.30} .kaev-portfolio .d-x-r {top:38%;right:-46px;width:160px;transform:rotate(9deg);opacity:.22} .kaev-portfolio .d-natus {bottom:14%;right:14%;width:190px;opacity:.12} /* coluna KAEV correndo na borda esquerda */ .kaev-portfolio .coluna{ position:absolute;left:14px;top:0;bottom:0;width:26px;z-index:3; pointer-events:none;display:flex;align-items:center;overflow:hidden; } .kaev-portfolio .coluna span{ writing-mode:vertical-rl; font-size:.68rem;letter-spacing:.42em;text-transform:uppercase; font-weight:700;opacity:.5;white-space:nowrap; animation:kaevSobe 34s linear infinite; } @keyframes kaevSobe{from{transform:translateY(0)}to{transform:translateY(-50%)}} .kaev-portfolio__interno{position:relative;z-index:3;max-width:1240px;margin:0 auto;padding:0 40px} /* titulo em Bootzy com eco magenta deslocado */ .kaev-portfolio .titulo{position:relative;display:inline-block} .kaev-portfolio .titulo h2, .kaev-portfolio .titulo .eco{ font-family:'Bootzy','Plex',sans-serif; font-size:clamp(3rem,9vw,6.6rem); line-height:.82;letter-spacing:-.02em;text-transform:uppercase; margin:0; } .kaev-portfolio .titulo h2{position:relative;z-index:2;color:var(--branco)} .kaev-portfolio .titulo h2 em{font-style:normal;color:var(--magenta)} .kaev-portfolio .titulo .eco{ position:absolute;top:0;left:0;z-index:1; color:var(--magenta);opacity:.55;transform:translate(7px,7px); } /* botao de som, discreto, no canto da secao */ .kaev-portfolio .som{ position:fixed;right:22px;bottom:16px;z-index:120; background:none;border:0;padding:6px 4px;cursor:pointer; font:inherit;font-size:.56rem;letter-spacing:.24em;text-transform:uppercase; color:var(--branco);opacity:.34; display:flex;align-items:center;gap:7px;transition:opacity .18s; } .kaev-portfolio .som:hover,.kaev-portfolio .som:focus-visible{opacity:.9} .kaev-portfolio .som__led{width:6px;height:6px;background:var(--magenta);flex:0 0 auto} .kaev-portfolio .som[aria-pressed="false"] .som__led{background:transparent;box-shadow:inset 0 0 0 1px currentColor} @media (prefers-reduced-motion:reduce){ .kaev-portfolio .coluna span{animation:none} } /* ---------- ESTEIRA ---------- */ .palco{position:relative} .vitrine{position:relative;overflow:hidden;padding:16px 0 10px;cursor:grab;z-index:1} .vitrine:active{cursor:grabbing} .trilho{display:flex;gap:var(--vao);will-change:transform;transition:transform var(--passo-ms) cubic-bezier(.16,.9,.2,1)} @media (prefers-reduced-motion:reduce){.trilho,.coluna span{animation:none;transition:none}} .cela{flex:0 0 var(--celula);width:var(--celula);display:flex;align-items:flex-end;justify-content:center} /* ---------- CONTROLES ---------- */ .barra{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:40px;padding-bottom:70px;flex-wrap:wrap} .marcadores{display:flex;gap:7px;align-items:center} .marcador{width:30px;height:3px;background:rgba(255,255,255,.3);transition:background .2s,transform .2s} .marcador.on{background:var(--magenta);transform:scaleY(2.4)} .controles{display:flex;gap:10px;align-items:center} .pf-btn{ width:56px;height:56px;background:var(--preto);color:var(--branco); border:2px solid var(--branco);border-radius:0;font:inherit;font-size:1.2rem;line-height:1; display:grid;place-items:center;cursor:pointer; transition:background .14s,color .14s,transform .09s; } .pf-btn:hover:not(:disabled){background:var(--magenta);color:var(--preto);border-color:var(--magenta)} .pf-btn:active:not(:disabled){transform:translateY(2px)} .pf-btn:disabled{opacity:.28;cursor:default} .pf-btn:focus-visible{outline:3px solid var(--branco);outline-offset:3px} /* ---------- A PASTA ---------- */ .pasta{width:var(--pasta-w);background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;text-align:left;display:block} .pasta--solo{--item:52%} .pasta__caixa{position:relative;width:100%;height:calc(var(--pasta-h) + var(--aba-h));transition:transform .3s cubic-bezier(.2,.8,.25,1)} .pasta:hover .pasta__caixa,.pasta:focus-visible .pasta__caixa{transform:translateY(-9px)} .pasta:focus-visible{outline:none} .pasta:focus-visible .pasta__frente{outline:3px solid var(--branco);outline-offset:3px} .pasta__aba{position:absolute;top:0;left:0;width:var(--aba-w);height:calc(var(--aba-h) + var(--raio));background:var(--cor);border-radius:var(--raio) var(--raio) 0 0} .pasta__costas{position:absolute;top:var(--aba-h);left:0;right:0;bottom:0;background:var(--cor);border-radius:0 var(--raio) var(--raio) var(--raio)} .pasta__sombra{position:absolute;top:calc(var(--aba-h) + var(--sombra));left:var(--sombra);right:calc(var(--sombra) * -1);bottom:calc(var(--sombra) * -1);background:var(--preto);opacity:.4;border-radius:0 var(--raio) var(--raio) var(--raio);z-index:-1} .pasta__interior{position:absolute;top:var(--aba-h);left:0;right:0;bottom:0;overflow:hidden;border-radius:0 var(--raio) var(--raio) var(--raio)} .pasta__miolo{position:absolute;left:9%;right:9%;bottom:calc(var(--pasta-h) * var(--bolso) - var(--dentro));height:calc(var(--dentro) + var(--espia));display:flex;align-items:flex-end;justify-content:center;gap:8px} .pasta__miolo img{display:block;max-width:var(--item);max-height:100%;width:auto;height:auto;object-fit:contain;transform-origin:bottom center;transition:transform .3s cubic-bezier(.2,.8,.25,1);filter:drop-shadow(2px 2px 0 rgba(0,0,0,.4))} .pasta__miolo img:nth-child(1){transform:rotate(-5deg)} .pasta__miolo img:nth-child(3){transform:rotate(5deg)} .pasta:hover .pasta__miolo img:nth-child(1){transform:rotate(-8deg) translateY(-10px)} .pasta:hover .pasta__miolo img:nth-child(2){transform:translateY(-15px)} .pasta:hover .pasta__miolo img:nth-child(3){transform:rotate(8deg) translateY(-10px)} /* Bolso da frente. O vinco e duas linhas, escura + clara. Sozinha, cada uma some numa das cores: linha clara nao aparece em pasta branca, escura nao aparece em preta. Juntas, o vinco le nas tres. */ .pasta__frente{ position:absolute;left:0;right:0;bottom:0; height:calc(var(--pasta-h) * var(--bolso)); background:var(--cor); border-radius:var(--raio); box-shadow: 0 -9px 16px -8px rgba(0,0,0,.65), /* sombra do bolso caindo nas costas */ inset 0 -1px 0 rgba(0,0,0,.35); /* pe do bolso */ overflow:hidden; } .pasta__frente::before{ content:'';position:absolute;left:0;right:0;top:0;height:2px; background:rgba(0,0,0,.5); } .pasta__frente::after{ content:'';position:absolute;left:0;right:0;top:2px;height:1px; background:rgba(255,255,255,.32); } /* reticula por dentro do bolso, textura da marca */ .pasta__frente{ background-image:radial-gradient(rgba(0,0,0,.16) 1px,transparent 1px); background-size:5px 5px; background-color:var(--cor); } /* costas com a mesma reticula, um tom mais fraca, pra dar profundidade */ .pasta__costas{ background-image:radial-gradient(rgba(0,0,0,.10) 1px,transparent 1px); background-size:5px 5px; background-color:var(--cor); box-shadow:inset 0 2px 0 rgba(0,0,0,.28); } /* aba: linha de dobra, pra ela nao parecer colada nas costas */ .pasta__aba{box-shadow:inset 0 -2px 0 rgba(0,0,0,.3)} /* contorno fino em toda a silhueta, separa a pasta do fundo */ .pasta__aba,.pasta__costas,.pasta__frente{outline:1px solid rgba(0,0,0,.35);outline-offset:-1px} /* número no canto da aba. NUNCA usar mix-blend-mode aqui: difference sobre magenta gera verde. */ .pasta__num{ position:absolute;top:calc(var(--aba-h) * .1);left:16px;z-index:3; font-size:.62rem;font-weight:700;letter-spacing:.16em; color:var(--tinta); } .pasta__nome{margin-top:22px;font-size:1rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;line-height:1.15} /* ================= LEITOR: o que tem dentro da pasta ================= */ .leitor{ position:fixed;inset:0;z-index:2000; background:#000; /* solido e literal: nada atras pode vazar */ color:#fff; font-family:'Plex','IBM Plex Mono',ui-monospace,monospace; display:none;flex-direction:column; opacity:0;transition:opacity .22s; } .leitor.aberto{display:flex;opacity:1} .leitor::after{ content:'';position:absolute;inset:0;pointer-events:none;z-index:1; background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1px); background-size:4px 4px;opacity:.05; } .leitor__topo{ display:flex;align-items:center;justify-content:space-between;gap:20px; padding:20px 28px;border-bottom:3px solid var(--branco); position:relative;z-index:3;background:var(--preto); } .leitor__titulo{font-size:1rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase} .leitor__titulo b{color:var(--magenta)} .leitor__acoes{display:flex;align-items:center;gap:16px;flex:0 0 auto} .som--leitor{position:static;opacity:.45} .som--leitor:hover,.som--leitor:focus-visible{opacity:1} .leitor__fechar{ width:46px;height:46px;flex:0 0 auto; background:var(--preto);color:var(--branco);border:2px solid var(--branco); font:inherit;font-size:1rem;cursor:pointer;display:grid;place-items:center; transition:background .14s,color .14s; } .leitor__fechar:hover{background:var(--magenta);color:var(--preto);border-color:var(--magenta)} .leitor__fechar:focus-visible{outline:3px solid var(--branco);outline-offset:3px} .leitor__corpo{flex:1;overflow-y:auto;position:relative;z-index:2;padding:20px 28px 32px;min-height:0} /* no modo visor o corpo não rola: tudo tem que caber de uma vez */ .leitor__corpo.visorativo{overflow:hidden;display:flex;flex-direction:column} /* fora do modo visor (posters), o palco tem altura fixa e a página rola */ .leitor__corpo:not(.visorativo) .visor{flex:none;margin-bottom:26px} .leitor__corpo:not(.visorativo) .visor__palco{flex:none;height:clamp(220px,44vh,440px)} /* abas de album */ .abas{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px;flex:0 0 auto} .aba{ background:none;border:2px solid rgba(255,255,255,.35);color:var(--branco); padding:8px 15px;font:inherit;font-size:.63rem;letter-spacing:.16em; text-transform:uppercase;cursor:pointer;transition:.14s; } .aba:hover{border-color:var(--branco)} .aba.on{background:var(--magenta);border-color:var(--magenta);color:var(--preto);font-weight:700} .aba:focus-visible{outline:3px solid var(--branco);outline-offset:3px} /* visor de slides. ALTURA manda, não largura. Senão imagem quadrada de 900px estoura a tela. */ .visor{display:flex;flex-direction:column;align-items:center;gap:14px;flex:1;min-height:0} .visor__palco{ flex:1;min-height:180px; width:100%;max-width:min(680px,88vw); background:rgba(255,255,255,.05); border:2px solid rgba(255,255,255,.22); position:relative;overflow:hidden; } /* absoluto porque max-height:100% dentro de grid/flex nao resolve: a altura da celula dependeria do conteudo, e o conteudo dela. */ .visor__palco img{ position:absolute;inset:8px; width:calc(100% - 16px);height:calc(100% - 16px); object-fit:contain;display:block; } .visor__barra{display:flex;align-items:center;gap:16px;flex:0 0 auto} .visor__barra .pf-btn{width:46px;height:46px;font-size:1rem} .visor__conta{font-size:.68rem;letter-spacing:.2em;min-width:78px;text-align:center} .visor__conta b{color:var(--magenta)} /* grade de miniaturas */ .grade{ display:grid;gap:14px; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); } .grade button{ background:none;border:2px solid rgba(255,255,255,.2);padding:0;cursor:pointer; aspect-ratio:1/1;overflow:hidden;transition:border-color .14s,transform .14s; } .grade button:hover{border-color:var(--magenta);transform:translateY(-3px)} .grade button:focus-visible{outline:3px solid var(--branco);outline-offset:2px} .grade img{width:100%;height:100%;object-fit:cover;display:block} /* sites embedados */ .sites{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))} .site__moldura{ border:2px solid rgba(255,255,255,.25);background:var(--branco); height:420px;overflow:hidden;position:relative; } .site__moldura iframe{ width:1280px;height:1400px;border:0; transform:scale(.33);transform-origin:top left; } .site__pe{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap} .site__nome{font-size:.86rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase} .site__tag{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;opacity:.65} .site__link{ color:var(--magenta);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase; font-weight:700;text-decoration:none;border-bottom:2px solid var(--magenta); } .site__link:hover{color:var(--branco);border-color:var(--branco)} /* videos */ .videos{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start} .videos article{display:flex;flex-direction:column;align-items:center} /* max-height manda: reel vertical de 720x1280 estourava a celula inteira */ .videos video{ width:auto;max-width:100%; height:auto;max-height:min(58vh,480px); display:block;border:2px solid rgba(255,255,255,.25);background:#000; } /* bloco embalagem: imagem + texto */ .embalagem{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:center;max-width:1100px} .embalagem img{width:100%;display:block;border:2px solid rgba(255,255,255,.25)} .embalagem h3{font-family:'Bootzy','Plex',sans-serif;font-size:2.4rem;line-height:.95;margin-bottom:20px;text-transform:uppercase} .embalagem p{font-size:.82rem;line-height:1.85;margin-bottom:16px;opacity:.9} .embalagem figcaption{margin-top:10px;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;opacity:.5} .vazio{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6;padding:40px 0} /* --cor = corpo da pasta · --tinta = o que escreve em cima dela */ .c-preto {--cor:var(--preto); --tinta:var(--branco)} .c-magenta{--cor:var(--magenta);--tinta:var(--preto)} .c-branco {--cor:var(--branco); --tinta:var(--preto)} /* ============================================================ CELULAR Medidas fixas de 330px nao cabem em tela de 375 com padding. Aqui tudo passa a ser relativo a largura da tela, e as proporcoes internas da pasta acompanham em vez de esticar. ============================================================ */ @media (max-width:720px){ .kaev-estante, .kaev-portfolio{ --pasta-w:min(272px,80vw); --celula:min(272px,80vw); --pasta-h:min(200px,58vw); --vao:22px; --aba-h:26px; --aba-w:46%; --raio:15px; --sombra:9px; --dentro:40px; --espia:40px; --item:30%; } .kaev-portfolio{padding:clamp(2.5rem,9vw,4rem) 0 clamp(2.5rem,8vw,3.5rem);} .kaev-portfolio__interno{padding:0 20px;} /* coluna KAEV rouba largura util na tela pequena */ .kaev-portfolio .coluna{display:none;} .kaev-portfolio .titulo h2, .kaev-portfolio .titulo .eco{font-size:clamp(2.6rem,15vw,4rem);} .kaev-portfolio .titulo{margin-bottom:.6rem;} .pasta__nome{margin-top:16px;font-size:.86rem;} .barra{margin-top:26px;padding-bottom:44px;gap:16px;} .marcador{width:20px;} .pf-btn{width:48px;height:48px;} /* leitor: menos respiro, mais conteudo */ .leitor__topo{padding:14px 16px;} .leitor__titulo{font-size:.8rem;letter-spacing:.12em;} .leitor__corpo{padding:16px 16px 28px;} .abas{gap:7px;margin-bottom:14px;} .aba{padding:7px 11px;font-size:.58rem;} .visor__palco{max-width:100%;} .grade{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;} .sites{grid-template-columns:1fr;} .site__moldura{height:300px;} .site__moldura iframe{transform:scale(.26);} .videos{grid-template-columns:1fr;} .videos video{max-height:min(52vh,420px);margin:0 auto;} .embalagem{grid-template-columns:1fr;gap:20px;} .embalagem h3{font-size:1.7rem;} } /* ============================================================ TOQUE NO CELULAR Sem touch-action, o navegador espera pra ver se vem um segundo toque (duplo toque = zoom). Isso engole o primeiro clique ou da zoom sem querer. `manipulation` desliga essa espera nos controles, sem tirar o zoom da pagina. ============================================================ */ .pf-btn, .aba, .pasta, .som, .leitor__fechar, .grade button, .site__link{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; } /* a esteira: rolagem vertical fica com o navegador, o arrasto lateral e nosso */ .vitrine{touch-action:pan-y;} @media (max-width:900px){ /* alvos maiores: 56px e o minimo confortavel pra dedo */ .pf-btn{width:56px;height:56px;font-size:1.3rem;} .controles{gap:14px;} .leitor__fechar{width:52px;height:52px;} .leitor__acoes{gap:12px;} .aba{padding:12px 15px;font-size:.62rem;} .abas{gap:9px;} .som{padding:12px 10px;font-size:.6rem;} .marcador{height:4px;width:24px;} .marcadores{gap:9px;} /* miniatura da galeria tambem vira alvo de toque */ .grade{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;} }