* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background: #141414; } /* Estilos da galeria */ .gallery-container { width: 100%; max-width: 100%; margin: 0px auto; padding: 20px; } .gallery-grid { margin: 0 auto; width: 100%; max-width: 100%; /* Limita a largura máxima */ } .gallery-card { width: 280px !important; /* Largura fixa do card */ max-width: 280px !important; margin-bottom: 15px; position: relative; background: #ffffff00; border-radius: 17px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.1); opacity: 0; transition: all 0.1s ease-out; break-inside: avoid; } .gallery-link { position: relative; display: block; width: 100%; height: 100%; } .gallery-image { display: block; width: 101%; height: auto !important; max-height: 100% !important; object-fit: cover !important; border-radius: 20px; transform: scale(1); transition: all 0.1s ease-out; } /*.gallery-image { display: block; width: 101% !important; height: auto !important; object-fit: cover !important; border-radius: 20px !important; transform: scale(1); transition: all 0.1s ease-out; }*/ .gallery-card:hover { transform: scale(1); /* Escurece a imagem no hover */ } .gallery-card:hover .gallery-image { filter: brightness(0.9); /* clareia a imagem no hover */ transform: scale(1.07); transition: all 0.2s ease-in; } /* Novo estilo para o título com efeito de escala */ .gallery-info { position: absolute; top: auto; left: 2%; right: 2%; bottom: 4px; display: flex; flex-direction: column; justify-content: start; align-items: start; padding: 10px; background: #0f121ce0; opacity: 1; transition: all 0.5s ease-out; border-radius: 18px; } .gallery-card:hover .gallery-info { opacity: 1; /* Mostra o info no hover */ transition: all 0.4s ease-out; /* Transição mais suave para saída */ } .gallery-info h3 { font-size: 13px; color: white; text-align: start; transform: scale(1); margin-bottom: 52px; transition: all 0.5s ease-out; /* Transição mais suave para saída */ padding-left: 4px; } .gallery-card:hover .gallery-info h3 { transform: scale(1); transition: all 0.4s ease-out; /* Transição mais suave para saída */ } .gallery-info p { font-size: 12px; color: rgba(255, 255, 255, 0.8); line-height: 1.4; text-align: start; transform: scale(1); transition: all 0.5s ease-out; /* Transição mais suave para saída */ margin-bottom: 50px; padding-left: 4px; } .gallery-card:hover .gallery-info p { transform: scale(1); transition: all 0.4s ease-out; /* Transição mais suave para saída */ } /* Responsividade */ @media (max-width: 768px) { .gallery-grid { /*grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 15px; padding: 15px;*/ width: 250px; /*.gallery-image { height: 280px;*/ } .gallery-container { padding: 10px; } } /* Lightbox Estilo Pinterest */ .lightbox { display: none; position: fixed; top: 74px; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.95); z-index: 99999; /* Aumentado o z-index */ overflow-y: auto; } .lightbox-wrapper { display: flex; max-width: 1200px; margin: 40px auto; background: #ffffff00; border-radius: 20px; position: relative; /* Adicionado */ z-index: 100000; /* Maior que o lightbox */ border-radius: 18px 0 0 18px; } .lightbox-close { position: fixed; /* Mudado para fixed */ top: 20px; right: 30px; color: #fff; font-size: 35px; font-weight: bold; cursor: pointer; z-index: 100001; /* Maior que o wrapper */ background: rgba(0, 0, 0, 0.5); /* Fundo semi-transparente */ width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* Ajuste nas colunas */ .lightbox-image-column { flex: 2; background: #000000; position: relative; z-index: 100000; min-height: 400px; /* Altura mínima */ display: flex; align-items: center; border-radius: 18px 0 0 18px; margin-right: 0px; } .lightbox-content { width: 100%; height: auto; max-height: 50vh; object-fit: contain; border-radius: 18px 0 0 18px; } /* Ajuste no painel de informações */ .lightbox-info-column { flex: 1; min-width: 400px; max-width: 400px; padding: 24px; left: 1px; color: white; background: #1a1919; overflow-y: auto; position: relative; z-index: 100000; border-radius: 0 18px 18px 0; border-left: 1px solid #353533; border-right: 1px solid #353533; width: 328px; height: 840px; max-height: 840px; } /* Cabeçalho */ .lightbox-header { margin-bottom: 20px; } .lightbox-title { font-size: 23px; margin-bottom: 16px; color: white; } .lightbox-author { display: flex; align-items: center; gap: 12px; color: white; margin-bottom: 20px; } .author-avatar { width: 48px; height: 48px; border-radius: 50%; /*object-fit: cover;*/ background: #2a2d3a; /* Cor de fundo mais escura */ display: flex; align-items: center; justify-content: center; color: #e7e7e7; font-size: 24px; /* Tamanho reduzido do ícone */ transition: all 0.3s ease; } /* Ações */ .lightbox-actions { display: flex; gap: 12px; margin: 20px 0; } .action-button { padding: 12px 20px; border: none; border-radius: 24px; cursor: pointer; font-weight: 600; } .like-button { background: #e60023; color: white; } .save-button { background: #e60023; color: white; flex: 1; } .share-button { background: #efefef; color: #111; } /* Comentários */ /* Substitua os estilos dos comentários por estes */ .lightbox-comments { margin-top: 129%; /* 512px */ border-top: 1px solid rgba(255, 255, 255, 0.2); padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, 0.05); } .lightbox-comments h3 { color: white; margin-bottom: 20px; font-size: 18px; } /* Ajuste no formulário de comentários */ .comment-form { position: relative; margin-top: 20px; } .comment-form textarea { width: 100%; padding: 40px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 25px; color: #d9d9d9; font-size: 14px; min-height: 65px; resize: none; overflow: hidden; padding-right: 40px; padding-left: 11px; padding-top: 23px; padding-bottom: 7px; font-family: Arial, sans-serif; } /* Ajuste no placeholder */ .comment-form textarea::placeholder { color: rgba(255, 255, 255, 0.7); opacity: 1; } /* Novo estilo para o botão de enviar como ícone */ .comment-form button { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #575252; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; transition: color 0.3s ease; } .comment-form button:hover { color: #747474; } /* Remove o scroll da textarea */ .comment-form textarea::-webkit-scrollbar { display: none; } /* Ajuste nas imagens relacionadas */ .related-images { max-width: 1200px; margin: 40px auto; padding: 0 20px; position: relative; z-index: 100000; } .related-images h3 { color: white; margin-bottom: 20px; } .related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; background: rgba(0, 0, 0, 0.95); padding: 20px; border-radius: 16px; } /* Responsividade ajustada */ @media (max-width: 1024px) { .lightbox-wrapper { flex-direction: column; margin: 0; height: auto; border-radius: 0; } .lightbox-info-column { min-width: 100%; max-width: 100%; } .lightbox-close { top: 10px; right: 10px; } } .gallery-container { position: relative; z-index: 1; /* Mantém a galeria em um z-index baixo */ } .author-avatar { color: white; font-size: 48px; /* Mantém o tamanho equivalente ao avatar original */ } /* Se quiser um efeito de hover */ .author-avatar:hover { color: #e6e6e6; transition: color 0.3s ease; background: #353842; transform: scale(1.05); } .author-name { color: #e7e7e7; font-size: 14px; font-weight: 500; } /* Fim do Lightbox ============================================================ */