/* ============================================================ powergreen group — brand site Palette built on the logo green, lightened one step for legibility ============================================================ */ /* ------------------------------------------------------------------ Two themes over one set of tokens. Every colour in the stylesheets goes through a variable, and the translucent tints go through an *-rgb channel triple so the same rule works whether the tint sits on a dark or a light ground. `data-theme` on picks the set; app.js writes it. ------------------------------------------------------------------ */ :root, html[data-theme="dark"]{ /* channel triples — used by every rgba() in the sheets */ --green-rgb: 58, 217, 142; --mint-rgb: 165, 243, 205; --ink-rgb: 15, 46, 30; --sun-rgb: 255, 204, 92; --green: #3ad98e; --green-lit: #7defc0; --mint: #c2f8dd; --sun: #ffcc5c; --ink: #0f2e1e; --ink-2: #163b28; --panel: #1d4a33; --on-green: #052315; --shadow: #030d08; --line: rgba(var(--mint-rgb), .17); --line-soft: rgba(var(--mint-rgb), .09); --txt: #eefbf3; --txt-dim: #b3cfc0; --grid-op: .35; --wash-1: .20; --wash-2: .10; --wash-3: .07; --font-display: 'Space Grotesk', 'Tajawal', system-ui, sans-serif; --font-body: 'Inter', 'Tajawal', system-ui, sans-serif; --nav-h: 78px; --pad-x: clamp(20px, 5vw, 88px); --radius: 18px; --ease: cubic-bezier(.22,.61,.36,1); } /* The light theme keeps the same brand green but flips the ground. The mint channel becomes a deep green so every rgba() tint that used to lighten a dark panel now darkens a pale one by the same amount. */ html[data-theme="light"]{ /* both greens are set for WCAG AA: white on --green is 4.6:1, --green-lit text on the palest panel (#dcece4) is 4.7:1 */ --green-rgb: 14, 134, 81; --mint-rgb: 14, 92, 58; --ink-rgb: 242, 245, 243; --sun-rgb: 214, 152, 20; --green: #0e8651; --green-lit: #0b7547; --mint: #0e5c3a; --sun: #b87d10; --ink: #f2f5f3; --ink-2: #e7ece9; --panel: #fafcfb; --on-green: #ffffff; --shadow: #164a32; --line: rgba(var(--mint-rgb), .22); --line-soft: rgba(var(--mint-rgb), .13); --txt: #0c2418; --txt-dim: #4a6a59; --grid-op: .5; --wash-1: .13; --wash-2: .08; --wash-3: .05; color-scheme: light; } :root, html[data-theme="dark"]{ color-scheme: dark; } html[lang="ar"]{ --font-display: 'Tajawal', system-ui, sans-serif; --font-body: 'Tajawal', system-ui, sans-serif; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top: var(--nav-h); } body{ margin:0; background: var(--ink); color: var(--txt); font-family: var(--font-body); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background .35s var(--ease), color .35s var(--ease); } /* ambient background wash */ body::before{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background: radial-gradient(900px 620px at 78% -8%, rgba(var(--green-rgb), var(--wash-1)), transparent 62%), radial-gradient(700px 520px at 4% 22%, rgba(var(--green-rgb), var(--wash-2)), transparent 60%), radial-gradient(900px 700px at 50% 118%, rgba(var(--sun-rgb), var(--wash-3)), transparent 60%); } /* faint engineering grid */ body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity: var(--grid-op); background-image: linear-gradient(rgba(var(--mint-rgb), .045) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--mint-rgb), .045) 1px, transparent 1px); background-size: 76px 76px; mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%); } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4{ font-family: var(--font-display); font-weight:700; line-height:1.08; margin:0; letter-spacing:-.02em; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4{ letter-spacing:0; line-height:1.25; } p{ margin:0; } ::selection{ background: var(--green); color:var(--on-green); } /* ---------- shared shells ---------- */ .wrap{ width:min(1280px, 100%); margin-inline:auto; padding-inline: var(--pad-x); } section{ position:relative; padding-block: clamp(80px, 10vw, 140px); } .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family: var(--font-display); font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color: var(--mint); } html[lang="ar"] .eyebrow{ letter-spacing:0; font-size:13px; } .eyebrow::before{ content:""; width:26px; height:26px; border-radius:50%; flex:none; border:2px solid var(--green); background: radial-gradient(circle at 50% 50%, var(--green) 0 3px, transparent 4px); } .sec-head{ max-width:760px; margin-bottom: clamp(38px, 5vw, 64px); } .sec-head h2{ font-size: clamp(32px, 4.6vw, 60px); margin-top:18px; } .sec-head p{ color: var(--txt-dim); margin-top:18px; font-size: clamp(15px,1.3vw,18px); } .grad{ background: linear-gradient(100deg, var(--green-lit), var(--mint) 45%, var(--sun)); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:10px; padding: 15px 28px; border-radius:100px; font-family: var(--font-display); font-weight:600; font-size:15px; border:1px solid transparent; cursor:pointer; transition: transform .35s var(--ease), background .3s, box-shadow .35s, border-color .3s; } .btn svg{ width:17px; height:17px; transition: transform .35s var(--ease); } html[dir="rtl"] .btn svg{ transform: scaleX(-1); } .btn-primary{ background: var(--green); color:var(--on-green); box-shadow: 0 12px 34px -14px var(--green); } .btn-primary:hover{ background: var(--green-lit); transform: translateY(-3px); box-shadow:0 20px 44px -16px var(--green-lit); } .btn-ghost{ border-color: var(--line); color: var(--txt); background: rgba(var(--mint-rgb), .04); } .btn-ghost:hover{ border-color: var(--green); transform: translateY(-3px); background: rgba(var(--green-rgb), .12); } .btn:hover svg{ transform: translateX(4px); } html[dir="rtl"] .btn:hover svg{ transform: scaleX(-1) translateX(4px); } /* ============================================================ NAVBAR ============================================================ */ .nav{ position:fixed; inset-inline:0; top:0; z-index:100; height: var(--nav-h); display:flex; align-items:center; transition: background .4s var(--ease), backdrop-filter .4s, border-color .4s; border-bottom:1px solid transparent; } .nav.stuck{ background: rgba(var(--ink-rgb), .82); backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--line-soft); } .nav .wrap{ display:flex; align-items:center; gap:24px; width:100%; } .brand{ display:flex; align-items:center; flex:none; } .brand img{ height:44px; width:auto; } /* one wordmark per theme — the white one on dark, the ink one on light */ .logo-light{ display:none; } html[data-theme="light"] .logo-dark{ display:none; } html[data-theme="light"] .logo-light{ display:block; } .nav-links{ display:flex; align-items:center; gap:6px; margin-inline-start:auto; } .nav-links a{ position:relative; padding:9px 15px; border-radius:100px; font-size:14px; color: var(--txt-dim); font-weight:500; transition: color .28s, background .28s; } .nav-links a:hover, .nav-links a.active{ color: var(--txt); background: rgba(var(--mint-rgb), .07); } .nav-links a.active::after{ content:""; position:absolute; inset-inline:15px; bottom:2px; height:2px; background: var(--green); border-radius:2px; } .nav-actions{ display:flex; align-items:center; gap:12px; flex:none; } /* light / dark switch — shows the theme you would move to, not the one you are in */ .theme-btn{ width:42px; height:42px; flex:none; display:grid; place-items:center; cursor:pointer; border:1px solid var(--line); border-radius:100px; background: rgba(var(--mint-rgb), .04); color: var(--txt-dim); padding:0; transition: color .3s, border-color .3s, background .3s, transform .3s var(--ease); } .theme-btn:hover{ color: var(--green-lit); border-color: var(--green); background: rgba(var(--green-rgb), .12); transform: rotate(-18deg); } .theme-btn svg{ width:19px; height:19px; grid-area:1/1; transition: opacity .3s, transform .4s var(--ease); } .theme-btn .sun{ opacity:0; transform: scale(.5) rotate(-90deg); } .theme-btn .moon{ opacity:1; transform:none; } html[data-theme="light"] .theme-btn .sun{ opacity:1; transform:none; } html[data-theme="light"] .theme-btn .moon{ opacity:0; transform: scale(.5) rotate(90deg); } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .lang{ display:flex; align-items:center; gap:2px; padding:4px; border:1px solid var(--line); border-radius:100px; background: rgba(var(--mint-rgb), .04); } .lang button{ border:0; background:transparent; cursor:pointer; color: var(--txt-dim); font-family: var(--font-display); font-weight:600; font-size:13px; padding:6px 14px; border-radius:100px; transition: all .3s var(--ease); } .lang button.on{ background: var(--green); color:var(--on-green); } .lang button[data-lang="ar"]{ font-family:'Tajawal', sans-serif; } .burger{ display:none; width:44px; height:44px; border-radius:12px; flex:none; border:1px solid var(--line); background: rgba(var(--mint-rgb), .04); cursor:pointer; padding:0; place-items:center; } .burger span{ display:block; width:18px; height:2px; background: var(--txt); border-radius:2px; margin:3px auto; transition:.3s var(--ease); } .burger.open span:nth-child(1){ transform: translateY(5px) rotate(45deg); } .burger.open span:nth-child(2){ opacity:0; } .burger.open span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); } /* ============================================================ HERO ============================================================ */ .hero{ min-height: 100svh; display:flex; align-items:center; padding-top: calc(var(--nav-h) + 40px); padding-bottom:70px; overflow:hidden; } .hero .wrap{ display:grid; grid-template-columns: 1.08fr .92fr; gap: clamp(30px, 5vw, 70px); align-items:center; } .hero h1{ font-size: clamp(44px, 7.2vw, 104px); margin-top:26px; letter-spacing:-.035em; } html[lang="ar"] .hero h1{ letter-spacing:0; font-size: clamp(34px, 5.1vw, 74px); line-height:1.3; } .hero h1 .ln{ display:block; overflow:hidden; } .hero h1 .ln > span{ display:block; transform: translateY(105%); animation: rise .95s var(--ease) forwards; } .hero h1 .ln:nth-child(1) > span{ animation-delay:.15s; } .hero h1 .ln:nth-child(2) > span{ animation-delay:.27s; } .hero h1 .ln:nth-child(3) > span{ animation-delay:.39s; } @keyframes rise{ to{ transform:none; } } .hero-lead{ color: var(--txt-dim); max-width:56ch; margin-top:28px; font-size: clamp(15px,1.35vw,18px); opacity:0; animation: fade .8s var(--ease) .6s forwards; } .hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; opacity:0; animation: fade .8s var(--ease) .75s forwards; } @keyframes fade{ to{ opacity:1; } } .hero-meta{ display:flex; flex-wrap:wrap; gap:28px; margin-top:52px; padding-top:28px; border-top:1px solid var(--line-soft); opacity:0; animation: fade .8s var(--ease) .9s forwards; } .hero-meta div b{ display:block; font-family: var(--font-display); font-size:26px; color: var(--mint); } .hero-meta div span{ font-size:12.5px; color: var(--txt-dim); letter-spacing:.08em; text-transform:uppercase; } html[lang="ar"] .hero-meta div span{ letter-spacing:0; text-transform:none; font-size:13.5px; } /* the power-ring composition (echoes the logo mark) */ .hero-art{ position:relative; aspect-ratio:1; width:100%; max-width:560px; margin-inline:auto; } .ring{ position:absolute; inset:6%; border-radius:50%; background: conic-gradient(from 0deg, transparent 0 62%, var(--green) 80%, var(--mint) 90%, transparent 100%); -webkit-mask: radial-gradient(circle, transparent 0 61%, #000 62%); mask: radial-gradient(circle, transparent 0 61%, #000 62%); animation: spin 14s linear infinite; } .ring.r2{ inset:17%; animation-duration:22s; animation-direction:reverse; opacity:.55; } .ring.r3{ inset:28%; animation-duration:32s; opacity:.3; } @keyframes spin{ to{ transform: rotate(360deg); } } .hero-art .core{ position:absolute; inset:34%; border-radius:50%; background: radial-gradient(circle at 35% 30%, rgba(var(--green-rgb), .35), rgba(var(--ink-rgb), .9) 68%); border:1px solid var(--line); display:grid; place-items:center; box-shadow: inset 0 0 60px rgba(var(--green-rgb), .25), 0 0 90px -20px rgba(var(--green-rgb), .5); } .hero-art .core img{ width:52%; opacity:.95; filter: drop-shadow(0 6px 24px rgba(0,0,0,.5)); } .orb{ position:absolute; width:132px; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow: 0 24px 50px -22px var(--shadow); background: var(--panel); animation: float 7s ease-in-out infinite; } .orb img{ aspect-ratio:4/3; object-fit:cover; width:100%; } .orb.o1{ top:2%; inset-inline-start:-4%; } .orb.o2{ bottom:8%; inset-inline-end:-6%; animation-delay:-2.4s; width:150px; } .orb.o3{ bottom:-2%; inset-inline-start:14%; animation-delay:-4.6s; width:118px; } @keyframes float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-16px); } } .scroll-hint{ position:absolute; bottom:22px; inset-inline-end: var(--pad-x); pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color: var(--txt-dim); } html[lang="ar"] .scroll-hint{ letter-spacing:0; text-transform:none; } .scroll-hint i{ display:block; width:1px; height:42px; background:linear-gradient(var(--green), transparent); } /* ============================================================ STATS TICKER ============================================================ */ .stats{ padding-block:0; border-block:1px solid var(--line-soft); background: rgba(var(--mint-rgb), .05); } .stats .grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .stat{ padding: 40px 26px; border-inline-end:1px solid var(--line-soft); } .stat:last-child{ border-inline-end:0; } .stat b{ font-family: var(--font-display); font-size: clamp(34px,4.4vw,56px); color:var(--txt); display:block; line-height:1; } .stat b em{ font-style:normal; color: var(--green-lit); } .stat span{ display:block; margin-top:10px; color: var(--txt-dim); font-size:14px; } /* ============================================================ ABOUT ============================================================ */ .about-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; } .card{ position:relative; padding:34px 30px; border-radius: var(--radius); background: linear-gradient(165deg, rgba(var(--mint-rgb), .06), rgba(var(--mint-rgb), .015)); border:1px solid var(--line-soft); overflow:hidden; transition: transform .5s var(--ease), border-color .4s, background .4s; } .card::after{ content:""; position:absolute; inset-inline-start:0; top:0; width:100%; height:2px; background: linear-gradient(90deg, var(--green), transparent); transform: scaleX(0); transform-origin: inline-start; transition: transform .6s var(--ease); } .card:hover{ transform: translateY(-6px); border-color: rgba(var(--mint-rgb), .24); } .card:hover::after{ transform: scaleX(1); } .card .ico{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; margin-bottom:20px; background: rgba(var(--green-rgb), .14); border:1px solid rgba(var(--green-rgb), .3); color: var(--green-lit); } .card .ico svg{ width:22px; height:22px; } .card h3{ font-size:20px; margin-bottom:12px; } .card p{ color: var(--txt-dim); font-size:15px; } .card.wide{ grid-column: span 2; } .about-lead{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(26px,4vw,60px); align-items:center; margin-bottom: clamp(46px,6vw,80px); } .about-lead .shot{ position:relative; border-radius: 24px; overflow:hidden; border:1px solid var(--line); } .about-lead .shot img{ width:100%; aspect-ratio:4/3; object-fit:cover; } .about-lead .shot::after{ content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(var(--ink-rgb), .8), transparent 55%); } .badge-award{ position:absolute; z-index:2; inset-inline-start:22px; bottom:22px; display:flex; align-items:center; gap:14px; padding:14px 20px; border-radius:14px; background: rgba(var(--ink-rgb), .72); backdrop-filter: blur(10px); border:1px solid rgba(var(--sun-rgb), .35); } .badge-award svg{ width:26px; height:26px; color: var(--sun); flex:none; } .badge-award b{ display:block; font-family: var(--font-display); font-size:14px; } .badge-award span{ font-size:12px; color: var(--txt-dim); } /* ============================================================ PORTFOLIO — tabs ============================================================ */ .tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; } .tab{ padding:12px 24px; border-radius:100px; cursor:pointer; border:1px solid var(--line-soft); background:transparent; color: var(--txt-dim); font-family: var(--font-display); font-weight:600; font-size:14.5px; transition: all .35s var(--ease); } .tab:hover{ color:var(--txt); border-color: var(--line); } .tab.on{ background: var(--green); border-color: var(--green); color:var(--on-green); } .panel{ display:none; } .panel.on{ display:block; animation: panelIn .55s var(--ease); } @keyframes panelIn{ from{ opacity:0; transform: translateY(16px); } to{ opacity:1; transform:none; } } .feature-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; } .feature{ position:relative; border-radius: var(--radius); overflow:hidden; border:1px solid var(--line-soft); display:flex; flex-direction:column; background: linear-gradient(180deg, rgba(var(--mint-rgb), .05), rgba(var(--mint-rgb), .015)); transition: transform .5s var(--ease), border-color .4s, background .4s; } .feature .media{ position:relative; aspect-ratio: 4/3; overflow:hidden; flex:none; } .feature .media img{ width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02); transition: transform 1.1s var(--ease); } /* blends the artwork into the card body instead of cutting it with a hard edge */ .feature .media::after{ content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(var(--ink-rgb), .92), rgba(var(--ink-rgb), .35) 14%, transparent 30%); } .feature:hover{ transform: translateY(-6px); border-color: rgba(var(--mint-rgb), .28); background: linear-gradient(180deg, rgba(var(--mint-rgb), .09), rgba(var(--mint-rgb), .02)); } .feature:hover .media img{ transform: scale(1.09); } .feature .num{ position:absolute; z-index:2; top:16px; inset-inline-end:18px; font-family: var(--font-display); font-size:13px; color: var(--mint); padding:4px 10px; border-radius:100px; background: rgba(var(--ink-rgb), .55); border:1px solid var(--line); backdrop-filter: blur(6px); } .feature .body{ padding: 4px 26px 28px; } .feature h3{ font-size:20px; } .feature p{ color: var(--txt-dim); font-size:14.5px; margin-top:10px; } .list-check{ display:grid; gap:12px; margin-top:8px; } .list-check li{ display:flex; gap:12px; color: var(--txt-dim); font-size:15px; align-items:flex-start; } .list-check li::before{ content:""; flex:none; width:8px; height:8px; margin-top:9px; border-radius:50%; background: var(--green); box-shadow:0 0 0 4px rgba(var(--green-rgb), .16); } .split{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(26px,4vw,56px); align-items:center; } .split .shot{ border-radius:24px; overflow:hidden; border:1px solid var(--line); } .split .shot img{ width:100%; aspect-ratio:16/11; object-fit:cover; } /* white technical diagrams read as a deliberate spec sheet rather than a hole in the page */ .split .shot.doc{ background:#f6faf7; padding:12px; border-color: rgba(var(--mint-rgb), .3); box-shadow:0 30px 70px -34px var(--shadow); } .split .shot.doc img{ aspect-ratio:auto; border-radius:12px; } /* ============================================================ SERVICE OFFERINGS — 3 columns ============================================================ */ .offer-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; } .offer{ padding:36px 32px; border-radius: var(--radius); border:1px solid var(--line-soft); background: linear-gradient(180deg, rgba(var(--mint-rgb), .055), transparent 65%); transition: transform .5s var(--ease), border-color .4s; } .offer:hover{ transform: translateY(-6px); border-color: rgba(var(--mint-rgb), .24); } .offer .hd{ display:flex; align-items:center; gap:14px; margin-bottom:24px; } .offer .hd i{ width:42px; height:42px; flex:none; border-radius:50%; display:grid; place-items:center; border:2px solid var(--green); color:var(--green-lit); font-style:normal; font-family: var(--font-display); font-size:14px; font-weight:700; } .offer h3{ font-size:19px; } /* ============================================================ PARTNERS ============================================================ */ .marquee{ overflow:hidden; padding-block:26px; border-block:1px solid var(--line-soft); margin-bottom:64px; } .marquee .track{ display:flex; gap:64px; width:max-content; animation: slide 34s linear infinite; } html[dir="rtl"] .marquee .track{ animation-direction:reverse; } .marquee span{ font-family: var(--font-display); font-size: clamp(20px,2.4vw,34px); font-weight:700; color: transparent; -webkit-text-stroke:1px rgba(var(--mint-rgb), .35); white-space:nowrap; transition: color .3s; } .marquee span:hover{ color: var(--green-lit); } @keyframes slide{ to{ transform: translateX(-50%); } } .partner-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:18px; } .partner{ display:grid; grid-template-columns: 190px 1fr; gap:26px; align-items:center; padding:26px; border-radius: var(--radius); border:1px solid var(--line-soft); background: rgba(var(--mint-rgb), .03); transition: transform .5s var(--ease), border-color .4s, background .4s; } .partner:hover{ transform: translateY(-5px); border-color: rgba(var(--mint-rgb), .24); background: rgba(var(--mint-rgb), .055); } .partner .pic{ border-radius:14px; overflow:hidden; border:1px solid var(--line-soft); } .partner .pic img{ width:100%; aspect-ratio:4/3; object-fit:cover; } .partner h3{ font-size:20px; } .partner .kind{ font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color: var(--green-lit); margin-bottom:8px; display:block; } html[lang="ar"] .partner .kind{ letter-spacing:0; text-transform:none; font-size:13px; } .partner p{ color:var(--txt-dim); font-size:14.5px; margin-top:10px; } .partner a.link{ display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-size:13.5px; color: var(--mint); } .partner a.link:hover{ color: var(--green-lit); } /* ============================================================ O&M — accordion ============================================================ */ .om{ display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(26px,4vw,60px); align-items:center; } .acc{ border-top:1px solid var(--line-soft); } .acc-item{ border-bottom:1px solid var(--line-soft); } .acc-q{ width:100%; display:flex; align-items:center; gap:18px; justify-content:space-between; padding:26px 4px; background:transparent; border:0; cursor:pointer; text-align:start; color: var(--txt); font-family: var(--font-display); font-size:19px; font-weight:600; transition: color .3s; } .acc-q:hover{ color: var(--green-lit); } .acc-q i{ width:32px; height:32px; flex:none; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-style:normal; color:var(--green-lit); transition: transform .45s var(--ease), background .3s; } .acc-item.on .acc-q i{ transform: rotate(45deg); background: rgba(var(--green-rgb), .16); } .acc-a{ max-height:0; overflow:hidden; transition: max-height .55s var(--ease); } .acc-a p{ color: var(--txt-dim); padding: 0 4px 26px; font-size:15px; } .om-visual{ position:relative; } .om-visual .shot{ border-radius:24px; overflow:hidden; border:1px solid var(--line); } .om-visual .shot img{ width:100%; aspect-ratio:16/10; object-fit:cover; } .om-visual .float-card{ position:absolute; inset-inline-end:-14px; bottom:-28px; width:230px; padding:20px; border-radius:16px; background: rgba(var(--ink-rgb), .9); backdrop-filter: blur(12px); border:1px solid var(--line); box-shadow: 0 26px 60px -26px var(--shadow); } .om-visual .float-card b{ display:block; font-family:var(--font-display); font-size:30px; color: var(--green-lit); } .om-visual .float-card span{ font-size:13px; color: var(--txt-dim); } /* ============================================================ FUTURE / CTA ============================================================ */ .future-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; } .cta{ position:relative; overflow:hidden; border-radius:28px; padding: clamp(44px,6vw,80px); border:1px solid var(--line); background: radial-gradient(700px 380px at 84% 10%, rgba(var(--green-rgb), .32), transparent 62%), linear-gradient(160deg, rgba(var(--mint-rgb), .08), rgba(var(--ink-rgb), .5)); display:grid; grid-template-columns: 1.15fr .85fr; gap:40px; align-items:center; } .cta::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: url("../img/texture.svg") center/cover no-repeat; opacity:.20; mix-blend-mode:luminosity; mask-image: linear-gradient(to left, #000, transparent 62%); } html[dir="rtl"] .cta::before{ mask-image: linear-gradient(to right, #000, transparent 62%); } .cta > *{ position:relative; z-index:1; } .cta h2{ font-size: clamp(30px,4vw,52px); } .cta p{ color: var(--txt-dim); margin-top:18px; max-width:48ch; } .contact-list{ display:grid; gap:14px; } .contact-list > a, .contact-list > div{ display:flex; align-items:center; gap:16px; padding:18px 22px; border-radius:16px; border:1px solid var(--line-soft); background: rgba(var(--ink-rgb), .45); transition: border-color .35s, transform .35s var(--ease), background .35s; } .contact-list > a:hover{ border-color: var(--green); transform: translateX(4px); background: rgba(var(--green-rgb), .1); } html[dir="rtl"] .contact-list > a:hover{ transform: translateX(-4px); } .contact-list svg{ width:19px; height:19px; color: var(--green-lit); flex:none; } .contact-list small{ display:block; color: var(--txt-dim); font-size:12px; letter-spacing:.1em; text-transform:uppercase; } html[lang="ar"] .contact-list small{ letter-spacing:0; text-transform:none; font-size:13px; } .contact-list b{ font-family: var(--font-display); font-weight:600; font-size:15.5px; } /* ============================================================ FOOTER ============================================================ */ footer{ border-top:1px solid var(--line-soft); padding-block:52px 40px; margin-top: clamp(60px,8vw,110px); } .foot-top{ display:flex; flex-wrap:wrap; gap:34px; justify-content:space-between; align-items:flex-start; } .foot-top img{ height:44px; } .foot-top p{ color: var(--txt-dim); font-size:14.5px; max-width:44ch; margin-top:18px; } .foot-nav{ display:flex; flex-wrap:wrap; gap:12px 30px; } .foot-nav a{ color: var(--txt-dim); font-size:14px; transition:color .3s; } .foot-nav a:hover{ color: var(--green-lit); } .foot-bot{ margin-top:42px; padding-top:24px; border-top:1px solid var(--line-soft); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; color: var(--txt-dim); font-size:13px; } /* Parent-group attribution under the footer blurb. Rendered as a link out to the holding's own site whenever settings.group.url is set. */ .foot-group{ margin-top:12px; display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color: var(--green-lit); letter-spacing:.06em; font-weight:600; text-decoration:none; padding-bottom:3px; border-bottom:1px solid rgba(var(--green-rgb), .35); transition: color .3s, border-color .3s; } a.foot-group:hover{ color: var(--mint); border-bottom-color: currentColor; } .foot-group svg{ width:13px; height:13px; flex:none; } html[dir="rtl"] .foot-group svg{ transform: scaleX(-1); } html[lang="ar"] .foot-group{ letter-spacing:0; font-size:14.5px; } /* ============================================================ SCROLL REVEAL ============================================================ */ .js .rv{ opacity:0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .js .rv.in{ opacity:1; transform:none; } .js .rv[data-d="1"]{ transition-delay:.09s; } .js .rv[data-d="2"]{ transition-delay:.18s; } .js .rv[data-d="3"]{ transition-delay:.27s; } .js .rv[data-d="4"]{ transition-delay:.36s; } /* language cross-fade */ body.swapping main, body.swapping footer, body.swapping .nav{ opacity:.25; transition: opacity .18s; } main, footer, .nav{ transition: opacity .3s; } /* ============================================================ STRATEGIC BLOCKS Divisions, engagement models and the accreditation strip added for the 2026 corporate positioning. ============================================================ */ /* Author rules on these blocks (display:flex on the band, for one) outrank the UA sheet, so the gate prerender writes needs saying explicitly. */ [hidden]{ display:none !important; } /* ------------------------------------------------------------------ Parent-group attribution. The holding relationship is a commercial signal — balance sheet, bonding capacity, group reach — so it is set as a bordered, tinted pill rather than a footnote, and every instance links out to the group's own site. ------------------------------------------------------------------ */ .hero-backed{ margin-top:26px; display:inline-flex; align-items:center; gap:12px; padding:10px 18px; border-radius:999px; text-decoration:none; border:1px solid rgba(var(--green-rgb), .38); background: rgba(var(--green-rgb), .10); color: var(--green-lit); font-size:13.5px; letter-spacing:.05em; transition: background .35s var(--ease), border-color .35s, transform .35s var(--ease); } a.hero-backed:hover{ background: rgba(var(--green-rgb), .18); border-color: rgba(var(--green-rgb), .60); transform: translateY(-2px); } .hero-backed .hb-role{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--txt-dim); padding-inline-end:12px; border-inline-end:1px solid rgba(var(--mint-rgb), .22); } .hero-backed b{ font-weight:600; color: var(--green-lit); } .hero-backed svg{ width:15px; height:15px; flex:none; } html[dir="rtl"] .hero-backed svg{ transform: scaleX(-1); } html[lang="ar"] .hero-backed{ letter-spacing:0; font-size:14.5px; } html[lang="ar"] .hero-backed .hb-role{ letter-spacing:0; font-size:12px; } /* The group band — the same component on the home, about and partners pages, sized to be read before the body copy around it. */ .group-band{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin:34px 0 8px; padding:26px 30px; border-radius: var(--radius); text-decoration:none; border:1px solid rgba(var(--green-rgb), .30); background: linear-gradient(120deg, rgba(var(--green-rgb), .15), rgba(var(--green-rgb), .03) 62%); transition: border-color .4s, transform .5s var(--ease), box-shadow .5s var(--ease); } a.group-band:hover{ border-color: rgba(var(--green-rgb), .58); transform: translateY(-3px); box-shadow: 0 22px 46px -30px var(--shadow); } .gb-mark{ width:56px; height:56px; flex:none; border-radius:15px; display:grid; place-items:center; color: var(--green-lit); background: rgba(var(--green-rgb), .16); border:1px solid rgba(var(--green-rgb), .30); } .gb-mark svg{ width:26px; height:26px; } .gb-txt{ flex:1 1 240px; min-width:0; } .gb-role{ display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color: var(--txt-dim); } .gb-name{ display:block; margin-top:7px; font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); font-weight:600; line-height:1.2; color: var(--txt); } .gb-site{ display:block; margin-top:7px; font-size:13px; color: var(--green-lit); letter-spacing:.04em; direction:ltr; unicode-bidi:isolate; /* The domain stays Latin-ordered, but the box still has to hug the start edge of an Arabic column rather than drift to the far side of it. */ width:fit-content; } .gb-cta{ flex:none; display:inline-flex; align-items:center; gap:10px; padding:13px 24px; border-radius:999px; font-size:14px; font-weight:600; background: var(--green); color: var(--on-green); } .gb-cta svg{ width:16px; height:16px; flex:none; } html[dir="rtl"] .gb-cta svg{ transform: scaleX(-1); } html[lang="ar"] .gb-role{ letter-spacing:0; font-size:13px; } @media (max-width:640px){ .group-band{ padding:22px; gap:18px; } .gb-cta{ width:100%; justify-content:center; } } /* The group paragraph inside a running story column. */ .group-note{ margin-top:24px; padding:20px 24px; border-radius:14px; border-inline-start:3px solid var(--green); background: rgba(var(--green-rgb), .08); color: var(--txt); font-size:16px; line-height:1.75; } .division-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:18px; } .division{ padding:36px 32px; border-radius: var(--radius); border:1px solid var(--line-soft); background: linear-gradient(180deg, rgba(var(--mint-rgb), .055), transparent 65%); transition: transform .5s var(--ease), border-color .4s; } .division:hover{ transform: translateY(-6px); border-color: rgba(var(--mint-rgb), .24); } .division .hd{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; } /* The division art is an illustration, not a glyph — it needs room to read, so it sits in a cropped thumbnail rather than a small icon bubble. */ .division .hd i{ width:96px; height:64px; flex:none; border-radius:12px; overflow:hidden; border:1px solid var(--line-soft); background: rgba(var(--mint-rgb), .06); display:block; } .division .hd i img{ width:100%; height:100%; object-fit:cover; display:block; } .division .hd .code{ font-family: var(--font-display); font-size:30px; font-weight:700; line-height:1; color: transparent; -webkit-text-stroke:1px rgba(var(--mint-rgb), .38); } .division h3{ font-size:21px; } .division p{ color: var(--txt-dim); font-size:14.5px; margin:12px 0 20px; } .model-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; } .model{ padding:30px 28px; border-radius: var(--radius); border:1px solid var(--line-soft); transition: transform .5s var(--ease), border-color .4s, background .4s; } .model:hover{ transform: translateY(-6px); border-color: var(--green); background: rgba(var(--green-rgb), .08); } .model .code{ display:inline-block; font-family: var(--font-display); font-weight:700; font-size:12px; letter-spacing:.14em; padding:5px 11px; border-radius:100px; border:1px solid var(--line); color: var(--green-lit); margin-bottom:16px; } .model h3{ font-size:18px; } .model p{ color: var(--txt-dim); font-size:14.5px; margin-top:10px; } .sec-note{ color: var(--txt-dim); font-size:14px; margin-top:26px; max-width:62ch; } .accred-strip{ display:flex; flex-wrap:wrap; gap:12px; } .accred{ padding:16px 22px; border-radius:14px; border:1px solid var(--line-soft); background: rgba(var(--mint-rgb), .05); min-width:180px; } .accred b{ font-family: var(--font-display); font-size:16px; display:block; } .accred span{ display:block; margin-top:6px; color: var(--txt-dim); font-size:13px; } /* project cards — sector badge and the procurement figures */ .proj .tags.sector{ top:auto; bottom:14px; } .pill.sect{ color: var(--green-lit); border-color: rgba(var(--mint-rgb), .34); } .pmetrics{ display:grid; grid-template-columns: repeat(2,1fr); gap:10px 16px; margin-top:14px; } .pmetrics dt{ color: var(--txt-dim); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; } html[lang="ar"] .pmetrics dt{ letter-spacing:0; text-transform:none; font-size:12.5px; } .pmetrics dd{ font-family: var(--font-display); font-weight:600; font-size:14px; margin-top:3px; } .filter-lead{ color: var(--txt-dim); font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin:-18px 0 12px; } html[lang="ar"] .filter-lead{ letter-spacing:0; text-transform:none; font-size:13.5px; } @media (max-width: 1080px){ .division-grid, .model-grid{ grid-template-columns:1fr; } } @media (max-width: 640px){ .pmetrics{ grid-template-columns:1fr; } .accred{ min-width:0; flex:1 1 100%; } } /* ============================================================ CLIENTS & APPROVALS Wordmarks until real logos are uploaded, so the section carries its weight either way. ============================================================ */ .client-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; } .client-tile{ min-height:88px; padding:18px 20px; border-radius:14px; border:1px solid var(--line-soft); background: rgba(var(--mint-rgb), .04); display:grid; place-items:center; text-align:center; transition: border-color .35s, background .35s, transform .35s var(--ease); } .client-tile:hover{ border-color: rgba(var(--mint-rgb), .3); background: rgba(var(--green-rgb), .08); transform: translateY(-3px); } .client-tile span{ font-family: var(--font-display); font-weight:600; font-size:14.5px; color: var(--txt-dim); line-height:1.35; } .client-tile:hover span{ color: var(--txt); } .client-tile img{ max-width:100%; max-height:46px; object-fit:contain; } @media (max-width: 900px){ .client-grid{ grid-template-columns: repeat(3,1fr); } } @media (max-width: 640px){ .client-grid{ grid-template-columns: repeat(2,1fr); } .client-tile{ min-height:76px; } } /* ============================================================ FLOATING ACTIONS WhatsApp is permanent; back-to-top fades in past 600px. Sits above the sticky nav but under the project modal, and lifts clear of the live-edit bar when an editor is signed in. ============================================================ */ .fabs{ position:fixed; z-index:150; bottom:24px; inset-inline-end:24px; display:flex; flex-direction:column-reverse; gap:12px; } body.pg-le-active .fabs{ bottom:90px; } .fab{ width:52px; height:52px; border-radius:50%; flex:none; cursor:pointer; display:grid; place-items:center; padding:0; border:1px solid var(--line); background: var(--panel); color: var(--txt); box-shadow: 0 12px 30px -12px var(--shadow); transition: transform .3s var(--ease), background .3s, color .3s, border-color .3s, opacity .3s, visibility .3s; } .fab:hover{ transform: translateY(-3px); } .fab svg{ width:23px; height:23px; } .fab.wa{ background:#25d366; border-color:#25d366; color:#fff; box-shadow: 0 12px 30px -10px rgba(37, 211, 102, .55); } .fab.wa:hover{ background:#1fbe5a; border-color:#1fbe5a; } .fab.wa svg{ width:27px; height:27px; } .fab.top{ color: var(--green-lit); } .fab.top:hover{ background: var(--green); border-color: var(--green); color: var(--on-green); } /* Hidden rather than absent, so the WhatsApp button never jumps position. */ .fab.top{ opacity:0; visibility:hidden; transform: translateY(10px); } .fabs.scrolled .fab.top{ opacity:1; visibility:visible; transform:none; } .fabs.scrolled .fab.top:hover{ transform: translateY(-3px); } @media (max-width: 640px){ .fabs{ bottom:16px; inset-inline-end:16px; gap:10px; } .fab{ width:48px; height:48px; } } @media (prefers-reduced-motion: reduce){ .fab, .fab:hover, .fabs.scrolled .fab.top{ transform:none; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1080px){ .feature-grid{ grid-template-columns: repeat(2,1fr); } .about-grid{ grid-template-columns: repeat(2,1fr); } .card.wide{ grid-column: span 2; } .partner-grid{ grid-template-columns:1fr; } .offer-grid, .future-grid{ grid-template-columns:1fr; } .stats .grid{ grid-template-columns: repeat(2,1fr); } .stat:nth-child(2){ border-inline-end:0; } } @media (max-width: 900px){ .nav-links{ position:fixed; inset: var(--nav-h) 0 auto; flex-direction:column; align-items:stretch; gap:0; background: rgba(var(--ink-rgb), .97); backdrop-filter: blur(18px); padding: 18px var(--pad-x) 30px; border-bottom:1px solid var(--line-soft); transform: translateY(-14px); opacity:0; pointer-events:none; transition:.35s var(--ease); } .nav-links.open{ transform:none; opacity:1; pointer-events:auto; } .nav-links a{ padding:15px 4px; font-size:16px; border-bottom:1px solid var(--line-soft); border-radius:0; } .nav-links a.active::after{ display:none; } .burger{ display:grid; } .hero .wrap{ grid-template-columns:1fr; } .hero-art{ max-width:400px; order:-1; } .orb{ display:none; } .about-lead, .split, .om, .cta{ grid-template-columns:1fr; } .om-visual .float-card{ position:static; width:auto; margin-top:16px; } } @media (max-width: 640px){ .feature-grid, .about-grid{ grid-template-columns:1fr; } .card.wide{ grid-column: span 1; } .partner{ grid-template-columns:1fr; } .stats .grid{ grid-template-columns:1fr; } .stat{ border-inline-end:0; border-bottom:1px solid var(--line-soft); padding:28px 4px; } .hero-meta{ gap:20px; } .scroll-hint{ display:none; } } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .hero h1 .ln > span{ transform:none; } .hero-lead, .hero-cta, .hero-meta{ opacity:1; } .js .rv{ opacity:1; transform:none; } } /* ============================================================ MARKET CONTEXT — national-target figures The accreditation chips carry two or three words; these carry a full sentence, so the flex strip degenerates into one chip per row. A min-width grid keeps them in an even four-up block instead. ============================================================ */ #market .accred-strip{ display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:14px; } #market .accred{ min-width:0; } #market .accred b{ font-size:27px; line-height:1.1; color: var(--green-lit); } #market .accred span{ margin-top:9px; } @media (max-width: 640px){ #market .accred-strip{ grid-template-columns:1fr; } } /* Four-card market sections read better two-up than as a 3 + 1 row. */ #global .about-grid, #ecosystem .about-grid{ grid-template-columns: repeat(2, 1fr); } @media (max-width: 900px){ #global .about-grid, #ecosystem .about-grid{ grid-template-columns:1fr; } } /* The head boot script sets this when the visitor's language is not the English the HTML was prerendered in. Without it every string on the page would be seen in English first and swap when content.json lands. app.js sets body.ready once the real text is in place; the script also lifts it on a timer, so a stalled fetch can never leave a blank page. */ html.pg-wait body{ visibility:hidden; } html.pg-wait body.ready{ visibility:visible; } /* ============================================================ FOCUS & TOUCH TARGETS One visible focus ring for keyboard users on both themes (the browser's default is near-invisible on the dark green), and a 44px minimum hit area for the small controls. Where padding would move the layout, a transparent ::before stretches the hit area instead of the box. ============================================================ */ :where(a, button, summary, [tabindex]):focus-visible{ outline:2px solid var(--green-lit); outline-offset:3px; } .theme-btn{ width:44px; height:44px; } .lang button{ position:relative; min-width:44px; min-height:36px; } .lang button::before{ content:""; position:absolute; inset:-4px 0; } .foot-nav{ gap:0 30px; } .foot-nav a{ display:inline-block; padding-block:10px; min-width:44px; } .foot-group{ position:relative; } .foot-group::before{ content:""; position:absolute; inset:-9px 0; } .partner a.link{ margin-top:2px; padding-block:12px; } /* Small phones: the header row (logo, theme, language, menu) was a fixed 358px and pushed the menu button off a 375px screen. The logo now gives way first and the gaps tighten, so the controls always fit. */ .brand{ flex:0 1 auto; min-width:0; } .brand img{ max-width:100%; height:auto; max-height:44px; } @media (max-width: 420px){ .nav .wrap{ gap:12px; } .nav-actions{ gap:8px; } } /* keep the last footer line clear of the floating WhatsApp / top buttons */ .foot-bot{ padding-inline-end:72px; } @media (max-width: 360px){ .nav .wrap{ padding-inline:14px; } .lang button{ min-width:40px; } }