|
4 | 4 | /* ============================================ |
5 | 5 | Google Font Import for Hero Title |
6 | 6 | ============================================ */ |
7 | | -@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700&display=swap'); |
| 7 | +@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;700&display=swap'); |
8 | 8 |
|
9 | 9 | /* ============================================ |
10 | 10 | PyData Theme Color Overrides (purple theme) |
@@ -110,21 +110,71 @@ html[data-theme="dark"] { |
110 | 110 | } |
111 | 111 |
|
112 | 112 | .hero-title { |
113 | | - font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
| 113 | + font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
114 | 114 | font-size: 3.5rem; |
115 | | - font-weight: 700; |
| 115 | + font-weight: 300; |
116 | 116 | color: #ffffff; |
117 | | - margin: 0 0 1rem 0; |
118 | | - letter-spacing: -0.02em; |
| 117 | + margin: 0 0 3.5rem 0; |
| 118 | + letter-spacing: 0.25em; |
| 119 | + text-transform: uppercase; |
119 | 120 | text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); |
120 | 121 | } |
121 | 122 |
|
122 | 123 | .hero-tagline { |
123 | | - font-size: 1.75rem; |
124 | | - font-weight: 600; |
125 | | - color: #ffffff; |
| 124 | + font-size: 1.25rem; |
| 125 | + font-weight: 400; |
| 126 | + color: rgba(255, 255, 255, 0.9); |
126 | 127 | margin: 0 0 0.5rem 0; |
127 | | - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); |
| 128 | + letter-spacing: 0.05em; |
| 129 | + font-style: italic; |
| 130 | +} |
| 131 | + |
| 132 | +/* ============================================ |
| 133 | + Back to Top Button |
| 134 | + ============================================ */ |
| 135 | +.back-to-top { |
| 136 | + position: fixed; |
| 137 | + bottom: 2rem; |
| 138 | + right: 2rem; |
| 139 | + width: 44px; |
| 140 | + height: 44px; |
| 141 | + background: var(--hyperactive-primary); |
| 142 | + color: white; |
| 143 | + border: none; |
| 144 | + border-radius: 8px; |
| 145 | + cursor: pointer; |
| 146 | + display: flex; |
| 147 | + align-items: center; |
| 148 | + justify-content: center; |
| 149 | + font-size: 1.25rem; |
| 150 | + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); |
| 151 | + opacity: 0; |
| 152 | + visibility: hidden; |
| 153 | + transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease; |
| 154 | + z-index: 1000; |
| 155 | +} |
| 156 | + |
| 157 | +.back-to-top.visible { |
| 158 | + opacity: 1; |
| 159 | + visibility: visible; |
| 160 | +} |
| 161 | + |
| 162 | +.back-to-top:hover { |
| 163 | + transform: translateY(-3px); |
| 164 | + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); |
| 165 | +} |
| 166 | + |
| 167 | +html[data-theme="dark"] .back-to-top { |
| 168 | + background: var(--hyperactive-secondary); |
| 169 | +} |
| 170 | + |
| 171 | +@media (max-width: 768px) { |
| 172 | + .back-to-top { |
| 173 | + bottom: 1rem; |
| 174 | + right: 1rem; |
| 175 | + width: 40px; |
| 176 | + height: 40px; |
| 177 | + } |
128 | 178 | } |
129 | 179 |
|
130 | 180 | .hero-subtitle { |
|
0 commit comments