ar.badiei/mr_decor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
mr_decor/app/globals.css
T

703 lines
19 KiB
CSS
Raw Permalink Normal View History

first project version mrDecor
2026-05-11 15:30:57 +03:30
@import "tailwindcss";
@import "tw-animate-css";
/* IRANSansX Font Faces */
@font-face {
font-family: IRANSansX;
font-style: normal;
font-weight: 100;
src: url("/assets/irsansx/Woff/IRANSansXFaNum-Thin.woff") format("woff"),
url("/assets/irsansx/Woff2/IRANSansXFaNum-Thin.woff2") format("woff2");
}
@font-face {
font-family: IRANSansX;
font-style: normal;
font-weight: 200;
src: url("/assets/irsansx/Woff/IRANSansXFaNum-UltraLight.woff") format("woff"),
url("/assets/irsansx/Woff2/IRANSansXFaNum-UltraLight.woff2") format("woff2");
}
@font-face {
font-family: IRANSansX;
font-style: normal;
font-weight: 300;
src: url("/assets/irsansx/Woff/IRANSansXFaNum-Light.woff") format("woff"),
url("/assets/irsansx/Woff2/IRANSansXFaNum-Light.woff2") format("woff2");
}
@font-face {
font-family: IRANSansX;
font-style: normal;
font-weight: 500;
src: url("/assets/irsansx/Woff/IRANSansXFaNum-Medium.woff") format("woff"),
url("/assets/irsansx/Woff2/IRANSansXFaNum-Medium.woff2") format("woff2");
}
@font-face {
font-family: IRANSansX;
font-style: normal;
font-weight: 600;
src: url("/assets/irsansx/Woff/IRANSansXFaNum-DemiBold.woff") format("woff"),
url("/assets/irsansx/Woff2/IRANSansXFaNum-DemiBold.woff2") format("woff2");
}
@font-face {
font-family: IRANSansX;
font-style: normal;
font-weight: 800;
src: url("/assets/irsansx/Woff/IRANSansXFaNum-ExtraBold.woff") format("woff"),
url("/assets/irsansx/Woff2/IRANSansXFaNum-ExtraBold.woff2") format("woff2");
}
@font-face {
font-family: IRANSansX;
font-style: normal;
font-weight: 900;
src: url("/assets/irsansx/Woff/IRANSansXFaNum-Black.woff") format("woff"),
url("/assets/irsansx/Woff2/IRANSansXFaNum-Black.woff2") format("woff2");
}
@font-face {
font-family: IRANSansX;
font-style: normal;
font-weight: bold;
src: url("/assets/irsansx/Woff/IRANSansXFaNum-Bold.woff") format("woff"),
url("/assets/irsansx/Woff2/IRANSansXFaNum-Bold.woff2") format("woff2");
}
@font-face {
font-family: IRANSansX;
font-style: normal;
font-weight: normal;
src: url("/assets/irsansx/Woff/IRANSansXFaNum-Regular.woff") format("woff"),
url("/assets/irsansx/Woff2/IRANSansXFaNum-Regular.woff2") format("woff2");
}
@custom-variant dark (&:is(.dark *));
/*
* تم واحد (بدون لایت/دارک) — پالت اصلاح‌شده
* پایه: شرابی-مشکی گرم | کارت: بورگوندی کنترل‌شده (کمتر ماژنتا) | متن: کرم گرم (نه خاکستری آبی)
* برند: طلایی #c99d4d | ثانویه: سرمه‌ای | طلایی/زمردی برای گرادیان و border انیمیشن
*/
@theme inline {
/* Design tokens → Tailwind colors */
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-overlay: var(--overlay);
--color-overlay-foreground: var(--overlay-foreground);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
/* Gold & Emerald scales for utility use */
--color-gold-50: var(--gold-50);
--color-gold-100: var(--gold-100);
--color-gold-200: var(--gold-200);
--color-gold-300: var(--gold-300);
--color-gold-400: var(--gold-400);
--color-gold-500: var(--gold-500);
--color-gold-600: var(--gold-600);
--color-gold-700: var(--gold-700);
--color-gold-800: var(--gold-800);
--color-gold-900: var(--gold-900);
--color-gold-950: var(--gold-950);
--color-emerald-50: var(--emerald-50);
--color-emerald-100: var(--emerald-100);
--color-emerald-200: var(--emerald-200);
--color-emerald-300: var(--emerald-300);
--color-emerald-400: var(--emerald-400);
--color-emerald-500: var(--emerald-500);
--color-emerald-600: var(--emerald-600);
--color-emerald-700: var(--emerald-700);
--color-emerald-800: var(--emerald-800);
--color-emerald-900: var(--emerald-900);
--color-emerald-950: var(--emerald-950);
--font-sans: var(--font-iran-sans);
--font-mono: var(--font-geist-mono);
--font-iran-sans: "IRANSansX", "system-ui", "Avenir", "Helvetica", "Arial",
"sans-serif";
--font-size-heading-1: clamp(2rem, 4vw + 1rem, 3.75rem);
--font-size-heading-2: clamp(1.5rem, 3vw + 0.5rem, 2.25rem);
--font-size-heading-3: clamp(1.25rem, 2vw + 0.5rem, 1.875rem);
--font-size-heading-4: 1.25rem;
--font-size-heading-5: 1.125rem;
--font-size-body: 1rem;
--font-size-body-sm: 0.875rem;
--font-size-caption: 0.75rem;
--font-weight-heading: 700;
--font-weight-subheading: 600;
--font-weight-body: 400;
--font-weight-medium: 500;
--line-height-heading: 1.25;
--line-height-body: 1.6;
--line-height-relaxed: 1.75;
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--animate-line-shadow: line-shadow 15s linear infinite;
@keyframes line-shadow {
0% { background-position: 0 0; }
100% { background-position: 100% -100%; }
}
}
:root {
/* ----- Master palette from provided swatch ----- */
--tone-1: #110507;
--tone-2: #230a0d;
--tone-3: #340e14;
--tone-4: #46131a;
--tone-5: #571821;
--tone-6: #682f37;
--tone-7: #895d64;
--tone-8: #db8c90;
--tone-9: #ddd1d3;
/* ----- طلایی (برند؛ هم‌راستا با --primary) ----- */
--gold-50: #fdf9f2;
--gold-100: #f8eed9;
--gold-200: #efd9b0;
--gold-300: #e4c27e;
--gold-400: #d4ad5a;
--gold-500: #c99d4d;
--gold-600: #a67e3c;
--gold-700: #85632f;
--gold-800: #5c4522;
--gold-900: #3d2f18;
--gold-950: #261c10;
/* ----- زمردی-فیروزه (تزئینات؛ کمی عمیق‌تر برای کنار بورگوندی) ----- */
--emerald-50: #e6f4f1;
--emerald-100: #c0e6df;
--emerald-200: #8fd4c8;
--emerald-300: #5cb9a9;
--emerald-400: #3a9d8c;
--emerald-500: #2a7f72;
--emerald-600: #23695f;
--emerald-700: #1d534c;
--emerald-800: #163e39;
--emerald-900: #0f2b28;
--emerald-950: #081916;
--font-iran-sans: "IRANSansX", var(--font-geist-sans);
--radius: 0.625rem;
/* ----- Semantic tokens based on exact provided palette ----- */
--background: var(--tone-2);
--foreground: var(--tone-9);
--card: var(--tone-4);
--card-foreground: var(--tone-9);
--popover: var(--tone-3);
--popover-foreground: var(--tone-9);
--primary: var(--tone-8);
--primary-foreground: var(--tone-1);
--secondary: var(--tone-6);
--secondary-foreground: var(--tone-9);
--muted: var(--tone-3);
--muted-foreground: var(--tone-7);
--accent: var(--tone-5);
--accent-foreground: var(--tone-9);
--destructive: oklch(0.62 0.2 22);
--destructive-foreground: oklch(0.99 0.01 25);
/* حاشیه: طلای ملایم روی پایهٔ تیرهٔ گرم */
--border: color-mix(in srgb, var(--tone-8) 28%, var(--tone-2));
--input: var(--tone-5);
--ring: var(--tone-8);
/* متن/اسکرین روی تصویر و اورلی مودال */
--overlay: var(--tone-1);
--overlay-foreground: var(--tone-9);
--chart-1: var(--tone-8);
--chart-2: var(--tone-6);
--chart-3: var(--tone-7);
--chart-4: var(--tone-5);
--chart-5: var(--tone-4);
--sidebar: var(--tone-2);
--sidebar-foreground: var(--tone-9);
--sidebar-primary: var(--tone-8);
--sidebar-primary-foreground: var(--tone-1);
--sidebar-accent: var(--tone-5);
--sidebar-accent-foreground: var(--tone-9);
--sidebar-border: var(--tone-6);
--sidebar-ring: var(--tone-8);
/* ----- دکمهٔ پریمیوم (طلایی + گرادیان آبی ثانویه) ----- */
--btn-radius: 0.625rem;
--btn-transition: 280ms ease-out;
--btn-gold-from: #d8b056;
--btn-gold-via: #c99d4d;
--btn-gold-to: #b08a3f;
--btn-gold-text: #fffaf0;
--btn-gold-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 2px 8px rgba(0, 0, 0, 0.35),
0 4px 16px rgba(224, 168, 48, 0.2);
--btn-gold-shadow-hover: 0 1px 0 0 rgba(255, 255, 255, 0.3) inset, 0 6px 20px rgba(0, 0, 0, 0.3),
0 0 10px rgba(242, 217, 122, 0.2);
--btn-gold-shadow-active: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 2px 6px rgba(0, 0, 0, 0.4);
--btn-gold-glow-hover: 0 0 10px rgba(242, 217, 122, 0.22);
--btn-sapphire-from: #2a5ab8;
--btn-sapphire-to: #153875;
--btn-sapphire-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.14) inset, 0 2px 8px rgba(0, 0, 0, 0.35),
0 4px 16px rgba(30, 74, 180, 0.25);
--btn-sapphire-shadow-hover: 0 1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 6px 20px rgba(0, 0, 0, 0.28),
0 0 10px rgba(90, 140, 220, 0.22);
--btn-sapphire-shadow-active: 0 0 0 1px rgba(0, 0, 0, 0.12) inset, 0 2px 6px rgba(0, 0, 0, 0.35);
--btn-sapphire-glow-hover: 0 0 10px rgba(90, 140, 220, 0.28);
}
@keyframes btn-shine {
0% { transform: translateX(-100%) skewX(-12deg); }
100% { transform: translateX(200%) skewX(-12deg); }
}
@layer base {
html {
scroll-behavior: smooth;
color-scheme: dark;
}
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
font-family: "IRANSansX";
letter-spacing: normal;
line-height: 1.6;
overflow-x: hidden;
/* Single subtle overlay for premium feel – no banding */
background-image:
radial-gradient(
ellipse 95% 62% at 50% -10%,
color-mix(in srgb, var(--tone-8) 18%, transparent) 0%,
transparent 54%
),
radial-gradient(
ellipse 85% 48% at 50% 115%,
color-mix(in srgb, var(--tone-7) 16%, transparent) 0%,
transparent 56%
);
background-attachment: fixed;
background-repeat: no-repeat;
transition: background-color 0.3s ease;
}
/* Standard typography – same sizes/weights across all pages */
h1, h2, h3, h4, h5, h6 {
font-family: inherit;
letter-spacing: normal;
line-height: var(--line-height-heading);
font-weight: var(--font-weight-heading);
transition: color 0.3s ease;
}
h1 {
font-size: var(--font-size-heading-1);
font-weight: 700;
}
h2 {
font-size: var(--font-size-heading-2);
font-weight: 600;
}
h3 {
font-size: var(--font-size-heading-3);
font-weight: 600;
}
h4 {
font-size: var(--font-size-heading-4);
font-weight: 500;
}
h5 {
font-size: var(--font-size-heading-5);
font-weight: 500;
}
h6 {
font-size: var(--font-size-body);
font-weight: 500;
}
p {
font-size: var(--font-size-body);
font-weight: var(--font-weight-body);
letter-spacing: normal;
line-height: var(--line-height-body);
transition: color 0.3s ease;
}
a {
transition: all 0.3s ease;
color: var(--primary);
}
a:hover {
color: var(--primary);
opacity: 0.9;
}
button {
transition: all 0.3s ease;
}
}
/* WordPress table block (figure.wp-block-table > table) */
.wp-block-table {
margin: 1.5rem 0;
overflow-x: auto;
border-radius: var(--radius);
}
.wp-block-table table {
width: 100%;
border-collapse: collapse;
font-size: 0.9375rem;
}
.wp-block-table table.has-fixed-layout {
table-layout: fixed;
}
.wp-block-table th,
.wp-block-table td {
padding: 0.75rem 1rem;
border: 1px solid var(--border);
text-align: right;
min-width: 850px;
}
.wp-block-table tbody tr:first-child th,
.wp-block-table tbody tr:first-child td {
background: var(--muted);
font-weight: 600;
color: var(--foreground);
}
.wp-block-table tbody tr:not(:first-child):hover td {
background: var(--muted);
}
.wp-block-table thead th {
background: var(--muted);
font-weight: 600;
color: var(--foreground);
}
.wp-block-button > .wp-element-button {
@apply inline-flex bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/80 hover:text-primary-foreground/80 cursor-pointer no-underline;
}
.wp-block-button {
@apply inline-flex;
}
.wp-block-button.is-style-outline > .wp-element-button {
@apply bg-transparent text-foreground border border-2 border-primary hover:text-primary cursor-pointer no-underline;
}
.cta-block {
@apply flex flex-col gap-4 border rounded-md border-primary/50 p-4 items-center my-4 shadow-sm bg-primary/5 text-primary;
}
.wp-block-image {
@apply rounded-md overflow-hidden shadow-sm;
}
/* ========== Animated Gradient Border ========== */
@property --bag-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
@keyframes bag-spin {
to { --bag-angle: 360deg; }
}
.border-animated-gradient {
--bag-width: 2px;
--bag-speed: 5s;
--bag-bg: var(--card);
--bag-c1: var(--gold-300);
--bag-c2: var(--emerald-500);
--bag-c3: var(--gold-500);
--bag-c4: var(--emerald-300);
border: var(--bag-width) solid transparent;
background:
var(--bag-bg) padding-box,
conic-gradient(
from var(--bag-angle),
var(--bag-c1) 0%,
var(--bag-c2) 25%,
var(--bag-c3) 50%,
var(--bag-c4) 75%,
var(--bag-c1) 100%
) border-box;
animation: bag-spin var(--bag-speed) linear infinite;
}
/* ── ورایانت رنگ: فقط طلایی ── */
.border-animated-gradient.bag-gold {
--bag-c1: var(--gold-200);
--bag-c2: var(--gold-500);
--bag-c3: var(--gold-300);
--bag-c4: var(--gold-700);
}
/* ── ورایانت رنگ: فقط زمردی ── */
.border-animated-gradient.bag-emerald {
--bag-c1: var(--emerald-200);
--bag-c2: var(--emerald-500);
--bag-c3: var(--emerald-300);
--bag-c4: var(--emerald-700);
}
/* ── ورایانت پس‌زمینه ── */
.border-animated-gradient.bag-bg-base { --bag-bg: var(--background); }
.border-animated-gradient.bag-bg-muted { --bag-bg: var(--muted); }
/* ── ورایانت سرعت ── */
.border-animated-gradient.bag-slow { --bag-speed: 10s; }
.border-animated-gradient.bag-fast { --bag-speed: 2s; }
/* ── ورایانت ضخامت ── */
.border-animated-gradient.bag-thick { --bag-width: 3px; }
.border-animated-gradient.bag-thin { --bag-width: 1px; }
/* ========== Unified section surfaces & blur separators ========== */
.section-unified-block {
border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
background:
linear-gradient(
145deg,
color-mix(in srgb, var(--tone-5) 62%, transparent) 0%,
color-mix(in srgb, var(--tone-3) 74%, transparent) 100%
);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
box-shadow: 0 10px 30px color-mix(in srgb, var(--tone-1) 55%, transparent);
}
.frosted-panel {
border: 1px solid color-mix(in srgb, var(--tone-8) 24%, transparent);
background: color-mix(in srgb, var(--tone-4) 72%, transparent);
-webkit-backdrop-filter: blur(16px) saturate(115%);
backdrop-filter: blur(16px) saturate(115%);
}
.tone-gradient-line {
height: 1px;
width: 8rem;
border-radius: 999px;
margin-inline: auto;
background: linear-gradient(
to right,
var(--tone-3) 0%,
var(--tone-6) 35%,
var(--tone-8) 65%,
var(--tone-9) 100%
);
filter: blur(0.2px);
}
.section-blur-separator {
position: relative;
}
.section-blur-separator::before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: min(78rem, 92vw);
height: 1px;
transform: translateX(-50%);
background: linear-gradient(
to right,
transparent 0%,
color-mix(in srgb, var(--tone-6) 65%, transparent) 20%,
color-mix(in srgb, var(--tone-8) 78%, transparent) 50%,
color-mix(in srgb, var(--tone-7) 65%, transparent) 80%,
transparent 100%
);
filter: blur(1.6px);
opacity: 0.95;
}
@keyframes meteor-title-fall {
0% {
transform: translate3d(64px, -120px, 0) rotate(300deg) scaleX(0.82);
opacity: 0;
}
9% {
opacity: 0.9;
}
58% {
opacity: 0.62;
}
82% {
opacity: 0.28;
}
100% {
transform: translate3d(-146px, var(--meteor-distance, 340px), 0) rotate(300deg) scaleX(0.96);
opacity: 0;
}
}
.meteor-title-streak {
position: absolute;
top: -18%;
width: 56px;
height: 1.2px;
border-radius: 999px;
background: linear-gradient(
90deg,
color-mix(in srgb, var(--tone-9) 0%, transparent) 0%,
color-mix(in srgb, var(--gold-200) 56%, transparent) 30%,
color-mix(in srgb, var(--gold-400) 72%, transparent) 55%,
color-mix(in srgb, var(--tone-9) 60%, transparent) 100%
);
box-shadow:
0 0 10px color-mix(in srgb, var(--gold-400) 44%, transparent),
0 0 20px color-mix(in srgb, var(--gold-200) 34%, transparent),
0 0 28px color-mix(in srgb, var(--tone-9) 20%, transparent);
transform-origin: right center;
transform: translate3d(64px, -120px, 0) rotate(300deg) scaleX(0.82);
animation-name: meteor-title-fall;
animation-delay: -2s;
animation-duration: 4.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
will-change: transform, opacity;
}
.meteor-title-streak-1 {
left: 2%;
--meteor-distance: 320px;
animation-delay: -0.6s;
animation-duration: 4.1s;
}
.meteor-title-streak-2 {
left: 9%;
--meteor-distance: 360px;
animation-delay: -1.7s;
animation-duration: 4.8s;
}
.meteor-title-streak-3 {
left: 15%;
--meteor-distance: 340px;
animation-delay: -2.9s;
animation-duration: 4.3s;
}
.meteor-title-streak-4 {
left: 22%;
--meteor-distance: 390px;
animation-delay: -3.8s;
animation-duration: 5.1s;
}
.meteor-title-streak-5 {
left: 29%;
--meteor-distance: 330px;
animation-delay: -1.2s;
animation-duration: 4.2s;
}
.meteor-title-streak-6 {
left: 36%;
--meteor-distance: 370px;
animation-delay: -2.4s;
animation-duration: 4.9s;
}
.meteor-title-streak-7 {
left: 43%;
--meteor-distance: 350px;
animation-delay: -3.5s;
animation-duration: 4.6s;
}
.meteor-title-streak-8 {
left: 50%;
--meteor-distance: 400px;
animation-delay: -0.9s;
animation-duration: 5.2s;
}
.meteor-title-streak-9 {
left: 57%;
--meteor-distance: 335px;
animation-delay: -2.1s;
animation-duration: 4.4s;
}
.meteor-title-streak-10 {
left: 64%;
--meteor-distance: 375px;
animation-delay: -3.1s;
animation-duration: 5s;
}
.meteor-title-streak-11 {
left: 71%;
--meteor-distance: 345px;
animation-delay: -1.4s;
animation-duration: 4.5s;
}
.meteor-title-streak-12 {
left: 78%;
--meteor-distance: 385px;
animation-delay: -2.8s;
animation-duration: 5.1s;
}
.meteor-title-streak-13 {
left: 84%;
--meteor-distance: 325px;
animation-delay: -3.7s;
animation-duration: 4.2s;
}
.meteor-title-streak-14 {
left: 90%;
--meteor-distance: 365px;
animation-delay: -1.9s;
animation-duration: 4.8s;
}
.meteor-title-streak-15 {
left: 95%;
--meteor-distance: 340px;
animation-delay: -2.6s;
animation-duration: 4.6s;
}
.meteor-title-streak-16 {
left: 98%;
--meteor-distance: 380px;
animation-delay: -3.3s;
animation-duration: 5.2s;
}
Reference in New Issue Copy Permalink