/* ========================================================================== mstyles.css — Home page only. Pulls in the shared header/footer look, then adds home-page sections. ========================================================================== */ /* hf-shared.css is now linked directly in the of every page, right before this file — see index.php / includes-front templates. */ /* ---------- Hero ---------- */ .hero { position: relative; background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-dark) 100%); color: var(--color-white); overflow: hidden; } .hero-inner { position: relative; z-index: 1; padding-block: clamp(3rem, 7vw, 5.5rem); display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; } @media (min-width: 960px) { .hero-inner { grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; } } .hero-eyebrow { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; color: #ffd9dc; margin: 0; } .hero h1 { color: var(--color-white); font-size: clamp(2.5rem, 5.5vw, 4rem); margin: 0.5rem 0 0; } .hero-lede { font-size: 1.15rem; color: #dfe7f4; max-width: 56ch; margin: 1.25rem 0 2rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; } /* Right-column visual: a fixed 4:3 photo, same ratio at every screen size */ .hero-visual { width: 100%; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); } .hero-visual-photo { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-visual .placeholder-figure { color: #cfdaee; background: repeating-linear-gradient( 135deg, rgba(255, 255, 255, 0.05) 0 14px, rgba(255, 255, 255, 0.1) 14px 28px ); } .hero-visual .placeholder-figure i { background: rgba(255, 255, 255, 0.12); color: var(--color-white); box-shadow: none; } /* decorative star field, purely presentational */ .hero-decor { position: absolute; inset: 0; z-index: 0; opacity: 0.16; background-image: radial-gradient(circle, #ffffff 1.5px, transparent 1.5px); background-size: 26px 26px; mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 85%); } /* ---------- Pillars strip ---------- */ .pillars { background: var(--color-white); border-bottom: 1px solid var(--color-border); } .pillars-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); padding-block: 2.25rem; } @media (min-width: 760px) { .pillars-grid { grid-template-columns: repeat(4, 1fr); } } .pillar { display: flex; align-items: center; gap: 0.85rem; } .pillar i { flex-shrink: 0; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-cream); color: var(--color-red-dark); font-size: 1.05rem; } .pillar span { font-weight: 700; color: var(--color-navy); font-size: 0.95rem; } /* ---------- Section scaffolding ---------- */ .section { padding-block: clamp(3rem, 6vw, 5rem); } .section--alt { background: var(--color-cream); } .section-head { max-width: 68ch; margin-bottom: 2.25rem; } .section-eyebrow { font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.78rem; color: var(--color-red-dark); margin: 0; } .section-head h2 { font-size: clamp(1.75rem, 3.5vw, 2.4rem); margin: 0.35rem 0 0; } /* ---------- Mission & purposes ---------- */ .mission-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; } @media (min-width: 860px) { .mission-grid { grid-template-columns: 1fr 1fr; align-items: start; } } .mission-copy p { font-size: 1.05rem; color: var(--color-ink); } /* ---------- President spotlight ---------- */ .president-card { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; } @media (min-width: 860px) { .president-card { grid-template-columns: 300px 1fr; } } .president-photo { aspect-ratio: 2 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-cream); border: 1px solid var(--color-border); box-shadow: 0 16px 32px rgba(18, 41, 74, 0.1); } .president-photo img { width: 100%; height: 100%; object-fit: cover; } .placeholder-figure { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; height: 100%; color: var(--color-slate); text-align: center; padding: 1.5rem; font-size: 0.85rem; background: repeating-linear-gradient( 135deg, var(--color-cream) 0 14px, #efe9db 14px 28px ); } .placeholder-figure i { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-white); font-size: 1.4rem; color: var(--color-navy); box-shadow: 0 6px 16px rgba(18, 41, 74, 0.12); } .president-name { font-size: 1.5rem; margin-bottom: 0.1rem; } .president-role { color: var(--color-red-dark); font-weight: 600; margin: 0 0 1.25rem; } .theme-panel { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.75rem; margin-top: 1.5rem; box-shadow: 0 12px 28px rgba(18, 41, 74, 0.06); } .theme-panel h3 { font-size: 1.1rem; margin-bottom: 0.75rem; } .focus-acronym { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.4rem; } .focus-acronym li strong { color: var(--color-red-dark); font-family: var(--font-display); font-size: 1.05em; } .detail-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 1.25rem; } .detail-item .detail-label { font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-slate); margin: 0; } .detail-item .detail-value { margin: 0.25rem 0 0; color: var(--color-ink); } .symbol-figure { margin-top: 1.5rem; max-width: 280px; } .symbol-figure figcaption { font-size: 0.85rem; color: var(--color-slate); margin-top: 0.5rem; } /* ---------- Eligibility / join ---------- */ .eligibility-layout { display: grid; gap: 2.5rem; grid-template-columns: 1fr; } @media (min-width: 900px) { .eligibility-layout { grid-template-columns: 1.2fr 0.8fr; } } details.elig-item { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.9rem 1.1rem; margin-bottom: 0.75rem; background: var(--color-white); } details.elig-item summary { cursor: pointer; font-weight: 600; color: var(--color-navy); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } details.elig-item summary::-webkit-details-marker { display: none; } details.elig-item summary .chevron { transition: transform var(--transition-fast); color: var(--color-red-dark); } details.elig-item[open] summary .chevron { transform: rotate(180deg); } details.elig-item p { margin: 0.85rem 0 0.25rem; color: var(--color-ink); } .elig-note { font-size: 0.9rem; color: var(--color-slate); margin-top: 1rem; } .join-panel { background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-dark) 100%); color: var(--color-white); border-radius: var(--radius-lg); padding: 2.25rem; box-shadow: 0 18px 36px rgba(18, 41, 74, 0.18); } .join-panel h3 { color: var(--color-white); font-size: 1.4rem; } .join-panel p { color: #dfe7f4; } .join-panel .btn-primary { margin-top: 0.5rem; } /* ---------- Partner organizations ---------- */ .partner-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .partner-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; color: var(--color-ink); background: var(--color-white); box-shadow: 0 8px 20px rgba(18, 41, 74, 0.05); transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } .partner-card:hover { border-color: var(--color-red); transform: translateY(-4px); box-shadow: 0 16px 32px rgba(18, 41, 74, 0.12); } .partner-card i { color: var(--color-red-dark); font-size: 1.5rem; } .partner-card span.card-title { font-weight: 700; color: var(--color-navy); } .partner-card .card-cta { margin-top: auto; font-size: 0.85rem; color: var(--color-red-dark); font-weight: 600; } /* ---------- Follow section ---------- */ .follow-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; background: var(--color-cream); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 2.25rem; } .follow-panel .btn-outline-navy i { margin-right: 0.35rem; }