/* ============================================================ VENTURA / SISTEMA DE DESIGN / VIDRO A mesma receita dos ícones, aplicada aos elementos de interface. Quatro camadas, sempre nesta ordem: 1. CORPO translúcido, com queda de luz de cima para baixo 2. ARESTA 1px iluminado no topo e à esquerda, apagando para baixo 3. ESPECULAR mancha de brilho no canto superior esquerdo 4. PROFUNDIDADE sombra projetada para baixo + luz interna no topo Depende de tokens/tokens.css e css/base.css. ============================================================ */ :root{ /* corpo do vidro */ --vidro-corpo: linear-gradient(158deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.055) 52%, rgba(255,255,255,.03) 100%); /* aresta iluminada */ --vidro-aresta: linear-gradient(158deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.20) 44%, rgba(255,255,255,.07) 100%); /* acento com gloss, o mesmo dos ícones */ --vidro-acento: linear-gradient(160deg, #FF8A5C 0%, var(--acento) 38%, var(--acento-sombra) 100%); --vidro-desfoque: 14px; --vidro-sombra: 0 18px 40px -18px rgba(0,0,0,.92), 0 2px 6px -2px rgba(0,0,0,.6); --vidro-luz-interna: inset 0 1px 0 rgba(255,255,255,.14); --vidro-raio: 0; /* segue a marca. Use .vidro-arredondado para o raio dos ícones */ } /* no tema claro o vidro inverte: o corpo escurece em vez de clarear, senão ele some no fundo osso */ .tema-claro, .tema-claro-alto{ --vidro-corpo: linear-gradient(158deg, rgba(6,7,10,.07) 0%, rgba(6,7,10,.035) 52%, rgba(6,7,10,.02) 100%); --vidro-aresta: linear-gradient(158deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.45) 44%, rgba(6,7,10,.10) 100%); --vidro-acento: linear-gradient(160deg, #F4592F 0%, var(--acento-claro) 38%, var(--acento-sombra) 100%); --vidro-sombra: 0 16px 34px -18px rgba(6,7,10,.42), 0 2px 5px -2px rgba(6,7,10,.22); --vidro-luz-interna: inset 0 1px 0 rgba(255,255,255,.8); } /* ============ A BASE ============ Qualquer elemento vira vidro com .vidro. O conteúdo precisa subir de camada, por isso o z-index nos filhos diretos. */ .vidro{ position:relative; isolation:isolate; background:var(--vidro-corpo); backdrop-filter:blur(var(--vidro-desfoque)) saturate(1.14); -webkit-backdrop-filter:blur(var(--vidro-desfoque)) saturate(1.14); border:0; border-radius:var(--vidro-raio); box-shadow:var(--vidro-sombra), var(--vidro-luz-interna); color:var(--texto); } .vidro > *{ position:relative; z-index:3; } /* aresta: 1px de gradiente, feito por máscara para não virar 4 bordas iguais */ .vidro::before{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit; padding:1px; background:var(--vidro-aresta); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } /* especular: a mancha de brilho do canto superior esquerdo */ .vidro::after{ content:''; position:absolute; z-index:1; pointer-events:none; left:5%; top:-14%; width:58%; height:52%; background:radial-gradient(closest-side, rgba(255,255,255,.42), rgba(255,255,255,0)); border-radius:50%; } .tema-claro .vidro::after, .tema-claro-alto .vidro::after{ background:radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,0)); } /* variações de forma e densidade */ .vidro-arredondado{ --vidro-raio:14px; } /* o raio dos ícones */ .vidro-leve{ --vidro-desfoque:8px; box-shadow:var(--vidro-luz-interna); } .vidro-fundo{ --vidro-corpo:linear-gradient(158deg, rgba(255,255,255,.09), rgba(255,255,255,.02)); } /* ============ BOTÃO DE VIDRO ============ */ .btn-vidro{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:var(--alvo-toque); padding:14px 26px; font-family:var(--fonte-corpo); font-size:13px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; text-decoration:none; cursor:pointer; color:var(--texto); transition:transform var(--t-rapida), box-shadow var(--t-base); } .btn-vidro:hover{ transform:translateY(-1px); box-shadow:0 22px 46px -18px rgba(0,0,0,.95), var(--vidro-luz-interna); } .btn-vidro:active{ transform:translateY(0); } /* o primário é o acento em vidro: gloss por cima do laranja */ .btn-vidro-acento{ background:var(--vidro-acento); color:var(--sobre-acento); box-shadow:var(--vidro-sombra), inset 0 1px 0 rgba(255,255,255,.42); } .btn-vidro-acento::before{ background:linear-gradient(158deg, rgba(255,255,255,.85), rgba(255,255,255,.22) 44%, rgba(255,255,255,.06)); } .btn-vidro-acento::after{ background:radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,0)); } /* ============ CARD DE VIDRO ============ */ .card-vidro{ padding:var(--e-md) var(--e-md) 28px; } .card-vidro:hover{ box-shadow:0 24px 50px -20px rgba(0,0,0,.95), var(--vidro-luz-interna); } .card-vidro-acento{ background:var(--vidro-acento); color:var(--sobre-acento); box-shadow:var(--vidro-sombra), inset 0 1px 0 rgba(255,255,255,.42); } /* ============ CAMPO DE VIDRO ============ */ .input-vidro, .textarea-vidro, .select-vidro{ width:100%; min-height:var(--alvo-toque); padding:13px 15px; font-family:var(--fonte-corpo); font-size:var(--texto-corpo); color:var(--texto); } .input-vidro::placeholder, .textarea-vidro::placeholder{ color:var(--texto-fraco); } .input-vidro:focus, .textarea-vidro:focus, .select-vidro:focus{ outline:0; box-shadow:var(--vidro-sombra), var(--vidro-luz-interna), 0 0 0 1px var(--cor-acento); } .textarea-vidro{ min-height:120px; resize:vertical; } .select-vidro{ appearance:none; padding-right:40px; cursor:pointer; } /* a seta do select acompanha o acento do tema */ .select-vidro{ background-image:var(--vidro-corpo), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23FB2B07' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat:no-repeat, no-repeat; background-position:0 0, right 15px center; background-size:100% 100%, 14px 9px; } /* ============ BADGE, PILL E CHIP ============ */ .badge-vidro{ display:inline-block; padding:6px 14px; font-family:var(--fonte-corpo); font-size:9px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--texto); } .badge-vidro-acento{ background:var(--vidro-acento); color:var(--sobre-acento); box-shadow:var(--vidro-sombra), inset 0 1px 0 rgba(255,255,255,.42); } .pill-vidro{ --vidro-raio:var(--raio-pill); } /* ============ NAV, PAINEL E MODAL ============ */ .nav-vidro{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:var(--e-md); padding:12px var(--secao-x); --vidro-desfoque:18px; box-shadow:0 10px 30px -18px rgba(0,0,0,.9), var(--vidro-luz-interna); } .painel-vidro{ padding:var(--e-lg) var(--e-md); } .modal-vidro{ padding:var(--e-lg); max-width:520px; width:100%; --vidro-desfoque:22px; } .modal-fundo{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:var(--secao-x); background:rgba(6,7,10,.72); backdrop-filter:blur(6px); } /* ============ BARRA DE PROGRESSO E MEDIDOR ============ */ .barra-vidro{ height:12px; padding:0; overflow:hidden; } .barra-vidro span{ display:block; height:100%; background:var(--vidro-acento); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } /* ============ SEPARADOR ============ */ .regua-vidro{ height:1px; border:0; margin:var(--e-lg) 0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); } .tema-claro .regua-vidro, .tema-claro-alto .regua-vidro{ background:linear-gradient(90deg, transparent, rgba(6,7,10,.22), transparent); } /* ============ AVISOS DE USO ============ 1. Vidro precisa de algo atrás para refratar. Sobre preto chapado ele quase some. O lugar dele é sobre o degradê de luz, sobre foto ou sobre o verde. 2. `backdrop-filter` cria contexto de empilhamento. Se o grão estiver dentro do elemento de vidro ele fica ABAIXO do vidro e some. O grão vai no bloco de fora, nunca dentro do .vidro. 3. Não empilhar vidro sobre vidro: dois desfoques somam e a peça vira leitosa. Painel de vidro leva conteúdo sólido dentro. */