/* LANDING NOVA (25/09) — ver index.js. Tudo sob `[data-pn]`: sem o módulo, a landing volta a ser a de antes. */ /* A cópia BORRADA da arte, atrás de tudo (a "janela" flutua sobre ela). Só enquanto a landing existe. */ .pn-fundo { display: none; } html[data-pn] .pn-fundo { display: block; position: fixed; inset: -60px; z-index: -1; background: #0b1020 center / cover no-repeat; filter: blur(34px) brightness(0.72) saturate(1.15); pointer-events: none; } /* Só o pinta a cor (vai para o "canvas" da página); o fica transparente — senão cobriria o fundo borrado. */ html[data-pn] { background: #0b1020; } html[data-pn] body { background: transparent; } /* A pintura vira uma JANELA arredondada flutuando. */ .portal[data-pn] .portal__arte { inset: 26px 40px 34px; border-radius: 28px; background: #05070d; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.16), 0 30px 80px rgb(0 0 0 / 0.45), 0 8px 24px rgb(0 0 0 / 0.3); } .portal[data-pn] .portal__arte > img { transition: opacity 1s ease; } .portal[data-pn] .portal__arte[data-pn-revelando] > img { opacity: 0; } .pn-ascii { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; transition: opacity 0.9s ease; } .pn-ascii--saindo { opacity: 0; } /* 25/09 (Zerg): volta a SOMBRA original do logo (a da landing antiga, index-Can-Rteu.css). */ .portal[data-pn] .splash__logo { filter: drop-shadow(0 6px 12px rgb(4 14 34 / 0.75)) drop-shadow(0 0 34px rgb(4 14 34 / 0.55)); } /* Botões: pílula branca, calma (no lugar do hexágono azul). */ .portal[data-pn] .hexbtn { clip-path: none; border-radius: 999px; padding: 0; background: #fff; filter: drop-shadow(0 12px 26px rgb(0 0 0 / 0.38)); } .portal[data-pn] .hexbtn .hexbtn__face { clip-path: none; border-radius: 999px; background: #fff; box-shadow: none; color: #111318; text-shadow: none; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.01em; padding: 13px 46px; } .portal[data-pn] .hexbtn:hover:not(:disabled) { filter: drop-shadow(0 16px 30px rgb(0 0 0 / 0.45)); } .portal[data-pn] .hexbtn:focus-visible { outline: 3px solid #9ec5ff; outline-offset: 3px; } /* O cartão de Entrar/Criar conta: vidro escuro, cantos arredondados. */ .portal[data-pn] .auth .glass { clip-path: none; border-radius: 24px; padding: 1px; background: linear-gradient(160deg, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0.05) 45%, rgb(255 255 255 / 0.12)); filter: drop-shadow(0 24px 50px rgb(0 0 0 / 0.5)); } .portal[data-pn] .auth .glass__face { clip-path: none; border-radius: 23px; background: rgb(16 18 24 / 0.66); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); box-shadow: inset 0 1px rgb(255 255 255 / 0.1); } .portal[data-pn] .auth .field__well { border: 1px solid rgb(255 255 255 / 0.1); border-radius: 12px; background: rgb(255 255 255 / 0.06); } /* Campo em foco: o anel colorido sutil da referência. */ .portal[data-pn] .auth .field__well:focus-within { border-color: transparent; background: linear-gradient(rgb(22 24 31), rgb(22 24 31)) padding-box, linear-gradient(90deg, #ff7ac6, #8a7bff, #4fd6e6, #ffe07a) border-box; } .portal[data-pn] .auth__fechar { border-radius: 50%; background: rgb(16 18 24 / 0.7); border: 1px solid rgb(255 255 255 / 0.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* Seletor Entrar/Criar conta: branco como os botões. */ .portal[data-pn] .segmented { background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); } .portal[data-pn] .segmented__thumb { background: #fff; box-shadow: 0 4px 12px rgb(0 0 0 / 0.3); } .portal[data-pn] .segmented__option[aria-pressed='true'] { color: #111318; text-shadow: none; } /* "Faça parte do projeto" (25/09, Zerg, ref. Jelly Slider): cartão de vidro claro; em cima o texto, embaixo o trilho com o GEL (canvas `.pn-gel`, desenhado em index.js — ele estufa para fora do trilho quando anda e dá para arrastar). */ .portal[data-pn] .fundador-card { position: relative; flex-wrap: wrap; row-gap: 6px; width: min(540px, calc(100vw - 48px)); margin-top: clamp(16px, 3vh, 28px); padding: 14px 22px 10px 18px; gap: 14px; border: 1px solid rgb(255 255 255 / 0.6); border-radius: 26px; color: #1d2a3a; background: linear-gradient(180deg, rgb(248 250 252 / 0.8), rgb(226 232 240 / 0.74)); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 14px 34px rgb(0 0 0 / 0.3); transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.25s ease; } .portal[data-pn] .fundador-card:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 18px 40px rgb(0 0 0 / 0.36); } .portal[data-pn] .fundador-card:focus-visible { outline: 3px solid #fff; outline-offset: 4px; } .portal[data-pn] .fundador-card__coroa { width: 42px; height: 42px; } .portal[data-pn] .fundador-card__coroa img { filter: brightness(0) opacity(0.7); } .portal[data-pn] .fundador-card__texto strong { font-size: 22px; letter-spacing: 0.06em; color: #16212e; } .portal[data-pn] .fundador-card__texto small { font-size: 15px; color: #334155; } .portal[data-pn] .fundador-card__seta { color: #16212e; font-size: 30px; } .portal[data-pn] .fundador-card__texto { flex: 1 1 0; min-width: 0; } .portal[data-pn] .fundador-card__coroa, .portal[data-pn] .fundador-card__seta { flex: none; } .pn-gel { order: 9; flex: 1 0 100%; display: block; height: 46px; margin: -8px -6px 0; touch-action: pan-y; cursor: grab; } .pn-gel:active { cursor: grabbing; } /* PLAYER DE MÚSICA (index.js): faixa fina de vidro no canto superior DIREITO, dentro da moldura. O aviso "toque para som" some só aqui na landing. */ html[data-pn] body > button[aria-label='Tocar para ativar o som'] { display: none !important; } .pn-player { display: none; } html[data-pn] .pn-player { --v: 0; position: fixed; z-index: 50; top: 38px; right: 54px; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 5px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.35); background: rgb(255 255 255 / 0.16); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 4px 16px rgb(0 0 0 / 0.18), inset 0 1px 0 rgb(255 255 255 / 0.3); color: #fff; font: 600 11px/1 system-ui, sans-serif; text-shadow: 0 1px 2px rgb(0 0 0 / 0.45); user-select: none; } /* Detalhes da referência em miniatura (Zerg: "adorei o vidro fino, mas com aquela estética"): botão redondo rebaixado, barra em pílula com trilho fundo e brilho, e a rodinha com marcas gravadas e o entalhe que gira com o volume. */ .pn-player__mudo { width: 22px; height: 22px; margin: 0; padding: 4px; border: 0; border-radius: 50%; background: rgb(0 0 0 / 0.18); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.45), 0 1px 0 rgb(255 255 255 / 0.25); color: #fff; cursor: pointer; } .pn-player__mudo:hover { background: rgb(0 0 0 / 0.28); } .pn-player__mudo svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.4)); } .pn-player__x { display: none; } html[data-pn] .pn-player[data-mudo='1'] .pn-player__x { display: block; } html[data-pn] .pn-player[data-mudo='1'] .pn-player__ondas { display: none; } .pn-player__barra { position: relative; width: 110px; height: 12px; border-radius: 999px; background: rgb(0 0 0 / 0.26); box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.5), 0 1px 0 rgb(255 255 255 / 0.25); cursor: pointer; touch-action: none; } .pn-player__barra::before { content: ''; position: absolute; inset: -8px -4px; } .pn-player__barra:focus-visible { outline: 2px solid #fff; outline-offset: 4px; } .pn-player__nivel { position: absolute; left: 2px; top: 2px; bottom: 2px; width: calc((100% - 4px) * var(--v)); min-width: 8px; border-radius: 999px; background: linear-gradient(90deg, #fff0b3, #f5b733 60%, #f08a1c); box-shadow: 0 0 8px rgb(255 180 50 / 0.85), inset 0 1px 0 rgb(255 255 255 / 0.7), inset 0 -1px 1px rgb(150 70 0 / 0.35); } html[data-pn] .pn-player[data-mudo='1'] .pn-player__nivel { opacity: 0.35; } .pn-player__pct { min-width: 26px; text-align: right; font-variant-numeric: tabular-nums; opacity: 0.9; } .pn-player__knob { position: relative; width: 24px; height: 24px; flex: none; border-radius: 50%; /* marcas gravadas em volta */ background: repeating-conic-gradient(from -135deg, rgb(255 255 255 / 0.55) 0 3deg, transparent 3deg 22.5deg); cursor: grab; touch-action: none; } .pn-player__giro { position: absolute; inset: 3px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, rgb(255 255 255 / 0.55), rgb(210 220 235 / 0.35) 60%, rgb(120 135 160 / 0.4)); box-shadow: 0 2px 4px rgb(0 0 0 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.8), inset 0 -2px 3px rgb(0 0 0 / 0.2); transform: rotate(var(--giro, -135deg)); } .pn-player__giro::after { content: ''; position: absolute; left: 50%; top: 2px; width: 2px; height: 6px; margin-left: -1px; border-radius: 1px; background: #f5b733; box-shadow: 0 0 4px rgb(255 190 60 / 0.9); } .portal[data-pn] .splash__rodape { text-shadow: 0 1px 3px rgb(0 0 0 / 0.8); opacity: 0.85; } /* 25/09 (Zerg: "descer essa parte para ficar embaixo e não no relevo da tela"): o rodapé sai de cima da borda da moldura e vai para a faixa ABAIXO dela. */ .portal[data-pn] .splash__rodape { position: fixed; left: 0; right: 0; bottom: 9px; margin: 0; text-align: center; z-index: 3; } /* Celular: a janela quase encosta na borda. */ @media (max-width: 640px) { .portal[data-pn] .portal__arte { inset: 8px 8px 30px; border-radius: 20px; } .portal[data-pn] .fundador-card { padding: 12px 14px 8px 14px; gap: 12px; } .pn-gel { height: 42px; } .portal[data-pn] .fundador-card__coroa { width: 34px; height: 34px; } .portal[data-pn] .fundador-card__texto strong { font-size: 17px; } .portal[data-pn] .fundador-card__texto small { font-size: 12.5px; } /* celular: só o ícone + a barrinha, no canto superior ESQUERDO (o dragão ocupa o direito) */ html[data-pn] .pn-player { top: 16px; right: auto; left: 16px; height: 26px; padding: 0 9px 0 3px; gap: 6px; } .pn-player__barra { width: 64px; } .pn-player__pct { display: none; } .portal[data-pn] .hexbtn .hexbtn__face { padding: 12px 40px; } } @media (orientation: landscape) and (max-height: 520px) { .portal[data-pn] .portal__arte { inset: 6px 6px 30px; border-radius: 16px; } } @media (prefers-reduced-motion: reduce) { .portal[data-pn] .portal__arte > img, .pn-ascii { transition: none; } } /* O rodapé saiu do fluxo (fica abaixo da moldura): o cartão dos Fundadores não pode descer junto e cruzar a borda. */ .portal[data-pn] .portal__content { padding-bottom: 46px; } @media (max-width: 640px) { .portal[data-pn] .portal__content { padding-bottom: 40px; } } /* 25/09 (Zerg, 00:57): "gostei do tamanho, mas volta a cor antiga do botão" — fica só o texto mais perto do gel (cartão mais baixo) e o cartão ACIMA da borda da moldura; o gel volta à altura de antes. */ .portal[data-pn] .fundador-card { row-gap: 0; padding-top: 12px; } .pn-gel { height: 52px; margin-top: -14px; } .portal[data-pn] .portal__content { padding-bottom: 54px; } @media (max-width: 640px) { .pn-gel { height: 48px; margin-top: -12px; } .portal[data-pn] .portal__content { padding-bottom: 46px; } } /* 25/09 (Zerg, ref. "Liquid metal button"): o logo num disco escuro rebaixado com um ANEL de metal líquido iridescente girando em volta (conic-gradient + máscara em anel) e um brilho que acompanha. Só transform/opacity animam. */ @property --pn-giro { syntax: ''; inherits: false; initial-value: 0deg; } .portal[data-pn] .fundador-card__coroa { position: relative; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #3b4658, #141a24 70%); box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.25); isolation: isolate; } .portal[data-pn] .fundador-card__coroa::before, .portal[data-pn] .fundador-card__coroa::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(from var(--pn-giro), #ff3d6e, #ffb13d, #fff6c2, #3dffb4, #3db4ff, #b43dff, #ff3d6e); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); animation: pn-metal 3.2s linear infinite; z-index: -1; } .portal[data-pn] .fundador-card__coroa::after { inset: -7px; filter: blur(8px); opacity: 0.75; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 7px)); mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 7px)); background: conic-gradient(from var(--pn-giro), rgb(255 61 110 / 0.9), rgb(255 177 61 / 0.9), transparent 35%, rgb(61 180 255 / 0.9), transparent 75%, rgb(255 61 110 / 0.9)); z-index: -2; } @keyframes pn-metal { to { --pn-giro: 360deg; } } .portal[data-pn] .fundador-card__coroa img { width: 70%; height: auto; filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgb(0 0 0 / 0.6)); } @media (max-width: 640px) { .portal[data-pn] .fundador-card__coroa { width: 42px; height: 42px; } } @media (prefers-reduced-motion: reduce) { .portal[data-pn] .fundador-card__coroa::before, .portal[data-pn] .fundador-card__coroa::after { animation-duration: 12s; } } /* 25/09 (Zerg, ref. "Liquid metal button" 1-36): o botão branco ganha uma BORDA de metal líquido — cromado prateado com reflexos iridescentes que correm em volta (o mesmo giro do anel do logo). A borda é o próprio fundo do botão aparecendo 3 px ao redor da face. */ .portal[data-pn] .hexbtn { padding: 3px; background: conic-gradient(from var(--pn-giro), #c9ced6 0deg, #f7f9fb 30deg, #8d949e 60deg, #ff5f8a 78deg, #ffd36b 88deg, #6df0c8 98deg, #6aa8ff 108deg, #c9ced6 125deg, #f4f6f8 170deg, #7c838d 205deg, #dfe3e8 240deg, #b18cff 262deg, #ffe08a 272deg, #c9ced6 290deg, #fafbfc 330deg, #c9ced6 360deg); animation: pn-metal 4.5s linear infinite; } .portal[data-pn] .hexbtn .hexbtn__face { background: linear-gradient(180deg, #ffffff, #eceff3); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px rgb(0 0 0 / 0.08); } .portal[data-pn] .hexbtn:hover:not(:disabled) { animation-duration: 1.8s; } @media (prefers-reduced-motion: reduce) { .portal[data-pn] .hexbtn { animation-duration: 14s; } } /* 25/09 (Zerg): "desce um pouco esse Entrar, coisa de 1 cm" (só com o login FECHADO) … */ .portal[data-pn] .splash__acao:not(:has(input)) { transform: translateY(38px); } /* translate: não empurra o resto do layout centralizado */ /* … e "arrume para que (o cartão de login) não fique em cima do logo": com o login ABERTO o logo encolhe mais e ganha folga; em tela baixa o convite dos Fundadores sai enquanto o login está aberto (ele seria empurrado para fora da moldura). */ .portal[data-pn] .portal__content:has(.splash__acao input) .splash__logo { max-height: min(22vh, 190px); width: auto; margin-bottom: 18px; } @media (max-height: 900px) { .portal[data-pn] .portal__content:has(.splash__acao input) .fundador-card { display: none; } } /* A bolha do gel sobe até ~16 px acima do trilho: um respiro para ela não cobrir a frase de baixo. */ .pn-gel { margin-top: -6px; } @media (max-width: 640px) { .pn-gel { margin-top: -5px; } }