/* NTIS gradients — theme-invariant. Linear gradients run in PHYSICAL direction (left → right) and never mirror in RTL. The mesh grounds at the end are the one exception: they flip with the language. Themed grounds (--gradient-hero) live in the theme files. */ :root{ /* Brand gradient — the logo's own sky → green. RULES ONLY: the 3px card top rule, the hero rule under a headline, the loading sweep. Never a surface, never behind text, never on a badge or icon. */ --gradient-brand: linear-gradient(90deg, var(--sky-tints-0) 0%, var(--green-tints-0) 100%); /* Button gradient — the single switch for every primary button. Bright sky left → green right, white bold ink. One gradient button per view. */ --gradient-button: linear-gradient(90deg, var(--gradient-button-sky) 0%, var(--gradient-button-green) 100%); --gradient-button-hover: linear-gradient(90deg, var(--gradient-button-sky-hover) 0%, var(--gradient-button-green-hover) 100%); /* The submark's arc order, left to right: nili, sky, green. Marks only. */ --gradient-arcs: linear-gradient(90deg, var(--luxe-blue-tints-0) 0%, var(--sky-tints-0) 50%, var(--green-tints-0) 100%); /* Text over imagery: an ink scrim to transparent. Same in both themes — photographs are dark-toned by rule. */ --gradient-protect: linear-gradient(to top, rgba(19, 24, 33, 0.88) 0%, rgba(19, 24, 33, 0) 100%); /* @kind color */ } /* Mesh grounds — six, built only from the brand ramps: 2 dark (night, dawn), 2 colourful (brand, arcs), 2 light (paper, mist). LARGE GROUNDS ONLY: hero, sign-in, report and slide covers, section dividers, posts, the iOS launch screen — never a card, a table, or behind long body text. Colour gathers on the physical LEFT, away from Arabic text; *-mirror flips it for English — use the .u-mesh-* utilities, which pick the side from :dir(). Colourful meshes carry a headline, one line and the white logo only — no gradient button on top. Wine is left out on purpose: it is reserved for danger. Use as background: var(--mesh-night) — the last layer is the base colour. */ :root{ --mesh-night: radial-gradient(62% 85% at 6% 10%, var(--sky-shades-50) 0%, transparent 62%), radial-gradient(48% 70% at 28% 100%, var(--luxe-blue-shades-25) 0%, transparent 66%), radial-gradient(38% 60% at 0% 62%, var(--green-shades-75) 0%, transparent 72%), radial-gradient(70% 90% at 100% 0%, var(--luxe-blue-shades-65) 0%, transparent 72%), var(--luxe-blue-shades-85); /* @kind color */ --mesh-night-mirror: radial-gradient(62% 85% at 94% 10%, var(--sky-shades-50) 0%, transparent 62%), radial-gradient(48% 70% at 72% 100%, var(--luxe-blue-shades-25) 0%, transparent 66%), radial-gradient(38% 60% at 100% 62%, var(--green-shades-75) 0%, transparent 72%), radial-gradient(70% 90% at 0% 0%, var(--luxe-blue-shades-65) 0%, transparent 72%), var(--luxe-blue-shades-85); /* @kind color */ --mesh-dawn: radial-gradient(56% 78% at 10% 18%, var(--sky-shades-25) 0%, transparent 62%), radial-gradient(46% 66% at 30% 96%, var(--green-shades-50) 0%, transparent 66%), radial-gradient(34% 50% at 0% 100%, var(--sky-tints-0) 0%, transparent 62%), radial-gradient(60% 82% at 100% 0%, var(--luxe-blue-shades-50) 0%, transparent 72%), var(--luxe-blue-shades-75); /* @kind color */ --mesh-dawn-mirror: radial-gradient(56% 78% at 90% 18%, var(--sky-shades-25) 0%, transparent 62%), radial-gradient(46% 66% at 70% 96%, var(--green-shades-50) 0%, transparent 66%), radial-gradient(34% 50% at 100% 100%, var(--sky-tints-0) 0%, transparent 62%), radial-gradient(60% 82% at 0% 0%, var(--luxe-blue-shades-50) 0%, transparent 72%), var(--luxe-blue-shades-75); /* @kind color */ --mesh-brand: radial-gradient(46% 70% at 0% 100%, var(--green-tints-0) 0%, transparent 64%), radial-gradient(44% 64% at 6% 0%, var(--sky-tints-25) 0%, transparent 62%), radial-gradient(56% 84% at 0% 50%, var(--sky-tints-0) 0%, transparent 66%), radial-gradient(60% 86% at 100% 100%, var(--luxe-blue-tints-0) 0%, transparent 72%), radial-gradient(50% 70% at 100% 0%, var(--sky-shades-50) 0%, transparent 70%), var(--sky-shades-25); /* @kind color */ --mesh-brand-mirror: radial-gradient(46% 70% at 100% 100%, var(--green-tints-0) 0%, transparent 64%), radial-gradient(44% 64% at 94% 0%, var(--sky-tints-25) 0%, transparent 62%), radial-gradient(56% 84% at 100% 50%, var(--sky-tints-0) 0%, transparent 66%), radial-gradient(60% 86% at 0% 100%, var(--luxe-blue-tints-0) 0%, transparent 72%), radial-gradient(50% 70% at 0% 0%, var(--sky-shades-50) 0%, transparent 70%), var(--sky-shades-25); /* @kind color */ --mesh-arcs: radial-gradient(54% 74% at 0% 0%, var(--sky-tints-0) 0%, transparent 62%), radial-gradient(48% 68% at 18% 100%, var(--green-tints-0) 0%, transparent 62%), radial-gradient(42% 58% at 42% 48%, var(--sky-shades-25) 0%, transparent 72%), radial-gradient(64% 88% at 100% 40%, var(--luxe-blue-shades-25) 0%, transparent 74%), var(--luxe-blue-tints-0); /* @kind color */ --mesh-arcs-mirror: radial-gradient(54% 74% at 100% 0%, var(--sky-tints-0) 0%, transparent 62%), radial-gradient(48% 68% at 82% 100%, var(--green-tints-0) 0%, transparent 62%), radial-gradient(42% 58% at 58% 48%, var(--sky-shades-25) 0%, transparent 72%), radial-gradient(64% 88% at 0% 40%, var(--luxe-blue-shades-25) 0%, transparent 74%), var(--luxe-blue-tints-0); /* @kind color */ --mesh-paper: radial-gradient(56% 78% at 0% 0%, var(--sky-tints-88) 0%, transparent 66%), radial-gradient(50% 72% at 14% 100%, var(--green-tints-88) 0%, transparent 66%), radial-gradient(62% 84% at 42% 62%, var(--luxe-blue-tints-94) 0%, transparent 72%), var(--white); /* @kind color */ --mesh-paper-mirror: radial-gradient(56% 78% at 100% 0%, var(--sky-tints-88) 0%, transparent 66%), radial-gradient(50% 72% at 86% 100%, var(--green-tints-88) 0%, transparent 66%), radial-gradient(62% 84% at 58% 62%, var(--luxe-blue-tints-94) 0%, transparent 72%), var(--white); /* @kind color */ --mesh-mist: radial-gradient(54% 76% at 4% 8%, var(--sky-tints-75) 0%, transparent 62%), radial-gradient(50% 70% at 20% 100%, var(--green-tints-75) 0%, transparent 62%), radial-gradient(40% 58% at 0% 56%, var(--sky-tints-50) 0%, transparent 62%), radial-gradient(56% 78% at 100% 0%, var(--luxe-blue-tints-88) 0%, transparent 72%), var(--luxe-blue-tints-97); /* @kind color */ --mesh-mist-mirror: radial-gradient(54% 76% at 96% 8%, var(--sky-tints-75) 0%, transparent 62%), radial-gradient(50% 70% at 80% 100%, var(--green-tints-75) 0%, transparent 62%), radial-gradient(40% 58% at 100% 56%, var(--sky-tints-50) 0%, transparent 62%), radial-gradient(56% 78% at 0% 0%, var(--luxe-blue-tints-88) 0%, transparent 72%), var(--luxe-blue-tints-97); /* @kind color */ }