deveric/global.css at main · ericgitangu/deveric · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  .text-edge-outline {
    -webkit-text-stroke: 1px rgba(255,255,255,0.3);
  }
  .html {
    scroll-behavior: smooth;
  }
  .links {
    text-color: #94a3b8;
    text-size: 1.2rem;
  }
}

/* Shining text animation for navigation hints - like twinkling stars */
@keyframes text-shine {
  0%, 100% {
    opacity: 0.5;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.3);
    color: rgb(161, 161, 170);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 8px rgba(250, 204, 21, 0.8), 0 0 16px rgba(250, 204, 21, 0.5), 0 0 24px rgba(255, 255, 255, 0.3);
    color: rgb(250, 250, 250);
  }
}

.animate-text-shine {
  animation: text-shine 1.5s ease-in-out infinite;
}

/* vCard tab entrance nudge - draws attention then settles */
@keyframes vcard-nudge {
  0% { transform: translateX(-100%) translateY(-50%); opacity: 0; }
  40% { transform: translateX(8px) translateY(-50%); opacity: 1; }
  60% { transform: translateX(8px) translateY(-50%); }
  100% { transform: translateX(0) translateY(-50%); opacity: 1; }
}
@keyframes vcard-nudge-mobile {
  0% { transform: translateY(80px) scale(0.8); opacity: 0; }
  40% { transform: translateY(-6px) scale(1.05); opacity: 1; }
  60% { transform: translateY(-6px) scale(1.05); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@media (min-width: 768px) {
  .vcard-entrance { animation: vcard-nudge 1.2s ease-out 2s both; }
}
@media (max-width: 767px) {
  .vcard-entrance { animation: vcard-nudge-mobile 1s ease-out 2s both; }
}