/* ========================================================================== Gulášfest 2026 — Direction 3 v2 (Bricolage + Classic palette) ========================================================================== */ /* Fonts are loaded asynchronously from HTML via media="print" trick. */ :root { --cream: #fff7e8; --ink: #181410; --red: #ee2b2b; --sky: #3b8de6; --mustard: #f4b41a; --display: "Bricolage Grotesque", system-ui, sans-serif; --display-w: 800; --accent: "Instrument Serif", Georgia, serif; --ui: "Manrope", system-ui, sans-serif; --shadow-stick: 0 8px 0 rgba(0, 0, 0, 0.15); --shadow-sticker: 0 6px 0 rgba(0, 0, 0, 0.15); } * { box-sizing: border-box; } /* Skip-to-content link — visible only when focused */ .skip-link { position: absolute; top: -50px; left: 12px; background: var(--ink); color: var(--cream); padding: 12px 20px; border-radius: 8px; z-index: 1000; text-decoration: none; font-family: var(--ui); font-weight: 700; font-size: 14px; transition: top 0.15s ease; } .skip-link:focus { top: 12px; outline: 3px solid var(--mustard); outline-offset: 2px; } /* Visible focus for all interactive elements */ a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; } html, body { margin: 0; padding: 0; background: var(--cream); color: var(--ink); font-family: var(--ui); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; display: block; } a { color: inherit; } :root { --content-max: 1200px; --gutter: 32px; } /* Placeholder photos (replace with later) */ .photo { background-image: repeating-linear-gradient( 135deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04) 8px, rgba(0, 0, 0, 0.08) 8px, rgba(0, 0, 0, 0.08) 16px ); display: flex; align-items: center; justify-content: center; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.08em; color: rgba(0, 0, 0, 0.55); text-transform: uppercase; position: relative; overflow: hidden; } .photo.dark { background-image: repeating-linear-gradient( 135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06) 8px, rgba(255, 255, 255, 0.10) 8px, rgba(255, 255, 255, 0.10) 16px ); color: rgba(255, 255, 255, 0.7); } .photo > span { background: rgba(255, 255, 255, 0.85); padding: 4px 8px; border-radius: 2px; white-space: nowrap; } .photo.dark > span { background: rgba(0, 0, 0, 0.6); color: rgba(255, 255, 255, 0.95); } /* Real images inside .photo wrappers fill the box */ .photo > img, .photo > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .photo:has(> img, > video) { background-image: none; } .photo:has(> img, > video) > span { display: none; } /* Generic shared bits */ .kicker { font-family: var(--ui); font-weight: 700; font-size: 13px; letter-spacing: 0.2em; color: var(--red); } .kicker.muted { opacity: 0.85; color: inherit; } .kicker.mustard { color: var(--mustard); } .display { font-family: var(--display); font-weight: var(--display-w); letter-spacing: -0.03em; line-height: 0.9; margin: 0; } .serif { font-family: var(--accent); font-style: italic; } .btn { display: inline-block; padding: 18px 32px; border-radius: 999px; font-family: var(--ui); font-weight: 800; font-size: 16px; text-decoration: none; text-align: center; border: 2px solid transparent; cursor: pointer; } .btn--red { background: var(--red); color: var(--cream); } .btn--cream { background: var(--cream); color: var(--ink); } .btn--ink { background: var(--ink); color: var(--cream); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--ghost-cream { background: transparent; color: var(--cream); border-color: var(--cream); } .pill { display: inline-block; padding: 14px 20px; background: var(--mustard); color: var(--ink); border-radius: 999px; font-family: var(--ui); font-weight: 800; font-size: 13px; letter-spacing: 0.12em; text-decoration: none; } /* ── NAV ─────────────────────────────────────────────────────────────────── */ .nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 48px; background: var(--cream); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(24, 20, 16, 0.06); } .nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } .nav__logo { width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: var(--cream); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: var(--display-w); font-size: 24px; } .nav__name { font-family: var(--display); font-weight: var(--display-w); font-size: 26px; letter-spacing: -0.02em; } .nav__menu { display: flex; gap: 4px; align-items: center; } .nav__link { padding: 10px 16px; border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px; } .nav__link.is-active { background: var(--ink); color: var(--cream); } .nav__cta { padding: 12px 22px; border-radius: 999px; background: var(--red); color: var(--cream); text-decoration: none; font-weight: 700; font-size: 14px; margin-left: 8px; } .nav__toggle { display: none; width: 44px; height: 44px; border-radius: 12px; background: transparent; color: var(--ink); border: 2px solid var(--ink); cursor: pointer; align-items: center; justify-content: center; padding: 0; } .nav__toggle svg { display: block; } .nav__toggle .nav__toggle-x { display: none; } .nav__toggle.is-open .nav__toggle-bars { display: none; } .nav__toggle.is-open .nav__toggle-x { display: block; } .nav__drawer { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--ink); color: var(--cream); padding: 16px; flex-direction: column; gap: 4px; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); } .nav__drawer.is-open { display: flex; } .nav__drawer .nav__link { padding: 14px 18px; border-radius: 12px; color: var(--cream); font-family: var(--display); font-weight: var(--display-w); font-size: 18px; } .nav__drawer .nav__link.is-active { background: var(--cream); color: var(--ink); } .nav__drawer .nav__cta { margin: 8px 0 0; padding: 14px 18px; border-radius: 12px; text-align: center; font-weight: 800; font-size: 16px; } /* ── HERO date/address block ─────────────────────────────────────────────── */ .hero__when { display: inline-block; margin-top: 28px; padding: 14px 22px; background: var(--ink); color: var(--cream); border-radius: 14px; transform: rotate(-0.5deg); box-shadow: var(--shadow-stick); } .hero__date { font-family: var(--display); font-weight: var(--display-w); font-size: 40px; letter-spacing: -0.02em; line-height: 1; margin: 0; } .hero__date .red { color: var(--red); } .hero__where { font-family: var(--ui); font-weight: 700; font-size: 14px; letter-spacing: 0.12em; margin-top: 6px; text-transform: uppercase; color: var(--mustard); } /* Multi-photo hero cluster — bowl + crowd bottom-left + sunset bottom-right */ .hero__photo--alt { position: absolute; bottom: 0; left: -20px; width: 220px; height: 220px; border: 2px solid var(--ink); border-radius: 12px; transform: rotate(-6deg); z-index: 2; box-shadow: 0 12px 0 rgba(0,0,0,0.08); } .hero__photo--alt2 { position: absolute; bottom: 0; right: 0; width: 270px; height: 165px; border: 2px solid var(--ink); border-radius: 12px; transform: rotate(5deg); z-index: 2; box-shadow: 0 12px 0 rgba(0,0,0,0.08); } /* ── HERO ───────────────────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; background: var(--cream); padding: 40px 48px 80px; display: flex; align-items: flex-start; gap: 48px; } .hero__inner { position: relative; z-index: 1; flex: 1 1 480px; max-width: 760px; } .hero__title { font-family: var(--display); font-weight: var(--display-w); font-size: 200px; line-height: 0.85; letter-spacing: -0.04em; color: var(--ink); margin: 12px 0 0; } .hero__title .red { color: var(--red); } .hero__title .sky { color: var(--sky); } .hero__cta { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; } .hero__photo-wrap { position: relative; flex: 0 0 480px; height: 580px; align-self: stretch; } .hero__photo { position: absolute; top: 40px; right: 60px; width: 360px; height: 460px; border: 2px solid var(--ink); border-radius: 12px; transform: rotate(4deg); box-shadow: 0 12px 0 rgba(0,0,0,0.08); } /* Sticker (round dab) */ .sticker { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 0.95; border-radius: 50%; padding: 8px; box-shadow: var(--shadow-sticker); z-index: 3; font-family: var(--display); font-weight: var(--display-w); } .sticker__big { font-size: 44px; } .sticker__small { font-family: var(--ui); font-weight: 800; font-size: 13px; margin-top: 2px; letter-spacing: 0.1em; } .hero .sticker--year { width: 150px; height: 150px; top: 0; right: 30px; background: var(--red); color: var(--cream); transform: rotate(-12deg); } .hero .sticker--types { width: 130px; height: 130px; top: 200px; left: -30px; background: var(--sky); color: var(--cream); transform: rotate(10deg); } .hero .sticker--free { width: 120px; height: 120px; top: 340px; right: 30px; background: var(--mustard); color: var(--ink); transform: rotate(-6deg); } .hero .sticker--types .sticker__big { font-size: 36px; } .hero .sticker--free .sticker__big { font-size: 26px; margin-top: 2px; } .hero .sticker--free .sticker__small { font-size: 16px; letter-spacing: 0.05em; } /* ── COUNTDOWN ───────────────────────────────────────────────────────────── */ .countdown { background: var(--sky); padding: 60px 48px; text-align: center; } .countdown__label { color: var(--cream); font-family: var(--ui); font-weight: 700; letter-spacing: 0.2em; font-size: 13px; margin-bottom: 20px; } .countdown__grid { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; gap: 16px; } .countdown__cell { background: var(--cream); color: var(--ink); padding: 24px 36px; min-width: 140px; text-align: center; border-radius: 16px; box-shadow: var(--shadow-stick); } .countdown__cell:nth-child(1) { transform: rotate(-2deg); } .countdown__cell:nth-child(2) { transform: rotate(1.5deg); } .countdown__cell:nth-child(3) { transform: rotate(-1deg); } .countdown__cell:nth-child(4) { transform: rotate(2deg); } .countdown__num { font-family: var(--display); font-weight: var(--display-w); font-size: 64px; line-height: 1; color: var(--red); } .countdown__unit { font-family: var(--ui); font-weight: 700; font-size: 13px; margin-top: 4px; letter-spacing: 0.1em; text-transform: uppercase; } /* ── SECTION SHELL ───────────────────────────────────────────────────────── */ .section { padding: 80px 48px; } .section--cream { background: var(--cream); color: var(--ink); } .section--ink { background: var(--ink); color: var(--cream); } .section--red { background: var(--red); color: var(--cream); } .section--sky { background: var(--sky); color: var(--cream); } .section__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; } .section__title { font-family: var(--display); font-weight: var(--display-w); font-size: 100px; line-height: 0.9; letter-spacing: -0.03em; color: var(--ink); margin: 8px 0 0; } .section--ink .section__title, .section--red .section__title, .section--sky .section__title { color: var(--cream); } .section__title .red { color: var(--red); } .section__title .sky { color: var(--sky); } .section__title .mustard { color: var(--mustard); } .section__more { font-family: var(--ui); font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--ink); padding-bottom: 4px; } /* ── LINEUP CARDS ────────────────────────────────────────────────────────── */ .bands { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .band { padding: 28px 32px; border-radius: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--cream); } .band__name { font-family: var(--display); font-weight: var(--display-w); font-size: 36px; letter-spacing: -0.02em; line-height: 1; } .band__num { font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: 0.15em; opacity: 0.9; white-space: nowrap; } .band--c1 { background: var(--red); color: var(--cream); transform: rotate(-0.6deg); } .band--c2 { background: var(--sky); color: var(--cream); transform: rotate(0.5deg); } .band--c3 { background: var(--ink); color: var(--cream); transform: rotate(0.4deg); } .band--c4 { background: var(--mustard); color: var(--ink); transform: rotate(-0.5deg); } .lineup-aside { margin-top: 20px; font-family: var(--accent); font-style: italic; font-size: 28px; text-align: center; } /* ── ABOUT (red) ─────────────────────────────────────────────────────────── */ .about { background: var(--red); color: var(--cream); padding: 96px 48px; } .about__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; } .about__title { font-family: var(--display); font-weight: var(--display-w); font-size: 92px; line-height: 0.9; letter-spacing: -0.03em; margin: 12px 0 20px; } .about__lead { font-family: var(--accent); font-size: 26px; line-height: 1.4; font-style: italic; max-width: 520px; margin: 0; } .about__photos { position: relative; height: 460px; } .about__photos .photo { position: absolute; border: 2px solid var(--cream); border-radius: 16px; } .about__photos .photo:first-child { top: 0; right: 60px; width: 320px; height: 380px; transform: rotate(-3deg); } .about__photos .photo:last-child { bottom: 0; right: 0; width: 240px; height: 260px; transform: rotate(5deg); } /* ── GOULASH LIST ────────────────────────────────────────────────────────── */ .goulash { background: var(--ink); color: var(--cream); padding: 96px 48px; } .goulash__grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: flex-start; } .goulash__intro { position: sticky; top: 80px; } .goulash__photo { width: 220px; height: 220px; border-radius: 50%; overflow: hidden; border: 3px solid var(--mustard); box-shadow: 0 10px 0 rgba(0,0,0,0.18); margin-bottom: 20px; transform: rotate(-4deg); } .goulash__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .goulash__title { font-family: var(--display); font-weight: var(--display-w); font-size: 130px; line-height: 0.9; letter-spacing: -0.04em; margin: 8px 0 16px; } .goulash__title .red { color: var(--red); } .goulash__lead { font-family: var(--accent); font-style: italic; font-size: 24px; line-height: 1.35; opacity: 0.9; max-width: 440px; margin: 0; } .goulash__strong { font-family: var(--display); font-weight: var(--display-w); font-style: normal; } .goulash__pill { margin-top: 24px; display: inline-block; padding: 14px 20px; background: var(--mustard); color: var(--ink); border-radius: 999px; font-family: var(--ui); font-weight: 800; font-size: 13px; letter-spacing: 0.12em; } .goulash__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-family: var(--ui); font-weight: 600; } .goulash__item { padding: 14px 16px; border-radius: 10px; background: rgba(255, 247, 232, 0.06); color: var(--cream); font-size: 14px; border: 1px solid rgba(255, 247, 232, 0.12); display: flex; align-items: center; min-height: 48px; line-height: 1.2; } .goulash__item.accent-red { background: var(--red); } .goulash__item.accent-sky { background: var(--sky); } /* ── INFO STRIP ──────────────────────────────────────────────────────────── */ .info-strip { background: var(--cream); padding: 80px 48px; } .info-strip__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .info-card { padding: 36px 32px; border-radius: 24px; box-shadow: var(--shadow-stick); } .info-card:nth-child(1) { transform: rotate(-1deg); background: var(--mustard); color: var(--ink); } .info-card:nth-child(2) { transform: rotate(0.5deg); background: var(--red); color: var(--cream); } .info-card:nth-child(3) { transform: rotate(-0.5deg); background: var(--sky); color: var(--cream); } .info-card__title { font-family: var(--display); font-weight: var(--display-w); font-size: 48px; line-height: 0.95; margin: 8px 0 0; letter-spacing: -0.03em; } .info-card__body { font-family: var(--accent); font-style: italic; font-size: 20px; margin: 12px 0 0; line-height: 1.35; } /* ── TESTIMONIALS ───────────────────────────────────────────────────────── */ .testimonials { background: var(--sky); color: var(--cream); padding: 96px 48px; } .testimonials__head { margin-bottom: 40px; } .testimonials__title { font-family: var(--display); font-weight: var(--display-w); font-size: 100px; line-height: 0.9; letter-spacing: -0.03em; margin: 8px 0 0; } .testimonials__title .mustard { color: var(--mustard); } .testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .testimonial { padding: 32px 28px; border-radius: 20px; color: var(--ink); box-shadow: var(--shadow-stick); } .testimonial:nth-child(1) { background: var(--cream); transform: rotate(-1.5deg); grid-column: span 2; } .testimonial:nth-child(2) { background: var(--mustard); transform: rotate(1deg); } .testimonial:nth-child(3) { background: var(--cream); transform: rotate(-0.5deg); } .testimonial:nth-child(4) { background: var(--mustard); transform: rotate(1.5deg); } .testimonial:nth-child(5) { background: var(--cream); transform: rotate(-1deg); } .testimonial__mark { font-family: var(--display); font-weight: var(--display-w); font-size: 64px; line-height: 0.6; color: var(--red); opacity: 0.9; } .testimonial__quote { font-family: var(--accent); font-style: italic; font-size: 22px; line-height: 1.35; margin: 4px 0 0; } .testimonial:first-child .testimonial__quote { font-size: 32px; } .testimonial__name { margin-top: 18px; font-family: var(--ui); font-weight: 800; font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; } .testimonials__rating { margin-top: 24px; text-align: center; font-family: var(--ui); font-weight: 700; font-size: 14px; letter-spacing: 0.15em; opacity: 0.9; } .testimonials__cta { margin-top: 36px; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; } .testimonials__cta-lead { font-family: var(--accent); font-style: italic; font-size: 22px; margin: 0; color: var(--cream); } .testimonials__cta-lead strong { font-family: var(--display); font-weight: var(--display-w); font-style: normal; color: var(--mustard); font-size: 24px; } .testimonials__cta .btn { font-size: 15px; padding: 16px 28px; } /* ── TICKET STRIP (home) ─────────────────────────────────────────────────── */ .ticket-strip { background: var(--cream); padding: 96px 48px; } .ticket-strip__inner { display: flex; justify-content: space-between; align-items: center; background: var(--ink); color: var(--cream); padding: 40px 48px; border-radius: 24px; gap: 20px; flex-wrap: wrap; } .ticket-strip__title { font-family: var(--display); font-weight: var(--display-w); font-size: 64px; line-height: 1.05; margin: 8px 0 0; letter-spacing: -0.03em; } .ticket-strip__sub { font-family: var(--accent); font-style: italic; font-size: 22px; margin: 12px 0 0; opacity: 0.9; } .ticket-strip__badge { padding: 16px 28px; background: var(--red); color: var(--cream); border-radius: 999px; font-family: var(--ui); font-weight: 800; font-size: 16px; white-space: nowrap; } /* ── GALLERY STRIP (home) ────────────────────────────────────────────────── */ .gallery-strip { background: var(--cream); padding: 40px 48px 96px; } .gallery-strip__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; } .gallery-strip__title { font-family: var(--display); font-weight: var(--display-w); font-size: 80px; margin: 0; letter-spacing: -0.03em; color: var(--ink); } .gallery-strip__more { font-family: var(--ui); font-weight: 700; font-size: 14px; color: var(--red); text-decoration: none; } .gallery-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px; } .gallery-strip__grid .photo { border-radius: 16px; border: 2px solid var(--ink); } .gallery-strip__grid .photo:nth-child(1) { grid-column: span 2; grid-row: span 2; transform: rotate(-1deg); } .gallery-strip__grid .photo:nth-child(2) { transform: rotate(1deg); } .gallery-strip__grid .photo:nth-child(3) { transform: rotate(-1deg); } .gallery-strip__grid .photo:nth-child(4) { transform: rotate(1deg); } .gallery-strip__grid .photo:nth-child(5) { transform: rotate(-1deg); } .gallery-strip__cta { margin-top: 32px; text-align: center; } .gallery-strip__cta .btn { font-size: 18px; padding: 18px 32px; } /* ── SPONSORS ────────────────────────────────────────────────────────────── */ .sponsors { background: var(--cream); padding: 80px 48px; border-top: 2px solid rgba(24, 20, 16, 0.08); } .sponsors__head { margin-bottom: 32px; } .sponsors__title { font-family: var(--display); font-weight: var(--display-w); font-size: 80px; margin: 8px 0 0; line-height: 0.9; letter-spacing: -0.03em; } .sponsors__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .sponsor { border: 2px solid var(--ink); border-radius: 16px; padding: 24px 18px; min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; background: transparent; color: var(--ink); } .sponsor__tier { font-family: var(--ui); font-weight: 700; font-size: 10px; letter-spacing: 0.18em; color: var(--red); } .sponsor__name { font-family: var(--display); font-weight: var(--display-w); font-size: 20px; line-height: 1.05; letter-spacing: -0.01em; } .sponsors__cta { margin-top: 24px; text-align: center; font-family: var(--accent); font-style: italic; font-size: 18px; opacity: 0.7; } .sponsors__cta a { color: var(--red); font-style: normal; font-family: var(--ui); font-weight: 700; text-decoration: none; } /* ── PAGE HEADER (interior pages) ────────────────────────────────────────── */ .page-head { margin-bottom: 48px; } .page-head__title { font-family: var(--display); font-weight: var(--display-w); font-size: 140px; line-height: 0.9; letter-spacing: -0.04em; margin: 8px 0 0; } .page-head__title .red { color: var(--red); } .page-head__title .sky { color: var(--sky); } .page-head__lead { font-family: var(--accent); font-style: italic; font-size: 24px; margin: 12px 0 0; max-width: 720px; line-height: 1.35; } .page-head--center { text-align: center; } .page-head--center .page-head__lead { margin-left: auto; margin-right: auto; } .page-head--center .page-head__title { display: inline-block; } /* ── LINEUP PAGE ─────────────────────────────────────────────────────────── */ .lineup-banner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 32px; } .lineup-banner--bottom { margin: 32px 0 0; } /* Band photo banner — top of kapely page */ .band-banner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 40px; } .band-banner__cell { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; border: 2px solid var(--ink); text-decoration: none; color: var(--cream); box-shadow: var(--shadow-stick); } .band-banner__cell:nth-child(1) { transform: rotate(-0.6deg); } .band-banner__cell:nth-child(2) { transform: rotate(0.5deg); } .band-banner__cell:nth-child(3) { transform: rotate(-0.4deg); } .band-banner__cell:nth-child(4) { transform: rotate(0.6deg); } .band-banner__cell img { width: 100%; height: 100%; object-fit: cover; display: block; } .band-banner__cell::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0,0,0,0.75)); pointer-events: none; } .band-banner__name { position: absolute; bottom: 14px; left: 16px; right: 16px; font-family: var(--display); font-weight: var(--display-w); font-size: 26px; line-height: 1; letter-spacing: -0.02em; z-index: 1; } /* Wide band card (for long names like METALLICA REVIVAL BEROUN) */ .band--wide { grid-column: span 2; } .band--wide .band__name { font-size: 36px; } /* Home FAQ — 2-column layout */ .faq-list--home { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; max-width: none; } .faq-cta-big { margin-top: 28px; text-align: center; } .faq-cta-big .btn { font-size: 18px; padding: 18px 32px; } /* On-site only banner */ .onsite-banner { margin-top: 24px; background: var(--ink); color: var(--cream); border-radius: 22px; padding: 28px 32px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px; border: 3px solid var(--mustard); } .onsite-banner__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--mustard); color: var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: var(--display-w); font-size: 38px; flex-shrink: 0; transform: rotate(-6deg); } .onsite-banner__title { font-family: var(--display); font-weight: var(--display-w); font-size: 36px; letter-spacing: -0.02em; line-height: 1.05; margin: 4px 0 0; } .onsite-banner__title .red { color: var(--red); } .onsite-banner__sub { font-family: var(--accent); font-style: italic; font-size: 19px; line-height: 1.4; margin: 8px 0 0; opacity: 0.95; } .lineup-banner__cell { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; border: 2px solid var(--ink); } .lineup-banner__cell:nth-child(1) { transform: rotate(-0.6deg); } .lineup-banner__cell:nth-child(2) { transform: rotate(0.5deg); } .lineup-banner__cell:nth-child(3) { transform: rotate(-0.4deg); } .lineup-banner__cell:nth-child(4) { transform: rotate(0.6deg); } .lineup-banner__cell img { width: 100%; height: 100%; object-fit: cover; display: block; } .lineup-wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .band--big { padding: 36px 32px; border-radius: 18px; box-shadow: var(--shadow-stick); min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; } .band--big .band__name { font-size: 44px; } .band--big .band__num { font-size: 11px; letter-spacing: 0.2em; opacity: 0.85; } .band--big.band--c1 { transform: rotate(-0.6deg); } .band--big.band--c2 { transform: rotate(0.5deg); } .band--big.band--c3 { transform: rotate(0.4deg); } .band--big.band--c4 { transform: rotate(-0.5deg); } .band--big.band--c5 { background: var(--red); color: var(--cream); transform: rotate(0.3deg); } .band--big.band--c6 { background: var(--sky); color: var(--cream); transform: rotate(-0.4deg); } .band--big.band--c7 { background: var(--ink); color: var(--cream); transform: rotate(0.6deg); } .band--big.band--c8 { background: var(--mustard); color: var(--ink); transform: rotate(-0.3deg); } .band--tease { border: 2px dashed var(--ink); border-radius: 18px; padding: 36px 32px; font-family: var(--accent); font-style: italic; font-size: 32px; line-height: 1.2; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 140px; color: var(--ink); } .band--tease--full { grid-column: 1 / -1; flex-direction: column; gap: 8px; padding: 28px 32px; min-height: 0; } .band--tease__title { font-family: var(--display); font-weight: var(--display-w); font-size: 40px; letter-spacing: -0.02em; font-style: normal; line-height: 1; } .band--tease__sub { font-family: var(--accent); font-style: italic; font-size: 20px; line-height: 1.35; opacity: 0.85; font-weight: 500; max-width: 560px; } .harmonogram { margin-top: 48px; background: var(--ink); color: var(--cream); padding: 36px 40px; border-radius: 24px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; } .harmonogram__title { font-family: var(--display); font-weight: var(--display-w); font-size: 40px; margin: 8px 0 0; line-height: 1.05; letter-spacing: -0.02em; } .harmonogram__sub { font-family: var(--accent); font-style: italic; font-size: 22px; margin: 10px 0 0; opacity: 0.85; line-height: 1.35; } .harmonogram__buttons { display: flex; gap: 10px; } .harmonogram__buttons .btn { padding: 14px 22px; font-size: 14px; } .lineup-extras { background: var(--red); color: var(--cream); padding: 32px 40px; border-radius: 20px; font-family: var(--accent); font-style: italic; font-size: 24px; margin-top: 16px; } .lineup-extras strong { font-family: var(--display); font-weight: var(--display-w); font-style: normal; } /* ── TICKETS PAGE ────────────────────────────────────────────────────────── */ .tickets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 48px; } .ticket { padding: 36px 32px; border-radius: 24px; box-shadow: var(--shadow-stick); display: flex; flex-direction: column; } .ticket--free { background: var(--mustard); color: var(--ink); transform: rotate(-1deg); } .ticket--full { background: var(--red); color: var(--cream); transform: rotate(0.5deg); } .ticket--sat { background: var(--sky); color: var(--cream); transform: rotate(-0.5deg); } .ticket__title { font-family: var(--ui); font-weight: 700; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.9; } .ticket__price { font-family: var(--display); font-weight: var(--display-w); font-size: 88px; line-height: 1; margin: 8px 0 0; letter-spacing: -0.04em; } .ticket__sub { font-family: var(--accent); font-style: italic; font-size: 20px; margin: 10px 0 0; line-height: 1.35; flex: 1; } .tickets-info { background: var(--ink); color: var(--cream); padding: 40px 48px; border-radius: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .tickets-info--single { grid-template-columns: 1fr; } .tickets-info__col .kicker { color: var(--mustard); } .tickets-info__title { font-family: var(--display); font-weight: var(--display-w); font-size: 40px; margin: 8px 0 0; line-height: 1.05; letter-spacing: -0.02em; } .tickets-info__body { font-family: var(--accent); font-style: italic; font-size: 22px; margin: 10px 0 0; opacity: 0.85; line-height: 1.35; } .tickets-foot { margin-top: 24px; font-family: var(--accent); font-style: italic; font-size: 22px; text-align: center; color: var(--ink); } .tickets-foot strong { font-family: var(--display); font-weight: var(--display-w); font-style: normal; } /* ── VENUE PAGE ──────────────────────────────────────────────────────────── */ .venue-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; } .venue-map { height: 480px; border-radius: 24px; border: 2px solid var(--ink); transform: rotate(-0.5deg); overflow: hidden; } .venue-map iframe { width: 100%; height: 100%; border: 0; display: block; } .venue-rules { margin-top: 20px; text-align: center; } .venue-cards { display: flex; flex-direction: column; gap: 12px; } .venue-card { padding: 24px 28px; border-radius: 16px; flex: 1; } .venue-card--red { background: var(--red); color: var(--cream); } .venue-card--sky { background: var(--sky); color: var(--cream); } .venue-card--mustard { background: var(--mustard); color: var(--ink); } .venue-card__title { font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; } .venue-card__body { font-family: var(--display); font-weight: var(--display-w); font-size: 28px; line-height: 1.15; margin: 8px 0 0; letter-spacing: -0.02em; } .venue-stats { margin-top: 48px; background: var(--ink); color: var(--cream); padding: 32px 40px; border-radius: 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .venue-stat__num { font-family: var(--display); font-weight: var(--display-w); font-size: 64px; line-height: 1; color: var(--mustard); letter-spacing: -0.03em; } .venue-stat__label { font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; margin-top: 8px; opacity: 0.8; text-transform: uppercase; } .venue-rules { margin-top: 20px; text-align: center; } /* ── GALLERY PAGE ────────────────────────────────────────────────────────── */ .gallery-block { margin-bottom: 48px; } .gallery-block__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; } .gallery-block__title { font-family: var(--display); font-weight: var(--display-w); font-size: 40px; letter-spacing: -0.02em; margin: 0; } .gallery-block__more { font-family: var(--ui); font-weight: 700; font-size: 13px; color: var(--red); text-decoration: none; } .reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } /* Single featured video (galerie page) — centered, no heading */ .gallery-block--video { display: flex; flex-direction: column; align-items: center; text-align: center; } .video-feature { background: var(--ink); border: 2px solid var(--ink); border-radius: 22px; overflow: hidden; width: 100%; max-width: 420px; aspect-ratio: 9 / 16; margin: 0 auto; position: relative; transform: rotate(-0.6deg); box-shadow: var(--shadow-stick); } .video-feature video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ink); } .video-feature__caption { margin: 24px 0 0; font-family: var(--accent); font-style: italic; font-size: 20px; color: var(--ink); opacity: 0.85; max-width: 560px; } .video-feature__caption a { font-style: normal; font-family: var(--ui); font-weight: 700; color: var(--red); text-decoration: none; border-bottom: 1px solid currentColor; } .reel { position: relative; aspect-ratio: 9 / 16; background: var(--ink); color: var(--cream); border-radius: 18px; overflow: hidden; border: 2px solid var(--ink); } .reel > video, .reel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; display: block; } /* Label gradient so text reads against any image */ .reel > .reel__label { z-index: 2; background: linear-gradient(transparent, rgba(0,0,0,0.65)); padding: 32px 12px 12px; bottom: 0; left: 0; right: 0; color: var(--cream); } .reel > .reel__dur { z-index: 2; } .reel--video > video { pointer-events: auto; } .reel:nth-child(1) { transform: rotate(-0.8deg); } .reel:nth-child(2) { transform: rotate(0.6deg); } .reel:nth-child(3) { transform: rotate(-0.4deg); } .reel:nth-child(4) { transform: rotate(0.7deg); } .reel__grain { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255, 247, 232, 0.05) 0 2px, transparent 2px 6px); pointer-events: none; } .reel__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; background: var(--red); color: var(--cream); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: var(--display-w); font-size: 30px; padding-left: 6px; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3); } .reel__dur { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; background: var(--cream); color: var(--ink); font-family: var(--ui); font-weight: 800; font-size: 10px; letter-spacing: 0.12em; } .reel__label { position: absolute; bottom: 12px; left: 12px; right: 12px; font-family: var(--display); font-weight: var(--display-w); font-size: 18px; line-height: 1.1; letter-spacing: -0.01em; } .years { display: flex; gap: 8px; } .year-chip { padding: 6px 14px; border-radius: 999px; background: transparent; color: var(--ink); border: 2px solid var(--ink); font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: 0.05em; cursor: pointer; } .year-chip.is-active { background: var(--ink); color: var(--cream); } .photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px; } .photo-grid .photo { border-radius: 16px; border: 2px solid var(--ink); } .photo-grid .photo--big-2x2 { grid-column: span 2; grid-row: span 2; transform: rotate(-1deg); } .photo-grid .photo--wide { grid-column: span 2; } .gallery-foot { margin-top: 32px; text-align: center; } .gallery-foot__lead { font-family: var(--accent); font-style: italic; font-size: 22px; color: var(--ink); margin: 0 0 16px; opacity: 0.8; } .gallery-foot__btns { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* ── FAQ ─────────────────────────────────────────────────────────────────── */ .faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 960px; } /* FAQ themed groups (faq.html) */ .faq-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 28px; max-width: none; } .faq-group__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .faq-group__icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; color: var(--cream); flex-shrink: 0; } .faq-group__title { font-family: var(--display); font-weight: var(--display-w); font-size: 36px; letter-spacing: -0.02em; margin: 0; line-height: 1; } .faq-group .faq-list { max-width: none; } .faq-group .faq summary { padding: 16px 20px; } .faq-group .faq__q { font-size: 18px; } .faq-group .faq__a { padding: 0 20px 16px; font-size: 18px; } .faq { background: transparent; color: var(--ink); border: 2px solid var(--ink); border-radius: 20px; padding: 0; cursor: pointer; overflow: hidden; } .faq[open] { background: var(--ink); color: var(--cream); } .faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 28px; cursor: pointer; } .faq summary::-webkit-details-marker { display: none; } .faq__q { font-family: var(--display); font-weight: var(--display-w); font-size: 24px; letter-spacing: -0.01em; line-height: 1.2; } .faq__sign { font-family: var(--display); font-weight: var(--display-w); font-size: 32px; line-height: 1; flex-shrink: 0; } .faq[open] .faq__sign::before { content: "–"; } .faq:not([open]) .faq__sign::before { content: "+"; } .faq__a { font-family: var(--accent); font-style: italic; font-size: 22px; line-height: 1.4; padding: 0 28px 20px; margin: 0; } .faq-cta { margin-top: 48px; background: var(--sky); color: var(--cream); padding: 32px 40px; border-radius: 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .faq-cta__title { font-family: var(--display); font-weight: var(--display-w); font-size: 36px; margin: 8px 0 0; line-height: 1.05; letter-spacing: -0.02em; } .faq-cta a.btn--cream { color: var(--sky); } /* ── FOOTER ──────────────────────────────────────────────────────────────── */ .footer { background: var(--ink); color: var(--cream); padding: 64px 48px 32px; overflow: hidden; } .footer__hero { font-family: var(--display); font-weight: var(--display-w); font-size: 180px; line-height: 0.85; letter-spacing: -0.04em; } .footer__hero .red { color: var(--red); } .footer__contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(255, 247, 232, 0.18); } .footer__col { font-family: var(--ui); font-size: 14px; line-height: 1.6; } .footer__col .kicker { margin-bottom: 8px; display: block; } .footer__col p { margin: 0 0 12px; color: rgba(255, 247, 232, 0.85); } .footer__col p:last-child { margin-bottom: 0; } .footer__col strong { color: var(--cream); font-weight: 800; font-size: 15px; } .footer__col a { color: var(--cream); text-decoration: none; border-bottom: 1px solid rgba(255, 247, 232, 0.3); } .footer__col a:hover { border-bottom-color: var(--mustard); } .footer__bar { display: flex; justify-content: space-between; margin-top: 32px; border-top: 1px solid rgba(255, 247, 232, 0.18); padding-top: 20px; flex-wrap: wrap; gap: 12px; } .footer__copy { font-family: var(--ui); font-size: 11px; opacity: 0.7; letter-spacing: 0.15em; } .footer__links { display: flex; gap: 16px; font-family: var(--ui); font-size: 13px; font-weight: 600; flex-wrap: wrap; } .footer__links a { color: var(--cream); text-decoration: none; } /* Wide photo divider band */ .photo-band { width: 100%; height: 320px; overflow: hidden; background: var(--ink); } .photo-band img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── MISE / About long copy ──────────────────────────────────────────────── */ .mise { background: var(--cream); color: var(--ink); padding: 64px 48px; } .mise__inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; } .mise__inner--center { align-items: center; } .mise__body--big p { font-size: 36px; line-height: 1.3; } .mise__body--big p strong { font-size: 36px; } .mise__hd .kicker { color: var(--red); } .mise__title { font-family: var(--display); font-weight: var(--display-w); font-size: 76px; line-height: 0.9; letter-spacing: -0.03em; margin: 8px 0 16px; } .mise__title .red { color: var(--red); } .mise__title .sky { color: var(--sky); } .mise p { font-family: var(--accent); font-style: italic; font-size: 22px; line-height: 1.45; margin: 0 0 16px; } .mise p strong { font-family: var(--display); font-weight: var(--display-w); font-style: normal; font-size: 22px; } /* Short mise (used on home) — single centered paragraph */ .mise--short { background: var(--cream); padding-block: 56px; } .mise__inner--short { display: block; max-width: 880px; margin: 0 auto; text-align: center; } .mise__short { font-family: var(--accent); font-style: italic; font-size: 28px; line-height: 1.4; margin: 0; color: var(--ink); } .mise__short strong { font-family: var(--display); font-weight: var(--display-w); font-style: normal; font-size: 30px; line-height: 1.2; display: block; margin-bottom: 8px; color: var(--red); letter-spacing: -0.01em; } /* ── Goulashes — featured cards ──────────────────────────────────────────── */ .goulash__item.is-wow { background: var(--mustard); color: var(--ink); border-color: transparent; font-weight: 800; } .goulash__item.is-wow::before { content: "★ "; } .goulash__item--more { opacity: 0.6; font-style: italic; } /* ── FB / IG icons (CSS-only, color = currentColor) ──────────────────────── */ .has-icon-fb::before, .has-icon-ig::before, .has-icon-fb-event::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -0.18em; margin-right: 0.5em; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .has-icon-fb::before, .has-icon-fb-event::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 8H6v4h3v12h5V12h3.642L18 8h-4V6.333C14 5.378 14.192 5 15.115 5H18V0h-3.808C10.596 0 9 1.583 9 4.615V8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 8H6v4h3v12h5V12h3.642L18 8h-4V6.333C14 5.378 14.192 5 15.115 5H18V0h-3.808C10.596 0 9 1.583 9 4.615V8z'/%3E%3C/svg%3E"); } .has-icon-ig::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E"); } /* Price chip in goulash header */ .goulash__price { display: inline-block; margin-top: 12px; margin-right: 8px; padding: 8px 14px; background: var(--cream); color: var(--ink); border-radius: 999px; font-family: var(--ui); font-weight: 800; font-size: 13px; letter-spacing: 0.08em; } /* ── Social CTA block (replaces sponsors) ────────────────────────────────── */ .social { background: var(--ink); color: var(--cream); padding: 64px 48px; } .social__head { margin-bottom: 24px; } .social__title { font-family: var(--display); font-weight: var(--display-w); font-size: 76px; line-height: 0.9; letter-spacing: -0.03em; margin: 8px 0 0; } .social__title .mustard { color: var(--mustard); } .social__title .red { color: var(--red); } .social__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .social__card { display: block; padding: 28px 28px; border-radius: 20px; text-decoration: none; color: var(--cream); background: rgba(255, 247, 232, 0.06); border: 2px solid rgba(255, 247, 232, 0.18); transition: transform 0.15s ease, background 0.15s ease; } .social__card:hover { transform: translateY(-2px); background: rgba(255, 247, 232, 0.1); } .social__card--fb { background: #1877f2; border-color: #1877f2; } .social__card--ig { background: linear-gradient(135deg, #f58529, #dd2a7b 50%, #515bd4); border-color: transparent; } .social__card--event { background: var(--red); border-color: var(--red); } .social__big-icon { display: block; font-size: 36px; line-height: 1; height: 1em; margin-bottom: 16px; } .social__big-icon::before { margin-right: 0; } .social__type { font-family: var(--ui); font-weight: 800; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; } .social__name { font-family: var(--display); font-weight: var(--display-w); font-size: 32px; letter-spacing: -0.02em; margin-top: 8px; } .social__sub { font-family: var(--accent); font-style: italic; font-size: 18px; margin-top: 8px; opacity: 0.95; } /* ── Free-entry hero block (vstupné) ─────────────────────────────────────── */ .free-hero { background: var(--mustard); color: var(--ink); border-radius: 28px; padding: 40px 48px; margin-bottom: 32px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; box-shadow: var(--shadow-stick); transform: rotate(-0.4deg); } .free-hero__title { font-family: var(--display); font-weight: var(--display-w); font-size: 88px; line-height: 0.9; letter-spacing: -0.04em; margin: 0; } .free-hero__sub { font-family: var(--accent); font-style: italic; font-size: 22px; margin: 12px 0 0; line-height: 1.4; max-width: 640px; } .free-hero__bubble { width: 130px; height: 130px; background: var(--ink); color: var(--cream); border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--display); font-weight: var(--display-w); font-size: 28px; line-height: 0.95; transform: rotate(8deg); flex-shrink: 0; } /* ── CONTENT WIDTH CAP (desktop) ───────────────────────────────────────────── Caps content at --content-max while preserving full-bleed backgrounds. Mobile media queries below override these with smaller fixed gutters. */ .nav, .hero, .countdown, .section, .about, .goulash, .info-strip, .testimonials, .ticket-strip, .gallery-strip, .sponsors, .footer { padding-left: max(var(--gutter), calc((100% - var(--content-max)) / 2)); padding-right: max(var(--gutter), calc((100% - var(--content-max)) / 2)); } /* Trim oversized vertical padding so the page feels less screen-filling */ .hero { padding-top: 32px; padding-bottom: 64px; } .section { padding-top: 64px; padding-bottom: 64px; } .about { padding-top: 72px; padding-bottom: 72px; } .goulash { padding-top: 72px; padding-bottom: 72px; } .testimonials { padding-top: 72px; padding-bottom: 72px; } .ticket-strip { padding-top: 64px; padding-bottom: 64px; } .info-strip { padding-top: 64px; padding-bottom: 64px; } .sponsors { padding-top: 56px; padding-bottom: 56px; } .gallery-strip { padding-top: 64px; padding-bottom: 64px; } .countdown { padding-top: 40px; padding-bottom: 40px; } .footer { padding-top: 56px; padding-bottom: 28px; } .nav { padding-top: 16px; padding-bottom: 16px; } /* Tame oversized type so 1200px feels balanced, not blown-out */ .hero__kicker { font-size: 11px; opacity: 0.85; } .hero__title { font-size: 132px; } .section__title { font-size: 80px; } .about__title { font-size: 76px; } .goulash__title { font-size: 104px; } .testimonials__title { font-size: 80px; } .gallery-strip__title{ font-size: 64px; } .sponsors__title { font-size: 64px; } .page-head__title { font-size: 110px; } .footer__hero { font-size: 144px; } .ticket-strip__title { font-size: 56px; } .ticket__price { font-size: 76px; } .testimonial:first-child .testimonial__quote { font-size: 28px; } /* ============================================================================ RESPONSIVE — Mobile (≤ 960px) ============================================================================ */ @media (max-width: 960px) { /* Nav */ .nav { padding: 14px 20px; } .nav__menu, .nav__cta { display: none; } .nav__toggle { display: flex; align-items: center; justify-content: center; } .nav__toggle.is-open { background: var(--ink); color: var(--cream); } .nav__name { font-size: 22px; } .nav__logo { width: 36px; height: 36px; font-size: 20px; } /* Hero */ .hero { padding: 24px 20px 40px; flex-direction: column; gap: 0; } .hero__title { font-size: 64px; } .hero__inner { max-width: 100%; flex-basis: auto; } .hero__photo-wrap { flex-basis: auto; } .hero__cta { flex-direction: column; } .hero__cta .btn { width: 100%; padding: 16px 24px; font-size: 15px; } .hero__photo-wrap { position: relative; top: auto; right: auto; width: auto; height: 360px; margin-top: 32px; } .hero__photo { position: absolute; top: 20px; right: 20px; left: 20px; bottom: 20px; width: auto; height: auto; transform: rotate(2deg); } .hero .sticker--year { width: 100px; height: 100px; top: 0; right: 0; } .hero .sticker--year .sticker__big { font-size: 28px; } .hero .sticker--year .sticker__small { font-size: 9px; } .hero .sticker--types { width: 90px; height: 90px; top: auto; bottom: 110px; right: auto; left: -12px; transform: rotate(8deg); } .hero .sticker--types .sticker__big { font-size: 22px; } .hero .sticker--types .sticker__small { font-size: 9px; } .hero .sticker--free { width: 92px; height: 92px; top: auto; right: -10px; left: auto; bottom: 30px; } .hero .sticker--free .sticker__big { font-size: 18px; } .hero .sticker--free .sticker__small { font-size: 12px; } /* Countdown */ .countdown { padding: 36px 16px; } .countdown__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .countdown__cell { min-width: 0; padding: 16px 12px; } .countdown__num { font-size: 40px; } .countdown__unit { font-size: 11px; } /* Section shell */ .section { padding: 48px 20px; } .section__title { font-size: 56px; } /* Tighten gap between mise and the next section on mobile */ .mise + .section { padding-top: 24px; } .mise { padding-bottom: 28px; } .kicker { font-size: 11px; } /* Lineup preview */ .bands { grid-template-columns: 1fr; gap: 10px; } .band { padding: 20px 22px; } .band__name { font-size: 22px; } .band__num { font-size: 10px; } .lineup-aside { font-size: 20px; } /* About */ .about { padding: 56px 20px; } .about__grid { grid-template-columns: 1fr; gap: 32px; } .about__title { font-size: 52px; } .about__lead { font-size: 19px; } .about__photos { height: 320px; } .about__photos .photo:first-child { top: 0; right: 40px; width: 220px; height: 260px; } .about__photos .photo:last-child { bottom: 0; right: 0; width: 170px; height: 180px; } /* Goulash list */ .goulash { padding: 56px 20px; } .goulash__grid { grid-template-columns: 1fr; gap: 24px; } .goulash__intro { position: static; } .goulash__title { font-size: 64px; } .goulash__lead { font-size: 19px; } .goulash__list { grid-template-columns: repeat(2, 1fr); gap: 6px; } .goulash__item { padding: 10px 12px; font-size: 12px; } /* Info strip */ .info-strip { padding: 56px 20px; } .info-strip__grid { grid-template-columns: 1fr; gap: 14px; } .info-card { padding: 28px 24px; } .info-card__title { font-size: 36px; } .info-card__body { font-size: 18px; } /* Testimonials */ .testimonials { padding: 56px 20px; } .testimonials__title { font-size: 56px; } .testimonials__grid { grid-template-columns: 1fr; gap: 14px; } .testimonial { padding: 24px 24px; } .testimonial:first-child { grid-column: auto; } .testimonial__quote, .testimonial:first-child .testimonial__quote { font-size: 20px; } /* Ticket strip */ .ticket-strip { padding: 56px 20px; } .ticket-strip__inner { flex-direction: column; align-items: stretch; padding: 28px 24px; } .ticket-strip__title { font-size: 32px; } .ticket-strip__sub { font-size: 18px; } .ticket-strip__badge { text-align: center; align-self: stretch; } /* Gallery strip */ .gallery-strip { padding: 24px 20px 56px; } .gallery-strip__title { font-size: 44px; } .gallery-strip__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; gap: 8px; } /* Sponsors */ .sponsors { padding: 56px 20px; } .sponsors__title { font-size: 48px; } .sponsors__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .sponsor { padding: 18px 14px; min-height: 100px; } .sponsor__name { font-size: 16px; } .sponsors__cta { font-size: 16px; } /* Page heads */ .page-head { margin-bottom: 28px; } .page-head__title { font-size: 64px; } .page-head__lead { font-size: 19px; } /* Lineup page */ .lineup-banner { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 20px; } .lineup-wall { grid-template-columns: 1fr; gap: 10px; } .band--big { padding: 24px 22px; min-height: 0; } .band--big .band__name { font-size: 28px; } .band--tease { font-size: 22px; min-height: 100px; padding: 24px 22px; } .harmonogram { grid-template-columns: 1fr; padding: 24px 24px; margin-top: 28px; } .harmonogram__title { font-size: 28px; } .harmonogram__sub { font-size: 18px; } .harmonogram__buttons { flex-direction: column; } .lineup-extras { padding: 24px 24px; font-size: 19px; } /* Tickets page */ .tickets { grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; } .ticket { padding: 24px 24px; } .ticket__price { font-size: 56px; } .ticket__sub { font-size: 18px; } .tickets-info { grid-template-columns: 1fr; gap: 20px; padding: 28px 24px; } .tickets-info__title { font-size: 28px; } .tickets-info__body { font-size: 18px; } .tickets-foot { font-size: 18px; } /* Venue */ .venue-grid { grid-template-columns: 1fr; gap: 16px; } .venue-map { height: 280px; } .venue-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 24px 24px; margin-top: 24px; } .venue-stat__num { font-size: 44px; } .venue-stat__label { font-size: 11px; } .venue-card__body { font-size: 22px; } /* Gallery page */ .reels { grid-template-columns: repeat(2, 1fr); gap: 10px; } .reel__play { width: 56px; height: 56px; font-size: 24px; } .reel__label { font-size: 14px; } .gallery-block__title { font-size: 28px; } .photo-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; gap: 8px; } /* FAQ */ .faq summary { padding: 16px 20px; } .faq__q { font-size: 18px; } .faq__sign { font-size: 24px; } .faq__a { padding: 0 20px 16px; font-size: 18px; } .faq-cta { padding: 24px 24px; flex-direction: column; align-items: stretch; } .faq-cta__title { font-size: 26px; } /* Footer */ .footer { padding: 40px 20px 24px; } .footer__hero { font-size: 64px; } .footer__contact { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; padding-top: 24px; } .footer__bar { flex-direction: column; margin-top: 24px; } /* New components */ .hero__when { padding: 12px 18px; margin-top: 20px; } .hero__date { font-size: 28px; } .hero__where { font-size: 12px; } .hero__photo--alt { width: 130px; height: 160px; bottom: -10px; left: -8px; } .mise { padding: 48px 20px; } .mise__inner { grid-template-columns: 1fr; gap: 24px; } .mise__title { font-size: 48px; } .mise p { font-size: 18px; } .social { padding: 48px 20px; } .social__title { font-size: 48px; } .social__grid { grid-template-columns: 1fr; gap: 12px; } .social__name { font-size: 26px; } .social__sub { font-size: 16px; } .free-hero { padding: 28px 24px; grid-template-columns: 1fr; gap: 16px; } .free-hero__title { font-size: 56px; } .free-hero__sub { font-size: 18px; } .free-hero__bubble { width: 110px; height: 110px; font-size: 22px; align-self: center; } .ticket-strip__title { font-size: 32px; } .hero__photo--alt { width: 130px; height: 160px; top: auto; bottom: 0; left: -8px; right: auto; transform: rotate(-6deg); } .hero__photo--alt2 { width: 150px; height: 95px; top: auto; bottom: -10px; right: -8px; left: auto; transform: rotate(5deg); } .band-banner { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 28px; } .band-banner__name { font-size: 20px; bottom: 10px; left: 12px; right: 12px; } .band--wide { grid-column: auto; } .band--wide .band__name { font-size: 28px; } .faq-groups { grid-template-columns: 1fr; gap: 28px; } .faq-group__title { font-size: 28px; } .faq-group__icon { width: 36px; height: 36px; font-size: 18px; } .faq-group .faq__q { font-size: 17px; } .faq-group .faq__a { font-size: 17px; } .faq-list--home { grid-template-columns: 1fr; } .gallery-foot__lead { font-size: 18px; } .onsite-banner { padding: 24px 22px; gap: 16px; } .onsite-banner__title { font-size: 26px; } .onsite-banner__sub { font-size: 17px; } .onsite-banner__icon { width: 48px; height: 48px; font-size: 28px; } .band--tease__title { font-size: 28px; } .band--tease__sub { font-size: 17px; } .video-feature { max-width: 100%; } .mise--short { padding-block: 40px; } .mise__short { font-size: 19px; } .mise__short strong { font-size: 22px; } .photo-band { height: 200px; } .goulash__photo { width: 140px; height: 140px; margin-bottom: 16px; } .video-feature__caption { font-size: 17px; margin-top: 18px; } .gallery-strip__cta { margin-top: 24px; } .gallery-strip__cta .btn { font-size: 16px; padding: 16px 24px; } } /* Tighter still on phones */ @media (max-width: 420px) { .hero__title { font-size: 56px; } .page-head__title { font-size: 56px; } }