File size: 3,072 Bytes
5558a30
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Space+Grotesk:wght@400;500;700&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color: #0f172a;
  background:
    radial-gradient(circle at top left, rgba(191, 162, 113, 0.12), transparent 26%),
    radial-gradient(circle at top right, rgba(74, 97, 86, 0.08), transparent 24%),
    linear-gradient(180deg, #faf7f1 0%, #f5f2eb 48%, #eef1f3 100%);
  font-family: "Space Grotesk", sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 1280px;
  min-height: 100vh;
  overflow-x: auto;
  background:
    radial-gradient(circle at 12% 10%, rgba(190, 140, 80, 0.12), transparent 22%),
    radial-gradient(circle at 88% 4%, rgba(73, 96, 85, 0.09), transparent 18%),
    linear-gradient(180deg, #faf7f1 0%, #f5f2eb 48%, #eef1f3 100%);
}

#root {
  min-height: 100vh;
}

body.has-premium-cursor,
body.has-premium-cursor a,
body.has-premium-cursor button,
body.has-premium-cursor input,
body.has-premium-cursor textarea,
body.has-premium-cursor select,
body.has-premium-cursor label,
body.has-premium-cursor summary {
  cursor: none;
}

.panel {
  @apply rounded-[1.6rem] border border-ink/10 bg-white/80 shadow-[0_20px_50px_rgba(15,23,42,0.045)] backdrop-blur;
}

.section-title {
  @apply font-display text-[2rem] leading-tight text-ink;
}

.text-readable {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.headline-balance {
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.premium-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 140ms ease;
}

.premium-cursor.is-visible {
  opacity: 1;
}

.premium-cursor__aura,
.premium-cursor__ring,
.premium-cursor__core {
  position: fixed;
  left: 0;
  top: 0;
  border-radius: 9999px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  transition:
    opacity 180ms ease,
    box-shadow 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease;
}

.premium-cursor__aura {
  height: 88px;
  width: 88px;
  background:
    radial-gradient(circle, rgba(184, 154, 102, 0.26) 0%, rgba(184, 154, 102, 0.12) 36%, rgba(184, 154, 102, 0) 72%);
  opacity: 0.72;
  filter: blur(14px);
}

.premium-cursor__ring {
  height: 30px;
  width: 30px;
  border: 1.5px solid rgba(22, 30, 43, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.22) 100%);
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(6px);
}

.premium-cursor__core {
  height: 7px;
  width: 7px;
  background: linear-gradient(135deg, #101827 0%, #3a2f1f 100%);
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, 0.38),
    0 10px 22px rgba(15, 23, 42, 0.2);
}

img {
  display: block;
  max-width: 100%;
}

.recharts-wrapper:focus,
.recharts-surface:focus {
  outline: none;
}