/* local-overrides.css -- our changes on top of the mirrored Squarespace CSS. * * Kept in ONE file linked from every page so the rules live together and can * be re-applied in one step after build_aws_mirror.py regenerates the mirror. * Everything here is a deliberate departure from the original site; none of it * is repairing a mirroring fault. * * Measured at a 1042px content width before these rules: * * services, donate 992px content (25px gutters) * index, our-mission 907px (68px) * team, stories 752px (145px) * assist-request 513px left-aligned, 504px of dead space * on the right */ /* ---- 1. one content width everywhere ----------------------------------- * 873px is index/our-mission's layout width -- the middle of the range, and * already the look on the two most-visited pages. `width` rather than * `max-width` because the narrow pages need widening, which a max-width * cannot do. max-width:100% keeps it from overflowing on small screens. */ /* The width has to be set on .content, the PARENT of .sqs-layout. Setting it * on .sqs-layout alone does nothing on the narrow pages: max-width:100% * clamps it to whatever .content already is, so team/stories/assist-request * stayed at their authored width while the wide pages shrank correctly. * * !important throughout because Squarespace's own rules are more specific; * without it these declarations are simply ignored. */ main .content-wrapper > .content { width: 873px !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } main .content-wrapper .sqs-layout { width: 100% !important; max-width: 100% !important; } /* ---- 2. one logo size everywhere --------------------------------------- * The logo is sized by whatever column holds it, so it rendered 154px on * team, 193px on index and 214px on services. Fixing the figure's width is * not enough on its own: Squarespace reserves the image's height with an * inline padding-bottom in PIXELS, so changing the width without that would * stretch the logo. Restating it as a percentage keeps the 239x217 aspect * ratio (217/239 = 90.8%) at any width. * * :has() scopes this to the logo -- the Qur'an calligraphy images have their * own aspect ratios and must keep them. */ main figure.sqs-block-image-figure:has(img[data-src*="logo4"]), main figure.sqs-block-image-figure:has(img[src*="logo4"]) { width: 193px !important; max-width: 100% !important; } main figure.sqs-block-image-figure:has(img[data-src*="logo4"]) .sqs-image-shape-container-element, main figure.sqs-block-image-figure:has(img[src*="logo4"]) .sqs-image-shape-container-element { padding-bottom: 90.8% !important; } /* ---- 2b. logo added to assist-request.html and stories.html ------------ * Those two pages had no logo. The block was copied from team.html, but it * sits in a full-width column there rather than the narrow col-3 the other * pages use, so it centred instead of sitting at the content's left edge * (offset 357px against 17px everywhere else). Align it left to match. */ #block-logo-assistreq .image-block-outer-wrapper, #block-logo-stories .image-block-outer-wrapper { text-align: left !important; } #block-logo-assistreq figure.sqs-block-image-figure, #block-logo-stories figure.sqs-block-image-figure { margin-left: 0 !important; margin-right: auto !important; } /* No rule is needed for the "Success Stories" heading. It was an

at * 18.5px with an inline text-align:center -- body-text size, and off-centre * once the text moved beside the logo. It is now an

in the markup with * no inline alignment, so it inherits the theme's page-title styling (~44px, * left) exactly as "Team" and "Application for Assistance" do, and stays * right at every breakpoint rather than being pinned to a fixed px size. */ /* ---- 2d. numbered lists: assist-request.html and stories.html ---------- * Both were paragraphs each starting "1." plus literal  s, held apart * by white-space:pre-wrap. Now a real
    , so the browser draws the * numbers and aligns wrapped lines under the text instead of returning them * to the far left. * * assist-request: the five application notes (the class is named for them). * stories: the nine assistance cases -- same class, so the two lists that * face each other across the site are indented and spaced identically. * The stories list also had its numbering split across six

    s at * arbitrary points (items 1-2 in one, 5-6 in another, the rest alone) with * stray leading  s; the

      makes the run continuous and self-numbering. */ .application-notes { margin: 1.1em 0 1.6em; /* Just wide enough to hold the numbers, so each line STARTS on the same left edge as the paragraph below the list. The markers sit in this padding; the hanging indent on wrapped lines comes from
        itself. */ padding-left: 0.95em; } .application-notes li { margin-bottom: 0.7em; padding-left: 0.35em; line-height: 1.6; } /* Numbers stay at the body weight -- no ::marker font-weight -- so they sit quietly beside the text rather than competing with it. */ /* ---- 2e. stories.html: the Arabic greeting ----------------------------- * Poppins carries no Arabic glyphs, so the browser falls back to a system * Arabic face whose glyphs render optically smaller at the same point size -- * which is why the greeting looked shrunken next to the English around it. * Sizing it up restores the balance. line-height goes up with it because * Arabic ascenders and descenders need more room than the Latin default. */ .arabic-greeting { font-size: 1.5em; /* 1.5 rather than 2: still room for the ascenders and descenders, without the extra 12px of half-leading sitting above the glyphs and widening the gap under the heading. */ line-height: 1.5; margin-top: 0; } /* The gap above the greeting was 79px: 17px of block padding either side of the heading/text boundary, plus an EMPTY

        that the Squarespace editor left at the top of the text block -- a blank line the author once typed, worth 29px of line-box plus a 16px bottom margin. Deleted from stories.html, which leaves the 34px the two blocks' own padding is meant to give. Nothing here can reach it: it is a real element with real height, so margin-top on the greeting cannot pull it back. Watch for it on any other page that reads loose under its heading. */ /* ---- 3. index.html: space between the Donate button and the footer ------ * Was 216px: a 68px spacer block stacked on ~106px of wrapper padding and * ~42px of section padding. The live Squarespace site does the same. */ #block-61828e61e804dc70a00a { display: none; } section[data-section-id="5f1dfd93f6d4d94f955c26e2"] > .content-wrapper { padding-bottom: 40px !important; } /* ---- 4. stories.html: 412px of empty trailing sections ------------------ * Two sections that render nothing -- an empty blog collection and a leftover * empty layout section. Both are empty on the live site too. If Success * Stories posts are ever added to that collection, drop the first selector. */ section[data-section-id="5f1e04fcb4238228f9e362d6"], /* empty blog grid */ section[data-section-id="5fe767ba88c3a261bd0c8ff1"] { /* empty last section */ display: none; } section[data-section-id="5f1e04fcb4238228f9e362d4"] > .content-wrapper { /* Top: stories sat 35px below the header where assist-request sits 74px. The difference is this wrapper's top padding -- 34.9px against 87.2px. Expressed as a percentage (of the section's width, which is what padding percentages resolve against) so it scales with the viewport the way Squarespace's own value does; a fixed 87px would stay 87px on a phone. */ padding-top: 8.37% !important; padding-bottom: 64px !important; }