/* elementor-post-166501 */ .elementor-166501 .elementor-element.elementor-element-f297893{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;} /* ght-font */ /* GHH Toolkit fonts, served from the plugin: latin variable Schibsted Grotesk (home hero), Onest (appeal pages — GoFundMe-style type, the user's choice) and Amiri for Arabic. */ @font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("https://ghh.org.uk/wp-content/plugins/ghh-toolkit/assets/fonts/onest-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("https://ghh.org.uk/wp-content/plugins/ghh-toolkit/assets/fonts/schibsted-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Schibsted Grotesk"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("https://ghh.org.uk/wp-content/plugins/ghh-toolkit/assets/fonts/schibsted-grotesk-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Amiri"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://ghh.org.uk/wp-content/plugins/ghh-toolkit/assets/fonts/amiri-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } /* ght-base */ /* ========================================================================== * GHH Toolkit — base: tokens, reset, type, buttons. * * "Cinematic story" (approved mockup, ~/Sites/ghh-home-mockup): GHH's own * footage carries the page; dark and quiet around the pictures, the brand * blue for every action, the logo's gold for hope. One family, Schibsted * Grotesk; Amiri for Arabic. * * Tokens are prefixed --ght- (Elementor containers define --display, --gap, * --width… and a token with one of those names would be overwritten). * Every widget root carries `ght`; rules are written `.ght .x` (0,2,0) so they * beat Hello's resets — including its magenta button hover (0,1,1) — while * Elementor's own control CSS (0,3,0+) still wins. * ======================================================================== */ :root { --ght-blue: #1B9DD9; --ght-blue-d: #137CB0; --ght-night: #06141E; --ght-ink: #0B2638; --ght-ink-2: #24435A; --ght-gold: #F4A51E; --ght-mist: #EEF4F7; --ght-line: #D6E2E9; --ght-mute: #5B7182; --ght-r: 14px; --ght-pad: clamp(16px, 4vw, 64px); --ght-max: 1360px; --ght-f: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --ght-ease: cubic-bezier(.2, .7, .2, 1); --ght-hdr: 72px; --ght-tuck: 20px; /* how far the page runs up under the header's rounded bottom (header.css) */ /* the design system (DESIGN-SYSTEM.md): the calm look's extra colours, and the four corner sizes */ --ght-soft: #E9F6FD; --ght-page: #F6F8FA; --ght-gold-soft: #FDF1DA; --ght-ok: #1E874B; --ght-ok-soft: #EEF8F2; --ght-err: #C5281C; --ght-err-soft: #FDF1F0; --ght-r-s: 8px; --ght-r-m: 12px; --ght-r-l: 16px; --ght-r-xl: 20px; --ght-ui: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --ght-float: 0 24px 60px -20px rgba(6, 20, 30, .35); } body.ght-site { margin: 0; background: #fff; color: var(--ght-ink); font: 400 17px/1.6 var(--ght-f); -webkit-font-smoothing: antialiased; overflow-x: clip; } html:has(body.ght-site) { scroll-padding-top: calc(var(--ght-hdr) + 16px); overflow-x: hidden; } body.ght-site .site-main, body.ght-site .page-content, body.ght-site .page-header { margin: 0; padding: 0; max-width: none; } body.ght-site .page-header .entry-title { display: none; } html.ght-lock, html.ght-lock body { overflow: hidden; overscroll-behavior: none; } html.ght-lock .sky-whatsapp-widget { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .ght { position: relative; font-family: var(--ght-f); color: var(--ght-ink); line-height: 1.6; -webkit-font-smoothing: antialiased; } .ght *, .ght *::before, .ght *::after { box-sizing: border-box; } .ght img, .ght video { display: block; max-width: 100%; } .ght img { height: auto; } .ght a { color: inherit; } .ght h1, .ght h2, .ght h3, .ght h4, .ght p, .ght ul, .ght ol, .ght dl, .ght dd, .ght figure, .ght blockquote, .ght address { margin: 0; } .ght ul, .ght ol { padding: 0; list-style: none; } .ght address { font-style: normal; } .ght button, .ght input, .ght select { font: inherit; color: inherit; } /* a site-wide rule capitalises every button's words; GHH writes in sentence case */ .ght button, .ght .btn { text-transform: none; } .ght svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ght :focus-visible { outline: 2px solid var(--ght-blue); outline-offset: 3px; } .ght .wrap { width: 100%; max-width: var(--ght-max); margin: 0 auto; padding: 0 var(--ght-pad); } /* an empty widget's note in the Elementor editor (GHT_Widget_Base::editor_hint) */ .ght.ght-hint { margin: 0; padding: 24px; border: 1px dashed var(--ght-line); border-radius: var(--ght-r-m); color: var(--ght-mute); font-size: 15px; } .ght .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── type ── */ .ght h1, .ght h2, .ght h3 { font-family: var(--ght-f); color: inherit; } .ght .h2 { font-size: clamp(34px, 4.4vw, 64px); font-weight: 800; line-height: 1; letter-spacing: -.03em; text-wrap: balance; } .ght .h2--light { color: #fff; } .ght .lead { max-width: 46ch; font-size: 18px; color: var(--ght-mute); text-wrap: pretty; } .ght .lead--light { color: rgba(255, 255, 255, .7); } .ght .more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; color: var(--ght-gold); } .ght .more svg { transition: transform .2s var(--ght-ease); } .ght .more:hover svg { transform: translateX(4px); } .ght .rec { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #FF4D3D; animation: ght-pulse 1.8s infinite; } @keyframes ght-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 61, .6); } 70% { box-shadow: 0 0 0 8px rgba(255, 77, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 61, 0); } } /* ── buttons (states restate background-color: Hello paints buttons magenta) ── */ .ght .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; max-width: 100%; margin: 0; padding: 0 24px; border: 0; border-radius: 999px; background-color: transparent; font-family: var(--ght-f); font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none; text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; transition: background-color .2s, transform .15s, box-shadow .2s; } .ght .btn:active { transform: translateY(1px); } .ght .btn--blue, .ght .btn--blue:focus { background-color: var(--ght-blue); color: #fff; } .ght .btn--blue:hover, .ght .btn--blue:focus-visible { background-color: var(--ght-blue-d); color: #fff; box-shadow: 0 10px 30px -10px rgba(27, 157, 217, .8); } .ght .btn--gold, .ght .btn--gold:focus { background-color: var(--ght-gold); color: var(--ght-ink); } .ght .btn--gold:hover, .ght .btn--gold:focus-visible { background-color: #ffb73b; color: var(--ght-ink); } .ght .btn--ink, .ght .btn--ink:focus { background-color: var(--ght-ink); color: #fff; } .ght .btn--ink:hover, .ght .btn--ink:focus-visible { background-color: var(--ght-ink-2); color: #fff; } .ght .btn--white, .ght .btn--white:focus { background-color: #fff; color: var(--ght-ink); } .ght .btn--white:hover, .ght .btn--white:focus-visible { background-color: var(--ght-mist); color: var(--ght-ink); } .ght .btn--line, .ght .btn--line:focus { box-shadow: inset 0 0 0 1.5px currentColor; background-color: transparent; color: var(--ght-ink); } .ght .btn--line:hover, .ght .btn--line:focus-visible { background-color: var(--ght-ink); color: #fff; box-shadow: inset 0 0 0 1.5px var(--ght-ink); } .ght .btn--s { min-height: 40px; padding: 0 18px; font-size: 15px; } .ght .btn--l { min-height: 56px; padding: 0 30px; font-size: 17px; } .ght .btn svg { width: 20px; height: 20px; } .ght .btns { display: flex; flex-wrap: wrap; gap: 12px; } /* ── cards: the photo and the title open what the card is about (user: "make the image and title clickable"). The photo's link covers it (inside a position: relative box) and is skipped by keyboard and screen readers, which reach the same page through the title. ── */ .ght .ght-cover { position: absolute; inset: 0; z-index: 2; } .ght .ght-tlink { color: inherit; text-decoration: none; } .ght .ght-tlink:hover { color: var(--ght-blue-d); } /* ── shared by the page sections (1.4.0) ── */ /* tones: white (default), mist, night */ .ght.t-mist { background-color: var(--ght-mist); } .ght.t-night { background-color: var(--ght-night); color: #fff; } .ght.t-night .lead, .ght.t-night .rich { color: rgba(255, 255, 255, .74); } .ght.t-night .btn--line, .ght.t-night .btn--line:focus { color: #fff; } .ght.t-night .btn--line:hover { background-color: #fff; color: var(--ght-ink); box-shadow: inset 0 0 0 1.5px #fff; } .ght .kick { margin-bottom: 14px; font-size: 15px; font-weight: 700; color: var(--ght-blue-d); } .ght.t-night .kick { color: var(--ght-gold); } /* breadcrumb inside a section */ .ght .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; font-weight: 600; color: var(--ght-mute); } .ght .crumbs a { text-decoration: none; } .ght .crumbs a:hover { color: var(--ght-blue-d); } .ght .crumbs span[aria-hidden] { opacity: .5; } .ght .crumbs [aria-current] { color: var(--ght-ink); } /* long text written in the editor */ .ght .rich { font-size: 17px; line-height: 1.7; color: var(--ght-ink-2); text-wrap: pretty; } .ght .rich > * + * { margin-top: 1em; } .ght .rich h2, .ght .rich h3, .ght .rich h4 { margin-top: 1.6em; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; color: var(--ght-ink); } .ght .rich h2 { font-size: clamp(24px, 2.2vw, 30px); } .ght .rich h3 { font-size: 21px; } .ght .rich h4 { font-size: 18px; } .ght .rich > :first-child { margin-top: 0; } .ght .rich ul, .ght .rich ol { padding-left: 1.3em; } .ght .rich ul { list-style: disc; } .ght .rich ol { list-style: decimal; } .ght .rich li + li { margin-top: .4em; } .ght .rich li::marker { color: var(--ght-blue); } .ght .rich a { color: var(--ght-blue-d); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .ght .rich strong, .ght .rich b { font-weight: 700; color: var(--ght-ink); } .ght.t-night .rich strong, .ght.t-night .rich b, .ght.t-night .rich h2, .ght.t-night .rich h3 { color: #fff; } .ght.t-night .rich a { color: var(--ght-gold); } .ght .rich table { width: 100%; border-collapse: collapse; font-size: 15px; } /* wide tables (policies) scroll on their own on phones instead of widening the page */ @media (max-width: 760px) { .ght .rich table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } .ght .rich th, .ght .rich td { padding: 10px 12px; border-bottom: 1px solid var(--ght-line); text-align: left; vertical-align: top; } .ght .rich img { border-radius: 12px; } /* every page section: vertical rhythm */ .ght.sec { padding: clamp(64px, 8vw, 120px) 0; } /* two sections of the same light tone in a row: a line between them, less space */ .e-con:has(> .elementor-widget > .elementor-widget-container > .ght.t-white) + .e-con:has(> .elementor-widget > .elementor-widget-container > .ght.t-white) .ght.sec, .e-con:has(> .elementor-widget > .ght.t-white) + .e-con:has(> .elementor-widget > .ght.t-white) .ght.sec { border-top: 1px solid var(--ght-line); } /* another plugin's widget (SkyDonate cards, reviews, calculators) in a page: a container with the class ght-sec (+ ght-sec--mist / ght-sec--night) gives it the GHH width and spacing */ .e-con.ght-sec { --padding-top: clamp(56px, 7vw, 104px); --padding-bottom: clamp(56px, 7vw, 104px); --padding-left: var(--ght-pad); --padding-right: var(--ght-pad); --content-width: var(--ght-max); --gap: 24px; --row-gap: 24px; } .e-con.ght-sec--mist { background-color: var(--ght-mist); } .e-con.ght-sec--night { background-color: var(--ght-night); color: #fff; } .e-con.ght-sec > .e-con-inner { max-width: calc(var(--ght-max) - 2 * var(--ght-pad)); } .e-con.ght-sec .ght.gtt { margin-bottom: 8px; } /* lists (templates/archive.php): edge to edge like the Elementor pages (Hello narrows non-Elementor pages) */ body.ght-site main.site-main.ght-list-page { width: 100%; max-width: none; margin: 0; padding: 0; } /* search box and page numbers */ .ght .ght-search { display: flex; gap: 10px; max-width: 560px; margin-top: 28px; } .ght .ght-search input { flex: 1; min-width: 0; min-height: 52px; padding: 0 20px; border: 1px solid var(--ght-line); border-radius: 999px; background: #fff; font: 500 16px var(--ght-f); color: var(--ght-ink); } .ght .ght-search input:focus { border-color: var(--ght-blue); outline: 2px solid rgba(27, 157, 217, .25); } .ght .ght-search .btn { min-height: 52px; } .ght .ght-pages { margin-top: 40px; } .ght .ght-pages ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .ght .ght-pages a, .ght .ght-pages span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px; background: #fff; font-weight: 700; text-decoration: none; color: var(--ght-ink); } .ght .ght-pages .current { background: var(--ght-ink); color: #fff; } .ght .ght-pages a:hover { background: var(--ght-blue); color: #fff; } /* the SEO "ways to give" link boxes (mu-plugins ghh-*-hub*, inline styles: Zakat, Sadaqah Jariyah, water, masjids, Fidyah/Kaffarah) in the GHH look */ body.ght-site :is(.ghh-zakat-hub, .ghh-sadaqah-hub, .ghh-water-hub, .ghh-masjid-hub, .ghh-fk-hub) { max-width: calc(var(--ght-max) - 2 * var(--ght-pad)) !important; margin: 0 auto clamp(56px, 7vw, 104px) !important; padding: clamp(24px, 3vw, 40px) !important; border: 0 !important; border-radius: 26px !important; background: var(--ght-night) !important; color: #fff; font-family: var(--ght-f) !important; } @media (max-width: 1440px) { body.ght-site :is(.ghh-zakat-hub, .ghh-sadaqah-hub, .ghh-water-hub, .ghh-masjid-hub, .ghh-fk-hub) { margin-left: var(--ght-pad) !important; margin-right: var(--ght-pad) !important; } } body.ght-site :is(.ghh-zakat-hub, .ghh-sadaqah-hub, .ghh-water-hub, .ghh-masjid-hub, .ghh-fk-hub) h2 { font-size: clamp(26px, 2.6vw, 38px) !important; font-weight: 800; letter-spacing: -.02em; color: #fff !important; } body.ght-site :is(.ghh-zakat-hub, .ghh-sadaqah-hub, .ghh-water-hub, .ghh-masjid-hub, .ghh-fk-hub) p { color: rgba(255, 255, 255, .7) !important; } body.ght-site :is(.ghh-zakat-hub, .ghh-sadaqah-hub, .ghh-water-hub, .ghh-masjid-hub, .ghh-fk-hub) ul { gap: 10px 28px !important; } body.ght-site :is(.ghh-zakat-hub, .ghh-sadaqah-hub, .ghh-water-hub, .ghh-masjid-hub, .ghh-fk-hub) ul a { color: var(--ght-gold) !important; } body.ght-site :is(.ghh-zakat-hub, .ghh-sadaqah-hub, .ghh-water-hub, .ghh-masjid-hub, .ghh-fk-hub) ul a:hover { text-decoration: underline !important; } body.ght-site :is(.ghh-zakat-hub, .ghh-sadaqah-hub, .ghh-water-hub, .ghh-masjid-hub, .ghh-fk-hub) div a { padding: 0 24px !important; min-height: 48px; display: inline-flex !important; align-items: center; border-radius: 999px !important; background: #fff !important; color: var(--ght-ink) !important; } /* the main action blue: the second of two, or a lone button */ body.ght-site :is(.ghh-zakat-hub, .ghh-sadaqah-hub, .ghh-water-hub, .ghh-masjid-hub, .ghh-fk-hub) div a:only-child, body.ght-site :is(.ghh-zakat-hub, .ghh-sadaqah-hub, .ghh-water-hub, .ghh-masjid-hub, .ghh-fk-hub) div a + a { background: var(--ght-blue) !important; color: #fff !important; } /* the GHH Reels block when a page shows it on its own (SkyDonate app widget, via shortcode): on the page's content column, section spacing, a sentence-case label. The homepage films section styles its own copy. */ body.ght-site .ghhr { padding: clamp(56px, 7vw, 104px) 0; } body.ght-site .e-con:has(.ghhr) { padding-left: 0 !important; padding-right: 0 !important; } /* its template's container adds 16px more */ body.ght-site .ghhr-inner { max-width: calc(var(--ght-max) - 2 * var(--ght-pad)); margin: 0 auto; } @media (max-width: 1440px) { body.ght-site .ghhr-inner { margin: 0; padding-left: var(--ght-pad); padding-right: var(--ght-pad); } } body.ght-site .ghhr-eyebrow { font-family: var(--ght-ui) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; } /* the Reels section, its pop-up and phone feed in the site's UI font (the app plugin forces Manrope, which GHT_Speed no longer loads); icons keep their own font */ body.ght-site :is(.ghhr, .ghhr-lb, .ghhr-feed), body.ght-site :is(.ghhr, .ghhr-lb, .ghhr-feed) *:not(i):not([class*="fa-"]) { font-family: var(--ght-ui) !important; } /* round icon button */ .ght .ico, .ght .ico:hover, .ght .ico:focus { position: relative; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background-color: transparent; color: inherit; cursor: pointer; text-decoration: none; } .ght .ico:hover { background-color: var(--ght-mist); } .ght .ico svg { width: 22px; height: 22px; } /* the box fixed overlays move into (GHT.portal): takes no room, sets no type */ .ght.ght-portal { position: static; height: 0; line-height: inherit; } /* reveal on scroll (added by scripts; never hides content without JS) */ .ght .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ght-ease), transform .9s var(--ght-ease); } .ght .rv.is-in { opacity: 1; transform: none; } /* Elementor: sections sit edge to edge */ .elementor-widget[class*="elementor-widget-ght_"] > .elementor-widget-container { margin: 0; padding: 0; } /* a section holding a film, alone in its container: a definite width. On phones Chrome sized the container from the film at zero width (its 16:9 box has only absolute content), so the container came out ~130px short and the next section ran over the film (/insights/aqiqah-uk-2026/) */ :is(.e-con, .e-con > .e-con-inner) > .elementor-widget[class*="elementor-widget-ght_"]:only-child:has(.ght.gtv) { width: 100%; } .e-con:has(> .elementor-widget[class*="elementor-widget-ght_"]) { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; } /* ── Alerts (user: every alert in the site's style). WooCommerce's success / info / error messages and SkyDonate's own, everywhere: a calm tinted box with a hairline, a drawn icon (WooCommerce's icon font showed as an empty square), the text, and any button on the right (under the text when there's no room). ── */ body.ght-site :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .skydonate-gift-aid-enabled-notice) { --al-bg: var(--ght-mist); --al-line: var(--ght-line); --al-ink: var(--ght-ink); --al-ico: var(--ght-blue-d); --al-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 5h2v2h-2V7Zm0 4h2v6h-2v-6Z'/%3E%3C/svg%3E"); position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; width: auto; margin: 0 0 18px; padding: 14px 16px 14px 48px; border: 1px solid var(--al-line) !important; border-radius: 10px; background: var(--al-bg) !important; box-shadow: none; color: var(--al-ink) !important; font: 400 15px/1.5 var(--ght-f); list-style: none; text-align: left; } body.ght-site :is(.woocommerce-message, .skydonate-gift-aid-enabled-notice) { --al-bg: #EEF8F2; --al-line: #C4E5D0; --al-ink: #14532D; --al-ico: #1E874B; --al-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 14.2-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7Z'/%3E%3C/svg%3E"); } body.ght-site .woocommerce-error { --al-bg: #FDF1F0; --al-line: #F2CBC7; --al-ink: #8F1D14; --al-ico: #C5281C; --al-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 5h2v7h-2V7Zm0 9h2v2h-2v-2Z'/%3E%3C/svg%3E"); display: block; } body.ght-site :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .skydonate-gift-aid-enabled-notice)::before { content: "" !important; position: absolute; left: 16px; top: 15px; width: 20px; height: 20px; margin: 0; font-family: inherit !important; background: var(--al-ico); -webkit-mask: var(--al-mark) center / contain no-repeat; mask: var(--al-mark) center / contain no-repeat; } /* WooCommerce focuses a new alert (for screen readers): no heavy outline for that, keyboard focus still shows */ body.ght-site :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notices-wrapper):focus:not(:focus-visible) { outline: none; } body.ght-site .woocommerce-error li { margin: 0; padding: 0; list-style: none; } body.ght-site .woocommerce-error li + li { margin-top: 4px; } body.ght-site :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* the button: the site's quiet outline pill, on the right */ body.ght-site :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button { order: 2; float: none !important; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; margin: 0 0 0 auto !important; padding: 0 16px !important; border: 1px solid currentColor !important; border-radius: 999px !important; background: #fff !important; box-shadow: none !important; color: var(--al-ink) !important; font: 600 14px/1 var(--ght-f) !important; text-transform: none; letter-spacing: 0; white-space: nowrap; text-decoration: none; } body.ght-site :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button:hover { background: var(--al-ink) !important; color: #fff !important; } @media (max-width: 600px) { body.ght-site :is(.woocommerce-message, .woocommerce-info) .button { margin: 2px 0 0 !important; } } @media (max-width: 760px) { :root { --ght-hdr: 64px; } body.ght-site { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { /* no transitions at all: a .01ms duration would make every property transition, and scripts that measure right after a change would read stale values */ .ght *, .ght *::before, .ght *::after { animation: none !important; transition: none !important; } .ght .rv { opacity: 1; transform: none; } } /* ght-header */ /* GHH Header — always white, sticky, above the film. */ /* the page runs 20px up under the header, so its rounded bottom shows against the content even at the top of the page (with nothing under the corners they blended into the plain page background) */ .ght-site-header { position: sticky; z-index: 100; top: var(--wp-admin--admin-bar--height, 0px); margin-bottom: calc(-1 * var(--ght-tuck, 20px)); transition: transform .3s var(--ght-ease); } /* …so a page that starts with no top padding of its own got its first 20px hidden under the header. Every page now starts at least the tuck + 16px below it, by itself (user: no per-page padding). Raised to that minimum, never added on top of a page's own padding. Not when the page opens with a toolkit section (hero, page header…): those keep their background running up under the curve and already sit their content clear of it. */ body.ght-site .ght-site-header ~ .elementor > .e-con:first-child:not(:has(> [data-widget_type^="ght_"]:first-child, > .e-con:first-child > [data-widget_type^="ght_"]:first-child, > .e-con:first-child > .e-con:first-child > [data-widget_type^="ght_"]:first-child)), body.ght-site .ght-site-header ~ main.ght-main > .elementor:first-child > .e-con:first-child:not(:has(> [data-widget_type^="ght_"]:first-child, > .e-con:first-child > [data-widget_type^="ght_"]:first-child, > .e-con:first-child > .e-con:first-child > [data-widget_type^="ght_"]:first-child)) { padding-top: max(var(--padding-top, 0px), calc(var(--ght-tuck, 20px) + 16px)); padding-block-start: max(var(--padding-top, 0px), calc(var(--ght-tuck, 20px) + 16px)); } /* (a list page — appeal categories, blog — opening with a toolkit widget printed in Elementor's wrapper counts as a toolkit section too: /donate-category/… had a 36px strip above its photo hero) */ body.ght-site .ght-site-header ~ main.site-main:not(:has(> .ght:first-child, > [data-widget_type^="ght_"]:first-child)) { padding-top: max(var(--ght-pt, 0px), calc(var(--ght-tuck, 20px) + 16px)); } /* the Sky Prayer pages pull their breadcrumb bar up 40px (inline style) to cancel the old theme's top padding: here the spacing above does that job, so the bar stays where it is (it sat under the header) */ body.ght-site .ght-site-header ~ main:not(.ght-main) .sptg > .spt-ds-crumbs.spt-ds-bleed:first-child { margin-top: 0 !important; } /* slid away while scrolling down (header.js), back on the way up */ .ght-site-header.is-tucked { transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px))); } /* phones (600px and under): WordPress's admin bar scrolls away with the page instead of staying fixed, so a signed-in visitor's header must not keep its 46px gap below where the bar was (user) */ @media screen and (max-width: 600px) { .ght-site-header { top: 0; } .ght-site-header.is-tucked { transform: translateY(-100%); } } @media (prefers-reduced-motion: reduce) { .ght-site-header { transition: none; } } /* bottom corners rounded at every size, on every page (user) */ .ght.hdr { border-radius: 0 0 20px 20px; background-color: rgba(255, 255, 255, .97); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 #D5DCE4, 0 10px 24px -14px rgba(11, 38, 56, .28); color: var(--ght-ink); } .ght .hdr__in { display: flex; align-items: center; gap: 24px; height: var(--ght-hdr); max-width: 1600px; margin: 0 auto; padding: 0 var(--ght-pad); } .ght .hdr__logo { display: block; flex: none; } .ght .hdr__logo img { width: 236px; height: auto; } /* desktop: logo | menu in the true centre | tools (user). Below 1280px there isn't room for equal side columns, so the menu follows the logo as before. */ .ght .hdr__nav { margin-right: auto; } @media (min-width: 1280px) { .ght .hdr__in { display: grid; grid-template-columns: 1fr auto 1fr; } .ght .hdr__logo { justify-self: start; } .ght .hdr__nav { margin: 0; } .ght .hdr__tools, .ght .hdr__nav + .hdr__tools { justify-self: end; margin-left: 0; } .ght .hdr__logo + .hdr__tools { grid-column: 3; } } /* menu: top level in a row, sub-items in a dropdown */ .ght .hdr__list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } .ght .hdr__list > li { position: relative; } .ght .hdr__list > li > a { display: block; padding: 8px 11px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; opacity: .92; transition: background-color .2s; } .ght .hdr__list > li > a:hover, .ght .hdr__list > li:focus-within > a { background-color: var(--ght-mist); opacity: 1; } .ght .hdr__list > li.menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); opacity: .6; } .ght .hdr__list .sub-menu { position: absolute; z-index: 5; left: 0; top: 100%; min-width: 240px; margin: 8px 0 0; padding: 8px; list-style: none; border-radius: 16px; background: #fff; box-shadow: 0 24px 50px -20px rgba(11, 38, 56, .35), 0 0 0 1px var(--ght-line); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; } .ght .hdr__list .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } .ght .hdr__list > li:hover > .sub-menu, .ght .hdr__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .ght .hdr__list .sub-menu a { display: block; padding: 9px 12px; border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; } .ght .hdr__list .sub-menu a:hover { background-color: var(--ght-mist); color: var(--ght-blue-d); } /* mega menus (a top item with the class "mega"): a panel under the whole header bar, its sub-items as icon cards in three columns, filled down each column (the order GHH set them in) */ .ght .hdr__in { position: relative; } .ght .hdr__list > li.mega { position: static; } .ght .hdr__list > li.mega > .sub-menu { left: 50%; top: calc(100% - 6px); display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--mega-rows, 4), auto); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; width: min(1080px, calc(100vw - 2 * var(--ght-pad))); min-width: 0; margin: 0; padding: 20px; border-radius: var(--ght-r-xl); transform: translate(-50%, 6px); } .ght .hdr__list > li.mega > .sub-menu::before { top: -24px; height: 24px; } .ght .hdr__list > li.mega:hover > .sub-menu, .ght .hdr__list > li.mega:focus-within > .sub-menu, .ght .hdr__list > li.mega.is-open > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .ght .hdr__list > li.mega > .sub-menu > li { margin: 0; } .ght .hdr__list .sub-menu .mega__a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--ght-r-m); color: var(--ght-ink); text-decoration: none; transition: background-color .2s; } .ght .hdr__list .sub-menu .mega__a:hover, .ght .hdr__list .sub-menu .mega__a:focus-visible { background-color: var(--ght-mist); color: var(--ght-ink); } .ght .mega__ic { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ght-soft); color: var(--ght-blue-d); transition: background-color .2s, color .2s; } .ght .mega__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ght .mega__a:hover .mega__ic, .ght .mega__a:focus-visible .mega__ic { background: var(--ght-blue); color: #fff; } .ght .mega__tx { display: grid; gap: 2px; min-width: 0; } .ght .mega__t { font-size: 15px; font-weight: 700; line-height: 1.25; } .ght .mega__d { font-size: 13.5px; font-weight: 400; line-height: 1.35; color: var(--ght-mute); } .ght .hdr__list .current-menu-item > .mega__a .mega__ic { background: var(--ght-blue); color: #fff; } .ght .hdr__tools { display: flex; align-items: center; gap: 4px; margin-left: auto; } .ght .hdr__nav + .hdr__tools { margin-left: 0; } .ght .hdr__basket .ght-basket-n { position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--ght-gold); color: var(--ght-ink); font-size: 11px; font-weight: 800; line-height: 17px; text-align: center; } .ght .hdr__basket .ght-basket-n[hidden] { display: none; } /* Donate: lighter and slimmer than the page's buttons (user) */ .ght .btn.hdr__give { min-height: 44px; margin-left: 8px; padding: 0 22px; font-size: 15px; font-weight: 600; } .ght .hdr__burger { display: none; } /* appeal pages: while the appeal's pop-up is fetched the first time (header.js) */ .ght .btn.is-busy { opacity: .7; cursor: progress; } /* search bar under the header */ .ght .hdr__search { padding: 14px 0 18px; border-top: 1px solid var(--ght-line); border-radius: 0 0 20px 20px; background: #fff; } .ght .hdr__search[hidden] { display: none; } .ght .hdr__search form { display: flex; gap: 8px; max-width: 900px; } .ght .hdr__search input { flex: 1; min-width: 0; min-height: 52px; padding: 0 22px; border: 1.5px solid var(--ght-line); border-radius: 999px; background: var(--ght-mist); font-size: 17px; outline: none; } .ght .hdr__search input:focus { border-color: var(--ght-blue); background: #fff; } /* menu drawer (tablets and phones). It lives in (header.js moves it there), so every rule is rooted on .ght.mnav itself. Phones: the whole screen; tablets: a 420px panel over a dimmed page. */ .ght.mnav { position: fixed; z-index: 1000000; inset: 0; line-height: 1.4; } .ght.mnav[hidden] { display: none; } .mnav__scrim { position: absolute; inset: 0; background: rgba(6, 20, 30, .45); opacity: 0; transition: opacity .32s var(--ght-ease); } .mnav__panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(420px, 100%); background: #fff; box-shadow: -1px 0 0 var(--ght-line); transform: translateX(100%); transition: transform .32s var(--ght-ease); } .ght.mnav.is-open .mnav__scrim { opacity: 1; } .ght.mnav.is-open .mnav__panel { transform: none; } @media (prefers-reduced-motion: reduce) { .mnav__scrim, .mnav__panel { transition: none; } } .mnav__panel:focus { outline: 0; } /* the × lands where the ☰ was */ .mnav__top { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; height: var(--ght-hdr); padding: 0 calc(var(--ght-pad) - 6px) 0 var(--ght-pad); border-bottom: 1px solid var(--ght-line); } .mnav__top .hdr__logo { min-width: 0; } .mnav__top .hdr__logo img { width: 172px; max-width: 100%; height: auto; } .ght .mnav__x { flex: none; width: 44px; height: 44px; } /* only the middle scrolls: the top and the Donate footer stay put */ .mnav__body { flex: 1; min-height: 0; padding: 16px var(--ght-pad) 8px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* the mega menus in the drawer: the same icon cards, smaller, in one column */ .mnav__list li.mega > .sub-menu { padding-left: 0; border-left: 0; } .mnav__list .sub-menu .mega__a { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--ght-ink); } .mnav__list .mega__ic { width: 38px; height: 38px; border-radius: 10px; } .mnav__list .mega__ic svg { width: 19px; height: 19px; } .mnav__list .mega__t { font-size: 15.5px; font-weight: 600; } .mnav__list .mega__d { font-size: 13px; } /* search */ .mnav__search { position: relative; margin: 0 0 8px; } .mnav__search svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: var(--ght-ink-2); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; } .ght .mnav__search input { width: 100%; min-height: 50px; margin: 0; padding: 0 16px 0 46px; border: 1px solid var(--ght-line); border-radius: 999px; background: #fff; box-shadow: none; color: var(--ght-ink); font-family: var(--ght-f); font-size: 16px; outline: 0; -webkit-appearance: none; appearance: none; } .ght .mnav__search input:focus { border-color: var(--ght-blue); } .ght .mnav__search input::-webkit-search-cancel-button { -webkit-appearance: none; } /* the menu: a row per item, hairlines between; a parent's chevron folds its sub-links out */ .mnav__list, .mnav__list .sub-menu { margin: 0; padding: 0; list-style: none; } .mnav__list > li { position: relative; display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--ght-line); } .mnav__list > li > a { flex: 1; min-width: 0; display: block; padding: 16px 0; color: var(--ght-ink); font-size: 18px; font-weight: 600; text-decoration: none; } .mnav__list > li.current-menu-item > a, .mnav__list > li.current-menu-ancestor > a, .mnav__list > li.current-menu-parent > a { color: var(--ght-blue-d); } .ght .mnav__more, .ght .mnav__more:hover, .ght .mnav__more:focus { display: grid; flex: none; place-items: center; width: 44px; height: 44px; margin: 0 -10px 0 8px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ght-ink-2); cursor: pointer; } .ght .mnav__more:hover { background: var(--ght-mist); } .mnav__more svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ght-ease); } .mnav__list > li.is-open > .mnav__more svg { transform: rotate(180deg); } .mnav__list .sub-menu { display: none; flex-basis: 100%; margin: -4px 0 12px; padding-left: 14px; border-left: 1px solid var(--ght-line); } .mnav__list > li.is-open > .sub-menu { display: block; animation: ght-mnav-sub .25s var(--ght-ease); } @keyframes ght-mnav-sub { from { opacity: 0; transform: translateY(-4px); } } .mnav__list .sub-menu a { display: block; padding: 10px 0; color: var(--ght-ink-2); font-size: 16px; font-weight: 500; text-decoration: none; } .mnav__list .sub-menu .current-menu-item > a { color: var(--ght-blue-d); font-weight: 600; } .mnav__list a:hover { color: var(--ght-blue-d); } /* footer: Donate, then account and basket */ .mnav__foot { flex: none; display: grid; gap: 4px; padding: 14px var(--ght-pad) calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ght-line); background: #fff; } .ght .btn.mnav__give { width: 100%; min-height: 52px; font-size: 17px; font-weight: 600; } .mnav__links { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; } .ght .mnav__link { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; color: var(--ght-ink); font-size: 15px; font-weight: 600; text-decoration: none; } .ght .mnav__link + .mnav__link { border-left: 1px solid var(--ght-line); } .mnav__link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .mnav__link .ght-basket-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ght-gold); color: var(--ght-ink); font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; } .mnav__link .ght-basket-n[hidden] { display: none; } @media (max-width: 1180px) { .ght .hdr__nav { display: none; } .ght .hdr__burger { display: grid; } /* the tools go to the right edge: with the menu hidden, the desktop "nav + tools" rule (more specific) must not hold them left */ .ght .hdr__tools, .ght .hdr__nav + .hdr__tools { margin-left: auto; } } @media (max-width: 760px) { .ght .hdr__in { gap: 4px; } .ght .hdr__logo img { width: 196px; } /* phones: account, basket, Donate, menu (search is in the menu) */ .ght .hdr__tools .hdr__find { display: none; } /* tight together on every phone (user): 36px icons, no gap, Donate 4px off the basket */ .ght .hdr__tools { gap: 0; } .ght .hdr__tools .ico { width: 36px; height: 36px; } .ght .hdr__basket .ght-basket-n { top: 0; right: -2px; } /* phones (user): a little smaller (34px tall, 12px sides), and 10px clear of the basket icon */ .ght .btn.hdr__give { min-height: 34px; margin: 0 2px 0 10px; padding: 0 12px; font-size: 14px; } } @media (max-width: 420px) { /* logo, account, basket, Donate and menu on one line at 390px. The logo gives way first, so the menu button can never be pushed off a narrow screen (it was, at 360px and below). */ .ght .hdr__logo { flex: 0 1 auto; min-width: 0; } .ght .hdr__logo img { width: 172px; max-width: 100%; } .ght .hdr__tools { flex: none; } /* small screens (user): a smaller word too */ .ght .btn.hdr__give { padding: 0 10px; font-size: 13px; } } @media (max-width: 374px) { /* small phones: the account link moves into the menu (it's in the menu's footer) */ .ght .hdr__tools .hdr__acct { display: none; } } /* ---------- 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-film */ /* GHH Film Hero — GHH's own footage full screen, words and the donation bar at the bottom left. */ .ght.film { --ght-shade: 6, 20, 30; position: relative; height: calc(100svh - var(--ght-hdr) - var(--wp-admin--admin-bar--height, 0px)); min-height: 660px; overflow: hidden; background: var(--ght-night); color: #fff; } .ght .film__frame { position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 0; will-change: transform; } /* the still paints first; the loop (loaded after the page, film.js) fades in over it once playing */ .ght .film__still, .ght .film__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } .ght .film__video { opacity: 0; transition: opacity .6s ease; } .ght .film__video.is-on { opacity: 1; } .ght .film__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 20, 30, .96) 0%, rgba(6, 20, 30, .55) 38%, rgba(6, 20, 30, 0) 65%), linear-gradient(90deg, rgba(6, 20, 30, .6) 0%, rgba(6, 20, 30, 0) 55%); } .ght .film__in { position: absolute; left: 0; right: 0; bottom: 0; max-width: 1600px; margin: 0 auto; padding: 0 var(--ght-pad) clamp(28px, 4vw, 52px); } .ght .film__where { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .82); } .ght .film__h { margin: 0; font-size: clamp(56px, 8.4vw, 136px); font-weight: 900; line-height: .9; letter-spacing: -.045em; color: #fff; } .ght .film__h em { font-style: italic; font-weight: 800; color: var(--ght-gold); } .ght .film__lead { max-width: 52ch; margin-top: 22px; font-size: clamp(17px, 1.4vw, 20px); color: rgba(255, 255, 255, .84); } .ght .film__give { margin-top: 30px; } .ght .film__watch { position: absolute; right: var(--ght-pad); bottom: clamp(36px, 5vw, 64px); display: flex; align-items: center; gap: 14px; padding: 0; border: 0; background-color: transparent; color: #fff; text-align: left; font-weight: 700; cursor: pointer; } .ght .film__watch:hover, .ght .film__watch:focus { background-color: transparent; color: #fff; } .ght .film__watch small { display: block; font-weight: 500; color: rgba(255, 255, 255, .7); } .ght .film__play { display: grid; place-items: center; width: 74px; height: 74px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .3s var(--ght-ease), background-color .3s; } .ght .film__play svg { width: 24px; height: 24px; margin-left: 4px; fill: #fff; stroke: none; } .ght .film__watch:hover .film__play { transform: scale(1.08); background-color: var(--ght-blue); } /* the full film */ .ght .film__modal { position: fixed; z-index: 1000001; inset: 0; display: grid; place-items: center; padding: 4vw; background: rgba(3, 10, 16, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .ght .film__modal[hidden] { display: none; } .ght .film__full { width: min(1280px, 100%); max-height: 86vh; border-radius: 16px; background: #000; } .ght .film__x, .ght .film__x:hover, .ght .film__x:focus { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background-color: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; } /* below 1500px the donation bar reaches the right side: the film button moves to the top */ @media (max-width: 1499px) { .ght .film__watch { top: clamp(28px, 4vw, 48px); bottom: auto; } } @media (max-width: 1180px) { .ght .film__watch { display: none; } } /* phones: the film first, words and form under it */ @media (max-width: 760px) { .ght.film { height: auto; min-height: 0; } .ght .film__frame { position: relative; aspect-ratio: 4 / 5; } .ght .film__shade { background: linear-gradient(0deg, rgba(6, 20, 30, 1) 0%, rgba(6, 20, 30, .3) 40%, rgba(6, 20, 30, 0) 65%), linear-gradient(180deg, rgba(6, 20, 30, .6), rgba(6, 20, 30, 0) 20%); } .ght .film__in { position: relative; margin-top: -150px; padding-bottom: 34px; } .ght .film__h { font-size: 54px; } .ght .film__lead { font-size: 16px; } .ght .film__give { margin-top: 24px; } } /* 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-appeals */ /* GHH Urgent Appeals — three calm cards, each with its own film. */ .ght.now { padding: clamp(72px, 8vw, 120px) 0; background: #fff; color: var(--ght-ink); } .ght .now__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 40px; margin-bottom: clamp(28px, 3vw, 44px); } .ght .now__lead { margin-top: 14px; } .ght .now__all { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ght-blue-d); text-decoration: none; } .ght .now__all svg { transition: transform .2s var(--ght-ease); } .ght .now__all:hover svg { transform: translateX(4px); } .ght .now__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .ght .ap { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--ght-mist); } .ght .ap__film { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--ght-ink); } .ght .ap__film video, .ght .ap__film img { width: 100%; height: 100%; object-fit: cover; } .ght .ap__rec { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 999px; background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 12px; font-weight: 700; } .ght .ap__body { display: flex; flex: 1; flex-direction: column; padding: 22px; } .ght .ap__tag { font-size: 13px; font-weight: 700; color: var(--ght-blue-d); } .ght .ap__h { margin-top: 6px; font-size: clamp(22px, 1.8vw, 27px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; } .ght .ap__h a { text-decoration: none; } .ght .ap__h a:hover { color: var(--ght-blue-d); } .ght .ap__text { margin-top: 8px; font-size: 15px; color: var(--ght-mute); } .ght .ap__goal { margin-top: auto; padding-top: 18px; } .ght .ap__bar { height: 6px; overflow: hidden; border-radius: 999px; background: #D3E1E9; } .ght .ap__bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ght-blue); transition: width 1.4s var(--ght-ease); } .ght .ap__goal p { margin-top: 8px; font-size: 14px; color: var(--ght-mute); } .ght .ap__goal b { color: var(--ght-ink); } .ght .ap__give { display: flex; gap: 6px; margin-top: 16px; } .ght .ap__goal + .ap__give { margin-top: 16px; } .ght .ap__body > .ap__give:first-child, .ght .ap__text + .ap__give { margin-top: auto; padding-top: 18px; } /* > only: SkyDonate's pop-up starts inside .ap__give and its buttons must keep their own look */ .ght .ap__give > button, .ght .ap__give > button:focus { flex: 1; min-height: 46px; padding: 0 6px; border: 1.5px solid var(--ght-line); border-radius: 999px; background-color: #fff; color: var(--ght-ink); font-family: var(--ght-f); font-size: 16px; font-weight: 800; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; } .ght .ap__give > button.is-on, .ght .ap__give > button:hover { border-color: var(--ght-ink); background-color: var(--ght-ink); color: #fff; } .ght .ap__give > .btn { flex: 1.4; min-height: 46px; padding: 0 14px; } @media (max-width: 1180px) { .ght .now__grid { gap: 14px; } .ght .ap__give { flex-wrap: wrap; } .ght .ap__give > .btn { flex-basis: 100%; } } /* "grid" layout: every appeal. The first lies sideways across two columns (photo beside its words), and so does a last card that would otherwise sit alone on its row. */ .ght.now--grid .now__grid { gap: 22px; } .ght.now--grid .ap:first-child, .ght.now--grid .ap:last-child:nth-child(3n) { grid-column: span 2; flex-direction: row; } .ght.now--grid .ap:last-child:nth-child(3n) { grid-column: 1 / -1; } .ght.now--grid .ap:first-child .ap__film, .ght.now--grid .ap:last-child:nth-child(3n) .ap__film { flex: 0 0 56%; aspect-ratio: auto; min-height: 100%; } .ght.now--grid .ap:first-child .ap__body, .ght.now--grid .ap:last-child:nth-child(3n) .ap__body { justify-content: center; padding: clamp(24px, 2.6vw, 40px); } .ght.now--grid .ap:first-child .ap__h { font-size: clamp(26px, 2.4vw, 36px); } .ght.now--grid .ap:first-child .ap__text { font-size: 16.5px; } .ght.now--grid .ap:first-child .ap__goal { margin-top: 0; } @media (max-width: 1180px) and (min-width: 761px) { .ght.now--grid .now__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ght.now--grid .ap:last-child:nth-child(3n) { grid-column: auto; flex-direction: column; } .ght.now--grid .ap:last-child:nth-child(3n) .ap__film { flex: none; aspect-ratio: 1 / 1; min-height: 0; } .ght.now--grid .ap:last-child:nth-child(3n) .ap__body { justify-content: flex-start; padding: 22px; } /* two columns: the featured card fills a row, so an even count leaves the last one alone */ .ght.now--grid .ap:last-child:nth-child(even) { grid-column: 1 / -1; flex-direction: row; } .ght.now--grid .ap:last-child:nth-child(even) .ap__film { flex: 0 0 50%; aspect-ratio: auto; min-height: 100%; } .ght.now--grid .ap:last-child:nth-child(even) .ap__body { justify-content: center; } } /* phones: a sideways row of cards */ @media (max-width: 760px) { .ght .now__grid { display: flex; gap: 14px; margin: 0 calc(var(--ght-pad) * -1); padding: 0 var(--ght-pad) 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ght-pad); scrollbar-width: none; } .ght .now__grid::-webkit-scrollbar { display: none; } .ght .ap { flex: none; width: 82%; scroll-snap-align: start; } /* "grid" layout: one under another, wide photos */ .ght.now--grid .now__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; } .ght.now--grid .ap, .ght.now--grid .ap:first-child, .ght.now--grid .ap:last-child:nth-child(3n) { grid-column: auto; flex-direction: column; width: auto; } .ght.now--grid .ap .ap__film, .ght.now--grid .ap:first-child .ap__film, .ght.now--grid .ap:last-child:nth-child(3n) .ap__film { flex: none; aspect-ratio: 16 / 10; min-height: 0; } .ght.now--grid .ap:first-child .ap__body, .ght.now--grid .ap:last-child:nth-child(3n) .ap__body { padding: 20px; } .ght.now--grid .ap:first-child .ap__h { font-size: 26px; } } /* donation-card */ .donation-card { background-color: #3340ac; color: white; border-radius: 10px; } .donation-card .donation-image { position: relative; } .donation-card .donation-image .play-button { position: absolute; left: 12px; bottom: 12px; z-index: 2; background-color: white; color: black; border-radius: 999px; overflow: hidden; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; } .donation-card .donation-image .play-button i:before { content: "\f101"; font-family: "woodmart-font"; } .donation-card .donation-image .play-button i { font-style: normal; width: 50px; height: 50px; display: inline-block; text-align: center; font-size: 18px; line-height: 50px; border-radius: 99px; background-color: white; z-index: 2; padding-left: 3px; } .donation-card .donation-image .play-button span { display: inline-block; padding-right: 30px; margin-left: -104px; transition: .3s; } .donation-card .donation-image .play-button:hover span { margin-left: 0px; } .donation-card .donation-image a { display: block; } .donation-card .donation-image img { border-radius: 10px; } .donation-card .donation-content { padding: 24px; text-align: center; display: flex; flex-direction: column; flex: 1; } .donation-card .donation-content > .row { margin-top: auto; } .donation-card .donation-content .donation-title a { color: white; display: inline-block; } .donation-card .donation-content .donation-title { margin-bottom: 12px; margin-top: -5px; font-size: 23px; font-weight: 600; } .donation-card .donation-content .donation-short-description { color: #fffc; font-size: 16px; font-weight: 400; margin-bottom: 20px; } .donation-card .donation-content .donation-button { color: currentColor; font-size: 12px; background-color: #e10130; display: block; border-radius: 50px; padding: 10px; text-transform: uppercase; font-weight: 600; transition: .3s; display: flex; align-items: center; justify-content: center; gap: 0px; width: 100%; line-height: 1.34em; height: auto; min-height: inherit; } .donation-card .donation-content .donation-button .e-font-icon-svg { width: 12px; margin-left: 8px; color: currentColor; fill: currentColor; } .donation-card .donation-content .donation-button .icon { margin-left: 8px; } .donation-card .donation-content .donation-button.white-button { background-color: white; color: #3340ac; } .button-loader { position: relative; width: 0px; height: 0px; } .button-loader:before { content: ""; border: 2px solid currentColor; border-left-color: transparent; animation: spin 1s linear infinite; width: 14px; height: 14px; display: block; border-radius: 50%; position: absolute; left: 5px; top: 2px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .donation-card .donation-content .donation-button:hover { background-color: white; color: #e10130; } .donation-card .donation-content .donation-button.white-button:hover { background-color: black; color: currentColor; } .donation-card .donation-content .donation-details { display: flex; justify-content: space-between; color: currentColor; font-weight: 600; margin-top: 12px; line-height: 1.2em; text-align: center; } .layout1 .donation-card .donation-content .donation-details > span { min-width: 30%; } .donation-card .donation-content .donation-details .amount { display: block; } .donation-card .donation-content .donation-details .raised-amount { text-align: left; } .donation-card .donation-content .donation-details .target-amount { text-align: right; } .donation-card .donation-content .donation-details .amount { color: currentColor; } .donation-card .donation-progress { width: 100%; height: 12px; background-color: #dadfdc; border-radius: 99px; margin-top: 24px; overflow: hidden; } .donation-card .donation-progress .progress-bar { width: 0%; height: 100%; background: #6bb766; border-radius: 99px; } button.lity-close { position: absolute; top: -40px; /* Adjust for visibility */ right: 0px; /* Ensure placement */ width: 30px; height: 30px; overflow: hidden; text-indent: -99999px; font-size: 18px; line-height: 18px; padding: 0px; min-height: 30px; background-color: red; border-radius: 99px; cursor: pointer; } button.lity-close:hover { background-color: darkred; /* Better hover effect */ color: white; font-size: 18px !important; line-height: 18px !important; } button.lity-close:before { content: "\f112"; font-family: "woodmart-font"; display: block; font-size: 18px; position: absolute; left: 50%; top: 50%; text-indent: 0px; transform: translate(-50%, -50%); color: white; } .layout2 .donation-card .donation-content .donation-details { margin: 0; } .layout2 .donation-card .donation-content .donation-details > span { display: flex; flex-wrap: wrap; } .layout2 .donation-card .donation-content .donation-details .amount { margin-left: 5px; } .layout2 .donation-card .donation-progress { margin-top: 8px; } .layout2 .donation-card .percentage { text-align: right; font-size: 12px; margin-bottom: 8px; margin-top: 3px; } .layout2 .donation-card .donation-content .donation-button { max-width: 200px; display: inline-block; padding: 5px 5px 5px 24px; line-height: 36px; text-align: left; background-color: white; color: #0C5EBA; } .layout2 .donation-card .donation-content .donation-button .icon { width: 36px; height: 36px; line-height: 1em; background-color: #0C5EBA; color: white; text-align: center; border-radius: 99px; float: right; margin-left: -10px; display: inline-flex; align-items: center; justify-content: center; } .layout2 .donation-card .donation-content .donation-button:hover { background-color: #eeac2d; color: #ffffff; } .layout2 .donation-card .donation-content .donation-button .icon svg { margin: 0; } .layout2 .donation-card .donation-content .donation-title { margin-bottom: 16px; } .layout2 .donation-card .donation-content .donation-short-description { margin-bottom: 24px; } .layout2 .donation-card { border-bottom: 5px solid #eeac2d; background-color: #0C5EBA; } .donation-card .donation-content .icon-wrapper { display: flex; justify-content: center; align-items: center; } .layout2 .donation-card .card-icon { font-size: 40px; line-height: 1em; margin-bottom: 20px; position: relative; z-index: 3; display: inline-flex; width: 80px; height: 80px; background-color: #e30a6c; align-items: center; justify-content: center; border-radius: 99px; } .donation-card .donation-content .icon-wrapper .card-icon { display: flex; } .layout2 .donation-card .card-icon span { display: inline-block; } .layout2 .donation-card .card-icon img { width: 40px; } .layout2 .donation-card .card-icon svg { width: 40px; height: 40px; fill: currentColor; } .donation-cards-wrapper { display: flex; flex-wrap: wrap; } .donation-card { display: flex; flex-direction: column; height: 100%; min-height: 400px; } /* donation-button */ .button-full .primary-button { width: 100%; } .primary-button { box-shadow: none; vertical-align: middle; text-align: center; text-decoration: none; text-transform: capitalize; text-shadow: none; font-weight: 600; font-style: normal; line-height: 1.4; cursor: pointer; font-size: 13px; position: relative; display: inline-flex; align-items: center; justify-content: center; outline: none; border-radius: 0; transition: 0.1s linear; } .button-small .primary-button { padding: 12px 16px; font-size: 14px; min-height: inherit; } .button-medium .primary-button { padding: 12px 20px; min-height: inherit; } .button-large .primary-button { padding: 16px 24px; font-size: 14px; } .button-extra_large .primary-button { padding: 18px 32px; font-size: 16px; } .button-rounded .primary-button { border-radius: 8px; } .button-round .primary-button { border-radius: 99px; } .button-flat .primary-button { border: 0px solid transparent; } .button-flat.button-gray .primary-button { color: #3E3E3E; background: #F3F3F3; } .button-flat.button-gray .primary-button:hover, .button-flat.button-gray .primary-button.active { color: #3E3E3E; background: #e0e0e0; } .button-flat.button-primary .primary-button { color: #ffffff; background: var(--accent-color); box-shadow: inset 0 0 0 rgba(0,0,0,0.1); } .button-flat.button-primary .primary-button:hover, .button-flat.button-primary .primary-button.active { color: #ffffff; background: var(--accent-color); box-shadow: inset 0 0 200px rgba(0,0,0,0.1); } .button-flat.button-alternative .primary-button { color: #ffffff; background: var(--accent-color); box-shadow: inset 0 0 0 rgba(0,0,0,0.1); } .button-flat.button-alternative .primary-button:hover, .button-flat.button-alternative .primary-button.active { color: #ffffff; background: var(--accent-color); box-shadow: inset 0 0 200px rgba(0,0,0,0.1); } .button-flat.button-black .primary-button { color: #ffffff; background: #212121; box-shadow: inset 0 0 0 rgba(0,0,0,0.1); } .button-flat.button-black .primary-button:hover, .button-flat.button-black .primary-button.active { color: #ffffff; background: #212121; box-shadow: inset 0 0 200px rgba(0,0,0,0.1); } .button-flat.button-white .primary-button { color: #333333; background: white; box-shadow: inset 0 0 0 rgba(0,0,0,0.1); } .button-flat.button-white .primary-button:hover, .button-flat.button-white .primary-button.active { color: #333333; background: white; box-shadow: inset 0 0 200px rgba(0,0,0,0.1); } .button-border .primary-button { color: #333333; background: transparent; border: 1px solid #F3F3F3; } .button-border .primary-button:hover, .button-border .primary-button.active { color: #333333; border-color: #F3F3F3; background: #F3F3F3; } .button-border.button-primary .primary-button { color: var(--accent-color); background: transparent; border: 1px solid var(--accent-light-color); } .button-border.button-primary .primary-button:hover, .button-border.button-primary .primary-button.active { color: #ffffff; border-color: var(--accent-color); background: var(--accent-color); } .button-border.button-alternative .primary-button { color: var(--accent-color); background: transparent; border: 1px solid var(--accent-color); } .button-border.button-alternative .primary-button:hover, .button-border.button-alternative .primary-button.active { color: #ffffff; border-color: var(--accent-color); background: var(--accent-color); } .button-border.button-black .primary-button { color: #212121; background: transparent; border: 1px solid #212121; } .button-border.button-black .primary-button:hover, .button-border.button-black .primary-button.active { color: #ffffff; border-color: #212121; background: #212121; } .button-border.button-white .primary-button { color: #ffffff; background: transparent; border: 1px solid #ffffff; } .button-border.button-white .primary-button:hover, .button-border.button-white .primary-button.active { color: #212121; border-color: #ffffff; background: #ffffff; } .button-link .primary-button { background: none; padding: 0; color: #212121; border-bottom: 1px solid #F3F3F3; } .button-link .primary-button:hover, .button-link .primary-button.active { color: #333333; border-bottom: 1px solid #e0e0e0; } .button-link.button-primary .primary-button { color: #333333; border-bottom: 1px solid var(--accent-color); } .button-link.button-primary .primary-button:hover, .button-link.button-primary .primary-button.active { color: var(--accent-color); border-bottom: 1px solid var(--accent-color); } .button-link.button-alternative .primary-button { color: #333333; border-bottom: 1px solid var(--accent-color); } .button-link.button-alternative .primary-button:hover, .button-link.button-alternative .primary-button.active { color: var(--accent-color); border-bottom: 1px solid var(--accent-color); } .button-link.button-black .primary-button { color: #333333; border-bottom: 1px solid #333333; } .button-link.button-black .primary-button:hover, .button-link.button-black .primary-button.active { color: #000000; border-bottom: 1px solid #000000; } .button-link.button-white .primary-button { color: #ffffff; border-bottom: 1px solid #ffffff; } .button-link.button-white .primary-button:hover, .button-link.button-white .primary-button.active { color: #ffffff; border-bottom: 1px solid #ffffff; } /* ght-causes */ /* GHH Cause Tiles — appeal categories as large photo tiles: the name and count on the photo's dark foot. */ .ght .cz__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 40px; margin-bottom: clamp(24px, 3vw, 40px); } .ght .cz__lead { margin-top: 14px; } .ght .cz__all { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ght-blue-d); text-decoration: none; } .ght .cz__all svg { transition: transform .2s var(--ght-ease); } .ght .cz__all:hover svg { transform: translateX(4px); } .ght.t-night .cz__all { color: var(--ght-gold); } .ght .cz__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .ght.cz--small .cz__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .ght .cz__tile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 20px; background: var(--ght-ink); color: #fff; text-decoration: none; isolation: isolate; } .ght.cz--small .cz__tile { aspect-ratio: 4 / 3; border-radius: var(--ght-r-l); } .ght .cz__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ght-ease); } .ght .cz__tile:hover img { transform: scale(1.04); } .ght .cz__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 20, 30, .88) 0%, rgba(6, 20, 30, .35) 38%, rgba(6, 20, 30, 0) 62%); } .ght .cz__tx { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: clamp(18px, 2vw, 26px); } .ght .cz__name { font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; } .ght.cz--small .cz__name { font-size: clamp(18px, 1.5vw, 22px); } .ght .cz__n { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .82); } .ght.cz--small .cz__n { font-size: 13px; } .ght .cz__n svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ght-ease); } .ght .cz__tile:hover .cz__n svg { transform: translateX(4px); } .ght .cz__tile:focus-visible { outline: 3px solid var(--ght-blue); outline-offset: 3px; } @media (max-width: 960px) { .ght .cz__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ght.cz--small .cz__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .ght .cz__grid { gap: 10px; } .ght .cz__tile { aspect-ratio: 3 / 4; border-radius: var(--ght-r-l); } .ght .cz__name { font-size: 20px; } .ght .cz__n { font-size: 13px; } /* countries: one row that slides sideways */ .ght.cz--small .cz__grid { display: flex; margin: 0 calc(var(--ght-pad) * -1); padding: 0 var(--ght-pad) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--ght-pad); scrollbar-width: none; } .ght.cz--small .cz__grid::-webkit-scrollbar { display: none; } .ght.cz--small .cz__grid li { flex: none; width: 62%; scroll-snap-align: start; } } @media (prefers-reduced-motion: reduce) { .ght .cz__tile img, .ght .cz__n svg { transition: none; } } /* ght-pmap */ /* GHH Photo Map — light map, real photos as pins, a card for the chosen country. */ .ght.pmap { padding: clamp(72px, 9vw, 128px) 0; background: #fff; } .ght .pmap__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; margin-bottom: clamp(28px, 3vw, 44px); } .ght .pmap__head .h2 { max-width: 16ch; } /* desktop: the map, and beside it a panel with the chosen country (card, counter, next / previous) */ .ght .pmap__board { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 27vw, 380px); overflow: hidden; border: 1px solid var(--ght-line); border-radius: 32px; background: #fff; } /* the map is a size container: photos and names scale with it (cqw), so neighbours keep their distance on any screen */ .ght .pmap__map { position: relative; align-self: stretch; container-type: inline-size; background: linear-gradient(180deg, #E4F1F9, #D5E9F5); } .ght .pmap__svg { display: block; width: 100%; height: auto; } .ght .pmap__side { display: flex; flex-direction: column; gap: 16px; padding: 18px; } .ght .pmap__svg .land { fill: #fff; stroke: #E3ECF2; stroke-width: .6; } .ght .pmap__svg .ghh { fill: #BCE2F5; stroke: #fff; stroke-width: .8; cursor: pointer; transition: fill .4s; } .ght .pmap__svg .ghh.is-on { fill: #F9D58E; } .ght .pmap__svg .route { fill: none; stroke: var(--ght-blue); stroke-width: 1.4; stroke-dasharray: 3 6; stroke-linecap: round; opacity: .35; transition: opacity .3s, stroke-width .3s; } .ght .pmap__svg .route.is-on { opacity: 1; stroke-width: 2.4; stroke-dasharray: none; stroke: var(--ght-gold); } .ght .pmap__svg .hub { fill: var(--ght-gold); stroke: #fff; stroke-width: 3; } .ght .pmap__svg .hubtx { font: 700 15px var(--ght-f); fill: var(--ght-ink); paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; } .ght .pmap__svg .ldr { stroke: var(--ght-ink); stroke-width: 1.2; opacity: .4; } .ght .pmap__svg .spot { fill: var(--ght-ink); stroke: #fff; stroke-width: 2; } /* pins: round photos, placed in the map's own coordinates */ .ght .pmap__pins { position: absolute; inset: 0; pointer-events: none; } .ght .pin { --s: clamp(28px, 4.6cqw, 58px); } .ght .pin, .ght .pin:hover, .ght .pin:focus { position: absolute; z-index: 1; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); padding: 0; border: 3px solid #fff; border-radius: 50%; background-color: #fff; box-shadow: 0 10px 24px -8px rgba(11, 38, 56, .45); cursor: pointer; pointer-events: auto; transition: transform .35s var(--ght-ease), border-color .3s, box-shadow .3s; } .ght .pin img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .ght .pin span { position: absolute; left: 50%; top: calc(100% + 6px); padding: .23em .7em; border-radius: 999px; background: #fff; color: var(--ght-ink); font-size: clamp(11px, 1.05cqw, 13px); font-weight: 700; line-height: 1.4; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 4px 12px -6px rgba(11, 38, 56, .35); } .ght .pin:hover { z-index: 3; transform: scale(1.12); } .ght .pin.is-on { z-index: 4; transform: scale(1.42); border-color: var(--ght-gold); box-shadow: 0 0 0 5px rgba(244, 165, 30, .35), 0 16px 34px -10px rgba(11, 38, 56, .55); } .ght .pin.is-on span { background: var(--ght-gold); transform: translateX(-50%) scale(.72); transform-origin: top center; } .ght .pin:focus-visible { outline: 3px solid var(--ght-blue); outline-offset: 3px; } /* a smaller map (tablets, small laptops): names only on the chosen country, the card names it too */ @container (max-width: 560px) { .ght .pin span { display: none; } .ght .pin.is-on span { display: block; } } /* the card: the country's photo large, then what we do there and the Give button */ .ght .pcard { display: flex; flex: 1; flex-direction: column; gap: 16px; } /* the photo takes whatever height the panel has to spare (the map sets the panel's height) */ .ght .pcard__img { position: relative; flex: 1 1 auto; min-height: 200px; overflow: hidden; border-radius: 20px; background: var(--ght-mist); } .ght .pcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ght .pcard__body { display: flex; flex-direction: column; align-items: flex-start; padding: 0 4px; } .ght .pcard__meta { font-size: 13px; font-weight: 700; color: var(--ght-blue-d); } .ght .pcard__name { margin-top: 4px; font-size: clamp(28px, 2.4vw, 36px); font-weight: 900; line-height: 1; letter-spacing: -.03em; } .ght .pcard__what { margin: 10px 0 18px; font-size: 15px; line-height: 1.55; color: var(--ght-mute); } .ght .pcard__body .btn { min-height: 46px; } .ght .pcard__body .btn[hidden] { display: none; } /* next / previous, the counter, and a bar that fills while the next country is on its way */ .ght .pcard__nav { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 4px 0; border-top: 1px solid var(--ght-line); } .ght .pcard__go, .ght .pcard__go:hover, .ght .pcard__go:focus { width: 40px; height: 40px; border: 1px solid var(--ght-line); background: #fff; color: var(--ght-ink); } .ght .pcard__go:hover { background-color: var(--ght-mist); } .ght .pcard__go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ght .pcard__nav .pcard__go:last-child { grid-column: 4; } .ght .pcard__count { font-size: 14px; font-weight: 700; color: var(--ght-ink); font-variant-numeric: tabular-nums; } .ght .pcard__bar { height: 3px; overflow: hidden; border-radius: 999px; background: var(--ght-mist); } .ght .pcard__bar i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--ght-gold); transform: scaleX(0); transform-origin: left; } .ght .pcard__bar i.is-run { animation: ght-pmapbar linear both; } @keyframes ght-pmapbar { to { transform: scaleX(1); } } /* the names, to tap (tablets and phones, where the photos on the map are small) */ .ght .pmap__chips { display: none; } .ght .pmap__chip, .ght .pmap__chip:hover, .ght .pmap__chip:focus { flex: none; min-height: 38px; margin: 0; padding: 0 14px; border: 1px solid var(--ght-line); border-radius: 999px; background: #fff; color: var(--ght-ink); font: 600 14px/1 var(--ght-ui); text-transform: none; letter-spacing: 0; white-space: nowrap; cursor: pointer; } .ght .pmap__chip[aria-pressed="true"] { border-color: var(--ght-gold); background: var(--ght-gold); color: var(--ght-ink); } .ght .pcard.is-in .pcard__img, .ght .pcard.is-in .pcard__body > * { animation: ght-placein .5s var(--ght-ease) both; } .ght .pcard.is-in .pcard__name { animation-delay: .04s; } .ght .pcard.is-in .pcard__what { animation-delay: .08s; } @keyframes ght-placein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* tablets and phones: the map full width, the names to tap under it, then the card (photo beside the words) */ @media (max-width: 1023px) { .ght .pmap__board { grid-template-columns: minmax(0, 1fr); overflow: visible; border: 0; border-radius: 0; background: none; } .ght .pmap__map { overflow: hidden; border-radius: 24px; } .ght .pmap__chips { display: flex; gap: 8px; margin: 14px calc(-1 * var(--ght-pad)) 0; padding: 2px var(--ght-pad) 6px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .ght .pmap__chips::-webkit-scrollbar { display: none; } .ght .pmap__chip { scroll-snap-align: center; } .ght .pmap__side { gap: 12px; margin-top: 12px; padding: 16px; border: 1px solid var(--ght-line); border-radius: 24px; background: #fff; } /* one height for every country (pmap.js sets it): the photo stays square at the top */ .ght .pcard { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); align-items: start; gap: 16px; touch-action: pan-y; } .ght .pcard__img { aspect-ratio: 1; min-height: 0; border-radius: 16px; } .ght .pcard__body { padding: 2px 0 0; } .ght .pcard__what { margin: 8px 0 14px; } } @media (max-width: 760px) { .ght .pin, .ght .pin:hover, .ght .pin:focus { --s: 30px; border-width: 2px; } .ght .pin.is-on { transform: scale(1.3); box-shadow: 0 0 0 3px rgba(244, 165, 30, .4), 0 10px 20px -8px rgba(11, 38, 56, .5); } .ght .pmap__svg .hubtx { font-size: 20px; } /* the chosen country is named on the map too */ .ght .pin.is-on span { display: block; font-size: 11px; transform: translateX(-50%) scale(.78); } .ght .pcard__name { font-size: 26px; } .ght .pcard__what { font-size: 14.5px; } /* slimmer controls on phones (user: "buttons are fat on mobile") */ .ght .pcard__body .btn { min-height: 40px; padding: 0 18px; font-size: 15px; } .ght .pcard__go, .ght .pcard__go:hover, .ght .pcard__go:focus { width: 34px; height: 34px; } .ght .pcard__go svg { width: 18px; height: 18px; } .ght .pcard__nav { gap: 10px; padding-top: 10px; } .ght .pmap__chip, .ght .pmap__chip:hover, .ght .pmap__chip:focus { min-height: 32px; padding: 0 12px; font-size: 13px; } .ght .pmap__side { padding: 14px; } } /* ght-ways */ /* GHH Ways to Give — an editorial list; a photo follows the pointer on desktop. */ .ght.ways { padding: clamp(80px, 10vw, 140px) 0; border-top: 1px solid var(--ght-line); background: #fff; } .ght .ways__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin-bottom: clamp(32px, 4vw, 56px); } .ght .ways__list { border-top: 1px solid var(--ght-line); } /* every row is its own grid: the action column has a fixed width so the lines up the list align */ .ght .way { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 10em; align-items: center; gap: 24px; padding: clamp(20px, 2.4vw, 32px) 0; border-bottom: 1px solid var(--ght-line); text-decoration: none; transition: padding .35s var(--ght-ease), color .2s; } .ght .way__thumb { display: none; } .ght .way__n { font-size: clamp(30px, 4vw, 60px); font-weight: 800; line-height: 1; letter-spacing: -.035em; transition: color .25s; } .ght .way__t { font-size: 17px; color: var(--ght-mute); transition: opacity .3s; } .ght .way__go { justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; background-color: var(--ght-mist); font-weight: 700; color: var(--ght-blue-d); transition: background-color .25s, color .25s; } .ght a.way:hover { padding-left: 18px; } .ght a.way:hover .way__n { color: var(--ght-blue); } .ght a.way:hover .way__go { background-color: var(--ght-blue); color: #fff; } .ght .ways__list.is-hover .way__t { opacity: .12; } .ght .ways__list.is-hover li:not(:hover) .way__n { color: #B4C3CD; } .ght .ways__float { position: fixed; z-index: 40; left: 0; top: 0; width: 300px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.7) rotate(-3deg); transition: opacity .3s var(--ght-ease), transform .4s var(--ght-ease); box-shadow: 0 40px 80px -30px rgba(6, 20, 30, .5); } .ght .ways__float.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); } .ght .ways__float img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 760px) { .ght .way { grid-template-columns: 76px minmax(0, 1fr); gap: 4px 16px; padding: 18px 0; } .ght .way__thumb { display: block; grid-row: span 2; width: 76px; height: 76px; border-radius: 14px; object-fit: cover; } .ght .way__n { font-size: 26px; } .ght .way__t { font-size: 14px; } .ght .way__go { display: none; } .ght a.way:hover { padding-left: 0; } .ght .ways__float { display: none; } } /* ght-daily */ /* GHH Daily Giving — the gold band, the ten nights filling in. */ .ght.daily { padding: clamp(72px, 9vw, 128px) 0; background: var(--ght-gold); } .ght .daily__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 56px; } .ght .daily__h { margin: 0; font-size: clamp(56px, 8vw, 128px); font-weight: 900; line-height: .88; letter-spacing: -.045em; color: var(--ght-ink); } .ght .daily__lead { max-width: 46ch; margin-top: 24px; font-size: 19px; color: rgba(11, 38, 56, .82); } .ght .daily__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 30px 0; } .ght .daily__opts li { padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, .45); } .ght .daily__opts b { display: block; font-size: 17px; } .ght .daily__opts span { font-size: 14px; color: rgba(11, 38, 56, .75); } .ght .cal { padding: 28px; border-radius: 26px; background: var(--ght-ink); color: #fff; box-shadow: 0 50px 80px -30px rgba(11, 38, 56, .6); transform: rotate(-2deg); } .ght .cal__h { font-size: 20px; font-weight: 800; } .ght .cal__nights { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 20px 0; } .ght .cal__nights li { position: relative; display: grid; place-items: center; aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; font-size: 20px; font-weight: 800; color: rgba(255, 255, 255, .5); transition: all .3s var(--ght-ease); } .ght .cal__nights li.is-given { border-color: var(--ght-gold); background: var(--ght-gold); color: var(--ght-ink); } .ght .cal__nights li.is-odd::after { content: "★"; position: absolute; top: 5px; right: 7px; font-size: 11px; line-height: 1; color: var(--ght-gold); } .ght .cal__nights li.is-odd.is-given::after { color: var(--ght-ink); } .ght .cal__sum { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: rgba(255, 255, 255, .7); } .ght .cal__sum b { color: var(--ght-gold); } /* no script (or the editor): every night given */ .ght.daily:not([data-ght-init]) .cal__nights li { border-color: var(--ght-gold); background: var(--ght-gold); color: var(--ght-ink); } @media (max-width: 1180px) { .ght .daily__in { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .ght .daily__opts { grid-template-columns: minmax(0, 1fr); } .ght .cal { transform: none; } } /* ght-films */ /* GHH Field Films — a sideways rail of the app's reels. */ .ght.films { padding: clamp(80px, 10vw, 140px) 0; background: var(--ght-night); color: #fff; } .ght .films__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 40px; margin-bottom: 40px; } .ght .films__head .more { margin-left: auto; } .ght .films__rail { display: flex; gap: 16px; max-width: 1600px; margin: 0 auto; padding: 0 var(--ght-pad) 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ght-pad); scrollbar-width: none; list-style: none; } .ght .films__rail::-webkit-scrollbar { display: none; } .ght .films__rail li { flex: none; scroll-snap-align: start; } .ght .fl { position: relative; display: block; width: 250px; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 18px; background: var(--ght-ink-2); color: #fff; text-decoration: none; } .ght .fl img, .ght .fl video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ght-ease), opacity .4s; } .ght .fl video { opacity: 0; } .ght .fl.is-playing video { opacity: 1; } .ght .fl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0) 55%); } .ght .fl:hover img { transform: scale(1.05); } .ght .fl__len { position: absolute; z-index: 1; top: 14px; right: 14px; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .5); font-size: 12px; font-weight: 700; } .ght .fl__t { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 16px; font-size: 16px; font-weight: 700; line-height: 1.25; } .ght .fl__t small { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .65); } /* the app plugin's GHH Reels in place of the rail: its heading and "Watch more" are this section's own, its background is the section's. Inside .wrap its rail starts in line with the heading and runs off the right edge (as the app widget is designed). */ .ght .films__app .ghhr { padding: 0; background: transparent; } .ght .films__app .ghhr-head, .ght .films__app .ghhr-watchmore { display: none; } .ght .films__app .ghhr-rail { margin-top: 0; } .ght .films__app .ghhr-controls { justify-content: flex-end; } @media (max-width: 760px) { .ght .fl { width: 200px; } } /* ght-tools */ /* GHH Prayer Times and App — two cards. */ .ght.tools { padding: 0 0 clamp(80px, 9vw, 120px); background: #fff; } .ght .tools__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; } .ght.tools--one .tools__in { grid-template-columns: minmax(0, 1fr); } .ght .tool { padding: clamp(28px, 3.4vw, 48px); border-radius: 28px; } .ght .tool--prayer { background: var(--ght-blue); color: #fff; } .ght .tool--app { background: var(--ght-ink); color: rgba(255, 255, 255, .75); } .ght .tool__h { margin: 0; font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; color: #fff; } .ght .tool--app p { margin-top: 12px; } .ght .tool__search { margin-top: 24px; } /* the cities in one line that scrolls sideways (no scrollbar), fading out at the right edge */ /* the row runs to the card's own edges (out through its padding), so chips slide away under the card's edge instead of being cut inside it; the first chip still lines up with the text */ .ght .tool--prayer { --tp: clamp(28px, 3.4vw, 48px); overflow: hidden; } .ght .tool__chips { display: flex; flex-wrap: nowrap; gap: 8px; margin: 16px calc(-1 * var(--tp)) 0; padding: 0 var(--tp); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding: 0 var(--tp); -webkit-overflow-scrolling: touch; } .ght .tool__chips::-webkit-scrollbar { display: none; } .ght .tool__chips a { flex: none; scroll-snap-align: start; white-space: nowrap; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .2s, color .2s; } .ght .tool__chips a:hover { background: #fff; color: var(--ght-blue-d); } .ght .tool__chips a.is-on { background: #fff; color: var(--ght-blue-d); } /* today's times: city and Hijri date, the next prayer with its countdown, the five times */ .ght .pt { margin-top: 22px; padding: 18px; border-radius: 22px; background: rgba(255, 255, 255, .14); transition: opacity .2s; } .ght .pt[hidden] { display: none; } .ght .pt.is-busy { opacity: .6; } .ght .pt__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ght .pt__where { margin: 0; font-size: 14.5px; color: rgba(255, 255, 255, .85); } .ght .pt__where b { font-weight: 700; color: #fff; } /* "Use my exact location": a labelled pill (the place shown first is only the visitor's area) */ .ght .pt__loc, .ght .pt__loc:hover, .ght .pt__loc:focus { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px 0 9px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; font: 600 13px/1 var(--ght-ui); text-transform: none; letter-spacing: 0; cursor: pointer; } .ght .pt__loc:hover { background: #fff; color: var(--ght-blue-d); } .ght .pt__loc svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } /* exact location in use: the button has done its job */ .ght .pt.is-exact .pt__loc { display: none; } .ght .pt__approx { display: none; margin-left: 5px; font-size: 12.5px; color: rgba(255, 255, 255, .7); } .ght .pt.is-approx .pt__approx { display: inline; } .ght .pt__next { margin: 6px 0 14px; font-size: clamp(22px, 2vw, 28px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #fff; } .ght .pt__times { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; } .ght .pt__times li { display: grid; gap: 4px; margin: 0; padding: 10px 6px; border-radius: 14px; background: rgba(255, 255, 255, .12); text-align: center; transition: background-color .3s, color .3s; } .ght .pt__times span { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .8); } .ght .pt__times b { font-size: 18px; font-weight: 800; color: #fff; } /* today's times have their own location button: the search's one would be a second */ .ght .tool--prayer[data-api] .sky-prayer-geo-btn { display: none; } .ght .pt__times li.is-next { background: #fff; } .ght .pt__times li.is-next span { color: var(--ght-blue-d); } .ght .pt__times li.is-next b { color: var(--ght-ink); } .ght .pt__full { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 700; color: #fff; text-decoration: none; } .ght .pt__full[hidden] { display: none; } .ght .pt__full svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; } .ght .pt__full:hover svg { transform: translateX(3px); } /* the app: words and the official-style store badges, the phones beside them */ .ght .tool--app { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; } .ght .tool--app.has-phones { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 0; } /* the phones large, running off the card's right and bottom edges */ .ght .tool__phones { align-self: end; width: 125%; max-width: none; height: auto; margin: -24px calc(-1 * clamp(28px, 3.4vw, 48px)) calc(-1 * clamp(28px, 3.4vw, 48px)) -4%; } .ght .tool__stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px !important; } .ght .store, .ght .store:focus { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 18px 8px 14px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 12px; background: #000; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.1; text-decoration: none; } .ght .store svg { flex: none; width: 24px; height: 24px; } .ght .store span { display: grid; } .ght .store small { font-size: 10.5px; font-weight: 500; opacity: .8; } .ght .store:hover { border-color: #fff; background: #000; color: #fff; } /* Sky Prayer's city search, dressed as a white pill on the blue card */ .ght .tool__search .sky-prayer-search-container { max-width: none; margin: 0; } .ght .tool__search .sky-prayer-search-bar { position: relative; display: flex; align-items: center; gap: 8px; } .ght.tools .tool__search .sky-prayer-search-container .sky-prayer-search-input-wrap { position: relative !important; flex: 1; min-width: 0; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; } /* !important: Sky Prayer's own city-search.css loads here too (1.49.2) and would undo these */ .ght.tools .tool__search .sky-prayer-search-container .sky-prayer-search-input-wrap input.sky-prayer-search-input { width: 100%; height: 56px !important; min-height: 56px; margin: 0 !important; padding: 0 22px 0 52px !important; border: 0 !important; border-radius: 999px !important; background: #fff !important; color: var(--ght-ink); font-family: var(--ght-f); font-size: 17px !important; box-shadow: none !important; outline: none; } .ght.tools .tool__search .sky-prayer-search-container .sky-prayer-search-icon { position: absolute !important; left: 20px !important; right: auto !important; top: 50% !important; width: 20px; height: 20px; margin: 0 !important; color: var(--ght-mute); transform: translateY(-50%) !important; pointer-events: none; } .ght .tool__search .sky-prayer-geo-btn, .ght .tool__search .sky-prayer-settings-btn { display: grid; place-items: center; flex: none; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background-color: rgba(255, 255, 255, .18); color: #fff; cursor: pointer; } .ght .tool__search .sky-prayer-geo-btn:hover, .ght .tool__search .sky-prayer-settings-btn:hover { background-color: var(--ght-gold); color: var(--ght-ink); } .ght .tool__search .sky-prayer-geo-btn svg, .ght .tool__search .sky-prayer-settings-btn svg { width: 22px; height: 22px; } .ght .tool__search .sky-prayer-search-dropdown { color: var(--ght-ink); } @media (max-width: 1180px) { .ght .tools__in { grid-template-columns: minmax(0, 1fr); } .ght .tool__phones { width: 100%; max-width: 440px; margin-left: auto; } } @media (max-width: 640px) { .ght .pt { padding: 14px; } /* the place on its own line, the location button under it */ .ght .pt__top { flex-wrap: wrap; gap: 8px; } .ght .pt__times { gap: 4px; } .ght .pt__times li { padding: 8px 2px; border-radius: 12px; } .ght .pt__times span { font-size: 11px; } .ght .pt__times b { font-size: 15px; } /* "Your giving and your salah, in one app" on two lines */ .ght .tool--app .tool__h { font-size: 24px; letter-spacing: -.02em; } /* the phones under the words, cropped by the card's bottom edge */ .ght .tool--app.has-phones { grid-template-columns: minmax(0, 1fr); } .ght .tool__phones { width: 100%; max-width: 320px; margin: 8px auto calc(-1 * clamp(28px, 3.4vw, 48px)); } .ght .store, .ght .store:focus { min-height: 46px; padding: 6px 14px 6px 12px; font-size: 15px; } } /* sky-prayer-city-search */ /** * Sky Prayer City Search and Settings Panel Styles * * @package Sky_Prayer_Timetable */ /* Container */ .sky-prayer-search-container { position: relative; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 14px; line-height: 1.5; box-sizing: border-box; } .sky-prayer-search-container *, .sky-prayer-search-container *::before, .sky-prayer-search-container *::after { box-sizing: border-box; } /* Search Bar */ .sky-prayer-search-bar { display: flex; align-items: center; gap: 8px; background: transparent; border: none; border-radius: 8px; padding: 0; } /* Search Input Wrapper - the main search field with border */ .sky-prayer-search-input-wrap { flex: 1; display: flex; align-items: center; position: relative; background: #fff; border: none; border-radius: 8px; padding: 0 12px; transition: border-color 0.2s, box-shadow 0.2s; } .sky-prayer-search-input-wrap:focus-within { /* Focus styles controlled via Elementor */ } /* Search Icon - inline flex item inside the bordered area */ svg.sky-prayer-search-icon { flex-shrink: 0; width: 18px; height: 18px; color: #999; display: block; margin-right: 10px; } /* Search Input - override theme styles with high specificity */ .sky-prayer-search-container .sky-prayer-search-input-wrap input.sky-prayer-search-input, .sky-prayer-search-container .sky-prayer-search-input-wrap input.sky-prayer-search-input[type="text"] { flex: 1; min-width: 0; border: none !important; border-width: 0 !important; outline: none !important; padding: 12px 8px 12px 0 !important; font-size: 15px; background: transparent !important; background-color: transparent !important; color: #333; height: auto !important; max-width: none; width: auto; box-shadow: none !important; border-radius: 0 !important; } .sky-prayer-search-container .sky-prayer-search-input-wrap input.sky-prayer-search-input:focus, .sky-prayer-search-container .sky-prayer-search-input-wrap input.sky-prayer-search-input[type="text"]:focus { outline: none !important; box-shadow: none !important; border: none !important; } /* Selected state - when input has value, show it can be cleared on click */ .sky-prayer-search-input.has-value { cursor: pointer; } .sky-prayer-search-container .sky-prayer-search-input::placeholder { color: #999; } .sky-prayer-search-spinner { position: absolute; right: 44px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #0073aa; animation: sky-prayer-spin 1s linear infinite; display: flex; align-items: center; justify-content: center; } .sky-prayer-search-spinner svg { width: 18px; height: 18px; } /* Geolocation button - inside the bordered search field */ .sky-prayer-search-input-wrap .sky-prayer-geo-btn { flex-shrink: 0; border: none; background: transparent; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s, color 0.2s; color: #666; padding: 6px; margin: 0; } .sky-prayer-search-input-wrap .sky-prayer-geo-btn:hover { background: #f0f0f0; color: #0073aa; } .sky-prayer-search-input-wrap .sky-prayer-geo-btn:active { transform: scale(0.95); } /* Icon inside geo button - allow free sizing via width/height attributes on SVG */ .sky-prayer-search-input-wrap .sky-prayer-geo-btn svg { display: block; flex-shrink: 0; width: 20px; height: 20px; } .sky-prayer-search-input-wrap .sky-prayer-geo-btn.loading { animation: sky-prayer-pulse 1s ease-in-out infinite; } @keyframes sky-prayer-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Settings Button */ .sky-prayer-settings-btn { flex-shrink: 0; border: none; background: #f5f5f5; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s, transform 0.1s, color 0.2s; color: #666; margin-left: 8px; padding: 12px; } .sky-prayer-settings-btn:hover { background: #e8e8e8; color: #0073aa; } .sky-prayer-settings-btn:active { transform: scale(0.95); } /* Icon inside settings button - allow free sizing via width/height attributes on SVG */ .sky-prayer-settings-btn svg { display: block; flex-shrink: 0; } @keyframes sky-prayer-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Dropdown */ .sky-prayer-search-dropdown { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1000; max-height: 320px; overflow-y: auto; } .sky-prayer-search-results { list-style: none; margin: 0; padding: 4px; } .sky-prayer-search-result { padding: 12px 16px; cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px; transition: background-color 0.15s; } .sky-prayer-search-result:hover, .sky-prayer-search-result.active { background: #f0f6fc; } .sky-prayer-result-location { flex: 1; color: #333; font-weight: 500; } .sky-prayer-result-badge { font-size: 11px; padding: 2px 8px; background: #e7f3ff; color: #0073aa; border-radius: 10px; text-transform: uppercase; font-weight: 600; } .sky-prayer-no-results { padding: 16px; text-align: center; color: #666; } /* Settings Overlay */ .sky-prayer-settings-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 10000; } /* Settings Panel */ .sky-prayer-settings-panel { position: fixed; top: 0; right: -400px; width: 380px; max-width: 100%; height: 100%; background: #fff; z-index: 10001; display: flex; flex-direction: column; box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2); transition: right 0.3s ease; } .sky-prayer-settings-panel.open { right: 0; } /* Settings Header */ .sky-prayer-settings-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #eee; background: #f8f9fa; } .sky-prayer-settings-header h3 { margin: 0; font-size: 18px; font-weight: 600; color: #333; } .sky-prayer-settings-close { border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color 0.2s; color: #666; padding: 8px; } .sky-prayer-settings-close:hover { background: #eee; color: #333; } /* Icon inside close button - allow free sizing via width/height attributes on SVG */ .sky-prayer-settings-close svg { display: block; flex-shrink: 0; } /* Settings Body */ .sky-prayer-settings-body { flex: 1; overflow-y: auto; padding: 20px; } /* ── Muslim Pro-style settings popup ───────────────────────────── Radio method cards + madhab pills + note + single Apply button. Colors consume the parent design system vars with hard fallbacks so the popup still looks right on pages that don't load design-system.css. */ .sky-prayer-settings-section-label { margin: 4px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--spt-muted, #7a8699); } .sky-prayer-method-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; } .sky-prayer-method-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--spt-line, #e6e9f0); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s; } .sky-prayer-method-card:hover { border-color: var(--spt-primary, #204C93); } .sky-prayer-method-card input { position: absolute; opacity: 0; pointer-events: none; } /* Custom radio dot */ .sky-prayer-method-radio { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border: 2px solid var(--spt-line, #d5dbe6); border-radius: 50%; position: relative; transition: border-color 0.15s; } .sky-prayer-method-card input:checked + .sky-prayer-method-radio { border-color: var(--spt-primary-dark, #16305c); } .sky-prayer-method-card input:checked + .sky-prayer-method-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--spt-primary-dark, #16305c); } /* Whole-card selected state (progressive — browsers without :has still show the radio dot) */ .sky-prayer-method-card:has(input:checked) { border: 2px solid var(--spt-primary, #204C93); padding: 13px 15px; background: #f4f7fc; } .sky-prayer-method-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sky-prayer-method-name { font-size: 15.5px; font-weight: 700; color: var(--spt-heading, #16305c); line-height: 1.3; } .sky-prayer-method-desc { font-size: 13px; color: var(--spt-muted, #7a8699); line-height: 1.45; } /* Madhab pills */ .sky-prayer-madhab-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; } .sky-prayer-madhab-pill { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; padding: 14px 10px; border: 1px solid var(--spt-line, #e6e9f0); border-radius: 16px; background: #fff; cursor: pointer; transition: border-color 0.15s, background-color 0.15s; } .sky-prayer-madhab-pill input { position: absolute; opacity: 0; pointer-events: none; } .sky-prayer-madhab-pill:hover { border-color: var(--spt-primary, #204C93); } .sky-prayer-madhab-pill:has(input:checked) { border: 2px solid var(--spt-primary-dark, #16305c); padding: 13px 9px; background: #f4f7fc; } .sky-prayer-madhab-name { font-size: 16px; font-weight: 700; color: var(--spt-primary, #204C93); } .sky-prayer-madhab-desc { font-size: 12px; color: var(--spt-muted, #7a8699); line-height: 1.35; } /* Note box */ .sky-prayer-settings-note { padding: 14px 16px; border-radius: 14px; background: #f0f4fb; border: 1px solid var(--spt-line-soft, #e3eaf5); font-size: 13.5px; line-height: 1.55; color: var(--spt-body, #3a465c); } /* Settings Footer */ .sky-prayer-settings-footer { padding: 16px 20px; border-top: 1px solid var(--spt-line-soft, #eef1f6); background: #fff; } .sky-prayer-settings-save { width: 100%; padding: 14px 16px; border: none; border-radius: 999px; font-size: 15.5px; font-weight: 700; cursor: pointer; background: var(--spt-hero-end, #1a3f7d); color: #fff; transition: background-color 0.2s, transform 0.1s; } .sky-prayer-settings-save:hover { background: var(--spt-primary-dark, #16305c); } .sky-prayer-settings-save:active { transform: scale(0.99); } /* Toast Notification */ .sky-prayer-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 500; z-index: 10002; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .sky-prayer-toast.success { background: #00a32a; color: #fff; } .sky-prayer-toast.error { background: #d63638; color: #fff; } /* Dark Theme */ .sky-prayer-search-dark .sky-prayer-search-bar { background: #2c2c2c; } .sky-prayer-search-dark .sky-prayer-search-input { color: #fff; } .sky-prayer-search-dark .sky-prayer-search-input::placeholder { color: #888; } .sky-prayer-search-dark .sky-prayer-search-icon { color: #888; } .sky-prayer-search-dark .sky-prayer-settings-btn { background: #3c3c3c; color: #aaa; } .sky-prayer-search-dark .sky-prayer-settings-btn:hover { background: #4c4c4c; color: #0073aa; } .sky-prayer-search-dark .sky-prayer-search-input-wrap .sky-prayer-geo-btn { color: #aaa; } .sky-prayer-search-dark .sky-prayer-search-input-wrap .sky-prayer-geo-btn:hover { background: #3c3c3c; color: #0073aa; } .sky-prayer-search-dark .sky-prayer-search-dropdown { background: #2c2c2c; border-color: #444; } .sky-prayer-search-dark .sky-prayer-search-result:hover, .sky-prayer-search-dark .sky-prayer-search-result.active { background: #3c3c3c; } .sky-prayer-search-dark .sky-prayer-result-location { color: #eee; } .sky-prayer-search-dark .sky-prayer-no-results { color: #aaa; } /* Responsive */ @media (max-width: 480px) { .sky-prayer-settings-panel { width: 100%; right: -100%; } .sky-prayer-settings-panel.open { right: 0; } .sky-prayer-search-bar { padding: 2px; } .sky-prayer-settings-btn { padding: 10px; } .sky-prayer-search-input-wrap { padding-left: 10px; } .sky-prayer-search-input { padding: 10px 40px 10px 0; font-size: 14px; } .sky-prayer-search-input-wrap .sky-prayer-geo-btn { padding: 6px; } .sky-prayer-search-spinner { right: 38px; } } /* Body scroll lock when settings open */ body.sky-prayer-settings-open { overflow: hidden; } /* Scrollbar Styling */ .sky-prayer-search-dropdown::-webkit-scrollbar, .sky-prayer-settings-body::-webkit-scrollbar { width: 6px; } .sky-prayer-search-dropdown::-webkit-scrollbar-track, .sky-prayer-settings-body::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; } .sky-prayer-search-dropdown::-webkit-scrollbar-thumb, .sky-prayer-settings-body::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; } .sky-prayer-search-dropdown::-webkit-scrollbar-thumb:hover, .sky-prayer-settings-body::-webkit-scrollbar-thumb:hover { background: #999; } /* Animation for panel */ @media (prefers-reduced-motion: reduce) { .sky-prayer-settings-panel { transition: none; } .sky-prayer-search-input-wrap .sky-prayer-geo-btn.loading { animation: none; } .sky-prayer-search-spinner { animation: none; } } /* RTL support — flip the search field's directional chrome. */ [dir="rtl"] svg.sky-prayer-search-icon { margin-right: 0; margin-left: 10px; } [dir="rtl"] .sky-prayer-search-container .sky-prayer-search-input-wrap input.sky-prayer-search-input, [dir="rtl"] .sky-prayer-search-container .sky-prayer-search-input-wrap input.sky-prayer-search-input[type="text"] { padding: 12px 0 12px 8px !important; } [dir="rtl"] .sky-prayer-search-spinner { right: auto; left: 44px; } /* Settings panel slides in from the left on RTL. */ [dir="rtl"] .sky-prayer-settings-panel { right: auto; left: -400px; box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2); transition: left 0.3s ease; } [dir="rtl"] .sky-prayer-settings-panel.open { right: auto; left: 0; } /* elementor-post-20 */ .elementor-20 .elementor-element.elementor-element-b7c2e83{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-700b43a{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-edc061d{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-160a6da{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-7335e49{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-b849c10{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-c6b8329{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-990b0b5{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-5f620b2{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-b9a87f2{--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; } /* ght-reviews */ /* ========================================================================== * GHH Toolkit — Sky360's Google reviews (Elementor "SEO Reviews" widget, * .sky360-reviews-slider) in the GHH design system. Sky360 draws it; this * only restyles it. `body …` (and !important where Elementor's widget * settings print their own colours) so it wins whichever file loads last. * ======================================================================== */ /* cards: white, hairline, 16px corners, no shadow, no lift */ body .sky360-reviews-slider .sky-review-item, body .sky360-reviews-grid .sky-review-item { padding: 22px 22px 18px !important; border: 1px solid var(--ght-line) !important; border-radius: var(--ght-r-l) !important; background: #fff !important; box-shadow: none !important; transform: none !important; color: var(--ght-ink); font-family: var(--ght-f); } body .sky360-reviews-slider .sky-review-item:hover { border-color: #c4d4de !important; box-shadow: none !important; transform: none !important; } /* who and when */ body .sky360-reviews-slider .sky-author-photo, body .sky360-reviews-slider .sky-author-photo-placeholder { width: 44px !important; height: 44px !important; } body .sky360-reviews-slider .sky-review-author-name { color: var(--ght-ink) !important; font: 600 15px/1.3 var(--ght-f) !important; } body .sky360-reviews-slider .sky-review-time { color: var(--ght-mute) !important; font: 400 13px/1.35 var(--ght-f) !important; } body .sky360-reviews-slider .sky-google-icon { width: 18px; height: 18px; } /* stars in the hope gold, the verified tick in GHH blue */ body .sky360-reviews-slider .sky-review-rating { color: var(--ght-gold) !important; font-size: 17px !important; letter-spacing: 2px; } body .sky360-reviews-slider .sky-verified-review svg path { fill: var(--ght-blue) !important; } /* the review */ body .sky360-reviews-slider .sky-review-text { color: var(--ght-ink-2) !important; font: 400 15px/1.6 var(--ght-f) !important; } /* a shortened review ends after 4 whole lines with "…" (the plugin's pixel max-height cut a line in half) */ body .sky360-reviews-slider .sky-review-text.sky-truncated { display: -webkit-box !important; max-height: none !important; overflow: hidden !important; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } /* Read more: a quiet blue link in sentence case (the plugin prints "READ MORE") */ body .sky360-reviews-slider .sky-read-more-toggle { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--ght-blue-d) !important; font: 600 14px/1.4 var(--ght-f) !important; letter-spacing: 0 !important; text-transform: lowercase !important; } body .sky360-reviews-slider .sky-read-more-toggle::first-letter { text-transform: uppercase; } body .sky360-reviews-slider .sky-read-more-toggle:hover, body .sky360-reviews-slider .sky-read-more-toggle:focus { background: none !important; color: var(--ght-ink) !important; } /* the like: a small outlined pill */ body .sky360-reviews-slider .sky-review-like-button { min-height: 34px; padding: 0 12px !important; border: 1px solid var(--ght-line) !important; border-radius: 999px !important; background: #fff !important; box-shadow: none !important; color: var(--ght-mute) !important; font: 600 13px var(--ght-f) !important; } body .sky360-reviews-slider .sky-review-like-button:hover, body .sky360-reviews-slider .sky-review-like-button:focus { background: var(--ght-mist) !important; color: var(--ght-ink) !important; } /* Review Us: the outlined pill (one blue button per view), with Google's G drawn — the plugin's Font Awesome brand icon has no font since WoodMart was turned off */ body .sky-review-us-button { display: inline-flex !important; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px !important; border: 1px solid var(--ght-line) !important; border-radius: 999px !important; background: #fff !important; box-shadow: none !important; color: var(--ght-ink) !important; font: 600 16px/1 var(--ght-f) !important; text-transform: none !important; letter-spacing: 0 !important; text-decoration: none !important; } body .sky-review-us-button:hover, body .sky-review-us-button:focus { background: var(--ght-mist) !important; color: var(--ght-ink) !important; } body .sky-review-us-button .sky-button-icon { width: 20px; height: 20px; margin: 0 !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.91c1.7-1.57 2.69-3.88 2.69-6.62z' fill='%234285F4'/%3E%3Cpath d='M9 18c2.43 0 4.47-.8 5.96-2.18l-2.91-2.26c-.81.54-1.84.86-3.05.86-2.34 0-4.33-1.58-5.04-3.71H.96v2.33A9 9 0 0 0 9 18z' fill='%2334A853'/%3E%3Cpath d='M3.96 10.71a5.4 5.4 0 0 1 0-3.42V4.96H.96a9 9 0 0 0 0 8.08l3-2.33z' fill='%23FBBC05'/%3E%3Cpath d='M9 3.58c1.32 0 2.51.45 3.44 1.35l2.58-2.58A8.64 8.64 0 0 0 9 0 9 9 0 0 0 .96 4.96l3 2.33C4.67 5.16 6.66 3.58 9 3.58z' fill='%23EA4335'/%3E%3C/svg%3E") center / 18px no-repeat !important; } body .sky-review-us-button .sky-button-icon > * { display: none !important; } body .sky-review-us-button .sky-button-text, body .sky-review-us-button:hover .sky-button-text { color: var(--ght-ink) !important; font: inherit !important; } /* previous / next: 40px circles with a line border */ body .sky360-reviews-slider .sky-navigation-arrows .swiper-button-prev, body .sky360-reviews-slider .sky-navigation-arrows .swiper-button-next { width: 44px !important; height: 44px !important; border: 1px solid var(--ght-line) !important; border-radius: 50% !important; background: #fff !important; box-shadow: none !important; color: var(--ght-ink) !important; } body .sky360-reviews-slider .sky-navigation-arrows .swiper-button-prev:hover, body .sky360-reviews-slider .sky-navigation-arrows .swiper-button-next:hover { background: var(--ght-mist) !important; } body .sky360-reviews-slider .sky-navigation-arrows .swiper-button-prev::after, body .sky360-reviews-slider .sky-navigation-arrows .swiper-button-next::after { color: var(--ght-ink) !important; font-size: 16px !important; font-weight: 700; } /* ght-minicart */ /* ========================================================================== * GHH Toolkit — the donation basket (SkyDonate Mini Cart) in the GHH design system * (DESIGN-SYSTEM.md → Basket). SkyDonate draws it (#skd-minicart-root, mini-cart.css); * this only restyles it. Rules are `body #skd-minicart-root …` so they win over * SkyDonate's `#skd-minicart-root …` whichever file loads last. * ======================================================================== */ /* (the basket's scroll lock on is in ght-compat.css: it is a fix, not styling, and stays when "Style SkyDonate widgets" is off) */ /* SkyDonate's script sets the accent (its navy) on the root inline: the GHH blue wins */ body #skd-minicart-root { --mc-accent: var(--ght-blue) !important; --mc-radius: var(--ght-r-l) !important; --mc-sp: 1 !important; } /* ── panel ── */ body #skd-minicart-root .skd-mc-backdrop { background: rgba(6, 20, 30, .45); -webkit-backdrop-filter: none; backdrop-filter: none; } body #skd-minicart-root .skd-mc-panel { width: 420px; color: var(--ght-ink); font-family: var(--ght-ui); box-shadow: var(--ght-float); } body #skd-minicart-root .skd-mc-header { gap: 10px; padding: 16px 16px 16px 24px; border-bottom: 1px solid var(--ght-line); } body #skd-minicart-root .skd-mc-title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; } body #skd-minicart-root .skd-mc-count { min-width: 22px; padding: 2px 8px; border-radius: 999px; background: var(--ght-blue); color: #fff; font-size: 13px; font-weight: 600; line-height: 18px; text-align: center; } /* the round close, like every GHH pop-up; its ring only for the keyboard (the basket focuses it on open) */ body #skd-minicart-root .skd-mc-close { width: 40px; height: 40px; border: 1px solid var(--ght-line); border-radius: 50%; background: #fff; color: var(--ght-ink); transition: background-color .2s; } body #skd-minicart-root .skd-mc-close:hover { background: var(--ght-mist); } body #skd-minicart-root :is(button, a):focus { outline: none; } body #skd-minicart-root :is(button, a):focus-visible { outline: 2px solid var(--ght-blue); outline-offset: 2px; } /* ── lines ── */ body #skd-minicart-root .skd-mc-body { padding: 0 24px 16px; } body #skd-minicart-root .skd-mc-line { gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--ght-line); } body #skd-minicart-root .skd-mc-thumb { width: 56px; height: 56px; border-radius: var(--ght-r-m); } /* no photo: a calm tile with the initials, not SkyDonate's navy block. (A photo is the tile's inline background-image; an initials tile's inline background is a gradient — only that one is replaced.) */ body #skd-minicart-root .skd-mc-thumb[style*="gradient"] { background: var(--ght-soft) !important; color: var(--ght-blue-d); font-size: 15px; font-weight: 700; letter-spacing: 0; } body #skd-minicart-root .skd-mc-line-main { gap: 10px; } body #skd-minicart-root .skd-mc-line-title { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ght-ink); } body #skd-minicart-root .skd-mc-remove { width: 32px; height: 32px; border-radius: 50%; color: var(--ght-mute); transition: background-color .2s, color .2s; } body #skd-minicart-root .skd-mc-remove:not(.is-disabled):hover { background: var(--ght-err-soft); color: var(--ght-err); } /* a line still being added (SkyDonate waits for its server key) */ body #skd-minicart-root .skd-mc-remove.is-disabled { opacity: .4; cursor: default; } body #skd-minicart-root .skd-mc-price-amt { font-size: 16px; font-weight: 700; font-variant-numeric: normal; color: var(--ght-ink); } body #skd-minicart-root :is(.skd-mc-line-per, .skd-mc-price-sub) { font-size: 13px; font-weight: 400; color: var(--ght-mute); } /* stepper: a quiet bordered pill */ body #skd-minicart-root .skd-mc-stepper { border: 1px solid var(--ght-line); border-radius: var(--ght-r-s); } body #skd-minicart-root .skd-mc-step { width: 32px; height: 32px; border-radius: var(--ght-r-s); color: var(--ght-ink); font-size: 17px; font-weight: 500; } body #skd-minicart-root .skd-mc-step:not(.is-disabled):hover { background: var(--ght-mist); } body #skd-minicart-root .skd-mc-step.is-disabled { color: #B8C6D0; } body #skd-minicart-root .skd-mc-qty { min-width: 24px; font-size: 15px; font-weight: 600; font-variant-numeric: normal; } /* ── extras and monthly ── */ body #skd-minicart-root .skd-mc-pinned { padding: 0 24px 14px; border-top: 1px solid var(--ght-line); } body #skd-minicart-root .skd-mc-addons { padding-top: 16px; } /* sentence case, not tracked capitals */ body #skd-minicart-root .skd-mc-addons-label { margin-bottom: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ght-ink); } body #skd-minicart-root .skd-mc-addons-row { gap: 8px; } body #skd-minicart-root .skd-mc-addon { min-height: 52px; gap: 2px; padding: 10px 12px; border: 1px solid var(--ght-line); border-radius: var(--ght-r-m); background: #fff; transition: border-color .2s, background-color .2s; } body #skd-minicart-root .skd-mc-addon:hover { border-color: var(--ght-blue); background: var(--ght-soft); } body #skd-minicart-root .skd-mc-addon-title { font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ght-ink); } body #skd-minicart-root .skd-mc-addon-amt { font-size: 13px; font-weight: 600; color: var(--ght-blue-d); } body #skd-minicart-root .skd-mc-monthly { margin-top: 12px; padding: 4px 0; } body #skd-minicart-root .skd-mc-monthly-title { font-size: 15px; font-weight: 600; } body #skd-minicart-root .skd-mc-monthly-sub { font-size: 13px; color: var(--ght-mute); } /* the site's switch (account pages, Gift Aid): light track, grey knob turning blue */ body #skd-minicart-root .skd-mc-switch { width: 40px; height: 22px; border-radius: 999px; background: #E8E8E8; } body #skd-minicart-root .skd-mc-switch.on { background: #BFE3F5; } body #skd-minicart-root .skd-mc-switch-knob { top: 3px; left: 3px; width: 16px; height: 16px; background: #929292; box-shadow: none; transition: left .2s var(--ght-ease), background-color .2s; } body #skd-minicart-root .skd-mc-switch.on .skd-mc-switch-knob { left: 21px; background: var(--ght-blue); } /* ── footer ── */ body #skd-minicart-root .skd-mc-footer { padding: 14px 24px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ght-line); } body #skd-minicart-root .skd-mc-pinned + .skd-mc-footer { border-top: 0; padding-top: 4px; } body #skd-minicart-root .skd-mc-total { align-items: baseline; padding-bottom: 14px; } body #skd-minicart-root .skd-mc-total-label { font-size: 15px; font-weight: 600; } body #skd-minicart-root .skd-mc-total-amt { font-size: 22px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: normal; } body #skd-minicart-root .skd-mc-total-mo { font-size: 14px; font-weight: 500; color: var(--ght-mute); } body #skd-minicart-root .skd-mc-donate { height: 52px; gap: 8px; border-radius: 999px; background: var(--ght-blue); box-shadow: none; font-size: 16px; font-weight: 600; transition: background-color .2s; } body #skd-minicart-root .skd-mc-donate:not(:disabled):hover { background: var(--ght-blue-d); } /* an empty basket has nothing to check out: no dead grey button (the suggestions carry the action) */ body #skd-minicart-root .skd-mc-footer.is-empty .skd-mc-donate:disabled { display: none; } body #skd-minicart-root .skd-mc-addmore { margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--ght-blue-d); } body #skd-minicart-root .skd-mc-addmore:hover { text-decoration: underline; text-underline-offset: 3px; } /* ── empty ── */ body #skd-minicart-root .skd-mc-empty { gap: 20px; padding: 28px 0 8px; } body #skd-minicart-root .skd-mc-empty-icon { width: 64px; height: 64px; background: var(--ght-mist); color: var(--ght-blue-d); } body #skd-minicart-root .skd-mc-empty-title { font-size: 18px; font-weight: 700; color: var(--ght-ink); } body #skd-minicart-root .skd-mc-empty-sub { max-width: 280px; font-size: 15px; color: var(--ght-mute); } body #skd-minicart-root .skd-mc-empty-list { gap: 0; border: 1px solid var(--ght-line); border-radius: var(--ght-r-l); } body #skd-minicart-root .skd-mc-empty-item { gap: 12px; padding: 12px 14px; border: 0; border-radius: 0; } body #skd-minicart-root .skd-mc-empty-item + .skd-mc-empty-item { border-top: 1px solid var(--ght-line); } body #skd-minicart-root .skd-mc-empty-item .skd-mc-thumb { width: 44px; height: 44px; border-radius: var(--ght-r-s); font-size: 13px; } body #skd-minicart-root .skd-mc-empty-item-title { font-size: 15px; font-weight: 600; } body #skd-minicart-root .skd-mc-empty-item-sub { font-size: 13px; color: var(--ght-mute); } body #skd-minicart-root .skd-mc-empty-add { height: 36px; padding: 0 16px; border: 1px solid var(--ght-line); border-radius: 999px; background: #fff; color: var(--ght-ink); font-size: 14px; font-weight: 600; transition: background-color .2s, border-color .2s; } body #skd-minicart-root .skd-mc-empty-add:hover { border-color: var(--ght-blue); background: var(--ght-soft); color: var(--ght-blue-d); } /* ── loading and the failure note ── */ body #skd-minicart-root :is(.skd-mc-skel-box, .skd-mc-skel-bar) { background: linear-gradient(90deg, var(--ght-mist) 25%, #E2EBF0 37%, var(--ght-mist) 63%); background-size: 400% 100%; } body #skd-minicart-root .skd-mc-toast { border-radius: var(--ght-r-m); background: var(--ght-ink); font-family: var(--ght-ui); font-size: 14px; font-weight: 500; } /* ── phones: the whole screen, like the menu (user: "full width" — the bottom sheet left the page showing above it); the footer stays at the bottom and the list scrolls between ── */ @media (max-width: 640px) { /* exactly the menu's panel (header.css .mnav__panel): anchored right, min(420px, 100%) wide — the whole screen on phones up to 420px. SkyDonate's own phone rule set left:0, which pinned the panel to the left with the page showing on its right (user) */ body #skd-minicart-root .skd-mc-panel { top: 0; right: 0; bottom: 0; left: auto; width: min(420px, 100%); max-width: none; height: 100%; max-height: none; border-radius: 0; padding-bottom: 0; box-shadow: -1px 0 0 var(--ght-line); transform: translateX(100%); } body #skd-minicart-root .skd-mc-panel.open { transform: none; } body #skd-minicart-root .skd-mc-grab { display: none; } body #skd-minicart-root .skd-mc-header { min-height: var(--ght-hdr); padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px 18px; } body #skd-minicart-root .skd-mc-title { font-size: 18px; } body #skd-minicart-root .skd-mc-close { width: 40px; height: 40px; } body #skd-minicart-root .skd-mc-body { padding: 0 18px 16px; } body #skd-minicart-root .skd-mc-pinned { padding: 0 18px 12px; } body #skd-minicart-root .skd-mc-footer { padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0px)); } body #skd-minicart-root .skd-mc-thumb { width: 56px; height: 56px; font-size: 15px; } body #skd-minicart-root .skd-mc-line-title { font-size: 15px; } body #skd-minicart-root .skd-mc-remove { width: 36px; height: 36px; } body #skd-minicart-root .skd-mc-step { width: 36px; height: 36px; font-size: 18px; } /* the site's switch, same size on phones */ body #skd-minicart-root .skd-mc-switch { width: 40px; height: 22px; border-radius: 999px; } body #skd-minicart-root .skd-mc-switch-knob { width: 16px; height: 16px; } body #skd-minicart-root .skd-mc-switch.on .skd-mc-switch-knob { left: 21px; } body #skd-minicart-root .skd-mc-donate { height: 52px; } body #skd-minicart-root .skd-mc-empty-add { height: 40px; } } /* ght-zakatcalc */ /* ========================================================================== * GHH Toolkit — SkyDonate's Advanced Zakat Calculator (.skd-zakat-adv) in the GHH design system * (DESIGN-SYSTEM.md), on every page that shows it (/zakat/, /zakat/zakat-calculator/). * * A fixed height on phones and desktop (user): the card never grows or shrinks between steps (the * first step alone jumped 514 → 867px), so the page doesn't move under the donor and Back / Next are * always in the same place. The title and progress stay at the top, the step's own content scrolls * inside the card when it's long (nine asset types on a phone), and the buttons are pinned at the * bottom of it. * * SkyDonate's sheet colours everything through --skd-* variables and guards its controls with * `.skd-zakat-adv .x { … !important }`; GHH's values are its variables, and the few direct rules are * written `body .skd-zakat-adv …` with !important to win. * ======================================================================== */ /* !important: the widget's Elementor style settings set these same variables (post-.css, `.elementor- .elementor-element- .skd-zakat-adv`, SkyDonate's teal) more specifically */ body .skd-zakat-adv { --skd-accent: var(--ght-blue) !important; --skd-accent-dark: var(--ght-blue-d) !important; --skd-accent-text: #fff !important; --skd-text: var(--ght-ink) !important; --skd-muted: var(--ght-mute) !important; --skd-card-bg: #fff !important; --skd-soft-bg: var(--ght-soft) !important; --skd-soft-bg-2: var(--ght-mist) !important; --skd-border: var(--ght-line) !important; --skd-border-soft: var(--ght-line) !important; --skd-cta-bg: var(--ght-blue) !important; --skd-cta-bg-hover: var(--ght-blue-d) !important; --skd-cta-text: #fff !important; --skd-radius: var(--ght-r-l) !important; /* the fixed size, like an app (user: as calculate-ga3.nzf.org.uk): 440px wide, tall enough for most steps, never taller than the screen under the header */ /* 600px (was 720): the first step left ~300px of white under its choices (user: "massive spacing") */ --zc-h: min(600px, calc(100svh - var(--ght-hdr) - 48px)); display: flex; flex-direction: column; width: 100%; height: var(--zc-h); min-height: 500px; max-width: 440px; margin: 0 auto; padding: 0; overflow: hidden; border: 1px solid var(--ght-line); border-radius: var(--ght-r-l); background: #fff; font-family: var(--ght-ui); } /* top: the progress, a thin line along the card's top edge; the widget's own title is left to the section around it (the step's title heads the card, as in an app) */ body .skd-zakat-adv .skd-zakat-adv__hero, body .skd-zakat-adv .skd-zakat-adv__head { display: none; } body .skd-zakat-adv .skd-zakat-adv__progress { flex: none; width: auto; height: 4px; margin: 0; border-radius: 0; background: var(--ght-mist); } body .skd-zakat-adv .skd-zakat-adv__progress-bar { border-radius: 0 999px 999px 0; } /* middle: the step, scrolling inside the card when it's long */ body .skd-zakat-adv .skd-zakat-adv__stage { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 22px 24px 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } body .skd-zakat-adv .skd-zakat-adv__stage > * { flex-shrink: 0; } /* the step's name heads the card, centred */ body .skd-zakat-adv .skd-zakat-adv__step-title { margin: 0 0 16px !important; padding-bottom: 16px; border-bottom: 1px solid var(--ght-line); font: 700 22px/1.3 var(--ght-ui) !important; letter-spacing: -.01em; text-align: center; color: var(--ght-ink) !important; } body .skd-zakat-adv .skd-zakat-adv__step-body { margin: 0 0 18px !important; font: 400 15px/1.55 var(--ght-ui) !important; color: var(--ght-ink-2) !important; } /* bottom: Back / Next pinned to the card's foot while the step scrolls above it */ /* (margin-top: auto puts them at the foot of a short step too) */ body .skd-zakat-adv .skd-zakat-adv__nav { position: sticky; bottom: 0; z-index: 2; gap: 10px; margin: auto -24px 0; padding: 14px 24px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ght-line); background: #fff; } /* the way forward is the wide button (Next / Start / See my Zakat); Back is a compact outline beside it */ body .skd-zakat-adv .skd-zakat-adv__nav .skd-zakat-adv__nav-spacer { display: none; } body .skd-zakat-adv .skd-zakat-adv__nav .skd-zakat-adv__btn:not(.skd-zakat-adv__btn--ghost) { flex: 1; } /* buttons: the site's pills */ body .skd-zakat-adv .skd-zakat-adv__btn { min-height: 52px; padding: 0 24px !important; font: 600 16px/1 var(--ght-ui) !important; } body .skd-zakat-adv .skd-zakat-adv__btn--ghost { border-color: var(--ght-line) !important; } body .skd-zakat-adv .skd-zakat-adv__btn--ghost:hover, body .skd-zakat-adv .skd-zakat-adv__btn--ghost:focus { border-color: var(--ght-line) !important; background: var(--ght-mist) !important; } body .skd-zakat-adv .skd-zakat-adv__btn:focus:not(:focus-visible) { outline: none; } body .skd-zakat-adv .skd-zakat-adv__btn:focus-visible, body .skd-zakat-adv .skd-zakat-adv__cta:focus-visible { outline: 2px solid var(--ght-blue) !important; outline-offset: 2px; } /* choices: bordered rows, the chosen one light blue with a blue ring */ body .skd-zakat-adv .skd-zakat-adv__checklist { gap: 8px; } body .skd-zakat-adv .skd-zakat-adv__check, body .skd-zakat-adv .skd-zakat-adv__toggle, body .skd-zakat-adv .skd-zakat-adv__roundup { min-height: 52px; padding: 12px 16px !important; border-radius: var(--ght-r-m) !important; } body .skd-zakat-adv :is(.skd-zakat-adv__check--selected, .skd-zakat-adv__radio--selected, .skd-zakat-adv__roundup--selected) { box-shadow: inset 0 0 0 .5px var(--ght-blue) !important; } body .skd-zakat-adv .skd-zakat-adv__check-label, body .skd-zakat-adv .skd-zakat-adv__toggle-label { font: 500 15px/1.4 var(--ght-ui) !important; } body .skd-zakat-adv .skd-zakat-adv__radio { min-height: 48px; padding: 0 18px !important; font: 500 15px var(--ght-ui) !important; } body .skd-zakat-adv :is(.skd-zakat-adv__check-input, .skd-zakat-adv__toggle-input, .skd-zakat-adv__roundup-input) { accent-color: var(--ght-blue) !important; } /* amounts */ body .skd-zakat-adv .skd-zakat-adv__field-label, body .skd-zakat-adv .skd-zakat-adv__row-static-label { font: 600 14px/1.4 var(--ght-ui) !important; color: var(--ght-ink) !important; } body .skd-zakat-adv .skd-zakat-adv__amount { min-height: 48px; border-radius: var(--ght-r-s); } body .skd-zakat-adv .skd-zakat-adv__amount:focus-within { border-color: var(--ght-blue); box-shadow: none; } body .skd-zakat-adv .skd-zakat-adv__amount-prefix { background: var(--ght-page) !important; font: 600 16px var(--ght-ui) !important; } body .skd-zakat-adv .skd-zakat-adv__amount-input { font: 400 16px var(--ght-ui) !important; } body .skd-zakat-adv .skd-zakat-adv__row-remove { border-radius: var(--ght-r-s) !important; } /* a row with no remove button: the field takes the whole width (it stopped 8px short) */ body .skd-zakat-adv .skd-zakat-adv__row:not(:has(.skd-zakat-adv__row-remove)) { grid-template-columns: minmax(0, 1fr); } /* "+ add another": a quiet bordered row, not dashed */ body .skd-zakat-adv .skd-zakat-adv__add-row { min-height: 48px; border: 1px solid var(--ght-line) !important; border-radius: var(--ght-r-s) !important; color: var(--ght-blue-d) !important; font: 600 15px var(--ght-ui) !important; } /* today's nisab: calm cards, no tracked capitals */ body .skd-zakat-adv .skd-zakat-adv__nisab-card { padding: 14px 16px; border-radius: var(--ght-r-m); background: #fff; text-align: left; } body .skd-zakat-adv .skd-zakat-adv__nisab-card-title { margin-bottom: 4px; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ght-ink); } body .skd-zakat-adv .skd-zakat-adv__nisab-card-amount { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--ght-ink); } body .skd-zakat-adv .skd-zakat-adv__nisab-card-weight { font-size: 13px; } /* running total, summary and result */ body .skd-zakat-adv .skd-zakat-adv__tally { padding: 14px 16px; border: 1px solid var(--ght-line); border-radius: var(--ght-r-m); background: var(--ght-page); font-weight: 600; } body .skd-zakat-adv .skd-zakat-adv__tally-amount { font-weight: 700; color: var(--ght-ink); } body .skd-zakat-adv .skd-zakat-adv__summary { padding: 6px 18px; border-radius: var(--ght-r-m); } body .skd-zakat-adv .skd-zakat-adv__summary-row { padding: 12px 0; font-size: 15px; } body .skd-zakat-adv .skd-zakat-adv__summary-row--total { font-size: 18px; } body .skd-zakat-adv .skd-zakat-adv__summary-row--total .skd-zakat-adv__summary-amount { color: var(--ght-ink); font-size: 22px; letter-spacing: -.01em; } body .skd-zakat-adv .skd-zakat-adv__not-eligible { border-radius: var(--ght-r-m); font-size: 15px; } body .skd-zakat-adv .skd-zakat-adv__roundup-amount { color: var(--ght-ink) !important; font-size: 16px !important; } /* the gift button: the site's one blue action, full width */ body .skd-zakat-adv .skd-zakat-adv__give { padding-top: 4px; } body .skd-zakat-adv .skd-zakat-adv__cta { width: 100% !important; min-height: 52px; padding: 0 28px !important; font: 600 17px/1 var(--ght-ui) !important; } /* ── the calculator page (/zakat/zakat-calculator/, its band is .ght-zc-band): a working page, so tighter than the site's 120px sections (user: "massive spacing, I don't like it") ── */ .e-con.ght-zc-band { --padding-top: clamp(32px, 4vw, 56px); --padding-bottom: clamp(40px, 4.5vw, 64px); } body:has(.ght-zc-band) .ght.phero--plain { padding-bottom: clamp(32px, 4vw, 56px); } body:has(.ght-zc-band) .ght.sec { padding: clamp(48px, 5.5vw, 80px) 0; } /* ── the Zakat page's calculator section (.ght-zc-split, build/ght-build-zakat.php): heading and today's nisab beside the card on desktop, instead of a lone 440px card in a wide empty section ── */ .e-con.ght-zc-split .ght.gtt { margin-bottom: 20px; } /* today's nisab ([ghh_nisab], mu-plugin with its own inline styles): two calm figures */ .e-con.ght-zc-split .ghh-nisab { max-width: 520px; margin: 0; padding: 0; border: 0; background: none; text-align: left; font-family: var(--ght-ui); } .e-con.ght-zc-split .ghh-nisab__label { margin: 0 0 10px; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ght-ink); } .e-con.ght-zc-split .ghh-nisab__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; justify-content: stretch; } .e-con.ght-zc-split .ghh-nisab__item { gap: 2px; padding: 16px 18px; border: 1px solid var(--ght-line); border-radius: var(--ght-r-l); background: #fff; } .e-con.ght-zc-split .ghh-nisab__val { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--ght-ink); } .e-con.ght-zc-split .ghh-nisab__sub { font-size: 14px; color: var(--ght-mute); } .e-con.ght-zc-split .ghh-nisab__note { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--ght-mute); } .e-con.ght-zc-split .elementor-widget-shortcode { margin-bottom: 24px; } /* stacked (tablets, phones): the card uses the section's width rather than a narrow column in the middle */ @media (max-width: 959px) { .e-con.ght-zc-split .skd-zakat-adv { max-width: none; } } @media (min-width: 960px) { .e-con.ght-zc-split > .e-con-inner { display: grid; grid-template-columns: minmax(0, 1fr) 440px; grid-template-rows: 1fr auto auto 1fr; column-gap: clamp(40px, 6vw, 104px); align-items: start; } .e-con.ght-zc-split > .e-con-inner > .elementor-widget-ght_title { grid-column: 1; grid-row: 2; } .e-con.ght-zc-split > .e-con-inner > .elementor-widget-shortcode { grid-column: 1; grid-row: 3; margin-bottom: 0; } .e-con.ght-zc-split > .e-con-inner > .elementor-widget-skyweb_donation_zakat_advanced { grid-column: 2; grid-row: 1 / -1; } /* the heading's own wrap is the column here, not a second page width */ .e-con.ght-zc-split .ght.gtt .wrap { padding: 0; } } @media (max-width: 760px) { /* phones: the card fills the screen under the header (an app screen), inside the page margins */ body .skd-zakat-adv { --zc-h: calc(100svh - var(--ght-hdr) - 24px); min-height: 480px; max-width: none; border-left: 1px solid var(--ght-line); border-right: 1px solid var(--ght-line); } body .skd-zakat-adv .skd-zakat-adv__stage { padding: 18px 18px 0; } body .skd-zakat-adv .skd-zakat-adv__step-title { padding-bottom: 14px; font-size: 20px !important; } body .skd-zakat-adv .skd-zakat-adv__nav { margin: auto -18px 0; padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)); } body .skd-zakat-adv .skd-zakat-adv__nisab-panel { grid-template-columns: 1fr 1fr; gap: 8px; } } /* ght-auth */ /* GHH — donor sign-in card (GHT_Auth) and its pop-up. * * The Shopify-style card built for DÉCAAR, in the GHH look: logo, one step at a * time, floating labels, 5px buttons in the GHH blue, Schibsted Grotesk. * Self-contained (it also appears on the checkout page, outside the toolkit's * widgets); every control rule is written `.ght-auth .class` so theme * button/input resets never win. */ .ght-auth, .ght-auth-modal { --ga-ink: #0B2638; --ga-blue: #1B9DD9; --ga-blue-d: #137CB0; --ga-mute: #5B7182; --ga-line: #D3DDE3; --ga-mist: #EEF4F7; --ga-err: #b3261e; --ga-ok: #1d6b3a; --ga-r: 5px; --ga-font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; } .ght-auth, .ght-auth *, .ght-auth *::before, .ght-auth *::after { box-sizing: border-box; } /* a site-wide rule capitalises button words ("Forgot Password?"): sentence case here */ .ght-auth button, .ght-auth a, .ght-auth label { text-transform: none; } .ght-auth { position: relative; width: 100%; max-width: 440px; margin: 0 auto; padding: 38px 36px 30px; border-radius: 14px; background: #fff; color: var(--ga-ink); font: 400 16px/1.5 var(--ga-font); -webkit-font-smoothing: antialiased; text-align: left; } .ght-auth--page { box-shadow: 0 30px 60px -40px rgba(11, 38, 56, .4), 0 0 0 1px var(--ga-line); } .ght-auth .ght-auth__sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; border: 0; } .ght-auth .ght-auth__view[hidden] { display: none; } .ght-auth .ght-auth__view { animation: ght-auth-in .28s cubic-bezier(.16, 1, .3, 1); } @keyframes ght-auth-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .ght-auth .ght-auth__h { margin: 0 0 6px; padding: 0; font: 800 28px/1.15 var(--ga-font); letter-spacing: -.025em; color: var(--ga-ink); text-transform: none; } .ght-auth .ght-auth__h:focus { outline: none; } .ght-auth .ght-auth__sub, .ght-auth .ght-auth__who { margin: 0 0 20px; font-size: 15px; line-height: 1.5; color: var(--ga-mute); overflow-wrap: anywhere; } .ght-auth .ght-auth__sub strong, .ght-auth .ght-auth__who span { color: var(--ga-ink); font-weight: 600; } .ght-auth .ght-auth__form { display: grid; gap: 12px; margin: 0; } /* fields with floating labels */ .ght-auth .ght-auth__f { position: relative; margin: 0; } .ght-auth .ght-auth__two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ght-auth input.ght-auth__in { display: block; width: 100%; height: 52px; margin: 0; padding: 15px 13px; border: 1px solid var(--ga-line); border-radius: var(--ga-r); background: #fff; color: var(--ga-ink); font: 400 16px/1.3 var(--ga-font); box-shadow: none; outline: none; transition: padding .15s, border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; } .ght-auth input.ght-auth__in::placeholder { color: #7d8a93; opacity: 1; } .ght-auth input.ght-auth__in:not(:placeholder-shown) { padding: 23px 13px 7px; } .ght-auth input.ght-auth__in:focus { border-color: var(--ga-ink); box-shadow: 0 0 0 1px var(--ga-ink); } .ght-auth input.ght-auth__in[aria-invalid="true"] { border-color: var(--ga-err); box-shadow: 0 0 0 1px var(--ga-err); } .ght-auth .ght-auth__f > label { position: absolute; top: 7px; left: 14px; right: 44px; margin: 0; overflow: hidden; font: 400 12px/1.3 var(--ga-font); color: var(--ga-mute); white-space: nowrap; text-overflow: ellipsis; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; } .ght-auth .ght-auth__f:has(input:not(:placeholder-shown)) > label { opacity: 1; transform: none; } .ght-auth .ght-auth__f--pass input.ght-auth__in { padding-right: 50px; } .ght-auth button.ght-auth__eye { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ga-mute); box-shadow: none; cursor: pointer; } .ght-auth button.ght-auth__eye:hover, .ght-auth button.ght-auth__eye:focus { background: var(--ga-mist); color: var(--ga-ink); border: 0; } .ght-auth button.ght-auth__eye[aria-pressed="true"] { color: var(--ga-ink); } .ght-auth svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* buttons */ .ght-auth button.ght-auth__btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; min-height: 52px; margin: 4px 0 0; padding: 0 20px; border: 1px solid var(--ga-blue); border-radius: var(--ga-r); background: var(--ga-blue); color: #fff; font: 700 16px/1 var(--ga-font); letter-spacing: 0; text-transform: none; text-decoration: none; box-shadow: none; cursor: pointer; white-space: normal; transition: background-color .2s, border-color .2s, color .2s; } .ght-auth button.ght-auth__btn:hover, .ght-auth button.ght-auth__btn:focus { border-color: var(--ga-blue-d); background: var(--ga-blue-d); color: #fff; } .ght-auth button.ght-auth__btn:focus-visible, .ght-auth button.ght-auth__link:focus-visible, .ght-auth button.ght-auth__eye:focus-visible { outline: 2px solid var(--ga-ink); outline-offset: 2px; } .ght-auth button.ght-auth__btn--line { border-color: var(--ga-line); background: #fff; color: var(--ga-ink); font-weight: 600; } .ght-auth button.ght-auth__btn--line:hover, .ght-auth button.ght-auth__btn--line:focus { border-color: var(--ga-ink); background: #fff; color: var(--ga-ink); } .ght-auth button.ght-auth__btn[disabled], .ght-auth button.ght-auth__btn.is-busy { opacity: .7; cursor: default; } .ght-auth .ght-auth__spin { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ght-auth-spin .7s linear infinite; } .ght-auth .is-busy .ght-auth__spin { display: inline-block; } @keyframes ght-auth-spin { to { transform: rotate(360deg); } } .ght-auth button.ght-auth__link { display: inline; min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--ga-ink); font-family: var(--ga-font); font-size: inherit; font-weight: 600; line-height: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; box-shadow: none; cursor: pointer; } .ght-auth button.ght-auth__link:hover, .ght-auth button.ght-auth__link:focus { border: 0; background: none; color: var(--ga-blue-d); text-decoration-thickness: 2px; } .ght-auth button.ght-auth__link[disabled] { color: var(--ga-mute); text-decoration: none; cursor: default; } .ght-auth .ght-auth__alt { margin: 18px 0 0; font-size: 14.5px; color: var(--ga-mute); text-align: center; } .ght-auth .ght-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14.5px; } .ght-auth .ght-auth__check { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: 14.5px; font-weight: 400; color: var(--ga-ink); cursor: pointer; } .ght-auth .ght-auth__check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ga-ink); } .ght-auth .ght-auth__or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; font-size: 13px; color: var(--ga-mute); } .ght-auth .ght-auth__or::before, .ght-auth .ght-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--ga-line); } .ght-auth .ght-auth__small { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--ga-mute); } .ght-auth .ght-auth__small a { color: var(--ga-ink); } .ght-auth .ght-auth__err { margin: 0; padding: 10px 12px; border-radius: var(--ga-r); background: #fbeceb; color: var(--ga-err); font-size: 14px; line-height: 1.45; } .ght-auth .ght-auth__err[hidden] { display: none; } .ght-auth .ght-auth__ok { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--ga-r); background: var(--ga-mist); color: var(--ga-ok); font-size: 14.5px; line-height: 1.5; } .ght-auth .ght-auth__ok[hidden] { display: none; } /* staging only (email is blocked there): the two-step code shown in the pop-up */ .ght-auth .ght-auth__stg { margin: 0 0 14px; padding: 10px 14px; border: 1px dashed #C9C9C9; border-radius: var(--ga-r); font-size: 14px; line-height: 1.5; color: var(--ga-ink); } .ght-auth .ght-auth__stg strong { font-size: 17px; letter-spacing: .18em; font-variant-numeric: tabular-nums; } .ght-auth .ght-auth__stg[hidden] { display: none; } .ght-auth [data-ght-auth-form="twostep"] .ght-auth__check { margin-top: 2px; } .ght-auth .ght-auth__ghost { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .ght-auth .ght-auth__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* password strength */ .ght-auth .ght-auth__meter { display: grid; gap: 6px; margin-top: -4px; font-size: 13px; color: var(--ga-mute); } .ght-auth .ght-auth__bar { display: block; height: 4px; overflow: hidden; border-radius: 2px; background: var(--ga-mist); } .ght-auth .ght-auth__bar i { display: block; width: 0; height: 100%; border-radius: 2px; background: var(--ga-err); transition: width .25s, background-color .25s; } .ght-auth .ght-auth__meter[data-level="1"] i { width: 25%; } .ght-auth .ght-auth__meter[data-level="2"] i { width: 55%; background: #b7791f; } .ght-auth .ght-auth__meter[data-level="3"] i { width: 80%; background: var(--ga-blue); } .ght-auth .ght-auth__meter[data-level="4"] i { width: 100%; background: var(--ga-ok); } /* 6-digit code */ .ght-auth .ght-auth__code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; } .ght-auth input.ght-auth__digit { width: 100%; height: 56px; margin: 0; padding: 0; border: 1px solid var(--ga-line); border-radius: var(--ga-r); background: #fff; color: var(--ga-ink); font: 700 22px/1 var(--ga-font); text-align: center; box-shadow: none; outline: none; -webkit-appearance: none; appearance: none; } .ght-auth input.ght-auth__digit:focus { border-color: var(--ga-ink); box-shadow: 0 0 0 1px var(--ga-ink); } .ght-auth .ght-auth__code[aria-invalid="true"] input.ght-auth__digit { border-color: var(--ga-err); } /* done */ .ght-auth .ght-auth__view--done { padding: 12px 0 6px; text-align: center; } .ght-auth .ght-auth__tick { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; background: var(--ga-mist); color: var(--ga-ok); } .ght-auth .ght-auth__tick svg { width: 26px; height: 26px; stroke-width: 2; } /* the account page when signed out: the card centred on the mist ground */ .ght-auth-page { display: flex; justify-content: center; padding: clamp(32px, 6vw, 72px) 16px; background: var(--ga-mist, #EEF4F7); } .woocommerce:has(> .ght-auth-page) { max-width: none; } /* ---------------------------------------------------------------- pop-up */ .ght-auth-modal { position: fixed; inset: 0; z-index: 1000002; display: flex; align-items: center; justify-content: center; padding: 24px; } .ght-auth-modal[hidden] { display: none; } .ght-auth-modal__scrim { position: absolute; inset: 0; background: rgba(6, 20, 30, .55); animation: ght-auth-fade .2s ease; } .ght-auth-modal__card { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; border-radius: 14px; background: #fff; box-shadow: 0 40px 80px -30px rgba(6, 20, 30, .6); animation: ght-auth-pop .28s cubic-bezier(.16, 1, .3, 1); } .ght-auth-modal .ght-auth { box-shadow: none; } .ght-auth-modal button.ght-auth-modal__x { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ga-ink); box-shadow: none; cursor: pointer; } .ght-auth-modal button.ght-auth-modal__x:hover, .ght-auth-modal button.ght-auth-modal__x:focus { border: 0; background: var(--ga-mist); color: var(--ga-ink); } .ght-auth-modal button.ght-auth-modal__x:focus-visible { outline: 2px solid var(--ga-ink); outline-offset: 2px; } .ght-auth-modal svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } @keyframes ght-auth-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes ght-auth-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes ght-auth-up { from { transform: translateY(100%); } to { transform: none; } } html.ght-auth-lock, html.ght-auth-lock body { overflow: hidden; } html.ght-auth-lock .sky-whatsapp-widget { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* phones: a bottom sheet that can grow to full height */ @media (max-width: 600px) { .ght-auth { padding: 32px 22px 24px; } .ght-auth .ght-auth__h { font-size: 25px; } .ght-auth .ght-auth__code { gap: 6px; } .ght-auth input.ght-auth__digit { height: 52px; font-size: 20px; } .ght-auth-modal { align-items: flex-end; padding: 0; } .ght-auth-modal__card { max-width: none; max-height: 94vh; max-height: 94dvh; border-radius: 16px 16px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); animation: ght-auth-up .32s cubic-bezier(.16, 1, .3, 1); } .ght-auth-modal__card::before { content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--ga-line); } } @media (max-width: 360px) { .ght-auth .ght-auth__two { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .ght-auth .ght-auth__view, .ght-auth-modal__scrim, .ght-auth-modal__card { animation: none; } }