How can I force Dynamic CSS via ACF values to update on page load?

I’m trying to dynamically change the background color of a post on scroll to colors set in post options via an ACF color picker. I was able to source enough code examples to get it working (I thought) when developing locally, but now that I’ve moved it to a real server, it doesn’t function the same way.

Problem: The color changing works on the first post I look at, but when I go to another post, the background color that should be displayed (or changed to) is the same as the first post. The only way to get it to display the correct color is to do a hard refresh.

Test it by viewing these two pages. You’ll notice they both have the same color to start at the top of the page as well as at the very bottom when you scroll (color changes again). But doing a hard refresh will change that. (first link should be peach background, second link blue).
https://www.conrad-design.com/dev/cd2020/projects/blush-salon-spa-website-design/
https://www.conrad-design.com/dev/cd2020/projects/pantel-business-systems-website-design/

Here’s how I have it set up so far:

JS for color changing on scroll effect:

jQuery(document).ready(function($) {
    
    $(window).scroll(function() {

  var $window = $(window),
      $body = $('body'),
      $panel = $('.panel');

  var scroll = $window.scrollTop() + ($window.height() / 3);
 
  $panel.each(function () {
    var $this = $(this);

    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
          
      $body.removeClass(function (index, css) {
        return (css.match (/(^|s)color-S+/g) || []).join(' ');
      });

      $body.addClass('color-' + $(this).data('color'));
    }
  });    
  
}).scroll();
    
});

It’s enqueued like this in my functions.php file:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
       'child-theme-script', 
       get_stylesheet_directory_uri() . '/js/cdscripts.js', 
       array('jquery') 
    );

    wp_enqueue_script('child-theme-script');
}

PHP file to generate custom CSS file:

.color-accent {
  background-color:<?php the_field('accent-color');?> !important;
}
.color-initial {
  background-color:<?php the_field('initial-color');?> !important;
}

Function to convert PHP to CSS and enqueue it:

function generate_options_css() {
    ob_start(); // Capture all output into buffer
    require_once dirname( __FILE__ ) . '/inc/custom-styles.php';
    $css = ob_get_clean(); // Store output in a variable, then flush the buffer
    file_put_contents(dirname( __FILE__ ) . '/inc/custom-styles.css', $css, LOCK_EX); // Save it as a css file
    
    wp_enqueue_style( 'custom-styles', get_stylesheet_directory_uri() . '/inc/custom-styles.css' );
}
add_action( 'wp_enqueue_scripts', 'generate_options_css' );

In the post template, the sections I want to change background colors on when they’re scrolled to are assigned the "panel" class and data-color="XXXXXXX" value depending on what color from ACF I want to use.

Is there any other way for me to accomplish this that will force the new CSS values to be loaded for every page/post?

// get theme version
function cd_get_version() {
    $theme_data = wp_get_theme();
    return $theme_data->Version;
}
$theme_version = cd_get_version();
global $theme_version;

// get random number
function cd_get_random() {
    $randomizr = '-' . rand(100,999);
    return $randomizr;
}
$random_number = cd_get_random();
global $random_number;

function generate_options_css() {
    ob_start(); // Capture all output into buffer
    require_once dirname( __FILE__ ) . '/inc/custom-styles.php';
    $css = ob_get_clean(); // Store output in a variable, then flush the buffer
    file_put_contents(dirname( __FILE__ ) . '/inc/custom-styles.css', $css, LOCK_EX); // Save it as a css file
    
    global $theme_version, $random_number;
    if (!is_admin()) {
        wp_register_style('custom_styles', get_stylesheet_directory_uri() . '/inc/custom-styles.css', false, $theme_version . $random_number);
        wp_enqueue_style('custom_styles');
    }
}
add_action( 'wp_print_styles', 'generate_options_css' );