|
9 | 9 | <meta name="description" content="Windows XP Experience"> |
10 | 10 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
11 | 11 |
|
12 | | - <!-- Font --> |
13 | | - <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@300;400;500;600&display=swap" rel="stylesheet"> |
| 12 | + <!-- Google Sans Font --> |
| 13 | + <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600&display=swap" rel="stylesheet"> |
14 | 14 |
|
15 | 15 | <style> |
16 | 16 | :root { |
17 | 17 | --bg: radial-gradient(1200px at top, #1b1f3b, #0a0c16); |
18 | 18 | --glass: rgba(255, 255, 255, 0.07); |
19 | 19 | --border: rgba(255, 255, 255, 0.18); |
20 | 20 | --glow: rgba(120, 140, 255, 0.45); |
| 21 | + --header-text: #E8EAED; |
| 22 | + --loader-text: #FFFFFF; |
| 23 | + --loader-bg: rgba(33, 33, 33, 0.85); |
21 | 24 | } |
22 | 25 |
|
23 | 26 | * { |
|
62 | 65 | height: 56px; |
63 | 66 | display: flex; |
64 | 67 | align-items: center; |
65 | | - padding: 0 20px; |
| 68 | + padding: 0 24px; |
66 | 69 | background: linear-gradient( |
67 | 70 | to bottom, |
68 | | - rgba(0,0,0,0.35), |
| 71 | + rgba(0,0,0,0.25), |
69 | 72 | rgba(0,0,0,0) |
70 | 73 | ); |
71 | 74 | z-index: 10; |
72 | 75 | pointer-events: none; |
73 | 76 | } |
74 | 77 |
|
75 | 78 | header span { |
76 | | - font-size: 14px; |
77 | | - letter-spacing: 0.14em; |
78 | | - color: rgba(255,255,255,0.85); |
| 79 | + font-size: 16px; /* Material subtitle1 size */ |
| 80 | + font-weight: 500; /* Medium */ |
| 81 | + letter-spacing: 0.15px; |
| 82 | + color: var(--header-text); |
79 | 83 | } |
80 | 84 |
|
81 | 85 | iframe { |
|
90 | 94 | display: flex; |
91 | 95 | align-items: center; |
92 | 96 | justify-content: center; |
93 | | - font-size: 13px; |
94 | | - letter-spacing: 0.2em; |
95 | | - color: rgba(255,255,255,0.8); |
96 | | - background: linear-gradient( |
97 | | - 180deg, |
98 | | - rgba(0,0,0,0.5), |
99 | | - rgba(0,0,0,0.8) |
100 | | - ); |
| 97 | + font-size: 14px; /* Material body2 size */ |
| 98 | + font-weight: 500; /* Medium for visibility */ |
| 99 | + letter-spacing: 0.1em; |
| 100 | + color: var(--loader-text); |
| 101 | + background: var(--loader-bg); |
| 102 | + border-radius: 12px; |
101 | 103 | transition: opacity 0.6s ease; |
102 | 104 | z-index: 20; |
103 | 105 | pointer-events: none; |
|
0 commit comments