|
40 | 40 | } |
41 | 41 |
|
42 | 42 | .site-beta-tag { |
43 | | - @apply inline-flex items-center px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider rounded-full border-0 cursor-pointer; |
44 | | - @apply text-sky-700 bg-sky-50 ring-1 ring-sky-200/80 transition-colors; |
| 43 | + @apply relative ml-0.5 border-0 bg-transparent p-0 text-[0.5em] font-bold uppercase tracking-wide text-sky-600 cursor-pointer transition-colors leading-none; |
| 44 | + vertical-align: super; |
| 45 | + } |
| 46 | + |
| 47 | + .site-beta-tag::before { |
| 48 | + content: ''; |
| 49 | + position: absolute; |
| 50 | + inset: -8px -6px; |
45 | 51 | } |
46 | 52 |
|
47 | 53 | .site-beta-tag:hover { |
48 | | - @apply bg-sky-100 text-sky-800; |
| 54 | + @apply text-sky-700; |
49 | 55 | } |
50 | 56 |
|
51 | 57 | .site-beta-tag--static { |
52 | | - @apply cursor-default; |
| 58 | + @apply cursor-default text-slate-500; |
53 | 59 | } |
54 | 60 |
|
55 | 61 | .site-beta-tag--static:hover { |
56 | | - @apply bg-sky-50 text-sky-700; |
| 62 | + @apply text-slate-500; |
57 | 63 | } |
58 | 64 |
|
59 | 65 | .home-hero { |
|
107 | 113 | } |
108 | 114 |
|
109 | 115 | .home-hero__dot { |
110 | | - @apply h-2 w-2 rounded-full bg-slate-300 transition-all duration-300 hover:bg-slate-400; |
| 116 | + @apply relative inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-full border-0 bg-transparent p-0 cursor-pointer transition-colors; |
| 117 | + } |
| 118 | + |
| 119 | + .home-hero__dot::after { |
| 120 | + content: ''; |
| 121 | + @apply block h-2 w-2 rounded-full bg-slate-400 transition-all duration-300; |
| 122 | + } |
| 123 | + |
| 124 | + .home-hero__dot:hover::after { |
| 125 | + @apply bg-slate-500; |
| 126 | + } |
| 127 | + |
| 128 | + .home-hero__dot--active::after { |
| 129 | + @apply h-2 w-6 bg-slate-800; |
111 | 130 | } |
112 | 131 |
|
113 | | - .home-hero__dot--active { |
114 | | - @apply w-6 bg-slate-800 hover:bg-slate-800; |
| 132 | + .home-hero__dot--active:hover::after { |
| 133 | + @apply bg-slate-800; |
115 | 134 | } |
116 | 135 |
|
117 | 136 | .home-hero__nav-btn { |
118 | | - @apply flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-slate-200/90 bg-white/90 text-slate-600 shadow-sm transition-colors; |
| 137 | + @apply flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-slate-200/90 bg-white/90 text-slate-600 shadow-sm transition-colors; |
119 | 138 | @apply hover:border-slate-300 hover:bg-white hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-brand/20; |
120 | 139 | } |
121 | 140 |
|
|
168 | 187 | @apply inline; |
169 | 188 | } |
170 | 189 |
|
| 190 | + /* Phosphor SVG sprite icons */ |
| 191 | + .ph-icon { |
| 192 | + display: inline-block; |
| 193 | + width: 1.25em; |
| 194 | + height: 1.25em; |
| 195 | + flex-shrink: 0; |
| 196 | + fill: currentColor; |
| 197 | + vertical-align: -0.125em; |
| 198 | + } |
| 199 | + |
| 200 | + .search-palette__result-icon .ph-icon { |
| 201 | + width: 1.25rem; |
| 202 | + height: 1.25rem; |
| 203 | + } |
| 204 | + |
171 | 205 | /* —— Search command palette (⌘K) —— */ |
172 | 206 | .search-trigger { |
173 | 207 | @apply relative z-10 w-full max-w-lg mx-auto flex items-center gap-3 px-4 py-3.5 md:py-4 bg-white/90 border border-gray-200/90 rounded-2xl shadow-md shadow-slate-200/50 text-left cursor-pointer transition-all; |
|
0 commit comments