/* ============================================================ NEVER SAY DIE — Website Stylesheet Design: gig-poster identity — full-bleed sections, oversized Oswald type, a paper-toned ticker stripe, grain texture, and a few tactile touches (tilting member cards, ticket-stub shows, scroll reveals). Three tones only: ink / paper / accent-red. Structure: css tokens → base → chrome (nav/marquee/grain) → hero → shared section/disclosure/button components → each section → responsive. The multitrack player keeps its original class names throughout (.player__panel, .player__control, .player__track, .player__caption, .player__volume…) — js/player.js is unchanged. ============================================================ */ :root{ --ink: #08080a; /* page ground */ --ink-2: #131316; /* raised panels on ink */ --ink-3: #1c1c20; /* borders / hairlines on ink */ --paper: #f2ece0; /* the one light surface */ --paper-2: #e7ddc9; /* borders/shade on paper */ --text: #e9e4da; /* body copy on ink */ --muted: #948b7e; /* secondary text on ink */ --accent: #e31c2e; /* blood red */ --accent-2: #9c0f1c; /* darker red, for gradients */ --line: rgba(255,255,255,.12); --display: 'Oswald', 'Haettenschweiler', 'Franklin Gothic Heavy', Impact, sans-serif; --body: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --edge: clamp(20px, 5vw, 64px); --radius: 2px; } *{ box-sizing:border-box; margin:0; padding:0; } html{ background:var(--ink); scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } body{ font-family:var(--body); background:var(--ink); color:var(--text); overflow-x:hidden; /* overflow-x:hidden stops scrolling to reveal actual off-screen content, but not a touch browser's own rubber-band/bounce drag past the page edge — these two are what actually suppress that, and unlike overflow-x on , neither of them can cause the double-scrollbar bug (they don't turn body into a scroll container) */ overscroll-behavior-x:none; touch-action:pan-y; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } .wrap{ max-width:1200px; margin:0 auto; padding-left:var(--edge); padding-right:var(--edge); } /* keeps the sticky nav from covering a section's heading when a nav link scrolls to it */ #ueber-uns, #hoeren, #band, #shows, #kontakt{ scroll-margin-top:4.6rem; } .eyebrow{ font-family:var(--display); font-weight:500; font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:.7rem; } .eyebrow::after{ content:""; flex:1; height:1px; background:var(--line); } .section{ padding:5rem 0; } .section__head{ margin-bottom:2.2rem; } .section__subhead{ font-family:var(--display); font-weight:500; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 1rem; } /* ---- grain texture (whole page, decorative, non-interactive) --- */ .grain{ position:fixed; inset:0; z-index:80; pointer-events:none; opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- reveal-on-scroll (progressive enhancement, see js/site.js) --- */ .reveal.pre-reveal{ opacity:0; transform:translateY(28px); } @media (prefers-reduced-motion:no-preference){ .reveal{ transition:opacity .7s ease, transform .7s ease; } } /* ---- cta cards (shared) ------------------------------------------ */ /* the streaming link, styled as a "primary" card — Icon badge + title/ subtitle + a trailing arrow that slides right on hover. .cta-card is the shared base; .cta-row is unused now that Instagram/Facebook have their own cards removed (still in the footer icon row) but stays since other cta-card consumers may want it later. */ .cta-card{ position:relative; display:flex; align-items:center; gap:1.1rem; padding:1.2rem 1.4rem; background:var(--ink-2); border:1px solid var(--ink-3); overflow:hidden; transition:border-color .2s ease, transform .2s ease, background-color .2s ease; } .cta-card:hover{ border-color:var(--accent); background:#181819; transform:translateY(-2px); } .cta-card__icon{ flex:none; width:2.9rem; height:2.9rem; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--ink-3); color:var(--accent); transition:background-color .2s ease, color .2s ease; } .cta-card__icon svg{ width:1.35rem; height:1.35rem; } .cta-card:hover .cta-card__icon{ background:var(--accent); color:var(--ink); } .cta-card__text{ min-width:0; flex:1; } .cta-card__title{ font-family:var(--display); font-weight:600; font-size:1.05rem; letter-spacing:.02em; color:var(--paper); } .cta-card__sub{ font-size:.82rem; color:var(--muted); margin-top:.15rem; } .cta-card__arrow{ flex:none; width:1.3rem; height:1.3rem; color:var(--muted); transition:transform .2s ease, color .2s ease; } .cta-card:hover .cta-card__arrow{ transform:translateX(4px); color:var(--accent); } /* the streaming link gets top billing: full-bleed red gradient, its own larger type scale, and a paper-colored icon badge so it reads against the red instead of blending into it. Sized a touch smaller than the original — it's the only card in .listen-cta now, not the biggest of a set, so it no longer needs to carry that much visual weight. */ .cta-card--primary{ background:linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%); border-color:transparent; padding:1.15rem 1.4rem; box-shadow:0 10px 30px -10px rgba(227,28,46,.55); } .cta-card--primary:hover{ border-color:transparent; background:linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%); box-shadow:0 14px 34px -8px rgba(227,28,46,.7); } .cta-card--primary .cta-card__icon{ width:2.4rem; height:2.4rem; background:var(--paper); color:var(--accent); } .cta-card--primary .cta-card__icon svg{ width:1.15rem; height:1.15rem; } .cta-card:hover.cta-card--primary .cta-card__icon{ background:var(--paper); color:var(--accent); } .cta-card--primary .cta-card__title{ font-size:1.1rem; color:var(--paper); } .cta-card--primary .cta-card__sub{ font-size:.78rem; color:rgba(242,236,224,.85); } .cta-card--primary .cta-card__arrow{ color:var(--paper); } .cta-card:hover.cta-card--primary .cta-card__arrow{ color:var(--paper); } .cta-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr)); gap:.9rem; } /* ---- disclosure (shared collapsed-by-default panel) -------------- */ .disclosure{ background:var(--ink-2); border:1px solid var(--ink-3); border-left:3px solid var(--accent); } .disclosure__summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.5rem; font-family:var(--display); font-weight:500; font-size:.88rem; letter-spacing:.08em; text-transform:uppercase; color:var(--paper); } .disclosure__summary::-webkit-details-marker{ display:none; } .disclosure__summary:hover{ color:var(--accent); } .disclosure__chev{ width:1.1rem; height:1.1rem; color:var(--accent); flex:none; transition:transform .2s ease; } .disclosure[open] .disclosure__chev{ transform:rotate(180deg); } .disclosure__content{ padding:0 1.5rem 1.8rem; display:flex; flex-direction:column; gap:1.8rem; } /* ================================================================ NAV ================================================================ */ .nav{ position:sticky; top:0; z-index:90; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem var(--edge); background:transparent; border-bottom:1px solid transparent; transition:background-color .25s ease, border-color .25s ease; } /* .nav:has(...) is a pure-CSS backstop for the same "solid while the mobile menu is open" state js/site.js also sets via .nav--solid — so the bar can't be left see-through behind its own opaque drawer even if the JS toggle doesn't fire for some reason. No backdrop-filter here (deliberately) — background is fully opaque now so blur has nothing to do visually, and backdrop-filter has a real side effect: it makes .nav a containing block for its own position:fixed descendants (the mobile drawer, #navLinks), which broke the drawer's top/bottom inset sizing down to ~64px tall instead of the full viewport height the moment this class landed. */ .nav--solid, .nav:has(.nav__links.is-open){ background:var(--ink); border-bottom-color:var(--ink-3); } .nav__brand{ font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:.08em; color:var(--paper); } .nav__links{ display:flex; gap:1.8rem; font-family:var(--display); font-weight:500; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; } /* plain white/paper by default — was --muted (a warm gray), which didn't have enough contrast against the hero photo while the nav still sits transparent over it, before scrolling triggers .nav--solid */ .nav__links a{ color:var(--paper); transition:color .15s ease; padding:.3rem 0; } .nav__links a:hover{ color:var(--accent); } .nav__links a.is-active{ color:var(--accent); } .nav__toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:2.2rem; height:2.2rem; background:none; border:none; cursor:pointer; } .nav__toggle span{ display:block; height:2px; background:var(--paper); transition:transform .2s ease, opacity .2s ease; } .nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* ================================================================ HERO ================================================================ */ .hero{ position:relative; aspect-ratio:2660 / 1300; overflow:hidden; /* sit the sticky nav on top of the photo. A % margin is computed from the hero's own width — and since its height is itself a fixed ratio of that width (aspect-ratio above), this stays a constant fraction of the hero's height at every viewport size. A fixed rem value here would instead eat a growing share of the image as the hero (and its aspect-ratio-locked height) shrinks on narrow screens — up to ~40% of it on a phone — which is what was cropping the heads out. */ margin-top:-3%; } .hero__img{ position:absolute; inset:0; background-image:url('../material/Bandfoto_header.jpg'); background-size:cover; background-position:center top; filter:grayscale(1) contrast(1.12) brightness(.85); } .hero__veil{ position:absolute; inset:0; background: linear-gradient(to bottom, rgba(8,8,10,.55) 0%, rgba(8,8,10,.08) 22%, rgba(8,8,10,.4) 58%, rgba(8,8,10,.95) 88%, var(--ink) 100%), linear-gradient(to right, var(--ink) 0%, rgba(8,8,10,0) 16%), linear-gradient(to left, var(--ink) 0%, rgba(8,8,10,0) 16%); /* was: , linear-gradient(100deg, rgba(227,28,46,.22), transparent 55%); — a diagonal red wash across the photo. Testing pure grayscale/black here instead; bring it back by re-adding that layer if red wins. */ } .hero__stage{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem; padding:3% var(--edge) 0; /* matches .hero's margin-top exactly, so the logo is centered within the part of the photo actually visible below the nav, at every width */ text-align:center; } .hero__logo{ /* pure vw scaling so it keeps growing in step with the image itself at every desktop width — the rem side is only a sanity ceiling for ultra-wide monitors, not a cap that kicks in at normal sizes */ width:min(55rem, 38vw); margin-top:2rem; filter:drop-shadow(0 12px 40px rgba(0,0,0,.65)); } .hero__scroll{ position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); color:var(--accent); opacity:.9; } .hero__scroll svg{ width:1.8rem; height:1.8rem; display:block; } @media (prefers-reduced-motion:no-preference){ .hero__scroll{ animation:scrollcue 1.6s ease infinite; } } @keyframes scrollcue{ 0%{ transform:translate(-50%, 0); opacity:.5; } 50%{ transform:translate(-50%, .5rem); opacity:1; } 100%{ transform:translate(-50%, 0); opacity:.5; } } /* ================================================================ MARQUEE ================================================================ */ .marquee{ position:relative; background:var(--paper); color:var(--ink); overflow:hidden; white-space:nowrap; border-bottom:1px solid var(--paper-2); /* pull the strip up over the bottom of the hero photo, which the .hero__veil gradient has already darkened almost to --ink by that point — same %-of-width trick as .hero's own margin-top so the overlap stays a constant fraction of the (aspect-ratio-locked) hero height at every viewport width, instead of eating a growing share of a short mobile hero. */ margin-top:-7%; } .marquee__track{ display:inline-flex; align-items:center; padding:.7rem 0; } @media (prefers-reduced-motion:no-preference){ .marquee__track{ animation:marquee 26s linear infinite; } } @keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } .marquee__item{ font-family:var(--display); font-weight:600; font-size:1rem; letter-spacing:.1em; text-transform:uppercase; padding:0 1.4rem; } .marquee__sep{ color:var(--accent); } /* ================================================================ BIO ================================================================ */ /* flex, not grid: a grid row's height is shared by every column in that row, so a photo placed via grid-template-areas under .bio-grid__head still gets pushed down by however tall .bio-grid__body's row turns out to be. Flex items size independently — .bio-grid__left (head + photo, stacked) and .bio-grid__body just sit side by side, each as tall as its own content, so the photo stays snug under the heading regardless of how long the bio text runs. */ .bio-grid{ display:flex; gap:3rem; /* stretch, not flex-start: lets .bio-grid__left grow to match .bio-grid__body's height (the taller column, given how much bio text there is), so the flex:1 photo below has real extra space to grow into and its bottom edge lands level with the text's. */ align-items:stretch; } .bio-grid__left{ display:flex; flex-direction:column; gap:2.2rem; flex:1.1; min-width:0; } .bio-grid__body{ flex:1; min-width:0; } .bio-grid__quote{ font-family:var(--display); font-weight:600; font-size:clamp(2.1rem, 5vw, 3.4rem); line-height:1.05; letter-spacing:.01em; text-transform:uppercase; color:var(--paper); text-wrap:balance; margin-top:1rem; } .bio-grid__quote em{ font-style:normal; color:var(--accent); } .bio-grid__body p{ font-size:1.05rem; line-height:1.7; color:var(--text); margin-bottom:1.1rem; max-width:56ch; text-align:justify; hyphens:auto; } .bio-grid__body p:last-child{ margin-bottom:0; } .bio-grid__body strong{ color:var(--paper); font-weight:600; } /* fills the empty space left under the heading once the bio text runs longer than it — see the .bio-grid comment above for why this is flex, not grid. Mobile reordering (below the bio text there, instead of under the heading) is handled in the responsive section. */ .bio-grid__photo{ flex:1; min-height:0; overflow:hidden; } .bio-grid__photo img{ display:block; width:100%; /* height:100% of the flex-grown box, cropped to fit via object-fit — on mobile .bio-grid__photo's height is auto (content-sized, no free space for flex:1 to claim), so this percentage resolves back to auto there and the image just falls back to its natural ratio. */ height:100%; object-fit:cover; border:1px solid var(--ink-3); } /* ================================================================ LISTEN — multitrack mixer + streaming CTA (player__* classes are consumed directly by js/player.js — keep their names stable even while restyling) ================================================================ */ /* the marquee ticker right above already carries its own vertical padding, so this section (now the first one after it) needs a touch less top padding than the .section default to avoid a too-large gap */ .listen-section{ padding-top:4.6rem; } .mixer{ background:linear-gradient(155deg, var(--ink-2) 0%, #17070a 130%); border:1px solid var(--ink-3); border-left:3px solid var(--accent); padding:1.6rem clamp(1.4rem, 3vw, 2.6rem) 1.8rem; margin-bottom:1.6rem; } .player__status{ font-size:.85rem; color:var(--muted); margin-bottom:1.1rem; } .player__status b{ color:var(--paper); font-weight:600; } .player__row{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:1.8rem; } .player__control{ flex:none; width:5rem; height:5rem; border:2px solid var(--accent); border-radius:50%; color:var(--accent); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:color .2s ease, border-color .2s ease, transform .15s ease, background-color .2s ease; background:none; } .player__control svg{ width:1.7rem; height:1.7rem; } .player__control:hover, .player__control.is-active{ color:var(--ink); background:var(--accent); border-color:var(--accent); } .player__control.is-loading{ animation:player-pulse 1.1s ease infinite; } @keyframes player-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } } .player__tracks{ flex:1 1 auto; display:flex; flex-wrap:wrap; align-items:flex-start; gap:1.5rem; } .player__track{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:.35rem; height:6.2rem; width:4.8rem; cursor:pointer; background:none; border:none; color:var(--muted); font-family:var(--body); } .player__track img{ width:4.8rem; height:4.8rem; border-radius:50%; object-fit:cover; filter:grayscale(1); border:2px solid transparent; transition:filter .2s ease, border-color .2s ease, transform .15s ease; } .player__caption{ font-family:var(--display); font-weight:500; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; transition:color .2s ease; } .player__track:hover img{ transform:translateY(-2px); } .player__track.is-active img{ filter:grayscale(0); border-color:var(--accent); } .player__track.is-active .player__caption{ color:var(--paper); } .player__volume{ flex:none; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:.35rem; height:6.2rem; min-width:9rem; } .player__volume-row{ display:flex; align-items:center; gap:.6rem; height:4.8rem; width:100%; } .player__volume svg{ width:1.1rem; height:1.1rem; color:var(--muted); flex:none; } .player__volume input[type="range"]{ flex:1; -webkit-appearance:none; appearance:none; height:2px; /* was --ink-3 — nearly invisible against the mixer's own dark background, leaving the slider's travel range unclear */ background:var(--muted); outline:none; } .player__volume input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:.85rem; height:.85rem; border-radius:50%; background:var(--accent); cursor:pointer; } .player__volume input[type="range"]::-moz-range-thumb{ width:.85rem; height:.85rem; border:none; border-radius:50%; background:var(--accent); cursor:pointer; } /* just the one streaming-link card now (Instagram/Facebook cards were removed — those platforms still have icons in the footer) — spans the same width as .mixer above it, since both sit in the same .wrap */ .listen-cta{ display:flex; flex-direction:column; gap:.9rem; } /* the player stays comfortable down to ~480px, but the default wrap layout only has room above ~860px — force the compact single-row layout across that whole gap, same fix as before, ported to the new sizes */ @media (max-width:860px){ .mixer{ padding:1.3rem 1.2rem 1.5rem; } .player__row{ flex-wrap:nowrap; align-items:center; gap:.5rem; } .player__control{ width:2.4rem; height:2.4rem; } .player__control svg{ width:.95rem; height:.95rem; } /* 5 tracks now instead of 4 — a bit tighter than before to keep them (plus the volume slider) fitting a single row on narrow phones */ .player__tracks{ flex-wrap:nowrap; gap:.32rem; } .player__track{ width:2.05rem; height:2.9rem; gap:.12rem; } .player__track img{ width:2.05rem; height:2.05rem; } .player__caption{ font-size:.44rem; letter-spacing:0; } .player__volume{ height:2.9rem; min-width:0; flex:1 1 auto; gap:.15rem; } .player__volume-row{ height:2.4rem; } .player__volume svg{ display:none; } } /* ================================================================ BAND ================================================================ */ .members__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(8.5rem, 1fr)); gap:1.6rem; margin-bottom:1.6rem; } .member{ /* it's a