Spaces:
Sleeping
Sleeping
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;
}
|