/* ===== Redesign theme — global chrome ===== */ /* Subtle grain texture over the whole page (the page background is dark almost everywhere, so a single fixed overlay covers hero/dark sections without needing to target each one individually). */ html[data-theme="modern"] body { position: relative; } html[data-theme="modern"] body::before { content: ''; position: fixed; inset: 0; z-index: 15; /* above the sticky bars (10) so the header carries grain too; below the toggle (20) and lightbox (1000) */ pointer-events: none; opacity: 0.18; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Type scale */ html[data-theme="modern"] .page-title { font-size: clamp(1.9rem, 1.2rem + 3vw, 2.75rem); } html[data-theme="modern"] .tagline { font-size: clamp(1rem, 0.7rem + 1.2vw, 1.35rem); letter-spacing: 0.1em; } html[data-theme="modern"] body { line-height: 1.7; } /* Header: only the nav (and the Set List year tabs) stick. The page title scrolls away with the content instead of sitting in a sticky box that ate ~220px of every screen. Both sticky bars share one glass surface, full width, so there is no visible rectangle and content blurs softly underneath as it scrolls. */ html[data-theme="modern"] { --nav-h: 4rem; --glass: rgba(19, 19, 21, 0.78); --hairline: rgba(255, 255, 255, 0.12); } @media (min-width: 720px) { html[data-theme="modern"] { --nav-h: 5rem; } } /* The wrapper stops being a box so nav / title / tabs become direct children of and each can stick (or not) independently. */ html[data-theme="modern"] .sticky-header { display: contents; } html[data-theme="modern"] .nav { position: sticky; top: 0; z-index: 10; height: var(--nav-h); padding-top: 0; padding-bottom: 0; background: var(--glass); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); scrollbar-width: none; } html[data-theme="modern"] .nav::-webkit-scrollbar { display: none; } html[data-theme="modern"] .page-title-bar { background: transparent; padding: 1.75rem 1.25rem 1.5rem; } /* Year tabs sit directly under the title as plain text, not in a second bar: no fill, no rule, not sticky. The active tab's crimson underline sits below the title strip. */ html[data-theme="modern"] .year-tabs-bar { margin: 0 auto; padding: 0 1.25rem 1.25rem; background: transparent; } html[data-theme="modern"] .page-title-bar:has(+ .year-tabs-bar) { padding-bottom: 0.9rem; } @media (max-width: 719px) { html[data-theme="modern"] .page-title-bar { padding: 1.25rem 1.25rem 1rem; } } /* Hero tagline: a balanced two-line block instead of one edge-to-edge line */ html[data-theme="modern"] .tagline { max-width: 62ch; line-height: 1.4; text-wrap: balance; } @media (max-width: 719px) { html[data-theme="modern"] .tagline { text-transform: none; font-size: clamp(0.8rem, 5.3vw, 1.4rem); letter-spacing: 0; max-width: none; text-wrap: wrap; /* balancing narrows the lines and adds a third */ } } /* Hero contact button: the redesign's crimson, like the Send message button */ html[data-theme="modern"] .hero-contact { background: var(--crimson); border-color: var(--crimson); } /* Keyboard focus that matches the palette */ html[data-theme="modern"] a:focus-visible, html[data-theme="modern"] button:focus-visible, html[data-theme="modern"] input:focus-visible, html[data-theme="modern"] textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Scroll hint and toggle: same dark glass as the header instead of a light-grey disc that only exists in the Classic palette. */ html[data-theme="modern"] .scroll-hint { background: var(--glass); border-color: rgba(255, 255, 255, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Set List: soft hairlines and calmer type instead of white rules */ html[data-theme="modern"] .setlist li { border-bottom-color: var(--hairline); } html[data-theme="modern"] .setlist-song { font-weight: 500; color: var(--text); } /* ===== Redesign theme — type and colour ===== Reading text is set in a warm text serif; Oswald stays for headings and navigation. The gold accent gives way to warm paper (the poster's background) for text, and the logo's crimson carries every structural mark: rules, active states, buttons. --crimson is sampled from the logo art; it is too dark to read as text on the dark page, so text uses the lighter --crimson-lit. */ html[data-theme="modern"] { --font-body: 'Newsreader', Georgia, 'Times New Roman', serif; --bg: #131315; --paper: #efe6cf; --crimson: #8c0c3c; --crimson-lit: #e0668f; --accent: var(--paper); --text-dim: #cbc9c4; } html[data-theme="modern"] body { font-size: 1.0625rem; line-height: 1.65; } html[data-theme="modern"] .bio a, html[data-theme="modern"] main a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--crimson); text-decoration-thickness: 2px; text-underline-offset: 0.2em; } html[data-theme="modern"] .bio a:hover, html[data-theme="modern"] main a:hover { text-decoration-color: var(--crimson-lit); } /* Nav: crimson for the current page and for hover */ html[data-theme="modern"] .nav a:hover { color: var(--crimson-lit); } html[data-theme="modern"] .nav a[aria-current="page"] { border-bottom-color: var(--crimson); border-bottom-width: 3px; } html[data-theme="modern"] .nav a[aria-current="page"]:hover { border-bottom-color: var(--crimson-lit); } /* Page titles: a short cut-paper strip in the logo's crimson beneath each title, echoing the jagged pieces the logo lettering is built from. */ html[data-theme="modern"] .page-title::after { content: ''; display: block; width: 6rem; height: 0.9rem; margin: 0.75rem auto 0; background-color: #730b32; /* Small translucent cream dots across the strip, like the halftone speckle in the logo */ background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent) 1px, transparent 1.2px); background-size: 5px 5px; clip-path: polygon(0 32%, 8% 0, 20% 22%, 34% 4%, 47% 26%, 60% 0, 74% 24%, 88% 4%, 100% 30%, 96% 100%, 82% 76%, 66% 100%, 52% 80%, 38% 100%, 24% 74%, 10% 100%); } /* Year tabs */ html[data-theme="modern"] .year-tab--active { border-bottom: 3px solid var(--crimson); } html[data-theme="modern"] .year-tab:not(.year-tab--active):hover { color: var(--paper); } /* Buttons */ html[data-theme="modern"] .form-submit { background: var(--crimson); border-color: var(--crimson); color: var(--paper); } html[data-theme="modern"] .form-field input:focus, html[data-theme="modern"] .form-field textarea:focus { border-color: var(--crimson-lit); } html[data-theme="modern"] .form-field input:focus-visible, html[data-theme="modern"] .form-field textarea:focus-visible { outline: none; } html[data-theme="modern"] .contact-form { border-top-color: var(--crimson); } html[data-theme="modern"] .scroll-hint { border-color: rgba(239, 230, 207, 0.4); color: var(--paper); background: rgba(19, 19, 21, 0.92); } html[data-theme="modern"] .contact-status--success { color: var(--paper); } /* ===== Redesign theme — card treatment ===== */ /* Performers roster cards: dark surface instead of near-white tiles, softened corners. Layout order is untouched (info left, photo right) so the existing left-facing headshot crops stay correct. */ html[data-theme="modern"] .roster-item { background: #212124; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; -webkit-tap-highlight-color: transparent; /* cards aren't interactive: no flash on tap */ } html[data-theme="modern"] .roster-photo { border-radius: 10px; } html[data-theme="modern"] .roster-years { color: #a2a09b; letter-spacing: 0; } html[data-theme="modern"] .roster-credit { color: #bcbab5; line-height: 1.45; } /* House Band and Gallery get the same "no bright tiles, softer corners" principle applied to their card/photo radii. */ html[data-theme="modern"] .house-band-photo { border-radius: 14px; } html[data-theme="modern"] .gallery-item { border-radius: 10px; } /* Contact form: same dark card surface as the Performers cards instead of the light-grey Classic panel. */ html[data-theme="modern"] .contact-form { background: #212124; border: 1px solid rgba(255, 255, 255, 0.14); border-top: 3px solid var(--crimson); border-radius: 14px; } html[data-theme="modern"] .form-field label { color: var(--text-dim); } html[data-theme="modern"] .form-field input, html[data-theme="modern"] .form-field textarea { background: var(--bg); border-color: rgba(255, 255, 255, 0.22); } /* About: the title bar already provides the space below the title, so the poster/copy block starts right after it (matching the other pages) and the copy aligns to the poster's top edge instead of floating mid-height. */ html[data-theme="modern"] .about-feature { margin-top: 0; align-items: flex-start; } html[data-theme="modern"] .about-copy .bio { margin-top: 0; } /* Performers cards: the photo fills the card's full inner height so it is centred with equal margin on every side, and the credit gets a fourth line before it truncates (the card is tall enough to fit it). */ html[data-theme="modern"] .roster-item { height: 11.75rem; } html[data-theme="modern"] .roster-photo { align-self: stretch; width: 6.25rem; height: auto; } html[data-theme="modern"] .roster-credit { -webkit-line-clamp: 4; line-clamp: 4; } /* ===== Mobile menu (built by js/nav.js) ===== Wide screens: the wrapper is transparent to layout and the button is hidden, so the nav is exactly the inline row it always was. */ .nav-links { display: contents; } .nav-toggle { display: none; } @media (max-width: 719px) { html[data-theme="modern"] .nav.nav--menu { overflow: visible; /* the panel hangs below the bar */ justify-content: space-between; } html[data-theme="modern"] .nav--menu .nav-logo { display: flex; margin-right: 0; } html[data-theme="modern"] .nav--menu .nav-logo img { height: 28px; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -0.6rem; /* line the bars up with the page's right edge */ padding: 0; background: none; border: none; color: var(--paper); cursor: pointer; -webkit-tap-highlight-color: transparent; } /* Three bars that turn into an X while the menu is open. */ .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 1px; transition: transform 0.2s ease, background 0.2s ease; } .nav-toggle-bars { position: relative; } .nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: absolute; left: 0; } .nav-toggle-bars::before { top: -7px; } .nav-toggle-bars::after { top: 7px; } .nav--open .nav-toggle-bars { background: transparent; } .nav--open .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); } .nav--open .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); } /* The panel. Its background is solid so page text cannot show through, and a blurred child inside the bar's blurred glass would not blur anything. */ .nav-links { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; padding: 0.5rem 0 1rem; background: #131315; border-bottom: 1px solid var(--hairline); box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.7); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; } .nav--open .nav-links { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; } html[data-theme="modern"] .nav-links a { font-size: 1.15rem; padding: 0.9rem 1.25rem; opacity: 1; border-bottom: none; border-left: 3px solid transparent; } html[data-theme="modern"] .nav-links a[aria-current="page"] { color: var(--paper); border-left-color: var(--crimson-lit); border-bottom: none; } /* Contact stands out as the call to action, like the front-page button. */ html[data-theme="modern"] .nav-links a[href="contact.html"] { margin: 0.6rem 1.25rem 0; padding: 0.8rem 1rem; text-align: center; color: var(--paper); background: var(--crimson); border-left: none; border-radius: 4px; } } @media (prefers-reduced-motion: reduce) { .nav-links, .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { transition: none; } }