1<!doctype html> 2<html 3 4 lang="en" 5> 6 <head><link 7 rel="icon" 8 type="image/png" 9 href="//shop.colorsxstudios.com/cdn/shop/files/black.png?crop=center&height=32&v=1776428328&width=32" 10 > 11 12 13 14 15 16<meta charset="utf-8"> 17<meta 18 http-equiv="X-UA-Compatible" 19 content="IE=edge" 20> 21<meta 22 name="viewport" 23 content="width=device-width,initial-scale=1" 24> 25<meta 26 name="view-transition" 27 content="same-origin" 28> 29<meta 30 name="theme-color" 31 content="" 32> 33 34<meta 35 property="og:site_name" 36 content="COLORS" 37> 38<meta 39 property="og:url" 40 content="https://shop.colorsxstudios.com/" 41> 42<meta 43 property="og:title" 44 content="COLORSxSTUDIOS SHOP" 45> 46<meta 47 property="og:type" 48 content="website" 49> 50<meta 51 property="og:description" 52 content="COLORSxSTUDIOS official online store. Shop our latest and exclusive merchandise." 53><meta 54 name="twitter:card" 55 content="summary_large_image" 56> 57<meta 58 name="twitter:title" 59 content="COLORSxSTUDIOS SHOP" 60> 61<meta 62 name="twitter:description" 63 content="COLORSxSTUDIOS official online store. Shop our latest and exclusive merchandise." 64> 65 66<title> 67 COLORSxSTUDIOS SHOP 68</title> 69 70<link 71 rel="canonical" 72 href="https://shop.colorsxstudios.com/" 73> 74 75 76 <meta 77 name="description" 78 content="COLORSxSTUDIOS official online store. Shop our latest and exclusive merchandise." 79 > 80 81 82<style data-type = 'Font Faces' > 83@font-face { 84 85 font-family : 'Grotesk' ; 86 87 font-display : swap ; 88 font-weight : 400 ; 89 font-style : normal ; 90 91 src : url('//shop.colorsxstudios.com/cdn/shop/files/Font-Grotesk-400.ttf?v=1224315210106661437') format('truetype') ; 92} 93 94@font-face { 95 96 font-family : 'Grotesk' ; 97 98 font-display : swap ; 99 font-weight : 600 ; 100 font-style : normal ; 101 102 src : url('//shop.colorsxstudios.com/cdn/shop/files/Font-Grotesk-600.woff2?v=2110790360761132813') format('woff2') ; 103} 104</style> 105<link href="//shop.colorsxstudios.com/cdn/shop/t/26/assets/overflow-list.css?v=16727044177065489451776155321" as="style" rel="preload"> 106<link href="//shop.colorsxstudios.com/cdn/shop/t/26/assets/base.css?v=93015276722555026231778591553" rel="stylesheet" type="text/css" media="all" /> 107 108
109<script async crossorigin fetchpriority="high" src="/cdn/shopifycloud/importmap-polyfill/es-modules-shim.2.4.0.js"></script>
vendor: 1 bytes, line 109
109
110<script type="importmap"> 111 { 112 "imports": { 113 "@theme/overflow-list": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/overflow-list.js?v=46858356770684902511776155321", 114 "@theme/product-title": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/product-title-truncation.js?v=81744426891537421781776155318", 115 "@theme/component": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/component.js?v=184240237101443119871776155321", 116 "@theme/dialog": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/dialog.js?v=150888536568694194021776155323", 117 "@theme/events": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/events.js?v=1118589085892804011776155317", 118 "@theme/focus": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/focus.js?v=60436577539430446401776155320", 119 "@theme/morph": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/morph.js?v=104045809772310330131776155320", 120 "@theme/paginated-list": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/paginated-list.js?v=95298315036233333871776155323", 121 "@theme/performance": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/performance.js?v=171015751390534793081776155323", 122 "@theme/product-form": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/product-form.js?v=142170751179338062901776155321", 123 "@theme/recently-viewed-products": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/recently-viewed-products.js?v=94729125001750262651776155321", 124 "@theme/scrolling": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/scrolling.js?v=162288454571026455011776155323", 125 "@theme/section-renderer": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/section-renderer.js?v=123311117485513785771776155319", 126 "@theme/section-hydration": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/section-hydration.js?v=108434990705342316311776155318", 127 "@theme/money-formatting": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/money-formatting.js?v=182191346160333327151776155319", 128 "@theme/utilities": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/utilities.js?v=28506172887375975941776155323", 129 "@theme/variant-picker": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/variant-picker.js?v=24924540959574313291776155323", 130 "@theme/media-gallery": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/media-gallery.js?v=14624021005636302161776155318", 131 "@theme/quick-add": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/quick-add.js?v=114575661933533593881776155320", 132 "@theme/paginated-list-aspect-ratio": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/paginated-list-aspect-ratio.js?v=25254270272143792451776155322", 133 "@theme/popover-polyfill": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/popover-polyfill.js?v=119029313658895111201776155324", 134 "@theme/component-quantity-selector": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/component-quantity-selector.js?v=67906657287482036641776155321", 135 "@theme/comparison-slider": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/comparison-slider.js?v=106705562947035711941776155319", 136 "@theme/sticky-add-to-cart": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/sticky-add-to-cart.js?v=48956925339276737091776155321", 137 "@theme/fly-to-cart": "//shop.colorsxstudios.com/cdn/shop/t/26/assets/fly-to-cart.js?v=48483246440248933081776155320" 138 } 139 } 140</script>
140 141
142<script 143 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/view-transitions.js?v=7106414069516106341776155318" 144 async 145 146></script>
146 147 148<link 149 rel="modulepreload" 150 href="//shop.colorsxstudios.com/cdn/shop/t/26/assets/utilities.js?v=28506172887375975941776155323" 151 fetchpriority="low" 152> 153<link 154 rel="modulepreload" 155 href="//shop.colorsxstudios.com/cdn/shop/t/26/assets/component.js?v=184240237101443119871776155321" 156 fetchpriority="low" 157> 158<link 159 rel="modulepreload" 160 href="//shop.colorsxstudios.com/cdn/shop/t/26/assets/section-renderer.js?v=123311117485513785771776155319" 161 fetchpriority="low" 162> 163<link 164 rel="modulepreload" 165 href="//shop.colorsxstudios.com/cdn/shop/t/26/assets/section-hydration.js?v=108434990705342316311776155318" 166 fetchpriority="low" 167> 168<link 169 rel="modulepreload" 170 href="//shop.colorsxstudios.com/cdn/shop/t/26/assets/morph.js?v=104045809772310330131776155320" 171 fetchpriority="low" 172> 173 174 175 176<link 177 rel="modulepreload" 178 href="//shop.colorsxstudios.com/cdn/shop/t/26/assets/focus.js?v=60436577539430446401776155320" 179 fetchpriority="low" 180> 181<link 182 rel="modulepreload" 183 href="//shop.colorsxstudios.com/cdn/shop/t/26/assets/recently-viewed-products.js?v=94729125001750262651776155321" 184 fetchpriority="low" 185> 186<link 187 rel="modulepreload" 188 href="//shop.colorsxstudios.com/cdn/shop/t/26/assets/scrolling.js?v=162288454571026455011776155323" 189 fetchpriority="low" 190> 191<link 192 rel="modulepreload" 193 href="//shop.colorsxstudios.com/cdn/shop/t/26/assets/events.js?v=1118589085892804011776155317" 194 fetchpriority="low" 195>
196<script 197 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/popover-polyfill.js?v=119029313658895111201776155324" 198 type="module" 199 fetchpriority="low" 200></script>
vendor: 1 bytes, line 200
200
201<script 202 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/overflow-list.js?v=46858356770684902511776155321" 203 type="module" 204 fetchpriority="low" 205></script>
vendor: 1 bytes, line 205
205
206<script 207 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/quick-add.js?v=114575661933533593881776155320" 208 type="module" 209 fetchpriority="low" 210></script>
210 211 212
212<script 213 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/cart-discount.js?v=107077853990124422021776155323" 214 type="module" 215 fetchpriority="low" 216 ></script>
216 217 218
219<script 220 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/dialog.js?v=150888536568694194021776155323" 221 type="module" 222 fetchpriority="low" 223></script>
vendor: 1 bytes, line 223
223
224<script 225 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/variant-picker.js?v=24924540959574313291776155323" 226 type="module" 227 fetchpriority="low" 228></script>
vendor: 1 bytes, line 228
228
229<script 230 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/product-card.js?v=28695665944407642501776155319" 231 type="module" 232 fetchpriority="low" 233></script>
vendor: 1 bytes, line 233
233
234<script 235 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/product-form.js?v=142170751179338062901776155321" 236 type="module" 237 fetchpriority="low" 238></script>
vendor: 1 bytes, line 238
238
239<script 240 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/fly-to-cart.js?v=48483246440248933081776155320" 241 type="module" 242 fetchpriority="low" 243></script>
vendor: 1 bytes, line 243
243
244<script 245 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/accordion-custom.js?v=97588419883090888471776156318" 246 type="module" 247 fetchpriority="low" 248></script>
vendor: 1 bytes, line 248
248
249<script 250 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/media.js?v=37825095869491791421776155318" 251 type="module" 252 fetchpriority="low" 253></script>
vendor: 1 bytes, line 253
253
254<script 255 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/product-price.js?v=83480980452100801711776155323" 256 type="module" 257 fetchpriority="low" 258></script>
vendor: 1 bytes, line 258
258
259<script 260 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/product-sku.js?v=121804655373531320511776155324" 261 type="module" 262 fetchpriority="low" 263></script>
vendor: 1 bytes, line 263
263
264<script 265 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/product-title-truncation.js?v=81744426891537421781776155318" 266 type="module" 267 fetchpriority="low" 268></script>
vendor: 1 bytes, line 268
268
269<script 270 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/product-inventory.js?v=81520546963552472391776155322" 271 type="module" 272 fetchpriority="low" 273></script>
vendor: 1 bytes, line 273
273
274<script 275 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/show-more.js?v=94563802205717136101776155319" 276 type="module" 277 fetchpriority="low" 278></script>
vendor: 1 bytes, line 278
278
279<script 280 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/slideshow.js?v=168726587398279102001776155320" 281 type="module" 282 fetchpriority="low" 283></script>
vendor: 1 bytes, line 283
283
284<script 285 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/layered-slideshow.js?v=30135417790894624731776155322" 286 type="module" 287 fetchpriority="low" 288></script>
vendor: 1 bytes, line 288
288
289<script 290 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/anchored-popover.js?v=95953304814728754461776155319" 291 type="module" 292 fetchpriority="low" 293></script>
vendor: 1 bytes, line 293
293
294<script 295 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/floating-panel.js?v=151277338116891310371776155319" 296 type="module" 297 fetchpriority="low" 298></script>
vendor: 1 bytes, line 298
298
299<script 300 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/video-background.js?v=25237992823806706551776155324" 301 type="module" 302 fetchpriority="low" 303></script>
vendor: 1 bytes, line 303
303
304<script 305 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/component-quantity-selector.js?v=67906657287482036641776155321" 306 type="module" 307 fetchpriority="low" 308></script>
vendor: 1 bytes, line 308
308
309<script 310 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/media-gallery.js?v=14624021005636302161776155318" 311 type="module" 312 fetchpriority="low" 313></script>
vendor: 1 bytes, line 313
313
314<script 315 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/rte-formatter.js?v=40306132146590816021776155323" 316 type="module" 317 fetchpriority="low" 318></script>
vendor: 1 bytes, line 318
318
319<script 320 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/volume-pricing.js?v=15442793518842484731776155319" 321 type="module" 322 fetchpriority="low" 323></script>
vendor: 1 bytes, line 323
323
324<script 325 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/price-per-item.js?v=144512917617120124431776155318" 326 type="module" 327 fetchpriority="low" 328></script>
vendor: 1 bytes, line 328
328
329<script 330 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/volume-pricing-info.js?v=94479640769665442661776155318" 331 type="module" 332 fetchpriority="low" 333></script>
333 334 335 336
336<script 337 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/localization.js?v=15585934801240115691776155323" 338 type="module" 339 fetchpriority="low" 340 ></script>
340 341 342 343 344
345<script 346 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/auto-close-details.js?v=58350291535404441581776155320" 347 defer="defer" 348></script>
348 349
350<script> 351 const Theme = { 352 translations: { 353 placeholder_image: `Placeholder image`, 354 added: `Added`, 355 recipient_form_fields_visible: `Recipient form fields are now visible`, 356 recipient_form_fields_hidden: `Recipient form fields are now hidden`, 357 recipient_form_error: `There was an error with the form submission`, 358 items_added_to_cart_one: `1 item added to cart`, 359 items_added_to_cart_other: `{{ count }} items added to cart`, 360 cart_count: `Total items in cart`, 361 }, 362 routes: { 363 cart_add_url: '/cart/add.js', 364 cart_change_url: '/cart/change', 365 cart_update_url: '/cart/update', 366 cart_url: '/cart', 367 predictive_search_url: '/search/suggest', 368 search_url: '/search', 369 }, 370 template: { 371 name: 'index', 372 }, 373 }; 374</script>
374 375 376<style data-shopify> 377 378 :root { 379 /* Page Layout */ 380 --sidebar-width: 25rem; 381 --narrow-content-width: 36rem; 382 --normal-content-width: 42rem; 383 --wide-content-width: 46rem; 384 --narrow-page-width: 90rem; 385 --normal-page-width: 120rem; 386 --wide-page-width: 150rem; 387 388 /* Section Heights */ 389 --section-height-small: 15rem; 390 --section-height-medium: 25rem; 391 --section-height-large: 35rem; 392 393 @media screen and (min-width: 40em) { 394 --section-height-small: 40svh; 395 --section-height-medium: 55svh; 396 --section-height-large: 70svh; 397 } 398 399 @media screen and (min-width: 60em) { 400 --section-height-small: 50svh; 401 --section-height-medium: 65svh; 402 --section-height-large: 80svh; 403 } 404 405 /* Letter spacing */ 406 --letter-spacing-sm: 0.06em; 407 --letter-spacing-md: 0.13em; 408 409 /* Font families */ 410 411 --font-family : "Grotesk" , sans-serif ; 412 413 --font-body--family : "Grotesk" , sans-serif ; 414 --font-body--weight : 400 ; 415 --font-body--style : normal ; 416 417 --font-subheading--family : "Grotesk" , sans-serif ; 418 --font-subheading--weight : 400 ; 419 --font-subheading--style : normal ; 420 421 --font-heading--family : "Grotesk" , sans-serif ; 422 --font-heading--weight : 400 ; 423 --font-heading--style : normal ; 424 425 --font-accent--family : "Grotesk" , sans-serif ; 426 --font-accent--weight : 400 ; 427 --font-accent--style : normal ; 428 429 /* Margin sizes */ 430 --font-heading--spacing: 0.25em; 431 --font-h1--spacing: var(--font-heading--spacing); 432 --font-h2--spacing: var(--font-heading--spacing); 433 --font-h3--spacing: var(--font-heading--spacing); 434 --font-h4--spacing: var(--font-heading--spacing); 435 --font-h5--spacing: var(--font-heading--spacing); 436 --font-h6--spacing: var(--font-heading--spacing); 437 --font-paragraph--spacing: 0.5em; 438 439 /* Heading colors */ 440 --font-h1--color: var(--color-foreground-heading); 441 --font-h2--color: var(--color-foreground-heading); 442 --font-h3--color: var(--color-foreground-heading); 443 --font-h4--color: var(--color-foreground-heading); 444 --font-h5--color: var(--color-foreground-heading); 445 --font-h6--color: var(--color-foreground-heading); 446 447 /** Z-Index / Layering */ 448 --layer-section-background: -2; 449 --layer-lowest: -1; 450 --layer-base: 0; 451 --layer-flat: 1; 452 --layer-raised: 2; 453 --layer-heightened: 4; 454 --layer-sticky: 8; 455 --layer-window-overlay: 10; 456 --layer-header-menu: 12; 457 --layer-overlay: 16; 458 --layer-menu-drawer: 18; 459 --layer-temporary: 20; 460 461 /* Max-width / Measure */ 462 --max-width--body-normal: 32.5em; 463 --max-width--body-narrow: 22.75em; 464 465 --max-width--heading-normal: 32.5em; 466 --max-width--heading-narrow: 19.5em; 467 468 --max-width--display-normal: 13em; 469 --max-width--display-narrow: 9.75em; 470 --max-width--display-tight: 3.25em; 471 472 /* Letter-spacing / Tracking */ 473 --letter-spacing--display-tight: -0.03em; 474 --letter-spacing--display-normal: 0em; 475 --letter-spacing--display-loose: 0.03em; 476 477 --letter-spacing--heading-tight: -0.03em; 478 --letter-spacing--heading-normal: 0em; 479 --letter-spacing--heading-loose: 0.03em; 480 481 --letter-spacing--body-tight: -0.03em; 482 --letter-spacing--body-normal: 0em; 483 --letter-spacing--body-loose: 0.03em; 484 485 /* Line height / Leading */ 486 --line-height: 1; 487 488 --line-height--display-tight: 1; 489 --line-height--display-normal: 1.1; 490 --line-height--display-loose: 1.2; 491 492 --line-height--heading-tight: 1.15; 493 --line-height--heading-normal: 1.25; 494 --line-height--heading-loose: 1.35; 495 496 --line-height--body-tight: 1.2; 497 --line-height--body-normal: 1.4; 498 --line-height--body-loose: 1.6; 499 500 /* Typography presets */ 501 502 --font-size--paragraph: 1.0rem; 503--font-size--h1: 1.5rem; 504--font-size--h2: 1.25rem; 505--font-size--h3: 1.125rem; 506--font-size--h4: 1.0rem; 507--font-size--h5: 0.875rem; 508--font-size--h6: 0.75rem; 509 510 511--font-paragraph--letter-spacing : var( --letter-spacing--body-normal); 512--font-paragraph--weight : 400; 513--font-paragraph--line-height : var(--line-height--body-normal); 514--font-paragraph--family : var( --font-family ); 515--font-paragraph--style : normal; 516--font-paragraph--size : var(--font-size--paragraph); 517--font-paragraph--case : ; 518--font-h1--letter-spacing : var( --letter-spacing--heading-normal); 519--font-h1--weight : 400; 520--font-h1--line-height : var(--line-height--display-normal); 521--font-h1--family : var( --font-family ); 522--font-h1--style : normal; 523--font-h1--size : var(--font-size--h1); 524--font-h1--case : none; 525--font-h2--letter-spacing : var( --letter-spacing--heading-normal); 526--font-h2--weight : 400; 527--font-h2--line-height : var(--line-height--display-tight); 528--font-h2--family : var( --font-family ); 529--font-h2--style : normal; 530--font-h2--size : var(--font-size--h2); 531--font-h2--case : none; 532--font-h3--letter-spacing : var( --letter-spacing--heading-normal); 533--font-h3--weight : 400; 534--font-h3--line-height : var(--line-height--display-normal); 535--font-h3--family : var( --font-family ); 536--font-h3--style : normal; 537--font-h3--size : var(--font-size--h3); 538--font-h3--case : none; 539--font-h4--letter-spacing : var( --letter-spacing--heading-normal); 540--font-h4--weight : 400; 541--font-h4--line-height : var(--line-height--display-tight); 542--font-h4--family : var( --font-family ); 543--font-h4--style : normal; 544--font-h4--size : var(--font-size--h4); 545--font-h4--case : none; 546--font-h5--letter-spacing : var( --letter-spacing--heading-normal); 547--font-h5--weight : 400; 548--font-h5--line-height : var(--line-height--display-loose); 549--font-h5--family : var( --font-family ); 550--font-h5--style : normal; 551--font-h5--size : var(--font-size--h5); 552--font-h5--case : none; 553--font-h6--letter-spacing : var( --letter-spacing--heading-normal); 554--font-h6--weight : 400; 555--font-h6--line-height : var(--line-height--display-loose); 556--font-h6--family : var( --font-family ); 557--font-h6--style : normal; 558--font-h6--size : var(--font-size--h6); 559--font-h6--case : none; 560 561 562 /* Hardcoded font sizes */ 563 --font-size--3xs: 0.625rem; 564 --font-size--2xs: 0.75rem; 565 --font-size--xs: 0.8125rem; 566 --font-size--sm: 0.875rem; 567 --font-size--md: 1rem; 568 --font-size--lg: 1.125rem; 569 --font-size--xl: 1.25rem; 570 --font-size--2xl: 1.5rem; 571 --font-size--3xl: 2rem; 572 --font-size--4xl: 2.5rem; 573 --font-size--5xl: 3rem; 574 --font-size--6xl: 3.5rem; 575 576 /* Menu font sizes */ 577 --menu-font-sm--size: 0.875rem; 578 --menu-font-sm--line-height: calc(1.1 + 0.5 * min(16 / 14)); 579 --menu-font-md--size: 1rem; 580 --menu-font-md--line-height: calc(1.1 + 0.5 * min(16 / 16)); 581 --menu-font-lg--size: 1.125rem; 582 --menu-font-lg--line-height: calc(1.1 + 0.5 * min(16 / 18)); 583 --menu-font-xl--size: 1.25rem; 584 --menu-font-xl--line-height: calc(1.1 + 0.5 * min(16 / 20)); 585 --menu-font-2xl--size: 1.75rem; 586 --menu-font-2xl--line-height: calc(1.1 + 0.5 * min(16 / 28)); 587 588 /* Colors */ 589 --color-error: #8B0000; 590 --color-success: #006400; 591 --color-white: #FFFFFF; 592 --color-white-rgb: 255 255 255; 593 --color-black: #000000; 594 --color-instock: #3ED660; 595 --color-lowstock: #EE9441; 596 --color-outofstock: #C8C8C8; 597 598 /* Opacity */ 599 --opacity-5: 0.05; 600 --opacity-8: 0.08; 601 --opacity-10: 0.1; 602 --opacity-15: 0.15; 603 --opacity-20: 0.2;
604 --opacity-25: 0.25; 605 --opacity-30: 0.3; 606 --opacity-40: 0.4; 607 --opacity-50: 0.5; 608 --opacity-60: 0.6; 609 --opacity-70: 0.7; 610 --opacity-80: 0.8; 611 --opacity-85: 0.85; 612 --opacity-90: 0.9; 613 --opacity-subdued-text: var(--opacity-70); 614 615 --shadow-button: 0 2px 3px rgb(0 0 0 / 20%); 616 --gradient-image-overlay: linear-gradient(to top, rgb(0 0 0 / 0.5), transparent); 617 618 /* Spacing */ 619 --margin-3xs: 0.125rem; 620 --margin-2xs: 0.3rem; 621 --margin-xs: 0.5rem; 622 --margin-sm: 0.7rem; 623 --margin-md: 0.8rem; 624 --margin-lg: 1rem; 625 --margin-xl: 1.25rem; 626 --margin-2xl: 1.5rem; 627 --margin-3xl: 1.75rem; 628 --margin-4xl: 2rem; 629 --margin-5xl: 3rem; 630 --margin-6xl: 5rem; 631 632 --scroll-margin: 50px; 633 634 --padding-3xs: 0.125rem; 635 --padding-2xs: 0.25rem; 636 --padding-xs: 0.5rem; 637 --padding-sm: 0.7rem; 638 --padding-md: 0.8rem; 639 --padding-lg: 1rem; 640 --padding-xl: 1.25rem; 641 --padding-2xl: 1.5rem; 642 --padding-3xl: 1.75rem; 643 --padding-4xl: 2rem; 644 --padding-5xl: 3rem; 645 --padding-6xl: 4rem; 646 647 --gap-3xs: 0.125rem; 648 --gap-2xs: 0.3rem; 649 --gap-xs: 0.5rem; 650 --gap-sm: 0.7rem; 651 --gap-md: 0.9rem; 652 --gap-lg: 1rem; 653 --gap-xl: 1.25rem; 654 --gap-2xl: 2rem; 655 --gap-3xl: 3rem; 656 657 --spacing-scale-sm: 0.6; 658 --spacing-scale-md: 0.7; 659 --spacing-scale-default: 1.0; 660 661 /* Checkout buttons gap */ 662 --checkout-button-gap: 10px; 663 664 /* Borders */ 665 --style-border-width: 1px; 666 --style-border-radius-xs: 0.2rem; 667 --style-border-radius-sm: 0.6rem; 668 --style-border-radius-md: 0.8rem; 669 --style-border-radius-50: 50%; 670 --style-border-radius-lg: 1rem; 671 --style-border-radius-pills: 0px; 672 --style-border-radius-inputs: 0px; 673 --style-border-radius-buttons-primary: 0px; 674 --style-border-radius-buttons-secondary: 12px; 675 --style-border-width-primary: 1px; 676 --style-border-width-secondary: 1px; 677 --style-border-width-inputs: 1px; 678 --style-border-radius-popover: 14px; 679 --style-border-popover: 1px none rgb(var(--color-border-rgb) / 50%); 680 --style-border-drawer: 1px none rgb(var(--color-border-rgb) / 50%); 681 --style-border-swatch-opacity: 10%; 682 --style-border-swatch-width: 1px; 683 --style-border-swatch-style: solid; 684 685 /* Animation */ 686 --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1); 687 --ease-out-quad: cubic-bezier(0.32, 0.72, 0, 1); 688 --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); 689 --animation-speed-fast: 0.0625s; 690 --animation-speed: 0.125s; 691 --animation-speed-slow: 0.2s; 692 --animation-speed-medium: 0.15s; 693 --animation-easing: ease-in-out; 694 --animation-slideshow-easing: cubic-bezier(0.4, 0, 0.2, 1); 695 --drawer-animation-speed: 0.2s; 696 --animation-values-slow: var(--animation-speed-slow) var(--animation-easing); 697 --animation-values: var(--animation-speed) var(--animation-easing); 698 --animation-values-fast: var(--animation-speed-fast) var(--animation-easing); 699 --animation-values-allow-discrete: var(--animation-speed) var(--animation-easing) allow-discrete; 700 --animation-timing-hover: cubic-bezier(0.25, 0.46, 0.45, 0.94); 701 --animation-timing-active: cubic-bezier(0.5, 0, 0.75, 0); 702 --animation-timing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); 703 --animation-timing-default: cubic-bezier(0, 0, 0.2, 1); 704 --animation-timing-fade-in: cubic-bezier(0.16, 1, 0.3, 1); 705 --animation-timing-fade-out: cubic-bezier(0.4, 0, 0.2, 1); 706 /* Spring definitions suffixed with perceptual duration (d<ms>) and bounce (b<%>)*/ 707 --spring-d300-b0-easing: linear(0, 0.0033 0.81%, 0.027 2.42%, 0.0916 4.84%, 0.4745 15.32%, 0.6422 20.97%, 0.7175, 0.7789, 0.8283 30.64%, 0.876, 0.9111 38.71%, 0.941, 0.9611 48.39%, 0.9707, 0.978 54.84%, 0.9885 62.1%, 0.9949 70.97%, 0.9982 82.26%, 0.9997 100%); 708 --spring-d300-b0-duration: 0.4980s; 709 --spring-d280-b0-easing: linear(0, 0.0044, 0.0164 1.85%, 0.085 4.63%, 0.4571 14.81%, 0.575 18.52%, 0.6505, 0.7148 24.07%, 0.7849, 0.8393, 0.8809 35.18%, 0.9189, 0.9453 44.44%, 0.9662, 0.9793 55.55%, 0.9894 62.95%, 0.995 71.28%, 0.9982 82.39%, 0.9997 99.98%); 710 --spring-d280-b0-duration: 0.4648s; 711 --spring-d260-b0-easing: linear(0, 0.0058, 0.0216 2.15%, 0.0748 4.29%, 0.4646 15.03%, 0.5673, 0.655, 0.7279, 0.7872, 0.8349, 0.8727 34.36%, 0.9107, 0.9379 42.95%, 0.9609 48.31%, 0.9778 54.76%, 0.9887 62.27%, 0.9948 70.86%, 0.9983 82.67%, 0.9997 99.85%); 712 --spring-d260-b0-duration: 0.4316s; 713 --spring-d220-b0-easing: linear( 714 0, 715 0.0093 1.37%, 716 0.0696 4.12%, 717 0.4667 15.09%, 718 0.6322 20.58%, 719 0.6986 23.32%, 720 0.7793 27.44%, 721 0.8219 30.18%, 722 0.8721, 723 0.9089 38.42%, 724 0.9427, 725 0.9644, 726 0.978 54.88%, 727 0.9881 61.74%, 728 0.9944 69.97%, 729 0.998 80.95%, 730 0.9996 98.78% 731 ); 732 --spring-d220-b0-duration: 0.3818s; 733 --spring-d180-b0-easing: linear(0, 0.0234, 0.0805 4.48%, 0.4865 15.68%, 0.6211 20.16%, 0.7696 26.88%, 0.8064 29.12%, 0.8646, 0.9063, 0.9358, 0.9563 47.04%, 0.9757, 0.9867 60.48%, 0.9941 69.44%, 0.9979 80.64%, 0.9996 98.56%); 734 --spring-d180-b0-duration: 0.2988s; 735 736 /* View transitions */ 737 /* View transition old */ 738 --view-transition-old-main-content: var(--animation-speed) var(--animation-easing) both fadeOut; 739 740 /* View transition new */ 741 --view-transition-new-main-content: var(--animation-speed) var(--animation-easing) both fadeIn, var(--animation-speed) var(--animation-easing) both slideInTopViewTransition; 742 743 /* Focus */ 744 --focus-outline-width: 0.09375rem; 745 --focus-outline-offset: 0.2em; 746 747 /* Badges */ 748 --badge-blob-padding-block: 1px; 749 --badge-blob-padding-inline: 12px 8px; 750 --badge-rectangle-padding-block: 1px; 751 --badge-rectangle-padding-inline: 6px; 752 @media screen and (min-width: 750px) { 753 --badge-blob-padding-block: 4px; 754 --badge-blob-padding-inline: 16px 12px; 755 --badge-rectangle-padding-block: 4px; 756 --badge-rectangle-padding-inline: 10px; 757 } 758 759 /* Icons */ 760 --icon-size-2xs: 0.6rem; 761 --icon-size-xs: 0.85rem; 762 --icon-size-sm: 1.25rem; 763 --icon-size-md: 1.375rem; 764 --icon-size-lg: 1.5rem; 765 --icon-stroke-width: 1px; 766 767 /* Input */ 768 --input-email-min-width: 200px; 769 --input-search-max-width: 650px; 770 --input-padding-y: 0.8rem; 771 --input-padding-x: 0.8rem; 772 --input-padding: var(--input-padding-y) var(--input-padding-x); 773 --input-box-shadow-width: var(--style-border-width-inputs); 774 --input-box-shadow: 0 0 0 var(--input-box-shadow-width) var(--color-input-border); 775 --input-box-shadow-focus: 0 0 0 calc(var(--input-box-shadow-width) + 0.5px) var(--color-input-border); 776 --input-disabled-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10)); 777 --input-disabled-border-color: rgb(var(--color-foreground-rgb) / var(--opacity-5)); 778 --input-disabled-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
779 --input-textarea-min-height: 55px; 780 781 /* Checkbox */ 782 --checkbox-size: 22px; 783 --checkbox-border-radius: 7px; 784 --checkbox-border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55)); 785 --checkbox-label-padding: 8px; 786 787 @media screen and (min-width: 750px) { 788 --checkbox-size: 16px; 789 --checkbox-border-radius: 5px; 790 --checkbox-label-padding: 6px; 791 } 792 793 /* Button size */ 794 --button-size-sm: 30px; 795 --button-size-md: 36px; 796 --button-size: var(--minimum-touch-target); 797 --button-padding-inline: 24px; 798 --button-padding-block: 16px; 799 800 /* Button font-family */ 801 --button-font-family-secondary : "Grotesk" , sans-serif ; 802 --button-font-family-primary : "Grotesk" , sans-serif ; 803 804 /* Button text case */ 805 --button-text-case: ; 806 --button-text-case-primary: default; 807 --button-text-case-secondary: default; 808 809 /* Borders */ 810 --border-color: rgb(var(--color-border-rgb) / var(--opacity-50)); 811 --border-width-sm: 1px; 812 --border-width-md: 2px; 813 --border-width-lg: 5px; 814 --border-radius-sm: 0.25rem; 815 816 /* Drawers */ 817 --drawer-inline-padding: 25px; 818 --drawer-menu-inline-padding: 2.5rem; 819 --drawer-header-block-padding: 20px; 820 --drawer-content-block-padding: 10px; 821 --drawer-header-desktop-top: 0rem; 822 --drawer-padding: calc(var(--padding-sm) + 7px); 823 --drawer-height: 100dvh; 824 --drawer-width: 95vw; 825 --drawer-max-width: 500px; 826 827 /* Variant Picker Swatches */ 828 --variant-picker-swatch-width-unitless: 34; 829 --variant-picker-swatch-height-unitless: 34; 830 --variant-picker-swatch-width: 34px; 831 --variant-picker-swatch-height: 34px; 832 --variant-picker-swatch-radius: 32px; 833 --variant-picker-border-width: 1px; 834 --variant-picker-border-style: solid; 835 --variant-picker-border-opacity: 10%; 836 837 /* Variant Picker Buttons */ 838 --variant-picker-button-radius: 0px; 839 --variant-picker-button-border-width: 1px; 840 841 /* Slideshow */ 842 --slideshow-controls-size: 3.5rem; 843 --slideshow-controls-icon: 2rem; 844 --peek-next-slide-size: 3rem; 845 846 /* Utilities */ 847 --backdrop-opacity: 0.15; 848 --backdrop-color-rgb: var(--color-shadow-rgb); 849 --minimum-touch-target: 44px; 850 --disabled-opacity: 0.5; 851 --skeleton-opacity: 0.025; 852 853 /* Shapes */ 854 --shape--circle: circle(50% at center); 855 --shape--sunburst: polygon(100% 50%,94.62% 55.87%,98.3% 62.94%,91.57% 67.22%,93.3% 75%,85.7% 77.39%,85.36% 85.36%,77.39% 85.7%,75% 93.3%,67.22% 91.57%,62.94% 98.3%,55.87% 94.62%,50% 100%,44.13% 94.62%,37.06% 98.3%,32.78% 91.57%,25% 93.3%,22.61% 85.7%,14.64% 85.36%,14.3% 77.39%,6.7% 75%,8.43% 67.22%,1.7% 62.94%,5.38% 55.87%,0% 50%,5.38% 44.13%,1.7% 37.06%,8.43% 32.78%,6.7% 25%,14.3% 22.61%,14.64% 14.64%,22.61% 14.3%,25% 6.7%,32.78% 8.43%,37.06% 1.7%,44.13% 5.38%,50% 0%,55.87% 5.38%,62.94% 1.7%,67.22% 8.43%,75% 6.7%,77.39% 14.3%,85.36% 14.64%,85.7% 22.61%,93.3% 25%,91.57% 32.78%,98.3% 37.06%,94.62% 44.13%); 856 --shape--diamond: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 857 --shape--blob: polygon(85.349% 11.712%, 87.382% 13.587%, 89.228% 15.647%, 90.886% 17.862%, 92.359% 20.204%, 93.657% 22.647%, 94.795% 25.169%, 95.786% 27.752%, 96.645% 30.382%, 97.387% 33.048%, 98.025% 35.740%, 98.564% 38.454%, 99.007% 41.186%, 99.358% 43.931%, 99.622% 46.685%, 99.808% 49.446%, 99.926% 52.210%, 99.986% 54.977%, 99.999% 57.744%, 99.975% 60.511%, 99.923% 63.278%, 99.821% 66.043%, 99.671% 68.806%, 99.453% 71.565%, 99.145% 74.314%, 98.724% 77.049%, 98.164% 79.759%, 97.433% 82.427%, 96.495% 85.030%, 95.311% 87.529%, 93.841% 89.872%, 92.062% 91.988%, 89.972% 93.796%, 87.635% 95.273%, 85.135% 96.456%, 82.532% 97.393%, 79.864% 98.127%, 77.156% 98.695%, 74.424% 99.129%, 71.676% 99.452%, 68.918% 99.685%, 66.156% 99.844%, 63.390% 99.942%, 60.624% 99.990%, 57.856% 99.999%, 55.089% 99.978%, 52.323% 99.929%, 49.557% 99.847%, 46.792% 99.723%, 44.031% 99.549%, 41.273% 99.317%, 38.522% 99.017%, 35.781% 98.639%, 33.054% 98.170%, 30.347% 97.599%, 27.667% 96.911%, 25.024% 96.091%, 22.432% 95.123%, 19.907% 93.994%, 17.466% 92.690%, 15.126% 91.216%, 12.902% 89.569%, 10.808% 87.761%, 8.854% 85.803%, 7.053% 83.703%, 5.418% 81.471%, 3.962% 79.119%, 2.702% 76.656%, 1.656% 74.095%, 0.846% 71.450%, 0.294% 68.740%, 0.024% 65.987%, 0.050% 63.221%, 0.343% 60.471%, 0.858% 57.752%, 1.548% 55.073%, 2.370% 52.431%, 3.283% 49.819%, 4.253% 47.227%, 5.249% 44.646%, 6.244% 42.063%, 7.211% 39.471%, 8.124% 36.858%, 8.958% 34.220%, 9.711% 31.558%, 10.409% 28.880%, 11.083% 26.196%, 11.760% 23.513%, 12.474% 20.839%, 13.259% 18.186%, 14.156% 15.569%, 15.214% 13.012%, 16.485% 10.556%, 18.028% 8.261%, 19.883
857% 6.211%, 22.041% 4.484%, 24.440% 3.110%, 26.998% 2.057%, 29.651% 1.275%, 32.360% 0.714%, 35.101% 0.337%, 37.859% 0.110%, 40.624% 0.009%, 43.391% 0.016%, 46.156% 0.113%, 48.918% 0.289%, 51.674% 0.533%, 54.425% 0.837%, 57.166% 1.215%, 59.898% 1.654%, 62.618% 2.163%, 65.322% 2.750%, 68.006% 3.424%, 70.662% 4.197%, 73.284% 5.081%, 75.860% 6.091%, 78.376% 7.242%, 80.813% 8.551%, 83.148% 10.036%, 85.349% 11.712%); 858 859 /* Buy buttons */ 860 --height-buy-buttons: calc(var(--padding-lg) * 2 + var(--icon-size-sm)); 861 862 /* Card image width and height variables */ 863 --card-width-small: 10rem; 864 865 --height-small: 10rem; 866 --height-medium: 11.5rem; 867 --height-large: 13rem; 868 --height-full: 100vh; 869 870 @media screen and (min-width: 750px) { 871 --height-small: 17.5rem; 872 --height-medium: 21.25rem; 873 --height-large: 25rem; 874 } 875 876 /* Modal */ 877 --modal-max-height: 65dvh; 878 --quick-add-modal-height: min(38.5rem, 96vh); 879 --quick-add-modal-width: min(54rem, 96vw); 880 --quick-add-modal-gallery-width: 24rem; 881 882 /* Card styles for search */ 883 --card-bg-hover: rgb(var(--color-foreground-rgb) / var(--opacity-5)); 884 --card-border-hover: rgb(var(--color-foreground-rgb) / var(--opacity-30)); 885 --card-border-focus: rgb(var(--color-foreground-rgb) / var(--opacity-10)); 886 887 /* Cart */ 888 889 --cart-primary-font-family : "Grotesk" , sans-serif ; 890 --cart-primary-font-weight : 400 ; 891 --cart-primary-font-style : normal ; 892 893 --cart-secondary-font-family : "Grotesk" , sans-serif ; 894 --cart-secondary-font-weight : 400 ; 895 --cart-secondary-font-style : normal ; 896 } 897 898</style> 899 900 901<style data-shopify> 902 903 904 :root, 905 906 907 908 .color-scheme-1 { 909 --color-background: rgb(255 255 255 / 1.0); 910 /* RGB values only to apply different opacities - Relative color values are not supported in iOS < 16.4 */ 911 --color-background-rgb: 255 255 255; 912 --opacity-5-15: 0.05; 913 --opacity-10-25: 0.1; 914 --opacity-35-55: 0.35; 915 --opacity-40-60: 0.4; 916 --opacity-30-60: 0.3; 917 --color-foreground: rgb(0 0 0 / 1.0); 918 --color-foreground-rgb: 0 0 0; 919 --color-foreground-heading: rgb(0 0 0 / 1.0); 920 --color-foreground-heading-rgb: 0 0 0; 921 --color-primary: rgb(0 0 0 / 0.81); 922 --color-primary-rgb: 0 0 0; 923 --color-primary-hover: rgb(0 0 0 / 1.0); 924 --color-primary-hover-rgb: 0 0 0; 925 --color-border: rgb(0 0 0 / 0.06); 926 --color-border-rgb: 0 0 0; 927 --color-shadow: rgb(0 0 0 / 1.0); 928 --color-shadow-rgb: 0 0 0; 929 --color-primary-button-text: rgb(255 255 255 / 1.0); 930 --color-primary-button-background: rgb(0 0 0 / 0.7); 931 --color-primary-button-border: rgb(0 0 0 / 1.0); 932 --color-primary-button-hover-text: rgb(255 255 255 / 1.0); 933 --color-primary-button-hover-background: rgb(51 51 51 / 1.0); 934 --color-primary-button-hover-border: rgb(0 0 0 / 1.0); 935 --color-secondary-button-text: rgb(0 0 0 / 1.0); 936 --color-secondary-button-background: rgb(0 0 0 / 0.0); 937 --color-secondary-button-border: rgb(0 0 0 / 1.0); 938 --color-secondary-button-hover-text: rgb(51 51 51 / 1.0); 939 --color-secondary-button-hover-background: rgb(250 250 250 / 1.0); 940 --color-secondary-button-hover-border: rgb(51 51 51 / 1.0); 941 --color-input-background: rgb(255 255 255 / 0.78); 942 --color-input-text: rgb(51 51 51 / 1.0); 943 --color-input-text-rgb: 51 51 51; 944 --color-input-border: rgb(223 223 223 / 1.0); 945 --color-input-hover-background: rgb(0 0 0 / 0.01); 946 --color-variant-background: rgb(255 255 255 / 1.0); 947 --color-variant-border: rgb(0 0 0 / 0.13); 948 --color-variant-text: rgb(0 0 0 / 1.0); 949 --color-variant-text-rgb: 0 0 0; 950 --color-variant-hover-background: rgb(245 245 245 / 1.0); 951 --color-variant-hover-text: rgb(0 0 0 / 1.0); 952 --color-variant-hover-border: rgb(230 230 230 / 1.0); 953 --color-selected-variant-background: rgb(0 0 0 / 1.0); 954 --color-selected-variant-border: rgb(0 0 0 / 1.0); 955 --color-selected-variant-text: rgb(255 255 255 / 1.0); 956 --color-selected-variant-hover-background: rgb(26 26 26 / 1.0); 957 --color-selected-variant-hover-text: rgb(255 255 255 / 1.0); 958 --color-selected-variant-hover-border: rgb(26 26 26 / 1.0); 959 960 --input-disabled-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10)); 961 --input-disabled-border-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15)); 962 --input-disabled-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50)); 963 --color-foreground-muted: rgb(var(--color-foreground-rgb) / var(--opacity-60)); 964 --font-h1--color: var(--color-foreground-heading); 965 --font-h2--color: var(--color-foreground-heading); 966 --font-h3--color: var(--color-foreground-heading); 967 --font-h4--color: var(--color-foreground-heading); 968 --font-h5--color: var(--color-foreground-heading); 969 --font-h6--color: var(--color-foreground-heading); 970 971 /* Shadows */ 972 973 --shadow-drawer: 0px 4px 20px rgb(var(--color-shadow-rgb) / var(--opacity-15)); 974 975 976 --shadow-blur: 20px; 977 --shadow-popover: 0px 4px 20px rgb(var(--color-shadow-rgb) / var(--opacity-15)); 978 979 } 980 981 982 983 984 .color-scheme-2 {
985 --color-background: rgb(0 0 0 / 0.0); 986 /* RGB values only to apply different opacities - Relative color values are not supported in iOS < 16.4 */ 987 --color-background-rgb: 0 0 0; 988 --opacity-5-15: 0.15; 989 --opacity-10-25: 0.25; 990 --opacity-35-55: 0.55; 991 --opacity-40-60: 0.6; 992 --opacity-30-60: 0.6; 993 --color-foreground: rgb(255 255 255 / 1.0); 994 --color-foreground-rgb: 255 255 255; 995 --color-foreground-heading: rgb(0 0 0 / 1.0); 996 --color-foreground-heading-rgb: 0 0 0; 997 --color-primary: rgb(0 0 0 / 0.81); 998 --color-primary-rgb: 0 0 0; 999 --color-primary-hover: rgb(255 255 255 / 1.0); 1000 --color-primary-hover-rgb: 255 255 255; 1001 --color-border: rgb(223 223 223 / 1.0); 1002 --color-border-rgb: 223 223 223; 1003 --color-shadow: rgb(0 0 0 / 1.0); 1004 --color-shadow-rgb: 0 0 0; 1005 --color-primary-button-text: rgb(255 255 255 / 1.0); 1006 --color-primary-button-background: rgb(0 0 0 / 1.0); 1007 --color-primary-button-border: rgb(0 0 0 / 1.0); 1008 --color-primary-button-hover-text: rgb(255 255 255 / 1.0); 1009 --color-primary-button-hover-background: rgb(51 51 51 / 1.0); 1010 --color-primary-button-hover-border: rgb(51 51 51 / 1.0); 1011 --color-secondary-button-text: rgb(0 0 0 / 1.0); 1012 --color-secondary-button-background: rgb(0 0 0 / 0.0); 1013 --color-secondary-button-border: rgb(0 0 0 / 1.0); 1014 --color-secondary-button-hover-text: rgb(0 0 0 / 1.0); 1015 --color-secondary-button-hover-background: rgb(255 255 255 / 0.36); 1016 --color-secondary-button-hover-border: rgb(51 51 51 / 0.73); 1017 --color-input-background: rgb(0 0 0 / 0.0); 1018 --color-input-text: rgb(0 0 0 / 0.53); 1019 --color-input-text-rgb: 0 0 0; 1020 --color-input-border: rgb(0 0 0 / 0.13); 1021 --color-input-hover-background: rgb(255 255 255 / 0.36); 1022 --color-variant-background: rgb(255 255 255 / 1.0); 1023 --color-variant-border: rgb(230 230 230 / 1.0); 1024 --color-variant-text: rgb(0 0 0 / 1.0); 1025 --color-variant-text-rgb: 0 0 0; 1026 --color-variant-hover-background: rgb(245 245 245 / 1.0); 1027 --color-variant-hover-text: rgb(0 0 0 / 1.0); 1028 --color-variant-hover-border: rgb(230 230 230 / 1.0); 1029 --color-selected-variant-background: rgb(0 0 0 / 1.0); 1030 --color-selected-variant-border: rgb(0 0 0 / 1.0); 1031 --color-selected-variant-text: rgb(255 255 255 / 1.0); 1032 --color-selected-variant-hover-background: rgb(26 26 26 / 1.0); 1033 --color-selected-variant-hover-text: rgb(255 255 255 / 1.0); 1034 --color-selected-variant-hover-border: rgb(26 26 26 / 1.0); 1035 1036 --input-disabled-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10)); 1037 --input-disabled-border-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15)); 1038 --input-disabled-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50)); 1039 --color-foreground-muted: rgb(var(--color-foreground-rgb) / var(--opacity-60)); 1040 --font-h1--color: var(--color-foreground-heading); 1041 --font-h2--color: var(--color-foreground-heading); 1042 --font-h3--color: var(--color-foreground-heading); 1043 --font-h4--color: var(--color-foreground-heading); 1044 --font-h5--color: var(--color-foreground-heading); 1045 --font-h6--color: var(--color-foreground-heading); 1046 1047 /* Shadows */ 1048 1049 --shadow-drawer: 0px 4px 20px rgb(var(--color-shadow-rgb) / var(--opacity-15)); 1050 1051 1052 --shadow-blur: 20px; 1053 --shadow-popover: 0px 4px 20px rgb(var(--color-shadow-rgb) / var(--opacity-15)); 1054 1055 } 1056 1057 1058 1059 1060 .color-scheme-3 { 1061 --color-background: rgb(238 241 234 / 1.0); 1062 /* RGB values only to apply different opacities - Relative color values are not supported in iOS < 16.4 */ 1063 --color-background-rgb: 238 241 234; 1064 --opacity-5-15: 0.05; 1065 --opacity-10-25: 0.1; 1066 --opacity-35-55: 0.35; 1067 --opacity-40-60: 0.4; 1068 --opacity-30-60: 0.3; 1069 --color-foreground: rgb(0 0 0 / 0.81); 1070 --color-foreground-rgb: 0 0 0; 1071 --color-foreground-heading: rgb(0 0 0 / 1.0); 1072 --color-foreground-heading-rgb: 0 0 0; 1073 --color-primary: rgb(0 0 0 / 0.81); 1074 --color-primary-rgb: 0 0 0; 1075 --color-primary-hover: rgb(0 0 0 / 1.0); 1076 --color-primary-hover-rgb: 0 0 0; 1077 --color-border: rgb(0 0 0 / 0.81); 1078 --color-border-rgb: 0 0 0; 1079 --color-shadow: rgb(0 0 0 / 1.0); 1080 --color-shadow-rgb: 0 0 0; 1081 --color-primary-button-text: rgb(255 255 255 / 1.0); 1082 --color-primary-button-background: rgb(0 0 0 / 1.0); 1083 --color-primary-button-border: rgb(0 0 0 / 1.0); 1084 --color-primary-button-hover-text: rgb(255 255 255 / 1.0); 1085 --color-primary-button-hover-background: rgb(51 51 51 / 1.0); 1086 --color-primary-button-hover-border: rgb(51 51 51 / 1.0); 1087 --color-secondary-button-text: rgb(0 0 0 / 1.0); 1088 --color-secondary-button-background: rgb(0 0 0 / 0.0); 1089 --color-secondary-button-border: rgb(0 0 0 / 1.0); 1090 --color-secondary-button-hover-text: rgb(0 0 0 / 0.81); 1091 --color-secondary-button-hover-background: rgb(255 255 255 / 0.36); 1092 --color-secondary-button-hover-border: rgb(0 0 0 / 0.81); 1093 --color-input-background: rgb(0 0 0 / 0.0); 1094 --color-input-text: rgb(0 0 0 / 0.81); 1095 --color-input-text-rgb: 0 0 0; 1096 --color-input-border: rgb(0 0 0 / 0.81); 1097 --color-input-hover-background: rgb(255 255 255 / 0.36); 1098 --color-variant-background: rgb(255 255 255 / 1.0); 1099 --color-variant-border: rgb(230 230 230 / 1.0); 1100 --color-variant-text: rgb(0 0 0 / 1.0); 1101 --color-variant-text-rgb: 0 0 0; 1102 --color-variant-hover-background: rgb(245 245 245 / 1.0); 1103 --color-variant-hover-text: rgb(0 0 0 / 1.0); 1104 --color-variant-hover-border: rgb(230 230 230 / 1.0); 1105 --color-selected-variant-background: rgb(0 0 0 / 1.0); 1106 --color-selected-variant-border: rgb(0 0 0 / 1.0); 1107 --color-selected-variant-text: rgb(255 255 255 / 1.0); 1108 --color-selected-variant-hover-background: rgb(26 26 26 / 1.0); 1109 --color-selected-variant-hover-text: rgb(255 255 255 / 1.0); 1110 --color-selected-variant-hover-border: rgb(26 26 26 / 1.0); 1111 1112 --input-disabled-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10)); 1113 --input-disabled-border-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15)); 1114 --input-disabled-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50)); 1115 --color-foreground-muted: rgb(var(--color-foreground-rgb) / var(--opacity-60)); 1116 --font-h1--color: var(--color-foreground-heading); 1117 --font-h2--color: var(--color-foreground-heading); 1118 --font-h3--color: var(--color-foreground-heading); 1119 --font-h4--color: var(--color-foreground-heading); 1120 --font-h5--color: var(--color-foreground-heading); 1121 --font-h6--color: var(--color-foreground-heading); 1122 1123 /* Shadows */ 1124 1125 --shadow-drawer: 0px 4px 20px rgb(var(--color-shadow-rgb) / var(--opacity-15)); 1126 1127 1128 --shadow-blur: 20px; 1129 --shadow-popover: 0px 4px 20px rgb(var(--color-shadow-rgb) / var(--opacity-15)); 1130 1131 } 1132 1133 1134 1135 1136 .color-scheme-4 { 1137 --color-background: rgb(225 237 245 / 1.0); 1138 /* RGB values only to apply different opacities - Relative color values are not supported in iOS < 16.4 */ 1139 --color-background-rgb: 225 237 245; 1140 --opacity-5-15: 0.05; 1141 --opacity-10-25: 0.1; 1142 --opacity-35-55: 0.35; 1143 --opacity-40-60: 0.4; 1144 --opacity-30-60: 0.3; 1145 --color-foreground: rgb(0 0 0 / 0.81); 1146 --color-foreground-rgb: 0 0 0; 1147 --color-foreground-heading: rgb(0 0 0 / 1.0); 1148 --color-foreground-heading-rgb: 0 0 0; 1149 --color-primary: rgb(0 0 0 / 0.81); 1150 --color-primary-rgb: 0 0 0; 1151 --color-primary-hover: rgb(0 0 0 / 1.0); 1152 --color-primary-hover-rgb: 0 0 0; 1153 --color-border: rgb(29 54 134 / 0.5); 1154 --color-border-rgb: 29 54 134; 1155 --color-shadow: rgb(0 0 0 / 1.0); 1156 --color-shadow-rgb: 0 0 0; 1157 --color-primary-button-text: rgb(255 255 255 / 1.0); 1158 --color-primary-button-background: rgb(0 0 0 / 1.0); 1159 --color-primary-button-border: rgb(29 54 134 / 1.0); 1160 --color-primary-button-hover-text: rgb(255 255 255 / 1.0); 1161 --color-primary-button-hover-background: rgb(51 51 51 / 1.0); 1162 --color-primary-button-hover-border: rgb(0 0 0 / 1.0); 1163 --color-secondary-button-text: rgb(0 0 0 / 1.0); 1164 --color-secondary-button-background: rgb(0 0 0 / 0.0); 1165 --color-secondary-button-border: rgb(0 0 0 / 1.0); 1166 --color-secondary-button-hover-text: rgb(0 0 0 / 0.81); 1167 --color-secondary-button-hover-background: rgb(255 255 255 / 0.36); 1168 --color-secondary-button-hover-border: rgb(0 0 0 / 0.81); 1169 --color-input-background: rgb(0 0 0 / 0.0); 1170 --color-input-text: rgb(0 0 0 / 0.81); 1171 --color-input-text-rgb: 0 0 0; 1172 --color-input-border: rgb(0 0 0 / 0.81); 1173 --color-input-hover-background: rgb(255 255 255 / 0.36); 1174 --color-variant-background: rgb(255 255 255 / 1.0); 1175 --color-variant-border: rgb(230 230 230 / 1.0); 1176 --color-variant-text: rgb(0 0 0 / 1.0); 1177 --color-variant-text-rgb: 0 0 0; 1178 --color-variant-hover-background: rgb(245 245 245 / 1.0); 1179 --color-variant-hover-text: rgb(0 0 0 / 1.0); 1180 --color-variant-hover-border: rgb(230 230 230 / 1.0); 1181 --color-selected-variant-background: rgb(0 0 0 / 1.0); 1182 --color-selected-variant-border: rgb(0 0 0 / 1.0); 1183 --color-selected-variant-text: rgb(255 255 255 / 1.0); 1184 --color-selected-variant-hover-background: rgb(26 26 26 / 1.0); 1185 --color-selected-variant-hover-text: rgb(255 255 255 / 1.0); 1186 --color-selected-variant-hover-border: rgb(26 26 26 / 1.0); 1187 1188 --input-disabled-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10)); 1189 --input-disabled-border-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15)); 1190 --input-disabled-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50)); 1191 --color-foreground-muted: rgb(var(--color-foreground-rgb) / var(--opacity-60)); 1192 --font-h1--color: var(--color-foreground-heading); 1193 --font-h2--color: var(--color-foreground-heading); 1194 --font-h3--color: var(--color-foreground-heading); 1195 --font-h4--color: var(--color-foreground-heading); 1196 --font-h5--color: var(--color-foreground-heading); 1197 --font-h6--color: var(--color-foreground-heading); 1198 1199 /* Shadows */ 1200 1201 --shadow-drawer: 0px 4px 20px rgb(var(--color-shadow-rgb) / var(--opacity-15)); 1202 1203 1204 --shadow-blur: 20px; 1205 --shadow-popover: 0px 4px 20px rgb(var(--color-shadow-rgb) / var(--opacity-15)); 1206 1207 } 1208 1209 1210 1211 1212 .color-scheme-5 { 1213 --color-background: rgb(0 0 0 / 1.0); 1214 /* RGB values only to apply different opacities - Relative color values are not supported in iOS < 16.4 */ 1215 --color-background-rgb: 0 0 0; 1216 --opacity-5-15: 0.15; 1217 --opacity-10-25: 0.25; 1218 --opacity-35-55: 0.55; 1219 --opacity-40-60: 0.6; 1220 --opacity-30-60: 0.6; 1221 --color-foreground: rgb(255 255 255 / 1.0); 1222 --color-foreground-rgb: 255 255 255; 1223 --color-foreground-heading: rgb(255 255 255 / 1.0); 1224 --color-foreground-heading-rgb: 255 255 255; 1225 --color-primary: rgb(255 255 255 / 1.0); 1226 --color-primary-rgb: 255 255 255; 1227 --color-primary-hover: rgb(255 255 255 / 0.69); 1228 --color-primary-hover-rgb: 255 255 255; 1229 --color-border: rgb(255 255 255 / 0.69); 1230 --color-border-rgb: 255 255 255; 1231 --color-shadow: rgb(0 0 0 / 1.0); 1232 --color-shadow-rgb: 0 0 0; 1233 --color-primary-button-text: rgb(0 0 0 / 1.0); 1234 --color-primary-button-background: rgb(255 255 255 / 1.0); 1235 --color-primary-button-border: rgb(255 255 255 / 1.0); 1236 --color-primary-button-hover-text: rgb(255 255 255 / 1.0); 1237 --color-primary-button-hover-background: rgb(0 0 0 / 1.0); 1238 --color-primary-button-hover-border: rgb(0 0 0 / 1.0); 1239 --color-secondary-button-text: rgb(255 255 255 / 1.0); 1240 --color-secondary-button-background: rgb(0 0 0 / 0.0); 1241 --color-secondary-button-border: rgb(255 255 255 / 0.69); 1242 --color-secondary-button-hover-text: rgb(255 255 255 / 0.93); 1243 --color-secondary-button-hover-background: rgb(255 255 255 / 0.04); 1244 --color-secondary-button-hover-border: rgb(255 255 255 / 0.69); 1245 --color-input-background: rgb(0 0 0 / 1.0); 1246 --color-input-text: rgb(255 255 255 / 0.93); 1247 --color-input-text-rgb: 255 255 255; 1248 --color-input-border: rgb(255 255 255 / 0.69); 1249 --color-input-hover-background: rgb(255 255 255 / 0.04); 1250 --color-variant-background: rgb(255 255 255 / 1.0); 1251 --color-variant-border: rgb(230 230 230 / 1.0); 1252 --color-variant-text: rgb(0 0 0 / 1.0); 1253 --color-variant-text-rgb: 0 0 0; 1254 --color-variant-hover-background: rgb(245 245 245 / 1.0); 1255 --color-variant-hover-text: rgb(0 0 0 / 1.0); 1256 --color-variant-hover-border: rgb(230 230 230 / 1.0); 1257 --color-selected-variant-background: rgb(0 0 0 / 1.0); 1258 --color-selected-variant-border: rgb(0 0 0 / 1.0); 1259 --color-selected-variant-text: rgb(255 255 255 / 1.0); 1260 --color-selected-variant-hover-background: rgb(26 26 26 / 1.0); 1261 --color-selected-variant-hover-text: rgb(255 255 255 / 1.0); 1262 --color-selected-variant-hover-border: rgb(26 26 26 / 1.0); 1263 1264 --input-disabled-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10)); 1265 --input-disabled-border-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15)); 1266 --input-disabled-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50)); 1267 --color-foreground-muted: rgb(var(--color-foreground-rgb) / var(--opacity-60)); 1268 --font-h1--color: var(--color-foreground-heading); 1269 --font-h2--color: var(--color-foreground-heading); 1270 --font-h3--color: var(--color-foreground-heading); 1271 --font-h4--color: var(--color-foreground-heading); 1272 --font-h5--color: var(--color-foreground-heading); 1273 --font-h6--color: var(--color-foreground-heading); 1274 1275 /* Shadows */ 1276 1277 --shadow-drawer: 0px 4px 20px rgb(var(--color-shadow-rgb) / var(--opacity-15)); 1278 1279 1280 --shadow-blur: 20px; 1281 --shadow-popover: 0px 4px 20px rgb(var(--color-shadow-rgb) / var(--opacity-15)); 1282 1283 } 1284 1285 1286 1287 1288 .color-scheme-6 { 1289 --color-background: rgb(0 0 0 / 0.0); 1290 /* RGB values only to apply different opacities - Relative color values are not supported in iOS < 16.4 */ 1291 --color-background-rgb: 0 0 0; 1292 --opacity-5-15: 0.15; 1293 --opacity-10-25: 0.25; 1294 --opacity-35-55: 0.55; 1295 --opacity-40-60: 0.6; 1296 --opacity-30-60: 0.6; 1297 --color-foreground: rgb(255 255 255 / 1.0); 1298 --color-foreground-rgb: 255 255 255; 1299 --color-foreground-heading: rgb(255 255 255 / 1.0); 1300 --color-foreground-heading-rgb: 255 255 255; 1301 --color-primary: rgb(255 255 255 / 1.0); 1302 --color-primary-rgb: 255 255 255; 1303 --color-primary-hover: rgb(255 255 255 / 0.69); 1304 --color-primary-hover-rgb: 255 255 255; 1305 --color-border: rgb(230 230 230 / 1.0); 1306 --color-border-rgb: 230 230 230; 1307 --color-shadow: rgb(0 0 0 / 1.0); 1308 --color-shadow-rgb: 0 0 0; 1309 --color-primary-button-text: rgb(0 0 0 / 1.0); 1310 --color-primary-button-background: rgb(255 255 255 / 1.0); 1311 --color-primary-button-border: rgb(255 255 255 / 1.0); 1312 --color-primary-button-hover-text: rgb(255 255 255 / 1.0); 1313 --color-primary-button-hover-background: rgb(0 0 0 / 1.0); 1314 --color-primary-button-hover-border: rgb(0 0 0 / 1.0); 1315 --color-secondary-button-text: rgb(255 255 255 / 1.0); 1316
1316--color-secondary-button-background: rgb(0 0 0 / 0.0); 1317 --color-secondary-button-border: rgb(255 255 255 / 1.0); 1318 --color-secondary-button-hover-text: rgb(255 255 255 / 1.0); 1319 --color-secondary-button-hover-background: rgb(255 255 255 / 0.08); 1320 --color-secondary-button-hover-border: rgb(255 255 255 / 1.0); 1321 --color-input-background: rgb(255 255 255 / 1.0); 1322 --color-input-text: rgb(0 0 0 / 0.53); 1323 --color-input-text-rgb: 0 0 0; 1324 --color-input-border: rgb(0 0 0 / 0.13); 1325 --color-input-hover-background: rgb(250 250 250 / 1.0); 1326 --color-variant-background: rgb(255 255 255 / 1.0); 1327 --color-variant-border: rgb(230 230 230 / 1.0); 1328 --color-variant-text: rgb(0 0 0 / 1.0); 1329 --color-variant-text-rgb: 0 0 0; 1330 --color-variant-hover-background: rgb(245 245 245 / 1.0); 1331 --color-variant-hover-text: rgb(0 0 0 / 1.0); 1332 --color-variant-hover-border: rgb(230 230 230 / 1.0); 1333 --color-selected-variant-background: rgb(0 0 0 / 1.0); 1334 --color-selected-variant-border: rgb(0 0 0 / 1.0); 1335 --color-selected-variant-text: rgb(255 255 255 / 1.0); 1336 --color-selected-variant-hover-background: rgb(26 26 26 / 1.0); 1337 --color-selected-variant-hover-text: rgb(255 255 255 / 1.0); 1338 --color-selected-variant-hover-border: rgb(26 26 26 / 1.0); 1339 1340 --input-disabled-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10)); 1341 --input-disabled-border-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15)); 1342 --input-disabled-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50)); 1343 --color-foreground-muted: rgb(var(--color-foreground-rgb) / var(--opacity-60)); 1344 --font-h1--color: var(--color-foreground-heading); 1345 --font-h2--color: var(--color-foreground-heading); 1346 --font-h3--color: var(--color-foreground-heading); 1347 --font-h4--color: var(--color-foreground-heading); 1348 --font-h5--color: var(--color-foreground-heading); 1349 --font-h6--color: var(--color-foreground-heading); 1350 1351 /* Shadows */ 1352 1353 --shadow-drawer: 0px 4px 20px rgb(var(--color-shadow-rgb) / var(--opacity-15)); 1354 1355 1356 --shadow-blur: 20px; 1357 --shadow-popover: 0px 4px 20px rgb(var(--color-shadow-rgb) / var(--opacity-15)); 1358 1359 } 1360 1361 1362 1363 1364 .color-scheme-58084d4c-a86e-4d0a-855e-a0966e5043f7 { 1365 --color-background: rgb(0 0 0 / 0.0); 1366 /* RGB values only to apply different opacities - Relative color values are not supported in iOS < 16.4 */ 1367 --color-background-rgb: 0 0 0; 1368 --opacity-5-15: 0.15; 1369 --opacity-10-25: 0.25; 1370 --opacity-35-55: 0.55; 1371 --opacity-40-60: 0.6; 1372 --opacity-30-60: 0.6; 1373 --color-foreground: rgb(0 0 0 / 1.0); 1374 --color-foreground-rgb: 0 0 0; 1375 --color-foreground-heading: rgb(0 0 0 / 1.0); 1376 --color-foreground-heading-rgb: 0 0 0; 1377 --color-primary: rgb(0 0 0 / 1.0); 1378 --color-primary-rgb: 0 0 0; 1379 --color-primary-hover: rgb(0 0 0 / 0.53); 1380 --color-primary-hover-rgb: 0 0 0; 1381 --color-border: rgb(230 230 230 / 1.0); 1382 --color-border-rgb: 230 230 230; 1383 --color-shadow: rgb(0 0 0 / 1.0); 1384 --color-shadow-rgb: 0 0 0; 1385 --color-primary-button-text: rgb(255 255 255 / 1.0); 1386 --color-primary-button-background: rgb(0 0 0 / 1.0); 1387 --color-primary-button-border: rgb(0 0 0 / 1.0); 1388 --color-primary-button-hover-text: rgb(255 255 255 / 1.0); 1389 --color-primary-button-hover-background: rgb(51 51 51 / 1.0); 1390 --color-primary-button-hover-border: rgb(51 51 51 / 1.0); 1391 --color-secondary-button-text: rgb(0 0 0 / 1.0); 1392 --color-secondary-button-background: rgb(0 0 0 / 0.0); 1393 --color-secondary-button-border: rgb(0 0 0 / 1.0); 1394 --color-secondary-button-hover-text: rgb(51 51 51 / 1.0); 1395 --color-secondary-button-hover-background: rgb(250 250 250 / 1.0); 1396 --color-secondary-button-hover-border: rgb(51 51 51 / 1.0); 1397 --color-input-background: rgb(255 255 255 / 1.0); 1398 --color-input-text: rgb(0 0 0 / 0.53); 1399 --color-input-text-rgb: 0 0 0; 1400 --color-input-border: rgb(0 0 0 / 0.13); 1401 --color-input-hover-background: rgb(250 250 250 / 1.0); 1402 --color-variant-background: rgb(255 255 255 / 1.0); 1403 --color-variant-border: rgb(230 230 230 / 1.0); 1404 --color-variant-text: rgb(0 0 0 / 1.0); 1405 --color-variant-text-rgb: 0 0 0; 1406 --color-variant-hover-background: rgb(245 245 245 / 1.0); 1407 --color-variant-hover-text: rgb(0 0 0 / 1.0); 1408 --color-variant-hover-border: rgb(230 230 230 / 1.0); 1409 --color-selected-variant-background: rgb(0 0 0 / 1.0); 1410 --color-selected-variant-border: rgb(0 0 0 / 1.0); 1411 --color-selected-variant-text: rgb(255 255 255 / 1.0); 1412 --color-selected-variant-hover-background: rgb(26 26 26 / 1.0); 1413 --color-selected-variant-hover-text: rgb(255 255 255 / 1.0); 1414 --color-selected-variant-hover-border: rgb(26 26 26 / 1.0); 1415 1416 --input-disabled-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10)); 1417 --input-disabled-border-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15)); 1418 --input-disabled-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50)); 1419 --color-foreground-muted: rgb(var(--color-foreground-rgb) / var(--opacity-60)); 1420 --font-h1--color: var(--color-foreground-heading); 1421 --font-h2--color: var(--color-foreground-heading); 1422 --font-h3--color: var(--color-foreground-heading); 1423 --font-h4--color: var(--color-foreground-heading); 1424 --font-h5--color: var(--color-foreground-heading); 1425 --font-h6--color: var(--color-foreground-heading); 1426 1427 /* Shadows */ 1428 1429 --shadow-drawer: 0px 4px 20px rgb(var(--color-shadow-rgb) / var(--opacity-15)); 1430 1431 1432 --shadow-blur: 20px; 1433 --shadow-popover: 0px 4px 20px rgb(var(--color-shadow-rgb) / var(--opacity-15)); 1434 1435 } 1436 1437 1438 body, .color-scheme-1, .color-scheme-2, .color-scheme-3, .color-scheme-4, .color-scheme-5, .color-scheme-6, .color-scheme-58084d4c-a86e-4d0a-855e-a0966e5043f7 { 1439 color: var(--color-foreground); 1440 background-color: var(--color-background); 1441 } 1442</style>
1443<script>window.performance && window.performance.mark && window.performance.mark('shopify.content_for_header.start');</script>
1443<meta name="google-site-verification" content="0K_33EXfheFI57hf09d9g6taxEGsuc1td6490lj9EYw"> 1444<meta name="google-site-verification" content="-IEMosifAkpKzU_9omFKxdAkT4TFMF4hODdytCD_i4I"> 1445<meta name="facebook-domain-verification" content="q6oo25pm2vfko138l3kruof2ffpk2r"> 1446<meta name="facebook-domain-verification" content="61yxzujytednh6epm8md1plkj0rtln"> 1447<meta id="shopify-digital-wallet" name="shopify-digital-wallet" content="/8191115315/digital_wallets/dialog"> 1448<meta id="in-context-paypal-metadata" data-shop-id="8191115315" data-venmo-supported="false" data-environment="production" data-locale="en_US" data-paypal-v4="true" data-currency="USD">
1449<script async="async" src="/checkouts/internal/preloads.js?locale=en-US&default_configuration_id=27623690"></script>
1449 1450<link rel="preconnect" href="https://shop.app" crossorigin="anonymous">
1451<script async="async" src="https://shop.app/checkouts/internal/preloads.js?locale=en-US&default_configuration_id=27623690&shop_id=8191115315" crossorigin="anonymous"></script>
vendor: 1 bytes, line 1451
1451
1452<script id="apple-pay-shop-capabilities" type="application/json">{"shopId":8191115315,"countryCode":"DE","currencyCode":"USD","merchantCapabilities":["supports3DS"],"merchantId":"gid:\/\/shopify\/Shop\/8191115315","merchantName":"COLORS","requiredBillingContactFields":["postalAddress","email","phone"],"requiredShippingContactFields":["postalAddress","email","phone"],"shippingType":"shipping","supportedNetworks":["visa","maestro","masterCard","amex"],"total":{"type":"pending","label":"COLORS","amount":"1.00"},"shopifyPaymentsEnabled":true,"supportsSubscriptions":true}</script>
vendor: 1 bytes, line 1452
1452
1453<script id="shopify-features" type="application/json">{"accessToken":"b66bcc3ab9547318aa27807c7611d1f8","betas":["rich-media-storefront-analytics"],"domain":"shop.colorsxstudios.com","predictiveSearch":true,"shopId":8191115315,"locale":"en"}</script>
vendor: 1 bytes, line 1453
1453
1454<script>var Shopify = Shopify || {}; 1455Shopify.shop = "colorsxstudios.myshopify.com"; 1456Shopify.locale = "en"; 1457Shopify.currency = {"active":"USD","rate":"1.1606784"}; 1458Shopify.country = "US"; 1459Shopify.theme = {"name":"ðâðð¶ðð²","id":189958226186,"schema_name":"Horizon","schema_version":"3.5.1","theme_store_id":null,"role":"main"}; 1460Shopify.theme.handle = "null"; 1461Shopify.theme.style = {"id":null,"handle":null}; 1462Shopify.cdnHost = "shop.colorsxstudios.com/cdn"; 1463Shopify.routes = Shopify.routes || {}; 1464Shopify.routes.root = "/"; 1465Shopify.shopJsCdnBaseUrl = "https://cdn.shopify.com/shopifycloud/shop-js"; 1466Shopify.SignInWithShop = Shopify.SignInWithShop || {}; 1467Shopify.SignInWithShop.User = Shopify.SignInWithShop.User || {}; 1468Shopify.SignInWithShop.User.recognized = false;</script>
vendor: 1 bytes, line 1468
1468
1469<script type="module">!function(o){(o.Shopify=o.Shopify||{}).modules=!0}(window);</script>
vendor: 1 bytes, line 1469
1469
1470<script>!function(o){function n(){var o=[];function n(){o.push(Array.prototype.slice.apply(arguments))}return n.q=o,n}var t=o.Shopify=o.Shopify||{};t.loadFeatures=n(),t.autoloadFeatures=n()}(window);</script>
vendor: 1 bytes, line 1470
1470
1471<script> 1472 window.ShopifyPay = window.ShopifyPay || {}; 1473 window.ShopifyPay.apiHost = "shop.app\/pay"; 1474 window.ShopifyPay.redirectState = null; 1475</script>
vendor: 1 bytes, line 1475
1475
1476<script> 1477 window.Shopify = window.Shopify || {}; 1478 window.Shopify.SignInWithShop = window.Shopify.SignInWithShop || {}; 1479 window.Shopify.SignInWithShop.assetMetrics = { sampleRate: 0.25 }; 1480 window.Shopify.SignInWithShop.eligible = true; 1481</script>
vendor: 1 bytes, line 1481
1481
1482<script id="shop-js-analytics" type="application/json">{"pageType":"index"}</script>
vendor: 1 bytes, line 1482
1482
1483<script defer="defer" async type="module" src="https://cdn.shopify.com/shopifycloud/shop-js/modules/v2/loader.init-shop-cart-sync.en.esm.js"></script>
vendor: 1 bytes, line 1483
1483
1484<script type="module"> 1485 await import("https://cdn.shopify.com/shopifycloud/shop-js/modules/v2/loader.init-shop-cart-sync.en.esm.js"); 1486 1487 window.Shopify.SignInWithShop?.initShopCartSync?.({"fedCMEnabled":true,"windoidEnabled":true}); 1488 1489</script>
vendor: 1 bytes, line 1489
1489
1490<script> 1491 window.Shopify = window.Shopify || {}; 1492 if (!window.Shopify.featureAssets) window.Shopify.featureAssets = {}; 1493 window.Shopify.featureAssets['shop-js'] = {"avatar":["modules/v2/loader.avatar.en.esm.js"],"checkout-modal":["modules/v2/loader.checkout-modal.en.esm.js"],"init-customer-accounts-sign-up":["modules/v2/loader.init-customer-accounts-sign-up.en.esm.js"],"init-customer-accounts":["modules/v2/loader.init-customer-accounts.en.esm.js"],"init-fed-cm":["modules/v2/loader.init-fed-cm.en.esm.js"],"init-shop-cart-sync":["modules/v2/loader.init-shop-cart-sync.en.esm.js"],"init-shop-email-lookup-coordinator":["modules/v2/loader.init-shop-email-lookup-coordinator.en.esm.js"],"init-shop-for-new-customer-accounts":["modules/v2/loader.init-shop-for-new-customer-accounts.en.esm.js"],"init-shop-user-recognition":["modules/v2/loader.init-shop-user-recognition.en.esm.js"],"init-windoid":["modules/v2/loader.init-windoid.en.esm.js"],"lead-capture":["modules/v2/loader.lead-capture.en.esm.js"],"listener":["modules/v2/loader.listener.en.esm.js"],"pay-button":["modules/v2/loader.pay-button.en.esm.js"],"payment-terms":["modules/v2/loader.payment-terms.en.esm.js"],"shop-button":["modules/v2/loader.shop-button.en.esm.js"],"shop-cart-sync":["modules/v2/loader.shop-cart-sync.en.esm.js"],"shop-cash-offers":["modules/v2/loader.shop-cash-offers.en.esm.js"],"shop-follow-button":["modules/v2/loader.shop-follow-button.en.esm.js"],"shop-login-button":["modules/v2/loader.shop-login-button.en.esm.js"],"shop-login":["modules/v2/loader.shop-login.en.esm.js"],"shop-toast-manager":["modules/v2/loader.shop-toast-manager.en.esm.js"],"shop-user-recognition":["modules/v2/loader.shop-user-recognition.en.esm.js"]}; 1494</script>
vendor: 1 bytes, line 1494
1494
1495<script>(function() { 1496 var isLoaded = false; 1497 function asyncLoad() { 1498 if (isLoaded) return; 1499 isLoaded = true; 1500 var urls = ["https:\/\/chimpstatic.com\/mcjs-connected\/js\/users\/82ddb5cdd7df2ce7c0a7fde31\/476460234b24289a81c802118.js?shop=colorsxstudios.myshopify.com","\/\/cdn.secomapp.com\/currency_switcher\/\/scripts\/colorsxstudios.20210206001318.scripttag.js?shop=colorsxstudios.myshopify.com","https:\/\/easygdpr.b-cdn.net\/v\/1553540745\/gdpr.min.js?shop=colorsxstudios.myshopify.com"]; 1501 for (var i = 0; i < urls.length; i++) { 1502 var s = document.createElement('script'); 1503 s.type = 'text/javascript'; 1504 s.async = true; 1505 s.src = urls[i]; 1506 var x = document.getElementsByTagName('script')[0]; 1507 x.parentNode.insertBefore(s, x); 1508 } 1509 }; 1510 if(window.attachEvent) { 1511 window.attachEvent('onload', asyncLoad); 1512 } else { 1513 window.addEventListener('load', asyncLoad, false); 1514 } 1515})();</script>
vendor: 1 bytes, line 1515
1515
1516<script id="__st">var __st={"a":8191115315,"offset":7200,"reqid":"2784f466-6aed-4e15-bad4-9fdb6123bba1-1790271987","pageurl":"shop.colorsxstudios.com\/","u":"02923300c001","p":"home"};</script>
vendor: 1 bytes, line 1516
1516
1517<script>window.ShopifyPaypalV4VisibilityTracking = true;</script>
vendor: 1 bytes, line 1517
1517
1518<script id="captcha-bootstrap">!function(){'use strict';const t='contact',e='account',n='new_comment',o=[[t,t],['blogs',n],['comments',n],[t,'customer']],c=[[e,'customer_login'],[e,'guest_login'],[e,'recover_customer_password'],[e,'create_customer']],r=t=>t.map((([t,e])=>`form[action*='/${t}']:not([data-nocaptcha='true']) input[name='form_type'][value='${e}']`)).join(','),a=t=>()=>t?[...document.querySelectorAll(t)].map((t=>t.form)):[];function s(){const t=[...o],e=r(t);return a(e)}const i='password',u='form_key',d=['recaptcha-v3-token','g-recaptcha-response','h-captcha-response',i],f=()=>{try{return window.sessionStorage}catch{return}},m='__shopify_v',_=t=>t.elements[u];function p(t,e,n=!1){try{const o=window.sessionStorage,c=JSON.parse(o.getItem(e)),{data:r}=function(t){const{data:e,action:n}=t;return t[m]||n?{data:e,action:n}:{data:t,action:n}}(c);for(const[e,n]of Object.entries(r))t.elements[e]&&(t.elements[e].value=n);n&&o.removeItem(e)}catch(o){console.error('form repopulation failed',{error:o})}}const l='form_type',E='cptcha';function T(t){t.dataset[E]=!0}const w=window,h=w.document,L='Shopify',v='ce_forms',y='captcha';let A=!1;((t,e)=>{const n=(g='f06e6c50-85a8-45c8-87d0-21a2b65856fe',I='https://cdn.shopify.com/shopifycloud/storefront-forms-hcaptcha/ce_storefront_forms_captcha_hcaptcha.v1.5.3.iife.js',D={infoText:'Protected by hCaptcha',privacyText:'Privacy',termsText:'Terms'},(t,e,n)=>{const o=w[L][v],c=o.bindForm;if(c)return c(t,g,e,D).then(n);var r;o.q.push([[t,g,e,D],n]),r=I,A||(h.body.append(Object.assign(h.createElement('script'),{id:'captcha-provider',async:!0,src:r})),A=!0)});var g,I,D;w[L]=w[L]||{},w[L][v]=w[L][v]||{},w[L][v].q=[],w[L][y]=w[L][y]||{},w[L][y].protect=function(t,e){n(t,void 0,e),T(t)},Object.freeze(w[L][y]),function(t,e,n,w,h,L){const[v,y,A,g]=function(t,e,n){const i=e?o:[],u=t?c:[],d=[...i,...u],f=r(d),m=r(i),_=r(d.filter((([t,e])=>n.includes(e))));return[a(f),a(m),a(_),s()]}(w,h,L),I=t=>{const e=t.target;return e instanceof HTMLFormElement?e:e&&e.form},D=t=>v().includes(t);t.addEventListener('submit',(t=>{const e=I(t);if(!e)return;const n=D(e)&&!e.dataset.hcaptchaBound&&!e.dataset.recaptchaBound,o=_(e),c=g().includes(e)&&(!o||!o.value);(n||c)&&t.preventDefault(),c&&!n&&(function(t){try{if(!f())return;!function(t){const e=f();if(!e)return;const n=_(t);if(!n)return;const o=n.value;o&&e.removeItem(o)}(t);const e=Array.from(Array(32),(()=>Math.random().toString(36)[2])).join('');!function(t,e){_(t)||t.append(Object.assign(document.createElement('input'),{type:'hidden',name:u})),t.elements[u].value=e}(t,e),function(t,e){const n=f();if(!n)return;const o=[...t.querySelectorAll(`input[type='${i}']`)].map((({name:t})=>t)),c=[...d,...o],r={};for(const[a,s]of new FormData(t).entries())c.includes(a)||(r[a]=s);n.setItem(e,JSON.stringify({[m]:1,action:t.action,data:r}))}(t,e)}catch(e){console.error('failed to persist form',e)}}(e),e.submit())}));const S=(t,e)=>{t&&!t.dataset[E]&&(n(t,e.some((e=>e===t))),T(t))};for(const o of['focusin','change'])t.addEventListener(o,(t=>{const e=I(t);D(e)&&S(e,y())}));const B=e.get('form_key'),M=e.get(l),P=B&&M;t.addEventListener('DOMContentLoaded',(()=>{const t=y();if(P)for(const e of t)e.elements[l].value===M&&p(e,B);[...new Set([...A(),...v().filter((t=>'true'===t.dataset.shopifyCaptcha))])].forEach((e=>S(e,t)))}))}(h,new URLSearchParams(w.location.search),n,t,e,['guest_login'])})(!0,!0)}();</script>
vendor: 1 bytes, line 1518
1518
1519<script integrity="sha256-JjoPp5ZfB1sSAs5SQaol1x1GgvveM+BgmRzyDexInEQ=" data-source-attribution="shopify.loadfeatures" defer="defer" src="//shop.colorsxstudios.com/cdn/shopifycloud/storefront/assets/storefront/load_feature-1bd60354.js" crossorigin="anonymous"></script>
vendor: 1 bytes, line 1519
1519
1520<script>(function () {var userAgent = navigator.userAgent;var platform = navigator.platform;var maxTouchPoints = navigator.maxTouchPoints || 0;var isIOS = /iPad|iPhone|iPod/.test(platform) || (platform === 'MacIntel' && maxTouchPoints > 1);var isMacSafari = platform.indexOf('Mac') === 0 && /Safari/.test(userAgent) && !/Chrome|Chromium|CriOS|FxiOS|Edg|OPR|Android/.test(userAgent);var isAppleSafari = isIOS || isMacSafari;if (isAppleSafari) {fetch('/sf_private_access_tokens' + location.search).catch(function () {});}function browserMajorVersion(pattern) {var match = userAgent.match(pattern);return match ? parseInt(match[1], 10) : null;}function shouldLoadAutosizesPolyfill() {if (!window.PerformanceObserver?.supportedEntryTypes?.includes('paint')) {return false;}var chromeVersion = browserMajorVersion(/Chrome\/(\d+)/);if (chromeVersion !== null) {return chromeVersion < 126;}var firefoxVersion = browserMajorVersion(/Firefox\/(\d+)/);if (firefoxVersion !== null) {return firefoxVersion < 150;}var safariVersion = isAppleSafari ? browserMajorVersion(/Version\/(\d+).*Safari\//) : null;if (safariVersion !== null) {return safariVersion < 27;}return true;}if (shouldLoadAutosizesPolyfill()) {var autosizesScript = document.createElement('script');autosizesScript.async = true;autosizesScript.crossOrigin = 'anonymous';autosizesScript.src = "//shop.colorsxstudios.com/cdn/shopifycloud/storefront/assets/storefront/autosizes-84416378.js";(document.head || document.documentElement).appendChild(autosizesScript);}window.ShopifyAnalytics = window.ShopifyAnalytics || {};window.ShopifyAnalytics.performance = window.ShopifyAnalytics.performance || {};(function () {var LONG_FRAME_THRESHOLD = 50;var longAnimationFrames = [];var activeRafId = null;function collectLongFrames() {var previousTime = null;function rafMonitor(now) {if (activeRafId === null) {return;}var delta = now - previousTime;if (delta > LONG_FRAME_THRESHOLD) {longAnimationFrames.push({startTime: previousTime,endTime: now,});}previousTime = now;activeRafId = requestAnimationFrame(rafMonitor);}previousTime = performance.now();activeRafId = requestAnimationFrame(rafMonitor);}if (!window.PerformanceObserver?.supportedEntryTypes?.includes('long-animation-frame')) {collectLongFrames();var timeoutId = setTimeout(function () {cancelAnimationFrame(activeRafId);}, 10000);window.ShopifyAnalytics.performance.getLongAnimationFrames = function (stopCollection) {if (stopCollection === undefined) {stopCollection = false;}if (stopCollection) {clearTimeout(timeoutId);cancelAnimationFrame(activeRafId);}return longAnimationFrames;};}})();})();</script>
1520<script crossorigin="anonymous" defer="defer" src="//shop.colorsxstudios.com/cdn/shopifycloud/storefront/assets/shopify_pay/storefront-616277c7.js?v=20250812"></script>
vendor: 1 bytes, line 1520
1520
1521<script id="shopify-origin-trials" async="async" integrity="sha256-qJbe/jEZBHtr5W/BlA2cKAz3vkXu6vJQyLjgvgCC86g=" src="//cdn.shopify.com/shopifycloud/storefront/assets/storefront/origin_trials-318ab40a.js" crossorigin="anonymous" onload="window.__shopifyOriginTrialsDone = true" onerror="window.__shopifyOriginTrialsDone = true"></script>
vendor: 1 bytes, line 1521
1521
1522<script> 1523 window.Shopify = window.Shopify || {}; 1524 window.Shopify.MCP = window.Shopify.MCP || {}; 1525 window.Shopify.MCP.enabled = true; 1526 window.Shopify.MCP.shop = "colorsxstudios.myshopify.com"; 1527 window.Shopify.MCP.mcpEndpoint = "https:\/\/shop.colorsxstudios.com\/api\/mcp"; 1528 window.Shopify.MCP.tools = [{"name":"search_shop_policies_and_faqs","description":"Used to get facts about the stores policies, products, or services.\nSome examples of questions you can ask are:\n - What is your return policy?\n - What is your shipping policy?\n - What is your phone number?\n - What are your hours of operation?\"\n","inputSchema":{"$schema":"https:\/\/json-schema.org\/draft\/2020-12\/schema","type":"object","properties":{"query":{"type":"string","description":"A natural language query."},"context":{"type":"string","description":"Additional information about the request such as user demographics, mood, location, or other relevant details that could help in tailoring the response appropriately."}},"required":["query"]}}]; 1529</script>
vendor: 1 bytes, line 1529
1529
1530<script>(()=>{var d="shopify:webmcp_adapter_loaded",n=Symbol.for("shopify.webmcp_adapter_loading");function s(c,a,{win:r=window,doc:o=document}={}){function p(){try{return r.localStorage.getItem(d)==="true"}catch{return!1}}function l(){try{r.localStorage.setItem(d,"true")}catch{}}function u(){return typeof(o.modelContext||r.navigator?.modelContext)?.registerTool=="function"}function f(){if(r[n]||!u())return;let t=o.head||o.getElementsByTagName("head")[0];if(!t)return;let e=o.createElement("script");e.type="module",e.crossOrigin="anonymous",a&&(e.integrity=a),e.src=c,e.addEventListener("load",l,{once:!0}),e.addEventListener("error",()=>{r[n]=!1},{once:!0}),t.appendChild(e),r[n]=!0}function _(t){let e=o.getElementById("shopify-origin-trials");if(!e||r.__shopifyOriginTrialsDone){t();return}e.addEventListener("load",t,{once:!0}),e.addEventListener("error",t,{once:!0})}function i(){_(()=>r.setTimeout(f,0))}function m(){o.addEventListener("DOMContentLoaded",i,{once:!0})}p()?i():m()}s("\/\/shop.colorsxstudios.com\/cdn\/shopifycloud\/storefront\/assets\/storefront\/webmcp-c6b62ece.js","sha256-ke4DDuBjdvea3vxLWxHc9E9nq8zihuG4IfYEGbb77ys=");})(); 1531</script>
vendor: 1 bytes, line 1531
1531
1532<script data-source-attribution="shopify.dynamic_checkout.dynamic.init">var Shopify=Shopify||{};Shopify.PaymentButton=Shopify.PaymentButton||{isStorefrontPortableWallets:!0,init:function(){window.Shopify.PaymentButton.init=function(){};var t=document.createElement("script");t.src="https://shop.colorsxstudios.com/cdn/shopifycloud/portable-wallets/latest/portable-wallets.en.js",t.type="module",document.head.appendChild(t)}}; 1533</script>
vendor: 1 bytes, line 1533
1533
1534<script data-source-attribution="shopify.dynamic_checkout.buyer_consent"> 1535 function portableWalletsHideBuyerConsent(e){var t=document.getElementById("shopify-buyer-consent"),n=document.getElementById("shopify-subscription-policy-button");t&&n&&(t.classList.add("hidden"),t.setAttribute("aria-hidden","true"),n.removeEventListener("click",e))}function portableWalletsShowBuyerConsent(e){var t=document.getElementById("shopify-buyer-consent"),n=document.getElementById("shopify-subscription-policy-button");t&&n&&(t.classList.remove("hidden"),t.removeAttribute("aria-hidden"),n.addEventListener("click",e))}window.Shopify?.PaymentButton&&(window.Shopify.PaymentButton.hideBuyerConsent=portableWalletsHideBuyerConsent,window.Shopify.PaymentButton.showBuyerConsent=portableWalletsShowBuyerConsent); 1536</script>
vendor: 1 bytes, line 1536
1536
1537<script data-source-attribution="shopify.dynamic_checkout.cart.bootstrap">document.addEventListener("DOMContentLoaded",(function(){function t(){return document.querySelector("shopify-accelerated-checkout-cart, shopify-accelerated-checkout")}if(t())Shopify.PaymentButton.init();else{new MutationObserver((function(e,n){t()&&(Shopify.PaymentButton.init(),n.disconnect())})).observe(document.body,{childList:!0,subtree:!0})}})); 1538</script>
1538 1539<link id="shopify-accelerated-checkout-styles" rel="stylesheet" media="screen" href="https://shop.colorsxstudios.com/cdn/shopifycloud/portable-wallets/latest/accelerated-checkout-backwards-compat.css" crossorigin="anonymous"> 1540<style id="shopify-accelerated-checkout-cart"> 1541 #shopify-buyer-consent { 1542 margin-top: 1em; 1543 display: inline-block; 1544 width: 100%; 1545} 1546 1547#shopify-buyer-consent.hidden { 1548 display: none; 1549} 1550 1551#shopify-subscription-policy-button { 1552 background: none; 1553 border: none; 1554 padding: 0; 1555 text-decoration: underline; 1556 font-size: inherit; 1557 cursor: pointer; 1558} 1559 1560#shopify-subscription-policy-button::before { 1561 box-shadow: none; 1562} 1563 1564 </style> 1565<link rel="stylesheet" media="screen" href="//shop.colorsxstudios.com/cdn/shop/t/26/compiled_assets/styles.css?v=25481792464600654891778591557">
1566<script id="shopify-cfh-end">window.performance && window.performance.mark && window.performance.mark('shopify.content_for_header.end');</script>
1566 1567 1568 <link href="https://monorail-edge.shopifysvc.com" rel="dns-prefetch">
1569<script>(function(){if ("sendBeacon" in navigator && "performance" in window) {try {var session_token_from_headers = performance.getEntriesByType('navigation')[0].serverTiming.find(x => x.name == '_s').description;} catch {var session_token_from_headers = undefined;}var session_cookie_matches = document.cookie.match(/_shopify_s=([^;]*)/);var session_token_from_cookie = session_cookie_matches && session_cookie_matches.length === 2 ? session_cookie_matches[1] : "";var session_token = session_token_from_headers || session_token_from_cookie || "";function handle_abandonment_event(e) {var entries = performance.getEntries().filter(function(entry) {return /monorail-edge.shopifysvc.com/.test(entry.name);});if (!window.abandonment_tracked && entries.length === 0) {window.abandonment_tracked = true;var currentMs = Date.now();var navigation_start = performance.timing.navigationStart;var payload = {shop_id: 8191115315,url: window.location.href,navigation_start,duration: currentMs - navigation_start,session_token,page_type: "index"};window.navigator.sendBeacon("https://monorail-edge.shopifysvc.com/v1/produce", JSON.stringify({schema_id: "online_store_buyer_site_abandonment/1.1",payload: payload,metadata: {event_created_at_ms: currentMs,event_sent_at_ms: currentMs}}));}}window.addEventListener('pagehide', handle_abandonment_event);}}());</script>
vendor: 1 bytes, line 1569
1569
1570<script> 1571 window.__TREKKIE_SHIM_QUEUE = window.__TREKKIE_SHIM_QUEUE || []; 1572</script>
vendor: 1 bytes, line 1572
1572
1573<script>(function(){var wpmLoader=function(){"use strict";var e=/Googlebot|Storebot-Google|bingbot|Baiduspider|YandexBot|DuckDuckBot|Slurp|facebookexternalhit|Twitterbot|LinkedInBot|Applebot|AdsBot-Google|Mediapartners-Google|APIs-Google|PetalBot|SemrushBot|AhrefsBot|MJ12bot|DotBot|Acunetix|PerplexityBot|Perplexity-User/i,t=/bytedance/i;function i(){try{var e=document.cookie;if(!e||"string"!=typeof e)return;for(var t=0,i=e.split(";");t<i.length;t++){var n=i[t],r=n.indexOf("=");if(-1!==r){var o=n.slice(0,r).trim();if(o){var a=void 0;try{a=decodeURIComponent(o)}catch(e){a=o}if("_shopify_s"===a){var d=n.slice(r+1).trim();try{return decodeURIComponent(d)}catch(e){return d}}}}}return}catch(e){return}}function n(e){try{"undefined"!=typeof console&&"function"==typeof console.warn&&console.warn(e)}catch(e){}}function r(e,t){return"string"==typeof e&&e.length>0&&e.length<=t?e:void 0}function o(e){var t;switch(null==(t=null==e?void 0:e.navigation)?void 0:t.type){case 0:return"navigate";case 1:return"reload";case 2:return"back_forward";default:return}}function a(){var e,t,i;try{var n=null==(i=null==(t=null==(e=self.ShopifyAnalytics)?void 0:e.lib)?void 0:t.trekkie)?void 0:i.state;return"awaiting-consent"===n||"initialized"===n?n:void 0}catch(e){return}}return function(d,s,u,l){var c=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};try{var p=c.trekkieShim;!0!==p&&"true"!==p||null!=window.__TREKKIE_SHIM_QUEUE||(window.__TREKKIE_SHIM_QUEUE=[])}catch(e){}var f,v,h,y,g=(v=(f={modern:/Edge?\/(1{2}[4-9]|1[2-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Firefox\/(1{2}[4-9]|1[2-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Chrom(ium|e)\/(9{2}|\d{3,})\.\d+(\.\d+|)|(Maci|X1{2}).+ Version\/(15\.\d+|(1[6-9]|[2-9]\d|\d{3,})\.\d+)([,.]\d+|)( \(\w+\)|)( Mobile\/\w+|) Safari\/|Chrome.+OPR\/(9{2}|\d{3,})\.\d+\.\d+|(CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS|CPU iPad OS)[ +]+(15[._]\d+|(1[6-9]|[2-9]\d|\d{3,})[._]\d+)([._]\d+|)|Android:?[ /-](14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})(\.\d+|)(\.\d+|)|Android.+Firefox\/(15\d|1[6-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+Chrom(ium|e)\/(14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|SamsungBrowser\/([2-9]\d|\d{3,})\.\d+/,legacy:/Edge?\/(1[6-9]|[2-9]\d|\d{3,})\.\d+(\.\d+|)|Firefox\/(5[4-9]|[6-9]\d|\d{3,})\.\d+(\.\d+|)|Chrom(ium|e)\/(5[1-9]|[6-9]\d|\d{3,})\.\d+(\.\d+|)([\d.]+$|.*Safari\/(?![\d.]+ Edge\/[\d.]+$))|(Maci|X1{2}).+ Version\/(10\.\d+|(1[1-9]|[2-9]\d|\d{3,})\.\d+)([,.]\d+|)( \(\w+\)|)( Mobile\/\w+|) Safari\/|Chrome.+OPR\/(3[89]|[4-9]\d|\d{3,})\.\d+\.\d+|(CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS|CPU iPad OS)[ +]+(10[._]\d+|(1[1-9]|[2-9]\d|\d{3,})[._]\d+)([._]\d+|)|Android:?[ /-](14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})(\.\d+|)(\.\d+|)|Mobile Safari.+OPR\/([89]\d|\d{3,})\.\d+\.\d+|Android.+Firefox\/(15\d|1[6-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+Chrom(ium|e)\/(14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+(UC? ?Browser|UCWEB|U3)[ /]?(15\.([5-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+)\.\d+|SamsungBrowser\/(5\.\d+|([6-9]|\d{2,})\.\d+)|Android.+MQ{2}Browser\/(14(\.(9|\d{2,})|)|(1[5-9]|[2-9]\d|\d{3,})(\.\d+|))(\.\d+|)|K[Aa][Ii]OS\/(3\.\d+|([4-9]|\d{2,})\.\d+)(\.\d+|)/}).modern,h=f.legacy,(y=navigator.userAgent).match(e)?"bot":y.match(v)?"modern":y.match(h)?"legacy":y.match(t)?"bot":"unknown"),m=function(e){var t,i,n=r(e,128);try{var a=window.performance,d=null==(t=null==a?void 0:a.getEntriesByType)?void 0:t.call(a,"navigation")[0];if(!d)return{requestId:n,navigationType:o(a)};var s="type"in d?r(d.type,64):void 0,u="serverTiming"in d&&Array.isArray(d.serverTiming)?d.serverTiming:[];return{requestId:null!=n?n:r(null==(i=u.find(function(e){return"requestID"===e.name}))?void 0:i.description,128),navigationType:s}}catch(e){return{requestId:n}}}(c.requestId),w=function(e){var t=e.version,r=e.browserTarget,o=e.surface,a=e.shopId,d=e.monorailEndpoint,s=window.location.href;return{emit:function(e){var u=e.status,l=e.errorMsg,c=e.failureReason,p=e.useKeepaliveFallback,f=void 0!==p&&p,v=e.navigationType,h=e.pagehidePersisted,y=e.requestId,g=e.trekkieState;if(d){var m,w;try{var b=(new Date).getTime();m=JSON.stringify({metadata:{event_sent_at_ms:b},events:[{schema_id:"web_pixels_manager_load/3.3",payload:{version:t,bundle_target:r,page_url:s,status:u,surface:o,error_msg:l,failure_reason:c,navigation_type:v,pagehide_persisted:h,request_id:y,trekkie_state:g,shop_id:a,visit_token:i()},metadata:{event_created_at_ms:b}}]})}catch(e){return}try{if("function"==typeof window.navigator.sendBeacon&&-1===(w=window.navigator.userAgent).indexOf("iPhone; CPU iPhone OS 12_")&&-1===w.indexOf("iPad; CPU OS 12_")&&-1===w.indexOf("iPod touch; CPU iPhone OS 12_")&&window.navigator.sendBeacon.bind(window.navigator)(d,m))return}catch(e){}if(f)try{"function"==typeof window.fetch&&window.fetch(d,{method:"POST",headers:{"Content-Type":"text/plain"},body:m,keepalive:!0}
1573).catch(function(){})}catch(e){}else try{var _=new XMLHttpRequest;_.open("POST",d,!0),_.setRequestHeader("Content-Type","text/plain"),_.send(m)}catch(e){n("[Web Pixels Manager] Got an unhandled error while logging to Monorail.")}}else n("[Web Pixels Manager] No Monorail endpoint provided, skipping logging.")}}}({version:u,browserTarget:g,surface:d.surface,shopId:d.shopId,monorailEndpoint:d.monorailEndpoint});if(Boolean(null==(_=null==(b=window.Shopify)?void 0:b.analytics)?void 0:_.replayQueue))w.emit({status:"setup-skipped",errorMsg:"replay queue already initialized."});else{var b,_;w.emit({status:"setup-started"}),window.Shopify=window.Shopify||{};var S=window.Shopify;S.analytics=S.analytics||{};var P=S.analytics;P.replayQueue=[],P.publish=function(e,t,i){return P.replayQueue.push([e,t,i]),!0};try{self.performance.mark("wpm:start")}catch(e){}var k,C="modern"===g?"modern":"legacy",E=(null!=l?l:{modern:"",legacy:""})[C],I=[(k={baseUrl:s,hashVersion:u,buildTarget:C}).baseUrl,"/wpm","/b",k.hashVersion,"modern"===k.buildTarget?"m":"l",".js"].join(""),O=!1,T=!1;try{c.browserTarget=g,function(){O=!0;try{window.addEventListener("pagehide",M)}catch(e){O=!1}}(),R(function(){try{R(x)}catch(e){D(e)}}),w.emit({status:"loading",requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()})}catch(e){D(e)}}function U(){var e;if(q(),!function(){var e,t;return Boolean(null==(t=null==(e=window.Shopify)?void 0:e.analytics)?void 0:t.initialized)}()){var t,i,n;try{if("function"!=typeof(null==(e=window.webPixelsManager)?void 0:e.init))return void A();if(!(null!==(n=i=t=window.webPixelsManager.init(d))&&"function"!=typeof n&&Object(n)===n&&"publish"in i&&"function"==typeof i.publish&&"publishCustomEvent"in i&&"function"==typeof i.publishCustomEvent&&"visitor"in i&&"function"==typeof i.visitor))return void A()}catch(e){return void A(e)}var r=window.Shopify.analytics;r.replayQueue.forEach(function(e){var i=e[0],n=e[1],r=e[2];t.publishCustomEvent(i,n,r)}),r.replayQueue=[],r.publish=t.publishCustomEvent,r.visitor=t.visitor,r.initialized=!0}}function A(e){B("manager_api_unavailable",void 0===e?void 0:Q(e))}function x(){B("script_load_failed","".concat(I," has failed to load"))}function B(e,t){T||(T=!0,q(),w.emit({status:"failed",errorMsg:t,failureReason:e,requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()}))}function M(e){O&&(q(),w.emit({status:"pagehide-while-loading",useKeepaliveFallback:!0,pagehidePersisted:e.persisted,requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()}))}function q(){O=!1;try{window.removeEventListener("pagehide",M)}catch(e){}}function R(e){var t;!function(e){var t=e.src,i=e.async,n=void 0===i||i,r=e.onload,o=e.onerror,a=e.sri,d=e.scriptDataAttributes,s=void 0===d?{}:d,u=document.createElement("script"),l=document.querySelector("head"),c=document.querySelector("body");if(u.async=n,u.src=t,a&&(u.integrity=a,u.crossOrigin="anonymous"),s)for(var p in s)if(Object.prototype.hasOwnProperty.call(s,p))try{u.dataset[p]=String(s[p])}catch(e){}if(r&&u.addEventListener("load",r),o&&u.addEventListener("error",o),l)l.appendChild(u);else{if(!c)throw new Error("Did not find a head or body element to append the script");c.appendChild(u)}}({src:I,async:!0,onload:U,onerror:e,sri:(t=E,"string"==typeof t&&/^sha384-[A-Za-z0-9+/=]+$/.test(t)?E:""),scriptDataAttributes:c})}function D(e){B("script_append_failed",Q(e))}function Q(e){return e instanceof Error?e.message:"Unknown error"}}}();wpmLoader({shopId: 8191115315,storefrontBaseUrl: "https://shop.colorsxstudios.com",extensionsBaseUrl: "https://extensions.shopifycdn.com/cdn/shopifycloud/web-pixels-manager",monorailEndpoint: "https://shop.colorsxstudios.com/.well-known/shopify/monorail/unstable/produce_batch",surface: "storefront-renderer",enabledBetaFlags: ["16072cab","8450a54b"],webPixelsConfigList: [{"id":"3509027082","configuration":"{\"mailchimp_store_id\":\"store_w3tray311wqfkvudd6ky\", \"mailchimp_user_id\":\"128400018\",\"mailchimp_list_id\":\"624c87a00c\"}","eventPayloadVersion":"v1","runtimeContext":"STRICT","scriptVersion":"e357a49eadeb6216a959d63fa3fb8f55","type":"APP","apiClientId":2585307,"privacyPurposes":["ANALYTICS","MARKETING","SALE_OF_DATA"],"dataSharingAdjustments":{"protectedCustomerApprovalScopes":["read_customer_address","read_customer_email","read_customer_name","read_customer_personal_data","read_customer_phone"],"dataSharingControls":["share_all_events"]},"dataSharingState":"optimized","enabledFlags":["9a3ed68a"]}
1573,{"id":"1722908938","configuration":"{\"config\":\"{\\\"google_tag_ids\\\":[\\\"G-GR9LWV0SDX\\\",\\\"GT-MB83T72F\\\"],\\\"target_country\\\":\\\"DE\\\",\\\"gtag_events\\\":[{\\\"type\\\":\\\"search\\\",\\\"action_label\\\":\\\"G-GR9LWV0SDX\\\"},{\\\"type\\\":\\\"begin_checkout\\\",\\\"action_label\\\":\\\"G-GR9LWV0SDX\\\"},{\\\"type\\\":\\\"remove_from_cart\\\",\\\"action_label\\\":\\\"G-GR9LWV0SDX\\\"},{\\\"type\\\":\\\"view_item\\\",\\\"action_label\\\":[\\\"G-GR9LWV0SDX\\\",\\\"MC-T5ZZ86WFZ3\\\"]},{\\\"type\\\":\\\"purchase\\\",\\\"action_label\\\":[\\\"G-GR9LWV0SDX\\\",\\\"MC-T5ZZ86WFZ3\\\"]},{\\\"type\\\":\\\"add_shipping_info\\\",\\\"action_label\\\":\\\"G-GR9LWV0SDX\\\"},{\\\"type\\\":\\\"page_view\\\",\\\"action_label\\\":[\\\"G-GR9LWV0SDX\\\",\\\"MC-T5ZZ86WFZ3\\\"]},{\\\"type\\\":\\\"view_item_list\\\",\\\"action_label\\\":\\\"G-GR9LWV0SDX\\\"},{\\\"type\\\":\\\"add_payment_info\\\",\\\"action_label\\\":\\\"G-GR9LWV0SDX\\\"},{\\\"type\\\":\\\"add_to_cart\\\",\\\"action_label\\\":\\\"G-GR9LWV0SDX\\\"},{\\\"type\\\":\\\"view_cart\\\",\\\"action_label\\\":\\\"G-GR9LWV0SDX\\\"}],\\\"enable_monitoring_mode\\\":false}\"}","eventPayloadVersion":"v1","runtimeContext":"OPEN","scriptVersion":"a3321ca85cf5aaf6b57585fcd8d67b3a","type":"APP","apiClientId":1780363,"privacyPurposes":[],"dataSharingAdjustments":{"protectedCustomerApprovalScopes":["read_customer_address","read_customer_email","read_customer_name","read_customer_personal_data","read_customer_phone"],"dataSharingControls":["share_all_events"]},"dataSharingState":"optimized","enabledFlags":["9a3ed68a"]},{"id":"445415690","configuration":"{\"pixel_id\":\"445551599402428\",\"pixel_type\":\"facebook_pixel\",\"metaapp_system_user_token\":\"-\"}","eventPayloadVersion":"v1","runtimeContext":"OPEN","scriptVersion":"96420dbe9ea96c426a1b7f364f977719","type":"APP","apiClientId":2329312,"privacyPurposes":["ANALYTICS","MARKETING","SALE_OF_DATA"],"dataSharingAdjustments":{"protectedCustomerApprovalScopes":["read_customer_address","read_customer_email","read_customer_name","read_customer_personal_data","read_customer_phone"],"dataSharingControls":["share_all_events"]},"dataSharingState":"optimized","enabledFlags":["9a3ed68a"]},{"id":"shopify-app-pixel","configuration":"{}","eventPayloadVersion":"v1","runtimeContext":"STRICT","scriptVersion":"0530","apiClientId":"shopify-pixel","type":"APP","privacyPurposes":["ANALYTICS","MARKETING"]},{"id":"shopify-custom-pixel","eventPayloadVersion":"v1","runtimeContext":"LAX","scriptVersion":"0530","apiClientId":"shopify-pixel","type":"CUSTOM","privacyPurposes":["ANALYTICS","MARKETING"]}],isMerchantRequest: false,initData: {"shop":{"name":"COLORS","paymentSettings":{"currencyCode":"EUR"},"myshopifyDomain":"colorsxstudios.myshopify.com","countryCode":"DE","storefrontUrl":"https:\/\/shop.colorsxstudios.com"},"customer":null,"cart":null,"checkout":null,"productVariants":[],"products":[{"id":"9849068290314","handle":"baseline-2-0-zip-hoodie-anthracite","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"50433713307914","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"10476083511562","handle":"colorsxstudioshoodieblack","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"52869150343434","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"10476079644938","handle":"colorsxstudios-t-shirt-white","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"52869144117514","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"9643369365770","handle":"i-love-hoodie-pearl-canvas","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"49804335022346","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]}],"purchasingCompany":null},},"https://shop.colorsxstudios.com/cdn","c8540278we853e1abpb62b2c4amde256306",{"modern":"","legacy":""},{"trekkieShim":true,"agentContext":true,"apiClientId":"580111","facebookCapiEnabled":"true","themeId":"189958226186","themePublished":"true","eventMetadataId":"f4420735-6245-426b-90f0-1fd6041148c4","pageType":"home","shopId":"8191115315","storefrontBaseUrl":"https:\/\/shop.colorsxstudios.com","extensionBaseUrl":"https:\/\/extensions.shopifycdn.com\/cdn\/shopifycloud\/web-pixels-manager","surface":"storefront-renderer","enabledBetaFlags":"[\"16072cab\", \"8450a54b\"]","isMerchantRequest":"false","hashVersion":"c8540278we853e1abpb62b2c4amde256306","publish":"custom","events":"[[\"page_viewed\",{}]]"});})();</script>
1573<script> 1574 window.ShopifyAnalytics = window.ShopifyAnalytics || {}; 1575 window.ShopifyAnalytics.meta = window.ShopifyAnalytics.meta || {}; 1576 window.ShopifyAnalytics.meta.currency = 'USD'; 1577 var meta = {"page":{"pageType":"home","requestId":"2784f466-6aed-4e15-bad4-9fdb6123bba1-1790271987"}}; 1578 for (var attr in meta) { 1579 window.ShopifyAnalytics.meta[attr] = meta[attr]; 1580 } 1581</script>
vendor: 1 bytes, line 1581
1581
1582<script class="analytics"> 1583 (function () { 1584 var customDocumentWrite = function(content) { 1585 var jquery = null; 1586 1587 if (window.jQuery) { 1588 jquery = window.jQuery; 1589 } else if (window.Checkout && window.Checkout.$) { 1590 jquery = window.Checkout.$; 1591 } 1592 1593 if (jquery) { 1594 jquery('body').append(content); 1595 } 1596 }; 1597 1598 var hasLoggedConversion = function(token) { 1599 if (token) { 1600 return document.cookie.indexOf('loggedConversion=' + token) !== -1; 1601 } 1602 return false; 1603 } 1604 1605 var setCookieIfConversion = function(token) { 1606 if (token) { 1607 var twoMonthsFromNow = new Date(Date.now()); 1608 twoMonthsFromNow.setMonth(twoMonthsFromNow.getMonth() + 2); 1609 1610 document.cookie = 'loggedConversion=' + token + '; expires=' + twoMonthsFromNow; 1611 } 1612 } 1613 1614 var trekkie = window.ShopifyAnalytics.lib = window.trekkie = window.trekkie || []; 1615 window.ShopifyAnalytics.lib.trekkie = window.trekkie; 1616 if (trekkie.integrations) { 1617 return; 1618 } 1619 trekkie.methods = [ 1620 'identify', 1621 'page', 1622 'ready', 1623 'track', 1624 'trackForm', 1625 'trackLink' 1626 ]; 1627 trekkie.factory = function(method) { 1628 return function() { 1629 var args = Array.prototype.slice.call(arguments); 1630 args.unshift(method); 1631 trekkie.push(args); 1632 if (method == 'track' || method == 'page') { 1633 try { 1634 if (window.__TREKKIE_SHIM_QUEUE == null) { 1635 window.__TREKKIE_SHIM_QUEUE = []; 1636 } 1637 window.__TREKKIE_SHIM_QUEUE.push({ 1638 from: 'trekkie-stub', 1639 method: method, 1640 args: args.slice(1) 1641 }); 1642 } catch (e) { 1643 // no-op 1644 } 1645 } 1646 return trekkie; 1647 }; 1648 }; 1649 for (var i = 0; i < trekkie.methods.length; i++) { 1650 var key = trekkie.methods[i]; 1651 trekkie[key] = trekkie.factory(key); 1652 } 1653 trekkie.load = function(config) { 1654 trekkie.config = config || {}; 1655 trekkie.config.initialDocumentCookie = document.cookie; 1656 var first = document.getElementsByTagName('script')[0]; 1657var script = document.createElement('script'); 1658script.type = 'text/javascript'; 1659script.onerror = function(e) { 1660 var scriptFallback = document.createElement('script'); 1661 scriptFallback.type = 'text/javascript'; 1662 scriptFallback.onerror = function(error) { 1663 var Monorail = { 1664 produce: function produce(monorailDomain, schemaId, payload) { 1665 var currentMs = new Date().getTime(); 1666 var event = { 1667 schema_id: schemaId, 1668 payload: payload, 1669 metadata: { 1670 event_created_at_ms: currentMs, 1671 event_sent_at_ms: currentMs 1672 } 1673 }; 1674 return Monorail.sendRequest("https://" + monorailDomain + "/v1/produce", JSON.stringify(event)); 1675 }, 1676 sendRequest: function sendRequest(endpointUrl, payload) { 1677 // Try the sendBeacon API 1678 if (window && window.navigator && typeof window.navigator.sendBeacon === 'function' && typeof window.Blob === 'function' && !Monorail.isIos12()) { 1679 var blobData = new window.Blob([payload], { 1680 type: 'text/plain' 1681 }); 1682 1683 if (window.navigator.sendBeacon(endpointUrl, blobData)) { 1684 return true; 1685 } // sendBeacon was not successful 1686 1687 } // XHR beacon 1688 1689 var xhr = new XMLHttpRequest(); 1690 1691 try { 1692 xhr.open('POST', endpointUrl); 1693 xhr.setRequestHeader('Content-Type', 'text/plain'); 1694 xhr.send(payload); 1695 } catch (e) { 1696 console.log(e); 1697 } 1698 1699 return false; 1700 }, 1701 isIos12: function isIos12() { 1702 return window.navigator.userAgent.lastIndexOf('iPhone; CPU iPhone OS 12_') !== -1 || window.navigator.userAgent.lastIndexOf('iPad; CPU OS 12_') !== -1; 1703 } 1704 }; 1705 Monorail.produce('monorail-edge.shopifysvc.com', 1706 'trekkie_storefront_load_errors/1.1', 1707 {shop_id: 8191115315, 1708 theme_id: 189958226186, 1709 app_name: "storefront", 1710 context_url: window.location.href, 1711 source_url: "//shop.colorsxstudios.com/cdn/s/trekkie.storefront.f1ba865b3fecd812ad617f74ac079261075e9edb.min.js"}); 1712 1713 }; 1714 scriptFallback.async = true; 1715 scriptFallback.src = '//shop.colorsxstudios.com/cdn/s/trekkie.storefront.f1ba865b3fecd812ad617f74ac079261075e9edb.min.js'; 1716 first.parentNode.insertBefore(scriptFallback, first); 1717}; 1718script.async = true; 1719script.src = '//shop.colorsxstudios.com/cdn/s/trekkie.storefront.f1ba865b3fecd812ad617f74ac079261075e9edb.min.js'; 1720first.parentNode.insertBefore(script, first); 1721 1722 }; 1723 trekkie.load( 1724 {"Trekkie":{"appName":"storefront","development":false,"defaultAttributes":{"shopId":819111
17245315,"isMerchantRequest":null,"themeId":189958226186,"themeCityHash":"17690374041896676236","contentLanguage":"en","currency":"USD","eventMetadataId":"f4420735-6245-426b-90f0-1fd6041148c4"},"isServerSideCookieWritingEnabled":true,"monorailRegion":"shop_domain","enabledBetaFlags":["764d78cb","8450a54b"]},"Session Attribution":{},"S2S":{"facebookCapiEnabled":true,"source":"trekkie-storefront-renderer","apiClientId":580111}} 1725 ); 1726 1727 var loaded = false; 1728 trekkie.ready(function() { 1729 if (loaded) return; 1730 loaded = true; 1731 1732 window.ShopifyAnalytics.lib = window.trekkie; 1733 1734 var originalDocumentWrite = document.write; 1735 document.write = customDocumentWrite; 1736 try { window.ShopifyAnalytics.merchantGoogleAnalytics.call(this); } catch(error) {}; 1737 document.write = originalDocumentWrite; 1738 1739 var match = window.location.pathname.match(/checkouts\/(.+)\/(thank_you|post_purchase)/) 1740 var token = match? match[1]: undefined; 1741 if (!hasLoggedConversion(token)) { 1742 setCookieIfConversion(token); 1743 1744 } 1745 }); 1746 1747 window.ShopifyAnalytics.lib.page(null,{"pageType":"home","requestId":"2784f466-6aed-4e15-bad4-9fdb6123bba1-1790271987","shopifyEmitted":true}); 1748 1749 var eventsListenerScript = document.createElement('script'); 1750 eventsListenerScript.async = true; 1751 eventsListenerScript.src = "//shop.colorsxstudios.com/cdn/shopifycloud/storefront/assets/shop_events_listener-4e26a9ce.js"; 1752 document.getElementsByTagName('head')[0].appendChild(eventsListenerScript); 1753})();</script>
1753 1754
1754<script> 1755 if (!window.ga || (window.ga && typeof window.ga !== 'function')) { 1756 window.ga = function ga() { 1757 (window.ga.q = window.ga.q || []).push(arguments); 1758 if (window.Shopify && window.Shopify.analytics && typeof window.Shopify.analytics.publish === 'function') { 1759 window.Shopify.analytics.publish("ga_stub_called", {}, {sendTo: "google_osp_migration"}); 1760 } 1761 console.error("Shopify's Google Analytics stub called with:", Array.from(arguments), "\nSee https://help.shopify.com/manual/promoting-marketing/pixels/pixel-migration#google for more information."); 1762 }; 1763 if (window.Shopify && window.Shopify.analytics && typeof window.Shopify.analytics.publish === 'function') { 1764 window.Shopify.analytics.publish("ga_stub_initialized", {}, {sendTo: "google_osp_migration"}); 1765 } 1766 } 1767</script>
vendor: 1 bytes, line 1767
1767
1768<script 1769 defer 1770 src="https://shop.colorsxstudios.com/cdn/shopifycloud/perf-kit/shopify-perf-kit-3.9.4.min.js" 1771 data-application="storefront-renderer" 1772 data-shop-id="8191115315" 1773 data-render-region="gcp-us-west1" 1774 data-page-type="index" 1775 data-theme-instance-id="189958226186" 1776 data-theme-name="Horizon" 1777 data-theme-version="3.5.1" 1778 data-monorail-region="shop_domain" 1779 data-resource-timing-sampling-rate="10" 1780 data-shs="true" 1781 data-shs-beacon="true" 1782 data-shs-export-with-fetch="true" 1783 data-shs-logs-sample-rate="1" 1784 data-shs-beacon-endpoint="https://shop.colorsxstudios.com/api/collect" 1785></script>
1785 1786<meta name="shopify-y" content="869a7f27-b874-4459-8f2a-4975de51a5bc" data-expiration="1821829587000"><meta name="shopify-s" content="b8cfcee7-fb58-44fc-8b0d-8b99e43c1446" data-expiration="1790273787000"><meta name="new-cookie-storage-activated" content="t"> 1787</head> 1788 1789 <body 1790 class="page-width-narrow 1791 card-hover-effect-none" 1792 data-page="index" 1793 > 1794 <a 1795 class="skip-to-content-link button-secondary" 1796 href="#MainContent" 1797> 1798 Skip to content 1799</a> 1800 1801 1802 1803 <div id="header-group"> 1804 <!-- BEGIN sections: header-group --> 1805<header id="shopify-section-sections--27673213960458__header_section" class="shopify-section shopify-section-group-header-group header-section"> 1806 1807 1808 1809 1810
1811<script type="application/ld+json"> 1812 { 1813 "@context": "http://schema.org", 1814 "@type": "Organization", 1815 "name": "COLORS", 1816 1817 "logo": "https:\/\/shop.colorsxstudios.com\/cdn\/shop\/files\/logo_long-colors-2019-black_ce8fbd13-8ce1-4a1e-ad1f-092f3a857075.png?v=1630533587\u0026width=500", 1818 1819 "url": "https:\/\/shop.colorsxstudios.com" 1820 } 1821</script>
1821 1822 1823<header-component 1824 id="header-component" 1825 class="header color-scheme-6 header--compact" 1826 data-theme-color="rgb(0 0 0)" 1827 1828 transparent="not-sticky" 1829 1830 1831 sticky="always" 1832 1833 data-skip-node-update 1834 data-scroll-direction="none" 1835 1836 1837 data-transparent-color-scheme="top" 1838 1839 style=" 1840 --color-scheme-top-row: rgba(0 0 0 / 0.0); 1841 --color-scheme-bottom-row: rgba(255 255 255 / 1.0); 1842 1843 " 1844> 1845 <div class="header__underlay header__underlay-closed"></div> 1846 <div 1847 class="header__underlay header__underlay-open" 1848 ></div><h1 class="visually-hidden">COLORS</h1> 1849 1850 1851 1852 1853 1854 1855 <div 1856 class="header__row header__row--top color-scheme-2 section section--full-width-margin section--page-width" 1857 ref="headerRowTop"style="--border-bottom-width: 0px; --border-bottom-width-mobile: 0px;"> 1858 <div class="header__columns spacing-style"> 1859 <div 1860 class="header__column header__column--left" 1861 data-testid="header-top-left" 1862 > 1863 1864 1865 1866 1867 1868 1869 1870 1871<a 1872 1873 href="https://colorsxstudios.com" 1874 class="size-style spacing-style header-logo" 1875 style=" 1876 --size-style-width: ;--size-style-height: ; 1877 --padding-block-start: 0px;--padding-block-end: 0px; 1878 --font-family: var(--font-body--family); 1879 --font-style: var(--font-body--style); 1880 --font-weight: 600; 1881 " 1882 1883> 1884 1885 1886 <span 1887 class="header-logo__image-container header-logo__image-container--original" 1888 data-testid="header-logo" 1889 > 1890 1891 1892 1893 1894 1895 1896 1897 1898 1899 1900 1901 1902 <img src="//shop.colorsxstudios.com/cdn/shop/files/logo_long-colors-2019-black_ce8fbd13-8ce1-4a1e-ad1f-092f3a857075.png?height=14&v=1630533587" alt="COLORS - Home" width="206" height="14" class="header-logo__image" srcset="//shop.colorsxstudios.com/cdn/shop/files/logo_long-colors-2019-black_ce8fbd13-8ce1-4a1e-ad1f-092f3a857075.png?height=14&v=1630533587 1x, //shop.colorsxstudios.com/cdn/shop/files/logo_long-colors-2019-black_ce8fbd13-8ce1-4a1e-ad1f-092f3a857075.png?height=28&v=1630533587 2x, //shop.colorsxstudios.com/cdn/shop/files/logo_long-colors-2019-black_ce8fbd13-8ce1-4a1e-ad1f-092f3a857075.png?height=42&v=1630533587 3x" style="--header-logo-image-width: 207px;--header-logo-image-width-mobile: 192px; --header-logo-image-height: 14px; --header-logo-image-height-mobile: 13px;"> 1903 1904 1905 </span> 1906 1907 1908 <span 1909 class="header-logo__image-container header-logo__image-container--inverse" 1910 data-testid="header-logo-inverse" 1911 > 1912 1913 1914 1915 1916 1917 1918 1919 1920 1921 1922 1923 1924 <img src="//shop.colorsxstudios.com/cdn/shop/files/Logos-Colors-2019white.png?height=14&v=1776258400" alt="COLORS - Home" width="205" height="14" class="header-logo__image" srcset="//shop.colorsxstudios.com/cdn/shop/files/Logos-Colors-2019white.png?height=14&v=1776258400 1x, //shop.colorsxstudios.com/cdn/shop/files/Logos-Colors-2019white.png?height=28&v=1776258400 2x, //shop.colorsxstudios.com/cdn/shop/files/Logos-Colors-2019white.png?height=42&v=1776258400 3x" style="--header-logo-image-width: 206px;--header-logo-image-width-mobile: 191px; --header-logo-image-height: 14px; --header-logo-image-height-mobile: 13px;"> 1925 1926 1927 </span> 1928 1929</a> 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 </div><div 1945 class="header__column header__column--right" 1946 data-testid="header-top-right" 1947 > 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 <header-menu 1960 ref="headerMenu" 1961 class="header-menu" 1962 1963 data-hydration-key="header-menu" 1964 > 1965 <div class="header-menu__inner"> 1966 <nav 1967 class="menu-list" 1968 aria-label="Primary" 1969 style="--menu-top-level-font-family: var(--font-body--family); 1970--menu-top-level-font-size-desktop: 0.875rem; --menu-top-level-font-style: var(--font-body--style); --menu-top-level-font-weight: var(--font-body--weight); --menu-top-level-font-case:uppercase; 1971 1972 --menu-top-level-font-size: var(--menu-font-sm--size); --menu-top-level-font-line-height: 1973 var(--menu-font-sm--line-height); 1974 1975--menu-top-level-font-color: var(--color-foreground); --menu-top-level-font-color-rgb: var(--color-foreground-rgb); 1976" 1977 > 1978 1979 <overflow-list 1980 1981 ref="overflowMenu" 1982 1983 1984 class="overflow-menu color-scheme-1" 1985 1986 1987 minimum-items="2" 1988 1989 1990 data-testid="header-menu-overflow-list" 1991 1992 1993 data-skip-node-update 1994 1995> 1996 <template shadowrootmode="open"> 1997 <link href="//shop.colorsxstudios.com/cdn/shop/t/26/assets/overflow-list.css?v=167270441770654894517761
199755321" rel="stylesheet" type="text/css" media="all" /> 1998 1999 <ul part="list"> 2000 <slot></slot> 2001 <slot 2002 name="more" 2003 part="more" 2004 hidden 2005 2006 > 2007 <li 2008 part="more" 2009 > 2010 <button 2011 class="button" 2012 type="button" 2013 tabindex="0" 2014 2015 > 2016 More 2017 </button> 2018 </li> 2019 </slot> 2020 <li 2021 part="placeholder" 2022 hidden 2023 ></li> 2024 </ul> 2025 2026 <div part="overflow"> 2027 <ul part="overflow-list"> 2028 <slot name="overflow"></slot> 2029 </ul> 2030 </div> 2031 </template> 2032 2033 2034 2035 <li 2036 role="presentation" 2037 class="menu-list__list-item" 2038 on:focus="/activate" 2039 on:blur="/deactivate" 2040 on:pointerenter="/activate" 2041 on:pointerleave="/deactivate" 2042 > 2043 <a 2044 href="/collections/all-products" 2045 data-skip-node-update="true" 2046 class="menu-list__link" 2047 ref="menuitem" 2048 > 2049 <span class="menu-list__link-title">ALL PRODUCTS</span> 2050 </a></li> 2051 2052 <li 2053 class="menu-list__list-item" 2054 role="presentation" 2055 slot="more" 2056 on:focus="/activate" 2057 on:blur="/deactivate" 2058 on:pointerenter="/activate" 2059 on:pointerleave="/deactivate" 2060 > 2061 <button role="listitem" class="menu-list__link button-unstyled"> 2062 <span class="menu-list__link-title">More</span> 2063 </button> 2064 </li> 2065 2066</overflow-list> 2067 2068 </nav> 2069 </div> 2070 2071
2071<script 2072 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/header-menu.js?v=97820922056036071501776155324" 2073 type="module" 2074 fetchpriority="low" 2075 ></script>
2075 2076 </header-menu> 2077 2078 2079<style data-shopify> 2080 .header__underlay { 2081 --color-submenu: rgb(255 255 255 / 1.0); 2082 } 2083</style> 2084 2085 2086 2087 2088 2089 2090 2091 2092 2093 2094 2095 2096 2097 2098 2099 2100 2101 2102 2103 2104 2105 2106 2107 2108 2109 2110 2111 2112
2113<script 2114 type="module" 2115 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/cart-icon.js?v=157241182139685326961776155324" 2116 fetchpriority="low" 2117></script>
2117 2118 2119 2120 2121 2122 2123<header-actions 2124 2125> 2126 2127 2128 2129
2129<script 2130 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/cart-drawer.js?v=35649724213056774541776155323" 2131 type="module" 2132 fetchpriority="low" 2133 ></script>
2133 2134 2135 2136 2137 <cart-drawer-component 2138 class="cart-drawer" 2139 2140 2141 > 2142 <template id="empty-cart-template"> 2143 2144 <div class="cart-drawer__header"> 2145 <button 2146 ref="closeButton" 2147 on:click="cart-drawer-component/close" 2148 class="button close-button cart-drawer__close-button button-unstyled" 2149 aria-label="Close dialog" 2150 > 2151 <span class="svg-wrapper"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> 2152 <path d="M12 2L2 12" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/> 2153 <path d="M12 12L2 2" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/> 2154</svg> 2155</span> 2156 </button> 2157 </div> 2158 2159 <div 2160 class="cart-drawer__content" 2161 aria-label="Cart" 2162 > 2163 <h2 2164 class="cart-drawer__heading h4 cart-drawer__heading--empty" 2165 id="cart-drawer-heading-empty" 2166 > 2167 Your cart is empty 2168 </h2> 2169 2170 <div class="cart-drawer__items"> 2171 2172 2173 2174
2175<script 2176 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/component-cart-items.js?v=165440327125931659001776155320" 2177 type="module" 2178 fetchpriority="low" 2179></script>
vendor: 1 bytes, line 2179
2179
2180<script 2181 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/component-cart-quantity-selector.js?v=105130809908858639751776155320" 2182 type="module" 2183 fetchpriority="low" 2184></script>
vendor: 1 bytes, line 2184
2184
2185<script 2186 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/volume-pricing-info.js?v=94479640769665442661776155318" 2187 type="module" 2188 fetchpriority="low" 2189></script>
2189 2190 2191<div 2192 2193 class="cart-items__wrapper" 2194 2195> 2196 2197<a 2198 class="button cart-items__empty-button" 2199 href="/collections/all" 2200 > 2201 <span class="button-text"> 2202 Continue shopping 2203 </span> 2204 </a></div> 2205 2206 2207 2208 </div> 2209 </div> 2210 2211 </template> 2212 <button 2213 class="header-actions__action button-unstyled" 2214 on:click="/open" 2215 aria-haspopup="dialog" 2216 aria-label="Cart" 2217 aria-describedby="cart-bubble-text" 2218 data-testid="cart-drawer-trigger" 2219 > 2220 2221 <cart-icon 2222 class="header-actions__cart-icon" 2223 data-testid="cart-icon" 2224 > 2225 <span class="hidden"> 2226 Cart 2227 </span> 2228 2229 <span 2230 class="svg-wrapper " 2231 aria-hidden="true" 2232 > 2233 <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="var(--icon-stroke-width)" d="M3.392 6.875h13.216v8.016c0 .567-.224 1.112-.624 1.513-.4.402-.941.627-1.506.627H5.522a2.13 2.13 0 0 1-1.506-.627 2.15 2.15 0 0 1-.624-1.513zM8.818 2.969h2.333c.618 0 1.211.247 1.649.686a2.35 2.35 0 0 1 .683 1.658v1.562H6.486V5.313c0-.622.246-1.218.683-1.658a2.33 2.33 0 0 1 1.65-.686"/></svg> 2234 2235 </span> 2236 2237 <div 2238 ref="cartBubble" 2239 class="cart-bubble visually-hidden" 2240 2241 2242 data-maintain-ratio 2243 2244> 2245 <span class="cart-bubble__background"></span> 2246 <span 2247 ref="cartBubbleText" 2248 id="cart-bubble-text" 2249 class="cart-bubble__text" 2250 > 2251 <span 2252 class="cart-bubble__text-count hidden" 2253 ref="cartBubbleCount" 2254 aria-hidden="true" 2255 data-testid="cart-bubble" 2256 > 22570</span> 2258 </span> 2259</div> 2260 2261 2262 2263 </cart-icon> 2264 2265 </button> 2266 2267 <dialog 2268 ref="dialog" 2269 class="cart-drawer__dialog dialog-modal dialog-drawer color-scheme-1 cart-drawer--empty" 2270 data-testid="cart-drawer-dialog" 2271 aria-labelledby="cart-drawer-heading-empty" 2272 scroll-lock 2273 cart-summary-sticky="true" 2274 > 2275 <span 2276 ref="liveRegion" 2277 class="visually-hidden" 2278 role="status" 2279 ></span> 2280 <div 2281 class="cart-drawer__inner" 2282 data-hydration-key="cart-drawer-inner" 2283 > 2284 2285 2286 2287<cart-items-component 2288 class="cart-items-component" 2289 2290 data-drawer 2291 2292 data-section-id="sections--27673213960458__header_section" 2293> 2294 2295 2296 <div class="cart-drawer__header"> 2297 <button 2298 ref="closeButton" 2299 on:click="cart-drawer-component/close" 2300 class="button close-button cart-drawer__close-button button-unstyled" 2301 aria-label="Close dialog" 2302 > 2303 <span class="svg-wrapper"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> 2304 <path d="M12 2L2 12" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/> 2305 <path d="M12 12L2 2" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/> 2306</svg> 2307</span> 2308 </button> 2309 </div> 2310 2311 <div 2312 class="cart-drawer__content" 2313 aria-label="Cart" 2314 > 2315 <h2 2316 class="cart-drawer__heading h4 cart-drawer__heading--empty" 2317 id="cart-drawer-heading-empty" 2318 > 2319 Your cart is empty 2320 </h2> 2321 2322 <div class="cart-drawer__items"> 2323 2324 2325 2326
2327<script 2328 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/component-cart-items.js?v=165440327125931659001776155320" 2329 type="module" 2330 fetchpriority="low" 2331></script>
vendor: 1 bytes, line 2331
2331
2332<script 2333 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/component-cart-quantity-selector.js?v=105130809908858639751776155320" 2334 type="module" 2335 fetchpriority="low" 2336></script>
vendor: 1 bytes, line 2336
2336
2337<script 2338 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/volume-pricing-info.js?v=94479640769665442661776155318" 2339 type="module" 2340 fetchpriority="low" 2341></script>
2341 2342 2343<div 2344 2345 class="cart-items__wrapper" 2346 2347> 2348 2349<a 2350 class="button cart-items__empty-button" 2351 href="/collections/all" 2352 > 2353 <span class="button-text"> 2354 Continue shopping 2355 </span> 2356 </a></div> 2357 2358 2359 2360 </div> 2361 </div> 2362 2363 2364</cart-items-component> 2365 2366 2367 2368 </div> 2369 </dialog> 2370 </cart-drawer-component> 2371 2372 2373 <span 2374 ref="liveRegion" 2375 class="visually-hidden" 2376 role="status" 2377 data-testid="cart-count-live-region" 2378 ></span> 2379</header-actions> 2380
2381<script 2382 type="module" 2383 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/header-actions.js?v=121308165565653895611776155322" 2384 fetchpriority="low" 2385></script>
2385 2386 2387 2388 2389 2390 2391 2392 2393 2394 2395 2396 2397 2398 <div 2399 class="header__drawer" 2400 ref="headerDrawerContainer" 2401 data-hydration-key="header-drawer-mobile" 2402 2403 > 2404 2405<link 2406 2407 2408 2409 href = '//shop.colorsxstudios.com/cdn/shop/t/26/assets/Header-Drawer.css?v=131440411308623301581776423441' 2410 type = text/css 2411 2412 rel = stylesheet 2413> 2414 2415 2416<noscript> 2417 2418 <link 2419 2420 2421 2422 href = '//shop.colorsxstudios.com/cdn/shop/t/26/assets/Header-Drawer.css?v=131440411308623301581776423441' 2423 type = text/css 2424 rel = stylesheet 2425 as = style 2426 > 2427 2428</noscript> 2429 2430
2431<script 2432 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/header-drawer.js?v=121243031541024704371776155323" 2433 type="module" 2434 fetchpriority="low" 2435></script>
2435 2436 2437<header-drawer 2438 class="header-drawer " 2439 style="--menu-image-border-radius: 0px; --resource-card-corner-radius: 0px;" 2440> 2441 <details 2442 id="Details-menu-drawer-container" 2443 data-skip-node-update="true" 2444 class="menu-drawer-container" 2445 ref="details" 2446 scroll-lock 2447 > 2448 <summary 2449 class="header__icon header__icon--menu header__icon--summary" 2450 aria-label="Menu" 2451 on:click="/toggle" 2452 > 2453 <span class="svg-wrapper header-drawer-icon header-drawer-icon--open"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> 2454 <path d="M1 3.5H13" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round"/> 2455 <path d="M1 10.5H13" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round"/> 2456</svg> 2457</span> 2458 <span class="svg-wrapper header-drawer-icon header-drawer-icon--close"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> 2459 <path d="M12 2L2 12" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/> 2460 <path d="M12 12L2 2" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/> 2461</svg> 2462</span> 2463 </summary> 2464 <div 2465 ref="menuDrawer" 2466 class=" 2467 menu-drawer 2468 color-scheme-1 2469 " 2470 > 2471 <div class="menu-drawer__header"> 2472 <a href="" class="menu-drawer__header-logo"> 2473 2474 2475 2476 2477 2478 2479 2480 2481 2482 2483 2484 <img src="//shop.colorsxstudios.com/cdn/shop/files/Logos-Colors-2019white.png?height=13&v=1776258400" alt="" width="191" height="13" class="Drawer-Logo" srcset="//shop.colorsxstudios.com/cdn/shop/files/Logos-Colors-2019white.png?height=13&v=1776258400 1x, //shop.colorsxstudios.com/cdn/shop/files/Logos-Colors-2019white.png?height=26&v=1776258400 2x, //shop.colorsxstudios.com/cdn/shop/files/Logos-Colors-2019white.png?height=39&v=1776258400 3x" style="--header-logo-image-height: 13px; --header-logo-image-width: 191px;"> 2485 2486 2487</a> 2488 2489 <button 2490 class="button close-button menu-drawer__close-button menu-drawer__header-close" 2491 type="button" 2492 aria-label="Close" 2493 on:click="/close" 2494 > 2495 2496 2497<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> 2498 <path d="M18 6 6 18"></path> 2499 <path d="m6 6 12 12"></path> 2500 </svg></button> 2501 2502 </div> 2503 <nav 2504 class="menu-drawer__navigation" 2505 style="--menu-top-level-font-family: var(--font-body--family); 2506--menu-top-level-font-size-desktop: 0.875rem; --menu-top-level-font-style: var(--font-body--style); --menu-top-level-font-weight: var(--font-body--weight); --menu-top-level-font-case:uppercase; 2507 2508 --menu-top-level-font-size: var(--menu-font-2xl--size); --menu-top-level-font-line-height: 2509 var(--menu-font-2xl--line-height); 2510 2511--menu-top-level-font-color: var(--color-foreground); --menu-top-level-font-color-rgb: var(--color-foreground-rgb); 2512 2513--menu-parent-font-family: var(--font-body--family); --menu-parent-font-style: 2514var(--font-body--style); --menu-parent-font-weight: var(--font-body--weight); --menu-parent-font-case: 2515uppercase; 2516 2517 --menu-parent-font-size: var(--menu-font-sm--size); --menu-parent-font-line-height: 2518 var(--menu-font-sm--line-height); --menu-parent-font-color: rgb(var(--color-foreground-rgb) / 2519 var(--opacity-subdued-text)); --menu-parent-active-font-color: var(--color-foreground); 2520 2521--menu-child-font-family: var(--font-body--family); --menu-child-font-style: 2522var(--font-body--style); --menu-child-font-weight: var(--font-body--weight); --menu-child-font-case: 2523uppercase; 2524 2525 --menu-child-font-size: var(--menu-font-md--size); --menu-child-font-line-height: var(--menu-font-md--line-height); 2526 --menu-child-font-color: var(--color-foreground); --menu-child-active-font-color: rgb(var(--color-foreground-rgb) / 2527 var(--opacity-subdued-text)); 2528 2529 2530 " 2531 aria-label="Primary" 2532 > 2533 <ul 2534 class="menu-drawer__menu has-submenu" 2535 role="list" 2536 > 2537 2538 2539 2540 <li 2541 style="--menu-drawer-animation-index: 1;" 2542 class="menu-drawer__list-item--flat" 2543 > 2544 2545<a 2546 id="HeaderDrawer-all-products" 2547 href="/collections/all-products" 2548 class="menu-drawer__menu-item menu-drawer__menu-item--mainlist menu-drawer__animated-element focus-inset" 2549 2550 >
2551 <span class="menu-drawer__menu-item-text wrap-text">ALL PRODUCTS</span> 2552 </a> 2553 2554 </li> 2555 </ul> 2556 </nav><nav 2557 class = 'Drawer-Secondary-Menu menu-drawer__animated-element' 2558 style = '--menu-drawer-animation-index: 3;' 2559 aria-label = 'FuÃzeilenmenü neu'> 2560 2561 <ul class = 'Drawer-Secondary-Menu-List'><li class = 'Drawer-Secondary-Item'> 2562 2563 <a 2564 href = '/pages/contact' 2565 class = 'Drawer-Secondary-Link' 2566 2567 > 2568 CUSTOMER HELP 2569 </a> 2570 2571 </li><li class = 'Drawer-Secondary-Item'> 2572 2573 <a 2574 href = '/pages/returns' 2575 class = 'Drawer-Secondary-Link' 2576 2577 > 2578 Returns 2579 </a> 2580 2581 </li><li class = 'Drawer-Secondary-Item'> 2582 2583 <a 2584 href = 'https://colorsxstudios.returnless.com' 2585 class = 'Drawer-Secondary-Link' 2586 2587 > 2588 Return Portal 2589 </a> 2590 2591 </li><li class = 'Drawer-Secondary-Item'> 2592 2593 <a 2594 href = '/policies/privacy-policy' 2595 class = 'Drawer-Secondary-Link' 2596 2597 > 2598 Privacy 2599 </a> 2600 2601 </li><li class = 'Drawer-Secondary-Item'> 2602 2603 <a 2604 href = '/policies/shipping-policy' 2605 class = 'Drawer-Secondary-Link' 2606 2607 > 2608 Shipping 2609 </a> 2610 2611 </li><li class = 'Drawer-Secondary-Item'> 2612 2613 <a 2614 href = '/policies/terms-of-service' 2615 class = 'Drawer-Secondary-Link' 2616 2617 > 2618 Terms & Conditions 2619 </a> 2620 2621 </li><li class = 'Drawer-Secondary-Item'> 2622 2623 <a 2624 href = '/pages/size-guide' 2625 class = 'Drawer-Secondary-Link' 2626 2627 > 2628 Size Guide 2629 </a> 2630 2631 </li><li class = 'Drawer-Secondary-Item'> 2632 2633 <a 2634 href = '/pages/cancellation-form' 2635 class = 'Drawer-Secondary-Link' 2636 2637 > 2638 Cancellation Form 2639 </a> 2640 2641 </li></ul> 2642 2643 </nav><div 2644 class="menu-drawer__utility-links menu-drawer__animated-element" 2645 style="--menu-drawer-animation-index: 1;" 2646 > 2647 2648 </div> 2649 2650 2651 2652<div 2653 style = '--menu-drawer-animation-index:3;' 2654 class = 'menu-drawer__social menu-drawer__animated-element' 2655> 2656<a 2657 target = '_blank' 2658 class = 'menu-drawer__social-link' 2659 href = 'https://www.instagram.com/colorsxstudios' 2660>IG</a> 2661 2662<a 2663 target = '_blank' 2664 class = 'menu-drawer__social-link' 2665 href = 'https://www.youtube.com/channel/UC2Qw1dzXDBAZPwS7zm37g8g' 2666>YT</a> 2667 2668<a 2669 target = '_blank' 2670 class = 'menu-drawer__social-link' 2671 href = 'https://www.tiktok.com/@colorsxstudios' 2672>TT</a> 2673 2674<a 2675 target = '_blank' 2676 class = 'menu-drawer__social-link' 2677 href = 'https://x.com/colorsxstudios' 2678>X</a> 2679 2680<a 2681 target = '_blank' 2682 class = 'menu-drawer__social-link' 2683 href = 'https://www.facebook.com/colorsxstudios/' 2684>FB</a> 2685 2686<a 2687 target = '_blank' 2688 class = 'menu-drawer__social-link' 2689 href = 'https://open.spotify.com/user/colorsxstudios?nd=1' 2690>SPOTIFY</a> 2691</div> 2692</div> 2693 <div 2694 class="menu-drawer__backdrop" 2695 on:click="header-drawer/close" 2696 ></div> 2697 </details> 2698</header-drawer> 2699 2700 </div> 2701 2702 2703 2704<style data-shopify> 2705 .header__underlay { 2706 --color-submenu: rgb(255 255 255 / 1.0); 2707 } 2708</style> 2709 2710 2711 2712 2713 2714 2715 2716 </div> 2717 </div> 2718 </div> 2719 2720 2721 2722 2723 2724 2725 2726 2727 2728 2729 2730 <div class="header__row header__navigation-bar-row color-scheme-1"> 2731 2732 2733 2734 2735 2736 2737 2738<style data-shopify> 2739 .header__underlay { 2740 --color-submenu: rgb(255 255 255 / 1.0); 2741 } 2742</style> 2743 2744 2745 2746 2747 </div> 2748 2749</header-component> 2750
2751<script 2752 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/header.js?v=36718054510661947891776155317" 2753 type="module" 2754></script>
2754 2755 2756 2757 2758 2759
2759<script type="module"> 2760 import { hydrate } from '@theme/section-hydration'; 2761 const url = new URL(window.location.href); 2762 url.searchParams.delete('page'); 2763 hydrate('sections--27673213960458__header_section', url); 2764 </script>
2764 2765 2766 2767 2768</header> 2769<!-- END sections: header-group --> 2770 </div> 2771 2772
2772<script> 2773 // Inline header height and menu style calculations to prevent layout shift 2774 // Note: Updates in calculateHeaderGroupHeight(), updateTransparentHeaderOffset() and setHeaderMenuStyle() utilities.js should be kept in sync with this function 2775 (function setHeaderHeighCustomProperties() { 2776 /* 2777 * Header calculation functions for maintaining CSS variables 2778 * Mimic calculateHeaderGroupHeight() in utilities.js 2779 */ 2780 const header = document.querySelector('header-component'); 2781 const headerGroup = document.querySelector('#header-group'); 2782 const hasHeaderSection = headerGroup?.querySelector('.header-section'); 2783 2784 if (!header || !headerGroup) return; 2785 2786 const headerTopRow = header.querySelector('.header__row--top'); 2787 const headerHeight = header.offsetHeight; 2788 2789 // Calculate the total height of the header group 2790 let headerGroupHeight = 0; 2791 const children = headerGroup.children; 2792 for (let i = 0; i < children.length; i++) { 2793 const element = children[i]; 2794 if (element === header || !(element instanceof HTMLElement)) continue; 2795 headerGroupHeight += element.offsetHeight; 2796 } 2797 2798 // Check for transparent header special case 2799 if (header.hasAttribute('transparent') && header.parentElement?.nextElementSibling) { 2800 headerGroupHeight += headerHeight; 2801 } 2802 2803 // Set CSS variables 2804 document.body.style.setProperty('--header-height', `${headerHeight}px`); 2805 document.body.style.setProperty('--header-group-height', `${headerGroupHeight}px`); 2806 2807 if (headerTopRow) { 2808 window.requestAnimationFrame(function () { 2809 document.body.style.setProperty('--top-row-height', `${headerTopRow.offsetHeight}px`); 2810 }); 2811 } 2812 2813 /** 2814 * Updates CSS custom properties for transparent header offset calculation 2815 * Mimic updateTransparentHeaderOffset() in utilities.js 2816 */ 2817 2818 if (!hasHeaderSection || !header?.hasAttribute('transparent')) { 2819 document.body.style.setProperty('--transparent-header-offset-boolean', '0'); 2820 return; 2821 } 2822 2823 const hasImmediateSection = hasHeaderSection.nextElementSibling?.classList.contains('shopify-section'); 2824 2825 const shouldApplyOffset = !hasImmediateSection ? '1' : '0'; 2826 document.body.style.setProperty('--transparent-header-offset-boolean', shouldApplyOffset); 2827 })(); 2828 2829 (function setHeaderMenuStyle() { 2830 const headerComponent = document.querySelector('#header-component'); 2831 if (headerComponent) { 2832 const isTouchDevice = 'ontouchstart' in window && navigator.maxTouchPoints > 0; 2833 const overflowList = headerComponent?.querySelector('overflow-list'); 2834 const hasReachedMinimum = overflowList && overflowList.hasAttribute('minimum-reached'); 2835 headerComponent.dataset.menuStyle = isTouchDevice || hasReachedMinimum ? 'drawer' : 'menu'; 2836 } 2837 })(); 2838 </script>
2838 2839 2840 <main 2841 id="MainContent" 2842 class="content-for-layout" 2843 role="main" 2844 data-page-transition-enabled="false" 2845 data-product-transition="false" 2846 data-template="index" 2847 > 2848 <section id="shopify-section-template--27673214320906__hero_jVaWmY" class="shopify-section hero-wrapper section-wrapper"> 2849 2850 2851 2852 2853 2854 2855 2856 2857 2858 2859 2860 2861 2862<div 2863 id="Hero-template--27673214320906__hero_jVaWmY" 2864 class="hero color-scheme-6" 2865 style=" 2866 --hero-border-style: ; 2867 --hero-border-width: px; 2868 --hero-border-opacity: %; 2869 --blur-opacity: 0.75; 2870 2871 --hero-min-height: 100svh; 2872 2873 " 2874 2875 2876> 2877 2878 2879 2880 2881 <div 2882 class="hero__container spacing-style section section--full-width" 2883 style="--padding-block-start: max(20px, calc(var(--spacing-scale) * 100px));--padding-block-end: max(20px, calc(var(--spacing-scale) * 72px));" 2884 ><div 2885 class="hero__media-grid" 2886 style="--hero-media-count: 1;--hero-media-count-mobile: 1;--hero-media-aspect-ratio: 0.8;" 2887 data-testid="hero-media-wrapper" 2888 > 2889 2890 2891 2892<div class="hero__media-wrapper hero__media-wrapper--desktop hero__media-wrapper--mobile"> 2893 <img src="//shop.colorsxstudios.com/cdn/shop/files/Brown_Hoodie_4.png?v=1734278176&width=3840" srcset="//shop.colorsxstudios.com/cdn/shop/files/Brown_Hoodie_4.png?v=1734278176&width=832 832w, //shop.colorsxstudios.com/cdn/shop/files/Brown_Hoodie_4.png?v=1734278176&width=1200 1200w, //shop.colorsxstudios.com/cdn/shop/files/Brown_Hoodie_4.png?v=1734278176&width=1600 1600w, //shop.colorsxstudios.com/cdn/shop/files/Brown_Hoodie_4.png?v=1734278176&width=1920 1920w, //shop.colorsxstudios.com/cdn/shop/files/Brown_Hoodie_4.png?v=1734278176&width=2560 2560w, //shop.colorsxstudios.com/cdn/shop/files/Brown_Hoodie_4.png?v=1734278176&width=3840 3840w" width="2000" height="2500" class="hero__media" sizes="(min-width: 750px) 100vw, 100vw" fetchpriority="high" data-testid="hero-desktop-image-1"> 2894 </div> 2895 2896 2897 2898 2899 </div> 2900 <div 2901 class=" 2902 hero__content-wrapper 2903 layout-panel-flex 2904 layout-panel-flex--column 2905 mobile-column 2906 section-content-wrapper 2907 page-width 2908 2909 " 2910 style="--flex-direction: column; --flex-wrap: nowrap; --flex-wrap-mobile: wrap; 2911 2912--gap: 24px; 2913 2914--horizontal-alignment: center; --vertical-alignment: flex-end; 2915--vertical-alignment-mobile: flex-end; 2916" 2917 > 2918 2919 </div> 2920 </div> 2921</div> 2922 2923 2924 2925 2926</section> 2927 </main> 2928 2929 <footer> 2930 <!-- BEGIN sections: footer-group --> 2931 2932<!-- END sections: footer-group --> 2933 </footer> 2934 2935 2936
2937<script 2938 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/dialog.js?v=150888536568694194021776155323" 2939 type="module" 2940></script>
2940 2941
2942<script 2943 src="//shop.colorsxstudios.com/cdn/shop/t/26/assets/predictive-search.js?v=149240552485540508541776155318" 2944 type="module" 2945 fetchpriority="low" 2946></script>
2946 2947 2948<dialog-component 2949 id="search-modal" 2950 class="search-modal" 2951 2952> 2953 <dialog 2954 ref="dialog" 2955 on:click="/closeDialogOnClickOutside" 2956 on:keydown="/closeDialogOnEscapePress" 2957 class="search-modal__content dialog-modal" 2958 scroll-lock 2959 aria-labelledby="search-modal-heading" 2960 > 2961 <h2 2962 id="search-modal-heading" 2963 class="visually-hidden" 2964 > 2965 Search 2966 </h2> 2967 <predictive-search-component 2968 class="predictive-search color-scheme-1" 2969 style="--product-corner-radius: 1px; --card-corner-radius: 0px;" 2970 data-section-id="predictive-search" 2971 data-testid="search-component--modal" 2972 role="search" 2973 aria-label="Search" 2974 > 2975 <form 2976 action="/search" 2977 method="get" 2978 role="search" 2979 class="predictive-search-form" 2980 ref="form" 2981 on:keydown="/onSearchKeyDown" 2982 > 2983 <div 2984 class="predictive-search-form__header" 2985 > 2986 <div class="predictive-search-form__header-inner"> 2987 <label 2988 for="cmdk-input" 2989 class="visually-hidden" 2990 >Search</label> 2991 <input 2992 class="search-input" 2993 id="cmdk-input" 2994 type="search" 2995 name="q" 2996 role="combobox" 2997 aria-expanded="false" 2998 aria-owns="predictive-search-results" 2999 aria-controls="predictive-search-results" 3000 aria-haspopup="listbox" 3001 aria-autocomplete="list" 3002 autocomplete="off" 3003 placeholder="Search" 3004 ref="searchInput" 3005 on:input="/search" 3006 on:keydown="/onSearchKeyDown" 3007 > 3008 <input 3009 name="options[prefix]" 3010 type="hidden" 3011 value="last" 3012 > 3013 <span class="svg-wrapper predictive-search__icon"> 3014 <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><circle cx="9" cy="9" r="4.75" stroke="currentColor" stroke-width="var(--icon-stroke-width)"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="var(--icon-stroke-width)" d="m12.5 12.5 3.25 3.25"/></svg> 3015 3016 </span> 3017 <button 3018 type="button" 3019 class="button-unstyled predictive-search__reset-button" 3020 ref="resetButton" 3021 hidden 3022 on:click="/resetSearch" 3023 > 3024 Clear 3025 </button> 3026 </div> 3027 <button 3028 type="button" 3029 class="button predictive-search__close-modal-button" 3030 aria-label="Close dialog" 3031 on:click="dialog-component/closeDialog" 3032 ref="closeModalButton" 3033 > 3034 <span class="svg-wrapper"> 3035 <svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> 3036 <path d="M12 2L2 12" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/> 3037 <path d="M12 12L2 2" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/> 3038</svg> 3039 3040 </span> 3041 </button> 3042 </div> 3043 3044 <div class="predictive-search-form__content-wrapper"> 3045 <div 3046 class="predictive-search-form__content" 3047 ref="predictiveSearchResults" 3048 on:click="/handleModalClick" 3049 > 3050 3051 3052<div 3053 id="predictive-search-results" 3054 class="predictive-search-dropdown" 3055 role="listbox" 3056 aria-expanded="true" 3057 style="--color-shadow: rgb(var(--color-foreground-rgb) / 0.1);" 3058> 3059 3060 <div class="predictive-search-results__inner"> 3061 3062 3063 3064 3065 3066 <div 3067 id="predictive-search-products" 3068 class="predictive-search-results__products" 3069 3070 data-testid="products-list-default--modal" 3071 3072> 3073 3074 <h4 class="predictive-search-results__title"> 3075 Products 3076 </h4> 3077 <ul 3078 class="predictive-search-results__list predictive-search-results__wrapper-products list-unstyled" 3079 > 3080 3081 3082 <li 3083 class="predictive-search-results__card predictive-search-results__card--product" 3084 ref="resultsItems[]" 3085 > 3086 3087<div 3088 class="resource-card" 3089 data-resource-type="product" 3090> 3091 <a 3092 class="resource-card__link"
3093 href="/products/baseline-2-0-zip-hoodie-anthracite" 3094 > 3095 <span class="visually-hidden"> 3096 BASELINE 2.0 ZIP HOODIE - ANTHRACITE 3097 </span> 3098 </a> 3099 <div 3100 class="resource-card__media" 3101 style="--resource-card-aspect-ratio: 4 / 5;" 3102 3103 > 3104 3105 3106 3107 <img src="//shop.colorsxstudios.com/cdn/shop/files/2000x2500_Zipper_Jacket_03.jpg?v=1789741031&width=500" alt="" srcset="//shop.colorsxstudios.com/cdn/shop/files/2000x2500_Zipper_Jacket_03.jpg?v=1789741031&width=240 240w, //shop.colorsxstudios.com/cdn/shop/files/2000x2500_Zipper_Jacket_03.jpg?v=1789741031&width=352 352w" width="500" height="625" loading="lazy" class="resource-card__image" sizes="auto" ref="" style="object-position: 50.0% 50.0%;"> 3108 3109 <img src="//shop.colorsxstudios.com/cdn/shop/files/ZIP_BODY.jpg?v=1734278168&width=500" alt="BASELINE 2.0 ZIP HOODIE - ANTHRACITE" srcset="//shop.colorsxstudios.com/cdn/shop/files/ZIP_BODY.jpg?v=1734278168&width=240 240w, //shop.colorsxstudios.com/cdn/shop/files/ZIP_BODY.jpg?v=1734278168&width=352 352w" width="500" height="625" loading="lazy" class="resource-card__image resource-card__image--secondary" sizes="auto" ref="" data-media-id="43459479470346" style="object-position: 50.0% 50.0%;"> 3110</div> 3111 3112 <div class="resource-card__content"> 3113 <p class="resource-card__title paragraph">BASELINE 2.0 ZIP HOODIE - ANTHRACITE</p> 3114 3115 3116 <div ref="priceContainer"> 3117 3118 3119 <div 3120 class=" 3121 price__regular 3122 3123 " 3124 > 3125 <span class="price">$111.00</span> 3126 </div> 3127 <div 3128 class=" 3129 price__sale 3130 3131 price__hidden 3132 3133 " 3134 > 3135 3136 <span class="price-item__group"> 3137 <span class="visually-hidden">Regular price </span> 3138 <span class="price-item--regular compare-at-price"></span> 3139 </span> 3140 <span class="price-item__group"> 3141 <span class="visually-hidden">Sale price </span> 3142 <span class="price-item--sale price">$111.00</span> 3143 </span> 3144 3145 </div> 3146 3147</div> 3148 3149 </div> 3150</div> 3151 3152 </li> 3153 3154 <li 3155 class="predictive-search-results__card predictive-search-results__card--product" 3156 ref="resultsItems[]" 3157 > 3158 3159<div 3160 class="resource-card" 3161 data-resource-type="product" 3162> 3163 <a 3164 class="resource-card__link" 3165 href="/products/colorsxstudioshoodieblack" 3166 > 3167 <span class="visually-hidden"> 3168 COLORSxSTUDIOS HOODIE - BLACK 3169 </span> 3170 </a> 3171 <div 3172 class="resource-card__media" 3173 style="--resource-card-aspect-ratio: 4 / 5;" 3174 3175 > 3176 3177 3178 3179 <img src="//shop.colorsxstudios.com/cdn/shop/files/CS_Hoodie_NOS_black_02_1.png?v=1785562512&width=500" alt="" srcset="//shop.colorsxstudios.com/cdn/shop/files/CS_Hoodie_NOS_black_02_1.png?v=1785562512&width=240 240w, //shop.colorsxstudios.com/cdn/shop/files/CS_Hoodie_NOS_black_02_1.png?v=1785562512&width=352 352w" width="500" height="500" loading="lazy" class="resource-card__image" sizes="auto" ref="" style="object-position: 50.0% 50.0%;"> 3180 3181 <img src="//shop.colorsxstudios.com/cdn/shop/files/COLORSxSTUDIOSHOODIE-BLACK.jpg?v=1785258809&width=500" alt="Rückansicht einer Person mit schwarzem COLORS*STUDIOS Hoodie und groÃem weiÃen Logo-Print auf dem Rücken, kombiniert mit einer schwarzen Wide-Leg-Hose vor hellem Studiohintergrund." srcset="//shop.colorsxstudios.com/cdn/shop/files/COLORSxSTUDIOSHOODIE-BLACK.jpg?v=1785258809&width=240 240w, //shop.colorsxstudios.com/cdn/shop/files/COLORSxSTUDIOSHOODIE-BLACK.jpg?v=1785258809&width=352 352w" width="500" height="500" loading="lazy" class="resource-card__image resource-card__image--secondary" sizes="auto" ref="" data-media-id="50656986890506" style="object-position: 50.0% 50.0%;"> 3182</div> 3183 3184 <div class="resource-card__content"> 3185 <p class="resource-card__title paragraph">COLORSxSTUDIOS HOODIE - BLACK</p> 3186 3187 3188 <div ref="priceContainer"> 3189 3190 3191 <div 3192 class=" 3193 price__regular 3194 3195 " 3196 > 3197 <span class="price">$93.00</span> 3198 </div> 3199 <div 3200 class=" 3201 price__sale 3202 3203 price__hidden 3204 3205 " 3206 > 3207
3208 <span class="price-item__group"> 3209 <span class="visually-hidden">Regular price </span> 3210 <span class="price-item--regular compare-at-price"></span> 3211 </span> 3212 <span class="price-item__group"> 3213 <span class="visually-hidden">Sale price </span> 3214 <span class="price-item--sale price">$93.00</span> 3215 </span> 3216 3217 </div> 3218 3219</div> 3220 3221 </div> 3222</div> 3223 3224 </li> 3225 3226 <li 3227 class="predictive-search-results__card predictive-search-results__card--product" 3228 ref="resultsItems[]" 3229 > 3230 3231<div 3232 class="resource-card" 3233 data-resource-type="product" 3234> 3235 <a 3236 class="resource-card__link" 3237 href="/products/colorsxstudios-t-shirt-white" 3238 > 3239 <span class="visually-hidden"> 3240 COLORSxSTUDIOS T-SHIRT - WHITE 3241 </span> 3242 </a> 3243 <div 3244 class="resource-card__media" 3245 style="--resource-card-aspect-ratio: 4 / 5;" 3246 3247 > 3248 3249 3250 3251 <img src="//shop.colorsxstudios.com/cdn/shop/files/COLORSxSTUDIOST-SHIRT-WHITE_d68b6bc1-2eff-4ddb-91e6-98471050607d.png?v=1785561948&width=500" alt="" srcset="//shop.colorsxstudios.com/cdn/shop/files/COLORSxSTUDIOST-SHIRT-WHITE_d68b6bc1-2eff-4ddb-91e6-98471050607d.png?v=1785561948&width=240 240w, //shop.colorsxstudios.com/cdn/shop/files/COLORSxSTUDIOST-SHIRT-WHITE_d68b6bc1-2eff-4ddb-91e6-98471050607d.png?v=1785561948&width=352 352w" width="500" height="500" loading="lazy" class="resource-card__image" sizes="auto" ref="" style="object-position: 50.0% 50.0%;"> 3252 3253 <img src="//shop.colorsxstudios.com/cdn/shop/files/COLORSxSTUDIOS_T-SHIRT_-_WHITE.jpg?v=1785258663&width=500" alt="Mann trägt ein weiÃes COLORS*STUDIOS T-Shirt mit schwarzem Logo-Print auf der Brust, kombiniert mit einer schwarzen Wide-Leg-Hose. Studioaufnahme vor hellem Hintergrund." srcset="//shop.colorsxstudios.com/cdn/shop/files/COLORSxSTUDIOS_T-SHIRT_-_WHITE.jpg?v=1785258663&width=240 240w, //shop.colorsxstudios.com/cdn/shop/files/COLORSxSTUDIOS_T-SHIRT_-_WHITE.jpg?v=1785258663&width=352 352w" width="500" height="500" loading="lazy" class="resource-card__image resource-card__image--secondary" sizes="auto" ref="" data-media-id="50656975520010" style="object-position: 50.0% 50.0%;"> 3254</div> 3255 3256 <div class="resource-card__content"> 3257 <p class="resource-card__title paragraph">COLORSxSTUDIOS T-SHIRT - WHITE</p> 3258 3259 3260 <div ref="priceContainer"> 3261 3262 3263 <div 3264 class=" 3265 price__regular 3266 3267 " 3268 > 3269 <span class="price">$53.00</span> 3270 </div> 3271 <div 3272 class=" 3273 price__sale 3274 3275 price__hidden 3276 3277 " 3278 > 3279 3280 <span class="price-item__group"> 3281 <span class="visually-hidden">Regular price </span> 3282 <span class="price-item--regular compare-at-price"></span> 3283 </span> 3284 <span class="price-item__group"> 3285 <span class="visually-hidden">Sale price </span> 3286 <span class="price-item--sale price">$53.00</span> 3287 </span> 3288 3289 </div> 3290 3291</div> 3292 3293 </div> 3294</div> 3295 3296 </li> 3297 3298 <li 3299 class="predictive-search-results__card predictive-search-results__card--product" 3300 ref="resultsItems[]" 3301 > 3302 3303<div 3304 class="resource-card" 3305 data-resource-type="product" 3306> 3307 <a 3308 class="resource-card__link" 3309 href="/products/i-love-hoodie-pearl-canvas" 3310 > 3311 <span class="visually-hidden"> 3312 I LOVE HOODIE - PEARL CANVAS 3313 </span> 3314 </a> 3315 <div 3316 class="resource-card__media" 3317 style="--resource-card-aspect-ratio: 4 / 5;" 3318 3319 > 3320 3321 3322 3323 <img src="//shop.colorsxstudios.com/cdn/shop/files/2000x2500_Herz_Hoodie_02.jpg?v=1789740540&width=500" alt="" srcset="//shop.colorsxstudios.com/cdn/shop/files/2000x2500_Herz_Hoodie_02.jpg?v=1789740540&width=240 240w, //shop.colorsxstudios.com/cdn/shop/files/2000x2500_Herz_Hoodie_02.jpg?v=1789740540&width=352 352w" width="500" height="625" loading="lazy" class="resource-card__image" sizes="auto" ref="" style="object-position: 50.0% 50.0%;"> 3324 3325 <img src="//shop.colorsxstudios.com/cdn/shop/files/2000x2500_Herz_Hoodie_05.jpg?v=1789740675&width=500" alt="I LOVE HOODIE - PEARL CANVAS" srcset="//shop.colorsxstudios.com/cdn/shop/files/2000x2500_Herz_Hoodie_05.jpg?v=1789740675&width=240 240w, //shop.colorsxstudios.com/cdn/shop/files/2000x2500_Herz_Hoodie_05.jpg?v=1789740675&width=352 352w" width="500" height="625" loading="lazy" class="resource-card__image resource-card__image--secondary" sizes="auto" ref="" data-media-id="51094207398154" style="object-position: 50.0% 50.0%;"> 3326</div> 3327 3328 <div class="resource-card__content"> 3329 <p class="resource-card__title paragraph">I LOVE HOODIE - PEARL CANVAS</p> 3330 3331 3332 <div ref="priceContainer"> 3333 3334 3335 <div 3336 class=" 3337 price__regular 3338 3339 " 3340 >
3341 <span class="price">$105.00</span> 3342 </div> 3343 <div 3344 class=" 3345 price__sale 3346 3347 price__hidden 3348 3349 " 3350 > 3351 3352 <span class="price-item__group"> 3353 <span class="visually-hidden">Regular price </span> 3354 <span class="price-item--regular compare-at-price"></span> 3355 </span> 3356 <span class="price-item__group"> 3357 <span class="visually-hidden">Sale price </span> 3358 <span class="price-item--sale price">$105.00</span> 3359 </span> 3360 3361 </div> 3362 3363</div> 3364 3365 </div> 3366</div> 3367 3368 </li> 3369 3370 </ul> 3371 3372</div> 3373 3374 3375 3376 </div> 3377 3378</div> 3379 3380 </div> 3381 3382 <div class="predictive-search-form__footer"> 3383 <button 3384 class="button predictive-search__search-button" 3385 ref="viewAllButton" 3386 > 3387 View all 3388 </button> 3389 </div> 3390 </div> 3391 </form> 3392 </predictive-search-component> 3393 </dialog> 3394</dialog-component> 3395 3396 3397 3398 3399 3400 <div id="shopify-block-AdlhZazdFQTVWS3ZzY__13762318497758424536" class="shopify-block shopify-app-block"><style> 3401 .wl-btn-link { 3402 display: inline-block; 3403 text-decoration: none !important; 3404 font-weight: 600 !important; 3405 padding: 10px 24px !important; 3406 font-size: 15px !important;background-color: #3A3A3A !important; 3407 color: #ffffff !important; 3408 border: none; 3409 border-radius: 8px !important;text-align: center !important; 3410 cursor: pointer !important; 3411 transition: all 0.2s ease; 3412 } 3413 3414 .wl-btn-link:hover {opacity: 0.85;} 3415 3416 .wl-btn-link:active { 3417 transform: scale(0.98); 3418 } 3419</style> 3420
3421<script> 3422 (function() { 3423 var selector = "\/pages\/cancellation-form"; 3424 if (!selector) return; 3425 3426 function isTriggerLink(href) { 3427 if (!href) return false; 3428 var url; 3429 try { url = new URL(href, window.location.href); } catch (e) { return false; } 3430 if (url.hash) { 3431 var hashParams = new URLSearchParams(url.hash.replace(/^#/, '')); 3432 if (hashParams.get('eu-withdrawal') === 'open') return true; 3433 } 3434 if (url.search) { 3435 var searchParams = new URLSearchParams(url.search); 3436 if (searchParams.get('eu-withdrawal') === 'open') return true; 3437 } 3438 return false; 3439 } 3440 3441 function apply() { 3442 var links = document.querySelectorAll('a[href*="' + selector + '"], a[href*="eu-withdrawal"]'); 3443 for (var i = 0; i < links.length; i++) { 3444 var href = links[i].getAttribute('href') || ''; 3445 if (href.indexOf(selector) !== -1 || isTriggerLink(href)) { 3446 links[i].classList.add('wl-btn-link'); 3447 } 3448 } 3449 } 3450 3451 if (document.readyState === 'loading') { 3452 document.addEventListener('DOMContentLoaded', apply); 3453 } else { 3454 apply(); 3455 } 3456 })(); 3457</script>
3457 3458</div>
3458<script src="https://cdn.shopify.com/storefront/standard-actions.js" type="module" data-source-attribution="shopify.standard_actions"></script>
3458 3459</body> 3460</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.