Edit staticfiles/css/custom.css via Editor

staticfiles/css/custom.css

@@ -1,49 +1,84 @@
-/* ===============================
+/* =====================================================
    Kingdom Trade Group – Inquiry Form
-   Figma-aligned UI
+   Flatlogic Design System + Figma Alignment
-   =============================== */
+   ===================================================== */
 
+/* Google Font */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
-/* ---------- Design Tokens ---------- */
+/* =====================================================
+   Global Design Tokens (Flatlogic Overrides + KTG Tokens)
+   ===================================================== */
 :root {
+  /* ---------- Flatlogic Core Overrides ---------- */
+  --background: #f8fafc;
+  --card: #ffffff;
+  --card-foreground: #020617;
+
+  --primary: #0f172a;
+  --primary-foreground: #ffffff;
+
+  --secondary: #eef2f7;
+  --secondary-foreground: #020617;
+
+  --accent: #2563eb;
+  --accent-foreground: #ffffff;
+
+  --muted: #eef2f7;
+  --muted-foreground: #64748b;
+
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+
+  --border: #e2e8f0;
+  --input-background: #ffffff;
+  --input: #ffffff;
+  --ring: rgba(37, 99, 235, 0.35);
+
+  --radius: 0.75rem;
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+
+  /* ---------- Kingdom Trade Group Tokens ---------- */
   --ktg-navy: #0f172a;
   --ktg-blue: #2563eb;
   --ktg-blue-soft: #dbeafe;
 
-  --bg-page: #f8fafc;
-  --bg-card: #ffffff;
-
   --text-primary: #020617;
   --text-secondary: #475569;
   --text-muted: #64748b;
 
-  --border-color: #e2e8f0;
-
   --radius-card: 12px;
   --radius-input: 8px;
 }
 
-/* ---------- Base ---------- */
+/* =====================================================
+   Base
+   ===================================================== */
 body {
   font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
-  background-color: var(--bg-page);
+  background-color: var(--background);
   color: var(--text-primary);
   margin: 0;
   padding: 2rem;
 }
 
-/* ---------- Card Container ---------- */
+/* =====================================================
+   Form Container (Card)
+   ===================================================== */
 .form-container {
   max-width: 760px;
   margin: 0 auto;
-  background-color: var(--bg-card);
+  background-color: var(--card);
   border-radius: var(--radius-card);
   box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
   overflow: hidden;
 }
 
-/* ---------- Header ---------- */
+/* =====================================================
+   Header
+   ===================================================== */
 .form-header {
   background: linear-gradient(135deg, #020617, #0f172a);
   padding: 1.75rem 2rem;
@@ -62,12 +97,16 @@ body {
   margin-top: 0.25rem;
 }
 
-/* ---------- Body Padding ---------- */
+/* =====================================================
+   Body
+   ===================================================== */
 .form-body {
   padding: 2.5rem;
 }
 
-/* ---------- Sections ---------- */
+/* =====================================================
+   Sections
+   ===================================================== */
 .form-section {
   margin-bottom: 3rem;
 }
@@ -81,7 +120,7 @@ body {
   color: var(--text-primary);
 }
 
-/* Step number */
+/* Step Indicator */
 .section-title::before {
   content: attr(data-step);
   display: inline-flex;
@@ -97,7 +136,9 @@ body {
   font-weight: 600;
 }
 
-/* ---------- Grid ---------- */
+/* =====================================================
+   Grid Layout
+   ===================================================== */
 .form-row {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -113,7 +154,9 @@ body {
   grid-column: 1 / -1;
 }
 
-/* ---------- Labels ---------- */
+/* =====================================================
+   Labels
+   ===================================================== */
 .form-group label {
   font-size: 0.8rem;
   font-weight: 500;
@@ -121,7 +164,9 @@ body {
   color: var(--text-secondary);
 }
 
-/* ---------- Inputs ---------- */
+/* =====================================================
+   Inputs & Selects
+   ===================================================== */
 .form-control,
 .form-select,
 input,
@@ -130,8 +175,8 @@ textarea {
   height: 44px;
   padding: 0.6rem 0.75rem;
   border-radius: var(--radius-input);
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--border);
-  background-color: #ffffff;
+  background-color: var(--input-background);
   font-size: 0.9rem;
   color: var(--text-primary);
 }
@@ -157,7 +202,24 @@ textarea:focus {
   color: #94a3b8;
 }
 
-/* ---------- Button ---------- */
+/* =====================================================
+   Checkbox
+   ===================================================== */
+.checkbox-group {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.checkbox-group input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--ktg-blue);
+}
+
+/* =====================================================
+   Submit Button
+   ===================================================== */
 .submit-button {
   width: 100%;
   height: 48px;
@@ -175,12 +237,16 @@ textarea:focus {
   background-color: #1d4ed8;
 }
 
-/* ---------- Hidden ---------- */
+/* =====================================================
+   Utility
+   ===================================================== */
 .hidden-row {
   display: none;
 }
 
-/* ---------- Mobile ---------- */
+/* =====================================================
+   Responsive
+   ===================================================== */
 @media (max-width: 768px) {
   body {
     padding: 1rem;
@@ -193,4 +259,4 @@ textarea:focus {
   .form-row {
     grid-template-columns: 1fr;
   }
-}
+}