Spaces:
Running
Running
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%);
}
|