File size: 5,695 Bytes
fb12607
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
/* Single-treatment decorative backdrops. Keep these low-contrast and isolated. */
.texture-surface {
  background-image: var(--texture-image) !important;
  background-repeat: no-repeat !important;
  background-position: top right !important;
  background-size: min(32rem, 60vw) 24rem !important;
  background-blend-mode: soft-light !important;
}

/* Full-page tiled textures — overrides the base no-repeat/corner placement
   so small repeating patterns (felt, paper, graphite dots, etc.) tile across
   the entire background. Use alongside .texture-surface and a texture variant. */
.texture-tiled {
  background-repeat: repeat !important;
  background-position: top left !important;
  background-attachment: fixed !important;
  background-size: auto !important;
}

.texture-surface--felt {
  --texture-image: radial-gradient(
    circle,
    rgb(232 219 193 / 9%) 0.7px,
    transparent 1px
  );
  background-size: 7px 7px !important;
}

.texture-surface--fluted-glass {
  --texture-image: repeating-linear-gradient(
    90deg,
    rgb(255 255 255 / 5%) 0 2px,
    transparent 2px 12px
  );
}

.texture-surface--thermal-gradients {
  --texture-image:
    radial-gradient(ellipse at 74% 24%, rgb(221 130 62 / 16%), transparent 48%),
    radial-gradient(ellipse at 44% 88%, rgb(109 91 164 / 12%), transparent 55%);
}

.texture-surface--water-ripples {
  --texture-image: repeating-radial-gradient(
    ellipse at 78% 24%,
    transparent 0 10px,
    rgb(107 190 190 / 10%) 11px 12px,
    transparent 13px 22px
  );
}

.texture-surface--speckled-graphite {
  --texture-image: radial-gradient(
    circle,
    rgb(236 226 207 / 13%) 0.8px,
    transparent 1.1px
  );
  background-size: 11px 11px !important;
}

.texture-surface--single-hue-landscapes {
  --texture-image:
    linear-gradient(
      160deg,
      transparent 55%,
      rgb(145 177 165 / 12%) 55% 67%,
      transparent 67%
    ),
    linear-gradient(
      18deg,
      transparent 62%,
      rgb(145 177 165 / 9%) 62% 74%,
      transparent 74%
    );
}

.texture-surface--blueprint-grids {
  --texture-image:
    linear-gradient(rgb(96 164 203 / 9%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(96 164 203 / 9%) 1px, transparent 1px);
  background-size: 18px 18px !important;
}

.texture-surface--halftone {
  --texture-image: radial-gradient(
    circle,
    rgb(217 177 109 / 20%) 1px,
    transparent 1.4px
  );
  background-size: 8px 8px !important;
}

.texture-surface--grainy-gradients {
  --texture-image:
    radial-gradient(ellipse at 78% 22%, rgb(206 134 93 / 14%), transparent 52%),
    radial-gradient(circle, rgb(236 226 207 / 8%) 0.55px, transparent 0.9px);
  background-size:
    auto,
    4px 4px !important;
}

.texture-surface--grass-texture {
  --texture-image: repeating-linear-gradient(
    108deg,
    transparent 0 8px,
    rgb(129 164 116 / 8%) 9px 10px,
    transparent 11px 17px
  );
}

.texture-surface--dithered-images {
  --texture-image: repeating-conic-gradient(
    rgb(232 219 193 / 9%) 0% 25%,
    transparent 0% 50%
  );
  background-size: 6px 6px !important;
}

.texture-surface--paper-texture {
  --texture-image: radial-gradient(
    circle,
    rgb(190 164 125 / 10%) 0.6px,
    transparent 1px
  );
  background-size: 5px 5px !important;
}

.texture-surface--contour-lines {
  --texture-image: repeating-radial-gradient(
    ellipse at 82% 18%,
    transparent 0 13px,
    rgb(179 154 203 / 9%) 14px 15px,
    transparent 16px 27px
  );
}

.texture-surface--cloud-sky {
  --texture-image:
    radial-gradient(
      ellipse at 70% 28%,
      rgb(166 193 207 / 15%),
      transparent 35%
    ),
    radial-gradient(ellipse at 93% 48%, rgb(166 193 207 / 10%), transparent 27%);
}

.texture-surface--pixel-mosaics {
  --texture-image: repeating-conic-gradient(
    from 0deg,
    rgb(174 144 114 / 8%) 0% 25%,
    transparent 0% 50%
  );
  background-size: 16px 16px !important;
}

.texture-surface--lens-distortion {
  --texture-image: radial-gradient(
    ellipse at 74% 32%,
    transparent 0 18%,
    rgb(178 158 194 / 10%) 19% 20%,
    transparent 21% 31%,
    rgb(178 158 194 / 7%) 32% 33%,
    transparent 34%
  );
}

.texture-surface--stippled-gradients {
  --texture-image: radial-gradient(
    circle,
    rgb(205 157 105 / 12%) 0.75px,
    transparent 1px
  );
  background-size: 5px 5px !important;
}

.texture-surface--square-dot-grids {
  --texture-image: radial-gradient(
    circle,
    rgb(135 171 170 / 15%) 1px,
    transparent 1.2px
  );
  background-size: 14px 14px !important;
}

.texture-surface--blurred-photos {
  --texture-image:
    radial-gradient(ellipse at 78% 18%, rgb(141 107 88 / 17%), transparent 34%),
    radial-gradient(ellipse at 94% 48%, rgb(110 136 125 / 13%), transparent 30%);
}

.texture-surface--iridescent-shapes {
  --texture-image:
    radial-gradient(
      ellipse at 82% 22%,
      rgb(171 134 196 / 15%),
      transparent 29%
    ),
    radial-gradient(ellipse at 65% 58%, rgb(97 164 163 / 11%), transparent 32%);
}

.texture-surface--ascii-and-pixels {
  --texture-image:
    repeating-linear-gradient(
      0deg,
      transparent 0 7px,
      rgb(138 174 158 / 9%) 7px 8px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 7px,
      rgb(138 174 158 / 7%) 7px 8px
    );
  background-size: 8px 8px !important;
}

/* Impressionist paintings — soft, blended color washes like canvas strokes */
.texture-surface--impressionist-paintings {
  --texture-image:
    radial-gradient(ellipse at 20% 30%, rgb(167 139 250 / 10%), transparent 40%),
    radial-gradient(ellipse at 80% 70%, rgb(34 211 238 / 8%), transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgb(251 146 60 / 6%), transparent 60%);
}