Initial commit: Nuxt site
This commit is contained in:
Noro Studio
@@ -0,0 +1,177 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user