226 lines
6.1 KiB
CSS
226 lines
6.1 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
html {
|
|
@apply scroll-smooth antialiased;
|
|
}
|
|
|
|
/* Light — مینیمال و تمیز */
|
|
html:not(.dark) {
|
|
--noro-bg: 250 252 252;
|
|
--noro-surface: 255 255 255;
|
|
--noro-border: 226 232 232;
|
|
--noro-text: 15 20 20;
|
|
--noro-muted: 100 116 116;
|
|
--noro-brand: 57 192 196;
|
|
--noro-brand-hover: 46 179 183;
|
|
--noro-brand-light: 147 224 226;
|
|
--noro-glow-primary: 57 192 196;
|
|
--noro-glow-secondary: 93 206 209;
|
|
--noro-hero-gradient-from: 57 192 196;
|
|
--noro-hero-gradient-via: 93 206 209;
|
|
--noro-hero-gradient-to: 46 179 183;
|
|
--noro-btn-primary-bg: 57 192 196;
|
|
--noro-btn-primary-text: 255 255 255;
|
|
--noro-btn-secondary-bg: 255 255 255;
|
|
--noro-btn-secondary-text: 15 20 20;
|
|
--noro-btn-secondary-border: 226 232 232;
|
|
--noro-accent-btn-bg: 57 192 196;
|
|
--noro-accent-btn-hover: 46 179 183;
|
|
--noro-header-bg: 250 252 252;
|
|
--noro-glass-bg: 255 255 255;
|
|
--noro-glass-opacity: 0.58;
|
|
--noro-glass-border: 255 255 255;
|
|
--noro-glass-border-opacity: 0.72;
|
|
--noro-glass-blur: 24px;
|
|
}
|
|
|
|
/* Dark — futuristic & premium */
|
|
html.dark {
|
|
--noro-bg: 5 8 8;
|
|
--noro-surface: 10 14 14;
|
|
--noro-border: 30 41 41;
|
|
--noro-text: 250 252 252;
|
|
--noro-muted: 148 163 163;
|
|
--noro-brand: 57 192 196;
|
|
--noro-brand-hover: 93 206 209;
|
|
--noro-brand-light: 147 224 226;
|
|
--noro-glow-primary: 57 192 196;
|
|
--noro-glow-secondary: 46 179 183;
|
|
--noro-hero-gradient-from: 57 192 196;
|
|
--noro-hero-gradient-via: 147 224 226;
|
|
--noro-hero-gradient-to: 93 206 209;
|
|
--noro-btn-primary-bg: 57 192 196;
|
|
--noro-btn-primary-text: 5 8 8;
|
|
--noro-btn-secondary-bg: 255 255 255;
|
|
--noro-btn-secondary-text: 5 8 8;
|
|
--noro-btn-secondary-border: 255 255 255;
|
|
--noro-accent-btn-bg: 57 192 196;
|
|
--noro-accent-btn-hover: 93 206 209;
|
|
--noro-header-bg: 5 8 8;
|
|
--noro-glass-bg: 255 255 255;
|
|
--noro-glass-opacity: 0.05;
|
|
--noro-glass-border: 255 255 255;
|
|
--noro-glass-border-opacity: 0.09;
|
|
--noro-glass-blur: 24px;
|
|
}
|
|
|
|
body {
|
|
@apply bg-noro-bg font-sans text-noro-text transition-[background-color,color] duration-500;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: Rokh, Peyda, Tahoma, system-ui, sans-serif;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.font-heading {
|
|
font-family: Rokh, Peyda, Tahoma, system-ui, sans-serif;
|
|
}
|
|
|
|
.noro-container {
|
|
@apply mx-auto max-w-6xl px-4 sm:px-6;
|
|
}
|
|
|
|
.noro-glass {
|
|
border-color: rgb(var(--noro-glass-border) / var(--noro-glass-border-opacity));
|
|
background-color: rgb(var(--noro-glass-bg) / var(--noro-glass-opacity));
|
|
-webkit-backdrop-filter: blur(var(--noro-glass-blur)) saturate(180%);
|
|
backdrop-filter: blur(var(--noro-glass-blur)) saturate(180%);
|
|
}
|
|
|
|
html:not(.dark) .noro-glass {
|
|
box-shadow:
|
|
inset 0 1px 0 0 rgb(255 255 255 / 0.85),
|
|
0 1px 2px rgb(15 20 20 / 0.04);
|
|
}
|
|
|
|
html.dark .noro-glass {
|
|
box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.07);
|
|
}
|
|
|
|
.noro-glass-header {
|
|
@apply noro-glass sticky top-0 z-50 border-b;
|
|
}
|
|
|
|
.noro-section {
|
|
@apply py-20 sm:py-28;
|
|
}
|
|
|
|
.noro-glow {
|
|
@apply pointer-events-none absolute rounded-full blur-[120px];
|
|
}
|
|
|
|
.noro-service-card {
|
|
@apply relative overflow-hidden rounded-2xl border border-noro-border bg-transparent transition duration-300 hover:-translate-y-1 hover:shadow-lg;
|
|
}
|
|
|
|
.noro-service-card:hover {
|
|
border-color: rgb(var(--noro-brand) / 0.3);
|
|
}
|
|
|
|
html.dark .noro-service-card:hover {
|
|
box-shadow:
|
|
0 10px 15px -3px rgb(0 0 0 / 0.1),
|
|
0 4px 6px -4px rgb(var(--noro-brand) / 0.1);
|
|
}
|
|
|
|
.noro-card {
|
|
@apply rounded-2xl border border-noro-border bg-noro-surface transition duration-300;
|
|
}
|
|
|
|
.noro-card-hover {
|
|
@apply noro-card hover:-translate-y-1 hover:shadow-lg;
|
|
}
|
|
|
|
.noro-card-hover:hover {
|
|
border-color: rgb(var(--noro-brand) / 0.3);
|
|
}
|
|
|
|
html.dark .noro-card-hover:hover {
|
|
box-shadow:
|
|
0 10px 15px -3px rgb(0 0 0 / 0.1),
|
|
0 4px 6px -4px rgb(var(--noro-brand) / 0.1);
|
|
}
|
|
|
|
.noro-gradient-text {
|
|
@apply bg-gradient-to-l from-[rgb(var(--noro-hero-gradient-from))] via-[rgb(var(--noro-hero-gradient-via))] to-[rgb(var(--noro-hero-gradient-to))] bg-clip-text text-transparent;
|
|
}
|
|
|
|
.text-noro-brand {
|
|
color: rgb(var(--noro-brand));
|
|
}
|
|
|
|
.bg-noro-brand {
|
|
background-color: rgb(var(--noro-brand));
|
|
}
|
|
|
|
.border-noro-brand {
|
|
border-color: rgb(var(--noro-brand));
|
|
}
|
|
|
|
.noro-btn-primary {
|
|
@apply inline-flex items-center justify-center rounded-xl bg-[rgb(var(--noro-btn-primary-bg))] px-6 py-3 text-sm font-semibold text-[rgb(var(--noro-btn-primary-text))] transition hover:bg-[rgb(var(--noro-brand-hover))];
|
|
}
|
|
|
|
.noro-btn-secondary {
|
|
@apply inline-flex items-center justify-center rounded-xl border border-[rgb(var(--noro-btn-secondary-border))] bg-[rgb(var(--noro-btn-secondary-bg))] px-6 py-3 text-sm font-semibold text-[rgb(var(--noro-btn-secondary-text))] transition hover:opacity-90;
|
|
}
|
|
|
|
.blog-article-html h2 {
|
|
@apply pt-4 text-2xl font-bold text-noro-text;
|
|
}
|
|
|
|
.blog-article-html h3 {
|
|
@apply pt-2 text-xl font-bold text-noro-text;
|
|
}
|
|
|
|
.blog-article-html h4 {
|
|
@apply pt-1 text-lg font-semibold text-noro-text;
|
|
}
|
|
|
|
.blog-article-html p {
|
|
@apply my-3 whitespace-pre-line;
|
|
}
|
|
|
|
.blog-article-html ul {
|
|
@apply my-4 list-disc space-y-2 pr-6 marker:text-noro-brand;
|
|
}
|
|
|
|
.blog-article-html ol {
|
|
@apply my-4 list-decimal space-y-2 pr-6 marker:text-noro-brand;
|
|
}
|
|
|
|
.blog-article-html blockquote {
|
|
@apply my-6 border-r-4 border-noro-brand/30 bg-noro-surface/60 px-4 py-3 italic;
|
|
}
|
|
|
|
.blog-article-html a {
|
|
@apply text-noro-brand underline decoration-noro-brand/30 underline-offset-2 transition hover:decoration-noro-brand;
|
|
}
|
|
|
|
.blog-article-html hr {
|
|
@apply my-8 border-noro-border;
|
|
}
|
|
|
|
.blog-article-html img {
|
|
@apply my-6 w-full rounded-2xl border border-noro-border object-cover;
|
|
}
|
|
|
|
.blog-article-html figure {
|
|
@apply my-6 overflow-hidden rounded-2xl border border-noro-border bg-noro-surface;
|
|
}
|
|
|
|
.blog-article-html figcaption {
|
|
@apply px-4 py-3 text-center text-sm text-noro-muted;
|
|
}
|
|
}
|