Spaces:
Running
Running
| ```css | |
| /* Base Styles */ | |
| :root { | |
| --primary: #f47521; | |
| --primary-dark: #d8621a; | |
| --secondary: #2f3542; | |
| --accent: #ff6b81; | |
| --text: #f1f2f6; | |
| --text-dark: #2f3542; | |
| --bg-dark: #1e272e; | |
| --bg-light: #f5f6fa; | |
| } | |
| /* Global Styles */ | |
| body { | |
| font-family: 'Segoe UI', system-ui, sans-serif; | |
| color: var(--text-dark); | |
| background-color: var(--bg-light); | |
| line-height: 1.6; | |
| } | |
| .anime-bg { | |
| background: linear-gradient(135deg, rgba(30,39,46,0.9) 0%, rgba(47,53,66,0.7) 100%); | |
| } | |
| /* Header Styles */ | |
| .site-header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 1000; | |
| background: rgba(30, 39, 46, 0.9); | |
| backdrop-filter: blur(10px); | |
| padding: 1rem 2rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.2); | |
| } | |
| .header-logo img { | |
| height: 40px; | |
| transition: transform 0.3s ease; | |
| } | |
| .header-logo:hover img { | |
| transform: scale(1.05); | |
| } | |
| .header-nav { | |
| display: flex; | |
| align-items: center; | |
| gap: 2rem; | |
| } | |
| .nav-link { | |
| color: var(--text); | |
| text-decoration: none; | |
| font-weight: 500; | |
| position: relative; | |
| padding: 0.5rem 0; | |
| transition: color 0.3s ease; | |
| } | |
| .nav-link span { | |
| position: relative; | |
| } | |
| .nav-link span::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--primary); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover span::after, | |
| .nav-link.active span::after { | |
| width: 100%; | |
| } | |
| .nav-link:hover, | |
| .nav-link.active { | |
| color: var(--primary); | |
| } | |
| /* Hero Slider Styles */ | |
| .hero-slider { | |
| margin-top: 80px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .slider-container { | |
| position: relative; | |
| height: 70vh; | |
| min-height: 500px; | |
| } | |
| .slider-track { | |
| height: 100%; | |
| position: relative; | |
| } | |
| .slider-slide { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-size: cover; | |
| background-position: center; | |
| opacity: 0; | |
| transition: opacity 1s ease; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 5%; | |
| } | |
| .slider-slide.active { | |
| opacity: 1; | |
| } | |
| .slide-content { | |
| max-width: 600px; | |
| color: white; | |
| z-index: 2; | |
| } | |
| .anime-badge { | |
| display: inline-block; | |
| background: var(--primary); | |
| color: white; | |
| padding: 0.3rem 1rem; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| text-transform: uppercase; | |
| } | |
| .slide-title { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| margin-bottom: 1rem; | |
| line-height: 1.2; | |
| text-shadow: 0 2px 4px rgba(0,0,0,0.3); | |
| } | |
| .age-rating { | |
| background: rgba(0,0,0,0.5); | |
| padding: 0.2rem 0.5rem; | |
| border-radius: 4px; | |
| font-size: 0.8em; | |
| } | |
| .slide-desc { | |
| margin-bottom: 1.5rem; | |
| font-size: 1.1rem; | |
| text-shadow: 0 1px 2px rgba(0,0,0,0.5); | |
| } | |
| .slide-meta { | |
| display: flex; | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| font-size: 0.9rem; | |
| color: rgba(255,255,255,0.8); | |
| } | |
| .btn-watch { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| background: var(--primary); | |
| color: white; | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 4px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-watch:hover { | |
| background: var(--primary-dark); | |
| transform: translateY(-2px); | |
| } | |
| .slide-poster { | |
| position: absolute; | |
| right: 5%; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| height: 80%; | |
| border-radius: 8px; | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.3); | |
| transition: transform 0.3s ease; | |
| } | |
| .slide-poster:hover { | |
| transform: translateY(-50%) scale(1.05); | |
| } | |
| .slider-nav { | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| background: rgba(0,0,0,0.5); | |
| color: white; | |
| border: none; | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| z-index: 10; | |
| transition: all 0.3s ease; | |
| } | |
| .slider-nav:hover { | |
| background: var(--primary); | |
| } | |
| .slider-nav.prev { | |
| left: 2rem; | |
| } | |
| .slider-nav.next { | |
| right: 2rem; | |
| } | |
| /* Anime News Section */ | |
| .anime-news { | |
| padding: 4rem 0; | |
| background: var(--bg-dark); | |
| color: white; | |
| } | |
| .news-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: flex; | |
| gap: 3rem; | |
| padding: 0 2rem; | |
| } | |
| .news-content { | |
| flex: 1; | |
| } | |
| .news-tag { | |
| display: inline-block; | |
| background: var(--primary); | |
| color: white; | |
| padding: 0.3rem 1rem; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| } | |
| .news-title { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| margin-bottom: 1rem; | |
| } | |
| .news-title a { | |
| color: white; | |
| text-decoration: none; | |
| transition: color 0.3s ease; | |
| } | |
| .news-title a:hover { | |
| color: var(--primary); | |
| } | |
| .news-text { | |
| margin-bottom: 1.5rem; | |
| font-size: 1.1rem; | |
| line-height: 1.6; | |
| } | |
| .news-meta { | |
| display: flex; | |
| gap: 1rem; | |
| font-size: 0.9rem; | |
| color: rgba(255,255,255,0.7); | |
| } | |
| .news-video { | |
| flex: 1; | |
| } | |
| .video-wrapper { | |
| position: relative; | |
| padding-bottom: 56.25%; /* 16:9 */ | |
| height: 0; | |
| overflow: hidden; | |
| border-radius: 8px; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2); | |
| } | |
| .video-wrapper iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /* Comments Section */ | |
| .comments-section { | |
| padding: 4rem 0; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .section-header { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| .section-title { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: var(--text-dark); | |
| margin-bottom: 0.5rem; | |
| } | |
| .section-subtitle { | |
| color: var(--secondary); | |
| } | |
| .comment-form { | |
| background: white; | |
| padding: 2rem; | |
| border-radius: 8px; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1); | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-group input, | |
| .form-group textarea { | |
| width: 100%; | |
| padding: 0.8rem 1rem; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| font-family: inherit; | |
| transition: all 0.3s ease; | |
| } | |
| .form-group input:focus, | |
| .form-group textarea:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(244, 117, 33, 0.2); | |
| } | |
| .btn-submit { | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 4px; | |
| font-weight: 600; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-submit:hover { | |
| background: var(--primary-dark); | |
| transform: translateY(-2px); | |
| } | |
| /* Responsive Styles */ | |
| @media (max-width: 1024px) { | |
| .slider-slide { | |
| padding: 0 2rem; | |
| } | |
| .slide-title { | |
| font-size: 2rem; | |
| } | |
| .slide-poster { | |
| height: 70%; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .site-header { | |
| padding: 1rem; | |
| } | |
| .header-nav { | |
| gap: 1rem; | |
| } | |
| .slider-slide { | |
| flex-direction: column; | |
| justify-content: center; | |
| text-align: center; | |
| padding: 2rem; | |
| } | |
| .slide-content { | |
| max-width: 100%; | |
| } | |
| .slide-poster { | |
| position: relative; | |
| right: auto; | |
| top: auto; | |
| transform: none; | |
| height: auto; | |
| max-height: 300px; | |
| margin-top: 2rem; | |
| } | |
| .news-container { | |
| flex-direction: column; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .slide-title { | |
| font-size: 1.5rem; | |
| } | |
| .slide-desc { | |
| font-size: 1rem; | |
| } | |
| .btn-watch, | |
| .btn-submit { | |
| padding: 0.6rem 1rem; | |
| font-size: 0.9rem; | |
| } | |
| } | |
| ``` |