/* ========================================================================= ERC / Nahr Al Hayat — design tokens, fonts, RTL base Source of truth: Figma "Du - Red Crescent" (get_variable_defs) Loaded globally via globalCSS client extension. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Noto+Sans+Arabic:wght@400;500;700&display=swap'); @import url('erc-theme-ataya.css'); :root { /* Brand / red (Red Crescent) */ --erc-red-500: #e20612; /* primary CTA, links */ --erc-red-400: #f35757; /* gradient highlight */ --erc-brand-header: #bf0d0d; /* identity bar / header brand */ --erc-indigo: #3c3f90; /* Nahr Al Hayat logo indigo */ --erc-green-500: #16a34a; /* Ataya "Donate now" CTA */ --erc-green-600: #15803d; /* Ataya CTA hover */ --erc-green-hero: #3f9678; /* Ataya About Us hero background */ /* Text */ --erc-text-heading: #020617; --erc-text-body: #334155; /* descriptions */ --erc-text-caption: #475569; --erc-text-on-color: #ffffff; --erc-text-link: #e20612; /* Surfaces / strokes */ --erc-surface-base: #ffffff; --erc-surface-low: #f1f5f9; /* tinted sections, menu bar */ --erc-stroke: #cbd5e1; /* Shape */ --erc-radius-pill: 24px; /* buttons / cards / tags */ --erc-radius-card: 20px; --erc-radius-round: 100px; /* Type families (Latin default; Arabic falls back gracefully) */ --erc-font-heading: 'Inter', 'Noto Sans Arabic', system-ui, sans-serif; --erc-font-body: 'Roboto', 'Noto Sans Arabic', system-ui, sans-serif; /* Brand gradient used on filled CTAs (Donate now) */ --erc-cta-gradient: radial-gradient(circle at 50% 120%, var(--erc-red-400) 0%, #eb2f35 25%, #e61a23 38%, var(--erc-red-500) 50%); /* Layout */ --erc-content-max: 1440px; --erc-gutter: 80px; } /* ============================================================================ Nahr Al Hayat brand recolour — RED -> INDIGO/BLUE (Figma "Du - Red Crescent", home node 4977-302972). SCOPED to nahr pages via body:has(.erc-header) so the shared erc-theme keeps serving the original palette to other microsites. NOTE: ataya ALSO carries .erc-header (its root is class="erc-header ataya-header"), so we must EXCLUDE it via :not(:has(.ataya-header)) — otherwise ataya's shared-token elements (member-form Submit, links, focus) would recolour too. Ataya's own identity bar uses --erc-indigo (untouched) regardless. Every nahr fragment consumes these brand tokens, so this single block recolours CTAs (+hover), links, pagination, focus rings, the Make-a-Gift progress bar and the identity bar at once. globalCSS => deploys LIVE, no site re-init. --brand-color-1 is overridden here too (beats the Style Book by specificity: body:has() = 0,1,1 > :root = 0,1,0) so token-fallback consumers such as report-item recolour live as well. New brand: Indigo #3c3f90 (primary CTA / links / accents) Blue #4cb9db (secondary accent / identity bar) */ /* Per-microsite brand palette. CONVENTION: each microsite header root carries `erc-header -header` (ataya=.ataya-header, nahr=.nahr-header). Add ONE block per site, keyed on its own class — no shared default, so a NEW microsite never inherits another's colours; it simply gets its own block (+ its own identity-bar rule in its header fragment). Nahr Al Hayat = indigo/blue: (2nd selector is transitional — keeps nahr recoloured until its header re-init picks up the .nahr-header class; drop it once every site has its modifier class.) */ /* The second selector is the same palette reached another way: Liferay's Cookie Configuration dialog is a separate document in an iframe with no site header, so `body:has(...)` cannot match there. `erc-analytics` stamps the site key on that document's `` (see `markSite`), which lets ONE definition serve both the page and the dialog. ★ Scoped to `.portlet-cookies-banner-configuration` and NOT to bare `html[data-erc-site=...]`. The marker is stamped on every page of the site INCLUDING Site Administration (its path is /group//~/control_panel/..., which `siteKey()` matches), and these blocks redefine `--brand-color-1` - a Liferay Style Book token - along with the CTA palette. On bare `html` that repaints Clay's primary colour throughout the admin UI, which nothing here wants and which `body:has(.nahr-header)` never could. */ html[data-erc-site="nahr-al-hayat"] .portlet-cookies-banner-configuration, body:has(.nahr-header), body:has(.erc-header):not(:has(.ataya-header)):not(:has(.nahr-header)):not(:has(.fatima-header)) { --erc-red-500: #3c3f90; /* primary CTA / links / focus -> Nahr indigo */ --erc-red-400: #585ba7; /* gradient highlight -> light indigo */ --erc-brand-header: #4cb9db; /* top identity bar -> Nahr blue */ --erc-text-link: #3c3f90; /* links, pagination hover -> Nahr indigo */ --erc-blue: #4cb9db; /* secondary brand accent */ --brand-color-1: #3c3f90; /* Classic "Brand Color 1" (report-item hover…) */ --erc-cta-gradient: radial-gradient(circle at 50% 120%, #585ba7 0%, #4d51a5 25%, #43469a 38%, #3c3f90 50%); /* Figma keeps the primary-button hover/active/focus red even on Nahr's indigo theme (idle state stays indigo) — see erc-btn--primary interactive rules. */ --erc-btn-primary-hover-bg: #e20612; } /* Fatima (Sheikha Fatima Fund for Women Refugee) brand palette — cream/gold, per Figma "Du - Red Crescent" node 5286:210186 (header) & 5548:12438 (hero). Scoped to fatima pages via body:has(.fatima-header), same convention as ataya/nahr above, so other microsites keep their own tokens untouched. The marker selector reaches the consent dialog, whose own document has no header - see the note on the nahr block. Without it Fatima's page would show a gold Accept button and its dialog base-red toggles. */ html[data-erc-site="fatima"] .portlet-cookies-banner-configuration, body:has(.fatima-header) { --erc-red-500: #d7b642; /* primary CTA / links / focus -> Fatima gold */ --erc-red-400: #e6ce78; /* gradient highlight -> light gold */ --erc-brand-header: #f7f3e4; /* top identity bar -> Fatima cream */ --erc-text-link: #d7b642; --erc-cta-gradient: radial-gradient(circle at 50% 120%, #e6ce78 0%, #ddc35a 25%, #dabb4c 38%, #d7b642 50%); /* Classic theme's #wrapper (main.css) reads background-color from var(--body-bg, #fff) -- overriding the variable itself (rather than fighting #wrapper's rule with our own selector/!important) means Classic's own CSS renders the fallback colour with no specificity war. --body-bg only feeds background-color though (Classic has no background-image variable), so the gradient itself still needs one explicit background-image rule below. */ --body-bg: #0b2b76; } body:has(.fatima-header) #wrapper { background-image: radial-gradient(101.75% 61.7% at 50% 50%, #0b2b76 0%, #000f33 100%); } /* Arabic / RTL: prefer the Arabic family, mirror automatically via dir=rtl */ [lang="ar"], [dir="rtl"] { --erc-font-heading: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif; --erc-font-body: 'Noto Sans Arabic', 'Roboto', system-ui, sans-serif; } /* Ataya brand typeface (Brando Arabic) — scoped to ataya pages only via body:has(.ataya-header), same convention as the Nahr brand recolour above. Declared AFTER [lang="ar"]/[dir="rtl"] so it wins on Arabic ataya pages too (equal specificity, later source order); other microsites are untouched and keep Inter/Roboto/Noto Sans Arabic. Font files + @font-face live in erc-theme-ataya.css. */ /* Scoped to the dialog for the marker, whole body for the header - see the note on the nahr block above: on bare `html` this would push Brando Arabic onto the Site Administration chrome too. */ html[data-erc-site="ataya"] .portlet-cookies-banner-configuration, body:has(.ataya-header) { --erc-font-heading: 'Brando Arabic', 'Noto Sans Arabic', 'Inter', system-ui, sans-serif; --erc-font-body: 'Brando Arabic', 'Noto Sans Arabic', 'Roboto', system-ui, sans-serif; /* EERC-1000 — Ataya's thank-you screen (shared erc-payment fragment, step 3). The design (Figma node 4964-285990, token Ataya/Green #329d72) wants a GREEN badge and two GREEN buttons; the fragment ships nahr's blue badge and the base red CTA, because one shared component cannot know whose page it is on. Ring = tick lightened over white at 27%, the ratio the original blue pair used (#4CB9DB -> #CFEAF2), so the badge keeps the weight it was drawn with. */ --erc-paysuccess-ring: #c8e5d9; --erc-paysuccess-tick: #329d72; } /* Scoped to the thank-you buttons, NOT to .erc-btn--primary site-wide: ataya's other primary CTAs keep red / the indigo .ataya-btn--primary per their own designs. .erc-btn--primary reads its background from these three custom properties, and custom properties inherit - so overriding them on the button carries :hover, :active and :focus-visible along with no duplicated rules. Yes, `--erc-red-500` is being set to a green: that token is simply the name .erc-btn--primary reads its background from. ★ These rules live HERE, in erc-theme.css, and NOT in erc-theme-ataya.css next to the rest of the ataya CSS - on purpose. erc-theme.css is served content-hashed (erc-theme..css), so editing it changes the URL and every browser picks the change up immediately. erc-theme-ataya.css is pulled in by @import under a FIXED url and is served with an ETag but no Cache-Control, so browsers heuristically reuse their cached copy: the first cut of this fix went there and simply did not appear for anyone who had already loaded the page - blue badge, red buttons, as if nothing had been deployed. Anything a user must SEE change belongs in the hashed file; erc-theme-ataya.css is for things that are added rather than changed (@font-face, the font files themselves). */ body:has(.ataya-header) .erc-paysuccess__btn { --erc-cta-gradient: none; --erc-red-500: #329d72; --erc-btn-primary-hover-bg: #329d72; } /* EERC-1164 — Ataya /become-a-member: the form block sat flush against the footer (gap measured at exactly 0px) and against the intro Section above it. The page definition puts an `ataya-become-member-form-section` class on that Section but nothing ever styled it, so it had no vertical padding at all. 28px/56px is the same rhythm the other last-Section-before-footer blocks use (.ataya-gallery-collection / .ataya-years-collection in erc-theme-ataya.css). ★ Lives HERE rather than in erc-theme-ataya.css with the rest of the ataya CSS, for the reason spelled out in the block above: this is a change a user must SEE, and the @import'ed ataya file is served under a fixed URL with no Cache-Control, so already-cached browsers would keep the old spacing and the fix would look like it never deployed. */ body:has(.ataya-header) .ataya-become-member-form-section { padding-block: 28px 56px; } @media (max-width: 768px) { body:has(.ataya-header) .ataya-become-member-form-section { padding-block: 24px 32px; } } /* Shared building blocks consumed by ERC fragments ----------------------- */ h1, h2 { text-wrap: balance; } .erc-container { width: 100%; max-width: var(--erc-content-max); margin-inline: auto; padding-inline: var(--erc-gutter); } /* Responsive side gutter. The desktop gutter (80px) is far too wide on phones — e.g. on a 390px screen it leaves only ~230px of content, which is why the /apply form (max-width:100%) was squeezed to ~230px regardless of its own media queries: the PARENT .erc-container constrained it. Shrinking the token here fixes every .erc-container-based page at once (apply form, about, partners, section intros...). Only reduces padding, so it can never introduce horizontal scrolling. Desktop (>=901px) keeps the original 80px. */ @media (max-width: 1024px) { :root { --erc-gutter: 24px; } } @media (max-width: 600px) { :root { --erc-gutter: 20px; } } /* ---- Medium nav (768–1364px): shrink the pill bar to fit one row, no hamburger ---- The full 8-item pill bar + logos + tools only fits one row from ~1366px up at full size (measured: wraps at 1280, clean single row at 1440). Rather than pushing the hamburger down across the whole tablet range (which hid the nav behind a tap target on iPad-sized screens), shrink logo size, pill padding and font size in this band so the same one-row layout keeps fitting down to 768px. The hamburger only appears below that, at true phone widths (<=767px). */ @media (max-width: 1364px) and (min-width: 768px) { .erc-header__primary { padding-block: 10px; gap: 12px; } .erc-header__logos { gap: 10px; } .erc-header__logo { height: clamp(48px, 5vw, 72px) !important; } .erc-header__emblem { height: clamp(52px, 5.6vw, 80px) !important; } /* Let the nav pills claim the row's free space instead of sitting at their natural width — keeps the utility icons pinned on the same row instead of being pushed onto a second line as the pill bar's own width tightens. */ .erc-header__nav-widget { flex: 1; } .erc-header__nav-widget .nav-link { padding-inline: 12px; font-size: 14px; } .erc-header__nav-widget .navbar-nav { gap: 2px; } .erc-header__tools { gap: 8px; } } /* ---- Mobile navigation (collapse the nav behind the hamburger, <=767px) ---- Declared globally here (not the fragment) so it deploys WITHOUT a site re-init. !important on the show/hide toggles guarantees these beat the fragment's own rules regardless of stylesheet load order. */ @media (max-width: 767px) { .erc-header__primary { padding-block: 10px; justify-content: flex-start; gap: 12px; } /* Keep ALL brand logos visible at every width (scaled down) — override the fragment's <=900 display:none so the full lock-up (Nahr + Red Crescent + accreditation + UAE emblem) stays in the bar; the hamburger is pushed to the far right. */ .erc-header__logos { gap: 10px; } .erc-header__logos > .erc-header__logo { display: block !important; } /* Fluid logo height: 34px on phones, grows with the viewport, capped near the 80px desktop size. clamp() keeps marks legible without ever wrapping the row. */ .erc-header__logo { height: clamp(34px, 5.2vw, 72px) !important; } .erc-header__emblem { display: block !important; height: clamp(38px, 5.8vw, 80px) !important; } .erc-header__burger { display: inline-flex !important; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; flex: none; margin-inline-start: auto; border: 0; background: transparent; border-radius: 12px; color: var(--erc-text-heading); cursor: pointer; } .erc-header__burger:hover { background: rgba(2, 6, 23, .04); } .erc-header__burger-bar { display: block; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; } .erc-header.is-nav-open .erc-header__burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .erc-header.is-nav-open .erc-header__burger-bar:nth-child(2) { opacity: 0; } .erc-header.is-nav-open .erc-header__burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .erc-header__menu { display: none !important; } .erc-header.is-nav-open .erc-header__menu { display: block !important; } .erc-header__nav { flex-direction: column !important; align-items: stretch; gap: 8px; padding-block: 8px 16px; } .erc-header__nav-widget { padding-block: 0; } .erc-header__nav-widget .navbar-nav { flex-direction: column !important; flex-wrap: nowrap; align-items: stretch; gap: 2px; } .erc-header__nav-widget .nav-item { display: flex !important; flex-direction: column !important; align-items: stretch !important; } .erc-header__nav-widget .nav-link { width: 100%; min-height: 48px; } .erc-header__nav-widget .dropdown-menu { display: block !important; position: static !important; float: none; min-width: 0; margin: 0; padding: 2px 0 2px 16px; border: 0; box-shadow: none; background: transparent; } .erc-header__nav-widget .dropdown-menu .nav-link, .erc-header__nav-widget .dropdown-menu a { min-height: 44px; } .erc-header__tools { justify-content: flex-start; gap: 12px; padding-inline: 4px; } /* .erc-header__nav stretches its column children (align-items: stretch above) so the language pill fills the row; pin it to its natural width instead. */ .erc-lang { align-self: flex-start; } } /* Mobile tap targets: guarantee >=44x44px touch area on footer links (email, phone, legal, social). Global so it applies wherever the footer renders. Nav pills get their 48px height from the header fragment's mobile styles; carousel arrows are already 48px. */ @media (max-width: 600px) { .erc-footer__contact-link, .erc-footer__phone-num, .erc-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; } .erc-footer__social-btn { min-width: 44px; min-height: 44px; } } /* Pill button system (matches Figma button component) */ .erc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 8px 24px; border-radius: var(--erc-radius-round); font-family: var(--erc-font-body); font-weight: 500; font-size: 16px; line-height: 24px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: filter .15s ease, background-color .15s ease; } .erc-btn:hover, .erc-btn:focus, .erc-btn:active { text-decoration: none; } .erc-btn--primary { background-image: var(--erc-cta-gradient); background-color: var(--erc-red-500); color: var(--erc-text-on-color); } .erc-btn--primary:hover { background-image: none; background-color: var(--erc-btn-primary-hover-bg, var(--erc-red-500)); color: var(--erc-text-on-color); filter: brightness(1.05); box-shadow: 0px 6px 8px rgba(0, 0, 0, .08), 0px 3px 3px rgba(0, 0, 0, .12), 0px 9px 14px rgba(0, 0, 0, .05); } .erc-btn--primary:active { background-image: none; background-color: var(--erc-btn-primary-hover-bg, var(--erc-red-500)); color: var(--erc-text-on-color); filter: brightness(.92); box-shadow: none; } .erc-btn--primary:focus-visible { background-image: none; background-color: var(--erc-btn-primary-hover-bg, var(--erc-red-500)); color: var(--erc-text-on-color); border-color: var(--erc-stroke-focused, #f8a0a0); box-shadow: 0 0 0 2px rgba(226, 6, 18, .2); outline: none; } .erc-btn--primary:disabled, .erc-btn--primary.disabled { background-image: none; background-color: var(--erc-surface-disabled, #cbd5e1); color: var(--erc-text-disabled, #94a3b8); opacity: 1; cursor: default; } .erc-btn--ghost { background: var(--erc-surface-base); border-color: var(--erc-stroke); color: var(--erc-text-body); } .erc-btn--ghost:hover { background: var(--erc-surface-low-hover, #e2e8f0); } .erc-btn--ghost:active { background: var(--erc-stroke, #cbd5e1); } .erc-btn--ghost:focus-visible { background: var(--erc-surface-low-hover, #e2e8f0); border-color: var(--erc-stroke-focused, #f8a0a0); box-shadow: 0 0 0 2px rgba(226, 6, 18, .2); outline: none; } .erc-btn--ghost:disabled, .erc-btn--ghost.disabled { background: var(--erc-surface-disabled, #cbd5e1); border-color: transparent; color: var(--erc-text-disabled, #94a3b8); opacity: 1; cursor: default; } .erc-btn svg { width: 20px; height: 20px; flex: none; } /* RTL: flip directional icons (arrows) */ [dir="rtl"] .erc-icon--flip { transform: scaleX(-1); } /* The microsite provides its own header/footer via the master page, so hide the Classic theme's default banner/footer — but ONLY on pages that render our own header (i.e. the microsite, via the master page). Scoping with :has(.erc-header) keeps the default Liferay site's header/footer intact (login, navigation, etc.). erc-theme is company-scoped, so this selector is what limits it per-site. */ body:has(.erc-header) #banner, body:has(.erc-header) #footer { display: none !important; } /* Sticky footer: on short microsite pages, keep our footer pinned to the bottom of the viewport. The Classic theme's #wrapper is a 100vh flex column and #content (.flex-fill) fills it; we make #content's content grow so the master-page footer (rendered after the DropZone) is pushed down. */ body:has(.erc-header) #content { display: flex; flex-direction: column; } body:has(.erc-header) #content > div { flex: 1 0 auto; display: flex; flex-direction: column; } body:has(.erc-header) #main-content { flex: 1 0 auto; } /* About Us web content (rendered via Journal Content widget + DDM template). Liferay strips the template's inline