/* ============================================================================ MABARRAH NOCTURNE — layered cinematic design system Brand-exact (VI manual v1.0): deep petrol-teal canvas + brand greens/gold, sweeping curved color-blocks + topographic contour lines, Rubik type. Additive + scoped (mbn-*). Loaded AFTER v9-design-system.css on home / charity-guide / programs / impact only. Does not touch other pages. ========================================================================== */ :root { --mbn-abyss: #061e23; --mbn-teal-950:#08252b; --mbn-teal-900:#0b3038; --mbn-teal-800:#0e3d47; --mbn-teal-700:#124049; --mbn-teal-600:#145463; /* brand primary dark blue-teal */ --mbn-teal-400:#69b2b0; /* secondary teal */ --mbn-blue: #4080ab; /* logo hands blue */ --mbn-green: #E3C15A; /* identity gold-light: fill under #08252b text on pressed chips */ --mbn-green-b: #C9A227; /* bright leaf accent */ --mbn-gold: #e3d680; /* soft brand gold */ --mbn-gold-cta:#C9A227; /* CTA gold */ --mbn-cream: #f5f4ef; --mbn-white: #ffffff; --mbn-mist: rgba(245,244,239,.74); --mbn-faint: rgba(245,244,239,.52); --mbn-line: rgba(105,178,176,.26); --mbn-ease: cubic-bezier(.22,1,.36,1); --mbn-ease-out:cubic-bezier(.16,1,.3,1); /* Rubik is gone: a Latin face, on an Arabic site, in no decision, costing an external Google Fonts request on every page that loaded it. */ --mbn-font: 'Alexandria','Noto Kufi Arabic',system-ui,sans-serif; } /* ---- Cinematic canvas -------------------------------------------------- */ .mbn { position:relative; background:var(--mbn-teal-900); color:var(--mbn-cream); font-family:var(--mbn-font); overflow:clip; isolation:isolate; } .mbn--abyss { background: radial-gradient(120% 90% at 82% -10%, rgba(64,128,171,.16), transparent 55%), radial-gradient(90% 80% at 8% 110%, rgba(61, 117, 128,.14), transparent 55%), linear-gradient(180deg, var(--mbn-teal-950), var(--mbn-abyss)); } .mbn__inner { position:relative; z-index:2; max-width:1180px; margin-inline:auto; padding-inline:clamp(20px,5vw,56px); } /* topographic contour texture (signature graphic element) */ .mbn__contours { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5; background-repeat:no-repeat; background-position:top right; background-size:min(760px,68vw) auto; mix-blend-mode:screen; will-change:transform; } .mbn__contours--bl { background-position:bottom left; background-size:min(680px,60vw) auto; opacity:.4; } /* curved color-block divider (sweeping organic edge, thin white border) */ .mbn__wave { position:absolute; left:0; right:0; z-index:3; line-height:0; pointer-events:none; } .mbn__wave--top { top:-1px; } .mbn__wave--bot { bottom:-1px; } .mbn__wave svg { display:block; width:100%; height:clamp(46px,7vw,104px); } /* ---- Type ------------------------------------------------------------- */ .mbn__kicker { display:inline-flex; align-items:center; gap:.5em; font-size:.8rem; font-weight:600; letter-spacing:.02em; color:var(--mbn-teal-400); text-transform:none; } .mbn__kicker::before { content:""; inline-size:26px; block-size:2px; border-radius:2px; background:linear-gradient(90deg,var(--mbn-green-b),var(--mbn-teal-400)); } .mbn h1,.mbn h2,.mbn h3 { font-family:var(--mbn-font); color:var(--mbn-white); font-weight:700; line-height:1.14; letter-spacing:-.01em; } .mbn__h1 { font-size:clamp(2.1rem,5.4vw,4rem); font-weight:800; } .mbn__h2 { font-size:clamp(1.55rem,3.2vw,2.5rem); font-weight:700; margin-block-end:.5em; } .mbn__lead { font-size:clamp(1rem,1.5vw,1.18rem); line-height:1.85; color:var(--mbn-mist); max-inline-size:60ch; } /* ---- HERO (video) ----------------------------------------------------- */ .mbn-hero { position:relative; min-block-size:clamp(600px,92vh,940px); display:flex; align-items:flex-end; overflow:clip; background:var(--mbn-teal-950); isolation:isolate; } .mbn-hero__video, .mbn-hero__poster { position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; z-index:0; } .mbn-hero__poster { transition:opacity .8s ease; } .mbn-hero.is-playing .mbn-hero__poster { opacity:0; } .mbn-hero__scrim { position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(180deg, rgba(8,37,43,.55) 0%, rgba(8,37,43,.18) 34%, rgba(6,30,35,.72) 78%, rgba(6,30,35,.96) 100%), radial-gradient(80% 70% at 78% 18%, rgba(64,128,171,.22), transparent 60%); } .mbn-hero__inner { position:relative; z-index:3; inline-size:100%; max-width:1180px; margin-inline:auto; padding:clamp(28px,5vw,56px) clamp(20px,5vw,56px) clamp(40px,6vw,72px); } .mbn-hero__grid { display:grid; gap:clamp(24px,4vw,48px); grid-template-columns:1.35fr .9fr; align-items:end; } @media (max-width:900px){ .mbn-hero__grid{ grid-template-columns:1fr; } } .mbn-hero__stat { font-size:clamp(2.6rem,7vw,5.2rem); font-weight:800; color:var(--mbn-white); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .mbn-hero__stat small { display:block; font-size:.9rem; font-weight:500; color:var(--mbn-gold); letter-spacing:0; margin-block-start:10px; } .mbn-hero__actions { display:flex; flex-wrap:wrap; gap:12px; margin-block-start:26px; } .mbn-hero__cue { position:absolute; inset-inline-start:50%; inset-block-end:18px; z-index:4; transform:translateX(-50%); color:var(--mbn-faint); font-size:.72rem; display:flex; flex-direction:column; align-items:center; gap:6px; } .mbn-hero__cue span { inline-size:1px; block-size:34px; background:linear-gradient(var(--mbn-teal-400),transparent); animation:mbn-cue 1.9s var(--mbn-ease) infinite; } @keyframes mbn-cue { 0%{transform:scaleY(.2);transform-origin:top;opacity:0} 40%{opacity:1} 100%{transform:scaleY(1);transform-origin:top;opacity:0} } /* video mute/replay control */ .mbn-hero__vidctl { position:absolute; z-index:4; inset-block-start:clamp(16px,3vw,26px); inset-inline-start:clamp(16px,3vw,26px); display:inline-flex; gap:8px; } .mbn-hero__vidctl button { inline-size:38px; block-size:38px; border-radius:999px; border:1px solid rgba(245,244,239,.28); background:rgba(6,30,35,.45); color:var(--mbn-cream); backdrop-filter:blur(6px); cursor:pointer; display:grid; place-items:center; transition:background .2s,border-color .2s,transform .2s; } .mbn-hero__vidctl button:hover { background:rgba(6,30,35,.75); border-color:var(--mbn-teal-400); transform:translateY(-1px); } /* ---- Buttons ---------------------------------------------------------- */ .mbn-btn { --_bg:var(--mbn-green-b); display:inline-flex; align-items:center; gap:.55em; padding:14px 26px; border-radius:999px; font-family:var(--mbn-font); font-weight:600; font-size:1rem; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .25s var(--mbn-ease), box-shadow .25s, background .25s, color .2s; will-change:transform; } .mbn-btn--gold { background:var(--mbn-gold-cta); color:#132a12; box-shadow:0 10px 30px -12px rgba(212,175,55,.6); } .mbn-btn--gold:hover { transform:translateY(-2px); box-shadow:0 16px 40px -12px rgba(212,175,55,.7); } .mbn-btn--ghost { background:rgba(245,244,239,.06); color:var(--mbn-cream); border-color:rgba(105,178,176,.4); } .mbn-btn--ghost:hover { transform:translateY(-2px); background:rgba(105,178,176,.14); border-color:var(--mbn-teal-400); } /* ---- Nocturne section band ------------------------------------------- */ .mbn-band { position:relative; padding-block:clamp(64px,9vw,128px); } .mbn-band__head { max-inline-size:64ch; margin-block-end:clamp(28px,4vw,48px); } /* stat / track chips row */ .mbn-tracks { display:flex; flex-wrap:wrap; gap:10px; } .mbn-chip { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; border:1px solid var(--mbn-line); background:rgba(105,178,176,.06); color:var(--mbn-mist); font-size:.9rem; font-weight:500; cursor:pointer; transition:all .22s var(--mbn-ease); } .mbn-chip:hover { border-color:var(--mbn-teal-400); color:var(--mbn-white); transform:translateY(-1px); } .mbn-chip[aria-pressed="true"]{ background:var(--mbn-green); border-color:var(--mbn-green-b); color:#08252b; font-weight:600; } /* ---- Projects catalogue ---------------------------------------------- */ .mbn-cat { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); } .mbn-card { position:relative; display:flex; flex-direction:column; gap:12px; padding:22px; border-radius:18px; border:1px solid var(--mbn-line); overflow:clip; background:linear-gradient(165deg, rgba(20,84,99,.55), rgba(11,48,56,.72)); transition:transform .3s var(--mbn-ease), border-color .3s, box-shadow .3s; } .mbn-card::before { content:""; position:absolute; inset-block-start:0; inset-inline:0; block-size:3px; background:linear-gradient(90deg,var(--mbn-green-b),var(--mbn-teal-400)); opacity:.85; } .mbn-card:hover { transform:translateY(-4px); border-color:var(--mbn-teal-400); box-shadow:0 24px 50px -24px rgba(0,0,0,.6); } .mbn-card__tag { align-self:flex-start; font-size:.72rem; font-weight:600; padding:4px 10px; /* أبيض لا تركوازي. كان var(--mbn-teal-400) = #69b2b0 على أرضية مركّبة من تدرّج البطاقة شبه الشفاف فوق القسم الداكن. أعطى القياس قراءتين حسب طريقة تركيب الطبقات — 2.08 و4.44 — وكلتاهما تحت الـ4.5 التي يحتاجها نصّ 12px، فالإصلاح مطلوب في الحالتين. الأبيض يعطي 5.08 في أسوأ القراءتين فيمرّ أيّاً كان التركيب الفعلي. خلفية الوسم التركوازية تبقى، فتحفظ اللمسة اللونية دون أن تحمل النصّ. */ border-radius:999px; background:rgba(105,178,176,.14); color:#ffffff; } .mbn-card__name { font-size:1.06rem; font-weight:700; color:var(--mbn-white); line-height:1.4; } .mbn-card__meta { display:flex; gap:14px; font-size:.8rem; color:var(--mbn-faint); } .mbn-card__foot { margin-block-start:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block-start:14px; border-block-start:1px solid var(--mbn-line); } .mbn-card__cost { font-size:1.15rem; font-weight:800; color:var(--mbn-gold); font-variant-numeric:tabular-nums; } .mbn-card__cost small { font-size:.68rem; font-weight:500; color:var(--mbn-faint); margin-inline-start:4px; } .mbn-card__cta { padding:9px 16px; border-radius:10px; background:var(--mbn-green-b); color:#08252b; font-weight:700; font-size:.84rem; text-decoration:none; white-space:nowrap; transition:transform .2s var(--mbn-ease), background .2s; } .mbn-card__cta:hover { transform:translateY(-1px); background:var(--mbn-gold-cta); } /* featured health project */ .mbn-feat { position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(20px,4vw,44px); align-items:center; padding:clamp(24px,4vw,44px); border-radius:24px; overflow:clip; border:1px solid var(--mbn-line); background: radial-gradient(90% 120% at 100% 0%, rgba(61, 117, 128,.24), transparent 60%), linear-gradient(160deg, rgba(20,84,99,.7), rgba(8,37,43,.86)); } @media (max-width:820px){ .mbn-feat{ grid-template-columns:1fr; } } .mbn-feat__badge { display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:600; color:#08252b; background:var(--mbn-gold); padding:6px 14px; border-radius:999px; } /* ---- Motion utilities (Emil-grade blur-up reveals) ------------------- */ .mbn-rise { opacity:0; transform:translateY(26px); filter:blur(8px); transition:opacity .8s var(--mbn-ease-out), transform .8s var(--mbn-ease-out), filter .8s var(--mbn-ease-out); } .mbn-rise.is-in { opacity:1; transform:none; filter:blur(0); } .mbn-stagger > * { opacity:0; transform:translateY(20px); filter:blur(6px); transition:opacity .7s var(--mbn-ease-out), transform .7s var(--mbn-ease-out), filter .7s var(--mbn-ease-out); } .mbn-stagger.is-in > * { opacity:1; transform:none; filter:blur(0); } .mbn-stagger.is-in > *:nth-child(1){transition-delay:.04s} .mbn-stagger.is-in > *:nth-child(2){transition-delay:.1s} .mbn-stagger.is-in > *:nth-child(3){transition-delay:.16s} .mbn-stagger.is-in > *:nth-child(4){transition-delay:.22s} .mbn-stagger.is-in > *:nth-child(5){transition-delay:.28s} .mbn-stagger.is-in > *:nth-child(6){transition-delay:.34s} .mbn-stagger.is-in > *:nth-child(n+7){transition-delay:.4s} /* ---- Animated logo lockup -------------------------------------------- */ .mbn-logo { display:inline-block; inline-size:clamp(120px,16vw,168px); } .mbn-logo svg { inline-size:100%; height:auto; overflow:visible; } .mbn-logo .lf { transform-box:fill-box; transform-origin:bottom center; opacity:0; transform:scale(.4) translateY(8px); } .mbn-logo.is-in .lf { animation:mbn-leaf .9s var(--mbn-ease-out) forwards; } .mbn-logo.is-in .lf--2{animation-delay:.12s}.mbn-logo.is-in .lf--3{animation-delay:.24s} @keyframes mbn-leaf { to{opacity:1;transform:none} } .mbn-logo .hand { stroke-dasharray:1; stroke-dashoffset:1; } .mbn-logo.is-in .hand { animation:mbn-draw 1s var(--mbn-ease) .1s forwards; } @keyframes mbn-draw { to{stroke-dashoffset:0} } .mbn-logo .wm { opacity:0; transform:translateY(6px); } .mbn-logo.is-in .wm { animation:mbn-leaf .8s var(--mbn-ease-out) .5s forwards; } /* ---- Footer contact block -------------------------------------------- */ .mbn-contact { display:flex; flex-wrap:wrap; gap:18px 34px; align-items:center; } .mbn-contact a { color:var(--mbn-mist); text-decoration:none; font-size:.95rem; display:inline-flex; align-items:center; gap:9px; transition:color .2s; } .mbn-contact a:hover { color:var(--mbn-white); } .mbn-soc { display:inline-flex; gap:10px; } .mbn-soc a { inline-size:40px; block-size:40px; border-radius:999px; display:grid; place-items:center; border:1px solid var(--mbn-line); color:var(--mbn-mist); transition:all .22s var(--mbn-ease); } .mbn-soc a:hover { border-color:var(--mbn-teal-400); color:var(--mbn-white); transform:translateY(-2px); } /* video hero replaces the carousel rotation — retire its pagination dots */ #home .hero-carousel-nav { display:none !important; } /* ---- Reduced motion / iOS render safety ------------------------------ */ @media (prefers-reduced-motion:reduce){ .mbn-rise,.mbn-stagger>*,.mbn-logo .lf,.mbn-logo .wm{transition:none!important;animation:none!important; opacity:1!important;transform:none!important;filter:none!important} .mbn-logo .hand{stroke-dashoffset:0!important} .mbn-hero__cue span{animation:none} } @media (max-width:820px){ .mbn__contours{opacity:.32} .mbn-hero{min-block-size:clamp(560px,86vh,760px)} } /* ============================================================================ DAYLIGHT — the same system on a light ground. ========================================================================== WHY THIS EXISTS, AND WHY IT IS A VARIABLE BLOCK AND NOT A REWRITE Measured on 2026-09-09 at 1256x782, with the same script run against alihsan.ae for comparison: الإحسان المبرة light ground : dark 35.3 : 1 2.5 : 1 A 14x difference — and the cause is NOT the palette. Their gold is #C79207 against our #C9A227; their grey #737373 against our #5c6b75; their light grounds #FFFFFF / #FAFAFA / #F5F5F5 against our #FFFFFF / #F4F6F7. Nearly the same colours. What differs is the RATIO: they paint the brand colour on 152 units of area against 3498 of white, so it reads as an accent. We paint navy #0a2a3d and #0d3228 across 4805 units, as a ground. .mbn--abyss alone is 2387px of the homepage's 16385 — the tallest section on the page, and dark. This class turns that section light without touching the nocturne system the hero and the CTA strip still use. It works by redefining the --mbn-* variables INSIDE the section. Ten of the twelve colour tokens are consumed through var(), so one scoped block recolours the headings, the leads, the kickers, the chips, the borders and the muted text at once. The rules below cover only what the file hardcodes as rgba() and cannot inherit: the section ground, the card, the ghost button, the featured panel, and the contour texture's blend mode. Contrast checked, not assumed, all against #ffffff: #0a2a3d 14.88:1 headings #12525C 8.80:1 kicker and links (AA at any size) #5c6b75 5.50:1 muted body text (AA) #8a6516 5.31:1 gold as TEXT (AA) --mbn-gold #e3d680 and --mbn-gold-cta #C9A227 measure 1.6:1 and 2.42:1 on white, so they are kept for FILLS only and never used as text here. That trap has already cost this project once: --gold-600 #9C7B1B was introduced for a progress-bar track, where 1.4.11 asks 3:1, and then read as text where 1.4.3 asks 4.5:1 and it measured 3.99. */ .mbn--daylight { --mbn-abyss: #ffffff; --mbn-teal-950: #ffffff; --mbn-teal-900: #ffffff; --mbn-teal-800: #eef3f6; /* = --ds-teal-050, the tint we owned and never used */ --mbn-teal-700: #12525C; --mbn-teal-600: #12525C; --mbn-teal-400: #12525C; /* kicker: 8.80:1 on white, was a pale teal for dark */ --mbn-blue: #15506f; --mbn-green: #12525C; --mbn-green-b: #12525C; /* used as a FILL behind #ffffff text below */ --mbn-gold: #8a6516; /* the readable gold: 5.31:1. Fills use gold-cta. */ --mbn-cream: #1a2530; /* body text, 14.0:1 */ --mbn-white: #0a2a3d; /* headings, 14.88:1 */ --mbn-mist: #40505c; --mbn-faint: #5c6b75; /* 5.50:1 — AA, where the dark theme used 52% cream */ --mbn-line: rgba(10,42,61,.14); background: radial-gradient(120% 90% at 82% -10%, rgba(18,82,92,.07), transparent 55%), radial-gradient(90% 80% at 8% 110%, rgba(18, 82, 92,.06), transparent 55%), linear-gradient(180deg, #ffffff 0%, #f7fafb 60%, #eef3f6 100%); color: var(--mbn-cream); } /* The contour texture is drawn with mix-blend-mode:screen, which lightens — on white it lightens to white and the texture disappears. multiply is the light-ground equivalent, and the opacity comes down because a dark line on white is far louder than a light line on near-black. */ .mbn--daylight .mbn__contours { mix-blend-mode: multiply; opacity: .16; } .mbn--daylight .mbn__contours--bl { opacity: .13; } /* A card on white is defined by its edge and a soft shadow, not by being a lighter box than its surroundings — the dark theme's trick, which inverts into a muddy grey rectangle if left alone. */ .mbn--daylight .mbn-card { background: #ffffff; border-color: rgba(10,42,61,.12); box-shadow: 0 1px 2px rgba(10,42,61,.04), 0 8px 24px -16px rgba(10,42,61,.14); } .mbn--daylight .mbn-card:hover { border-color: #12525C; box-shadow: 0 2px 4px rgba(10,42,61,.06), 0 18px 40px -20px rgba(10,42,61,.22); } .mbn--daylight .mbn-card__tag { background: #eef3f6; color: #12525C; } .mbn--daylight .mbn-card__cost { color: #8a6516; } /* 5.31:1 as text */ .mbn--daylight .mbn-card__cta { background: #12525C; color: #ffffff; } .mbn--daylight .mbn-card__cta:hover { background: #0a2a3d; color: #ffffff; } .mbn--daylight .mbn-chip { background: #ffffff; color: #40505c; border-color: rgba(10,42,61,.16); } .mbn--daylight .mbn-chip:hover { border-color: #12525C; color: #0a2a3d; } .mbn--daylight .mbn-chip[aria-pressed="true"] { background: #12525C; border-color: #12525C; color: #ffffff; } .mbn--daylight .mbn-btn--ghost { background: #ffffff; color: #12525C; border-color: rgba(18,82,92,.35); } .mbn--daylight .mbn-btn--ghost:hover { background: #eef3f6; border-color: #12525C; } .mbn--daylight .mbn-feat { background: linear-gradient(160deg, #ffffff, #eef3f6); border-color: rgba(10,42,61,.12); box-shadow: 0 1px 2px rgba(10,42,61,.04), 0 20px 50px -30px rgba(10,42,61,.18); } /* The badge keeps the CTA gold as a FILL with dark navy on it — 11.6:1 — rather than becoming gold text, which measures 2.42:1 and fails. */ .mbn--daylight .mbn-feat__badge { background: #C9A227; color: #0a2a3d; } /* A wave divider is cut out of the section colour, so on a light ground it has to be filled with the light ground or it leaves a dark band. */ .mbn--daylight .mbn__wave svg path, .mbn--daylight .mbn__wave svg polygon { fill: #ffffff; } /* ---- Catalogue card media --------------------------------------------- Each donation item's own photograph, imported from the WordPress store. Loaded here because mabarrah-nocturne.css is the LAST stylesheet on index.html, impact.html, charity-guide.html and programs.html — the four pages that render this card — and this file already defines the card. Checked, not assumed: nine stylesheets are in play on this site and load order decides the winner. The picture bleeds to the card's edge rather than sitting inside the 22px padding, so it reads as part of the card and not as an inset thumbnail. The negative margin is exactly that padding, in logical properties so RTL and LTR both hold. aspect-ratio, not a height: it reserves the box before the file arrives, so the card does not jump when the image lands (CLS). 16/9 is the ratio the UAE DLS card component specifies, and the imported files are mostly square, so object-fit:cover crops rather than letterboxes — a letterboxed square in a 16/9 frame would put two grey bars on every card. */ .mbn-card__media { margin-block-start: -22px; margin-inline: -22px; margin-block-end: 2px; aspect-ratio: 16 / 9; /* Both of these are what makes the aspect-ratio hold, and neither is optional. .mbn-card is a COLUMN FLEX container, so this block is a flex item whose min-block-size defaults to auto — meaning it may not shrink below its content's min-content height, and the content is a 1200x900 photograph. Measured: the box came out 344x258, exactly 4:3, the image's own ratio, while getComputedStyle still reported aspect-ratio 16/9. The ratio was applied and then overridden by min-content sizing, which is why reading the computed value alone would have said this was working. */ min-block-size: 0; flex: none; overflow: clip; /* Visible while the image loads and if it ever fails: a tinted block in the card's own palette rather than a white flash or a browser error icon. */ background: rgba(105,178,176,.10); } .mbn-card__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; /* The imported photographs vary in subject and exposure; a very slight scale on hover ties the picture to the card's own lift without moving anything else. transform only — no layout property is animated. */ transition: transform .4s var(--mbn-ease); } .mbn-card:hover .mbn-card__media img { transform: scale(1.03); } @media (prefers-reduced-motion: reduce) { .mbn-card__media img { transition: none; } .mbn-card:hover .mbn-card__media img { transform: none; } } .mbn--daylight .mbn-card__media { background: #eef3f6; }