Mold Regulation System 1.04

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mold Regulation System</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
  <style>
    :root {
      /* Primary Colors */
      --primary-blue: #0a446d;
      --secondary-blue: #1C7ED6;
      --primary-green: #2e7d32;
      /* Accent Colors */
      --accent-green: #31ad4c;
      --accent-red: #e93b4c;
      --accent-orange: #E08000;
      --accent-teal: #17A2B8;
      /* Background Colors */
      --bgc-body: #ffffff;
      --bgc-modal: #ffffff;
      --bgc-table: #9bc2e0;
      --bgc-table-border: #03203a;
      --bgc-section: #6b9ac2;
      --bgc-input: #ffffff;
      --bgc-input-focus: rgb(180, 243, 251);
      --bgc-input-hover: rgb(255, 252, 209);
      --background-section-light: #e6f2f9;
      /* Border Colors & Radius */
      --border-light: #E9ECEF;
      --border-medium: #CED4DA;
      --border-radius: 0.35rem;
      --border-color-section: #4a4a4a;
      --border-focus: var(--secondary-blue);
      /* Text Colors */
      --font-color-base: #212529;
      --font-color-unit: #1d1d1d;
      --font-color-label: #000000;
      --font-color-muted: #6C757D;
      /* Font Sizes */
      --font-size-root: 1.00rem;
      --font-size-header: 1.15rem;
      --font-size-label: 1.05rem;
      --font-size-input: 1.15rem;
      --font-size-unit: 0.85rem;
      /* Gaps */
      --gap-input-content: 1.4rem;
      --gap-xxs: 2px;
      --gap-xs: 4px;
      --gap-sm: 6px;
      --gap-md: 8px;
      --gap-lg: 12px;
      --gap-section: 1.05rem;
      --gap-label-input: 4px;
      --text-light: #FFFFFF;
      /* Spacing */
      --spacing-xxs: 1px;
     ...