/* Mission pages (About / Dalton / Operation) — tile grammar on main.css tokens. Rhythm: dark hero tile → white content sections → dark CTA band → parchment footer. */ /* ---- Hero: dark museum tile ---- */ .mission-hero { position: relative; padding: 120px 0 88px; overflow: hidden; background: var(--tile-dark); } .mission-hero .container { position: relative; z-index: 2; } .mission-hero__title { font-size: clamp(2.2rem, 5vw, 3.3rem); font-weight: 600; letter-spacing: -0.022em; color: var(--text-on-dark); text-align: center; line-height: 1.07; margin-bottom: 1.5rem; display: block; text-wrap: balance; } /* The sanctioned h1 rainbow stripe, centered under the title on the dark tile */ .mission-hero__title::after { left: 50%; transform: translateX(-50%); bottom: -16px; width: 144px; } .mission-hero__subtitle { font-size: clamp(1.1rem, 2.2vw, 1.3rem); color: var(--text-muted-on-dark); text-align: center; max-width: 760px; margin: 0 auto; line-height: 1.5; text-wrap: pretty; } /* ---- Sections + content cards ---- */ .mission-section { padding: 48px 0; } .glass-card { background: var(--bg-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 36px; margin-bottom: 30px; } .glass-card h2 { margin-bottom: 1rem; } .glass-card .lead { max-width: none; } /* ---- Scroll reveal (progressive enhancement) ---- Content is visible by default; mission.js stamps .js-reveal on before observing, so reveals only hide content when JS is running. */ .js-reveal .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease-out-quart), transform 0.7s var(--ease-out-quart); } .js-reveal .reveal.is-visible { opacity: 1; transform: none; } /* ---- Stats ---- */ .stat-grid { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 16px; margin: 30px 0; } .stat { text-align: center; padding: 20px; min-width: 200px; } .stat__number { font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 600; letter-spacing: -0.02em; color: var(--text-color); line-height: 1; } .stat__label { font-size: 1.05rem; color: var(--text-light); margin-top: 8px; } /* ---- Pillar grid ---- */ .pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; } .pillar { background: var(--bg-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 28px; transition: border-color var(--transition-fast); } .pillar:hover { border-color: #c7c7cc; } .pillar__icon { font-size: 2rem; color: var(--primary-color); margin-bottom: 14px; } .pillar h3 { font-size: 1.25rem; margin-bottom: 10px; } /* ---- Cross links ---- */ .cross-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 20px; } .cross-link { display: block; padding: 24px; border-radius: var(--radius-lg); background: var(--bg-color); border: 1px solid var(--border-color); text-decoration: none; color: var(--text-color); font-weight: 600; transition: border-color var(--transition-fast), color var(--transition-fast); } .cross-link:hover { border-color: #c7c7cc; color: var(--primary-color); text-decoration: none; } /* ---- Donate CTA: dark full-bleed band ---- */ .mission-cta { text-align: center; padding: 72px 0; background: var(--tile-dark); } .mission-cta h2 { color: var(--text-on-dark); } .mission-cta p { color: var(--text-muted-on-dark); margin-left: auto; margin-right: auto; } .mission-cta .btn-donate { display: inline-block; padding: 13px 32px; border-radius: var(--radius-pill); background: var(--primary-color); color: var(--white); font-weight: 400; font-size: 1.0625rem; text-decoration: none; transition: background-color var(--transition-fast), transform var(--transition-fast); } .mission-cta .btn-donate:hover { background: var(--primary-light); color: var(--white); } .mission-cta .btn-donate:active { transform: scale(0.97); } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .glass-card, .pillar, .cross-link, .mission-cta .btn-donate { transition: none; } }