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

Refactor site header, heroes, and design system

Browse Source
This commit is contained in:
MOH
2026-03-08 00:29:51 +01:00
parent a18370d003
commit 0c2b67e378
56 changed files with 2714 additions and 1318 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+67 -62
View File
@@ -4,44 +4,44 @@
:root {
--background: 0 0% 100%;
--foreground: 224 71.4% 4.1%;
--foreground: 222 24% 10%;
--card: 0 0% 100%;
--card-foreground: 224 71.4% 4.1%;
--card-foreground: 222 24% 10%;
--popover: 0 0% 100%;
--popover-foreground: 224 71.4% 4.1%;
--popover-foreground: 222 24% 10%;
--primary: 222.2 47.4% 11.2%;
--primary: 9 73% 50%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--secondary: 220 14% 96%;
--secondary-foreground: 222 22% 18%;
--muted: 220 14% 96%;
--muted-foreground: 220 10% 42%;
--accent: 220 14% 96%;
--accent-foreground: 222 22% 18%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--surface-1: 0 0% 100%;
--surface-2: 210 20% 96%;
--surface-3: 210 24% 93%;
--surface-inverse: 222 34% 14%;
--surface-2: 220 16% 97%;
--surface-3: 220 14% 94%;
--surface-inverse: 222 24% 12%;
--surface-inverse-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--border-strong: 214.3 31.8% 85%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--border: 220 13% 90%;
--border-strong: 220 11% 82%;
--input: 220 13% 90%;
--ring: 9 73% 50%;
--status-success: 145 63% 42%;
--status-success-soft: 145 58% 92%;
--status-warning: 36 92% 44%;
--status-warning-soft: 41 96% 90%;
--brand-primary: 214 84% 42%;
--brand-secondary: 191 78% 42%;
--ambient-primary-alpha: 0.08;
--ambient-secondary-alpha: 0.06;
--brand-primary: 9 73% 50%;
--brand-secondary: 12 64% 58%;
--ambient-primary-alpha: 0.06;
--ambient-secondary-alpha: 0.04;
--ambient-grid-alpha: 0;
--radius-surface: 0rem;
@@ -66,56 +66,56 @@
--section-space: 3.5rem;
--content-space: 1.5rem;
--sidebar-background: 210 22% 95%;
--sidebar-foreground: 222 24% 18%;
--sidebar-primary: 214 84% 42%;
--sidebar-background: 220 16% 97%;
--sidebar-foreground: 222 22% 16%;
--sidebar-primary: 9 73% 50%;
--sidebar-primary-foreground: 210 40% 98%;
--sidebar-accent: 210 20% 90%;
--sidebar-accent-foreground: 222 24% 18%;
--sidebar-border: 214 20% 84%;
--sidebar-ring: 214 84% 42%;
--sidebar-accent: 220 14% 94%;
--sidebar-accent-foreground: 222 22% 18%;
--sidebar-border: 220 12% 86%;
--sidebar-ring: 9 73% 50%;
}
.dark {
--background: 224 71.4% 4.1%;
--foreground: 210 20% 98%;
--background: 222 22% 8%;
--foreground: 210 20% 96%;
--card: 224 71.4% 4.1%;
--card-foreground: 210 20% 98%;
--popover: 224 71.4% 4.1%;
--popover-foreground: 210 20% 98%;
--card: 222 22% 9%;
--card-foreground: 210 20% 96%;
--popover: 222 22% 9%;
--popover-foreground: 210 20% 96%;
--primary: 210 20% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 215 27.9% 16.9%;
--secondary-foreground: 210 20% 98%;
--muted: 215 27.9% 16.9%;
--muted-foreground: 217.9 10.6% 64.9%;
--accent: 215 27.9% 16.9%;
--accent-foreground: 210 20% 98%;
--primary: 9 78% 56%;
--primary-foreground: 210 40% 98%;
--secondary: 222 16% 14%;
--secondary-foreground: 210 20% 94%;
--muted: 222 16% 14%;
--muted-foreground: 217 10% 64%;
--accent: 222 16% 14%;
--accent-foreground: 210 20% 94%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--surface-1: 222 28% 11%;
--surface-2: 222 22% 14%;
--surface-3: 222 18% 17%;
--surface-inverse: 210 40% 98%;
--surface-inverse-foreground: 222 33% 8%;
--surface-1: 222 22% 9%;
--surface-2: 222 18% 12%;
--surface-3: 222 16% 15%;
--surface-inverse: 210 20% 96%;
--surface-inverse-foreground: 222 24% 10%;
--border: 215 27.9% 16.9%;
--border-strong: 215 20.2% 25%;
--input: 215 27.9% 16.9%;
--ring: 216 12.2% 83.9%;
--border: 222 14% 18%;
--border-strong: 222 12% 26%;
--input: 222 14% 18%;
--ring: 9 78% 56%;
--status-success: 145 68% 66%;
--status-success-soft: 145 36% 18%;
--status-warning: 42 96% 66%;
--status-warning-soft: 35 40% 18%;
--brand-primary: 205 88% 64%;
--brand-secondary: 190 76% 57%;
--brand-primary: 9 78% 56%;
--brand-secondary: 12 74% 64%;
--ambient-primary-alpha: 0.08;
--ambient-secondary-alpha: 0.06;
--ambient-secondary-alpha: 0.05;
--ambient-grid-alpha: 0;
--shadow-xs: 0 1px 2px hsl(220 50% 2% / 0.32);
@@ -126,14 +126,14 @@
--shadow-panel: 0 4px 6px -1px hsl(220 50% 2% / 0.32), 0 2px 4px -2px hsl(220 50% 2% / 0.32);
--shadow-sidebar: inset 0 1px 0 hsl(210 25% 92% / 0.06);
--sidebar-background: 222 25% 10%;
--sidebar-foreground: 210 18% 86%;
--sidebar-primary: 205 88% 64%;
--sidebar-primary-foreground: 222 33% 8%;
--sidebar-accent: 221 18% 18%;
--sidebar-accent-foreground: 210 25% 92%;
--sidebar-border: 221 18% 22%;
--sidebar-ring: 205 88% 64%;
--sidebar-background: 222 20% 10%;
--sidebar-foreground: 210 18% 88%;
--sidebar-primary: 9 78% 56%;
--sidebar-primary-foreground: 210 40% 98%;
--sidebar-accent: 222 16% 14%;
--sidebar-accent-foreground: 210 20% 94%;
--sidebar-border: 222 14% 20%;
--sidebar-ring: 9 78% 56%;
}
html {
@@ -167,6 +167,11 @@ html.dark {
}
@layer utilities {
.hero-noise {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
background-size: 180px 180px;
}
.text-balance {
text-wrap: balance;
}