306 lines
8.4 KiB
CSS
306 lines
8.4 KiB
CSS
@import "tailwindcss";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Tailwind variants for manual theming (next-themes sets `html` class to `dark`/`light`) */
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
@custom-variant light (&:where(.light, .light *));
|
|
|
|
/* Rotating glass border (used on service detail quick-stats)
|
|
Uses `transform: rotate()` for smoother (GPU-friendly) animation. */
|
|
@property --rb-angle {
|
|
syntax: '<angle>';
|
|
inherits: false;
|
|
initial-value: 0deg;
|
|
}
|
|
|
|
@keyframes rb-spin {
|
|
to {
|
|
--rb-angle: 360deg;
|
|
}
|
|
}
|
|
|
|
@keyframes rb-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.glass-rotating-border {
|
|
position: relative;
|
|
}
|
|
|
|
.glass-rotating-border::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
padding: 1.5px; /* border thickness */
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
background: conic-gradient(
|
|
from var(--rb-angle),
|
|
rgba(255, 255, 255, 0) 0deg,
|
|
rgba(128, 200, 245, 0.55) 80deg,
|
|
rgba(167, 139, 250, 0.55) 155deg,
|
|
rgba(132, 225, 188, 0.55) 230deg,
|
|
rgba(96, 165, 250, 0.55) 305deg,
|
|
rgba(255, 255, 255, 0) 360deg
|
|
);
|
|
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
filter: drop-shadow(0 0 22px rgba(128, 200, 245, 0.12));
|
|
animation: rb-fade-in 700ms ease-out 150ms forwards, rb-spin 7.5s linear infinite;
|
|
}
|
|
|
|
html.light .glass-rotating-border::before {
|
|
background: conic-gradient(
|
|
from var(--rb-angle),
|
|
rgba(255, 255, 255, 0) 0deg,
|
|
rgba(96, 165, 250, 0.40) 85deg,
|
|
rgba(167, 139, 250, 0.38) 165deg,
|
|
rgba(34, 211, 238, 0.36) 235deg,
|
|
rgba(52, 211, 153, 0.34) 310deg,
|
|
rgba(255, 255, 255, 0) 360deg
|
|
);
|
|
filter: drop-shadow(0 0 18px rgba(2, 6, 23, 0.06));
|
|
}
|
|
|
|
html.light .glass-rotating-border::after {
|
|
background: conic-gradient(
|
|
rgba(255, 255, 255, 0) 0deg 30deg,
|
|
rgba(96, 165, 250, 0.22) 46deg 72deg,
|
|
rgba(255, 255, 255, 0) 88deg 124deg,
|
|
rgba(167, 139, 250, 0.20) 138deg 164deg,
|
|
rgba(255, 255, 255, 0) 180deg 216deg,
|
|
rgba(34, 211, 238, 0.18) 230deg 256deg,
|
|
rgba(255, 255, 255, 0) 272deg 308deg,
|
|
rgba(52, 211, 153, 0.16) 322deg 346deg,
|
|
rgba(255, 255, 255, 0) 360deg
|
|
);
|
|
filter: blur(16px);
|
|
}
|
|
|
|
html.light .glass-rotating-border::before {
|
|
background: conic-gradient(
|
|
rgba(255, 255, 255, 0) 0deg 28deg,
|
|
rgba(96, 165, 250, 0.38) 44deg 70deg,
|
|
rgba(255, 255, 255, 0) 86deg 126deg,
|
|
rgba(167, 139, 250, 0.34) 140deg 166deg,
|
|
rgba(255, 255, 255, 0) 182deg 222deg,
|
|
rgba(34, 211, 238, 0.32) 236deg 262deg,
|
|
rgba(255, 255, 255, 0) 278deg 318deg,
|
|
rgba(52, 211, 153, 0.30) 332deg 352deg,
|
|
rgba(255, 255, 255, 0) 360deg
|
|
);
|
|
filter: drop-shadow(0 0 10px rgba(2, 6, 23, 0.05));
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "YekanBakhFaNum";
|
|
src: url("/fonts/YekanBakhFaNum-Regular.woff") format("woff");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "YekanBakhFaNum";
|
|
src: url("/fonts/YekanBakhFaNum-SemiBold.woff") format("woff");
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "YekanBakhFaNum";
|
|
src: url("/fonts/YekanBakhFaNum-Bold.woff") format("woff");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
:root {
|
|
/* Theme tokens (default = dark, per request) */
|
|
--background: #000918;
|
|
--foreground: #ffffff;
|
|
|
|
--app-bg: #000918;
|
|
--hero-bg: #050a15;
|
|
--footer-bg: #000918;
|
|
|
|
--text-primary: #ffffff;
|
|
--text-muted: #d1d5db; /* gray-300 */
|
|
--text-muted-2: #9ca3af; /* gray-400 */
|
|
--text-muted-3: #6b7280; /* gray-500 */
|
|
|
|
--glass-02: rgba(255, 255, 255, 0.02);
|
|
--glass-04: rgba(255, 255, 255, 0.04);
|
|
--glass-05: rgba(255, 255, 255, 0.05);
|
|
--glass-10: rgba(255, 255, 255, 0.10);
|
|
|
|
--border-05: rgba(255, 255, 255, 0.05);
|
|
--border-10: rgba(255, 255, 255, 0.10);
|
|
--border-20: rgba(255, 255, 255, 0.20);
|
|
|
|
/* Section-specific surfaces (keep dark visuals identical) */
|
|
--surface-main-wrap: rgba(10, 17, 32, 0.50); /* #0a1120/50 */
|
|
--global-surface-bg: #091120;
|
|
--global-surface-bg-80: rgba(9, 17, 32, 0.80);
|
|
--global-surface-border: rgba(30, 41, 59, 0.50); /* #1e293b/50 */
|
|
--footer-surface-bg: #0f1629;
|
|
--footer-cta-from: #0b1426;
|
|
--footer-cta-via: #0d1a30;
|
|
--footer-cta-to: #0a1829;
|
|
--footer-chip-bg: #131b2f;
|
|
--footer-chip-inner-bg: #1a233a;
|
|
--footer-icon-bg: #161f36;
|
|
|
|
--hero-image-opacity: 1;
|
|
--hero-bottom-fade-from: #000918;
|
|
|
|
/* --font-family-base: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
|
|
"Apple Color Emoji", "Segoe UI Emoji"; */
|
|
|
|
/* Tailwind `font-sans` bridge */
|
|
--font-geist-sans: var(--font-family-base);
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
/* Light theme: white base + very subtle blue/green gradients, keeping glass feel */
|
|
html.light {
|
|
--background: #F8FAFC;
|
|
--foreground: #0b1020;
|
|
|
|
--app-bg: #F8FAFC;
|
|
/* --app-bg: radial-gradient(1000px 600px at 10% 10%, rgba(56, 189, 248, 0.10), transparent 60%),
|
|
radial-gradient(900px 520px at 85% 20%, rgba(132, 225, 188, 0.12), transparent 55%),
|
|
#ffffff; */
|
|
--hero-bg: radial-gradient(1000px 600px at 15% 0%, rgba(56, 189, 248, 0.12), transparent 60%),
|
|
radial-gradient(900px 520px at 85% 25%, rgba(132, 225, 188, 0.14), transparent 55%),
|
|
#ffffff;
|
|
--footer-bg: #f8fafc;
|
|
|
|
--text-primary: #0b1020;
|
|
--text-muted: #334155; /* slate-700-ish */
|
|
--text-muted-2: #475569; /* slate-600-ish */
|
|
--text-muted-3: #64748b; /* slate-500-ish */
|
|
|
|
--glass-02: rgba(2, 6, 23, 0.02);
|
|
--glass-04: rgba(2, 6, 23, 0.04);
|
|
--glass-05: rgba(2, 6, 23, 0.05);
|
|
--glass-10: rgba(2, 6, 23, 0.10);
|
|
|
|
--border-05: rgba(2, 6, 23, 0.06);
|
|
--border-10: rgba(2, 6, 23, 0.12);
|
|
--border-20: rgba(2, 6, 23, 0.18);
|
|
|
|
--surface-main-wrap: rgba(255, 255, 255, 0.70);
|
|
--global-surface-bg: rgba(255, 255, 255, 0.75);
|
|
--global-surface-bg-80: rgba(255, 255, 255, 0.80);
|
|
--global-surface-border: rgba(2, 6, 23, 0.12);
|
|
--footer-surface-bg: rgba(255, 255, 255, 0.75);
|
|
--footer-cta-from: rgba(56, 189, 248, 0.12);
|
|
--footer-cta-via: rgba(132, 225, 188, 0.12);
|
|
--footer-cta-to: rgba(56, 189, 248, 0.08);
|
|
--footer-chip-bg: rgba(255, 255, 255, 0.60);
|
|
--footer-chip-inner-bg: rgba(255, 255, 255, 0.55);
|
|
--footer-icon-bg: rgba(2, 6, 23, 0.04);
|
|
|
|
--hero-image-opacity: 0.12;
|
|
--hero-bottom-fade-from: #ffffff;
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--text-primary);
|
|
font-family: var(--font-family-base);
|
|
}
|
|
|
|
.locale-fa {
|
|
--font-family-base: "YekanBakhFaNum", system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
|
|
Arial, "Apple Color Emoji", "Segoe UI Emoji";
|
|
--font-geist-sans: var(--font-family-base);
|
|
}
|
|
|
|
/* Direction hooks (edit freely) */
|
|
.locale-scope[data-locale="en"] .en-row-reverse {
|
|
flex-direction: row-reverse !important;
|
|
}
|
|
.locale-scope[data-locale="en"] .en-row {
|
|
flex-direction: row !important;
|
|
}
|
|
.locale-scope[data-locale="en"] .en-justify-start {
|
|
justify-content: flex-start;
|
|
}
|
|
.locale-scope[data-locale="en"] .en-justify-end {
|
|
justify-content: flex-end;
|
|
}
|
|
.locale-scope[data-locale="en"] .en-items-start {
|
|
align-items: flex-start;
|
|
}
|
|
.locale-scope[data-locale="en"] .en-items-end {
|
|
align-items: flex-end;
|
|
}
|
|
.locale-scope[data-locale="en"] .en-text-left {
|
|
text-align: left !important;
|
|
}
|
|
.locale-scope[data-locale="en"] .en-text-right {
|
|
text-align: right !important;
|
|
}
|
|
|
|
/* Shadow hooks (defaults are subtle; tweak as needed) */
|
|
.locale-scope[data-locale="en"] .en-shadow-left {
|
|
box-shadow: -12px 0 40px rgba(2, 6, 23, 0.12);
|
|
}
|
|
.locale-scope[data-locale="en"] .en-shadow-right {
|
|
box-shadow: 12px 0 40px rgba(2, 6, 23, 0.12);
|
|
}
|
|
|
|
/* Optional FA-specific hooks (use only when you need overrides for /fa) */
|
|
.locale-scope[data-locale="fa"] .fa-text-right {
|
|
text-align: right !important;
|
|
}
|
|
.locale-scope[data-locale="fa"] .fa-text-left {
|
|
text-align: left !important;
|
|
}
|
|
.locale-scope[data-locale="fa"] .fa-row-reverse {
|
|
flex-direction: row-reverse !important;
|
|
}
|
|
.locale-scope[data-locale="fa"] .fa-row {
|
|
flex-direction: row !important;
|
|
}
|
|
|
|
/* Debug helper: uncomment to visually verify EN scope is applied */
|
|
/* .locale-scope[data-locale="en"] { outline: 2px dashed rgba(59,130,246,0.35); outline-offset: -2px; } */
|
|
|
|
.app-bg {
|
|
background: var(--app-bg);
|
|
}
|
|
|
|
.hero-bg {
|
|
background: var(--hero-bg);
|
|
}
|
|
|
|
.footer-bg {
|
|
background: var(--footer-bg);
|
|
}
|