/* ========================================================= Melissa Dutch — main stylesheet Phases 1–3: foundation, shared components, static sections Palette tokens = Melissa Dutch (cool). Femme Rising overrides in femme-rising.css ========================================================= */ /* ---------- Tokens ---------- */ :root { /* Core background tones — indigo cosmos (May 2026 palette pivot) */ --deep-stage: #0a0820; --indigo-deep: #1a1755; /* card/surface */ --indigo: #2d2b78; /* borders, mid-depth */ --stage-blue: #1e3a8a; /* cool secondary anchor */ /* Pink accent stack — replaces violet everywhere on MD */ --electric-pink: #ec4899; /* primary accent */ --neon-pink: #f06aff; /* hottest FR-only glow */ --blush: #fce7f3; /* near-white pink-100 — reads on any background */ --rose: #d97a8e; /* warm organic accent */ /* Legacy aliases — old var names still referenced site-wide; point them at the new pink palette so triangles/borders/glows shift hue without touching every selector. Diana's direction: "triangles should look exactly as they do now, just switch the hue." */ --violet-dark: var(--indigo-deep); --electric-violet: var(--electric-pink); --parchment: #f0ece4; /* Supporting palette */ --warm-gold: #c9a96e; --muted-earth: #6b5b4e; --skin-warm: #de8f86; --silver: #9ca3af; /* Text tones — cool/neutral everywhere except the nav (which uses gold directly) */ --text-primary: #f0ece4; /* lightest — headings (parchment) */ --text-body: #d4cfe0; /* body copy */ --text-secondary: #a8a3b8; /* secondary */ --text-label: #f4a8c8; /* pink-tinted labels (was violet-tinted) */ --text-quiet: #8a87a0; /* smallest/quietest */ --divider: rgba(236, 72, 153, 0.15); /* Surfaces */ --surface-overlay: rgba(10, 8, 32, 0.7); --surface-modal: rgba(10, 8, 32, 0.85); /* Motion */ --ease-out-expo: cubic-bezier(0.33, 0, 0, 1); --dur-micro: 0.3s; --dur-medium: 0.5s; --dur-palette: 0.8s; /* Layout */ --gutter: clamp(1.25rem, 4vw, 3rem); --section-pad-y: clamp(5rem, 13vh, 9rem); --header-h: 92px; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Dark fallback lives on so can stay fully transparent — nebula/starfield canvases paint in front of , not buried under an opaque body background. */ background: var(--deep-stage); /* Kill horizontal page scroll across every page. Several sections use `width: 100vw; margin-left: calc(50% - 50vw)` to break out of the content column — that pattern can trigger a 1-2px overflow that spawns a horizontal scrollbar. Clamping at the document root prevents it without having to police every section individually. */ overflow-x: hidden; max-width: 100vw; } body { margin: 0; background: transparent; color: var(--text-body); font-family: var(--body); font-weight: 400; line-height: 1.7; font-size: 0.9rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; max-width: 100vw; } /* ---------- Custom scrollbar (vertical only — horizontal is hidden) ---- Brand-colored: deep-stage track, electric-pink thumb with a soft blush inner highlight. Falls back gracefully on Firefox via the standard scrollbar-color / scrollbar-width properties. */ html { scrollbar-width: thin; scrollbar-color: rgba(236, 72, 153, 0.55) rgba(10, 8, 32, 0.4); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: rgba(10, 8, 32, 0.5); border-left: 1px solid rgba(236, 72, 153, 0.08); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(244, 114, 182, 0.85), rgba(236, 72, 153, 0.7) 50%, rgba(219, 39, 119, 0.85)); border-radius: 6px; border: 2px solid rgba(10, 8, 32, 0.5); background-clip: padding-box; box-shadow: 0 0 8px rgba(236, 72, 153, 0.35); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(252, 231, 243, 0.9), rgba(244, 114, 182, 0.85) 50%, rgba(236, 72, 153, 0.9)); box-shadow: 0 0 14px rgba(236, 72, 153, 0.6); } ::-webkit-scrollbar-corner { background: transparent; } /* page-fit mode: body becomes a flex column so the footer pins to viewport bottom when content is small (shows/about). Other pages keep default block layout so GSAP's ScrollTrigger pin on the gallery works correctly. */ body.page-fit { display: flex; flex-direction: column; min-height: 100vh; } body.page-fit main { flex: 1 0 auto; display: flex; flex-direction: column; } body.page-fit main > section { min-height: 0; flex: 1 1 auto; padding: calc(var(--header-h) + 1rem) 0 0.75rem; } body.page-fit .section-head { margin-bottom: 1.25rem; } /* Compact show rows when in page-fit mode so all 5 rows + heading + footer fit */ body.page-fit .show-row { padding: 0.7rem 1rem; } body.page-fit .show-date__day { font-size: 1.5rem; } body.page-fit .show-info__name { font-size: 1.05rem; } body.page-fit .shows__list.content-glass { padding: 0.85rem 1.25rem; } body.page-fit .site-footer--minimal { padding: 1.25rem var(--gutter); } /* Compact about page */ body.page-fit .bio__grid { gap: clamp(2rem, 4vw, 3.5rem); align-items: center; } body.page-fit .bio__media { aspect-ratio: 3/4; max-height: calc(100vh - 12rem); width: auto; justify-self: center; } body.page-fit .bio__body { gap: 0.9rem; } body.page-fit .pull-quote { margin: 0.5rem 0; font-size: 1.05rem; } body.page-fit .bio__socials { margin-top: 0.25rem; padding-top: 0.75rem; } /* Home (no nebula canvas) gets a subtle static colour wash on the html element so the page isn't pure black behind the starfield. Inner pages override this with the WebGL nebula, so the gradient is harmless there (fully covered). */ html { background: radial-gradient(ellipse at 78% 18%, rgba(236, 72, 153, 0.12), transparent 55%), radial-gradient(ellipse at 12% 78%, rgba(1, 25, 70, 0.35), transparent 55%), var(--deep-stage); } img, picture, video, canvas, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } :focus-visible { /* 3px outline + contrasting white inner ring ensures visibility on both the dark MD palette and the bright magenta FR palette (WCAG 2.4.7 + 2.4.11). */ outline: 3px solid var(--electric-violet); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.85); border-radius: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Skip link — keyboard users' first interaction, must be visibly obvious. */ .skip-link { position: absolute; top: -100px; left: 1rem; z-index: 999; background: var(--electric-violet); color: var(--deep-stage); padding: 0.85rem 1.35rem; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; border-radius: 2px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55); transition: top 0.18s var(--ease-out-expo); } .skip-link:focus, .skip-link:focus-visible { top: 1rem; outline-offset: 2px; } /* ---------- Typography utilities ---------- */ .display { font-family: var(--display); font-weight: 500; line-height: 1.15; color: var(--text-primary); letter-spacing: -0.01em; } .display-xl { font-size: clamp(2.5rem, 7vw, 5.5rem); font-weight: 400; } .display-l { font-size: clamp(2rem, 4.5vw, 3.4rem); } .display-m { font-size: clamp(1.5rem, 2.6vw, 2rem); } .mono-label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--text-primary); text-shadow: 0 2px 10px rgba(7, 7, 26, 0.7); } .mono-meta { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-secondary); } .body-lead { font-size: 1rem; font-weight: 300; line-height: 1.75; color: var(--text-body); max-width: 52ch; } .pull-quote { font-family: var(--display); font-style: italic; font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.5; color: var(--text-primary); padding-left: 1.25rem; border-left: 2px solid var(--electric-violet); max-width: 44ch; margin: 1.75rem 0; } /* Text-fill-on-scroll quote — starts muted, fills to parchment as the user scrolls. The child has its text clipped to a gradient background; JS animates the background-size from 0% to 200% via ScrollTrigger. */ .pull-quote.js-fill { padding: 0; border-left: 0; font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 400; line-height: 1.3; max-width: 38ch; letter-spacing: -0.005em; margin: 2.25rem 0; } .pull-quote.js-fill > span { -webkit-background-clip: text; background-clip: text; background-color: rgba(232, 229, 239, 0.22); background-image: linear-gradient(135deg, var(--text-primary) 50%, rgba(232, 229, 239, 0.22) 60%); background-position: 0 0; background-repeat: no-repeat; background-size: 0% 200%; color: transparent; display: inline; will-change: background-size; } @media (prefers-reduced-motion: reduce) { .pull-quote.js-fill > span { background-size: 200% 200%; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.95rem 1.75rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; border: 1px solid transparent; border-radius: 2px; cursor: pointer; transition: background-color 0.35s var(--ease-out-expo), border-color 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo), color 0.35s var(--ease-out-expo); } /* Glass buttons with violet tint; neon bloom on hover. Matches nav/logo language. */ .btn-primary { background: rgba(236, 72, 153, 0.22); color: var(--text-primary); border-color: rgba(236, 72, 153, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(236, 72, 153, 0.05); } .btn-primary:hover { background: rgba(236, 72, 153, 0.38); border-color: var(--electric-violet); box-shadow: 0 0 14px rgba(236, 72, 153, 0.55), 0 0 32px rgba(236, 72, 153, 0.28), inset 0 0 12px rgba(236, 72, 153, 0.2); } .btn-ghost { background: rgba(7, 7, 26, 0.35); color: var(--text-primary); border-color: rgba(255, 255, 255, 0.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .btn-ghost:hover { border-color: var(--electric-violet); background: rgba(236, 72, 153, 0.14); box-shadow: 0 0 12px rgba(236, 72, 153, 0.45), 0 0 28px rgba(236, 72, 153, 0.22); } /* Chip — smaller variant for streaming platforms. Same glass + 2px radius as other buttons. */ .btn-chip { padding: 0.55rem 1.1rem; font-size: 0.62rem; letter-spacing: 0.24em; background: rgba(7, 7, 26, 0.4); color: var(--text-primary); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .btn-chip:hover { border-color: var(--electric-violet); background: rgba(236, 72, 153, 0.18); box-shadow: 0 0 10px rgba(236, 72, 153, 0.5), 0 0 24px rgba(236, 72, 153, 0.22); } /* Primary chip — highlighted version used to lead the eye to the Buy action on the home page Skinny feature. Matches the highlighted Bandcamp button on /music/ for consistency. */ .btn-chip.is-primary { background: rgba(236, 72, 153, 0.4); border-color: var(--electric-pink); color: var(--parchment); box-shadow: 0 0 12px rgba(236, 72, 153, 0.35), inset 0 0 0 1px rgba(236, 72, 153, 0.1); } .btn-chip.is-primary:hover { background: rgba(236, 72, 153, 0.6); box-shadow: 0 0 18px rgba(236, 72, 153, 0.7), 0 0 42px rgba(236, 72, 153, 0.35), inset 0 0 14px rgba(236, 72, 153, 0.25); } /* ---------- Layout helpers ---------- */ .wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); } .section { position: relative; min-height: 100vh; padding: calc(var(--header-h) + var(--section-pad-y)) 0 var(--section-pad-y); display: flex; flex-direction: column; justify-content: center; } .section-head { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .section-head .display { margin-top: 0; } /* Section label gets a larger, more prominent treatment so it reads as an "eyebrow" above the display heading — not a tiny hard-to-see line. */ .section-head .mono-label { font-size: 0.82rem; letter-spacing: 0.38em; color: var(--text-primary); text-shadow: 0 2px 12px rgba(7, 7, 26, 0.8); } .section-head .mono-label { color: var(--text-primary); } /* ---------- Liquid nebula (WebGL) + star field canvases ---------- Stacking: body bg (fallback) < nebula (0) < starfield (1) < content (10) < header (90+). Nebula must sit ABOVE the body bg or the body's opaque paint hides it. */ .liquid-nebula { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; /* Calmed down — was 0.72, now 0.42 so bright pink peaks don't wash out small text and the page reads quieter overall. */ opacity: 0.42; } /* Mobile: keep the nebula but dial opacity down a touch so it doesn't compete with the tighter content on small screens (was previously display:none, which left mobile feeling flat vs. desktop). */ @media (max-width: 767px) { .liquid-nebula { opacity: 0.32; } } /* Respect reduced-motion preference everywhere — the shader animates. */ @media (prefers-reduced-motion: reduce) { .liquid-nebula { display: none; } } /* Top vignette: fixed dark fade behind the header so nav text stays legible no matter where the nebula's bright peaks drift to. Sits above canvases (z:0/1) and below the header (z:90). */ .top-vignette { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 180px; z-index: 5; pointer-events: none; background: linear-gradient( to bottom, rgba(7, 7, 26, 0.78) 0%, rgba(7, 7, 26, 0.5) 35%, rgba(7, 7, 26, 0.22) 65%, rgba(7, 7, 26, 0) 100% ); } body.femme-rising .top-vignette { background: linear-gradient( to bottom, rgba(26, 8, 32, 0.78) 0%, rgba(26, 8, 32, 0.5) 35%, rgba(26, 8, 32, 0.22) 65%, rgba(26, 8, 32, 0) 100% ); } .starfield { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; opacity: 1; mix-blend-mode: screen; } /* Content sections are transparent — stars show through on every MD page. */ .music, .shows, .bio, .gallery, .hero { background: transparent; } /* Main content sits above both canvases */ main > section { position: relative; z-index: 10; } /* Compositor hints */ .gallery__track { will-change: transform; } /* ---------- Discography (Music page) ---------- Transparent — the nebula + starfield canvases sit BEHIND this section so the cosmos shows through the discography (per the May 2026 restructure). The music-hero above is fully opaque, so the cosmos only becomes visible once you scroll past the hero. */ .discography { padding: clamp(5rem, 10vw, 8rem) 0 clamp(7rem, 12vw, 10rem); position: relative; z-index: 2; background: transparent; border-top: 1px solid var(--divider); } /* ---------- Vinyl shelf — 2×2 with inner-only neon grooves ---------- Layout: 2 columns × 2 rows on desktop. Vinyls are larger (max ~400px each) with a wide column gap so the slid record has plenty of room. Caption sits below each vinyl with streaming links. */ .vinyl-shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* Wide gap so the slid record (22% of vinyl width ≈ 88px on a 400px vinyl) never reaches the neighbour. */ column-gap: clamp(5rem, 10vw, 8rem); /* Generous vertical room — fits the bigger caption + 3 link buttons + visual breathing space between the two rows of releases. */ row-gap: clamp(11rem, 18vw, 16rem); padding: 1rem var(--gutter) 9rem; /* Constrain overall width so vinyls don't grow absurd on wide screens. */ max-width: 920px; margin: 0 auto; } .vinyl { position: relative; aspect-ratio: 1 / 1; /* Z-index lifts the hovered vinyl above siblings during the slide. */ transition: z-index 0s 0.6s; } .vinyl:hover, .vinyl:focus-within { z-index: 5; transition: z-index 0s 0s; } /* Slot — translates on hover. Sleeve trigger comes from the parent so the streaming links inside the caption don't trigger the slide when hovered. */ .vinyl__record-slot { position: absolute; inset: 0; z-index: 1; transition: transform 0.7s var(--ease-out-expo); will-change: transform; } .vinyl:hover .vinyl__record-slot { transform: translateX(22%); } /* Record — base + outer (subdued) grooves. Inner ring of bright pink grooves added via ::before so we can mask them to the inner radius. */ .vinyl__record { width: 100%; height: 100%; border-radius: 50%; position: relative; background: /* (3) Pink centre label */ radial-gradient(circle at 50% 50%, var(--electric-pink) 0 26%, transparent 26.5%), /* (2) Subtle gloss highlight on one side */ radial-gradient(ellipse at 35% 30%, rgba(255,255,255,0.06), transparent 35%), /* (1) Outer grooves — muted plum, no neon */ repeating-radial-gradient(circle at 50% 50%, rgba(140, 110, 150, 0.28) 0px 1px, #0a0612 1px 5px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.6), 0 0 22px rgba(236, 72, 153, 0.18); animation: vinyl-spin 4s linear infinite; animation-play-state: paused; } .vinyl:hover .vinyl__record { animation-play-state: running; } /* INNER NEON RING — bright pink grooves just outside the label, gradient fading outward so the pink dissipates smoothly instead of cutting off at a hard edge. Mask is solid black just past the label, then fades through a long gradient toward transparent at ~75% radius. */ .vinyl__record::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, rgba(240, 106, 255, 0.95) 0px 1px, transparent 1px 5px); -webkit-mask: radial-gradient(circle at 50% 50%, transparent 26%, black 29%, rgba(0, 0, 0, 0.85) 38%, rgba(0, 0, 0, 0.55) 48%, rgba(0, 0, 0, 0.25) 60%, transparent 75%); mask: radial-gradient(circle at 50% 50%, transparent 26%, black 29%, rgba(0, 0, 0, 0.85) 38%, rgba(0, 0, 0, 0.55) 48%, rgba(0, 0, 0, 0.25) 60%, transparent 75%); pointer-events: none; /* Soft pink glow to make the inner ring read as luminous */ filter: drop-shadow(0 0 4px rgba(236, 72, 153, 0.5)); } /* Centre hole — small dark dot inside the pink label */ .vinyl__record::after { content: ''; position: absolute; inset: 47%; border-radius: 50%; background: var(--deep-stage); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4); } @keyframes vinyl-spin { to { transform: rotate(360deg); } } /* Sleeve — clickable area; carries the click-to-bandcamp on hover-only. Stays put while the record slides. */ .vinyl__sleeve { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--indigo-deep); z-index: 2; /* No border — was showing as a thin pink/white line around lighter cover arts. Pink halo now lives in the box-shadow only. */ border: 0; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(236, 72, 153, 0.18); transition: box-shadow 0.5s var(--ease-out-expo); cursor: pointer; } .vinyl:hover .vinyl__sleeve { box-shadow: 0 18px 36px rgba(0, 0, 0, 0.7), 0 0 32px rgba(236, 72, 153, 0.28), 0 0 0 1px rgba(236, 72, 153, 0.5); } /* Hover hint — a small pulsing pink circle with a play-arrow glyph in the bottom-right corner of every sleeve. Tells the user "hover me, something happens." Glides right + fades out the moment hover actually starts (the record takes over from here). */ .vinyl__sleeve::after { content: '▸'; position: absolute; bottom: clamp(0.75rem, 1.4vw, 1.1rem); right: clamp(0.75rem, 1.4vw, 1.1rem); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(10, 8, 32, 0.85); border: 1px solid rgba(236, 72, 153, 0.7); color: var(--electric-pink); font-size: 0.85rem; font-family: -apple-system, sans-serif; line-height: 1; padding-left: 2px; /* optical centre the right-pointing arrow */ box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.5); animation: vinyl-hint-pulse 2.4s ease-in-out infinite; transition: opacity 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo); pointer-events: none; } .vinyl:hover .vinyl__sleeve::after { opacity: 0; transform: translateX(10px); animation-play-state: paused; } @keyframes vinyl-hint-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.55); } 50% { box-shadow: 0 0 0 10px rgba(236, 72, 153, 0); } } @media (prefers-reduced-motion: reduce) { .vinyl__sleeve::after { animation: none; } } /* Caption block — sits well below each vinyl with generous breathing space. Title + italic date + pill-button streaming links. */ .vinyl__caption { position: absolute; left: -10%; right: -10%; /* Pushed further from the sleeve so the photo art has visual breathing room before the type begins. */ bottom: -9rem; text-align: center; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; } .vinyl__caption strong { font-family: var(--display); font-weight: 400; /* Bigger + slightly heavier via stroke so the thin Poiret reads cleanly against the dark cosmos background. */ font-size: clamp(1.5rem, 2.4vw, 1.95rem); color: var(--parchment); letter-spacing: -0.005em; line-height: 1.05; -webkit-text-stroke: 0.35px var(--parchment); } .vinyl__caption time { font-family: var(--display-alt, 'Fraunces', serif); font-style: italic; font-weight: 400; font-size: 1.05rem; color: var(--blush); letter-spacing: 0.015em; } .vinyl__links { display: inline-flex; align-items: center; /* More room between buttons — was 0.5rem (squished) → 1rem. */ gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 0.95rem; } /* Streaming buttons — match the home page .btn-primary glass DNA: - 2px corners (no rounding, no pill) - rgba(236, 72, 153, 0.22) glass fill (more visible than the prior 14%) - pink border for definition - backdrop blur - mono caps with wide tracking On hover: intensified fill + multi-layer pink glow, same hue (no jump to neon-pink). */ .vinyl__links a { position: relative; z-index: 4; display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem 1.15rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--parchment); background: rgba(236, 72, 153, 0.22); border: 1px solid rgba(236, 72, 153, 0.55); border-radius: 2px; text-decoration: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(236, 72, 153, 0.05); transition: background-color 0.35s var(--ease-out-expo), border-color 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo), color 0.35s var(--ease-out-expo), transform 0.35s var(--ease-out-expo); } .vinyl__links a:hover, .vinyl__links a:focus-visible { color: var(--parchment); background: rgba(236, 72, 153, 0.4); border-color: var(--electric-pink); box-shadow: 0 0 14px rgba(236, 72, 153, 0.55), 0 0 32px rgba(236, 72, 153, 0.28), inset 0 0 12px rgba(236, 72, 153, 0.2); transform: translateY(-1px); outline: none; } /* Hide the old text-separator since buttons now have their own boundary */ .vinyl__links .sep { display: none; } /* Bandcamp = primary action ("buy" — Melissa's direct revenue). Brighter fill + stronger border so it leads the eye of the three. */ .vinyl__links a[href*="bandcamp"] { background: rgba(236, 72, 153, 0.4); border-color: var(--electric-pink); box-shadow: 0 0 12px rgba(236, 72, 153, 0.35), inset 0 0 0 1px rgba(236, 72, 153, 0.1); } .vinyl__links a[href*="bandcamp"]:hover, .vinyl__links a[href*="bandcamp"]:focus-visible { background: rgba(236, 72, 153, 0.6); box-shadow: 0 0 18px rgba(236, 72, 153, 0.7), 0 0 42px rgba(236, 72, 153, 0.35), inset 0 0 14px rgba(236, 72, 153, 0.25); } /* Spotify + Apple Music = lowlit secondary. Subtler fill + faded border so they read as alternates rather than competing with Bandcamp. */ .vinyl__links a[href*="spotify"], .vinyl__links a[href*="apple.com"] { background: rgba(236, 72, 153, 0.1); border-color: rgba(236, 72, 153, 0.3); color: rgba(240, 236, 228, 0.78); box-shadow: inset 0 0 0 1px rgba(236, 72, 153, 0.03); } .vinyl__links a[href*="spotify"]:hover, .vinyl__links a[href*="apple.com"]:hover, .vinyl__links a[href*="spotify"]:focus-visible, .vinyl__links a[href*="apple.com"]:focus-visible { /* Lift to about the same weight as Bandcamp's REST state on hover — reads as "warming up" rather than overpowering the primary. */ background: rgba(236, 72, 153, 0.28); border-color: rgba(236, 72, 153, 0.6); color: var(--parchment); box-shadow: 0 0 10px rgba(236, 72, 153, 0.4), 0 0 22px rgba(236, 72, 153, 0.2); } @media (max-width: 760px) { .vinyl-shelf { grid-template-columns: 1fr; column-gap: 0; max-width: 460px; } .vinyl:hover .vinyl__record-slot { transform: translateX(18%); } } @media (prefers-reduced-motion: reduce) { .vinyl__record { animation: none; } .vinyl:hover .vinyl__record-slot { transform: translateX(12%); } } .release-grid { list-style: none; margin: 0; padding: 0; display: grid; /* Six-column grid so we can lay 5 releases out as 3-on-top / 2-on-bottom, with the bottom row's two cards centered under the top three. Each card spans 2 columns. */ grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(1.25rem, 2vw, 1.75rem); } /* Top row — three cards, each spanning 2 of the 6 columns */ .release-grid > .release-card:nth-child(1) { grid-column: 1 / 3; } .release-grid > .release-card:nth-child(2) { grid-column: 3 / 5; } .release-grid > .release-card:nth-child(3) { grid-column: 5 / 7; } /* Bottom row — two cards centered (shifted one column inward so they sit under the midpoints of the three top cards) */ .release-grid > .release-card:nth-child(4) { grid-column: 2 / 4; } .release-grid > .release-card:nth-child(5) { grid-column: 4 / 6; } @media (max-width: 899px) { .release-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .release-grid > .release-card:nth-child(n) { grid-column: auto; } } @media (max-width: 600px) { .release-grid { grid-template-columns: 1fr; } } /* Four-up variant — used when the upcoming-EP card is hidden and the four archive releases sit in a clean single row. Overrides the 6-col layout. */ .release-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .release-grid--four > .release-card:nth-child(n) { grid-column: auto; } @media (max-width: 1100px) { .release-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .release-grid--four { grid-template-columns: 1fr; } } .release-card { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.25rem; position: relative; transform-style: preserve-3d; animation: release-breathe 6s ease-in-out infinite; transition: transform 0.5s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo), border-color 0.4s var(--ease-out-expo); } .release-grid { perspective: 1200px; } /* Stagger each card's breathing so the grid feels alive, not synchronised */ .release-grid > .release-card:nth-child(2) { animation-delay: -1.8s; } .release-grid > .release-card:nth-child(3) { animation-delay: -3.6s; } .release-grid > .release-card:nth-child(4) { animation-delay: -4.8s; } .release-grid > .release-card:nth-child(5) { animation-delay: -2.4s; } /* Upcoming release gets a brighter violet ring so it stands out */ .release-card--upcoming { border-color: rgba(236, 72, 153, 0.55); box-shadow: 0 0 24px rgba(236, 72, 153, 0.25), 0 0 60px rgba(236, 72, 153, 0.12); } .release-card--upcoming .mono-meta { color: var(--electric-violet); } @keyframes release-breathe { 0%, 100% { box-shadow: 0 0 18px rgba(236, 72, 153, 0.12), 0 0 40px rgba(236, 72, 153, 0.05); } 50% { box-shadow: 0 0 26px rgba(236, 72, 153, 0.22), 0 0 58px rgba(236, 72, 153, 0.1); } } /* Subtle 3D tilt on hover — card lifts, leans, and glows */ /* Hover: smooth rise + glow bloom. No 3D tilt — it was jumpy and clashed with the breathing animation. Just a quiet vertical lift with the violet halo intensifying. Same motion language as the content-glass cards. */ .release-card:hover, .release-card:focus-within { transform: translateY(-6px); border-color: rgba(236, 72, 153, 0.6); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 32px rgba(236, 72, 153, 0.42), 0 0 70px rgba(236, 72, 153, 0.2); animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .release-card { animation: none; } } .release-card__art { position: relative; aspect-ratio: 1 / 1; width: 100%; background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.06), transparent 55%), linear-gradient(135deg, var(--art-a, var(--stage-blue)), var(--art-b, var(--violet-dark))); border-radius: 2px; overflow: hidden; display: flex; align-items: flex-end; padding: 1rem; border: 1px solid rgba(236, 72, 153, 0.12); } .release-card__art-title { font-family: var(--display); font-weight: 500; font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--text-primary); letter-spacing: -0.01em; position: relative; z-index: 1; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65); } /* When cover art is present, the sits underneath the title and a bottom gradient scrim keeps the title readable. */ .release-card__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; } .release-card__art:has(img)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(to bottom, transparent, rgba(10, 8, 32, 0.78)); z-index: 0; pointer-events: none; } .release-card__meta { display: flex; flex-direction: column; gap: 0.35rem; padding: 0 0.25rem 0.25rem; } .release-card__title { font-family: var(--display); font-weight: 500; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.25; color: var(--text-primary); margin: 0; letter-spacing: -0.01em; } .release-card__note { font-size: 0.85rem; color: var(--text-secondary); margin: 0; } .release-card__links { display: flex; flex-wrap: nowrap; /* keep all chips on one line inside the card */ gap: 0.35rem; margin-top: 0.5rem; overflow-x: auto; scrollbar-width: none; } .release-card__links::-webkit-scrollbar { display: none; } /* Streaming-link CTAs — styled like small chips so they read as actions. Same language as .btn-chip on the Skinny listen row. Tight padding so three chips fit on one line inside the narrow release card. */ .release-card__links a { display: inline-flex; align-items: center; padding: 0.45rem 0.6rem; font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; flex: 0 0 auto; color: var(--text-primary); background: rgba(7, 7, 26, 0.4); border: 1px solid rgba(236, 72, 153, 0.32); border-radius: 2px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 0.25s var(--ease-out-expo), border-color 0.25s var(--ease-out-expo), color 0.25s var(--ease-out-expo), box-shadow 0.25s var(--ease-out-expo); } .release-card__links a:hover, .release-card__links a:focus-visible { background: rgba(236, 72, 153, 0.2); border-color: var(--electric-violet); color: #ffffff; box-shadow: 0 0 12px rgba(236, 72, 153, 0.5), 0 0 28px rgba(236, 72, 153, 0.25); } /* Glass containers for text-heavy sections — semi-transparent dark bg + blur so content reads cleanly over the nebula without killing the atmosphere. */ .content-glass { background: rgba(7, 7, 26, 0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); /* Persistent violet neon halo — the card always reads as "lit". Hover intensifies for interactive feedback. Same motion language as the MD logo triangles and the gallery tiles. */ border: 1px solid rgba(236, 72, 153, 0.48); border-radius: 4px; padding: clamp(1.75rem, 4vw, 3rem); box-shadow: 0 0 24px rgba(236, 72, 153, 0.24), 0 0 60px rgba(236, 72, 153, 0.12); transition: border-color 0.45s var(--ease-out-expo), box-shadow 0.45s var(--ease-out-expo); } .content-glass:hover, .content-glass:focus-within { border-color: rgba(236, 72, 153, 0.7); box-shadow: 0 0 34px rgba(236, 72, 153, 0.38), 0 0 80px rgba(236, 72, 153, 0.2); } /* FR pink variant — persistent, intensifies on hover */ body.femme-rising .content-glass { border-color: rgba(240, 106, 255, 0.45); box-shadow: 0 0 24px rgba(240, 106, 255, 0.26), 0 0 60px rgba(225, 29, 116, 0.14); } body.femme-rising .content-glass:hover, body.femme-rising .content-glass:focus-within { border-color: rgba(240, 106, 255, 0.7); box-shadow: 0 0 34px rgba(240, 106, 255, 0.42), 0 0 80px rgba(225, 29, 116, 0.22); } body.femme-rising .content-glass { background: rgba(26, 8, 32, 0.58); border-color: rgba(255, 139, 184, 0.2); } /* ---------- Fixed header ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 90; /* Tall initial header so the landing logo has breathing room; shrinks once you scroll. */ height: 184px; display: flex; align-items: center; padding: 0 var(--gutter); background: transparent; transition: height 0.55s var(--ease-out-expo), background-color 0.35s var(--ease-out-expo), backdrop-filter 0.35s var(--ease-out-expo), opacity 0.5s var(--ease-out-expo), transform 0.55s var(--ease-out-expo); } /* Pages whose first paint is a full-bleed immersive hero (home, music, about). They opt in via `body.has-hero-overlay` — the header hides over the hero and fades + slides in once `body.header-revealed` is toggled by ui.js (scroll handler tracks the page's hero element). */ body.has-hero-overlay .site-header { opacity: 0; pointer-events: none; transform: translateY(-24px); } body.has-hero-overlay.header-revealed .site-header { opacity: 1; pointer-events: auto; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { body.has-hero-overlay .site-header { transform: none; transition: opacity 0.3s linear; } } .site-header.is-scrolled { height: var(--header-h); background: var(--surface-overlay); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } @media (max-width: 767px) { .site-header { height: 120px; } } .site-header__inner { width: 100%; display: flex; justify-content: space-between; align-items: center; } .wordmark { display: inline-flex; align-items: center; line-height: 0; /* font props kept as fallback if mask fails to load */ font-family: var(--display); font-weight: 400; font-size: 1rem; letter-spacing: 0.06em; color: var(--text-primary); } /* Logo is the real color image (mask-flatten approach collapsed triangles into letters). Shrinks into nav size once the user scrolls past the hero. */ /* Logo rendered as two layered PNGs: crisp letters on top of softly-blurred triangles. This lets the triangles have the website's glowy nebula-adjacent feel without blurring the wordmark itself. Glow intensifies only on hover. */ .wordmark__mark { display: block; position: relative; width: 275px; height: auto; aspect-ratio: 2.233 / 1; /* Two layers, each a pseudo-element, so they can be filtered independently: ::before = neon triangles (z:-1, behind) ::after = crisp letters (z:1, in front) with a dark halo for readability Parent has NO background — prevents filter inheritance issues. */ transition: width 0.55s var(--ease-out-expo); } .wordmark__mark::after { content: ''; position: absolute; inset: 0; z-index: 1; background-image: url('../img/logo/md-letters.webp'); background-size: contain; background-repeat: no-repeat; background-position: left center; /* Dark halo keeps the parchment letters legible where they cross the bright neon edge of a triangle. */ filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 4px rgba(20, 6, 36, 0.65)); pointer-events: none; } /* TRIANGLES layer — sits BEHIND the letters. Uses the SAME formula as the nav hover: light blur for the center-dense / edge-fading gradient look, plus a halo drop-shadow for the outer glow, at matching 55% effective opacity. */ /* Glass triangles — the triangles shape is used as a MASK, a translucent violet tint paints inside the mask, and a backdrop-filter blurs whatever nebula/stars are behind the triangle shapes. Crisp edges, see-through body. */ .wordmark__mark::before { content: ''; position: absolute; /* Pre-baked neon triangles PNG (built by build-neon-triangles.mjs). The image has 160px of transparent padding around the shape in the original 1000×447 coordinate space, so we position ::before with matching negative insets (16% horizontal, 36% vertical) so the glow extends OUTSIDE the wordmark's bounds without clipping. */ top: -36%; bottom: -36%; left: -16%; right: -16%; z-index: -1; background-image: url('../img/logo/md-triangles-neon.webp'); background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; transition: opacity 0.35s var(--ease-out-expo), filter 0.45s var(--ease-out-expo); } .wordmark:hover .wordmark__mark::before, .wordmark:focus-visible .wordmark__mark::before { /* Hover slightly intensifies the glow */ filter: brightness(1.15) saturate(1.1); } /* Shrink into nav size once scrolled past the hero. 130w × 1/2.233 ≈ 58h in a 92px header → ~17px of vertical padding above and below. */ .site-header.is-scrolled .wordmark__mark { width: 156px; } @media (max-width: 767px) { .wordmark__mark { width: 210px; } .site-header.is-scrolled .wordmark__mark { width: 128px; } } /* ---------- Mobile hamburger toggle ---------- Hidden on desktop (≥900px). On mobile it replaces the inline nav; clicking it opens a full-screen drawer (see .site-nav.is-open below). 44×44 tap target meets WCAG AA. Three bars morph into an X when open. */ .nav-toggle { display: none; /* desktop: hidden */ position: relative; width: 44px; height: 44px; padding: 10px; background: transparent; border: 0; cursor: pointer; z-index: 110; /* above drawer (100) so the close-X is always clickable */ } .nav-toggle__bar { display: block; width: 22px; height: 2px; background: var(--text-primary); border-radius: 2px; transform-origin: center; transition: transform 0.4s var(--ease-out-expo), opacity 0.25s var(--ease-out-expo), background 0.3s var(--ease-out-expo); } .nav-toggle__bar + .nav-toggle__bar { margin-top: 5px; } /* When the drawer is open, morph the 3 bars into an X: top bar rotates 45° down, middle fades, bottom rotates -45° up. */ .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Nav — Option A: a small violet bloom expands out from under the word on hover, and the letter-spacing widens so the letters drift apart. Pure CSS, no JS. */ .site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); /* Nudged up so the nav sits visually near the top of the header while the wordmark stays vertically centred. Collapses on scroll. */ transform: translateY(-28px); transition: transform 0.55s var(--ease-out-expo); } .site-header.is-scrolled .site-nav { transform: translateY(0); } /* FR has a taller header (240 idle / 108 scrolled) so the flex-centered nav ends up lower than it does on MD pages. Nudge it back up to match the vertical position of the MD nav visually. */ body.femme-rising .site-nav { transform: translateY(-56px); } body.femme-rising .site-header.is-scrolled .site-nav { transform: translateY(-8px); } .site-nav a, .header-link { position: relative; isolation: isolate; font-family: var(--mono); /* Accessibility: 0.82rem ≈ 13px, tightened letter-spacing so uppercase words read as word-units (not scattered letters). Wider tap target. */ font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-primary); /* Baseline dark text-shadow ensures legibility over any background — bright nebula peak, visualizer wash, photo hero, etc. Strengthened further on hover. */ text-shadow: 0 1px 3px rgba(10, 8, 32, 0.7), 0 0 8px rgba(10, 8, 32, 0.45); padding: 0.7rem 1rem; white-space: nowrap; transition: letter-spacing 0.55s var(--ease-out-expo), color 0.35s var(--ease-out-expo), text-shadow 0.35s var(--ease-out-expo); } /* Nav hover triangle — pre-baked neon PNG (280×248 with glow padding). Sized to match the FR page's moon hover-size (≈51px visible). */ .site-nav a::before, .header-link::before { content: ''; position: absolute; left: 50%; top: 55%; /* 36×32 base (aspect ~280:248 preserved) scales up to ~58 × 51 at hover. Moon is 32×32 scale(1.6) = 51 visible — we match that. */ width: 36px; height: 32px; transform: translate(-50%, -50%) scale(0.5) rotate(-10deg); background-image: url('../img/logo/nav-tri-up-neon.webp'); background-size: contain; background-repeat: no-repeat; background-position: center; background-color: transparent; clip-path: none; opacity: 0; z-index: -1; pointer-events: none; transition: transform 0.7s var(--ease-out-expo), opacity 0.55s var(--ease-out-expo); } /* Triangles alternate direction across the nav, anchored per-link so each stays consistent across pages (doesn't flip when Home is added/removed). Pattern: Home ↓, Music ↑, Shows ↓, About ↑, Femme Rising (moon), Contact ↓. On the home page (no Home link): Music ↑, Shows ↓, About ↑, FR, Contact ↓ — still alternates, and every link keeps its own direction. */ /* (Removed: about page white-fill triangle override. Nav triangles are transparent everywhere now for consistency. Legibility on bright hero backgrounds is handled via nav-link hover text-shadow + the pink halo glow on each triangle.) */ .site-nav a[href="/"]::before, .site-nav a[href="../"]::before, .site-nav a[href*="/shows/"]::before, .site-nav a[data-modal-open="contact"]::before { background-image: url('../img/logo/nav-tri-down-neon.webp'); transform: translate(-50%, -50%) scale(0.5) rotate(10deg); } .site-nav a[href="/"]:hover::before, .site-nav a[href="../"]:hover::before, .site-nav a[href="/"]:focus-visible::before, .site-nav a[href="../"]:focus-visible::before, .site-nav a[href*="/shows/"]:hover::before, .site-nav a[href*="/shows/"]:focus-visible::before, .site-nav a[data-modal-open="contact"]:hover::before, .site-nav a[data-modal-open="contact"]:focus-visible::before { transform: translate(-50%, -50%) scale(2.0) rotate(0deg); } .site-nav a:hover, .site-nav a:focus-visible, .header-link:hover, .header-link:focus-visible { letter-spacing: 0.3em; /* Stay parchment on hover (was blush — too low contrast against pink hover halos). Strong dark text-shadow guarantees the label stays readable against any background — including the bright pink moon glow on the FR link and bright nebula peaks. */ color: var(--parchment); text-shadow: 0 1px 4px rgba(10, 8, 32, 0.95), 0 0 10px rgba(10, 8, 32, 0.65), 0 0 20px rgba(10, 8, 32, 0.4); } .site-nav a:hover::before, .site-nav a:focus-visible::before, .header-link:hover::before, .header-link:focus-visible::before, .site-nav a:nth-child(even):hover::before, .site-nav a:nth-child(even):focus-visible::before { opacity: 1; transform: translate(-50%, -50%) scale(2.0) rotate(0deg); } /* Active page indicator — persistent triangle at reduced intensity is the marker. */ .site-nav a[aria-current="page"] { color: var(--text-primary); letter-spacing: 0.24em; } .site-nav a[aria-current="page"]::before, .site-nav a[aria-current="page"]:nth-child(even)::before { /* Same visual size as the hover state (scale 2.0) so the active-page indicator reads as "the bloom has settled here" — just at reduced opacity so it's distinguishable from an actively hovered link. */ opacity: 0.55; transform: translate(-50%, -50%) scale(2.0) rotate(0deg); } /* ===== Femme Rising link EVERYWHERE: swap the triangle for a PINK moon. The fr-moon.webp source is white/grayscale; the sepia+saturate+hue-rotate filter chain shifts it to electric-pink so the moon reads pink on every page (was previously grayscale on non-FR pages). FR page has its own bigger persistent neon variant further down. ===== */ .site-nav a[href*="femme-rising"]::before { width: 36px; height: 36px; background: url('../img/logo/fr-moon.webp') center / contain no-repeat; clip-path: none; filter: sepia(1) saturate(8) hue-rotate(280deg) brightness(1) drop-shadow(0 0 8px rgba(236, 72, 153, 0.55)) drop-shadow(0 0 20px rgba(236, 72, 153, 0.3)); transform: translate(-50%, -50%) scale(0.5); } .site-nav a[href*="femme-rising"]:hover::before, .site-nav a[href*="femme-rising"]:focus-visible::before { opacity: 1; transform: translate(-50%, -50%) scale(1.6); filter: sepia(1) saturate(8) hue-rotate(280deg) brightness(1.1) drop-shadow(0 0 12px rgba(236, 72, 153, 0.85)) drop-shadow(0 0 30px rgba(236, 72, 153, 0.45)) drop-shadow(0 0 60px rgba(236, 72, 153, 0.22)); } /* ===== FR page only: every nav link swaps the triangle for the moon motif. Idle state uses the SAME pink-neon filter as the hover state (just at opacity: 0) so the mouseleave fade-out doesn't visibly pass through a grayscale intermediate color — only the opacity and scale animate. ===== */ body.femme-rising .site-nav a::before, body.femme-rising .header-link::before, body.femme-rising .site-nav a:nth-child(even)::before { width: 32px; height: 32px; background: url('../img/logo/fr-moon.webp') center / contain no-repeat; clip-path: none; filter: sepia(1) saturate(7) hue-rotate(260deg) brightness(1.1) drop-shadow(0 0 12px rgba(240, 106, 255, 0.95)) drop-shadow(0 0 30px rgba(225, 29, 116, 0.65)) drop-shadow(0 0 60px rgba(169, 28, 143, 0.35)); transform: translate(-50%, -50%) scale(0.5); } body.femme-rising .site-nav a:hover::before, body.femme-rising .site-nav a:focus-visible::before, body.femme-rising .header-link:hover::before, body.femme-rising .header-link:focus-visible::before, body.femme-rising .site-nav a:nth-child(even):hover::before, body.femme-rising .site-nav a:nth-child(even):focus-visible::before { opacity: 1; transform: translate(-50%, -50%) scale(1.6); /* Pink neon on hover — same sepia + hue-rotate treatment as the FR link */ filter: sepia(1) saturate(7) hue-rotate(260deg) brightness(1.1) drop-shadow(0 0 12px rgba(240, 106, 255, 0.95)) drop-shadow(0 0 30px rgba(225, 29, 116, 0.65)) drop-shadow(0 0 60px rgba(169, 28, 143, 0.35)); } body.femme-rising .site-nav a[aria-current="page"]::before, body.femme-rising .site-nav a[aria-current="page"]:nth-child(even)::before { opacity: 0.55; transform: translate(-50%, -50%) scale(1.2); } /* On the FR page, non-FR nav links turn the brand pink on hover (instead of plain white) — a small moment that reinforces the magenta identity. The FR link itself stays white (handled in the :nth-child(4) overrides below). */ body.femme-rising .site-nav a:hover, body.femme-rising .site-nav a:focus-visible, body.femme-rising .header-link:hover, body.femme-rising .header-link:focus-visible { /* Text stays white on hover (matches the FR link treatment). The pink neon moon behind does the color work. Dense dark outline keeps letters crisp. */ color: #ffffff; text-shadow: 1px 0 0 rgba(20, 6, 36, 1), -1px 0 0 rgba(20, 6, 36, 1), 0 1px 0 rgba(20, 6, 36, 1), 0 -1px 0 rgba(20, 6, 36, 1), 1px 1px 2px rgba(20, 6, 36, 0.95), -1px -1px 2px rgba(20, 6, 36, 0.85), 0 0 8px rgba(20, 6, 36, 0.9), 0 0 18px rgba(240, 106, 255, 0.5), 0 0 40px rgba(169, 28, 143, 0.3); } /* FR link on the FR page: bigger + persistent PINK NEON moon, always visible (not only on hover). Uses sepia + hue-rotate to tint the greyscale moon disc toward hot magenta, then stacks pink halo drop-shadows around it. */ body.femme-rising .site-nav a[href*="femme-rising"]::before { width: 56px; height: 56px; filter: sepia(1) saturate(6) hue-rotate(260deg) brightness(1) drop-shadow(0 0 14px rgba(240, 106, 255, 0.9)) drop-shadow(0 0 34px rgba(225, 29, 116, 0.6)) drop-shadow(0 0 70px rgba(169, 28, 143, 0.4)); opacity: 0.9; transform: translate(-50%, -50%) scale(1); } body.femme-rising .site-nav a[href*="femme-rising"]:hover::before, body.femme-rising .site-nav a[href*="femme-rising"]:focus-visible::before { opacity: 1; transform: translate(-50%, -50%) scale(1.35); filter: sepia(1) saturate(7) hue-rotate(260deg) brightness(1.1) drop-shadow(0 0 18px rgba(240, 106, 255, 1)) drop-shadow(0 0 42px rgba(225, 29, 116, 0.75)) drop-shadow(0 0 90px rgba(169, 28, 143, 0.5)); } body.femme-rising .site-nav a[href*="femme-rising"][aria-current="page"]::before { opacity: 0.95; transform: translate(-50%, -50%) scale(1.15); filter: sepia(1) saturate(6.5) hue-rotate(260deg) brightness(1.05) drop-shadow(0 0 16px rgba(240, 106, 255, 0.95)) drop-shadow(0 0 38px rgba(225, 29, 116, 0.7)) drop-shadow(0 0 80px rgba(169, 28, 143, 0.45)); } body.femme-rising .site-nav a[aria-current="page"] { color: var(--nebula-pink); } /* The "Femme Rising" link (4th) gets a persistent soft pink glow on its text so it stays legible and feels like it's emanating the same magenta light as the moon behind it — regardless of page. The glow intensifies on hover. */ .site-nav a[href*="femme-rising"] { text-shadow: 0 0 10px rgba(240, 106, 255, 0.55), 0 0 22px rgba(225, 29, 116, 0.38); transition: letter-spacing 0.55s var(--ease-out-expo), color 0.35s var(--ease-out-expo), text-shadow 0.4s var(--ease-out-expo); } .site-nav a[href*="femme-rising"]:hover, .site-nav a[href*="femme-rising"]:focus-visible { text-shadow: 0 0 14px rgba(240, 106, 255, 0.9), 0 0 32px rgba(225, 29, 116, 0.55), 0 0 60px rgba(169, 28, 143, 0.35); } body.femme-rising .site-nav a[href*="femme-rising"], body.femme-rising .site-nav a[href*="femme-rising"]:hover, body.femme-rising .site-nav a[href*="femme-rising"]:focus-visible, body.femme-rising .site-nav a[href*="femme-rising"][aria-current="page"] { /* FR link text is ALWAYS white on the FR page (not pink) — the pink neon moon behind it does the color work. A dense dark outline keeps the letters crisp against the bright moon disc. */ color: #ffffff; } body.femme-rising .site-nav a[href*="femme-rising"] { text-shadow: 1px 0 0 rgba(20, 6, 36, 1), -1px 0 0 rgba(20, 6, 36, 1), 0 1px 0 rgba(20, 6, 36, 1), 0 -1px 0 rgba(20, 6, 36, 1), 1px 1px 2px rgba(20, 6, 36, 0.95), -1px -1px 2px rgba(20, 6, 36, 0.85), 0 0 8px rgba(20, 6, 36, 0.9), 0 0 18px rgba(240, 106, 255, 0.5), 0 0 40px rgba(169, 28, 143, 0.3); } body.femme-rising .site-nav a[href*="femme-rising"]:hover, body.femme-rising .site-nav a[href*="femme-rising"]:focus-visible { text-shadow: 1px 0 0 rgba(20, 6, 36, 1), -1px 0 0 rgba(20, 6, 36, 1), 0 1px 0 rgba(20, 6, 36, 1), 0 -1px 0 rgba(20, 6, 36, 1), 1px 1px 2px rgba(20, 6, 36, 0.95), -1px -1px 2px rgba(20, 6, 36, 0.85), 0 0 10px rgba(20, 6, 36, 0.9), 0 0 22px rgba(240, 106, 255, 0.9), 0 0 48px rgba(169, 28, 143, 0.5); } /* ---------- Section 1: Hero ---------- */ .hero { position: relative; height: 100vh; /* dvh = dynamic viewport height, accounts for mobile browser chrome so the hero doesn't get clipped when the URL bar shows/hides. Supported in Safari 15.4+ / Chrome 108+; falls back to 100vh otherwise. */ height: 100dvh; min-height: 640px; padding: 0; overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: 0; } /*