/* * ============================================================ * MAHAA VIGNESH — VISION THEME OVERRIDE * Matches: https://mahaa-vision-builds.lovable.app * Drop after main.css in to apply * ============================================================ * * COLOR SYSTEM (from reference site) * --primary #374927 Forest green (buttons, accents, highlights) * --primary-deep #263a4f Deep navy-teal (headings, dark text) * --primary-light #5f7a3b Lighter green (hover states, gradients) * --primary-muted #7c9470 Muted sage (sub-labels, borders) * --leaf-bg #fafcf5 Warm off-white (section backgrounds) * --card-bg #f4f7ee Light sage card (tag pills, cards) * --border-light #e3e9d9 Sage border (cards, dividers) * --text-body #333333 Body text * --text-muted #4a6040 Muted green-grey * * FONT SYSTEM (from reference site) * Display (h1, hero): Playfair Display — serif, supports italic * Headings (h2-h4): Poppins 600/700 — geometric sans * Navigation / UI: Work Sans 600 — clean labels * Body / paragraphs: Source Sans Pro — readable * Tag pills / badges: Inter 500 — small UI text * ============================================================ */ /* ── Google Fonts ─────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Poppins:wght@400;600;700&family=Work+Sans:wght@400;500;600&family=Source+Sans+Pro:wght@300;400;600&family=Inter:wght@400;500;600&display=swap'); /* ── CSS Custom Properties ────────────────────────────────── */ :root { --mv-green: #114a90; --mv-green-light: #df2224; --mv-green-deep: #2e4524; --mv-navy: #263a4f; --mv-sage: #7c9470; --mv-sage-border: #cbdbb8; --mv-sage-border2: #e3e9d9; --mv-bg-leaf: #fafcf5; --mv-bg-card: #f4f7ee; --mv-bg-tag: #37492715; --mv-text-body: #333333; --mv-text-muted: #4a6040; --mv-text-light: #8d9aa8; --mv-white: #ffffff; } /* Navigation — Work Sans */ /*.navbar .nav a,*/ /*.navbar .nav-link,*/ /*.mainmenu ul li a,*/ /*#mainmenu .nav li a {*/ /* font-family: 'Work Sans', sans-serif !important;*/ /* font-weight: 500;*/ /* font-size: 14px;*/ /* letter-spacing: 0.01em;*/ /*}*/ /* Section sub-tags / pills / badges — Inter */ .section-tag, .hs-tag, .badge, .tag-pill, .section-header .tag, [class*="tag-"], .animate-fade-in span, .counter-box .label, .sponsor-tag { font-family: 'Inter', sans-serif !important; font-weight: 500; font-size: 13px; letter-spacing: 0.06em; } /* ============================================================ 2. COLOR — Primary Accent Green ============================================================ */ /* Green highlight text */ .text-primary, .highlight, h2 .highlight, h3 .highlight, .section-title .highlight, a.active, .nav-link.active { color: #dd0304 !important; } /* Primary buttons */ /*.btn-primary,*/ /*.enquire-btn,*/ /*a.btn-primary,*/ /*button.btn-primary,*/ /*.cta-btn,*/ /*.hero-btn-primary,*/ /*[class*="btn-green"],*/ /*input[type="submit"] {*/ /* background: linear-gradient(135deg, var(--mv-green), var(--mv-green-light)) !important;*/ /* border: none !important;*/ /* color: var(--mv-white) !important;*/ /* border-radius: 50px !important;*/ /* font-family: 'Work Sans', sans-serif !important;*/ /* font-weight: 600 !important;*/ /* font-size: 14px !important;*/ /* padding: 12px 32px !important;*/ /* box-shadow: 0 4px 16px rgba(55, 73, 39, 0.22) !important;*/ /* transition: all 0.3s ease !important;*/ /* letter-spacing: 0.02em;*/ /*}*/ .btn-primary:hover, .enquire-btn:hover, a.btn-primary:hover { background: linear-gradient(135deg, var(--mv-green-light), var(--mv-green)) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(55, 73, 39, 0.3) !important; color: var(--mv-white) !important; } /* Secondary / outline buttons */ .btn-outline, .btn-secondary, .btn-talk, a.btn-outline { background: var(--mv-white) !important; border: 1.5px solid rgba(55, 73, 39, 0.2) !important; color: var(--mv-green) !important; border-radius: 50px !important; font-family: 'Work Sans', sans-serif !important; font-weight: 600 !important; padding: 11px 30px !important; transition: all 0.25s ease !important; } .btn-outline:hover, a.btn-outline:hover { background: var(--mv-bg-card) !important; color: var(--mv-green) !important; } /* Links */ a { color: var(--mv-green); } a:hover { color: var(--mv-green-light); } /* Selection */ ::selection { background: var(--mv-green); color: #fff; } ::-moz-selection { background: var(--mv-green); color: #fff; } /* Scroll to top */ #scroll-to-top { background-color: var(--mv-green) !important; } /* ============================================================ 3. SECTION TAG PILLS (like "Sustainable construction · Since 1995") ============================================================ */ .hs-tag, .section-tag, .badge-tag, .tag-pill, .category-tag, .section-header > span:first-child { display: inline-flex; align-items: center; gap: 6px; background: var(--mv-bg-tag); color: var(--mv-green) !important; border: 1px solid rgba(55, 73, 39, 0.15); border-radius: 999px; padding: 5px 16px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; backdrop-filter: blur(4px); margin-bottom: 14px; } /* ============================================================ 4. BACKGROUNDS ============================================================ */ /* Default body bg */ body { background-color: var(--mv-white) !important; } /* Card backgrounds */ .card, .service-card, .project-card, .team-card, .testimonial-box, .widget-item{ background-color: var(--mv-white); border: 1px solid var(--mv-sage-border2); border-radius: 16px !important; box-shadow: 0 2px 16px rgba(55, 73, 39, 0.06) !important; transition: box-shadow 0.3s ease, transform 0.3s ease; } .card:hover, .service-card:hover, .project-card:hover, .team-card:hover { box-shadow: 0 8px 32px rgba(55, 73, 39, 0.12) !important; transform: translateY(-3px); } /* Dark section (footer area, CTA) */ .bg-dark, .cta-section, .footer-dark { background-color: #1a2a1e !important; } /* ============================================================ 5. HEADER / NAVBAR ============================================================ */ .header-section, #header { background-color: var(--mv-white); border-bottom: 1px solid var(--mv-sage-border2); box-shadow: 0 1px 12px rgba(55, 73, 39, 0.06); } /* Sticky scroll — keeps green tint */ .header-section.sticky, #header.sticky { background-color: rgba(250, 252, 245, 0.96) !important; backdrop-filter: blur(12px); } /* Nav active link */ .nav-link.active, .mainmenu ul li a.active { color: #dd0304 !important; font-weight: 800; } .mainmenu ul li a:hover { color: var(--mv-green) !important; } /* ============================================================ 6. SECTION HEADINGS — Underline accent ============================================================ */ .section-title, .section-header h2, .about-content h2, .service-content h2, .contact-content h2 { position: relative; } /*.section-title::after,*/ /*.section-header h2::after {*/ /* content: '';*/ /* display: block;*/ /* width: 48px;*/ /* height: 4px;*/ /* background: linear-gradient(90deg, var(--mv-green), var(--mv-green-light));*/ /* border-radius: 4px;*/ /* margin-top: 12px;*/ /*}*/ /* Centered headings */ .text-center .section-title::after, .text-center .section-header h2::after { margin-left: auto; margin-right: auto; } /* Highlight span inside headings (green italic) */ .section-title .highlight, h2 .highlight, h3 .highlight { color: var(--mv-green) !important; font-style: italic; font-family: 'Playfair Display', Georgia, serif; } /* ============================================================ 7. FOOTER ============================================================ */ .footer-logo-text { font-family: 'Playfair Display', Georgia, serif !important; font-weight: 700; background: linear-gradient(135deg, #a8c895, #d0e8b8); -webkit-background-clip: text; background-clip: text; color: transparent; } .widget-content h4 { font-family: 'Work Sans', sans-serif !important; font-size: 1rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mv-white) !important; } /* ============================================================ 8. FORMS ============================================================ */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, select { border: 1.5px solid #82878eb0 !important; border-radius: 10px !important; background:white !important; color: #333 !important; font-family: 'Source Sans Pro', sans-serif !important; font-size: 15px !important; padding: 12px 16px !important; transition: border-color 0.25s ease, box-shadow 0.25s ease !important; } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus, select:focus { border-color: var(--mv-green) !important; box-shadow: 0 0 0 3px rgba(55, 73, 39, 0.1) !important; outline: none !important; background: var(--mv-white) !important; } /* ============================================================ 9. COUNTER SECTION ============================================================ */ .counter-box .count, .counter-box h3, .counter-section .count { font-family: 'Playfair Display', Georgia, serif !important; color: var(--mv-green) !important; font-size: 3rem; font-weight: 700; } .counter-box p, .counter-box .label { font-family: 'Inter', sans-serif !important; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mv-text-muted) !important; font-weight: 500; } /* ============================================================ 10. TESTIMONIALS ============================================================ */ .testimonial-box blockquote, .testimonial-text, .testi-content { font-family: 'Playfair Display', Georgia, serif !important; font-style: italic; font-size: 1.05rem; color: var(--mv-navy) !important; line-height: 1.7; } .testimonial-box .author-name, .testi-author h4 { font-family: 'Work Sans', sans-serif !important; font-weight: 600; font-size: 15px; color: var(--mv-green) !important; } /* ============================================================ 11. PAGE HEADER / HERO BANNER ============================================================ */ .page-header-section, .hero-section { background-color: var(--mv-bg-leaf); } .page-header-section h1, .hero-section h1 { font-family: 'Playfair Display', Georgia, serif !important; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; color: var(--mv-navy) !important; line-height: 1.1; letter-spacing: -0.025em; } .page-header-section p, .hero-section p { color: rgba(51, 51, 51, 0.72) !important; font-size: 1.1rem; line-height: 1.7; max-width: 560px; } /* ============================================================ 12. SERVICE / FEATURE CARDS ============================================================ */ .service-box, .service-item, .feature-box { border-left: 3px solid var(--mv-sage-border); padding-left: 20px; transition: border-color 0.25s ease; } .service-box:hover, .service-item:hover { border-left-color: var(--mv-green); } .service-box h3, .service-item h3, .feature-box h3 { color: var(--mv-navy) !important; font-size: 1.15rem; font-weight: 600; } /* Service icons */ .service-icon, .service-box .icon, .feature-icon { color: var(--mv-green) !important; background: var(--mv-bg-tag); border-radius: 12px; padding: 12px; display: inline-flex; align-items: center; justify-content: center; } /* ============================================================ 13. PROJECT CARDS ============================================================ */ .project-box, .project-item { border-radius: 14px !important; overflow: hidden; position: relative; } .project-box:hover .project-overlay, .project-item:hover .overlay { background: rgba(38, 58, 79, 0.78) !important; } .project-box .project-title, .project-item h3 { font-family: 'Poppins', sans-serif !important; font-weight: 600; color: var(--mv-white) !important; } .project-box .category, .project-item .cat-tag { font-family: 'Inter', sans-serif !important; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mv-sage-border) !important; } /* ============================================================ 14. ABOUT SECTION ============================================================ */ .legal-note, .about-note, .info-note { background: var(--mv-bg-leaf); border: 1px solid var(--mv-sage-border2); border-radius: 14px; padding: 16px 20px; display: flex; gap: 12px; align-items: center; } .legal-note p, .about-note p { color: var(--mv-text-muted) !important; font-size: 14px; margin: 0; } /* ============================================================ 15. BLOG / NEWS SECTION ============================================================ */ .post-box h3, .blog-card h3, .news-item h3 { font-family: 'Playfair Display', Georgia, serif !important; font-weight: 600; color: var(--mv-navy) !important; font-size: 1.2rem; } .post-box .post-meta, .blog-card .meta { font-family: 'Inter', sans-serif !important; font-size: 12px; letter-spacing: 0.05em; color: var(--mv-sage) !important; text-transform: uppercase; } /* ============================================================ 16. SLIDER / HERO CAROUSEL — reference site h1 style ============================================================ */ .slider-area h1, .hero-slider h1, .slide-content h1 { font-family: 'Playfair Display', Georgia, serif !important; font-size: clamp(2.8rem, 5.5vw, 5rem); font-weight: 700; line-height: 1.05; color: var(--mv-white) !important; text-shadow: 0 2px 24px rgba(0,0,0,0.25); letter-spacing: -0.02em; } .slider-area p, .hero-slider p, .slide-content p { font-family: 'Source Sans Pro', sans-serif !important; font-size: 1.15rem; color: rgba(255,255,255,0.82) !important; line-height: 1.65; } /* ============================================================ 17. UTILITIES / SMALL REFINEMENTS ============================================================ */ /* Divider accent */ hr, .divider { border-color: var(--mv-sage-border2) !important; } /* Border left accent (like company-tagline in footer) */ .border-accent { border-left: 3px solid var(--mv-sage-border); padding-left: 14px; color: var(--mv-text-muted); } /* Leafy dot separator */ .dot-separator::before { content: '·'; color: var(--mv-green); margin: 0 6px; font-weight: 700; } /* Responsive — keeps headings readable on mobile */ @media (max-width: 768px) { h1 { font-size: 2.2rem; } h2 { font-size: 1.75rem; } .slider-area h1, .hero-slider h1 { font-size: 2.2rem; } } @media (max-width: 480px) { h1 { font-size: 1.9rem; } h2 { font-size: 1.5rem; } } #preloader{ position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; z-index:99999; display:flex; justify-content:center; align-items:center; } .loader-content{ text-align:center; } .loader-content img{ width:180px; margin-bottom:20px; animation:zoom 1.5s infinite alternate; } .loading-bar{ width:220px; height:6px; background:#ddd; border-radius:20px; overflow:hidden; margin:15px auto; } .loading-bar span{ display:block; width:0%; height:100%; background:linear-gradient(90deg,#003b8e,#e30613); animation:loading 2s infinite; } .loader-content p{ color:#003b8e; font-size:18px; font-weight:600; letter-spacing:1px; } @keyframes loading{ 0%{width:0%;} 100%{width:100%;} } @keyframes zoom{ from{transform:scale(1);} to{transform:scale(1.08);} }