|
20 | 20 | body { |
21 | 21 | background-color: var(--color-background); |
22 | 22 | color: var(--color-foreground); |
23 | | - font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, |
| 23 | + font-family: |
| 24 | + var(--font-inter), |
| 25 | + ui-sans-serif, |
| 26 | + system-ui, |
| 27 | + -apple-system, |
| 28 | + Segoe UI, |
| 29 | + Roboto, |
| 30 | + Helvetica, |
| 31 | + Arial, |
24 | 32 | sans-serif; |
25 | 33 | } |
26 | 34 | } |
|
30 | 38 | } |
31 | 39 |
|
32 | 40 | @utility font-mono-tech { |
33 | | - font-family: var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; |
| 41 | + font-family: |
| 42 | + var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, |
| 43 | + Consolas, monospace; |
34 | 44 | } |
35 | 45 |
|
36 | 46 | @layer components { |
37 | 47 | .retro-hero { |
38 | 48 | position: relative; |
39 | 49 | overflow: hidden; |
40 | | - background: radial-gradient(circle at 20% 20%, rgba(30, 30, 30, 0.2), transparent 40%), |
41 | | - radial-gradient(circle at 80% 70%, rgba(30, 30, 30, 0.15), transparent 45%), var(--color-background); |
| 50 | + background: |
| 51 | + radial-gradient( |
| 52 | + circle at 20% 20%, |
| 53 | + rgba(30, 30, 30, 0.2), |
| 54 | + transparent 40% |
| 55 | + ), |
| 56 | + radial-gradient( |
| 57 | + circle at 80% 70%, |
| 58 | + rgba(30, 30, 30, 0.15), |
| 59 | + transparent 45% |
| 60 | + ), |
| 61 | + var(--color-background); |
42 | 62 | } |
43 | 63 |
|
44 | 64 | .blueprint-grid { |
45 | | - background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), |
| 65 | + background-image: |
| 66 | + linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), |
46 | 67 | linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); |
47 | 68 | background-size: 72px 72px; |
48 | 69 | opacity: 0.32; |
49 | 70 | } |
50 | 71 |
|
51 | 72 | .blueprint-subgrid { |
52 | | - background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), |
| 73 | + background-image: |
| 74 | + linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), |
53 | 75 | linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); |
54 | 76 | background-size: 24px 24px; |
55 | 77 | opacity: 0.2; |
|
59 | 81 | position: absolute; |
60 | 82 | inset-inline: 0; |
61 | 83 | height: 2px; |
62 | | - background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent); |
| 84 | + background: linear-gradient( |
| 85 | + to right, |
| 86 | + transparent, |
| 87 | + rgba(255, 255, 255, 0.3), |
| 88 | + transparent |
| 89 | + ); |
63 | 90 | animation: scan 8s linear infinite; |
64 | 91 | } |
65 | 92 |
|
|
0 commit comments