first commit

2026-06-03 03:59:46 +03:00
parent 5882fc12c1
commit bba389b513
30 changed files with 3153 additions and 149 deletions
@@ -1,26 +1,157 @@
@import "tailwindcss";

-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@theme {
+  --color-sand: #FFF8EE;
+  --color-sandy: #F5E6CC;
+  --color-coral: #FF5A36;
+  --color-coral-light: #FF7A5A;
+  --color-amber: #FFA827;
+  --color-gold: #FFD166;
+  --color-aqua: #00BFA5;
+  --color-cyan: #00E5FF;
+  --color-midnight: #080D18;
+  --color-deep: #0E1B30;
+  --color-navy: #1A2F4A;
+
+  /* backward compat */
+  --color-cream: #FFF8EE;
+  --color-beige: #F5E6CC;
+  --color-turquoise: #00BFA5;
+  --color-forest: #0E1B30;
+  --color-dark-brown: #080D18;
+
+  --font-heading: var(--font-marcellus);
+  --font-body: var(--font-marcellus);
 }

-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
+@layer base {
+  body {
+    @apply bg-sand text-midnight font-body antialiased;
+  }

-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-heading;
  }
 }

-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+html {
+  scroll-behavior: smooth;
+}
+
+/* ── CSS custom property for animated border ──── */
+@property --border-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+/* ── Animated conic border classes ─────────────── */
+.border-spin-cyan {
+  background:
+    linear-gradient(#0E1B30, #0E1B30) padding-box,
+    conic-gradient(from var(--border-angle), #00E5FF 0deg, transparent 70deg, transparent 290deg, #00E5FF 360deg) border-box;
+  border: 1px solid transparent;
+  animation: border-rotate 3s linear infinite;
+}
+
+.border-spin-coral {
+  background:
+    linear-gradient(#0E1B30, #0E1B30) padding-box,
+    conic-gradient(from var(--border-angle), #FF5A36 0deg, transparent 70deg, transparent 290deg, #FF5A36 360deg) border-box;
+  border: 1px solid transparent;
+  animation: border-rotate 4s linear infinite;
+}
+
+.border-spin-amber {
+  background:
+    linear-gradient(#0E1B30, #0E1B30) padding-box,
+    conic-gradient(from var(--border-angle), #FFA827 0deg, transparent 70deg, transparent 290deg, #FFA827 360deg) border-box;
+  border: 1px solid transparent;
+  animation: border-rotate 5s linear infinite;
+}
+
+/* ── Keyframes ─────────────────────────────────── */
+
+@keyframes shimmer {
+  0%   { background-position: -400% center; }
+  100% { background-position:  400% center; }
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0px); }
+  50%       { transform: translateY(-16px); }
+}
+
+@keyframes border-rotate {
+  to { --border-angle: 360deg; }
+}
+
+@keyframes eq-bar {
+  0%, 100% { transform: scaleY(0.3); }
+  50%       { transform: scaleY(1);   }
+}
+
+@keyframes grain {
+  0%, 100% { transform: translate(0,    0   ); }
+  10%       { transform: translate(-5%,  -5% ); }
+  20%       { transform: translate(-10%,  5% ); }
+  30%       { transform: translate(5%,  -10%); }
+  40%       { transform: translate(-5%,  15%); }
+  50%       { transform: translate(-10%,  5%); }
+  60%       { transform: translate(15%,   0% ); }
+  70%       { transform: translate(0%,   10%); }
+  80%       { transform: translate(-15%,  0% ); }
+  90%       { transform: translate(10%,   5%); }
+}
+
+/* ── Utility classes ───────────────────────────── */
+
+.shimmer-text {
+  background: linear-gradient(
+    90deg,
+    #ffffff 0%,
+    #ffffff 35%,
+    #FFD166 45%,
+    #FF5A36 50%,
+    #FFD166 55%,
+    #ffffff 65%,
+    #ffffff 100%
+  );
+  background-size: 400% auto;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: shimmer 4s linear infinite;
+}
+
+.gradient-text {
+  background: linear-gradient(135deg, #FF5A36, #FFA827, #00BFA5);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.gradient-text-warm {
+  background: linear-gradient(135deg, #FF5A36, #FFA827);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.gradient-text-cool {
+  background: linear-gradient(135deg, #00E5FF, #00BFA5);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.grain-overlay::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1;
+  opacity: 0.045;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  animation: grain 8s steps(10) infinite;
 }