/* ─── Font Import ────────────────────────────── Proxima Nova is served via the Typekit link in header-includes.php (use.typekit.net/vot5vlv.css) — confirmed to include proxima-nova at 400/500/600/700, roman + italic. No @import needed here. ────────────────────────────────────────────── */ * { margin: 0; padding: 0; /* ─── Brand Colors ───────────────────────── Primary/secondary confirmed against the real give-forward.svg logo's fill colors; light-blue confirmed by pixel-sampling the "5%" heading and Ways-to-Give banner in the concept PDF (2026-08-11). Teal/accent are still PDF-sampled approximations, not yet confirmed. ────────────────────────────────────────── */ --primary: #585080; /* purple — headings, "GIVE" wordmark, nav */ --primary-light: #8078A8; --secondary: #B24177; /* magenta — "FORWARD" heart accent, nav bold line */ --accent: #D7E066; /* lime — sparing highlight text on teal */ --teal: #246060; /* dark teal section backgrounds */ --teal-darker: #1B4848; /* manually darkened ~25% off --teal */ --light-blue: #5bbbdc; /* "Ways to Give" bg, "5%" heading accent */ /* ─── Neutrals ─────────────────────────────── */ --black: #000000; --charcoal: #393939; --grey: #5e5e5e; --light-grey: #918f8f; --off-white: #f4f4f4; /* pixel-sampled from the Ways-to-Give intro block in the concept PDF */ --white: #ffffff; /* ─── Fonts ───────────────────────────────── Proxima Nova throughout — Semibold/Bold for headings, Medium for body. ────────────────────────────────────────── */ --font-family: 'proxima-nova', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-family-heading: 'proxima-nova', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-awesome: 'Font Awesome 6 Pro', sans-serif; --font-awesome-brands: 'Font Awesome 6 Brands', sans-serif; /* ─── Layout ────────────────────────────────── */ --logo-height: 160px; --max-width: 1440px; /* ─── Effects ────────────────────────────────── */ --transition-duration: 150ms; --drop-shadow-filter: drop-shadow(0 10px 20px #00000044); --drop-shadow-filter-alt: drop-shadow(0 8px 8px #00000044); } /* ─── Typography roles ───────────────────────── Read by .subheading-size()/.body-size() in style.less — governs every consumer of those mixins site-wide, and is the retune target for gbd-typog-tuner's role panel. Deliberately on :root, NOT inside the `*` block above: gbd-typog-tuner retunes a role by setting an inline style on , which only reaches descendants through inheritance -- if `*` set this directly on every element instead, each element's own value would win over the inherited override and the live retune would do nothing. ────────────────────────────────────────── */ :root { --role-subheading-size: 2.5em; --role-body-size: 1.25em; /* Same reasoning as the roles above, discovered the hard way: this used to live in the `*` block, which set it directly on every element including header#header's own descendants (nav). style.less's header#header rules override --header-height on the header itself for the scrolled and mobile states, meant to cascade down to nav via inheritance -- but nav had its own direct 190px from `*`, which always wins over inheriting from an ancestor, so nav never actually saw the header's overridden value. */ --header-height: 190px; } body.page-template * { box-sizing: border-box; } @media screen and (max-width: 768px) { * { --drop-shadow-filter: drop-shadow(0 5px 10px #00000044); --drop-shadow-filter-alt: drop-shadow(0 4px 4px #00000044); } /* --header-height must live on :root, not the `*` block above -- header#header sets its own (smaller) mobile value directly on itself (style.less), meant to cascade down to its descendants (nav) by inheritance. A `*` rule sets the property directly on every element instead, including nav -- a direct value always wins over inheriting from an ancestor, so nav would keep reading this value instead of the header's, no matter what the header sets. Same reasoning as --role-subheading-size/--role-body-size above. Value matches header#header's actual mobile height so html's scroll-padding-top and .gfw-hero's min-height calc (both outside header's own subtree, so they read this via inheritance from :root) stay in sync with it. */ :root { --header-height: 90px; --role-subheading-size: 2em; } } #is-mobile { display: none; } html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: var(--header-height); } body { background-color: var(--white); font-family: var(--font-family); font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--black); overflow-x: clip; text-wrap: pretty; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body .gap-5 { height: 5px; width: 100%; } body .spacer-5 { display: inline-block; height: 1px; width: 5px; } body .gap-10 { height: 10px; width: 100%; } body .spacer-10 { display: inline-block; height: 1px; width: 10px; } body .gap-15 { height: 15px; width: 100%; } body .spacer-15 { display: inline-block; height: 1px; width: 15px; } body .gap-20 { height: 20px; width: 100%; } body .spacer-20 { display: inline-block; height: 1px; width: 20px; } body .gap-25 { height: 25px; width: 100%; } body .spacer-25 { display: inline-block; height: 1px; width: 25px; } body .gap-30 { height: 30px; width: 100%; } body .spacer-30 { display: inline-block; height: 1px; width: 30px; } body .gap-35 { height: 35px; width: 100%; } body .spacer-35 { display: inline-block; height: 1px; width: 35px; } body .gap-40 { height: 40px; width: 100%; } body .spacer-40 { display: inline-block; height: 1px; width: 40px; } body .gap-45 { height: 45px; width: 100%; } body .spacer-45 { display: inline-block; height: 1px; width: 45px; } body .gap-50 { height: 50px; width: 100%; } body .spacer-50 { display: inline-block; height: 1px; width: 50px; } body .gap-55 { height: 55px; width: 100%; } body .spacer-55 { display: inline-block; height: 1px; width: 55px; } body .gap-60 { height: 60px; width: 100%; } body .spacer-60 { display: inline-block; height: 1px; width: 60px; } body .gap-65 { height: 65px; width: 100%; } body .spacer-65 { display: inline-block; height: 1px; width: 65px; } body .gap-70 { height: 70px; width: 100%; } body .spacer-70 { display: inline-block; height: 1px; width: 70px; } body .gap-75 { height: 75px; width: 100%; } body .spacer-75 { display: inline-block; height: 1px; width: 75px; } body .gap-80 { height: 80px; width: 100%; } body .spacer-80 { display: inline-block; height: 1px; width: 80px; } body .gap-85 { height: 85px; width: 100%; } body .spacer-85 { display: inline-block; height: 1px; width: 85px; } body .gap-90 { height: 90px; width: 100%; } body .spacer-90 { display: inline-block; height: 1px; width: 90px; } body .gap-95 { height: 95px; width: 100%; } body .spacer-95 { display: inline-block; height: 1px; width: 95px; } .mobile-only { display: none; } .not-mobile { display: block; } .nowrap { text-wrap: nowrap; } h1, h2, h3, h4 { color: var(--black); font-family: var(--font-family-heading); font-weight: 700; line-height: 1; margin: 0 0 0.25em; } h1 { font-size: 4em; } h2 { font-size: 3em; } h3 { font-size: 2em; } h4 { font-size: 1.5em; } * + h2, * + h3, * + h4 { margin-top: 40px; } p, ul, ol { font-weight: 400; line-height: 1.5; } p a, ul a, ol a { color: var(--primary); text-decoration: underline; transition: color var(--transition-duration) ease-in-out; } p a:hover, ul a:hover, ol a:hover { color: var(--charcoal); } p + p, ul + p, ol + p, p + ul, p + ol { margin-top: 1.25em; } ul, ol { padding-left: 20px; } li { padding: 5px 0; } blockquote > p { font-weight: 700; } .theme-button { background-color: var(--accent); border: none; border-radius: 10px; color: var(--teal); cursor: pointer; display: inline-block; font-family: var(--font-family); font-size: 1.25em; font-weight: 600; line-height: 1.1; margin-top: 40px; padding: 16px 28px; text-decoration: none; text-transform: uppercase; transition: background-color var(--transition-duration) ease-in-out; } .theme-button:hover { background-color: var(--teal-darker); color: var(--accent); } .theme-button--white { background-color: var(--white); color: var(--charcoal); } .theme-button--white:hover { background-color: var(--light-grey); } .more-button { align-items: center; color: var(--primary); display: inline-flex; font-family: var(--font-family); font-size: 1.125em; font-weight: 600; gap: 10px; text-decoration: none; transition: color var(--transition-duration) ease-in-out; } .more-button:after { content: '\2192'; font-size: 1.2em; } .more-button:hover { color: var(--charcoal); } .grey-bkgd { --bg-color: var(--light-grey); } .primary-bkgd { --bg-color: var(--primary); --text-color: var(--white); } .secondary-bkgd { --bg-color: var(--secondary); --text-color: var(--white); } .charcoal-bkgd { --bg-color: var(--charcoal); --text-color: var(--white); } .teal-bkgd { --bg-color: var(--teal); --text-color: var(--white); } .light-blue-bkgd { --bg-color: var(--light-blue); --text-color: var(--primary); } .overlay--light-text { --text-color: var(--white); } .overlay--dark-text { --text-color: var(--black); } .message { background-color: var(--light-grey); border-left: 5px solid var(--grey); border-radius: 8px; padding: 20px; } .message--error { background-color: #fce4e4; border-left-color: var(--secondary); } .message--notice { color: var(--black); } .message--success { background-color: #e8f5e9; border-left-color: var(--primary); } .inset { box-sizing: border-box; margin: 0 auto; max-width: var(--max-width); padding: 20px; position: relative; width: 100%; } .banner-heading { font-size: clamp(3em, 11cqi, 20em); font-weight: 500; line-height: 1; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); margin-top: -20px; overflow: hidden; padding: 20px 20px 0; text-align: center; text-transform: uppercase; text-wrap: balance; z-index: 1; } .banner-heading span { color: var(--white); display: inline-block; transform: translateY(0.15em); } #container { position: relative; z-index: 100; } .section-wrap:nth-child(1) { z-index: 1; } .section-wrap:nth-child(2) { z-index: 2; } .section-wrap:nth-child(3) { z-index: 3; } .section-wrap:nth-child(4) { z-index: 4; } .section-wrap:nth-child(5) { z-index: 5; } .section-wrap:nth-child(6) { z-index: 6; } .section-wrap:nth-child(7) { z-index: 7; } .section-wrap:nth-child(8) { z-index: 8; } .section-wrap:nth-child(9) { z-index: 9; } .section-wrap:nth-child(10) { z-index: 10; } .section-wrap:nth-child(11) { z-index: 11; } .section-wrap:nth-child(12) { z-index: 12; } .section-wrap:nth-child(13) { z-index: 13; } .section-wrap:nth-child(14) { z-index: 14; } .section-wrap:nth-child(15) { z-index: 15; } .section-wrap:nth-child(16) { z-index: 16; } .section-wrap:nth-child(17) { z-index: 17; } .section-wrap:nth-child(18) { z-index: 18; } .section-wrap:nth-child(19) { z-index: 19; } .section-wrap:nth-child(20) { z-index: 20; } .section-wrap:nth-child(21) { z-index: 21; } .section-wrap:nth-child(22) { z-index: 22; } .section-wrap:nth-child(23) { z-index: 23; } .section-wrap:nth-child(24) { z-index: 24; } .section-wrap:nth-child(25) { z-index: 25; } .section-wrap:nth-child(26) { z-index: 26; } .section-wrap:nth-child(27) { z-index: 27; } .section-wrap:nth-child(28) { z-index: 28; } .section-wrap:nth-child(29) { z-index: 29; } .section-wrap:nth-child(30) { z-index: 30; } .section-wrap:has(.gfw-impact-detail__photo):has(+ .section-wrap .gfw-blue-heart) { z-index: 31; } .section-wrap:has(.has-heart) + .section-wrap > section { margin-top: -60px !important; } section { --bg-color: var(--white); --text-color: var(--black); background-color: var(--bg-color); margin-bottom: 60px; position: relative; } section .inset { padding: 60px 20px; position: relative; z-index: 3; } section .inset :where(h1, h2, h3) { color: var(--text-color); } section .inset :where(ul, ol) { color: var(--text-color); } section .inset p.subheading { font-size: 1.25em; margin-bottom: 20px; text-wrap: balance; } section.grey-bkgd { background-color: var(--light-grey); } section.charcoal-bkgd { background-color: var(--charcoal); } section.primary-bkgd { background-color: var(--primary); } section.secondary-bkgd { background-color: var(--secondary); } section.teal-bkgd { background-color: var(--teal); } section.light-blue-bkgd { background-color: var(--light-blue); } .columns { display: flex; gap: 40px; width: 100%; } .columns__column { display: flex; flex-direction: column; gap: 20px; flex: 1; } header#header { background-color: var(--white); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); color: var(--primary); height: var(--header-height); left: 0; position: sticky; top: 0; transition: all 0.2s ease-in-out; width: 100%; z-index: 1000; } header#header .inset { align-items: center; display: flex; gap: 20px; height: 100%; justify-content: space-between; padding: 0 20px; } header#header .branding { align-items: center; display: flex; gap: 15px; z-index: 20; } header#header .branding a { display: block; text-decoration: none; } header#header .branding a img { display: block; height: var(--logo-height); width: auto; } header#header nav { align-items: center; display: flex; height: 100%; justify-content: flex-end; z-index: 10; } header#header nav > div { height: 100%; } header#header nav ul { align-items: flex-end; display: flex; font-size: 1.25em; font-weight: 500; gap: 20px; height: 100%; list-style: none; margin: 0; padding: 0; } header#header nav ul li { display: block; height: 100%; padding: 0; } header#header nav ul li a { align-items: center; border-bottom: 4px solid transparent; display: flex; flex-direction: column; gap: 2px; height: 100%; justify-content: flex-end; line-height: 1.1; padding: 10px 15px 20px; position: relative; text-align: center; text-decoration: none; } header#header nav ul li a::after { background-color: var(--secondary); bottom: -4px; content: ''; height: 4px; left: 0; position: absolute; transform: scaleY(0); transform-origin: bottom; transition: transform var(--transition-duration) ease-in-out; width: 100%; } header#header nav ul li a:hover::after { transform: scaleY(1); } header#header nav ul li a span:first-child { color: var(--primary); font-size: 1.125em; font-weight: 600; } header#header nav ul li a span:last-child { color: var(--secondary); font-size: 1.25em; font-weight: 800; text-transform: uppercase; } header#header nav ul li.menu-item-has-children { position: relative; } header#header nav ul li.menu-item-has-children:hover ul { display: flex; animation: nav-fade-in 150ms forwards ease-in-out; } header#header nav ul li.nav-cta { height: auto; margin-bottom: 10px; } header#header nav ul li.nav-cta a { background-color: var(--teal); border-radius: 12px; height: auto; padding: 10px 20px; } header#header nav ul li.nav-cta a::after { display: none; } header#header nav ul li.nav-cta a span:first-child { color: var(--white); } header#header nav ul li.nav-cta a span:last-child { color: var(--accent); } header#header nav ul li ul { background-color: var(--primary); border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); display: none; flex-direction: column; font-size: 0.95rem; gap: 0; height: auto; left: 0; min-width: 200px; padding: 10px; position: absolute; top: 100%; z-index: 1000; } header#header nav ul li ul li { height: auto; } header#header nav ul li ul li a { display: block; height: auto; padding: 8px 20px; white-space: nowrap; } @keyframes nav-fade-in { 0% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: translateY(0); } } header#header .mobile-menu-button { display: none; } body.scrolling header#header { --header-height: 60px; } body.admin-bar { --admin-bar-height: 32px; } body.admin-bar header#header { top: var(--admin-bar-height); } @media screen and (max-width: 782px) { body.admin-bar { --admin-bar-height: 46px; } } .faq-drawer-overlay { background-color: rgba(0, 0, 0, 0.5); inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity var(--transition-duration) ease-in-out; z-index: 1050; } .faq-drawer-overlay.open { opacity: 1; pointer-events: auto; } .faq-drawer { background-color: var(--teal); bottom: 0; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.2); max-width: 100%; position: fixed; right: 0; top: 0; transform: translateX(100%); transition: transform 300ms cubic-bezier(0.11, 0, 0.5, 0); width: 480px; z-index: 1100; } .faq-drawer.open { transform: translateX(0); transition: transform 300ms cubic-bezier(0, 1, 0.7, 1); } .faq-drawer.open .faq-drawer__close { opacity: 1; pointer-events: auto; transition-delay: 300ms; } .faq-drawer.open .faq-drawer__heading-heart { transform: translateY(0); } .faq-drawer__scroll { background-color: var(--teal-darker); height: 100%; overflow-y: auto; } .faq-drawer__heading { align-items: center; background-color: var(--teal); border-bottom: 1px solid rgba(0, 0, 0, 0.133); display: flex; justify-content: space-between; margin: 0; overflow: hidden; padding: 80px 30px 20px; position: relative; } .faq-drawer__heading h2 { color: var(--accent); font-size: 2.5em; font-weight: 700; margin: 0; } .faq-drawer__heading-heart { height: 190px; position: absolute; right: 40px; top: 10px; transform: translateY(40px); transition: transform 600ms ease-out; width: auto; } .faq-drawer__close { align-items: center; background-color: var(--white); border: none; border-radius: 50%; box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.25); cursor: pointer; display: flex; height: 52px; justify-content: center; left: 0; opacity: 0; padding: 0; pointer-events: none; position: absolute; top: 10px; transform: translateX(-50%); transition: opacity 200ms ease-in-out; width: 52px; z-index: 10; } .faq-drawer__close::after { background: linear-gradient(var(--primary), var(--primary)) center / 100% 3px no-repeat, linear-gradient(var(--primary), var(--primary)) center / 3px 100% no-repeat; content: ''; display: block; height: 28px; transform: rotate(45deg); width: 28px; } .faq-drawer__list { background-color: var(--teal-darker); padding: 20px 20px 40px; } .faq-drawer__list .toggles__item { background-color: rgba(255, 255, 255, 0.133); border: 1px solid var(--accent); border-radius: 15px; margin-bottom: 18px; } .faq-drawer__list .toggles__item__heading { align-items: flex-start; color: var(--white); cursor: pointer; display: flex; font-size: 1.5em; font-weight: 700; gap: 30px; justify-content: space-between; line-height: 1.25; padding: 18px; text-wrap: pretty; transition: color var(--transition-duration) ease; } .faq-drawer__list .toggles__item__heading::after { background: linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 2px 100% no-repeat; content: ''; flex-shrink: 0; height: 18px; margin-top: 6px; transition: transform 200ms ease; width: 18px; } .faq-drawer__list .toggles__item__content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms ease; } .faq-drawer__list .toggles__item__content__inner { font-size: var(--role-body-size); --typog-role: body; color: var(--white); overflow: hidden; padding-left: 20px; padding-right: 30px; } .faq-drawer__list .toggles__item__content__inner p:last-child { margin-bottom: 0; } .faq-drawer__list .toggles__item.open .toggles__item__heading { color: var(--accent); } .faq-drawer__list .toggles__item.open .toggles__item__heading::after { transform: rotate(45deg); } .faq-drawer__list .toggles__item.open .toggles__item__content { grid-template-rows: 1fr; padding-bottom: 2em; } @media screen and (max-width: 600px) { .faq-drawer { width: 100%; } .faq-drawer__close { box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25); left: auto; right: 0; transform: translateX(-20px); } } .page-header { background-color: var(--charcoal); background-image: var(--bg-image-url); background-position: var(--bg-position-x) var(--bg-position-y); background-repeat: no-repeat; background-size: cover; position: relative; } .page-header .inset { align-items: flex-start; display: flex; flex-direction: column; justify-content: center; min-height: 280px; padding: 0 20px 30px; z-index: 10; } .page-header .inset .copy { background-color: rgba(0, 0, 0, 0.75); color: var(--white); padding: 20px 30px; } .page-header .inset .copy h1 { color: var(--white); font-size: 3em; line-height: 1.2; margin-bottom: 0; text-wrap: balance; } .page-header--overlay:before { content: ''; background-color: var(--bg-overlay-color); display: block; height: 100%; left: 0; opacity: var(--bg-overlay-opacity); position: absolute; top: 0; width: 100%; z-index: 0; } section.hero { background-color: var(--charcoal); color: var(--white); min-height: 600px; overflow: hidden; position: relative; z-index: 100; } section.hero .hero__slide { align-items: center; display: flex; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; transition: opacity 600ms ease-out; width: 100%; z-index: 1; } section.hero .hero__slide--active { opacity: 1; z-index: 2; } section.hero .hero__background { background-image: var(--bg-url); background-position: var(--bg-position-x, 50%) var(--bg-position-y, 50%); background-size: cover; position: absolute; inset: 0; z-index: 1; } section.hero .hero__overlay { background-color: var(--bg-color, var(--black)); opacity: var(--bg-opacity, 0.4); position: absolute; inset: 0; z-index: 2; } section.hero .hero__slide > .inset { align-items: flex-start; display: flex; flex-direction: column; justify-content: center; min-height: 600px; padding: 120px 30px 160px; z-index: 10; } section.hero .hero__copy { color: var(--white); max-width: 800px; } section.hero .hero__copy h1, section.hero .hero__copy h2, section.hero .hero__copy h3, section.hero .hero__copy h4, section.hero .hero__copy p, section.hero .hero__copy span, section.hero .hero__copy a { color: var(--white); } section.hero .hero__copy h1 { font-size: 4em; line-height: 1; margin-bottom: 20px; text-wrap: balance; } section.hero .hero__subheading { font-size: var(--role-subheading-size); --typog-role: subheading; font-weight: 400; line-height: 1.4; margin-bottom: 30px; } section.hero .hero__buttons { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 10px; } section.hero .hero__tiles { bottom: 0; left: 0; position: absolute; width: 100%; z-index: 100; } section.hero .hero__tiles .inset { display: flex; gap: 0; min-height: auto; padding: 0 30px; } section.hero .hero__tile { appearance: none; background: var(--charcoal); border: none; color: var(--white); cursor: pointer; display: flex; flex: 1; flex-direction: column; overflow: hidden; padding: 20px 24px; position: relative; text-align: left; transition: background 300ms ease; } section.hero .hero__tile:hover { background: var(--grey); } section.hero .hero__tile--active { background: var(--grey); } section.hero .hero__tile--active .hero__tile__progress { animation: tile-progress var(--hero-speed, 6s) linear forwards; } section.hero .hero__tile__progress { background: var(--secondary); height: 3px; left: 0; position: absolute; top: 0; transform: scaleX(0); transform-origin: left; width: 100%; } section.hero--paused .hero__tile--active .hero__tile__progress { animation: none; transform: scaleX(1); } section.hero .hero__tile__title { font-family: var(--font-family-heading); font-size: 1.5em; font-weight: 700; text-transform: uppercase; } section.hero .hero__tile__caption { font-size: 1em; margin-top: 4px; opacity: 0.8; } @keyframes tile-progress { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } @media screen and (max-width: 768px) { section.hero { min-height: 450px; } section.hero .hero__slide > .inset { min-height: 450px; padding: 80px 20px 120px; } section.hero .hero__copy h1 { font-size: 2.5em; } section.hero .hero__tiles .inset { flex-direction: column; padding: 0; } section.hero .hero__tile { padding: 12px 16px; } section.hero .hero__tile__title { font-size: 1.125em; } section.hero .hero__tile__caption { display: none; } } .archive-faq { margin: 0 auto; max-width: 900px; padding: 60px 0; } .archive-faq .toggles__item { border-bottom: 1px solid var(--light-grey); } .archive-faq .toggles__item__heading { align-items: center; color: var(--primary); cursor: pointer; display: flex; font-size: 1.25em; font-weight: 700; justify-content: space-between; padding: 24px 0; } .archive-faq .toggles__item__heading::after { color: var(--secondary); content: '+'; font-size: 1.5em; line-height: 1; } .archive-faq .toggles__item__content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms ease; } .archive-faq .toggles__item__content__inner { font-size: var(--role-body-size); --typog-role: body; color: var(--charcoal); overflow: hidden; } .archive-faq .toggles__item.open .toggles__item__heading::after { content: '−'; } .archive-faq .toggles__item.open .toggles__item__content { grid-template-rows: 1fr; } .entry-card { background: var(--white); filter: var(--drop-shadow-filter); overflow: hidden; transition: transform var(--transition-duration) ease-in-out; } .entry-card:hover { transform: translateY(-4px); } .entry-card__image { display: block; overflow: hidden; } .entry-card__image img { aspect-ratio: 4 / 2; display: block; object-fit: cover; width: 100%; height: auto; } .entry-card__date { background-color: var(--primary); color: var(--white); display: block; padding: 5px 20px; } .entry-card__text { padding: 20px 25px 25px; } .entry-card__text h3 { font-size: 1.5em; margin-bottom: 0.4em; margin-top: 0; } .entry-card__text h3 a { color: var(--primary); text-decoration: none; } .entry-card__text h3 a:hover { color: var(--charcoal); } .entry-card__text p { color: var(--charcoal); font-size: 0.95em; line-height: 1.6; margin-bottom: 15px; } .blog-content .inset { display: flex; gap: 40px; } .blog-content__posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; flex: 1; } .blog-content__sidebar { width: 300px; flex-shrink: 0; } .blog-pagination { display: flex; gap: 8px; justify-content: center; padding: 40px 0; } .blog-pagination a, .blog-pagination span { border: 1px solid var(--grey); color: var(--charcoal); display: inline-block; min-width: 40px; padding: 8px 14px; text-align: center; text-decoration: none; } .blog-pagination .current { background-color: var(--primary); border-color: var(--primary); color: var(--white); } footer#footer { background-color: var(--white); color: var(--primary); position: relative; text-align: center; z-index: 101; } footer#footer .footer__social .social-links ul { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; } footer#footer .footer__social .social-links ul a { align-items: center; background-color: var(--white); border-radius: 8px; display: flex; height: 34px; justify-content: center; width: 34px; } footer#footer .footer__social .social-links ul a svg { fill: var(--light-blue); height: 22px; width: 22px; } footer#footer a { color: var(--primary); text-decoration: none; transition: opacity var(--transition-duration) ease; } footer#footer a:hover { opacity: 0.7; } footer#footer .copyright { background-color: var(--primary); color: var(--white); font-size: 0.85em; padding: 15px 20px 30vh; text-align: center; } footer#footer .copyright .inset { align-items: center; display: flex; flex-direction: row; font-size: 1.375em; gap: 20px; justify-content: space-between; padding: 0 20px; } footer#footer .copyright .inset:not(:has(.social-links a)) { justify-content: center; } footer#footer .copyright .inset:not(:has(.social-links a)) .footer__social { display: none; } .pin-spacer { margin-bottom: 0 !important; } .gfw-hero { background-color: var(--off-white); min-height: calc(100vh - var(--header-height)); overflow: hidden; padding: 0px 0px 40px; position: relative; text-align: center; } .gfw-hero .inset { align-items: center; display: flex; flex-direction: column; gap: 0; padding-top: 80px; position: relative; } .gfw-hero__heading { font-size: clamp(2.5em, 6vw, 4.5em); margin-bottom: 0; max-width: 900px; position: relative; z-index: 0; } .gfw-hero__heading--overlay { color: var(--white); left: 50%; margin: 0; pointer-events: none; position: absolute; text-align: center; top: calc(50vh - (var(--header-height) / 2)); transform: translate(-50%, -50%); z-index: 3; } .gfw-hero__heading--overlay span { color: var(--white) !important; } .gfw-hero__map-spacer { aspect-ratio: 961.16 / 970.37; max-width: 420px; position: relative; width: 60%; } .gfw-hero__map { inset: 0; position: absolute; z-index: 1; } .gfw-hero__map-inner { background-color: var(--light-blue); height: 1200%; left: 0; position: absolute; top: 0; width: 1200%; } .gfw-hero__map-inner svg { display: block; height: 100%; width: 100%; } .gfw-hero__body { font-size: var(--role-body-size); --typog-role: body; margin-bottom: 1em; max-width: 700px; position: relative; z-index: 2; } .gfw-hero__cta { color: var(--primary); font-size: 1.75em; font-weight: 700; line-height: 1.2; max-width: 700px; position: relative; text-wrap: balance; z-index: 2; } .gfw-hero__scroll-nudge { align-items: center; color: var(--white); display: flex; flex-direction: column; gap: 8px; left: 50%; pointer-events: none; position: absolute; top: calc(100vh - var(--header-height) - 64px); transform: translateX(-50%); z-index: 3; } .gfw-hero__scroll-nudge-label { font-size: 0.875em; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; } .gfw-hero__scroll-nudge-arrow { animation: gfw-hero-scroll-nudge-bounce 1.6s ease-in-out infinite; border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; display: block; height: 10px; transform: rotate(45deg); width: 10px; } @keyframes gfw-hero-scroll-nudge-bounce { 0%, 100% { transform: rotate(45deg) translate(0, 0); } 50% { transform: rotate(45deg) translate(4px, 4px); } } .gfw-impact-stat { margin-top: 0; } .gfw-impact-stat .inset { align-items: center; display: grid; gap: 60px; grid-template-columns: 1.2fr 1fr; padding-bottom: 260px; } .gfw-impact-stat--no-heart .inset { padding-bottom: 60px; } .gfw-impact-stat__copy { color: var(--text-color); padding: 0 40px; } .gfw-impact-stat__heart-frame { bottom: 0; left: 0; overflow: hidden; pointer-events: none; position: absolute; right: 0; top: 0; z-index: -1; } .gfw-impact-stat__heart { bottom: -240px; height: 440px; left: 50%; position: absolute; transform: translateX(-50%); width: auto; } .gfw-impact-stat__heading { font-size: 3em; } .gfw-impact-stat__body { font-size: var(--role-body-size); --typog-role: body; margin-bottom: 30px; } .gfw-impact-stat__body strong { color: var(--white); font-weight: 800; } .gfw-impact-stat__quote { border-radius: 16px; color: var(--accent); font-size: 1.5em; font-style: normal; font-weight: 700; margin: 0 0 0 -45px; padding: 40px 45px 30px 45px; position: relative; width: calc(100% + 90px); } .gfw-impact-stat__quote::before { border: 1px solid var(--accent); border-radius: 16px; content: ''; height: 100%; left: 20px; position: absolute; top: 20px; width: 100%; } .gfw-impact-stat__quote::after { background-color: rgba(255, 255, 255, 0.1); border-radius: 16px; content: ''; height: 100%; left: 0; mix-blend-mode: soft-light; position: absolute; top: 0; width: 100%; z-index: -1; } .gfw-impact-stat__quote--alt { color: var(--teal); margin-top: 20px; } .gfw-impact-stat__quote--alt::before { left: -20px; top: -20px; } .gfw-impact-stat__quote--alt::after { background-color: var(--light-blue); mix-blend-mode: normal; } .gfw-impact-stat.default-bkgd .gfw-impact-stat__quote { background-color: var(--teal); color: var(--white); margin: 30px 0 0 -40px; padding: 35px 40px; width: calc(100% + 80px); } .gfw-impact-stat.default-bkgd .gfw-impact-stat__quote::before, .gfw-impact-stat.default-bkgd .gfw-impact-stat__quote::after { display: none; } .gfw-impact-stat__photo { filter: var(--drop-shadow-filter); margin-right: -120px; margin-top: -180px; } .gfw-impact-stat__photo img { border-radius: 32px; display: block; height: auto; object-fit: cover; width: 100%; } .gfw-impact-stat--photo-left .inset { grid-template-columns: 1fr 1.2fr; } .gfw-impact-stat--photo-left .gfw-impact-stat__photo { margin-left: -120px; margin-right: 0; order: -1; } .gfw-impact-detail .inset { align-items: center; display: grid; gap: 60px; grid-template-columns: 1fr 1.2fr; } .gfw-impact-detail__copy { padding: 0 20px; } .gfw-impact-detail__heading { font-size: 2.5em; } .gfw-impact-detail__photo { filter: var(--drop-shadow-filter); margin-left: -120px; margin-top: -260px; } .gfw-impact-detail__photo img { border-radius: 32px; display: block; height: auto; object-fit: cover; width: 100%; } .gfw-impact-detail__body { font-size: var(--role-body-size); --typog-role: body; } .gfw-impact-detail__body strong { color: var(--secondary); } .gfw-impact-detail__body ul { display: flex; flex-direction: column; gap: 8px; list-style: none; margin-top: 1.25em; padding: 0; } .gfw-impact-detail__body ul li { align-items: flex-start; color: var(--black); display: flex; font-weight: 700; gap: 12px; line-height: 1.4; } .gfw-impact-detail__body ul li::before { background-color: var(--light-blue); border-radius: 50%; content: ''; flex: 0 0 10px; height: 10px; margin-top: 0.5em; width: 10px; } .gfw-impact-detail--photo-right .inset { grid-template-columns: 1.2fr 1fr; } .gfw-impact-detail--photo-right .gfw-impact-detail__photo { margin-left: 0; margin-right: -120px; order: 1; } .gfw-story .inset { display: grid; gap: 50px; grid-template-columns: 1fr 1fr; } .gfw-story__copy { padding: 0 40px; } .gfw-story__heading { font-size: 2.5em; } .gfw-story__body { font-size: var(--role-body-size); --typog-role: body; } .gfw-story__photo { align-self: start; filter: var(--drop-shadow-filter); height: 420px; margin-right: -120px; } .gfw-story__photo img { border-radius: 32px; display: block; height: 100%; object-fit: cover; width: 100%; } .gfw-story--photo-left .gfw-story__photo { margin-left: -120px; margin-right: 0; order: -1; } .gfw-story__regions { --text-color: var(--white); background-color: var(--teal); border-radius: 16px; margin-left: -40px; margin-top: 30px; padding: 35px 40px; width: calc(100% + 80px); } .gfw-story__regions-heading { font-size: 2.25em; margin-bottom: 20px; } .gfw-story__regions ul { display: flex; flex-direction: column; gap: 0.5em; list-style: none; margin: 0; padding: 0; } .gfw-story__regions li { font-size: var(--role-body-size); --typog-role: body; align-items: flex-start; display: flex; gap: 12px; line-height: 1.125; } .gfw-story__regions li::before { background-color: var(--light-blue); border-radius: 50%; content: ''; flex: 0 0 10px; height: 10px; position: relative; top: 0.5em; width: 10px; } .gfw-story__regions a { font-size: var(--role-body-size); --typog-role: body; color: var(--white); font-weight: 700; text-decoration: none; } .gfw-story__regions a:hover, .gfw-story__regions a:focus-visible { color: var(--accent); } .gfw-blue-heart__top { position: relative; } .gfw-blue-heart__heading-row { align-items: end; display: grid; gap: 40px; grid-template-columns: 1fr 1.3fr; margin-bottom: 50px; } .gfw-blue-heart__heading { font-size: 5em; line-height: 1.05; margin: 0; } .gfw-blue-heart__subheading { font-size: var(--role-subheading-size); --typog-role: subheading; color: var(--white); font-weight: 700; line-height: 1.2; margin-bottom: 10px; } .gfw-blue-heart__photo { margin-bottom: -10%; margin-left: auto; max-width: calc(50% + 80px); position: relative; } .gfw-blue-heart__photo-frame { border-radius: 40px; overflow: hidden; position: relative; z-index: 1; } .gfw-blue-heart__photo-frame img { display: block; height: auto; width: calc(100% + 70px); } .gfw-blue-heart__heart-frame { bottom: 0; left: 0; pointer-events: none; position: absolute; right: 0; top: 0; z-index: -1; } .gfw-blue-heart__heart { bottom: -100px; height: auto; left: 0; position: absolute; transform: translateX(var(--heart-x, 0%)) scale(var(--heart-scale, 1)); width: calc(min(100vw, var(--max-width)) * 0.45); } .gfw-blue-heart__intro-wrap { background-color: var(--white); margin: 0 calc(-50vw + 50%) -60px; padding: 60px 20px 80px; } .gfw-blue-heart__intro { margin: calc(min(100vw, var(--max-width)) * 0.1125) auto 40px; max-width: 780px; text-align: center; } .gfw-blue-heart--no-photo .gfw-blue-heart__intro { margin-top: 20px; } .gfw-blue-heart__intro-heading { font-size: 2em; font-weight: 700; line-height: 1.3; margin-bottom: 5px; } .gfw-blue-heart__intro-body { font-size: 1.5em; font-weight: 800; line-height: 1.3; margin-bottom: 30px; text-wrap: balance; } .gfw-blue-heart__intro-cta { border-bottom: 2px solid var(--primary-light); color: var(--secondary); display: inline-block; font-size: 2em; font-weight: 800; padding-bottom: 10px; width: 100%; } .gfw-blue-heart__grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); margin: 0 auto; max-width: 1000px; } .gfw-blue-heart__item { display: flex; flex-direction: column; text-align: center; } .gfw-blue-heart__icon { aspect-ratio: 1; margin: 0 auto; width: 180px; } .gfw-blue-heart__icon img { display: block; height: 100%; object-fit: contain; width: 100%; } .gfw-blue-heart__icon svg { display: block; height: 100%; object-fit: contain; width: 100%; } .gfw-blue-heart__icon svg path, .gfw-blue-heart__icon svg g, .gfw-blue-heart__icon svg circle, .gfw-blue-heart__icon svg line, .gfw-blue-heart__icon svg rect, .gfw-blue-heart__icon svg ellipse, .gfw-blue-heart__icon svg polygon, .gfw-blue-heart__icon svg polyline { vector-effect: non-scaling-stroke; } .gfw-blue-heart__icon #rays, .gfw-blue-heart__icon #heart, .gfw-blue-heart__icon #palm, .gfw-blue-heart__icon #second-person, .gfw-blue-heart__icon #third-person, .gfw-blue-heart__icon #left-strap, .gfw-blue-heart__icon #right-strap { transform-box: fill-box; transform-origin: center; transition: transform var(--transition-duration) ease-in-out; } .gfw-blue-heart__icon--sun.icon-hover-in #rays { transform: scale(1.4); } .gfw-blue-heart__icon--hand.icon-hover-in #heart { transform: scale(1.25); } .gfw-blue-heart__icon--hand.icon-hover-in #palm { transform: scale(1.08); } .gfw-blue-heart__icon--person.icon-hover-in #second-person { transform: translate(-48px, 5px) rotate(-10deg); } .gfw-blue-heart__icon--person.icon-hover-in #third-person { transform: translate(48px, 5px) rotate(10deg); transition-delay: 0.06s; } .gfw-blue-heart__icon svg [id*="mask"], .gfw-blue-heart__icon svg [id*="mask"] path { stroke: none; } .gfw-blue-heart__icon #coin { transition: transform 0.15s ease-in; } .gfw-blue-heart__icon--bank.icon-hover-in #coin { transform: translateY(42px); } .gfw-blue-heart__icon--bank.icon-hover-in #bank { animation: gfw-bank-rattle 0.4s ease-out 0.15s; transform-origin: center bottom; } @keyframes gfw-bank-bounce { 0% { transform: translateY(0); } 20% { transform: translateY(8px); } 40% { transform: translateY(-5px); } 60% { transform: translateY(3px); } 80% { transform: translateY(-1px); } 100% { transform: translateY(0); } } @keyframes gfw-bank-rattle { 0% { transform: translateX(0) rotate(0deg); } 20% { transform: translateX(-1px) rotate(-0.75deg); } 40% { transform: translateX(1px) rotate(0.75deg); } 60% { transform: translateX(-0.6px) rotate(-0.4deg); } 80% { transform: translateX(0.3px) rotate(0.2deg); } 100% { transform: translateX(0) rotate(0deg); } } .gfw-blue-heart__icon--case.icon-hover-in #left-strap, .gfw-blue-heart__icon--case.icon-hover-in #right-strap { transform: translateY(-10px); } .gfw-blue-heart__icon--case.icon-hover-in #case { animation: gfw-bank-bounce 0.6s ease-out; } .gfw-blue-heart__icon--case.icon-hover-in #closed { transition: opacity 0s linear 0.12s; opacity: 0; } .gfw-blue-heart__icon--case.icon-hover-in #open { transition: opacity 0s linear 0.12s; opacity: 1; } .gfw-blue-heart__icon #open { opacity: 0; } .gfw-blue-heart__icon #top { transform-box: fill-box; transform-origin: center; transition: transform 0.12s ease-out; } .gfw-blue-heart__icon--gift.icon-hover-in #gift { animation: gfw-gift-rise 0.5s ease-out; } .gfw-blue-heart__icon--gift.icon-hover-in #top { transform: translate(-10px, -16px) rotate(-15deg); } @keyframes gfw-gift-rise { 0% { transform: translateY(0); } 35% { transform: translateY(-14px); } 60% { transform: translateY(3px); } 80% { transform: translateY(-1px); } 100% { transform: translateY(0); } } .gfw-blue-heart__verb { color: var(--secondary); font-size: 1.5em; font-weight: 900; line-height: 1.2; text-transform: uppercase; } .gfw-blue-heart__description { font-size: var(--role-body-size); --typog-role: body; color: var(--black); font-weight: 600; line-height: 1.2; text-wrap: balance; } .gfw-blue-heart--photo-left .gfw-blue-heart__photo { margin-left: 0; margin-right: auto; } .gfw-green-heart { margin-top: 80px; } .gfw-green-heart .inset { align-items: center; display: grid; gap: 60px; grid-template-columns: 1fr 1.2fr; padding-bottom: 260px; } .gfw-green-heart__copy { color: var(--text-color); padding: 0 40px; } .gfw-green-heart__heart-frame { bottom: 0; left: 0; pointer-events: none; position: absolute; right: 0; top: 0; z-index: -1; } .gfw-green-heart__heart { bottom: -240px; height: 440px; left: 50%; position: absolute; transform: translateX(-50%) translateX(var(--heart-x, 0%)) scale(var(--heart-scale, 1)); width: auto; } .gfw-green-heart__photo { filter: var(--drop-shadow-filter); margin-left: -120px; margin-top: -180px; } .gfw-green-heart__photo img { border-radius: 32px; display: block; height: auto; object-fit: cover; width: 100%; } .gfw-green-heart__heading { font-size: 2.5em; } .gfw-green-heart__body { font-size: var(--role-body-size); --typog-role: body; margin-bottom: 30px; } .gfw-green-heart__quote { background-color: rgba(255, 255, 255, 0.1); border-radius: 16px; color: var(--accent); font-size: 1.5em; font-style: normal; font-weight: 700; margin: 0 0 0 -45px; mix-blend-mode: soft-light; padding: 40px 45px 30px 45px; position: relative; width: calc(100% + 90px); } .gfw-green-heart__quote::before { border: 1px solid var(--accent); border-radius: 16px; content: ''; height: 100%; left: 20px; position: absolute; top: 20px; width: 100%; } .gfw-green-heart__quote--alt { background-color: var(--light-blue); color: var(--teal); margin: 60px 0 0 -35px; mix-blend-mode: normal; padding: 30px 45px 45px 35px; width: calc(100% + 70px); } .gfw-green-heart__quote--alt::before { left: -20px; top: -20px; } .gfw-green-heart--photo-right .inset { grid-template-columns: 1.2fr 1fr; } .gfw-green-heart--photo-right .gfw-green-heart__photo { margin-left: 0; margin-right: -120px; order: 1; } .gfw-participating-foundations { background-color: var(--white); margin-top: -120px; text-align: center; } .gfw-participating-foundations__cta { color: var(--primary); line-height: 1.3; margin: 0 auto 20px; max-width: 800px; text-wrap: balance; } .gfw-participating-foundations__cta-heading { font-size: 2.5em; font-weight: 700; } .gfw-participating-foundations__cta p { font-size: 1.25rem; } .gfw-participating-foundations__grid { align-items: flex-end; display: flex; flex-wrap: nowrap; gap: 40px; justify-content: space-between; } .gfw-participating-foundations__item { display: block; min-width: 0; transition: transform var(--transition-duration) ease-in-out; } .gfw-participating-foundations__item:hover { transform: scale(1.08); } .gfw-participating-foundations__item img { display: block; height: auto; max-width: 100%; } @media screen and (max-width: 960px) { .gfw-participating-foundations__grid { display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center; } } @media screen and (max-width: 768px) { .gfw-participating-foundations__cta { font-size: 1.25em; } .gfw-participating-foundations__grid { grid-template-columns: repeat(1, 1fr); } .gfw-participating-foundations__item { text-align: center; } .gfw-participating-foundations__item img { margin: auto; max-width: 80%; } } @media screen and (max-width: 768px) { .mobile-only { display: block; } .not-mobile { display: none; } #is-mobile { display: block; } body h1 { font-size: 2.5em; } body h2 { font-size: 2em; } body h3 { font-size: 1.5em; } header#header { --header-height: 90px; } header#header .branding a img { width: 150px; } header#header nav { background-color: var(--white); display: flex; flex-direction: column; height: calc(100vh - var(--header-height)); justify-content: flex-start; left: 0; opacity: 0; overflow-y: auto; padding: 30px 20px; pointer-events: none; position: fixed; top: var(--header-height); width: 100vw; z-index: 1000; } header#header nav > div { height: auto; } header#header nav ul { flex-direction: column; height: auto; opacity: 0; pointer-events: none; transition: all 0.2s ease-in-out; width: 100%; } header#header nav ul li { height: auto; text-align: center; width: 100%; } header#header nav ul li a { color: var(--black); font-size: 1.5rem; height: auto; padding: 10px; } header#header nav ul li.menu-item-has-children:hover ul { animation: none; } header#header nav ul li ul { background-color: transparent; box-shadow: none; display: flex; flex-direction: column; height: auto; left: 0; min-width: 0; padding: 0; position: relative; top: 0; } header#header nav ul li ul li a { font-size: 1.1rem; opacity: 0.7; } header#header .mobile-menu-button { --line-inset: 12px; cursor: pointer; display: flex; height: 50px; justify-content: center; position: absolute; right: 10px; top: 20px; width: 50px; z-index: 1001; } header#header .mobile-menu-button__line { background-color: var(--primary); border-radius: 2px; height: 4px; left: var(--line-inset); position: absolute; top: calc(var(--line-inset) + 4px); transition: all 0.2s ease-in-out; width: calc(100% - (var(--line-inset) * 2)); } header#header .mobile-menu-button__line:nth-child(2) { top: 50%; transform: translateY(-50%); } header#header .mobile-menu-button__line:nth-child(3) { top: auto; bottom: calc(var(--line-inset) + 4px); } header#header .mobile-menu-button--active .mobile-menu-button__line:nth-child(1) { top: 23px; transform: rotate(45deg); } header#header .mobile-menu-button--active .mobile-menu-button__line:nth-child(2) { opacity: 0; } header#header .mobile-menu-button--active .mobile-menu-button__line:nth-child(3) { bottom: 23px; transform: rotate(-45deg); } body.menus--active { overflow: hidden; } body.menus--active header#header { position: fixed; } body.menus--active header#header nav { opacity: 1; pointer-events: all; } body.menus--active header#header nav ul { opacity: 1; pointer-events: all; } body.admin-bar nav { top: calc(var(--header-height) + var(--admin-bar-height)) !important; height: calc(100vh - var(--header-height) - var(--admin-bar-height)) !important; } body.admin-bar.menus--active header#header { top: var(--admin-bar-height); } section .inset { padding: 40px 20px; } .page-header .inset .copy { min-width: calc(100% - 20px); } .page-header .inset .copy h1 { font-size: 2.5em; } .columns { flex-direction: column; gap: 30px; } .columns__column { width: 100%; } .blog-content .inset { flex-direction: column; } .blog-content__posts { grid-template-columns: 1fr; } .blog-content__sidebar { width: 100%; } footer#footer .inset { gap: 30px; padding: 40px 20px; } footer#footer .social-links ul { justify-content: center; } header#header .branding a img { height: 90px; } .gfw-hero .inset { padding-top: 40px; } .gfw-hero__heading { font-size: clamp(3.25em, 6vw, 4.5em); order: 0; } .gfw-hero__map-spacer { order: 2; width: 80%; } .gfw-hero__body { order: 3; } .gfw-hero__cta { order: 4; } .gfw-impact-stat .inset, .gfw-impact-detail .inset, .gfw-story .inset, .gfw-green-heart .inset { grid-template-columns: 1fr; } .gfw-impact-stat .inset, .gfw-green-heart .inset { padding-bottom: 60px; } .gfw-impact-stat__photo { margin-right: 0; margin-top: 0; } .gfw-impact-stat__copy, .gfw-green-heart__copy { padding: 0 20px; } .gfw-impact-stat__heart, .gfw-green-heart__heart { display: none; } .gfw-green-heart__photo { margin-left: 0; margin-top: 0; } .gfw-impact-stat__quote { margin-left: -20px; padding: 30px 45px 20px 35px; width: calc(100% + 40px); } .gfw-impact-stat__quote::before { left: 10px; top: 10px; } .gfw-green-heart__quote { margin-left: -20px; width: calc(100% + 40px); } .gfw-green-heart__quote--alt::before { left: -10px; top: -10px; } .gfw-impact-detail__photo { margin-left: 0; margin-top: 0; } .gfw-story__photo { align-self: auto; height: auto; margin-right: 0; margin-top: 0 !important; } .gfw-story__regions { margin-left: -20px; width: calc(100% + 40px); } .gfw-story__copy { padding: 0 20px; } .gfw-blue-heart__heading-row { grid-template-columns: 1fr; } .gfw-blue-heart__heading { font-size: 3em; overflow-wrap: break-word; } .gfw-blue-heart__top { padding: 0 20px 80px; } .gfw-blue-heart--no-photo .gfw-blue-heart__top { padding-bottom: 20px; } .gfw-blue-heart__intro { margin-top: 0; } .gfw-blue-heart__intro-body { font-size: 1.375em; } .gfw-blue-heart__intro-wrap { padding: 40px 20px 20px; } .gfw-blue-heart__photo { margin: 0 auto; max-width: 100%; } .gfw-blue-heart__grid { grid-template-columns: 1fr; margin-bottom: 50px; } .gfw-green-heart { margin-top: 40px; } .gfw-participating-foundations__cta-heading { font-size: 2em; } header#header nav ul li.nav-cta { margin-bottom: 0; margin-top: 10px; } } /*# sourceMappingURL=style.less.css.map */