ar.badieiandCursor
c2376b3b9e
Build & Push Docker Image / build (push) Has been cancelled
Refresh the homepage around new hero/services/roadmap sections, shared design tokens, and updated brand assets. Co-authored-by: Cursor <cursoragent@cursor.com>
104 lines
2.9 KiB
CSS
104 lines
2.9 KiB
CSS
@layer base {
|
|
body {
|
|
background-color: var(--background);
|
|
/* Atmosphere radials live in .page-atmosphere — body stays a flat base */
|
|
background-image: none;
|
|
}
|
|
|
|
.dark body {
|
|
background-image: none;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.bg-page-canvas {
|
|
background-color: var(--background);
|
|
}
|
|
|
|
.bg-cta-photo-banner {
|
|
background-color: var(--brand-primary-dark);
|
|
background-image:
|
|
radial-gradient(
|
|
ellipse 90% 70% at 12% 20%,
|
|
color-mix(in srgb, var(--brand-primary) 42%, transparent),
|
|
transparent 58%
|
|
),
|
|
radial-gradient(
|
|
ellipse 80% 60% at 92% 85%,
|
|
color-mix(in srgb, var(--brand-primary) 28%, transparent),
|
|
transparent 55%
|
|
),
|
|
linear-gradient(
|
|
135deg,
|
|
color-mix(in srgb, var(--brand-primary-dark) 88%, transparent) 0%,
|
|
color-mix(in srgb, var(--brand-primary-dark) 62%, var(--brand-primary)) 48%,
|
|
color-mix(in srgb, var(--brand-primary) 78%, transparent) 100%
|
|
),
|
|
linear-gradient(
|
|
to top,
|
|
color-mix(in srgb, var(--brand-primary-dark) 72%, transparent) 0%,
|
|
transparent 55%
|
|
),
|
|
url("/assets/main-pic/1dark.jpg");
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.bg-cta-photo-banner::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
background-image: linear-gradient(
|
|
180deg,
|
|
color-mix(in srgb, white 12%, transparent) 0%,
|
|
transparent 28%,
|
|
transparent 72%,
|
|
color-mix(in srgb, var(--brand-primary-dark) 40%, transparent) 100%
|
|
);
|
|
}
|
|
}
|
|
|
|
/* Diamond network pattern — default right side (~32%), 15% opacity.
|
|
* Kept outside @layer so it isn't lost to utility cascade. */
|
|
.cta-diamond-pattern {
|
|
position: absolute;
|
|
top: -10%;
|
|
bottom: -10%;
|
|
inset-inline-start: 0;
|
|
width: 32%;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
background-color: #fff;
|
|
opacity: 0.15;
|
|
-webkit-mask-image:
|
|
linear-gradient(to left, #000 42%, transparent 100%),
|
|
url("/assets/patterns/cta-diamond-pattern.png?v=3");
|
|
mask-image:
|
|
linear-gradient(to left, #000 42%, transparent 100%),
|
|
url("/assets/patterns/cta-diamond-pattern.png?v=3");
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%, cover;
|
|
mask-size: 100% 100%, cover;
|
|
-webkit-mask-position: center, right center;
|
|
mask-position: center, right center;
|
|
-webkit-mask-composite: source-in;
|
|
mask-composite: intersect;
|
|
}
|
|
|
|
/* Left-side placement (physical left — e.g. contact CTA) */
|
|
.cta-diamond-pattern--left {
|
|
inset-inline-start: auto;
|
|
inset-inline-end: 0;
|
|
-webkit-mask-image:
|
|
linear-gradient(to right, #000 42%, transparent 100%),
|
|
url("/assets/patterns/cta-diamond-pattern.png?v=3");
|
|
mask-image:
|
|
linear-gradient(to right, #000 42%, transparent 100%),
|
|
url("/assets/patterns/cta-diamond-pattern.png?v=3");
|
|
-webkit-mask-position: center, left center;
|
|
mask-position: center, left center;
|
|
}
|