SCSS Variables

_variables.scss contains all the design tokens that control the visual appearance of the order form. Override these values to match your brand.

Colors

// Brand
$color-primary:         #1a3a1a;    // Sidebar and primary UI color
$color-accent:          #5ddb5d;    // Buttons, links, highlights
$color-accent-hover:    #3ab53a;    // Accent hover state

// Backgrounds
$color-bg-body:         #ffffff;    // Page background
$color-bg-card:         #f8fafc;    // Card / section backgrounds
$color-bg-input:        #ffffff;    // Form input backgrounds

// Text
$color-text-primary:    #111827;    // Body text
$color-text-secondary:  #6b7280;    // Muted text, labels
$color-text-inverse:    #ffffff;    // Text on dark backgrounds

// Borders
$color-border:          #e5e7eb;    // Default border color
$color-border-focus:    $color-accent; // Input focus border

// Status colors
$color-success:         #10b981;
$color-warning:         #f59e0b;
$color-danger:          #ef4444;
$color-info:            #3b82f6;

Typography

$font-family-base:      'Inter', 'ui-sans-serif', system-ui, sans-serif;
$font-family-mono:      'JetBrains Mono', 'ui-monospace', monospace;

$font-size-base:        16px;
$font-size-sm:          14px;
$font-size-xs:          12px;
$font-size-lg:          18px;
$font-size-xl:          20px;

$font-weight-normal:    400;
$font-weight-medium:    500;
$font-weight-semibold:  600;
$font-weight-bold:      700;

$line-height-base:      1.6;
$line-height-tight:     1.25;

Spacing

$spacing-xs:   4px;
$spacing-sm:   8px;
$spacing-md:   16px;
$spacing-lg:   24px;
$spacing-xl:   32px;
$spacing-2xl:  48px;

Border Radius

$radius-sm:     4px;
$radius-md:     8px;
$radius-lg:     12px;
$radius-xl:     16px;
$radius-full:   9999px;   // Pill shape

Shadows

$shadow-sm:   0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.10);
$shadow-md:   0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
$shadow-lg:   0 10px 15px rgba(0,0,0,.10), 0 4px 6px rgba(0,0,0,.05);

Component-Specific Variables

// Checkout header
$header-bg:             $color-primary;
$header-height:         64px;
$header-text-color:     #ffffff;

// Order form container
$form-max-width:        780px;
$form-padding:          $spacing-xl;

// Product card
$product-card-bg:       $color-bg-card;
$product-card-border:   $color-border;
$product-card-radius:   $radius-lg;

// Billing cycle pills
$cycle-pill-bg:         #f3f4f6;
$cycle-pill-bg-active:  $color-accent;
$cycle-pill-color:      $color-text-secondary;
$cycle-pill-color-active: #ffffff;
$cycle-pill-radius:     $radius-full;

// Primary button
$btn-primary-bg:        $color-accent;
$btn-primary-color:     #ffffff;
$btn-primary-radius:    $radius-md;
$btn-primary-height:    44px;

// Input fields
$input-height:          42px;
$input-radius:          $radius-md;
$input-border:          $color-border;
$input-border-focus:    $color-accent;
$input-padding-x:       $spacing-md;

Applying Variable Changes

After editing variables, rebuild the CSS:

cd /path/to/whmcs/templates/orderforms/HmSingleOrderForm
npm run build

Clear your WHMCS Smarty cache (Utilities → System → Smarty Cache) and hard-refresh the browser to see changes.

Example: Full Brand Override

To replace the default green accent with a blue brand:

// In _custom.scss — override before other rules
$color-primary:       #1e3a5f;
$color-accent:        #3b82f6;
$color-accent-hover:  #2563eb;

$cycle-pill-bg-active:   $color-accent;
$btn-primary-bg:         $color-accent;
$color-border-focus:     $color-accent;
$header-bg:              $color-primary;