:root { --cream:#f8f3e7; --red:#df3229; --black:#101010; --line:rgba(248,243,231,.35); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; background:var(--cream); color:var(--cream); font-family:"Trebuchet MS",sans-serif; } a { color:inherit; text-decoration:none; } button,input,textarea { font:inherit; } button,.button { cursor:pointer; }
.page-shell { min-height:100vh; padding:14px 18px; } .site-header,.top-ticker,main,.site-footer { width:min(1200px,100%); margin-inline:auto; } .site-header { position:relative; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:9px 13px; background:var(--red); border-radius:8px; } .brand img { display:block; width:clamp(180px,26vw,324px); } .header-actions,.socials { display:flex; align-items:center; gap:15px; } .socials img { display:block; width:25px; height:25px; } .socials .ticket-link { text-transform:uppercase; font-weight:800; } .menu-button { border:1px solid var(--cream); background:transparent; color:var(--cream); padding:7px 10px; font-weight:800; text-transform:uppercase; } .site-menu { display:none; position:absolute; z-index:3; top:calc(100% + 8px); right:0; width:210px; padding:8px; background:var(--red); border:1px solid var(--line); } .site-menu.open { display:grid; } .site-menu a { padding:9px; text-transform:uppercase; font-weight:800; } .site-menu a:hover { background:#be211b; }
.top-ticker { margin-top:14px; padding:12px 22px; background:var(--red); font-weight:900; font-size:clamp(17px,2.6vw,30px); text-transform:uppercase; letter-spacing:0; } main { color:var(--black); } h1,h2 { margin:0; text-transform:uppercase; font-size:clamp(25px,4vw,46px); } .flash { width:min(1200px,100%); margin:14px auto; padding:12px; font-weight:bold; } .flash.success { background:#c9e7bd; color:#165a20; } .flash.error { background:#ffd0cb; color:#821f18; }
.news-preview { display:grid; gap:8px; margin:14px 0; padding:15px; background:var(--red); color:var(--cream); border-radius:8px; } .news-preview a { display:flex; gap:20px; border-top:1px solid rgba(0,0,0,.2); padding:8px 0 0; font-weight:bold; } .news-preview span { width:14ch; flex:none; } .video-slider { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:16px 0; } .video-slide { margin:0; } .video-slide iframe { display:block; width:100%; aspect-ratio:2/1; border:0; background:#000; } .video-slide figcaption { padding:8px; text-align:center; font-weight:bold; text-transform:uppercase; } .hidden { display:none !important; } .arrow { min-width:44px; min-height:44px; border:0; background:var(--red); color:var(--cream); font-size:24px; }
.concerts { padding:14px 0; } .concert { position:relative; margin-top:12px; padding:15px; background:var(--red); color:var(--cream); border-radius:8px; } .concert-head { display:flex; align-items:center; gap:14px; } .concert-toggle { display:flex; align-items:baseline; flex:1; min-width:0; gap:12px; border:0; background:transparent; color:inherit; text-align:left; } .concert-toggle span { min-width:12ch; font-weight:bold; } .concert-toggle strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:18px; } .concert-toggle em { font-style:normal; font-weight:bold; } .ribbon { position:absolute; top:-8px; right:12px; padding:4px 8px; background:var(--black); color:var(--cream); text-transform:uppercase; font-size:12px; } .button { display:inline-flex; justify-content:center; align-items:center; min-height:39px; padding:8px 13px; border:1px solid var(--cream); background:var(--black); color:var(--cream); font-weight:bold; } .concert-details { padding-top:16px; } .concert-details p { margin:12px 0 0; white-space:normal; line-height:1.5; } .media { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .media img,.media iframe { width:100%; aspect-ratio:16/9; border:0; object-fit:cover; background:#000; }
.gallery { padding:16px 0 26px; } .gallery-strip { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:10px 0; } .gallery-strip img { width:100%; aspect-ratio:4/3; object-fit:cover; } .site-footer { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding:18px; background:#000; } .newsletter { display:flex; } .newsletter input { min-width:190px; padding:9px; border:0; } .newsletter button,.admin-form button,.login button,.admin-layout aside button { border:0; background:var(--red); color:var(--cream); padding:9px 13px; font-weight:bold; text-transform:uppercase; } .footer-actions { display:flex; align-items:center; gap:12px; } .ghost { background:transparent; }
.static-page { padding:40px 0 50px; max-width:830px; } .static-page h1 { margin-bottom:18px; } .static-page h2 { margin:28px 0 8px; font-size:24px; } .static-page p { line-height:1.65; font-size:17px; } .about img { display:block; width:100%; margin-bottom:24px; } .news-item { border-top:2px solid var(--black); } .news-item:last-child { border-bottom:2px solid var(--black); } .news-toggle { display:flex; width:100%; gap:16px; padding:15px 4px; border:0; background:transparent; text-align:left; } .news-toggle span { min-width:12ch; font-weight:bold; } .news-toggle strong { font-size:18px; } .news-item div { padding:0 4px 16px; }
.admin-body { display:grid; min-height:100vh; place-items:center; background:var(--cream); color:var(--black); } .login { width:min(440px,calc(100% - 32px)); padding:28px; background:var(--red); color:var(--cream); border-radius:8px; } .login form,.admin-form { display:grid; gap:14px; margin-top:20px; } .login label,.admin-form label { display:grid; gap:5px; font-weight:bold; } input,textarea { width:100%; border:1px solid #222; padding:9px; background:#fffdf8; color:#111; } .admin-layout { display:grid; grid-template-columns:220px 1fr; gap:24px; padding:30px 0 50px; } .admin-layout aside { display:grid; align-content:start; gap:5px; padding:12px; background:var(--black); color:var(--cream); } .admin-layout aside a,.admin-layout aside button { padding:10px; text-align:left; } .admin-layout aside a.active { background:var(--red); } .admin-layout aside form { margin:0; } .admin-layout aside button { width:100%; background:transparent; } .admin-title { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; } .admin-item { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-top:1px solid #777; } .admin-item a { display:grid; gap:4px; } .admin-item span { font-size:14px; } .danger { border:0; padding:8px 10px; background:#9e1c17; color:#fff; } .editor { margin-top:28px; padding-top:20px; border-top:3px solid var(--black); } .checkbox { display:flex !important; grid-template-columns:auto 1fr; align-items:center; } .checkbox input { width:auto; } .form-actions { display:flex; gap:10px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); } @media (max-width:720px) { .page-shell { padding:8px; } .site-header { padding:8px; } .socials .ticket-link,.header-actions .socials { display:none; } .concert-head,.concert-toggle { align-items:flex-start; flex-direction:column; gap:4px; } .concert-head > .button { position:absolute; right:14px; bottom:13px; } .concert { padding-bottom:64px; } .media,.gallery-strip { grid-template-columns:repeat(2,minmax(0,1fr)); } .site-footer { align-items:stretch; flex-direction:column; } .newsletter { width:100%; } .newsletter input { min-width:0; } .admin-layout { grid-template-columns:1fr; gap:14px; } .admin-layout aside { grid-template-columns:repeat(3,1fr); } .admin-layout aside a:nth-of-type(4),.admin-layout aside form { grid-column:span 3; } }