/* * Shareek landing — Figma "Design - Shareek Landing DGA" (Z5eFdMxKio9YbUFi7HXVhJ), * canvas V3, sections "V2 Light" 1245:81292 and "V2 Dark" 1493:242567. * * Both themes are one stylesheet. Colour comes from the design-system tokens in * core.css, which flip on `[data-theme="dark"]` — so a section that reads * `--background-white` is white in light and #0c111b in dark with no second rule. * Only the places where the two frames genuinely disagree (the sectors band goes * grey -> brand green) get an explicit dark override. * * Section heights measured off the 1600px frame renders: * stamp 32 | nav 72 | hero 550 | purpose+goals 1128 | white 328 * sectors 920 | partners 752 | contact 408 | modified 52 | footer 424 */ /* * NOTE ON UNITS * This file was authored against the DGA convention of `html { font-size: 62.5% }`, * i.e. 10px = 10px. The Shareek site's inline critical CSS instead sets a fluid * root size (`html { font-size: 1.041666667vw }` and friends), so every rem here * resolved ~1.5x too large at desktop and clipped fixed-height bands such as * .sk-hero. The rem values have been converted to their intended px equivalents * (x10), which makes this stylesheet independent of the host page's root size. * DGA's own component CSS is already px-based, so nothing else is affected. */ /* ---------------------------------------------------------------- shell -- */ /* The tokens sit on :root as well as .sk so blocks like .sk__container and .sk-onDark work on a host page that does not carry the .sk class -- this Umbraco site renders DGA sections inside its own . Custom properties alone paint nothing, so exposing them globally is inert; the three visual declarations below stay scoped to .sk. */ :root, .sk { --sk-page: 1600px; --sk-gutter: 80px; /* The always-dark band behind Purpose/Goals. Identical in both frames, so it is written as literal colour rather than a token. */ --sk-ondark-bg: linear-gradient(180deg, #161717 0%, #1e2936 45%, #161616 100%); --sk-brand-deep: #104631; --sk-green-700: #14573a; --sk-green-600: #1b8354; --sk-green-200: #88d8ad; --sk-gray-25: #f9fafb; --sk-gray-100: #f3f4f6; --sk-gray-200: #e5e7eb; --sk-gray-300: #d2d6db; --sk-gray-500: #6c737f; --sk-ink: #161616; --sk-ink-2: #1f2a37; --sk-ink-3: #384250; } .sk { background: var(--background-body); color: var(--text-default); min-height: 100vh; } .sk__container { width: 100%; max-width: var(--sk-page); margin-inline: auto; padding-inline: var(--sk-gutter); box-sizing: border-box; } /* Partners and Contact are laid out on a 160px gutter rather than the 80px the rest of the page uses — 1280 of content on the 1600 frame, which is what makes the five partner tiles 243.2 wide. Expressed against the gutter so the narrow breakpoints keep working unchanged. */ .sk__container--tight { max-width: calc(1280px + var(--sk-gutter) * 2); } /* Reachable by a screen reader, absent from the visual design. */ .sk-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); clip-path: inset(50%); } /* The small green line above a heading, and the green inline link that closes a block off. Both are the brand green in either theme: --sk-green-600 clears 4.5:1 on the white and #111927 grounds they are used over. */ .sk-kicker { color: var(--sk-green-600); } .sk-link { color: var(--sk-green-600); text-decoration: none; } .sk-link:hover { text-decoration: underline; } .sk-center { display: flex; justify-content: center; } .sk-section__head { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; } .sk-section__title { margin: 0; font-size: 48px; line-height: 60px; font-weight: 400; /* core.css pins headings to a near-black literal, which beats the inherited body colour — so state the themed colour explicitly. */ color: var(--text-default); } .sk-section__description { margin: 0; max-width: 720px; font-size: 18px; line-height: 28px; color: var(--text-primary-paragraph); } .sk--ondark .sk-section__title, .sk--ondark .sk-section__description { color: #fff; } .sk-section__head--start { align-items: flex-start; text-align: start; } /* --------------------------------------------------------------- header -- */ /* The site's legacy stylesheet fixes EVERY

element (`header { position: fixed; background: linear-gradient(...) }`), which pulls the DGA header out of flow so page content slides underneath it. Figma has it in normal flow, and the sticky sector panels pin against the page, so a fixed header would cover the first line of every panel as it pins. Scoped to the rebranded header only; the legacy markup is untouched. */ /* Every

element the rebrand uses has to be listed here. Add new ones as they appear rather than dropping the element --

is the right tag for these. */ .sk-header, .sk-article__head, .sk-slideout__header { position: static; background: none; } .sk-stamp { background: var(--background-neutral-100); } [data-theme='dark'] .sk-stamp { background: var(--background-card); } /* dga-header-v2 owns the bar chrome; these are just the layout hooks for the content slotted into it. */ .sk-stamp { background: var(--background-neutral-100); } [data-theme='dark'] .sk-stamp { background: var(--background-card); } .sk-nav__bar { width: 100%; } .sk-nav__logo { display: inline-flex; align-items: center; } .sk-nav__logo-img { height: 40px; width: auto; display: block; } /* The wordmark is drawn dark, so swap to the reversed lockup in dark mode. */ .sk-nav__logo--dark { display: none; } [data-theme='dark'] .sk-nav__logo--light { display: none; } [data-theme='dark'] .sk-nav__logo--dark { display: block; } /* The bar needs ~1000px for the logo, three menu groups, the contact link and the three actions; below that it collapses to the hamburger + drawer. */ .sk-nav__burger { display: none; } .sk-nav__drawer { position: relative; z-index: 1000; } @media (max-width: 1024px) { .sk-nav__burger { display: block; } .sk-nav__menu, .sk-nav__actions { display: none; } } /* ----------------------------------------------------------------- hero -- */ .sk-hero { position: relative; height: 550px; display: flex; align-items: center; justify-content: center; padding: 100px 160px; box-sizing: border-box; overflow: hidden; text-align: center; /* Fallback layer: shows through if the video is blocked, still loading, or suppressed for reduced motion. */ background-image: url('/shareek/hero-home.jpg'); background-size: cover; background-position: center; } /* The video fills the band; the still is its poster, so the first paint is the same frame either way. */ .sk-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; } /* Figma tints the hero image with #092A1E at 60%. As a layer over the video it has to sit between the footage and the copy. */ .sk-hero::after { content: ''; position: absolute; inset: 0; background: rgba(9, 42, 30, 0.6); } /* The CMS exposes the tint as a per-page flag (HeroBanner.overlay), so the wash above has to be switchable rather than unconditional. */ .sk-hero--no-overlay::after { display: none; } /* Motion is decorative here, so drop it rather than the whole hero. */ @media (prefers-reduced-motion: reduce) { .sk-hero__video { display: none; } } .sk-hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 720px; } .sk-hero__content > dga-button { margin-top: 16px; } .sk-hero__title { margin: 0; font-size: 60px; line-height: 72px; font-weight: 400; color: #fff; } .sk-hero__description { margin: 0; font-size: 18px; line-height: 28px; color: #fff; } /* -------------------------------------------------- purpose + goals band -- */ /* One always-dark band carrying both sections; the goal cards hang off its bottom edge into the section that follows. */ .sk-onDark { background: var(--sk-ondark-bg); } .sk-purpose { min-height: 474px; box-sizing: border-box; padding: 188px 8px; } .sk-purpose .sk-section__head { max-width: 680px; margin-inline: auto; } .sk-story { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 64px; } .sk-story__track { width: 360px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.3); overflow: hidden; } .sk-story__fill { display: block; height: 100%; width: 33.333%; background: #fff; border-radius: inherit; } .sk-story__label { font-size: 14px; line-height: 20px; font-weight: 500; color: #fff; } .sk-goals { padding-top: 100px; } /* The row is a dga-carousel-v2, not a grid: the repeater can outrun the four cards Figma draws, and past four the carousel pages rather than narrowing them. Slide widths, the 4px gutter and the arrows all come from the element's own props -- what is left here is where the row sits in the band. The -220px overhang has to stay on the host. The element's viewport carries overflow: hidden and contain: paint, so a negative margin applied any deeper would be clipped at the band edge instead of dropping the cards onto the white below. Paint containment does cut the card's box-shadow at the viewport edge; the scrim inside .sk-goal is what separates card from band, so nothing reads as missing. */ .sk-goals__carousel { display: block; margin-top: 80px; /* -220 is the card's overhang in the frame, and the dots row is part of the host: it sits 32px below the cards, inside the element, so the margin has to clear it first or the cards stop 32px short of the band edge. Measured, not derived -- it is the component's own --spacing-lg plus the 12px dot. Drop the 32 again if show-dots ever goes back to false. */ margin-bottom: -252px; position: relative; z-index: 1; } /* The arrows sit beside the viewport in the component's own layout, which puts them over the dark band -- and the design system's default arrow is a light neutral pill that glares there. Reached through ::part rather than by overriding --button-background-*, which would also repaint the icons. */ .sk-goals__carousel::part(arrow) { background: rgba(255, 255, 255, 0.12); color: #fff; } .sk-goals__carousel::part(arrow):hover { background: rgba(255, 255, 255, 0.24); } .sk-goal { position: relative; min-height: 496px; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; box-sizing: border-box; color: #fff; background-size: cover; background-position: center; box-shadow: 0 4px 6px -2px rgba(16, 24, 40, 0.03), 0 12px 16px -4px rgba(16, 24, 40, 0.08); } /* Two scrims, because the frame stacks two. The card's own fill gradient runs #161616 over the photograph from 32% down, and the overlay frame on top of it runs the slate the copy actually reads against. Collapsing them into one ramp was what left the lower half of the card too bright: neither gradient alone reaches the near-opaque bottom edge the frame has. ::after paints over ::before, which is the order the frame stacks them in. */ .sk-goal::before, .sk-goal::after { content: ''; position: absolute; inset: 0; pointer-events: none; } .sk-goal::before { background: linear-gradient(180deg, rgba(22, 22, 22, 0) 32%, rgba(22, 22, 22, 1) 100%); } .sk-goal::after { background: linear-gradient(180deg, rgba(22, 22, 22, 0) 0%, #1f2a37 100%); } .sk-goal__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; } /* The frame fixes both text boxes -- two lines for the headline, four for the copy -- and tops the text inside them. That is what puts every card's headline on one line across the row however long its copy runs; packing them against the card's bottom edge instead is why the longer cards rode high. min-height, not height, so an authored headline that runs to three lines grows its box rather than spilling out of the card. */ .sk-goal__title { margin: 0; min-height: 76px; font-size: 30px; line-height: 38px; font-weight: 400; } .sk-goal__text { margin: 0; min-height: 96px; font-size: 16px; line-height: 24px; } /* The plain band the cards drop onto. */ .sk-goals__spacer { height: 328px; background: var(--background-white); } /* -------------------------------------------------------------- sectors -- */ /* * The sector story: ten panels stacked with `position: sticky`, each pinning in * turn while the next rides up over it. `overflow` must stay visible — clipping * the section would make it the scroll container and the panels would pin * against it instead of the page. */ .sk-sectors { position: relative; background: var(--background-neutral-100); } /* The one place the two frames disagree on more than a token: light grey in "V2 Light", brand deep green in "V2 Dark". */ [data-theme='dark'] .sk-sectors { background: var(--sk-brand-deep); } /* * Exactly one viewport tall, not Figma's literal 920: the panel is what the * reader sees at rest, so it has to be the window rather than a fixed band. A * 920 panel in a shorter window pins its top edge and pushes the centred copy * below the fold. dvh over vh so the mobile URL bar collapsing does not leave a * strip of the next panel showing. * * The background-color is the band's own: the panels stack, so a transparent * one would show the panel it is riding over. */ .sk-sectors__panel { position: sticky; top: 0; display: flex; align-items: flex-start; height: 100vh; height: 100dvh; padding: 120px; box-sizing: border-box; background-color: var(--background-neutral-100); background-repeat: no-repeat; background-position: center; background-size: cover; } [data-theme='dark'] .sk-sectors__panel { background-color: var(--sk-brand-deep); } /* The wordmark is the intro panel's own, bled off the reading edge at Figma's offset. The SVG carries its #9DA4AE at 10%, so there is no opacity here. */ .sk-sectors__panel--intro { align-items: center; justify-content: center; padding: 160px; background-image: url('/shareek/sectors-watermark.svg'); background-position: -206px 35px; background-size: 1175px 1185px; } .sk-sectors__panel--intro .sk-section__head { max-width: 500px; } .sk-sectors__panel--start { justify-content: flex-start; } .sk-sectors__panel--end { justify-content: flex-end; } .sk-sectors__copy { width: 500px; max-width: 100%; } /* The panels put both lines on #1F2A37, not the usual lighter description ink. The photos are cut-outs on the band, so the copy stays dark in light. */ .sk-sectors__copy .sk-section__title, .sk-sectors__copy .sk-section__description { color: var(--sk-ink-2); } /* On the dark frame's brand-green band every line goes white, intro included. */ [data-theme='dark'] .sk-sectors .sk-section__title, [data-theme='dark'] .sk-sectors .sk-section__description, [data-theme='dark'] .sk-sectors__copy .sk-section__title, [data-theme='dark'] .sk-sectors__copy .sk-section__description { color: #fff; } /* * Narrow screens read the panels as ordinary full-screen sections instead: ten * pinned viewport-tall panels is a long stretch of hijacked scroll on a phone, * and a portrait window is short enough that the copy needs to be able to run * past it rather than be clipped by a fixed height. min-height keeps each panel * filling the screen when the copy is short; svh so the tallest browser chrome * still leaves the whole panel reachable. */ @media (max-width: 900px) { .sk-sectors__panel { position: static; height: auto; min-height: 100svh; padding: 48px 16px; } .sk-sectors__panel--intro { padding: 48px 16px; background-size: 780px 786px; } } /* ------------------------------------------------------------- partners -- */ .sk-partners { min-height: 752px; box-sizing: border-box; padding: 100px 0; background: var(--background-white); } .sk-partners__tabs { display: flex; justify-content: center; margin-top: 40px; } .sk-partners__switch { display: block; margin-top: 80px; } .sk-partners__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .sk-partners__grid--private { grid-template-columns: repeat(6, 1fr); } /* Figma splits the logos across a government / private tab pair driven by dga-carousel-v2, and .sk-partners__switch carries the 80px that separates the grid from the section head. This site's component is one flat repeater with no grouping, so the grid stands alone and takes that spacing itself. */ .sk-partners__grid--flat { margin-top: 80px; } .sk-partner { position: relative; height: 112px; border-radius: 16px; background: var(--background-neutral-50); display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; } .sk-partner img { max-height: 64px; max-width: 144px; object-fit: contain; } /* Only light-on-dark logo art exists, and the dark frame shows the marks reversed out to white. Inverting lightness while rotating hue back keeps the coloured emblems roughly on-hue instead of flattening them to silhouettes. */ [data-theme='dark'] .sk-partner img { filter: invert(1) hue-rotate(180deg); } /* The frame tucks the 24px control 4px into the corner opposite the reading edge — left on the RTL frame, so a logical inset mirrors it for English. */ .sk-partner__visit { position: absolute; top: 8px; inset-inline-end: 8px; color: var(--text-primary-paragraph); line-height: 0; } /* -------------------------------------------------------------- contact -- */ .sk-contact { min-height: 408px; box-sizing: border-box; padding-block: 80px; background: var(--background-primary-50, #f3fcf6); } [data-theme='dark'] .sk-contact { background: #0f1d21; } /* Copy on the reading edge at 500, the card pair beside it at 700. The copy comes first in the source so RTL puts it on the right, as the frame does. */ .sk-contact__inner { display: grid; grid-template-columns: 500px 1fr; gap: 80px; align-items: center; } .sk-contact__title { color: var(--text-default); margin: 0 0 24px; font-size: 48px; line-height: 60px; font-weight: 400; } .sk-contact__description { margin: 0; font-size: 20px; line-height: 30px; color: var(--text-primary-paragraph); } .sk-contact__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .sk-contact-card { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 12px; background: var(--background-card); } /* Figma's "Featured icon": a 48 mint square, not the component's dark circle. */ .sk-contact-card__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px; background: var(--background-primary-50, #f3fcf6); color: var(--sk-green-600); } .sk-contact-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .sk-contact-card__title { display: block; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--sk-ink-2); } .sk-contact-card__text { display: block; font-size: 14px; line-height: 20px; color: var(--text-primary-paragraph); text-decoration: none; } .sk-contact-card__action { flex: none; order: 1; margin-inline-start: auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 4px; background: var(--sk-green-600); color: #fff; } /* --------------------------------------------------------------- footer -- */ .sk-modified { min-height: 52px; display: flex; align-items: center; background: var(--background-white); font-size: 14px; color: var(--text-primary-paragraph); } /* dga-footer renders the footer itself from its array props. It ships no `:host` sizing, so the host shrink-wraps its flex content and sits in a narrow band; give it the full page width explicitly. */ .sk-footer { display: block; width: 100%; /* The classes dga-footer puts on its links (link link--sm link--neutral) carry no colour of their own, so every link in its shadow root inherits `color` -- and what it inherits is the legacy stylesheet's fixed body colour, which does not follow the theme and so disappears against the dark footer. An inheritable colour on the host is the only way in: plain CSS cannot select past the shadow boundary. */ color: var(--text-default); } /* The band above dga-footer. The component draws itself entirely from props and exposes no slots, so what it does not model -- the fraud notice, back to top, and the contact pair -- lives here instead. */ /* Tinted rather than bordered: the notice is the one thing in the footer that has to read as a warning, and the DGA footer itself is on white. */ .sk-footer-notice { background: var(--background-warning-25); color: var(--text-warning); } .sk-footer-notice dga-icon { flex: none; color: var(--icon-warning); } .sk-footer-notice__inner { display: flex; align-items: flex-start; gap: 12px; padding-block: 16px; } .sk-footer-notice__text { margin: 0; font-size: 14px; line-height: 20px; /* The CMS text carries its own line break. */ white-space: pre-line; } .sk-footer-utility { background: var(--background-white); border-block-end: 1px solid var(--border-neutral-secondary, #e4e7ec); } .sk-footer-utility__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px; } /* Pinned over the bottom trailing corner, as the legacy button was, and faded in by .is-visible past 400px of scroll -- the same threshold the legacy jQuery used. Fixed rather than sticky so it clears the footer: the DGA footer is the tallest block on the page and a sticky control would scroll away inside it. */ .sk-backtotop { position: fixed; z-index: 60; inset-block-end: 40px; inset-inline-end: 40px; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--sk-green-600); color: #fff; box-shadow: 0 4px 12px rgba(16, 70, 49, 0.25); cursor: pointer; /* Out of the tab order and off the a11y tree while it is not offered. */ opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; } .sk-backtotop.is-visible { opacity: 1; visibility: visible; transform: none; } .sk-backtotop:hover { background: var(--sk-brand-deep); } .sk-backtotop:focus-visible { outline: 2px solid var(--sk-green-600); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .sk-backtotop { transform: none; transition: none; } } @media (max-width: 760px) { .sk-backtotop { inset-block-end: 20px; inset-inline-end: 20px; } } .sk-footer-contact { display: flex; flex-wrap: wrap; gap: 16px 40px; } .sk-footer-contact__item { display: flex; align-items: center; gap: 12px; } .sk-footer-contact__icon { flex: none; color: var(--sk-green-600); } .sk-footer-contact__label { display: block; font-size: 14px; line-height: 20px; color: var(--text-secondary-paragraph, var(--text-primary-paragraph)); } .sk-footer-contact__value { display: block; font-size: 16px; line-height: 24px; color: var(--text-primary-paragraph); text-decoration: none; } a.sk-footer-contact__value:hover { text-decoration: underline; } /* ------------------------------------------------------------ responsive -- */ @media (max-width: 1200px) { :root, .sk { --sk-gutter: 40px; } .sk-partners__grid, .sk-partners__grid--private { grid-template-columns: repeat(3, 1fr); } .sk-contact__inner { grid-template-columns: 1fr 1fr; } /* The visible card count is the carousel's `steps` map, not a column rule. */ .sk-goals__carousel { margin-bottom: -152px; } .sk-goals__spacer { height: 180px; } /* .sk-sectors is not here: its height is its stack of sticky panels, and a padding-bottom would open a gap under the last one. */ .sk-partners, .sk-contact { height: auto; padding-bottom: 80px; } .sk-partner { height: auto; min-height: 112px; } } @media (max-width: 760px) { :root, .sk { --sk-gutter: 20px; } .sk-hero { padding: 60px 20px; height: auto; min-height: 420px; } .sk-hero__title { font-size: 36px; line-height: 44px; } .sk-section__title { font-size: 32px; line-height: 40px; } .sk-partners__grid, .sk-partners__grid--private, .sk-contact__inner, .sk-contact__cards { grid-template-columns: 1fr; } .sk-contact__title { font-size: 32px; line-height: 40px; } } /* ==================================================================== */ /* ============================================== about us page ======= */ /* ==================================================================== */ /* * Figma frame "نبذة عن مركز برنامج شريك" (1287:54860), 1600x3608: * * page hero 616 | timeline 1128 | values 1000 | faq 864 * * The inner-page hero is a different block from the Home hero (.sk-hero): * a per-page photo rather than the video, 616 tall rather than 550, and the * #104631 arch pinned to its bottom edge. Keeping it separate leaves Home * untouched. */ /* ------------------------------------------------------------ page hero -- */ /* 616px photo banner under a 60% #092A1E wash, copy centred, and the arch filling the bottom 415/616 of the height. */ .sk-page-hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: 616px; padding: 100px 160px 240px; box-sizing: border-box; overflow: hidden; text-align: center; color: #fff; --sk-hero-wash: rgba(9, 42, 30, 0.6); background-color: var(--sk-brand-deep); background-image: linear-gradient(var(--sk-hero-wash), var(--sk-hero-wash)), var(--sk-page-hero-image); background-size: cover; background-position: center; } /* The CMS carries a separate mobile crop per hero, which Figma has no slot for. A CSS background cannot be media-queried per element from an inline style, so both URLs travel as custom properties and the breakpoint picks one. Falls back to the desktop image when no mobile crop is set. */ @media (max-width: 767px) { .sk-page-hero { background-image: linear-gradient(var(--sk-hero-wash), var(--sk-hero-wash)), var(--sk-page-hero-image-mobile, var(--sk-page-hero-image)); } } .sk-page-hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 720px; } .sk-page-hero__title { margin: 0; font-size: 60px; line-height: 72px; font-weight: 400; color: #fff; } .sk-page-hero__description { margin: 0; font-size: 18px; line-height: 28px; color: #fff; } /* Figma's redesigned "Hero Section" (1337:28107, instance 1337:53261 on the About frame): a flat 550 band with a neutral wash and no arch, so the padding loses the skirt the arch used to sit in. The copy still caps at the 720 the arched hero uses. */ .sk-page-hero--flat { --sk-hero-wash: rgba(22, 22, 22, 0.6); min-height: 550px; padding: 100px 160px; background-color: #161616; } .sk-page-hero--flat .sk-page-hero__title { font-size: 72px; line-height: 90px; } .sk-page-hero--flat .sk-page-hero__description { font-size: 20px; line-height: 30px; } /* Figma vector 1413:196054 — sweeps up from the bottom corners and dips in the middle. `preserveAspectRatio="none"` lets it stretch with the viewport. */ .sk-arch { position: absolute; inset-inline: 0; bottom: -1px; display: block; width: 100%; height: 67%; fill: var(--sk-brand-deep); } /* ------------------------------------------------------------- timeline -- */ .sk-timeline { /* * The column the controls sit in and this section's own side padding. The rail * runs full width while the control does not, so it needs both to put the * active slide back on the column edge. The arrows and their gap inset the tab * strip inside that column, but the slide aligns to the column itself, not to * the strip. */ --sk-timeline-column: 1280px; --sk-timeline-pad: 160px; padding: 100px 160px; background: var(--background-neutral-100); /* The rail bleeds out of the padding box on purpose; nothing escapes the section itself. */ overflow: hidden; } /* The one place the two frames disagree on more than a token — the same grey -> brand green split .sk-sectors has. */ [data-theme='dark'] .sk-timeline { background: var(--sk-brand-deep); } .sk-timeline__control { display: flex; align-items: center; gap: 24px; max-width: var(--sk-timeline-column); margin: 0 auto 80px; } .sk-tabstrip { display: flex; flex: 1; justify-content: space-between; /* Inset, not a border: Figma laps the 3px rule over the last 3px of the tab row (the tab list's gap is -3), so it must not add to the row's 44px. */ box-shadow: inset 0 -3px 0 var(--sk-gray-300); overflow-x: auto; scrollbar-width: none; } .sk-tabstrip::-webkit-scrollbar { display: none; } .sk-tabstrip__tab { padding: 12px 16px; border: 0; background: none; color: var(--sk-ink-3); cursor: pointer; white-space: nowrap; /* No `font` shorthand: it loads after core.css and would beat the text-sm-medium/bold utility the tab is labelled with, dropping every tab to the 10px root size. The utility sets family, size, weight and leading. */ } .sk-tabstrip__tab[aria-selected='true'] { color: var(--sk-ink); /* Same reason as the strip's rule: paints over the tab, adds no height. */ box-shadow: inset 0 -3px 0 var(--sk-green-600); } [data-theme='dark'] .sk-tabstrip { box-shadow: inset 0 -3px 0 var(--sk-gray-500); } [data-theme='dark'] .sk-tabstrip__tab { color: var(--sk-gray-100); } [data-theme='dark'] .sk-tabstrip__tab[aria-selected='true'] { color: #fff; box-shadow: inset 0 -3px 0 #fff; } /* * Figma runs the rail edge to edge of the 1600 frame while the controls stay in * the 1280 column, so the carousel steps back out of the section padding. The * section clips it. */ .sk-timeline__rail { --sk-timeline-gap: 80px; /* `width: auto`, or the host's own `width: 100%` measures the padding box and the negative margins buy nothing. */ width: auto; margin-inline: -160px; } /* * The rail itself runs the full width of the section so the slides either side * of the active one stay visible; the column is held by padding inside the * carousel's own viewport instead. A max-width here would put the clip edge at * the column and cut the neighbours off — padding moves where slides start * without moving where they stop being painted. */ .sk-timeline__rail::part(viewport) { padding-inline: calc( var(--sk-timeline-pad) + max(0px, (100% - 2 * var(--sk-timeline-pad) - var(--sk-timeline-column)) / 2) ); } .sk-timeline__item { display: flex; flex-direction: row-reverse; align-items: center; gap: var(--sk-timeline-gap); width: 100%; /* * The row is as tall as the active photo whatever is selected. Without this * the height follows whichever photo is largest at that instant, so it dips * and springs back over every move — the whole page below it moving with it. */ min-height: 372px; } /* * The carousel gives the slide two widths (`active-slide-size`); the copy holds * its 352 either way, so the whole difference lands on the photo — 496x372 on * the centred entry, 224x168 on its neighbours, which are Figma's two sizes. */ .sk-timeline__text { display: flex; flex-direction: column; gap: 16px; flex: 0 0 352px; min-width: 0; /* Reads from the side the language starts on: right in Arabic, left in English. `end` would put it on the far side in both. */ text-align: start; } .sk-timeline__year { margin: 0; color: var(--sk-green-700); } .sk-timeline__copy { margin: 0; color: var(--sk-ink-2); /* Figma sets the entry copy to 92% on the band rather than a lighter ink. */ opacity: 0.92; } [data-theme='dark'] .sk-timeline__year, [data-theme='dark'] .sk-timeline__copy { color: #fff; } .sk-timeline__figure { flex: 1 1 auto; min-width: 0; aspect-ratio: 496 / 372; } .sk-timeline__image { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; } /* --------------------------------------------------------------- values -- */ .sk-values { padding: 100px 80px; background: var(--background-neutral-25); } /* 1440x800 photo card: the image washed to #1F2A37 at the foot so the white value cards and the on-dark title both hold. */ .sk-values__card { position: relative; display: flex; flex-direction: column; /* Fixed 800 with the content bottom-anchored: the photo needs room to read above the title, so the title and cards sit at the foot of the panel rather than the panel hugging them. */ height: 800px; justify-content: flex-end; align-items: center; gap: 80px; max-width: 1440px; margin-inline: auto; padding: 100px 80px; box-sizing: border-box; border-radius: 12px; overflow: hidden; /* The photo comes from the CMS on this site, so it arrives as a custom property and Figma's own file stays the fallback. */ background-image: linear-gradient(180deg, rgba(22, 22, 22, 0) 0%, #1f2a37 100%), var(--sk-values-image, url('/shareek/values-bg.jpg')); background-size: cover; background-position: center; } .sk-values__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; width: 100%; } /* Always dark: these sit on the photo's #1F2A37 foot in both frames, so they are literal colour rather than a token that would flip to white in dark. */ .sk-value-card { display: flex; flex-direction: column; gap: 24px; height: 280px; padding: 40px 24px; box-sizing: border-box; border-radius: 16px; background: #1f2a37; box-shadow: 0 2px 4px -2px rgba(16, 24, 40, 0.06), 0 4px 8px -2px rgba(16, 24, 40, 0.1); text-align: start; } .sk-value-card__title { margin: 0; font-size: 30px; line-height: 38px; font-weight: 400; color: #fff; } .sk-value-card__text { /* The description takes the leftover height rather than being pushed to the foot of the card, so a two-line card still reads from under its title. */ flex: 1; margin: 0; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.8); text-align: justify; } /* ------------------------------------------------------------------ faq -- */ /* Mint band; same pairing as .sk-contact, which is the other mint section. */ .sk-faq-block { padding: 100px 80px; background: var(--background-primary-50, #f3fcf6); } [data-theme='dark'] .sk-faq-block { background: #0f1d21; } /* The relit Join frame puts the same block on the page's own grey, where it reads as no band at all. */ .sk-faq-block--gray { background: var(--background-neutral-25); } [data-theme='dark'] .sk-faq-block--gray { background: var(--background-neutral-25); } .sk-faq-block__inner { display: flex; flex-direction: column; gap: 80px; max-width: 1280px; margin-inline: auto; } /* dga-accordion-list owns the rows, chevrons and rules; this only sets the width. `display` has to be stated: a custom element is inline until told otherwise, and the component styles its inner div rather than its host. */ .sk-faq-list { display: block; width: 600px; max-width: 100%; margin-inline: auto; } .sk-faq-block__cta { display: flex; justify-content: center; } /* ==================================================================== */ /* ================================================= faqs page ======== */ /* ==================================================================== */ .sk-faq-main { display: flex; justify-content: center; padding: 100px 80px; box-sizing: border-box; background: var(--background-white); } .sk-faq-main__inner { display: flex; flex-direction: column; /* Figma's 64 between the three blocks. align-items keeps the 459 search row against the reading edge while the other two stretch the full column. */ gap: 64px; align-items: stretch; width: 100%; max-width: 1280px; } /* --------------------------------------------------------- search row -- */ /* 459 = the 320 search box, 16, and the 123 filter button. In RTL the box leads, which is the order the markup is already in. */ .sk-faq-search { display: flex; align-items: center; gap: 16px; align-self: flex-start; width: 459px; max-width: 100%; } /* The host is a custom element, so it is inline until told otherwise and the fullwidth box inside it has nothing to fill. */ .sk-faq-search dga-search-box { display: block; flex: 1; min-width: 0; } /* dga-filteration's own stylesheet puts width:100% on its host, which would eat the whole row and leave the search box at zero. It is the 123-wide button in the frame, so it is sized by its content here. */ .sk-faq-search dga-filteration { flex: none; width: auto; } /* Its chip row keeps a 40px min-height even with nothing selected, which would make the control twice the frame's 40. :empty rather than display:none, so the chips come back on their own once real filters land. */ .sk-faq-search .filteration__selected-filters:empty { display: none; } /* ------------------------------------------------------ tabbed list -- */ .sk-faq-tabbed { display: flex; flex-direction: column; gap: 32px; } /* dga-tabs draws its own divider under the strip (the frame's 1280x3 rule). */ .sk-faq-tabs { display: block; width: 100%; } /* * On its own page the list is the full 1280 column, not the 600 it takes inside * the mint band on About and Join. */ .sk-faq-main .sk-faq-list { width: 100%; } /* Filtered-out rows. dga-accordion is a custom element with no display rule of its own, so [hidden] would already win — stated anyway so a later rule on the host cannot quietly bring them back. */ .sk-faq-list dga-accordion[hidden] { display: none; } .sk-faq-empty { margin: 0; padding: 24px 0; font-size: 16px; line-height: 24px; color: var(--text-primary-paragraph); } /* ------------------------------------------------------ contact card -- */ .sk-faq-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 16px; box-sizing: border-box; border: 1px solid var(--border-neutral-primary); border-radius: 16px; background: var(--background-card); color: var(--text-default); } .sk-faq-cta__icon { display: block; flex: none; } .sk-faq-cta__text { display: flex; flex-direction: column; gap: 8px; } .sk-faq-cta__text h3, .sk-faq-cta__text p { margin: 0; /* Sized by the text utilities; core.css pins headings to a near-black literal, so the themed colour is restated the way .sk-section__title does. */ color: var(--text-default); } .sk-faq-cta__actions { display: flex; align-items: center; gap: 16px; } /* The frame's button is a link — it leads to the contact page — so the anchor carries the navigation and dga-button draws it. */ .sk-faq-cta__link { display: inline-flex; text-decoration: none; } /* ----------------------------------------------- faqs page responsive -- */ @media (max-width: 1100px) { .sk-faq-main { padding: 48px 16px; } .sk-faq-main__inner { gap: 40px; } .sk-faq-tabbed { gap: 24px; } } @media (max-width: 700px) { /* The 459 row cannot hold a readable box beside the filter button; stack, and let each take the full width. */ .sk-faq-search { flex-direction: column; align-items: stretch; width: 100%; } } /* ------------------------------------------------- about page responsive -- */ @media (max-width: 1100px) { .sk-values { padding: 48px 16px; } .sk-values__card { height: auto; padding: 48px 16px; gap: 40px; } .sk-values__grid { grid-template-columns: repeat(2, 1fr); } .sk-value-card { height: auto; min-height: 280px; } } @media (max-width: 900px) { .sk-page-hero { min-height: 480px; padding: 64px 32px 160px; } .sk-page-hero--flat { min-height: 420px; padding: 64px 32px; } .sk-page-hero--flat .sk-page-hero__title { font-size: 48px; line-height: 60px; } .sk-timeline { --sk-timeline-pad: 16px; padding: 48px 16px; } .sk-timeline__rail { --sk-timeline-gap: 24px; margin-inline: -16px; } .sk-timeline__control { margin-bottom: 40px; } .sk-faq-block { padding: 48px 16px; gap: 40px; } .sk-faq-block__inner { gap: 40px; } } /* Too narrow to read a 350px column beside a photo: stack, photo first. */ @media (max-width: 700px) { .sk-timeline__item { flex-direction: column-reverse; align-items: stretch; /* Stacked, so every slide is the same width and nothing resizes. */ min-height: 0; } .sk-timeline__text, .sk-timeline__figure { flex: none; width: 100%; } } @media (max-width: 600px) { .sk-page-hero { padding: 48px 16px 120px; } .sk-page-hero__title { font-size: 36px; line-height: 44px; } .sk-page-hero--flat { padding: 48px 16px; } .sk-page-hero--flat .sk-page-hero__title { font-size: 36px; line-height: 44px; } .sk-values__grid { grid-template-columns: 1fr; } } /* ==================================================================== */ /* ============================================== identity page ======= */ /* ==================================================================== */ /* * One background for both themes - the artwork is dark either way and the copy * on it is literal white, so only the card follows --background-body. */ /* ---------------------------------------------------------------- band -- */ .sk-identity { display: flex; flex-direction: column; align-items: center; min-height: 972px; padding: 100px 80px; box-sizing: border-box; background-color: var(--sk-brand-deep); background-image: url('/shareek/identity-bg.png'); background-size: cover; background-position: center; } /* ================================================== news page ======= */ /* ==================================================================== */ /* -------------------------------------------------------- featured story -- */ .sk-news-featured { padding: 100px 160px; background: var(--background-neutral-100); } .sk-news-featured__inner { display: flex; align-items: center; gap: 80px; max-width: 1280px; margin-inline: auto; } .sk-news-featured__media { flex: 0 0 502px; align-self: stretch; min-height: 476px; border-radius: 16px; background-color: var(--background-neutral-300); background-image: var(--sk-news-featured-image); background-size: cover; background-position: center; } .sk-identity__inner { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; gap: 80px; width: 100%; max-width: 1440px; padding-block-end: 80px; box-sizing: border-box; } .sk-identity__head { display: flex; flex-direction: column; align-items: center; gap: 32px; max-width: 720px; text-align: center; } .sk-identity__title { margin: 0; font-size: 48px; line-height: 60px; font-weight: 400; letter-spacing: -0.96px; color: #fff; } .sk-identity__description { margin: 0; font-size: 18px; line-height: 28px; color: #fff; } /* -------------------------------------------------------- consent card -- */ /* Absorbs the slack between heading and logo, which is what centres the card in the band rather than pinning it to a measured offset. */ .sk-identity__panel { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; width: 100%; } .sk-identity__card { display: flex; align-items: center; gap: 24px; width: 600px; max-width: 100%; padding: 24px; box-sizing: border-box; border-radius: 16px; background: var(--background-body); } .sk-identity__consent { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; min-width: 0; } /* Indents the terms past the checkbox so they align under its label rather than under the control itself. The figure is visual, not derived: dga-checkbox ships no size CSS of its own, so the rendered control width cannot be read off the bundle. Re-check this if the checkbox ever gets an explicit size. */ .sk-identity__terms { margin: 0; padding-block-start: 4px; padding-inline-start: 40px; font-size: 16px; line-height: 24px; text-align: start; color: var(--text-primary-paragraph); } /* Underlined at rest rather than on hover only: the link sits mid-sentence and its colour is a 2.14:1 cue against the text around it, where WCAG 1.4.1 wants 3:1 before colour alone may carry a link. */ .sk-identity__link { color: var(--text-primary); text-decoration: underline; text-underline-offset: 0.2em; } .sk-identity__link:hover, .sk-identity__link:focus-visible { text-decoration-thickness: 2px; } .sk-identity__cta { flex: none; } .sk-identity__logo { display: block; width: 288px; height: auto; } /* --------------------------------------------- identity page responsive -- */ @media (max-width: 1024px) { .sk-identity { min-height: 0; padding: 80px 40px; } .sk-identity__title { font-size: 36px; line-height: 46px; } } @media (max-width: 760px) { .sk-identity { padding: 48px 16px; } .sk-identity__inner { gap: 48px; padding-block-end: 48px; } .sk-identity__title { font-size: 32px; line-height: 40px; } /* Stacks: at 600 the action and the consent block no longer share a row. */ .sk-identity__card { flex-direction: column; align-items: stretch; gap: 16px; } .sk-identity__logo { width: 220px; } } /* ==================================================================== */ /* ================================================= error 404 ======== */ /* ==================================================================== */ /* * The band takes no background of its own - it sits on --background-body like * the rest of the page, and every colour here is a token, so both themes come * out of one set of rules. */ /* ------------------------------------------------------------- error 404 -- */ .sk-error { display: flex; justify-content: center; min-height: 736px; padding: 100px 80px; box-sizing: border-box; } .sk-error__inner { display: flex; flex-direction: column; align-items: center; gap: 64px; width: 100%; max-width: 1440px; } /* Fixed 458x324: the marks are placed from this box's corners, so it keeps its size rather than reflowing, and scales as a unit on narrow screens. */ .sk-error__art { position: relative; width: 458px; height: 324px; } /* Physically centred rather than logically - the numeral reads the same either direction, and a logical inset here would fight the transform. */ .sk-error__code { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; font-size: 200px; line-height: 90px; font-weight: 400; letter-spacing: -4px; white-space: nowrap; color: var(--text-primary-paragraph); } /* left/top, not the logical pair: the frame is already RTL, so its offsets are the physical ones and mirroring them would scatter the marks differently. Colour is passed through dga-icon's own color prop rather than set here: the component writes color inline on every render, which outranks this rule. */ .sk-error__mark { position: absolute; left: var(--sk-error-mark-x); top: var(--sk-error-mark-y); } .sk-error__content { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; } .sk-news-featured__body { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 40px; min-width: 0; } .sk-news-featured__text { display: flex; flex-direction: column; gap: 16px; width: 100%; color: var(--text-display); } .sk-news-featured__date { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; } .sk-news-featured__title { margin: 0; font-size: 30px; line-height: 44px; font-weight: 400; color: var(--text-display); } .sk-news-featured__excerpt { margin: 0; max-width: 640px; font-size: 16px; line-height: 24px; text-align: justify; color: var(--text-display); } /* ------------------------------------------------------------- all news -- */ .sk-news-list { padding: 100px 160px; background: var(--background-body); } .sk-news-list__inner { display: flex; flex-direction: column; gap: 80px; max-width: 1280px; margin-inline: auto; } .sk-news-list__head { display: flex; flex-direction: column; gap: 40px; } /* The frame's heading is --text-display and tracks -2%, where the shared .sk-section__title is --text-default and tracks none. Overridden here rather than in the shared rule, which Home and About also use. */ .sk-news-list__head .sk-section__title { color: var(--text-display); letter-spacing: -0.96px; } .sk-news-list__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .sk-news-list__group { display: flex; align-items: center; gap: 16px; } .sk-news-list__search { width: 320px; } .sk-news-list__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; } /* Figma's news grid ends at the last card; this component carries a real "view all" link, so it gets a centred rail under the grid rather than being dropped. */ .sk-news-list__cta { display: flex; justify-content: center; margin-top: 48px; } /* --------------------------------------------------------------- card --- */ /* 411x488 photo tile. The copy sits on the photo, so the wash is part of the card rather than a token — it has to hold white text in both themes. */ .sk-news-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 40px; min-height: 488px; padding: 24px; box-sizing: border-box; border-radius: 16px; overflow: hidden; color: #fff; background-color: var(--sk-ink); background-image: linear-gradient( 180deg, rgba(22, 22, 22, 0) 30%, rgba(22, 22, 22, 0.88) 78%, rgba(13, 18, 28, 0.96) 100% ), var(--sk-news-card-image); background-size: cover; background-position: center; } .sk-news-card__body { display: flex; flex-direction: column; gap: 8px; } .sk-news-card__date { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: #fff; } .sk-news-card__title { margin: 0; font-size: 20px; line-height: 30px; font-weight: 400; color: #fff; } .sk-news-card__cta { align-self: flex-end; } /* -------------------------------------------------- news page responsive -- */ @media (max-width: 1280px) { .sk-news-featured, .sk-news-list { padding: 80px 80px; } .sk-news-featured__inner { gap: 48px; } .sk-news-featured__media { flex-basis: 420px; min-height: 400px; } } @media (max-width: 1024px) { .sk-news-featured__inner { flex-direction: column; align-items: stretch; gap: 32px; } /* Stacked, the photo leads. The copy leads in the DOM only so the two-column layout puts it on the right under RTL. */ .sk-news-featured__media { flex-basis: auto; min-height: 320px; order: -1; } .sk-news-featured__title { font-size: 26px; line-height: 36px; } .sk-news-list__grid { grid-template-columns: repeat(2, 1fr); } .sk-news-list__toolbar { flex-wrap: wrap; } } @media (max-width: 760px) { .sk-news-featured, .sk-news-list { padding: 48px 16px; } .sk-news-list__inner { gap: 48px; } .sk-news-featured__title { font-size: 22px; line-height: 32px; } .sk-news-list__grid { grid-template-columns: 1fr; } .sk-news-list__group { flex: 1 1 100%; } .sk-news-list__group--end { justify-content: flex-start; } .sk-news-list__search { width: 100%; flex: 1 1 auto; } .sk-news-card { min-height: 420px; } } /* ==================================================================== */ /* ============================================ agreements page ======= */ /* ==================================================================== */ /* * No CSS: every block matches the الأخبار frame to the pixel, so the page reuses * .sk-page-hero--flat, .sk-news-featured, .sk-news-list-* and .sk-news-card, * responsive ladder included. If the two pages diverge, fork the differing rule * here rather than editing the news block. */ /* ==================================================================== */ /* =============================================== reports page ======= */ /* ==================================================================== */ /* ---------------------------------------------------------- report card -- */ /* 411x488 in the frame. The cover sits at the card's full width, anchored top: it stands 132% of the card's height, so its lower third runs off under the wash. The wash is part of the card rather than a token — it has to hold white text in both themes, hence no dark-mode override. */ .sk-report-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 40px; min-height: 488px; padding: 16px 24px 24px; box-sizing: border-box; border-radius: 8px; overflow: hidden; color: #fff; background-color: var(--sk-ink-2); background-image: linear-gradient( 180deg, rgba(22, 22, 22, 0.1) 0%, var(--sk-ink-2) 91.23% ), var(--sk-report-card-image); background-repeat: no-repeat; background-position: center, top center; background-size: cover, 100% auto; } .sk-report-card__body { display: flex; flex-direction: column; gap: 8px; } .sk-report-card__date { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: #fff; } .sk-report-card__title { margin: 0; font-size: 20px; line-height: 30px; font-weight: 400; color: #fff; } /* The frame puts the action on the card's start edge — right, under RTL. */ .sk-report-card__cta { align-self: flex-start; } /* ---------------------------------------------- reports page responsive -- */ /* The section, toolbar and grid ladder down through the .sk-news-list rules above (1280 → 80px gutters, 1024 → two columns, 760 → one); only the card's own height is stepped here. */ @media (max-width: 1024px) { .sk-report-card { min-height: 440px; } } @media (max-width: 760px) { .sk-report-card { min-height: 420px; padding: 16px 16px 24px; } } /* ==================================================================== */ /* ========================================== news article page ======= */ /* ==================================================================== */ /* -------------------------------------------------------- shared: shell -- */ /* The shell serves both detail views — News details (1328:183519) and Report details (1354:99960) — so every rule down to the article responsive group is shared; page-specific rules belong in their own group. Band height and overlap are the two numbers the whole shell hangs off, so they are custom properties the responsive ladder retunes in one place. The band is positioned rather than flowed, so the row needs no negative margin to climb into it. */ .sk-article { --sk-article-band: 442px; --sk-article-overlap: 64px; position: relative; padding-block-start: var(--sk-article-overlap); padding-block-end: 60px; background: var(--background-body); } .sk-article__banner { position: absolute; inset-block-start: 0; inset-inline: 0; height: var(--sk-article-band); background: var(--sk-brand-deep); } .sk-article__card { position: relative; z-index: 1; box-sizing: border-box; display: flex; align-items: stretch; gap: 80px; max-width: var(--sk-page); margin-inline: auto; padding-inline: 160px; } /* ------------------------------------------------- shared: story column -- */ /* Fixed 720 in the frame; left to grow here so the copy keeps a sane measure once the 160 gutter starts shrinking. */ .sk-article__main { display: flex; flex: 1 1 auto; flex-direction: column; gap: 104px; min-width: 0; } /* The 32px gap puts the headline 124px below the band's top edge on both detail pages — 1493:242769 (news) and 1493:242797 (report) — being the 64px card overlap plus the 28px meta line and this gap. Drop the meta line and the headline rides up; the frames keep it at 124 regardless of title length. */ .sk-article__head { display: flex; flex-direction: column; gap: 32px; } /* On the band, so both colours are literal on-colour values rather than tokens — they have to stay white in either theme. */ .sk-article__meta { margin: 0; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.8); } .sk-article__title { margin: 0; font-size: 30px; line-height: 44px; font-weight: 400; color: #fff; } .sk-article__body { display: flex; flex-direction: column; gap: 40px; } /* ==================================================================== */ /* ======================================= program leadership page ==== */ /* ==================================================================== */ /* ------------------------------------------------------------ committee -- */ .sk-committee__band { display: flex; justify-content: center; /* 240 rather than 100 at the foot: the card eats 160 of it back. */ padding: 100px 160px 240px; background: var(--background-neutral-100); } /* No dark override to brand green here, unlike .sk-timeline: the chairman card is #104631 and overlaps this band, so the two would merge. */ .sk-committee__body { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 0 160px 100px; margin-top: -160px; } /* * 1280x424 with 40px of top padding and none at the bottom: the portrait is * 425 tall and bottom-aligned, so it fills the card's whole height and the 3px * it runs over the top is clipped by the radius. */ .sk-chair { display: flex; /* The portrait is on the inline-end side in Figma; `row-reverse` puts it there in both directions rather than pinning it to one edge. */ flex-direction: row-reverse; align-items: center; gap: 80px; width: 100%; max-width: 1280px; height: 424px; padding: 40px 80px 0; box-sizing: border-box; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 16px; /* Green in both frames, so brand colour rather than a token that would flip. Same call .sk-value-card makes. */ background: var(--sk-brand-deep); box-shadow: 0 2px 4px -2px rgba(16, 24, 40, 0.06), 0 4px 8px -2px rgba(16, 24, 40, 0.1); color: #fff; } .sk-chair__photo { align-self: flex-end; flex: none; width: 465px; max-width: 45%; height: 425px; object-fit: contain; object-position: bottom; } .sk-chair__text { display: flex; flex-direction: column; gap: 8px; } .sk-chair__kicker { color: var(--sk-green-200); } /* Sized by the display-sm-regular utility; core.css pins headings to a near-black literal that beats the card's inherited white, so the colour is restated here — the same call .sk-section__title makes. */ .sk-chair__name { margin: 0 0 8px; color: #fff; } .sk-chair__roles { margin: 0; } /* Two roles, one under the other — one

so it reads as a single sentence to a screen reader, blocks so it sets as two lines. */ .sk-chair__role { display: block; } /* ----------------------------------------------------------------- team -- */ .sk-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; width: 100%; max-width: 1280px; } /* 290x422. The card is the same colour as the page in the light frame — the shadow is what lifts it — so dark needs a card ground of its own. */ .sk-team-card { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 40px 24px; border-radius: 12px; background: var(--sk-gray-25); box-shadow: 0 2px 4px -2px rgba(16, 24, 40, 0.06), 0 4px 8px -2px rgba(16, 24, 40, 0.1); text-align: center; } .sk-error__message { display: flex; flex-direction: column; align-items: center; gap: 16px; } [data-theme='dark'] .sk-team-card { background: var(--background-card); } .sk-team-card__photo { width: 142px; height: 142px; border-radius: 50%; object-fit: cover; } /* * Figma fixes the role at 40 and the name at 48 so every "عرض المزيد" lands on * the same line. `min-height` keeps that alignment without clipping a name * that needs a third line. */ .sk-team-card__text { display: flex; flex-direction: column; gap: 8px; min-height: 96px; color: var(--text-default); } .sk-team-card__role { min-height: 40px; color: var(--sk-green-600); } /* The 600 green is a mid-tone picked against white; on the dark card it drops below contrast, so the same ramp's 200 stands in. */ [data-theme='dark'] .sk-team-card__role { color: var(--sk-green-200); } /* ------------------------------------------------------------ executive -- */ /* Full-bleed green band, everything centred. No bio trigger — the frame does not give the CEO one. */ .sk-exec { display: flex; flex-direction: column; align-items: center; gap: 80px; padding: 80px 160px; background: var(--sk-brand-deep); color: #fff; } .sk-exec__person { display: flex; flex-direction: column; align-items: center; gap: 24px; } .sk-exec__photo { width: 142px; height: 142px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 4px -2px rgba(16, 24, 40, 0.06), 0 4px 8px -2px rgba(16, 24, 40, 0.1); } .sk-exec__who { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 452px; text-align: center; } .sk-error__heading { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; color: var(--text-default); } .sk-error__text { margin: 0; font-size: 18px; line-height: 28px; color: var(--text-default); } /* The frame's message is one short line, so it never needed a measure. This site's 404 also carries the CMS's SupportingText, a full sentence, which would otherwise run the width of the section — held to the same 720px the section descriptions use. */ .sk-error__message { max-width: 720px; } /* core.css ships .dga-btn--primary-brand:visited, written for the