Compare commits
No commits in common. "ai-dev" and "master" have entirely different histories.
@ -1,262 +1,21 @@
|
|||||||
/* =====================================================
|
|
||||||
Kingdom Trade Group – Inquiry Form
|
|
||||||
Flatlogic Design System + Figma Alignment
|
|
||||||
===================================================== */
|
|
||||||
|
|
||||||
/* Google Font */
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
|
||||||
|
|
||||||
/* =====================================================
|
|
||||||
Global Design Tokens (Flatlogic Overrides + KTG Tokens)
|
|
||||||
===================================================== */
|
|
||||||
:root {
|
:root {
|
||||||
/* ---------- Flatlogic Core Overrides ---------- */
|
--bg-color-start: #6a11cb;
|
||||||
--background: #f8fafc;
|
--bg-color-end: #2575fc;
|
||||||
--card: #ffffff;
|
--text-color: #ffffff;
|
||||||
--card-foreground: #020617;
|
--card-bg-color: rgba(255, 255, 255, 0.01);
|
||||||
|
--card-border-color: rgba(255, 255, 255, 0.1);
|
||||||
--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;
|
|
||||||
|
|
||||||
--text-primary: #020617;
|
|
||||||
--text-secondary: #475569;
|
|
||||||
--text-muted: #64748b;
|
|
||||||
|
|
||||||
--radius-card: 12px;
|
|
||||||
--radius-input: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* =====================================================
|
|
||||||
Base
|
|
||||||
===================================================== */
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
margin: 0;
|
||||||
background-color: var(--background);
|
font-family: 'Inter', sans-serif;
|
||||||
color: var(--text-primary);
|
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
||||||
margin: 0;
|
color: var(--text-color);
|
||||||
padding: 2rem;
|
display: flex;
|
||||||
}
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
/* =====================================================
|
min-height: 100vh;
|
||||||
Form Container (Card)
|
text-align: center;
|
||||||
===================================================== */
|
overflow: hidden;
|
||||||
.form-container {
|
position: relative;
|
||||||
max-width: 760px;
|
|
||||||
margin: 0 auto;
|
|
||||||
background-color: var(--card);
|
|
||||||
border-radius: var(--radius-card);
|
|
||||||
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =====================================================
|
|
||||||
Header
|
|
||||||
===================================================== */
|
|
||||||
.form-header {
|
|
||||||
background: linear-gradient(135deg, #020617, #0f172a);
|
|
||||||
padding: 1.75rem 2rem;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-header h1 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 600;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-header p {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: #cbd5f5;
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =====================================================
|
|
||||||
Body
|
|
||||||
===================================================== */
|
|
||||||
.form-body {
|
|
||||||
padding: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =====================================================
|
|
||||||
Sections
|
|
||||||
===================================================== */
|
|
||||||
.form-section {
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Step Indicator */
|
|
||||||
.section-title::before {
|
|
||||||
content: attr(data-step);
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 26px;
|
|
||||||
height: 26px;
|
|
||||||
margin-right: 0.75rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: var(--ktg-blue);
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =====================================================
|
|
||||||
Grid Layout
|
|
||||||
===================================================== */
|
|
||||||
.form-row {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 1.25rem 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group.full-width {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =====================================================
|
|
||||||
Labels
|
|
||||||
===================================================== */
|
|
||||||
.form-group label {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 0.35rem;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =====================================================
|
|
||||||
Inputs & Selects
|
|
||||||
===================================================== */
|
|
||||||
.form-control,
|
|
||||||
.form-select,
|
|
||||||
input,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
height: 44px;
|
|
||||||
padding: 0.6rem 0.75rem;
|
|
||||||
border-radius: var(--radius-input);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
background-color: var(--input-background);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
min-height: 110px;
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Focus */
|
|
||||||
.form-control:focus,
|
|
||||||
.form-select:focus,
|
|
||||||
input:focus,
|
|
||||||
select:focus,
|
|
||||||
textarea:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--ktg-blue);
|
|
||||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Placeholder */
|
|
||||||
::placeholder {
|
|
||||||
color: #94a3b8;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =====================================================
|
|
||||||
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;
|
|
||||||
margin-top: 2rem;
|
|
||||||
background-color: var(--ktg-blue);
|
|
||||||
color: #ffffff;
|
|
||||||
border: none;
|
|
||||||
border-radius: 10px;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submit-button:hover {
|
|
||||||
background-color: #1d4ed8;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =====================================================
|
|
||||||
Utility
|
|
||||||
===================================================== */
|
|
||||||
.hidden-row {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =====================================================
|
|
||||||
Responsive
|
|
||||||
===================================================== */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
body {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-body {
|
|
||||||
padding: 1.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-row {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user