/* ========================================================================== site.css: the public site's one stylesheet. loads, in this order: Bootstrap, Font Awesome, fonts-ar.css (Arabic pages only), tokens.css, this file, then at most one page file from css/pages/. tokens.css comes first so every rule here can use the design tokens. The sections below keep the order the separate files used to load in, so the cascade is unchanged. Section partials no longer push their own CSS. ========================================================================== */ /* ========================================================================== Base: element defaults; h1-h6 sizes, and the .u-h1 ... .u-h6 classes that cmsHeadings() adds to shifted CMS headings so they keep their old size ========================================================================== */ html { scroll-behavior: smooth; font-size: 100%; } body { background: var(--surface); font-weight: 400; font-size: var(--fs-base); line-height: 1.6; color: var(--ink-muted); box-sizing: border-box; font-family: var(--font-body); } html, body { margin: 0; padding: 0; } /* clip (not hidden) so position:sticky keeps working and iOS cannot pan sideways */ html, body { overflow-x: clip; } /* * Base typography: plain element selectors (specificity 0,0,1, no * !important) so they beat Bootstrap's reboot but any component class wins * and can size its own text. */ h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: 1.25; } h1 { font-size: clamp(2rem, 3.8vw, 3rem); } h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); } h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); } h4 { font-size: clamp(1.3rem, 2.1vw, 1.75rem); } h5 { font-size: clamp(1.1rem, 1.7vw, 1.4rem); } h6 { font-size: clamp(1rem, 1.35vw, 1.15rem); } /* Labels that used to be headings (dates, kickers, figures) keep the look of the heading they replaced:

. */ .u-heading-like { margin-top: 0; margin-bottom: .5rem; font-weight: 500; line-height: 1.25; } .u-h1 { font-size: clamp(2rem, 3.8vw, 3rem); } .u-h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); } .u-h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); } .u-h4 { font-size: clamp(1.3rem, 2.1vw, 1.75rem); } .u-h5 { font-size: clamp(1.1rem, 1.7vw, 1.4rem); } .u-h6 { font-size: clamp(1rem, 1.35vw, 1.15rem); } p, li { line-height: 1.7; } ul { padding: 0; margin: 0; } ul li { list-style: none; } a { text-decoration: none; color: var(--ink-muted); } button { border: none; } /* Blog Section heading (sections/blog). */ .section-title2 :is(h2, h4) { font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 700; line-height: 1.2; color: var(--ink); text-transform: uppercase; } .section-title2 :is(p, h6) { display: inline-block; margin: 0; padding-block-end: 12px; font-size: .875rem; font-weight: 700; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--violet-600); } .section-title2 :is(h2, h4)::after { content: ''; height: 2px; width: 80px; background: var(--gradient-brand); display: block; margin: 20px auto 0; } /* ========================================================================== CMS section partials with pre-redesign markup: About Section (sections/about_section) and Blog Section (sections/blog). Admin > Manage Pages can add both to any page. The "Blog cards" rules further down override part of the Blog Section rules here, so keep this order. ========================================================================== */ /* About Section */ .about-text :is(h2, h6) { font-size: 20px; font-weight: 700; line-height: 26px; text-transform: uppercase; margin: 0; color: var(--ink); padding: 10px 0; } .about-text :is(h2, h6) i { font-size: 20px; margin-inline-end: 10px; } .about-text ul li { position: relative; padding: 5px 0; padding-inline-start: 25px; } .about-text ul li span { position: absolute; inset-inline-start: 0; content: ''; height: 10px; border-radius: 50%; width: 10px; background: var(--ink-muted); display: inline-block; top: 12px; } .about-image img { width: 100%; height: auto; } .about-box { background: var(--tint); border-radius: 10px; height: 100%; } .about-box img { width: 100%; } /* Blog Section cards */ .blog-box .blog-txt { background: var(--tint); padding: 15px 10px; border-radius: 0px 0px 10px 10px; } .blog-box .blog-txt span { color: var(--ink-muted); font-weight: 500; font-size: .875rem; padding: 20px 0px; margin-bottom: 20px !important; } .blog-box .blog-txt p { color: var(--ink); font-size: 16px; line-height: 28px; min-height: 170px; } .blog-box .blog-txt a { color: var(--ink); font-weight: bold; font-size: 16px; line-height: 24px; font-style: italic; } .blog-box img { width: 100%; height: 270px; border-radius: 10px 10px 0px 0px; } /* ========================================================================== User area, auth and maintenance pages (they share the public shell): .btn-base and .custom-card / .custom--card ========================================================================== */ .btn-base, .btn.btn-base { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .65rem 1.4rem; border: 0; border-radius: 10px; background: linear-gradient(135deg, var(--violet-700), var(--violet-600)); color: var(--on-action); font-weight: 600; letter-spacing: .01em; transition: transform .15s ease, box-shadow .2s ease, filter .2s ease; } .btn-base:hover, .btn-base:focus-visible { color: var(--on-action); filter: brightness(1.06); box-shadow: 0 10px 22px -10px rgba(109, 40, 217, .7); } .btn-base:active { transform: translateY(1px); } .btn-base:disabled, .btn-base.disabled { opacity: .65; pointer-events: none; } .custom-card, .custom--card { background: var(--surface); color: var(--ink); border: 1px solid var(--ui-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .custom-card .card-body, .custom--card .card-body { padding: 2rem; } .custom-card h1, .custom-card h2, .custom-card h3, .custom-card h4, .custom-card h5, .custom--card h1, .custom--card h2, .custom--card h3, .custom--card h4, .custom--card h5 { color: var(--ink); } .custom-card a:not(.btn), .custom--card a:not(.btn) { color: var(--violet-700); font-weight: 500; } .custom-card .form-control, .custom-card .form-select, .custom--card .form-control, .custom--card .form-select { min-height: 46px; border-radius: 10px; border-color: var(--ui-line); } .custom-card .form-control:focus, .custom-card .form-select:focus, .custom--card .form-control:focus, .custom--card .form-select:focus { border-color: var(--violet-600); box-shadow: 0 0 0 .2rem rgba(124, 58, 237, .18); } @media (prefers-reduced-motion: reduce) { .btn-base { transition: none; } } /* Blog Section heading on small phones. */ @media only screen and (max-width:575px) { .section-title2 :is(p, h6) { font-size: 18px; padding-bottom: 6px; } .section-title2 :is(h2, h4) { font-size: 28px; } } /* ========================================================================== Base: selection, focus, transitions, reduced motion (were the non-token rules in tokens.css) ========================================================================== */ ::selection { background: var(--violet-200); color: var(--ink); } a, button, .btn { transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== Page shell: sticky footer, site header, mobile drawer, footer, shared utilities (scroll rows, video facade). Uses tokens.css. Logical properties throughout, so the same rules serve LTR and RTL. ========================================================================== */ /* Footer sits at the bottom of short pages (login, success, ...). */ body { min-height: 100vh; display: flex; flex-direction: column; } body > .site-footer { margin-block-start: auto; } /* -------------------------------------------------------------------------- Skip link (first focusable element on every page) -------------------------------------------------------------------------- */ .c-skip-link { position: absolute; inset-block-start: var(--sp-2); inset-inline-start: var(--sp-2); z-index: calc(var(--z-header) + 10); padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-pill); background: var(--surface); color: var(--action); font-weight: 600; text-decoration: underline; transform: translateY(-200%); transition: none; } .c-skip-link:focus, .c-skip-link:focus-visible { transform: none; color: var(--action); } /* The main landmark takes focus from the skip link without a visible ring. */ #main:focus { outline: none; } /* Anchored sections clear the sticky header. */ [id] { scroll-margin-top: calc(var(--header-h) + 16px); } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .site-header { position: sticky; inset-block-start: 0; z-index: var(--z-header); width: 100%; background: var(--night-900); border-block-end: 1px solid rgba(255, 255, 255, .08); color: var(--on-night); } .site-header__inner { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--header-h); padding-block: var(--sp-2); } .site-header__logo { display: inline-flex; align-items: center; flex-shrink: 0; min-height: var(--tap-min); } .site-header__logo img { width: 112px; height: auto; display: block; } .site-nav { flex: 1 1 auto; justify-content: center; min-width: 0; } .site-nav__list { display: flex; align-items: center; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } .site-nav__item { position: relative; display: flex; align-items: center; } .site-nav__link { position: relative; display: inline-flex; align-items: center; min-height: var(--tap-min); border: 0; border-radius: var(--radius-sm); background: transparent; color: rgba(255, 255, 255, .86); font-family: var(--font-body); font-size: .9375rem; font-weight: 500; line-height: 1.2; white-space: nowrap; text-decoration: none; } .site-nav__link { padding: var(--sp-2); } /* "More": a button with a chevron that opens the other pages. */ .site-nav__more { gap: var(--sp-2); cursor: pointer; } .site-nav__more i { font-size: .625rem; color: rgba(255, 255, 255, .8); transition: transform var(--dur) var(--ease-out); } .site-nav__link:hover, .site-nav__more[aria-expanded="true"] { color: var(--on-night); background: rgba(255, 255, 255, .08); } .site-nav__more[aria-expanded="true"] i { transform: rotate(180deg); } /* You are here: the hub link, including when one of its pages is open. */ .site-nav__link[aria-current] { color: var(--on-night); } .site-nav__link[aria-current]::after { content: ""; position: absolute; inset-inline: var(--sp-2); inset-block-end: 4px; height: 2px; border-radius: 2px; background: var(--on-night-muted); } .site-nav__menu { min-width: 240px; margin-block-start: var(--sp-2) !important; padding: var(--sp-2); border: 1px solid var(--ui-line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-e2); } .site-nav__menu .dropdown-item { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--tap-min); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); color: var(--ink); font-size: .9375rem; font-weight: 500; white-space: normal; } .site-nav__menu .dropdown-item i { color: var(--action); } .site-nav__menu .dropdown-item:hover, .site-nav__menu .dropdown-item:focus { background: var(--tint); color: var(--action); } .site-nav__menu .dropdown-item[aria-current] { background: var(--tint-strong); color: var(--action); font-weight: 600; } .site-header__actions { display: flex; align-items: center; gap: var(--sp-2); margin-inline-start: auto; } .site-header__lang { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-min); min-width: var(--tap-min); padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--radius-pill); color: var(--on-night); font-size: .9375rem; font-weight: 500; line-height: 1.2; white-space: nowrap; } .site-header__lang:hover, .site-header__lang:focus-visible { color: var(--on-night); border-color: var(--on-night-muted); background: rgba(255, 255, 255, .08); } .site-header__burger { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); padding: 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius-sm); background: transparent; color: var(--on-night); font-size: 1.25rem; line-height: 1; } .site-header__burger:hover { background: rgba(255, 255, 255, .1); } @media (max-width: 575.98px) { .site-header__logo img { width: 92px; } } /* -------------------------------------------------------------------------- Phone / tablet drawer (Bootstrap offcanvas-end: it opens from the burger's side in both languages; the RTL build mirrors "end") -------------------------------------------------------------------------- */ .site-drawer.offcanvas { --bs-offcanvas-width: min(360px, 90vw); --bs-offcanvas-bg: var(--night-900); --bs-offcanvas-color: var(--on-night); height: 100dvh; border-inline-start: 1px solid rgba(255, 255, 255, .08); color: var(--on-night); } .site-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-block-end: 1px solid rgba(255, 255, 255, .08); } .site-drawer__langs { display: inline-grid; grid-auto-flow: column; gap: var(--sp-1); padding: var(--sp-1); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-pill); } .site-drawer__langs a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: var(--tap-min); padding-inline: var(--sp-4); border-radius: var(--radius-pill); color: rgba(255, 255, 255, .86); font-size: .9375rem; font-weight: 500; } .site-drawer__langs a[aria-current] { background: var(--surface); color: var(--night-900); } .site-drawer__close { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); border: 0; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .08); color: var(--on-night); font-size: 1.1rem; } .site-drawer__close:hover { background: rgba(255, 255, 255, .16); } .site-drawer__body { display: flex; flex-direction: column; padding: 0; overflow: hidden; } .site-drawer__nav { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-2) var(--sp-3); } .site-drawer__list { margin: 0; padding: 0; list-style: none; } .site-drawer__link { display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); color: var(--on-night); font-size: 1.0625rem; font-weight: 500; line-height: 1.3; cursor: pointer; list-style: none; } .site-drawer__link:hover { color: var(--on-night); background: rgba(255, 255, 255, .06); } .site-drawer__link[aria-current] { background: rgba(196, 181, 253, .14); color: var(--on-night); box-shadow: inset 3px 0 0 var(--on-night-muted); } [dir="rtl"] .site-drawer__link[aria-current] { box-shadow: inset -3px 0 0 var(--on-night-muted); } /* The page's icon in a small tinted square. */ .site-drawer__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-sm); background: rgba(196, 181, 253, .14); color: var(--violet-100); font-size: .9375rem; } .site-drawer__footer { flex: none; padding: var(--sp-3) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom)); border-block-start: 1px solid rgba(255, 255, 255, .08); } .site-drawer__footer .c-btn { width: 100%; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--footer-bg); color: rgba(255, 255, 255, .8); padding-block: var(--sp-16) 0; font-size: .9375rem; } .site-footer a:not(.c-btn) { color: rgba(255, 255, 255, .8); } .site-footer a:not(.c-btn):hover { color: var(--on-night); } .site-footer__grid { display: grid; /* brand, About, Work & Impact, Media Center, Contact (wider: email address) */ grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: var(--sp-10); padding-block-end: var(--sp-12); } .site-footer__logo { display: inline-flex; min-height: var(--tap-min); align-items: center; } .site-footer__logo img { width: 120px; height: auto; display: block; } .site-footer__tagline { max-width: 34ch; margin: var(--sp-4) 0 var(--sp-5); color: rgba(255, 255, 255, .8); line-height: 1.7; } .site-footer__social { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-5) 0 0; padding: 0; list-style: none; } .site-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; color: var(--on-night); } .site-footer__social a:hover { border-color: var(--on-night-muted); background: rgba(255, 255, 255, .08); } /* A column:

so phones can fold it; open on wider screens. */ .site-footer__group > summary { display: flex; align-items: center; justify-content: space-between; list-style: none; pointer-events: none; } .site-footer__group > summary::-webkit-details-marker { display: none; } .site-footer__group > summary .fa-chevron-down { display: none; } .site-footer__title { margin: 0 0 var(--sp-3); color: var(--on-night); font-family: var(--font-body); font-size: .875rem; font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; } .site-footer__list { margin: 0; padding: 0; list-style: none; } .site-footer__list a, .site-footer__list span { display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 100%; min-height: var(--tap-min); line-height: 1.4; overflow-wrap: anywhere; } .site-footer__list i { color: var(--on-night-muted); } /* Call / WhatsApp / Email: one row of big buttons on phones. */ .site-footer__actions { display: none; } .site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-6); padding-block: var(--sp-4); border-block-start: 1px solid rgba(255, 255, 255, .08); font-size: .875rem; } .site-footer__copy { margin: 0; color: rgba(255, 255, 255, .8); } .site-footer__legal { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); margin: 0; padding: 0; list-style: none; } .site-footer__legal a { display: inline-flex; align-items: center; min-height: var(--tap-min); } @media (max-width: 1199.98px) { .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .site-footer__brand { grid-column: 1 / -1; } } @media (max-width: 767.98px) { .site-footer { padding-block-start: var(--sp-6); } .site-footer__logo img { width: 96px; } .site-footer__grid { grid-template-columns: 1fr; gap: 0; padding-block-end: var(--sp-4); } .site-footer__brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-block-end: var(--sp-3); } .site-footer__tagline, .site-footer__brand .c-btn { display: none; } .site-footer__social { margin: 0; } .site-footer__social a { width: 40px; height: 40px; } /* Widths follow the labels, so the long Arabic "Email" label keeps to one line. */ .site-footer__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-end: var(--sp-2); } .site-footer__actions a { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: var(--sp-2); min-width: 0; white-space: nowrap; min-height: 48px; padding: var(--sp-1) var(--sp-2); font-size: .875rem; line-height: 1.25; text-align: center; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius-pill); color: var(--on-night); font-weight: 600; } .site-footer__group { border-block-start: 1px solid rgba(255, 255, 255, .08); } .site-footer__group > summary { min-height: var(--tap-min); pointer-events: auto; cursor: pointer; } .site-footer__group > summary .fa-chevron-down { display: inline-block; color: var(--on-night-muted); font-size: .75rem; transition: transform var(--dur) var(--ease-out); } .site-footer__group[open] > summary .fa-chevron-down { transform: rotate(180deg); } .site-footer__title { margin: 0; } .site-footer__group .site-footer__list { padding-block-end: var(--sp-2); } .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 0; padding-block: var(--sp-3); } .site-footer__legal { gap: 0 var(--sp-4); } } /* -------------------------------------------------------------------------- Phone action bar: Book + WhatsApp, below 992px, after the first screen. site.js shows it (html.js); without JS it simply stays visible. -------------------------------------------------------------------------- */ .c-action-bar { display: none; } @media (max-width: 991.98px) { .c-action-bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-action-bar); display: flex; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4) calc(var(--sp-2) + env(safe-area-inset-bottom)); min-height: calc(56px + env(safe-area-inset-bottom)); background: var(--surface); border-block-start: var(--border-e0); box-shadow: var(--shadow-e2); transition: transform var(--dur) var(--ease-out), visibility 0s linear var(--dur); } .js .c-action-bar { transform: translateY(110%); visibility: hidden; } .js .c-action-bar.is-shown { transform: none; visibility: visible; transition: transform var(--dur) var(--ease-out), visibility 0s; } .c-action-bar .c-btn { flex: 1 1 0; min-height: 44px; } .c-action-bar .c-btn--whatsapp { flex: 0 1 auto; } /* Reserve the bar's height so it never covers the end of the page. */ body:has(> .c-action-bar) { padding-block-end: calc(56px + env(safe-area-inset-bottom)); } } /* -------------------------------------------------------------------------- Floating WhatsApp button (footer partial): the end corner, so the right in English and the left in Arabic. On phones it steps aside while the action bar (which has its own WhatsApp button) is showing, and while a form field has focus, so it never covers what someone is typing. -------------------------------------------------------------------------- */ .c-wa-float { position: fixed; inset-inline-end: var(--sp-5); inset-block-end: calc(var(--sp-5) + env(safe-area-inset-bottom)); z-index: var(--z-action-bar); display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--whatsapp); color: var(--on-action); font-size: 1.75rem; text-decoration: none; box-shadow: var(--shadow-e2); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out), visibility 0s; } .c-wa-float:hover { background: var(--success); color: var(--on-action); transform: translateY(-2px); box-shadow: var(--shadow-e3); } @media (max-width: 991.98px) { .c-wa-float { inset-inline-end: var(--sp-4); inset-block-end: calc(var(--sp-4) + env(safe-area-inset-bottom)); width: 52px; height: 52px; font-size: 1.625rem; } /* Without JS the action bar stays visible: sit above it. */ html:not(.js) body:has(> .c-action-bar) > .c-wa-float { inset-block-end: calc(56px + var(--sp-4) + env(safe-area-inset-bottom)); } .js body:has(> .c-action-bar.is-shown) > .c-wa-float, body:has(:is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), textarea, select):focus) > .c-wa-float { opacity: 0; visibility: hidden; transform: translateY(8px); transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur); } } @media print { .c-wa-float { display: none; } } /* -------------------------------------------------------------------------- Toasts (site.js notify()) -------------------------------------------------------------------------- */ .c-toast-region { position: fixed; inset-block-start: calc(var(--header-h) + var(--sp-3)); inset-inline-end: var(--sp-4); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--sp-2); width: min(380px, calc(100vw - 2 * var(--sp-4))); pointer-events: none; } .c-toast { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: var(--border-e0); border-inline-start: 4px solid var(--toast-color, var(--info)); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-e3); color: var(--ink); font-size: .9375rem; line-height: 1.5; pointer-events: auto; animation: c-toast-in var(--dur) var(--ease-out); } .c-toast--success { --toast-color: var(--success); } .c-toast--error { --toast-color: var(--danger); } .c-toast--warning { --toast-color: var(--warning); } .c-toast--info { --toast-color: var(--info); } .c-toast__icon { flex: none; margin-block-start: 3px; color: var(--toast-color, var(--info)); } .c-toast__text { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; } .c-toast__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -4px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-muted); } .c-toast__close:hover { background: var(--surface-muted); } .c-toast.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } @keyframes c-toast-in { from { opacity: 0; transform: translateY(-6px); } } /* -------------------------------------------------------------------------- Horizontal scroll-snap rows for long card lists on phones. Add .snap-row to a grid/row container; its direct children become slides. -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .snap-row { display: flex !important; flex-wrap: nowrap !important; gap: 14px; margin-inline: calc(-1 * var(--snap-bleed, 12px)) !important; padding: 4px var(--snap-bleed, 12px) 14px !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--snap-bleed, 12px); scrollbar-width: thin; -webkit-mask-image: linear-gradient(to right, transparent 0, var(--mask-opaque) 16px, var(--mask-opaque) calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, var(--mask-opaque) 16px, var(--mask-opaque) calc(100% - 28px), transparent 100%); } [dir="rtl"] .snap-row { -webkit-mask-image: linear-gradient(to left, transparent 0, var(--mask-opaque) 16px, var(--mask-opaque) calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to left, transparent 0, var(--mask-opaque) 16px, var(--mask-opaque) calc(100% - 28px), transparent 100%); } .experience-wrap, .sectors-wrap { --snap-bleed: 14px; } .snap-row > * { flex: 0 0 82% !important; max-width: 82% !important; width: auto !important; margin: 0 !important; scroll-snap-align: start; } } /* -------------------------------------------------------------------------- Screen-reader text inside a link ("Read More") is absolutely positioned. With no positioned ancestor its containing block is , so in a card rail it escaped the card's clipping and widened the page; Arabic phones then opened the page scrolled sideways onto a blank screen. Anchor it to its own link. -------------------------------------------------------------------------- */ a:has(> .visually-hidden) { position: relative; } /* Same, for browsers without :has() (kept separate: an unsupported selector would drop the whole rule). */ .blog-box .blog-txt a { position: relative; } /* -------------------------------------------------------------------------- Click-to-load YouTube facade -------------------------------------------------------------------------- */ .yt-facade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: inherit; overflow: hidden; background: var(--media-bg); cursor: pointer; } .yt-facade img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; transition: opacity var(--dur) var(--ease-out), transform .4s var(--ease-out); } .yt-facade__play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--gradient-brand); color: var(--on-action); font-size: 1.5rem; box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .6); } .yt-facade__play i { margin-inline-start: 4px; } [dir="rtl"] .yt-facade__play i { margin-inline-start: 0; margin-inline-end: 4px; } .yt-facade:hover img, .yt-facade:focus-visible img { opacity: 1; transform: scale(1.02); } .yt-facade__frame { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: inherit; } /* Small utilities */ .mw-600 { max-width: 600px; } /* Directional icons point the other way in RTL (they need a box for the transform). */ .icon-dir { display: inline-block; } [dir="rtl"] .icon-dir { transform: scaleX(-1); } /* ========================================================================== Arabic: no capitals, letter-spacing, italics or justified text ========================================================================== */ :lang(ar) .section-title2 :is(h2, h4), :lang(ar) .section-title2 :is(p, h6), :lang(ar) .site-footer__title { letter-spacing: 0; text-transform: none; } /* Arabic is never set in italic or justified (fonts-ar.css also removes letter-spacing and upper-casing on Arabic pages). */ :lang(ar) :is(em, i:not([class*="fa"]), cite, dfn, var, address, .fst-italic) { font-style: normal; } :lang(ar) [style*="justify"] { text-align: start !important; } /* ========================================================================== Experience: sections/expreince (was components/experience.css) ========================================================================== */ /* Moved verbatim from resources/views/sections/expreince.blade.php */ .experience-section { background: var(--surface-soft); padding: 52px 0 56px; } .experience-wrap { width: min(1280px, 100%); margin: 0 auto; padding: 0 20px; } .experience-section__title { text-align: center; font-family: var(--font-display); font-size: clamp(1.85rem, 4vw, 3rem); font-weight: 700; color: var(--ink); line-height: 1.08; margin-bottom: 42px; } .experience-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 22px; flex-wrap: wrap; } .experience-left { max-width: 610px; } .experience-left h2 { font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 2rem); line-height: 1.12; font-weight: 700; color: var(--ink); margin-bottom: 12px; } .experience-left .divider { width: 100%; max-width: 420px; height: 1px; background: var(--ui-line); margin-bottom: 10px; } .experience-left p { font-size: 1rem; line-height: 1.58; color: var(--ink-muted); max-width: 595px; margin: 0; } .cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .experience-card { background: var(--surface); border: 1px solid var(--ui-line); border-radius: 14px; padding: 20px 18px 18px; min-height: 212px; transition: 0.3s ease, box-shadow 0.3s ease; } .experience-card.active { border: 1px solid var(--violet-300); box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.2); } .experience-card:hover { border: 1px solid var(--violet-300); box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.2); } .experience-icon { width: 44px; height: 44px; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--violet-50); color: var(--violet-700); font-size: 18px; line-height: 1; transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); } .experience-card.active .experience-icon, .experience-card:hover .experience-icon { background: var(--violet-600); color: var(--on-action); } .experience-icon i { font-size: 18px; } .experience-card h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; color: var(--ink); margin-bottom: 8px; } .experience-card p { font-size: .9375rem; line-height: 1.6; color: var(--ink-muted); margin: 0; } @media (max-width: 1100px) { .experience-wrap { padding: 0 16px; } .cards-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .experience-section { padding: 42px 0 48px; } .experience-wrap { padding: 0 14px; } .experience-section__title { margin-bottom: 30px; } .cards-grid { grid-template-columns: 1fr; } .experience-top { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 20px; } .experience-card { min-height: 0; } } /* ========================================================================== Sectors: sections/sectors (was components/sectors.css) ========================================================================== */ /* Moved verbatim from resources/views/sections/sectors.blade.php */ .sectors-section { background: var(--surface); padding: 52px 0 62px; } .sectors-wrap { width: min(1280px, 100%); margin: 0 auto; padding: 0 20px; } .sectors-section__title { text-align: center; font-family: var(--font-display); font-size: clamp(1.85rem, 4vw, 3rem); font-weight: 700; color: var(--ink); line-height: 1.08; margin-bottom: 42px; } .sectors-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 24px; flex-wrap: wrap; } .sectors-left { max-width: 760px; } .sectors-left h2 { font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 2rem); line-height: 1.12; font-weight: 700; color: var(--ink); margin-bottom: 12px; } .sectors-divider { width: 100%; max-width: 500px; height: 1px; background: var(--ui-line); margin-bottom: 12px; } .sectors-left p { font-size: 1rem; line-height: 1.6; color: var(--ink-muted); margin: 0; } .sectors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .sectors-card { background: var(--surface-soft); border: 1px solid var(--ui-line); border-radius: 14px; padding: 20px 18px 18px; min-height: 210px; transition: 0.25s ease, box-shadow 0.25s ease; } .sectors-card:hover { border-color: var(--ui-line); box-shadow: 0 10px 24px rgba(24, 52, 84, 0.08); } .sectors-icon { width: 44px; height: 44px; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; color: var(--violet-700); font-size: 18px; line-height: 1; border-radius: var(--radius-md); background: var(--violet-50); transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); } .sectors-card:hover .sectors-icon { background: var(--violet-600); color: var(--on-action); } .sectors-card h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; color: var(--ink); margin-bottom: 8px; } .sectors-card p { font-size: .9375rem; line-height: 1.6; color: var(--ink-muted); margin: 0; } @media (max-width: 1100px) { .sectors-wrap { padding: 0 16px; } .sectors-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .sectors-section { padding: 44px 0 52px; } .sectors-wrap { padding: 0 14px; } .sectors-section__title { margin-bottom: 30px; } .sectors-top { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 20px; } .sectors-grid { grid-template-columns: 1fr; } .sectors-card { min-height: 0; } } /* ========================================================================== Blog cards: sections/blog (was components/blog-cards.css) ========================================================================== */ /* Blog cards (resources/views/sections/blog.blade.php) */ /* The section can sit straight on the page background (/blogs, CMS pages): give it its own light surface. */ .blog-section { background: var(--surface-soft); } .blog-box { height: 100%; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); } .blog-box img { width: 100%; height: auto; aspect-ratio: 500 / 263; object-fit: cover; border-radius: 0; } .blog-box .blog-txt { flex: 1; display: flex; flex-direction: column; padding: 16px; border-radius: 0; } .blog-box .blog-txt span:not(.rm-arrow) { display: block; padding: 0; margin: 0 0 8px !important; font-size: .875rem; color: var(--ink-muted); } .blog-box .blog-txt p { flex: 1; min-height: 0; margin: 0 0 8px; font-size: 1rem; line-height: 1.55; } .blog-box .blog-txt a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; align-self: flex-start; font-style: normal; font-size: .9375rem; } /* ========================================================================== Slider: sections/slider (was components/slider.css) ========================================================================== */ /* Moved verbatim from resources/views/sections/slider.blade.php */ #carouselExampleControls { height: 389px !important; } .slider-image { height: 389px !important; border-top: 1px solid var(--ui-line); border-bottom: 1px solid var(--ui-line); } /* Responsive adjustment */ @media (max-width: 768px) { .slider-image { height: 200px !important; } #carouselExampleControls { height: 200px !important; } } @media (max-width: 576px) { .slider-image { height: 180px; } } /* ========================================================================== Media coverage: sections/media_coverage (was components/media-coverage.css) ========================================================================== */ /* Moved verbatim from resources/views/sections/media_coverage.blade.php */ .media-coverage-social-title h3{ font-weight: 700; font-size: 36px; line-height: 46px; color: var(--action); } .media-coverage-social-box{ margin-top: 20px; margin-bottom: 50px; text-align: center; width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; background: linear-gradient(119.72deg, var(--tint) -6.12%, var(--tint-strong) 108.98%); padding: 15px 20px; border-radius: 10px; } .media-coverage-social-box a{ padding: 10px 45px; text-decoration: none; border-inline-end: 1px solid var(--ui-line); } .media-coverage-social-box a:first-child{ padding-inline-start: 20px !important; } .media-coverage-social-box a:last-child{ border-inline-end: none; padding-inline-end: 20px !important; } .media-coverage-social-box a img{ width: 50px; height: 50px; } @media only screen and (max-width: 767px) { .media-coverage-social-box { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .media-coverage-social-box a { padding: 10px 0; border-inline-end: none; width: auto !important; margin: 0 5px; text-align: center; } .media-coverage-social-box a img{ width: 40px; height: 40px; } } /* ========================================================================== Form primitives: x-web.field, x-web.error-summary, x-web.honeypot (was components/forms.css) ========================================================================== */ /* ========================================================================== Public form primitives Used by , , and the public forms built on them (contact, join, partnerships, membership, appointment, comments). Colours and shapes come from tokens.css. Logical properties only, so the same rules work in LTR and RTL. ========================================================================== */ /* ---- Layout helpers ---------------------------------------------------- */ .wf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } .wf-section-title { font-size: 1rem; font-weight: 700; color: var(--violet-800); letter-spacing: .02em; margin-block: 26px 14px; padding-block-end: 8px; border-block-end: 1px solid var(--ui-line); text-align: start; } .wf-section-title:first-child { margin-block-start: 0; } .wf-note { font-size: var(--fs-sm); color: var(--ink-muted); margin-block: 0 16px; text-align: start; } /* ---- Field ------------------------------------------------------------- */ .wf-field { display: flex; flex-direction: column; gap: 6px; margin-block-end: 18px; min-inline-size: 0; } .wf-label { font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; color: var(--ink); text-align: start; margin: 0; } .wf-req { color: var(--danger); font-weight: 700; margin-inline-start: 3px; } .wf-opt { font-size: var(--fs-xs); font-weight: 400; color: var(--ink-muted); margin-inline-start: 4px; } /* Two classes so page stylesheets (".x-form input") can't override the look. */ .wf-field .wf-control { inline-size: 100%; min-block-size: 48px; padding-block: 11px; padding-inline: 14px; font: inherit; font-size: var(--fs-base); /* 16px: no zoom-on-focus in iOS Safari */ line-height: 1.5; color: var(--ink); background: var(--surface); border: 1px solid var(--ink-subtle); border-radius: var(--radius-md); box-shadow: none; outline: none; text-align: start; transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .wf-field .wf-control[dir="ltr"] { text-align: start; } .wf-field textarea.wf-control { min-block-size: 120px; resize: vertical; } .wf-field select.wf-control { cursor: pointer; appearance: auto; } .wf-field .wf-control::placeholder { color: var(--ink-subtle); opacity: 1; } .wf-field .wf-control:hover { border-color: var(--ink-muted); } .wf-field .wf-control:focus, .wf-field .wf-control:focus-visible { border-color: var(--violet-600); box-shadow: var(--focus-ring); background: var(--surface); outline: none; } /* Error state */ .wf-field .wf-control.is-invalid { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 4%, var(--surface)); } .wf-field .wf-control.is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 28%, transparent); } .wf-help, .wf-error { margin: 0; font-size: var(--fs-xs); line-height: 1.5; text-align: start; } .wf-help { color: var(--ink-muted); } .wf-error { display: flex; align-items: flex-start; gap: 6px; color: var(--danger); font-weight: 500; } .wf-error i { margin-block-start: 3px; } /* ---- Radio / checkbox groups ------------------------------------------ */ .wf-fieldset { border: 0; padding: 0; margin: 0 0 18px; min-inline-size: 0; } .wf-fieldset > .wf-legend { float: none; inline-size: auto; padding: 0; margin-block-end: 6px; font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; color: var(--ink); text-align: start; } .wf-choices { display: flex; flex-wrap: wrap; gap: 4px 16px; } .wf-choices--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; } /* The whole label is the hit area: at least 44px tall. */ .wf-choice { display: flex; align-items: center; gap: 10px; min-block-size: 44px; padding-inline: 6px 10px; margin: 0; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 500; line-height: 1.4; color: var(--ink); cursor: pointer; text-align: start; } .wf-choice:hover { background: var(--surface-soft); } .wf-choice input[type="radio"], .wf-choice input[type="checkbox"] { flex: none; inline-size: 20px; block-size: 20px; min-block-size: 0; margin: 0; padding: 0; accent-color: var(--violet-600); cursor: pointer; } .wf-choice input[type="radio"]:focus-visible, .wf-choice input[type="checkbox"]:focus-visible { outline: 2px solid var(--violet-600); outline-offset: 2px; } .wf-fieldset.has-error .wf-legend { color: var(--danger); } /* ---- Error summary ----------------------------------------------------- */ .wf-summary { margin-block-end: 22px; padding-block: 14px; padding-inline: 16px; background: color-mix(in srgb, var(--danger) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); border-inline-start: 4px solid var(--danger); border-radius: var(--radius-md); color: var(--ink); text-align: start; } .wf-summary:focus { outline: 2px solid var(--danger); outline-offset: 2px; } .wf-summary__title { margin: 0 0 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--danger); } .wf-summary__list { margin: 0; padding-inline-start: 1.25em; font-size: var(--fs-sm); line-height: 1.6; } /* ---- Submit ------------------------------------------------------------ */ /* ---- Accessibility helpers -------------------------------------------- */ .wf-sr-only { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Honeypot: off-screen for people, still in the DOM for bots. */ .wf-hp { /* Visually hidden trap field: clipped, not moved off-screen (no page overflow). */ position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (max-width: 640px) { .wf-row { grid-template-columns: 1fr; } } /* ========================================================================== Contact / join form wrapper: x-web.join-form, /contact ========================================================================== */ .jf-form { text-align: start; } /* ========================================================================== /any-request shell (was components/request-form.css) ========================================================================== */ /* /any-request page shell. The form itself is (form primitives above). */ .rf-page { padding-block: 60px 90px; background: var(--surface); } @media (max-width: 600px) { .rf-page { padding-block: 40px 64px; } } /* ========================================================================== "Request received" modal (was components/success-modal.css) ========================================================================== */ /* Shared "request received" modal (join form, partnerships, request form, home). Markup: .modal-content.success-modal > .modal-body .success-modal__icon .success-modal__title (h2/h4) p.success-modal__text .success-modal__ref > small + strong p.success-modal__sign .btn */ .success-modal { border: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(28, 22, 49, .2); } .success-modal .modal-body { padding: 3rem 1.5rem; text-align: center; } .success-modal__icon { display: inline-grid; place-items: center; inline-size: 72px; block-size: 72px; margin-block-end: 1rem; border-radius: 50%; background: var(--violet-100); color: var(--violet-700); font-size: 32px; } .success-modal__title { font-size: 1.375rem; line-height: 1.5; font-weight: 700; color: var(--ink); margin-block-end: .75rem; } .success-modal__text { color: var(--ink-muted); font-size: 15px !important; line-height: 1.7; margin-block-end: .5rem; } .success-modal__text:last-of-type { margin-block-end: 1.25rem; } .success-modal__ref { display: inline-block; margin-block-end: 1.25rem; padding-block: .875rem; padding-inline: 1.5rem; border-radius: var(--radius-md); background: var(--surface-muted); } .success-modal__ref small { display: block; margin-block-end: .25rem; font-size: 12px; color: var(--ink-muted); } .success-modal__ref strong { font-size: 20px; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; direction: ltr; unicode-bidi: isolate; } .success-modal__sign { color: var(--ink-subtle); font-size: 13px !important; margin-block-end: 1.25rem; } .success-modal__close { display: flex; margin-inline: auto; min-inline-size: 140px; } /* ========================================================================== Components (c- BEM). Blade: resources/views/components/web/*.blade.php. Design tokens only, logical properties only. ========================================================================== */ /* ---- Keyboard focus: violet-700 on light, violet-300 on night ----------- */ :focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); } [data-surface="night"] :focus-visible { outline-color: var(--focus-color-on-dark); } /* ---- c-btn ---------------------------------------------------------------- : primary | secondary | link | on-dark; sm | lg. 48px tall (44px for sm). States: hover, focus-visible, active, disabled / aria-disabled, loading (.is-loading, set by form-submit.js). */ .c-btn { /* positioned: a .visually-hidden label inside must not escape to */ position: relative; --btn-bg: var(--action); --btn-fg: var(--on-action); --btn-border: var(--action); --btn-bg-hover: var(--action-hover); --btn-fg-hover: var(--on-action); --btn-border-hover: var(--action-hover); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--control-h); padding: var(--sp-2) var(--sp-6); border: 1px solid var(--btn-border); border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .c-btn:hover, .c-btn:focus-visible { background: var(--btn-bg-hover); border-color: var(--btn-border-hover); color: var(--btn-fg-hover); } .c-btn:active { transform: translateY(1px); } .c-btn--secondary { --btn-bg: transparent; --btn-fg: var(--action); --btn-border: var(--action); --btn-bg-hover: var(--tint); --btn-fg-hover: var(--action-hover); --btn-border-hover: var(--action-hover); } .c-btn--on-dark { --btn-bg: var(--surface); --btn-fg: var(--night-900); --btn-border: var(--surface); --btn-bg-hover: var(--violet-100); --btn-fg-hover: var(--night-900); --btn-border-hover: var(--violet-100); } .c-btn--ghost-on-dark { --btn-bg: transparent; --btn-fg: var(--on-night); --btn-border: rgba(255, 255, 255, .5); --btn-bg-hover: rgba(255, 255, 255, .1); --btn-fg-hover: var(--on-night); --btn-border-hover: var(--on-night); } .c-btn--whatsapp { --btn-bg: transparent; --btn-fg: var(--success); --btn-border: var(--success); --btn-bg-hover: color-mix(in srgb, var(--success) 8%, var(--surface)); --btn-fg-hover: var(--success); --btn-border-hover: var(--success); } .c-btn--link { --btn-bg: transparent; --btn-border: transparent; --btn-fg: var(--action); --btn-bg-hover: transparent; --btn-border-hover: transparent; --btn-fg-hover: var(--action-hover); min-height: var(--tap-min); padding-inline: 0; border-radius: var(--radius-xs); } .c-btn--link:hover .c-btn__label { text-decoration: underline; text-underline-offset: 3px; } .c-btn--link .c-btn__icon { transition: transform var(--dur-fast) var(--ease-out); } .c-btn--link:hover .c-btn__icon { transform: translateX(3px); } [dir="rtl"] .c-btn--link:hover .c-btn__icon { transform: translateX(-3px); } [dir="rtl"] .c-btn--link:hover .c-btn__icon.icon-dir { transform: scaleX(-1) translateX(3px); } .c-btn--sm { min-height: var(--tap-min); padding-inline: var(--sp-5); } .c-btn--lg { min-height: 56px; padding-inline: var(--sp-8); } .c-btn--block { width: 100%; } .c-btn[disabled], .c-btn.is-disabled, .c-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; } .c-btn.is-loading { cursor: progress; } /* ---- c-breadcrumb ------------------------------------------------------ */ .c-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-meta); } .c-breadcrumb li { display: inline-flex; align-items: center; gap: var(--sp-2); } .c-breadcrumb li + li::before { content: "/"; opacity: .6; } .c-breadcrumb a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: currentColor; text-decoration-thickness: 1px; } .c-breadcrumb [aria-current] { font-weight: 600; } /* ---- c-banner: the page's single H1 ------------------------------------ : night (default) | light | compact. */ .c-banner { padding-block: clamp(var(--sp-6), 1rem + 3vw, var(--sp-12)) clamp(var(--sp-8), 1.5rem + 3vw, var(--sp-16)); background: var(--night-900); color: var(--on-night); } .c-banner .c-breadcrumb { margin-block-end: var(--sp-3); color: var(--on-night-muted); } .c-banner .c-breadcrumb [aria-current] { color: var(--on-night); } .c-banner__title { max-width: 30ch; margin: 0; color: var(--on-night); font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-display); line-height: var(--lh-h1); overflow-wrap: break-word; } .c-banner__title::after { content: ""; display: block; width: 48px; height: 2px; margin-block-start: var(--sp-4); background: var(--accent); } .c-banner__lead { max-width: 60ch; margin: var(--sp-4) 0 0; color: rgba(255, 255, 255, .82); font-size: var(--fs-lead); line-height: var(--lh-lead); } .c-banner--light { background: var(--surface-soft); color: var(--ink); border-block-end: var(--border-e0); } .c-banner--light .c-breadcrumb { color: var(--ink-muted); } .c-banner--light .c-breadcrumb [aria-current], .c-banner--light .c-banner__title { color: var(--ink); } .c-banner--light .c-banner__title::after { background: var(--action); } .c-banner--light .c-banner__lead { color: var(--ink-muted); } .c-banner--compact { padding-block: var(--sp-6) var(--sp-8); } /* ---- c-section-head ---------------------------------------------------- */ /* Kicker on top, the title with its action link on one row, the intro below. */ .c-section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kicker kicker" "title action" "intro intro"; align-items: baseline; column-gap: var(--sp-6); margin-block-end: var(--sp-8); } .c-section-head__text { display: contents; } .c-section-head .c-kicker { grid-area: kicker; } .c-section-head__title { grid-area: title; max-width: 30ch; text-wrap: balance; } .c-section-head__intro { grid-area: intro; max-width: 62ch; } .c-section-head > .c-btn { grid-area: action; justify-self: end; white-space: nowrap; } .c-section-head--center { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kicker" "title" "intro" "action"; justify-items: center; text-align: center; } .c-section-head--center > .c-btn { justify-self: center; margin-block-start: var(--sp-4); } .c-kicker { margin: 0 0 var(--sp-2); color: var(--action); font-family: var(--font-body); font-size: var(--fs-kicker); font-weight: var(--fw-kicker); letter-spacing: var(--tracking-kicker); text-transform: uppercase; } .c-section-head__title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-display); line-height: var(--lh-h2); } .c-section-head__intro { margin: var(--sp-3) 0 0; color: var(--ink-muted); font-size: var(--fs-lead); line-height: var(--lh-lead); } [data-surface="night"] .c-kicker { color: var(--on-night-muted); } [data-surface="night"] .c-section-head__title { color: var(--on-night); } [data-surface="night"] .c-section-head__intro { color: rgba(255, 255, 255, .8); } /* ---- c-card: e0 by default, lifts on hover ------------------------------ */ .c-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; padding: var(--sp-6); border: var(--border-e0); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink-muted); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .c-card:hover, .c-card:focus-within { transform: translateY(-2px); box-shadow: var(--shadow-e1); } .c-card__media { margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; position: relative; aspect-ratio: 16 / 9; background: var(--surface-muted); } .c-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .c-card__title { margin: 0; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); } .c-card__title a { color: inherit; text-decoration: none; } /* Whole card clickable through its title link. */ .c-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .c-card__text { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); } .c-card__footer { margin-block-start: auto; position: relative; z-index: 1; } .c-card--logo { align-items: center; justify-content: center; aspect-ratio: 1; padding: var(--sp-5); } .c-card--logo img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); transition: filter var(--dur) var(--ease-out); } .c-card--logo:hover img { filter: none; } /* ---- c-chip, c-badge, c-icon-chip --------------------------------------- */ .c-chip { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 36px; padding: var(--sp-1) var(--sp-4); border: 1px solid var(--ui-line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font-size: var(--fs-sm); font-weight: 500; line-height: 1.3; text-decoration: none; } a.c-chip, button.c-chip { min-height: var(--tap-min); cursor: pointer; } a.c-chip:hover, button.c-chip:hover { border-color: var(--action); color: var(--action); } .c-chip.is-selected, .c-chip[aria-current], .c-chip[aria-pressed="true"] { border-color: var(--action); background: var(--action); color: var(--on-action); } .c-badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); border-radius: var(--radius-xs); background: var(--tint-strong); color: var(--violet-800); font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; } .c-icon-chip { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--tint); color: var(--action); font-size: 1.125rem; } [data-surface="night"] .c-icon-chip { background: rgba(255, 255, 255, .08); color: var(--on-night-muted); } /* ---- c-cta-band --------------------------------------------------------- */ .c-cta-band { padding-block: var(--section-y); background: var(--surface-soft); } .c-cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-6); padding: clamp(var(--sp-6), 1rem + 3vw, var(--sp-12)); border: var(--border-e0); border-radius: var(--radius-xl); background: var(--surface); } .c-cta-band__title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-display); line-height: var(--lh-h2); } .c-cta-band__text { max-width: 56ch; margin: var(--sp-2) 0 0; color: var(--ink-muted); font-size: var(--fs-lead); line-height: var(--lh-lead); } .c-cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .c-cta-band--night { background: var(--night-900); } .c-cta-band--night .c-cta-band__inner { border-color: rgba(255, 255, 255, .1); background: var(--night-800); } .c-cta-band--night .c-cta-band__title { color: var(--on-night); } .c-cta-band--night .c-cta-band__text { color: rgba(255, 255, 255, .8); } /* ---- c-pagination (paginator view components/web/pagination) ------------ */ .c-pagination ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2); margin: var(--sp-8) 0 0; padding: 0; list-style: none; } .c-pagination a, .c-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap-min); min-height: var(--tap-min); padding-inline: var(--sp-3); border: var(--border-e0); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-weight: 500; text-decoration: none; } .c-pagination a:hover { border-color: var(--action); color: var(--action); } .c-pagination [aria-current] { border-color: var(--action); background: var(--action); color: var(--on-action); } .c-pagination [aria-disabled="true"] { color: var(--ink-subtle); } /* ---- c-empty ------------------------------------------------------------ */ .c-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); max-width: 480px; margin-inline: auto; padding: var(--sp-12) var(--sp-6); text-align: center; color: var(--ink-muted); } .c-empty .c-icon-chip { width: 56px; height: 56px; font-size: 1.375rem; } .c-empty__title { margin: 0; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-h3); font-weight: var(--fw-h3); } .c-empty__text { margin: 0; } /* ---- Error pages (404, 419, 429): errors/partials/help ------------------ */ .c-error { padding-block: var(--section-y); } .c-error__text { max-width: 60ch; margin: 0 0 var(--sp-6); color: var(--ink-muted); font-size: var(--fs-lead); line-height: var(--lh-lead); } .c-error__search { display: flex; gap: var(--sp-2); max-width: 560px; margin-block-end: var(--sp-10); } .c-error__search .form-control { min-height: var(--control-h); border-radius: var(--radius-sm); } .c-error__title { margin: 0 0 var(--sp-4); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-h3); font-weight: var(--fw-h3); } .c-error__links { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-10); padding: 0; list-style: none; } .c-error__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); } /* ---- c-section: a page section on the standard vertical rhythm ---------- */ .c-section { padding-block: var(--section-y); } .c-section--soft { background: var(--surface-soft); } /* The one dark band a page may have (besides the hero and the footer). */ .c-section--night { background: var(--night-900); color: rgba(255, 255, 255, .84); } /* Two light sections in a row: a hairline between them. */ .c-section--rule { border-block-start: var(--border-e0); } /* Cards on a night surface: hairline, no shadow. */ [data-surface="night"] .c-card { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .8); } [data-surface="night"] .c-card:hover, [data-surface="night"] .c-card:focus-within { box-shadow: none; border-color: rgba(255, 255, 255, .28); } [data-surface="night"] .c-card__title { color: var(--on-night); } /* Tabs switched by Bootstrap's tab plugin: without JS every panel shows. */ html:not(.js) .tab-content > .c-tabs__panel { display: block; } /* ---- c-media-card: an article or media item; image or typographic cover -- */ .c-media-card { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: var(--border-e0); border-radius: var(--radius-lg); background: var(--surface); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .c-media-card:hover, .c-media-card:focus-within { transform: translateY(-2px); box-shadow: var(--shadow-e1); } .c-media-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tint); } .c-media-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; } /* No image: a typographic cover (the item type's icon on a violet tint). */ .c-media-card__cover { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(135deg, var(--violet-50), var(--violet-100)); color: var(--action); font-size: 2.75rem; } .c-media-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); } .c-media-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0; color: var(--ink-muted); font-size: var(--fs-meta); line-height: var(--lh-meta); } .c-media-card__title { margin: 0; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); } .c-media-card__title a { color: inherit; text-decoration: none; } .c-media-card__title a::after { content: ""; position: absolute; inset: 0; } .c-media-card__title a:hover { color: var(--action); } /* Phones: a compact row, the thumbnail beside the text. */ @media (max-width: 575.98px) { .c-media-card--row-sm { flex-direction: row; } .c-media-card--row-sm .c-media-card__media { flex: none; width: 96px; aspect-ratio: auto; } .c-media-card--row-sm .c-media-card__cover { font-size: 1.5rem; } .c-media-card--row-sm .c-media-card__body { padding: var(--sp-3) var(--sp-4); } .c-media-card--row-sm .c-media-card__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } } /* ---- c-checklist: short statements with a check mark --------------------- */ .c-checklist { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } .c-checklist li { display: flex; align-items: flex-start; gap: var(--sp-3); color: var(--ink); line-height: var(--lh-body); } .c-checklist .fa-check { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-block-start: .15em; border-radius: 50%; background: var(--tint); color: var(--action); font-size: .75rem; } /* ---- c-split: media beside text from 992px --------------------------------- */ .c-split { display: grid; gap: var(--sp-8); align-items: center; } .c-split__media { display: grid; gap: var(--sp-4); } .c-split__media img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); } @media (max-width: 991.98px) { .c-split__media img + img { display: none; } } @media (min-width: 992px) { .c-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-12); } .c-split--text-only { grid-template-columns: minmax(0, 1fr); } .c-split__media img + img { width: 72%; margin-inline-start: auto; } } /* c-quote: star rating (violet on white; gold is for night surfaces only). */ .c-quote__rating { margin: 0; color: var(--action); letter-spacing: .1em; } .c-quote figcaption { display: flex; align-items: center; gap: var(--sp-3); } .c-quote figcaption img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } /* ---- c-hero (home) ------------------------------------------------------ sections/hero_section: kicker, the page h1, lead, actions and the cut-out portrait (the LCP image). Night surface with a soft violet glow; no background photo (the portrait is not repeated behind itself). */ .c-hero { position: relative; overflow: hidden; padding-block-start: clamp(var(--sp-8), 1rem + 4vw, var(--sp-16)); /* The brand colour behind the text, deeper plum behind the portrait. */ background: linear-gradient(115deg, var(--night-900) 0%, var(--violet-700) 55%, var(--night-800) 100%); color: var(--on-night); } [dir="rtl"] .c-hero { background: linear-gradient(245deg, var(--night-900) 0%, var(--violet-700) 55%, var(--night-800) 100%); } .c-hero::before { content: ""; position: absolute; inset-block-start: -25%; inset-inline-end: -15%; width: min(900px, 90vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--violet-400) 45%, transparent), transparent); pointer-events: none; } .c-hero__inner { position: relative; display: grid; gap: var(--sp-8); } .c-hero__text { padding-block-end: var(--sp-4); } .c-hero__kicker { margin: 0 0 var(--sp-3); color: var(--on-night-muted); font-size: var(--fs-kicker); font-weight: var(--fw-kicker); letter-spacing: var(--tracking-kicker); text-transform: uppercase; } .c-hero__title { margin: 0; color: var(--on-night); font-family: var(--font-display); /* The CMS title in at most three lines at 1440 (T1). */ font-size: min(var(--fs-display), 2.875rem); font-weight: var(--fw-display); line-height: var(--lh-display); text-wrap: balance; } .c-hero__lead { max-width: 38rem; margin: var(--sp-5) 0 0; color: rgba(255, 255, 255, .84); font-size: var(--fs-lead); line-height: var(--lh-lead); } .c-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-6); } .c-hero__chat { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap-min); margin-block-start: var(--sp-3); color: var(--on-night); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--on-night) 40%, transparent); text-underline-offset: 4px; } .c-hero__chat:hover { color: var(--on-night); text-decoration-color: currentColor; } .c-hero__chat .fa-whatsapp { font-size: 1.25rem; } /* About / Download profile / chat: one row of text links, wrapping on phones. */ .c-hero__links { display: flex; flex-wrap: wrap; column-gap: var(--sp-6); margin-block-start: var(--sp-3); } .c-hero__links .c-hero__chat { margin-block-start: 0; } /* "Expert on": the expert_description beside the portrait (third column). */ .c-hero__aside { padding-block-end: var(--sp-4); } .c-hero__expert-label { margin: 0 0 var(--sp-3); padding-inline-start: var(--sp-3); border-inline-start: 3px solid var(--accent); /* Gold stays a hairline: as text on the brand violet it is 3.2:1 (AA needs 4.5). */ color: var(--on-night-muted); font-weight: 700; line-height: 1.3; } .c-hero__expert { margin: 0; color: rgba(255, 255, 255, .84); line-height: var(--lh-body); } .c-hero__aside .c-hero__links { margin-block-start: var(--sp-4); } /* Below 992px the portrait closes the hero, under the expert text. */ @media (max-width: 991.98px) { .c-hero__media { order: 3; } } /* "Follow me" row under the hero buttons (same round icons as the footer). */ .c-hero__social { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-block-start: var(--sp-5); } .c-hero__social-label { margin: 0; color: var(--on-night-muted); font-weight: 600; } .c-hero__social ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } .c-hero__social a { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; color: var(--on-night); } .c-hero__social a:hover { border-color: var(--on-night-muted); background: rgba(255, 255, 255, .08); color: var(--on-night); } .c-hero__media { align-self: end; } .c-hero__portrait { position: relative; max-width: 340px; margin-inline: auto; } .c-hero__portrait::before { content: ""; position: absolute; inset: 12% 6% 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: linear-gradient(180deg, var(--violet-400), var(--violet-600)); } .c-hero__portrait img { position: relative; display: block; width: 100%; height: auto; } /* Phones: the buttons share a row, a smaller portrait close under them. */ @media (max-width: 575.98px) { .c-hero__inner { gap: var(--sp-2); } .c-hero__text { padding-block-end: 0; } .c-hero__lead { margin-block-start: var(--sp-4); } .c-hero__actions { margin-block-start: var(--sp-5); } .c-hero__actions .c-btn--lg { min-height: 48px; padding-inline: var(--sp-5); } .c-hero__portrait { max-width: 180px; /* the cut-out's transparent top */ margin-block-start: calc(-1 * var(--sp-6)); } /* A shorter hero: the links share a row where they fit (Arabic). */ .c-hero__social { margin-block-start: var(--sp-4); } .c-hero__links { column-gap: var(--sp-3); } /* English runs long: the H1 size instead of the display size. */ .c-hero__title:lang(en) { font-size: var(--fs-h1); } } @media (min-width: 992px) { .c-hero__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); align-items: center; row-gap: 0; } .c-hero__text { padding-block-end: var(--sp-6); } .c-hero__media { grid-column: 2; grid-row: 1 / span 2; align-self: end; } .c-hero__aside { grid-column: 1; padding-block-end: var(--sp-12); } .c-hero__portrait { max-width: 460px; } } /* From 992px the portrait lines up with the top of the text beside it, on a fully rounded panel. */ @media (min-width: 992px) { .c-hero__inner .c-hero__media { align-self: start; padding-block-end: var(--sp-10); } .c-hero__portrait::before { border-radius: var(--radius-xl); } .c-hero__portrait img { border-radius: 0 0 var(--radius-xl) var(--radius-xl); } } /* Wide screens: text | portrait | expert text, as three columns. */ @media (min-width: 1200px) { .c-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr) minmax(0, .8fr); column-gap: var(--sp-8); } .c-hero__text { padding-block-end: var(--sp-16); } .c-hero__media { grid-column: 2; grid-row: 1; } .c-hero__aside { grid-column: 3; grid-row: 1; padding-block-end: var(--sp-16); } .c-hero__aside .c-hero__links { flex-direction: column; align-items: flex-start; } } /* ---- c-stat, c-proof: figures (home_kpi) --------------------------------- */ .c-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } @media (min-width: 992px) { .c-proof { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-4); } } .c-stat { padding: var(--sp-5); border: var(--border-e0); border-radius: var(--radius-lg); background: var(--surface); } .c-stat__value { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: var(--fs-stat); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .c-stat__label { margin: var(--sp-1) 0 0; color: var(--ink-muted); font-size: var(--fs-sm); line-height: 1.45; } /* Phones: compact tiles; an odd last tile takes the whole row. */ @media (max-width: 991.98px) { .c-proof > .c-stat:last-child:nth-child(odd) { grid-column: 1 / -1; } } /* Phones: a compact strip, the number beside its label. */ @media (max-width: 575.98px) { .c-proof { gap: var(--sp-2); } .c-stat { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md); } .c-stat__value { flex: none; font-size: 1.5rem; } .c-stat__label { margin: 0; font-size: var(--fs-xs); line-height: 1.3; } } /* ---- c-logo-grid: white 1:1 tiles, greyscale until hover ------------------ */ .c-logo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { .c-logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 992px) { .c-logo-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-4); } } .c-logo-grid__item { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: var(--sp-4); border: var(--border-e0); border-radius: var(--radius-md); background: var(--surface); } .c-logo-grid__item img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } @media (hover: hover) { .c-logo-grid__item img { filter: grayscale(1); opacity: .75; transition: filter var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out); } .c-logo-grid__item:hover img { filter: none; opacity: 1; } } @media (max-width: 575.98px) { .c-logo-grid__item:nth-child(n + 7) { display: none; } } /* ---- c-tabs: the panels are in the HTML; without JS they simply stack ---- */ .c-tabs__list { display: flex; gap: var(--sp-2); margin-block-end: var(--sp-6); border-block-end: var(--border-e0); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .c-tabs__tab { position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap-min); padding: var(--sp-2) var(--sp-3); border: 0; background: none; color: var(--ink-muted); font-size: 1rem; font-weight: 600; white-space: nowrap; cursor: pointer; } .c-tabs__tab:hover { color: var(--ink); } .c-tabs__tab[aria-selected="true"] { color: var(--action); } .c-tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: var(--sp-2); inset-block-end: -1px; height: 2px; border-radius: 2px; background: var(--action); } .c-tabs__count { min-width: 1.6em; padding: 0 .45em; border-radius: var(--radius-pill); background: var(--tint-strong); color: var(--violet-800); font-size: var(--fs-xs); line-height: 1.6; text-align: center; } .c-tabs__panel[hidden] { display: none; } .c-tabs__label { margin: 0 0 var(--sp-4); color: var(--ink); font-weight: 700; } html:not(.js) .c-tabs__list, .js .c-tabs__label { display: none; } html:not(.js) .c-tabs__panel + .c-tabs__panel { margin-block-start: var(--sp-10); } /* ---- c-more: "View all" for long lists (every item stays in the HTML) ---- */ .c-more__toggle { display: none !important; margin-block-start: var(--sp-5); } .js .is-collapsed .c-more__toggle { display: inline-flex !important; } .js .is-collapsed .c-more__extra { display: none; } @media (max-width: 767.98px) { .js .is-collapsed .c-more__extra-phone { display: none; } } @media (min-width: 768px) { .js .is-collapsed .c-more__toggle--phone { display: none !important; } } /* ---- c-steps: numbered steps ------------------------------------------- */ .c-steps { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } @media (min-width: 992px) { .c-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } } .c-steps__item { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-5); border: var(--border-e0); border-radius: var(--radius-lg); background: var(--surface); } .c-steps__num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--action); color: var(--on-action); font-weight: 700; font-variant-numeric: tabular-nums; } .c-steps__title { margin: 0 0 var(--sp-1); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); } .c-steps__text { margin: 0; color: var(--ink-muted); line-height: var(--lh-body); } /* Phones: a plain numbered list, no boxes. */ @media (max-width: 575.98px) { .c-steps { gap: var(--sp-4); } .c-steps__item { gap: var(--sp-3); padding: 0; border: 0; background: none; } .c-steps__num { width: 32px; height: 32px; font-size: .9375rem; } } /* ---- c-rail: a scroll row on phones (with .snap-row), a grid from 768px -- */ .c-rail { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { .c-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 992px) { .c-rail { grid-template-columns: repeat(var(--rail-cols, 4), minmax(0, 1fr)); gap: var(--sp-5); } } .c-rail__count { display: none; margin: var(--sp-2) 0 0; color: var(--ink-muted); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; } @media (max-width: 767.98px) { .js .c-rail__count { display: block; } } /* ---- c-router: "how can I help?" choices -------------------------------- */ .c-router { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } @media (min-width: 992px) { .c-router { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); } } .c-router__item { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); height: 100%; padding: var(--sp-5); border: var(--border-e0); border-radius: var(--radius-lg); background: var(--surface); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .c-router__item:hover, .c-router__item:focus-within { transform: translateY(-2px); box-shadow: var(--shadow-e1); } .c-router__title { margin: var(--sp-2) 0 0; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); } .c-router__title a { color: inherit; text-decoration: none; } .c-router__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .c-router__text { margin: 0; color: var(--ink-muted); font-size: var(--fs-sm); line-height: 1.55; } .c-router__item--primary { border-color: var(--action); background: var(--action); } .c-router__item--primary .c-router__title, .c-router__item--primary .c-router__text { color: var(--on-action); } .c-router__item--primary .c-icon-chip { background: color-mix(in srgb, var(--on-action) 16%, transparent); color: var(--on-action); } @media (max-width: 575.98px) { .c-router__item { padding: var(--sp-4); } .c-router__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } /* ---- c-quote: a client review ------------------------------------------ */ .c-quote { display: flex; flex-direction: column; gap: var(--sp-4); height: 100%; margin: 0; padding: var(--sp-6); border: var(--border-e0); border-radius: var(--radius-lg); background: var(--surface); } .c-quote blockquote { margin: 0; color: var(--ink); font-size: var(--fs-lead); line-height: var(--lh-lead); } .c-quote figcaption { margin-block-start: auto; color: var(--ink-muted); font-size: var(--fs-sm); } .c-quote figcaption strong { display: block; color: var(--ink); } /* ========================================================================== Phase 4: forms (T4) and /counselling-session (T3) ========================================================================== */ /* ---- c-form-layout: the form card beside a sticky side panel (>= 992px) -- */ .c-form-layout { display: grid; gap: var(--sp-6); align-items: start; } @media (min-width: 992px) { .c-form-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--sp-8); } .c-form-aside { position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-4)); } } .c-form-card { padding: var(--sp-6); border: var(--border-e0); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-e1); } @media (max-width: 575.98px) { .c-form-card { padding: var(--sp-5) var(--sp-4); } } /* ---- Side panel --------------------------------------------------------- */ .c-form-aside { display: grid; gap: var(--sp-4); } .c-aside-card { padding: var(--sp-5); border: var(--border-e0); border-radius: var(--radius-lg); background: var(--surface); } .c-aside-card--tint { border-color: transparent; background: var(--tint); } .c-aside-card__title { margin: 0 0 var(--sp-3); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); } .c-aside-card__text { margin: 0 0 var(--sp-4); color: var(--ink-muted); } .c-aside-steps { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; counter-reset: aside-step; } .c-aside-steps li { display: flex; align-items: flex-start; gap: var(--sp-3); color: var(--ink-muted); line-height: var(--lh-body); } .c-aside-steps li::before { counter-increment: aside-step; content: counter(aside-step); flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--action); color: var(--on-action); font-size: var(--fs-sm); font-weight: 700; } .c-aside-note { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-4) 0 0; color: var(--ink-muted); font-size: var(--fs-meta); } /* ---- Call / WhatsApp / Email: above the form on phones, in the panel from 992px */ /* Widths follow the labels, so the long Arabic "Email" label keeps to one line. */ .c-contact-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .c-contact-actions a { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: var(--sp-2); min-width: 0; white-space: nowrap; min-height: 48px; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--ui-line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-weight: 600; text-align: center; text-decoration: none; } .c-contact-actions a:hover { border-color: var(--action); color: var(--action); } .c-contact-actions .fa-whatsapp { color: var(--success); } .c-contact-actions--phone { margin-block-end: var(--sp-5); } @media (min-width: 992px) { .c-contact-actions--phone { display: none; } } @media (max-width: 991.98px) { .c-contact-actions--aside { display: none; } } /* ---- "Add more details (optional)" ---------------------------------------- */ .c-more-details { margin-block: var(--sp-5); padding-block-start: var(--sp-2); border-block-start: var(--border-e0); } .c-more-details > summary { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap-min); color: var(--action); font-weight: 600; list-style: none; cursor: pointer; } .c-more-details > summary::-webkit-details-marker { display: none; } .c-more-details > summary::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tint); font-weight: 700; } .c-more-details[open] > summary::before { content: "\2212"; } .c-more-details[open] > summary { margin-block-end: var(--sp-3); } /* ---- c-file: a translated file control (x-web.field type="file") ---------- */ .c-file { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); min-height: 48px; cursor: pointer; } .c-file__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .c-file__button { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding-inline: var(--sp-5); border: 1px solid var(--action); border-radius: var(--radius-pill); color: var(--action); font-weight: 600; } .c-file:hover .c-file__button { background: var(--tint); } .c-file__input:focus-visible + .c-file__button { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); } .c-file__name { min-width: 0; color: var(--ink-muted); font-size: var(--fs-meta); overflow-wrap: anywhere; } .has-error .c-file__button { border-color: var(--danger); } /* ---- c-faq: questions in

------------------------------------------ */ .c-faq { display: grid; gap: var(--sp-3); max-width: var(--reading, 760px); } .c-faq__item { border: var(--border-e0); border-radius: var(--radius-md); background: var(--surface); } .c-faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 56px; padding: var(--sp-3) var(--sp-5); color: var(--ink); font-weight: 600; list-style: none; cursor: pointer; } .c-faq__q::-webkit-details-marker { display: none; } .c-faq__q .fa-chevron-down { flex: none; color: var(--action); transition: transform var(--dur) var(--ease-out); } .c-faq__item[open] .c-faq__q .fa-chevron-down { transform: rotate(180deg); } .c-faq__a { margin: 0; padding: 0 var(--sp-5) var(--sp-5); color: var(--ink-muted); line-height: var(--lh-body); } /* ---- Checklist in two columns (e.g. "How I can help") ---------------------- */ @media (min-width: 768px) { .c-checklist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-8); } } /* ---- /counselling-session: split intro --------------------------------------- */ .cs-intro__inner { display: grid; gap: var(--sp-8); align-items: center; } @media (min-width: 992px) { .cs-intro__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--sp-12); } } .cs-intro__title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-display); line-height: var(--lh-h2); text-wrap: balance; } .cs-intro__lead { max-width: 60ch; margin: var(--sp-4) 0 0; color: var(--ink-muted); font-size: var(--fs-lead); line-height: var(--lh-lead); } /* "How I can help" follows the intro closely, without a heading. */ .cs-intro { padding-block-end: var(--sp-6); } .cs-points { padding-block: 0 var(--sp-10); } /* The button keeps its distance from the title when there are no chips. */ .cs-intro__text > .c-btn { margin-block-start: var(--sp-6); } .cs-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-5) 0 0; padding: 0; list-style: none; } .cs-chips .c-chip i { color: var(--action); } .cs-fee-old { color: var(--ink-subtle); } .cs-intro__media { max-width: 320px; margin-inline: auto; } .cs-intro__media img { display: block; width: 100%; height: auto; border-radius: var(--radius-xl); background: var(--night-900); } @media (max-width: 991.98px) { .cs-intro__media { order: -1; max-width: 200px; } } /* ---- The booking form (web/component/appointment_form) --------------------- */ .ap-intro { margin: 0 0 var(--sp-4); color: var(--ink-muted); line-height: var(--lh-body); } .ap-other { margin-block: var(--sp-3) 0; } .ap-conditions { margin-block: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-md); background: var(--tint); color: var(--ink-muted); font-size: var(--fs-meta); } .ap-conditions-title { margin: 0 0 var(--sp-2); color: var(--ink); font-weight: 700; } .ap-conditions ul { margin: 0; padding-inline-start: 1.25em; } .ap-submit { margin-block-start: var(--sp-6); } /* ---- /success ----------------------------------------------------------- */ .c-success { display: grid; justify-items: center; gap: var(--sp-4); max-width: 560px; margin-inline: auto; text-align: center; } .c-success__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--success); color: var(--on-action); font-size: 1.75rem; } .c-success__title { margin: 0; color: var(--ink); font-size: var(--fs-h2); font-weight: var(--fw-display); } .c-success__text { margin: 0; color: var(--ink-muted); line-height: var(--lh-body); } .c-success__next { width: 100%; text-align: start; } .c-success__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); } /* ========================================================================== Phase 5: profile hub (T2) — /about, /professional-skills, /skill-ability, /companyboard ========================================================================== */ /* ---- c-subnav: Overview · Experience · Skills · Boards ---------------------- */ .c-subnav { position: sticky; inset-block-start: var(--header-h); z-index: var(--z-sticky); border-block-end: var(--border-e0); background: var(--surface); } .c-subnav__list { display: flex; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .c-subnav__link { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding-inline: var(--sp-3); color: var(--ink-muted); font-weight: 600; white-space: nowrap; text-decoration: none; } .c-subnav__link:hover { color: var(--ink); } .c-subnav__link[aria-current] { color: var(--action); } .c-subnav__link[aria-current]::after { content: ""; position: absolute; inset-inline: var(--sp-3); inset-block-end: 0; height: 2px; border-radius: 2px; background: var(--action); } /* ---- c-timeline: career roles ---------------------------------------------- */ .c-timeline { display: grid; gap: var(--sp-6); margin: 0; padding: 0; list-style: none; } .c-timeline__item { position: relative; padding-inline-start: var(--sp-8); } .c-timeline__item::before { content: ""; position: absolute; inset-block-start: .45em; inset-inline-start: 0; width: 14px; height: 14px; border: 3px solid var(--action); border-radius: 50%; background: var(--surface); } .c-timeline__item::after { content: ""; position: absolute; inset-block: calc(.45em + 18px) calc(-1 * var(--sp-6)); inset-inline-start: 6px; width: 2px; background: var(--ui-line); } .c-timeline__item:last-child::after { display: none; } .c-timeline__date { display: inline-block; margin: 0 0 var(--sp-2); padding: 2px var(--sp-3); border-radius: var(--radius-pill); background: var(--tint-strong); color: var(--violet-800); font-size: var(--fs-meta); font-weight: 600; font-variant-numeric: tabular-nums; } .c-timeline__title { margin: 0; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); } .c-timeline__org { margin: var(--sp-1) 0 0; color: var(--ink-muted); font-weight: 500; } .c-timeline__text { margin: var(--sp-3) 0 0; color: var(--ink-muted); line-height: var(--lh-body); } .c-timeline__points { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding-inline-start: 1.25em; color: var(--ink-muted); line-height: var(--lh-body); } .c-timeline__points li::marker { color: var(--action); } .c-timeline__more { margin-block-start: var(--sp-2); } .c-timeline__more > summary { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap-min); color: var(--action); font-weight: 600; cursor: pointer; } /* ---- Insights grid (web/home/insights): home and /about -------------------- */ .home-insights__grid { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { .home-insights__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } } /* ---- /about --------------------------------------------------------------- */ .about-intro__inner { display: grid; gap: var(--sp-6); align-items: center; } @media (min-width: 768px) { .about-intro__inner { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--sp-10); } } .about-intro__media img { display: block; width: 100%; max-width: 260px; height: auto; margin-inline: auto; border-radius: var(--radius-xl); background: var(--night-900); } @media (max-width: 767.98px) { .about-intro__media img { max-width: 180px; } } .about-intro__text { max-width: 65ch; margin: 0; color: var(--ink-muted); font-size: var(--fs-lead); line-height: var(--lh-lead); } .about-intro__chips, .about-skills { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-5) 0 0; padding: 0; list-style: none; } .about-intro__chips .fa-graduation-cap { color: var(--action); } .about-intro__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-6); } .about-mission, .about-education { display: grid; gap: var(--sp-4); } @media (min-width: 768px) { .about-education { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 992px) { .about-mission { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } } .about-mission__list { display: grid; gap: var(--sp-2); margin: 0; padding-inline-start: 1.25em; line-height: var(--lh-body); } .about-mission__list li::marker { color: var(--action); } .about-education__subject { margin: 0; color: var(--ink); font-size: var(--fs-meta); font-weight: 600; } .about-skills__title { margin: var(--sp-8) 0 0; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-h3); font-weight: var(--fw-h3); } .about-skills, .about-skills__title + .c-checklist { margin-block-start: var(--sp-4); } .about-video { max-width: 860px; } /* ---- /professional-skills --------------------------------------------------- */ .experience-summary { grid-template-columns: repeat(2, minmax(0, 200px)); margin-block-end: var(--sp-10); } /* ---- /skill-ability ------------------------------------------------------------ */ .skills-grid, .boards-grid { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { .skills-grid, .boards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 992px) { .skills-grid, .boards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } } /* ---- /companyboard: seat cards ------------------------------------------------- */ .board-seat__num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--action); color: var(--on-action); font-weight: 700; } .board-seat__points { display: grid; gap: var(--sp-2); margin: 0; padding-inline-start: 1.25em; line-height: var(--lh-body); } .board-seat__points li::marker { color: var(--action); } /* Insights and the CTA band are both grey: one gap between them, not two. */ .about-page:has(> .c-section--soft:last-child) + .c-cta-band { padding-block-start: 0; } /* ---- /about on phones: a compact rhythm (T2 budget: 4,500px at 390) -------- */ @media (max-width: 575.98px) { .about-page .c-section { padding-block: 2rem; } /* The degrees are listed in Education a little further down. */ .about-intro__chips { display: none; } .about-intro__media img { max-width: 150px; } .about-page .c-section-head { margin-block-end: var(--sp-5); } .about-intro__text { font-size: var(--fs-body); } .about-intro__actions .c-btn--lg { min-height: 48px; padding-inline: var(--sp-5); } /* Mission and education: plain blocks instead of boxed cards. */ .about-mission, .about-education { gap: var(--sp-5); } .about-mission .c-card, .about-education .c-card { padding: 0; border: 0; background: none; box-shadow: none; transform: none; } .about-mission .c-icon-chip, .about-education .c-icon-chip { display: none; } /* Latest roles: title, organisation and date; the bullets and the descriptions are on /professional-skills (the "All experience" link). */ .about-roles .c-timeline__points, .about-roles .c-timeline__more, .about-roles .c-timeline__text { display: none; } .about-skills__title { margin-block-start: var(--sp-6); } } /* ========================================================================== Phase 6: Media Center, blog and reading pages (T7) ========================================================================== */ /* ---- Media Center hero: c-hero with search and two buttons --------------- */ .c-hero--media { padding-block-end: clamp(var(--sp-8), 1rem + 4vw, var(--sp-16)); } .c-hero--media .c-hero__text { max-width: 44rem; padding-block-end: 0; } /* ---- Media Center: the aims, then the mission beside the objectives ------ */ .mc-about__intro { max-width: 62rem; margin: 0 auto var(--sp-8); color: var(--ink-muted); font-size: var(--fs-lead); line-height: var(--lh-lead); text-align: center; } .mc-about__grid { display: grid; gap: var(--sp-4); } @media (min-width: 992px) { .mc-about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-5); align-items: start; } } .mc-about__mission, .mc-about__objectives { padding: var(--sp-6); border-radius: var(--radius-lg); } .mc-about__mission { background: var(--night-900); color: rgba(255, 255, 255, .84); } .mc-about__mission .c-kicker { color: var(--on-night-muted); } .mc-about__objectives { border: var(--border-e0); background: var(--surface); box-shadow: var(--shadow-e1); } .mc-about__title { margin: var(--sp-1) 0 var(--sp-4); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-h3); } .mc-about__mission .mc-about__title { color: var(--on-night); } .mc-about__text { margin: 0; line-height: var(--lh-body); } /* ---- Media Center rows: back to back, one gap between them --------------- */ .mc-row + .mc-row { padding-block-start: 0; } /* Four cards a row on wide screens. */ @media (min-width: 1200px) { .c-media-grid.mc-row__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---- Closing statement: a gradient card (the page's one dark band) ------- */ .mc-closing__card { padding: clamp(var(--sp-6), 1rem + 3vw, var(--sp-12)); border-radius: var(--radius-xl); background: linear-gradient(115deg, var(--violet-600), var(--night-900)); color: var(--on-night); text-align: center; } .mc-closing__card p { max-width: 62rem; margin: 0 auto; font-size: var(--fs-lead); line-height: var(--lh-lead); } .mc-closing + .mc-newsletter { padding-block-start: 0; } /* Phones: the aims and the closing statement run to seven lines there; long paragraphs align to the start (only short lines are centred). */ @media (max-width: 575.98px) { .mc-about__intro, .mc-closing__card { text-align: start; } } /* ---- c-search: one field and a round button ------------------------------ */ .c-search { display: flex; align-items: center; gap: var(--sp-2); max-width: 34rem; margin-block-start: var(--sp-6); padding: var(--sp-1); padding-inline-start: var(--sp-5); border-radius: var(--radius-pill); background: var(--surface); } .c-search__input { flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1rem; } .c-search__input::placeholder { color: var(--ink-muted); } .c-search__input:focus { outline: none; } .c-search:focus-within { outline: var(--focus-width) solid var(--focus-color-on-dark); outline-offset: var(--focus-offset); } .c-search__button { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--action); color: var(--on-action); cursor: pointer; } .c-search__button:hover { background: var(--action-hover); } /* ---- c-feature: the one featured item (on the night hero) --------------- */ .c-feature { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); } .c-feature__media { aspect-ratio: 16 / 9; background: var(--tint); } .c-feature__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .c-feature__body { display: grid; gap: var(--sp-2); padding: var(--sp-5); } .c-feature__title { margin: 0; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); } .c-feature__title a { color: inherit; text-decoration: none; } .c-feature__title a::after { content: ""; position: absolute; inset: 0; } .c-feature__title a:hover { color: var(--action); } .c-feature__text { display: -webkit-box; margin: 0; overflow: hidden; color: var(--ink-muted); -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .c-feature__more { display: inline-flex; align-items: center; gap: var(--sp-2); margin-block-start: var(--sp-2); color: var(--action); font-weight: 600; } /* The featured article: cover beside the text from 768px. */ @media (min-width: 768px) { .c-feature--wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } .c-feature--wide .c-feature__media { height: 100%; min-height: 280px; aspect-ratio: auto; } .c-feature--wide .c-feature__body { padding: var(--sp-8); } .c-feature--wide .c-feature__title { font-size: var(--fs-h2); font-family: var(--font-display); font-weight: var(--fw-display); line-height: var(--lh-h2); } .c-feature--wide .c-feature__text { -webkit-line-clamp: 3; } } .c-feature .c-media-card__cover { height: 100%; min-height: 180px; } /* Phones: a shorter cover above the text. */ @media (max-width: 575.98px) { .c-feature__media { /* Without min-height: 0 a photo's own ratio wins over aspect-ratio. */ min-height: 0; aspect-ratio: 5 / 2; } /* The typographic cover keeps the 5:2 box instead of 180px. */ .c-feature .c-media-card__cover { min-height: 0; } .c-feature__body { padding: var(--sp-4); } } /* ---- Topics: icon + name tiles -------------------------------------------- */ .c-topic__body { display: grid; gap: 2px; } .c-topic__count { color: var(--ink-muted); font-size: var(--fs-xs); font-weight: 400; } .c-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { .c-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 992px) { .c-topics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); } } .c-topic { display: flex; align-items: center; gap: var(--sp-3); height: 100%; min-height: 64px; padding: var(--sp-3); border: var(--border-e0); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); font-weight: 600; line-height: 1.35; text-decoration: none; transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); } .c-topic:hover { border-color: var(--action); color: var(--action); } .c-topic .c-icon-chip { width: 40px; height: 40px; } /* ---- c-chip-row: link chips; one scrolling row on phones ---------------- */ .c-chip-row { margin-block-end: var(--sp-6); } .c-chip-row ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } @media (max-width: 767.98px) { .c-chip-row ul { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .c-chip-row ul::-webkit-scrollbar { display: none; } .c-chip-row .c-chip { white-space: nowrap; } } /* ---- c-media-grid: the card grid of listings (compact rows on phones) ---- */ .c-media-grid { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } @media (min-width: 576px) { .c-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); } } @media (min-width: 992px) { .c-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } } .c-media-card__text { display: -webkit-box; margin: 0; overflow: hidden; color: var(--ink-muted); -webkit-line-clamp: 2; -webkit-box-orient: vertical; } @media (max-width: 575.98px) { .c-media-card--row-sm .c-media-card__text { display: none; } } /* ---- c-rank: numbered Most Read ----------------------------------------- */ .c-rank { display: grid; margin: 0; padding: 0; list-style: none; } @media (min-width: 992px) { .c-rank { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-10); } } .c-rank__item { display: flex; align-items: flex-start; gap: var(--sp-4); padding-block: var(--sp-4); border-block-end: var(--border-e0); } .c-rank__num { flex: none; min-width: 2ch; color: var(--action); font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .c-rank__title { margin: 0; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); } .c-rank__title a { color: inherit; text-decoration: none; } .c-rank__title a:hover { color: var(--action); } .c-rank__meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin: var(--sp-1) 0 0; color: var(--ink-muted); font-size: var(--fs-meta); line-height: var(--lh-meta); } /* ---- c-tiles: two or three link cards ------------------------------------- */ .c-tiles { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { .c-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); } } /* ---- c-newsletter (on the night band) ----------------------------------- */ .c-newsletter { display: grid; gap: var(--sp-5); align-items: center; padding: clamp(var(--sp-5), 1rem + 2vw, var(--sp-8)); border: var(--border-e0); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-e1); } @media (min-width: 992px) { .c-newsletter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-10); } } .c-newsletter__title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-display); line-height: var(--lh-h2); } .c-newsletter__text { margin: var(--sp-2) 0 0; color: var(--ink-muted); font-size: var(--fs-lead); line-height: var(--lh-lead); } .c-newsletter__form { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .c-newsletter__input { flex: 1 1 14rem; min-width: 0; min-height: var(--control-h); padding-inline: var(--sp-5); border: 1px solid var(--ui-line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; } .c-newsletter__input:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); } /* ---- Listings: compact banner, then chips and the grid ------------------- */ .c-section--listing { padding-block-start: var(--sp-8); } .c-listing__intro { max-width: 65ch; margin: 0 0 var(--sp-6); color: var(--ink-muted); font-size: var(--fs-lead); line-height: var(--lh-lead); } /* /media-center/topics: each topic with its subtopics as chips. */ .c-topic-cards { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { .c-topic-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 992px) { .c-topic-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } } .c-topic-card { display: grid; align-content: start; gap: var(--sp-3); padding: var(--sp-5); border: var(--border-e0); border-radius: var(--radius-lg); background: var(--surface); } .c-topic-card__title { margin: 0; font-family: var(--font-body); font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); } .c-topic-card__title a { color: var(--ink); text-decoration: none; } .c-topic-card__title a:hover { color: var(--action); } .c-topic-card__subtopics { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } /* Search: the filters in one row on desktop. */ .c-filter { display: grid; gap: var(--sp-4); align-items: end; margin-block-end: var(--sp-8); } .c-filter .wf-field { margin: 0; } @media (min-width: 768px) { .c-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c-filter__query { grid-column: 1 / -1; } } @media (min-width: 992px) { .c-filter { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .7fr) auto; } .c-filter__query { grid-column: auto; } } /* Downloads. */ .c-downloads { display: grid; gap: var(--sp-3); margin: var(--sp-8) 0 0; padding: 0; list-style: none; } .c-section--listing .c-downloads { margin-block-start: 0; } .c-download { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); border: var(--border-e0); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color var(--dur) var(--ease-out); } .c-download:hover { border-color: var(--action); } .c-download__text { display: grid; flex: 1; gap: var(--sp-1); min-width: 0; } .c-download__name { font-weight: 600; overflow-wrap: anywhere; } .c-download__meta { color: var(--ink-muted); font-size: var(--fs-meta); } .c-download__icon { color: var(--action); } /* ---- Article (media-center/article/{slug}, blog/{slug}) ------------------ */ .c-article-head { padding-block: clamp(var(--sp-6), 1rem + 3vw, var(--sp-12)) 0; } .c-article-head__inner, .c-article__column, .c-reading { max-width: var(--reading); margin-inline: auto; } .c-article-head .c-breadcrumb { margin-block-end: var(--sp-3); color: var(--ink-muted); } .c-article-head__kicker { margin: 0 0 var(--sp-3); color: var(--action); font-size: var(--fs-kicker); font-weight: var(--fw-kicker); letter-spacing: var(--tracking-kicker); text-transform: uppercase; } .c-article-head__kicker a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: inherit; text-decoration: none; } .c-article-head__kicker a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Sentence case, at most 40px. */ .c-article-head__title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: min(var(--fs-h1), 2.5rem); font-weight: var(--fw-display); line-height: var(--lh-h1); text-wrap: balance; overflow-wrap: break-word; } .c-article-head__subtitle { margin: var(--sp-3) 0 0; color: var(--ink-muted); font-size: var(--fs-lead); line-height: var(--lh-lead); } .c-article-head__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: var(--sp-5) 0 0; padding: 0; list-style: none; color: var(--ink-muted); font-size: var(--fs-meta); line-height: var(--lh-meta); } .c-article-head__meta li { display: inline-flex; align-items: center; gap: var(--sp-2); } .c-article-head__meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .c-article-head__cover { max-width: 960px; margin: var(--sp-8) auto 0; } .c-article-head__cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-xl); background: var(--tint); } .c-article__column { padding-block: var(--sp-8) var(--section-y); } .c-article__media { margin-block-end: var(--sp-8); } .c-article__media iframe, .c-article__media video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-lg); background: var(--night-900); } .c-article__audio { margin-block-end: var(--sp-8); } .c-article__audio audio { width: 100%; } .c-article__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-8) 0 0; padding: 0; list-style: none; } .c-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: var(--sp-8) 0 0; padding: 0; list-style: none; } @media (min-width: 768px) { .c-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .c-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); } /* ---- c-prose: the reading column's text (18px; 1.7 EN / 1.9 AR) --------- */ .c-prose { color: var(--ink); font-size: var(--fs-article); line-height: var(--lh-article); overflow-wrap: break-word; } .c-prose > :first-child { margin-block-start: 0; } .c-prose > :last-child { margin-block-end: 0; } .c-prose p, .c-prose ul, .c-prose ol, .c-prose blockquote, .c-prose figure, .c-prose table, .c-prose pre { margin: 0 0 1.1em; } .c-prose h2, .c-prose h3, .c-prose h4, .c-prose h5, .c-prose h6 { margin: 1.6em 0 .6em; color: var(--ink); font-family: var(--font-display); font-weight: var(--fw-display); line-height: var(--lh-h2); } .c-prose h2 { font-size: 1.5rem; } .c-prose h3 { font-size: 1.25rem; } .c-prose h4, .c-prose h5, .c-prose h6 { font-size: 1.125rem; } .c-prose a { color: var(--action); text-decoration: underline; text-underline-offset: 3px; } .c-prose a:hover { color: var(--action-hover); } .c-prose ul, .c-prose ol { padding-inline-start: 1.4em; } .c-prose li + li { margin-block-start: .4em; } .c-prose li::marker { color: var(--action); } .c-prose blockquote { padding-inline-start: var(--sp-5); border-inline-start: 3px solid var(--action); color: var(--ink-muted); } .c-prose img, .c-prose video { max-width: 100%; height: auto; border-radius: var(--radius-lg); } .c-prose iframe { max-width: 100%; border: 0; } .c-prose figcaption { margin-block-start: var(--sp-2); color: var(--ink-muted); font-size: var(--fs-meta); } .c-prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--fs-body); } .c-prose th, .c-prose td { padding: var(--sp-2) var(--sp-3); border: var(--border-e0); text-align: start; vertical-align: top; } .c-prose th { background: var(--surface-soft); font-weight: 600; } .c-prose hr { margin: 2em 0; border: 0; border-block-start: var(--border-e0); opacity: 1; } .c-prose pre { overflow-x: auto; padding: var(--sp-4); border-radius: var(--radius-md); background: var(--surface-soft); font-size: var(--fs-meta); } /* ---- c-share ------------------------------------------------------------ */ .c-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin-block-start: var(--sp-8); padding-block: var(--sp-5); border-block: var(--border-e0); } .c-share__label { margin: 0; color: var(--ink); font-weight: 600; } .c-share__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } .c-share__link { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-width: var(--tap-min); min-height: var(--tap-min); border: var(--border-e0); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-weight: 600; text-decoration: none; transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); } .c-share__link:hover { border-color: var(--action); color: var(--action); } .c-share__link--whatsapp { padding-inline: var(--sp-4); border-color: var(--success); color: var(--success); } .c-share__link--whatsapp:hover { border-color: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--surface)); color: var(--success); } .c-share__link--whatsapp .fa-whatsapp { font-size: 1.25rem; } /* ---- c-author ------------------------------------------------------------ */ .c-author { display: flex; align-items: flex-start; gap: var(--sp-5); margin-block-start: var(--sp-8); padding: var(--sp-6); border-radius: var(--radius-xl); background: var(--surface-soft); } .c-author__photo { flex: none; width: 72px; height: 72px; overflow: hidden; border-radius: 50%; background: var(--night-900); } .c-author__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } .c-author__initial { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--on-night); font-size: 1.75rem; font-weight: 700; } .c-author__name { margin: 0; color: var(--ink); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-h3); } .c-author__role { margin: var(--sp-1) 0 0; color: var(--ink-muted); font-size: var(--fs-meta); line-height: var(--lh-meta); } .c-author__bio { margin: var(--sp-3) 0 0; color: var(--ink-muted); } .c-author__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-block-start: var(--sp-4); } @media (max-width: 575.98px) { .c-author { gap: var(--sp-4); padding: var(--sp-5); } .c-author__photo { width: 56px; height: 56px; } } /* ---- c-article-nav: previous / next --------------------------------------- */ .c-article-nav { display: grid; gap: var(--sp-3); margin-block-end: var(--sp-10); } @media (min-width: 768px) { .c-article-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); } .c-article-nav__link--next { grid-column: 2; text-align: end; } } .c-article-nav__link { display: grid; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5); border: var(--border-e0); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color var(--dur) var(--ease-out); } .c-article-nav__link:hover { border-color: var(--action); } .c-article-nav__label { color: var(--action); font-size: var(--fs-meta); font-weight: 600; } .c-article-nav__title { display: -webkit-box; overflow: hidden; font-weight: 600; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* ---- Comments -------------------------------------------------------------- */ .c-comments__title { margin: 0 0 var(--sp-5); color: var(--ink); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-display); line-height: var(--lh-h3); } .c-comments { display: grid; gap: var(--sp-5); margin: 0 0 var(--sp-6); padding: 0; list-style: none; } .c-comment { display: flex; gap: var(--sp-4); } .c-comment__avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tint); color: var(--action); font-weight: 700; } .c-comment__author { margin: 0; font-weight: 600; } .c-comment__date { margin: 0; color: var(--ink-muted); font-size: var(--fs-meta); } .c-comment__body { margin: var(--sp-2) 0 0; overflow-wrap: anywhere; } .c-comments__status { margin: 0 0 var(--sp-5); color: var(--success); font-weight: 600; } .c-comments__form form { margin-block-start: var(--sp-4); } /* ---- /media: press & speaking ---------------------------------------------- */ .c-media-intro { display: grid; gap: var(--sp-8); } @media (min-width: 992px) { .c-media-intro--video { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sp-12); align-items: center; } } .c-media-intro__lead { max-width: 60ch; margin: var(--sp-4) 0 0; color: var(--ink-muted); font-size: var(--fs-lead); line-height: var(--lh-lead); } .c-media-intro__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-6); } .c-media-intro__video .yt-facade { border-radius: var(--radius-xl); } .c-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { .c-channels { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 992px) { .c-channels { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-5); } } .c-channel { display: grid; justify-items: center; align-content: start; gap: var(--sp-3); } .c-channel__link { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; min-height: 48px; padding-inline: var(--sp-4); border: var(--border-e0); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-weight: 600; text-decoration: none; transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); } .c-channel__link:hover { border-color: var(--action); color: var(--action); } /* QR codes only where someone can scan them with a phone: desktop. */ .c-channel__qr { display: none; } @media (min-width: 992px) { .c-channel__qr { display: block; width: 112px; height: 112px; padding: var(--sp-2); border: var(--border-e0); border-radius: var(--radius-md); background: var(--surface); } } .c-press-kit { display: grid; gap: var(--sp-6); align-items: start; } @media (min-width: 768px) { .c-press-kit { grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-8); } } .c-press-kit__photo { max-width: 200px; margin: 0; } .c-press-kit__photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-xl); background: var(--night-900); } .c-press-kit__name { margin: 0; color: var(--ink); font-size: var(--fs-h3); font-weight: 700; } .c-press-kit__bio { max-width: 65ch; margin: var(--sp-3) 0 0; color: var(--ink-muted); line-height: var(--lh-body); } .c-press-kit__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-5); } /* ========================================================================== Phase 7: Sari Community (T5), Work & Impact (T6) and utility pages (T8) ========================================================================== */ /* Anchors below a sticky sub-nav (/communities#join) clear it as well. */ .c-subnav ~ [id], .c-subnav ~ * [id] { scroll-margin-top: calc(var(--header-h) + var(--sp-12) + var(--sp-4)); } /* ---- c-intro: a page's opening block, media beside the text from 768px --- */ .c-intro__inner { display: grid; gap: var(--sp-6); align-items: center; } .c-intro__media img { display: block; width: 100%; height: auto; border-radius: var(--radius-xl); background: var(--tint); } .c-intro__title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-display); line-height: var(--lh-h2); text-wrap: balance; } .c-intro__text { max-width: 65ch; margin: 0; color: var(--ink-muted); font-size: var(--fs-lead); line-height: var(--lh-lead); } .c-intro__title + .c-intro__text { margin-block-start: var(--sp-4); } @media (min-width: 768px) { .c-intro__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-10); } .c-intro__inner--text { grid-template-columns: minmax(0, 1fr); } /* A photo (not a landscape picture): a narrower column. */ .c-intro__inner:has(> .c-intro__media--photo) { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); } } @media (max-width: 767.98px) { .c-intro__media--photo img { max-width: 220px; margin-inline: auto; } } /* ---- c-initiative: a Sari Community initiative ---------------------------- */ .c-initiatives { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } @media (min-width: 576px) { .c-initiatives { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); } } @media (min-width: 992px) { .c-initiatives { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } } .c-initiative { /* positioned: the .visually-hidden labels inside must not escape */ position: relative; display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; padding: 0 var(--sp-5) var(--sp-3); overflow: hidden; border: var(--border-e0); border-radius: var(--radius-lg); background: var(--surface); } .c-initiative__media { margin-inline: calc(-1 * var(--sp-5)); aspect-ratio: 16 / 9; background: var(--tint); } .c-initiative__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .c-initiative__title { margin: var(--sp-1) 0 0; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); } .c-initiative__text { margin: 0; color: var(--ink-muted); line-height: var(--lh-body); } .c-initiative__actions { margin-block-start: auto; padding-block-start: var(--sp-2); } /* Phones: a shorter picture above the title. */ @media (max-width: 575.98px) { .c-initiative { padding: 0 var(--sp-4) var(--sp-4); } .c-initiative__media { /* Without min-height: 0 the photo's own ratio wins over aspect-ratio. */ min-height: 0; margin-inline: calc(-1 * var(--sp-4)); /* 5:2, as the Media Center's featured cover on phones */ aspect-ratio: 5 / 2; } } .c-initiatives-section .c-more__toggle { margin-block-start: var(--sp-5); } /* ---- /communities: the Sari Council -------------------------------------- */ .council__blocks { display: grid; gap: var(--sp-8); } @media (min-width: 992px) { .council__blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10) var(--sp-8); } .council__block:not(.council__block--half) { grid-column: 1 / -1; } } .council__heading { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-4); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); } .council__heading .c-icon-chip { width: 36px; height: 36px; font-size: 1rem; } .council__block .council__pair { padding: var(--sp-5); border: var(--border-e0); border-radius: var(--radius-lg); background: var(--surface); } .council__brief { max-width: 72ch; margin: 0; padding: var(--sp-5) var(--sp-6); border-inline-start: 4px solid var(--action); border-radius: var(--radius-md); background: var(--tint); color: var(--ink); line-height: var(--lh-lead); } .council__text { max-width: 72ch; margin: 0; color: var(--ink-muted); line-height: var(--lh-body); } .council__label { margin: 0 0 var(--sp-2); color: var(--action); font-size: var(--fs-kicker); font-weight: var(--fw-kicker); letter-spacing: var(--tracking-kicker); text-transform: uppercase; } .council__pair, .council__groups { display: grid; gap: var(--sp-5); } @media (min-width: 768px) { .council__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); } .council__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-8); } } @media (min-width: 992px) { .council__groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---- /communities on phones: a compact rhythm (T5 budget: 4,000px at 390) -- */ @media (max-width: 575.98px) { .community-page .c-section { padding-block: 2rem; } .community-page .c-section-head { margin-block-end: var(--sp-5); } .community-page .c-section-head__intro, .community-intro .c-intro__text { font-size: var(--fs-body); } .council__blocks { gap: var(--sp-6); } /* The picture is decoration: phones start with the text. */ .community-intro .c-intro__media { display: none; } } /* The intro as the page's dark band. */ [data-surface="night"] .c-intro__text { color: rgba(255, 255, 255, .84); } /* ---- c-contact-card: contact details beside a join form (contact-aside) ---- */ /* Rows are 44px tall so the email and phone links are full tap targets. */ .c-contact-card__list { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; } .c-contact-card__list li { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--tap-min); color: var(--ink-muted); } .c-contact-card__list .fas { flex: none; width: 1.25em; color: var(--action); text-align: center; } .c-contact-card__list a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--ink); text-decoration: none; } .c-contact-card__list a:hover { color: var(--action); text-decoration: underline; } .c-contact-card__social { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-5) 0 0; padding: 0; list-style: none; } .c-contact-card__social a { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); border: 1px solid var(--ui-line); border-radius: 50%; color: var(--action); } .c-contact-card__social a:hover { border-color: var(--action); background: var(--tint); } /* ---- Join the Sari Community team (sections/social_media) ----------------- */ .join-section + .c-cta-band { padding-block-start: 0; } /* ---- /projects: selected projects as logo cards -------------------------- */ .c-ventures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } @media (min-width: 992px) { .c-ventures { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); } } .c-venture { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); height: 100%; padding: var(--sp-4); border: var(--border-e0); border-radius: var(--radius-lg); background: var(--surface); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .c-venture:hover, .c-venture:focus-within { transform: translateY(-2px); box-shadow: var(--shadow-e1); } /* The logo box keeps its shape whatever the image's proportions. */ .c-venture__logo { position: relative; aspect-ratio: 1; margin-block-end: var(--sp-1); } @media (min-width: 576px) { .c-venture__logo { aspect-ratio: 4 / 3; } } .c-venture__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .c-venture__title { margin: 0; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); } .c-venture__title a { color: inherit; text-decoration: none; } /* The whole card opens the website. */ .c-venture__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .c-venture__title a:hover { color: var(--action); } .c-venture__host { display: flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--ink-muted); font-size: var(--fs-meta); overflow-wrap: anywhere; } .c-venture__host i { flex: none; color: var(--action); font-size: .75rem; } /* The #ventures wall: every logo (the home page's wall shows six on phones). */ @media (max-width: 575.98px) { .c-logo-grid--all .c-logo-grid__item:nth-child(n + 7) { display: flex; } } .c-logo-grid--all .c-logo-grid__item { padding: var(--sp-2); } .c-logo-grid--all .c-logo-grid__item img { width: 100%; height: 100%; } /* Wide screens: a little flatter than square, like the home page's wall. */ @media (min-width: 992px) { .c-logo-grid--all .c-logo-grid__item { aspect-ratio: 5 / 4; } } .c-logo-grid__item > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: var(--radius-sm); } /* ---- /our-contributions ------------------------------------------------------ */ .c-contributions__intro { max-width: 65ch; margin: 0 0 var(--sp-8); color: var(--ink-muted); font-size: var(--fs-lead); line-height: var(--lh-lead); } .c-contributions__list { row-gap: 0; } .c-contributions__list li { padding-block: var(--sp-4); border-block-end: var(--border-e0); } @media (max-width: 575.98px) { .c-contributions__intro { margin-block-end: var(--sp-5); font-size: var(--fs-body); } .c-contributions__list li { padding-block: var(--sp-3); } } /* ---- Videos (sections/media): click-to-play facades in a grid ------------- */ .c-videos { display: grid; gap: var(--sp-6) var(--sp-5); margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { .c-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 992px) { .c-videos { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .c-videos .yt-facade { border-radius: var(--radius-lg); } .c-videos__title { margin: var(--sp-3) 0 0; color: var(--ink); font-weight: 600; line-height: var(--lh-h3); } /* ---- App download (sections/app_download) ---------------------------------- */ .c-app__lead { margin: var(--sp-3) 0 0; color: var(--ink); font-size: var(--fs-lead); line-height: var(--lh-lead); } .c-app__text { max-width: 60ch; margin: var(--sp-3) 0 0; color: var(--ink-muted); line-height: var(--lh-body); } .c-app__stores { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-6) 0 0; padding: 0; list-style: none; } .c-app__stores a { display: inline-flex; border-radius: var(--radius-sm); } .c-app__stores img { display: block; width: auto; height: 52px; } /* ---- /business-card: a phone contact card (no banner) --------------------- */ .c-bcard-page { padding-block: var(--sp-8) var(--section-y); background: var(--surface-soft); } .c-bcard { display: grid; gap: var(--sp-5); max-width: 440px; margin-inline: auto; padding: var(--sp-8) var(--sp-6) var(--sp-6); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-e3); } .c-bcard__head { display: grid; justify-items: center; gap: var(--sp-2); text-align: center; } .c-bcard__photo { width: 128px; height: 128px; margin-block-end: var(--sp-2); border-radius: 50%; object-fit: cover; object-position: top; background: var(--night-900); } .c-bcard__name { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-display); line-height: var(--lh-h2); text-wrap: balance; } .c-bcard__title { max-width: 34ch; margin: 0; color: var(--ink-muted); line-height: var(--lh-body); } .c-bcard__place { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--ink-muted); font-size: var(--fs-meta); } .c-bcard__place i { color: var(--action); } .c-bcard__actions { display: grid; margin: 0; padding: 0; list-style: none; border-block: var(--border-e0); } .c-bcard__actions li + li { border-block-start: var(--border-e0); } .c-bcard__action { display: flex; align-items: center; gap: var(--sp-3); min-height: 64px; padding-block: var(--sp-2); color: var(--ink); text-decoration: none; } .c-bcard__action:hover .c-bcard__action-label { color: var(--action); } .c-bcard__action-text { display: grid; flex: 1; min-width: 0; } .c-bcard__action-label { font-weight: 600; } .c-bcard__action-value { justify-self: start; color: var(--ink-muted); font-size: var(--fs-meta); overflow-wrap: anywhere; } .c-bcard__action-arrow { flex: none; color: var(--action); } .c-icon-chip--whatsapp { background: color-mix(in srgb, var(--success) 10%, var(--surface)); color: var(--success); } .c-bcard__socials { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } .c-bcard__social { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); border: var(--border-e0); border-radius: 50%; color: var(--ink); } .c-bcard__social:hover { border-color: var(--action); color: var(--action); } .c-bcard__share > summary { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--tap-min); color: var(--action); font-weight: 600; list-style: none; cursor: pointer; } .c-bcard__share > summary::-webkit-details-marker { display: none; } /* Wide screens: always open, the summary is a label. */ @media (min-width: 768px) { .c-bcard__share > summary { color: var(--ink-muted); font-weight: 500; cursor: default; } } .c-bcard__qr { display: grid; justify-items: center; gap: var(--sp-2); margin-block-start: var(--sp-2); text-align: center; } .c-bcard__qr img { width: 200px; height: 200px; padding: var(--sp-2); border: var(--border-e0); border-radius: var(--radius-md); background: var(--surface); } .c-bcard__qr p { margin: 0; color: var(--ink-muted); font-size: var(--fs-meta); } @media (max-width: 575.98px) { .c-bcard-page { padding-block-start: var(--sp-5); } .c-bcard { padding: var(--sp-6) var(--sp-5) var(--sp-5); } } /* ---- Reading pages (cookie and policy): 720px column, table of contents ---- */ .c-section--reading { padding-block-start: var(--sp-8); } .c-toc { margin-block-end: var(--sp-8); padding: var(--sp-5); border: var(--border-e0); border-radius: var(--radius-lg); background: var(--surface-soft); } .c-toc__title { margin: 0 0 var(--sp-2); color: var(--ink); font-weight: 700; } .c-toc__list { display: grid; margin: 0; padding-inline-start: 1.5em; } .c-toc__list li::marker { color: var(--action); font-variant-numeric: tabular-nums; } .c-toc__list a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--action); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; } .c-toc__list a:hover { text-decoration-color: currentColor; } /* CMS text pasted from Word or another site (legal pages): the site's fonts, sizes and colours instead of the pasted ones, no shading or indents. */ .c-prose--cms :is(p, div, span, font, b, strong, em, u, li, a, h2, h3, h4, h5, h6) { font-family: inherit !important; } .c-prose--cms :is(span, font, b, strong, em, u) { font-size: inherit !important; line-height: inherit !important; } .c-prose--cms :is(p, div, span, font, li) { color: inherit !important; } .c-prose--cms :is(p, div, li) { margin-inline: 0 !important; padding-inline: 0 !important; background: none !important; text-align: start !important; text-indent: 0 !important; } .c-prose--cms :is(h2, h3, h4, h5, h6) { color: var(--ink) !important; line-height: var(--lh-h2) !important; } .c-prose--cms h2 { font-size: 1.375rem !important; } .c-prose--cms :is(h3, h4, h5, h6) { font-size: 1.125rem !important; } .c-prose--cms div:empty, .c-prose--cms p:empty { display: none; }