/* ================================================ PULMONS DE BARRI — Project Page Shared Styles All project pages (juan-sombrero, penjant-dun-fil, rehealms, etc.) import this file after main.css. Each project sets its own --project-color on , and adds only its unique overrides after this import. ================================================ */ @import url('main.css'); /* ── Project hero: two-column, dark left / color right ── */ .project-hero { min-height: 65vh; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: var(--color-dark); color: var(--color-white); } .project-hero__text { display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-xl) var(--space-lg) var(--space-lg); } .project-hero__tags { margin-bottom: var(--space-md); } .project-hero__tags .tag { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.75); margin-right: 0.4em; } .project-hero__title { color: var(--color-white); margin-bottom: var(--space-sm); } .project-hero__tagline { font-size: 1.05rem; opacity: 0.5; max-width: 44ch; line-height: 1.65; } /* Right panel: project color as background, photo on top */ .project-hero__image { background: var(--project-color, var(--color-neutral)); overflow: hidden; position: relative; contain: layout; } .project-hero__image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Meta strip ── */ .project-meta { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-neutral); margin-bottom: var(--space-lg); text-align: center; } .project-meta__label { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.35; margin-bottom: 0.3em; } .project-meta__value { font-size: 0.95rem; font-weight: 500; } /* ── Body text ── */ .project-body p { font-size: 1.05rem; line-height: 1.8; opacity: 0.72; margin-bottom: var(--space-md); max-width: 66ch; margin-left: auto; margin-right: auto; text-align: center; } /* Lead paragraph: display serif, larger — shared across all projects */ .project-body p:first-child { font-family: var(--font-display); font-size: 1.3rem; opacity: 0.9; line-height: 1.5; } /* ── Gallery ── */ .gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-top: var(--space-lg); } .gallery__item { border-radius: 8px; overflow: hidden; /* Color-backed placeholder using project color when no image loaded */ background: var(--project-color, var(--color-neutral)); aspect-ratio: 4/3; } .gallery__item--wide { grid-column: 1 / -1; aspect-ratio: 16/7; } .gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; transition: opacity 0.2s; } .gallery__item img:hover { opacity: 0.85; } /* ── Lightbox ── */ .lightbox { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.92); align-items: center; justify-content: center; padding: var(--space-md); } .lightbox.is-open { display: flex; } .lightbox__img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 4px; box-shadow: 0 8px 48px rgba(0,0,0,0.6); } .lightbox__close { position: fixed; top: 1.25rem; right: 1.5rem; background: none; border: none; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; opacity: 0.7; padding: 0.25rem 0.5rem; } .lightbox__close:hover { opacity: 1; } .lightbox__prev, .lightbox__next { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: none; color: #fff; font-size: 1.75rem; padding: 0.75rem 1rem; cursor: pointer; border-radius: 4px; opacity: 0.7; line-height: 1; } .lightbox__prev:hover, .lightbox__next:hover { opacity: 1; background: rgba(255,255,255,0.2); } .lightbox__prev { left: 1rem; } .lightbox__next { right: 1rem; } .gallery__item--video { aspect-ratio: 16/9; background: var(--color-dark); } .gallery__item--video iframe { width: 100%; height: 100%; border: 0; display: block; } /* ── More projects ── */ .project-more { background: var(--color-cream); padding: var(--space-lg) 0; } .more-projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-sm); margin-top: var(--space-md); } .more-card { border-radius: 12px; overflow: hidden; background: var(--color-white); border: 1px solid var(--color-neutral); border-left: 3px solid var(--card-color, var(--color-neutral)); display: block; color: inherit; text-decoration: none; transition: transform var(--transition), box-shadow var(--transition); } .more-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .more-card__strip { height: 4px; background: var(--card-color, var(--color-neutral)); } .more-card__body { padding: var(--space-sm) var(--space-md); } .more-card__tags { margin-bottom: 0.5em; } .more-card__tag { font-size: 0.6rem !important; padding: 0.2em 0.6em !important; opacity: 0.7; } .more-card__title { font-size: 1.05rem; font-weight: var(--fw-regular); line-height: 1.2; margin-bottom: 0.3em; max-width: none; } .more-card__tagline { font-size: 0.8rem; opacity: 0.55; line-height: 1.5; max-width: none; } /* ── Artist / contributor spotlight band ── */ .project-spotlight { padding: var(--space-lg) 0; } .project-spotlight--gold { background: var(--color-gold); } .project-spotlight--cream { background: var(--color-cream); } .project-spotlight__inner { display: grid; grid-template-columns: auto 1fr; gap: var(--space-lg); align-items: center; } .project-spotlight__photo { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; } .project-spotlight__photo--placeholder { width: 110px; height: 110px; border-radius: 50%; background: rgba(0,0,0,0.10); } /* ── Responsive ── */ @media (max-width: 768px) { .project-hero { grid-template-columns: 1fr; } .project-hero__image { min-height: 50vw; } .project-hero__text { padding: var(--space-lg) var(--space-md); } .gallery { grid-template-columns: 1fr; } .gallery__item--wide { grid-column: 1; aspect-ratio: 4/3; } .project-spotlight__inner { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════ MEMBER (PERSON) PAGES pages/team/[id].html — individual team member pages Hero uses gold band to distinguish from dark project hero. ═══════════════════════════════════════════════════ */ .member-hero { background: var(--color-gold); overflow: hidden; display: grid; grid-template-columns: 3fr 7fr; min-height: 65vh; } .member-hero__text { display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-xl) var(--space-lg) var(--space-xl) var(--container-pad); } .member-hero__back { display: inline-block; font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; margin-bottom: var(--space-lg); transition: opacity var(--transition); } .member-hero__back:hover { opacity: 1; } .member-hero__name { color: var(--color-dark); margin-bottom: var(--space-sm); } .member-hero__role { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.55; margin-bottom: var(--space-md); font-weight: var(--fw-medium); } .member-hero__tagline { font-size: 1.1rem; opacity: 0.75; max-width: 44ch; line-height: 1.65; } /* Photo column — mirrors .project-hero__image exactly */ .member-hero__photo-col { overflow: hidden; background: rgba(0,0,0,0.08); position: relative; contain: layout; } .member-hero__photo-col img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* ── Member bio body ── */ .member-body { padding: var(--space-xl) 0; } .member-body__text p { font-size: 1.05rem; line-height: 1.8; opacity: 0.72; margin-bottom: var(--space-md); max-width: 66ch; } .member-body__text p:first-child { font-family: var(--font-display); font-size: 1.25rem; opacity: 0.9; line-height: 1.5; } /* ── Member initiative section ── */ .member-initiative { background: var(--color-cream); padding: var(--space-xl) 0; } .member-initiative__intro { margin-bottom: var(--space-lg); } .member-initiative__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; } .member-initiative__title { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: var(--fw-light); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: var(--space-md); } .member-initiative__desc p { font-size: 1rem; opacity: 0.7; line-height: 1.8; margin-bottom: var(--space-md); max-width: 56ch; } .member-initiative__image { aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; background: var(--color-neutral); } .member-initiative__image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Member responsive ── */ @media (max-width: 768px) { .member-hero { grid-template-columns: 1fr; } .member-hero__photo-col { order: -1; min-height: 60vw; } .member-hero__text { padding: var(--space-lg) var(--space-md); } .member-initiative__inner { grid-template-columns: 1fr; } }