vignesh/supplier_central_frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: apply Artisanal Heritage colors, fonts, and grid layout styles
Some checks failed
Beta CI/CD Pipeline / build-and-test (push) Failing after 47s
Details
Beta CI/CD Pipeline / deploy-beta (push) Has been skipped
Details

Browse source
This commit is contained in:
vickytechkey 2026-08-18 11:35:39 +05:30
parent 3748de8674
commit 777cc52213
1 changed files with 40 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
src/index.css
View file

@ -1,23 +1,28 @@
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Work+Sans:wght@300;400;500;600;700&display=swap');
:root {
/* Colors */
--primary: #1A2B45; /* Deep Navy Blue */
--accent: #E9C46A; /* Amber Gold */
--bg: #F5F0EA; /* Warm Cream */
--card-bg: #FFFFFF; /* Clean White */
--text-dark: #1A2B45;
--text-muted: #5A6B82;
--border: #D8D1C5;
--input-focus: #1A2B45;
--success: #2A9D8F;
--error: #E76F51;
/* Colors - Artisanal Heritage */
--primary: #6B1A2C; /* Primary Maroon */
--accent: #6B1A2C; /* Same Maroon for primary actions */
--bg: #F9F6F2; /* Parchment Warm Off-white */
--card-bg: #FFFFFF; /* Clean White */
--text-dark: #4A4A4A; /* Soft Charcoal body text */
--text-muted: #887274; /* Outline/Border color or muted text */
--border: #D9C5B2; /* Tertiary border/divider */
--input-focus: #6B1A2C;
--success: #2A9D8F; /* Muted sage green */
--error: #BA1A1A;
/* Typography */
--font-family: 'Outfit', system-ui, -apple-system, sans-serif;
--font-family: 'Work Sans', system-ui, -apple-system, sans-serif;
--heading-font-family: 'Libre Caslon Text', serif;
/* Layout */
--max-width: 1200px;
--max-width: 1120px;
}
h1, h2, h3, h4, h5, h6, .logo-text, .form-card-title, .hero-content h1 {
font-family: var(--heading-font-family);
}
* {
@ -66,7 +71,7 @@ body {
color: var(--primary);
width: 36px;
height: 36px;
border-radius: 8px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
@ -113,7 +118,7 @@ body {
/* Buttons */
.btn {
padding: 0.6rem 1.25rem;
border-radius: 8px;
border-radius: 4px;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
@ -219,7 +224,7 @@ body {
.hero-image-wrapper {
position: relative;
border-radius: 20px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(26, 43, 69, 0.1);
aspect-ratio: 1.5;
@ -254,7 +259,7 @@ body {
.feature-card {
background-color: var(--bg);
padding: 2.5rem;
border-radius: 16px;
border-radius: 8px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid var(--border);
}
@ -267,7 +272,7 @@ body {
.feature-icon-wrapper {
width: 50px;
height: 50px;
border-radius: 12px;
border-radius: 6px;
background-color: var(--primary);
color: var(--accent);
display: flex;
@ -303,7 +308,7 @@ body {
.artisan-card {
background-color: var(--card-bg);
border-radius: 20px;
border-radius: 10px;
padding: 3rem;
display: flex;
gap: 3rem;
@ -344,7 +349,7 @@ body {
/* Forms */
.form-card {
background-color: var(--card-bg);
border-radius: 16px;
border-radius: 8px;
padding: 3rem;
max-width: 540px;
margin: 3rem auto;
@ -381,7 +386,7 @@ body {
.form-control {
width: 100%;
padding: 0.75rem 1rem;
border-radius: 8px;
border-radius: 4px;
border: 1px solid var(--border);
font-family: inherit;
font-size: 0.95rem;
@ -474,7 +479,7 @@ body {
.upload-preview-box {
width: 64px;
height: 64px;
border-radius: 8px;
border-radius: 4px;
border: 1px solid var(--border);
background-color: #FAFAFA;
display: flex;
@ -576,7 +581,7 @@ body {
.team-card {
background-color: var(--card-bg);
border-radius: 12px;
border-radius: 6px;
padding: 2rem;
text-align: center;
border: 1px solid var(--border);
@ -618,7 +623,7 @@ body {
.contact-info-panel {
background-color: var(--card-bg);
border-radius: 16px;
border-radius: 8px;
padding: 3rem;
border: 1px solid var(--border);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
@ -642,7 +647,7 @@ body {
.map-placeholder {
height: 180px;
background-color: #e2e8f0;
border-radius: 12px;
border-radius: 6px;
margin-top: 1.5rem;
display: flex;
align-items: center;
@ -690,7 +695,7 @@ body {
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
border-radius: 8px;
border-radius: 4px;
transition: all 0.2s ease;
display: flex;
align-items: center;
@ -744,7 +749,7 @@ body {
.metric-data-card {
background-color: var(--card-bg);
border-radius: 12px;
border-radius: 6px;
padding: 1.5rem;
border: 1px solid var(--border);
box-shadow: 0 4px 15px rgba(26, 43, 69, 0.03);
@ -768,7 +773,7 @@ body {
/* Dynamic Charts & Filter Layout */
.chart-card {
background-color: var(--card-bg);
border-radius: 16px;
border-radius: 8px;
padding: 2rem;
border: 1px solid var(--border);
margin-bottom: 2.5rem;
@ -793,7 +798,7 @@ body {
display: flex;
background-color: var(--bg);
padding: 0.25rem;
border-radius: 8px;
border-radius: 4px;
border: 1px solid var(--border);
gap: 0.25rem;
}
@ -851,7 +856,7 @@ body {
align-items: center;
background-color: var(--card-bg);
padding: 1rem;
border-radius: 8px;
border-radius: 4px;
border: 1px solid var(--border);
margin-bottom: 2rem;
}
@ -859,7 +864,7 @@ body {
/* Tables */
.dashboard-table-wrapper {
background-color: var(--card-bg);
border-radius: 12px;
border-radius: 6px;
border: 1px solid var(--border);
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
@ -905,7 +910,7 @@ body {
/* Badges */
.badge {
padding: 0.25rem 0.6rem;
border-radius: 20px;
border-radius: 10px;
font-size: 0.75rem;
font-weight: 700;
display: inline-block;
@ -936,7 +941,7 @@ body {
.bulk-drop-zone {
border: 2px dashed var(--border);
background-color: #FAFAFA;
border-radius: 12px;
border-radius: 6px;
padding: 3rem;
text-align: center;
cursor: pointer;
@ -966,7 +971,7 @@ body {
/* Conf preview styles override */
.conf-dashboard-preview {
margin-top: 2rem;
border-radius: 12px;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--border);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);