https://premluczak.work/assets/js/case-study-section.js?v=trYj9jIxJgG42IKD

1(function() { 'use strict';
2
3// .case-study-section[data-background] — sets this section's own
4// background from a hex color OR an image URL (main.css consumes
5// --case-study-bg for the color case; the image case sets background-image
6// directly, since a URL has no equivalent single-property custom-property
7// trick the way a color does). A plain CSS rule can't read either straight
8// off the attribute: CSS attr() only resolves inside `content`, not
9// background-color/-image, so both cases need JS regardless.
10//
11// FOUR states, not three — the attribute's mere PRESENCE matters, not just
12// its value, and its value's FORMAT picks color vs image:
13//   attribute absent entirely   -> --case-study-bg left unset, main.css's
14//                                  own var(--case-study-bg, var(--color-
15//                                  background)) fallback resolves it to
16//                                  the live page background token.
17//   data-background="#hex"      -> --case-study-bg: #hex (flat color).
18//   data-background="" (blank)  -> --case-study-bg: transparent, explicit
19//                                  — an authored "no background" that
20//                                  must NOT fall through to the page-token
21//                                  default above. hasAttribute (not the
22//                                  querySelectorAll match, which is true
23//                                  for a blank attribute too) is what lets
24//                                  this branch tell "blank" apart from
25//                                  "has a real value" — el.dataset.background
26//                                  is '' either way absence wouldn't even
27//                                  reach this loop at all, so within it the
28//                                  only question left is real-value vs blank.
29//   data-background="<url>"     -> anything non-blank that doesn't start
30//                                  with "#" is treated as an image URL, not
31//                                  a color: sets background-image (cover)
32//                                  directly instead of --case-study-bg, and
33//                                  adds data-background-type="image" so
34//                                  main.css's [data-gradient-wash="true"]
35//                                  rules can key off it — an image
36//                                  background flips the wash's whole
37//                                  premise (see that rule's own comment):
38//                                  there's no flat --case-study-bg color
39//                                  left to fade FROM, so the wash instead
40//                                  fades the PAGE background color IN over
41//                                  the image's own edge, transparent at the
42//                                  image (inner) to --color-background at
43//                                  the far end (outer) — the reverse of the
44//                                  color case's stop order.
45function initAll() {
46  document.querySelectorAll('.case-study-section[data-background]').forEach(function(el) {
47    var value = el.dataset.background;
48    if (!value) {
49      el.style.setProperty('--case-study-bg', 'transparent');
50      return;
51    }
52    if (value.charAt(0) === '#') {
53      el.style.setProperty('--case-study-bg', value);
54      return;
55    }
56    el.setAttribute('data-background-type', 'image');
57    // CSS.escape + manual url(...) construction (not template-string
58    // interpolation) so a path containing a literal quote or backslash
59    // can't break out of the url() token — el.style.backgroundImage is a
60    // plain property assignment, not parsed as a stylesheet, so the
61    // browser won't sanitize this the way a real CSS file would.
62    el.style.backgroundImage = 'url("' + value.replace(/["\\]/g, '\\$&') + '")';
63    el.style.backgroundSize = 'cover';
64    el.style.backgroundPosition = 'center';
65  });
66}
67
68if (document.readyState === 'loading') {
69  document.addEventListener('DOMContentLoaded', initAll, { once: true });
70} else {
71  initAll();
72}
73
74})();