|
44 | 44 | left: 0; |
45 | 45 | right: 0; |
46 | 46 | bottom: 0; |
47 | | - background-color: rgba(0, 0, 0, 0.5); |
48 | | - backdrop-filter: blur(5px); |
| 47 | + background-color: rgba(0, 0, 0, 0.7); /* Darker overlay */ |
| 48 | + backdrop-filter: blur(10px); /* Stronger blur */ |
49 | 49 | display: flex; |
50 | 50 | justify-content: center; |
51 | 51 | align-items: center; |
|
55 | 55 | } |
56 | 56 |
|
57 | 57 | .modal-content { |
58 | | - background-color: #1a202c; /* Dark Blue */ |
59 | | - padding: 20px; |
60 | | - border-radius: 8px; |
| 58 | + background-color: rgba(17, 24, 39, 0.8); /* Semi-transparent dark gray */ |
| 59 | + backdrop-filter: blur(8px); /* Glassmorphism effect */ |
| 60 | + padding: 24px; /* Increased padding */ |
| 61 | + border-radius: 12px; /* More rounded */ |
61 | 62 | max-width: 500px; |
62 | 63 | width: 100%; |
63 | 64 | color: white; |
64 | 65 | display: flex; |
65 | 66 | flex-direction: column; |
66 | 67 | gap: 20px; |
67 | | - box-shadow: inset 0 0 0 4px #4a5568; /* Inner border */ |
68 | | - font-family: 'Arvo', serif; |
69 | | - font-weight: 300; |
| 68 | + box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); /* Subtle glow shadow */ |
| 69 | + border: 1px solid rgba(255, 255, 255, 0.1); /* Thin light border */ |
| 70 | + /* font-family: 'Arvo', serif; removed */ |
70 | 71 | animation-duration: 0.3s; |
71 | 72 | animation-fill-mode: forwards; |
72 | 73 | } |
|
95 | 96 |
|
96 | 97 | .modal-header h2 { |
97 | 98 | font-size: 1.5rem; |
98 | | - font-weight: bold; |
| 99 | + /* font-weight: bold; removed */ |
| 100 | + font-family: 'Space Mono', 'JetBrains Mono', monospace; |
| 101 | + color: #f87171; /* Primary color for title */ |
99 | 102 | } |
100 | 103 |
|
101 | 104 | .close-button { |
102 | | - background-color: #374151; |
| 105 | + background-color: transparent; |
103 | 106 | border: none; |
104 | | - color: white; |
| 107 | + color: #9ca3af; /* gray-400 */ |
105 | 108 | cursor: pointer; |
106 | | - border-radius: 4px; |
107 | | - padding: 5px; |
| 109 | + border-radius: 9999px; /* fully rounded */ |
| 110 | + padding: 8px; /* Bigger click area */ |
108 | 111 | display: flex; |
109 | 112 | align-items: center; |
110 | 113 | justify-content: center; |
| 114 | + transition: all 0.2s ease-in-out; |
111 | 115 | } |
112 | 116 |
|
113 | 117 | .close-button:hover { |
114 | | - background-color: #4b5563; |
| 118 | + background-color: rgba(255, 255, 255, 0.1); /* Subtle hover effect */ |
| 119 | + color: white; |
115 | 120 | } |
116 | 121 |
|
117 | 122 | .modal-body { |
118 | 123 | display: flex; |
119 | 124 | flex-direction: column; |
120 | | - gap: 10px; |
| 125 | + gap: 15px; /* Increased gap */ |
121 | 126 | } |
122 | 127 |
|
123 | 128 | .contact-links { |
124 | 129 | display: flex; |
125 | 130 | flex-direction: column; |
126 | | - gap: 10px; |
| 131 | + gap: 15px; /* Increased gap */ |
127 | 132 | } |
128 | 133 |
|
129 | 134 | .contact-link { |
130 | 135 | display: flex; |
131 | 136 | align-items: center; |
132 | | - gap: 10px; |
133 | | - color: white; |
| 137 | + gap: 15px; /* Increased gap */ |
| 138 | + color: #e5e7eb; /* gray-200 */ |
| 139 | + background-color: rgba(26, 32, 44, 0.5); /* Semi-transparent background */ |
| 140 | + border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */ |
| 141 | + padding: 12px 16px; /* Larger padding */ |
| 142 | + border-radius: 8px; /* Rounded corners */ |
134 | 143 | text-decoration: none; |
| 144 | + transition: all 0.2s ease-in-out; |
| 145 | +} |
| 146 | + |
| 147 | +.contact-link:hover { |
| 148 | + background-color: rgba(26, 32, 44, 0.8); /* Darker on hover */ |
| 149 | + color: white; |
| 150 | + border-color: rgba(248, 113, 113, 0.4); /* Primary color accent */ |
| 151 | + transform: translateY(-2px); /* Subtle lift */ |
| 152 | +} |
| 153 | + |
| 154 | +.contact-link span { |
| 155 | + font-family: 'Space Mono', 'JetBrains Mono', monospace; |
| 156 | + font-size: 0.95rem; /* Slightly smaller for balance */ |
135 | 157 | } |
136 | 158 |
|
137 | 159 | .red-text { |
|
0 commit comments