/* 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; } } /* the verified fundraiser tick after an organiser's name (GHT_Fundraiser::badge(), the plugin's own check) */ .ght-vbadge { display: inline-flex; flex: none; width: 16px; height: 16px; vertical-align: -3px; color: var(--ght-blue); } .ght-vbadge svg { width: 100%; height: 100%; } @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; so does the Daily Giving page, whose SkyDonate sky-blue steps are its hero: a 16px strip sat under the header) */ body.ght-site .ght-site-header ~ main.site-main:not(:has(> .ght:first-child, > [data-widget_type^="ght_"]:first-child, > .page-content > .sptg > .spt-ds-crumbs:first-child, .skd-dg__step)) { padding-top: max(var(--ght-pt, 0px), calc(var(--ght-tuck, 20px) + 16px)); } /* the Sky Prayer pages (hub, country pages, masjid profile and directory) open with their grey breadcrumb bar: no page padding above it (that left a white strip between the header and the bar, user). The bar runs up under the header's curve and pads its text down by the tuck, so it sits clear of the header. Its inline -40px margin (for the old theme's top padding) is cancelled. */ body.ght-site .ght-site-header ~ main:not(.ght-main) .sptg > .spt-ds-crumbs.spt-ds-bleed:first-child { margin-top: 0 !important; } body.ght-site .ght-site-header ~ main .sptg > .spt-ds-crumbs:first-child, body.ght-site .ght-site-header ~ main .spt-masjid > .spt-ds-crumbs:first-child { padding-top: var(--ght-tuck, 20px); } /* 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; } } /* ---------- The app invite (header.js, from SkyDonate App "In the site header") ---------- The invite slides in from the left and pushes the bar's own contents out to the right; when its seconds are up it all slides back. Same white bar, same height. */ .ght.hdr.is-app-on .hdr__in { overflow: hidden; } .ght.hdr.is-app-on .hdr__in > :not(.hdr__app) { transition: transform .5s var(--ght-ease), opacity .35s var(--ght-ease); } .ght.hdr.is-app .hdr__in > :not(.hdr__app) { transform: translateX(110%); opacity: 0; pointer-events: none; } .ght .hdr__app { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 0 calc(var(--ght-pad) - 6px) 0 var(--ght-pad); transform: translateX(-110%); opacity: 0; transition: transform .5s var(--ght-ease), opacity .35s var(--ght-ease); } .ght.hdr.is-app .hdr__app { transform: none; opacity: 1; } .ght .hdr__app-go { display: flex; flex: 1 1 auto; align-items: center; gap: 12px; min-width: 0; color: var(--ght-ink); text-decoration: none; } .ght .hdr__app-mark { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #000; color: #fff; } .ght .hdr__app-mark svg { width: 22px; height: 22px; fill: currentColor; } /* "open in the app": the app's icon on a white tile with a hairline, like a home-screen icon */ .ght .hdr__app-mark.is-icon { overflow: hidden; border: 1px solid var(--ght-line); background: #fff; } .ght .hdr__app-mark.is-icon img { display: block; width: 100%; height: 100%; object-fit: cover; } .ght .hdr__app-t { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.25; } .ght .hdr__app-t small { overflow: hidden; font-size: 12px; color: var(--ght-mute); white-space: nowrap; text-overflow: ellipsis; } .ght .hdr__app.is-appeal .hdr__app-t small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; white-space: normal; } .ght .hdr__app-t b { overflow: hidden; font-size: 17px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; white-space: nowrap; text-overflow: ellipsis; } .ght .hdr__app-cta { flex: none; display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; border-radius: 999px; background: var(--ght-blue); color: #fff; font-size: 14px; font-weight: 700; } .ght .hdr__app-go:hover .hdr__app-cta, .ght .hdr__app-go:focus-visible .hdr__app-cta { background: var(--ght-blue-d); } .ght .hdr__app-x, .ght .hdr__app-x:hover, .ght .hdr__app-x:focus { flex: none; display: grid; place-items: center; width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ght-mute); cursor: pointer; } .ght .hdr__app-x:hover { background: var(--ght-mist); color: var(--ght-ink); } .ght .hdr__app-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } @media (prefers-reduced-motion: reduce) { /* no slide: a quick fade */ .ght.hdr.is-app-on .hdr__in > :not(.hdr__app), .ght .hdr__app { transition: opacity .2s linear; } .ght.hdr.is-app .hdr__in > :not(.hdr__app), .ght .hdr__app { transform: 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; } /* *words in stars* in GHH gold (user: "make 'changing lives.' in the footer yellow") */ .ght .ftr__big em { position: relative; z-index: 0; display: inline-block; font-style: normal; color: var(--ght-gold); } /* a soft brush stroke under the gold words, a little off level like a hand drew it; behind the letters, so the g's descenders cross over it instead of being cut through */ .ght .ftr__big em::after { content: ""; position: absolute; z-index: -1; left: .02em; right: .12em; bottom: -.07em; height: .08em; border-radius: .1em; background: currentColor; opacity: .45; transform: rotate(-1.2deg); transform-origin: left center; } /* the moment (footer.js arms it, then adds .is-in once the line is in view): the line rises in, the gold words are wiped in left to right as if written, then the stroke draws under them */ .ght .ftr__big.is-armed { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ght-ease), transform .9s var(--ght-ease); } .ght .ftr__big.is-armed em { clip-path: inset(-.25em 100% -.3em 0); transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1) .45s; } .ght .ftr__big.is-armed em::after { transform: rotate(-1.2deg) scaleX(0); transition: transform .8s cubic-bezier(.2, .8, .2, 1) 1.35s; } .ght .ftr__big.is-armed.is-in { opacity: 1; transform: none; } .ght .ftr__big.is-armed.is-in em { clip-path: inset(-.25em 0 -.3em 0); } .ght .ftr__big.is-armed.is-in em::after { transform: rotate(-1.2deg) scaleX(1); } /* 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); } /* "Get the app", under the address: a QR code on a white tile (computers) and the two stores as outlined buttons with their marks. Phones and tablets get only the buttons: they can't scan their own screen. */ .ght .ftr__app { margin-top: 28px; } .ght .ftr__app:first-child { margin-top: 0; } /* five columns: the app one a little wider, so its two store buttons fit side by side */ @media (min-width: 1181px) { .ght .ftr__cols:has(.ftr__app) { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.35fr); } } .ght .ftr__qr { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .ght .ftr__qr img { flex: none; width: 96px; height: 96px; padding: 8px; border-radius: 14px; background: #fff; } .ght .ftr__qr span { font-size: 14px; line-height: 1.45; } /* the two stores side by side, equal widths (user: "can't they be next to each other") */ .ght .ftr__stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 340px; } .ght .ftr__cols .ftr__store { display: flex; align-items: center; justify-content: center; gap: 7px; width: auto; min-width: 0; padding: 9px 8px; white-space: nowrap; border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; transition: border-color .2s, background-color .2s; } .ght .ftr__cols .ftr__store:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .08); text-decoration: none; } .ght .ftr__store svg { flex: none; width: 16px; height: 16px; fill: currentColor; } @media (pointer: coarse) { .ght .ftr__qr { display: none; } } /* 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; } /* the studio's "S" mark before its name (the arrow keeps the last-svg rules below) */ .ght .ftr__credit svg.ftr__credit-mark, .ght .ftr__credit:hover svg.ftr__credit-mark { width: 13px; height: 16px; margin: 0 1px 0 4px; fill: #fff; stroke: none; transform: none; } .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; } /* the app column alone on its row: full width, so the two store buttons sit side by side */ .ght .ftr__cols > div:has(> .ftr__app:first-child) { grid-column: 1 / -1; } /* phone widths: no QR, whatever the pointer (user: "I don't like this on mobile") */ .ght .ftr__qr { display: none; } /* phones: the app in a GHH-blue panel with white store buttons, so it doesn't read as the grey credit pill below (user: "bordered on mobile to highlight it", then "looks like the Sky Web Design one") */ .ght .ftr__app { padding: 20px; border: 1px solid rgba(27, 157, 217, .45); border-radius: 20px; background: rgba(27, 157, 217, .14); } .ght .ftr__stores { max-width: none; } .ght .ftr__cols .ftr__store { border-color: #fff; background: #fff; color: var(--ght-ink); } .ght .ftr__cols .ftr__store:hover { border-color: #fff; background: rgba(255, 255, 255, .88); } .ght .ftr__cols .ftr__store { padding: 12px 8px; font-size: 15px; } /* 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-pagehero */ /* GHH Page Hero — film look (photo/footage behind, words bottom left) or plain (white, photo beside). */ .ght.phero { --ght-fx: 50%; --ght-fy: 50%; position: relative; overflow: hidden; } .ght .phero__media img, .ght .phero__media video { width: 100%; height: 100%; object-fit: cover; object-position: var(--ght-fx) var(--ght-fy); } .ght .phero__h { margin: 0; font-weight: 900; line-height: .92; letter-spacing: -.045em; text-wrap: balance; } .ght .phero__h em { font-style: italic; font-weight: 800; color: var(--ght-gold); } .ght .phero__lead { max-width: 54ch; margin-top: 20px; font-size: clamp(17px, 1.35vw, 20px); text-wrap: pretty; } .ght .phero .crumbs { margin-bottom: 22px; } .ght .phero__kick { margin-bottom: 16px; } .ght .phero__give { margin-top: 28px; } .ght .phero__btns { margin-top: 28px; } .ght .phero__note { margin-top: 16px; font-size: 14px; } /* film: the picture fills the hero, the words sit on the dark bottom */ .ght.phero--film { display: flex; align-items: flex-end; min-height: clamp(520px, 72svh, 800px); background: var(--ght-night); color: #fff; } .ght.phero--film:not(.has-media) { min-height: 0; padding-top: clamp(80px, 9vw, 140px); } .ght.phero--film .phero__media { position: absolute; inset: 0; } .ght .phero__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 20, 30, .95) 0%, rgba(6, 20, 30, .55) 40%, rgba(6, 20, 30, .05) 72%), linear-gradient(90deg, rgba(6, 20, 30, .65) 0%, rgba(6, 20, 30, 0) 60%); } .ght.phero--film .phero__in { position: relative; z-index: 1; max-width: 1600px; padding-top: 120px; padding-bottom: clamp(36px, 4.5vw, 64px); } .ght.phero--film .phero__h { font-size: clamp(50px, 7.2vw, 116px); color: #fff; } .ght.phero--film .phero__lead { color: rgba(255, 255, 255, .86); } .ght.phero--film .crumbs, .ght.phero--film .crumbs [aria-current] { color: rgba(255, 255, 255, .78); } .ght.phero--film .crumbs a:hover { color: #fff; } .ght.phero--film .phero__kick { color: var(--ght-gold); } .ght.phero--film .phero__note { color: rgba(255, 255, 255, .7); } .ght.phero--film .btn--line, .ght.phero--film .btn--line:focus { color: #fff; } .ght.phero--film .btn--line:hover { background-color: #fff; color: var(--ght-ink); box-shadow: inset 0 0 0 1.5px #fff; } .ght .phero__where { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .82); } /* the giving pages: a little more room for the donate bar */ .ght.phero--film.has-give .phero__h { font-size: clamp(48px, 6.4vw, 104px); } /* plain: white, title large, photo beside */ .ght.phero--plain { padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 7vw, 104px); background: #fff; color: var(--ght-ink); } .ght.phero--plain .phero__h { font-size: clamp(46px, 6.2vw, 96px); } .ght.phero--plain:not(.has-media) .phero__h { max-width: 16ch; } .ght.phero--plain .phero__lead { color: var(--ght-mute); } /* a white section straight after a plain (white) hero: the hero's bottom space is the gap, not both paddings stacked */ .e-con:has(> .elementor-widget-ght_pagehero .phero--plain) + .e-con > .elementor-widget:first-child > .elementor-widget-container > :is(.ght.sec.t-white, .ght.pmap) { padding-top: 0; } .ght.phero--plain .phero__note { color: var(--ght-mute); } /* the photo sits in the right half of the content width, the words in the left */ .ght.phero--plain.has-media { display: grid; grid-template-columns: minmax(0, 1fr) min(calc(var(--ght-max) / 2), 50%) min(calc(var(--ght-max) / 2), 50%) minmax(0, 1fr); align-items: center; } .ght.phero--plain.has-media .phero__in { grid-column: 2; grid-row: 1; max-width: none; margin: 0; padding-right: clamp(24px, 3vw, 48px); } .ght.phero--plain .phero__media { grid-column: 3; grid-row: 1; aspect-ratio: 5 / 4; margin-right: var(--ght-pad); overflow: hidden; border-radius: 22px; background: var(--ght-mist); } .ght.phero--plain .phero__media img { height: 100%; } @media (max-width: 960px) { .ght.phero--plain.has-media { display: flex; flex-direction: column-reverse; align-items: stretch; padding-top: 16px; } .ght.phero--plain.has-media .phero__in { padding-right: var(--ght-pad); } .ght.phero--plain .phero__media { margin: 0 var(--ght-pad) 28px; aspect-ratio: 4 / 3; } } /* phones: picture first, words under it on the dark */ @media (max-width: 760px) { .ght.phero--film { display: block; min-height: 0; } .ght.phero--film .phero__media { position: relative; aspect-ratio: 4 / 3.4; } .ght.phero--film .phero__shade { background: linear-gradient(0deg, rgba(6, 20, 30, 1) 0%, rgba(6, 20, 30, .25) 45%, rgba(6, 20, 30, 0) 70%); } .ght.phero--film.has-media .phero__in { margin-top: -90px; padding-top: 0; padding-bottom: 34px; } .ght.phero--film .phero__h, .ght.phero--film.has-give .phero__h { font-size: clamp(40px, 11vw, 54px); } .ght.phero--plain .phero__h { font-size: clamp(40px, 11vw, 54px); } .ght .phero__lead { font-size: 16px; } .ght .phero .crumbs { margin-bottom: 16px; font-size: 13px; } } /* 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); } /* ght-give */ /* GHH Donate Section — the story beside SkyDonate's form in a card that stays in view. */ .ght .give__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); align-items: start; gap: clamp(32px, 5vw, 88px); } .ght.give--form-left .give__side { order: -1; } .ght .give__story .h2 { margin-bottom: 26px; } .ght .give__media { margin: 0 0 28px; } .ght .give__story > .give__media:last-child { margin: 32px 0 0; } .ght .pmedia { margin: 0; overflow: hidden; border-radius: 20px; background: var(--ght-mist); } .ght .pmedia img { width: 100%; height: auto; } .ght .pmedia.gtv { aspect-ratio: var(--gtv-ratio, 16 / 9); } .ght .pmedia video { width: 100%; height: auto; } .ght .give__body { max-width: 62ch; } .ght .give__points { display: grid; gap: 12px; margin-top: 26px; } .ght .give__points li { display: flex; align-items: flex-start; gap: 12px; font-weight: 600; } .ght .give__points svg { flex: none; width: 22px; height: 22px; margin-top: 2px; padding: 3px; border-radius: 50%; background: var(--ght-blue); stroke: #fff; stroke-width: 2.6; } .ght .give__side { position: sticky; top: calc(var(--ght-hdr) + var(--wp-admin--admin-bar--height, 0px) + 20px); } .ght .give__card { padding: clamp(20px, 2.2vw, 30px); border-radius: 26px; background: #fff; box-shadow: 0 30px 70px -40px rgba(6, 20, 30, .35); color: var(--ght-ink); } .ght.t-white .give__card { background: var(--ght-mist); box-shadow: none; } .ght .give__ft { margin-bottom: 14px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; } .ght .give__note { margin-top: 14px; font-size: 13.5px; color: var(--ght-mute); } @media (max-width: 960px) { .ght .give__grid { grid-template-columns: minmax(0, 1fr); } /* phones: the story, then its form (the hero above already has the quick donate bar) */ .ght .give__side { position: static; order: 0; } .ght.give--form-left .give__side { order: 0; } } @media (max-width: 760px) { .ght .give__card { margin: 0 calc(var(--ght-pad) * -.5); padding: 18px; border-radius: 20px; } } /* 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, body.ght-site:has(.ght-fundraiser-page) { background: #F6F8FA; } /* fundraiser pages (GHT_Fundraiser): the plugin's form widget sits where SkyDonate's appeal form does, and its team banner / leaderboard sit in the story column as white cards */ .ght-ap-side .elementor-widget-skydonate-donation-form { --accent-color: var(--ght-blue); margin: 0; } .ght-fundraiser-page .ght-ap-body > .elementor-widget:is(.elementor-widget-skydonate-leaderboard, .elementor-widget-skydonate-team-campaign-banner):has(> .elementor-widget-container > *) { padding: 24px; border: 1px solid var(--ap-edge); border-radius: 16px; background: #fff; } .ght-fundraiser-page .skydonate-donations-closed { padding: 14px 16px; border: 1px solid var(--ght-line); border-radius: 12px; background: var(--ght-mist); color: var(--ght-ink); font: 500 15px/1.5 var(--ght-f); } .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; } .e-con.ght-ap-top { grid-template-rows: none; } /* One column of cards as a grid, not a flex column. As a flex column, Chrome gave the tabbed story card (Appeal brief) a height far beyond its content (3,672px for 1,176px on the Palestine appeal, most likely its hidden tabs): a 2,500px empty band on phones (user: "big gaps under some sections on mobile"). As a grid it's its content's height. */ .e-con.ght-ap-top > .ght-ap-body, .e-con.ght-ap-rail > .ght-ap-side2 { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 20px; } } @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-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; } /* donation-progress */ .donation-progress .progress-info { font-size: 20px; color: gray; font-weight: 400; color: #808080; } .donation-progress .progress-info .amount { font-weight: inherit; color: inherit; } .donation-progress .progress-info .raised { font-size: 30px; font-weight: 600; color: black; } .donation-progress .progress-info .goal { color: #808080; } .donation-progress .progress-bar-background { position: relative; border-radius: 15px; display: flex; align-items: center; overflow: hidden; } .donation-progress:not(.layout2) .progress-bar-background { background-color: #d3e1fb; } .donation-progress .progress-bar-background .progress-bar { width: 0%; border-radius: 99px; position: relative; overflow: visible; } .donation-progress:not(.layout2) .progress-bar-background .progress-bar { background: linear-gradient(90deg,#acf86c,#4a9d44 93.27%); height: 26px; } .donation-progress .progress-bar-background .percent { color: #000; font-weight: 400; font-size: 14px; margin-left: 8px; position: absolute; right: -30px; transition: 0.2s; } .donation-progress .progress-bar-background .progress-bar[data-small="false"] .percent { right: 10px; color: white; } .donation-progress.layout2 .raised-title { color: black; font-size: 32px; margin-bottom: 5px; letter-spacing: 0px; } .donation-progress.layout2 .target-title { display: flex; align-items: center; color: black; font-size: 16px; margin-bottom: 10px; } .donation-progress.layout2 .target-title small { font-size: 20%; margin: 5px 12px; } .donation-progress.layout2 .target-title>span { margin-right: 5px; } .donation-progress.layout2 .target-title .percent { margin-left: auto; margin-right: 0; } .donation-progress.layout2 .target-title, .donation-progress.layout2 .target-title * { color: #6b6b6b; font-weight: 700 !important; } .donation-progress.layout2 .progress-bar-background { border: none; background-color: #f4f2ea; } .donation-progress.layout2 .progress-bar-background .progress-bar { background-color: #09a95a; height: 24px; } .donation-progress.layout2.circle .circle-progress-bar { position: relative; display: inline-block; } .donation-progress.layout2.circle .circle-progress-bar svg { transform: rotate(-90deg); width: 100%; height: 100%; } .donation-progress.layout2.circle .circle-progress-bar .circle-bg { fill: none; stroke: #f4f2ea; stroke-width: 16; } .donation-progress.layout2.circle .circle-progress-bar .circle { fill: none; stroke: #09a95a; stroke-width: 16; stroke-linecap: round; stroke-dasharray: 314px; /* Circumference of the circle (2 * PI * r where r = 50) */ stroke-dashoffset: 314px; /* Initially hide the stroke */ transition: stroke-dashoffset 0.4s ease; } .donation-progress.layout2.circle .circle-progress-bar .percent { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px; font-weight: bold; color: #666; } .donation-progress.layout2.circle .progress-bar-row { display: flex; } .donation-progress.donation-progress-2 { display: flex; flex-direction: column-reverse; } .donation-progress.donation-progress-2 .progress-bar-background { border-radius: 2px; overflow: inherit; } .donation-progress-2.donation-progress:not(.layout2) .progress-bar-background .progress-bar { border-radius: 2px; background: var(--accent-color); position: relative; height: 8px; overflow: inherit; } .donation-progress-2.donation-progress:not(.layout2) .progress-bar-background .progress-bar .impact { position: absolute; right: 2px; bottom: calc(100% + 8px); background-color: black; color: white; padding: 3px 10px; display: flex; border-radius: 8px; font-size: 12px; font-weight: 600; transform: translateX(50%); } .donation-progress-2.donation-progress:not(.layout2) .progress-bar-background .progress-bar .impact:after { content: ''; position: absolute; top: calc(100% - 6px); left: calc(50% - 5px); width: 10px; height: 10px; border-radius: 3px; background-color: black; transform: rotate(45deg); } .donation-progress-2.donation-progress:not(.layout2) .progress-bar-background .progress-bar:after { content: ""; position: absolute; right: 0px; top: 1px; width: 5px; height: 6px; background: #a2b4d4; box-shadow: 0 0 0 2px white; border-radius: 1px; } .donation-progress-2.donation-progress:not(.layout2) .progress-bar-background .progress-bar[data-big="small"] .impact { transform: translateX(75%); } .donation-progress-2.donation-progress:not(.layout2) .progress-bar-background .progress-bar[data-big="small"] .impact:after { left: 19%; } .donation-progress-2.donation-progress:not(.layout2) .progress-bar-background .progress-bar[data-big="big"] .impact { transform: translateX(15%); } .donation-progress-2.donation-progress:not(.layout2) .progress-bar-background .progress-bar[data-big="big"] .impact:after { left: 78%; } /* 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-tiles */ /* GHH Tiles — photo cards, icon tiles or a simple list; each tile is one link. */ .ght .tiles__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin-bottom: clamp(28px, 3.6vw, 52px); } .ght .tiles__head .lead { margin-top: 16px; } /* a long intro: heading left, the words right */ .ght .tiles__head--long { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: 24px clamp(32px, 5vw, 96px); } .ght .tiles__head--long .tiles__all { grid-column: 2; justify-self: start; } .ght .tiles__long { max-width: 64ch; } @media (max-width: 960px) { .ght .tiles__head--long { grid-template-columns: minmax(0, 1fr); } .ght .tiles__head--long .tiles__all { grid-column: 1; } } .ght .tiles__all { color: var(--ght-blue-d); } .ght.t-night .tiles__all { color: var(--ght-gold); } .ght .tiles__grid { display: grid; gap: clamp(14px, 1.6vw, 24px); } .ght .tiles__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ght .tiles__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ght .tiles__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ght .tiles__grid > li { display: flex; min-width: 0; } .ght .tile { display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: 20px; background: var(--ght-mist); color: var(--ght-ink); text-decoration: none; transition: transform .35s var(--ght-ease), box-shadow .35s var(--ght-ease), background-color .25s; } .ght.t-mist .tile { background: #fff; } .ght.t-night .tile { background: rgba(255, 255, 255, .06); color: #fff; } .ght .tile__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 22px 22px 24px; } .ght .tile__h { font-size: 21px; font-weight: 800; line-height: 1.15; letter-spacing: -.015em; } .ght .tile__t { font-size: 15px; line-height: 1.5; color: var(--ght-mute); } .ght.t-night .tile__t { color: rgba(255, 255, 255, .66); } .ght .tile__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; font-size: 15px; font-weight: 700; color: var(--ght-blue-d); } .ght.t-night .tile__go { color: var(--ght-gold); } .ght .tile__go svg { width: 18px; height: 18px; transition: transform .2s var(--ght-ease); } .ght a.tile:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(6, 20, 30, .45); } .ght a.tile:hover .tile__go svg { transform: translateX(4px); } /* photo cards: picture on top */ .ght.tiles--photo .tile__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ght-line); } .ght.tiles--photo .tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ght-ease); } .ght.tiles--photo a.tile:hover .tile__img img { transform: scale(1.04); } /* icon tiles: the icon small, top left; the arrow a round button that fills on hover */ .ght.tiles--icon .tile { position: relative; flex-direction: row; align-items: flex-start; gap: 0; box-shadow: inset 0 0 0 1px transparent; transition: transform .35s var(--ght-ease), box-shadow .35s var(--ght-ease), background-color .25s; } .ght.tiles--icon .tile__img { display: grid; flex: none; place-items: center; width: 56px; height: 56px; margin: 22px 0 0 22px; border-radius: 16px; background: #fff; transition: transform .45s cubic-bezier(.3, 1.5, .5, 1); } .ght.t-mist.tiles--icon .tile__img { background: var(--ght-mist); } .ght.t-night.tiles--icon .tile__img { background: rgba(255, 255, 255, .1); } .ght.tiles--icon .tile__img img { width: 32px; height: 32px; object-fit: contain; } .ght.tiles--icon .tile__h { font-size: 19px; } .ght.tiles--icon .tile__body { padding: 22px 22px 22px 18px; } .ght.tiles--icon .tile__go svg { box-sizing: content-box; width: 16px; height: 16px; padding: 9px; border-radius: 50%; background: var(--ght-mist); color: var(--ght-blue-d); transition: transform .25s var(--ght-ease), background-color .25s, color .25s; } .ght.t-mist.tiles--icon .tile__go svg { background: var(--ght-mist); } .ght.t-night.tiles--icon .tile__go svg { background: rgba(255, 255, 255, .1); color: var(--ght-gold); } .ght.tiles--icon a.tile:hover { box-shadow: inset 0 0 0 1.5px var(--ght-blue), 0 26px 50px -30px rgba(6, 20, 30, .45); } .ght.t-night.tiles--icon a.tile:hover { box-shadow: inset 0 0 0 1.5px var(--ght-gold); } .ght.tiles--icon a.tile:hover .tile__img { transform: translateY(-3px) rotate(-6deg) scale(1.06); } .ght.tiles--icon a.tile:hover .tile__go svg { background: var(--ght-blue); color: #fff; transform: translateX(4px); } .ght.t-night.tiles--icon a.tile:hover .tile__go svg { background: var(--ght-gold); color: var(--ght-ink); } /* …with a field photo: the photo on top, the icon set on its lower edge, the words below */ .ght.tiles--icon .tile--ph { flex-direction: column; } .ght .tile__ph { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ght-line); } .ght .tile__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6, 20, 30, .28)); } .ght .tile__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ght-ease); } .ght.tiles--icon a.tile--ph:hover .tile__ph img { transform: scale(1.07); } .ght.tiles--icon .tile--ph .tile__img { position: relative; z-index: 1; margin: -30px 0 0 20px; background: #fff; box-shadow: 0 10px 24px -12px rgba(6, 20, 30, .45); } /* on night the icons are drawn light, so their badge stays dark */ .ght.t-night.tiles--icon .tile--ph .tile__img { background: var(--ght-night); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 24px -12px rgba(0, 0, 0, .6); } .ght.tiles--icon .tile--ph .tile__body { width: 100%; padding: 14px 20px 20px; } @media (prefers-reduced-motion: reduce) { .ght.tiles--icon a.tile:hover .tile__img, .ght.tiles--icon a.tile--ph:hover .tile__ph img { transform: none; } } /* simple list */ .ght.tiles--list .tile { border-radius: 14px; } .ght.tiles--list .tile__body { padding: 18px 20px; } .ght.tiles--list .tile__h { font-size: 17px; } @media (max-width: 1100px) { .ght .tiles__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ght.tiles--photo .tiles__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .ght .tiles__grid--2, .ght .tiles__grid--3, .ght .tiles__grid--4 { grid-template-columns: minmax(0, 1fr); } .ght.tiles--photo .tiles__grid--3, .ght.tiles--photo .tiles__grid--4 { grid-template-columns: minmax(0, 1fr); } .ght.tiles--photo .tile { flex-direction: row; } .ght.tiles--photo .tile__img { flex: none; width: 112px; aspect-ratio: auto; } .ght.tiles--photo .tile__body { padding: 16px; } .ght .tile__h { font-size: 18px; } .ght.tiles--photo .tile__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; } .ght .tiles__grid { gap: 12px; } /* photo icon tiles stay two to a row: smaller photo, icon and words */ .ght.tiles--icon .tiles__grid:has(.tile--ph) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ght.tiles--icon .tile--ph { border-radius: 16px; } .ght.tiles--icon .tile--ph .tile__ph { aspect-ratio: 4 / 3; } .ght.tiles--icon .tile--ph .tile__img { width: 44px; height: 44px; margin: -22px 0 0 12px; border-radius: 12px; } .ght.tiles--icon .tile--ph .tile__img img { width: 26px; height: 26px; } .ght.tiles--icon .tile--ph .tile__body { gap: 4px; padding: 8px 12px 14px; } .ght.tiles--icon .tile--ph .tile__h { font-size: 15.5px; } .ght.tiles--icon .tile--ph .tile__t { font-size: 13px; line-height: 1.4; } .ght.tiles--icon .tile--ph .tile__go { display: none; } } /* elementor-post-81527 */ .elementor-81527 .elementor-element.elementor-element-d4d0c3d{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-81527 .elementor-element.elementor-element-3bea8fb{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-81527 .elementor-element.elementor-element-1b367d6{--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-81527 .elementor-element.elementor-element-efd20ac > .elementor-widget-container{margin:20px 0px 0px 0px;}.elementor-81527 .elementor-element.elementor-element-9591918{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-81527 .elementor-element.elementor-element-9069781{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-81527 .elementor-element.elementor-element-ef06dc7{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-81527 .elementor-element.elementor-element-8cdc137{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap: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);}} } /* ght-compat */ /* ========================================================================== * GHH Toolkit — what the old theme (WoodMart) gave the Sky plugins. * Loaded on every page. SkyDonate's stylesheets were written on top of * WoodMart, so without these its forms and pop-ups fall apart under Hello: * * 1. WoodMart made every button position:relative, inline-flex and centred. * SkyDonate draws the chosen amount / Once-Monthly with an absolutely * placed ::after/::before; without a positioned button it covers the * whole pop-up. * 2. SkyDonate draws its close ✕ and video ▶ as glyphs of WoodMart's icon * font ("woodmart-font", \f112 / \f101). Nothing of WoodMart is used: the * same three marks are drawn here as icons in the text colour, 1em square. * * :where() keeps the button rule at zero specificity, so any real style wins. * ======================================================================== */ .donation-card .donation-image .play-button i:before, button.lity-close:before, .quick-modal-close:after { content: "" !important; display: inline-block; width: 1em; height: 1em; vertical-align: middle; font-family: inherit !important; background-color: currentColor; -webkit-mask: var(--ght-ico) center / contain no-repeat; mask: var(--ght-ico) center / contain no-repeat; } .donation-card .donation-image .play-button i:before { --ght-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12.5-7.5z'/%3E%3C/svg%3E"); } button.lity-close:before { display: block; margin: auto; } button.lity-close:before, .quick-modal-close:after { --ght-ico: 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.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); } /* 3. WoodMart padded every page section; Elementor's default is 10px, so older sections ran to the screen edge. Top-level containers get the GHH side gutter by default (containers that set their own padding, like the toolkit's sections, keep theirs). */ body.ght-site .e-con.e-parent { --container-default-padding-left: var(--ght-pad, 16px); --container-default-padding-right: var(--ght-pad, 16px); } :where(button, [type="submit"], [type="button"], .button) { position: relative; } :where(.donation-form-wrapper, .quick-modal, .skydonate-quick-donation-widget, [class*="skydonate"], [class*="skd-"], .donation-card) :where(button, [type="submit"], [type="button"], .button) { display: inline-flex; align-items: center; justify-content: center; gap: 5px; vertical-align: middle; text-align: center; cursor: pointer; } /* While the basket is open SkyDonate stops the page scrolling with `body { overflow: hidden }`. That makes a scroll box, and the sticky header then measures from it instead of the screen: it dropped 32px when signed in (the admin bar's margin counted twice) and left the screen when the page was scrolled (user: "header shows big when opening the mini basket"). Lock the page on instead, which is the screen itself. (Moved from ght-minicart.css in 1.53.6.) */ body.ght-site.skd-mc-locked { overflow: visible; overflow-x: clip; } html:has(body.ght-site.skd-mc-locked) { overflow: hidden; }