/** * wyg-css-homepage * * WHAT: The homepage's own residue -- the hero scrim and the measures and text * shadows over it, the mission quote band's mono kicker and citation, the * section label treatment, the two multi-color card borders in the mission and * explore rows, and the explore card hover. Everything else on the page is set * through Elementor: every container's boxed width, padding, flex direction, * gap, wrap and per-breakpoint widths; the hero's background image and its * position; every color, bound to a Global Color; and every type size, bound to * a typography global. The publication cards in the essays row are a separate, * shared component -- see wyg-css-publication-card. * * WHY: architecture.md section 8 -- custom CSS lives in Fluent Snippets, one * snippet per concern, never in the child theme. This is the component snippet * for one page. * * REJECTED: expressing the hero scrim as an Elementor background overlay. The * overlay control takes one gradient with two stops; the approved scrim is two * stacked linear gradients, of four and five stops. Checked against the control * before writing this, the same way wyg-css-masthead's scrim was. * * REJECTED: drawing the mission Forum card's border and the explore cards' * border through Elementor's border control. That control carries ONE color for * all four sides. The Forum card is 1px Rule on three sides with a 4px Olive * Green top; each explore card is 1px Rule with a 4px Light Blue top that turns * Dark Red on hover. Neither is expressible. Where a border IS one color -- the * essays band's 1px Rule top and bottom, the plate's 6px Tan bottom -- it is set * in Elementor and does not appear in this file, deliberately: a value set in * both places is the specificity fight described in page-build-conventions.md * section 5a. * * REJECTED: a min-height of min(76vh, 720px) on the hero, which is what the * mockup uses. Elementor's Min Height control takes one unit, so the built hero * is 720px on desktop and 560px on mobile. The two agree on any viewport taller * than about 947px and the hero is shorter than the design below that. Recorded * rather than worked around, because a CSS min-height would make this file a * second owner of a property Elementor is already setting. * * GOTCHAS: every selector doubles its own class -- post-.css ties any * single-class heading rule at 0,2,0 and loads after the snippet stylesheets. * See page-build-conventions.md section 5a. * * The hero scrim's horizontal layer is NOT mirrored for RTL. It darkens the * left edge, where the English copy sits; under Hebrew and Arabic the copy moves * to the right and the scrim does not follow, because CSS gradients have no * logical direction keyword and a mirrored scrim is a design decision rather * than a mechanical flip. Reported to Todd with screenshots, not invented here. */ /* -------------------------------------------------------------------------- 1. Hero -------------------------------------------------------------------------- */ /* The hero`s 1px Rule bottom edge is on the container`s own Border control, not here: it is one color on one side, which the control expresses exactly, and a border set in CSS is invisible in the editor -- section 5-i. Only position and overflow stay, because the scrim below depends on both and neither is a control (the Position control offers absolute and fixed, not relative). */ .wyg-hero { position: relative; overflow: hidden; } .wyg-hero.wyg-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 90deg, rgba( 24, 36, 44, .70 ) 0%, rgba( 24, 36, 44, .60 ) 42%, rgba( 24, 36, 44, .20 ) 70%, rgba( 24, 36, 44, 0 ) 100% ), linear-gradient( 180deg, rgba( 38, 54, 63, .14 ) 0%, rgba( 38, 54, 63, .20 ) 35%, rgba( 38, 54, 63, .32 ) 62%, rgba( 38, 54, 63, .46 ) 85%, rgba( 38, 54, 63, .54 ) 100% ); } /* The doubled class is load-bearing. Elementor ships `.e-con::before { content: var( --background-overlay ) }` at 0,1,0 and loads after the snippet stylesheets; on a container with no Elementor overlay the variable is unset, `content` resolves to none, and the pseudo-element is never generated -- so a correct gradient paints onto a box that does not exist. That is exactly how the masthead scrim shipped invisible on 2026-08-19. Verify by reading the computed `content`, not by finding this rule. */ .wyg-hero__inner { position: relative; z-index: 1; } .wyg-hero__title.wyg-hero__title .elementor-heading-title { margin: 0; max-inline-size: 16ch; text-shadow: 0 2px 18px rgba( 20, 28, 33, .45 ); } .wyg-hero__tagline.wyg-hero__tagline .elementor-heading-title { font-size: var( --e-global-typography-e3bb4445-font-size ); margin: 0; max-inline-size: 29ch; font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; text-shadow: 0 2px 18px rgba( 20, 28, 33, .45 ); } /* 29ch, not the 16ch above it: the mockup gives both lines one max-width in ch of the h1's own size, so the tagline -- set smaller -- wraps at the same physical width but after more characters. 29ch of the tagline's size is that same width. Expressed in ch rather than px so it tracks the type. */ .wyg-hero__lede.wyg-hero__lede { font-size: var( --e-global-typography-95a228b0-font-size ); line-height: 1.5; text-shadow: 0 2px 18px rgba( 20, 28, 33, .45 ); } /* 🚨 THE WIDGET MEASURES CARRY .elementor-widget FOR SPECIFICITY, AND THIS INSTALL HAS NO .elementor-widget-container TO HANG THEM ON. Elementor`s Optimized Markup is on here -- verified 2026-08-19, two such elements exist on the whole homepage and neither is a text widget -- so a widget`s content sits directly inside .elementor-element and the usual `> .elementor-widget-container` hook matches nothing. Elementor then sets `max-width: 100%` on every direct child of a flex container at 0,2,0, from a stylesheet enqueued after the snippets, so a doubled component class ties and loses on source order. Adding Elementor answers that with `.e-con.e-con > .e-con-inner > .elementor-widget, .elementor.elementor .e-con > .elementor-widget { max-width: 100% }` -- 0,4,0, with the class doubled on its own side for exactly this reason -- from custom-frontend.min.css, which loads after the snippets. Measured 2026-08-19: a 0,3,0 component rule lost to it and the lede stayed full width. These two rules mirror the shape of Elementor`s own selector to reach 0,5,0 rather than repeating a class four times, so it is obvious what they are answering. 🚨 That raises the practical ceiling recorded in page-build-conventions.md section 5a: the per-element rules top out at 0,6,0, but Elementor`s own FRAMEWORK stylesheet also carries deliberately doubled classes at 0,4,0 on layout properties. Count the rule that is actually winning before choosing a specificity; do not assume 0,2,0. The same thing is true of wyg-css-global`s .wyg-measure helper, whose second selector targets .elementor-widget-container and therefore matches nothing on this install, while its first is 0,1,0 and loses. That file is frozen, so the homepage sets its own measures here and the helper is reported rather than edited. */ .elementor.elementor .e-con .elementor-widget.wyg-hero__lede { max-inline-size: 52ch; } /* The .wyg-prose 60ch measure moved to wyg-css-shared (60) with the rest of the section-head component. The hero lede measure above stays: it is this page only. */ .wyg-hero__lede.wyg-hero__lede p { margin: 0; } /* The hero button's arrow points down, not along the text direction: it scrolls the reader to the section below. It therefore needs no RTL variant, unlike every other arrow on this page. Drawn rather than typed so it is not part of the button's accessible name. */ /* 🚨 align-self, not line-height, is what centres a button arrow. `.elementor-button-content-wrapper` is `display: flex` with `align-items: normal`, so a ::after is a FLEX ITEM and gets stretched to the wrapper`s full 24px cross size while its own line box is only 15.75px tall -- the glyph then renders at the top of that box, which is the raised arrow Todd caught on the All research button. Measured 2026-08-19: wrapper 24px, ::after line-height 15.75px, align-self stretch. `vertical-align` does nothing here, because a flex item is not inline. */ .wyg-hero__cta.wyg-hero__cta .elementor-button-content-wrapper::after { content: "\2193"; align-self: center; margin-inline-start: 0.5rem; font-size: 1.05em; line-height: 1; } /* -------------------------------------------------------------------------- 2. Mission quote band -------------------------------------------------------------------------- */ .wyg-quote__kicker.wyg-quote__kicker .elementor-heading-title { /* HO-40: scaled up in Hebrew/Arabic -- see wyg-css-global section 5g. */ font-size: calc( var( --e-global-typography-1c3ea07a-font-size ) * var( --wyg-label-size-scale, 1 ) ); margin: 0; font-family: var( --wyg-mono ); /* HO-39: see wyg-css-global section 5e for the token. */ font-weight: var( --wyg-label-weight, 600 ); text-transform: uppercase; letter-spacing: 0.12em; } .wyg-quote__body.wyg-quote__body { font-size: var( --e-global-typography-e3bb4445-font-size ); font-weight: 600; line-height: 1.42; letter-spacing: -0.012em; } .wyg-quote__body.wyg-quote__body blockquote, .wyg-quote__body.wyg-quote__body p { margin: 0; } .wyg-quote__cite.wyg-quote__cite .elementor-heading-title, .wyg-quote__more.wyg-quote__more .elementor-heading-title { margin: 0; font-family: var( --wyg-mono ); letter-spacing: 0.03em; } /* The citation is WYG / Small and the link below it WYG / Micro, so the shared rule above cannot carry the size for both. */ .wyg-quote__cite.wyg-quote__cite .elementor-heading-title { /* HO-40: scaled up in Hebrew/Arabic -- see wyg-css-global section 5g. */ font-size: calc( var( --e-global-typography-fd54d4a4-font-size ) * var( --wyg-label-size-scale, 1 ) ); /* HO-39: the byline. wyg-quote__more (the link right below it) is deliberately untouched -- it is a CTA, not a byline, and out of scope. */ font-weight: var( --wyg-label-weight, 600 ); } .wyg-quote__more.wyg-quote__more .elementor-heading-title { font-size: var( --e-global-typography-1c3ea07a-font-size ); } .wyg-quote__more.wyg-quote__more a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .wyg-quote__more.wyg-quote__more .elementor-heading-title::after { content: "\2192"; margin-inline-start: 0.4rem; display: inline-block; text-decoration: none; } [dir="rtl"] .wyg-quote__more.wyg-quote__more .elementor-heading-title::after { content: "\2190"; } /* -------------------------------------------------------------------------- 3. Section labels, titles and prose -- MOVED OUT, HO-49, 23 August 2026 `.wyg-sec-label`, `.wyg-sec-title` and `.wyg-prose` now live in `wyg-css-shared` (60), which loads site-wide at priority 5. They were never this page's alone: Research & Publications, About Us, Programs & Workshops and News & Media all use them, and because this file carried no load condition they were reaching those pages from here. `wyg-css-about` styled the same two classes at the same 0,3,0 and won on file order, which is how About's spacing came to govern this page. DO NOT RESTORE THEM HERE. A homepage-only variation goes at 0,4,0 under a `.wyg-mission` / `.wyg-essays` / `.wyg-explore` scope; a change everyone should get goes in `wyg-css-shared`. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 4. Mission: the photograph plate and the Forum card -------------------------------------------------------------------------- */ /* The photograph plate moved to wyg-css-shared section 4 on 2026-08-24 (HO-57): the collection landing page needs it and this file is page-scoped. The class name here is unchanged and is an alias there. */ .wyg-mission__forum.wyg-mission__forum { border: 1px solid var( --e-global-color-3e660e4c ); border-block-start: 4px solid var( --e-global-color-3c1895e9 ); } .wyg-mission__forum-title.wyg-mission__forum-title .elementor-heading-title { font-size: var( --e-global-typography-95a228b0-font-size ); margin: 0; font-weight: 800; letter-spacing: -0.01em; } /* -------------------------------------------------------------------------- 5. Explore cards -------------------------------------------------------------------------- */ .wyg-ex-card.wyg-ex-card { border: 1px solid var( --e-global-color-3e660e4c ); border-block-start: 4px solid var( --e-global-color-secondary ); transition: transform 0.22s ease, box-shadow 0.22s ease, border-block-start-color 0.22s ease; } .wyg-ex-card.wyg-ex-card:hover, .wyg-ex-card.wyg-ex-card:focus-within { transform: translateY( -3px ); box-shadow: 0 12px 30px rgba( 38, 54, 63, .10 ); border-block-start-color: var( --e-global-color-accent ); } .wyg-ex-card__h.wyg-ex-card__h .elementor-heading-title { font-size: var( --e-global-typography-95a228b0-font-size ); margin: 0; font-weight: 800; line-height: 1.2; letter-spacing: -0.012em; } .wyg-ex-card__go.wyg-ex-card__go .elementor-heading-title { font-size: var( --e-global-typography-1c3ea07a-font-size ); margin: 0; font-family: var( --wyg-mono ); text-transform: uppercase; letter-spacing: 0.08em; } .wyg-ex-card__go.wyg-ex-card__go .elementor-heading-title::after { content: "\2192"; margin-inline-start: 0.4rem; } [dir="rtl"] .wyg-ex-card__go.wyg-ex-card__go .elementor-heading-title::after { content: "\2190"; } /* -------------------------------------------------------------------------- 6. Essays section chrome The cards themselves are in wyg-css-publication-card. Only the section's own head measure, the list's top rule and the CTA arrow are here. -------------------------------------------------------------------------- */ .wyg-essays__head.wyg-essays__head { max-inline-size: 60ch; } .wyg-essays__list.wyg-essays__list { border-block-start: 1px solid var( --e-global-color-3e660e4c ); } .wyg-essays__cta.wyg-essays__cta .elementor-button-content-wrapper::after { content: "\2192"; align-self: center; margin-inline-start: 0.5rem; font-size: 1.05em; line-height: 1; } [dir="rtl"] .wyg-essays__cta.wyg-essays__cta .elementor-button-content-wrapper::after { content: "\2190"; } /* -------------------------------------------------------------------------- 7. Why no widget on this page binds a size-only typography global -------------------------------------------------------------------------- */ /* Measured on this install 2026-08-19. Binding a typography global on a widget emits a per-element rule at 0,5,0 -- `.elementor-116 .elementor-element.elementor-element- .elementor-heading-title` -- and that rule carries EVERY typography property, not only the ones the global actually defines. WYG / Micro, Small, Lede and Quote deliberately carry a family and a size and nothing else, so the emitted rule still contains `letter-spacing: var( --e-global-typography--letter-spacing )` against an undefined variable. That declaration is invalid at computed-value time, which resolves it to unset -- and it beats a doubled-class component rule in this file all the same, because it won the cascade before it resolved. Symptom: the mission kicker rendered in Nunito Sans with letter-spacing normal, and the hero tagline at line-height 1.6 instead of 1.25, while both rules sat correctly in this stylesheet. Nothing looked wrong in the file. So every widget whose treatment comes from this file has NO typography global bound, and the size is read from the token`s own CSS variable instead. The kit redefines those variables inside its tablet and mobile media queries, so the size stays responsive and stays a token rather than becoming a literal. Bindings are kept only where the global carries the whole treatment: WYG / Display on the hero title, WYG / Heading on the section titles, WYG / Body on the prose. Those need nothing from this file but a margin and a measure. This extends page-build-conventions.md section 5a: the specificity problem is not only the per-post stylesheet, it is the binding itself. */ /* -------------------------------------------------------------------------- Hero scrim, RTL wyg-hero__scrim-rtl (HO-38, 2026-08-19) -------------------------------------------------------------------------- The hero copy is bottom-LEFT in English and bottom-RIGHT in Hebrew and Arabic, because the container mirrors. The scrim above does NOT mirror with it: a CSS gradient angle is a physical value and there is no logical equivalent of `90deg`, so /he/ and /ar/ shipped with the tagline and lede sitting over the BRIGHT part of the photograph while the darkened edge sat empty on the far side. Measured and screenshotted on /ar/ 2026-08-19; it is worse in Arabic, whose strokes are thinner than the Hebrew. Todd's rule, 2026-08-19: everything that is LTR in English flips to RTL in Hebrew and Arabic, the scrim included. Only the 90deg layer is reversed, to 270deg with the same stops in the same order. The 180deg layer is vertical and is untouched -- flipping it would move the darkening to the top, where nothing sits. THE PHOTOGRAPH ITSELF IS NEVER MIRRORED. The scrim flips; the image under it does not. A `scaleX(-1)` here would reverse the Jerusalem skyline, the signage in frame and the architecture. That exception is recorded in the HO-38 build log alongside the other three. Specificity: the base rule is `.wyg-hero.wyg-hero::before` at 0,2,0; the attribute selector takes this to 0,3,0, so it wins on specificity rather than on the order the snippets happen to load in. */ [dir="rtl"] .wyg-hero.wyg-hero::before { background: linear-gradient( 270deg, rgba( 24, 36, 44, .70 ) 0%, rgba( 24, 36, 44, .60 ) 42%, rgba( 24, 36, 44, .20 ) 70%, rgba( 24, 36, 44, 0 ) 100% ), linear-gradient( 180deg, rgba( 38, 54, 63, .14 ) 0%, rgba( 38, 54, 63, .20 ) 35%, rgba( 38, 54, 63, .32 ) 62%, rgba( 38, 54, 63, .46 ) 85%, rgba( 38, 54, 63, .54 ) 100% ); } /* -------------------------------------------------------------------------- HO-40: the mission divider, dir-aware without an Elementor write -------------------------------------------------------------------------- */ /* Todd, 2026-08-19: "HR under the section title needs to move to the right" in Hebrew/Arabic. The Divider widget's own Alignment control only offers left/center/right -- no logical start/end -- and emits physical CSS: `.elementor- .elementor-element-a204d18 .elementor-divider-separator { margin: 0 auto; margin-left: 0 }`. Measured 2026-08-19: the control's documented default is an EMPTY string, not "left" -- Elementor only prints a control's CSS when the stored value differs from that default, so clearing the setting doesn't fall back to a logical start, it falls back to no override at all, which leaves the separator centered by the bare `margin: 0 auto` on the base selector. Neither "right" nor "cleared" gets there through the control itself. Overriding the physical margins with logical ones here gets the same result in every language from one rule, with no per-document Elementor write and no WPML translation-job revert risk (page-build-conventions.md section 8a, 11b-i: a translation job rebuilds a translated document's structure from the English original and silently reverts widget settings that differ from it -- a rule in this file carries no such risk). In English, margin-inline-end resolves to margin-right -- the same visual result as the control's current "left" setting. Under Hebrew and Arabic's dir="rtl", it resolves to margin-left instead, moving the rule to the right without a second, direction-specific rule. */ .wyg-quote__rule.wyg-quote__rule.wyg-quote__rule.wyg-quote__rule .elementor-divider-separator { /* Elementor's own .elementor-widget-divider .elementor-divider-separator rule pins `direction: ltr` on this element unconditionally (0,2,0, sheet-wide, not per-post) -- measured 2026-08-19: a logical property resolves against an element's own computed direction, not the page's, so margin-inline-end alone silently stayed pinned to margin-right in Hebrew and Arabic despite html[dir="rtl"]. Restoring direction: inherit here is what makes the logical margin below actually flip. */ direction: inherit; margin: 0; margin-inline-end: auto; } /* -------------------------------------------------------------------------- The shared publication card carries more than this page shows Template 370 is shared with Research & Publications, which added a season and project meta line and a PDF link to it. The approved homepage design has neither: its essays band shows one feature card whose job is the title, the author, the themes and the abstract. Hidden here rather than removed from the template, because the elements are correct where they came from -- Todd's call, 2026-08-20: a shared component should be able to show and hide per location. Scoped to this page's own grid class so Research & Publications is untouched. -------------------------------------------------------------------------- */ .wyg-essays__featuregrid .wyg-essay-under__meta, .wyg-essays__featuregrid .wyg-essay-under__pdfwrap { display: none; } /* -------------------------------------------------------------------------- Hero wordmark The organization's name in the hero is the logo's own lettering, not type. The shortcode [wyg_hero_wordmark] (snippet wyg-hero-wordmark) emits a real

of plain text, visually hidden by the theme's .screen-reader-text, plus the artwork as an aria-hidden inline . This sizes and colors that svg. HO-84. The Arabic is Aldhabi, which is Microsoft's and may not be served as a web font; the Hebrew is a modified Stam Sefarad. Outlines are the only form of this lettering the site may serve, so do not "fix" this back into a font. -------------------------------------------------------------------------- */ .wyg-wordmark { /* * One cap unit drives all three languages, and it is the Latin cap height * as drawn in the logo. Each wordmark's height is expressed as its own * multiple of that unit, so the three keep exactly the relative sizes they * have in the lockup -- the roughly 80% treatment on the Arabic included. * Do NOT equalize the three heights; the difference is the design. * * The clamp is tuned so the English wordmark clears the hero's mobile * padding at 375px (cap 1.45rem gives a 323px wide mark inside 335px of * content box) and reads at display scale on a 1440 desktop. */ --wyg-wordmark-cap: clamp( 1.45rem, 3.1vw, 2.9rem ); /* * Optical scale, applied on top of the geometric ratios below. The lockup's * own proportions are the default (1) and should stay the default -- this * exists only for the Latin, which at 13.9:1 is so much wider than the two * RTL marks that matching it cap-for-cap made it dominate the hero. Todd's * call, 27 August. It is deliberately a separate multiplier so that the * measured viewBox ratios stay readable as measurements. */ --wyg-wordmark-scale: 1; } .wyg-wordmark--en { --wyg-wordmark-scale: 0.85; } .wyg-wordmark__art { display: block; block-size: auto; color: var( --e-global-color-a5f61243 ); /* The same shadow the hero's tagline, lede and title carried as text. */ filter: drop-shadow( 0 2px 18px rgba( 20, 28, 33, .45 ) ); } /* * Widths as multiples of the cap unit, measured from the logo's own viewBox: * Latin 945.98, Hebrew 396.18, Arabic 376.35 units wide, against a Latin cap * of 67.91 units. Width rather than height is the driver because it is the one * axis that can overflow: at 375px the English mark is 323px wide inside a * 320px content box, which a height-driven rule does not catch. Height follows * from the viewBox aspect ratio. Change these only if the client re-exports the logo at different * proportions -- the Hebrew spelling decision is still open with Gabi. */ .wyg-wordmark--en .wyg-wordmark__art { inline-size: min( calc( var( --wyg-wordmark-cap ) * var( --wyg-wordmark-scale ) * 13.93 ), 100% ); } .wyg-wordmark--he .wyg-wordmark__art { inline-size: min( calc( var( --wyg-wordmark-cap ) * var( --wyg-wordmark-scale ) * 5.834 ), 100% ); } .wyg-wordmark--ar .wyg-wordmark__art { inline-size: min( calc( var( --wyg-wordmark-cap ) * var( --wyg-wordmark-scale ) * 5.542 ), 100% ); } /* * Space below the wordmark, before the tagline. * * It is padding on the wordmark itself, not margin on the Elementor widget, * for two reasons. Elementor's `.elementor-widget:not(:last-child)` rule is * 0,2,0 and quietly beat a single-class margin here -- the gap read as zero * while the CSS looked correct. And a margin on the inner div would collapse * through the widget container, which has neither padding nor border. * * It is set per language because each wordmark carries a different amount of * its own descender inside the artwork: the Latin is all caps and sits on its * baseline, while the Hebrew's final kaf and the Arabic's ya tail hang well * below theirs. Measured from the artwork, the Hebrew's baseline sits at 64% * of its height and the Arabic's at 54%, so their descenders are 36% and 46% * of what the browser measures as the element. * * These three values are eye-set at 1440, not derived. The first attempt * derived them -- it equalized the gap from the artwork's INK BOTTOM to the * tagline, which put the same air below a hairline descender tip as below a * full-height cap, and both RTL marks read as over-spaced. Descenders are * meant to hang into the space, the way they do in the lockup itself. If these * need retuning, retune them by looking, and change one language at a time. */ .wyg-wordmark--en { padding-block-end: calc( var( --wyg-wordmark-cap ) * 0.25 ); } .wyg-wordmark--he { padding-block-end: calc( var( --wyg-wordmark-cap ) * 0.62 ); } .wyg-wordmark--ar { padding-block-end: calc( var( --wyg-wordmark-cap ) * 0.55 ); } /* * The hero slot. The old text H1 carried its own bottom margin through * Elementor; the HTML widget that replaced it has none, so the rhythm below * the wordmark is set here. */ .wyg-hero__wordmark { /* * The hero inner is a column flex container and this widget is a flex item * with flex: 0 0 auto, so it shrinks to fit its content. An inline * with no width attribute reports a 300px default intrinsic width, which * made the 100% cap inside resolve against 300px instead of the container * -- the English mark froze at 300px at every breakpoint. Spanning the * widget gives the percentage something real to resolve against. */ inline-size: 100%; margin-block-end: 0.75rem; } /* * Only renders if an svg file goes missing. A homepage without an H1 is the * one outcome this component may not produce, so the fallback is visible text. */ .wyg-wordmark__fallback { margin: 0 0 0.5rem; color: var( --e-global-color-a5f61243 ); text-shadow: 0 2px 18px rgba( 20, 28, 33, .45 ); }