703 lines
19 KiB
CSS
703 lines
19 KiB
CSS
@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;
|
||
} |