/* ============================================================
GARAHPRAVESH.COM — DESIGN SYSTEM
Palette D: Deep Blue + Warm Sand
Typography: Playfair Display (headings) + Inter (body/UI)
Version: 1.0 | June 2026
============================================================ */
/* Google Fonts — paste this in your before this CSS */
/* */
/* ============================================================
1. CSS VARIABLES — SINGLE SOURCE OF TRUTH
============================================================ */
:root {
/* --- Core Brand Colors --- */
--blue-dark: #1C3553; /* Primary — navbars, headings, main buttons */
--blue-mid: #2E5480; /* Hover states, borders, secondary buttons */
--blue-light: #EAF0F6; /* Light tints, card image BG, info badges */
--blue-faint: #F4F7FA; /* Page background */
--sand: #C9A96E; /* Accent — logo, CTA highlights, Vastu badge */
--sand-soft: #F5EFE4; /* Warm backgrounds, hover tints on sand elements */
--sand-dark: #7A5C2E; /* Text on sand backgrounds */
/* --- Neutral Scale --- */
--white: #FFFFFF;
--gray-100: #F4F7FA; /* Page BG */
--gray-200: #E8EDF2; /* Dividers, subtle borders */
--gray-400: #A0B0C0; /* Placeholder text, disabled */
--gray-600: #607080; /* Secondary body text */
--gray-900: #1A1A2E; /* Primary body text */
/* --- Semantic Colors --- */
--success: #3E6B45;
--success-bg: #EBF3EC;
--warning: #7A5C2E;
--warning-bg: #F5EFE4;
--error: #7A2E2E;
--error-bg: #F5EAEA;
/* --- Typography --- */
--font-display: 'Playfair Display', Georgia, serif;
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
--text-xs: 11px;
--text-sm: 13px;
--text-base: 15px;
--text-md: 17px;
--text-lg: 20px;
--text-xl: 26px;
--text-2xl: 34px;
--text-3xl: 44px;
--weight-regular: 400;
--weight-medium: 500;
--weight-semi: 600;
--leading-tight: 1.2;
--leading-snug: 1.4;
--leading-normal: 1.6;
--leading-loose: 1.8;
/* --- Spacing Scale --- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* --- Border Radius --- */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-pill: 999px;
/* --- Shadows --- */
--shadow-card: 0 1px 4px rgba(28, 53, 83, 0.08), 0 0 0 0.5px rgba(28, 53, 83, 0.08);
--shadow-hover: 0 4px 16px rgba(28, 53, 83, 0.12), 0 0 0 0.5px rgba(28, 53, 83, 0.10);
--shadow-nav: 0 1px 0 rgba(28, 53, 83, 0.10);
/* --- Transitions --- */
--transition: 180ms ease;
/* --- Layout --- */
--container-max: 1200px;
--container-pad: var(--space-6);
}
/* ============================================================
2. RESET & BASE
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--weight-regular);
color: var(--gray-900);
background-color: var(--gray-100);
line-height: var(--leading-normal);
-webkit-font-smoothing: antialiased;
}
img, video {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button, input, select, textarea {
font-family: var(--font-body);
font-size: var(--text-base);
}
ul, ol {
list-style: none;
}
/* ============================================================
3. TYPOGRAPHY
============================================================ */
/* Display headings — Playfair Display */
.h1, h1 {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: 700;
color: var(--blue-dark);
line-height: var(--leading-tight);
letter-spacing: -0.5px;
}
.h2, h2 {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 700;
color: var(--blue-dark);
line-height: var(--leading-tight);
}
.h3, h3 {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 600;
color: var(--blue-dark);
line-height: var(--leading-snug);
}
.h4, h4 {
font-family: var(--font-body);
font-size: var(--text-md);
font-weight: var(--weight-semi);
color: var(--blue-dark);
line-height: var(--leading-snug);
}
/* Body text */
.text-lg { font-size: var(--text-lg); line-height: var(--leading-normal); }
.text-base { font-size: var(--text-base); line-height: var(--leading-normal); }
.text-sm { font-size: var(--text-sm); line-height: var(--leading-normal); }
.text-xs { font-size: var(--text-xs); line-height: var(--leading-normal); }
.text-primary { color: var(--gray-900); }
.text-secondary { color: var(--gray-600); }
.text-muted { color: var(--gray-400); }
.text-blue { color: var(--blue-dark); }
.text-sand { color: var(--sand-dark); }
.text-white { color: var(--white); }
.font-medium { font-weight: var(--weight-medium); }
.font-semi { font-weight: var(--weight-semi); }
/* Section label — small uppercase tag above headings */
.eyebrow {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--weight-semi);
color: var(--sand);
letter-spacing: 0.1em;
text-transform: uppercase;
display: block;
margin-bottom: var(--space-2);
}
/* ============================================================
4. LAYOUT
============================================================ */
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-pad);
}
.section {
padding: var(--space-20) 0;
}
.section-sm {
padding: var(--space-12) 0;
}
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
/* ============================================================
5. NAVIGATION
============================================================ */
.navbar {
background: var(--blue-dark);
box-shadow: var(--shadow-nav);
position: sticky;
top: 0;
z-index: 100;
}
.navbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
padding: 0 var(--container-pad);
max-width: var(--container-max);
margin: 0 auto;
}
.navbar-logo {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: var(--white);
letter-spacing: 0.2px;
text-decoration: none;
}
.navbar-logo span {
color: var(--sand);
}
.navbar-links {
display: flex;
align-items: center;
gap: var(--space-8);
list-style: none;
}
.navbar-links a {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: rgba(255,255,255,0.80);
text-decoration: none;
transition: color var(--transition);
}
.navbar-links a:hover {
color: var(--white);
}
.navbar-cta {
background: var(--sand);
color: var(--blue-dark) !important;
font-weight: var(--weight-semi) !important;
padding: var(--space-2) var(--space-5);
border-radius: var(--radius-md);
transition: background var(--transition) !important;
}
.navbar-cta:hover {
background: #D4B478 !important;
}
/* Mobile hamburger */
.navbar-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: var(--space-2);
color: var(--white);
font-size: 22px;
}
/* ============================================================
6. BUTTONS
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-body);
font-weight: var(--weight-semi);
font-size: var(--text-sm);
padding: 10px var(--space-6);
border-radius: var(--radius-md);
border: none;
cursor: pointer;
text-decoration: none;
transition: background var(--transition), color var(--transition), transform var(--transition);
white-space: nowrap;
}
.btn:active {
transform: scale(0.98);
}
/* Primary — deep blue */
.btn-primary {
background: var(--blue-dark);
color: var(--white);
}
.btn-primary:hover {
background: var(--blue-mid);
}
/* Secondary — sand accent */
.btn-secondary {
background: var(--sand);
color: var(--blue-dark);
}
.btn-secondary:hover {
background: #D4B478;
}
/* Outline — bordered */
.btn-outline {
background: transparent;
color: var(--blue-dark);
border: 1.5px solid var(--blue-dark);
}
.btn-outline:hover {
background: var(--blue-light);
}
/* Ghost — white on dark BG */
.btn-ghost {
background: rgba(255,255,255,0.12);
color: var(--white);
border: 1px solid rgba(255,255,255,0.25);
}
.btn-ghost:hover {
background: rgba(255,255,255,0.20);
}
/* WhatsApp CTA — sand on blue */
.btn-whatsapp {
background: var(--sand);
color: var(--blue-dark);
font-weight: var(--weight-semi);
padding: 10px var(--space-5);
}
.btn-whatsapp:hover {
background: #D4B478;
}
/* Sizes */
.btn-sm { font-size: var(--text-xs); padding: 6px var(--space-4); }
.btn-lg { font-size: var(--text-base); padding: 14px var(--space-8); }
.btn-full { width: 100%; }
/* ============================================================
7. CARDS
============================================================ */
/* Base card */
.card {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
}
/* Property listing card */
.property-card {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
transition: box-shadow var(--transition), transform var(--transition);
}
.property-card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-3px);
}
.property-card-img {
position: relative;
height: 200px;
overflow: hidden;
background: var(--blue-light);
}
.property-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 300ms ease;
}
.property-card:hover .property-card-img img {
transform: scale(1.03);
}
.property-card-badge {
position: absolute;
top: var(--space-3);
left: var(--space-3);
background: var(--blue-dark);
color: var(--white);
font-size: var(--text-xs);
font-weight: var(--weight-semi);
padding: 3px 10px;
border-radius: var(--radius-pill);
}
.property-card-badge.ready {
background: var(--success);
}
.property-card-body {
padding: var(--space-4) var(--space-5);
}
.property-card-title {
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: 700;
color: var(--blue-dark);
margin-bottom: var(--space-1);
line-height: var(--leading-snug);
}
.property-card-loc {
font-size: var(--text-xs);
color: var(--gray-600);
margin-bottom: var(--space-3);
display: flex;
align-items: center;
gap: var(--space-1);
}
.property-card-pills {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.property-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--space-3);
border-top: 0.5px solid var(--gray-200);
}
.property-price {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 700;
color: var(--blue-dark);
}
/* ============================================================
8. PILLS & BADGES
============================================================ */
.pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--text-xs);
font-weight: var(--weight-medium);
padding: 3px 10px;
border-radius: var(--radius-pill);
white-space: nowrap;
}
.pill-blue { background: var(--blue-light); color: var(--blue-dark); }
.pill-sand { background: var(--sand-soft); color: var(--sand-dark); }
.pill-green { background: var(--success-bg); color: var(--success); }
.pill-vastu { background: var(--sand-soft); color: var(--sand-dark); }
/* ============================================================
9. FORMS & INPUTS
============================================================ */
.input, input[type="text"], input[type="email"],
input[type="tel"], input[type="number"], select, textarea {
width: 100%;
padding: 10px var(--space-4);
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--gray-900);
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-md);
outline: none;
transition: border-color var(--transition);
appearance: none;
}
.input:focus, input:focus, select:focus, textarea:focus {
border-color: var(--blue-mid);
box-shadow: 0 0 0 3px rgba(46, 84, 128, 0.12);
}
.input::placeholder { color: var(--gray-400); }
label {
display: block;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--gray-900);
margin-bottom: var(--space-2);
}
.form-group { margin-bottom: var(--space-5); }
/* Search bar — homepage hero */
.search-bar {
display: flex;
background: var(--white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-hover);
}
.search-bar input {
flex: 1;
border: none;
padding: var(--space-4) var(--space-5);
font-size: var(--text-base);
outline: none;
border-radius: 0;
}
.search-bar select {
border: none;
border-left: 1px solid var(--gray-200);
border-radius: 0;
padding: var(--space-4);
min-width: 120px;
color: var(--gray-600);
}
.search-bar .btn {
border-radius: 0;
padding: var(--space-4) var(--space-8);
font-size: var(--text-base);
}
/* ============================================================
10. MAP SECTION
============================================================ */
.map-wrapper {
position: relative;
width: 100%;
height: 520px;
background: var(--blue-light);
border-radius: var(--radius-xl);
overflow: hidden;
}
#map {
width: 100%;
height: 100%;
}
/* Leaflet custom popup */
.map-popup {
font-family: var(--font-body);
min-width: 180px;
}
.map-popup-title {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
color: var(--blue-dark);
margin-bottom: 4px;
}
.map-popup-sub {
font-size: 12px;
color: var(--gray-600);
margin-bottom: 8px;
}
.map-popup-btn {
display: block;
background: var(--blue-dark);
color: var(--white);
font-size: 11px;
font-weight: 600;
padding: 6px 12px;
border-radius: var(--radius-md);
text-align: center;
text-decoration: none;
}
/* Area zone floating tags */
.area-tag-floating {
background: var(--blue-dark);
color: var(--white);
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
padding: 5px 12px;
border-radius: var(--radius-pill);
cursor: pointer;
transition: background var(--transition);
white-space: nowrap;
}
.area-tag-floating:hover {
background: var(--sand);
color: var(--blue-dark);
}
/* ============================================================
11. SECTION HEADERS
============================================================ */
.section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: var(--space-8);
}
.section-header-left { max-width: 520px; }
.section-title {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 700;
color: var(--blue-dark);
line-height: var(--leading-tight);
margin-bottom: var(--space-2);
}
.section-subtitle {
font-size: var(--text-base);
color: var(--gray-600);
line-height: var(--leading-normal);
}
/* Dark section header band */
.section-band {
background: var(--blue-dark);
border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-6);
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-6);
}
.section-band-title {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 700;
color: var(--white);
}
.section-band-sub {
font-size: var(--text-xs);
color: rgba(255,255,255,0.65);
margin-top: var(--space-1);
}
/* ============================================================
12. FOOTER
============================================================ */
.footer {
background: var(--blue-dark);
color: rgba(255,255,255,0.75);
padding: var(--space-16) 0 var(--space-8);
margin-top: var(--space-24);
}
.footer-logo {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: var(--white);
margin-bottom: var(--space-3);
}
.footer-logo span { color: var(--sand); }
.footer-tagline {
font-size: var(--text-sm);
color: rgba(255,255,255,0.55);
max-width: 260px;
line-height: var(--leading-normal);
}
.footer-heading {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--weight-semi);
color: var(--sand);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: var(--space-4);
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: var(--space-3); }
.footer-links a {
font-size: var(--text-sm);
color: rgba(255,255,255,0.65);
text-decoration: none;
transition: color var(--transition);
}
.footer-links a:hover { color: var(--white); }
.footer-bottom {
margin-top: var(--space-12);
padding-top: var(--space-6);
border-top: 0.5px solid rgba(255,255,255,0.12);
display: flex;
align-items: center;
justify-content: space-between;
font-size: var(--text-xs);
color: rgba(255,255,255,0.40);
}
/* ============================================================
13. UTILITY CLASSES
============================================================ */
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.bg-blue { background: var(--blue-dark); }
.bg-blue-mid { background: var(--blue-mid); }
.bg-blue-lt { background: var(--blue-light); }
.bg-sand { background: var(--sand-soft); }
.bg-white { background: var(--white); }
.bg-page { background: var(--gray-100); }
.border-top { border-top: 0.5px solid var(--gray-200); }
.border-bottom { border-bottom: 0.5px solid var(--gray-200); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.hidden { display: none; }
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ============================================================
14. RESPONSIVE — MOBILE FIRST BREAKPOINTS
============================================================ */
/* Tablet — 768px */
@media (max-width: 768px) {
:root {
--container-pad: var(--space-4);
}
.h1, h1 { font-size: var(--text-2xl); }
.h2, h2 { font-size: var(--text-xl); }
.h3, h3 { font-size: var(--text-lg); }
.section { padding: var(--space-12) 0; }
.section-sm { padding: var(--space-8) 0; }
.grid-2, .grid-3, .grid-4 {
grid-template-columns: 1fr;
}
.grid-2-mobile {
grid-template-columns: repeat(2, 1fr);
}
.navbar-links { display: none; }
.navbar-toggle { display: block; }
.navbar-links.open {
display: flex;
flex-direction: column;
position: absolute;
top: 64px;
left: 0;
right: 0;
background: var(--blue-dark);
padding: var(--space-4) var(--space-6) var(--space-6);
gap: var(--space-5);
z-index: 99;
}
.section-header {
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
}
.search-bar {
flex-direction: column;
border-radius: var(--radius-lg);
}
.search-bar input,
.search-bar select,
.search-bar .btn {
border-radius: 0;
border-left: none;
border-top: 1px solid var(--gray-200);
width: 100%;
}
.search-bar input { border-top: none; }
.map-wrapper { height: 360px; border-radius: var(--radius-lg); }
.section-band {
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
.footer-bottom {
flex-direction: column;
gap: var(--space-3);
text-align: center;
}
}
/* Mobile — 480px */
@media (max-width: 480px) {
.h1, h1 { font-size: var(--text-xl); }
.btn-lg { padding: 12px var(--space-6); }
.property-card-img { height: 160px; }
}
/* ============================================================
END OF DESIGN SYSTEM
Usage: link this file in every page
============================================================ */