mohs/sass-mohfarawati
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

Refactor site hero and localized branding UI

Browse Source
This commit is contained in:
MOH
2026-03-08 05:13:10 +01:00
parent 9edb162148
commit 2bda611a3b
35 changed files with 682 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+215
View File
@@ -40,6 +40,11 @@
--brand-primary: 9 73% 50%;
--brand-secondary: 12 64% 58%;
--hero-base: 260 22% 95%;
--hero-ink: 226 43% 11%;
--hero-left: 226 100% 85%;
--hero-right: 334 33% 91%;
--hero-bottom: 205 61% 88%;
--ambient-primary-alpha: 0.06;
--ambient-secondary-alpha: 0.04;
--ambient-grid-alpha: 0;
@@ -114,6 +119,11 @@
--brand-primary: 9 78% 56%;
--brand-secondary: 12 74% 64%;
--hero-base: 222 24% 10%;
--hero-ink: 210 20% 96%;
--hero-left: 223 45% 24%;
--hero-right: 293 18% 22%;
--hero-bottom: 212 35% 20%;
--ambient-primary-alpha: 0.08;
--ambient-secondary-alpha: 0.05;
--ambient-grid-alpha: 0;
@@ -139,12 +149,25 @@
html {
color-scheme: light;
background-color: hsl(var(--background));
font-family: var(--font-museo), sans-serif;
}
html.dark {
color-scheme: dark;
}
html[lang="ar"] {
font-family: var(--font-dubai), sans-serif;
}
.font-latin {
font-family: var(--font-museo), sans-serif;
}
.font-arabic {
font-family: var(--font-dubai), sans-serif;
}
@layer base {
* {
@apply border-border;
@@ -154,11 +177,19 @@ html.dark {
@apply min-h-screen text-foreground antialiased;
background-color: hsl(var(--background));
background-image: none;
font-family: inherit;
}
a {
@apply transition-colors;
}
button,
input,
select,
textarea {
font: inherit;
}
}
::selection {
@@ -214,4 +245,188 @@ html.dark {
transparent 32%
);
}
.hero-surface {
background: linear-gradient(180deg, hsl(var(--hero-base)), hsl(var(--background)));
}
.hero-home {
color: hsl(var(--hero-ink));
}
.hero-page {
background: linear-gradient(180deg, hsl(var(--hero-base) / 0.96), hsl(var(--background)));
}
.hero-sheet {
isolation: isolate;
}
.hero-sheet-base {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 14% 18%, hsl(var(--hero-left) / 0.42), transparent 26%),
radial-gradient(circle at 84% 14%, hsl(var(--hero-right) / 0.28), transparent 24%),
radial-gradient(circle at 52% 84%, hsl(var(--hero-bottom) / 0.24), transparent 32%),
linear-gradient(180deg, hsl(var(--hero-base)), hsl(var(--background)) 88%);
}
.hero-blob {
position: absolute;
border-radius: 9999px;
filter: blur(110px);
will-change: transform, opacity;
}
.hero-blob-left {
left: -8%;
top: 8%;
height: 24rem;
width: 24rem;
background: radial-gradient(circle, hsl(var(--hero-left) / 0.48), transparent 68%);
}
.hero-blob-right {
right: -10%;
top: 2%;
height: 22rem;
width: 22rem;
background: radial-gradient(circle, hsl(var(--hero-right) / 0.36), transparent 70%);
}
.hero-blob-bottom {
left: 18%;
bottom: -10%;
height: 24rem;
width: 38rem;
background: radial-gradient(circle, hsl(var(--hero-bottom) / 0.32), transparent 70%);
}
.hero-sheet-glow {
position: absolute;
inset: -10% -8%;
background:
radial-gradient(circle at 18% 24%, hsl(var(--hero-left) / 0.24), transparent 18%),
radial-gradient(circle at 86% 18%, hsl(var(--hero-right) / 0.16), transparent 18%),
radial-gradient(circle at 50% 78%, hsl(var(--hero-bottom) / 0.14), transparent 24%);
filter: blur(36px);
will-change: transform, opacity;
}
.hero-sheet-wave {
position: absolute;
inset: -16% -10%;
background:
conic-gradient(
from 180deg at 50% 50%,
transparent 0deg,
hsl(var(--hero-left) / 0.08) 58deg,
transparent 120deg,
transparent 228deg,
hsl(var(--hero-right) / 0.1) 300deg,
transparent 360deg
);
filter: blur(90px);
mix-blend-mode: screen;
will-change: transform, opacity;
}
.hero-sheet-noise {
position: absolute;
inset: 0;
background-image:
linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23noise)' opacity='0.1'/%3E%3C/svg%3E");
background-size: auto, 160px 160px;
mix-blend-mode: soft-light;
opacity: 0.22;
will-change: background-position, opacity, transform;
}
.hero-sheet-veil {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025) 44%, rgba(255, 255, 255, 0));
backdrop-filter: blur(20px) saturate(112%);
-webkit-backdrop-filter: blur(20px) saturate(112%);
}
.hero-sheet-fade {
position: absolute;
inset: auto 0 0 0;
height: 7rem;
background: linear-gradient(180deg, transparent, hsl(var(--background)));
}
.hero-header-bridge {
position: absolute;
left: 50%;
top: 3.5rem;
height: 11rem;
width: min(34rem, 72vw);
transform: translateX(-50%);
background:
radial-gradient(circle at 50% 0%, hsl(var(--hero-left) / 0.18), transparent 56%),
linear-gradient(180deg, hsl(var(--foreground) / 0.06), transparent 72%);
filter: blur(24px);
opacity: 0.9;
pointer-events: none;
}
.hero-content-bridge {
position: absolute;
left: 50%;
bottom: 2.5rem;
height: 9rem;
width: min(44rem, 82vw);
transform: translateX(-50%);
background:
radial-gradient(circle at 50% 50%, hsl(var(--hero-bottom) / 0.2), transparent 58%),
linear-gradient(180deg, transparent, hsl(var(--background) / 0.86));
filter: blur(20px);
opacity: 0.92;
pointer-events: none;
}
}
@media (min-width: 640px) {
.hero-blob-left {
height: 30rem;
width: 30rem;
}
.hero-blob-right {
height: 28rem;
width: 28rem;
}
.hero-blob-bottom {
height: 28rem;
width: 44rem;
}
}
@media (min-width: 1024px) {
.hero-blob-left {
left: -4%;
top: 10%;
height: 36rem;
width: 36rem;
}
.hero-blob-right {
right: -4%;
top: 0;
height: 34rem;
width: 34rem;
}
.hero-blob-bottom {
left: 14%;
bottom: -16%;
height: 32rem;
width: 52rem;
}
}