body { background-color: #000; font-size: 10px; background-image: url("https://bieber.com.br/wp-content/uploads/2025/10/12bgk.webp"),url("https://bieber.com.br/wp-content/uploads/2025/10/newbg.webp"); background-repeat: no-repeat, repeat; background-position: center 55px, 0 400px; background-size: 1800px, 100% auto; } .comment-like.is-liked, .comment-like.is-liked .fa-heart { color: #fff;} .notification-badge { position: absolute; top: 0px; color: #000 !important; right: -30px; background-color: #ffffff;} .subtitulo{ text-transform: uppercase; font-size: 7px; letter-spacing: 3px; border: 1px dashed #363636;} .main-flog{ margin-top: 240px; background: transparent; } .profile-esquerda{display:none;} .navbar { margin: 0 auto; background-color: #1a1a1a; z-index: 9999; } * { padding: 0; margin: 0; box-sizing: border-box; } /* 3. Contêiner Principal/Gabinete (.wrapper) */ .wrapper { width: 500px; height: 590px; background-color: transparent; position: relative; border: NONE; /* Borda de cor marrom/madeira */ /* Configuração 3D */ transform-style: preserve-3d; transform: perspective(2500px); /* A perspectiva cria o efeito de profundidade */ } /* 4. Estilo da Imagem (Conteúdo Interno) */ .wrapper img { width: 100%; height: 100%; /* background-size: cover; é uma propriedade CSS, mas o objetivo é preencher o contêiner */ } /* 5. Estilo Comum das Portas */ .door { position: absolute; /* Posiciona as portas por cima da imagem */ background: #1a1b1b; width: 50%; height: 100%;z-index: 9999; border: NONE; /* Transição para animação suave */ transition: transform 1s ease-in-out; } /* 6. Posição e Rotação da Porta 1 (Esquerda) */ .door1 { left: 0; top: 0; transform-origin: left; /* Dobradiça na esquerda */ background: url(https://bieber.com.br/wp-content/uploads/2025/10/2-2.png); background-size: 258px 500px; background-position: center; background-repeat: no-repeat; } /* 7. Posição e Rotação da Porta 2 (Direita) */ .door2 { right: 0; top: 0; z-index: 9999; position: absolute; transform-origin: right; background: url(https://bieber.com.br/wp-content/uploads/2025/10/1-2.png); background-size: 258px 500px; background-position: center; background-repeat: no-repeat; } .pixe-eventos img { width: 120px; filter: brightness(0.7);} /* 8. Estilo Comum dos Puxadores (Handles) */ .door .handle { width: 5px; height: 50px; border-radius: 12px; background-color: transparent; position: absolute; top: 45%; right: 10px; /* Posição padrão: puxador na direita da porta 1 */ } img[alt="torres"] {margin-bottom: -588px; width: 700px; height: 500px;} .texto-hb-topo {width: 500px; text-align: center; margin: 0 auto; position: relative; top: 160px; color: #850b0b; line-height: 30px;transition: transform 2s ease-in-out; font-size: 30px !important; font-weight: bold; font-family: arial; } .texto-hb-topo2 {width: 500px; text-align: center; margin: 0 auto; position: relative; top: 150px; color: #fff; letter-spacing: 6px; transition: transform 2s ease-in-out; font-size: 8px !important; font-weight: bold; font-family: arial; font-style: italic; background-color: } .divhb { width: 500px; top: 200px; background: url(https://i.imgur.com/0YqthZb.png); background-size: 500px; background-repeat: no-repeat; background-position: center; padding: 10px;} .texto-hb {width: 300px; font-size: 9px; text-align: justify; margin: 0 auto; position: relative; left: -70px; top: 150px; transition: transform 2s ease-in-out; border-top: 1px dashed #38393b;border-left: 1px dashed #38393b;border-bottom: 1px dashed #38393b; color: #6d6d6d; line-height: 16px; padding: 10px 10px 13px 10px; border-radius: 10px 0px 0px 10px;} .texto-hb-img {width: 130px; height: 230px; font-size: 9px; margin: 0 auto; position: absolute; left: 330px; top: 272px; background-position: center top; background-size: cover !important; background-repeat: no-repeat; transition: transform 2s ease-in-out; color: #6d6d6d; line-height: 16px; padding: 10px; border-radius: 0px 10px 10px 0px; background: url(https://i.imgur.com/yZCmrVl.gif); opacity: 60%;} .texto-postby{width: 180px; height: 30px; font-size: 7px; margin: 0 auto; position: absolute;padding-top:8px; letter-spacing: 3px; left: 260px; top: 490px; border-radius: 30px; background: #9a2223; color: #000; font-weight: bold;} .texto-link{display: inline-block; background: #161616; border: 1px dashed #2b2b2b; color: #971c1a; padding: 1px 9px; font-size: 9px; text-transform: uppercase; font-weight: bold; margin: 5px; border-radius: 30px; text-align: center; align-items: left !important;z-index: 9999;} .texto-link:hover{background: #fff;} .alinhado {position: absolute; bottom: 70px; left: 40px;} .post-description {margin-bottom:0;} .comentario-user{background: #16161666 !important; } /* 9. Estilo Específico do Puxador da Porta 2 */ .door2 > .handle { left: 10px; /* Move o puxador para a esquerda da porta 2 */ right: auto; /* Anula o 'right: 10px' do estilo comum */ } /* 10. Abertura da Porta (Ativada pelo hover no contêiner) */ .wrapper:hover .door1 { transform: rotateY(-150deg); /* Abre 150 graus para a esquerda */ } .wrapper:hover .door2 { transform: rotateY(150deg); /* Abre 150 graus para a direita */ } .latest-photos .latest-photo-item picture { position: relative; display: block; } .latest-photos .latest-photo-item img.flog_foto { opacity: 100%; content: ""; display: block; filter: grayscale(100%) brightness(60%); transition: all .35s; } .latest-photos img.flog_foto:hover { opacity: 100%; position: relative; filter: grayscale(0); transition: all .35s; } .latest-photos .latest-photo-item picture::after { content: ""; position: absolute; inset: 0; border: 6px solid #1e1e1e; pointer-events: none; } .photo-date{display: none;} .friends-list .latest-photo-item picture, .friends-list .friend-thumbnail picture, .friends-list .friend-item picture { position: relative; z-index:1; display: block; } .friends-list .latest-photo-item img.flog_foto, .friends-list .friend-thumbnail img, .friends-list .friend-item img { opacity: 100%; content: ""; display: block; filter: grayscale(100%) brightness(60%); transition: all .35s; } .friends-list img.flog_foto:hover, .friends-list .friend-thumbnail img:hover, .friends-list .friend-item img:hover { opacity: 100%; position: relative; filter: grayscale(0); transition: all .35s; } .lista-comentario .avatar-comentario img,.user-avatar { filter: grayscale(100%) brightness(60%); outline: 4px solid; } .friends-list .latest-photo-item picture::after, .friends-list .friend-thumbnail picture::after, .friends-list .friend-item picture::after { content: ""; position: absolute; z-index:1; inset: 0; border: 6px solid #222222; pointer-events: none; } .boost-tip {display: none !important;} .post-img { display: flex; image-rendering: auto; position: relative; justify-content: center; border: 1px solid #3b3b3b; outline: 10px solid #202020; } .friends-list .name-friend { position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 10px; background: transparent; backdrop-filter: none; } img[src="https://pixelog.me/assets/img/gv.gif"] { content: url(https://i.pinimg.com/originals/0d/ed/94/0ded940b05f6c94bdd0566670bf14488.gif); max-width: 15px; filter: grayscale(1); } img[src="https://pixelog.me/assets/img/gv.gif"] { content: url(https://i.pinimg.com/originals/0d/ed/94/0ded940b05f6c94bdd0566670bf14488.gif) !important; max-width: 15px; filter: grayscale(1); } /* CSS */ .spider { position: fixed; width: 50px; height: 50px; background-image: url('https://i.gifer.com/24Rx.gif'); background-size: cover; background-repeat: no-repeat; z-index: 9999; transform-origin: top center; } /* Posições horizontais diferentes */ .spider-left { left: 20px; } .spider-right { right: 20px; } /* Lado esquerdo - intercalado */ .spider1 { left: 20px; animation: down1 6s linear infinite alternate; transform: scaleX(-1) scaleY(-1); } /* desce */ .spider2 { left: 80px; animation: up2 7s linear infinite alternate; transform: scaleX(-1);} /* sobe */ .spider5 { left: 140px; animation: down5 6.5s linear infinite alternate; } /* desce */ .spider6 { left: 200px; animation: up6 7.5s linear infinite alternate; } /* sobe */ /* Lado direito - intercalado */ .spider3 { right: 20px; animation: up3 6s linear infinite alternate; } /* sobe */ .spider4 { right: 80px; animation: down4 7s linear infinite alternate; } /* desce */ .spider7 { right: 140px; animation: up7 6.5s linear infinite alternate; }/* sobe */ .spider8 { right: 200px; animation: down8 7.5s linear infinite alternate; }/* desce */ /* Animações de descida */ @keyframes down1 { 0% { top: 0; transform: rotate(-5deg);} 100% { top: 100%; transform: rotate(5deg);} } @keyframes down4 { 0% { top: 0; transform: rotate(-5deg);} 100% { top: 100%; transform: rotate(5deg);} } @keyframes down5 { 0% { top: 10%; transform: rotate(5deg);} 100% { top: 100%; transform: rotate(-5deg);} } @keyframes down8 { 0% { top: 20%; transform: rotate(5deg);} 100% { top: 100%; transform: rotate(-5deg);} } /* Animações de subida */ @keyframes up2 { 0% { top: 100%; transform: rotate(-5deg);} 100% { top: 0; transform: rotate(5deg);} } @keyframes up3 { 0% { top: 100%; transform: rotate(5deg);} 100% { top: 0; transform: rotate(-5deg);} } @keyframes up6 { 0% { top: 100%; transform: rotate(-5deg);} 100% { top: 10%; transform: rotate(5deg);} } @keyframes up7 { 0% { top: 100%; transform: rotate(5deg);} 100% { top: 20%; transform: rotate(-5deg);} } .like-count { margin-top: 5px; font-size: 10px;} .like-text {display: none;} .like-button {border: none; z-index:9999;} .like-button:hover {background: transparent;} .like-icon{ width: 30px; height: 30px; margin-left: 70px;} .like-count:hover {background: transparent;} .like-button.liked { background: transparent !important;} .likers-preview { display: flex; margin-left: 20px;} .likers-preview img { filter: grayscale(1); opacity: 30%; border: none; transition: all 0.5s ease-out;} .flog-footer { text-align: center !important; background: url(https://i.imgur.com/KDsIqvu.png); background-position: center; color: #a6ffd3; background-size: cover; text-transform: uppercase; font-size: 5px !important; text-decoration: none; max-width: none !important; border-radius: 50px 50px 0px 0px; margin-top: -30px; margin-bottom: 0px; position: relative; z-index: 200; width: 700px;outline: 1px dashed #323232; height: 100px; left: 50%; transform: translateX(-50%); margin-left: 0; /* Remove a margem extra, se houver */ margin-right: 0; /* Remove a margem extra, se houver */ } .flog-footer p { font-size: 9px !important; font-family: courier; margin-top: 0px; font-style: italic; display: inline-block; transform: rotate(-90deg); color: transparent; font-family: arial; } .flog-footer a { display:none;} .flog-footer a:hover {color: #605d7c; font-style: none; color: #a6ffd3;} ::selection { background-color: #3d3d3d; color: #e3e3e3; } ::-moz-selection { background-color: #3d3d3d; color: #e3e3e3; } ::-webkit-selection { background-color: #3d3d3d; color: #e3e3e3; } .navbar-content { margin-left: 240px !important;} .navbar { display: flex !important; align-items: center !important; position: relative; box-shadow: 0px 0px 20px 10px #951a18;; backdrop-filter: none; justify-content: space-between !important; background: #951a18; } .navbar-right { display: flex !important; align-items: center !important; gap: 70px !important; } .boostWrap {display: none !important;} .btn.btn-boost {display: none !important;} .navbar a, .navbar button { display: inline-flex !important; align-items: center !important; text-align: center !important; margin-right: 30px !important; } /* ===== ESTILO ORIGINAL CONSERTADO ===== */ .fas.fa-house, .far.fa-bell, .profile-name, .post-button { font-size: 7px !important; font-family: arial !important; text-transform: uppercase !important; border: 1px dashed #fff !important; letter-spacing: 2px !important; font-style: normal !important; padding: 10px !important; color: #fff !important; border-radius: 30px !important; text-align: center !important; background: url(https://i.imgur.com/SwAAlDl.png) !important; cursor: crosshair !important; margin-right: 15px !important; /* espaçamento entre botões */ } /* ===== HOVER ORIGINAL CONSERTADO ===== */ .fas.fa-house:hover, .far.fa-bell:hover, .profile-name:hover, .post-button:hover { background: #fff !important; width: auto !important; color: #141314 !important; border: 1px dashed #fff !important; text-decoration: line-through; font-size: 8px !important; font-family: arial !important; text-transform: uppercase !important; letter-spacing: 2.6px !important; font-weight: bold !important; width: auto !important; cursor: crosshair !important; } .post-button { min-width: max-content !important; } /* Remove qualquer pseudo-elemento problemático */ .post-button::before, .post-button::after { display: none !important; content: none !important; } .fas.fa-house, .far.fa-bell, .profile-name, .post-button { height: 30px !important; /* Altura fixa igual para todos */ display: inline-flex !important; align-items: center !important; justify-content: center !important; } .fa-house:before { content: 'HOME' !important; font-family: arial !important; } .far.fa-envelope:before { content: 'MESSAGES' !important; font-family: arial !important; } .far.fa-bell:before { content: 'NOTIFICATIONS' !important; font-family: arial !important; } .user-profile { background: transparent; } .user-profile:hover { background: transparent; } .profile-name { font-size: 10px !important; font-family: arial; text-transform: uppercase; letter-spacing: 2px; } .nav-icon:hover { background: transparent; } .navbar-left, .fas.fa-search, .fa-solid.fa-image, .post-count, .profile-pic, .theme-toggle { display: none; }ant; justify-content: space-between !important; } .navbar-right { display: flex !important; align-items: center !important; gap: 30px !important; } .navbar a, .navbar button { display: inline-flex !important; align-items: center !important; text-align: center !important; margin-right: 30px !important; } .fas.fa-house, .far.fa-bell { background: transparent; font-family: arial; text-transform: uppercase; letter-spacing: 2px; font-weight: normal; } .fa-house:before { content: 'HOME' !important; font-family: arial !important; } .far.fa-envelope:before { content: 'MESSAGES' !important; font-family: arial !important; } .pixe-eventos .px-tip { filter:grayscale(1) !important; opacity: 90% !important; filter: brightness(3);} .far.fa-bell:before { content: 'NOTIFICATIONS' !important; font-family: arial !important; } .user-profile { background: transparent; } .user-profile:hover { background: transparent; } .profile-name { font-size: 8px !important; font-family: arial; text-transform: uppercase; letter-spacing: 2px; margin-left: -70px !important;} } .nav-icon:hover { background: transparent; } .navbar-left, .fas.fa-search, .fa-solid.fa-image, .post-count, .profile-pic, .theme-toggle { display: none; } .comment-textarea { border-radius: 5px; color: #3e3e3e; box-shadow: none !important; font-size: 11px; font-family: arial; border: 1px solid #222222; background: #15151480; background-position: center; background-size: 400px; background-repeat: repeat; height: 140px;} .comment-textarea.expanded{ border-radius: 5px; color: #fff; box-shadow: none !important; font-size: 11px; font-family: arial; border: 1px solid #222222; background: #15151480; outline: none !important; background-position: center; background-size: 400px; background-repeat: repeat; height: 140px;} textarea:focus {border: 1px solid #716f8d; box-shadow: none !important; } .comment-textarea::placeholder { color: #3e3e3e !important; font-style: normal; font-size: 11px; letter-spacing: 0px; box-shadow: none !important;} .comment-submit { font-family: arial; text-transform: uppercase; background: #15151515; border: 1px dashed #3e3e3e; border-radius: 5px;font-weight: bold; font-style: normal; color: #767676;font-size: 10px; width: 90px;} .dropdown-menu, .dropdown-item {font-size: 7px !important; padding: 10px; text-transform: uppercase;font-weight: bold; backdrop-filter: none; background: url(https://i.imgur.com/SwAAlDl.png); border: none; color: #fff !important;} .dropdown-menu:hover, .dropdown-item:hover, .dropdown-menu a:hover {color: #a71517 !important; letter-spacing: 2px;} .notifications-dropdown, .notifications-title, .notification-text, .clear-notifications, .notifications-dropdown a {font-size: 8px !important; padding: 7px; max-width: 200px;text-transform: uppercase; background: url(https://i.imgur.com/SwAAlDl.png); border: none; color: #fff !important; text-align: right;} a.btn-flog {border-radius: 30px !important; box-shadow: 0px 0px 10px 0px #a71517;} img[src="https://pixelog.me/assets/selos/pixegold.svg"] { content: url(https://i.imgur.com/aTUKHJd.png);max-width: 120px !important;margin-top: -20px; opacity: 60%;} .link-item{text-align: center;} .flog-created {margin-left: 15px; color: #787878;} .visitas-item{color: #787878; text-align: center;} .sidebar-right {position: relative; z-index: 1;} .post-description {position:relative; z-index: 999;} .content {position:relative; z-index: 999;} b {color: #8e2927 !important;} .promo-box{border-radius: 10px; padding: 20px; width: 400px; border: 1px dashed #393939; background: #16161666; text-align: justify;} .content-item { margin-bottom: 8px; margin-left: 30px; } .lista-comentario .comentario-user p, .lista-comentario .comentario-user, .lista-comentario .comentario-nome-usuario { white-space: normal; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; }