/* ========================================================================== GOA Festival – public site styles Colors, logo and background are edition-specific and injected as CSS custom properties by fragments/head.html. This file only defines how those tokens are used, so a new "Jahr" automatically re-skins the page. ========================================================================== */ @font-face { font-family: 'Brugty'; src: url('/fonts/Brugty.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } :root { --color-primary: #2f6f68; --color-secondary: #e0559a; --color-accent: #f2c14e; --color-text: #ffffff; --bg-image: none; --font-display: 'Brugty', 'Baloo 2', 'Comic Sans MS', cursive, sans-serif; --font-body: 'Poppins', 'Segoe UI', Arial, sans-serif; } * { box-sizing: border-box; } /* The canvas color goes on only: is a normal in-flow box that paints above z-index:-1 fixed children (like .page-bg) regardless of z-index, so giving it its own opaque background would blot out the fixed backdrop everywhere. */ html { background: #171717; font-size: 118%; } html, body { margin: 0; padding: 0; font-family: var(--font-body); color: var(--color-text); scroll-behavior: smooth; } a { color: inherit; } img { max-width: 100%; display: block; } /* Puffy "sticker" heading look: an oversized text-stroke relative to the font-size makes adjacent letters' outlines merge into a solid blob, and paint-order keeps the fill on top so the glyph itself stays legible. */ .bubble-text { font-family: var(--font-display); color: var(--color-accent); -webkit-text-stroke: 0.16em var(--color-primary); paint-order: stroke fill; line-height: 1.3; margin: 0; } /* ---------------------------------- Nav ---------------------------------- */ .site-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 1rem; background: var(--color-primary); padding: 0.6rem 1.5rem; flex-wrap: wrap; } .site-nav .brand { text-decoration: none; font-family: var(--font-display); font-weight: bold; color: var(--color-accent); font-size: 1.3rem; display: flex; align-items: center; } .site-nav .brand img { height: 42px; width: auto; } .nav-toggle { display: none; margin-left: auto; background: none; border: none; color: var(--color-text); font-size: 1.4rem; cursor: pointer; } .nav-links { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .nav-links .pill { background: var(--color-accent); color: var(--color-primary); text-decoration: none; padding: 0.6rem 1.3rem; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; white-space: nowrap; } .nav-socials { display: flex; gap: 0.5rem; align-items: center; } .nav-socials a { display: inline-flex; transition: transform 0.2s ease, opacity 0.2s ease; } .nav-socials a:hover { transform: scale(1.08); opacity: 0.9; } .nav-socials img { width: 30px; height: 30px; border-radius: 50%; } .nav-history { text-decoration: none; color: var(--color-text); font-family: var(--font-display); font-weight: 600; opacity: 0.85; font-size: 1.05rem; white-space: nowrap; } .nav-history-dropdown { position: relative; } .nav-history-dropdown .dropdown-toggle { background: none; border: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 0.3rem; } .nav-history-dropdown .caret { font-size: 0.8rem; transition: transform 0.2s ease; } .nav-history-dropdown.open .caret { transform: rotate(180deg); } .nav-history-dropdown .dropdown-menu { display: none; flex-direction: column; gap: 0.25rem; position: absolute; top: 100%; right: 0; margin-top: 0.6rem; background: var(--color-primary); border-radius: 12px; padding: 0.5rem; min-width: 140px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); z-index: 60; } .nav-history-dropdown.open .dropdown-menu { display: flex; } .nav-history-dropdown .dropdown-menu a { text-decoration: none; color: var(--color-text); font-family: var(--font-display); font-weight: 600; padding: 0.5rem 0.7rem; border-radius: 8px; white-space: nowrap; } .nav-history-dropdown .dropdown-menu a:hover { background: color-mix(in srgb, var(--color-primary) 70%, black); } /* ------------------------------- Fixed backdrop ---------------------------- */ /* A dedicated fixed layer behind everything, instead of background-attachment:fixed on .hero: that property is notoriously unreliable on mobile browsers (iOS Safari in particular), where it can bleed through supposedly-opaque sections further down the page. A plain position:fixed element sits below all content via z-index, so any section with its own opaque background reliably covers it once scrolled into view. */ .page-bg { position: fixed; top: 0; left: 0; width: 100%; /* inset:0's implicit height (computed from bottom:0 against whatever the viewport currently is) is exactly what made this visibly resize/flash as the mobile URL bar showed and hid - it recalculates on every transition. An explicit, stable height doesn't. Sized to the *large* viewport (bar hidden) rather than the small one, so there's no gap of bare page background below it once the bar hides and the page grows taller than a small-viewport-sized layer would cover. */ height: 100vh; height: 100lvh; z-index: -1; background-image: var(--bg-image); background-color: #2a2a2a; background-size: cover; background-position: center; } /* ---------------------------------- Hero ---------------------------------- */ .hero { /* svh (small viewport height) ignores the mobile browser's collapsible URL bar, so the hero - and the fixed .page-bg behind it - don't visibly resize/jump as it shows and hides while scrolling. Falls back to plain vh on browsers that don't support svh yet. */ min-height: 85vh; min-height: 85svh; display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; text-align: center; } .hero-inner { max-width: 1100px; min-width: 0; width: 100%; } .hero-logo { max-width: 100%; width: min(90vw, 820px); height: auto; margin: 0 auto; } .hero-location-image { max-width: 100%; width: min(70vw, 480px); height: auto; margin: 2rem auto 0; } .hero-title { font-size: clamp(2.4rem, 9vw, 4.4rem); font-family: var(--font-display); color: var(--color-accent); -webkit-text-stroke: 0.16em var(--color-primary); paint-order: stroke fill; text-transform: uppercase; line-height: 1.3; margin: 0; overflow-wrap: break-word; } .hero-year { font-size: clamp(3.6rem, 16vw, 8.6rem); font-family: var(--font-display); color: var(--color-secondary); -webkit-text-stroke: 0.16em var(--color-primary); paint-order: stroke fill; line-height: 1.3; margin: 0.5rem 0 2rem; } .headliner-box { display: inline-block; background: var(--color-secondary); border: 4px solid var(--color-primary); border-radius: 28px; padding: 1.25rem 3rem; transform: rotate(-1.5deg); } .headliner-name { font-family: var(--font-display); font-size: clamp(2rem, 7vw, 3.2rem); color: var(--color-accent); -webkit-text-stroke: 1.5px var(--color-primary); paint-order: stroke fill; overflow-wrap: break-word; } .headliner-date { font-family: var(--font-display); font-size: clamp(1.6rem, 5.5vw, 2.4rem); color: var(--color-accent); -webkit-text-stroke: 1px var(--color-primary); paint-order: stroke fill; margin-top: 0.25rem; } /* --------------------------------- Sections -------------------------------- */ /* .section-band carries a section's full-bleed background color; .section inside it constrains and centers the actual content to a readable width. */ .section-band { width: 100%; } .section { padding: 3.5rem 1.5rem; max-width: 1440px; margin: 0 auto; } /* A short rule between sections instead of a hard color-block edge, so the backdrop veil can stay the same everywhere while sections still read as separate. */ .section-divider { width: 120px; height: 2px; margin: 2.5rem auto; border: none; background: rgba(255, 255, 255, 0.3); } .section-title { font-family: var(--font-display); font-size: clamp(2.2rem, 6vw, 3.2rem); color: var(--color-secondary); -webkit-text-stroke: 0.14em var(--color-primary); paint-order: stroke fill; line-height: 1.3; margin: 0 0 2rem; overflow-wrap: break-word; } .section-infos { background: #0000004f; } .infos-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: stretch; } @media (max-width: 800px) { .infos-grid { grid-template-columns: 1fr; } } /* One panel holding all three Was/Wann/Wo rows, each row a two-column [big bubble label | answer text] layout - matching the real site instead of three separate stacked cards. */ /* .info-row uses display:contents so its label+paragraph become direct children of this grid - that's what makes all three rows share one column width and left-align their answer text at the same position, instead of each row sizing its own label column independently. */ .info-panel { background: color-mix(in srgb, var(--color-primary) 82%, transparent); border-radius: 24px; padding: 1.75rem 2.25rem; display: grid; grid-template-columns: auto 1fr; column-gap: 2rem; row-gap: 1.5rem; align-items: start; } .info-row { display: contents; } @media (max-width: 480px) { .info-panel { grid-template-columns: 1fr; row-gap: 0.5rem; } } .info-label { font-family: var(--font-display); font-size: clamp(2.2rem, 6vw, 3rem); -webkit-text-stroke: 0.16em var(--color-primary); paint-order: stroke fill; line-height: 1.3; color: #ab77b3; white-space: nowrap; } .info-row p { margin: 0; line-height: 1.5; font-size: 1.15rem; font-family: var(--font-display); color: #d9a441; align-self: center; } .infos-map { display: flex; flex-direction: column; gap: 1rem; height: 100%; } .map-frame { width: 100%; flex: 1; min-height: 220px; border: 0; border-radius: 18px; } .route-button { display: block; width: 100%; box-sizing: border-box; text-align: center; background: var(--color-accent); color: var(--color-primary); text-decoration: none; font-weight: 700; font-size: 1.2rem; padding: 0.9rem 1.4rem; border-radius: 999px; font-family: var(--font-display); } /* --------------------------------- Line-up --------------------------------- */ .section-lineup { background: #0000004f; } .day-block { margin-bottom: 2.5rem; } .day-title { font-family: var(--font-display); color: var(--color-accent); -webkit-text-stroke: 0.14em var(--color-primary); paint-order: stroke fill; line-height: 1.3; text-align: center; font-size: clamp(1.6rem, 5vw, 2.2rem); margin-bottom: 1.5rem; } .band-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.875rem; } @media (max-width: 768px) { .band-grid { grid-template-columns: 1fr; } } .band-card { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 32px; background-color: #333; text-decoration: none; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.35); } .band-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease, filter 0.35s ease; } .band-card:hover img { transform: scale(1.06); filter: brightness(70%); } .band-card-overlay { position: absolute; inset: auto 0 0 0; background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0)); padding: 1.5rem 1rem 0.9rem; } .band-card-name { font-family: var(--font-display); color: var(--color-accent); font-size: 1.6rem; } .band-card-genre, .band-card-time { font-size: 1rem; opacity: 0.9; } @media (max-width: 480px) { .band-card { border-radius: 20px; } } .empty-hint { opacity: 0.7; text-align: center; } /* ----------------------------------- FAQ ------------------------------------ */ .section-faq { background: #0000004f; } .faq-list { display: flex; flex-direction: column; gap: 0.75rem; } .faq-item { border-radius: 14px; overflow: hidden; } /* The title bar stays fully opaque; only the content underneath (.faq-answer) is translucent, so the question row stays easy to read against the busy backdrop. */ .faq-question { width: 100%; text-align: left; background: color-mix(in srgb, var(--color-primary) 92%, black); border: none; color: var(--color-text); font-family: var(--font-display); font-weight: 600; padding: 1.15rem 1.5rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 1.15rem; } .faq-caret { transition: transform 0.2s ease; flex-shrink: 0; } .faq-item.open .faq-caret { transform: rotate(180deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; background: color-mix(in srgb, var(--color-primary) 82%, transparent); padding: 0 1.5rem; } .faq-item.open .faq-answer { max-height: 400px; padding: 1.1rem 1.5rem; } .faq-answer p { margin: 0; font-weight: 700; line-height: 1.5; } /* ---------------------------------- Footer ---------------------------------- */ .site-footer { text-align: center; padding: 1.5rem; background: #0000004f; } .site-footer a { text-decoration: none; font-size: 0.85rem; font-weight: 700; color: var(--color-text); } /* -------------------------------- Band detail -------------------------------- */ .band-detail-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 2rem; padding: 2.5rem 2.5rem; max-width: 1600px; margin: 0 auto; } @media (max-width: 800px) { .band-detail-hero { grid-template-columns: 1fr; } } .band-detail-image { min-width: 0; } .band-detail-image img { border-radius: 18px; width: 100%; height: 100%; /* Matches .band-card's ratio (the Line-Up overview) as a floor: the grid's row-stretch can still make this taller to match a longer text card, but it should never end up shorter/more landscape than the overview photo. */ aspect-ratio: 4 / 3; object-fit: cover; } .band-detail-card { background: color-mix(in srgb, var(--color-primary) 82%, transparent); border-radius: 20px; padding: 2rem; display: flex; flex-direction: column; justify-content: center; min-width: 0; } .band-detail-name { font-family: var(--font-display); font-size: clamp(2.2rem, 6vw, 3.2rem); color: var(--color-accent); -webkit-text-stroke: 1.5px var(--color-primary); paint-order: stroke fill; margin: 0; overflow-wrap: break-word; } .band-detail-datetime { color: var(--color-secondary); font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; } .band-detail-meta { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 1.25rem 0; } .meta-label { font-family: var(--font-display); color: var(--color-secondary); -webkit-text-stroke: 1px var(--color-primary); paint-order: stroke fill; display: block; font-size: 1.35rem; } .band-detail-meta p { margin: 0.2rem 0 0; } .band-detail-description { line-height: 1.6; opacity: 0.95; } .band-detail-socials { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; } .band-detail-socials a { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(0,0,0,0.2); transition: transform 0.2s ease, opacity 0.2s ease; } .band-detail-socials a:hover { transform: scale(1.08); opacity: 0.9; } .band-detail-socials img { width: 32px; height: 32px; border-radius: 50%; } .band-detail-video { max-width: 1600px; margin: 0 auto 2.5rem; padding: 0 2.5rem; } .band-detail-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 18px; } .band-detail-gallery { max-width: 1600px; margin: 0 auto; padding: 0 2.5rem 2.5rem; } .gallery-panel { background: color-mix(in srgb, var(--color-primary) 82%, transparent); border-radius: 20px; padding: 2rem; } .gallery-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 700px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } .gallery-grid img { border-radius: 18px; aspect-ratio: 1; object-fit: cover; cursor: pointer; transition: transform 0.35s ease, opacity 0.35s ease; } .gallery-grid img:hover { transform: scale(1.06); opacity: 0.92; } .band-detail-back { text-align: center; padding-bottom: 2rem; } .band-detail-back a { text-decoration: none; opacity: 0.85; } /* --------------------------------- Legal page -------------------------------- */ .legal-page { background: #0000004f; min-height: 50vh; min-height: 50svh; } .legal-text { line-height: 1.6; opacity: 0.95; font-weight: 700; } .legal-text a { color: inherit; text-decoration: underline; } /* --------------------------------- Responsive -------------------------------- */ @media (max-width: 700px) { .nav-toggle { display: block; } .nav-links { display: none; width: 100%; flex-direction: column; align-items: flex-start; margin-top: 0.75rem; } .nav-links.open { display: flex; } /* Desktop anchors the menu to the toggle's right edge, which sits far right in the nav bar there. On mobile the stacked nav-links are left-aligned instead, so that same right:0 anchor pushed a min-width:140px menu off the left edge of the screen. */ .nav-history-dropdown .dropdown-menu { left: 0; right: auto; } } /* On phones the fixed 1.5-2.5rem side padding ate a noticeable chunk of an already-narrow screen; trim it down so content actually uses the width. */ @media (max-width: 480px) { .hero, .section, .band-detail-hero, .band-detail-gallery, .band-detail-video { padding-left: 0.5rem; padding-right: 0.5rem; } }