/* ============================================================================ Women in Fund Finance (WIFF) microsite theme. Everything is scoped under .theme--wiff (applied to on /wiff pages by _Layout.cshtml) so it can never affect the main FFA site. Palette is taken WIFF purple accent (#8254a2, per FFA) with derived shades over slate-navy darks. ============================================================================ */ .theme--wiff { /* Remap the shared fill variables used by composition--fill-* bands. */ --fill-darkBlue: #2d3643; /* FFA navy -> WIFF slate */ --fill-blue: #8254a2; /* FFA blue -> WIFF purple */ --fill-lightBlue:#d8c8e6; /* light purple */ --fill-cloud: #f0eaf6; --fill-fog: #f6f2f9; /* Theme tokens for selectors below. */ --wiff-rose: #8254a2; /* WIFF purple (FFA-specified) */ --wiff-rose-deep: #653f7d; /* darker purple for hover/focus */ --wiff-coral: #9d6cbf; /* lighter purple accent */ --wiff-slate: #2d3643; --wiff-slate-deep: #1e242e; } /* ── Buttons / CTAs ──────────────────────────────────────────────────────── */ .theme--wiff .btn, .theme--wiff .cta-banner__btn, .theme--wiff .spotlight__cta { background-color: var(--wiff-rose); border-color: var(--wiff-rose); } .theme--wiff .btn:hover, .theme--wiff .btn:focus, .theme--wiff .spotlight__cta:hover, .theme--wiff .spotlight__cta:focus { background-color: var(--wiff-rose-deep); border-color: var(--wiff-rose-deep); } /* ── Dark bands that hardcode the FFA navy (#003c71) ─────────────────────── */ .theme--wiff .composition--fill-darkBlue, .theme--wiff .footer, .theme--wiff .footer__marketing, .theme--wiff .footer__legal { background-color: var(--wiff-slate) !important; } /* ── Section/hero headings on light backgrounds (NOT generic h1/h2/h3, which also appear white-on-dark in the footer bands). ───────────────────────── */ .theme--wiff .section-header__title, .theme--wiff .hero__heading, .theme--wiff .hero-home__heading { color: var(--wiff-slate); } /* ── Links / accents ─────────────────────────────────────────────────────── */ .theme--wiff .nav__link:hover, .theme--wiff .nav__toggle:hover, .theme--wiff .article-listing__link, .theme--wiff .cta-item__link { color: var(--wiff-rose); } /* ── Header: two logos side-by-side (WIFF primary + FFA co-brand) ────────── The header is a CSS grid at >=992px with .header__logo pinned to cell 2/1. Two .header__logo siblings would collide there, so both live in a single .header__brand wrapper that takes the cell and lays them out as a flex row. */ .theme--wiff .header__brand { display: flex; align-items: center; gap: 1.1rem; } @media (min-width: 992px) { /* Widen the logo column to fit two marks, and seat the brand wrapper in it. */ .theme--wiff .header__inner { grid-template-columns: minmax(300px, 360px) 1fr auto auto; } .theme--wiff .header__brand { grid-area: 2 / 1 / 3 / 2; } } /* Cancel the per-logo grid pinning inside the wrapper so they flow in the flex row. */ .theme--wiff .header__brand .header__logo { grid-area: auto; flex: 0 0 auto; margin: 0; } .theme--wiff .header__logo--secondary { padding-left: 1.1rem; border-left: 1px solid #d4d4d2; } /* Primary (PNG) scales from height; secondary is an SVG with no intrinsic size, so it needs an explicit width or it collapses to 0 in the flex row. */ .theme--wiff .header__logo .logo__image { max-height: 42px; width: auto; } .theme--wiff .header__logo--secondary .logo__image { width: 150px; height: auto; max-height: 44px; }