/* Cassyano Sales · portfólio v2 — editorial preto e branco. Grandis Extended (títulos, peso alto) + Sora (texto) + IBM Plex Mono (etiquetas entre colchetes). O azul aparece só em pontos de contraste: o ponto final, o relógio, o hover, o pontilhado. */ @font-face{font-family:Grandis;src:url(../assets/fonts/GrandisExtended-Black.ttf) format('truetype');font-weight:900;font-display:swap} @font-face{font-family:Grandis;src:url(../assets/fonts/GrandisExtended-Bold.ttf) format('truetype');font-weight:700;font-display:swap} @font-face{font-family:Grandis;src:url(../assets/fonts/GrandisExtended-Medium.ttf) format('truetype');font-weight:500;font-display:swap} @font-face{font-family:Sora;src:url(../assets/fonts/Sora-Light.ttf) format('truetype');font-weight:300;font-display:swap} @font-face{font-family:Sora;src:url(../assets/fonts/Sora-Regular.ttf) format('truetype');font-weight:400;font-display:swap} @font-face{font-family:Sora;src:url(../assets/fonts/Sora-Medium.ttf) format('truetype');font-weight:500;font-display:swap} @font-face{font-family:Sora;src:url(../assets/fonts/Sora-SemiBold.ttf) format('truetype');font-weight:600;font-display:swap} @font-face{font-family:Mono;src:url(../assets/fonts/IBMPlexMono-400.woff2) format('woff2');font-weight:400;font-display:swap} @font-face{font-family:Mono;src:url(../assets/fonts/IBMPlexMono-500.woff2) format('woff2');font-weight:500;font-display:swap} :root{ --bg:#F2F1ED; --ink:#0A0A0A; --grey:#8C8B86; --soft:#E4E3DE; --line:rgba(10,10,10,.12); --blue:#1A47FF; --f-display:Grandis,"Arial Black",sans-serif; --f-text:Sora,system-ui,sans-serif; --f-mono:Mono,ui-monospace,Menlo,monospace; --gut:clamp(16px,2.6vw,40px); --ease:cubic-bezier(.22,1,.36,1); } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} body{background:var(--bg);color:var(--ink);font-family:var(--f-text);line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ::selection{background:var(--ink);color:var(--bg)} .mono{font-family:var(--f-text);font-size:13px;letter-spacing:-.005em} .blue{color:var(--blue);font-style:normal} .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--blue);margin-right:8px;vertical-align:1px;animation:pulse 2s ease-out infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(26,71,255,.55)}100%{box-shadow:0 0 0 10px rgba(26,71,255,0)}} /* cursor */ .cursor{position:fixed;inset:0;pointer-events:none;z-index:95} .cursor__dot{position:fixed;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;mix-blend-mode:difference;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease)} .cursor.is-hover .cursor__dot{width:44px;height:44px;margin:-22px 0 0 -22px} .cursor__label{position:fixed;left:0;top:0;padding:7px 12px;border-radius:99px;background:var(--ink);color:#fff;font-family:var(--f-text);font-size:12px;white-space:nowrap;opacity:0;transform:translate(14px,14px) scale(.8);transition:opacity .25s,transform .35s var(--ease)} .cursor.is-label .cursor__label{opacity:1;transform:translate(14px,14px) scale(1)} .cursor.is-label .cursor__dot{background:var(--blue);mix-blend-mode:normal} @media (pointer:coarse){.cursor{display:none}} /* desfoque em degradê atrás do cabeçalho, só depois de rolar */ .head-blur{position:fixed;top:0;left:0;right:0;height:110px;z-index:59;pointer-events:none;opacity:0;transition:opacity .5s var(--ease); backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px); -webkit-mask-image:linear-gradient(#000 35%,transparent);mask-image:linear-gradient(#000 35%,transparent)} body.scrolled .head-blur{opacity:1} /* CABEÇALHO: texto fino em modo diferença, sem caixa */ .head{position:fixed;top:0;left:0;right:0;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:18px var(--gut);color:#fff;mix-blend-mode:difference;transition:transform .6s var(--ease)} .head.is-hidden{transform:translateY(-100%)} .head__logo{font-family:var(--f-display);font-size:14px;font-weight:500;letter-spacing:-.01em;white-space:nowrap} .head__logo b{font-weight:900} .head__logo sup{font-family:var(--f-text);font-size:.6em;margin-left:2px} .head__nav{display:flex;gap:22px;font-size:13px} .head__nav a{position:relative} .head__nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)} .head__nav a:hover::after{transform:scaleX(1);transform-origin:left} .head__cta{justify-self:end;font-size:13px} .head__cta i{font-style:normal;display:inline-block;transition:transform .45s var(--ease)} .head__cta:hover i{transform:translate(2px,-2px)} .head__burger{display:none;justify-self:end} .menu{position:fixed;inset:0;z-index:58;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--gut) var(--gut) 60px;gap:6px;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease)} .menu a{font-family:var(--f-display);font-weight:900;font-size:clamp(42px,12vw,80px);line-height:1;text-transform:uppercase;display:flex;align-items:flex-start;gap:12px} .menu a .mono{font-size:11px;margin-top:.6em;opacity:.5} .menu-open .menu{clip-path:inset(0 0 0 0)} @media (max-width:860px){.head{grid-template-columns:1fr auto}.head__nav,.head__cta{display:none}.head__burger{display:block}} /* CAPA */ .hero{position:relative;height:100svh;min-height:560px;background:var(--ink);color:#F2F1ED;overflow:hidden;display:grid;place-items:center;padding:70px var(--gut)} .hero__trail{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .hero__trail img{position:absolute;left:0;top:0;width:clamp(140px,13vw,220px);height:auto;border-radius:4px;opacity:0;will-change:transform,opacity} .hero__title{position:relative;z-index:1;visibility:hidden;width:100%;max-width:1500px;font-family:var(--f-display);font-weight:900;text-transform:uppercase;line-height:.95;letter-spacing:-.04em;display:flex;flex-direction:column;user-select:none} /* em diagonal: CRIADO à esquerda, PARA no meio, CRIAR à direita */ .hero__line:nth-child(1){align-self:flex-start} .hero__line:nth-child(2){align-self:center} .hero__line:nth-child(3){align-self:flex-end} .hero__line{display:block;white-space:nowrap;overflow:hidden;padding:0 .02em .04em} .hero__word{display:inline-block} .hero__word .ch{position:relative;display:inline-block;will-change:transform,filter,opacity} /* imagem que toma o lugar de uma letra por um instante */ .ch__swap{display:inline-block;height:.7em;vertical-align:baseline;border-radius:.07em;overflow:hidden;background:#1a1a1a} .ch__swap img{width:100%;height:100%;object-fit:cover;display:block} .hero__foot{position:absolute;left:var(--gut);right:var(--gut);bottom:22px;display:flex;justify-content:space-between;color:rgba(242,241,237,.55);z-index:2} @media (max-width:700px){.hero__title{line-height:1.12}.hero__foot{font-size:11px;white-space:nowrap}} /* VERSÕES DA CAPA */ .hv-photo,.hv-split,.hv-cols{position:absolute;inset:0;z-index:0;display:none;pointer-events:none} .hv-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%} .hv-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.75),rgba(10,10,10,.1) 60%),linear-gradient(transparent 60%,rgba(10,10,10,.6))} .hv-split{left:50%} .hv-split img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)} .hv-cols{display:none;gap:12px;padding:0 12px;overflow:hidden} .hv-col{flex:1;display:flex;flex-direction:column;gap:12px;will-change:transform} .hv-col img{width:100%;border-radius:12px;display:block} .hv-cols::after{content:"";position:absolute;inset:0;background:rgba(10,10,10,.45)} .hv-profile{position:absolute;inset:-20px;z-index:0;display:none;pointer-events:none;overflow:hidden;background:#011a34} /* quando a foto não cobre a largura toda, as bordas se dissolvem no azul-escuro do fundo */ .hv-profile.is-gap picture{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)} .hv-profile picture,.hv-profile img{display:block;width:100%;height:100%} .hv-profile img{object-fit:cover;object-position:70% 40%} .hv-profile::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,20,.55),transparent 55%),linear-gradient(transparent 70%,rgba(5,6,20,.6))} /* faixas de luz que atravessam as listras azuis */ .hv-beam{position:absolute;top:-10%;bottom:-10%;left:0;width:16%;background:linear-gradient(90deg,transparent,rgba(80,140,255,.28),rgba(160,220,255,.18),transparent);mix-blend-mode:screen;filter:blur(18px);transform:skewX(-6deg)} .hv-beam--2{width:9%;opacity:.7} .hero[data-hv="5"] .hv-profile{display:block} .hero[data-hv="5"]{place-items:center start} .hero[data-hv="5"] .hero__line{align-self:flex-start!important} .hero[data-hv="1"] .hv-photo{display:block} .hero[data-hv="2"] .hv-split{display:block} .hero[data-hv="3"] .hv-cols{display:flex} /* posição da frase em cada versão */ .hero[data-hv="1"],.hero[data-hv="2"]{place-items:end start} .hero[data-hv="1"] .hero__line,.hero[data-hv="2"] .hero__line{align-self:flex-start!important} .hero[data-hv="1"] .hero__title,.hero[data-hv="2"] .hero__title{padding-bottom:9vh} .hero[data-hv="2"] .hero__title{max-width:46%} .hero[data-hv="3"] .hero__title{width:auto;padding:clamp(24px,4vw,56px) clamp(28px,5vw,72px);border-radius:24px;background:rgba(10,10,10,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 30px 80px rgba(0,0,0,.4)} .hero[data-hv="3"] .hero__line{align-self:center!important} /* seletor (provisório) */ .hv-switch{position:fixed;right:16px;bottom:16px;z-index:70;display:flex;align-items:center;gap:4px;padding:5px 5px 5px 12px;border-radius:99px;background:rgba(10,10,10,.8);color:#fff;font-size:12px;backdrop-filter:blur(10px)} .hv-switch button{width:30px;height:30px;border-radius:50%;color:rgba(255,255,255,.7)} .hv-switch button.on{background:#fff;color:#0A0A0A} .hero__tw{display:contents} .hv-switch .hm{display:none} .hv-switch span.hm{margin:0 2px 0 8px} @media (max-width:700px){.hv-switch.is-5 .hm{display:inline-block}.hv-switch button{width:26px;height:26px}} @media (max-width:700px){ /* celular, versão 5: foto vertical (cabeça no alto) e a frase embaixo, no escuro */ .hv-profile{inset:0} .hv-profile img{object-fit:cover;object-position:50% 0} .hv-profile::after{background:linear-gradient(transparent 55%,rgba(2,6,22,.7))} .hero[data-hv="5"]{place-items:end start;padding-bottom:64px} .hv-split{left:0;top:45%}.hero[data-hv="2"] .hero__title{max-width:none}.hero[data-hv="2"]{place-items:start start}.hero[data-hv="2"] .hero__title{padding:12vh 0 0}} /* PROJETOS */ .works{position:relative;padding:clamp(90px,10vw,150px) var(--gut) clamp(80px,9vw,140px)} .works__big{font-family:var(--f-text);font-weight:500;font-size:clamp(64px,13.5vw,240px);line-height:.85;letter-spacing:-.065em} .works__big sup{font-size:14px;letter-spacing:0;vertical-align:top;margin-left:.4em;position:relative;top:1.2em} .works__strip{display:flex;gap:6px;margin:clamp(14px,2vw,26px) calc(-1*var(--gut)) 0;overflow:hidden;height:clamp(90px,12vw,190px)} .works__strip img{flex:none;height:100%;width:auto;will-change:transform} .works__bar{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin:clamp(60px,8vw,120px) 0 clamp(30px,4vw,50px)} .works__filters{display:flex;flex-wrap:wrap;gap:4px clamp(14px,2vw,28px);font-size:clamp(17px,1.6vw,24px);letter-spacing:-.03em} .works__filters button{color:#B9B8B2;transition:color .3s} .works__filters button sup{font-size:.5em;margin-left:3px;vertical-align:top} .works__filters button.on,.works__filters button:hover{color:var(--ink)} .works__filters button.on sup{color:var(--blue)} .works__hint{font-size:13px;color:var(--grey)} /* GALERIA: colunas desencontradas em parallax, capa inteira (sem corte) */ .gallery{display:flex;gap:clamp(12px,2vw,28px);align-items:flex-start;padding-bottom:clamp(40px,6vw,100px)} .gcol{flex:1;display:flex;flex-direction:column;gap:clamp(28px,4vw,60px);will-change:transform} .gcol:nth-child(2){margin-top:clamp(80px,12vw,200px)} .gcol:nth-child(3){margin-top:clamp(30px,5vw,80px)} .gcol:nth-child(4){margin-top:clamp(120px,16vw,260px)} .gitem{cursor:pointer} .gitem__img{position:relative;overflow:hidden;background:var(--soft);border-radius:14px;transform:translateZ(0)} .gitem__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s} .gitem:hover .gitem__img img{transform:scale(1.045)} /* no hover: degradê com desfoque sobe por baixo, com um traço forte, o nome e a categoria */ .gitem__cap{position:absolute;left:0;right:0;bottom:0;padding:70px 18px 18px;color:#fff;display:flex;flex-direction:column;gap:3px; background:linear-gradient(transparent,rgba(0,0,0,.55));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); -webkit-mask-image:linear-gradient(transparent,#000 55%);mask-image:linear-gradient(transparent,#000 55%); opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .6s var(--ease)} .gitem__cap::before{content:"";width:28px;height:3px;background:#fff;border-radius:2px;margin-bottom:10px;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease) .1s} .gitem__cap b{font-weight:500;font-size:clamp(17px,1.4vw,22px);letter-spacing:-.03em;line-height:1.1} .gitem__cap span{font-size:13px;color:rgba(255,255,255,.75)} .gitem:hover .gitem__cap{opacity:1;transform:none} .gitem:hover .gitem__cap::before{transform:scaleX(1)} .gallery.is-hover .gitem:not(:hover) img{filter:brightness(.8) saturate(.85)} @media (hover:none){.gitem__cap{opacity:1;transform:none}.gitem__cap::before{transform:scaleX(1)}} @media (max-width:700px){.gcol:nth-child(2){margin-top:60px}.works__hint{display:none}} /* SOBRE (preto): a frase do currículo acende palavra por palavra */ .manifesto{background:var(--ink);color:#F2F1ED} .manifesto__pin{position:relative;height:100svh;display:grid;place-items:center;padding:0 var(--gut)} .noise-dither{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0} .manifesto__mask{position:relative;z-index:1} .manifesto__tag{z-index:2;position:absolute;top:80px;left:var(--gut);color:rgba(242,241,237,.5)} .manifesto__mask{max-width:1250px} .manifesto__text{font-weight:500;font-size:clamp(30px,4.6vw,78px);line-height:1.08;letter-spacing:-.05em} .manifesto__text .w{opacity:.16} /* SERVIÇOS */ .services{position:relative;padding:clamp(90px,10vw,150px) 0} .sec-head{display:flex;justify-content:space-between;align-items:flex-start;padding:0 var(--gut);margin-bottom:clamp(30px,4vw,60px);color:var(--grey)} .sec-head p{max-width:380px;text-transform:none;font-size:13px} .services__list{list-style:none;text-align:center} .srv{position:relative;font-weight:500;font-size:clamp(34px,6vw,100px);line-height:1.08;letter-spacing:-.055em;padding:0 var(--gut)} .srv::before{content:"";position:absolute;left:0;right:0;top:4%;bottom:4%;background:var(--ink);transform:scaleY(0);transition:transform .5s var(--ease);z-index:0} .srv span{position:relative;z-index:1;transition:color .3s} .srv sup{position:relative;z-index:1;font-family:var(--f-mono);font-size:12px;letter-spacing:0;vertical-align:top;margin-left:.6em;color:var(--grey)} .srv:hover::before{transform:scaleY(1)} .srv:hover span{color:#fff} .services__float{position:fixed;left:0;top:0;width:clamp(180px,16vw,260px);pointer-events:none;z-index:40;opacity:0;transform:translate(-50%,-50%) scale(.7)} .services__float img{width:100%;height:auto} /* QUEM SOU */ .about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,6vw,110px);align-items:end;padding:clamp(60px,8vw,120px) var(--gut);border-top:1px solid var(--line)} .about__photo{position:relative;aspect-ratio:4/5;background:#000;overflow:hidden} .about__photo canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .about__photo{border-radius:14px} .about__photo .dither2{z-index:2} .about__photo figcaption{z-index:3} .about__me{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;z-index:1} .about__photo figcaption{position:absolute;left:12px;bottom:10px;color:#fff;z-index:2} .about__title{font-weight:500;font-size:clamp(30px,3.8vw,62px);line-height:1.02;letter-spacing:-.05em;margin:14px 0 clamp(30px,4vw,50px)} .about__box{position:relative;padding:22px 26px;max-width:520px;text-transform:none;font-size:13px;line-height:1.65;display:grid;gap:12px} .about__box .c{position:absolute;width:10px;height:10px;border:0 solid var(--ink)} .c1{left:0;top:0;border-left-width:1px!important;border-top-width:1px!important} .c2{right:0;top:0;border-right-width:1px!important;border-top-width:1px!important} .c3{left:0;bottom:0;border-left-width:1px!important;border-bottom-width:1px!important} .c4{right:0;bottom:0;border-right-width:1px!important;border-bottom-width:1px!important} .about__stats{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(30px,4vw,50px);padding-top:20px;border-top:1px solid var(--line)} .about__stats b{display:block;font-family:var(--f-display);font-weight:900;font-size:clamp(30px,3.6vw,58px);line-height:1;letter-spacing:-.03em} .about__stats span{display:block;color:var(--grey);margin-top:6px} @media (max-width:860px){.about{grid-template-columns:1fr}.about__stats{grid-template-columns:repeat(2,1fr)}} /* LOGOFOLIO */ .logofolio{padding:clamp(70px,9vw,140px) 0;border-top:1px solid var(--line)} .logofolio__grid{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)} .lcell{position:relative;aspect-ratio:3/2;display:grid;place-items:center;padding:clamp(22px,3vw,48px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);cursor:default;overflow:hidden} .lcell:nth-child(5n){border-right:0} .lcell[data-key]{cursor:pointer} .lcell img{max-width:78%;max-height:62%;object-fit:contain;filter:brightness(0);opacity:.85;transition:filter .5s,opacity .5s,transform .7s var(--ease)} .lcell span{position:absolute;left:12px;bottom:10px;font-size:12px;color:var(--grey);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--ease)} .lcell.is-badge img{filter:grayscale(1) contrast(1.15)} .lcell:hover img{filter:none;opacity:1;transform:scale(1.06)} .lcell:hover span{opacity:1;transform:none} .lcell::before{content:"";position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .4s} .lcell:hover::before{opacity:1} /* logos feitos para fundo escuro: no hover o fundo vira preto e o logo aparece com as cores originais */ .lcell.on-dark::before{background:var(--ink)} .lcell.on-dark:hover span{color:rgba(242,241,237,.6)} .lcell>*{position:relative} .lcell span{position:absolute} @media (max-width:900px){.logofolio__grid{grid-template-columns:repeat(3,1fr)}.lcell:nth-child(5n){border-right:1px solid var(--line)}.lcell:nth-child(3n){border-right:0}} @media (max-width:560px){.logofolio__grid{grid-template-columns:repeat(2,1fr)}.lcell:nth-child(3n){border-right:1px solid var(--line)}.lcell:nth-child(2n){border-right:0}} /* CONTATO */ .contact{text-align:center;padding:clamp(100px,13vw,200px) var(--gut) clamp(60px,7vw,100px);border-top:1px solid var(--line);color:var(--grey)} .contact__title{color:var(--ink);font-family:var(--f-display);font-weight:900;font-size:clamp(36px,7vw,124px);line-height:.92;letter-spacing:-.04em;text-transform:uppercase;margin:20px 0 26px} .contact__title .wm{display:inline-block;vertical-align:top} .contact__title .wm>span{display:inline-block;transform-origin:0 100%} .contact__title i{display:inline-block} .contact__mail{display:inline-block;color:var(--ink);font-size:clamp(18px,2.2vw,32px);letter-spacing:-.03em;border-bottom:1px solid currentColor;transition:color .3s} .contact__mail:hover{color:var(--blue)} .contact__row{display:flex;justify-content:center;gap:10px;flex-wrap:nowrap;margin-top:40px;color:var(--ink)} .cbtn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 22px 0 18px;border-radius:99px;border:1px solid rgba(10,10,10,.18);font-size:15px;letter-spacing:-.01em;transition:background .35s,color .35s,border-color .35s} .cbtn svg{width:20px;height:20px} .cbtn i{font-style:normal;display:inline-block;transition:transform .45s var(--ease)} .cbtn:hover{background:var(--ink);color:#F2F1ED;border-color:var(--ink)} .cbtn:hover i{transform:translate(2px,-2px);color:var(--blue)} @media (max-width:560px){.contact__row{gap:6px}.cbtn{height:44px;padding:0 12px;gap:6px;font-size:12.5px}.cbtn svg{width:16px;height:16px}.cbtn i{display:none}} /* RODAPÉ */ .footer{padding:0 var(--gut)} .footer__halftone{display:block;width:100%;height:clamp(90px,14vw,280px);cursor:crosshair} .footer__base{display:flex;justify-content:space-between;gap:20px;padding:14px 0 18px;border-top:1px solid var(--line);color:var(--grey)} .footer__base button:hover{color:var(--ink)} /* PROJETO ABERTO (ref. hochburg): escuro, logo em negativo na capa, texto limpo */ .project{position:fixed;inset:0;z-index:80;background:var(--ink);color:#F2F1ED;clip-path:inset(100% 0 0 0);visibility:hidden} .project__scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain} .project__close{position:fixed;top:16px;right:var(--gut);z-index:5;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(242,241,237,.1);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .3s,transform .5s var(--ease)} .project__close svg{width:20px;height:20px} .project__close:focus{outline:none} .project__close:focus-visible{outline:2px solid #fff;outline-offset:3px} .project__close:hover{background:#F2F1ED;color:var(--ink);transform:rotate(90deg)} .project__hero{position:relative;height:100svh;display:grid;place-items:center;overflow:hidden} .project__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38;transform:scale(1.06)} .project__hero::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(10,10,10,.35),rgba(10,10,10,.1) 40%,rgba(10,10,10,.85))} .project__mark{position:relative;z-index:1;display:grid;place-items:center;padding:0 var(--gut);font-family:var(--f-text);font-weight:600;font-size:clamp(44px,8vw,140px);letter-spacing:-.06em;line-height:.9;text-align:center} /* logo oficial em negativo (branco), como pedido para a página de cada projeto */ .project__mark img{width:auto;max-width:min(560px,62vw);max-height:30svh;filter:brightness(0) invert(1)} .project__mark img.is-neg{filter:none} .project__mark img.is-badge{filter:grayscale(1) invert(1) contrast(1.1)} .project__tags{position:absolute;left:var(--gut);bottom:26px;z-index:1;display:flex;gap:28px;font-size:13px;color:rgba(242,241,237,.6)} .project__tags span:first-child{color:#F2F1ED} .project__count{position:absolute;right:var(--gut);bottom:26px;z-index:1;font-size:13px;color:rgba(242,241,237,.6)} /* depois da capa: detalhes presos à esquerda, imagens numa coluna mais estreita à direita */ .project__body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,5vw,90px);padding:clamp(70px,9vw,130px) var(--gut) 0;align-items:start} .project__info{position:sticky;top:clamp(70px,9vh,110px);display:grid;gap:clamp(30px,4vw,50px)} .project__concept{font-size:clamp(20px,1.8vw,30px);line-height:1.28;letter-spacing:-.03em;font-weight:400} .project__meta{display:grid;gap:20px;align-content:start;font-size:14px;border-top:1px solid rgba(242,241,237,.14);padding-top:22px} .project__meta dt{color:rgba(242,241,237,.45);margin-bottom:4px} .project__colors{display:flex;gap:8px} .project__colors span{width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)} .project__images{display:grid;grid-template-columns:1fr 1fr;gap:8px} .project__images figure{overflow:hidden;background:#151515} .project__images figure.wide{grid-column:1/-1} .project__images img{width:100%;height:auto;transition:transform 1.2s var(--ease)} .project__images figure:hover img{transform:scale(1.03)} /* seções dinâmicas da página do projeto */ .pp-label{display:block;font-size:13px;color:rgba(242,241,237,.5);margin-bottom:18px} .pp-logos,.pp-palette{padding:clamp(80px,10vw,150px) var(--gut) 0} .pp-logos__grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:10px} .pp-lpanel{aspect-ratio:3/2;border-radius:14px;display:grid;place-items:center;padding:clamp(16px,2.4vw,36px);overflow:hidden} .pp-lpanel.is-light{background:#F2F1ED} .pp-lpanel.is-dark{background:#161616} .pp-lpanel img{max-width:78%;max-height:62%;object-fit:contain;transition:transform .8s var(--ease)} .pp-lpanel:hover img{transform:scale(1.06)} /* paleta, estilo 1: faixas verticais na proporção de uso */ .pp-palette__row.is-bars{display:flex;height:clamp(240px,30vw,420px);gap:8px} .is-bars .pp-swatch{flex:var(--w) 1 0;border-radius:14px;transition:flex 1s var(--ease)} .is-bars .pp-swatch:hover{flex-grow:calc(var(--w) * 2.2)} /* estilo 2: cartão com faixas horizontais, como no manual */ .pp-palette__row.is-card{display:flex;flex-direction:column;max-width:680px;margin:0 auto;border-radius:18px;overflow:hidden;height:clamp(380px,48vw,640px)} .is-card .pp-swatch{flex:var(--w) 1 0;border-radius:0} /* estilo 3: círculos */ .pp-palette__row.is-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,4vw,60px)} .pp-dot{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center} .pp-dot i{display:block;width:clamp(110px,14vw,200px);aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)} .pp-dot b{font-weight:500;font-size:15px} .pp-dot span{font-size:12px;color:rgba(242,241,237,.55)} .pp-swatch{display:flex;flex-direction:column;justify-content:space-between;padding:18px 22px;min-height:70px} .pp-swatch__top{display:flex;justify-content:space-between;gap:10px} .pp-swatch__top b{font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase} .pp-swatch__top em{font-style:normal;font-size:13px} .pp-swatch span{font-size:11.5px;line-height:1.5;opacity:.75} .pp-feature{margin:clamp(80px,10vw,150px) 0 0;height:min(90svh,860px);overflow:hidden} .pp-feature img{width:100%;height:100%;object-fit:cover} #project[data-v='1'] .pp-feature{margin-left:var(--gut);margin-right:var(--gut);border-radius:18px} #project[data-v='1'] .pp-grid{columns:2} #project[data-v='2'] .pp-grid{columns:4 200px} @media (max-width:700px){.pp-grid{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;columns:auto!important}.pp-grid figure{margin:0!important}.pp-grid figure:nth-child(3n+1){grid-column:span 2}.pp-grid img{height:100%;object-fit:cover}} .pp-grid{columns:3 260px;column-gap:10px;padding:clamp(80px,10vw,140px) var(--gut) 0} .pp-grid figure{break-inside:avoid;margin-bottom:10px;border-radius:14px;overflow:hidden;background:#151515} .pp-grid img{width:100%;height:auto} .pp-strip{margin-top:clamp(80px,10vw,140px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch} .pp-strip::-webkit-scrollbar{display:none} .pp-strip.is-drag{cursor:grabbing} .pp-strip.is-drag img{pointer-events:none} .pp-strip__track{display:flex;gap:10px;padding:0 var(--gut);width:max-content;align-items:center} .pp-strip__track figure{flex:none;height:min(70svh,620px);border-radius:14px;overflow:hidden;background:#151515} .pp-strip__track img{width:100%;height:100%;object-fit:cover} .project__images figure{border-radius:14px} @media (max-width:700px){.pp-logos__grid{grid-template-columns:1fr 1fr}.pp-logos__grid.is-odd .pp-lpanel:last-child{grid-column:span 2;aspect-ratio:3/1} .pp-palette__row.is-bars{flex-direction:column;height:auto}.is-bars .pp-swatch{min-height:128px;padding:20px 22px}#project[data-v='2'] .pp-grid{columns:2} .pp-feature{height:60svh}.pp-strip__track figure{height:60svh}} .project__more{padding:clamp(80px,10vw,150px) var(--gut) clamp(60px,8vw,110px)} .project__more>span{display:block;font-size:13px;color:rgba(242,241,237,.5);margin-bottom:18px} .project__nextgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px)} .project__nextgrid .gitem{display:block;width:100%;text-align:left} .project__nextgrid .gitem__img img{position:absolute;inset:0} .project__nextgrid:hover .gitem:not(:hover) img{filter:brightness(.7)} @media (max-width:860px){.project__nextgrid{grid-template-columns:repeat(2,1fr)}} @media (max-width:860px){.project__body{grid-template-columns:1fr}.project__info{position:relative;top:0}.project__images{grid-template-columns:1fr}.project__tags{flex-direction:column;gap:2px}} @media (prefers-reduced-motion:reduce){.dot{animation:none}} /* PROJETO: grade bento (vertical ocupa 2 linhas, horizontal larga ocupa as 3 colunas); buracos viram cor ou logo */ .pp-flow{display:grid;gap:clamp(70px,9vw,140px);padding-top:clamp(70px,9vw,140px)} .pp-flow>.pp-logos,.pp-flow>.pp-palette,.pp-flow>.pp-type{padding-top:0} .ppb-bento{--gap:clamp(8px,.8vw,12px);display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-auto-rows:calc((100vw - 2 * var(--gut) - (var(--cols) - 1) * var(--gap) - 12px) / var(--cols) * .78);gap:var(--gap);padding:0 var(--gut)} .ppb-bento .ppf{margin:0;overflow:hidden;border-radius:14px;background:#151515} .ppb-bento .ppf img{width:100%;height:100%;object-fit:cover;display:block} .ppb-tile{border-radius:14px;padding:clamp(14px,1.6vw,24px);display:flex;flex-direction:column;justify-content:space-between;font-size:13px} .ppb-tile b{font-family:var(--f-display);font-weight:900;font-size:clamp(18px,2vw,32px);letter-spacing:-.03em;line-height:1} .ppb-tile span{opacity:.75} .ppb-tile.is-logo{display:grid;place-items:center} .ppb-tile.is-logo.is-light{background:#F2F1ED}.ppb-tile.is-logo.is-dark{background:#161616} .ppb-tile.is-logo img{max-width:62%;max-height:52%;object-fit:contain} .project__images .ppf{margin:0;overflow:hidden;border-radius:14px;background:#151515} .project__images .ppf img{width:100%;height:auto;display:block} #project .pp-logos__grid{perspective:1200px} /* tipografia da marca */ .pp-type{padding:0 var(--gut)} .pp-type__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(8px,.8vw,12px)} .pp-font{background:#141414;border-radius:14px;padding:clamp(20px,3vw,44px);display:grid;gap:clamp(16px,2vw,28px);overflow:hidden} .pp-font__aa{font-size:clamp(110px,15vw,260px);line-height:.85;letter-spacing:-.02em} .pp-font__meta{display:flex;justify-content:space-between;gap:10px;font-size:14px;border-top:1px solid rgba(242,241,237,.14);padding-top:14px} .pp-font__meta span{color:rgba(242,241,237,.5)} .pp-font__abc{font-size:clamp(17px,1.6vw,26px);line-height:1.35;color:rgba(242,241,237,.8);word-break:break-all} /* paletas extra: blocos e leque */ .pp-palette__row.is-fan{position:relative;height:clamp(320px,40vw,560px);display:flex;justify-content:center;align-items:flex-end;padding-bottom:20px} .pp-fan{width:clamp(150px,18vw,260px);aspect-ratio:3/4;margin-left:calc(clamp(150px,18vw,260px) * -.38);border-radius:8px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 30px 60px rgba(0,0,0,.4);transform:rotate(calc((var(--n) - (var(--t) - 1) / 2) * 7deg)) translateY(calc(var(--n) * -8px));transform-origin:50% 120%;transition:transform .6s var(--ease)} .pp-fan:first-child{margin-left:0} .pp-fan:hover{transform:rotate(0) translateY(-40px);z-index:2} .pp-fan b{font-family:var(--f-display);font-weight:700;font-size:clamp(16px,1.6vw,24px);line-height:1;letter-spacing:-.02em} .pp-fan span{font-size:11.5px;line-height:1.5;opacity:.75} .pp-palette__row.is-blocks{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(110px,12vw,190px);gap:10px} .is-blocks .pp-swatch{border-radius:16px} .is-blocks .pp-swatch:first-child{grid-column:span 2;grid-row:span 2} @media (max-width:700px){.pp-palette__row.is-blocks{grid-template-columns:1fr 1fr}.pp-fan{width:120px;margin-left:-60px}.pp-font__aa{font-size:96px}} /* posts da marca: fileira no formato do Instagram, arrastável */ .pp-posts>.pp-label,.pp-videos>.pp-label{padding:0 var(--gut)} .pp-flow>.pp-posts,.pp-flow>.pp-videos{padding-top:0} .pp-posts__row{display:flex;gap:clamp(8px,.8vw,12px);overflow-x:auto;padding:0 var(--gut);scrollbar-width:none;cursor:grab} .pp-posts__row::-webkit-scrollbar{display:none} .pp-posts__row.is-drag{cursor:grabbing}.pp-posts__row.is-drag img{pointer-events:none} .pp-post{flex:none;height:min(62svh,560px);margin:0;border-radius:14px;overflow:hidden;background:#151515} .pp-post img{width:100%;height:100%;object-fit:cover;display:block} /* vídeos do YouTube */ .pp-videos__grid{display:flex;flex-wrap:wrap;gap:clamp(8px,.8vw,12px);padding:0 var(--gut)} .pp-video{position:relative;flex:1 1 560px;max-height:82svh;border-radius:14px;overflow:hidden;background:#000;padding:0} .pp-video.is-vertical{flex:0 1 min(380px,100%)} .pp-video img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85;transition:opacity .4s,transform 1s var(--ease)} .pp-video:hover img{opacity:1;transform:scale(1.03)} .pp-video i{position:absolute;left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;background:rgba(242,241,237,.92);transition:transform .5s var(--ease)} .pp-video i::after{content:"";position:absolute;left:31px;top:25px;border-left:22px solid #0A0A0A;border-top:14px solid transparent;border-bottom:14px solid transparent} .pp-video:hover i{transform:scale(1.1)} .pp-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* grade justificada sem corte (substitui o bento com cortes) */ .ppg{display:grid;gap:var(--g,12px);padding:0 var(--gut);max-width:calc(1600px + 2 * var(--gut));margin:0 auto;width:100%;box-sizing:border-box} .ppg-row,.ppg-combo{display:flex;gap:12px;align-items:stretch} .ppg .ppf{margin:0;min-width:0;border-radius:12px;overflow:hidden;background:transparent} .ppg .ppf img{display:block;width:100%;height:auto} .ppg-row .ppf img{height:100%;object-fit:contain} .ppg-combo.is-flip{flex-direction:row-reverse} .ppg-stack{flex:1;display:grid;gap:12px;align-content:start;min-width:0} .ppg-tall{display:flex;align-items:center} .ppg-tall img{height:100%;object-fit:contain} @media (max-width:700px){.ppg{gap:8px}.ppg-row,.ppg-combo,.ppg-stack{gap:8px}.ppg .ppf{border-radius:10px}} /* logos: faixa compacta, lado a lado, o principal mais largo */ #project .pp-logos__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));grid-auto-flow:dense;gap:10px;perspective:none} #project .pp-lpanel{aspect-ratio:auto;height:clamp(120px,12vw,180px);border-radius:14px;padding:clamp(14px,1.6vw,24px)} #project .pp-lpanel.is-main{grid-column:span 2} #project .pp-lpanel img{max-width:80%;max-height:58%} #project .pp-logos__grid.is-odd .pp-lpanel:last-child{grid-column:auto;aspect-ratio:auto} @media (max-width:700px){#project .pp-logos__grid{grid-template-columns:1fr 1fr}#project .pp-lpanel{height:96px}#project .pp-lpanel.is-main{grid-column:span 2}} /* nada passa da largura da tela */ .pp-flow{grid-template-columns:minmax(0,1fr)} .pp-flow>*{min-width:0} .project__scroll{overflow-x:hidden} @media (max-width:700px){#project .pp-logos__grid:not(.is-odd) .pp-lpanel.is-main{grid-column:auto}} /* posts: carrossel que para em cada post, com setas, pontos e contador */ .pp-posts__row{scroll-snap-type:x mandatory;scroll-padding:0 var(--gut)} .pp-post{scroll-snap-align:start} .pp-posts__row.is-drag{scroll-snap-type:none} .pp-posts__nav{display:flex;align-items:center;gap:16px;padding:18px var(--gut) 0} .pp-nav{width:44px;height:44px;border-radius:50%;border:1px solid rgba(242,241,237,.25);color:#F2F1ED;font-size:18px;transition:background .3s,color .3s} .pp-nav:hover{background:#F2F1ED;color:#0A0A0A} .pp-posts__dots{flex:1;display:flex;gap:6px;flex-wrap:wrap} .pp-posts__dots i{width:8px;height:8px;border-radius:99px;background:rgba(242,241,237,.25);cursor:pointer;transition:width .4s var(--ease),background .4s} .pp-posts__dots i.on{width:26px;background:#F2F1ED} .pp-posts__count{font-size:13px;color:rgba(242,241,237,.55);font-variant-numeric:tabular-nums} @media (max-width:700px){.pp-post{height:auto;width:80vw}.pp-post img{height:auto}.pp-posts__row{scroll-snap-type:x mandatory}.pp-posts__dots{justify-content:center}.pp-nav{width:40px;height:40px}} /* paleta com muitas cores: mosaico 6×, o primeiro bloco grande, cada um cresce ao passar o mouse */ .pp-palette__row.is-many{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(110px,10vw,170px)} .is-many .pp-swatch{transition:transform .5s var(--ease),box-shadow .5s;cursor:default} .is-many .pp-swatch:hover{transform:scale(1.06);z-index:2;box-shadow:0 20px 50px rgba(0,0,0,.45)} @media (max-width:700px){.pp-palette__row.is-many{grid-template-columns:repeat(3,1fr);grid-auto-rows:92px}.is-many .pp-swatch{padding:10px 12px}.is-many .pp-swatch span{font-size:10px}} .pp-posts__row{align-items:flex-start} /* seções vindas das subpastas */ .pp-sec>.pp-label{display:block;padding:0 var(--gut);font-family:var(--f-display);font-weight:900;font-size:clamp(22px,2.6vw,40px);letter-spacing:-.03em;text-transform:uppercase;color:#F2F1ED;margin-bottom:clamp(16px,2vw,28px)} /* imagens ao lado do texto: uma linha justificada, sem esticar nem cortar */ #project .project__images{display:block} #project .project__images .ppg-row .ppf{background:transparent} #project .project__images .ppg-row .ppf img{width:100%;height:auto} /* logo centralizado pelo peso do desenho (o deslocamento vem da exportação) */ #project .pp-lmark{display:grid;place-items:center;width:100%;height:100%} #project .pp-lmark img{max-width:80%;max-height:58%;object-fit:contain} /* paleta nunca passa da tela: colunas podem encolher, o texto se ajusta */ #project .pp-palette__row.is-blocks{grid-template-columns:repeat(4,minmax(0,1fr))} #project .pp-palette__row.is-many{grid-template-columns:repeat(6,minmax(0,1fr))} #project .pp-swatch{min-width:0;overflow:hidden} #project .pp-swatch b,#project .pp-swatch span,#project .pp-swatch em{overflow-wrap:anywhere} #project .pp-palette{overflow:hidden} @media (max-width:700px){ #project .pp-palette__row.is-blocks{grid-template-columns:repeat(2,minmax(0,1fr))} #project .pp-palette__row.is-many{grid-template-columns:repeat(3,minmax(0,1fr))} #project .is-many .pp-swatch:first-child{grid-column:span 3;grid-row:span 1} #project .pp-swatch__top b{font-size:11px}#project .pp-swatch span{font-size:10px} } @media (max-width:700px){#project .is-many .pp-swatch:first-child{grid-column:auto}} /* área do logo presa ao quadro (margem igual nos 4 lados); o logo cabe inteiro e centralizado */ #project .pp-lpanel{position:relative;display:block} #project .pp-lmark{position:absolute;inset:22% 12%;width:auto;height:auto;display:flex;align-items:center;justify-content:center} #project .pp-lmark img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} /* seção em linha única que corre com a rolagem */ .pp-line{overflow:hidden;padding:0 var(--gut)} .pp-line__track{display:flex;gap:12px;width:max-content;will-change:transform} .pp-line__track .ppf{flex:none;height:min(52svh,520px);margin:0;border-radius:12px;overflow:hidden} .pp-line__track .ppf img{width:100%;height:100%;object-fit:contain;display:block} @media (max-width:700px){.pp-line__track{gap:8px}.pp-line__track .ppf{height:46svh}} /* logo que é um bloco cheio (ex.: degradê): ocupa o quadro todo */ #project .pp-lpanel.is-fill{padding:0;overflow:hidden} #project .pp-lpanel.is-fill .pp-lmark{inset:0} #project .pp-lpanel.is-fill .pp-lmark img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover} /* paleta no formato do emblema: grade quadrada, principais 2×2 */ #project .pp-palette__row.is-shape{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:auto;grid-auto-flow:dense;gap:12px} #project .pp-shape{aspect-ratio:1;border-radius:0;padding:clamp(12px,1.4vw,22px)} #project .pp-shape.is-pri{grid-column:span 2;grid-row:span 2} #project .shape-chanfro .pp-shape{clip-path:polygon(24% 0,100% 0,100% 76%,76% 100%,0 100%,0 24%);padding-left:clamp(18px,2.4vw,40px)} #project .shape-chanfro .pp-shape .pp-swatch__top{padding-left:12%} #project .pp-shape em{font-style:normal;font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.7} @media (max-width:700px){#project .pp-palette__row.is-shape{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}#project .pp-shape.is-pri{grid-column:span 3;grid-row:span 1;aspect-ratio:3/1.2}} /* tipografia compacta: 3 colunas (2 no celular), só uma amostra */ #project .pp-type__grid{grid-template-columns:repeat(3,minmax(0,1fr))} #project .pp-font{padding:clamp(16px,2vw,28px);gap:14px} #project .pp-font__aa{font-size:clamp(64px,7vw,120px)} #project .pp-font__abc{font-size:clamp(16px,1.5vw,22px);word-break:normal} @media (max-width:700px){#project .pp-type__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#project .pp-font{padding:14px}#project .pp-font__aa{font-size:56px}#project .pp-font__meta{flex-direction:column;gap:2px;font-size:12px}#project .pp-font__abc{font-size:14px}} @media (max-width:700px){ /* logos: o principal ocupa a linha; se sobrar um, ele também ocupa (sem buraco) */ #project .pp-logos__grid .pp-lpanel.is-main,#project .pp-logos__grid:not(.is-odd) .pp-lpanel.is-main,#project .pp-logos__grid .pp-lpanel.is-wide{grid-column:span 2} /* posts: todos com a mesma altura (a do post de feed); stories ficam mais estreitos */ #project .pp-post{height:calc(78vw * 1.25);width:auto} #project .pp-post img{height:100%;width:auto} /* paleta: regra para todos no celular, grade compacta de 3 colunas */ #project .pp-palette__row.is-bars,#project .pp-palette__row.is-card,#project .pp-palette__row.is-blocks,#project .pp-palette__row.is-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:96px;gap:8px;height:auto;max-width:none;border-radius:0} #project .pp-palette__row.is-bars .pp-swatch,#project .pp-palette__row.is-card .pp-swatch,#project .pp-palette__row.is-blocks .pp-swatch{min-height:0;height:auto;padding:10px 12px;border-radius:12px;grid-column:auto;grid-row:auto} #project .pp-palette__row.is-dots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px} #project .pp-dot i{width:72px} #project .pp-palette__row.is-fan{height:260px} } /* tipografia: sempre 2 colunas */ #project .pp-type__grid{grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:700px){#project .pp-swatch__top{flex-direction:column;gap:2px}#project .pp-swatch__top b{overflow-wrap:normal;word-break:normal;hyphens:auto}#project .pp-swatch__top em{font-size:11px;opacity:.75}} /* logos: número de colunas calculado para fechar a grade (computador) */ @media (min-width:701px){#project .pp-logos__grid{grid-template-columns:repeat(var(--lcols,4),minmax(0,1fr))}} /* paleta em forma: faixa das principais e faixa de apoio, sempre ocupando a largura toda */ #project .pp-palette__row.is-shape{display:grid;grid-template-columns:none;gap:12px} #project .pp-shape__band{display:flex;gap:12px} #project .pp-shape__band .pp-shape{flex:1 1 0;aspect-ratio:1;grid-column:auto;grid-row:auto;min-width:0} #project .pp-shape__band.is-pri .pp-shape{aspect-ratio:4/3} @media (max-width:700px){#project .pp-shape__band{flex-wrap:wrap;gap:8px}#project .pp-shape__band .pp-shape{flex:1 1 28%;aspect-ratio:1}#project .pp-shape__band.is-pri .pp-shape{flex:1 1 100%;aspect-ratio:3/1.3}} #project .pp-rgb{font-style:normal} @media (max-width:700px){ #project .pp-shape__band:not(.is-pri) .pp-shape{flex:1 1 22%;aspect-ratio:auto;height:92px;padding:10px 10px 10px 16px} #project .pp-shape__band:not(.is-pri) .pp-rgb,#project .pp-shape__band:not(.is-pri) em{display:none} #project .pp-shape__band:not(.is-pri) .pp-swatch__top b{font-size:10px} } /* blocos chanfrados: nome em cima à direita, tipo + HEX embaixo à esquerda (longe dos cortes) */ #project .pp-shape{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(12px,1.4vw,22px)!important;overflow:hidden} #project .pp-shape__nm{align-self:flex-end;text-align:right;font-weight:600;font-size:clamp(11px,1vw,14px);letter-spacing:.06em;text-transform:uppercase;max-width:72%;line-height:1.15} #project .pp-shape__info{max-width:72%;display:grid;gap:4px;font-size:clamp(10px,.85vw,12px);line-height:1.35} #project .pp-shape__info em{font-style:normal;text-transform:uppercase;letter-spacing:.08em;opacity:.7;font-size:10px} #project .pp-shape__band.is-pri .pp-shape{aspect-ratio:16/9} @media (max-width:700px){ #project .pp-shape__band.is-pri .pp-shape{aspect-ratio:auto;height:110px} #project .pp-shape__band:not(.is-pri) .pp-shape{height:84px;padding:8px!important} #project .pp-shape__band:not(.is-pri) .pp-shape__nm{font-size:9px;max-width:80%} #project .pp-shape__band:not(.is-pri) .pp-shape__info{font-size:9px;max-width:80%} #project .pp-shape__band:not(.is-pri) .pp-shape__info em,#project .pp-shape__band:not(.is-pri) .pp-rgb{display:none} } @media (min-width:701px){#project .pp-palette__row.is-many{grid-template-columns:repeat(var(--pcols,6),minmax(0,1fr))}} /* sem seleção de texto ao passar/arrastar o mouse (pedido do Cassyano) */ html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} img{-webkit-user-drag:none;user-drag:none} input,textarea{-webkit-user-select:text;user-select:text} /* cursor sempre pequeno: nada de bola grande sobre links, botões ou menu */ .cursor.is-hover .cursor__dot,.cursor.is-label .cursor__dot{width:10px;height:10px;margin:-5px 0 0 -5px;background:#fff;mix-blend-mode:difference} /* logofolio: versão colorida por cima, aparece no hover */ .lcell .lcell__color{position:absolute;left:50%;top:50%;translate:-50% -50%;max-width:78%;max-height:62%;object-fit:contain;filter:none;opacity:0;transition:opacity .5s,transform .7s var(--ease)} .lcell.has-color:hover img:not(.lcell__color){opacity:0} .lcell.has-color:hover .lcell__color{opacity:1;transform:scale(1.06)} /* seções em linha: carrossel parado, que se passa pelas setas, pontos, arrastando ou com o dedo */ .pp-line.pp-car__row{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);cursor:grab} .pp-line.pp-car__row::-webkit-scrollbar{display:none} .pp-line.pp-car__row.is-drag{scroll-snap-type:none;cursor:grabbing} .pp-line.pp-car__row.is-drag img{pointer-events:none} .pp-line .pp-car__item{scroll-snap-align:start} .pp-line .pp-line__track{will-change:auto} /* cores + tipografia numa linha só */ #project .pp-ct{display:grid;grid-template-columns:minmax(0,2.2fr) repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;gap:10px;align-items:stretch} #project .pp-ct__font{min-width:0} #project .pp-ct__sw{border-radius:14px;min-width:0;min-height:0;height:auto} @media (max-width:700px){#project .pp-ct{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}#project .pp-ct__font{grid-column:1/-1}#project .pp-ct__sw{height:96px;padding:10px 12px}#project .pp-ct__sw .pp-rgb{display:none}} /* paleta em cartão + tipografia (ou imagens) lado a lado: sem sobra nas laterais */ #project .pp-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(10px,1vw,14px);padding:0 var(--gut);align-items:stretch} #project .pp-duo>.pp-palette,#project .pp-duo>.pp-type{padding:0} #project .pp-duo .pp-palette__row.is-card{max-width:none;margin:0;height:100%;min-height:clamp(360px,36vw,560px)} #project .pp-duo .pp-type__grid{grid-template-columns:1fr;height:calc(100% - 34px)} #project .pp-duo__imgs{display:grid;gap:clamp(10px,1vw,14px);align-content:start} #project .pp-duo__imgs .ppf{margin:0;border-radius:14px;overflow:hidden} #project .pp-duo__imgs .ppf img{width:100%;height:auto;display:block} @media (max-width:700px){#project .pp-duo{grid-template-columns:1fr}#project .pp-duo .pp-palette__row.is-card{min-height:0}} /* cores nunca com espaço vazio no celular: blocos que crescem para fechar a linha */ @media (max-width:700px){ #project .pp-ct,#project .pp-palette__row.is-bars,#project .pp-palette__row.is-card,#project .pp-palette__row.is-blocks{display:flex!important;flex-wrap:wrap;gap:8px} #project .pp-ct .pp-ct__font{flex:1 1 100%} #project .pp-ct .pp-ct__sw,#project .pp-palette__row.is-bars .pp-swatch,#project .pp-palette__row.is-card .pp-swatch,#project .pp-palette__row.is-blocks .pp-swatch{flex:1 1 40%;height:96px} /* logos: o principal (e o último, se sobrar) ocupam a linha toda */ #project #ppLogosGrid .pp-lpanel.is-main,#project #ppLogosGrid .pp-lpanel.is-wide{grid-column:1 / -1} } /* pontinhos dos carrosséis numa linha só */ .pp-posts__dots{flex-wrap:nowrap;overflow:hidden} .pp-posts__dots i[hidden]{display:none} /* próximos projetos: 6 no computador, 3 no celular */ .project__nextgrid{grid-template-columns:repeat(6,minmax(0,1fr))} @media (max-width:860px){.project__nextgrid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:700px){.project__nextgrid{gap:8px}.project__nextgrid .gitem__cap b{font-size:11px}.project__nextgrid .gitem__cap span{display:none}} /* contato: botões com respiro, sem encostar nas laterais */ .contact__row{flex-wrap:wrap;gap:12px;max-width:640px;margin-left:auto;margin-right:auto} @media (max-width:560px){.contact__row{gap:8px;padding:0 4px}.cbtn{height:46px;padding:0 16px;font-size:13px}.cbtn i{display:inline-block}} /* rodapé em uma linha no celular */ @media (max-width:560px){.footer__base{font-size:11px;white-space:nowrap;gap:10px}.footer__slogan{display:none}} /* SITES (página inicial): janela de navegador com a página do site; no hover a página rola */ .sites{padding:clamp(80px,10vw,150px) var(--gut) clamp(60px,8vw,120px);border-top:1px solid var(--line)} .sites__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,56px)} .sites__lead{max-width:34ch;color:var(--grey);font-size:15px;line-height:1.5} .sites__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)} .scard{cursor:pointer} .scard__img{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:var(--soft);display:grid;padding:clamp(18px,3vw,44px) clamp(18px,3vw,44px) 0} .scard__img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)} .scard:hover .scard__img>img{transform:scale(1.04)} .bwin{position:relative;width:100%;height:100%;border-radius:10px 10px 0 0;overflow:hidden;background:#fff;box-shadow:0 30px 60px -20px rgba(0,0,0,.35);transition:transform .9s var(--ease)} .bwin__bar{display:flex;gap:6px;align-items:center;height:26px;padding:0 12px;background:#EDECE8;border-bottom:1px solid rgba(0,0,0,.06)} .bwin__bar i{flex:none;width:8px;height:8px;border-radius:50%;background:#CFCDC6} .bwin__bar span{margin-left:10px;font-size:11px;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bwin__view{position:absolute;inset:26px 0 0;overflow:hidden} .bwin__view img{width:100%;height:auto;max-width:none;transition:transform 2.6s cubic-bezier(.45,0,.2,1)} .scard:hover .bwin{transform:translateY(-6px)} .scard:hover .bwin__view img,.pp-site:hover .bwin__view img{transform:translateY(-40%)} .scard__info{display:flex;align-items:center;gap:14px;padding:14px 4px 0} .scard__info b{font-weight:600;font-size:16px} .scard__info span{color:var(--grey);font-size:14px} .scard__go{margin-left:auto;padding:9px 16px;border-radius:99px;border:1px solid var(--line);font-size:13px;white-space:nowrap;transition:background .3s,color .3s} .scard__go:hover{background:var(--ink);color:#F2F1ED} @media (max-width:700px){.sites__grid{grid-template-columns:1fr}.scard__info{flex-wrap:wrap;gap:6px 12px}} /* DESTAQUE DO SITE no projeto de identidade: caixa clara, a página do site rolando e dois botões */ .pp-site{margin:0 var(--gut);border-radius:clamp(18px,2vw,28px);background:#F2F1ED;color:var(--ink);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(24px,4vw,64px);padding:clamp(26px,4vw,64px);overflow:hidden} .pp-site__txt{display:grid;gap:18px;justify-items:start} .pp-site__txt .pp-label{color:var(--grey);margin:0} .pp-site__txt h3{font-family:var(--f-display);font-weight:900;font-size:clamp(28px,3.4vw,56px);letter-spacing:-.03em;line-height:.98} .pp-site__txt p{color:#55544F;font-size:15px} .pp-site__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px} .sbtn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:99px;font:inherit;font-weight:600;font-size:15px;transition:transform .4s var(--ease),background .3s,color .3s;cursor:pointer;border:1px solid var(--ink)} .sbtn--dark{background:var(--ink);color:#F2F1ED} .sbtn--line{background:transparent;color:var(--ink)} .sbtn:hover{transform:translateY(-2px)} .sbtn--line:hover{background:var(--ink);color:#F2F1ED} .pp-site__win{aspect-ratio:16/10;cursor:pointer;border-radius:10px;overflow:hidden} .pp-site__win .bwin{border-radius:10px} @media (max-width:700px){.pp-site{grid-template-columns:1fr}} /* PÁGINA DE SITE */ .sp{position:fixed;inset:0;z-index:81;background:#0A0A0A;color:#F2F1ED;clip-path:inset(100% 0 0 0);visibility:hidden} .sp__scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain} .sp__stage{position:relative;height:340svh} .sp__sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-rows:auto 1fr;justify-items:center} .sp__head{display:grid;justify-items:center;gap:14px;text-align:center;padding:clamp(64px,9svh,110px) var(--gut) 0;z-index:2} .sp__kicker{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:#9A9993} .sp__kicker i{width:4px;height:4px;border-radius:50%;background:currentColor} .sp__kicker b{font-weight:500;color:#F2F1ED} .sp__name{font-family:var(--f-display);font-weight:900;font-size:clamp(34px,6vw,104px);letter-spacing:-.04em;line-height:.92} .sp__btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:99px;background:#F2F1ED;color:#0A0A0A;font-weight:600;font-size:15px;transition:transform .4s var(--ease),background .3s} .sp__btn:hover{transform:translateY(-2px);background:#fff} .sp__device{position:relative;width:100%;display:grid;place-items:center;align-content:center;perspective:2400px;perspective-origin:50% 10%} .sp__hint{position:absolute;bottom:22px;left:50%;translate:-50% 0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#6E6D68} /* notebook em CSS 3D: a tampa gira na dobradiça */ .lap{--w:min(70vw,980px,calc((100svh - 420px) * 1.5));position:relative;width:var(--w);transform-style:preserve-3d;transform-origin:50% 100%} .lap__lid{position:relative;width:100%;aspect-ratio:16/10.6;transform-style:preserve-3d;transform-origin:50% 100%} .lap__front,.lap__back{position:absolute;inset:0;border-radius:calc(var(--w) * .024) calc(var(--w) * .024) 3px 3px;backface-visibility:hidden;-webkit-backface-visibility:hidden} .lap__front{background:#0d0d0d;box-shadow:inset 0 0 0 1px #2e2e2e,inset 0 0 0 3px #050505;padding:calc(var(--w) * .021) calc(var(--w) * .021) calc(var(--w) * .028)} .lap__back{transform:rotateY(180deg);background:linear-gradient(160deg,#d3d4d6,#a7a9ac 55%,#8b8d90)} .lap__cam{position:absolute;top:calc(var(--w) * .008);left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#232323} .lap__screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:2px;background:#fff} .lap__screen img,.ph__screen img{width:100%;height:auto;max-width:none;will-change:transform} .lap__base{position:absolute;left:-4%;top:100%;width:108%;height:calc(var(--w) * .6);transform-origin:50% 0;transform:rotateX(90deg);transform-style:preserve-3d;border-radius:4px 4px calc(var(--w) * .03) calc(var(--w) * .03);background:linear-gradient(180deg,#bfc1c4,#d9dadc 30%,#c9cbce)} .lap__keys{position:absolute;left:9%;right:9%;top:7%;height:44%;border-radius:6px;background:repeating-linear-gradient(90deg,#1b1b1c 0 calc(6.6% - 2px),transparent 0 6.6%),repeating-linear-gradient(180deg,#1b1b1c 0 calc(16.6% - 2px),transparent 0 16.6%);opacity:.9} .lap__pad{position:absolute;left:33%;right:33%;top:57%;height:32%;border-radius:8px;background:#c4c6c9;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)} .lap__lip{position:absolute;left:0;right:0;bottom:0;height:calc(var(--w) * .022);transform-origin:50% 100%;transform:rotateX(-90deg);border-radius:0 0 calc(var(--w) * .03) calc(var(--w) * .03);background:linear-gradient(#cfd0d2,#8d8f92)} .lap__lip::before{content:"";position:absolute;left:50%;top:0;width:14%;height:45%;translate:-50% 0;border-radius:0 0 8px 8px;background:#8f9194} .lap__shadow{position:absolute;left:-6%;right:-6%;top:100%;height:40px;margin-top:-6px;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.75),transparent);filter:blur(8px)} /* celular */ .ph{--pw:min(70vw,300px,calc((100svh - 300px) * .47));display:none;position:relative;width:var(--pw);aspect-ratio:9/19.3;border-radius:calc(var(--pw) * .16);background:#121212;padding:calc(var(--pw) * .035);box-shadow:inset 0 0 0 2px #2e2e2e,0 50px 90px -20px rgba(0,0,0,.9)} .ph__screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(var(--pw) * .13);background:#fff} .ph__island{position:absolute;top:calc(var(--pw) * .065);left:50%;width:30%;height:calc(var(--pw) * .075);translate:-50% 0;border-radius:99px;background:#000} @media (max-width:700px){.lap{display:none}.ph{display:block}.sp__stage{height:280svh}} /* mockups, fechamento e outros sites */ .sp__mocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);padding:0 var(--gut)} .sp__mocks:empty{display:none} .sp__mocks figure{margin:0;border-radius:14px;overflow:hidden;background:#151515} .sp__mocks figure.is-wide{grid-column:1/-1} .sp__mocks img{width:100%;height:auto} @media (max-width:700px){.sp__mocks{grid-template-columns:1fr}} .sp__end{display:grid;justify-items:center;gap:22px;text-align:center;padding:clamp(90px,12vw,180px) var(--gut)} .sp__end h3{font-family:var(--f-display);font-weight:900;font-size:clamp(24px,5vw,84px);letter-spacing:-.04em;line-height:.95;overflow-wrap:anywhere} .sp__end .pp-label{color:#9A9993} .sp__end-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .sp__end .sbtn--line{color:#F2F1ED;border-color:rgba(242,241,237,.4)} .sp__end .sbtn--line:hover{background:#F2F1ED;color:#0A0A0A} .sp__end .sbtn--dark{background:#F2F1ED;color:#0A0A0A;border-color:#F2F1ED} .sp__more{padding:0 var(--gut) clamp(60px,8vw,110px);display:grid;gap:18px} .sp__more>span{font-size:13px;color:#9A9993} .sp__others{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px} .sp__other{display:grid;gap:10px;text-align:left;color:#F2F1ED;cursor:pointer;background:none;border:0;font:inherit;padding:0} .sp__other .bwin{aspect-ratio:16/10;border-radius:10px} .sp__other:hover .bwin__view img{transform:translateY(-30%)} .sp__other b{font-weight:500;font-size:14px} /* sites: só a janela de navegador, sem a moldura clara em volta; 2 colunas também no celular */ .scard__img{padding:0;background:none;border-radius:10px;aspect-ratio:16/10.6} .scard__img .bwin{border-radius:10px;box-shadow:0 20px 50px -24px rgba(0,0,0,.35)} @media (max-width:700px){ .sites__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px} .scard__img{aspect-ratio:10/12} .bwin__bar{height:18px;padding:0 8px;gap:4px}.bwin__bar i{width:5px;height:5px}.bwin__bar span{display:none} .bwin__view{inset:18px 0 0} .scard__info{flex-wrap:wrap;gap:2px 8px;padding:8px 2px 0} .scard__info b{font-size:12.5px;line-height:1.2;width:100%} .scard__info span{display:none} .scard__go{font-size:12px;padding:6px 10px;margin-top:6px} } /* página de site: fundo do topo com a home do site desfocada, em degradê de cima para baixo */ .sp__blur{position:absolute;left:-6%;right:-6%;top:-4%;height:78%;z-index:0;pointer-events:none;background:center top/cover no-repeat;filter:blur(34px) saturate(1.15) brightness(.62);opacity:.9;-webkit-mask-image:linear-gradient(#000 0%,rgba(0,0,0,.65) 45%,transparent 100%);mask-image:linear-gradient(#000 0%,rgba(0,0,0,.65) 45%,transparent 100%)} .sp__sticky>*:not(.sp__blur){position:relative;z-index:1} /* sites no celular: todos os nomes numa linha só, do mesmo tamanho */ @media (max-width:700px){.scard__info b{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%}} /* barra do navegador com o topo do site desfocado por trás */ .bwin__bar{position:relative;overflow:hidden;background:#141414;border-bottom:0;z-index:1} .bwin__bar::before{content:"";position:absolute;inset:-12px;background:var(--shot,none) center top/cover no-repeat;filter:blur(12px) saturate(1.2) brightness(.55);z-index:-1} .bwin__bar i{background:rgba(255,255,255,.55)} .bwin__bar span{color:rgba(255,255,255,.85)} /* botão "Abrir site" no celular: largura do cartão, centralizado */ @media (max-width:700px){ .scard__info{display:grid;grid-template-columns:minmax(0,1fr);gap:8px} .scard__go{display:flex;justify-content:center;align-items:center;gap:6px;width:100%;margin:0!important;height:34px;padding:0 10px;border-radius:99px;background:var(--ink);color:#F2F1ED;border:0;font-size:12px} .scard__go i{font-style:normal} } /* barra: mesma cor/desfoque do fundo da página do site (primeira dobra, não só o menu) */ .bwin__bar::before{inset:-30px;background:var(--shot,none) center 18%/120% auto no-repeat;filter:blur(18px) saturate(1.35) brightness(.85)} /* página de site: o aparelho fica no meio da tela; o botão "Entrar no site" fica logo abaixo dele */ .sp__sticky{display:block} .sp__sticky>.sp__head{position:absolute;top:0;left:0;right:0} .sp__sticky>.sp__device{position:absolute;inset:0;display:grid;place-items:center;perspective:none} .sp__sticky>.sp__hint{position:absolute} .sp__rig{display:flex;flex-direction:column;align-items:center;gap:clamp(22px,4svh,40px);perspective:2400px;perspective-origin:50% 10%;will-change:transform} .lap{--w:min(70vw,980px,calc((100svh - 230px) * 1.45))} .ph{--pw:min(66vw,300px,calc((100svh - 200px) * .47))} .sp__btn{padding:11px 20px;font-size:13px;gap:8px} /* outros sites: miniaturas pequenas com a home e o nome numa linha */ .sp__others{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1vw,14px)} .sp__other{gap:8px} .sp__thumb{position:relative;display:block;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#1a1a1a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)} .sp__thumb img{width:100%;height:auto;max-width:none;transition:transform 1.8s cubic-bezier(.45,0,.2,1)} .sp__other:hover .sp__thumb img{transform:translateY(-25%)} .sp__others:hover .sp__other:not(:hover) .sp__thumb{opacity:.6} .sp__other b{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(242,241,237,.8)} @media (max-width:700px){.sp__others{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.sp__other b{font-size:10.5px}} /* sites: sem botão "Abrir site" (o cartão já abre a página do site) */ .scard__go{display:none!important} @media (min-width:701px){.sites__grid{grid-template-columns:repeat(3,minmax(0,1fr))}} /* 3 colunas no computador sem sobra: com 7 (ou 4, 10…) sites, a 1ª linha leva 4 */ @media (min-width:701px){ .sites__grid{grid-template-columns:repeat(12,minmax(0,1fr))} .sites__grid>.scard{grid-column:span 4} .sites__grid:has(>.scard:nth-child(3n+1):last-child)>.scard:nth-child(-n+4){grid-column:span 3} .sites__grid:has(>.scard:nth-child(3n+2):last-child)>.scard:nth-last-child(-n+2){grid-column:span 6} } .ph{height:calc(var(--pw) * 19.3 / 9);aspect-ratio:auto;flex:none} .ph__screen{min-height:0} /* notebook mais trabalhado: aro de alumínio, notch, deck com teclado real, trackpad de vidro, alto-falantes, dobradiça e lábio */ .lap__front{background:#0b0b0b;box-shadow:inset 0 0 0 1px #3a3b3d,inset 0 0 0 2px #0a0a0a,inset 0 0 0 3px #1c1c1c;padding:calc(var(--w) * .018) calc(var(--w) * .018) calc(var(--w) * .026)} .lap__front::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.06),transparent 30%,transparent 70%,rgba(255,255,255,.03))} .lap__cam{display:none} .lap__notch{position:absolute;top:0;left:50%;width:calc(var(--w) * .09);height:calc(var(--w) * .013);translate:-50% 0;border-radius:0 0 calc(var(--w) * .006) calc(var(--w) * .006);background:#0b0b0b;z-index:2} .lap__notch::after{content:"";position:absolute;left:50%;top:40%;width:calc(var(--w) * .005);height:calc(var(--w) * .005);translate:-50% -50%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2b3a66,#0a1030 60%,#000)} .lap__screen{border-radius:calc(var(--w) * .01) calc(var(--w) * .01) 3px 3px} .lap__back{background:linear-gradient(165deg,#e2e3e5,#b8babd 48%,#9a9ca0);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -2px 6px rgba(0,0,0,.18)} .lap__base{left:-3.5%;width:107%;height:calc(var(--w) * .62);border-radius:3px 3px calc(var(--w) * .032) calc(var(--w) * .032);background:linear-gradient(180deg,#b4b6b9,#d6d7d9 18%,#d0d1d4 70%,#c2c4c7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.12)} .lap__hinge{position:absolute;left:3%;right:3%;top:0;height:calc(var(--w) * .022);border-radius:0 0 6px 6px;background:linear-gradient(#141414,#2a2a2b 60%,#0f0f0f);box-shadow:0 2px 4px rgba(0,0,0,.25)} .lap__hinge::before,.lap__hinge::after{content:"";position:absolute;top:0;bottom:0;width:4%;background:linear-gradient(#9b9d9f,#6c6e71)} .lap__hinge::before{left:0}.lap__hinge::after{right:0} .lap__spk{position:absolute;top:9%;height:44%;width:3.6%;border-radius:4px;background:radial-gradient(circle,#8d8f92 0.9px,transparent 1.1px) 0 0/5px 5px;opacity:.85} .lap__spk--l{left:4.6%}.lap__spk--r{right:4.6%} .lap__keys{position:absolute;left:10.5%;right:10.5%;top:7.5%;height:46%;border-radius:7px;background:#b5b7ba;box-shadow:inset 0 1px 3px rgba(0,0,0,.28),inset 0 0 0 1px rgba(0,0,0,.08);display:grid;grid-template-rows:.62fr repeat(5,1fr);gap:0;padding:1.4% 1%;opacity:1} .lap__keys i{display:block;border-radius:3px;background:repeating-linear-gradient(90deg,#1c1c1d 0 calc(100% / 14 - 3px),transparent 0 calc(100% / 14));background-clip:content-box;padding:2px 0} .lap__keys i:nth-child(2){background:repeating-linear-gradient(90deg,#1c1c1d 0 calc(100% / 13 - 3px),transparent 0 calc(100% / 13))} .lap__keys i.lap__space{background:linear-gradient(90deg,#1c1c1d 0 7%,transparent 0 8%,#1c1c1d 0 15%,transparent 0 16%,#1c1c1d 0 23%,transparent 0 24%,#1c1c1d 0 72%,transparent 0 73%,#1c1c1d 0 80%,transparent 0 81%,#1c1c1d 0 100%);background-clip:content-box} .lap__pad{left:34%;right:34%;top:59%;height:33%;border-radius:9px;background:linear-gradient(180deg,#cfd1d4,#c6c8cb);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px rgba(255,255,255,.25)} .lap__lip{height:calc(var(--w) * .024);background:linear-gradient(#d9dadc,#a9abae 55%,#7e8083);box-shadow:inset 0 -1px 0 rgba(0,0,0,.35)} .lap__lip::before{width:13%;height:52%;border-radius:0 0 10px 10px;background:linear-gradient(#8a8c8f,#6d6f72);box-shadow:inset 0 2px 3px rgba(0,0,0,.3)} .lap__lip::after{content:"";position:absolute;left:8%;right:8%;bottom:-2px;height:4px;border-radius:2px;background:#1b1b1b;opacity:.9} /* celular: barra de status desfocada atrás da ilha; a página começa abaixo dela e rola por baixo */ .ph__screen{--bar:calc(var(--pw) * .15)} .ph__screen::before{content:"";position:absolute;inset:0 0 auto;height:var(--bar);z-index:1;background:rgba(10,10,10,.45);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)} .ph__screen img{margin-top:var(--bar)} .ph__island{z-index:2} /* barra de status do celular em degradê: escura e desfocada em cima, some para baixo */ .ph__screen::before{height:calc(var(--bar) * 1.5);background:linear-gradient(rgba(10,10,10,.6),rgba(10,10,10,0));-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)} @media (max-width:700px){.sp__rig{perspective-origin:50% 30%}} /* a página ocupa a tela do celular desde o topo; só o degradê desfocado fica atrás da ilha */ .ph__screen img{margin-top:0} /* fechamento da página de site: galeria diagonal das telas do site em movimento */ .sp__end{position:relative;overflow:hidden;min-height:min(100svh,900px);place-content:center;isolation:isolate} .sp__mq{position:absolute;inset:0;z-index:-1;overflow:hidden} .sp__mq-rot{position:absolute;left:50%;top:50%;width:220vw;display:flex;flex-direction:column;gap:clamp(12px,1.6vw,24px);transform:translate(-50%,-50%) rotate(-16deg)} .sp__mq-row{display:flex;overflow:hidden} .sp__mq-track{display:flex;flex:none;animation:sp-mq-l var(--dur) linear infinite} .sp__mq-track.is-r{animation-name:sp-mq-r} .sp__mq-set{display:flex;flex:none;gap:clamp(12px,1.6vw,24px);padding-right:clamp(12px,1.6vw,24px)} .sp__mq-card{flex:none;width:clamp(200px,24vw,380px);aspect-ratio:16/10;margin:0;border-radius:12px;overflow:hidden;background:#151515} .sp__mq-card img{width:100%;height:100%;object-fit:cover;object-position:top} @keyframes sp-mq-l{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} @keyframes sp-mq-r{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}} .sp__mq::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 50%,rgba(10,10,10,.82),rgba(10,10,10,.45) 70%,rgba(10,10,10,.2)),linear-gradient(#0A0A0A,transparent 22%,transparent 78%,#0A0A0A)} .sp__end-txt{display:grid;justify-items:center;gap:22px} @media (prefers-reduced-motion:reduce){.sp__mq-track{animation:none}} /* celular: barra de status sólida na cor do topo do site (como o Safari), hora à esquerda, ilha por cima; a página começa logo abaixo */ .ph__screen{background:var(--barc,#111)} .ph__screen::before{height:var(--bar);background:var(--barc,#111);-webkit-mask-image:none;mask-image:none;-webkit-backdrop-filter:none;backdrop-filter:none} .ph__screen::after{content:"9:41";position:absolute;z-index:2;top:0;left:0;width:30%;height:var(--bar);display:grid;place-items:center;font:600 calc(var(--pw) * .052)/1 var(--f-text);color:var(--barfg,#fff);letter-spacing:.01em} .ph__screen img{margin-top:var(--bar)} .ph__screen{--bar:calc(var(--pw) * .135)} .ph__island{top:calc(var(--pw) * .055 + var(--pw) * .035)} /* sites: todos os cartões do mesmo tamanho; 4 por linha no computador, a última linha centralizada; nome numa linha */ @media (min-width:701px){ .sites__grid{--g:clamp(12px,1.4vw,20px);display:flex!important;flex-wrap:wrap;justify-content:center;gap:var(--g)} .sites__grid>.scard{flex:0 0 calc((100% - var(--g) * 3) / 4);grid-column:auto!important;min-width:0} .sites__grid .scard__img{aspect-ratio:16/10.6!important} } @media (min-width:701px) and (max-width:1000px){.sites__grid>.scard{flex-basis:calc((100% - var(--g) * 2) / 3)}} .scard__info{min-width:0} .scard__info b,.scard__info span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .scard__info span{flex:1} /* notebook v3: alumínio escovado, base na largura da tampa, cantos iguais, aro de metal na moldura e sombra no chão */ .lap{--r:calc(var(--w) * .024);--alu:linear-gradient(180deg,#c9cbce,#dcdde0 14%,#d4d5d8 60%,#c3c5c8);--brush:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.035) 0 1px,transparent 1px 7px);--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .lap__front,.lap__back{border-radius:var(--r) var(--r) 4px 4px} .lap__front{background:#050505;box-shadow:inset 0 0 0 1px #d9dadc,inset 0 0 0 2px #9fa1a4,inset 0 0 0 3px #0a0a0a,inset 0 0 0 4px #161616;padding:calc(var(--w) * .019) calc(var(--w) * .019) calc(var(--w) * .027)} .lap__front::after{background:linear-gradient(110deg,rgba(255,255,255,.07),transparent 28%,transparent 72%,rgba(255,255,255,.04));mix-blend-mode:screen} .lap__back{background:var(--grain),var(--brush),linear-gradient(168deg,#e4e5e7,#c2c4c7 50%,#a6a8ac);background-blend-mode:overlay,normal,normal;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),inset 0 0 0 2px rgba(0,0,0,.12)} .lap__base{left:0;width:100%;border-radius:4px 4px var(--r) var(--r);background:var(--grain),var(--brush),var(--alu);background-blend-mode:overlay,normal,normal;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.15),inset 0 calc(var(--w) * .02) calc(var(--w) * .03) -4px rgba(0,0,0,.14)} .lap__hinge{left:4%;right:4%;height:calc(var(--w) * .02);background:linear-gradient(#0c0c0c,#262627 55%,#0b0b0b);box-shadow:0 1px 0 rgba(255,255,255,.35),0 2px 5px rgba(0,0,0,.3)} .lap__hinge::before,.lap__hinge::after{width:3.5%;background:linear-gradient(#aeb0b3,#7a7c7f)} .lap__spk{top:9.5%;height:44%;width:3.4%;background:radial-gradient(circle,#7d7f82 .9px,transparent 1.1px) 0 0/5px 5px;opacity:.9} .lap__spk--l{left:5%}.lap__spk--r{right:5%} .lap__keys{left:11.5%;right:11.5%;top:9%;height:45%;background:#aeb0b3;box-shadow:inset 0 1px 3px rgba(0,0,0,.32),inset 0 0 0 1px rgba(0,0,0,.1),0 1px 0 rgba(255,255,255,.45)} .lap__keys i{border-radius:3px;background:repeating-linear-gradient(90deg,#141415 0 calc(100% / 14 - 3px),transparent 0 calc(100% / 14));background-clip:content-box;padding:2px 0;filter:drop-shadow(0 1px 0 rgba(255,255,255,.18))} .lap__keys i:nth-child(2){background:repeating-linear-gradient(90deg,#141415 0 calc(100% / 13 - 3px),transparent 0 calc(100% / 13))} .lap__keys i.lap__space{background:linear-gradient(90deg,#141415 0 7%,transparent 0 8%,#141415 0 15%,transparent 0 16%,#141415 0 23%,transparent 0 24%,#141415 0 72%,transparent 0 73%,#141415 0 80%,transparent 0 81%,#141415 0 100%);background-clip:content-box} .lap__pad{top:60%;height:32%;background:linear-gradient(180deg,#d4d6d9,#c9cbce);box-shadow:inset 0 0 0 1px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px rgba(255,255,255,.3)} .lap__lip{left:0;right:0;height:calc(var(--w) * .022);border-radius:2px 2px calc(var(--w) * .012) calc(var(--w) * .012);background:var(--brush),linear-gradient(#e2e3e5,#b4b6b9 50%,#85878a);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(0,0,0,.4),0 calc(var(--w) * .02) calc(var(--w) * .05) rgba(0,0,0,.55)} .lap__lip::before{width:12%;height:55%;border-radius:0 0 9px 9px;background:linear-gradient(#7d7f82,#5f6164);box-shadow:inset 0 2px 3px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.3)} .lap__lip::after{left:6%;right:6%;bottom:-3px;height:4px;background:#111;opacity:.95} /* fechamento: botão de contorno com vidro desfocado por cima da galeria */ .sp__end .sbtn--line{background:rgba(20,20,20,.35);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)} /* carrossel de telas: janelas de navegador alternando computador e celular */ .sp__car{padding:clamp(20px,3vw,40px) 0 clamp(70px,9vw,130px);display:grid;gap:18px} .sp__car-head{display:flex;align-items:center;justify-content:space-between;padding:0 var(--gut)} .sp__car-head .pp-label{color:#9A9993;margin:0} .sp__car-nav{display:flex;gap:8px} .sp__car-btn{width:42px;height:42px;border-radius:50%;border:1px solid rgba(242,241,237,.25);background:rgba(242,241,237,.04);color:#F2F1ED;font-size:16px;cursor:pointer;transition:background .3s,color .3s} .sp__car-btn:hover{background:#F2F1ED;color:#0A0A0A} .sp__car-row{--h:min(58svh,560px);display:flex;align-items:flex-end;gap:clamp(12px,1.6vw,22px);overflow-x:auto;padding:0 var(--gut);scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;user-select:none} .sp__car-row::-webkit-scrollbar{display:none} .sp__car-row.is-drag{cursor:grabbing;scroll-snap-type:none} .sp__car-row img{pointer-events:none} .sp__cw{flex:none;margin:0;height:var(--h);display:flex;flex-direction:column;overflow:hidden;background:#151515;box-shadow:0 30px 60px -30px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.06);scroll-snap-align:start} .sp__cw.is-d{aspect-ratio:16/10.6;border-radius:12px} .sp__cw.is-m{aspect-ratio:9/18.5;border-radius:26px} .sp__cw-bar{flex:none;display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#1d1d1d} .sp__cw-bar i{flex:none;width:8px;height:8px;border-radius:50%;background:#3a3a3a} .sp__cw-bar span{margin-left:8px;font-size:11px;color:#8C8B86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sp__cw.is-m .sp__cw-bar{justify-content:center;height:38px;padding-top:6px} .sp__cw.is-m .sp__cw-bar span{margin:0;padding:4px 12px;border-radius:99px;background:#2a2a2a;max-width:80%} .sp__cw img{flex:1;min-height:0;width:100%;object-fit:cover;object-position:top} @media (max-width:700px){.sp__car-row{--h:min(56svh,460px)}.sp__cw.is-d{height:auto;width:84vw;aspect-ratio:16/11}} /* a galeria diagonal fica parada e o bloco de telas sobe por cima dela; os cartões andam com a rolagem */ .sp__end{position:sticky;top:0;z-index:0;height:100svh;min-height:0} .sp__car{position:relative;z-index:2;padding:0;margin-top:-6svh;background:#0A0A0A;border-radius:clamp(22px,3vw,40px) clamp(22px,3vw,40px) 0 0;box-shadow:0 -40px 80px rgba(0,0,0,.6)} .sp__car-pin{position:sticky;top:0;height:100svh;display:grid;grid-template-rows:auto 1fr;align-content:center;gap:clamp(16px,3svh,30px);padding:clamp(40px,8svh,80px) 0;overflow:hidden} .sp__car-row{overflow:visible;scroll-snap-type:none;cursor:default;align-items:center} .sp__more{position:relative;z-index:2;background:#0A0A0A} /* botão "Entrar no site" flutuando por cima do teclado: vidro claro desfocado e sombra em camadas (perto e longe) */ .sp__btn{position:relative;z-index:5;background:rgba(242,241,237,.84);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 2px 4px rgba(0,0,0,.35),0 10px 24px -6px rgba(0,0,0,.55),0 28px 60px -12px rgba(0,0,0,.65)} .sp__btn:hover{background:rgba(255,255,255,.92)} /* telas do site (v2): só a imagem arredondada, mesma altura, filtro de páginas em cima e controles embaixo */ .sp__car{height:auto!important;padding:clamp(56px,7vw,100px) 0 clamp(60px,8vw,110px)!important;display:grid;gap:clamp(18px,2.4vw,30px)} .sp__car-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:0 var(--gut)} .sp__car-filter{display:flex;flex-wrap:wrap;gap:6px} .sp__chip{padding:8px 14px;border-radius:99px;border:1px solid rgba(242,241,237,.18);background:none;color:rgba(242,241,237,.7);font:inherit;font-size:13px;cursor:pointer;transition:background .3s,color .3s,border-color .3s} .sp__chip:hover{border-color:rgba(242,241,237,.5);color:#F2F1ED} .sp__chip.is-on{background:#F2F1ED;color:#0A0A0A;border-color:#F2F1ED} .sp__car-row{--h:min(44svh,420px);display:flex;align-items:center;gap:clamp(10px,1.2vw,16px);overflow-x:auto!important;padding:0 var(--gut);scroll-padding:0 var(--gut);scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab;user-select:none} .sp__car-row::after{content:"";flex:0 0 1px} .sp__cw{height:var(--h)!important;width:auto!important;flex:none;margin:0;border-radius:14px!important;overflow:hidden;background:#151515;box-shadow:none!important;scroll-snap-align:start} .sp__cw.is-m{border-radius:22px!important} .sp__cw img{width:100%;height:100%;object-fit:cover;object-position:top;display:block} .sp__car-ctrl{display:flex;align-items:center;gap:14px;padding:0 var(--gut)} .sp__car-bar{position:relative;flex:1;height:2px;border-radius:2px;background:rgba(242,241,237,.12);overflow:hidden} .sp__car-bar i{position:absolute;top:0;bottom:0;left:0;width:20%;border-radius:2px;background:#F2F1ED;transition:left .15s linear} @media (max-width:700px){.sp__car-row{--h:min(46svh,380px)}} /* outros sites: bloco em outro tom, separado por uma linha, para marcar a troca de seção */ .sp__more{background:#161616!important;border-top:1px solid rgba(242,241,237,.12);padding-top:clamp(40px,5vw,70px)!important} /* destaque do site no projeto: os dois botões sempre na mesma linha */ .pp-site__btns{flex-wrap:nowrap;width:100%} @media (max-width:700px){.pp-site__btns .sbtn{flex:1 1 0;justify-content:center;padding:12px 10px;font-size:13px;white-space:nowrap;gap:6px}} /* frente do notebook v4: a base ganha uma chapa de baixo (espessura real em 3D); o lábio só fecha o vão entre as duas, inset nos cantos arredondados */ .lap{--esp:calc(var(--w) * .02)} .lap__under{position:absolute;inset:0;border-radius:inherit;background:var(--brush),linear-gradient(180deg,#8f9194,#b0b2b5 40%,#9a9c9f);transform:translateZ(calc(var(--esp) * -1));box-shadow:0 0 0 1px rgba(0,0,0,.25),0 calc(var(--w) * .03) calc(var(--w) * .06) rgba(0,0,0,.6)} .lap__under::before,.lap__under::after{content:"";position:absolute;bottom:4%;width:4%;height:5%;border-radius:50%;background:#1a1a1a} .lap__under::before{left:5%}.lap__under::after{right:5%} .lap__lip{left:calc(var(--r) * .42);right:calc(var(--r) * .42);height:var(--esp);border-radius:0 0 calc(var(--esp) * .55) calc(var(--esp) * .55);background:linear-gradient(180deg,#e8e9eb,#c9cbce 35%,#a9abae 75%,#8e9093);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(0,0,0,.3)} .lap__lip::before{width:11%;height:50%;border-radius:0 0 8px 8px;background:linear-gradient(180deg,#8b8d90,#6a6c6f);box-shadow:inset 0 2px 3px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.35)} .lap__lip::after{display:none} /* notebook v5: base vista de frente, como no mockup de referência (MacBook): dobradiça escura + chapa fina de alumínio mais larga que a tampa, com o recorte de abertura e os pés. Só a tampa fica em 3D (abre ao rolar). */ .lap__base{left:-9%;width:118%;height:auto;transform:none;background:none;box-shadow:none;border-radius:0;transform-style:flat} .lap__under,.lap__keys,.lap__pad,.lap__spk,.lap__lip{display:none} .lap__hinge{position:relative;display:block;left:auto;right:auto;top:auto;width:calc(100% / 1.18 + 2px);height:calc(var(--w) * .022);margin:0 auto;border-radius:0;background:linear-gradient(180deg,#0d0d0e,#262627 45%,#141415);box-shadow:none} .lap__hinge::before,.lap__hinge::after{display:none} .lap__slab{position:relative;display:block;width:100%;height:calc(var(--w) * .04);border-radius:3px 3px calc(var(--w) * .02) calc(var(--w) * .02);background:var(--brush),linear-gradient(180deg,#e9eaec,#cdcfd2 38%,#b3b5b8 72%,#8d8f92);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(0,0,0,.35),0 calc(var(--w) * .02) calc(var(--w) * .05) rgba(0,0,0,.6)} .lap__slab::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 8%,transparent 92%,rgba(0,0,0,.18))} .lap__notch2{position:absolute;left:50%;top:0;width:15%;height:34%;translate:-50% 0;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#75777a,#8f9194);box-shadow:inset 0 2px 3px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5)} .lap__foot{position:absolute;top:100%;height:calc(var(--w) * .006);width:6%;background:linear-gradient(#2a2a2a,#111);border-radius:0 0 4px 4px} .lap__foot--l{left:5%}.lap__foot--r{right:5%} .lap__back{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),inset 0 0 0 2px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.4)} /* chapa da base: escovado bem leve (o forte parecia listras) */ .lap__slab{background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),linear-gradient(180deg,#e9eaec,#cdcfd2 38%,#b3b5b8 72%,#8d8f92)} /* fechado: a base fica escondida atrás da tampa (cresce junto com a abertura); o 'role' fica atrás do aparelho */ .lap__base{transform-origin:50% 0} .sp__sticky>.sp__device{z-index:1} .sp__sticky>.sp__hint{z-index:0} /* câmera mais longe: a tampa deitada não estoura para fora da tela no início */ .sp__rig{perspective:3800px;perspective-origin:50% 0%} /* celular: sem relógio; barra de status translúcida com blur por cima da página (sem empurrar/cortar a imagem) */ .ph__screen{background:#fff} .ph__screen::before{height:var(--bar);background:rgba(10,10,10,.42);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);-webkit-mask-image:none;mask-image:none} .ph__screen::after{display:none} .ph__screen img{margin-top:0} /* ================= NOTEBOOK 3D (trazido da landing FIM20, J:\...\PAGINAS\FIM20 im20-landing.html) ================= Grupo .nb com origem na dobradiça: a base deita 90°, a tampa gira de -90° (fechada) a +14° (aberta). O progresso vem de --p (0 fechado, 1 aberto), animado pelo GSAP no #spLap junto com o scroll da página. */ .nb-cena{ --w:min(70vw,980px,calc((100svh - 230px) * 1.3)); --tilt:-16deg;--abre:104deg;--fs:.34;--p:0; --h:calc(var(--w) * .625);--d:calc(var(--w) * .66);--t:calc(var(--w) * .012);--tl:calc(var(--w) * .006); --r:calc(var(--w) * .03);--rb:calc(var(--w) * .02);--bz:calc(var(--w) * .014); --ang:calc(-90deg + var(--p) * var(--abre)); flex:none; } /* cena com perspectiva */ .nb-cena{ position:relative;width:var(--w);height:calc(var(--h) + var(--d) * var(--fs)); perspective:calc(var(--w) * 3.6);perspective-origin:50% 34%; } .nb-sombra{ /* sombra no chão: uma poça suave + contato apertado na borda da frente */ position:absolute;left:5%;right:5%;bottom:calc(var(--d) * -.04);height:calc(var(--d) * .26); background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.95) 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,0) 72%); filter:blur(calc(var(--w) * .014)); transform:translateY(calc(var(--p) * var(--w) * .02)); } .nb-sombra::after{ content:"";position:absolute;left:12%;right:12%;top:18%;height:16%;border-radius:50%; background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 70%); } .nb{ position:absolute;left:0;top:var(--h);width:var(--w);height:0; transform-style:preserve-3d;will-change:transform; /* o translateY mantém o centro visual: fechado, o conjunto é uma lâmina baixa e sobe; aberto, ocupa a cena inteira */ transform:translateY(calc((1 - var(--p)) * var(--h) * -.42)) rotateX(var(--tilt)); } /* ---- base ---- */ .nb-base{ position:absolute;left:0;top:0;width:var(--w);height:var(--d); transform-origin:50% 0;transform:rotateX(90deg);transform-style:preserve-3d; border-radius:0 0 var(--rb) var(--rb); background: radial-gradient(120% 80% at 50% -10%,rgba(255,255,255,.38) 0%,rgba(255,255,255,0) 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='1' fill='%23ffffff' fill-opacity='.07'/%3E%3Crect y='2' width='4' height='1' fill='%23000000' fill-opacity='.05'/%3E%3C/svg%3E"), linear-gradient(180deg,#b9bbc0 0%,#d0d2d6 26%,#d8dade 62%,#cdcfd3 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(0,0,0,.1),inset 1px 0 0 rgba(255,255,255,.35),inset -1px 0 0 rgba(255,255,255,.35); } .nb-base::after{ /* sombra da tampa sobre a base, encurta conforme abre */ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 100%); background-size:100% calc(92% - var(--p) * 70%);background-repeat:no-repeat; opacity:calc(.65 - var(--p) * .38); transform:translateZ(.5px); } .nb-dobradica{ position:absolute;left:10%;right:10%;top:calc(var(--w) * -.006);height:calc(var(--w) * .014); border-radius:999px; background:linear-gradient(180deg,#6a6c72 0%,#3a3b40 45%,#1f2024 100%); box-shadow:0 1px 2px rgba(0,0,0,.4); } .nb-teclado{ --k:calc(var(--w) * .0525); position:absolute;left:8%;top:10%; width:calc(var(--k) * 16);height:calc(var(--k) * 6); border-radius:calc(var(--w) * .008); background-color:#c2c4c9; /* poço do teclado, um tom abaixo da base */ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='4' y='4' width='92' height='92' rx='14' fill='%2325262b'/%3E%3Crect x='4' y='4' width='92' height='46' rx='14' fill='%23ffffff' fill-opacity='.07'/%3E%3Crect x='4' y='4' width='92' height='92' rx='14' fill='none' stroke='%23ffffff' stroke-opacity='.06'/%3E%3C/svg%3E");background-size:var(--k) var(--k); box-shadow:inset 0 1px 3px rgba(0,0,0,.18),inset 0 0 0 1px rgba(0,0,0,.06); } .nb-espaco{ /* barra de espaço cobre as teclas da última fila */ position:absolute;left:calc(8% + var(--w) * .0525 * 5);top:calc(10% + var(--w) * .0525 * 5); width:calc(var(--w) * .0525 * 6);height:calc(var(--w) * .0525); padding:calc(var(--w) * .0021);background:#c2c4c9; } .nb-espaco::before{ content:"";display:block;width:100%;height:100%;border-radius:calc(var(--w) * .0065); background:linear-gradient(180deg,#2d2e33,#25262b); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.05); } .nb-trackpad{ position:absolute;left:31%;width:38%;top:59%;height:32%; border-radius:calc(var(--w) * .01); background:linear-gradient(180deg,#d3d5d9,#c6c8cd); box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.6),0 1px 0 rgba(255,255,255,.35); } .nb-base-f,.nb-base-l,.nb-base-r{position:absolute;background:#c0c2c7} .nb-base-f{ left:var(--rb);right:var(--rb);top:100%;height:var(--t); transform-origin:50% 0;transform:rotateX(-90deg); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='1' fill='%23ffffff' fill-opacity='.07'/%3E%3Crect y='2' width='4' height='1' fill='%23000000' fill-opacity='.05'/%3E%3C/svg%3E"),linear-gradient(180deg,#e4e6e9 0%,#c6c8cd 40%,#a6a8ad 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.7); } .nb-base-f::before{ /* entalhe discreto para abrir a tampa */ content:"";position:absolute;left:44%;right:44%;top:0;height:45%; border-radius:0 0 999px 999px;background:rgba(0,0,0,.14); } .nb-base-l{top:0;bottom:var(--rb);right:100%;width:var(--t);transform-origin:100% 50%;transform:rotateY(-90deg);background:linear-gradient(90deg,#b8babf,#cdcfd4)} .nb-base-r{top:0;bottom:var(--rb);left:100%;width:var(--t);transform-origin:0 50%;transform:rotateY(90deg);background:linear-gradient(90deg,#cdcfd4,#b8babf)} /* ---- tampa (gira na dobradiça) ---- */ .nb-tampa{ position:absolute;left:0;top:calc(var(--h) * -1 - var(--w) * .0025); width:var(--w);height:var(--h); transform-origin:50% 100%;transform:rotateX(var(--ang)); transform-style:preserve-3d;will-change:transform; } .nb-tampa-f{ /* frente: vidro preto com lábio fino */ position:absolute;inset:0;border-radius:var(--r) var(--r) 0 0; background:linear-gradient(180deg,#17181b 0%,#0b0b0d 18%,#08080a 100%); backface-visibility:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(255,255,255,.04),inset 0 0 0 1px rgba(255,255,255,.06); } .nb-tampa-f::before{ /* câmera */ content:"";position:absolute;top:calc(var(--bz) * .38);left:50%; width:calc(var(--w) * .005);height:calc(var(--w) * .005);margin-left:calc(var(--w) * -.0025); border-radius:50%;background:#141c28;box-shadow:0 0 0 1px rgba(255,255,255,.1),inset 0 0 1px rgba(90,140,220,.9); } .nb-tela{ /* display: raio concêntrico (raio externo − moldura) e recorte que funciona em 3D */ position:absolute;left:var(--bz);right:var(--bz);top:var(--bz);bottom:calc(var(--bz) * 1.55); border-radius:calc(var(--r) - var(--bz)) calc(var(--r) - var(--bz)) calc(var(--bz) * .5) calc(var(--bz) * .5); overflow:hidden;background:#000; clip-path:inset(0 round calc(var(--r) - var(--bz)) calc(var(--r) - var(--bz)) calc(var(--bz) * .5) calc(var(--bz) * .5)); transform:translateZ(0); box-shadow:0 0 0 1px rgba(255,255,255,.05); } .nb-tela::before{ /* a tela "acorda" conforme a tampa levanta */ content:"";position:absolute;inset:0;z-index:2;background:#000;pointer-events:none; opacity:calc(1.05 - var(--p) * 2.4); } .nb-tela img{width:100%;height:auto;max-width:none;display:block;will-change:transform} .nb-tela::after{ /* reflexo no vidro, desliza com o ângulo da tampa */ content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none; background:linear-gradient(calc(100deg + var(--p) * 22deg),rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 24%,rgba(255,255,255,0) 46%); opacity:calc(.45 + (1 - var(--p)) * .55); } .nb-tampa-b{ /* verso em alumínio */ position:absolute;inset:0;border-radius:var(--r) var(--r) 0 0; background: radial-gradient(70% 55% at 30% 18%,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='1' fill='%23ffffff' fill-opacity='.07'/%3E%3Crect y='2' width='4' height='1' fill='%23000000' fill-opacity='.05'/%3E%3C/svg%3E"), linear-gradient(165deg,#e0e2e6 0%,#c6c8cd 46%,#b0b2b7 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.25); transform:translateZ(calc(var(--tl) * -1)) rotateY(180deg);backface-visibility:hidden; } .nb-tampa-b::after{ /* brilho: mais forte com a tampa deitada, virada para a luz */ content:"";position:absolute;inset:0;border-radius:inherit; background:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 50%,rgba(0,0,0,.12) 100%); opacity:calc(.95 - var(--p) * .45); } .nb-tampa-e{position:absolute;background:linear-gradient(180deg,#dcdee2,#a7a9ae)} .nb-tampa-e.t{left:var(--r);right:var(--r);top:0;height:var(--tl);transform-origin:50% 0;transform:rotateX(-90deg)} .nb-tampa-e.l{top:var(--r);bottom:0;left:0;width:var(--tl);transform-origin:0 50%;transform:rotateY(90deg)} .nb-tampa-e.r{top:var(--r);bottom:0;right:0;width:var(--tl);transform-origin:100% 50%;transform:rotateY(-90deg)} /* cantos arredondados com espessura: dois segmentos de 22,5° por canto, cada um com a borda de cima sobre a corda do arco e pendurado para baixo (base) ou para trás (tampa). Comprimento da corda = 2·r·sen(22,5°). */ .nb-canto{position:absolute;transform-origin:0 0;background:linear-gradient(180deg,#dfe1e5,#a9abb0)} .nb-base .nb-canto{height:var(--t);width:calc(var(--rb) * .7654)} .nb-canto.b1{left:0;top:calc(var(--d) - var(--rb));transform:rotate(67.5deg) rotateX(-90deg)} .nb-canto.b2{left:calc(var(--rb) * .2929);top:calc(var(--d) - var(--rb) * .2929);transform:rotate(22.5deg) rotateX(-90deg)} .nb-canto.b3{left:calc(var(--w) - var(--rb));top:var(--d);transform:rotate(-22.5deg) rotateX(-90deg)} .nb-canto.b4{left:calc(var(--w) - var(--rb) * .2929);top:calc(var(--d) - var(--rb) * .2929);transform:rotate(-67.5deg) rotateX(-90deg)} .nb-tampa .nb-canto{height:var(--tl);width:calc(var(--r) * .7654);background:linear-gradient(180deg,#dcdee2,#a7a9ae)} .nb-canto.t1{left:0;top:var(--r);transform:rotate(-67.5deg) rotateX(-90deg)} .nb-canto.t2{left:calc(var(--r) * .2929);top:calc(var(--r) * .2929);transform:rotate(-22.5deg) rotateX(-90deg)} .nb-canto.t3{left:calc(var(--w) - var(--r));top:0;transform:rotate(22.5deg) rotateX(-90deg)} .nb-canto.t4{left:calc(var(--w) - var(--r) * .2929);top:calc(var(--r) * .2929);transform:rotate(67.5deg) rotateX(-90deg)} @media (max-width:700px){.nb-cena{display:none}} /* notebook cabe inteiro na tela quando aberto (tampa + base + botão) */ .nb-cena{--w:min(66vw,900px,calc((100svh - 250px) * 1.08))} /* botão "Entrar no site" flutuando sobre o teclado do notebook, com sombra projetada nas teclas */ @media (min-width:701px){ .sp__rig{position:relative} .sp__rig>#spBtn{position:absolute;left:50%;top:78%;translate:-50% 0;z-index:5;box-shadow:0 22px 34px -6px rgba(0,0,0,.6),0 8px 14px -4px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.35) inset} } @media (min-width:701px){.sp__rig>#spBtn{left:0;right:0;translate:none;width:max-content;margin:0 auto;top:80%}} /* fechamento da página do site: botões de vidro (blur) sobre as telas, em vez de chapados */ .sp__end-btns .sbtn--dark{background:rgba(242,241,237,.62);color:#0A0A0A;border-color:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 12px 30px -10px rgba(0,0,0,.5)} .sp__end-btns .sbtn--dark:hover{background:rgba(255,255,255,.85)} .sp__end-btns .sbtn--line{background:rgba(10,10,10,.35);border-color:rgba(255,255,255,.35);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)} .sp__kw{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom} #spDomain{transition:none}