/* ============================================================================
Impact United — public website styles
----------------------------------------------------------------------------
Ported from the v0 export (the active top-level source in the supplied
archive). The five blocks below are, in cascade order, the same stylesheets
the v0 layout imported — kept verbatim so section composition, typography,
spacing and crops match the reviewed design. The final block is this site's
own integration layer (official logo, plain-![]()
photo boxes, offerings).
1. impact-public-site.css section layout
2. impact-motion-system.css hero rise, section reveal, reduced motion
3. freebuff-organization-demo the interactive organization demo
4. impact-visual-refresh.css ivory / charcoal / mint / emerald pass
5. integration this site's bridge layer
========================================================================== */
/* ==========================================================================
1. impact-public-site.css
========================================================================== */
.impact-site {
--impact-forest: #173b31;
--impact-forest-deep: #102d25;
--impact-leaf: #456b4f;
--impact-moss: #dce6d6;
--impact-ivory: #f5f3e9;
--impact-paper: #fffdf6;
--impact-ink: #202a24;
--impact-muted: #68746b;
--impact-line: #d9ddd3;
--impact-coral: #c7785e;
--impact-gold: #d4ab68;
min-height: 100vh;
overflow: clip;
background: var(--impact-ivory);
color: var(--impact-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 15px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.impact-site *, .impact-site *::before, .impact-site *::after { box-sizing: border-box; }
.impact-site a { color: inherit; text-decoration: none; }
.impact-site button { color: inherit; font: inherit; }
.impact-site :focus-visible { outline: 3px solid var(--impact-coral); outline-offset: 4px; }
.impact-site h1, .impact-site h2, .impact-site h3, .impact-site p { margin-top: 0; }
.impact-site h1, .impact-site h2, .impact-site h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.impact-site h1 em, .impact-site h2 em { color: var(--impact-leaf); font-weight: 400; }
.impact-skip-link { position: absolute; z-index: 100; top: -60px; left: 20px; border-radius: 4px; padding: 10px 14px; background: var(--impact-paper); color: var(--impact-forest); }
.impact-skip-link:focus { top: 12px; }
.impact-header { position: sticky; z-index: 50; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 82px; border-bottom: 1px solid rgba(23,59,49,.13); padding: 0 max(6.2vw, calc((100% - 1440px) / 2)); background: rgba(245,243,233,.94); backdrop-filter: blur(16px); }
.impact-wordmark { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; color: var(--impact-forest); font-size: 26px; font-weight: 650; letter-spacing: -.075em; }
.impact-logo { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50% 50% 50% 12px; background: var(--impact-forest); color: var(--impact-ivory); transform: rotate(-9deg); }
.impact-logo svg { width: 19px; height: 19px; transform: rotate(9deg); stroke-width: 1.8; }
.impact-wordmark-period { color: var(--impact-coral); }
.impact-navigation, .impact-header-actions { display: flex; align-items: center; gap: clamp(22px,3vw,48px); }
.impact-navigation > a, .impact-login-link, .impact-footer-links a { border: 0; padding: 7px 0; background: transparent; color: var(--impact-ink); cursor: pointer; font-size: 13px; font-weight: 550; transition: color .2s ease; }
.impact-navigation > a:hover, .impact-login-link:hover, .impact-footer-links a:hover { color: var(--impact-leaf); }
.impact-header-actions { gap: 24px; }
.impact-mobile-actions, .impact-menu-toggle { display: none; }
.impact-button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 14px; border: 1px solid transparent; border-radius: 3px; padding: 0 20px; cursor: pointer; font-size: 13px; font-weight: 650; letter-spacing: .005em; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.impact-button:hover { transform: translateY(-2px); }
.impact-button svg, .impact-text-link svg, .impact-light-link svg, .impact-inline-app-link svg, .impact-footer-login svg { width: 16px; height: 16px; }
.impact-button-dark { background: var(--impact-forest); color: var(--impact-paper) !important; }
.impact-button-dark:hover { background: var(--impact-forest-deep); }
.impact-button-green { background: var(--impact-leaf); color: white !important; }
.impact-button-green:hover { background: var(--impact-forest); }
.impact-button-outline { border-color: var(--impact-forest); background: transparent; color: var(--impact-forest) !important; }
.impact-button-outline:hover { background: var(--impact-forest); color: white !important; }
.impact-button-light { background: var(--impact-ivory); color: var(--impact-forest) !important; }
.impact-button-light:hover { background: white; }
.impact-hero { position: relative; display: grid; width: min(1440px, 100%); min-height: 710px; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(30px, 6.8vw, 110px); margin: 0 auto; padding: 78px 7.4% 84px; }
.impact-hero-copy { position: relative; z-index: 2; padding: 15px 0 12px; }
.impact-kicker, .impact-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--impact-leaf); font-size: 10px; font-weight: 750; letter-spacing: .15em; line-height: 1.4; }
.impact-kicker-mark { width: 24px; height: 1px; background: var(--impact-coral); }
.impact-hero h1 { max-width: 700px; margin: 22px 0 23px; color: var(--impact-forest); font-size: clamp(60px, 7.1vw, 104px); line-height: .99; letter-spacing: -.075em; }
.impact-hero h1 em { display: block; margin-top: 5px; color: var(--impact-leaf); }
.impact-hero-lede { max-width: 500px; margin-bottom: 31px; color: #556359; font-size: clamp(15px, 1.35vw, 18px); line-height: 1.75; }
.impact-hero-actions { display: flex; align-items: center; gap: 29px; }
.impact-text-link, .impact-light-link, .impact-inline-app-link { display: inline-flex; align-items: center; gap: 9px; color: var(--impact-forest); font-size: 13px; font-weight: 650; }
.impact-text-link { border-bottom: 1px solid rgba(23,59,49,.34); padding: 10px 0; }
.impact-text-link svg { width: 14px; height: 14px; }
.impact-text-link:hover, .impact-light-link:hover, .impact-inline-app-link:hover { color: var(--impact-coral); }
.impact-hero-footnote { display: flex; align-items: center; gap: 10px; margin-top: 44px; color: var(--impact-muted); font-size: 11px; letter-spacing: .035em; }
.impact-hero-footnote > span:first-child { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid var(--impact-line); border-radius: 50%; color: var(--impact-leaf); }
.impact-hero-footnote svg { width: 13px; height: 13px; }
.impact-hero-art { position: relative; min-width: 0; padding: 0 0 31px 18px; }
.impact-photo-frame { position: relative; width: 100%; height: clamp(430px, 44vw, 580px); overflow: hidden; background: #c4c7a9; }
.impact-photo { object-fit: cover; }
.impact-hero-art .impact-photo { object-position: 50% 43%; }
.impact-photo-caption { position: absolute; bottom: 0; left: -4px; display: flex; align-items: center; gap: 11px; color: var(--impact-forest); font-family: Georgia, "Times New Roman", serif; font-size: 14px; font-style: italic; }
.impact-caption-rule { width: 32px; height: 1px; background: var(--impact-coral); }
.impact-stamp { position: absolute; top: 29px; left: -46px; display: grid; place-items: center; width: 106px; height: 106px; border-radius: 50%; background: var(--impact-paper); color: var(--impact-forest); box-shadow: 0 12px 40px rgba(26,47,37,.13); }
.impact-stamp svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: impact-turn 34s linear infinite; }
.impact-stamp text { fill: var(--impact-forest); font-family: ui-sans-serif,system-ui,sans-serif; font-size: 8px; font-weight: 700; letter-spacing: 2px; }
.impact-stamp > svg:last-child { width: 25px; height: 25px; stroke-width: 1.5; }
.impact-hero-index { position: absolute; right: -3px; bottom: 1px; color: var(--impact-muted); font-size: 9px; letter-spacing: .13em; }
@keyframes impact-turn { to { transform: rotate(360deg); } }
.impact-mission { padding: 38px max(8.2vw, calc((100% - 1280px) / 2)) 58px; background: var(--impact-forest); color: var(--impact-ivory); }
.impact-mission-topline { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(245,243,233,.2); padding-bottom: 17px; color: #c6d2c7; font-size: 9px; font-weight: 650; letter-spacing: .14em; }
.impact-mission-layout { display: grid; grid-template-columns: 1.03fr .72fr; gap: 12%; padding: 67px 0 65px; }
.impact-mission h2, .impact-org-copy h2, .impact-section-intro h2, .impact-app-heading h2, .impact-faq-intro h2, .impact-final-cta h2 { margin: 0; font-size: clamp(41px, 5.2vw, 70px); line-height: 1.05; letter-spacing: -.06em; }
.impact-mission h2 { max-width: 610px; }
.impact-mission h2 em, .impact-final-cta h2 em { color: #d2ad70; }
.impact-mission-copy { align-self: center; }
.impact-mission-copy p { margin: 0 0 14px; color: #d5ddd3; font-size: 14px; line-height: 1.8; }
.impact-light-link { margin-top: 11px; color: var(--impact-ivory); }
.impact-connection-line { display: flex; align-items: center; justify-content: center; gap: 18px; border-top: 1px solid rgba(245,243,233,.18); padding-top: 28px; }
.impact-connection-line > div { display: flex; align-items: center; gap: 10px; color: #f4f1e5; font-family: Georgia, "Times New Roman", serif; font-size: 15px; }
.impact-line-icon { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid rgba(245,243,233,.3); border-radius: 50%; color: #d2ad70; }
.impact-line-icon svg { width: 16px; height: 16px; }
.impact-connection-line > i { width: min(9vw, 100px); height: 1px; background: rgba(245,243,233,.3); }
.impact-how { padding: 113px max(8.2vw, calc((100% - 1280px) / 2)) 105px; }
.impact-section-intro { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 50px; }
.impact-section-intro h2 { max-width: 600px; margin-top: 17px; color: var(--impact-forest); }
.impact-section-intro p { max-width: 355px; margin: 0 0 6px; color: var(--impact-muted); font-size: 13px; line-height: 1.8; }
.impact-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--impact-line); border-bottom: 1px solid var(--impact-line); }
.impact-step { position: relative; min-height: 276px; padding: 30px 34px 28px 0; }
.impact-step + .impact-step { border-left: 1px solid var(--impact-line); padding-left: 34px; }
.impact-step-number { position: absolute; top: 31px; right: 30px; color: #929d8d; font-size: 10px; letter-spacing: .08em; }
.impact-step-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; background: #e7eade; color: var(--impact-leaf); }
.impact-step-icon svg { width: 19px; height: 19px; stroke-width: 1.7; }
.impact-step h3 { margin: 26px 0 8px; color: var(--impact-forest); font-size: 25px; letter-spacing: -.035em; }
.impact-step p { max-width: 320px; margin-bottom: 22px; color: var(--impact-muted); font-size: 12px; line-height: 1.75; }
.impact-step-tag { color: var(--impact-leaf); font-size: 9px; font-weight: 750; letter-spacing: .12em; }
.impact-inline-app-link { margin-top: 26px; }
.impact-organizations { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(46px, 9vw, 130px); padding: 87px max(8.2vw, calc((100% - 1280px) / 2)); background: #e9e8db; }
.impact-org-image { position: relative; min-width: 0; height: clamp(390px, 40vw, 530px); }
.impact-org-image .impact-photo { object-position: 51% 48%; }
.impact-image-note { position: absolute; right: -21px; bottom: 27px; display: flex; align-items: center; gap: 12px; padding: 12px 17px 12px 12px; background: var(--impact-paper); color: var(--impact-forest); font-family: Georgia, "Times New Roman", serif; font-size: 13px; box-shadow: 0 9px 22px rgba(26,47,37,.12); }
.impact-image-note-icon { display: grid; place-items: center; width: 33px; height: 33px; background: var(--impact-moss); color: var(--impact-leaf); }
.impact-image-note-icon svg { width: 17px; }
.impact-org-copy { max-width: 480px; }
.impact-org-copy h2 { margin: 17px 0; color: var(--impact-forest); }
.impact-org-copy > p { color: var(--impact-muted); font-size: 13px; line-height: 1.8; }
.impact-check-list { display: grid; gap: 12px; margin: 24px 0 19px; padding: 0; list-style: none; }
.impact-check-list li { display: flex; align-items: center; gap: 10px; color: var(--impact-ink); font-size: 12px; }
.impact-check-list svg { width: 15px; height: 15px; color: var(--impact-leaf); }
.impact-org-copy .impact-capability-note { margin: 0 0 19px; color: #73796f; font-size: 10px; }
.impact-app-intro { display: grid; grid-template-columns: .78fr 1fr; align-items: center; gap: 8%; padding: 113px max(8.2vw, calc((100% - 1280px) / 2)); background: var(--impact-forest-deep); color: var(--impact-ivory); }
.impact-app-heading .impact-eyebrow { color: #c7d5c4; }
.impact-app-heading h2 { margin: 18px 0 14px; font-size: clamp(41px, 4.7vw, 62px); }
.impact-app-heading h2 em { color: #d2ad70; }
.impact-app-heading > p { max-width: 415px; margin: 0 0 25px; color: #d0dacf; font-size: 13px; line-height: 1.8; }
.impact-app-window { overflow: hidden; border: 1px solid rgba(250,250,240,.17); border-radius: 5px; background: #f8f7ef; color: var(--impact-ink); box-shadow: 0 20px 60px rgba(0,0,0,.22); transform: rotate(1.2deg); }
.impact-app-window-bar { display: flex; align-items: center; justify-content: space-between; min-height: 53px; border-bottom: 1px solid #e4e6dd; padding: 0 17px; }
.impact-mini-brand { display: inline-flex; align-items: center; gap: 5px; color: var(--impact-forest); font-size: 12px; font-weight: 700; letter-spacing: -.05em; }
.impact-mini-brand > span:last-child { color: var(--impact-coral); }
.impact-mini-mark { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50% 50% 50% 6px; background: var(--impact-forest); color: white; }
.impact-mini-mark svg { width: 12px; height: 12px; }
.impact-window-label { color: #7e877d; font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.impact-window-dots { display: flex; gap: 4px; }
.impact-window-dots i { width: 5px; height: 5px; border-radius: 50%; background: #bac2b7; }
.impact-app-window-content { display: grid; grid-template-columns: 48px 1fr; min-height: 330px; }
.impact-app-rail { display: flex; align-items: center; flex-direction: column; gap: 13px; border-right: 1px solid #e4e6dd; padding: 18px 0; }
.impact-app-rail > span { display: grid; place-items: center; width: 28px; height: 28px; color: #738174; }
.impact-app-rail > span.is-current { border-radius: 7px; background: #e2e9dc; color: var(--impact-leaf); }
.impact-app-rail svg { width: 15px; height: 15px; }
.impact-app-feed { max-width: 600px; margin: 0 auto; padding: 21px clamp(13px, 2.2vw, 28px); }
.impact-feed-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.impact-feed-title > span:first-child { color: var(--impact-forest); font-family: Georgia, "Times New Roman", serif; font-size: 23px; }
.impact-feed-title > span:last-child { color: #778278; font-size: 9px; }
.impact-feed-card { display: grid; grid-template-columns: 42% 1fr; overflow: hidden; border: 1px solid #e1e5da; background: white; }
.impact-feed-photo { position: relative; min-height: 145px; }
.impact-feed-card-copy { display: flex; align-items: flex-start; flex-direction: column; justify-content: center; gap: 6px; padding: 15px; }
.impact-feed-label { color: var(--impact-leaf); font-size: 8px; font-weight: 750; letter-spacing: .1em; }
.impact-feed-card-copy strong { color: var(--impact-forest); font-family: Georgia, "Times New Roman", serif; font-size: clamp(14px, 1.3vw, 19px); font-weight: 400; line-height: 1.2; }
.impact-feed-meta { color: #7f887d; font-size: 9px; }
.impact-feed-card-secondary { grid-template-columns: 48px 1fr auto; align-items: center; margin-top: 10px; padding: 10px 12px; }
.impact-feed-thumbnail { display: grid; place-items: center; width: 39px; height: 39px; background: #e7eade; color: var(--impact-leaf); }
.impact-feed-thumbnail svg { width: 19px; }
.impact-feed-card-secondary .impact-feed-card-copy { gap: 4px; padding: 3px 8px; }
.impact-feed-card-secondary .impact-feed-card-copy strong { font-size: 14px; }
.impact-feed-arrow { width: 16px; color: var(--impact-leaf); }
.impact-preview-disclaimer { border-top: 1px solid #e4e6dd; padding: 10px 16px; color: #788177; font-size: 9px; }
.impact-faq { display: grid; grid-template-columns: .7fr 1fr; gap: 12%; padding: 108px max(8.2vw, calc((100% - 1280px) / 2)); }
.impact-faq-intro h2 { margin: 17px 0 12px; color: var(--impact-forest); font-size: clamp(42px, 4.7vw, 62px); }
.impact-faq-intro > p { color: var(--impact-muted); font-size: 13px; }
.impact-faq-list { border-top: 1px solid var(--impact-line); }
.impact-faq-item { border-bottom: 1px solid var(--impact-line); }
.impact-faq-item summary { position: relative; display: flex; min-height: 65px; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 0; color: var(--impact-forest); cursor: pointer; font-family: Georgia, "Times New Roman", serif; font-size: 18px; list-style: none; }
.impact-faq-item summary::-webkit-details-marker { display: none; }
.impact-faq-plus { position: relative; width: 23px; height: 23px; flex: 0 0 auto; border: 1px solid var(--impact-line); border-radius: 50%; }
.impact-faq-plus::before, .impact-faq-plus::after { position: absolute; top: 10px; left: 6px; width: 9px; height: 1px; background: var(--impact-leaf); content: ""; transition: transform .2s ease; }
.impact-faq-plus::after { transform: rotate(90deg); }
.impact-faq-item[open] .impact-faq-plus::after { transform: rotate(0deg); }
.impact-faq-item > p { max-width: 580px; margin: -1px 35px 20px 0; color: var(--impact-muted); font-size: 12px; line-height: 1.8; }
.impact-final-cta { position: relative; display: flex; align-items: center; flex-direction: column; padding: 89px 24px 93px; background: #e6e8da; text-align: center; }
.impact-cta-flower { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border: 1px solid #c6cebd; border-radius: 50%; color: var(--impact-leaf); }
.impact-cta-flower svg { width: 20px; }
.impact-final-cta h2 { margin: 15px 0; color: var(--impact-forest); font-size: clamp(45px, 6.2vw, 75px); }
.impact-final-cta p { max-width: 475px; margin-bottom: 25px; color: #657066; font-size: 13px; line-height: 1.8; }
.impact-footer { padding: 42px max(6.2vw, calc((100% - 1440px) / 2)) 20px; background: var(--impact-forest-deep); color: var(--impact-ivory); }
.impact-footer-main { display: grid; grid-template-columns: 1fr 1.1fr auto auto; align-items: center; gap: 32px; padding-bottom: 31px; }
.impact-footer-wordmark { color: var(--impact-ivory); font-size: 21px; }
.impact-footer-wordmark .impact-logo { width: 31px; height: 31px; background: #e0e4d4; color: var(--impact-forest); }
.impact-footer-main > p { margin: 0; color: #c2cdc1; font-family: Georgia, "Times New Roman", serif; font-size: 13px; font-style: italic; }
.impact-footer-links { display: flex; gap: 19px; }
.impact-footer-links a, .impact-footer-login { color: #e1e6dc; font-size: 10px; }
.impact-footer-login { display: inline-flex; align-items: center; gap: 7px; border: 0; padding: 7px 0; background: transparent; cursor: pointer; }
.impact-footer-login svg { width: 13px; height: 13px; }
.impact-footer-bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(245,243,233,.17); padding-top: 17px; color: #b7c4b7; font-size: 9px; }
.impact-footer-bottom a { color: #e4e8df; text-decoration: underline; text-underline-offset: 3px; }
/* The staff-testing link ships with the `hidden` attribute and is revealed by
site.js only when the server publishes a separate testing host. `hidden` has
to beat the authored link styling, or the attribute would be decorative and
the link would show on the production site too. */
.impact-footer-bottom a[hidden] { display: none; }
.impact-auth-notice { position: fixed; z-index: 90; right: 22px; bottom: 22px; display: flex; max-width: min(470px, calc(100% - 32px)); align-items: flex-start; gap: 16px; border: 1px solid #d8c7a4; border-radius: 4px; padding: 16px 13px 16px 17px; background: var(--impact-paper); color: var(--impact-ink); box-shadow: 0 12px 38px rgba(20,35,27,.17); font-size: 12px; line-height: 1.6; }
.impact-auth-notice button { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 auto; margin: -5px -3px 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--impact-forest); cursor: pointer; }
.impact-auth-notice button:hover { background: #edf0e7; }
.impact-auth-notice svg { width: 15px; height: 15px; }
@media (min-width: 1441px) {
.impact-hero { padding-right: 7.4%; padding-left: 7.4%; }
}
@media (max-width: 1050px) {
.impact-header { padding-inline: 4vw; }
.impact-navigation { gap: 20px; }
.impact-header-actions { gap: 18px; }
.impact-hero { min-height: 620px; padding-inline: 5%; }
.impact-hero h1 { font-size: clamp(56px, 7.2vw, 78px); }
.impact-mission, .impact-how, .impact-organizations, .impact-app-intro, .impact-faq { padding-right: 6%; padding-left: 6%; }
.impact-footer { padding-right: 4%; padding-left: 4%; }
.impact-footer-main { grid-template-columns: 1fr 1fr; }
.impact-footer-links { justify-content: flex-end; }
}
@media (max-width: 760px) {
.impact-header { min-height: 69px; padding-inline: 20px; }
.impact-wordmark { font-size: 23px; }
.impact-logo { width: 31px; height: 31px; }
.impact-menu-toggle { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--impact-line); border-radius: 3px; background: transparent; color: var(--impact-forest); }
.impact-menu-toggle svg { width: 20px; height: 20px; }
.impact-header-actions { display: none; }
.impact-navigation { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: none; align-items: stretch; flex-direction: column; gap: 0; border-bottom: 1px solid var(--impact-line); padding: 10px 20px 18px; background: var(--impact-ivory); box-shadow: 0 14px 24px rgba(23,59,49,.08); }
.impact-navigation.is-open { display: flex; }
.impact-navigation > a { min-height: 47px; display: flex; align-items: center; border-bottom: 1px solid rgba(23,59,49,.09); font-size: 14px; }
.impact-mobile-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 16px; }
.impact-mobile-actions .impact-login-link { font-size: 14px; }
.impact-hero { display: flex; align-items: stretch; flex-direction: column; gap: 34px; padding: 53px 22px 44px; }
.impact-hero-copy { padding: 0; }
.impact-hero h1 { max-width: 600px; margin: 20px 0 16px; font-size: clamp(56px, 14.5vw, 88px); }
.impact-hero-lede { max-width: 560px; margin-bottom: 24px; font-size: 15px; }
.impact-hero-footnote { margin-top: 23px; }
.impact-hero-art { width: calc(100% - 15px); margin-left: 15px; padding-left: 0; }
.impact-photo-frame { height: min(108vw, 510px); }
.impact-stamp { top: 21px; left: -29px; width: 84px; height: 84px; }
.impact-photo-caption { left: -16px; font-size: 12px; }
.impact-hero-index { right: -12px; }
.impact-mission { padding: 28px 22px 34px; }
.impact-mission-topline { font-size: 8px; }
.impact-mission-topline span:last-child { max-width: 45%; text-align: right; }
.impact-mission-layout { grid-template-columns: 1fr; gap: 23px; padding: 44px 0 37px; }
.impact-mission h2, .impact-org-copy h2 { font-size: clamp(40px, 10.5vw, 60px); }
.impact-mission-copy p { font-size: 13px; }
.impact-connection-line { align-items: flex-start; flex-direction: column; gap: 12px; padding-top: 23px; }
.impact-connection-line > div { font-size: 14px; }
.impact-connection-line > i { width: 1px; height: 16px; margin-left: 17px; }
.impact-how { padding: 72px 22px 69px; }
.impact-section-intro { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 29px; }
.impact-section-intro h2, .impact-app-heading h2 { font-size: clamp(42px, 10.8vw, 60px); }
.impact-section-intro p { max-width: 560px; }
.impact-steps { grid-template-columns: 1fr; }
.impact-step { min-height: 0; padding: 24px 25px 25px 0; }
.impact-step + .impact-step { border-top: 1px solid var(--impact-line); border-left: 0; padding-left: 0; }
.impact-step-number { top: 27px; right: 6px; }
.impact-step h3 { margin: 18px 0 6px; font-size: 23px; }
.impact-step p { margin-bottom: 14px; }
.impact-organizations { grid-template-columns: 1fr; gap: 34px; padding: 64px 22px 70px; }
.impact-org-image { height: min(112vw, 460px); margin-right: 15px; }
.impact-image-note { right: -14px; bottom: 17px; }
.impact-org-copy { max-width: none; }
.impact-app-intro { grid-template-columns: 1fr; gap: 42px; padding: 69px 22px 65px; }
.impact-app-heading > p { max-width: none; }
.impact-app-window { margin: 0 5px; transform: none; }
.impact-app-window-content { min-height: 280px; }
.impact-feed-card-copy { padding: 11px; }
.impact-feed-meta { font-size: 8px; }
.impact-faq { grid-template-columns: 1fr; gap: 25px; padding: 74px 22px; }
.impact-faq-intro h2 { font-size: 50px; }
.impact-faq-item summary { min-height: 62px; font-size: 17px; }
.impact-final-cta { padding: 72px 22px 76px; }
.impact-final-cta h2 { font-size: clamp(44px, 11vw, 65px); }
.impact-footer { padding: 31px 22px 19px; }
.impact-footer-main { grid-template-columns: 1fr auto; gap: 19px 12px; }
.impact-footer-main > p { grid-column: 1 / -1; grid-row: 2; }
.impact-footer-links { grid-column: 1 / -1; grid-row: 3; align-items: flex-start; flex-direction: column; gap: 8px; }
.impact-footer-login { grid-column: 2; grid-row: 1; }
.impact-footer-bottom { align-items: flex-start; flex-direction: column; gap: 7px; }
}
@media (max-width: 390px) {
.impact-hero { padding-inline: 17px; }
.impact-hero-actions { align-items: flex-start; flex-direction: column; gap: 11px; }
.impact-hero-actions > .impact-button { min-width: 160px; }
.impact-app-window-bar { padding-inline: 10px; }
.impact-window-label { font-size: 7px; }
.impact-app-window-content { grid-template-columns: 38px 1fr; }
.impact-feed-title { align-items: flex-start; flex-direction: column; gap: 2px; }
.impact-feed-card { grid-template-columns: 38% 1fr; }
.impact-feed-photo { min-height: 125px; }
.impact-feed-card-copy { padding: 9px; }
.impact-feed-card-copy strong { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
.impact-site *, .impact-site *::before, .impact-site *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* ==========================================================================
2. impact-motion-system.css
========================================================================== */
.impact-site{--impact-mint:#aee5c5}.impact-hero{isolation:isolate;width:100%;max-width:none;padding-right:max(7.4%,calc((100% - 1260px)/2));padding-left:max(7.4%,calc((100% - 1260px)/2));overflow:hidden;background:#153b31;color:#f5f3e9}.impact-hero::before{position:absolute;z-index:0;inset:0;pointer-events:none;background:radial-gradient(ellipse at 74% 43%,rgba(174,229,197,.22) 0%,rgba(174,229,197,.09) 26%,transparent 54%);content:""}.impact-hero-copy,.impact-hero-art{z-index:1}.impact-kicker,.impact-hero .impact-eyebrow{color:var(--impact-mint)}.impact-hero h1{color:#f5f3e9}.impact-hero h1 em{color:var(--impact-mint)}.impact-hero-lede{color:#d4e1d6}.impact-hero-footnote{color:#c0d0c3}.impact-hero-footnote>span:first-child{border-color:rgba(244,241,229,.3);color:var(--impact-mint)}.impact-hero .impact-button-green{background:var(--impact-mint);color:#153b31!important}.impact-hero .impact-button-green:hover{background:#d0f0d9}.impact-hero .impact-text-link,.impact-hero .impact-inline-app-link{color:#f4f1e5}.impact-hero .impact-text-link{border-color:rgba(244,241,229,.48)}.impact-photo-caption,.impact-hero-index{color:#f4f1e5}.impact-hero .impact-stamp svg:first-child{animation:none}.impact-site[data-motion-ready=true] .impact-hero [data-motion-item]{animation:impact-motion-rise 400ms cubic-bezier(.2,.7,.2,1) both}.impact-site[data-motion-ready=true] .impact-hero [data-motion-item="2"]{animation-delay:80ms}.impact-site[data-motion-ready=true] .impact-hero [data-motion-item="3"]{animation-delay:160ms}.impact-site[data-motion-reveal-ready=true] [data-motion-reveal]:not([data-motion-visible=true]){opacity:0;transform:translateY(8px)}.impact-site[data-motion-reveal-ready=true] [data-motion-reveal][data-motion-visible=true]{opacity:1;transform:translateY(0);transition:opacity 280ms cubic-bezier(.2,.7,.2,1),transform 280ms cubic-bezier(.2,.7,.2,1)}@keyframes impact-motion-rise{from{opacity:1;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.impact-site[data-motion-disabled=true] [data-motion-item],.impact-site[data-motion-disabled=true] [data-motion-reveal]{animation:none!important;opacity:1!important;transform:none!important;transition:none!important}.impact-demo{--id-mint:#aee5c5;background:#153b31;color:#f5f3e9}.impact-demo-topbar{background:#153b31;border-bottom-color:rgba(245,243,233,.16)}.impact-demo-topbar .impact-demo-brand{color:#f5f3e9}.impact-demo-topbar .impact-demo-brand>span:first-child{background:#aee5c5;color:#153b31}.impact-demo-topbar .impact-demo-brand-dot{color:#aee5c5}.impact-demo-context{color:#c5d6ca}.impact-demo-context>span{background:#aee5c5;box-shadow:0 0 0 4px rgba(174,229,197,.15)}.impact-demo-context>i{background:rgba(245,243,233,.26)}.impact-demo-context a,.impact-demo-top-actions .impact-demo-login{color:#f5f3e9}.impact-demo-top-actions .impact-demo-icon-button{border-color:rgba(245,243,233,.22);background:transparent;color:#f5f3e9}.impact-demo-top-actions .impact-demo-join{background:#aee5c5;color:#153b31!important}.impact-demo-layout{background:#153b31}.impact-demo-sidebar{transition:none;border-right-color:rgba(245,243,233,.16);background:#153b31;color:#f5f3e9}.impact-demo-nav-label,.impact-demo-sidebar .impact-demo-eyebrow{color:#aee5c5}.impact-demo-nav-item{color:#d4e1d6}.impact-demo-nav-item:hover{background:rgba(174,229,197,.09)}.impact-demo-nav-item.is-active{background:rgba(174,229,197,.14);color:#c2efd1}.impact-demo-nav-item.is-active::before{background:#aee5c5}.impact-demo-nav-item small{color:#b6c9b9}.impact-demo-sidebar-rule,.impact-demo-sidebar-bottom{border-color:rgba(245,243,233,.2)}.impact-demo-sidebar-rule{background:rgba(245,243,233,.2)}.impact-demo-switcher strong{color:#f5f3e9}.impact-demo-switcher small,.impact-demo-switcher>svg{color:#c0d0c3}.impact-demo-sidebar-note{background:rgba(245,243,233,.08)}.impact-demo-sidebar-note>svg,.impact-demo-sidebar-note button{color:#aee5c5}.impact-demo-sidebar-note strong{color:#f5f3e9}.impact-demo-sidebar-note>span{color:#c0d0c3}.impact-demo-sidebar-bottom .impact-demo-tag,.impact-demo-sidebar-bottom>a{color:#d3dfd5}.impact-demo-sidebar-bottom .impact-demo-tag svg{color:#aee5c5}.impact-demo-main{color:var(--id-ink)}.impact-demo-main .impact-demo-feed>.impact-demo-tag{color:#d3dfd5}.impact-demo-main .impact-demo-feed>.impact-demo-tag svg{color:#aee5c5}.impact-demo-breadcrumb{color:#c0d0c3}.impact-demo-breadcrumb strong{color:#f5f3e9}.impact-demo-heading h1{color:#f5f3e9}.impact-demo-heading p{color:#c0d0c3}.impact-demo-disclaimer{border-color:rgba(174,229,197,.24);background:rgba(174,229,197,.1);color:#d7e4d8}.impact-demo-disclaimer>svg{color:#aee5c5}.impact-demo-disclaimer strong{color:#c2efd1}.impact-demo-feed-title{color:#f5f3e9}.impact-demo-feed-title button{color:#c2efd1}.impact-demo-footer{border-top-color:rgba(245,243,233,.2);color:#c0d0c3}.impact-demo-footer a{color:#c2efd1}.impact-demo-mobile-toggle{border-color:rgba(245,243,233,.25);background:transparent;color:#f5f3e9}.impact-demo-nav-item.is-active{position:relative;background:#edf5ee;color:#173b31}.impact-demo-nav-item.is-active::before{position:absolute;top:6px;bottom:6px;left:0;width:3px;border-radius:0 3px 3px 0;background:#77c99b;content:""}.impact-demo-account{position:relative;display:flex;align-items:center}.impact-demo-account-trigger{display:inline-flex;min-width:40px;min-height:40px;align-items:center;justify-content:center;gap:5px;border:1px solid var(--id-line);border-radius:999px;padding:3px 7px 3px 3px;background:var(--id-paper);cursor:pointer}.impact-demo-account-trigger>span:first-child{display:grid;width:31px;height:31px;place-items:center;border-radius:50%;background:#d9eedf;color:#173b31;font-size:10px;font-weight:750}.impact-demo-account-trigger>svg{width:13px;height:13px;color:#758176}.impact-demo-account-menu{position:absolute;z-index:55;top:calc(100% + 8px);right:0;width:180px;overflow:hidden;border:1px solid var(--id-line);border-radius:6px;padding:5px;background:var(--id-paper);box-shadow:0 12px 32px rgba(16,45,37,.16);animation:impact-motion-menu 160ms ease-out both}.impact-demo-account-menu button{display:flex;width:100%;min-height:40px;align-items:center;border:0;border-radius:4px;padding:0 10px;background:transparent;color:var(--id-ink);text-align:left;font-size:12px;cursor:pointer}.impact-demo-account-menu button:hover,.impact-demo-account-menu button:focus-visible{background:#eef5ee;color:var(--id-forest)}@keyframes impact-motion-menu{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.impact-demo-bottom-nav{display:none}.impact-demo-post-actions button.is-saved{color:#367c59}.impact-demo-post-actions button.is-saved svg{fill:#d9f1df;stroke:#367c59}.impact-demo-modal-backdrop{animation:impact-motion-fade 180ms ease-out both}.impact-demo-composer{color:var(--id-ink);animation:impact-motion-composer 200ms ease-out both}.impact-demo-composer .impact-demo-icon-button{color:var(--id-forest)}@keyframes impact-motion-fade{from{opacity:0}to{opacity:1}}@keyframes impact-motion-composer{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.impact-demo-toast>span.is-success{background:var(--id-mint);color:#153b31}.impact-demo-toast>span.is-success svg{stroke-width:2.5;animation:impact-motion-check 160ms ease-out both}@keyframes impact-motion-check{from{opacity:0}to{opacity:1}}.impact-demo[data-motion-disabled=true] .impact-demo-account-menu,.impact-demo[data-motion-disabled=true] .impact-demo-modal-backdrop,.impact-demo[data-motion-disabled=true] .impact-demo-composer,.impact-demo[data-motion-disabled=true] .impact-demo-toast>span.is-success svg{animation:none!important}.impact-demo[data-motion-disabled=true] .impact-demo-toast>span.is-success svg{opacity:1}@media(max-width:760px){.impact-hero{padding:53px 22px 44px}.impact-demo-bottom-nav{position:fixed;z-index:45;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));min-height:62px;padding:5px 8px calc(5px + env(safe-area-inset-bottom));border-top:1px solid var(--id-line);background:rgba(255,253,246,.97);box-shadow:0 -5px 18px rgba(23,59,49,.08)}.impact-demo-bottom-nav button{position:relative;display:flex;min-width:0;min-height:48px;align-items:center;justify-content:center;flex-direction:column;gap:3px;border:0;border-radius:5px;background:transparent;color:#748077;font-size:9px;cursor:pointer}.impact-demo-bottom-nav button svg{width:18px;height:18px}.impact-demo-bottom-nav button.is-active{color:#2c8057}.impact-demo-bottom-nav button.is-active::before{position:absolute;top:0;right:18%;left:18%;height:2px;border-radius:2px;background:#77c99b;content:""}.impact-demo-bottom-nav button.impact-demo-bottom-create{color:#173b31;font-weight:750}.impact-demo-bottom-create svg{width:20px!important;height:20px!important;border-radius:50%;padding:3px;background:#d9f1df}.impact-demo-main{padding-bottom:82px}.impact-demo-footer{padding-bottom:80px}.impact-demo-account-trigger{min-width:36px;min-height:36px}.impact-demo-account-trigger>span:first-child{width:29px;height:29px}.impact-demo-account-menu{right:-4px}}@media(max-width:560px){.impact-hero{padding:53px 17px 44px}.impact-demo-bottom-nav{min-height:60px}.impact-demo-main{padding-bottom:78px}.impact-demo-footer{padding-bottom:80px}.impact-demo-account-trigger>svg{display:none}.impact-demo-join{white-space:nowrap;gap:4px;padding-inline:7px;font-size:9px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.impact-site[data-motion-ready=true] .impact-hero [data-motion-item],.impact-site[data-motion-reveal-ready=true] [data-motion-reveal],.impact-demo-account-menu,.impact-demo-modal-backdrop,.impact-demo-composer,.impact-demo-toast>span.is-success svg{animation:none!important;opacity:1!important;transform:none!important;transition:none!important}.impact-site[data-motion-reveal-ready=true] [data-motion-reveal]:not([data-motion-visible=true]){opacity:1!important;transform:none!important}.impact-demo-sidebar,.impact-demo-bottom-nav{scroll-behavior:auto!important}}
/* ==========================================================================
3. freebuff-organization-demo.css
========================================================================== */
/* Plain CSS for the fictional organization demo; include beside the FREEBUFF page styles. */
.impact-org-demo {
--demo-forest: #173b31;
--demo-leaf: #456b4f;
--demo-ivory: #f5f3e9;
--demo-paper: #fffdf6;
--demo-ink: #202a24;
--demo-muted: #68746b;
--demo-line: #d9ddd3;
--demo-coral: #c7785e;
--demo-gold: #d4ab68;
padding: 96px max(8.2vw, calc((100% - 1280px) / 2));
background: #e9e8db;
color: var(--demo-ink);
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.impact-org-demo *, .impact-org-demo *::before, .impact-org-demo *::after { box-sizing: border-box; }
.impact-org-demo h2, .impact-org-demo h3, .impact-org-demo p { margin-top: 0; }
.impact-org-demo button { color: inherit; font: inherit; }
.impact-org-demo :focus-visible { outline: 3px solid var(--demo-coral); outline-offset: 4px; }
.impact-org-demo-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 390px); align-items: end; gap: 48px; margin-bottom: 42px; }
.impact-org-demo .impact-eyebrow { display: inline-block; color: var(--demo-leaf); font-size: 10px; font-weight: 750; letter-spacing: .15em; }
.impact-org-demo-heading h2 { margin: 17px 0 0; color: var(--demo-forest); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(42px, 5.2vw, 68px); font-weight: 400; line-height: 1.04; letter-spacing: -.06em; }
.impact-org-demo-heading h2 em { color: var(--demo-leaf); font-weight: 400; }
.impact-org-demo-heading > p { max-width: 390px; margin: 0 0 5px; color: var(--demo-muted); font-size: 13px; line-height: 1.8; }
.impact-org-demo-layout { display: grid; grid-template-columns: minmax(235px, .76fr) minmax(0, 1.45fr); align-items: start; gap: clamp(30px, 5vw, 72px); }
.impact-org-demo-tabs { display: grid; gap: 9px; }
.impact-org-demo-tab { display: grid; min-height: 78px; grid-template-columns: 32px 1fr 16px; align-items: center; gap: 12px; border: 1px solid rgba(23,59,49,.16); border-radius: 3px; padding: 14px 16px; background: transparent; color: var(--demo-forest); cursor: pointer; text-align: left; transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease; }
.impact-org-demo-tab:hover { transform: translateX(2px); border-color: rgba(23,59,49,.4); }
.impact-org-demo-tab[aria-selected='true'] { border-color: var(--demo-forest); background: var(--demo-paper); box-shadow: inset 3px 0 var(--demo-forest); }
.impact-org-demo-tab-number { color: var(--demo-leaf); font-family: Georgia, 'Times New Roman', serif; font-size: 18px; }
.impact-org-demo-tab > span:nth-child(2) { font-size: 13px; font-weight: 650; line-height: 1.35; }
.impact-org-demo-tab > svg { width: 15px; height: 15px; color: #758274; }
.impact-org-demo-data-note { display: flex; align-items: center; gap: 8px; margin: 18px 2px 0; color: var(--demo-muted); font-size: 10px; line-height: 1.5; }
.impact-org-demo-data-note svg { width: 14px; height: 14px; color: var(--demo-leaf); }
.impact-org-demo-preview-column { min-height: 560px; }
.impact-org-demo-panel { min-height: 492px; outline: none; }
.impact-org-demo-window { min-height: 492px; overflow: hidden; border: 1px solid rgba(23,59,49,.16); border-radius: 4px; background: var(--demo-paper); box-shadow: 0 18px 42px rgba(23,59,49,.08); }
.impact-org-demo-window[hidden] { display: none; }
.impact-org-demo-window[data-animated='true'] { animation: impact-org-demo-enter 180ms ease-out both; }
.impact-org-demo-window-bar { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #e4e6dd; padding: 0 18px; background: rgba(255,253,246,.92); }
.impact-org-demo-brand { display: inline-flex; align-items: center; gap: 5px; color: var(--demo-forest); font-size: 13px; font-weight: 700; letter-spacing: -.05em; }
.impact-org-demo-brand > span:last-child { color: var(--demo-coral); }
.impact-org-demo-brand-icon { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50% 50% 50% 6px; background: var(--demo-forest); color: white; }
.impact-org-demo-brand-icon svg { width: 13px; height: 13px; }
.impact-org-demo-window-label, .impact-org-demo-window-lights { color: #7e877d; font-size: 8px; font-weight: 700; letter-spacing: .11em; }
.impact-org-demo-window-lights { display: flex; gap: 4px; }
.impact-org-demo-window-lights i { width: 5px; height: 5px; border-radius: 50%; background: #bac2b7; }
.impact-org-demo-screen { min-height: 405px; background: #fffdf8; }
.impact-org-demo-screen-content { display: flex; min-height: 405px; flex-direction: column; padding: 25px 30px 21px; }
.impact-org-demo-cover { display: flex; min-height: 93px; align-items: center; gap: 14px; padding: 18px 30px; background: var(--demo-forest); color: #d7e3d9; font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.impact-org-demo-cover-mark { display: grid; width: 52px; height: 52px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(245,243,233,.34); border-radius: 50% 50% 50% 14px; color: #cce7d3; }
.impact-org-demo-cover-mark svg { width: 25px; height: 25px; }
.impact-org-demo-profile .impact-org-demo-screen-content { min-height: 312px; padding-top: 21px; }
.impact-org-demo-screen-eyebrow { color: var(--demo-leaf); font-size: 8px; font-weight: 750; letter-spacing: .12em; line-height: 1.5; }
.impact-org-demo-screen h3 { margin: 8px 0 8px; color: var(--demo-forest); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(21px, 2.3vw, 29px); font-weight: 400; line-height: 1.14; letter-spacing: -.04em; }
.impact-org-demo-description { max-width: 560px; margin: 0 0 17px; color: var(--demo-muted); font-size: 11px; line-height: 1.65; }
.impact-org-demo-stat-row { display: flex; flex-wrap: wrap; gap: 24px; border-top: 1px solid #e5e7de; padding-top: 15px; color: var(--demo-muted); font-size: 9px; }
.impact-org-demo-stat-row span { display: flex; align-items: baseline; gap: 5px; }
.impact-org-demo-stat-row strong { color: var(--demo-forest); font-family: Georgia, 'Times New Roman', serif; font-size: 18px; font-weight: 400; }
.impact-org-demo-action-row { display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 13px; }
.impact-org-demo-action { display: inline-flex; min-height: 39px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--demo-forest); border-radius: 3px; padding: 0 14px; background: var(--demo-forest); color: var(--demo-paper) !important; cursor: pointer; font-size: 10px; font-weight: 650; transition: background-color 180ms ease, transform 180ms ease; }
.impact-org-demo-action:hover { transform: translateY(-1px); background: #102d25; }
.impact-org-demo-action svg { width: 14px; height: 14px; }
.impact-org-demo-action-status { min-height: 1.4em; color: var(--demo-leaf); font-size: 9px; line-height: 1.4; text-align: right; }
.impact-org-demo-window-footer { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #e4e6dd; padding: 0 18px; color: #788177; font-size: 8px; font-weight: 650; letter-spacing: .09em; }
.impact-org-demo-opportunity-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.impact-org-demo-draft-label { display: inline-flex; align-items: center; gap: 6px; color: #8c6940; font-size: 8px; font-weight: 750; letter-spacing: .1em; }
.impact-org-demo-draft-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--demo-gold); }
.impact-org-demo-opportunity-title-row h3 { margin-top: 8px; }
.impact-org-demo-opportunity-mark { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #e7eade; color: var(--demo-leaf); }
.impact-org-demo-opportunity-mark svg { width: 19px; height: 19px; }
.impact-org-demo-details { display: grid; gap: 10px; border-top: 1px solid #e5e7de; padding: 14px 0; color: var(--demo-forest); font-size: 10px; }
.impact-org-demo-details span { display: flex; align-items: center; gap: 9px; }
.impact-org-demo-details svg { width: 14px; height: 14px; color: var(--demo-leaf); }
.impact-org-demo-role-note { margin-top: 1px; border-left: 2px solid var(--demo-gold); padding: 3px 0 3px 12px; }
.impact-org-demo-role-note > span { color: #8c6940; font-size: 8px; font-weight: 750; letter-spacing: .1em; }
.impact-org-demo-role-note p { margin: 4px 0 0; color: var(--demo-muted); font-size: 10px; line-height: 1.5; }
.impact-org-demo-signups-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.impact-org-demo-signups-heading h3 { margin-bottom: 4px; }
.impact-org-demo-signups-heading p { margin: 0; color: var(--demo-muted); font-size: 9px; }
.impact-org-demo-signup-count { border-radius: 20px; padding: 5px 9px; background: #e7eade; color: var(--demo-leaf); font-size: 8px; font-weight: 700; white-space: nowrap; }
.impact-org-demo-signup-list { display: grid; gap: 0; margin: 13px 0 0; padding: 0; list-style: none; }
.impact-org-demo-signup-list li { display: grid; min-height: 54px; grid-template-columns: 31px 1fr auto; align-items: center; gap: 10px; border-top: 1px solid #e7e9e0; }
.impact-org-demo-avatar { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: #dce6d6; color: var(--demo-forest); font-size: 8px; font-weight: 700; }
.impact-org-demo-avatar-gold { background: #f0e4ca; color: #82603c; }
.impact-org-demo-avatar-coral { background: #f1dfd8; color: #925b48; }
.impact-org-demo-signup-list li > span:nth-child(2) { display: grid; gap: 2px; }
.impact-org-demo-signup-list strong { color: var(--demo-forest); font-size: 9px; font-weight: 650; }
.impact-org-demo-signup-list small { color: var(--demo-muted); font-size: 8px; }
.impact-org-demo-signup-status { color: var(--demo-leaf); font-size: 8px; font-weight: 700; }
.impact-org-demo-benefit { min-height: 52px; margin: 14px 0 0; border-left: 2px solid var(--demo-coral); padding: 3px 0 3px 14px; color: #536057; font-family: Georgia, 'Times New Roman', serif; font-size: 13px; line-height: 1.6; }
@keyframes impact-org-demo-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1050px) {
.impact-org-demo { padding-right: 6%; padding-left: 6%; }
.impact-org-demo-layout { grid-template-columns: minmax(210px, .8fr) minmax(0, 1.4fr); gap: 28px; }
.impact-org-demo-tab { padding-right: 12px; padding-left: 12px; }
.impact-org-demo-screen-content { padding-right: 22px; padding-left: 22px; }
}
@media (max-width: 760px) {
.impact-org-demo { padding: 72px 22px; }
.impact-org-demo-heading { grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; }
.impact-org-demo-heading h2 { font-size: clamp(42px, 10.8vw, 60px); }
.impact-org-demo-heading > p { max-width: 560px; }
.impact-org-demo-layout { grid-template-columns: 1fr; gap: 24px; }
.impact-org-demo-tabs { grid-template-columns: 1fr; gap: 7px; }
.impact-org-demo-tab { min-height: 58px; grid-template-columns: 31px 1fr 16px; padding: 11px 13px; }
.impact-org-demo-tab > span:nth-child(2) { font-size: 12px; }
.impact-org-demo-data-note { margin-top: 12px; }
.impact-org-demo-preview-column { min-height: 580px; }
.impact-org-demo-panel, .impact-org-demo-window { min-height: 0; }
.impact-org-demo-screen, .impact-org-demo-screen-content { min-height: 410px; }
.impact-org-demo-cover { padding-right: 20px; padding-left: 20px; }
.impact-org-demo-window-footer { font-size: 7px; }
.impact-org-demo-benefit { min-height: 0; font-size: 12px; }
}
@media (max-width: 390px) {
.impact-org-demo { padding-right: 17px; padding-left: 17px; }
.impact-org-demo-window-bar { padding-right: 11px; padding-left: 11px; }
.impact-org-demo-window-label { font-size: 7px; }
.impact-org-demo-window-footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 2px; padding: 7px 12px; }
.impact-org-demo-screen-content { padding-right: 16px; padding-left: 16px; }
.impact-org-demo-screen h3 { font-size: 22px; }
.impact-org-demo-stat-row { gap: 12px; }
.impact-org-demo-action-row { align-items: flex-start; flex-direction: column; }
.impact-org-demo-action-status { text-align: left; }
.impact-org-demo-signup-list li { grid-template-columns: 29px 1fr auto; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
.impact-org-demo-window[data-animated='true'], .impact-org-demo-tab, .impact-org-demo-action { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}
/* ==========================================================================
4. impact-visual-refresh.css
========================================================================== */
.impact-site {
--impact-forest: #176344;
--impact-forest-deep: #17251f;
--impact-leaf: #176344;
--impact-moss: #b9f3d2;
--impact-ivory: #f7f8f2;
--impact-paper: #ffffff;
--impact-ink: #17251f;
--impact-muted: #59685f;
--impact-line: #dce5dd;
--impact-coral: #176344;
--impact-gold: #b9f3d2;
background: var(--impact-ivory);
color: var(--impact-ink);
}
.impact-site :focus-visible,
.impact-org-demo :focus-visible {
outline-color: #176344;
}
.impact-site .impact-header {
min-height: 76px;
border-bottom-color: var(--impact-line);
background: rgba(247, 248, 242, .98);
backdrop-filter: none;
}
.impact-site .impact-navigation > a,
.impact-site .impact-login-link,
.impact-site .impact-footer-links a {
color: var(--impact-ink);
}
.impact-site .impact-navigation > a:hover,
.impact-site .impact-login-link:hover {
color: var(--impact-forest);
}
.impact-site .impact-header .impact-wordmark {
color: #173b31;
}
.impact-site .impact-logo {
background: #173b31;
color: #f5f3e9;
}
.impact-site .impact-wordmark-period {
color: #c7785e;
}
.impact-site .impact-button {
min-height: 48px;
border-radius: 9px;
padding-inline: 19px;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.impact-site .impact-button:hover {
transform: translateY(-1px);
}
.impact-site .impact-button:active {
transform: translateY(0) scale(.985);
}
.impact-site .impact-button-dark,
.impact-site .impact-button-green {
background: #176344;
color: #ffffff !important;
}
.impact-site .impact-button-dark:hover,
.impact-site .impact-button-green:hover {
background: #124f36;
}
.impact-site .impact-hero .impact-button-green {
background: #176344;
color: #ffffff !important;
}
.impact-site .impact-hero .impact-button-green:hover {
background: #124f36;
}
.impact-site .impact-button-outline {
border-color: #176344;
background: #ffffff;
color: #176344 !important;
}
.impact-site .impact-button-outline:hover {
background: #eff8f1;
color: #124f36 !important;
}
.impact-site .impact-hero {
width: min(1360px, 100%);
min-height: 660px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(40px, 6vw, 90px);
padding: 72px max(6.4vw, calc((100% - 1280px) / 2)) 80px;
overflow: visible;
background: #f7f8f2;
color: #17251f;
}
.impact-site .impact-hero::before {
display: none;
}
.impact-site .impact-hero-copy,
.impact-site .impact-hero-art {
z-index: 1;
}
.impact-site .impact-kicker,
.impact-site .impact-hero .impact-eyebrow {
color: #176344;
}
.impact-site .impact-hero h1 {
max-width: 620px;
margin-block: 21px 20px;
color: #17251f;
/* Sized so the second line ("Find your people.") stays on ONE line as the
emerald italic, at the reviewed desktop widths. */
font-size: clamp(54px, 5.7vw, 78px);
line-height: 1.02;
letter-spacing: -.07em;
}
.impact-site .impact-hero h1 em {
color: #176344;
}
.impact-site .impact-hero-lede {
max-width: 510px;
color: #59685f;
font-size: clamp(15px, 1.3vw, 18px);
line-height: 1.7;
}
.impact-site .impact-hero-actions {
flex-wrap: wrap;
gap: 12px;
}
.impact-site .impact-hero-actions .impact-button {
min-height: 52px;
padding-inline: 21px;
}
.impact-site .impact-hero-footnote {
margin-top: 28px;
color: #59685f;
font-size: 11px;
letter-spacing: 0;
}
.impact-site .impact-hero-footnote > span:first-child {
border-color: #dce5dd;
color: #176344;
}
.impact-site .impact-hero-art {
width: 100%;
min-width: 0;
padding: 0;
}
.impact-product-window {
overflow: hidden;
border: 1px solid #dce5dd;
border-radius: 18px;
background: #ffffff;
box-shadow: 0 24px 56px rgba(23, 37, 31, .1), 0 2px 8px rgba(23, 37, 31, .04);
color: #17251f;
}
.impact-product-window-bar {
display: flex;
min-height: 55px;
align-items: center;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid #e5ebe5;
padding: 0 20px;
background: #ffffff;
}
.impact-product-preview-label,
.impact-product-sample-tag {
color: #176344;
font-size: 8px;
font-weight: 750;
letter-spacing: .1em;
}
.impact-product-preview-label {
border-radius: 999px;
padding: 7px 9px;
background: #e8f8ee;
}
.impact-product-post {
padding: 20px 22px 15px;
}
.impact-product-author {
display: flex;
align-items: center;
gap: 10px;
}
.impact-product-author > span:nth-child(2) {
display: grid;
min-width: 0;
flex: 1;
gap: 2px;
}
.impact-product-author strong {
color: #17251f;
font-size: 12px;
font-weight: 700;
}
.impact-product-author small {
color: #59685f;
font-size: 10px;
}
.impact-product-avatar {
display: grid;
width: 38px;
height: 38px;
flex: 0 0 auto;
place-items: center;
border-radius: 50%;
background: #b9f3d2;
color: #176344;
font-size: 10px;
font-weight: 750;
}
.impact-product-post h2 {
margin: 17px 0 7px;
color: #17251f;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(19px, 2vw, 25px);
line-height: 1.2;
letter-spacing: -.035em;
}
.impact-product-post > p {
max-width: 590px;
margin-bottom: 14px;
color: #59685f;
font-size: 11px;
line-height: 1.65;
}
.impact-product-photo {
position: relative;
height: clamp(145px, 17vw, 210px);
overflow: hidden;
border-radius: 10px;
background: #e7efe6;
}
.impact-product-photo .impact-photo {
object-fit: cover;
object-position: center 48%;
}
.impact-product-photo > span {
position: absolute;
right: 10px;
bottom: 10px;
border-radius: 5px;
padding: 6px 8px;
background: #17251f;
color: #ffffff;
font-size: 8px;
font-weight: 700;
letter-spacing: .07em;
}
.impact-product-post-actions {
display: flex;
justify-content: space-between;
gap: 12px;
padding-top: 12px;
color: #59685f;
font-size: 9px;
}
.impact-product-opportunity {
display: flex;
align-items: center;
gap: 12px;
margin: 0 16px 14px;
border: 1px solid #dce5dd;
border-radius: 12px;
padding: 13px;
background: #f7f8f2;
}
.impact-product-opportunity-icon,
.impact-site .impact-step-icon {
display: grid;
width: 42px;
height: 42px;
flex: 0 0 auto;
place-items: center;
border-radius: 11px;
background: #b9f3d2;
color: #176344;
}
.impact-product-opportunity-icon svg {
width: 19px;
height: 19px;
}
.impact-product-opportunity-copy {
min-width: 0;
flex: 1;
}
.impact-product-opportunity-label {
display: flex;
flex-wrap: wrap;
gap: 8px;
color: #176344;
font-size: 8px;
font-weight: 750;
letter-spacing: .08em;
}
.impact-product-opportunity-label > span + span {
color: #59685f;
}
.impact-product-opportunity h3 {
margin: 4px 0 5px;
color: #17251f;
font-family: Georgia, "Times New Roman", serif;
font-size: 16px;
font-weight: 400;
line-height: 1.2;
}
.impact-product-opportunity-copy p {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
margin: 0;
color: #59685f;
font-size: 9px;
}
.impact-product-opportunity-copy p svg {
width: 12px;
height: 12px;
color: #176344;
}
.impact-product-opportunity-link {
display: grid;
width: 34px;
height: 34px;
flex: 0 0 auto;
place-items: center;
border-radius: 50%;
background: #ffffff;
color: #176344;
}
.impact-product-opportunity-link svg {
width: 16px;
height: 16px;
}
.impact-product-window-footer {
border-top: 1px solid #e5ebe5;
padding: 10px 20px;
color: #59685f;
font-size: 9px;
}
.impact-site .impact-mission {
padding: 34px max(8.2vw, calc((100% - 1280px) / 2)) 55px;
background: #ffffff;
color: #17251f;
}
.impact-site .impact-mission-topline {
border-bottom-color: #dce5dd;
color: #59685f;
}
.impact-site .impact-mission h2,
.impact-site .impact-section-intro h2,
.impact-site .impact-org-copy h2,
.impact-site .impact-faq-intro h2 {
color: #17251f;
}
.impact-site .impact-mission h2 em,
.impact-site .impact-section-intro h2 em,
.impact-site .impact-org-copy h2 em,
.impact-site .impact-faq-intro h2 em {
color: #176344;
}
.impact-site .impact-mission-copy p,
.impact-site .impact-section-intro p,
.impact-site .impact-org-copy > p,
.impact-site .impact-faq-intro > p {
color: #59685f;
}
.impact-site .impact-light-link {
color: #176344;
}
.impact-site .impact-connection-line {
border-top-color: #dce5dd;
}
.impact-site .impact-connection-line > div {
color: #17251f;
}
.impact-site .impact-line-icon {
border-color: #dce5dd;
background: #f7f8f2;
color: #176344;
}
.impact-site .impact-connection-line > i {
background: #cbd8ce;
}
.impact-site .impact-how {
background: #f7f8f2;
}
.impact-site .impact-step {
min-height: 265px;
}
.impact-site .impact-step + .impact-step {
border-left-color: #dce5dd;
}
.impact-site .impact-step-icon {
border-radius: 12px;
}
.impact-site .impact-step h3 {
color: #17251f;
}
.impact-site .impact-step p {
color: #59685f;
}
.impact-site .impact-step-tag,
.impact-site .impact-step-number {
color: #176344;
}
.impact-audiences {
padding: 100px max(7.5vw, calc((100% - 1280px) / 2));
background: #ffffff;
}
.impact-audiences-heading {
max-width: 690px;
margin-bottom: 42px;
}
.impact-audiences-heading h2 {
margin: 16px 0 12px;
color: #17251f;
font-size: clamp(42px, 5vw, 64px);
line-height: 1.04;
letter-spacing: -.06em;
}
.impact-audiences-heading h2 em {
color: #176344;
font-weight: 400;
}
.impact-audiences-heading p {
max-width: 520px;
margin: 0;
color: #59685f;
font-size: 14px;
line-height: 1.75;
}
.impact-audiences-layout {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(290px, .85fr);
grid-template-rows: repeat(2, minmax(220px, auto));
gap: 16px;
}
.impact-audience-card {
min-width: 0;
overflow: hidden;
border: 1px solid #dce5dd;
border-radius: 16px;
background: #ffffff;
}
.impact-audience-organization {
display: grid;
grid-row: span 2;
grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
}
.impact-audience-image {
position: relative;
min-height: 100%;
background: #e8f0e8;
}
.impact-audience-image .impact-photo {
object-fit: cover;
object-position: 52% center;
}
.impact-audience-image-label {
position: absolute;
right: 12px;
bottom: 12px;
left: 12px;
display: flex;
align-items: center;
gap: 7px;
border-radius: 8px;
padding: 9px 10px;
background: #17251f;
color: #ffffff;
font-size: 8px;
font-weight: 700;
letter-spacing: .08em;
}
.impact-audience-image-label svg {
width: 14px;
height: 14px;
color: #b9f3d2;
}
.impact-audience-copy {
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: center;
padding: clamp(22px, 3vw, 38px);
}
.impact-audience-kicker {
color: #176344;
font-size: 9px;
font-weight: 750;
letter-spacing: .13em;
}
.impact-audience-copy h3,
.impact-audience-company h3,
.impact-audience-school h3 {
margin: 12px 0 10px;
color: #17251f;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(22px, 2.3vw, 30px);
font-weight: 400;
line-height: 1.18;
letter-spacing: -.03em;
}
.impact-audience-copy p,
.impact-audience-company p,
.impact-audience-school p {
margin: 0 0 12px;
color: #59685f;
font-size: 12px;
line-height: 1.7;
}
.impact-audience-checks {
display: grid;
gap: 10px;
margin: 10px 0 20px;
padding: 0;
list-style: none;
}
.impact-audience-checks li {
display: flex;
align-items: flex-start;
gap: 8px;
color: #17251f;
font-size: 11px;
line-height: 1.5;
}
.impact-audience-checks svg {
width: 15px;
height: 15px;
flex: 0 0 auto;
color: #176344;
}
.impact-audience-company,
.impact-audience-school {
display: grid;
align-content: center;
justify-items: start;
padding: clamp(22px, 3vw, 34px);
}
.impact-audience-company {
background: #e8f8ee;
}
.impact-audience-icon {
display: grid;
width: 42px;
height: 42px;
margin-bottom: 18px;
place-items: center;
border-radius: 12px;
background: #b9f3d2;
color: #176344;
}
.impact-audience-icon svg {
width: 20px;
height: 20px;
}
.impact-audience-company h3,
.impact-audience-school h3 {
max-width: 370px;
font-size: clamp(22px, 2.15vw, 28px);
}
.impact-audience-company a,
.impact-audience-school a {
display: inline-flex;
min-height: 40px;
align-items: center;
gap: 8px;
margin-top: 4px;
color: #176344;
font-size: 11px;
font-weight: 700;
}
.impact-audience-company a svg,
.impact-audience-school a svg {
width: 15px;
height: 15px;
}
.impact-site .impact-app-intro {
background: #17251f;
color: #f7f8f2;
}
.impact-site .impact-app-heading .impact-eyebrow {
color: #b9f3d2;
}
.impact-site .impact-app-heading h2 {
color: #ffffff;
}
.impact-site .impact-app-heading h2 em {
color: #b9f3d2;
}
.impact-site .impact-app-heading > p {
color: #d4ded7;
}
.impact-site .impact-button-light {
background: #ffffff;
color: #176344 !important;
}
.impact-site .impact-button-light:hover {
background: #e8f8ee;
}
.impact-site .impact-app-window {
border-color: #dce5dd;
border-radius: 16px;
background: #ffffff;
box-shadow: 0 22px 55px rgba(0, 0, 0, .2);
transform: none;
}
.impact-site .impact-app-window-bar,
.impact-site .impact-preview-disclaimer {
background: #ffffff;
}
.impact-site .impact-mini-mark {
background: #173b31;
color: #f5f3e9;
}
.impact-site .impact-mini-brand > span:last-child {
color: #c7785e;
}
.impact-site .impact-feed-card {
border-color: #dce5dd;
border-radius: 10px;
}
.impact-site .impact-feed-card-secondary {
border-radius: 10px;
}
.impact-site .impact-faq {
background: #f7f8f2;
}
.impact-site .impact-faq-list,
.impact-site .impact-faq-item {
border-color: #dce5dd;
}
.impact-site .impact-faq-item summary {
color: #17251f;
}
.impact-site .impact-faq-item > p {
color: #59685f;
}
.impact-site .impact-final-cta {
background: #e8f8ee;
}
.impact-site .impact-final-cta h2 {
color: #17251f;
}
.impact-site .impact-final-cta h2 em {
color: #176344;
}
.impact-site .impact-final-cta p {
color: #59685f;
}
.impact-site .impact-cta-flower {
border-color: #b9d7c4;
color: #176344;
}
.impact-site .impact-footer {
background: #17251f;
color: #f7f8f2;
}
.impact-site .impact-footer-wordmark .impact-logo {
background: #173b31;
color: #f5f3e9;
}
.impact-site .impact-footer-wordmark .impact-wordmark-period {
color: #c7785e;
}
.impact-site .impact-footer-main > p,
.impact-site .impact-footer-links a,
.impact-site .impact-footer-login,
.impact-site .impact-footer-bottom {
color: #d4ded7;
}
.impact-site .impact-footer-bottom {
border-top-color: rgba(247, 248, 242, .2);
}
.impact-org-demo {
--demo-forest: #176344;
--demo-leaf: #176344;
--demo-ivory: #f7f8f2;
--demo-paper: #ffffff;
--demo-ink: #17251f;
--demo-muted: #59685f;
--demo-line: #dce5dd;
--demo-coral: #176344;
--demo-gold: #b9f3d2;
background: #eff5ef;
color: #17251f;
}
.impact-org-demo-heading h2,
.impact-org-demo-screen h3 {
color: #17251f;
}
.impact-org-demo-tab,
.impact-org-demo-window {
border-radius: 12px;
}
.impact-org-demo-tab {
min-height: 74px;
border-color: #d3e1d6;
transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.impact-org-demo-tab:hover {
border-color: #176344;
box-shadow: 0 4px 12px rgba(23, 37, 31, .06);
}
.impact-org-demo-tab[aria-selected='true'] {
border-color: #176344;
background: #ffffff;
box-shadow: inset 3px 0 #176344, 0 6px 18px rgba(23, 37, 31, .05);
}
.impact-org-demo-window {
border-color: #dce5dd;
box-shadow: 0 16px 38px rgba(23, 37, 31, .08);
}
.impact-org-demo-cover {
background: #b9f3d2;
color: #17251f;
}
.impact-org-demo-cover-mark {
border-color: rgba(23, 37, 31, .24);
color: #176344;
}
.impact-org-demo-brand-icon {
background: #176344;
color: #ffffff;
}
.impact-org-demo-brand > span:last-child {
color: #c7785e;
}
.impact-org-demo-action {
min-height: 42px;
border-radius: 8px;
background: #176344;
color: #ffffff !important;
}
.impact-org-demo-action:hover {
background: #124f36;
}
.impact-org-demo-signup-count {
border-radius: 8px;
background: #e8f8ee;
color: #176344;
}
.impact-demo button:focus-visible,
.impact-demo a:focus-visible,
.impact-demo input:focus-visible,
.impact-demo textarea:focus-visible {
outline: 3px solid #176344;
outline-offset: 3px;
}
.impact-demo {
--id-forest: #176344;
--id-dark: #17251f;
--id-leaf: #176344;
--id-paper: #ffffff;
--id-ivory: #f7f8f2;
--id-ink: #17251f;
--id-muted: #59685f;
--id-line: #dce5dd;
--id-mint: #b9f3d2;
min-height: 100vh;
overflow-x: clip;
background: #f7f8f2;
color: #17251f;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.impact-demo-topbar {
height: 72px;
border-bottom-color: #dce5dd;
background: #ffffff;
}
.impact-demo-topbar-inner {
max-width: 1600px;
padding-inline: clamp(18px, 3vw, 44px);
}
.impact-demo .impact-demo-topbar .impact-demo-brand {
color: #17251f;
}
.impact-demo .impact-demo-topbar .impact-demo-brand > span:first-child {
background: #173b31;
color: #f5f3e9;
}
.impact-demo .impact-demo-topbar .impact-demo-brand-dot {
color: #c7785e;
}
.impact-demo-context {
color: #59685f;
}
.impact-demo-context > span {
background: #176344;
box-shadow: 0 0 0 4px #e8f8ee;
}
.impact-demo-context > i {
background: #dce5dd;
}
.impact-demo-context a {
color: #176344;
}
.impact-demo-icon-button {
min-width: 42px;
min-height: 42px;
border-color: #dce5dd;
border-radius: 11px;
background: #ffffff;
color: #17251f;
transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.impact-demo .impact-demo-top-actions .impact-demo-icon-button {
border-color: #dce5dd;
background: #ffffff;
color: #17251f;
}
.impact-demo .impact-demo-top-actions .impact-demo-icon-button:hover {
border-color: #b8d7c2;
background: #f3faf5;
}
.impact-demo .impact-demo-top-actions .impact-demo-login {
color: #17251f;
}
.impact-demo-join,
.impact-demo-primary {
min-height: 44px;
border: 1px solid #176344;
border-radius: 9px;
background: #176344;
color: #ffffff !important;
transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.impact-demo-join {
padding-inline: 16px;
}
.impact-demo-join-short {
display: none;
}
.impact-demo .impact-demo-top-actions .impact-demo-join {
background: #176344;
color: #ffffff !important;
}
.impact-demo .impact-demo-top-actions .impact-demo-join:hover {
background: #124f36;
}
.impact-demo-primary:hover,
.impact-demo-join:hover {
background: #124f36;
box-shadow: 0 5px 14px rgba(23, 99, 68, .16);
transform: translateY(-1px);
}
.impact-demo-primary:active,
.impact-demo-join:active {
transform: translateY(0) scale(.985);
}
.impact-demo-layout {
min-height: calc(100vh - 72px);
background: #f7f8f2;
}
.impact-demo-sidebar {
top: 72px;
height: calc(100vh - 72px);
border-right-color: #dce5dd;
background: #ffffff;
color: #17251f;
transition: transform 200ms ease;
}
.impact-demo-nav-label,
.impact-demo-eyebrow {
color: #59685f;
}
.impact-demo-nav-item {
min-height: 44px;
border-radius: 9px;
color: #59685f;
transition: background-color 140ms ease, color 140ms ease;
}
.impact-demo-nav-item:hover {
background: #f3f8f4;
color: #17251f;
}
.impact-demo-nav-item.is-active,
.impact-demo-nav-item.is-active::before {
color: #176344;
}
.impact-demo-nav-item.is-active {
background: #e8f8ee;
}
.impact-demo-nav-item.is-active::before {
background: #176344;
}
.impact-demo-sidebar-rule,
.impact-demo-sidebar-bottom {
border-color: #dce5dd;
}
.impact-demo-sidebar-rule {
background: #dce5dd;
}
.impact-demo-switcher strong,
.impact-demo-switcher > svg {
color: #17251f;
}
.impact-demo-switcher small,
.impact-demo-sidebar-note > span,
.impact-demo-sidebar-bottom > a {
color: #59685f;
}
.impact-demo-sidebar-note {
border: 1px solid #dce5dd;
border-radius: 12px;
background: #f7f8f2;
}
.impact-demo-sidebar-note > svg,
.impact-demo-sidebar-note button {
color: #176344;
}
.impact-demo-sidebar-note strong {
color: #17251f;
}
.impact-demo-main {
min-width: 0;
background: #f7f8f2;
color: #17251f;
padding: 29px clamp(24px, 4vw, 62px) 0;
}
.impact-demo-breadcrumb {
color: #59685f;
}
.impact-demo-breadcrumb strong {
color: #17251f;
}
.impact-demo-heading {
align-items: center;
margin: 27px 0 21px;
}
.impact-demo-heading h1 {
color: #17251f;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(34px, 3.4vw, 46px);
letter-spacing: -.055em;
}
.impact-demo-heading p {
color: #59685f;
font-size: 13px;
}
.impact-demo-disclaimer {
border-color: #cfe5d5;
border-radius: 10px;
background: #eaf7ee;
color: #405a49;
}
.impact-demo-disclaimer > svg {
color: #176344;
}
.impact-demo-disclaimer strong {
color: #17251f;
}
.impact-demo-home-grid {
grid-template-columns: minmax(0, 1.6fr) minmax(250px, .8fr);
gap: 20px;
margin-top: 24px;
}
.impact-demo-compose-prompt,
.impact-demo-post,
.impact-demo-side-card,
.impact-demo-group-card,
.impact-demo-profile-card,
.impact-demo-dashboard-summary,
.impact-demo-dashboard-nav,
.impact-demo-dashboard-workspace {
border-color: #dce5dd;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 4px 14px rgba(23, 37, 31, .035);
}
.impact-demo-compose-prompt {
min-height: 68px;
gap: 12px;
padding: 13px;
}
.impact-demo-compose-prompt > button:nth-child(2) {
min-height: 42px;
border-color: #dce5dd;
border-radius: 9px;
background: #f7f8f2;
color: #59685f;
}
.impact-demo-compose-prompt > button:nth-child(2):hover {
border-color: #a9cdb5;
background: #f2faf4;
}
.impact-demo-compose-action {
min-height: 42px;
border-radius: 8px;
color: #176344;
}
.impact-demo-feed-title {
color: #17251f;
padding-top: 21px;
}
.impact-demo-feed-title button {
color: #176344;
}
.impact-demo-post {
margin-bottom: 16px;
padding: 18px;
}
.impact-demo-post-head strong {
color: #17251f;
font-size: 13px;
}
.impact-demo-post-head small {
color: #59685f;
font-size: 10px;
}
.impact-demo-post-copy {
margin-block: 16px 14px;
color: #34463b;
font-size: 13px;
line-height: 1.7;
}
.impact-demo-post-image {
height: clamp(220px, 27vw, 340px);
border-radius: 10px;
}
.impact-demo-post-image > span {
border-radius: 5px;
background: #17251f;
color: #ffffff;
}
.impact-demo-post-count {
border-bottom-color: #e8eee9;
color: #59685f;
font-size: 10px;
}
.impact-demo-post-count > span:first-child svg {
color: #176344;
}
.impact-demo-post-actions {
gap: 6px;
}
.impact-demo-post-actions button {
min-height: 40px;
border-radius: 8px;
padding-inline: 8px;
color: #59685f;
transition: background-color 140ms ease, color 140ms ease;
}
.impact-demo-post-actions button:hover {
background: #f2faf4;
color: #176344;
}
.impact-demo-post-actions button.is-liked,
.impact-demo-post-actions button.is-saved {
color: #176344;
}
.impact-demo-right-rail {
gap: 14px;
}
.impact-demo-side-card {
padding: 17px;
}
.impact-demo-side-heading h2,
.impact-demo-group-heading h2,
.impact-demo-event-content h2,
.impact-demo-profile-heading h2,
.impact-demo-dashboard-org h2,
.impact-demo-workspace-heading h2 {
color: #17251f;
}
.impact-demo-side-heading > button,
.impact-demo-event-link,
.impact-demo-suggested-group {
color: #17251f;
}
.impact-demo-event-link,
.impact-demo-suggested-group {
min-height: 56px;
border-top-color: #e8eee9;
}
.impact-demo-event-icon,
.impact-demo-manage-icon {
border-radius: 9px;
background: #e8f8ee;
color: #176344;
}
.impact-demo-values-card {
border: 1px solid #dce5dd;
border-radius: 14px;
background: #e8f8ee;
color: #17251f;
}
.impact-demo-values-card > svg {
color: #176344;
}
.impact-demo-values-card p {
color: #17251f;
}
.impact-demo-values-card > span {
color: #59685f;
}
.impact-demo-footer {
border-top-color: #dce5dd;
color: #59685f;
}
.impact-demo-footer a {
color: #176344;
}
.impact-demo-account-trigger {
min-height: 42px;
border-color: #dce5dd;
border-radius: 12px;
}
.impact-demo-account-trigger > span:first-child {
background: #b9f3d2;
color: #176344;
}
.impact-demo-account-menu {
border-color: #dce5dd;
border-radius: 12px;
box-shadow: 0 14px 34px rgba(23, 37, 31, .13);
}
.impact-demo-account-menu button {
border-radius: 8px;
}
.impact-demo-account-menu button:hover,
.impact-demo-account-menu button:focus-visible {
background: #e8f8ee;
color: #176344;
}
.impact-demo-group-card,
.impact-demo-event-card {
overflow: hidden;
border-radius: 14px;
}
.impact-demo-group-banner.sage,
.impact-demo-event-art.sage {
background: #e8f8ee;
color: #176344;
}
.impact-demo-group-banner.sand,
.impact-demo-event-art.sand {
background: #f3f2e9;
color: #59685f;
}
.impact-demo-group-banner.coral,
.impact-demo-event-art.coral {
background: #e8f8ee;
color: #176344;
}
.impact-demo-group-footer button {
min-height: 36px;
color: #176344;
}
.impact-demo-profile {
max-width: 860px;
}
.impact-demo-profile-cover {
height: 176px;
border-radius: 15px 15px 0 0;
background: #b9f3d2;
}
.impact-demo-profile-cover span {
border-radius: 6px;
padding: 8px 10px;
background: #ffffff;
color: #176344;
}
.impact-demo-profile-card {
border-radius: 0 0 15px 15px;
padding-inline: clamp(18px, 4vw, 34px);
}
.impact-demo-profile-avatar {
background: #176344;
color: #ffffff;
}
.impact-demo-profile-heading {
align-items: center;
gap: 16px;
}
.impact-demo-profile-heading h2 {
color: #17251f;
}
.impact-demo-profile-heading > div > span,
.impact-demo-profile-card > p,
.impact-demo-profile-stats span {
color: #59685f;
}
.impact-demo-profile-stats {
border-color: #dce5dd;
}
.impact-demo-profile-stats strong {
color: #176344;
}
.impact-demo-profile-note {
border: 1px solid #dce5dd;
border-radius: 10px;
background: #eaf7ee;
color: #405a49;
}
.impact-demo-dashboard-summary {
padding: 20px;
}
.impact-demo-dashboard-org h2 {
font-size: 22px;
}
.impact-demo-draft-pill {
border-radius: 7px;
background: #e8f8ee;
color: #176344;
}
.impact-demo-metrics {
border-top-color: #dce5dd;
}
.impact-demo-metrics span,
.impact-demo-metrics small {
color: #59685f;
}
.impact-demo-metrics strong {
color: #176344;
}
.impact-demo-dashboard-status strong {
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
font-size: 14px;
font-weight: 700;
}
.impact-demo-dashboard-body {
gap: 16px;
}
.impact-demo-dashboard-nav,
.impact-demo-dashboard-workspace {
padding: 18px;
}
.impact-demo-dashboard-nav > button {
min-height: 40px;
border-radius: 8px;
color: #59685f;
}
.impact-demo-dashboard-nav > button:hover,
.impact-demo-dashboard-nav > button.is-active {
background: #e8f8ee;
color: #176344;
}
.impact-demo-dashboard-action-grid article,
.impact-demo-action-grid article {
border-color: #dce5dd;
border-radius: 11px;
background: #ffffff;
}
.impact-demo-action-grid article > span,
.impact-demo-action-grid button,
.impact-demo-next-action button {
color: #176344;
}
.impact-demo-action-grid h3 {
color: #17251f;
}
.impact-demo-next-action {
border: 1px solid #dce5dd;
border-radius: 10px;
background: #eaf7ee;
color: #176344;
}
.impact-demo-next-action strong {
color: #17251f;
}
.impact-demo-next-action small,
.impact-demo-action-grid p {
color: #59685f;
}
.impact-demo-outline-button {
min-height: 40px;
border-color: #a9cdb5;
border-radius: 8px;
color: #176344;
transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.impact-demo-outline-button:hover {
border-color: #176344;
background: #e8f8ee;
}
.impact-demo-empty,
.impact-demo-loading,
.impact-demo-error {
border-radius: 12px;
background: #ffffff;
}
.impact-demo-empty {
border-color: #cbd9ce;
color: #59685f;
}
.impact-demo-loading {
display: grid;
min-height: 120px;
align-content: center;
gap: 8px;
border: 1px solid #dce5dd;
padding: 18px;
color: #59685f;
}
.impact-demo-loading > span {
display: block;
height: 10px;
border-radius: 999px;
background: #e8eee9;
}
.impact-demo-loading > span:nth-child(2) {
width: 78%;
}
.impact-demo-error {
border: 1px solid #e7c9c3;
padding: 14px 16px;
background: #fff8f6;
color: #71392f;
}
.impact-demo-modal-backdrop {
background: rgba(23, 37, 31, .56);
}
.impact-demo-composer {
width: min(580px, 100%);
border: 1px solid #dce5dd;
border-radius: 18px;
padding: clamp(20px, 4vw, 30px);
background: #ffffff;
box-shadow: 0 26px 78px rgba(23, 37, 31, .24);
}
.impact-demo-modal-title h2 {
color: #17251f;
font-family: Georgia, "Times New Roman", serif;
font-size: 30px;
}
.impact-demo-composer label {
color: #17251f;
font-size: 12px;
}
.impact-demo-composer textarea {
min-height: 150px;
border-color: #cbd9ce;
border-radius: 10px;
background: #ffffff;
color: #17251f;
font-size: 13px;
line-height: 1.65;
}
.impact-demo-composer textarea:focus-visible {
border-color: #176344;
}
.impact-demo-composer-footer > span,
.impact-demo-composer form > p {
color: #59685f;
font-size: 10px;
}
.impact-demo-toast {
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 12px;
background: #17251f;
box-shadow: 0 12px 38px rgba(23, 37, 31, .2);
}
.impact-demo[data-motion-disabled="true"] .impact-demo-sidebar,
.impact-demo[data-motion-disabled="true"] .impact-demo-account-menu,
.impact-demo[data-motion-disabled="true"] .impact-demo-modal-backdrop,
.impact-demo[data-motion-disabled="true"] .impact-demo-composer {
transition: none !important;
animation: none !important;
}
@media (max-width: 1100px) {
.impact-site .impact-hero {
gap: 40px;
padding-inline: 5.5%;
}
.impact-audiences-layout {
grid-template-columns: minmax(0, 1fr) minmax(270px, .82fr);
}
.impact-demo-home-grid {
grid-template-columns: minmax(0, 1fr) minmax(215px, .72fr);
}
}
@media (max-width: 760px) {
.impact-site .impact-header {
min-height: 66px;
padding-inline: 20px;
}
.impact-site .impact-menu-toggle {
border-radius: 9px;
}
.impact-site .impact-navigation {
border: 1px solid #dce5dd;
border-radius: 0 0 14px 14px;
padding: 14px 20px 20px;
background: #ffffff;
box-shadow: 0 16px 30px rgba(23, 37, 31, .1);
transform-origin: top;
}
.impact-site .impact-navigation.is-open {
animation: impact-menu-enter 170ms ease-out both;
}
.impact-site .impact-hero {
min-height: 0;
grid-template-columns: 1fr;
gap: 34px;
padding: 54px 24px 58px;
}
.impact-site .impact-hero-copy {
padding: 0;
}
.impact-site .impact-hero h1 {
max-width: 630px;
font-size: clamp(48px, 11vw, 72px);
}
.impact-site .impact-hero-lede {
max-width: 590px;
}
.impact-site .impact-hero-art {
max-width: 620px;
margin-inline: auto;
}
.impact-product-window-bar {
min-height: 49px;
padding-inline: 14px;
}
.impact-product-post {
padding: 16px 15px 12px;
}
.impact-product-photo {
height: clamp(150px, 42vw, 210px);
}
.impact-product-opportunity {
margin-inline: 10px;
padding: 11px;
}
.impact-site .impact-mission {
padding: 29px 24px 44px;
}
.impact-site .impact-mission-layout {
grid-template-columns: 1fr;
gap: 24px;
padding: 43px 0;
}
.impact-site .impact-connection-line {
flex-wrap: wrap;
justify-content: flex-start;
gap: 12px;
}
.impact-site .impact-connection-line > i {
width: 22px;
}
.impact-site .impact-how {
padding: 72px 24px;
}
.impact-site .impact-section-intro {
align-items: flex-start;
flex-direction: column;
gap: 16px;
}
.impact-site .impact-steps {
grid-template-columns: 1fr;
}
.impact-site .impact-step,
.impact-site .impact-step + .impact-step {
min-height: 0;
border-left: 0;
border-bottom: 1px solid #dce5dd;
padding: 22px 0;
}
.impact-site .impact-step:first-child {
border-top: 1px solid #dce5dd;
}
.impact-site .impact-step-number {
top: 24px;
right: 0;
}
.impact-audiences {
padding: 72px 24px;
}
.impact-audiences-layout {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.impact-audience-organization {
grid-row: auto;
grid-template-columns: 1fr;
}
.impact-audience-image {
min-height: 240px;
}
/* Below 760px the organization photo becomes a wide 240px band with the
"fictional" caption pinned across its foot. Nudging the focal point down
keeps both faces and the hand working on the box above that caption; at
desktop widths the photo is tall enough to show the whole frame. */
.impact-audience-organization .impact-audience-image .impact-photo {
object-position: 52% 70%;
}
.impact-audience-company,
.impact-audience-school {
min-height: 230px;
}
.impact-site .impact-app-intro {
grid-template-columns: 1fr;
gap: 34px;
padding: 72px 24px;
}
.impact-site .impact-app-window-content {
grid-template-columns: 38px minmax(0, 1fr);
}
.impact-site .impact-app-feed {
min-width: 0;
padding: 15px 12px;
}
.impact-site .impact-feed-title {
align-items: flex-start;
flex-direction: column;
gap: 4px;
}
.impact-site .impact-feed-card {
grid-template-columns: 1fr;
}
.impact-site .impact-feed-photo {
min-height: 140px;
}
.impact-site .impact-faq {
grid-template-columns: 1fr;
gap: 26px;
padding: 72px 24px;
}
.impact-site .impact-final-cta {
padding: 72px 24px;
}
.impact-site .impact-footer {
padding: 34px 24px 18px;
}
.impact-site .impact-footer-main {
grid-template-columns: 1fr 1fr;
gap: 22px 16px;
}
.impact-site .impact-footer-main > p {
grid-column: 1 / -1;
grid-row: 2;
}
.impact-site .impact-footer-links {
grid-column: 1 / -1;
flex-wrap: wrap;
}
.impact-site .impact-footer-bottom {
flex-wrap: wrap;
}
.impact-demo-topbar-inner {
padding-inline: 18px;
}
.impact-demo-sidebar {
top: 72px;
height: calc(100vh - 72px);
box-shadow: 16px 0 36px rgba(23, 37, 31, .12);
}
.impact-demo-mobile-toggle {
min-width: 42px;
min-height: 42px;
border-color: #dce5dd;
border-radius: 10px;
background: #ffffff;
color: #17251f;
}
.impact-demo-main {
padding: 22px 20px 0;
}
.impact-demo-home-grid {
grid-template-columns: 1fr;
}
.impact-demo-right-rail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.impact-demo-bottom-nav {
position: fixed;
z-index: 45;
right: 0;
bottom: 0;
left: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
min-height: 66px;
padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
border-top: 1px solid #dce5dd;
background: #ffffff;
box-shadow: 0 -6px 22px rgba(23, 37, 31, .08);
}
.impact-demo-bottom-nav button {
min-width: 0;
min-height: 48px;
border-radius: 9px;
color: #59685f;
font-size: 9px;
transition: background-color 140ms ease, color 140ms ease;
}
.impact-demo-bottom-nav button:hover {
background: #f2faf4;
}
.impact-demo-bottom-nav button.is-active {
color: #176344;
}
.impact-demo-bottom-nav button.is-active::before {
background: #176344;
}
.impact-demo-bottom-nav button.impact-demo-bottom-create {
color: #176344;
font-weight: 750;
}
.impact-demo-bottom-create svg {
border-radius: 50%;
padding: 3px;
background: #b9f3d2;
}
.impact-demo-main {
padding-bottom: 86px;
}
.impact-demo-footer {
padding-bottom: 88px;
}
}
@media (max-width: 560px) {
.impact-site .impact-header {
padding-inline: 16px;
}
.impact-site .impact-hero {
padding: 44px 18px 46px;
}
.impact-site .impact-hero h1 {
font-size: clamp(45px, 12vw, 61px);
}
.impact-site .impact-hero-actions {
align-items: stretch;
flex-direction: column;
}
.impact-site .impact-hero-actions .impact-button {
width: 100%;
}
.impact-site .impact-hero-footnote {
align-items: flex-start;
margin-top: 22px;
}
.impact-product-window-bar {
gap: 8px;
}
.impact-product-window-bar .impact-window-label {
display: none;
}
.impact-product-preview-label {
font-size: 7px;
}
.impact-product-author strong {
font-size: 11px;
}
.impact-product-author small {
font-size: 9px;
}
.impact-product-post h2 {
font-size: 20px;
}
.impact-product-opportunity-copy p {
font-size: 8px;
}
.impact-site .impact-mission {
padding-inline: 18px;
}
.impact-site .impact-mission-topline {
align-items: flex-start;
flex-direction: column;
gap: 8px;
}
.impact-site .impact-connection-line {
align-items: flex-start;
flex-direction: column;
}
.impact-site .impact-connection-line > i {
width: 1px;
height: 15px;
margin-left: 17px;
}
.impact-site .impact-how,
.impact-audiences,
.impact-site .impact-app-intro,
.impact-site .impact-faq {
padding-inline: 18px;
}
.impact-audience-copy {
padding: 23px 19px;
}
.impact-audience-company,
.impact-audience-school {
padding: 23px 19px;
}
.impact-site .impact-app-window-content {
grid-template-columns: 30px minmax(0, 1fr);
}
.impact-site .impact-app-rail {
gap: 8px;
}
.impact-site .impact-app-rail > span {
width: 24px;
height: 24px;
}
.impact-site .impact-app-rail svg {
width: 13px;
height: 13px;
}
.impact-site .impact-feed-card-copy {
padding: 11px;
}
.impact-site .impact-feed-card-copy strong {
font-size: 16px;
}
.impact-site .impact-final-cta {
padding-inline: 18px;
}
.impact-site .impact-footer {
padding-inline: 18px;
}
.impact-site .impact-footer-main {
grid-template-columns: 1fr auto;
}
.impact-site .impact-footer-links {
gap: 10px 16px;
}
.impact-demo-topbar {
height: 64px;
}
.impact-demo-topbar-inner {
gap: 6px;
padding-inline: 12px;
}
.impact-demo-brand-button,
.impact-demo-top-actions,
.impact-demo-mobile-toggle {
flex: 0 0 auto;
}
.impact-demo-brand {
font-size: 20px;
}
.impact-demo-brand > span:first-child {
width: 31px;
height: 31px;
}
.impact-demo-top-actions {
gap: 8px;
margin-left: auto;
}
.impact-demo-top-actions .impact-demo-icon-button {
min-width: 36px;
min-height: 36px;
}
.impact-demo-account-trigger {
min-width: 36px;
min-height: 36px;
}
.impact-demo-join {
min-height: 38px;
gap: 5px;
padding-inline: 8px;
font-size: 10px;
white-space: nowrap;
}
.impact-demo-join-long {
display: none;
}
.impact-demo-join-short {
display: inline;
}
.impact-demo-join svg {
width: 13px;
}
.impact-demo-login {
display: none;
}
.impact-demo-mobile-toggle {
min-width: 36px;
min-height: 36px;
}
.impact-demo-sidebar {
top: 64px;
height: calc(100vh - 64px);
}
.impact-demo-main {
padding: 17px 14px 0;
}
.impact-demo-heading {
align-items: flex-start;
gap: 10px;
margin: 21px 0 16px;
}
.impact-demo-heading h1 {
font-size: 31px;
}
.impact-demo-heading p {
font-size: 11px;
}
.impact-demo-heading > .impact-demo-primary {
min-height: 40px;
flex: 0 0 auto;
padding-inline: 10px;
font-size: 9px;
white-space: nowrap;
}
.impact-demo-heading > .impact-demo-primary svg {
width: 14px;
}
.impact-demo-disclaimer {
align-items: flex-start;
padding: 10px;
}
.impact-demo-disclaimer p {
font-size: 9px;
}
.impact-demo-post {
padding: 13px;
}
.impact-demo-post-image {
height: 210px;
}
.impact-demo-post-actions {
justify-content: space-between;
}
.impact-demo-post-actions button {
min-height: 42px;
gap: 4px;
padding-inline: 5px;
font-size: 9px;
}
.impact-demo-right-rail {
grid-template-columns: 1fr;
}
.impact-demo-values-card {
grid-column: auto;
}
.impact-demo-profile-cover {
height: 136px;
}
.impact-demo-profile-card {
padding-inline: 16px;
}
.impact-demo-profile-heading {
align-items: flex-start;
flex-direction: column;
gap: 9px;
}
.impact-demo-profile-heading h2 {
font-size: 20px;
}
.impact-demo-profile-stats {
gap: 12px;
justify-content: space-between;
}
.impact-demo-profile-stats > div {
min-width: 0;
}
.impact-demo-profile-stats span {
max-width: 90px;
font-size: 8px;
}
.impact-demo-profile-actions {
flex-wrap: wrap;
}
.impact-demo-profile-actions button {
flex: 1 1 180px;
}
.impact-demo-dashboard-org {
align-items: flex-start;
}
.impact-demo-dashboard-org h2 {
font-size: 17px;
}
.impact-demo-draft-pill {
font-size: 7px;
}
.impact-demo-metrics {
gap: 8px;
}
.impact-demo-metrics > div + div {
padding-left: 8px;
}
.impact-demo-metrics span,
.impact-demo-metrics small {
font-size: 8px;
}
.impact-demo-dashboard-status strong {
font-size: 11px;
}
.impact-demo-dashboard-body {
grid-template-columns: 1fr;
}
.impact-demo-dashboard-nav {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5px;
}
.impact-demo-dashboard-nav > .impact-demo-eyebrow,
.impact-demo-dashboard-nav > p {
grid-column: 1 / -1;
}
.impact-demo-dashboard-nav > button {
font-size: 9px;
}
.impact-demo-dashboard-workspace {
padding: 13px;
}
.impact-demo-workspace-heading h2 {
font-size: 18px;
}
.impact-demo-action-grid {
grid-template-columns: 1fr;
}
.impact-demo-action-grid article {
min-height: 0;
}
.impact-demo-action-grid p {
min-height: 0;
}
.impact-demo-composer {
max-height: calc(100dvh - 24px);
overflow-y: auto;
border-radius: 18px 18px 0 0;
}
.impact-demo-composer-footer {
align-items: stretch;
flex-direction: column;
}
.impact-demo-composer-footer .impact-demo-primary {
width: 100%;
}
.impact-demo-toast {
right: 12px;
bottom: calc(78px + env(safe-area-inset-bottom));
}
}
@keyframes impact-menu-enter {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.impact-site *,
.impact-org-demo *,
.impact-demo * {
scroll-behavior: auto !important;
animation: none !important;
transition: none !important;
}
}
/* ==========================================================================
5. Integration layer
========================================================================== */
/* ============================================================================
Impact — integration layer
----------------------------------------------------------------------------
The blocks above are the v0 "latest visual refresh" sources, concatenated in
the same order the v0 layout imported them:
app/impact-public-site.css layout for every section
app/impact-motion-system.css hero rise + section reveal
freebuff-organization-demo.css the interactive organization demo
app/impact-visual-refresh.css the final ivory/charcoal/mint/emerald pass
Nothing below changes that system; this block only bridges it to this site:
the official production logo, the plain-![]()
equivalents of next/image
`fill`, the section that v0 does not have (offerings), and the small states
the vanilla demo script drives instead of React.
========================================================================== */
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: #f7f8f2;
}
/* next/image `fill` puts the image in an absolutely positioned box. Every
.impact-photo in this build lives inside a positioned frame, so one rule
covers them all. */
.impact-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* The official Impact United lockup replaces the prototype's sprout + "impact."
wordmark. The artwork carries its own plate, so no extra styling is applied
beyond sizing. */
.impact-wordmark--logo {
gap: 0;
font-size: 0;
}
.impact-wordmark--logo img {
display: block;
width: auto;
height: 46px;
}
.impact-footer-wordmark.impact-wordmark--logo img {
height: 56px;
}
@media (max-width: 760px) {
.impact-wordmark--logo img {
height: 36px;
}
.impact-footer-wordmark.impact-wordmark--logo img {
height: 46px;
}
}
/* Anchor targets must clear the sticky header. */
#top,
#about,
#how-it-works,
#audiences,
#interactive-demo,
#offerings,
#faq {
scroll-margin-top: 88px;
}
/* ---- Interactive demo: vanilla replacements for the React state ---------- */
.impact-org-demo-window[hidden] {
display: none;
}
.impact-org-demo-action-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.impact-org-demo-action-status {
min-height: 14px;
color: #59685f;
font-size: 10.5px;
line-height: 1.5;
}
.impact-org-demo-tab {
text-align: left;
}
@media (max-width: 760px) {
.impact-org-demo-tab {
min-height: 64px;
}
}
/* ---- Offerings ----------------------------------------------------------- */
.impact-offerings {
padding: 88px max(6.4vw, calc((100% - 1280px) / 2));
border-top: 1px solid var(--impact-line);
background: #ffffff;
}
.impact-offerings-intro {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
align-items: end;
gap: clamp(24px, 5vw, 80px);
padding-bottom: 34px;
border-bottom: 1px solid var(--impact-line);
}
.impact-offerings-intro h2 {
max-width: 720px;
margin: 16px 0 0;
color: #17251f;
font-size: clamp(40px, 4.6vw, 60px);
line-height: 1.02;
letter-spacing: -0.06em;
}
.impact-offerings-intro h2 em {
color: #176344;
font-style: italic;
}
.impact-offerings-intro p {
margin: 0;
color: #59685f;
font-size: 14px;
line-height: 1.7;
}
.impact-offerings-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 18px;
margin-top: 34px;
}
.impact-offering {
display: flex;
min-width: 0;
flex-direction: column;
border: 1px solid #dce5dd;
border-radius: 14px;
padding: 24px;
background: #ffffff;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.impact-offering:hover {
border-color: #b9cfc0;
box-shadow: 0 10px 26px rgba(23, 37, 31, 0.06);
}
.impact-offering-top {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 9px;
margin-bottom: 12px;
}
.impact-offering-mark {
display: inline-grid;
place-items: center;
min-width: 34px;
height: 24px;
padding: 0 7px;
border-radius: 5px;
background: #e8f8ee;
color: #176344;
font-size: 9.5px;
font-weight: 750;
letter-spacing: 0.06em;
}
.impact-offering-top > span:not(.impact-offering-mark):not(.impact-offering-tag) {
color: #59685f;
font-size: 11.5px;
font-weight: 600;
}
.impact-offering-tag {
margin-left: auto;
border-radius: 999px;
padding: 3px 9px;
background: #f2f5f1;
color: #59685f;
font-size: 9.5px;
font-weight: 650;
letter-spacing: 0.03em;
white-space: nowrap;
}
.impact-offering h3 {
margin: 0 0 8px;
color: #17251f;
font-size: 21px;
line-height: 1.22;
letter-spacing: -0.035em;
}
.impact-offering p {
margin: 0;
color: #59685f;
font-size: 12.5px;
line-height: 1.65;
}
.impact-offering-list {
display: grid;
gap: 6px;
margin: 14px 0 0;
padding: 0;
list-style: none;
}
.impact-offering-list li {
position: relative;
padding-left: 18px;
color: #59685f;
font-size: 11.5px;
line-height: 1.55;
}
.impact-offering-list li::before {
content: "✓";
position: absolute;
top: 0;
left: 0;
color: #176344;
font-size: 10px;
font-weight: 700;
}
.impact-offering-note {
margin: 15px 0 0;
color: #7a877e;
font-size: 10.5px;
line-height: 1.6;
}
.impact-offering-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 18px;
}
.impact-offering-price {
color: #17251f;
font-size: 11.5px;
font-weight: 700;
line-height: 1.5;
}
.impact-offering-foot .impact-button {
min-height: 42px;
padding-inline: 15px;
border-radius: 8px;
font-size: 11.5px;
}
.impact-offerings-note {
max-width: 780px;
margin: 28px 0 0;
color: #7a877e;
font-size: 11px;
line-height: 1.7;
}
@media (max-width: 900px) {
.impact-offerings-intro {
grid-template-columns: 1fr;
align-items: start;
gap: 16px;
}
}
@media (max-width: 760px) {
.impact-offerings {
padding: 64px 20px 68px;
}
.impact-offerings-grid {
grid-template-columns: 1fr;
}
.impact-offering-foot {
flex-direction: column;
align-items: stretch;
}
.impact-offering-foot .impact-button {
width: 100%;
}
}
/* The official logo also replaces the prototype's miniature wordmark inside
the three illustrative windows (feed preview, demo portal, app preview). */
.impact-mini-logo {
display: block;
width: auto;
height: 16px;
}
.impact-product-window-bar .impact-mini-logo {
height: 18px;
}
.impact-org-demo-window-bar .impact-mini-logo {
height: 15px;
}
/* UA `[hidden] { display: none }` loses to any component rule that sets a
display on the same element (the menu toggle's icons, for example), which
left both the open and close glyphs visible at once. */
[hidden] {
display: none !important;
}