From 777cc522139c9ce2aa0650fb9e8c9d300d7fd670 Mon Sep 17 00:00:00 2001 From: vickytechkey Date: Tue, 18 Aug 2026 11:35:39 +0530 Subject: [PATCH] style: apply Artisanal Heritage colors, fonts, and grid layout styles --- src/index.css | 75 +++++++++++++++++++++++++++------------------------ 1 file changed, 40 insertions(+), 35 deletions(-) diff --git a/src/index.css b/src/index.css index 7540aad..2d9fa5b 100644 --- a/src/index.css +++ b/src/index.css @@ -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);