197 lines
3.5 KiB
CSS
197 lines
3.5 KiB
CSS
/* ===============================
|
||
Kingdom Trade Group – Inquiry Form
|
||
Figma-aligned UI
|
||
=============================== */
|
||
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||
|
||
/* ---------- Design Tokens ---------- */
|
||
:root {
|
||
--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 ---------- */
|
||
body {
|
||
font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
||
background-color: var(--bg-page);
|
||
color: var(--text-primary);
|
||
margin: 0;
|
||
padding: 2rem;
|
||
}
|
||
|
||
/* ---------- Card Container ---------- */
|
||
.form-container {
|
||
max-width: 760px;
|
||
margin: 0 auto;
|
||
background-color: var(--bg-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 Padding ---------- */
|
||
.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 number */
|
||
.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 ---------- */
|
||
.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 ---------- */
|
||
.form-control,
|
||
.form-select,
|
||
input,
|
||
select,
|
||
textarea {
|
||
height: 44px;
|
||
padding: 0.6rem 0.75rem;
|
||
border-radius: var(--radius-input);
|
||
border: 1px solid var(--border-color);
|
||
background-color: #ffffff;
|
||
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;
|
||
}
|
||
|
||
/* ---------- 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;
|
||
}
|
||
|
||
/* ---------- Hidden ---------- */
|
||
.hidden-row {
|
||
display: none;
|
||
}
|
||
|
||
/* ---------- Mobile ---------- */
|
||
@media (max-width: 768px) {
|
||
body {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.form-body {
|
||
padding: 1.75rem;
|
||
}
|
||
|
||
.form-row {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|