/* elementor-post-166501 */ .elementor-166501 .elementor-element.elementor-element-f297893{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;} /* ght-font */ /* GHH Toolkit fonts, served from the plugin: latin variable Schibsted Grotesk (home hero), Onest (appeal pages — GoFundMe-style type, the user's choice) and Amiri for Arabic. */ @font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("https://ghh.org.uk/wp-content/plugins/ghh-toolkit/assets/fonts/onest-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("https://ghh.org.uk/wp-content/plugins/ghh-toolkit/assets/fonts/schibsted-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Schibsted Grotesk"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("https://ghh.org.uk/wp-content/plugins/ghh-toolkit/assets/fonts/schibsted-grotesk-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Amiri"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://ghh.org.uk/wp-content/plugins/ghh-toolkit/assets/fonts/amiri-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } /* ght-base */ /* ========================================================================== * GHH Toolkit — base: tokens, reset, type, buttons. * * "Cinematic story" (approved mockup, ~/Sites/ghh-home-mockup): GHH's own * footage carries the page; dark and quiet around the pictures, the brand * blue for every action, the logo's gold for hope. One family, Schibsted * Grotesk; Amiri for Arabic. * * Tokens are prefixed --ght- (Elementor containers define --display, --gap, * --width… and a token with one of those names would be overwritten). * Every widget root carries `ght`; rules are written `.ght .x` (0,2,0) so they * beat Hello's resets — including its magenta button hover (0,1,1) — while * Elementor's own control CSS (0,3,0+) still wins. * ======================================================================== */ :root { --ght-blue: #1B9DD9; --ght-blue-d: #137CB0; --ght-night: #06141E; --ght-ink: #0B2638; --ght-ink-2: #24435A; --ght-gold: #F4A51E; --ght-mist: #EEF4F7; --ght-line: #D6E2E9; --ght-mute: #5B7182; --ght-r: 14px; --ght-pad: clamp(16px, 4vw, 64px); --ght-max: 1360px; --ght-f: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --ght-ease: cubic-bezier(.2, .7, .2, 1); --ght-hdr: 72px; --ght-tuck: 20px; /* how far the page runs up under the header's rounded bottom (header.css) */ /* the design system (DESIGN-SYSTEM.md): the calm look's extra colours, and the four corner sizes */ --ght-soft: #E9F6FD; --ght-page: #F6F8FA; --ght-gold-soft: #FDF1DA; --ght-ok: #1E874B; --ght-ok-soft: #EEF8F2; --ght-err: #C5281C; --ght-err-soft: #FDF1F0; --ght-r-s: 8px; --ght-r-m: 12px; --ght-r-l: 16px; --ght-r-xl: 20px; --ght-ui: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --ght-float: 0 24px 60px -20px rgba(6, 20, 30, .35); } body.ght-site { margin: 0; background: #fff; color: var(--ght-ink); font: 400 17px/1.6 var(--ght-f); -webkit-font-smoothing: antialiased; overflow-x: clip; } html:has(body.ght-site) { scroll-padding-top: calc(var(--ght-hdr) + 16px); overflow-x: hidden; } body.ght-site .site-main, body.ght-site .page-content, body.ght-site .page-header { margin: 0; padding: 0; max-width: none; } body.ght-site .page-header .entry-title { display: none; } html.ght-lock, html.ght-lock body { overflow: hidden; overscroll-behavior: none; } html.ght-lock .sky-whatsapp-widget { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .ght { position: relative; font-family: var(--ght-f); color: var(--ght-ink); line-height: 1.6; -webkit-font-smoothing: antialiased; } .ght *, .ght *::before, .ght *::after { box-sizing: border-box; } .ght img, .ght video { display: block; max-width: 100%; } .ght img { height: auto; } .ght a { color: inherit; } .ght h1, .ght h2, .ght h3, .ght h4, .ght p, .ght ul, .ght ol, .ght dl, .ght dd, .ght figure, .ght blockquote, .ght address { margin: 0; } .ght ul, .ght ol { padding: 0; list-style: none; } .ght address { font-style: normal; } .ght button, .ght input, .ght select { font: inherit; color: inherit; } /* a site-wide rule capitalises every button's words; GHH writes in sentence case */ .ght button, .ght .btn { text-transform: none; } .ght svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ght :focus-visible { outline: 2px solid var(--ght-blue); outline-offset: 3px; } .ght .wrap { width: 100%; max-width: var(--ght-max); margin: 0 auto; padding: 0 var(--ght-pad); } /* an empty widget's note in the Elementor editor (GHT_Widget_Base::editor_hint) */ .ght.ght-hint { margin: 0; padding: 24px; border: 1px dashed var(--ght-line); border-radius: var(--ght-r-m); color: var(--ght-mute); font-size: 15px; } .ght .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── type ── */ .ght h1, .ght h2, .ght h3 { font-family: var(--ght-f); color: inherit; } .ght .h2 { font-size: clamp(34px, 4.4vw, 64px); font-weight: 800; line-height: 1; letter-spacing: -.03em; text-wrap: balance; } .ght .h2--light { color: #fff; } .ght .lead { max-width: 46ch; font-size: 18px; color: var(--ght-mute); text-wrap: pretty; } .ght .lead--light { color: rgba(255, 255, 255, .7); } .ght .more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; color: var(--ght-gold); } .ght .more svg { transition: transform .2s var(--ght-ease); } .ght .more:hover svg { transform: translateX(4px); } .ght .rec { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #FF4D3D; animation: ght-pulse 1.8s infinite; } @keyframes ght-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 61, .6); } 70% { box-shadow: 0 0 0 8px rgba(255, 77, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 61, 0); } } /* ── buttons (states restate background-color: Hello paints buttons magenta) ── */ .ght .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; max-width: 100%; margin: 0; padding: 0 24px; border: 0; border-radius: 999px; background-color: transparent; font-family: var(--ght-f); font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none; text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; transition: background-color .2s, transform .15s, box-shadow .2s; } .ght .btn:active { transform: translateY(1px); } .ght .btn--blue, .ght .btn--blue:focus { background-color: var(--ght-blue); color: #fff; } .ght .btn--blue:hover, .ght .btn--blue:focus-visible { background-color: var(--ght-blue-d); color: #fff; box-shadow: 0 10px 30px -10px rgba(27, 157, 217, .8); } .ght .btn--gold, .ght .btn--gold:focus { background-color: var(--ght-gold); color: var(--ght-ink); } .ght .btn--gold:hover, .ght .btn--gold:focus-visible { background-color: #ffb73b; color: var(--ght-ink); } .ght .btn--ink, .ght .btn--ink:focus { background-color: var(--ght-ink); color: #fff; } .ght .btn--ink:hover, .ght .btn--ink:focus-visible { background-color: var(--ght-ink-2); color: #fff; } .ght .btn--white, .ght .btn--white:focus { background-color: #fff; color: var(--ght-ink); } .ght .btn--white:hover, .ght .btn--white:focus-visible { background-color: var(--ght-mist); color: var(--ght-ink); } .ght .btn--line, .ght .btn--line:focus { box-shadow: inset 0 0 0 1.5px currentColor; background-color: transparent; color: var(--ght-ink); } .ght .btn--line:hover, .ght .btn--line:focus-visible { background-color: var(--ght-ink); color: #fff; box-shadow: inset 0 0 0 1.5px var(--ght-ink); } .ght .btn--s { min-height: 40px; padding: 0 18px; font-size: 15px; } .ght .btn--l { min-height: 56px; padding: 0 30px; font-size: 17px; } .ght .btn svg { width: 20px; height: 20px; } .ght .btns { display: flex; flex-wrap: wrap; gap: 12px; } /* ── cards: the photo and the title open what the card is about (user: "make the image and title clickable"). The photo's link covers it (inside a position: relative box) and is skipped by keyboard and screen readers, which reach the same page through the title. ── */ .ght .ght-cover { position: absolute; inset: 0; z-index: 2; } .ght .ght-tlink { color: inherit; text-decoration: none; } .ght .ght-tlink:hover { color: var(--ght-blue-d); } /* ── shared by the page sections (1.4.0) ── */ /* tones: white (default), mist, night */ .ght.t-mist { background-color: var(--ght-mist); } .ght.t-night { background-color: var(--ght-night); color: #fff; } .ght.t-night .lead, .ght.t-night .rich { color: rgba(255, 255, 255, .74); } .ght.t-night .btn--line, .ght.t-night .btn--line:focus { color: #fff; } .ght.t-night .btn--line:hover { background-color: #fff; color: var(--ght-ink); box-shadow: inset 0 0 0 1.5px #fff; } .ght .kick { margin-bottom: 14px; font-size: 15px; font-weight: 700; color: var(--ght-blue-d); } .ght.t-night .kick { color: var(--ght-gold); } /* breadcrumb inside a section */ .ght .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; font-weight: 600; color: var(--ght-mute); } .ght .crumbs a { text-decoration: none; } .ght .crumbs a:hover { color: var(--ght-blue-d); } .ght .crumbs span[aria-hidden] { opacity: .5; } .ght .crumbs [aria-current] { color: var(--ght-ink); } /* long text written in the editor */ .ght .rich { font-size: 17px; line-height: 1.7; color: var(--ght-ink-2); text-wrap: pretty; } .ght .rich > * + * { margin-top: 1em; } .ght .rich h2, .ght .rich h3, .ght .rich h4 { margin-top: 1.6em; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; color: var(--ght-ink); } .ght .rich h2 { font-size: clamp(24px, 2.2vw, 30px); } .ght .rich h3 { font-size: 21px; } .ght .rich h4 { font-size: 18px; } .ght .rich > :first-child { margin-top: 0; } .ght .rich ul, .ght .rich ol { padding-left: 1.3em; } .ght .rich ul { list-style: disc; } .ght .rich ol { list-style: decimal; } .ght .rich li + li { margin-top: .4em; } .ght .rich li::marker { color: var(--ght-blue); } .ght .rich a { color: var(--ght-blue-d); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .ght .rich strong, .ght .rich b { font-weight: 700; color: var(--ght-ink); } .ght.t-night .rich strong, .ght.t-night .rich b, .ght.t-night .rich h2, .ght.t-night .rich h3 { color: #fff; } .ght.t-night .rich a { color: var(--ght-gold); } .ght .rich table { width: 100%; border-collapse: collapse; font-size: 15px; } /* wide tables (policies) scroll on their own on phones instead of widening the page */ @media (max-width: 760px) { .ght .rich table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } .ght .rich th, .ght .rich td { padding: 10px 12px; border-bottom: 1px solid var(--ght-line); text-align: left; vertical-align: top; } .ght .rich img { border-radius: 12px; } /* every page section: vertical rhythm */ .ght.sec { padding: clamp(64px, 8vw, 120px) 0; } /* two sections of the same light tone in a row: a line between them, less space */ .e-con:has(> .elementor-widget > .elementor-widget-container > .ght.t-white) + .e-con:has(> .elementor-widget > .elementor-widget-container > .ght.t-white) .ght.sec, .e-con:has(> .elementor-widget > .ght.t-white) + .e-con:has(> .elementor-widget > .ght.t-white) .ght.sec { border-top: 1px solid var(--ght-line); } /* another plugin's widget (SkyDonate cards, reviews, calculators) in a page: a container with the class ght-sec (+ ght-sec--mist / ght-sec--night) gives it the GHH width and spacing */ .e-con.ght-sec { --padding-top: clamp(56px, 7vw, 104px); --padding-bottom: clamp(56px, 7vw, 104px); --padding-left: var(--ght-pad); --padding-right: var(--ght-pad); --content-width: var(--ght-max); --gap: 24px; --row-gap: 24px; } .e-con.ght-sec--mist { background-color: var(--ght-mist); } .e-con.ght-sec--night { background-color: var(--ght-night); color: #fff; } .e-con.ght-sec > .e-con-inner { max-width: calc(var(--ght-max) - 2 * var(--ght-pad)); } .e-con.ght-sec .ght.gtt { margin-bottom: 8px; } /* lists (templates/archive.php): edge to edge like the Elementor pages (Hello narrows non-Elementor pages) */ body.ght-site main.site-main.ght-list-page { width: 100%; max-width: none; margin: 0; padding: 0; } /* search box and page numbers */ .ght .ght-search { display: flex; gap: 10px; max-width: 560px; margin-top: 28px; } .ght .ght-search input { flex: 1; min-width: 0; min-height: 52px; padding: 0 20px; border: 1px solid var(--ght-line); border-radius: 999px; background: #fff; font: 500 16px var(--ght-f); color: var(--ght-ink); } .ght .ght-search input:focus { border-color: var(--ght-blue); outline: 2px solid rgba(27, 157, 217, .25); } .ght .ght-search .btn { min-height: 52px; } .ght .ght-pages { margin-top: 40px; } .ght .ght-pages ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .ght .ght-pages a, .ght .ght-pages span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px; background: #fff; font-weight: 700; text-decoration: none; color: var(--ght-ink); } .ght .ght-pages .current { background: var(--ght-ink); color: #fff; } .ght .ght-pages a:hover { background: var(--ght-blue); color: #fff; } /* the SEO "ways to give" link boxes (mu-plugins ghh-*-hub*, inline styles: Zakat, Sadaqah Jariyah, water, masjids, Fidyah/Kaffarah) in the GHH look */ body.ght-site :is(.ghh-zakat-hub, .ghh-sadaqah-hub, .ghh-water-hub, .ghh-masjid-hub, .ghh-fk-hub) { max-width: calc(var(--ght-max) - 2 * var(--ght-pad)) !important; margin: 0 auto clamp(56px, 7vw, 104px) !important; padding: clamp(24px, 3vw, 40px) !important; border: 0 !important; border-radius: 26px !important; background: var(--ght-night) !important; color: #fff; font-family: var(--ght-f) !important; } @media (max-width: 1440px) { body.ght-site :is(.ghh-zakat-hub, .ghh-sadaqah-hub, .ghh-water-hub, .ghh-masjid-hub, .ghh-fk-hub) { margin-left: var(--ght-pad) !important; margin-right: var(--ght-pad) !important; } } body.ght-site :is(.ghh-zakat-hub, .ghh-sadaqah-hub, .ghh-water-hub, .ghh-masjid-hub, .ghh-fk-hub) h2 { font-size: clamp(26px, 2.6vw, 38px) !important; font-weight: 800; letter-spacing: -.02em; color: #fff !important; } body.ght-site :is(.ghh-zakat-hub, .ghh-sadaqah-hub, .ghh-water-hub, .ghh-masjid-hub, .ghh-fk-hub) p { color: rgba(255, 255, 255, .7) !important; } body.ght-site :is(.ghh-zakat-hub, .ghh-sadaqah-hub, .ghh-water-hub, .ghh-masjid-hub, .ghh-fk-hub) ul { gap: 10px 28px !important; } body.ght-site :is(.ghh-zakat-hub, .ghh-sadaqah-hub, .ghh-water-hub, .ghh-masjid-hub, .ghh-fk-hub) ul a { color: var(--ght-gold) !important; } body.ght-site :is(.ghh-zakat-hub, .ghh-sadaqah-hub, .ghh-water-hub, .ghh-masjid-hub, .ghh-fk-hub) ul a:hover { text-decoration: underline !important; } body.ght-site :is(.ghh-zakat-hub, .ghh-sadaqah-hub, .ghh-water-hub, .ghh-masjid-hub, .ghh-fk-hub) div a { padding: 0 24px !important; min-height: 48px; display: inline-flex !important; align-items: center; border-radius: 999px !important; background: #fff !important; color: var(--ght-ink) !important; } /* the main action blue: the second of two, or a lone button */ body.ght-site :is(.ghh-zakat-hub, .ghh-sadaqah-hub, .ghh-water-hub, .ghh-masjid-hub, .ghh-fk-hub) div a:only-child, body.ght-site :is(.ghh-zakat-hub, .ghh-sadaqah-hub, .ghh-water-hub, .ghh-masjid-hub, .ghh-fk-hub) div a + a { background: var(--ght-blue) !important; color: #fff !important; } /* the GHH Reels block when a page shows it on its own (SkyDonate app widget, via shortcode): on the page's content column, section spacing, a sentence-case label. The homepage films section styles its own copy. */ body.ght-site .ghhr { padding: clamp(56px, 7vw, 104px) 0; } body.ght-site .e-con:has(.ghhr) { padding-left: 0 !important; padding-right: 0 !important; } /* its template's container adds 16px more */ body.ght-site .ghhr-inner { max-width: calc(var(--ght-max) - 2 * var(--ght-pad)); margin: 0 auto; } @media (max-width: 1440px) { body.ght-site .ghhr-inner { margin: 0; padding-left: var(--ght-pad); padding-right: var(--ght-pad); } } body.ght-site .ghhr-eyebrow { font-family: var(--ght-ui) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; } /* the Reels section, its pop-up and phone feed in the site's UI font (the app plugin forces Manrope, which GHT_Speed no longer loads); icons keep their own font */ body.ght-site :is(.ghhr, .ghhr-lb, .ghhr-feed), body.ght-site :is(.ghhr, .ghhr-lb, .ghhr-feed) *:not(i):not([class*="fa-"]) { font-family: var(--ght-ui) !important; } /* round icon button */ .ght .ico, .ght .ico:hover, .ght .ico:focus { position: relative; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background-color: transparent; color: inherit; cursor: pointer; text-decoration: none; } .ght .ico:hover { background-color: var(--ght-mist); } .ght .ico svg { width: 22px; height: 22px; } /* the box fixed overlays move into (GHT.portal): takes no room, sets no type */ .ght.ght-portal { position: static; height: 0; line-height: inherit; } /* reveal on scroll (added by scripts; never hides content without JS) */ .ght .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ght-ease), transform .9s var(--ght-ease); } .ght .rv.is-in { opacity: 1; transform: none; } /* Elementor: sections sit edge to edge */ .elementor-widget[class*="elementor-widget-ght_"] > .elementor-widget-container { margin: 0; padding: 0; } /* a section holding a film, alone in its container: a definite width. On phones Chrome sized the container from the film at zero width (its 16:9 box has only absolute content), so the container came out ~130px short and the next section ran over the film (/insights/aqiqah-uk-2026/) */ :is(.e-con, .e-con > .e-con-inner) > .elementor-widget[class*="elementor-widget-ght_"]:only-child:has(.ght.gtv) { width: 100%; } .e-con:has(> .elementor-widget[class*="elementor-widget-ght_"]) { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; } /* ── Alerts (user: every alert in the site's style). WooCommerce's success / info / error messages and SkyDonate's own, everywhere: a calm tinted box with a hairline, a drawn icon (WooCommerce's icon font showed as an empty square), the text, and any button on the right (under the text when there's no room). ── */ body.ght-site :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .skydonate-gift-aid-enabled-notice) { --al-bg: var(--ght-mist); --al-line: var(--ght-line); --al-ink: var(--ght-ink); --al-ico: var(--ght-blue-d); --al-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 5h2v2h-2V7Zm0 4h2v6h-2v-6Z'/%3E%3C/svg%3E"); position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; width: auto; margin: 0 0 18px; padding: 14px 16px 14px 48px; border: 1px solid var(--al-line) !important; border-radius: 10px; background: var(--al-bg) !important; box-shadow: none; color: var(--al-ink) !important; font: 400 15px/1.5 var(--ght-f); list-style: none; text-align: left; } body.ght-site :is(.woocommerce-message, .skydonate-gift-aid-enabled-notice) { --al-bg: #EEF8F2; --al-line: #C4E5D0; --al-ink: #14532D; --al-ico: #1E874B; --al-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 14.2-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7Z'/%3E%3C/svg%3E"); } body.ght-site .woocommerce-error { --al-bg: #FDF1F0; --al-line: #F2CBC7; --al-ink: #8F1D14; --al-ico: #C5281C; --al-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 5h2v7h-2V7Zm0 9h2v2h-2v-2Z'/%3E%3C/svg%3E"); display: block; } body.ght-site :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .skydonate-gift-aid-enabled-notice)::before { content: "" !important; position: absolute; left: 16px; top: 15px; width: 20px; height: 20px; margin: 0; font-family: inherit !important; background: var(--al-ico); -webkit-mask: var(--al-mark) center / contain no-repeat; mask: var(--al-mark) center / contain no-repeat; } /* WooCommerce focuses a new alert (for screen readers): no heavy outline for that, keyboard focus still shows */ body.ght-site :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notices-wrapper):focus:not(:focus-visible) { outline: none; } body.ght-site .woocommerce-error li { margin: 0; padding: 0; list-style: none; } body.ght-site .woocommerce-error li + li { margin-top: 4px; } body.ght-site :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* the button: the site's quiet outline pill, on the right */ body.ght-site :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button { order: 2; float: none !important; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; margin: 0 0 0 auto !important; padding: 0 16px !important; border: 1px solid currentColor !important; border-radius: 999px !important; background: #fff !important; box-shadow: none !important; color: var(--al-ink) !important; font: 600 14px/1 var(--ght-f) !important; text-transform: none; letter-spacing: 0; white-space: nowrap; text-decoration: none; } body.ght-site :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button:hover { background: var(--al-ink) !important; color: #fff !important; } @media (max-width: 600px) { body.ght-site :is(.woocommerce-message, .woocommerce-info) .button { margin: 2px 0 0 !important; } } @media (max-width: 760px) { :root { --ght-hdr: 64px; } body.ght-site { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { /* no transitions at all: a .01ms duration would make every property transition, and scripts that measure right after a change would read stale values */ .ght *, .ght *::before, .ght *::after { animation: none !important; transition: none !important; } .ght .rv { opacity: 1; transform: none; } } /* ght-header */ /* GHH Header — always white, sticky, above the film. */ /* the page runs 20px up under the header, so its rounded bottom shows against the content even at the top of the page (with nothing under the corners they blended into the plain page background) */ .ght-site-header { position: sticky; z-index: 100; top: var(--wp-admin--admin-bar--height, 0px); margin-bottom: calc(-1 * var(--ght-tuck, 20px)); transition: transform .3s var(--ght-ease); } /* …so a page that starts with no top padding of its own got its first 20px hidden under the header. Every page now starts at least the tuck + 16px below it, by itself (user: no per-page padding). Raised to that minimum, never added on top of a page's own padding. Not when the page opens with a toolkit section (hero, page header…): those keep their background running up under the curve and already sit their content clear of it. */ body.ght-site .ght-site-header ~ .elementor > .e-con:first-child:not(:has(> [data-widget_type^="ght_"]:first-child, > .e-con:first-child > [data-widget_type^="ght_"]:first-child, > .e-con:first-child > .e-con:first-child > [data-widget_type^="ght_"]:first-child)), body.ght-site .ght-site-header ~ main.ght-main > .elementor:first-child > .e-con:first-child:not(:has(> [data-widget_type^="ght_"]:first-child, > .e-con:first-child > [data-widget_type^="ght_"]:first-child, > .e-con:first-child > .e-con:first-child > [data-widget_type^="ght_"]:first-child)) { padding-top: max(var(--padding-top, 0px), calc(var(--ght-tuck, 20px) + 16px)); padding-block-start: max(var(--padding-top, 0px), calc(var(--ght-tuck, 20px) + 16px)); } /* (a list page — appeal categories, blog — opening with a toolkit widget printed in Elementor's wrapper counts as a toolkit section too: /donate-category/… had a 36px strip above its photo hero) */ body.ght-site .ght-site-header ~ main.site-main:not(:has(> .ght:first-child, > [data-widget_type^="ght_"]:first-child)) { padding-top: max(var(--ght-pt, 0px), calc(var(--ght-tuck, 20px) + 16px)); } /* the Sky Prayer pages pull their breadcrumb bar up 40px (inline style) to cancel the old theme's top padding: here the spacing above does that job, so the bar stays where it is (it sat under the header) */ body.ght-site .ght-site-header ~ main:not(.ght-main) .sptg > .spt-ds-crumbs.spt-ds-bleed:first-child { margin-top: 0 !important; } /* slid away while scrolling down (header.js), back on the way up */ .ght-site-header.is-tucked { transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px))); } /* phones (600px and under): WordPress's admin bar scrolls away with the page instead of staying fixed, so a signed-in visitor's header must not keep its 46px gap below where the bar was (user) */ @media screen and (max-width: 600px) { .ght-site-header { top: 0; } .ght-site-header.is-tucked { transform: translateY(-100%); } } @media (prefers-reduced-motion: reduce) { .ght-site-header { transition: none; } } /* bottom corners rounded at every size, on every page (user) */ .ght.hdr { border-radius: 0 0 20px 20px; background-color: rgba(255, 255, 255, .97); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 #D5DCE4, 0 10px 24px -14px rgba(11, 38, 56, .28); color: var(--ght-ink); } .ght .hdr__in { display: flex; align-items: center; gap: 24px; height: var(--ght-hdr); max-width: 1600px; margin: 0 auto; padding: 0 var(--ght-pad); } .ght .hdr__logo { display: block; flex: none; } .ght .hdr__logo img { width: 236px; height: auto; } /* desktop: logo | menu in the true centre | tools (user). Below 1280px there isn't room for equal side columns, so the menu follows the logo as before. */ .ght .hdr__nav { margin-right: auto; } @media (min-width: 1280px) { .ght .hdr__in { display: grid; grid-template-columns: 1fr auto 1fr; } .ght .hdr__logo { justify-self: start; } .ght .hdr__nav { margin: 0; } .ght .hdr__tools, .ght .hdr__nav + .hdr__tools { justify-self: end; margin-left: 0; } .ght .hdr__logo + .hdr__tools { grid-column: 3; } } /* menu: top level in a row, sub-items in a dropdown */ .ght .hdr__list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } .ght .hdr__list > li { position: relative; } .ght .hdr__list > li > a { display: block; padding: 8px 11px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; opacity: .92; transition: background-color .2s; } .ght .hdr__list > li > a:hover, .ght .hdr__list > li:focus-within > a { background-color: var(--ght-mist); opacity: 1; } .ght .hdr__list > li.menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); opacity: .6; } .ght .hdr__list .sub-menu { position: absolute; z-index: 5; left: 0; top: 100%; min-width: 240px; margin: 8px 0 0; padding: 8px; list-style: none; border-radius: 16px; background: #fff; box-shadow: 0 24px 50px -20px rgba(11, 38, 56, .35), 0 0 0 1px var(--ght-line); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; } .ght .hdr__list .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } .ght .hdr__list > li:hover > .sub-menu, .ght .hdr__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .ght .hdr__list .sub-menu a { display: block; padding: 9px 12px; border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; } .ght .hdr__list .sub-menu a:hover { background-color: var(--ght-mist); color: var(--ght-blue-d); } /* mega menus (a top item with the class "mega"): a panel under the whole header bar, its sub-items as icon cards in three columns, filled down each column (the order GHH set them in) */ .ght .hdr__in { position: relative; } .ght .hdr__list > li.mega { position: static; } .ght .hdr__list > li.mega > .sub-menu { left: 50%; top: calc(100% - 6px); display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--mega-rows, 4), auto); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; width: min(1080px, calc(100vw - 2 * var(--ght-pad))); min-width: 0; margin: 0; padding: 20px; border-radius: var(--ght-r-xl); transform: translate(-50%, 6px); } .ght .hdr__list > li.mega > .sub-menu::before { top: -24px; height: 24px; } .ght .hdr__list > li.mega:hover > .sub-menu, .ght .hdr__list > li.mega:focus-within > .sub-menu, .ght .hdr__list > li.mega.is-open > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .ght .hdr__list > li.mega > .sub-menu > li { margin: 0; } .ght .hdr__list .sub-menu .mega__a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--ght-r-m); color: var(--ght-ink); text-decoration: none; transition: background-color .2s; } .ght .hdr__list .sub-menu .mega__a:hover, .ght .hdr__list .sub-menu .mega__a:focus-visible { background-color: var(--ght-mist); color: var(--ght-ink); } .ght .mega__ic { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ght-soft); color: var(--ght-blue-d); transition: background-color .2s, color .2s; } .ght .mega__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ght .mega__a:hover .mega__ic, .ght .mega__a:focus-visible .mega__ic { background: var(--ght-blue); color: #fff; } .ght .mega__tx { display: grid; gap: 2px; min-width: 0; } .ght .mega__t { font-size: 15px; font-weight: 700; line-height: 1.25; } .ght .mega__d { font-size: 13.5px; font-weight: 400; line-height: 1.35; color: var(--ght-mute); } .ght .hdr__list .current-menu-item > .mega__a .mega__ic { background: var(--ght-blue); color: #fff; } .ght .hdr__tools { display: flex; align-items: center; gap: 4px; margin-left: auto; } .ght .hdr__nav + .hdr__tools { margin-left: 0; } .ght .hdr__basket .ght-basket-n { position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--ght-gold); color: var(--ght-ink); font-size: 11px; font-weight: 800; line-height: 17px; text-align: center; } .ght .hdr__basket .ght-basket-n[hidden] { display: none; } /* Donate: lighter and slimmer than the page's buttons (user) */ .ght .btn.hdr__give { min-height: 44px; margin-left: 8px; padding: 0 22px; font-size: 15px; font-weight: 600; } .ght .hdr__burger { display: none; } /* appeal pages: while the appeal's pop-up is fetched the first time (header.js) */ .ght .btn.is-busy { opacity: .7; cursor: progress; } /* search bar under the header */ .ght .hdr__search { padding: 14px 0 18px; border-top: 1px solid var(--ght-line); border-radius: 0 0 20px 20px; background: #fff; } .ght .hdr__search[hidden] { display: none; } .ght .hdr__search form { display: flex; gap: 8px; max-width: 900px; } .ght .hdr__search input { flex: 1; min-width: 0; min-height: 52px; padding: 0 22px; border: 1.5px solid var(--ght-line); border-radius: 999px; background: var(--ght-mist); font-size: 17px; outline: none; } .ght .hdr__search input:focus { border-color: var(--ght-blue); background: #fff; } /* menu drawer (tablets and phones). It lives in (header.js moves it there), so every rule is rooted on .ght.mnav itself. Phones: the whole screen; tablets: a 420px panel over a dimmed page. */ .ght.mnav { position: fixed; z-index: 1000000; inset: 0; line-height: 1.4; } .ght.mnav[hidden] { display: none; } .mnav__scrim { position: absolute; inset: 0; background: rgba(6, 20, 30, .45); opacity: 0; transition: opacity .32s var(--ght-ease); } .mnav__panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(420px, 100%); background: #fff; box-shadow: -1px 0 0 var(--ght-line); transform: translateX(100%); transition: transform .32s var(--ght-ease); } .ght.mnav.is-open .mnav__scrim { opacity: 1; } .ght.mnav.is-open .mnav__panel { transform: none; } @media (prefers-reduced-motion: reduce) { .mnav__scrim, .mnav__panel { transition: none; } } .mnav__panel:focus { outline: 0; } /* the × lands where the ☰ was */ .mnav__top { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; height: var(--ght-hdr); padding: 0 calc(var(--ght-pad) - 6px) 0 var(--ght-pad); border-bottom: 1px solid var(--ght-line); } .mnav__top .hdr__logo { min-width: 0; } .mnav__top .hdr__logo img { width: 172px; max-width: 100%; height: auto; } .ght .mnav__x { flex: none; width: 44px; height: 44px; } /* only the middle scrolls: the top and the Donate footer stay put */ .mnav__body { flex: 1; min-height: 0; padding: 16px var(--ght-pad) 8px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* the mega menus in the drawer: the same icon cards, smaller, in one column */ .mnav__list li.mega > .sub-menu { padding-left: 0; border-left: 0; } .mnav__list .sub-menu .mega__a { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--ght-ink); } .mnav__list .mega__ic { width: 38px; height: 38px; border-radius: 10px; } .mnav__list .mega__ic svg { width: 19px; height: 19px; } .mnav__list .mega__t { font-size: 15.5px; font-weight: 600; } .mnav__list .mega__d { font-size: 13px; } /* search */ .mnav__search { position: relative; margin: 0 0 8px; } .mnav__search svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: var(--ght-ink-2); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; } .ght .mnav__search input { width: 100%; min-height: 50px; margin: 0; padding: 0 16px 0 46px; border: 1px solid var(--ght-line); border-radius: 999px; background: #fff; box-shadow: none; color: var(--ght-ink); font-family: var(--ght-f); font-size: 16px; outline: 0; -webkit-appearance: none; appearance: none; } .ght .mnav__search input:focus { border-color: var(--ght-blue); } .ght .mnav__search input::-webkit-search-cancel-button { -webkit-appearance: none; } /* the menu: a row per item, hairlines between; a parent's chevron folds its sub-links out */ .mnav__list, .mnav__list .sub-menu { margin: 0; padding: 0; list-style: none; } .mnav__list > li { position: relative; display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--ght-line); } .mnav__list > li > a { flex: 1; min-width: 0; display: block; padding: 16px 0; color: var(--ght-ink); font-size: 18px; font-weight: 600; text-decoration: none; } .mnav__list > li.current-menu-item > a, .mnav__list > li.current-menu-ancestor > a, .mnav__list > li.current-menu-parent > a { color: var(--ght-blue-d); } .ght .mnav__more, .ght .mnav__more:hover, .ght .mnav__more:focus { display: grid; flex: none; place-items: center; width: 44px; height: 44px; margin: 0 -10px 0 8px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ght-ink-2); cursor: pointer; } .ght .mnav__more:hover { background: var(--ght-mist); } .mnav__more svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ght-ease); } .mnav__list > li.is-open > .mnav__more svg { transform: rotate(180deg); } .mnav__list .sub-menu { display: none; flex-basis: 100%; margin: -4px 0 12px; padding-left: 14px; border-left: 1px solid var(--ght-line); } .mnav__list > li.is-open > .sub-menu { display: block; animation: ght-mnav-sub .25s var(--ght-ease); } @keyframes ght-mnav-sub { from { opacity: 0; transform: translateY(-4px); } } .mnav__list .sub-menu a { display: block; padding: 10px 0; color: var(--ght-ink-2); font-size: 16px; font-weight: 500; text-decoration: none; } .mnav__list .sub-menu .current-menu-item > a { color: var(--ght-blue-d); font-weight: 600; } .mnav__list a:hover { color: var(--ght-blue-d); } /* footer: Donate, then account and basket */ .mnav__foot { flex: none; display: grid; gap: 4px; padding: 14px var(--ght-pad) calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ght-line); background: #fff; } .ght .btn.mnav__give { width: 100%; min-height: 52px; font-size: 17px; font-weight: 600; } .mnav__links { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; } .ght .mnav__link { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; color: var(--ght-ink); font-size: 15px; font-weight: 600; text-decoration: none; } .ght .mnav__link + .mnav__link { border-left: 1px solid var(--ght-line); } .mnav__link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .mnav__link .ght-basket-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ght-gold); color: var(--ght-ink); font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; } .mnav__link .ght-basket-n[hidden] { display: none; } @media (max-width: 1180px) { .ght .hdr__nav { display: none; } .ght .hdr__burger { display: grid; } /* the tools go to the right edge: with the menu hidden, the desktop "nav + tools" rule (more specific) must not hold them left */ .ght .hdr__tools, .ght .hdr__nav + .hdr__tools { margin-left: auto; } } @media (max-width: 760px) { .ght .hdr__in { gap: 4px; } .ght .hdr__logo img { width: 196px; } /* phones: account, basket, Donate, menu (search is in the menu) */ .ght .hdr__tools .hdr__find { display: none; } /* tight together on every phone (user): 36px icons, no gap, Donate 4px off the basket */ .ght .hdr__tools { gap: 0; } .ght .hdr__tools .ico { width: 36px; height: 36px; } .ght .hdr__basket .ght-basket-n { top: 0; right: -2px; } /* phones (user): a little smaller (34px tall, 12px sides), and 10px clear of the basket icon */ .ght .btn.hdr__give { min-height: 34px; margin: 0 2px 0 10px; padding: 0 12px; font-size: 14px; } } @media (max-width: 420px) { /* logo, account, basket, Donate and menu on one line at 390px. The logo gives way first, so the menu button can never be pushed off a narrow screen (it was, at 360px and below). */ .ght .hdr__logo { flex: 0 1 auto; min-width: 0; } .ght .hdr__logo img { width: 172px; max-width: 100%; } .ght .hdr__tools { flex: none; } /* small screens (user): a smaller word too */ .ght .btn.hdr__give { padding: 0 10px; font-size: 13px; } } @media (max-width: 374px) { /* small phones: the account link moves into the menu (it's in the menu's footer) */ .ght .hdr__tools .hdr__acct { display: none; } } /* elementor-post-166502 */ .elementor-166502 .elementor-element.elementor-element-593b8ec{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;} /* ght-footer */ /* GHH Footer — dark: the big line beside the sign-up (a bordered panel), five columns, then the bottom line: legal, social, links and the Sky Web Design credit (a pill that stands out). Root is .ght.ftr, so footer rules are written .ght .ftr__x (never .ght .ftr .x). */ .ght.ftr { padding: clamp(64px, 8vw, 104px) 0 32px; background: var(--ght-night); color: rgba(255, 255, 255, .68); } .ght .ftr__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 48px; padding-bottom: 56px; } /* always the setting's lines (two), never wrapped further */ .ght .ftr__big { font-size: clamp(42px, 5.6vw, 88px); font-weight: 900; line-height: .92; letter-spacing: -.045em; white-space: nowrap; color: #fff; } /* the sign-up: a bordered panel, no shadow */ .ght .ftr__news { display: grid; gap: 14px; min-width: 0; padding: 28px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 20px; background: rgba(255, 255, 255, .03); } .ght .ftr__news-l { font-size: 18px; font-weight: 600; line-height: 1.35; color: #fff; } /* columns */ .ght .ftr__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; padding: 48px 0; border-top: 1px solid rgba(255, 255, 255, .12); } .ght .ftr__h { margin-bottom: 14px; font-size: 15px; font-weight: 700; color: #fff; } .ght .ftr__cols a, .ght .ftr__cols address { display: block; width: fit-content; padding: 6px 0; font-size: 15px; font-style: normal; line-height: 1.5; text-decoration: none; transition: color .15s; } .ght .ftr__cols address { padding-top: 6px; } .ght .ftr__cols a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .4); } /* bottom line: legal and social on the left, links and the credit on the right */ .ght .ftr__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; } .ght .ftr__copy span + span::before { content: "· "; } .ght .ftr__social { display: flex; gap: 8px; } .ght .ftr__social a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; color: rgba(255, 255, 255, .8); transition: background-color .2s, border-color .2s, color .2s; } .ght .ftr__social a:hover { border-color: var(--ght-blue); background: var(--ght-blue); color: #fff; } /* real brand marks are solid; LinkedIn / unknown fall back to outlines */ .ght .ftr__social svg { width: 17px; height: 17px; fill: currentColor; stroke: none; } .ght .ftr__social svg.is-line { fill: none; stroke: currentColor; stroke-width: 1.8; } .ght .ftr__links { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-left: auto; } .ght .ftr__links a { text-decoration: none; transition: color .15s; } .ght .ftr__links a:hover { color: #fff; } /* the Sky Web Design credit: a pill, the name in white bold, a gold ring on hover */ .ght .ftr__credit { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px 9px 16px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .72); font-size: 14px; text-decoration: none; white-space: nowrap; transition: border-color .2s, background-color .2s, color .2s; } .ght .ftr__credit b { font-weight: 700; color: #fff; } .ght .ftr__credit svg { width: 15px; height: 15px; fill: none; stroke: var(--ght-gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; } .ght .ftr__credit:hover { border-color: var(--ght-gold); background: rgba(255, 255, 255, .1); color: #fff; } .ght .ftr__credit:hover svg { transform: translate(2px, -2px); } /* Sky360's newsletter form: one pill row */ .ght .ftr__news form, .ght .ftr__news .sky360-newsletter-form { display: flex; gap: 8px; margin: 0; } .ght .ftr__news input[type="email"] { flex: 1; min-width: 0; min-height: 52px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #fff; font-family: var(--ght-f); font-size: 16px; box-shadow: none; outline: none; } .ght .ftr__news input[type="email"]::placeholder { color: rgba(255, 255, 255, .55); } .ght .ftr__news input[type="email"]:focus { border-color: var(--ght-blue); } .ght .ftr__news button, .ght .ftr__news button:focus, .ght .ftr__news input[type="submit"] { flex: none; width: auto; min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background-color: var(--ght-blue); color: #fff; font-family: var(--ght-f); font-size: 16px; font-weight: 700; cursor: pointer; } .ght .ftr__news button:hover { background-color: var(--ght-blue-d); color: #fff; } /* phones: quick donate, once the page's donation form is off screen */ .ght .qbar { display: none; } @media (max-width: 1180px) { .ght .ftr__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .ght .ftr__top { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 40px; } /* sized to the screen so "Delivering hope," fits on one line down to 320px */ .ght .ftr__big { font-size: min(44px, calc((100vw - 2 * var(--ght-pad)) / 7.9)); } .ght .ftr__news { padding: 20px; } .ght .ftr__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 20px; padding: 40px 0; } /* bottom line, left-aligned (user): social and links on one row, the credit as a full-width row, then the charity line under it in two parts, "© 2026 Global Helping Hands" over "Registered charity in …" */ .ght .ftr__legal { display: grid; grid-template-columns: auto auto; grid-template-areas: "social links" "credit credit" "legal legal"; align-items: center; gap: 20px 12px; padding-bottom: 88px; } .ght .ftr__copy { grid-area: legal; display: grid; gap: 4px; margin-top: 4px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .55); } .ght .ftr__copy span:first-child { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .85); } .ght .ftr__copy span + span::before { content: none; } .ght .ftr__social { grid-area: social; gap: 6px; } .ght .ftr__social a { width: 36px; height: 36px; } .ght .ftr__links { grid-area: links; justify-content: flex-end; gap: 16px; margin-left: 0; } .ght .ftr__credit { grid-area: credit; justify-content: flex-start; padding: 14px 16px; border-radius: 14px; } .ght .ftr__credit svg { margin-left: auto; } .ght .qbar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--ght-pad) calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ght-line); background: #fff; box-shadow: 0 -10px 30px -12px rgba(11, 38, 56, .25); color: var(--ght-ink); transform: translateY(110%); transition: transform .3s var(--ght-ease); } .ght .qbar.is-on { transform: none; } .ght .qbar span { display: grid; font-size: 12px; color: var(--ght-mute); } .ght .qbar b { font-size: 15px; color: var(--ght-ink); } /* slim, like the header's Donate (user: "too fat") */ .ght .qbar .btn { min-height: 38px; padding: 0 20px; font-size: 15px; font-weight: 600; } body:has(.qbar.is-on) .sky-whatsapp-widget { bottom: 84px !important; } } /* elementor-icons */ /*! elementor-icons - v5.54.0 - 27-07-2026 */ @font-face{font-family:eicons;src:url("https://ghh.org.uk/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.eot?5.54.0");src:url("https://ghh.org.uk/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.eot?5.54.0#iefix") format("embedded-opentype"),url("https://ghh.org.uk/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.woff2?5.54.0") format("woff2"),url("https://ghh.org.uk/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.woff?5.54.0") format("woff"),url("https://ghh.org.uk/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.ttf?5.54.0") format("truetype"),url("https://ghh.org.uk/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.svg?5.54.0#eicon") format("svg");font-weight:400;font-style:normal}[class*=" eicon-"],[class^=eicon]{display:inline-block;font-family:eicons;font-size:inherit;font-weight:400;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@keyframes a{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}.eicon-animation-spin{animation:a 2s infinite linear}.eicon-editor-link:before{content:"\e800"}.eicon-editor-unlink:before{content:"\e801"}.eicon-editor-external-link:before{content:"\e802"}.eicon-editor-close:before{content:"\e803"}.eicon-editor-list-ol:before{content:"\e804"}.eicon-editor-list-ul:before{content:"\e805"}.eicon-editor-bold:before{content:"\e806"}.eicon-editor-italic:before{content:"\e807"}.eicon-editor-underline:before{content:"\e808"}.eicon-editor-paragraph:before{content:"\e809"}.eicon-editor-h1:before{content:"\e80a"}.eicon-editor-h2:before{content:"\e80b"}.eicon-editor-h3:before{content:"\e80c"}.eicon-editor-h4:before{content:"\e80d"}.eicon-editor-h5:before{content:"\e80e"}.eicon-editor-h6:before{content:"\e80f"}.eicon-editor-quote:before{content:"\e810"}.eicon-editor-code:before{content:"\e811"}.eicon-elementor:before{content:"\e812"}.eicon-elementor-circle:before{content:"\e813"}.eicon-pojome:before{content:"\e814"}.eicon-plus:before{content:"\e815"}.eicon-menu-bar:before{content:"\e816"}.eicon-apps:before{content:"\e817"}.eicon-accordion:before{content:"\e818"}.eicon-alert:before{content:"\e819"}.eicon-animation-text:before{content:"\e81a"}.eicon-animation:before{content:"\e81b"}.eicon-banner:before{content:"\e81c"}.eicon-blockquote:before{content:"\e81d"}.eicon-button:before{content:"\e81e"}.eicon-call-to-action:before{content:"\e81f"}.eicon-captcha:before{content:"\e820"}.eicon-carousel:before{content:"\e821"}.eicon-checkbox:before{content:"\e822"}.eicon-columns:before{content:"\e823"}.eicon-countdown:before{content:"\e824"}.eicon-counter:before{content:"\e825"}.eicon-date:before{content:"\e826"}.eicon-divider-shape:before{content:"\e827"}.eicon-divider:before{content:"\e828"}.eicon-download-button:before{content:"\e829"}.eicon-dual-button:before{content:"\e82a"}.eicon-email-field:before{content:"\e82b"}.eicon-facebook-comments:before{content:"\e82c"}.eicon-facebook-like-box:before{content:"\e82d"}.eicon-form-horizontal:before{content:"\e82e"}.eicon-form-vertical:before{content:"\e82f"}.eicon-gallery-grid:before{content:"\e830"}.eicon-gallery-group:before{content:"\e831"}.eicon-gallery-justified:before{content:"\e832"}.eicon-gallery-masonry:before{content:"\e833"}.eicon-icon-box:before{content:"\e834"}.eicon-image-before-after:before{content:"\e835"}.eicon-image-box:before{content:"\e836"}.eicon-image-hotspot:before{content:"\e837"}.eicon-image-rollover:before{content:"\e838"}.eicon-info-box:before{content:"\e839"}.eicon-inner-section:before{content:"\e83a"}.eicon-mailchimp:before{content:"\e83b"}.eicon-menu-card:before{content:"\e83c"}.eicon-navigation-horizontal:before{content:"\e83d"}.eicon-nav-menu:before{content:"\e83e"}.eicon-navigation-vertical:before{content:"\e83f"}.eicon-number-field:before{content:"\e840"}.eicon-parallax:before{content:"\e841"}.eicon-php7:before{content:"\e842"}.eicon-post-list:before{content:"\e843"}.eicon-post-slider:before{content:"\e844"}.eicon-post:before{content:"\e845"}.eicon-posts-carousel:before{content:"\e846"}.eicon-posts-grid:before{content:"\e847"}.eicon-posts-group:before{content:"\e848"}.eicon-posts-justified:before{content:"\e849"}.eicon-posts-masonry:before{content:"\e84a"}.eicon-posts-ticker:before{content:"\e84b"}.eicon-price-list:before{content:"\e84c"}.eicon-price-table:before{content:"\e84d"}.eicon-radio:before{content:"\e84e"}.eicon-rtl:before{content:"\e84f"}.eicon-scroll:before{content:"\e850"}.eicon-search:before{content:"\e851"}.eicon-select:before{content:"\e852"}.eicon-share:before{content:"\e853"}.eicon-sidebar:before{content:"\e854"}.eicon-skill-bar:before{content:"\e855"}.eicon-slider-3d:before{content:"\e856"}.eicon-slider-album:before{content:"\e857"}.eicon-slider-device:before{content:"\e858"}.eicon-slider-full-screen:before{content:"\e859"}.eicon-slider-push:before{content:"\e85a"}.eicon-slider-vertical:before{content:"\e85b"}.eicon-slider-video:before{content:"\e85c"}.eicon-slides:before{content:"\e85d"}.eicon-social-icons:before{content:"\e85e"}.eicon-spacer:before{content:"\e85f"}.eicon-table:before{content:"\e860"}.eicon-tabs:before{content:"\e861"}.eicon-tel-field:before{content:"\e862"}.eicon-text-area:before{content:"\e863"}.eicon-text-field:before{content:"\e864"}.eicon-thumbnails-down:before{content:"\e865"}.eicon-thumbnails-half:before{content:"\e866"}.eicon-thumbnails-right:before{content:"\e867"}.eicon-time-line:before{content:"\e868"}.eicon-toggle:before{content:"\e869"}.eicon-url:before{content:"\e86a"}.eicon-t-letter:before{content:"\e86b"}.eicon-wordpress:before{content:"\e86c"}.eicon-text:before{content:"\e86d"}.eicon-anchor:before{content:"\e86e"}.eicon-bullet-list:before{content:"\e86f"}.eicon-code:before{content:"\e870"}.eicon-favorite:before{content:"\e871"}.eicon-google-maps:before{content:"\e872"}.eicon-image:before{content:"\e873"}.eicon-photo-library:before{content:"\e874"}.eicon-woocommerce:before{content:"\e875"}.eicon-youtube:before{content:"\e876"}.eicon-flip-box:before{content:"\e877"}.eicon-settings:before{content:"\e878"}.eicon-headphones:before{content:"\e879"}.eicon-testimonial:before{content:"\e87a"}.eicon-counter-circle:before{content:"\e87b"}.eicon-person:before{content:"\e87c"}.eicon-chevron-right:before{content:"\e87d"}.eicon-chevron-left:before{content:"\e87e"}.eicon-close:before{content:"\e87f"}.eicon-file-download:before{content:"\e880"}.eicon-save:before{content:"\e881"}.eicon-zoom-in:before{content:"\e882"}.eicon-shortcode:before{content:"\e883"}.eicon-nerd:before{content:"\e884"}.eicon-device-desktop:before{content:"\e885"}.eicon-device-tablet:before{content:"\e886"}.eicon-device-mobile:before{content:"\e887"}.eicon-document-file:before{content:"\e888"}.eicon-folder-o:before{content:"\e889"}.eicon-hypster:before{content:"\e88a"}.eicon-h-align-left:before{content:"\e88b"}.eicon-h-align-right:before{content:"\e88c"}.eicon-h-align-center:before{content:"\e88d"}.eicon-h-align-stretch:before{content:"\e88e"}.eicon-v-align-top:before{content:"\e88f"}.eicon-v-align-bottom:before{content:"\e890"}.eicon-v-align-middle:before{content:"\e891"}.eicon-v-align-stretch:before{content:"\e892"}.eicon-pro-icon:before{content:"\e893"}.eicon-mail:before{content:"\e894"}.eicon-lock-user:before{content:"\e895"}.eicon-testimonial-carousel:before{content:"\e896"}.eicon-media-carousel:before{content:"\e897"}.eicon-section:before{content:"\e898"}.eicon-column:before{content:"\e899"}.eicon-edit:before{content:"\e89a"}.eicon-clone:before{content:"\e89b"}.eicon-trash:before{content:"\e89c"}.eicon-play:before{content:"\e89d"}.eicon-angle-right:before{content:"\e89e"}.eicon-angle-left:before{content:"\e89f"}.eicon-animated-headline:before{content:"\e8a0"}.eicon-menu-toggle:before{content:"\e8a1"}.eicon-fb-embed:before{content:"\e8a2"}.eicon-fb-feed:before{content:"\e8a3"}.eicon-twitter-embed:before{content:"\e8a4"}.eicon-twitter-feed:before{content:"\e8a5"}.eicon-sync:before{content:"\e8a6"}.eicon-import-export:before{content:"\e8a7"}.eicon-check-circle:before{content:"\e8a8"}.eicon-library-save:before{content:"\e8a9"}.eicon-library-download:before{content:"\e9dd"}.eicon-insert:before{content:"\e8ab"}.eicon-preview-medium:before{content:"\e8ac"}.eicon-sort-down:before{content:"\e8ad"}.eicon-sort-up:before{content:"\e8ae"}.eicon-heading:before{content:"\e8af"}.eicon-logo:before{content:"\e8b0"}.eicon-meta-data:before{content:"\e8b1"}.eicon-post-content:before{content:"\e8b2"}.eicon-post-excerpt:before{content:"\e8b3"}.eicon-post-navigation:before{content:"\e8b4"}.eicon-yoast:before{content:"\e8b5"}.eicon-nerd-chuckle:before{content:"\e8b6"}.eicon-nerd-wink:before{content:"\e8b7"}.eicon-comments:before{content:"\e8b8"}.eicon-download-circle-o:before{content:"\e8b9"}.eicon-library-upload:before{content:"\e8ba"}.eicon-save-o:before{content:"\e8bb"}.eicon-upload-circle-o:before{content:"\e8bc"}.eicon-ellipsis-h:before{content:"\e8bd"}.eicon-ellipsis-v:before{content:"\e8be"}.eicon-arrow-left:before{content:"\e8bf"}.eicon-arrow-right:before{content:"\e8c0"}.eicon-arrow-up:before{content:"\e8c1"}.eicon-arrow-down:before{content:"\e8c2"}.eicon-play-o:before{content:"\e8c3"}.eicon-archive-posts:before{content:"\e8c4"}.eicon-archive-title:before{content:"\e8c5"}.eicon-featured-image:before{content:"\e8c6"}.eicon-post-info:before{content:"\e8c7"}.eicon-post-title:before{content:"\e8c8"}.eicon-site-logo:before{content:"\e8c9"}.eicon-site-search:before{content:"\e8ca"}.eicon-site-title:before{content:"\e8cb"}.eicon-plus-square:before{content:"\e8cc"}.eicon-minus-square:before{content:"\e8cd"}.eicon-cloud-check:before{content:"\e8ce"}.eicon-drag-n-drop:before{content:"\e8cf"}.eicon-welcome:before{content:"\e8d0"}.eicon-handle:before{content:"\e8d1"}.eicon-cart:before{content:"\e8d2"}.eicon-product-add-to-cart:before{content:"\e8d3"}.eicon-product-breadcrumbs:before{content:"\e8d4"}.eicon-product-categories:before{content:"\e8d5"}.eicon-product-description:before{content:"\e8d6"}.eicon-product-images:before{content:"\e8d7"}.eicon-product-info:before{content:"\e8d8"}.eicon-product-meta:before{content:"\e8d9"}.eicon-product-pages:before{content:"\e8da"}.eicon-product-price:before{content:"\e8db"}.eicon-product-rating:before{content:"\e8dc"}.eicon-product-related:before{content:"\e8dd"}.eicon-product-stock:before{content:"\e8de"}.eicon-product-tabs:before{content:"\e8df"}.eicon-product-title:before{content:"\e8e0"}.eicon-product-upsell:before{content:"\e8e1"}.eicon-products:before{content:"\e8e2"}.eicon-bag-light:before{content:"\e8e3"}.eicon-bag-medium:before{content:"\e8e4"}.eicon-bag-solid:before{content:"\e8e5"}.eicon-basket-light:before{content:"\e8e6"}.eicon-basket-medium:before{content:"\e8e7"}.eicon-basket-solid:before{content:"\e8e8"}.eicon-cart-light:before{content:"\e8e9"}.eicon-cart-medium:before{content:"\e8ea"}.eicon-cart-solid:before{content:"\e8eb"}.eicon-exchange:before{content:"\e8ec"}.eicon-preview-thin:before{content:"\e8ed"}.eicon-device-laptop:before{content:"\e8ee"}.eicon-collapse:before{content:"\e8ef"}.eicon-expand:before{content:"\e8f0"}.eicon-navigator:before{content:"\e8f1"}.eicon-plug:before{content:"\e8f2"}.eicon-dashboard:before{content:"\e8f3"}.eicon-typography:before{content:"\e8f4"}.eicon-info-circle-o:before{content:"\e8f5"}.eicon-integration:before{content:"\e8f6"}.eicon-plus-circle-o:before{content:"\e8f7"}.eicon-rating:before{content:"\e8f8"}.eicon-review:before{content:"\e8f9"}.eicon-tools:before{content:"\e8fa"}.eicon-loading:before{content:"\e8fb"}.eicon-sitemap:before{content:"\e8fc"}.eicon-click:before{content:"\e8fd"}.eicon-clock:before{content:"\e8fe"}.eicon-library-open:before{content:"\e8ff"}.eicon-warning:before{content:"\e900"}.eicon-flow:before{content:"\e901"}.eicon-cursor-move:before{content:"\e902"}.eicon-arrow-circle-left:before{content:"\e903"}.eicon-flash:before{content:"\e904"}.eicon-redo:before{content:"\e905"}.eicon-ban:before{content:"\e906"}.eicon-barcode:before{content:"\e907"}.eicon-calendar:before{content:"\e908"}.eicon-caret-left:before{content:"\e909"}.eicon-caret-right:before{content:"\e90a"}.eicon-caret-up:before{content:"\e90b"}.eicon-chain-broken:before{content:"\e90c"}.eicon-check-circle-o:before{content:"\e90d"}.eicon-check:before{content:"\e90e"}.eicon-chevron-double-left:before{content:"\e90f"}.eicon-chevron-double-right:before{content:"\e910"}.eicon-undo:before{content:"\e911"}.eicon-filter:before{content:"\e912"}.eicon-circle-o:before{content:"\e913"}.eicon-circle:before{content:"\e914"}.eicon-clock-o:before{content:"\e915"}.eicon-cog:before{content:"\e916"}.eicon-cogs:before{content:"\e917"}.eicon-commenting-o:before{content:"\e918"}.eicon-copy:before{content:"\e919"}.eicon-database:before{content:"\e91a"}.eicon-dot-circle-o:before{content:"\e91b"}.eicon-envelope:before{content:"\e91c"}.eicon-external-link-square:before{content:"\e91d"}.eicon-eyedropper:before{content:"\e91e"}.eicon-folder:before{content:"\e91f"}.eicon-font:before{content:"\e920"}.eicon-adjust:before{content:"\e921"}.eicon-lightbox:before{content:"\e922"}.eicon-heart-o:before{content:"\e923"}.eicon-history:before{content:"\e924"}.eicon-image-bold:before{content:"\e925"}.eicon-info-circle:before{content:"\e926"}.eicon-link:before{content:"\e927"}.eicon-long-arrow-left:before{content:"\e928"}.eicon-long-arrow-right:before{content:"\e929"}.eicon-caret-down:before{content:"\e92a"}.eicon-paint-brush:before{content:"\e92b"}.eicon-pencil:before{content:"\e92c"}.eicon-plus-circle:before{content:"\e92d"}.eicon-zoom-in-bold:before{content:"\e92e"}.eicon-sort-amount-desc:before{content:"\e92f"}.eicon-sign-out:before{content:"\e930"}.eicon-spinner:before{content:"\e931"}.eicon-square:before{content:"\e932"}.eicon-star-o:before{content:"\e933"}.eicon-star:before{content:"\e934"}.eicon-text-align-justify:before{content:"\e935"}.eicon-text-align-center:before{content:"\e936"}.eicon-tags:before{content:"\e937"}.eicon-text-align-left:before{content:"\e938"}.eicon-text-align-right:before{content:"\e939"}.eicon-close-circle:before{content:"\e93a"}.eicon-trash-o:before{content:"\e93b"}.eicon-font-awesome:before{content:"\e93c"}.eicon-user-circle-o:before{content:"\e93d"}.eicon-video-camera:before{content:"\e93e"}.eicon-heart:before{content:"\e93f"}.eicon-wrench:before{content:"\e940"}.eicon-help:before{content:"\e941"}.eicon-help-o:before{content:"\e942"}.eicon-zoom-out-bold:before{content:"\e943"}.eicon-plus-square-o:before{content:"\e944"}.eicon-minus-square-o:before{content:"\e945"}.eicon-minus-circle:before{content:"\e946"}.eicon-minus-circle-o:before{content:"\e947"}.eicon-code-bold:before{content:"\e948"}.eicon-cloud-upload:before{content:"\e949"}.eicon-search-bold:before{content:"\e94a"}.eicon-map-pin:before{content:"\e94b"}.eicon-meetup:before{content:"\e94c"}.eicon-slideshow:before{content:"\e94d"}.eicon-t-letter-bold:before{content:"\e94e"}.eicon-preferences:before{content:"\e94f"}.eicon-table-of-contents:before{content:"\e950"}.eicon-tv:before{content:"\e951"}.eicon-upload:before{content:"\e952"}.eicon-instagram-comments:before{content:"\e953"}.eicon-instagram-nested-gallery:before{content:"\e954"}.eicon-instagram-post:before{content:"\e955"}.eicon-instagram-video:before{content:"\e956"}.eicon-instagram-gallery:before{content:"\e957"}.eicon-instagram-likes:before{content:"\e958"}.eicon-facebook:before{content:"\e959"}.eicon-twitter:before{content:"\e95a"}.eicon-pinterest:before{content:"\e95b"}.eicon-frame-expand:before{content:"\e95c"}.eicon-frame-minimize:before{content:"\e95d"}.eicon-archive:before{content:"\e95e"}.eicon-colors-typography:before{content:"\e95f"}.eicon-custom:before{content:"\e960"}.eicon-footer:before{content:"\e961"}.eicon-header:before{content:"\e962"}.eicon-layout-settings:before{content:"\e963"}.eicon-lightbox-expand:before{content:"\e964"}.eicon-error-404:before{content:"\e965"}.eicon-theme-style:before{content:"\e966"}.eicon-search-results:before{content:"\e967"}.eicon-single-post:before{content:"\e968"}.eicon-site-identity:before{content:"\e969"}.eicon-theme-builder:before{content:"\e96a"}.eicon-download-bold:before{content:"\e96b"}.eicon-share-arrow:before{content:"\e96c"}.eicon-global-settings:before{content:"\e96d"}.eicon-user-preferences:before{content:"\e96e"}.eicon-lock:before{content:"\e96f"}.eicon-export-kit:before{content:"\e970"}.eicon-import-kit:before{content:"\e971"}.eicon-lottie:before{content:"\e972"}.eicon-products-archive:before{content:"\e973"}.eicon-single-product:before{content:"\e974"}.eicon-disable-trash-o:before{content:"\e975"}.eicon-single-page:before{content:"\e976"}.eicon-wordpress-light:before{content:"\e977"}.eicon-cogs-check:before{content:"\e978"}.eicon-custom-css:before{content:"\e979"}.eicon-global-colors:before{content:"\e97a"}.eicon-globe:before{content:"\e97b"}.eicon-typography-1:before{content:"\e97c"}.eicon-background:before{content:"\e97d"}.eicon-device-responsive:before{content:"\e97e"}.eicon-device-wide:before{content:"\e97f"}.eicon-code-highlight:before{content:"\e980"}.eicon-video-playlist:before{content:"\e981"}.eicon-download-kit:before{content:"\e982"}.eicon-kit-details:before{content:"\e983"}.eicon-kit-parts:before{content:"\e984"}.eicon-kit-upload:before{content:"\e985"}.eicon-kit-plugins:before{content:"\e986"}.eicon-kit-upload-alt:before{content:"\e987"}.eicon-hotspot:before{content:"\e988"}.eicon-paypal-button:before{content:"\e989"}.eicon-shape:before{content:"\e98a"}.eicon-wordart:before{content:"\e98b"}.eicon-checkout:before{content:"\e98c"}.eicon-container:before{content:"\e98d"}.eicon-flip:before{content:"\e98e"}.eicon-info:before{content:"\e98f"}.eicon-my-account:before{content:"\e990"}.eicon-purchase-summary:before{content:"\e991"}.eicon-page-transition:before{content:"\e992"}.eicon-spotify:before{content:"\e993"}.eicon-stripe-button:before{content:"\e994"}.eicon-woo-settings:before{content:"\e995"}.eicon-woo-cart:before{content:"\e996"}.eicon-grow:before{content:"\e997"}.eicon-order-end:before{content:"\e998"}.eicon-nowrap:before{content:"\e999"}.eicon-order-start:before{content:"\e99a"}.eicon-progress-tracker:before{content:"\e99b"}.eicon-shrink:before{content:"\e99c"}.eicon-wrap:before{content:"\e99d"}.eicon-align-center-h:before{content:"\e99e"}.eicon-align-center-v:before{content:"\e99f"}.eicon-align-end-h:before{content:"\e9a0"}.eicon-align-end-v:before{content:"\e9a1"}.eicon-align-start-h:before{content:"\e9a2"}.eicon-align-start-v:before{content:"\e9a3"}.eicon-align-stretch-h:before{content:"\e9a4"}.eicon-align-stretch-v:before{content:"\e9a5"}.eicon-justify-center-h:before{content:"\e9a6"}.eicon-justify-center-v:before{content:"\e9a7"}.eicon-justify-end-h:before{content:"\e9a8"}.eicon-justify-end-v:before{content:"\e9a9"}.eicon-justify-space-around-h:before{content:"\e9aa"}.eicon-justify-space-around-v:before{content:"\e9ab"}.eicon-justify-space-between-h:before{content:"\e9ac"}.eicon-justify-space-between-v:before{content:"\e9ad"}.eicon-justify-space-evenly-h:before{content:"\e9ae"}.eicon-justify-space-evenly-v:before{content:"\e9af"}.eicon-justify-start-h:before{content:"\e9b0"}.eicon-justify-start-v:before{content:"\e9b1"}.eicon-woocommerce-cross-sells:before{content:"\e9b2"}.eicon-woocommerce-notices:before{content:"\e9b3"}.eicon-inner-container:before{content:"\e9b4"}.eicon-warning-full:before{content:"\e9b5"}.eicon-exit:before{content:"\e9b6"}.eicon-loop-builder:before{content:"\e9b7"}.eicon-notes:before{content:"\e9b8"}.eicon-read:before{content:"\e9b9"}.eicon-unread:before{content:"\e9ba"}.eicon-carousel-loop:before{content:"\e9bb"}.eicon-mega-menu:before{content:"\eb78"}.eicon-nested-carousel:before{content:"\e9bd"}.eicon-ai:before{content:"\e9be"}.eicon-taxonomy-filter:before{content:"\eb7d"}.eicon-container-grid:before{content:"\ef02"}.eicon-upgrade:before{content:"\e9c1"}.eicon-advanced:before{content:"\eb84"}.eicon-div-block:before{content:"\eb9b"}.eicon-notification:before{content:"\e9c3"}.eicon-light-mode:before{content:"\e9c4"}.eicon-dark-mode:before{content:"\e9c5"}.eicon-upgrade-crown:before{content:"\e9c6"}.eicon-off-canvas:before{content:"\e9c7"}.eicon-speakerphone:before{content:"\e9c9"}.eicon-ehp-cta:before{content:"\e9cb"}.eicon-ehp-forms:before{content:"\e9bc"}.eicon-ehp-hero:before{content:"\e9ca"}.eicon-ehp-zigzag:before{content:"\e9cc"}.eicon-e-button:before{content:"\e9ce"}.eicon-flexbox:before{content:"\e9d0"}.eicon-paragraph:before{content:"\e9d1"}.eicon-icon:before{content:"\e9d2"}.eicon-e-image:before{content:"\e9d3"}.eicon-video:before{content:"\e9d4"}.eicon-svg:before{content:"\e9d5"}.eicon-e-divider:before{content:"\e9d6"}.eicon-e-heading:before{content:"\e9d7"}.eicon-atomic:before{content:"\ebae"}.eicon-library-delete:before{content:"\e9d8"}.eicon-library-copy:before{content:"\e9d9"}.eicon-library-folder-empty:before{content:"\e9da"}.eicon-library-move:before{content:"\e9db"}.eicon-library-edit:before{content:"\e9dc"}.eicon-library-subscription-upgrade:before{content:"\e9de"}.eicon-library-folder-view:before{content:"\e9df"}.eicon-library-grid:before{content:"\e9e1"}.eicon-library-cloud-connect:before{content:"\e9e2"}.eicon-library-import:before{content:"\e9e3"}.eicon-library-list:before{content:"\e9e4"}.eicon-library-cloud-empty:before{content:"\e9e5"}.eicon-folder-plus:before{content:"\e8aa"}.eicon-library-folder:before{content:"\e9e6"}.eicon-accessibility:before{content:"\e9bf"}.eicon-lock-outline:before{content:"\e9e7"}.eicon-e-youtube:before{content:"\e9e8"}.eicon-contact:before{content:"\ebd2"}.eicon-layout:before{content:"\ebd8"}.eicon-components:before{content:"\ebd9"}.eicon-tab-content:before{content:"\ebda"}.eicon-tab-menu:before{content:"\ebdb"}.eicon-atomic-label:before{content:"\e9ee"}.eicon-atomic-form:before{content:"\e9ef"}.eicon-atomic-submit-button:before{content:"\e9f0"}.eicon-atomic-input:before{content:"\e9f1"}.eicon-atomic-text-area:before{content:"\e9f2"}.eicon-atomic-select:before{content:"\e9f3"}.eicon-atomic-checkbox:before{content:"\e9f4"}.eicon-atomic-radiobutton:before{content:"\e9f5"}.eicon-atomic-file-upload:before{content:"\ebe9"}.eicon-atomic-time-picker:before{content:"\ebea"}.eicon-atomic-date-picker:before{content:"\ebeb"}.eicon-upgrade-crown-full:before{content:"\ef03"}.eicon-after:before{content:"\ebfa"}.eicon-pagination-item:before{content:"\ebfb"}.eicon-before:before{content:"\ebfc"}.eicon-pagination:before{content:"\ebfd"}.eicon-loop-item:before{content:"\ec00"}.eicon-loop-widget:before{content:"\ec01"}.eicon-x-twitter:before{content:"\ef04"}.eicon-background-video:before{content:"\ea01"}.eicon-eye:before{content:"\e8ac"}.eicon-elementor-square:before{content:"\e813"} /* elementor-post-3289 */ .elementor-kit-3289{--e-global-color-primary:#3442AD;--e-global-color-secondary:#6EC1E4;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-3289 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* ght-tabs */ /* GHH Tabs. (Root is .ght.gttab.) */ .ght.gttab .gttab__h { margin: 0 0 16px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; letter-spacing: -.02em; } .ght.gttab .gttab__list { display: flex; gap: 4px; margin-bottom: 22px; overflow-x: auto; border-bottom: 1px solid var(--ght-line); scrollbar-width: none; } .ght.gttab .gttab__list::-webkit-scrollbar { display: none; } .ght.gttab .gttab__tab, .ght.gttab .gttab__tab:hover, .ght.gttab .gttab__tab:focus { flex: none; margin: 0 0 -1px; padding: 12px 16px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background-color: transparent; color: var(--ght-mute); font-family: var(--ght-f); font-size: 16px; font-weight: 700; cursor: pointer; } .ght.gttab .gttab__tab:hover { color: var(--ght-ink); } .ght.gttab .gttab__tab[aria-selected="true"] { border-bottom-color: var(--ght-blue); color: var(--ght-ink); } .ght.gttab .gttab__panel { font-size: 17px; line-height: 1.7; color: var(--ght-ink-2); } .ght.gttab .gttab__panel p { margin: 0 0 1em; } .ght.gttab .gttab__panel a { color: var(--ght-blue-d); } .ght.gttab .gttab__panel ul { padding-left: 1.2em; list-style: disc; } .ght.gttab .gttab__panel h2, .ght.gttab .gttab__panel h3, .ght.gttab .gttab__panel h4 { margin: 1.2em 0 .4em; font-weight: 800; letter-spacing: -.015em; color: var(--ght-ink); } /* widget-accordion */ .elementor-tab-title a{color:inherit}.elementor-accordion{text-align:start}.elementor-accordion .elementor-accordion-item{border:1px solid #d5d8dc}.elementor-accordion .elementor-accordion-item+.elementor-accordion-item{border-block-start:none}.elementor-accordion .elementor-tab-title{cursor:pointer;font-weight:700;line-height:1;margin:0;outline:none;padding:15px 20px}.elementor-accordion .elementor-tab-title .elementor-accordion-icon{display:inline-block;width:1.5em}.elementor-accordion .elementor-tab-title .elementor-accordion-icon svg{height:1em;width:1em}.elementor-accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-right{float:right;text-align:right}.elementor-accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-left{float:left;text-align:left}.elementor-accordion .elementor-tab-title .elementor-accordion-icon .elementor-accordion-icon-closed{display:block}.elementor-accordion .elementor-tab-title .elementor-accordion-icon .elementor-accordion-icon-opened,.elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon-closed{display:none}.elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon-opened{display:block}.elementor-accordion .elementor-tab-content{border-block-start:1px solid #d5d8dc;display:none;padding:15px 20px}@media (max-width:767px){.elementor-accordion .elementor-tab-title{padding:12px 15px}.elementor-accordion .elementor-tab-title .elementor-accordion-icon{width:1.2em}.elementor-accordion .elementor-tab-content{padding:7px 15px}}.e-con-inner>.elementor-widget-accordion,.e-con>.elementor-widget-accordion{width:var(--container-widget-width);--flex-grow:var( --container-widget-flex-grow )} /* ght-title */ /* GHH Title. (Root is .ght.gtt.) */ .ght.gtt { display: grid; gap: 10px; } .ght.gtt .gtt__sub { font-size: 14px; font-weight: 700; color: var(--ght-blue-d); } .ght.gtt .gtt__h { margin: 0; font-weight: 800; line-height: 1.05; letter-spacing: -.025em; color: var(--ght-ink); text-wrap: balance; } .ght.gtt--s .gtt__h { font-size: clamp(20px, 1.6vw, 24px); letter-spacing: -.015em; } .ght.gtt--m .gtt__h { font-size: clamp(28px, 2.8vw, 40px); } .ght.gtt--l .gtt__h { font-size: clamp(34px, 4.2vw, 60px); line-height: 1; letter-spacing: -.03em; } .ght.gtt--xl .gtt__h { font-size: clamp(40px, 5.6vw, 84px); font-weight: 900; line-height: .96; letter-spacing: -.04em; } .ght.gtt .gtt__h u { text-decoration: none; color: var(--ght-blue); } .ght.gtt .gtt__h a { color: inherit; text-decoration: none; } .ght.gtt .gtt__after { max-width: 62ch; font-size: 17px; color: var(--ght-mute); } .ght.gtt[style*="center"] .gtt__after, .elementor-widget-ght_title [style*="center"] .gtt__after { margin-inline: auto; } /* recent-donation */ .sky-donations-orders { list-style: none; margin: 0; padding: 0; } .sky-donations-orders p { margin: 0px; } .sky-donations-orders .sky-order { color: black; margin: 0px; text-align: center; overflow: hidden; will-change: height, opacity, transform; } .layout-1 .sky-donations-orders .sky-order { border-bottom: 1px solid #ededed; } .sky-donations-orders .sky-order .item-wrap { padding: 16px 0; } .sky-slide-donations .sky-donations-orders .sky-order.hidden-order { opacity: 0; height: 0px; transform: translateY(-15px); pointer-events: none; } .sky-modal-actions { display: flex; gap: 12px; padding-top: 16px; } .sky-modal-actions .primary-button { width: 100%; } .sky-modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999; display: none; background-color: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .sky-modal .sky-modal_overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; } .sky-modal .sky-modal_body { width: 615px; max-width: 100%; max-height: 85vh; background-color: white; border-radius: 16px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: flex; flex-direction: column; overflow: hidden; } .sky-modal .sky-modal_header { padding: 15px 20px 15px 20px; border-bottom: 1px solid #ededed; background-color: white; } .sky-modal .sky-modal_header-top { display: flex; align-items: center; flex-wrap: wrap; } .sky-modal .sky-modal_header-top .sky-modal_title { margin: 0px; } .sky-modal .sky-modal_header-top .sky-modal_close { margin-left: auto; border: none; background-color: transparent; width: 32px; height: 32px; min-height: inherit; border-radius: 99px; color: black; font-size: 16px; display: flex; align-items: center; justify-content: center; padding: 5px; } .sky-modal .sky-modal_header-top .sky-modal_close:hover { background-color: #f7f7f7; } .sky-modal .sky-modal_header { padding: 20px 20px 15px 20px; border-bottom: 1px solid #ededed; } .sky-modal .sky-modal_header-top { display: flex; align-items: center; flex-wrap: wrap; } .sky-modal .sky-modal_header-top .sky-modal_title { margin: 0px; } .sky-modal .sky-modal_header-top .sky-modal_close { margin-left: auto; border: none; background-color: var(--accent-color); width: 32px; height: 32px; min-height: inherit; border-radius: 99px; color: white; font-size: 16px; display: flex; align-items: center; justify-content: center; padding: 5px; } .sky-modal .sky-modal_header-top .sky-modal_close:hover { background-color: var(--accent-dark-color); color: white; } .sky-modal .sky-modal_tabs { display: flex; gap: 8px; margin-top: 16px; } .sky-modal .sky-modal_content .sky-modal_tab .sky-recent-donations-list { height: calc(85vh - 215px); overflow: auto; } .sky-modal .sky-modal_footer { padding: 20px; margin-top: auto; background-color: var(--accent-color); } .sky-modal .sky-donations-orders { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; } .sky-modal .sky-donations-orders .sky-order { padding: 0px 20px; width: 100%; } .sky-modal .sky-modal_tab { display: none; } .sky-modal_tabs .button { border-radius: 99px; background-color: white; border: 1px solid var(--accent-color); color: var(--accent-color); transition: .3s; } .sky-modal_tabs .button.active, .sky-modal_tabs .button:hover { background-color: var(--accent-color); color: white; border-color: var(--accent-color); } .sky-modal_footer .button { width: 100%; background-color: white; color: var(--accent-color); border-color: white; min-height: 48px; font-size: 16px; border-radius: 99px; } .sky-modal_footer .button:hover { background-color: #e6e6e6; border-color: white; color: var(--accent-color); } .items-loader { text-align: center; color: black; padding-top: 24px; padding-bottom: 24px; } .sky-modal .sky-modal_header .count-badge { background-color: #e9e9e9; font-weight: 700; font-size: 12px; padding: 2px 6px; border-radius: 4px; color: black; margin-left: 5px; margin-top: 5px; } .sky-donations-orders .sky-order .item-wrap .meta { list-style: none; margin: 0; padding: 0; display: inline-flex; flex-wrap: wrap; } .layout-2 .sky-donations-orders .sky-order .item-wrap { display: flex; align-items: center; text-align: left; gap: 16px; padding: 10px 0px; } .layout-2 .sky-donations-orders .sky-order .item-wrap .avatar { width: 40px; height: 40px; min-width: 40px; min-height: 40px; flex-shrink: 0; background-color: #ededed; display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 99px; } .sky-donations-orders .sky-order .item-wrap .meta li { margin: 0; } @media only screen and (min-width: 576px) { .sky-modal .sky-donations-orders .sky-order { width: 50%; } .sky-modal .sky-donations-orders .sky-order:nth-child(odd) { border-right: 1px solid #ededed; border-left: 1px solid #ededed; } .sky-modal .sky-donations-orders .sky-order:nth-child(even) { border-right: 1px solid #ededed; } } @media only screen and (max-width: 768px) { .sky-modal .sky-modal_body { max-height: 100vh; height: 100%; border-radius: 0px; } .sky-modal .sky-modal_content .sky-modal_tab .sky-recent-donations-list { height: calc(100vh - 213px); } } /* ====================================================== * Layout 2 Column Styles (Main Widget) * ====================================================== */ /* Base flex layout for layout-2 */ .layout-2 .sky-slide-donations .sky-donations-orders { display: flex; flex-wrap: wrap; } .layout-2 .sky-slide-donations .sky-donations-orders .sky-order { width: 100%; border-right: none; padding-left: 0; } /* Desktop (min-width: 1025px) */ @media only screen and (min-width: 1025px) { .layout-2.columns-desktop-one .sky-slide-donations .sky-donations-orders .sky-order { width: 100%; border-right: none; padding-left: 0; } .layout-2.columns-desktop-two .sky-slide-donations .sky-donations-orders .sky-order { width: 50%; } .layout-2.columns-desktop-two .sky-slide-donations .sky-donations-orders .sky-order:nth-child(odd) { border-right: 1px solid #ededed; } .layout-2.columns-desktop-two .sky-slide-donations .sky-donations-orders .sky-order:nth-child(even) { padding-left: 20px; } .layout-2.columns-desktop-three .sky-slide-donations .sky-donations-orders .sky-order { width: 33.333%; } .layout-2.columns-desktop-three .sky-slide-donations .sky-donations-orders .sky-order:not(:nth-child(3n)) { border-right: 1px solid #ededed; } .layout-2.columns-desktop-three .sky-slide-donations .sky-donations-orders .sky-order:nth-child(3n+2), .layout-2.columns-desktop-three .sky-slide-donations .sky-donations-orders .sky-order:nth-child(3n) { padding-left: 16px; } } /* Tablet (768px - 1024px) */ @media only screen and (min-width: 768px) and (max-width: 1024px) { .layout-2.columns-tablet-one .sky-slide-donations .sky-donations-orders .sky-order { width: 100%; border-right: none; padding-left: 0; } .layout-2.columns-tablet-two .sky-slide-donations .sky-donations-orders .sky-order { width: 50%; } .layout-2.columns-tablet-two .sky-slide-donations .sky-donations-orders .sky-order:nth-child(odd) { border-right: 1px solid #ededed; } .layout-2.columns-tablet-two .sky-slide-donations .sky-donations-orders .sky-order:nth-child(even) { padding-left: 16px; } .layout-2.columns-tablet-three .sky-slide-donations .sky-donations-orders .sky-order { width: 33.333%; } .layout-2.columns-tablet-three .sky-slide-donations .sky-donations-orders .sky-order:not(:nth-child(3n)) { border-right: 1px solid #ededed; } .layout-2.columns-tablet-three .sky-slide-donations .sky-donations-orders .sky-order:nth-child(3n+2), .layout-2.columns-tablet-three .sky-slide-donations .sky-donations-orders .sky-order:nth-child(3n) { padding-left: 16px; } } /* Mobile (max-width: 767px) */ @media only screen and (min-width: 480px) and (max-width: 767px) { .layout-2.columns-mobile-one .sky-slide-donations .sky-donations-orders .sky-order { width: 100%; border-right: none; padding-left: 0; } .layout-2.columns-mobile-two .sky-slide-donations .sky-donations-orders .sky-order { width: 50%; } .layout-2.columns-mobile-two .sky-slide-donations .sky-donations-orders .sky-order:nth-child(odd) { border-right: 1px solid #ededed; } .layout-2.columns-mobile-two .sky-slide-donations .sky-donations-orders .sky-order:nth-child(even) { padding-left: 16px; } .layout-2.columns-mobile-three .sky-slide-donations .sky-donations-orders .sky-order { width: 33.333%; } .layout-2.columns-mobile-three .sky-slide-donations .sky-donations-orders .sky-order:not(:nth-child(3n)) { border-right: 1px solid #ededed; } .layout-2.columns-mobile-three .sky-slide-donations .sky-donations-orders .sky-order:nth-child(3n+2), .layout-2.columns-mobile-three .sky-slide-donations .sky-donations-orders .sky-order:nth-child(3n) { padding-left: 16px; } } /* donation-button */ .button-full .primary-button { width: 100%; } .primary-button { box-shadow: none; vertical-align: middle; text-align: center; text-decoration: none; text-transform: capitalize; text-shadow: none; font-weight: 600; font-style: normal; line-height: 1.4; cursor: pointer; font-size: 13px; position: relative; display: inline-flex; align-items: center; justify-content: center; outline: none; border-radius: 0; transition: 0.1s linear; } .button-small .primary-button { padding: 12px 16px; font-size: 14px; min-height: inherit; } .button-medium .primary-button { padding: 12px 20px; min-height: inherit; } .button-large .primary-button { padding: 16px 24px; font-size: 14px; } .button-extra_large .primary-button { padding: 18px 32px; font-size: 16px; } .button-rounded .primary-button { border-radius: 8px; } .button-round .primary-button { border-radius: 99px; } .button-flat .primary-button { border: 0px solid transparent; } .button-flat.button-gray .primary-button { color: #3E3E3E; background: #F3F3F3; } .button-flat.button-gray .primary-button:hover, .button-flat.button-gray .primary-button.active { color: #3E3E3E; background: #e0e0e0; } .button-flat.button-primary .primary-button { color: #ffffff; background: var(--accent-color); box-shadow: inset 0 0 0 rgba(0,0,0,0.1); } .button-flat.button-primary .primary-button:hover, .button-flat.button-primary .primary-button.active { color: #ffffff; background: var(--accent-color); box-shadow: inset 0 0 200px rgba(0,0,0,0.1); } .button-flat.button-alternative .primary-button { color: #ffffff; background: var(--accent-color); box-shadow: inset 0 0 0 rgba(0,0,0,0.1); } .button-flat.button-alternative .primary-button:hover, .button-flat.button-alternative .primary-button.active { color: #ffffff; background: var(--accent-color); box-shadow: inset 0 0 200px rgba(0,0,0,0.1); } .button-flat.button-black .primary-button { color: #ffffff; background: #212121; box-shadow: inset 0 0 0 rgba(0,0,0,0.1); } .button-flat.button-black .primary-button:hover, .button-flat.button-black .primary-button.active { color: #ffffff; background: #212121; box-shadow: inset 0 0 200px rgba(0,0,0,0.1); } .button-flat.button-white .primary-button { color: #333333; background: white; box-shadow: inset 0 0 0 rgba(0,0,0,0.1); } .button-flat.button-white .primary-button:hover, .button-flat.button-white .primary-button.active { color: #333333; background: white; box-shadow: inset 0 0 200px rgba(0,0,0,0.1); } .button-border .primary-button { color: #333333; background: transparent; border: 1px solid #F3F3F3; } .button-border .primary-button:hover, .button-border .primary-button.active { color: #333333; border-color: #F3F3F3; background: #F3F3F3; } .button-border.button-primary .primary-button { color: var(--accent-color); background: transparent; border: 1px solid var(--accent-light-color); } .button-border.button-primary .primary-button:hover, .button-border.button-primary .primary-button.active { color: #ffffff; border-color: var(--accent-color); background: var(--accent-color); } .button-border.button-alternative .primary-button { color: var(--accent-color); background: transparent; border: 1px solid var(--accent-color); } .button-border.button-alternative .primary-button:hover, .button-border.button-alternative .primary-button.active { color: #ffffff; border-color: var(--accent-color); background: var(--accent-color); } .button-border.button-black .primary-button { color: #212121; background: transparent; border: 1px solid #212121; } .button-border.button-black .primary-button:hover, .button-border.button-black .primary-button.active { color: #ffffff; border-color: #212121; background: #212121; } .button-border.button-white .primary-button { color: #ffffff; background: transparent; border: 1px solid #ffffff; } .button-border.button-white .primary-button:hover, .button-border.button-white .primary-button.active { color: #212121; border-color: #ffffff; background: #ffffff; } .button-link .primary-button { background: none; padding: 0; color: #212121; border-bottom: 1px solid #F3F3F3; } .button-link .primary-button:hover, .button-link .primary-button.active { color: #333333; border-bottom: 1px solid #e0e0e0; } .button-link.button-primary .primary-button { color: #333333; border-bottom: 1px solid var(--accent-color); } .button-link.button-primary .primary-button:hover, .button-link.button-primary .primary-button.active { color: var(--accent-color); border-bottom: 1px solid var(--accent-color); } .button-link.button-alternative .primary-button { color: #333333; border-bottom: 1px solid var(--accent-color); } .button-link.button-alternative .primary-button:hover, .button-link.button-alternative .primary-button.active { color: var(--accent-color); border-bottom: 1px solid var(--accent-color); } .button-link.button-black .primary-button { color: #333333; border-bottom: 1px solid #333333; } .button-link.button-black .primary-button:hover, .button-link.button-black .primary-button.active { color: #000000; border-bottom: 1px solid #000000; } .button-link.button-white .primary-button { color: #ffffff; border-bottom: 1px solid #ffffff; } .button-link.button-white .primary-button:hover, .button-link.button-white .primary-button.active { color: #ffffff; border-bottom: 1px solid #ffffff; } /* ght-button */ /* GHH Button. (Root is .ght.gtb.) */ .ght.gtb { display: flex; } .ght.gtb--full .btn { width: 100%; } /* widget-video */ .elementor-widget-video .elementor-widget-container,.elementor-widget-video:not(:has(.elementor-widget-container)){overflow:hidden;transform:translateZ(0)}.elementor-widget-video .elementor-wrapper{aspect-ratio:var(--video-aspect-ratio)}.elementor-widget-video .elementor-wrapper iframe,.elementor-widget-video .elementor-wrapper video{background-color:#000;border:none;display:flex;height:100%;width:100%}.elementor-widget-video .elementor-open-inline .elementor-custom-embed-image-overlay{background-position:50%;background-size:cover;inset:0;position:absolute}.elementor-widget-video .elementor-custom-embed-image-overlay{cursor:pointer;text-align:center}.elementor-widget-video .elementor-custom-embed-image-overlay:hover .elementor-custom-embed-play i{opacity:1}.elementor-widget-video .elementor-custom-embed-image-overlay img{aspect-ratio:var(--video-aspect-ratio);display:block;-o-object-fit:cover;object-fit:cover;-o-object-position:center center;object-position:center center;width:100%}.elementor-widget-video .e-hosted-video .elementor-video{-o-object-fit:cover;object-fit:cover}.e-con-inner>.elementor-widget-video,.e-con>.elementor-widget-video{width:var(--container-widget-width);--flex-grow:var( --container-widget-flex-grow )} /* widget-divider */ .elementor-widget-divider{--divider-border-style:none;--divider-border-width:1px;--divider-color:#0c0d0e;--divider-icon-size:20px;--divider-element-spacing:10px;--divider-pattern-height:24px;--divider-pattern-size:20px;--divider-pattern-url:none;--divider-pattern-repeat:repeat-x}.elementor-widget-divider .elementor-divider{display:flex}.elementor-widget-divider .elementor-divider__text{font-size:15px;line-height:1;max-width:95%}.elementor-widget-divider .elementor-divider__element{flex-shrink:0;margin:0 var(--divider-element-spacing)}.elementor-widget-divider .elementor-icon{font-size:var(--divider-icon-size)}.elementor-widget-divider .elementor-divider-separator{direction:ltr;display:flex;margin:0}.elementor-widget-divider--view-line_icon .elementor-divider-separator,.elementor-widget-divider--view-line_text .elementor-divider-separator{align-items:center}.elementor-widget-divider--view-line_icon .elementor-divider-separator:after,.elementor-widget-divider--view-line_icon .elementor-divider-separator:before,.elementor-widget-divider--view-line_text .elementor-divider-separator:after,.elementor-widget-divider--view-line_text .elementor-divider-separator:before{border-block-end:0;border-block-start:var(--divider-border-width) var(--divider-border-style) var(--divider-color);content:"";display:block;flex-grow:1}.elementor-widget-divider--element-align-left .elementor-divider .elementor-divider-separator>.elementor-divider__svg:first-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-left .elementor-divider-separator:before{content:none}.elementor-widget-divider--element-align-left .elementor-divider__element{margin-left:0}.elementor-widget-divider--element-align-right .elementor-divider .elementor-divider-separator>.elementor-divider__svg:last-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-right .elementor-divider-separator:after{content:none}.elementor-widget-divider--element-align-right .elementor-divider__element{margin-right:0}.elementor-widget-divider--element-align-start .elementor-divider .elementor-divider-separator>.elementor-divider__svg:first-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-start .elementor-divider-separator:before{content:none}.elementor-widget-divider--element-align-start .elementor-divider__element{margin-inline-start:0}.elementor-widget-divider--element-align-end .elementor-divider .elementor-divider-separator>.elementor-divider__svg:last-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-end .elementor-divider-separator:after{content:none}.elementor-widget-divider--element-align-end .elementor-divider__element{margin-inline-end:0}.elementor-widget-divider:not(.elementor-widget-divider--view-line_text):not(.elementor-widget-divider--view-line_icon) .elementor-divider-separator{border-block-start:var(--divider-border-width) var(--divider-border-style) var(--divider-color)}.elementor-widget-divider--separator-type-pattern{--divider-border-style:none}.elementor-widget-divider--separator-type-pattern.elementor-widget-divider--view-line .elementor-divider-separator,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:after,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:before,.elementor-widget-divider--separator-type-pattern:not([class*=elementor-widget-divider--view]) .elementor-divider-separator{background-color:var(--divider-color);-webkit-mask-image:var(--divider-pattern-url);mask-image:var(--divider-pattern-url);-webkit-mask-repeat:var(--divider-pattern-repeat);mask-repeat:var(--divider-pattern-repeat);-webkit-mask-size:var(--divider-pattern-size) 100%;mask-size:var(--divider-pattern-size) 100%;min-height:var(--divider-pattern-height);width:100%}.elementor-widget-divider--no-spacing{--divider-pattern-size:auto}.elementor-widget-divider--bg-round{--divider-pattern-repeat:round}.rtl .elementor-widget-divider .elementor-divider__text{direction:rtl}.e-con-inner>.elementor-widget-divider,.e-con>.elementor-widget-divider{width:var(--container-widget-width,100%);--flex-grow:var( --container-widget-flex-grow )} /* ght-infobox */ /* GHH Info box. (Root is .ght.gti; an when the whole box is a link.) */ .ght.gti { display: flex; flex-direction: column; gap: 14px; height: 100%; text-decoration: none; color: var(--ght-ink); } .ght.gti--card { padding: clamp(20px, 2vw, 28px); border-radius: 22px; background: var(--ght-mist); transition: background-color .25s, box-shadow .25s, transform .25s var(--ght-ease); } .ght.gti--left { flex-direction: row; align-items: flex-start; } .ght.gti--right { flex-direction: row-reverse; align-items: flex-start; } .ght.gti--center { align-items: center; text-align: center; } .ght.gti--right.gti--right { text-align: left; } .ght.gti .gti__pic { flex: none; display: block; } .ght.gti .gti__pic img { display: block; height: auto; } .ght.gti .gti__num { flex: none; display: grid; place-items: center; min-width: 52px; height: 52px; padding: 0 12px; border-radius: 999px; background: var(--ght-blue); color: #fff; font-size: 20px; font-weight: 900; } .ght.gti .gti__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ght.gti .gti__sub { font-size: 13px; font-weight: 700; color: var(--ght-blue-d); } .ght.gti .gti__h { margin: 0; font-size: clamp(18px, 1.5vw, 22px); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; color: var(--ght-ink); } .ght.gti .gti__text { font-size: 15px; line-height: 1.55; color: var(--ght-mute); } .ght.gti .gti__text p { margin: 0 0 .5em; } .ght.gti .gti__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 700; color: var(--ght-blue-d); } .ght.gti .gti__more svg { width: 18px; height: 18px; transition: transform .2s var(--ght-ease); } a.ght.gti:hover .gti__h { color: var(--ght-blue-d); } a.ght.gti:hover .gti__more svg { transform: translateX(4px); } a.ght.gti--card:hover { background: #fff; box-shadow: 0 18px 40px -22px rgba(11, 38, 56, .35), 0 0 0 1px var(--ght-line); transform: translateY(-2px); } /* elementor-post-79945 */ .elementor-79945 .elementor-element.elementor-element-5c158fd{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-79945 .elementor-element.elementor-element-1a684eb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-79945 .elementor-element.elementor-element-1a684eb.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-79945 .elementor-element.elementor-element-ae10e4f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:50px;}.elementor-79945 .elementor-element.elementor-element-678520e{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-accordion .elementor-accordion-icon, .elementor-widget-accordion .elementor-accordion-title{color:var( --e-global-color-primary );}.elementor-widget-accordion .elementor-accordion-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-accordion .elementor-active .elementor-accordion-icon, .elementor-widget-accordion .elementor-active .elementor-accordion-title{color:var( --e-global-color-accent );}.elementor-widget-accordion .elementor-active .elementor-accordion-icon svg{fill:var( --e-global-color-accent );}.elementor-widget-accordion .elementor-accordion-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-accordion .elementor-tab-content{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-79945 .elementor-element.elementor-element-0d95c31 .elementor-accordion-item{border-width:1px;border-color:#DDDDDD;}.elementor-79945 .elementor-element.elementor-element-0d95c31 .elementor-accordion-item .elementor-tab-content{border-width:1px;border-block-start-color:#DDDDDD;}.elementor-79945 .elementor-element.elementor-element-0d95c31 .elementor-accordion-item .elementor-tab-title.elementor-active{border-width:1px;border-block-end-color:#DDDDDD;}.elementor-79945 .elementor-element.elementor-element-0d95c31 .elementor-tab-title{background-color:#F2F2F2;padding:20px 20px 20px 20px;}.elementor-79945 .elementor-element.elementor-element-0d95c31 .elementor-accordion-icon, .elementor-79945 .elementor-element.elementor-element-0d95c31 .elementor-accordion-title{color:#000000;}.elementor-79945 .elementor-element.elementor-element-0d95c31 .elementor-accordion-icon svg{fill:#000000;}.elementor-79945 .elementor-element.elementor-element-0d95c31 .elementor-active .elementor-accordion-icon, .elementor-79945 .elementor-element.elementor-element-0d95c31 .elementor-active .elementor-accordion-title{color:#3442AD;}.elementor-79945 .elementor-element.elementor-element-0d95c31 .elementor-active .elementor-accordion-icon svg{fill:#3442AD;}.elementor-79945 .elementor-element.elementor-element-0d95c31 .elementor-accordion-title{font-family:"Roboto", Sans-serif;font-size:16px;font-weight:600;}.elementor-79945 .elementor-element.elementor-element-0d95c31 .elementor-tab-title .elementor-accordion-icon i:before{color:#797979;}.elementor-79945 .elementor-element.elementor-element-0d95c31 .elementor-tab-title .elementor-accordion-icon svg{fill:#797979;}.elementor-79945 .elementor-element.elementor-element-0d95c31 .elementor-tab-title.elementor-active .elementor-accordion-icon i:before{color:#0031BE;}.elementor-79945 .elementor-element.elementor-element-0d95c31 .elementor-tab-title.elementor-active .elementor-accordion-icon svg{fill:#0031BE;}.elementor-79945 .elementor-element.elementor-element-0d95c31 .elementor-tab-content{background-color:#FAFAFA;font-family:"Roboto", Sans-serif;font-size:15px;font-weight:400;padding:18px 18px 20px 18px;}.elementor-79945 .elementor-element.elementor-element-9c30424{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-79945 .elementor-element.elementor-element-8858a6f{--display:flex;border-style:solid;--border-style:solid;border-width:2px 2px 2px 2px;--border-top-width:2px;--border-right-width:2px;--border-bottom-width:2px;--border-left-width:2px;border-color:#00000026;--border-color:#00000026;--border-radius:8px 8px 8px 8px;--padding-top:30px;--padding-bottom:40px;--padding-left:30px;--padding-right:30px;}.elementor-79945 .elementor-element.elementor-element-d50a7e4 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-79945 .elementor-element.elementor-element-d50a7e4 .gtt{text-align:left;}.elementor-79945 .elementor-element.elementor-element-50a462b .gtb{justify-content:flex-start;}.elementor-79945 .elementor-element.elementor-element-5e6cb7c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-79945 .elementor-element.elementor-element-73b729a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-79945 .elementor-element.elementor-element-3c201a5 .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-79945 .elementor-element.elementor-element-6f1609f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-79945 .elementor-element.elementor-element-de65fbd .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-79945 .elementor-element.elementor-element-303f0f3{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0;border-style:solid;--border-style:solid;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-79945 .elementor-element.elementor-element-303f0f3:not(.elementor-motion-effects-element-type-background), .elementor-79945 .elementor-element.elementor-element-303f0f3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#3442AD;}.elementor-79945 .elementor-element.elementor-element-303f0f3::before, .elementor-79945 .elementor-element.elementor-element-303f0f3 > .elementor-background-video-container::before, .elementor-79945 .elementor-element.elementor-element-303f0f3 > .e-con-inner > .elementor-background-video-container::before, .elementor-79945 .elementor-element.elementor-element-303f0f3 > .elementor-background-slideshow::before, .elementor-79945 .elementor-element.elementor-element-303f0f3 > .e-con-inner > .elementor-background-slideshow::before, .elementor-79945 .elementor-element.elementor-element-303f0f3 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#00000066;--background-overlay:'';}.elementor-79945 .elementor-element.elementor-element-08b6b32{--display:flex;}.elementor-79945 .elementor-element.elementor-element-3f267b6 .gtt{text-align:left;}.elementor-79945 .elementor-element.elementor-element-3f267b6 .gtt__h{color:#FFFFFF;}.elementor-79945 .elementor-element.elementor-element-3f267b6 .gtt__after{color:rgba(255,255,255,.82);}.elementor-79945 .elementor-element.elementor-element-cb6c332{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-79945 .elementor-element.elementor-element-dc16ab5{--display:flex;}.elementor-79945 .elementor-element.elementor-element-87a1787 .elementor-accordion-item{border-width:0.5px;border-color:#9C9C9C21;}.elementor-79945 .elementor-element.elementor-element-87a1787 .elementor-accordion-item .elementor-tab-content{border-width:0.5px;border-block-start-color:#9C9C9C21;}.elementor-79945 .elementor-element.elementor-element-87a1787 .elementor-accordion-item .elementor-tab-title.elementor-active{border-width:0.5px;border-block-end-color:#9C9C9C21;}.elementor-79945 .elementor-element.elementor-element-87a1787 .elementor-tab-title{background-color:#1E2B91;padding:20px 20px 20px 20px;}.elementor-79945 .elementor-element.elementor-element-87a1787 .elementor-accordion-icon, .elementor-79945 .elementor-element.elementor-element-87a1787 .elementor-accordion-title{color:#FFFFFF;}.elementor-79945 .elementor-element.elementor-element-87a1787 .elementor-accordion-icon svg{fill:#FFFFFF;}.elementor-79945 .elementor-element.elementor-element-87a1787 .elementor-active .elementor-accordion-icon, .elementor-79945 .elementor-element.elementor-element-87a1787 .elementor-active .elementor-accordion-title{color:#FFFFFF;}.elementor-79945 .elementor-element.elementor-element-87a1787 .elementor-active .elementor-accordion-icon svg{fill:#FFFFFF;}.elementor-79945 .elementor-element.elementor-element-87a1787 .elementor-accordion-title{font-family:"Roboto", Sans-serif;font-size:16px;font-weight:600;}.elementor-79945 .elementor-element.elementor-element-87a1787 .elementor-tab-title .elementor-accordion-icon i:before{color:#FFFFFFC2;}.elementor-79945 .elementor-element.elementor-element-87a1787 .elementor-tab-title .elementor-accordion-icon svg{fill:#FFFFFFC2;}.elementor-79945 .elementor-element.elementor-element-87a1787 .elementor-tab-title.elementor-active .elementor-accordion-icon i:before{color:#FFFFFF;}.elementor-79945 .elementor-element.elementor-element-87a1787 .elementor-tab-title.elementor-active .elementor-accordion-icon svg{fill:#FFFFFF;}.elementor-79945 .elementor-element.elementor-element-87a1787 .elementor-tab-content{background-color:#1E2B91;color:#FFFFFF;font-family:"Roboto", Sans-serif;font-size:15px;font-weight:400;padding:18px 18px 20px 18px;}.elementor-79945 .elementor-element.elementor-element-5d4626e{--display:flex;}.elementor-79945 .elementor-element.elementor-element-9135d26 .elementor-accordion-item{border-width:0.5px;border-color:#9C9C9C21;}.elementor-79945 .elementor-element.elementor-element-9135d26 .elementor-accordion-item .elementor-tab-content{border-width:0.5px;border-block-start-color:#9C9C9C21;}.elementor-79945 .elementor-element.elementor-element-9135d26 .elementor-accordion-item .elementor-tab-title.elementor-active{border-width:0.5px;border-block-end-color:#9C9C9C21;}.elementor-79945 .elementor-element.elementor-element-9135d26 .elementor-tab-title{background-color:#1E2B91;padding:20px 20px 20px 20px;}.elementor-79945 .elementor-element.elementor-element-9135d26 .elementor-accordion-icon, .elementor-79945 .elementor-element.elementor-element-9135d26 .elementor-accordion-title{color:#FFFFFF;}.elementor-79945 .elementor-element.elementor-element-9135d26 .elementor-accordion-icon svg{fill:#FFFFFF;}.elementor-79945 .elementor-element.elementor-element-9135d26 .elementor-active .elementor-accordion-icon, .elementor-79945 .elementor-element.elementor-element-9135d26 .elementor-active .elementor-accordion-title{color:#FFFFFF;}.elementor-79945 .elementor-element.elementor-element-9135d26 .elementor-active .elementor-accordion-icon svg{fill:#FFFFFF;}.elementor-79945 .elementor-element.elementor-element-9135d26 .elementor-accordion-title{font-family:"Roboto", Sans-serif;font-size:16px;font-weight:600;}.elementor-79945 .elementor-element.elementor-element-9135d26 .elementor-tab-title .elementor-accordion-icon i:before{color:#FFFFFFC2;}.elementor-79945 .elementor-element.elementor-element-9135d26 .elementor-tab-title .elementor-accordion-icon svg{fill:#FFFFFFC2;}.elementor-79945 .elementor-element.elementor-element-9135d26 .elementor-tab-title.elementor-active .elementor-accordion-icon i:before{color:#FFFFFF;}.elementor-79945 .elementor-element.elementor-element-9135d26 .elementor-tab-title.elementor-active .elementor-accordion-icon svg{fill:#FFFFFF;}.elementor-79945 .elementor-element.elementor-element-9135d26 .elementor-tab-content{background-color:#1E2B91;color:#FFFFFF;font-family:"Roboto", Sans-serif;font-size:15px;font-weight:400;padding:18px 18px 20px 18px;}.elementor-79945 .elementor-element.elementor-element-8416492{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-79945 .elementor-element.elementor-element-183e036{--divider-border-style:solid;--divider-color:#0000001A;--divider-border-width:1px;}.elementor-79945 .elementor-element.elementor-element-183e036 .elementor-divider-separator{width:100%;}.elementor-79945 .elementor-element.elementor-element-183e036 .elementor-divider{padding-block-start:2px;padding-block-end:2px;}.elementor-79945 .elementor-element.elementor-element-e0b41df .gtt{text-align:left;}.elementor-79945 .elementor-element.elementor-element-e0b41df .gtt__h{color:#1B9DD9;}.elementor-79945 .elementor-element.elementor-element-15bfc32{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-79945 .elementor-element.elementor-element-4ce1ae7{--display:flex;}.elementor-79945 .elementor-element.elementor-element-7b3bfd0 .gti__h{color:#3442AD;}.elementor-79945 .elementor-element.elementor-element-e83ed8e{--display:flex;border-style:solid;--border-style:solid;border-width:0px 1px 0px 1px;--border-top-width:0px;--border-right-width:1px;--border-bottom-width:0px;--border-left-width:1px;border-color:#00000017;--border-color:#00000017;}.elementor-79945 .elementor-element.elementor-element-0142352 .gti__h{color:#3442AD;}.elementor-79945 .elementor-element.elementor-element-8a0622f{--display:flex;}.elementor-79945 .elementor-element.elementor-element-e9179e9 .gti__h{color:#3442AD;}.elementor-79945 .elementor-element.elementor-element-dc9b940{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--margin-top:30px;--margin-bottom:30px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-79945 .elementor-element.elementor-element-d10923b .gtb{justify-content:flex-start;}@media(max-width:1024px){.elementor-79945 .elementor-element.elementor-element-303f0f3{--padding-top:200px;--padding-bottom:100px;--padding-left:20px;--padding-right:20px;}.elementor-79945 .elementor-element.elementor-element-cb6c332{--grid-auto-flow:row;}.elementor-79945 .elementor-element.elementor-element-15bfc32{--grid-auto-flow:row;}}@media(min-width:768px){.elementor-79945 .elementor-element.elementor-element-5c158fd{--content-width:1050px;}.elementor-79945 .elementor-element.elementor-element-1a684eb{--width:61.45%;}.elementor-79945 .elementor-element.elementor-element-9c30424{--width:100%;}.elementor-79945 .elementor-element.elementor-element-73b729a{--width:50%;}.elementor-79945 .elementor-element.elementor-element-6f1609f{--width:50%;}}@media(max-width:767px){.elementor-79945 .elementor-element.elementor-element-ae10e4f{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-79945 .elementor-element.elementor-element-0d95c31 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-79945 .elementor-element.elementor-element-9c30424{--margin-top:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-79945 .elementor-element.elementor-element-303f0f3:not(.elementor-motion-effects-element-type-background), .elementor-79945 .elementor-element.elementor-element-303f0f3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-size:cover;}.elementor-79945 .elementor-element.elementor-element-303f0f3{--border-radius:0px 0px 0px 0px;--margin-top:30px;--margin-bottom:-30px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-79945 .elementor-element.elementor-element-cb6c332{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-79945 .elementor-element.elementor-element-dc16ab5{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-79945 .elementor-element.elementor-element-5d4626e{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-79945 .elementor-element.elementor-element-15bfc32{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-79945 .elementor-element.elementor-element-e83ed8e{border-width:1px 0px 1px 0px;--border-top-width:1px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;}.elementor-79945 .elementor-element.elementor-element-dc9b940{--margin-top:0px;--margin-bottom:10px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}} /* base-desktop */ .elementor .e-div-block-base{min-width:30px;padding:10px;display:block;}.elementor .e-flexbox-base{padding:10px;display:flex;flex-direction:row;}.elementor .e-grid-base{column-gap:20px;padding:10px;display:grid;row-gap:20px;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(2, 1fr);}.elementor .e-tabs-base{padding-block-start:0px;display:flex;flex-direction:column;gap:30px;}.elementor .e-tabs-menu-base{display:flex;justify-content:center;}.elementor .e-tab-base{width:160px;color:#0C0D0E;cursor:pointer;padding:8px;border-width:2px;border-color:#E0E0E0;border-style:solid;background-color:#FFFFFF;display:block;}.elementor .e-tab-base.e--selected{border-color:#0C0D0E;outline-width:0px;}.elementor .e-tab-base:focus{border-color:#0C0D0E;outline-width:0px;}.elementor .e-tab-base:hover,.elementor .e-tab-base:focus-visible{background-color:#E0E0E0;}.elementor .e-tabs-content-area-base{display:block;}.elementor .e-tab-content-base{min-width:30px;padding:10px;display:block;}.elementor .e-accordion-base{padding:0px;display:flex;flex-direction:column;}.elementor .e-accordion-item-base{padding:0px;display:block;}.elementor .e-accordion-item-header-base{cursor:pointer;padding:10px;display:flex;gap:8px;justify-content:space-between;align-items:center;}.elementor .e-accordion-item-title-base{padding:0px;}.elementor .e-accordion-item-icon-base{width:200px;height:20px;padding:0px;display:inline-flex;flex:0 0 auto;justify-content:flex-end;align-items:center;}.elementor .e-accordion-item-content-base{min-width:30px;padding:10px;display:block;}.elementor .e-background-video-base{width:100%;overflow:hidden;position:relative;padding:10px;display:flex;flex-direction:column;}.elementor .e-background-video-content-base{width:100%;position:relative;z-index:1;padding:0px;display:flex;flex-direction:column;flex:1 1 auto;}.elementor .e-background-video-controls-base{width:auto;position:absolute;inset-inline-end:20px;inset-block-end:20px;z-index:2;display:flex;gap:8px;}.elementor .e-background-video-play-base{cursor:pointer;padding:8px;border-style:none;background-color:transparent;display:inline-flex;justify-content:center;align-items:center;}.elementor .e-background-video-pause-base{cursor:pointer;padding:8px;border-style:none;background-color:transparent;display:inline-flex;justify-content:center;align-items:center;}.elementor .e-form-base{padding:20px;display:flex;flex-direction:row;gap:10px;flex-wrap:wrap;align-content:start;align-items:flex-start;}.elementor .e-form-base .e-form-checkbox-row{padding:0px;gap:8px;align-items:center;}.elementor .e-form-success-message-base{font-size:12px;color:#2F532E;text-align:center;padding:12px;background-color:#D4E9D6;display:none;}.elementor .e-form-error-message-base{font-size:12px;color:#870000;text-align:center;padding:12px;background-color:#ffdede;display:none;}.elementor .e-collection-loop-base{display:block;}.elementor .e-collection-loop-layout-base{display:grid;gap:20px;grid-template-columns:repeat(3, 1fr);grid-auto-rows:1fr;}.elementor .e-pagination-base{padding-block-start:8px;padding-block-end:8px;padding-inline-start:8px;padding-inline-end:8px;margin-block-start:8px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start;align-items:center;}.elementor .e-pagination-prev-base{font-size:14px;color:#1F2937;text-align:center;text-decoration:none;padding-block-start:8px;padding-block-end:8px;padding-inline-start:12px;padding-inline-end:12px;border-radius:4px;border-width:1px;border-color:#E5E7EB;border-style:solid;display:inline-flex;gap:8px;align-items:center;}.elementor .e-pagination-next-base{font-size:14px;color:#1F2937;text-align:center;text-decoration:none;padding-block-start:8px;padding-block-end:8px;padding-inline-start:12px;padding-inline-end:12px;border-radius:4px;border-width:1px;border-color:#E5E7EB;border-style:solid;display:inline-flex;gap:8px;align-items:center;}.elementor .e-collection-loop-empty-state-base{display:flex;justify-content:center;} /* base-mobile */ @media (max-width:767px) { @media(max-width:767px){.elementor .e-grid-base{grid-template-columns:repeat(1, 1fr);}} } /* elementor-post-166503 */ .elementor-166503 .elementor-element.elementor-element-e8478d3{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-5bf512b{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-1090037{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-bdd9ae1{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-70b918a{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-faf82ae{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-da157a8{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-3b1215c{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-874d84c{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-dd00d06{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;} /* ght-appealhead */ /* GHH Appeal: Title — breadcrumb, category, the appeal's name, short description. */ .ght.aph { padding: clamp(28px, 3.6vw, 52px) 0 clamp(24px, 3vw, 40px); } .ght .aph__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 22px; font-size: 14px; font-weight: 600; color: var(--ght-mute); } .ght .aph__crumbs a { text-decoration: none; } .ght .aph__crumbs a:hover { color: var(--ght-blue-d); } .ght .aph__crumbs span { opacity: .5; } .ght .aph__cat { margin-bottom: 10px; font-size: 15px; font-weight: 700; color: var(--ght-blue-d); } .ght .aph__h { max-width: 20ch; margin: 0; font-size: clamp(38px, 5vw, 76px); font-weight: 900; line-height: .98; letter-spacing: -.04em; color: var(--ght-ink); text-wrap: balance; } .ght .aph__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; } .ght .aph__share { position: relative; display: flex; align-items: center; gap: 6px; } .ght .aph__sharet { margin-right: 6px; font-size: 14px; font-weight: 700; color: var(--ght-mute); } /* desktop: the share block at the far right of the row, "Share this appeal" above the icons (user) */ @media (min-width: 761px) { .ght .aph__row { flex-wrap: nowrap; } .ght .aph__share { flex: none; margin-left: auto; } .ght .aph__sharet { position: absolute; right: 0; bottom: calc(100% + 6px); margin: 0; white-space: nowrap; } } .ght .aph__sh, .ght .aph__sh:hover, .ght .aph__sh:focus { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--ght-mist); color: var(--ght-ink); text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s; } .ght .aph__sh:hover { background: var(--ght-ink); color: #fff; } .ght .aph__sh[hidden] { display: none; } .ght .aph__sh svg { width: 18px; height: 18px; } /* WhatsApp, Facebook, X: the real brand marks, solid */ .ght .aph__sh svg.is-brand { width: 17px; height: 17px; fill: currentColor; stroke: none; } .ght .aph__done { position: absolute; right: 0; top: calc(100% + 6px); font-size: 13px; font-weight: 700; color: var(--ght-blue-d); white-space: nowrap; } .ght .aph__lead { max-width: 62ch; margin-top: 18px; font-size: clamp(17px, 1.3vw, 19px); color: var(--ght-ink-2); } .ght .aph__lead p { margin: 0 0 .6em; } .ght .aph__lead p:last-child { margin-bottom: 0; } .ght .aph__lead a { color: var(--ght-blue-d); } @media (max-width: 760px) { .ght .aph__crumbs a { display: inline-block; padding: 10px 0; margin: -10px 0; } .ght .aph__h { font-size: 38px; } } /* ght-appealgallery */ /* GHH Appeal: Photos — big photo, thumbnails, full-size view. */ .ght.apg { display: grid; gap: 12px; } .ght .apg__main { position: relative; display: block; aspect-ratio: var(--apg-ratio, 4 / 3); overflow: hidden; border-radius: 26px; background: var(--ght-mist); cursor: zoom-in; } .ght .apg__stage { position: relative; } .ght .apg__play, .ght .apg__play:hover, .ght .apg__play:focus { position: absolute; left: 18px; bottom: 18px; z-index: 2; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ght-ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); cursor: pointer; transition: transform .15s; } .ght .apg__play:hover { transform: scale(1.08); } .ght .apg__play svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; stroke: none; } .ght .apg__stage.is-playing .apg__main { visibility: hidden; } .ght .apg__film { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; background: #000; } .ght .apg__stage.is-playing { overflow: hidden; border-radius: 26px; } .ght .apg__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ght .apg__thumbs { display: flex; gap: 10px; margin: 0; padding: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; list-style: none; } .ght .apg__thumbs::-webkit-scrollbar { display: none; } .ght .apg__thumbs li { flex: none; } .ght .apg__thumb, .ght .apg__thumb:hover, .ght .apg__thumb:focus { position: relative; display: block; width: 84px; height: 84px; padding: 0; overflow: hidden; border: 0; border-radius: 14px; background-color: var(--ght-mist); cursor: pointer; opacity: .7; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .2s, outline-color .2s; } .ght .apg__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ght .apg__thumb:hover { opacity: 1; } .ght .apg__thumb.is-on { opacity: 1; outline-color: var(--ght-blue); } /* full size */ .ght .apg__box { position: fixed; z-index: 1000001; inset: 0; display: grid; place-items: center; padding: 4vw; background: rgba(3, 10, 16, .92); cursor: zoom-out; } .ght .apg__box[hidden] { display: none; } .ght .apg__box img { max-width: 100%; max-height: 88vh; border-radius: 14px; } .ght .apg__x, .ght .apg__x:hover, .ght .apg__x:focus { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background-color: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; } /* ── slider look: GoFundMe's photo viewer (measured from theirs) ── */ .ght.apg--slider { display: block; } .ght .apg__view { position: relative; aspect-ratio: var(--apg-ratio, 16 / 9); overflow: hidden; border-radius: 16px; background: #EDEFF1; touch-action: pan-y; -webkit-user-select: none; user-select: none; } .ght .apg__view:focus-visible { outline: 2px solid var(--ght-blue); outline-offset: 3px; } .ght .apg__track { display: flex; height: 100%; will-change: transform; } .ght .apg__slide { position: relative; flex: 0 0 100%; height: 100%; margin: 0; } .ght .apg__slide img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; } /* the film's play button sits in the middle of the first photo */ .ght.apg--slider .apg__play, .ght.apg--slider .apg__play:hover, .ght.apg--slider .apg__play:focus { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); } .ght.apg--slider .apg__play:hover { transform: translate(-50%, -50%) scale(1.06); } .ght .apg__slide.is-playing .apg__play { display: none; } .ght .apg__slide .apg__film { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; } /* dots: bottom left; the active one a 16px pill, normal 6px, far ones 3px */ .ght .apg__dots { position: absolute; left: 28px; bottom: 28px; z-index: 2; display: flex; align-items: center; gap: 8px; } .ght .apg__dot, .ght .apg__dot:hover, .ght .apg__dot:focus { flex: none; width: 6px; height: 6px; min-height: 0; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .45); cursor: pointer; transition: width .25s, height .25s, background-color .25s; } .ght .apg__dot.is-far { width: 3px; height: 3px; } .ght .apg__dot.is-on { width: 16px; height: 6px; background: #fff; } /* arrows: bottom right, 32px dark see-through circles */ .ght .apg__arrows { position: absolute; right: 24px; bottom: 24px; z-index: 2; display: flex; gap: 8px; } .ght .apg__arrow, .ght .apg__arrow:hover, .ght .apg__arrow:focus { display: grid; place-items: center; width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; transition: background-color .15s, opacity .15s; } .ght .apg__arrow:hover { background: rgba(0, 0, 0, .75); } .ght .apg__arrow[disabled] { opacity: .45; cursor: default; } .ght .apg__arrow svg { width: 16px; height: 16px; stroke-width: 2.2; } @media (max-width: 760px) { /* phones: inside the page's margins with rounded corners, like the cards under it (user: not full width); no arrows (swipe), dots centred */ .ght .apg__arrows { display: none; } .ght .apg__dots { left: 50%; bottom: 16px; transform: translateX(-50%); } .ght .apg__thumb, .ght .apg__thumb:hover, .ght .apg__thumb:focus { width: 64px; height: 64px; border-radius: 12px; } } /* ght-appealsecure */ /* GHH Appeal: Card Heading — shield + "Secure donation" (styled with the appeal page, ght-appeal.css). */ .ght.apsec { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; } .ght.apsec svg { width: 26px; height: 26px; color: #2f9e6e; } /* ght-appealdonors */ /* GHH Appeal: Donations — GoFundMe's donations card and window, measured from theirs (rows 40px avatars / 16px name / 14px amount · label, pill buttons, 616px window with a 24px radius, black pill tab, full-width Donate band, Donate now pinned at the foot), in GHH colours: blue where GoFundMe uses green, ink for their dark green. Root is .ght.apdn. */ .ght.apdn { --dn-ink: #232323; --dn-mute: #6F6F6F; --dn-soft: #F2F2F2; --dn-tint: #E9F6FD; padding: clamp(48px, 6vw, 80px) 0; color: var(--dn-ink); } /* totals */ .apdn .apdn__stats { display: flex; align-items: center; gap: 16px; } .apdn .apdn__ring { position: relative; display: grid; flex: none; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--ght-blue) calc(var(--p) * 1%), #EDEFF1 0); } .apdn .apdn__ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; } .apdn .apdn__ring b { position: relative; font-size: 15px; font-weight: 700; letter-spacing: -.02em; } .apdn .apdn__ring small { font-size: 9px; vertical-align: top; } .apdn .apdn__totals { display: grid; margin: 0; line-height: 1.2; } .apdn .apdn__raised { font-size: 22px; font-weight: 700; letter-spacing: -.02em; } .apdn .apdn__of { font-size: 20px; font-weight: 400; color: var(--dn-mute); } .apdn .apdn__totals small { margin-top: 2px; font-size: 14px; color: var(--dn-mute); } .apdn .apdn__acts { position: relative; display: grid; gap: 10px; margin: 18px 0 22px; } .apdn .apdn__pri, .apdn .apdn__pri:hover, .apdn .apdn__pri:focus, .apdn .apdn__sec, .apdn .apdn__sec:hover, .apdn .apdn__sec:focus { width: 100%; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; transition: filter .15s; } .apdn .apdn__pri { background: var(--ght-blue); color: #fff; } .apdn .apdn__sec { background: var(--ght-ink); color: #fff; } .apdn .apdn__pri:hover, .apdn .apdn__sec:hover { filter: brightness(.94); } .apdn .apdn__done { position: absolute; left: 0; right: 0; bottom: -20px; font-size: 13px; font-weight: 600; text-align: center; color: var(--ght-blue-d); } /* recent donations */ .apdn .apdn__count { display: flex; align-items: center; gap: 14px; margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--ght-blue-d); } .apdn .apdn__trend { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--dn-tint); } .apdn .apdn__trend svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* the activity line: the count, then how the appeal is moving, one line at a time rolling up */ .apdn .apdn__count.has-pulse { position: relative; height: 40px; } .apdn .apdn__line { display: flex; align-items: center; gap: 14px; min-width: 0; } .apdn .apdn__say { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .apdn .apdn__say b, .apdn .apdn__say time { font-weight: 800; } .apdn .has-pulse .apdn__line { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); transition: transform .45s var(--ght-ease), opacity .45s var(--ght-ease); pointer-events: none; } .apdn .has-pulse .apdn__line.is-on { opacity: 1; transform: none; pointer-events: auto; } .apdn .has-pulse .apdn__line.is-out { opacity: 0; transform: translateY(-14px); } /* gifts in the last day: the icon itself pulses (its round background stays still) */ .apdn .apdn__count.is-live .apdn__trend > * { animation: apdn-pulse 2s var(--ght-ease) infinite; transform-origin: 50% 50%; } @keyframes apdn-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 45% { transform: scale(1.2); opacity: .75; } } @media (prefers-reduced-motion: reduce) { .apdn .has-pulse .apdn__line { transition: none; } .apdn .apdn__count.is-live .apdn__trend > * { animation: none; } } .apdn .apdn__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .apdn .apdn__row { display: flex; align-items: center; gap: 16px; padding: 12px 0; } /* GoFundMe's avatar: their donor icon, 24px, #232323 on a #F5F5F5 circle */ .apdn .apdn__av { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #F5F5F5; color: var(--dn-ink); } .apdn .apdn__av svg { width: 24px; height: 24px; fill: currentColor; stroke: none; } .apdn .apdn__who { display: grid; flex: 1; min-width: 0; line-height: 1.4; } /* type as the promise card under it (user): 15px semi-bold ink over 14px grey */ .apdn .apdn__name { overflow: hidden; font-size: 15px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; color: var(--ght-ink); } .apdn .apdn__amt { font-weight: 600; color: inherit; } /* second line: flag, "Chessington, United Kingdom" · "3 days ago" (the place gives way first) */ .apdn .apdn__meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; color: var(--ght-mute); } .apdn .apdn__meta i { flex: none; margin: 0; font-style: normal; } .apdn .apdn__when, .apdn .apdn__tag { flex: none; white-space: nowrap; } /* the pinned top donation: a light-blue panel (border only, no shadow), white avatar, blue starred label */ /* pulled out by its own padding, so its avatar lines up with the rows under it */ .apdn .apdn__tops { gap: 8px; margin: 6px 0; } .apdn .apdn__row--top { margin: 0 -14px; padding: 12px 14px; border: 1px solid #CBE9F8; border-radius: 12px; background: var(--dn-tint); } .apdn .apdn__row--top .apdn__av { background: #fff; color: var(--ght-blue-d); } .apdn .apdn__tag { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ght-blue-d); } .apdn .apdn__tag svg { width: 14px; height: 14px; fill: currentColor; stroke: none; } .apdn .apdn__flag { flex: none; font-size: 15px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; } .apdn .apdn__place { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* the latest gifts: without the script only the newest few show; with it they arrive one by one */ .apdn .apdn__feed:not(.is-live) > li:nth-child(n + 4) { display: none; } /* the replay window: a fixed height (set by the script), the row arriving at the top grows (script) */ /* a block, not a grid: rows keep their height and are pushed down out of the window */ .apdn .apdn__feed.is-live { display: block; overflow: hidden; } .apdn .apdn__feed > li { overflow: hidden; box-sizing: border-box; } .apdn .apdn__empty { margin: 0; color: var(--dn-mute); } .apdn .apdn__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; } .apdn .apdn__btn, .apdn .apdn__btn:hover, .apdn .apdn__btn:focus { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 1px solid #C8C8C8; border-radius: 999px; background: #fff; color: var(--dn-ink); font: inherit; font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; } .apdn .apdn__btn:hover { background: var(--dn-soft); } .apdn .apdn__btn svg { width: 16px; height: 16px; } /* the window */ .apdn .apdn__win { position: fixed; z-index: 1000002; inset: 0; display: grid; place-items: center; padding: 50px 24px; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .apdn .apdn__win[hidden] { display: none; } .apdn .apdn__panel { display: flex; flex-direction: column; width: min(616px, 100%); height: 100%; max-height: 900px; overflow: hidden; border-radius: 24px; background: #fff; color: var(--dn-ink); } .apdn .apdn__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 24px 12px; } .apdn .apdn__title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.025em; } .apdn .apdn__badge { padding: 3px 7px; border-radius: 6px; background: #EDEFF1; font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--dn-ink); } .apdn .apdn__x, .apdn .apdn__x:hover, .apdn .apdn__x:focus { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dn-ink); cursor: pointer; } .apdn .apdn__x:hover { background: var(--dn-soft); } .apdn .apdn__x svg { width: 20px; height: 20px; } .apdn .apdn__tabs { display: flex; gap: 4px; padding: 6px 24px 18px; } .apdn .apdn__tab, .apdn .apdn__tab:hover, .apdn .apdn__tab:focus { padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--dn-mute); font: inherit; font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; } .apdn .apdn__tab[aria-selected="true"] { background: var(--dn-ink); color: #fff; } .apdn .apdn__scroll { flex: 1; min-height: 0; padding: 0 24px 16px; overflow-y: auto; overscroll-behavior: contain; } .apdn .apdn__topline { margin: 0 0 6px; font-size: 16px; font-weight: 700; } .apdn .apdn__topline[hidden] { display: none; } .apdn .apdn__list--win .apdn__row { padding: 14px 0; } /* the Donate band, full width inside the window */ .apdn .apdn__cta { display: flex; align-items: center; gap: 16px; margin: 6px -24px; padding: 16px 24px; background: var(--dn-tint); } .apdn .apdn__cta img { flex: none; width: 44px; height: 56px; border: 2px solid #fff; border-radius: 6px; object-fit: cover; transform: rotate(-4deg); } .apdn .apdn__cta p { flex: 1; margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; } .apdn .apdn__ctabtn, .apdn .apdn__ctabtn:hover, .apdn .apdn__ctabtn:focus { flex: none; min-height: 32px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ght-ink); color: #fff; font: inherit; font-size: 14px; font-weight: 700; text-transform: none; cursor: pointer; } .apdn .apdn__more { margin: 8px 0 0; text-align: center; color: var(--dn-mute); } .apdn .apdn__foot { padding: 24px; border-top: 1px solid #E5E5E5; } .apdn .apdn__foot .apdn__pri { min-height: 48px; } @media (max-width: 760px) { .apdn .apdn__win { align-items: end; padding: 0; } .apdn .apdn__panel { width: 100%; height: 92vh; border-radius: 24px 24px 0 0; } .apdn .apdn__title { font-size: 24px; } } /* ght-appealtrust */ /* GHH Appeal: Reassurance — three short points under the form. (Root is .ght.aptr.) */ .ght.aptr { display: grid; gap: 4px; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--ght-line); list-style: none; } .ght.aptr .aptr__i { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; text-decoration: none; } .ght.aptr svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--ght-blue-d); } .ght.aptr p { display: grid; font-size: 14px; line-height: 1.4; } .ght.aptr b { font-size: 15px; color: var(--ght-ink); } .ght.aptr span { color: var(--ght-mute); } .ght.aptr a.aptr__i:hover b { color: var(--ght-blue-d); } /* ght-appealbrief */ /* GHH Appeal: Brief — everything about the appeal in one card: progress, tabs, facts, story, gift, steps and films. Same on every appeal; each part comes from the appeal itself. */ .ght.apbr { container-type: inline-size; } .ght .apbr__h { margin-bottom: 16px; } /* tabs: one bar of pills on a soft track; scrolls sideways when the card is narrow */ .ght .apbr__tabs { scroll-margin-top: calc(var(--ght-hdr) + 16px); display: flex; gap: 4px; margin: 0 0 22px; padding: 4px; border-radius: 999px; background: var(--ght-mist); overflow-x: auto; scrollbar-width: none; } .ght .apbr__tabs::-webkit-scrollbar { display: none; } .ght .apbr__tab, .ght .apbr__tab:hover, .ght .apbr__tab:focus { flex: 1 1 0; min-height: 40px; margin: 0; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ap-muted, var(--ght-mute)); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; box-shadow: none; transition: background .2s, color .2s, box-shadow .2s; } .ght .apbr__tab:hover { color: var(--ap-ink, var(--ght-ink)); } .ght .apbr__tab[aria-selected="true"] { background: #fff; color: var(--ap-ink, var(--ght-ink)); box-shadow: 0 1px 2px rgba(6, 20, 30, .08), 0 0 0 1px var(--ap-edge, var(--ght-line)); } .ght .apbr__tab:focus-visible { outline: 2px solid var(--ght-blue); outline-offset: 2px; } /* with the script, one panel at a time (without it, all of them, one under another) */ .ght.apbr.is-tabbed .apbr__panel:not(.is-on) { display: none; } .ght .apbr__panel + .apbr__panel { margin-top: 28px; } .ght.apbr.is-tabbed .apbr__panel + .apbr__panel { margin-top: 0; } .ght.apbr.is-tabbed .apbr__panel.is-on { animation: ght-apbr-in .35s var(--ght-ease) both; } @keyframes ght-apbr-in { from { opacity: 0; transform: translateY(6px); } } /* at a glance: icon, small label, value */ .ght .apbr__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; } .ght .apbr__fact { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; padding: 12px 14px; border: 1px solid var(--ap-edge, var(--ght-line)); border-radius: 12px; background: #fff; } .ght .apbr__fi { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ght-soft); color: var(--ght-blue-d); } .ght .apbr__fi svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ght .apbr__fact > span:last-child { display: grid; gap: 1px; min-width: 0; } .ght .apbr__fact small { font-size: 12.5px; line-height: 1.2; color: var(--ap-muted, var(--ght-mute)); } .ght .apbr__fact b { font-size: 15.5px; font-weight: 700; line-height: 1.25; color: var(--ap-ink, var(--ght-ink)); overflow-wrap: anywhere; } .ght .apbr__fact a, .ght .apbr__jump, .ght .apbr__jump:hover, .ght .apbr__jump:focus { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: 0; text-transform: none; text-decoration: underline; text-decoration-color: var(--ap-line, var(--ght-line)); text-underline-offset: 3px; cursor: pointer; box-shadow: none; min-height: 0; } .ght .apbr__fact a:hover, .ght .apbr__jump:hover { text-decoration-color: currentColor; } /* the story */ .ght .apbr .apst__text { max-width: none; font-size: 16px; line-height: 1.65; color: var(--ap-muted, var(--ght-mute)); } .ght .apbr .apst__text > p:first-child { font-size: 17.5px; line-height: 1.55; color: var(--ap-ink, var(--ght-ink)); } .ght .apbr .story__body.is-folded { max-height: 13em; } /* your gift */ .ght .apbr__hint { margin: 0 0 4px; font-size: 14.5px; color: var(--ap-muted, var(--ght-mute)); } .ght .apbr__h3 { margin: 22px 0 6px; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ap-ink, var(--ght-ink)); } .ght .apbr__panel > .apbr__h3:first-child { margin-top: 0; } .ght .apbr__boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; } .ght .apbr__boxes li { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--ght-mist); } .ght .apbr__bi { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--ght-blue-d); } .ght .apbr__bi img { width: 28px; height: 28px; object-fit: contain; } .ght .apbr__bi svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .ght .apbr__boxes b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.3; color: var(--ap-ink, var(--ght-ink)); } .ght .apbr__boxes small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ap-muted, var(--ght-mute)); } .ght .apbr__give { margin-top: 20px; } /* how it works: the steps in order, joined by a line */ .ght .apbr__steps { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: apbr; } .ght .apbr__steps li { position: relative; display: grid; gap: 4px; margin: 0; padding: 2px 0 22px 52px; counter-increment: apbr; } .ght .apbr__steps li:last-child { padding-bottom: 0; } .ght .apbr__steps li::before { content: counter(apbr); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ght-blue); color: #fff; font-size: 15px; font-weight: 700; } .ght .apbr__steps li:not(:last-child)::after { content: ""; position: absolute; left: 16.25px; top: 38px; bottom: 4px; width: 1.5px; background: var(--ap-edge, var(--ght-line)); } .ght .apbr__steps b { font-size: 16.5px; font-weight: 700; line-height: 1.3; color: var(--ap-ink, var(--ght-ink)); padding-top: 6px; } .ght .apbr__steps span { font-size: 15px; line-height: 1.55; color: var(--ap-muted, var(--ght-mute)); } /* from the field: the appeal's films, upright like the app's */ .ght .apbr__films { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; } .ght .apbr__films li { margin: 0; } .ght .apbr__film { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 14px; background: var(--ght-night); color: #fff; text-decoration: none; } .ght .apbr__film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ght-ease); } .ght .apbr__film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 20, 30, 0) 50%, rgba(6, 20, 30, .85)); } .ght .apbr__film:hover img { transform: scale(1.04); } .ght .apbr__play { position: absolute; top: 50%; left: 50%; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ght-ink); } .ght .apbr__play svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; } .ght .apbr__len { position: absolute; top: 8px; right: 8px; z-index: 1; padding: 2px 7px; border-radius: 999px; background: rgba(6, 20, 30, .6); font-size: 12px; font-weight: 600; } .ght .apbr__ft { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; display: -webkit-box; overflow: hidden; font-size: 13.5px; font-weight: 600; line-height: 1.3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .ght .apbr .more { color: var(--ght-blue-d); } /* narrow card (phone, or the column below 560px): two facts and two boxes a row */ @container (max-width: 560px) { .ght .apbr__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* an odd one out takes the whole row, so no gap is left beside it */ .ght .apbr__fact:last-child:nth-child(odd) { grid-column: 1 / -1; } .ght .apbr__boxes { grid-template-columns: minmax(0, 1fr); } } /* phone: the tabs two a row, all in sight (not a bar that hides the last ones off the edge) */ @container (max-width: 440px) { .ght .apbr__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 14px; } .ght .apbr__tab, .ght .apbr__tab:hover, .ght .apbr__tab:focus { border-radius: 10px; padding: 8px 10px; } .ght .apbr__tab:last-child:nth-child(odd) { grid-column: 1 / -1; } } @container (max-width: 380px) { .ght .apbr__fact { padding: 10px; gap: 10px; } .ght .apbr__fi { width: 30px; height: 30px; } .ght .apbr__films { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .ght.apbr.is-tabbed .apbr__panel.is-on { animation: none; } } /* ght-appealfaq */ /* GHH Appeal: Questions — uses the Questions section's styles (faq.css). */ /* ght-films */ /* GHH Field Films — a sideways rail of the app's reels. */ .ght.films { padding: clamp(80px, 10vw, 140px) 0; background: var(--ght-night); color: #fff; } .ght .films__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 40px; margin-bottom: 40px; } .ght .films__head .more { margin-left: auto; } .ght .films__rail { display: flex; gap: 16px; max-width: 1600px; margin: 0 auto; padding: 0 var(--ght-pad) 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ght-pad); scrollbar-width: none; list-style: none; } .ght .films__rail::-webkit-scrollbar { display: none; } .ght .films__rail li { flex: none; scroll-snap-align: start; } .ght .fl { position: relative; display: block; width: 250px; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 18px; background: var(--ght-ink-2); color: #fff; text-decoration: none; } .ght .fl img, .ght .fl video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ght-ease), opacity .4s; } .ght .fl video { opacity: 0; } .ght .fl.is-playing video { opacity: 1; } .ght .fl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0) 55%); } .ght .fl:hover img { transform: scale(1.05); } .ght .fl__len { position: absolute; z-index: 1; top: 14px; right: 14px; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .5); font-size: 12px; font-weight: 700; } .ght .fl__t { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 16px; font-size: 16px; font-weight: 700; line-height: 1.25; } .ght .fl__t small { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .65); } /* the app plugin's GHH Reels in place of the rail: its heading and "Watch more" are this section's own, its background is the section's. Inside .wrap its rail starts in line with the heading and runs off the right edge (as the app widget is designed). */ .ght .films__app .ghhr { padding: 0; background: transparent; } .ght .films__app .ghhr-head, .ght .films__app .ghhr-watchmore { display: none; } .ght .films__app .ghhr-rail { margin-top: 0; } .ght .films__app .ghhr-controls { justify-content: flex-end; } @media (max-width: 760px) { .ght .fl { width: 200px; } } /* ght-appeals */ /* GHH Urgent Appeals — three calm cards, each with its own film. */ .ght.now { padding: clamp(72px, 8vw, 120px) 0; background: #fff; color: var(--ght-ink); } .ght .now__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 40px; margin-bottom: clamp(28px, 3vw, 44px); } .ght .now__lead { margin-top: 14px; } .ght .now__all { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ght-blue-d); text-decoration: none; } .ght .now__all svg { transition: transform .2s var(--ght-ease); } .ght .now__all:hover svg { transform: translateX(4px); } .ght .now__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .ght .ap { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--ght-mist); } .ght .ap__film { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--ght-ink); } .ght .ap__film video, .ght .ap__film img { width: 100%; height: 100%; object-fit: cover; } .ght .ap__rec { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 999px; background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 12px; font-weight: 700; } .ght .ap__body { display: flex; flex: 1; flex-direction: column; padding: 22px; } .ght .ap__tag { font-size: 13px; font-weight: 700; color: var(--ght-blue-d); } .ght .ap__h { margin-top: 6px; font-size: clamp(22px, 1.8vw, 27px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; } .ght .ap__h a { text-decoration: none; } .ght .ap__h a:hover { color: var(--ght-blue-d); } .ght .ap__text { margin-top: 8px; font-size: 15px; color: var(--ght-mute); } .ght .ap__goal { margin-top: auto; padding-top: 18px; } .ght .ap__bar { height: 6px; overflow: hidden; border-radius: 999px; background: #D3E1E9; } .ght .ap__bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ght-blue); transition: width 1.4s var(--ght-ease); } .ght .ap__goal p { margin-top: 8px; font-size: 14px; color: var(--ght-mute); } .ght .ap__goal b { color: var(--ght-ink); } .ght .ap__give { display: flex; gap: 6px; margin-top: 16px; } .ght .ap__goal + .ap__give { margin-top: 16px; } .ght .ap__body > .ap__give:first-child, .ght .ap__text + .ap__give { margin-top: auto; padding-top: 18px; } /* > only: SkyDonate's pop-up starts inside .ap__give and its buttons must keep their own look */ .ght .ap__give > button, .ght .ap__give > button:focus { flex: 1; min-height: 46px; padding: 0 6px; border: 1.5px solid var(--ght-line); border-radius: 999px; background-color: #fff; color: var(--ght-ink); font-family: var(--ght-f); font-size: 16px; font-weight: 800; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; } .ght .ap__give > button.is-on, .ght .ap__give > button:hover { border-color: var(--ght-ink); background-color: var(--ght-ink); color: #fff; } .ght .ap__give > .btn { flex: 1.4; min-height: 46px; padding: 0 14px; } @media (max-width: 1180px) { .ght .now__grid { gap: 14px; } .ght .ap__give { flex-wrap: wrap; } .ght .ap__give > .btn { flex-basis: 100%; } } /* "grid" layout: every appeal. The first lies sideways across two columns (photo beside its words), and so does a last card that would otherwise sit alone on its row. */ .ght.now--grid .now__grid { gap: 22px; } .ght.now--grid .ap:first-child, .ght.now--grid .ap:last-child:nth-child(3n) { grid-column: span 2; flex-direction: row; } .ght.now--grid .ap:last-child:nth-child(3n) { grid-column: 1 / -1; } .ght.now--grid .ap:first-child .ap__film, .ght.now--grid .ap:last-child:nth-child(3n) .ap__film { flex: 0 0 56%; aspect-ratio: auto; min-height: 100%; } .ght.now--grid .ap:first-child .ap__body, .ght.now--grid .ap:last-child:nth-child(3n) .ap__body { justify-content: center; padding: clamp(24px, 2.6vw, 40px); } .ght.now--grid .ap:first-child .ap__h { font-size: clamp(26px, 2.4vw, 36px); } .ght.now--grid .ap:first-child .ap__text { font-size: 16.5px; } .ght.now--grid .ap:first-child .ap__goal { margin-top: 0; } @media (max-width: 1180px) and (min-width: 761px) { .ght.now--grid .now__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ght.now--grid .ap:last-child:nth-child(3n) { grid-column: auto; flex-direction: column; } .ght.now--grid .ap:last-child:nth-child(3n) .ap__film { flex: none; aspect-ratio: 1 / 1; min-height: 0; } .ght.now--grid .ap:last-child:nth-child(3n) .ap__body { justify-content: flex-start; padding: 22px; } /* two columns: the featured card fills a row, so an even count leaves the last one alone */ .ght.now--grid .ap:last-child:nth-child(even) { grid-column: 1 / -1; flex-direction: row; } .ght.now--grid .ap:last-child:nth-child(even) .ap__film { flex: 0 0 50%; aspect-ratio: auto; min-height: 100%; } .ght.now--grid .ap:last-child:nth-child(even) .ap__body { justify-content: center; } } /* phones: a sideways row of cards */ @media (max-width: 760px) { .ght .now__grid { display: flex; gap: 14px; margin: 0 calc(var(--ght-pad) * -1); padding: 0 var(--ght-pad) 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ght-pad); scrollbar-width: none; } .ght .now__grid::-webkit-scrollbar { display: none; } .ght .ap { flex: none; width: 82%; scroll-snap-align: start; } /* "grid" layout: one under another, wide photos */ .ght.now--grid .now__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; } .ght.now--grid .ap, .ght.now--grid .ap:first-child, .ght.now--grid .ap:last-child:nth-child(3n) { grid-column: auto; flex-direction: column; width: auto; } .ght.now--grid .ap .ap__film, .ght.now--grid .ap:first-child .ap__film, .ght.now--grid .ap:last-child:nth-child(3n) .ap__film { flex: none; aspect-ratio: 16 / 10; min-height: 0; } .ght.now--grid .ap:first-child .ap__body, .ght.now--grid .ap:last-child:nth-child(3n) .ap__body { padding: 20px; } .ght.now--grid .ap:first-child .ap__h { font-size: 26px; } } /* ght-appeal-sd */ /* ========================================================================== * GHH Toolkit — SkyDonate's donation form on the appeal page, in the GHH look (moved out of * ght-appeal.css in 1.53.6). Loaded only while Settings → GHH Toolkit → "Style SkyDonate widgets" * is on; off, SkyDonate's own design shows. * ======================================================================== */ /* ── SkyDonate's form, as the donation checkout draws it (also in the Donate section, .ght-sdform) ── */ :is(.ght-ap-side, .ght-sdform) .elementor-widget-skyweb_donation_form { --accent-color: var(--ght-blue); margin: 0; } :is(.ght-ap-side, .ght-sdform) .donation-form-wrapper { font-family: var(--ght-f); } :is(.ght-ap-side, .ght-sdform) .donation-form { gap: 12px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; } :is(.ght-ap-side, .ght-sdform) .donation-form button, :is(.ght-ap-side, .ght-sdform) .donation-form input, :is(.ght-ap-side, .ght-sdform) .donation-form select { font-family: var(--ght-f); } /* Give once / Monthly: two boxes, the chosen one light blue */ :is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-switch { display: grid !important; grid-template-columns: 1fr 1fr !important; width: 100%; gap: 0; padding: 0; border: 0; border-radius: 8px; background: none; box-shadow: none; } :is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-btn { width: 100% !important; max-width: none !important; flex: none !important; min-height: 46px; margin: 0; border: 0; border-radius: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--ght-line); color: var(--ght-ink); font-size: 16px; font-weight: 500; text-transform: none; } :is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-btn:first-child { border-radius: 8px 0 0 8px; } :is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-btn:last-child { border-radius: 0 8px 8px 0; } :is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-btn::before { display: none; } :is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-btn.active { position: relative; z-index: 1; background: var(--ap-soft, #E9F6FD); box-shadow: inset 0 0 0 1.5px var(--ght-blue); color: var(--ght-ink); } /* amounts */ :is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons { gap: 8px; } :is(.ght-ap-side, .ght-sdform) .donation-form.grid-layout .donation-buttons .donation-btn { display: flex; align-items: center; justify-content: center; min-height: 46px; border: 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--ght-line); color: var(--ght-ink); font-size: 17px; font-weight: 500; text-transform: none; } :is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons .donation-btn::after { display: none; } :is(.ght-ap-side, .ght-sdform) .donation-form.grid-layout .donation-buttons .donation-btn:hover { box-shadow: inset 0 0 0 1.5px var(--ght-blue); } :is(.ght-ap-side, .ght-sdform) .donation-form.grid-layout .donation-buttons .donation-btn.active { background: var(--ap-soft, #E9F6FD); box-shadow: inset 0 0 0 1.5px var(--ght-blue); color: var(--ght-ink); } :is(.ght-ap-side, .ght-sdform) .donation-form .donation-btn .currency-symbol, :is(.ght-ap-side, .ght-sdform) .donation-form .donation-btn .price { color: inherit; font-weight: inherit; } /* project options with a label ("Fully fund a complete water well" £1,120) — water wells, masjids: one per row, what it does on the left, the amount on the right, sentence case; SkyDonate ran "£1120Fully Fund A Complete…" together, title-cased, the others in pink */ :is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons:has(.btn-label) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; } :is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons .donation-btn:has(.btn-label) { display: flex !important; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 12px; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 50px; white-space: normal !important; margin: 0 !important; padding: 10px 16px !important; border: 0 !important; border-radius: 10px !important; background: #fff !important; box-shadow: inset 0 0 0 1px var(--ght-line) !important; color: var(--ght-ink) !important; font: 500 15px/1.3 var(--ght-f) !important; text-align: left; text-transform: none !important; letter-spacing: 0 !important; } :is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons .donation-btn:has(.btn-label):hover { box-shadow: inset 0 0 0 1.5px var(--ght-blue) !important; } :is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons .donation-btn.active:has(.btn-label) { background: var(--ght-soft) !important; box-shadow: inset 0 0 0 1.5px var(--ght-blue) !important; } :is(.ght-ap-side, .ght-sdform) .donation-form .donation-btn:has(.btn-label) .btn-label { flex: 1; min-width: 0; color: var(--ght-ink) !important; font: inherit !important; text-transform: none !important; white-space: normal !important; } :is(.ght-ap-side, .ght-sdform) .donation-form .donation-btn:has(.btn-label) .price { flex: none; color: var(--ght-ink) !important; font-size: 16px !important; font-weight: 700 !important; } :is(.ght-ap-side, .ght-sdform) .donation-form .donation-btn:has(.btn-label)::before { display: none !important; } /* the project's promise above the options: a calm line, not blue part-way through */ :is(.ght-ap-side, .ght-sdform) .donation-box-title, :is(.ght-ap-side, .ght-sdform) .donation-box-title * { color: var(--ght-ink-2) !important; font-weight: 400 !important; } :is(.ght-ap-side, .ght-sdform) .donation-box-title { margin-bottom: 12px; font-size: 15px; line-height: 1.5; } /* custom amount: one big field */ :is(.ght-ap-side, .ght-sdform) .donation-amount-groups .donation-custom { min-height: 56px; border: 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--ght-line); } /* list layout (Fidyah): SkyDonate joins the field to the list above (square top, no gap); the rows are separate cards here, so it is one too */ :is(.ght-ap-side, .ght-sdform) .donation-form.list-layout .donation-amount-groups .donation-custom { margin-top: 8px !important; border-radius: 10px !important; } :is(.ght-ap-side, .ght-sdform) .donation-amount-groups .donation-custom:focus-within { box-shadow: inset 0 0 0 1.5px var(--ght-blue); } :is(.ght-ap-side, .ght-sdform) .donation-amount-groups .donation-custom .skydonate-currency-wrapper .currency-symbol { color: var(--ght-ink); background-color: transparent; font-weight: 400; } /* (the field's ring is an inset shadow: anything inside with a background would paint over it) */ :is(.ght-ap-side, .ght-sdform) .donation-custom input.custom-amount-input { background: transparent !important; box-shadow: none !important; color: var(--ght-ink); font-size: 22px; font-weight: 500; } :is(.ght-ap-side, .ght-sdform) .donation-custom .custom-placeholder { background: transparent !important; } /* the currency switcher sits invisibly over the £ (its own label would print over it) */ :is(.ght-ap-side, .ght-sdform) .donation-custom .skydonate-currency-select { color: transparent; background: transparent; } :is(.ght-ap-side, .ght-sdform) .donation-custom .skydonate-currency-select option { color: var(--ght-ink); } /* the field's blue ring is the focus mark: SkyDonate's reset.css also draws a black outline on the input/select inside it */ :is(.ght-ap-side, .ght-sdform) .donation-custom :is(input.custom-amount-input, .skydonate-currency-select):is(:focus, :focus-visible) { outline: 0 !important; box-shadow: none !important; } /* "Select donation type": its group draws the box */ :is(.ght-ap-side, .ght-sdform) .donation-type-select-group { border: 0 !important; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--ght-line); } :is(.ght-ap-side, .ght-sdform) .donation-type-select-group select { min-height: 48px; border: 0; background-color: transparent; box-shadow: none; font-size: 15px; color: var(--ght-ink); } :is(.ght-ap-side, .ght-sdform) .skydonate-currency-wrapper, :is(.ght-ap-side, .ght-sdform) .skydonate-currency-select { border: 0 !important; box-shadow: none !important; } /* Donate */ :is(.ght-ap-side, .ght-sdform) .donation-form-wrapper .form-submit-button { height: 54px !important; min-height: 54px !important; border-radius: 8px; background: var(--ght-blue); background-image: none; box-shadow: none; } :is(.ght-ap-side, .ght-sdform) .donation-form-wrapper .form-submit-button:hover { background: var(--ght-blue-d); filter: none !important; } :is(.ght-ap-side, .ght-sdform) .form-submit-button > span { font-family: var(--ght-f); font-weight: 600; text-transform: none; } /* "This project is Zakat applicable.": a quiet line with a blue tick, not SkyDonate's lilac pill */ body .donation-form-wrapper .zakat-applicable { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 14px 0 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ght-ink-2); font: 500 14px/1.4 var(--ght-f); text-align: center; } body .donation-form-wrapper .zakat-applicable i { display: none; } body .donation-form-wrapper .zakat-applicable::before { content: ""; flex: none; width: 16px; height: 16px; background: var(--ght-blue-d); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12.5 2.7 2.7L16.2 9.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12.5 2.7 2.7L16.2 9.5'/%3E%3C/svg%3E") center / contain no-repeat; } /* the header's Donate pop-up on an appeal page (header.js): the site's close button, not SkyDonate's red one */ .quick-modal.ght-qd .quick-modal-close { width: 40px; height: 40px; border: 1px solid var(--ght-line); border-radius: 50%; background: #fff; box-shadow: none; color: var(--ght-ink); } .quick-modal.ght-qd .quick-modal-close:hover { background: var(--ght-mist); } .quick-modal.ght-qd .quick-modal-close:after { background-color: var(--ght-ink); } .quick-modal.ght-qd .quick-modal-body { border-radius: 20px; } /* ght-appeal */ /* ========================================================================== * GHH appeal (product) page — styled on SkyDonate's donation checkout * (FundraiseUp style) with GoFundMe-style type: Onest (bold, tight headings, * plain text), white cards with a 16px radius and a 1px border (no shadows), * 8px controls with a fine ring, the chosen * option in light blue with a blue ring, one blue button. * * The appeal template (build/ght-build-appeal.php) is Elementor containers: * .ght-ap-top the grid * .ght-ap-media photos (+ film) and progress left, row 1 * .ght-ap-rail right column: * .ght-ap-side the giving card (heading + SkyDonate's Donation Form) * .ght-ap-side2 recent donations, our promise * .ght-ap-body the story card, how it helps left, row 2 * Phones: photos → giving card → story → donations. Classes are set on the * containers (Advanced → CSS Classes), so the layout stays editable. * ======================================================================== */ /* ── the calm type and colours (this page only) ── */ .ght-appeal-page { --ght-f: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --ap-ink: #1F2933; --ap-muted: #5F6B7A; --ap-line: #CDD5DE; --ap-soft: #E9F6FD; /* cards are drawn with a border only, no shadow (user: "keep it clean") */ --ap-edge: #DDE3EA; font-family: var(--ght-f); color: var(--ap-ink); } body.single-product.ght-site { background: #F6F8FA; } .ght-appeal-page .ght { font-family: var(--ght-f); } .ght-appeal-page .ght .h2 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; } .ght-appeal-page .ght .lead { font-size: 16.5px; color: var(--ap-muted); } .ght-appeal-page .ght-notices:empty { display: none; } .ght-appeal-page .ght-notices { max-width: 1200px; margin: 16px auto 0; padding: 0 var(--ght-pad); } /* title */ .ght-appeal-page .ght.aph { padding: clamp(24px, 3vw, 40px) 0 clamp(20px, 2.4vw, 28px); } .ght-appeal-page .ght.aph .wrap { max-width: 1200px; } .ght-appeal-page .ght .aph__cat { margin-bottom: 6px; font-size: 14px; font-weight: 600; } .ght-appeal-page .ght .aph__h { max-width: 28ch; font-size: clamp(30px, 3.2vw, 42px); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; color: var(--ap-ink); } .ght-appeal-page .ght .aph__lead { margin-top: 10px; font-size: 17px; line-height: 1.55; color: var(--ap-muted); } /* ── the grid ── */ .e-con.ght-ap-top { --padding-top: 0px; --padding-bottom: 0px; display: grid !important; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); grid-template-areas: "media rail" "body rail"; grid-template-rows: auto 1fr; /* the tall right column's extra height goes to the story row, never between the photo and the story */ align-items: start; gap: 24px 32px; max-width: 1200px; margin: 0 auto; padding: 0 var(--ght-pad) clamp(48px, 6vw, 80px); } .e-con.ght-ap-media, .e-con.ght-ap-side, .e-con.ght-ap-side2, .e-con.ght-ap-rail, .e-con.ght-ap-body { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --gap: 0px; --row-gap: 0px; min-width: 0; } .e-con.ght-ap-top > .ght-ap-media { grid-area: media; display: flex; flex-direction: column; gap: 18px; } .e-con.ght-ap-top > .ght-ap-rail { grid-area: rail; display: flex; flex-direction: column; gap: 20px; } .e-con.ght-ap-top > .ght-ap-body { grid-area: body; display: flex; flex-direction: column; gap: 20px; } .e-con.ght-ap-side2 { display: flex; flex-direction: column; gap: 20px; } .e-con.ght-ap-body > .elementor-widget:not(:has(.ght)), .e-con.ght-ap-side2 > .elementor-widget:not(:has(.ght)) { display: none; } /* an older template (giving card straight in the grid) still lays out */ .e-con.ght-ap-top:not(:has(> .ght-ap-rail)) > .ght-ap-side { grid-area: rail; } /* cards */ .e-con.ght-ap-side, .ght-ap-body .ght.apst, .ght-ap-body .ght.apim, .ght-ap-body .ght.apbr, .ght-ap-side2 .ght.apdn, .ght-ap-side2 .ght.aptr { padding: 24px; border: 1px solid var(--ap-edge); border-radius: 16px; background: #fff; box-shadow: none; } .e-con.ght-ap-side { display: flex; flex-direction: column; gap: 16px; } .ght-ap-body .ght.apst, .ght-ap-body .ght.apim, .ght-ap-body .ght.apbr { padding: clamp(22px, 2.6vw, 32px); } .ght .apst__h2, .ght-appeal-page .ght .apst__h2 { margin: 0 0 14px; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: var(--ap-ink); } .ght-appeal-page .ght.apst--parts .apst__text { max-width: none; font-size: 16px; line-height: 1.65; color: var(--ap-muted); } .ght-appeal-page .ght .rich h3, .ght-appeal-page .ght .rich h4 { font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--ap-ink); } .ght-appeal-page .ght .rich strong, .ght-appeal-page .ght .rich b { font-weight: 600; color: var(--ap-ink); } /* card heading: shield + "Secure donation" */ .ght-appeal-page .ght.apsec { font-size: 20px; font-weight: 700; letter-spacing: -.015em; color: var(--ap-ink); } /* photos and progress */ .ght-appeal-page .ght .apg__main, .ght-appeal-page .ght .apg__stage.is-playing { border-radius: 16px; } .ght-appeal-page .ght .apg__thumb { border-radius: 10px; } .ght-appeal-page .ght.apgo { padding: 18px 20px; border: 1px solid var(--ap-edge); border-radius: 16px; background: #fff; box-shadow: none; } /* no shadows anywhere on the page: the gift cards and play button keep to borders too */ .ght-appeal-page .ght .apst__gift:hover { box-shadow: inset 0 0 0 1.5px var(--ght-blue); } .ght-appeal-page .ght .apg__play { box-shadow: none; } .ght-appeal-page .ght .apgo__line { font-size: 15px; color: var(--ap-muted); } .ght-appeal-page .ght .apgo__line b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ap-ink); } /* how it helps, gifts, points: the checkout's controls */ .ght-appeal-page .ght .apim__list li, .ght-appeal-page .ght .apst__gift { border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--ap-line); } .ght-appeal-page .ght .apst__gift:hover { box-shadow: inset 0 0 0 1.5px var(--ght-blue); transform: none; } .ght-appeal-page .ght .apst__gift.is-on { background: var(--ap-soft); box-shadow: inset 0 0 0 1.5px var(--ght-blue); } .ght-appeal-page .ght .apst__gift b, .ght-appeal-page .ght .apim__list b { font-weight: 600; } .ght-appeal-page .ght .apst__price { font-weight: 700; letter-spacing: -.01em; } .ght-appeal-page .ght .apst__pts li { border-radius: 10px; background: #F4F7FA; } .ght-appeal-page .ght .apst__pts li b { font-weight: 600; } /* donations and our promise in the right column (the donations panel styles itself: appealdonors.css) */ .ght-ap-side2 .ght.apdn .apst__h2 { font-size: 18px; } .ght-ap-side2 .ght.aptr { display: grid; gap: 14px; margin: 0; list-style: none; } .ght-appeal-page .ght.aptr b { font-weight: 600; } /* SkyDonate's form itself: ght-appeal-sd.css (only while "Style SkyDonate widgets" is on) */ @media (max-width: 1024px) { .e-con.ght-ap-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "side" "body" "side2"; } /* the right column's two parts take their own places in the one column */ .e-con.ght-ap-top > .ght-ap-rail { display: contents; } .e-con.ght-ap-rail > .ght-ap-side { grid-area: side; } .e-con.ght-ap-rail > .ght-ap-side2 { grid-area: side2; } .e-con.ght-ap-top:not(:has(> .ght-ap-rail)) > .ght-ap-side { grid-area: side; } } @media (max-width: 760px) { .e-con.ght-ap-top { gap: 16px; padding-left: 12px; padding-right: 12px; } .ght-appeal-page .ght.aph { padding-left: 0; padding-right: 0; } .e-con.ght-ap-side, .ght-ap-body .ght.apst, .ght-ap-body .ght.apim, .ght-ap-body .ght.apbr, .ght-ap-side2 .ght.apdn, .ght-ap-side2 .ght.aptr { padding: 18px; } /* the photos keep the page's 12px margins and the cards' rounded corners (user: not full width) */ .ght-appeal-page .ght .apg__main, .ght-appeal-page .ght .apg__view { margin: 0; border-radius: 14px; } /* TRIAL (user: "merge them, only on mobile"): the photos become the top of the donation card — no gap, square corners where they meet, the card's own border carrying on under the photo */ .e-con.ght-ap-top:has(> .ght-ap-media .apg__view) .ght-ap-media .apg__view, .e-con.ght-ap-top:has(> .ght-ap-media .apg__view) .ght-ap-media .apg__main { border-radius: 16px 16px 0 0; } .e-con.ght-ap-top:has(> .ght-ap-media .apg__view) .e-con.ght-ap-side { margin-top: -16px; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; } } /* ght-video */ /* GHH Video. (Root is .ght.gtv.) */ .ght.gtv { position: relative; aspect-ratio: var(--gtv-ratio, 16 / 9); overflow: hidden; border-radius: 22px; background: var(--ght-ink); } .ght.gtv .gtv__play, .ght.gtv .gtv__play:hover, .ght.gtv .gtv__play:focus { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background-color: transparent; color: #fff; cursor: pointer; } .ght.gtv .gtv__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ght-ease); } .ght.gtv .gtv__play::after { content: ""; position: absolute; inset: 0; background: rgba(6, 20, 30, .25); transition: background-color .3s; } .ght.gtv .gtv__btn { position: relative; z-index: 1; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ght-ink); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .6); transition: transform .3s var(--ght-ease), background-color .3s, color .3s; } .ght.gtv .gtv__btn svg { width: 26px; height: 26px; margin-left: 4px; fill: currentColor; stroke: none; } .ght.gtv .gtv__label { position: absolute; z-index: 1; left: 0; right: 0; bottom: 20px; font-weight: 700; text-align: center; } .ght.gtv .gtv__play:hover img { transform: scale(1.04); } .ght.gtv .gtv__play:hover .gtv__btn { transform: scale(1.08); background: var(--ght-blue); color: #fff; } .ght.gtv .gtv__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ght-story */ /* GHH Story — words beside a photo or film; without a picture, heading left and text right. */ .ght .story__grid { display: grid; align-items: center; gap: clamp(32px, 5vw, 96px); } .ght.story--media .story__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ght.story--left .story__media { order: -1; } .ght.story--text.story--plain .story__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: calc(68ch + 2 * var(--ght-pad)); } .ght.story--only .story__grid { grid-template-columns: minmax(0, 1fr); max-width: 1040px; } .ght.story--only .story__text { display: none; } .ght.story--text .story__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } .ght .story__text .h2 { margin-bottom: 24px; } .ght.story--text .story__text .h2 { margin-bottom: 0; } .ght .story__body { max-width: 64ch; } .ght .story__btns { margin-top: 30px; } .ght .story__media .pmedia { border-radius: 22px; } .ght .story__media .pmedia img { aspect-ratio: 4 / 3.2; object-fit: cover; } /* folded long text */ .ght .story__body.is-folded { position: relative; max-height: 15em; overflow: hidden; } .ght .story__body.is-folded::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6em; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; } .ght.t-mist .story__body.is-folded::after { background: linear-gradient(rgba(238, 244, 247, 0), var(--ght-mist)); } .ght.t-night .story__body.is-folded::after { background: linear-gradient(rgba(6, 20, 30, 0), var(--ght-night)); } .ght .story__more, .ght .story__more:hover, .ght .story__more:focus { display: inline-flex; margin-top: 14px; padding: 0; border: 0; background: none; color: var(--ght-blue-d); font-size: 16px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .ght.t-night .story__more { color: var(--ght-gold); } /* long words beside a picture: the picture starts at the top and stays in view while reading */ .ght.story--long .story__grid { align-items: start; } .ght.story--long .story__media { position: sticky; top: calc(var(--ght-hdr) + var(--wp-admin--admin-bar--height, 0px) + 28px); } .ght.story--long .story__media .pmedia img { aspect-ratio: 4 / 5; } @media (max-width: 960px) { .ght.story--media .story__grid, .ght.story--text .story__grid { grid-template-columns: minmax(0, 1fr); } .ght.story--text .story__text .h2 { margin-bottom: 0; } .ght .story__media { order: -1; } .ght.story--long .story__media { position: static; } .ght.story--long .story__media .pmedia img { aspect-ratio: 4 / 3.2; } } /* ght-appealstory */ /* GHH Appeal: Description — the appeal's own content, in the GHH type. */ .ght.apst { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--ght-line); background: #fff; } .ght .apst__h { margin-bottom: 28px; } .ght .apst__body { font-size: 17px; line-height: 1.7; color: var(--ght-ink-2); } /* the description's own boxed containers line up with the page */ .ght .apst__body > .elementor > .e-con.e-parent { --content-width: min(var(--ght-max), 100%); --padding-left: var(--ght-pad); --padding-right: var(--ght-pad); } /* prose rules skip SkyDonate's Daily Giving, which brings its own type and centring, and the page sections placed in a description (shared blocks such as "Our promise"), which bring their own */ .ght .apst__body :is(h2, h3, h4):not(.skd-dg *, .apst__body .ght *) { margin: 0 0 .5em; font-family: var(--ght-f); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--ght-ink); } .ght .apst__body h2:not(.skd-dg *, .apst__body .ght *) { font-size: clamp(28px, 2.8vw, 40px); } .ght .apst__body h3:not(.skd-dg *, .apst__body .ght *) { font-size: 24px; } .ght .apst__body p:not(.skd-dg *, .apst__body .ght *) { margin: 0 0 1em; } /* a container holding a page section runs edge to edge; the section keeps its own band and width */ .ght .apst__body .e-con.e-parent:has(> .elementor-widget-shortcode .ght, > .elementor-widget :is(.ght.sec, .ght.phero)) { --content-width: 100%; --padding-left: 0px; --padding-right: 0px; } /* a description built of page sections from its page hero down (Fidyah): it is the page, so the description's own padding and top rule go */ .ght.apst:has(.apst__body > .elementor > .e-con:first-child > .elementor-widget-ght_pagehero) { padding: 0; border-top: 0; } /* a description that is only Daily Giving: its full-height sky is the page, so no section padding or rule */ .ght.apst:has(.skd-dg--fullheight) { padding: 0; border-top: 0; } /* …and edge to edge, from the top of the screen (behind the floating header) to the bottom, as on the live site (user: "the blue design must be full height and width like the original site") */ .ght .apst__body .e-con.e-parent:has(.skd-dg--fullheight) { --content-width: 100%; --padding-left: 0px; --padding-right: 0px; --padding-top: 0px; --padding-bottom: 0px; --margin-top: 0px; margin-top: 0; } body.ght-site .ght-site-header ~ main.site-main.ght-appeal-page:has(.skd-dg--fullheight) { padding-top: 0; } /* the notices box holds an empty WooCommerce wrapper, so it's never :empty; with no notice in it, its 16px top margin would push the whole page (and the sky) down out from under the header */ .ght-appeal-page:has(.skd-dg--fullheight) .ght-notices:not(:has(.woocommerce-message, .woocommerce-error, .woocommerce-info, .wc-block-components-notice-banner)) { margin: 0; } .ght .apst__body .skd-dg--fullheight { border-radius: 0; } /* the sky runs under the header, so each step's content starts clear of it (the amount card touched it) */ .ght .apst__body .skd-dg--fullheight .skd-dg__step { box-sizing: border-box; padding-top: calc(var(--ght-tuck, 20px) + 24px); } /* ght-base's `.ght p { margin: 0 }` outranks SkyDonate's centring of the intro line */ .ght .skd-dg__welcome-text { margin-left: auto; margin-right: auto; } .ght .apst__body a:not(.skd-dg *, .apst__body .ght *) { color: var(--ght-blue-d); } .ght .apst__body ul:not(.skd-dg *, .apst__body .ght *) { padding-left: 1.2em; list-style: disc; } /* story and film (the appeal template's column) */ .ght.apst--parts .apst__text { max-width: 66ch; font-size: 17.5px; } .ght.apst--parts .apst__text h3, .ght.apst--parts .apst__text h4 { margin-top: 1.4em; font-size: 19px; } .ght .apst__pts { display: grid; gap: 10px; margin: 6px 0 4px; padding: 0; list-style: none; } .ght .rich .apst__pts { padding-left: 0; list-style: none; } .ght .apst__pts li { position: relative; margin: 0; padding: 14px 16px 14px 50px; border-radius: 14px; background: var(--ght-mist); font-size: 16px; line-height: 1.5; } .ght .apst__pts li::before { content: ""; position: absolute; left: 16px; top: 16px; width: 22px; height: 22px; border-radius: 50%; background: var(--ght-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; } .ght .apst__pts li b { display: block; color: var(--ght-ink); } /* gifts with a price ("Water tanker £120"): pressing one puts the amount in the donation form */ .ght .apst__gifts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 10px 0 8px; padding: 0; list-style: none; } .ght .rich .apst__gifts { padding-left: 0; list-style: none; } .ght .apst__gifts li { display: flex; margin: 0; } .ght .apst__gift, .ght .apst__gift:hover, .ght .apst__gift:focus { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "desc desc"; align-content: start; gap: 6px 12px; width: 100%; margin: 0; padding: 18px; border: 1.5px solid var(--ght-line); border-radius: 16px; background: #fff; color: var(--ght-ink); font: inherit; text-align: left; text-transform: none; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; min-width: 0; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s var(--ght-ease); } .ght .apst__gift:hover { border-color: var(--ght-blue); box-shadow: 0 16px 34px -24px rgba(6, 20, 30, .5); transform: translateY(-2px); } .ght .apst__gift.is-on { border-color: var(--ght-blue); box-shadow: inset 0 0 0 1.5px var(--ght-blue); } .ght .apst__gift b { grid-area: name; font-size: 16.5px; font-weight: 800; line-height: 1.25; } .ght .apst__price { grid-area: price; font-size: 20px; font-weight: 900; letter-spacing: -.02em; color: var(--ght-blue-d); } .ght .apst__gift small { grid-area: desc; font-size: 14px; line-height: 1.5; color: var(--ght-mute); } /* progress under the heading: raised of target, a bar marked at each quarter, three totals */ /* first in the section; a hairline parts it from "About this appeal" below */ .ght .apst__prog { margin: 0 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--ght-line); container-type: inline-size; } .ght .apst__ptop { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .ght .apst__raised { display: grid; gap: 2px; margin: 0; } .ght .apst__raised b { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--ght-ink); } .ght .apst__raised > span { font-size: 14px; color: var(--ght-mute); } .ght .apst__pill { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--ght-gold); color: var(--ght-ink); font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap; } .ght .apst__bar { position: relative; height: 8px; border-radius: 999px; background: var(--ght-mist); box-shadow: inset 0 0 0 1px var(--ght-line); overflow: hidden; } .ght .apst__fill { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: var(--ght-blue); overflow: hidden; } /* in view (story.js): the bar fills from the start while the amount rolls in, a light passes along it, and the badge settles when it's done. Without the script, or with reduced motion, it's simply full. */ .ght .apst__prog.is-armed .apst__fill { width: 0; transition: none; } .ght .apst__prog.is-in .apst__fill { transition: width 1.8s cubic-bezier(.22, .8, .24, 1); } .ght .apst__fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-100%); } .ght .apst__prog.is-in .apst__fill::after { animation: ght-apst-sheen 1.4s .5s ease-out both; } @keyframes ght-apst-sheen { to { transform: translateX(100%); } } .ght .apst__prog.is-done .apst__pill { animation: ght-apst-pop .45s cubic-bezier(.3, 1.6, .5, 1); } @keyframes ght-apst-pop { 40% { transform: scale(1.08); } } /* the raised amount as an odometer: each digit column is sized by an invisible copy of its final digit (Onest's own spacing), and its 0–9 strip is parked on that digit (--to = 10 + digit) */ .ght .apst__od { --lh: 1.1em; display: inline-flex; align-items: flex-start; } .ght .apst__oc { position: relative; display: block; height: var(--lh); clip-path: inset(0 -.3em); } .ght .apst__oc > i { display: block; font-style: normal; line-height: var(--lh); visibility: hidden; } .ght .apst__os { position: absolute; top: 0; left: 50%; display: flex; flex-direction: column; transform: translate(-50%, calc(var(--to) * var(--lh) * -1)); } .ght .apst__os span { display: block; height: var(--lh); line-height: var(--lh); text-align: center; } .ght .apst__ox { display: block; line-height: var(--lh); } .ght .apst__prog.is-armed .apst__os { transform: translate(-50%, 0); transition: none; } .ght .apst__prog.is-rolling .apst__os { transition: transform var(--dur, 1.6s) cubic-bezier(.16, 1, .3, 1) var(--delay, 0s); } .ght .apst__prog.is-rolling .apst__oc { -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); } @media (prefers-reduced-motion: reduce) { .ght .apst__prog.is-armed .apst__fill { width: var(--p); } .ght .apst__prog.is-armed .apst__os { transform: translate(-50%, calc(var(--to) * var(--lh) * -1)); } .ght .apst__fill::after, .ght .apst__prog.is-done .apst__pill { animation: none; } } .ght .apst__bar i { position: absolute; top: 0; bottom: 0; width: 1.5px; margin-left: -.75px; background: rgba(11, 38, 56, .18); } .ght .apst__marks { position: relative; display: flex; justify-content: space-between; height: 16px; margin: 6px 0 0; font-size: 12px; line-height: 16px; color: var(--ght-mute); } .ght .apst__marks span[style] { position: absolute; top: 0; transform: translateX(-50%); } .ght .apst__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; } .ght .apst__stat { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 10px 12px; border: 1px solid var(--ght-line); border-radius: 12px; background: #fff; } .ght .apst__si { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #FDF1DA; color: #A86A06; } .ght .apst__si svg { width: 16px; height: 16px; stroke-width: 2; } /* Onest's own (proportional) figures: its fixed-width ones spread "£147,470" apart (user) */ .ght .apst__stat > span:last-child { display: grid; gap: 1px; min-width: 0; } .ght .apst__stat b { font-size: 16px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--ght-ink); white-space: nowrap; } .ght .apst__stat small { font-size: 13px; font-weight: 400; line-height: 1.2; color: var(--ght-mute); } /* narrow column: no room for the icon beside "£19,239", so the totals go without it */ @container (max-width: 480px) { .ght .apst__si { display: none; } } @media (max-width: 760px) { .ght .apst__marks span[style] { display: none; } /* 0 and the target only */ } .ght .apst__film { margin-top: 28px; } .ght .apst__film .pmedia { border-radius: 20px; overflow: hidden; } .ght .apst__film .gtv { aspect-ratio: 16 / 9; } .ght .apst__body iframe { max-width: 100%; border: 0; border-radius: 18px; } .ght .apst__body .elementor-widget-video .elementor-wrapper { overflow: hidden; border-radius: 22px; } /* ght-faq */ /* GHH Questions — heading (and topics) left, questions right. */ .ght .faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(32px, 5vw, 96px); } .ght .faq__side { position: sticky; top: calc(var(--ght-hdr) + var(--wp-admin--admin-bar--height, 0px) + 28px); } .ght .faq__side .h2 { font-size: clamp(32px, 3.4vw, 52px); } .ght .faq__side .lead { margin-top: 18px; } .ght .faq__btns { margin-top: 26px; } /* the questions: the design system's accordion (DESIGN-SYSTEM.md) — one card, hairline rows, a chevron in a ringed circle that turns when open, the open question in blue */ .ght .faq__list { overflow: hidden; border: 1px solid var(--ght-line); border-radius: var(--ght-r-l); background: #fff; } .ght .faq__item + .faq__item { border-top: 1px solid var(--ght-line); } .ght .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 16px 20px; font-family: var(--ght-ui); font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--ght-ink); list-style: none; cursor: pointer; transition: background-color .2s, color .2s; } .ght .faq__q::-webkit-details-marker { display: none; } .ght .faq__q:hover { background: var(--ght-page); } .ght .faq__q i { position: relative; flex: none; width: 32px; height: 32px; border: 1px solid var(--ght-line); border-radius: 50%; background: #fff; color: var(--ght-ink); transition: border-color .2s, background-color .2s; } .ght .faq__q i::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .25s var(--ght-ease); } .ght .faq__item[open] .faq__q { color: var(--ght-blue-d); } .ght .faq__item[open] .faq__q i { border-color: var(--ght-blue); color: var(--ght-blue-d); } .ght .faq__item[open] .faq__q i::before { transform: rotate(180deg); } .ght .faq__a { max-width: 68ch; padding: 0 20px 20px; font-size: 16px; line-height: 1.6; color: var(--ght-ink-2); animation: ght-faq-open .25s var(--ght-ease); } @keyframes ght-faq-open { from { opacity: 0; transform: translateY(-4px); } } /* dark sections: the same card, on the dark */ .ght.t-night .faq__list { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); } .ght.t-night .faq__item + .faq__item { border-color: rgba(255, 255, 255, .14); } .ght.t-night .faq__q { color: #fff; } .ght.t-night .faq__q:hover { background: rgba(255, 255, 255, .04); } .ght.t-night .faq__q i { border-color: rgba(255, 255, 255, .24); background: transparent; color: #fff; } .ght.t-night .faq__item[open] .faq__q { color: var(--ght-gold); } .ght.t-night .faq__item[open] .faq__q i { border-color: var(--ght-gold); color: var(--ght-gold); } @media (min-width: 961px) { .ght .faq__q { font-size: 17px; } } /* topics list (guide pages) */ .ght .faq__nav { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--ght-line); } .ght .faq__navt { margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--ght-mute); } .ght .faq__nav ul { display: grid; gap: 2px; } .ght .faq__nav a { display: block; padding: 8px 12px; margin-left: -12px; border-radius: 10px; font-size: 15.5px; font-weight: 600; text-decoration: none; color: var(--ght-ink-2); transition: background-color .2s, color .2s; } .ght .faq__nav a:hover { background: var(--ght-mist); color: var(--ght-ink); } .ght .faq__nav a[aria-current] { background: var(--ght-ink); color: #fff; } @media (max-width: 960px) { .ght .faq__grid { grid-template-columns: minmax(0, 1fr); } .ght .faq__side { position: static; } /* topics move under the questions on phones */ .ght.faq--nav .faq__grid { display: flex; flex-direction: column; } .ght.faq--nav .faq__nav { order: 3; } .ght.faq--nav .faq__side { display: contents; } .ght.faq--nav .faq__list { order: 2; } } /* donation-card */ .donation-card { background-color: #3340ac; color: white; border-radius: 10px; } .donation-card .donation-image { position: relative; } .donation-card .donation-image .play-button { position: absolute; left: 12px; bottom: 12px; z-index: 2; background-color: white; color: black; border-radius: 999px; overflow: hidden; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; } .donation-card .donation-image .play-button i:before { content: "\f101"; font-family: "woodmart-font"; } .donation-card .donation-image .play-button i { font-style: normal; width: 50px; height: 50px; display: inline-block; text-align: center; font-size: 18px; line-height: 50px; border-radius: 99px; background-color: white; z-index: 2; padding-left: 3px; } .donation-card .donation-image .play-button span { display: inline-block; padding-right: 30px; margin-left: -104px; transition: .3s; } .donation-card .donation-image .play-button:hover span { margin-left: 0px; } .donation-card .donation-image a { display: block; } .donation-card .donation-image img { border-radius: 10px; } .donation-card .donation-content { padding: 24px; text-align: center; display: flex; flex-direction: column; flex: 1; } .donation-card .donation-content > .row { margin-top: auto; } .donation-card .donation-content .donation-title a { color: white; display: inline-block; } .donation-card .donation-content .donation-title { margin-bottom: 12px; margin-top: -5px; font-size: 23px; font-weight: 600; } .donation-card .donation-content .donation-short-description { color: #fffc; font-size: 16px; font-weight: 400; margin-bottom: 20px; } .donation-card .donation-content .donation-button { color: currentColor; font-size: 12px; background-color: #e10130; display: block; border-radius: 50px; padding: 10px; text-transform: uppercase; font-weight: 600; transition: .3s; display: flex; align-items: center; justify-content: center; gap: 0px; width: 100%; line-height: 1.34em; height: auto; min-height: inherit; } .donation-card .donation-content .donation-button .e-font-icon-svg { width: 12px; margin-left: 8px; color: currentColor; fill: currentColor; } .donation-card .donation-content .donation-button .icon { margin-left: 8px; } .donation-card .donation-content .donation-button.white-button { background-color: white; color: #3340ac; } .button-loader { position: relative; width: 0px; height: 0px; } .button-loader:before { content: ""; border: 2px solid currentColor; border-left-color: transparent; animation: spin 1s linear infinite; width: 14px; height: 14px; display: block; border-radius: 50%; position: absolute; left: 5px; top: 2px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .donation-card .donation-content .donation-button:hover { background-color: white; color: #e10130; } .donation-card .donation-content .donation-button.white-button:hover { background-color: black; color: currentColor; } .donation-card .donation-content .donation-details { display: flex; justify-content: space-between; color: currentColor; font-weight: 600; margin-top: 12px; line-height: 1.2em; text-align: center; } .layout1 .donation-card .donation-content .donation-details > span { min-width: 30%; } .donation-card .donation-content .donation-details .amount { display: block; } .donation-card .donation-content .donation-details .raised-amount { text-align: left; } .donation-card .donation-content .donation-details .target-amount { text-align: right; } .donation-card .donation-content .donation-details .amount { color: currentColor; } .donation-card .donation-progress { width: 100%; height: 12px; background-color: #dadfdc; border-radius: 99px; margin-top: 24px; overflow: hidden; } .donation-card .donation-progress .progress-bar { width: 0%; height: 100%; background: #6bb766; border-radius: 99px; } button.lity-close { position: absolute; top: -40px; /* Adjust for visibility */ right: 0px; /* Ensure placement */ width: 30px; height: 30px; overflow: hidden; text-indent: -99999px; font-size: 18px; line-height: 18px; padding: 0px; min-height: 30px; background-color: red; border-radius: 99px; cursor: pointer; } button.lity-close:hover { background-color: darkred; /* Better hover effect */ color: white; font-size: 18px !important; line-height: 18px !important; } button.lity-close:before { content: "\f112"; font-family: "woodmart-font"; display: block; font-size: 18px; position: absolute; left: 50%; top: 50%; text-indent: 0px; transform: translate(-50%, -50%); color: white; } .layout2 .donation-card .donation-content .donation-details { margin: 0; } .layout2 .donation-card .donation-content .donation-details > span { display: flex; flex-wrap: wrap; } .layout2 .donation-card .donation-content .donation-details .amount { margin-left: 5px; } .layout2 .donation-card .donation-progress { margin-top: 8px; } .layout2 .donation-card .percentage { text-align: right; font-size: 12px; margin-bottom: 8px; margin-top: 3px; } .layout2 .donation-card .donation-content .donation-button { max-width: 200px; display: inline-block; padding: 5px 5px 5px 24px; line-height: 36px; text-align: left; background-color: white; color: #0C5EBA; } .layout2 .donation-card .donation-content .donation-button .icon { width: 36px; height: 36px; line-height: 1em; background-color: #0C5EBA; color: white; text-align: center; border-radius: 99px; float: right; margin-left: -10px; display: inline-flex; align-items: center; justify-content: center; } .layout2 .donation-card .donation-content .donation-button:hover { background-color: #eeac2d; color: #ffffff; } .layout2 .donation-card .donation-content .donation-button .icon svg { margin: 0; } .layout2 .donation-card .donation-content .donation-title { margin-bottom: 16px; } .layout2 .donation-card .donation-content .donation-short-description { margin-bottom: 24px; } .layout2 .donation-card { border-bottom: 5px solid #eeac2d; background-color: #0C5EBA; } .donation-card .donation-content .icon-wrapper { display: flex; justify-content: center; align-items: center; } .layout2 .donation-card .card-icon { font-size: 40px; line-height: 1em; margin-bottom: 20px; position: relative; z-index: 3; display: inline-flex; width: 80px; height: 80px; background-color: #e30a6c; align-items: center; justify-content: center; border-radius: 99px; } .donation-card .donation-content .icon-wrapper .card-icon { display: flex; } .layout2 .donation-card .card-icon span { display: inline-block; } .layout2 .donation-card .card-icon img { width: 40px; } .layout2 .donation-card .card-icon svg { width: 40px; height: 40px; fill: currentColor; } .donation-cards-wrapper { display: flex; flex-wrap: wrap; } .donation-card { display: flex; flex-direction: column; height: 100%; min-height: 400px; } /* ght-skydonate */ /* ========================================================================== * SkyDonate, dressed in the GHH look. The markup, amounts, Once/Monthly, * Zakat note and the add-to-basket all stay SkyDonate's; only the look changes. * * .ght-sd--dock the hero form as one glass bar over the film * .quick-modal the quick-donate pop-up (urgent appeal cards) * ======================================================================== */ /* ── the hero bar ── */ .ght .ght-sd--dock .donation-form-wrapper { width: fit-content; max-width: 100%; } .ght .ght-sd--dock form.donation-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 8px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(6, 20, 30, .45); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: none; color: #fff; } .ght .ght-sd--dock .donation-box-title { display: none; } /* Once / Monthly */ .ght .ght-sd--dock .donation-type-switch { display: flex; gap: 0; width: auto; margin: 0; padding: 4px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); } .ght .ght-sd--dock .donation-type-switch .donation-type-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; margin: 0; padding: 0 16px; border: 0; border-radius: 999px; background: none; background-image: none; color: rgba(255, 255, 255, .85); font-family: var(--ght-f); font-size: 15px; font-weight: 700; line-height: 1; box-shadow: none; cursor: pointer; } .ght .ght-sd--dock .donation-type-switch .donation-type-btn::before, .ght .ght-sd--dock .donation-type-switch .donation-type-btn::after { display: none; } .ght .ght-sd--dock .donation-type-switch .donation-type-btn.active { background: #fff; color: var(--ght-ink); } .ght .ght-sd--dock .donation-type-btn .heart-icon { display: none; } /* amounts */ .ght .ght-sd--dock .donation-amount-groups { display: contents; } .ght .ght-sd--dock .donation-amount-group { display: none; } .ght .ght-sd--dock .donation-amount-group.active { display: block; } .ght .ght-sd--dock .donation-buttons { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; } .ght .ght-sd--dock .donation-buttons .donation-btn { position: relative; flex: 0 0 auto; width: auto; min-width: 66px; height: 50px; min-height: 50px; margin: 0; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: none; background-image: none; color: #fff; font-family: var(--ght-f); font-size: 17px; font-weight: 800; box-shadow: none; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; } .ght .ght-sd--dock .donation-buttons .donation-btn::before, .ght .ght-sd--dock .donation-buttons .donation-btn::after { display: none; } .ght .ght-sd--dock .donation-buttons .donation-btn:hover { border-color: #fff; background-color: transparent; color: #fff; } .ght .ght-sd--dock .donation-buttons .donation-btn.active { border-color: #fff; background-color: #fff; color: var(--ght-ink); } .ght .ght-sd--dock .donation-buttons .donation-btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .ght .ght-sd--dock .donation-btn .price, .ght .ght-sd--dock .donation-btn .currency-symbol { margin: 0; padding: 0; color: inherit; font: inherit; line-height: 1; } /* custom amount */ .ght .ght-sd--dock .donation-amount-groups .donation-custom { position: relative; display: flex; flex: 0 0 auto; align-items: center; width: 132px; height: 50px; min-height: 50px; margin: 0; padding: 0 14px 0 34px; overflow: visible; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background-color: transparent; } .ght .ght-sd--dock .donation-amount-groups .donation-custom:focus-within { border-color: #fff; } /* the £ (SkyDonate lets it switch currency: the select sits invisibly over it) */ .ght .ght-sd--dock .donation-amount-groups .donation-custom .skydonate-currency-wrapper { position: absolute; left: 10px; top: 0; bottom: 0; display: flex; align-items: center; width: 22px; height: auto; margin: 0; padding: 0; overflow: hidden; border: 0; background: none; } .ght .ght-sd--dock .donation-amount-groups .donation-custom .skydonate-currency-wrapper .currency-symbol { min-width: 0; width: 100%; height: auto; padding: 0; border-radius: 0; background: none; color: #fff; font-size: 17px; font-weight: 800; } .ght .ght-sd--dock .donation-custom .skydonate-currency-select { inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .ght .ght-sd--dock .donation-custom input.custom-amount-input { width: 100%; min-width: 0; height: 48px; margin: 0; padding: 0; border: 0; outline: 0; background: none; box-shadow: none; color: #fff; font-family: var(--ght-f); font-size: 17px; font-weight: 800; -moz-appearance: textfield; appearance: textfield; } .ght .ght-sd--dock .donation-custom input.custom-amount-input::-webkit-outer-spin-button, .ght .ght-sd--dock .donation-custom input.custom-amount-input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } /* the bar has no room for SkyDonate's "Custom Amount" label (it sat over the amount); hidden even if its script shows it */ .ght .ght-sd--dock .donation-custom .custom-placeholder { display: none !important; } /* Donate: SkyDonate's app-style button ("Donate now £55 ›"), sized to its words. Its stylesheet sets the button with !important, so the bar has to as well. */ .ght .ght-sd--dock .donation-form-wrapper .form-submit-button { flex: 0 0 auto; gap: 10px !important; width: auto !important; height: 50px !important; min-height: 50px !important; margin: 0; padding: 0 22px 0 26px !important; border-radius: 999px; background: var(--ght-blue); background-image: none; box-shadow: none; text-transform: none; transition: background-color .2s, box-shadow .2s !important; } .ght .ght-sd--dock .donation-form-wrapper .form-submit-button:hover { background: var(--ght-blue-d); background-image: none; filter: none !important; box-shadow: 0 10px 30px -10px rgba(27, 157, 217, .8); } .ght .ght-sd--dock .form-submit-button > span { font-family: var(--ght-f); font-size: 17px; font-weight: 700; color: #fff; text-transform: none; } .ght .ght-sd--dock .form-submit-button .skd-app-cta__spacer, .ght .ght-sd--dock .form-submit-button .skd-app-cta__code { display: none !important; } .ght .ght-sd--dock .form-submit-button .skd-app-cta__amount { font-weight: 800; opacity: .9; } .ght .ght-sd--dock .form-submit-button .skd-app-cta__chevron { display: flex; } .ght .ght-sd--dock .form-submit-button svg { width: 18px; height: 18px; } .ght .ght-sd--dock .sky-daily-note:empty { display: none; } /* notes SkyDonate adds (Zakat, daily dates): small, under the bar */ .ght .ght-sd--dock .zakat-applicable { display: flex; align-items: center; justify-content: flex-start; gap: 6px; text-align: left; margin: 12px 0 0 6px; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .75); font-size: 13px; font-weight: 600; } .ght .ght-sd--dock .zakat-applicable i { color: var(--ght-gold); } /* phones: a rounded panel, the amounts in a grid */ @media (max-width: 760px) { .ght .ght-sd--dock .donation-form-wrapper { width: 100%; } .ght .ght-sd--dock form.donation-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px; border-radius: 22px; } .ght .ght-sd--dock .donation-type-switch { grid-column: 1 / -1; } .ght .ght-sd--dock .donation-type-switch .donation-type-btn { flex: 1; justify-content: center; } .ght .ght-sd--dock .donation-amount-group.active { grid-column: 1 / -1; } .ght .ght-sd--dock .donation-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .ght .ght-sd--dock .donation-buttons .donation-btn { min-width: 0; width: 100%; padding: 0 6px; } .ght .ght-sd--dock .donation-amount-groups .donation-custom { grid-column: 1 / -1; width: 100%; } .ght .ght-sd--dock .donation-form-wrapper .form-submit-button { grid-column: 1 / -1; width: 100% !important; justify-content: center !important; } } /* ── quick-donate pop-up: GHH type and colours ── */ .quick-modal .donation-form, .quick-modal .donation-form button, .quick-modal .donation-form input { font-family: var(--ght-f); }