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>
220 lines
8.5 KiB
CSS
220 lines
8.5 KiB
CSS
:root {
|
|
--font-iran-sans: "IRANSansX", system-ui, sans-serif;
|
|
--radius: 0.625rem;
|
|
--radius-blog: 0.9375rem;
|
|
|
|
/* Button system tokens — single source of truth for all CTAs */
|
|
--btn-radius: var(--radius);
|
|
--btn-height-sm: 2rem;
|
|
--btn-height-md: 2.5rem;
|
|
--btn-height-lg: 3rem;
|
|
--btn-px-sm: 0.875rem;
|
|
--btn-px-md: 1.375rem;
|
|
--btn-px-lg: 1.75rem;
|
|
--btn-gap-sm: 0.375rem;
|
|
--btn-gap-md: 0.5rem;
|
|
--btn-gap-lg: 0.5rem;
|
|
|
|
/* Surface / border / shadow system */
|
|
--surface-border: color-mix(in srgb, var(--border) 72%, transparent);
|
|
--elevation-small:
|
|
0 1px 2px rgb(0 0 0 / 0.04),
|
|
0 1px 1px rgb(0 0 0 / 0.03);
|
|
--elevation-medium:
|
|
0 4px 16px -4px rgb(0 0 0 / 0.08),
|
|
0 2px 6px -2px rgb(0 0 0 / 0.04);
|
|
--elevation-floating: 0 8px 30px -12px rgb(0 0 0 / 0.16);
|
|
--elevation-hero:
|
|
0 1px 1px rgb(0 0 0 / 0.03),
|
|
0 8px 24px -8px rgb(0 0 0 / 0.08),
|
|
0 24px 48px -16px rgb(0 0 0 / 0.1);
|
|
|
|
/* Brand neon rim — bottom-weighted (top/sides quieter, bottom stronger) */
|
|
--elevation-glow-sm:
|
|
0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent),
|
|
0 -2px 6px -4px color-mix(in srgb, var(--primary) 6%, transparent),
|
|
-3px 0 6px -4px color-mix(in srgb, var(--primary) 6%, transparent),
|
|
3px 0 6px -4px color-mix(in srgb, var(--primary) 6%, transparent),
|
|
0 4px 10px -4px color-mix(in srgb, var(--primary) 24%, transparent),
|
|
0 4px 12px -6px rgb(0 0 0 / 0.08);
|
|
--elevation-glow-md:
|
|
0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent),
|
|
0 -3px 8px -5px color-mix(in srgb, var(--primary) 5%, transparent),
|
|
-4px 0 8px -5px color-mix(in srgb, var(--primary) 5%, transparent),
|
|
4px 0 8px -5px color-mix(in srgb, var(--primary) 5%, transparent),
|
|
0 6px 14px -5px color-mix(in srgb, var(--primary) 20%, transparent),
|
|
0 8px 28px -12px rgb(0 0 0 / 0.1);
|
|
--elevation-glow-lg:
|
|
0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent),
|
|
0 -4px 10px -6px color-mix(in srgb, var(--primary) 5%, transparent),
|
|
-5px 0 10px -6px color-mix(in srgb, var(--primary) 5%, transparent),
|
|
5px 0 10px -6px color-mix(in srgb, var(--primary) 5%, transparent),
|
|
0 8px 18px -5px color-mix(in srgb, var(--primary) 24%, transparent),
|
|
0 12px 40px -14px rgb(0 0 0 / 0.12);
|
|
--elevation-glow-media:
|
|
0 0 0 1px color-mix(in srgb, var(--primary) 9%, transparent),
|
|
0 -4px 10px -8px color-mix(in srgb, var(--primary) 4%, transparent),
|
|
-5px 0 10px -8px color-mix(in srgb, var(--primary) 4%, transparent),
|
|
5px 0 10px -8px color-mix(in srgb, var(--primary) 4%, transparent),
|
|
0 8px 16px -6px color-mix(in srgb, var(--primary) 18%, transparent),
|
|
0 12px 28px -10px color-mix(in srgb, var(--primary) 12%, transparent),
|
|
0 8px 24px -8px rgb(0 0 0 / 0.08),
|
|
0 20px 44px -16px rgb(0 0 0 / 0.08);
|
|
|
|
/* Brand primitives */
|
|
--brand-primary: #29a19c;
|
|
--brand-primary-dark: #044343;
|
|
--brand-neutral: #222222;
|
|
--brand-gray: #999999;
|
|
--brand-light: #e4e4e4;
|
|
--brand-primary-hover: #32b5af;
|
|
--brand-primary-active: #218a86;
|
|
--brand-glow: rgb(41 161 156 / 0.12);
|
|
--brand-highlight: color-mix(in srgb, #29a19c 55%, white);
|
|
|
|
/* Glow orb stops — decorative radial layers only */
|
|
--glow-orb-fade: 62%;
|
|
--glow-orb-primary-faint: rgba(41, 161, 156, 0.07);
|
|
--glow-orb-primary-soft: rgba(41, 161, 156, 0.08);
|
|
--glow-orb-primary-muted: rgba(41, 161, 156, 0.1);
|
|
--glow-orb-primary-md: rgba(41, 161, 156, 0.12);
|
|
--glow-orb-primary: rgba(41, 161, 156, 0.14);
|
|
--glow-orb-primary-strong: rgba(41, 161, 156, 0.22);
|
|
--glow-orb-secondary-soft: rgba(4, 67, 67, 0.06);
|
|
--glow-orb-secondary: rgba(4, 67, 67, 0.1);
|
|
--glow-orb-secondary-strong: rgba(4, 67, 67, 0.55);
|
|
--glow-orb-cta-end: rgba(41, 161, 156, 0.28);
|
|
--glow-orb-center: rgba(41, 161, 156, 0.18);
|
|
|
|
/* Semantic — light */
|
|
--background: #ffffff;
|
|
--foreground: #222222;
|
|
--card: #ffffff;
|
|
--card-foreground: #222222;
|
|
--popover: #ffffff;
|
|
--popover-foreground: #222222;
|
|
--surface: #f7f7f7;
|
|
--surface-foreground: #222222;
|
|
--primary: #29a19c;
|
|
--primary-foreground: #ffffff;
|
|
--primary-hover: #32b5af;
|
|
--primary-active: #218a86;
|
|
--secondary: #044343;
|
|
--secondary-foreground: #ffffff;
|
|
--muted: #e4e4e4;
|
|
--muted-foreground: #5c5c5c;
|
|
--accent: color-mix(in srgb, #29a19c 12%, white);
|
|
--accent-foreground: #044343;
|
|
--destructive: #c44747;
|
|
--destructive-foreground: #ffffff;
|
|
--border: #e4e4e4;
|
|
--input: #e4e4e4;
|
|
--ring: #29a19c;
|
|
--chart-1: #29a19c;
|
|
--chart-2: #044343;
|
|
--chart-3: #222222;
|
|
--chart-4: #999999;
|
|
--chart-5: #e4e4e4;
|
|
--sidebar: #ffffff;
|
|
--sidebar-foreground: #222222;
|
|
--sidebar-primary: #29a19c;
|
|
--sidebar-primary-foreground: #ffffff;
|
|
--sidebar-accent: #e4e4e4;
|
|
--sidebar-accent-foreground: #222222;
|
|
--sidebar-border: #e4e4e4;
|
|
--sidebar-ring: #29a19c;
|
|
}
|
|
|
|
.dark {
|
|
--background: #121616;
|
|
--foreground: #f4f4f4;
|
|
--card: #1a2121;
|
|
--card-foreground: #f4f4f4;
|
|
--popover: #1a2121;
|
|
--popover-foreground: #f4f4f4;
|
|
--surface: #171d1d;
|
|
--surface-foreground: #e4e4e4;
|
|
--primary: #29a19c;
|
|
--primary-foreground: #ffffff;
|
|
--primary-hover: #32b5af;
|
|
--primary-active: #218a86;
|
|
--secondary: #243535;
|
|
--secondary-foreground: #e4e4e4;
|
|
--muted: #243030;
|
|
--muted-foreground: #999999;
|
|
--accent: color-mix(in srgb, #29a19c 18%, #1c2424);
|
|
--accent-foreground: #e4e4e4;
|
|
--destructive: #e06a6a;
|
|
--destructive-foreground: #ffffff;
|
|
--border: rgb(228 228 228 / 0.12);
|
|
--input: rgb(228 228 228 / 0.14);
|
|
--ring: #29a19c;
|
|
--brand-glow: rgb(41 161 156 / 0.08);
|
|
--surface-border: color-mix(in srgb, var(--border) 85%, transparent);
|
|
--elevation-small:
|
|
0 1px 2px rgb(0 0 0 / 0.22),
|
|
0 1px 1px rgb(0 0 0 / 0.14);
|
|
--elevation-medium:
|
|
0 6px 22px -8px rgb(0 0 0 / 0.42),
|
|
0 2px 8px -2px rgb(0 0 0 / 0.24);
|
|
--elevation-floating: 0 10px 36px -14px rgb(0 0 0 / 0.48);
|
|
--elevation-hero:
|
|
0 1px 1px rgb(0 0 0 / 0.16),
|
|
0 14px 36px -12px rgb(0 0 0 / 0.4),
|
|
0 32px 60px -20px rgb(0 0 0 / 0.36);
|
|
--elevation-glow-sm:
|
|
0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent),
|
|
0 -2px 7px -4px color-mix(in srgb, var(--primary) 7%, transparent),
|
|
-3px 0 7px -4px color-mix(in srgb, var(--primary) 7%, transparent),
|
|
3px 0 7px -4px color-mix(in srgb, var(--primary) 7%, transparent),
|
|
0 5px 12px -4px color-mix(in srgb, var(--primary) 26%, transparent),
|
|
0 4px 14px -6px rgb(0 0 0 / 0.35);
|
|
--elevation-glow-md:
|
|
0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent),
|
|
0 -3px 9px -5px color-mix(in srgb, var(--primary) 6%, transparent),
|
|
-4px 0 9px -5px color-mix(in srgb, var(--primary) 6%, transparent),
|
|
4px 0 9px -5px color-mix(in srgb, var(--primary) 6%, transparent),
|
|
0 7px 16px -5px color-mix(in srgb, var(--primary) 22%, transparent),
|
|
0 10px 32px -12px rgb(0 0 0 / 0.42);
|
|
--elevation-glow-lg:
|
|
0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent),
|
|
0 -4px 11px -6px color-mix(in srgb, var(--primary) 6%, transparent),
|
|
-5px 0 11px -6px color-mix(in srgb, var(--primary) 6%, transparent),
|
|
5px 0 11px -6px color-mix(in srgb, var(--primary) 6%, transparent),
|
|
0 9px 20px -5px color-mix(in srgb, var(--primary) 26%, transparent),
|
|
0 14px 40px -14px rgb(0 0 0 / 0.45);
|
|
--elevation-glow-media:
|
|
0 0 0 1px color-mix(in srgb, var(--primary) 11%, transparent),
|
|
0 -4px 11px -8px color-mix(in srgb, var(--primary) 5%, transparent),
|
|
-5px 0 11px -8px color-mix(in srgb, var(--primary) 5%, transparent),
|
|
5px 0 11px -8px color-mix(in srgb, var(--primary) 5%, transparent),
|
|
0 8px 18px -6px color-mix(in srgb, var(--primary) 20%, transparent),
|
|
0 14px 30px -10px color-mix(in srgb, var(--primary) 14%, transparent),
|
|
0 14px 36px -12px rgb(0 0 0 / 0.4),
|
|
0 28px 56px -18px rgb(0 0 0 / 0.34);
|
|
--glow-orb-primary-faint: rgba(41, 161, 156, 0.05);
|
|
--glow-orb-primary-soft: rgba(41, 161, 156, 0.045);
|
|
--glow-orb-primary-muted: rgba(41, 161, 156, 0.07);
|
|
--glow-orb-primary-md: rgba(41, 161, 156, 0.06);
|
|
--glow-orb-primary: rgba(41, 161, 156, 0.08);
|
|
--glow-orb-primary-strong: rgba(41, 161, 156, 0.16);
|
|
--glow-orb-secondary-soft: rgba(41, 161, 156, 0.035);
|
|
--glow-orb-secondary: rgba(41, 161, 156, 0.055);
|
|
--glow-orb-secondary-strong: rgba(4, 67, 67, 0.4);
|
|
--glow-orb-cta-end: rgba(41, 161, 156, 0.14);
|
|
--glow-orb-center: rgba(41, 161, 156, 0.12);
|
|
--chart-1: #29a19c;
|
|
--chart-2: #e4e4e4;
|
|
--chart-3: #ffffff;
|
|
--chart-4: #999999;
|
|
--chart-5: #044343;
|
|
--sidebar: #141818;
|
|
--sidebar-foreground: #e4e4e4;
|
|
--sidebar-primary: #29a19c;
|
|
--sidebar-primary-foreground: #ffffff;
|
|
--sidebar-accent: #243030;
|
|
--sidebar-accent-foreground: #e4e4e4;
|
|
--sidebar-border: rgb(228 228 228 / 0.12);
|
|
--sidebar-ring: #29a19c;
|
|
}
|