/* ============================================================ 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"]{ --green-rgb: 18, 154, 94; --mint-rgb: 14, 92, 58; --ink-rgb: 242, 245, 243; --sun-rgb: 214, 152, 20; --green: #129a5e; --green-lit: #0c7f4c; --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(4,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; } /* ============================================================ 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; } /* ============================================================ 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; } }