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>
423 lines
11 KiB
CSS
423 lines
11 KiB
CSS
/*
|
||
* Global ambient architecture (page-owned, not section-owned):
|
||
* Base (body) → Gradient → Soft light → Noise → Grid (scroll) → Sections → Cards
|
||
*
|
||
* Dark mode art direction: one continuous architectural space.
|
||
* Neutral surfaces dominate; teal is reserved for interactive emphasis.
|
||
* Grid and light breathe with scroll position — never restart per section.
|
||
*/
|
||
|
||
@layer utilities {
|
||
.page-atmosphere {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/*
|
||
* Broad, low-opacity field lighting — invisible sources, not section blobs.
|
||
* Light mode keeps a soft brand wash; dark mode leans neutral with restrained teal.
|
||
*/
|
||
.page-atmosphere__gradient {
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image:
|
||
radial-gradient(
|
||
ellipse 90% 50% at 50% -8%,
|
||
rgba(41, 161, 156, 0.12),
|
||
transparent 58%
|
||
),
|
||
radial-gradient(
|
||
ellipse 55% 42% at 100% 28%,
|
||
rgba(41, 161, 156, 0.05),
|
||
transparent 55%
|
||
),
|
||
radial-gradient(
|
||
ellipse 50% 40% at 0% 62%,
|
||
color-mix(in srgb, var(--brand-primary-dark) 6%, transparent),
|
||
transparent 55%
|
||
),
|
||
radial-gradient(
|
||
ellipse 70% 45% at 50% 100%,
|
||
rgba(41, 161, 156, 0.04),
|
||
transparent 60%
|
||
);
|
||
}
|
||
|
||
.dark .page-atmosphere__gradient {
|
||
background-image:
|
||
/* Hero crown — strongest lift, still soft */
|
||
radial-gradient(
|
||
ellipse 95% 48% at 50% -12%,
|
||
rgba(232, 240, 238, 0.055),
|
||
transparent 58%
|
||
),
|
||
/* Quiet teal accent under the hero only */
|
||
radial-gradient(
|
||
ellipse 70% 36% at 48% 4%,
|
||
rgba(41, 161, 156, 0.055),
|
||
transparent 52%
|
||
),
|
||
/* Mid-page cool lift (features / services rhythm) */
|
||
radial-gradient(
|
||
ellipse 80% 36% at 92% 32%,
|
||
rgba(210, 225, 222, 0.028),
|
||
transparent 62%
|
||
),
|
||
/* Calm valley — deeper neutral, almost no chroma */
|
||
radial-gradient(
|
||
ellipse 70% 40% at 8% 58%,
|
||
rgba(8, 14, 14, 0.35),
|
||
transparent 60%
|
||
),
|
||
/* Soft return of light before portfolio */
|
||
radial-gradient(
|
||
ellipse 75% 34% at 70% 74%,
|
||
rgba(220, 232, 230, 0.022),
|
||
transparent 58%
|
||
),
|
||
/* Footer fade — near-black calm */
|
||
radial-gradient(
|
||
ellipse 90% 40% at 50% 108%,
|
||
rgba(0, 0, 0, 0.28),
|
||
transparent 55%
|
||
);
|
||
}
|
||
|
||
/*
|
||
* Scroll-linked grid — one continuous field across page height.
|
||
* Opacity peaks / valleys track content density (hero → features → content
|
||
* → portfolio → CTA off → footer whisper). Never compete with copy.
|
||
*/
|
||
.page-atmosphere__grid {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
opacity: 0.038;
|
||
color: var(--foreground);
|
||
background-image:
|
||
linear-gradient(to right, currentColor 1px, transparent 1px),
|
||
linear-gradient(to bottom, currentColor 1px, transparent 1px);
|
||
background-size: 4rem 4rem;
|
||
background-position: 0 0;
|
||
/* Hero uses .hero-square-pattern; keep page grid off the first viewport */
|
||
-webkit-mask-image:
|
||
radial-gradient(ellipse 58% 10% at 78% 26%, rgba(0, 0, 0, 0.45) 0%, transparent 72%),
|
||
radial-gradient(ellipse 65% 11% at 22% 40%, rgba(0, 0, 0, 0.32) 0%, transparent 70%),
|
||
radial-gradient(ellipse 70% 12% at 50% 58%, rgba(0, 0, 0, 0.28) 0%, transparent 72%),
|
||
radial-gradient(ellipse 55% 9% at 65% 78%, rgba(0, 0, 0, 0.12) 0%, transparent 70%),
|
||
linear-gradient(
|
||
to bottom,
|
||
transparent 0%,
|
||
transparent 16%,
|
||
transparent 20%,
|
||
rgba(0, 0, 0, 0.28) 26%,
|
||
rgba(0, 0, 0, 0.16) 34%,
|
||
transparent 40%,
|
||
transparent 44%,
|
||
rgba(0, 0, 0, 0.22) 50%,
|
||
rgba(0, 0, 0, 0.12) 56%,
|
||
transparent 62%,
|
||
transparent 68%,
|
||
rgba(0, 0, 0, 0.06) 74%,
|
||
transparent 80%,
|
||
transparent 88%,
|
||
rgba(0, 0, 0, 0) 92%,
|
||
transparent 96%,
|
||
rgba(0, 0, 0, 0.1) 99%,
|
||
transparent 100%
|
||
);
|
||
mask-image:
|
||
radial-gradient(ellipse 58% 10% at 78% 26%, rgba(0, 0, 0, 0.45) 0%, transparent 72%),
|
||
radial-gradient(ellipse 65% 11% at 22% 40%, rgba(0, 0, 0, 0.32) 0%, transparent 70%),
|
||
radial-gradient(ellipse 70% 12% at 50% 58%, rgba(0, 0, 0, 0.28) 0%, transparent 72%),
|
||
radial-gradient(ellipse 55% 9% at 65% 78%, rgba(0, 0, 0, 0.12) 0%, transparent 70%),
|
||
linear-gradient(
|
||
to bottom,
|
||
transparent 0%,
|
||
transparent 16%,
|
||
transparent 20%,
|
||
rgba(0, 0, 0, 0.28) 26%,
|
||
rgba(0, 0, 0, 0.16) 34%,
|
||
transparent 40%,
|
||
transparent 44%,
|
||
rgba(0, 0, 0, 0.22) 50%,
|
||
rgba(0, 0, 0, 0.12) 56%,
|
||
transparent 62%,
|
||
transparent 68%,
|
||
rgba(0, 0, 0, 0.06) 74%,
|
||
transparent 80%,
|
||
transparent 88%,
|
||
rgba(0, 0, 0, 0) 92%,
|
||
transparent 96%,
|
||
rgba(0, 0, 0, 0.1) 99%,
|
||
transparent 100%
|
||
);
|
||
-webkit-mask-composite: source-over;
|
||
mask-composite: add;
|
||
mask-repeat: no-repeat;
|
||
-webkit-mask-repeat: no-repeat;
|
||
mask-size: 100% 100%;
|
||
-webkit-mask-size: 100% 100%;
|
||
}
|
||
|
||
/* Dark: slightly higher peak so hero can read ~15–18% relative; valleys stay near zero */
|
||
.dark .page-atmosphere__grid {
|
||
opacity: 0.048;
|
||
color: rgb(228 236 234 / 0.9);
|
||
}
|
||
|
||
/* Shared light sources — large soft orbs spanning the viewport */
|
||
.page-atmosphere__light {
|
||
position: absolute;
|
||
border-radius: 9999px;
|
||
filter: blur(4px);
|
||
}
|
||
|
||
.page-atmosphere__light--primary {
|
||
inset-inline-end: -18%;
|
||
top: -4%;
|
||
width: min(52rem, 96vw);
|
||
height: min(52rem, 96vw);
|
||
background-image: radial-gradient(
|
||
circle,
|
||
rgba(41, 161, 156, 0.09),
|
||
transparent 68%
|
||
);
|
||
}
|
||
|
||
.page-atmosphere__light--secondary {
|
||
inset-inline-start: -20%;
|
||
top: 42%;
|
||
width: min(44rem, 88vw);
|
||
height: min(44rem, 88vw);
|
||
background-image: radial-gradient(
|
||
circle,
|
||
color-mix(in srgb, var(--brand-primary-dark) 8%, transparent),
|
||
transparent 70%
|
||
);
|
||
}
|
||
|
||
.page-atmosphere__light--tertiary {
|
||
inset-inline-end: -10%;
|
||
top: 68%;
|
||
width: min(40rem, 82vw);
|
||
height: min(40rem, 82vw);
|
||
opacity: 0.85;
|
||
background-image: radial-gradient(
|
||
circle,
|
||
rgba(41, 161, 156, 0.045),
|
||
transparent 72%
|
||
);
|
||
}
|
||
|
||
.dark .page-atmosphere__light--primary {
|
||
background-image: radial-gradient(
|
||
circle,
|
||
rgba(236, 244, 242, 0.07),
|
||
transparent 70%
|
||
);
|
||
}
|
||
|
||
.dark .page-atmosphere__light--secondary {
|
||
background-image: radial-gradient(
|
||
circle,
|
||
rgba(41, 161, 156, 0.04),
|
||
transparent 72%
|
||
);
|
||
}
|
||
|
||
.dark .page-atmosphere__light--tertiary {
|
||
background-image: radial-gradient(
|
||
circle,
|
||
rgba(210, 224, 222, 0.035),
|
||
transparent 74%
|
||
);
|
||
}
|
||
|
||
.page-atmosphere__noise {
|
||
position: absolute;
|
||
inset: 0;
|
||
opacity: 0.03;
|
||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
|
||
background-repeat: repeat;
|
||
background-size: 180px 180px;
|
||
mix-blend-mode: soft-light;
|
||
}
|
||
|
||
.dark .page-atmosphere__noise {
|
||
opacity: 0.038;
|
||
}
|
||
|
||
.page-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* Hero soft wash — strongest visual anchor; fades into shared canvas */
|
||
.hero-atmosphere {
|
||
background-color: transparent;
|
||
background-image:
|
||
radial-gradient(
|
||
circle at 50% -8%,
|
||
rgba(41, 161, 156, 0.1),
|
||
transparent 52%
|
||
),
|
||
linear-gradient(
|
||
180deg,
|
||
color-mix(in srgb, var(--brand-primary-dark) 5%, transparent) 0%,
|
||
transparent 42%,
|
||
transparent 100%
|
||
);
|
||
}
|
||
|
||
/* Hero-only square grid — fades at container sides + bottom of hero */
|
||
.hero-square-pattern {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
opacity: 0.045;
|
||
color: var(--foreground);
|
||
background-image:
|
||
linear-gradient(to right, currentColor 1px, transparent 1px),
|
||
linear-gradient(to bottom, currentColor 1px, transparent 1px);
|
||
background-size: 4rem 4rem;
|
||
background-position: 0 0;
|
||
-webkit-mask-image:
|
||
linear-gradient(
|
||
to right,
|
||
transparent 0%,
|
||
#000 12%,
|
||
#000 88%,
|
||
transparent 100%
|
||
),
|
||
linear-gradient(
|
||
to bottom,
|
||
#000 0%,
|
||
#000 68%,
|
||
transparent 100%
|
||
);
|
||
mask-image:
|
||
linear-gradient(
|
||
to right,
|
||
transparent 0%,
|
||
#000 12%,
|
||
#000 88%,
|
||
transparent 100%
|
||
),
|
||
linear-gradient(
|
||
to bottom,
|
||
#000 0%,
|
||
#000 68%,
|
||
transparent 100%
|
||
);
|
||
-webkit-mask-repeat: no-repeat;
|
||
mask-repeat: no-repeat;
|
||
-webkit-mask-size: 100% 100%;
|
||
mask-size: 100% 100%;
|
||
-webkit-mask-composite: source-in;
|
||
mask-composite: intersect;
|
||
}
|
||
|
||
.dark .hero-square-pattern {
|
||
opacity: 0.055;
|
||
color: rgb(228 236 234 / 0.9);
|
||
}
|
||
|
||
.dark .hero-atmosphere {
|
||
background-image:
|
||
radial-gradient(
|
||
circle at 50% -6%,
|
||
rgba(236, 244, 242, 0.06),
|
||
transparent 48%
|
||
),
|
||
radial-gradient(
|
||
circle at 52% 8%,
|
||
rgba(41, 161, 156, 0.07),
|
||
transparent 46%
|
||
),
|
||
linear-gradient(
|
||
180deg,
|
||
color-mix(in srgb, var(--brand-primary-dark) 14%, transparent) 0%,
|
||
transparent 48%,
|
||
transparent 100%
|
||
);
|
||
}
|
||
|
||
/*
|
||
* Local content highlight — sits behind a card / title / CTA panel.
|
||
* Emphasis from the object, not a section wash.
|
||
*/
|
||
.local-highlight {
|
||
position: absolute;
|
||
inset: 20% 12%;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
border-radius: 9999px;
|
||
background-image: radial-gradient(
|
||
ellipse at center,
|
||
color-mix(in srgb, var(--primary) 14%, transparent),
|
||
transparent 70%
|
||
);
|
||
filter: blur(28px);
|
||
opacity: 0.55;
|
||
}
|
||
|
||
.dark .local-highlight {
|
||
background-image: radial-gradient(
|
||
ellipse at center,
|
||
rgba(41, 161, 156, 0.14),
|
||
transparent 72%
|
||
);
|
||
opacity: 0.45;
|
||
filter: blur(36px);
|
||
}
|
||
|
||
.local-highlight--soft {
|
||
opacity: 0.35;
|
||
inset: 24% 18%;
|
||
}
|
||
|
||
.dark .local-highlight--soft {
|
||
opacity: 0.28;
|
||
background-image: radial-gradient(
|
||
ellipse at center,
|
||
rgba(220, 232, 230, 0.08),
|
||
transparent 72%
|
||
);
|
||
}
|
||
|
||
.backdrop-glass-md {
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
}
|
||
|
||
/*
|
||
* Roadmap — sizing tokens only.
|
||
* Atmosphere stays page-owned; section shell is transparent.
|
||
*/
|
||
.timeline-section {
|
||
--timeline-step-gap: 2.75rem;
|
||
--timeline-connector: 3rem;
|
||
--timeline-card-width: 20.5rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1023px) {
|
||
.timeline-section {
|
||
--timeline-step-gap: 2rem;
|
||
--timeline-connector: 2.5rem;
|
||
--timeline-card-width: 100%;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 639px) {
|
||
.timeline-section {
|
||
--timeline-step-gap: 1.75rem;
|
||
}
|
||
}
|