soroush.asadi
9901c5e6d4
- audio: default background music is now the santoor track (calm Persian), rebuilt as a real plucked-santoor loop — fast metallic attack, shimmer overtones, soft tonic drone, longer Dastgah-e-Shur phrase - site: marketing logo is now the app's card-fan icon (Logo.tsx + icon.svg); hero features the big logo with gold halo, floating suit motifs, and polished section dividers Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
115 lines
2.6 KiB
CSS
115 lines
2.6 KiB
CSS
@import "tailwindcss";
|
|
@import "@fontsource-variable/vazirmatn";
|
|
|
|
:root {
|
|
--navy-950: #070b18;
|
|
--navy-900: #0b1226;
|
|
--navy-800: #111a33;
|
|
--gold: #d4af37;
|
|
--gold-soft: #e7c873;
|
|
--teal: #2dd4bf;
|
|
--cream: #f5efe0;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-navy-950: var(--navy-950);
|
|
--color-navy-900: var(--navy-900);
|
|
--color-navy-800: var(--navy-800);
|
|
--color-gold: var(--gold);
|
|
--color-gold-soft: var(--gold-soft);
|
|
--color-teal: var(--teal);
|
|
--color-cream: var(--cream);
|
|
--font-sans: "Vazirmatn Variable", ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: radial-gradient(120% 120% at 50% 0%, #0e1730 0%, var(--navy-950) 60%);
|
|
color: var(--cream);
|
|
font-family: "Vazirmatn Variable", ui-sans-serif, system-ui, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
[dir="rtl"] {
|
|
font-family: "Vazirmatn Variable", ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
/* Utility helpers */
|
|
.gold-text {
|
|
background: linear-gradient(180deg, var(--gold-soft), var(--gold));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
.glass {
|
|
background: rgba(17, 26, 51, 0.55);
|
|
border: 1px solid rgba(212, 175, 55, 0.18);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.btn-gold {
|
|
background: linear-gradient(180deg, var(--gold-soft), var(--gold));
|
|
color: #1a1206;
|
|
font-weight: 800;
|
|
}
|
|
.btn-gold:hover {
|
|
filter: brightness(1.06);
|
|
}
|
|
|
|
.felt {
|
|
background:
|
|
radial-gradient(120% 120% at 50% 0%, rgba(45, 212, 191, 0.08), transparent 60%),
|
|
radial-gradient(80% 80% at 80% 90%, rgba(212, 175, 55, 0.06), transparent 60%);
|
|
}
|
|
|
|
.card-pattern {
|
|
background-image:
|
|
linear-gradient(45deg, rgba(212, 175, 55, 0.04) 25%, transparent 25%),
|
|
linear-gradient(-45deg, rgba(212, 175, 55, 0.04) 25%, transparent 25%);
|
|
background-size: 22px 22px;
|
|
}
|
|
|
|
/* Gentle float for the hero logo. */
|
|
@keyframes float-y {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-12px); }
|
|
}
|
|
.float-y {
|
|
animation: float-y 5.5s ease-in-out infinite;
|
|
}
|
|
|
|
/* Soft gold halo behind the hero logo. */
|
|
.gold-halo {
|
|
background: radial-gradient(circle, rgba(212, 175, 55, 0.28), transparent 62%);
|
|
filter: blur(8px);
|
|
}
|
|
|
|
/* Card-suit accent for hero/section glyphs. */
|
|
.suit {
|
|
color: var(--gold);
|
|
opacity: 0.16;
|
|
user-select: none;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* Thin gold hairline divider. */
|
|
.rule-gold {
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.float-y { animation: none; }
|
|
html { scroll-behavior: auto; }
|
|
}
|