react_portfolio/COLOR_REFERENCE.css at main · pmarti9/react_portfolio · 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/* ============================================
   COLOR THEME REFERENCE
   Tech/Cyberpunk Portfolio Color Palette
   ============================================ */

:root {
  /* Primary Tech Colors */
  --primary-cyan: #00ffff;        /* Main accent - headings, links, nav items */
  --electric-blue: #0066ff;       /* Secondary accent - borders, lines */
  --light-cyan: #4df3ff;          /* Body text, lighter elements */
  --deep-purple: #8800ff;         /* Accent highlights */

  /* Background Colors */
  --dark-navy: #0a0a1a;           /* Primary background */
  --dark-purple: #1a0033;         /* Gradient accents */

  /* Glow Effects (with alpha) */
  --cyan-glow-light: rgba(0, 255, 255, 0.3);
  --cyan-glow-medium: rgba(0, 255, 255, 0.5);
  --cyan-glow-strong: rgba(0, 255, 255, 0.8);
  --blue-glow: rgba(0, 102, 255, 0.3);

  /* Glass Morphism Backgrounds */
  --glass-bg-strong: rgba(10, 10, 26, 0.95);
  --glass-bg-medium: rgba(10, 10, 26, 0.85);
  --glass-bg-light: rgba(10, 10, 26, 0.7);

  /* Animation Timings */
  --transition-fast: 0.2s;
  --transition-normal: 0.3s;
  --transition-slow: 0.6s;
  --animation-short: 0.6s;
  --animation-medium: 0.8s;
  --animation-long: 1.2s;
}

/* ============================================
   USAGE EXAMPLES
   ============================================ */

/* Example: Glowing Button */
.glow-button {
  background: var(--glass-bg-medium);
  border: 1px solid var(--primary-cyan);
  color: var(--primary-cyan);
  box-shadow: 0 0 20px var(--cyan-glow-light);
  transition: all var(--transition-normal) ease;
}

.glow-button:hover {
  background: var(--glass-bg-light);
  box-shadow: 0 0 30px var(--cyan-glow-medium);
  transform: scale(1.05);
}

/* Example: Neon Text */
.neon-text {
  color: var(--primary-cyan);
  text-shadow:
    0 0 10px var(--cyan-glow-medium),
    0 0 20px var(--blue-glow);
}

/* Example: Glass Card */
.glass-card {
  background: var(--glass-bg-medium);
  backdrop-filter: blur(10px);
  border: 1px solid var(--cyan-glow-light);
  box-shadow:
    0 0 30px var(--cyan-glow-light),
    inset 0 0 30px var(--blue-glow);
}

/* ============================================
   COLOR PSYCHOLOGY
   ============================================ */

/*
  Cyan (#00ffff):
  - Technology, innovation, digital
  - High energy, attention-grabbing
  - Modern and futuristic
  - Use for: Primary actions, headings, highlights

  Electric Blue (#0066ff):
  - Trust, professionalism
  - Depth and sophistication
  - Cool and calming
  - Use for: Secondary elements, connections, borders

  Dark Navy (#0a0a1a):
  - Professional, serious
  - Creates contrast for bright elements
  - Depth and space
  - Use for: Backgrounds, containers

  Light Cyan (#4df3ff):
  - Softer, more readable
  - Friendly and approachable
  - Less intense than primary cyan
  - Use for: Body text, descriptions
*/

/* ============================================
   ACCESSIBILITY NOTES
   ============================================ */

/*
  Color Contrast Ratios (WCAG 2.1):

  NOTE: The ratios below are computed against pure backgrounds.
  In practice, the app layers translucent cyan-tinted glass backgrounds
  (rgba with cyan hue), cyan glow text-shadows, and gradient backgrounds
  mixing #0a0a1a with #1a0033. The effective contrast on rendered pages
  may be lower than these theoretical values.

  Theoretical ratios (pure #0a0a1a background):
  - Light Cyan (#4df3ff) on Dark Navy (#0a0a1a): 12.5:1 (AAA)
  - Primary Cyan (#00ffff) on Dark Navy (#0a0a1a): 14.8:1 (AAA)
  - Electric Blue (#0066ff) on Dark Navy (#0a0a1a): 7.2:1 (AA)

  RECOMMENDATION: Verify actual contrast ratios on rendered pages using
  browser DevTools or accessibility testing tools, especially for text
  over glass-morphism backgrounds with backdrop-filter effects.

  Text-shadow glows are used throughout to improve readability on
  complex layered backgrounds.
*/