:root{--metal-red:#dc2626;--metal-dark:#000000;--metal-darker:#0a0a0a;--metal-gray:#1a1a1a;--metal-silver:#e5e5e5;--metal-gold:#fbbf24;--metal-blood:#7f1d1d;--font-heading:'Metal Mania', cursive;--font-subheading:'Oxanium', sans-serif;--font-body:'Roboto', sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--metal-dark);color:var(--metal-silver);font-family:var(--font-body);line-height:1.6;overflow-x:hidden}.container{max-width:1200px;margin:0 auto;padding:0 1rem}.metal-header{background:rgba(0,0,0,.9);backdrop-filter:blur(10px);position:fixed;width:100%;top:0;z-index:1000;border-bottom:2px solid var(--metal-red)}.metal-nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 0}.band-logo{text-decoration:none;color:var(--metal-silver)}.logo-text{font-family:var(--font-heading);font-size:1.8rem;color:var(--metal-red);text-shadow:2px 2px 4px rgba(0,0,0,.5)}.logo-subtitle{font-family:var(--font-subheading);font-size:.7rem;color:var(--metal-silver);text-transform:uppercase;letter-spacing:2px}.nav-menu{display:flex;gap:2rem}.nav-link{color:var(--metal-silver);text-decoration:none;text-transform:uppercase;font-weight:700;letter-spacing:1px;transition:color .3s ease;position:relative}.nav-link:hover,.nav-link.active{color:var(--metal-red)}.nav-link::after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:2px;background:var(--metal-red);transition:width .3s ease}.nav-link:hover::after,.nav-link.active::after{width:100%}.metal-hero{background:linear-gradient(rgba(0,0,0,.7),rgba(220,38,38,.3)),url(/images/hero-bg.jpg);background-size:cover;background-position:50%;background-attachment:fixed;height:100vh;display:flex;align-items:center;position:relative}.hero-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at center,transparent 0%,black 70%)}.hero-content{text-align:center;position:relative;z-index:2}.hero-title{font-family:var(--font-heading);font-size:5rem;color:var(--metal-red);text-shadow:3px 3px 6px rgba(0,0,0,.8);margin-bottom:1rem;animation:headbang 3s ease-in-out infinite}@keyframes headbang{0%,100%{transform:rotate(0)}25%{transform:rotate(2deg)}75%{transform:rotate(-2deg)}}.hero-subtitle{font-family:var(--font-subheading);font-size:1.5rem;color:var(--metal-silver);margin-bottom:2rem;text-transform:uppercase;letter-spacing:3px}.btn{display:inline-block;padding:12px 30px;border:2px solid var(--metal-red);border-radius:0;text-decoration:none;text-transform:uppercase;font-weight:700;letter-spacing:1px;transition:all .3s ease;margin:0 .5rem}.btn-danger{background:var(--metal-red);color:#fff}.btn-danger:hover{background:0 0;color:var(--metal-red);transform:translateY(-2px);box-shadow:0 5px 15px rgba(220,38,38,.4)}.btn-outline{background:0 0;color:var(--metal-red)}.btn-outline:hover{background:var(--metal-red);color:#fff;transform:translateY(-2px)}.section{padding:5rem 0}.bg-dark{background:var(--metal-darker)}.section-title{font-family:var(--font-heading);font-size:3rem;text-align:center;color:var(--metal-red);margin-bottom:3rem;position:relative}.section-title::after{content:'';display:block;width:100px;height:3px;background:var(--metal-red);margin:1rem auto}.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.news-card{background:var(--metal-gray);padding:2rem;border-left:4px solid var(--metal-red);transition:transform .3s ease}.news-card:hover{transform:translateY(-5px)}.news-date{color:var(--metal-red);font-size:.9rem;font-weight:700;margin-bottom:.5rem}.news-title{font-family:var(--font-subheading);margin-bottom:1rem}.news-title a{color:var(--metal-silver);text-decoration:none}.news-title a:hover{color:var(--metal-red)}.news-excerpt{color:#999;margin-bottom:1rem}.news-link{color:var(--metal-red);text-decoration:none;font-weight:700}.concerts-list{max-width:800px;margin:0 auto}.concert-item{display:flex;align-items:center;background:var(--metal-gray);margin-bottom:1rem;padding:1.5rem;border:1px solid #333;transition:all .3s ease}.concert-item:hover{border-color:var(--metal-red);transform:translateX(10px)}.concert-date{text-align:center;margin-right:2rem;min-width:80px}.date-day{display:block;font-size:2rem;font-weight:700;color:var(--metal-red)}.date-month{display:block;text-transform:uppercase;font-size:.9rem;letter-spacing:1px}.concert-info{flex-grow:1}.concert-title{font-family:var(--font-subheading);margin-bottom:.5rem}.concert-location{color:var(--metal-silver);font-weight:700}.concert-venue{color:#999;font-size:.9rem}.concert-actions{display:flex;gap:1rem}.btn-sm{padding:8px 20px;font-size:.9rem}.metal-footer{background:var(--metal-darker);border-top:2px solid var(--metal-red);padding:3rem 0 1rem}.footer-content{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.footer-brand h3{font-family:var(--font-heading);color:var(--metal-red);margin-bottom:.5rem}.footer-social{display:flex;gap:1rem}.social-link{color:var(--metal-silver);text-decoration:none;text-transform:uppercase;font-weight:700;transition:color .3s ease}.social-link:hover{color:var(--metal-red)}.footer-copyright{text-align:center;padding-top:2rem;border-top:1px solid #333;color:#666}@media(max-width:768px){.hero-title{font-size:3rem}.nav-menu{display:none}.concert-item{flex-direction:column;text-align:center}.concert-date{margin-right:0;margin-bottom:1rem}.concert-actions{margin-top:1rem}.footer-content{flex-direction:column;gap:2rem;text-align:center}}.concert-hero{background-size:cover;background-position:50%;padding:120px 0 80px;text-align:center;margin-top:80px}.concert-badge{display:inline-block;background:var(--metal-red);color:#fff;padding:8px 20px;text-transform:uppercase;font-weight:700;letter-spacing:2px;margin-bottom:2rem;font-size:.9rem}.concert-title{font-family:var(--font-heading);font-size:3.5rem;color:#fff;margin-bottom:2rem;text-shadow:2px 2px 4px rgba(0,0,0,.8)}.concert-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:2rem;margin-bottom:3rem}.meta-item{display:flex;align-items:center;gap:.5rem;background:rgba(0,0,0,.7);padding:.8rem 1.5rem;border-radius:5px}.meta-icon{font-size:1.2rem}.meta-text{font-weight:700;color:var(--metal-silver)}.btn-large{padding:15px 40px;font-size:1.1rem}.details-grid{display:grid;grid-template-columns:2fr 1fr;gap:3rem}.details-content{background:var(--metal-gray);padding:2rem}.concert-description h2{color:var(--metal-red);font-family:var(--font-subheading);margin:2rem 0 1rem}.concert-description h2:first-child{margin-top:0}.concert-description ul{margin-left:1.5rem;margin-bottom:1.5rem}.concert-description li{margin-bottom:.5rem}.sidebar-card{background:var(--metal-gray);padding:1.5rem;margin-bottom:2rem;border-left:3px solid var(--metal-red)}.sidebar-card h3{color:var(--metal-red);font-family:var(--font-subheading);margin-bottom:1rem;border-bottom:1px solid #333;padding-bottom:.5rem}.lineup-list{list-style:none;margin:0}.lineup-item{padding:.8rem 0;border-bottom:1px solid #333;font-weight:700}.lineup-item:last-child{border-bottom:none}.lineup-item:first-child{color:var(--metal-gold);font-size:1.1rem}.info-list{display:flex;flex-direction:column;gap:1rem}.info-item{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #333}.social-share{display:flex;gap:1rem}.share-btn{flex:1;padding:10px;border:none;border-radius:5px;color:#fff;font-weight:700;cursor:pointer;transition:all .3s ease}.share-btn.vk{background:#4a76a8}.share-btn.tg{background:#08c}.share-btn:hover{transform:translateY(-2px);opacity:.9}.map-container{background:var(--metal-gray);padding:2rem;text-align:center}.map-placeholder{color:var(--metal-silver)}.button-shortcode{display:inline-block;background:var(--metal-red);color:#fff;padding:15px 30px;text-decoration:none;font-weight:700;text-transform:uppercase;border:2px solid var(--metal-red);transition:all .3s ease;margin:1rem 0}.button-shortcode:hover{background:0 0;color:var(--metal-red)}@media(max-width:968px){.details-grid{grid-template-columns:1fr}.concert-meta{flex-direction:column;align-items:center;gap:1rem}.concert-title{font-size:2.5rem}}.concerts-hero{background:linear-gradient(rgba(0,0,0,.8),rgba(220,38,38,.3));padding:140px 0 10px;text-align:center;margin-top:20px}.page-title{font-family:var(--font-heading);font-size:4rem;color:var(--metal-red);margin-bottom:1rem}.page-subtitle{font-size:1.3rem;color:var(--metal-silver);opacity:.9}.concerts-grid{max-width:1000px;margin:0 auto}.concert-card-large{display:flex;background:var(--metal-gray);margin-bottom:2rem;border:2px solid #333;transition:all .3s ease;position:relative;overflow:hidden}.concert-card-large::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--metal-red)}.concert-card-large:hover{border-color:var(--metal-red);transform:translateY(-5px);box-shadow:0 10px 30px rgba(220,38,38,.2)}.concert-date-large{background:var(--metal-darker);padding:2rem;text-align:center;min-width:120px;display:flex;flex-direction:column;justify-content:center;align-items:center}.date-day{display:block;font-size:2.5rem;font-weight:900;color:var(--metal-red);line-height:1}.date-month{display:block;font-size:1.2rem;text-transform:uppercase;color:var(--metal-silver);font-weight:700;letter-spacing:1px;margin:.5rem 0}.date-year{display:block;font-size:.9rem;color:#999}.concert-content{padding:2rem;flex-grow:1}.concert-title{font-family:var(--font-subheading);font-size:1.8rem;margin-bottom:1rem}.concert-title a{color:var(--metal-silver);text-decoration:none}.concert-title a:hover{color:var(--metal-red)}.concert-meta{display:flex;gap:1.5rem;margin-bottom:1rem;flex-wrap:wrap}.concert-meta .meta-item{background:0 0;padding:0;color:#999;font-size:.9rem}.concert-excerpt{color:#ccc;margin-bottom:1.5rem;line-height:1.6}.concert-actions{display:flex;gap:1rem}.past-concerts{max-width:800px;margin:0 auto}.past-concert-item{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;border-bottom:1px solid #333;transition:all .3s ease}.past-concert-item:hover{background:rgba(255,255,255,5%);padding-left:1rem}.past-date{color:var(--metal-red);font-weight:700;min-width:120px}.past-title{flex-grow:1;margin:0 1rem;color:var(--metal-silver)}.past-location{color:#999;font-size:.9rem}.no-concerts,.no-past-concerts{text-align:center;padding:3rem;color:#666}.no-concerts h3{color:var(--metal-silver);margin-bottom:1rem}@media(max-width:768px){.page-title{font-size:2.5rem}.concert-card-large{flex-direction:column}.concert-date-large{flex-direction:row;justify-content:center;gap:1rem;padding:1rem}.date-day,.date-month,.date-year{display:inline;font-size:1.2rem}.concert-meta{flex-direction:column;gap:.5rem}.concert-actions{flex-direction:column}.past-concert-item{flex-direction:column;align-items:flex-start;gap:.5rem}.past-title{margin:0}}.events-hero{background:linear-gradient(rgba(0,0,0,.8),rgba(220,38,38,.3));padding:140px 0 10px;text-align:center;margin-top:10px}.events-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem}.event-card{background:var(--metal-gray);padding:2rem;border-left:4px solid var(--metal-red);transition:all .3s ease}.event-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.3)}.event-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.event-type{padding:4px 12px;border-radius:15px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:1px}.event-type.новость{background:var(--metal-red);color:#fff}.event-type.концерт{background:var(--metal-gold);color:var(--metal-dark)}.event-date{color:#999;font-size:.9rem}.event-title{font-family:var(--font-subheading);margin-bottom:1rem}.event-title a{color:var(--metal-silver);text-decoration:none}.event-title a:hover{color:var(--metal-red)}.event-excerpt{color:#ccc;line-height:1.6;margin-bottom:1rem}.event-concert-info{display:flex;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}.event-concert-info span{font-size:.9rem;color:#999}.event-link{color:var(--metal-red);text-decoration:none;font-weight:700}.event-hero{background:linear-gradient(rgba(0,0,0,.8),rgba(220,38,38,.3));padding:120px 0 40px;margin-top:80px}.event-breadcrumb{margin-bottom:2rem}.event-breadcrumb a{color:var(--metal-silver);text-decoration:none}.event-breadcrumb a:hover{color:var(--metal-red)}.event-concert-details{background:rgba(255,255,255,.1);padding:1.5rem;margin:1.5rem 0;border-radius:5px}.event-concert-details p{margin:.5rem 0}.event-content{background:var(--metal-gray);padding:2rem;line-height:1.7}.event-footer{display:flex;justify-content:space-between;align-items:center;margin-top:2rem;padding-top:2rem;border-top:1px solid #333}.event-tags{display:flex;gap:.5rem;flex-wrap:wrap}.tag{background:rgba(220,38,38,.2);color:var(--metal-red);padding:4px 12px;border-radius:15px;font-size:.8rem}.event-share{display:flex;align-items:center;gap:1rem}.news-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.news-type{padding:3px 10px;border-radius:12px;font-size:.7rem;font-weight:700;text-transform:uppercase}.news-type.новость{background:var(--metal-red);color:#fff}.news-type.концерт{background:var(--metal-gold);color:var(--metal-dark)}.no-events,.no-news{text-align:center;padding:3rem;color:#666;grid-column:1/-1}.event-card-content{display:flex;gap:2rem;align-items:flex-start}.event-text-content{flex:1;min-width:0}.event-image{flex-shrink:0;width:200px;height:150px;border-radius:8px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,.3)}.event-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.event-card:hover .event-image img{transform:scale(1.05)}.event-image-placeholder{background:linear-gradient(45deg,var(--metal-dark),var(--metal-gray));display:flex;align-items:center;justify-content:center;color:#666;font-size:.8rem;border:2px dashed #333}.news-card-content{display:flex;gap:1.5rem;align-items:flex-start;height:100%}.news-text-content{flex:1;min-width:0;display:flex;flex-direction:column;height:100%}.news-image{flex-shrink:0;width:120px;height:120px;border-radius:6px;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.3)}.news-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.news-card:hover .news-image img{transform:scale(1.05)}.news-image-placeholder{background:linear-gradient(45deg,var(--metal-dark),var(--metal-gray));display:flex;align-items:center;justify-content:center;color:#666;font-size:.7rem;border:1px dashed #333}.event-excerpt,.news-excerpt{flex-grow:1}.event-link,.news-link{margin-top:auto;align-self:flex-start}@media(max-width:768px){.event-card-content{flex-direction:column-reverse;gap:1rem}.event-image{width:100%;height:200px;order:-1}.news-card-content{flex-direction:column-reverse;gap:1rem}.news-image{width:100%;height:150px;order:-1}.event-text-content,.news-text-content{min-width:auto}}@media(max-width:480px){.event-image{height:160px}.news-image{height:120px}}.event-hero-image{margin:0 auto 2rem;border-radius:10px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;max-width:100%}.event-hero-image img{max-width:100%;height:auto;display:block;width:auto}.event-hero-image.constrained img{max-width:min(800px,100%);width:auto;height:auto}@media(max-width:768px){.event-hero-image{margin:0 -1rem 2rem;border-radius:0}.event-hero-image img{width:100%;max-width:100%}}@media(max-width:480px){.event-hero-image img{width:100%}}} .music-hero { background: linear-gradient(rgba(0,0,0,0.8),rgba(220,38,38,0.3)); padding: 140px 0 60px; text-align: center; margin-top: 80px; } .music-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 2rem; max-width: 1000px; margin: 0 auto; } .music-card { background: var(--metal-gray); border-radius: 10px; overflow: hidden; transition: all 0.3s ease; } .music-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(220,38,38,0.2); } .music-cover { height: 200px; overflow: hidden; } .music-cover img { width: 100%; height: 100%; object-fit: cover; } .music-cover.placeholder { background: linear-gradient(45deg,var(--metal-dark),var(--metal-red)); display: flex; align-items: center; justify-content: center; font-size: 3rem; } .music-info { padding: 1.5rem; } .music-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .music-type { background: var(--metal-red); color: white; padding: 4px 12px; border-radius: 15px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; } .music-date { color: #999; font-size: 0.9rem; } .music-title { font-family: var(--font-subheading); margin-bottom: 1rem; } .music-title a { color: var(--metal-silver); text-decoration: none; } .music-title a:hover { color: var(--metal-red); } .music-description { color: #ccc; margin-bottom: 1rem; line-height: 1.5; } .music-stats { display: flex; gap: 1rem; margin-bottom: 1.5rem; color: #999; font-size: 0.9rem; } .release-header { display: flex; gap: 3rem; align-items: center; max-width: 800px; margin: 0 auto; } .release-cover { flex-shrink: 0; width: 300px; height: 300px; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.5); } .release-cover img { width: 100%; height: 100%; object-fit: cover; } .cover-placeholder { width: 100%; height: 100%; background: linear-gradient(45deg,var(--metal-dark),var(--metal-red)); display: flex; align-items: center; justify-content: center; font-size: 4rem; } .release-info { flex: 1; } .release-type { background: var(--metal-gold); color: var(--metal-dark); padding: 6px 15px; border-radius: 20px; font-weight: 700; text-transform: uppercase; font-size: 0.8rem; display: inline-block; margin-bottom: 1rem; } .release-title { font-family: var(--font-heading); font-size: 3rem; color: var(--metal-silver); margin-bottom: 1rem; } .release-meta { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; color: #999; } .release-description { color: #ccc; line-height: 1.6; font-size: 1.1rem; } .tracks-list { max-width: 800px; margin: 0 auto; } .track-item { display: flex; align-items: center; padding: 1rem 1.5rem; background: var(--metal-gray); margin-bottom: 0.5rem; border-radius: 8px; transition: all 0.3s ease; border-left: 3px solid transparent; } .track-item:hover { background: var(--metal-darker); border-left-color: var(--metal-red); } .track-item.playing { background: var(--metal-darker); border-left-color: var(--metal-red); } .track-number { width: 30px; text-align: center; color: #999; font-weight: 700; margin-right: 1rem; } .track-info { flex: 1; } .track-title { font-family: var(--font-subheading); margin-bottom: 0.3rem; color: var(--metal-silver); } .track-meta { display: flex; gap: 1rem; color: #999; font-size: 0.9rem; } .track-lyrics { color: var(--metal-gold); } .track-actions { display: flex; gap: 0.5rem; } .play-btn,.lyrics-btn { background: none; border: none; color: var(--metal-silver); cursor: pointer; padding: 0.5rem; border-radius: 5px; transition: all 0.3s ease; } .play-btn:hover { background: var(--metal-red); color: white; } .lyrics-btn:hover { background: var(--metal-gold); color: var(--metal-dark); } .pause-icon { display: none; } .playing .play-icon { display: none; } .playing .pause-icon { display: inline; } .audio-player { position: fixed; bottom: 0; left: 0; right: 0; background: var(--metal-darker); border-top: 2px solid var(--metal-red); padding: 1rem 0; z-index: 1000; } .player-container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; display: flex; align-items: center; gap: 2rem; } .track-info { flex: 1; min-width: 200px; } .current-track { display: block; font-weight: 700; color: var(--metal-silver); } .track-time { font-size: 0.9rem; color: #999; } .player-controls { display: flex; gap: 0.5rem; } .control-btn { background: none; border: none; color: var(--metal-silver); cursor: pointer; padding: 0.5rem; border-radius: 5px; transition: all 0.3s ease; } .control-btn:hover { background: var(--metal-red); color: white; } .progress-container { flex: 2; min-width: 300px; } .progress-bar { width: 100%; height: 5px; border-radius: 5px; background: #333; outline: none; -webkit-appearance: none; } .progress-bar::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--metal-red); cursor: pointer; } .volume-container { display: flex; align-items: center; gap: 0.5rem; min-width: 120px; } .volume-bar { width: 80px; height: 4px; border-radius: 2px; background: #333; outline: none; -webkit-appearance: none; } .volume-bar::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--metal-silver); cursor: pointer; } .lyrics-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.9); z-index: 2000; align-items: center; justify-content: center; } .lyrics-modal.active { display: flex; } .modal-content { background: var(--metal-gray); padding: 2rem; border-radius: 10px; max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto; position: relative; } .modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: var(--metal-silver); font-size: 1.5rem; cursor: pointer; } .modal-close:hover { color: var(--metal-red); } .lyrics-content { white-space: pre-line; line-height: 1.6; color: var(--metal-silver); margin-top: 1rem; } @media (max-width: 768px) { .release-header{flex-direction:column;text-align:center;gap:2rem}.release-cover{width:250px;height:250px}.release-title{font-size:2rem}.player-container{flex-wrap:wrap;gap:1rem}.progress-container{min-width:100%;order:1}.track-item{padding:.8rem 1rem}} @media (max-width: 480px) { .music-grid{grid-template-columns:1fr}.release-cover{width:200px;height:200px}} .terms-list { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2rem 0; } .term-tag { background: var(--metal-gray); color: var(--metal-silver); padding: 0.8rem 1.5rem; border-radius: 25px; text-decoration: none; transition: all 0.3s ease; border: 2px solid transparent; } .term-tag:hover { background: var(--metal-red); color: white; transform: translateY(-2px); } .posts-list { margin: 2rem 0; } .post-item { background: var(--metal-gray); padding: 1.5rem; margin-bottom: 1rem; border-radius: 8px; transition: all 0.3s ease; } .post-item:hover { background: var(--metal-darker); transform: translateX(10px); } .post-date { color: #999; font-size: 0.9rem; } .page-content { background: var(--metal-gray); padding: 2rem; margin: 2rem 0; border-radius: 10px; } .no-tracks { text-align: center; padding: 3rem; color: #666; background: var(--metal-gray); border-radius: 8px; } .lyrics-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.9); z-index: 2000; align-items: center; justify-content: center; } .modal-content { background: var(--metal-gray); padding: 2rem; border-radius: 10px; max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto; position: relative; } .modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: var(--metal-silver); font-size: 1.5rem; cursor: pointer; } .modal-close:hover { color: var(--metal-red); } .lyrics-content { white-space: pre-line; line-height: 1.6; color: var(--metal-silver); margin-top: 1rem; } .band-logo { display: flex; align-items: center; text-decoration: none; gap: 1rem; } .logo-img { height: 50px; width: auto; transition: all 0.3s ease; filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5)); } .band-logo:hover .logo-img { transform: scale(1.05); filter: drop-shadow(2px 2px 6px rgba(220,38,38,0.3)); } .logo-subtitle { font-family: var(--font-subheading); font-size: 0.8rem; color: var(--metal-silver); text-transform: uppercase; letter-spacing: 2px; } @media (max-width: 768px) { .band-logo{gap:.5rem}.logo-img{height:35px}.logo-subtitle{font-size:.7rem;letter-spacing:1px}} @media (max-width: 480px) { .band-logo{flex-direction:column;gap:.2rem;text-align:center}.logo-img{height:30px}.logo-subtitle{font-size:.6rem}} .about-hero { background: linear-gradient(rgba(0,0,0,0.8),rgba(220,38,38,0.3)); padding: 140px 0 60px; text-align: center; margin-top: 80px; } .band-photo { max-width: 800px; margin: 0 auto; border-radius: 15px; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.5); } .band-photo img { width: 100%; height: auto; display: block; } .about-content { max-width: 800px; margin: 0 auto; line-height: 1.7; font-size: 1.1rem; } .about-content h2 { color: var(--metal-red); font-family: var(--font-subheading); margin: 2.5rem 0 1.5rem 0; border-bottom: 2px solid var(--metal-red); padding-bottom: 0.5rem; } .about-content h3 { color: var(--metal-gold); margin: 2rem 0 1rem 0; } .about-content ul,.about-content ol { margin: 1.5rem 0; padding-left: 2rem; } .about-content li { margin-bottom: 0.5rem; } .members-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; } .member-card { background: var(--metal-gray); padding: 2rem; border-radius: 10px; text-align: center; border-left: 4px solid var(--metal-red); transition: all 0.3s ease; } .member-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(220,38,38,0.2); } .member-role { background: var(--metal-red); color: white; padding: 6px 15px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; display: inline-block; margin-bottom: 1rem; } .member-name { font-family: var(--font-subheading); color: var(--metal-silver); margin-bottom: 1rem; font-size: 1.3rem; } .member-bio { color: #ccc; line-height: 1.5; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 2rem; max-width: 800px; margin: 0 auto; } .stat-item { text-align: center; padding: 2rem 1rem; } .stat-number { font-family: var(--font-heading); font-size: 3rem; color: var(--metal-red); font-weight: 700; margin-bottom: 0.5rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .stat-label { color: var(--metal-silver); text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; font-weight: 700; } @media (max-width: 768px) { .members-grid{grid-template-columns:1fr;gap:1.5rem}.member-card{padding:1.5rem}.stats-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}.stat-number{font-size:2.5rem}.about-content{font-size:1rem}} @media (max-width: 480px) { .stats-grid{grid-template-columns:1fr}.stat-item{padding:1.5rem 1rem}} .hamburger { display: none; flex-direction: column; background: none; border: none; cursor: pointer; padding: 0.5rem; margin-left: auto; z-index: 1001; } .hamburger-line { width: 25px; height: 3px; background: var(--metal-silver); margin: 3px 0; transition: all 0.3s ease; border-radius: 2px; } .hamburger.active .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(6px,6px); } .hamburger.active .hamburger-line:nth-child(2) { opacity: 0; } .hamburger.active .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(6px,-6px); } .mobile-menu { position: fixed; top: 0; left: -100%; width: 100%; height: 100vh; background: rgba(0,0,0,0.95); backdrop-filter: blur(10px); z-index: 999; transition: left 0.3s ease; display: flex; align-items: center; justify-content: center; } .mobile-menu.active { left: 0; } .mobile-menu-content { display: flex; flex-direction: column; align-items: center; gap: 2rem; width: 100%; padding: 2rem; } .mobile-nav-link { color: var(--metal-silver); text-decoration: none; font-size: 1.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; padding: 1rem 2rem; border-bottom: 2px solid transparent; transition: all 0.3s ease; text-align: center; width: 100%; max-width: 300px; } .mobile-nav-link:hover,.mobile-nav-link.active { color: var(--metal-red); border-bottom-color: var(--metal-red); transform: translateX(10px); } @media (max-width: 768px) { .hamburger{display:flex}.nav-menu{display:none}.metal-nav{justify-content:space-between}.nav-brand{z-index:1001}} @media (max-width: 480px) { .mobile-nav-link{font-size:1.3rem;padding:.8rem 1.5rem}.mobile-menu-content{gap:1.5rem}} body.menu-open { overflow: hidden; } body.menu-open::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 998; }