/* RT AI Solutions — ALYA --------------------------------------------------------------------------- Structure follows the reference: dark ground, gradient as the only colour event, oversized rounded cards, a counter band, ticker strips and a conversion flow that ends in a single ask. The palette is entirely the company's own — the cyan→blue→lavender→magenta ramp on the existing navies. Nothing borrowed but the shape. External file because the site's CSP is style-src 'self'; inline styles are silently discarded here. */ @font-face{font-family:Fraunces;src:url(/assets/fonts/fraunces-600-latin.woff2) format("woff2"); font-weight:600;font-display:swap} @font-face{font-family:Inter;src:url(/assets/fonts/inter-400-latin.woff2) format("woff2"); font-weight:400;font-display:swap} @font-face{font-family:Inter;src:url(/assets/fonts/inter-600-latin.woff2) format("woff2"); font-weight:600;font-display:swap} :root{ --night:#07071A; --night-2:#0D0E23; --night-3:#15172F; --night-4:#1C2040; --ink:#F2F5FC; --muted:#A9B2CB; --faint:#7F88A8; --rule:rgba(140,170,255,.13); --rule-2:rgba(140,170,255,.26); --cy:#2DDEFE; --bl:#30B8FF; --lv:#BBADFF; --mg:#FF41A9; --grad:linear-gradient(104deg,var(--cy) 0%,var(--bl) 30%,var(--lv) 64%,var(--mg) 100%); --display:Inter, system-ui, -apple-system, Segoe UI, sans-serif; --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; --mono:ui-monospace,"SF Mono",Menlo,monospace; --wrap:1220px; --ease:cubic-bezier(.22,1,.36,1); --r:24px; --r-sm:14px; } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}} body{margin:0;background:var(--night);color:var(--ink);font:400 17px/1.65 var(--sans); -webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;display:block} a{color:var(--bl);text-underline-offset:3px} :is(a,button,summary):focus-visible{outline:2px solid var(--bl);outline-offset:3px;border-radius:6px} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px} h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.03em; line-height:1.04;text-wrap:balance} h1{font-size:clamp(44px,7vw,88px)} h2{font-size:clamp(30px,4.2vw,52px)} h3{font-size:20px;line-height:1.24;letter-spacing:-.02em} p{margin:0 0 18px;color:var(--muted);max-width:64ch} .lede{font-size:clamp(17px,1.8vw,20px);line-height:1.6;color:var(--muted);max-width:56ch} .kicker{font:600 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--faint); display:inline-flex;align-items:center;gap:12px;margin:0 0 20px} .kicker::before{content:"";width:26px;height:1px;background:var(--grad)} .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* ── header ─────────────────────────────────────────────────────────── */ header{position:sticky;top:0;z-index:60;background:rgba(7,7,26,.78); -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--rule)} header .wrap{display:flex;align-items:center;gap:20px;min-height:72px} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex:0 0 auto} .brand .disc{width:38px;height:38px;border-radius:50%;background:#05050F;display:grid; place-items:center;overflow:hidden;box-shadow:0 0 0 1px var(--rule-2),inset 0 0 18px rgba(48,184,255,.18)} .brand .disc img{width:27px} .brand b{font:600 17px/1 var(--sans);letter-spacing:-.02em;display:block} .brand i{font:600 9px/1 var(--mono);letter-spacing:.22em;color:var(--faint);font-style:normal; display:block;margin-top:5px} nav{margin-left:auto;display:flex;gap:2px;align-items:center} nav a{padding:9px 14px;font:600 14.5px/1 var(--sans);color:var(--muted);text-decoration:none; border-radius:9px;white-space:nowrap;transition:color .2s,background .2s} nav a:hover{color:var(--ink);background:var(--night-3)} .burger{display:none;margin-left:auto;width:44px;height:40px;border:1px solid var(--rule-2); border-radius:10px;background:none;cursor:pointer;position:relative} .burger span,.burger span::before,.burger span::after{content:"";position:absolute;left:12px; width:18px;height:1.8px;background:var(--ink)} .burger span{top:19px}.burger span::before{top:-6px;left:0}.burger span::after{top:6px;left:0} .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px; border-radius:12px;font:600 15px/1 var(--sans);text-decoration:none;border:1px solid transparent; cursor:pointer;transition:transform .2s var(--ease),filter .2s,background .2s,border-color .2s} .btn.sm{padding:10px 18px;font-size:14px} .btn-grad{background:var(--grad);color:#06121C} .btn-grad:hover{transform:translateY(-2px);filter:brightness(1.07)} .btn-ghost{border-color:var(--rule-2);color:var(--ink)} .btn-ghost:hover{border-color:var(--bl);background:var(--night-3)} /* ── hero ───────────────────────────────────────────────────────────── */ .hero{position:relative;padding:clamp(60px,8vw,116px) 0 clamp(48px,6vw,86px);overflow:hidden} .hero::before{content:"";position:absolute;top:-46%;left:50%;transform:translateX(-50%); width:1250px;height:820px;background:var(--grad);filter:blur(150px);opacity:.19; pointer-events:none;border-radius:50%} .hero .wrap{position:relative;display:grid;grid-template-columns:1.08fr .92fr; gap:clamp(30px,5vw,68px);align-items:center} .hero h1 em{font-style:normal;display:block} .hero .cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:34px} .hero .note{margin-top:28px;font-size:14.5px;color:var(--faint);max-width:46ch} .panel{background:var(--night-2);border:1px solid var(--rule);border-radius:28px;padding:32px; position:relative;overflow:hidden;box-shadow:0 34px 80px rgba(0,0,0,.5)} .panel::before{content:"";position:absolute;inset:-45% -20% auto;height:76%;background:var(--grad); filter:blur(72px);opacity:.26;pointer-events:none} .panel>*{position:relative} .mark{width:158px;height:158px;border-radius:50%;margin:2px auto 20px; background:radial-gradient(circle at 50% 40%,#171A38 0%,#0A0B1E 62%,#05050F 100%); display:grid;place-items:center;box-shadow:0 0 0 1px var(--rule-2),inset 0 0 34px rgba(48,184,255,.16)} .mark img{width:110px} .panel .who{text-align:center;margin-bottom:24px} .panel .who b{font:600 26px/1 var(--display);letter-spacing:.02em;display:block} .panel .who span{font-size:13.5px;color:var(--faint);display:block;margin-top:8px} .roles{display:grid;grid-template-columns:1fr 1fr;gap:10px} .role{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px; background:rgba(255,255,255,.045);border:1px solid var(--rule);font:600 13.5px/1 var(--sans); color:#DDE3F6;transition:border-color .3s,background .3s} .panel:hover .role{border-color:var(--rule-2)} .role i{width:8px;height:8px;border-radius:50%;flex:0 0 auto} .dot-cy{background:var(--cy)}.dot-bl{background:var(--bl)} .dot-lv{background:var(--lv)}.dot-mg{background:var(--mg)} /* ── counters ───────────────────────────────────────────────────────── */ .counters{padding:clamp(48px,6vw,80px) 0} .counters .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:1px; background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden} .count{background:var(--night-2);padding:32px 26px;text-align:center} .count b{display:block;font:600 clamp(38px,4.6vw,58px)/1 var(--display);letter-spacing:-.04em; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent; font-variant-numeric:tabular-nums} .count span{display:block;margin-top:12px;font:600 11px/1.4 var(--mono);letter-spacing:.16em; text-transform:uppercase;color:var(--faint)} /* ── sections & cards ───────────────────────────────────────────────── */ .section{padding:clamp(58px,7.5vw,112px) 0} .section--flush{padding-top:0} .head{max-width:62ch;margin-bottom:44px} .head p{margin-top:16px} .cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr))} .card{background:var(--night-2);border:1px solid var(--rule);border-radius:var(--r);padding:32px; display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit; position:relative;overflow:hidden;transition:transform .24s var(--ease),border-color .24s} .card::before{content:"";position:absolute;inset:auto -30% -70% auto;width:80%;height:100%; background:var(--grad);filter:blur(60px);opacity:.14;transition:opacity .35s;pointer-events:none} .card:hover{transform:translateY(-5px);border-color:var(--rule-2)} .card:hover::before{opacity:.3} .card>*{position:relative} .card .n{font:600 11px/1 var(--mono);letter-spacing:.2em;color:var(--faint)} .card p{margin:0;font-size:15px} .card ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:8px} .card li{font-size:14.5px;color:var(--muted);padding-left:20px;position:relative} .card li::before{content:"";position:absolute;left:2px;top:8px;width:8px;height:5px; border-left:1.8px solid var(--cy);border-bottom:1.8px solid var(--cy);transform:rotate(-45deg)} .card .go{margin-top:auto;padding-top:14px;font:600 14px/1 var(--sans);color:var(--cy)} /* pillars — smaller, no link */ .pillars{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))} .pillar{background:var(--night-2);border:1px solid var(--rule);border-radius:var(--r-sm);padding:26px} .pillar h3{font-size:17px;margin-bottom:8px} .pillar p{margin:0;font-size:14.5px} /* ── the timeline ───────────────────────────────────────────────────── */ .line{background:var(--night-2);border:1px solid var(--rule);border-radius:28px; padding:clamp(32px,5vw,60px);position:relative;overflow:hidden} .line::before{content:"";position:absolute;inset:-55% auto auto -12%;width:72%;height:160%; background:var(--grad);filter:blur(94px);opacity:.17;pointer-events:none} .line>*{position:relative} .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(168px,100%),1fr));gap:1px; background:var(--rule);border:1px solid var(--rule);border-radius:16px;overflow:hidden; margin-top:34px} .step{background:var(--night-2);padding:24px 20px;position:relative} .step b{font:600 11px/1 var(--mono);letter-spacing:.14em;color:var(--cy);display:block} .step h3{font-size:16px;margin:12px 0 6px} .step p{margin:0;font-size:13.5px;color:var(--faint)} /* ── tiers ──────────────────────────────────────────────────────────── */ .ladder{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(238px,100%),1fr)); align-items:start} .rung{background:var(--night-2);border:1px solid var(--rule);border-radius:var(--r);padding:28px; display:flex;flex-direction:column;gap:11px;position:relative; transition:transform .24s var(--ease),border-color .24s} .rung:hover{transform:translateY(-4px);border-color:var(--rule-2)} .rung--now{border-color:transparent; background:linear-gradient(var(--night-2),var(--night-2)) padding-box,var(--grad) border-box; border:1.5px solid transparent;box-shadow:0 26px 54px rgba(0,0,0,.42)} .rung .lvl{font:600 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)} .rung--now .lvl{color:var(--cy)} .rung p{margin:0;font-size:14.5px} .rung ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:8px} .rung li{font-size:14px;color:var(--muted);padding-left:18px;position:relative} .rung li::before{content:"+";position:absolute;left:0;color:var(--cy)} /* ── faq ────────────────────────────────────────────────────────────── */ .faq{display:grid;gap:12px;max-width:860px} .qa{background:var(--night-2);border:1px solid var(--rule);border-radius:var(--r-sm); padding:20px 24px;transition:border-color .24s} .qa[open]{border-color:var(--rule-2)} .qa summary{cursor:pointer;list-style:none;font:600 16.5px/1.4 var(--sans);color:var(--ink); display:flex;align-items:center;gap:14px} .qa summary::-webkit-details-marker{display:none} .qa summary::after{content:"";margin-left:auto;width:10px;height:10px;flex:0 0 auto; border-right:2px solid var(--faint);border-bottom:2px solid var(--faint); transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease)} .qa[open] summary::after{transform:rotate(-135deg) translateY(-3px)} .qa p{margin:14px 0 0;font-size:15px} /* ── partners ───────────────────────────────────────────────────────── */ .logos{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))} .logo-cell{background:#fff;border-radius:var(--r-sm);height:112px;display:grid;place-items:center; padding:12px;transition:transform .24s var(--ease)} .logo-cell:hover{transform:translateY(-3px)} /* 84px, not 52. A wide wordmark is limited by the cell width and barely moves; a square lockup was limited by this cap and rendered at a third the visual mass of its neighbours. max-width keeps the wide ones inside the cell now that the height cap no longer does it for them. */ .logo-cell img{max-height:84px;max-width:100%;width:auto;object-fit:contain} /* ── close & footer ─────────────────────────────────────────────────── */ .close{position:relative;text-align:center;padding:clamp(60px,8vw,116px) 0;overflow:hidden} .close::before{content:"";position:absolute;inset:auto 50% -60% auto;transform:translateX(50%); width:900px;height:520px;background:var(--grad);filter:blur(130px);opacity:.18;border-radius:50%} .close>*{position:relative} .close h2{max-width:19ch;margin:0 auto 18px} .close p{margin:0 auto} .close .cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:30px} footer{border-top:1px solid var(--rule);padding:48px 0 34px;background:var(--night-2)} footer .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px} footer h4{font:600 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase; color:var(--faint);margin:0 0 16px} footer a{display:block;color:var(--muted);text-decoration:none;font-size:14.5px;margin-bottom:10px} footer a:hover{color:var(--ink)} footer .base{margin-top:36px;padding-top:22px;border-top:1px solid var(--rule);display:flex; justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--faint)} /* ── motion ─────────────────────────────────────────────────────────── */ @keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} @keyframes riseIn{from{opacity:0;transform:translateY(28px) scale(.985)}to{opacity:1;transform:none}} .hero .kicker,.hero h1,.hero h1 em,.hero .lede,.hero .cta,.hero .note{ opacity:0;animation:rise .8s var(--ease) forwards} .hero .kicker{animation-delay:.04s} .hero h1{animation-delay:.10s} .hero h1 em:nth-of-type(1){animation-delay:.18s} .hero h1 em:nth-of-type(2){animation-delay:.28s} .hero .lede{animation-delay:.40s} .hero .cta{animation-delay:.50s} .hero .note{animation-delay:.58s} .panel{opacity:0;animation:riseIn .95s var(--ease) .32s forwards} @keyframes drift{0%{transform:translate3d(-6%,0,0) scale(1)} 50%{transform:translate3d(6%,-4%,0) scale(1.12)}100%{transform:translate3d(-6%,0,0) scale(1)}} .panel::before,.line::before{animation:drift 24s ease-in-out infinite;will-change:transform} .line::before{animation-duration:32s} @keyframes breathe{0%,100%{transform:scale(1);filter:drop-shadow(0 0 13px rgba(48,184,255,.5))} 50%{transform:scale(1.04);filter:drop-shadow(0 0 26px rgba(255,65,169,.5))}} .mark img{animation:breathe 7s var(--ease) infinite} .panel:hover .mark img{animation-duration:3.6s} .rv{opacity:0;transform:translateY(24px); transition:opacity .72s var(--ease),transform .72s var(--ease)} .rv.in{opacity:1;transform:none} .rv-stagger>*{opacity:0;transform:translateY(22px); transition:opacity .64s var(--ease),transform .64s var(--ease)} .rv-stagger.in>*{opacity:1;transform:none} .rv-stagger.in>*:nth-child(1){transition-delay:0s} .rv-stagger.in>*:nth-child(2){transition-delay:.08s} .rv-stagger.in>*:nth-child(3){transition-delay:.16s} .rv-stagger.in>*:nth-child(4){transition-delay:.24s} .rv-stagger.in>*:nth-child(5){transition-delay:.32s} .rv-stagger.in>*:nth-child(6){transition-delay:.40s} .step{opacity:.34;transition:opacity .5s var(--ease)} .steps.in .step{opacity:1} .step::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--grad); transition:width .52s var(--ease)} .steps.in .step::after{width:100%} .steps.in .step:nth-child(1),.steps.in .step:nth-child(1)::after{transition-delay:.10s} .steps.in .step:nth-child(2),.steps.in .step:nth-child(2)::after{transition-delay:.34s} .steps.in .step:nth-child(3),.steps.in .step:nth-child(3)::after{transition-delay:.58s} .steps.in .step:nth-child(4),.steps.in .step:nth-child(4)::after{transition-delay:.82s} .steps.in .step:nth-child(5),.steps.in .step:nth-child(5)::after{transition-delay:1.06s} @media(prefers-reduced-motion:reduce){ .hero .kicker,.hero h1,.hero h1 em,.hero .lede,.hero .cta,.hero .note,.panel{ opacity:1;animation:none;transform:none} .panel::before,.line::before,.mark img{animation:none} .rv,.rv-stagger>*{opacity:1;transform:none;transition:none} .step{opacity:1}.step::after{width:100%;transition:none} } /* ── responsive ─────────────────────────────────────────────────────── */ @media(max-width:940px){ .hero .wrap{grid-template-columns:1fr} footer .cols{grid-template-columns:1fr 1fr} nav{display:none} nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column; align-items:stretch;background:var(--night-2);border-bottom:1px solid var(--rule);padding:12px} .burger{display:block} header .wrap{position:relative} header .btn{display:none} } @media(max-width:600px){ body{font-size:16px} .wrap{padding:0 18px} .panel{padding:24px;border-radius:22px} .mark{width:132px;height:132px}.mark img{width:92px} footer .cols{grid-template-columns:1fr} } /* ── partners ────────────────────────────────────────────────────────────── Logos arrive at every possible aspect ratio — a wide wordmark, a square monogram, a tall stacked lockup. The plate is a fixed box and the artwork is contained inside it, never sized to fill. That is the whole trick: constrain the container, never the image. */ .partner-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))} .partner{background:var(--night-2);border:1px solid var(--rule);border-radius:var(--r); padding:24px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden; transition:transform .24s var(--ease),border-color .24s} .partner::before{content:"";position:absolute;inset:auto -30% -70% auto;width:80%;height:100%; background:var(--grad);filter:blur(60px);opacity:.10;transition:opacity .35s;pointer-events:none} .partner:hover{transform:translateY(-5px);border-color:var(--rule-2)} .partner:hover::before{opacity:.24} .partner>*{position:relative} /* the plate: fixed height, artwork contained and centred */ .plate{height:112px;border-radius:var(--r-sm);background:#fff;display:grid;place-items:center; padding:18px 22px} .plate img{max-height:62px;max-width:80%;width:auto;height:auto;object-fit:contain} /* Some logos are drawn light-on-transparent — a white wordmark, a neon sign. Those are invisible on a white plate, so they get a dark one instead. It is a property of the artwork, not a per-brand exception. */ .plate--dark{background:var(--night-3);border:1px solid var(--rule-2)} .partner h3{margin:0} .partner .meta{font:600 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase; color:var(--faint);margin:-8px 0 0} .partner p{margin:0;font-size:14.5px} .partner .visit{margin-top:auto;padding-top:6px;font:600 14px/1 var(--sans);color:var(--cy); text-decoration:none} .partner .visit:hover{text-decoration:underline} html[dir="rtl"] .partner .meta{letter-spacing:0} @media(max-width:600px){.plate{height:96px}.plate img{max-height:52px}} /* ── the wordmark ────────────────────────────────────────────────────────── Lifted verbatim from the original stylesheet so the lockup is identical on every page — the same R and T gradient highlights, the same sub-line spacing. Only the tokens differ, and those resolve to the same values. */ .brand-wm { /* inline-block, so the box shrinks to the widest of its two lines. */ display: inline-block; line-height: 1; /* THE single knob for the whole lockup, and it has to live here rather than on .wm-main. .wm-sub is a SIBLING of .wm-main, not a child, so an em on the sub-line resolves against this element. When the size sat on .wm-main the sub-line silently took the body's 17px instead of the intended 19px — it rendered 11% small and stopped scaling at the breakpoints entirely, because those only moved .wm-main. Both lines now measure against this one value. */ font-size: 19px; } /* The RT signature mark sits where the typed "R T" used to. Height is tied to the wordmark's own size so the lockup scales as one unit. The glow is stacked drop-shadows rather than a box-shadow, because the PNG has a transparent background — drop-shadow follows the actual strokes of the signature, box-shadow would halo a rectangle. Three passes: a tight white core, a mid cyan, and a wide blue bloom. It breathes on a slow cycle. */ /* The R and the T glow. Two keyframe sets rather than one, because each letter glows in its own end of the ramp — a single shared animation would have to pick one colour and the pair would stop reading as a gradient. drop-shadow rather than text-shadow: these glyphs are painted by a background clipped to the text, and drop-shadow works on what was actually rendered, so the halo follows the letter. It also stays correct if the fill ever changes. The global prefers-reduced-motion rule stops both. */ @keyframes wmGlowR { 0%, 100% { filter: drop-shadow(0 0 2px rgba(45, 222, 254, .45)) drop-shadow(0 0 7px rgba(45, 222, 254, .28)); } 50% { filter: drop-shadow(0 0 3px rgba(45, 222, 254, .75)) drop-shadow(0 0 13px rgba(45, 222, 254, .5)); } } @keyframes wmGlowT { 0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 65, 169, .45)) drop-shadow(0 0 7px rgba(255, 65, 169, .28)); } 50% { filter: drop-shadow(0 0 3px rgba(255, 65, 169, .75)) drop-shadow(0 0 13px rgba(255, 65, 169, .5)); } } /* Hovering the lockup lifts the bloom to full. */ .wm-main { display: block; font-weight: 300; /* thin — a wordmark, not a headline */ font-size: .95em; letter-spacing: .15em; /* Tracking adds space after the final E too, which would push the word off centre against the line beneath it. Pull it back. */ margin-inline-end: -.15em; line-height: 1.05; color: var(--ink); white-space: nowrap; } /* The R and the T — the two letters the company shortens to. Each carries one end of the brand ramp rather than the whole of it, so together they read as the same cyan-to-pink sweep the ALYA mark makes, just interrupted by the letters in between. background-clip:text needs the -webkit- prefix as well; without it Safari paints a gradient block over the glyph. */ .wm-hi { -webkit-background-clip: text; background-clip: text; color: transparent; } .wm-hi--r { background-image: linear-gradient(150deg, #2DDEFE 0%, #45C4FF 100%); animation: wmGlowR 4.2s var(--ease) infinite; } .wm-hi--t { background-image: linear-gradient(150deg, #A78BFF 0%, #FF41A9 100%); /* offset so the two breathe alternately rather than in lockstep, which reads as one flashing object instead of two letters */ animation: wmGlowT 4.2s var(--ease) -2.1s infinite; } /* Hovering the lockup takes both to full. */ .wm-r { background: linear-gradient(180deg, #2DDEFE 0%, #30B8FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .wm-sub { font-family: var(--sans); font-weight: 400; /* In em, not px, so the descriptor scales with .wm-main exactly as the mark does. Against the 19px base this is the 8.5px it has always rendered at, but it now holds its proportion at the mobile sizes too — previously the mark shrank on small screens while this line stayed 8.5px and overhung it. */ font-size: .447em; letter-spacing: .5537em; /* Tracking adds space after the final S as well, which would push the line off-centre under the mark. Pull it back. */ margin-inline-end: -.5537em; /* block, not inline — margin-top is ignored on an inline box, so the pull-up below would silently do nothing. */ display: block; /* A positive nudge now, where the signature needed a negative one: that artwork carried 17px of invisible padding on its bottom edge and the sub-line had to be pulled up through it. The monogram's viewBox is cropped to its ink, so the box ends exactly where the letters end and the two lines would otherwise touch. In em of this element, which is itself em of .brand-wm, so it holds at every breakpoint. */ margin-top: .34em; color: var(--muted); white-space: nowrap; } .wm-ai { color: var(--accent); font-weight: 500; } /* The A in "AI SOLUTIONS" is the ALYA glyph rather than a typed A. Sized to the letter it replaces: 0.661em is Inter's advance width for A and 0.727em its cap height, so the line's total width does not move and .wm-mark stays flush with it. The viewBox is cropped to the ink, and an inline SVG aligns its bottom edge to the baseline, so the letter sits on the baseline with no nudging. It fits by height and centres in the advance, which gives it the side bearings a letter would have. currentColor takes the accent from /* it replaces the disc-and-text block in the new header */ .brand{gap:0} .brand .brand-wm{color:var(--ink)} .brand .disc{margin-inline-end:12px} /* ═══════════════════════════════════════════════════════════════════════════ LIFT — the grounds raised a few steps. Still night, just not pitch. Every surface moves together so the layering between page, card and inset is preserved; text and the brand ramp are untouched, so contrast only softens slightly rather than degrading. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* new-design tokens */ --night:#0E1024; --night-2:#171A2F; --night-3:#212540; --night-4:#2B3052; /* original-stylesheet tokens */ --bg:#0E1024; --surface:#171A2F; --surface-2:#1D2138; --surface-3:#262B45; --footer:#0B0D1E; --line:rgba(150,178,255,.15); --line-strong:rgba(150,178,255,.28); --rule:rgba(150,178,255,.15); --rule-2:rgba(150,178,255,.28); } html,body{background:var(--bg,var(--night))} header{background:rgba(14,16,36,.80)} .site-header{background:rgba(14,16,36,.86)} .band{background:rgba(29,33,56,.55)} footer,.site-footer{background:var(--footer)} /* the mark disc stays deep so the neon artwork still has something to glow on */ .mark,.brand .disc{background:radial-gradient(circle at 50% 40%,#1A1E3C 0%,#0B0C1E 62%,#070814 100%)} /* Stacked lockups — a mark above a wordmark — are close to square, so the shared 62px cap leaves them at about a quarter of the plate width while wide wordmarks fill 80%% of it. Trading the plate's vertical padding for logo height evens out the visual mass. Must stay after `.plate img`: equal specificity, so source order decides. */ .plate--stacked{padding:6px 22px} .plate--stacked img{max-height:100px} /* The six partner logos split into two groups by ink. Four are near-black wordmarks that measure 15-19:1 on a white cell and collapse to 1.0-1.3:1 on a dark one; two are drawn in pale ink and do the opposite — RT Group's neon sign measures 1.47:1 on white, which is why it reads as an empty box. No single cell tone clears 3:1 for all six, so the cell follows the logo. */ .logo-cell--dark{background:var(--night-3);border:1px solid var(--rule-2)} /* Al Hana's lockup is wide — 3.24:1 once its 59% of baked-in transparent padding is trimmed off. It was being treated as a stacked lockup, so the height cap sized it while the real limit was the 80% width cap. Letting it use the full content box is what actually makes it read. */ .plate--wide{padding:8px 18px} .plate--wide img{max-height:96px;max-width:100%} /* The plate is 112px tall on desktop and 96px on phones, so a fixed cap that suits one breaks the other — a 100px logo in a 96px plate spills over its own white edge. Percentages are no use here: `max-height:100%` on a grid item resolves against an indefinite containing block and computes to `none`, which lets the logo render at full natural size instead. So the cap is stated per breakpoint, always smaller than the plate's content box: 96px plate - 6px padding = 84px for stacked, - 8px = 80px for wide. */ @media(max-width:600px){ .plate--stacked img{max-height:84px} .plate--wide img{max-height:80px} } /* ── client bar ─────────────────────────────────────────────────────────── One continuous pill with the logos scrolling through it, after aleddotechnologies.ae. Their version is a Swiper carousel; this needs no JavaScript, which matters because the CSP is script-src 'self'. The track is exactly two copies of the set, so animating to -50% lands on the start of the second copy and the loop is seamless. Spacing is item padding, not flex `gap`: gap would add one extra gap between the two copies, -50% would no longer align, and the loop would jump once per cycle. */ .clients{ position:relative;overflow:hidden; background:var(--night-2);border:1px solid var(--rule); border-radius:30px;padding-block:26px; } .clients-track{display:flex;width:max-content;animation:clientsRoll 42s linear infinite} .clients:hover .clients-track, .clients:focus-within .clients-track{animation-play-state:paused} .clients-set{display:flex;align-items:center} .clients-item{ display:grid;place-items:center;flex:none; padding-inline:clamp(26px,3.6vw,58px); opacity:.86;transition:opacity .24s var(--ease) } .clients-item:hover{opacity:1} .clients-item img{max-height:72px;max-width:210px;width:auto;height:auto;object-fit:contain} @keyframes clientsRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* the logos should emerge and leave rather than pop at a hard edge */ .clients::before,.clients::after{ content:"";position:absolute;inset-block:0;width:clamp(36px,6vw,88px); z-index:2;pointer-events:none } .clients::before{inset-inline-start:0;background:linear-gradient(to right,var(--night-2),transparent)} .clients::after{inset-inline-end:0;background:linear-gradient(to left,var(--night-2),transparent)} @media (prefers-reduced-motion:reduce){ .clients-track{animation:none} .clients{overflow-x:auto} } /* ── language switch in the newer header ───────────────────────────────── The other eleven pages carry an EN/AR toggle in the header; these three did not, so the switch disappeared as soon as you opened the home or partners page and there was no route back to the other language. It sits inside