*/ body.light-mode { --primary-color: #940533; --secondary-color: #ffb300; --tertiary-color: #0ec0c1; --background-color: #f5f5f5; /* Fundo claro */ --card-background: #ffffff; /* Fundo dos cards claros */ --text-color: #141414; /* Cor do texto escuro */ --hover-color: #0ec0c1; /* Azul ciano para hover */ --border-color: #ccc; /* Cor da borda clara */ --header-bg: rgba(245, 245, 245, 0.9); /* Fundo do cabeçalho semi-transparente */ --box-shadow-color: rgba(0, 0, 0, 0.1); /* Sombra para o tema claro */ } /* Estilos gerais do corpo da página */ body { font-family: 'Poppins', sans-serif; background-color: var(--background-color); color: var(--text-color); margin: 0; padding: 0; /* Transições suaves para a mudança de tema */ transition: background-color 0.5s, color 0.5s; } /* Estilos do cabeçalho */ header { display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; background-color: var(--header-bg); position: fixed; /* Fixa o cabeçalho no topo da página */ width: 100%; top: 0; left: 0; z-index: 1000; box-shadow: 0 2px 10px var(--box-shadow-color); transition: background-color 0.5s; } /* Estilos do logo */ .logo { font-size: 2em; font-weight: 700; /* Poppins Bold */ color: var(--primary-color); } /* Estilos do menu de navegação */ .nav-menu { list-style: none; display: flex; gap: 30px; margin: 0; padding: 0; } .nav-menu a { text-decoration: none; color: var(--text-color); font-weight: 300; /* Poppins Light */ font-size: 1.1em; transition: color 0.3s ease; /* Animação suave para a cor ao passar o mouse */ } .nav-menu a:hover { color: var(--secondary-color); } /* Botão para alternar o tema (dark/light) */ .theme-toggle { background-color: transparent; border: 2px solid var(--border-color); color: var(--text-color); cursor: pointer; font-size: 1.2em; padding: 5px 10px; border-radius: 20px; transition: background-color 0.3s, border-color 0.3s; } .theme-toggle:hover { background-color: var(--card-background); } /* Oculta os ícones de acordo com o tema */ .icon-light, .icon-dark { display: inline-block; } body.light-mode .icon-light { display: none; } body:not(.light-mode) .icon-dark { display: none; } /* Estilos do conteúdo principal e seções */ main { padding-top: 100px; /* Espaço para o cabeçalho fixo */ } .content-section { padding: 50px 40px; } .section-title { font-size: 2em; font-weight: 700; /* Poppins Bold */ margin-bottom: 20px; border-left: 5px solid var(--primary-color); padding-left: 15px; } /* Estilos do carrossel (container flex) */ .carousel-container { display: flex; overflow-x: auto; /* Permite rolagem horizontal */ gap: 20px; padding-bottom: 20px; /* Estilo para a barra de rolagem para um visual mais moderno */ scrollbar-width: thin; scrollbar-color: var(--secondary-color) var(--card-background); } /* Estilo da barra de rolagem no WebKit (Chrome, Safari) */ .carousel-container::-webkit-scrollbar { height: 8px; } .carousel-container::-webkit-scrollbar-thumb { background-color: var(--secondary-color); border-radius: 10px; } .carousel-container::-webkit-scrollbar-track { background-color: var(--card-background); } /* Estilos dos cards de filmes e séries (inspirados na Netflix) */ .movie-card { flex-shrink: 0; /* Impede que os cards encolham */ width: 200px; border-radius: 8px; overflow: hidden; background-color: var(--card-background); box-shadow: 0 4px 8px var(--box-shadow-color); cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; } .movie-card:hover { transform: scale(1.05); /* Efeito de zoom ao passar o mouse */ box-shadow: 0 6px 12px var(--box-shadow-color); } .movie-card img { width: 100%; height: 300px; object-fit: cover; /* Garante que a imagem preencha o espaço sem distorção */ } .card-info { padding: 15px; } .card-info h3 { margin: 0; font-size: 1.2em; font-weight: 700; color: var(--text-color); } .card-info p { margin: 5px 0 0; font-size: 0.9em; color: #aaa; font-weight: 300; } /* Estilos da seção de contato */ .contact-form { display: flex; flex-direction: column; max-width: 600px; margin: 0 auto; } .contact-form input, .contact-form textarea { padding: 15px; margin-bottom: 20px; border: 1px solid var(--border-color); border-radius: 5px; background-color: var(--card-background); color: var(--text-color); font-family: 'Poppins', sans-serif; transition: border-color 0.3s; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--secondary-color); box-shadow: 0 0 5px var(--secondary-color); } .contact-form button { background-color: var(--primary-color); color: white; padding: 15px; border: none; border-radius: 5px; font-size: 1.1em; font-weight: 700; cursor: pointer; transition: background-color 0.3s; } .contact-form button:hover { background-color: #a7063a; } /* Estilos do player sobreposto (popup) */ .video-player { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); display: none; /* Inicia oculto */ justify-content: center; align-items: center; z-index: 2000; opacity: 0; transition: opacity 0.5s ease; /* Animação suave de entrada */ } /* Classe para exibir o player */ .video-player.active { display: flex; opacity: 1; } .player-content { position: relative; width: 90%; max-width: 900px; /* Proporção 16:9 para o iframe, com base na largura */ height: 0; padding-bottom: 56.25%; } .player-content iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .close-player { position: absolute; top: 10px; right: 15px; color: white; font-size: 2em; font-weight: bold; cursor: pointer; z-index: 2001; transition: color 0.3s; } .close-player:hover { color: var(--primary-color); } /* * Estilos para responsividade (Adaptável a diversos dispositivos) * O layout se ajusta para telas menores */ @media (max-width: 768px) { header { flex-direction: column; padding: 15px; } .logo { margin-bottom: 10px; } .nav-menu { gap: 15px; } .content-section { padding: 30px 20px; } .carousel-container { padding-bottom: 15px; } .movie-card { width: 150px; } .movie-card img { height: 225px; } .contact-form { padding: 0 15px; } } @media (max-width: 480px) { header { padding: 10px; } .nav-menu { gap: 10px; } .nav-menu a { font-size: 1em; } .content-section { padding: 20px 10px; } .movie-card { width: 120px; } .movie-card img { height: 180px; } } ]]>

Filmes Populares

Séries em Alta

Entre em Contato

Dúvidas, sugestões ou problemas? Fale com a nossa equipe!