/* ============================================================ MasterFinancials.com — Professional Upgrade CSS Version 1.0 | Created May 2026 HOW TO USE: Save this file as "mfc-professional-upgrade.css" inside your website's /assets/css/ folder, then add this one line to your HTML section (after your existing CSS links): ============================================================ */ /* ============================================================ STEP 1: IMPORT PROFESSIONAL FONTS FROM GOOGLE (These load automatically once you add the font link to HTML) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Source+Sans+3:wght@300;400;500;600&display=swap'); /* ============================================================ STEP 2: GLOBAL TYPOGRAPHY UPGRADE Changes font family, reduces sizes, improves readability ============================================================ */ body, p, li, td, th, label, input, textarea, select { font-family: 'Source Sans 3', sans-serif !important; font-size: 15px !important; line-height: 1.75 !important; color: #2c3e50; } /* Elegant headings — uses serif for authority and trust */ h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif !important; font-weight: 700 !important; letter-spacing: -0.3px !important; line-height: 1.25 !important; text-transform: none !important; /* Removes ALL CAPS for elegance */ } h4, h5, h6 { font-family: 'Source Sans 3', sans-serif !important; font-weight: 600 !important; letter-spacing: 0.2px !important; text-transform: none !important; } /* Refined heading sizes */ h1 { font-size: 40px !important; } h2 { font-size: 30px !important; } h3 { font-size: 22px !important; } h4 { font-size: 17px !important; } h5 { font-size: 14px !important; } h6 { font-size: 13px !important; } /* Mobile — smaller headings for phones */ @media (max-width: 768px) { h1 { font-size: 28px !important; } h2 { font-size: 22px !important; } h3 { font-size: 18px !important; } } /* ============================================================ STEP 3: HERO / SLIDER — Reduce height, looks less dated ============================================================ */ /* Reduce slider height from full-screen to 75% of screen */ .slider-area, .tp-banner-container, #rev_slider_wrapper, .rev_slider_wrapper, [class*="slider"], [class*="hero"], [class*="banner"] { max-height: 75vh !important; min-height: 500px !important; } /* Hero headline styling */ .slider-area h1, .slider-area h2, [class*="slider"] h1, [class*="slider"] h2, [class*="hero"] h1, [class*="hero"] h2 { font-family: 'Playfair Display', Georgia, serif !important; font-size: 42px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: -0.5px !important; line-height: 1.2 !important; text-shadow: 0 2px 12px rgba(0,0,0,0.35) !important; } /* Hero sub-text */ .slider-area p, [class*="slider"] p, [class*="hero"] p { font-family: 'Source Sans 3', sans-serif !important; font-size: 17px !important; font-weight: 300 !important; letter-spacing: 0.3px !important; text-shadow: 0 1px 6px rgba(0,0,0,0.4) !important; } /* ============================================================ STEP 4: NAVIGATION — Cleaner, stickier, more refined ============================================================ */ /* Main navigation bar */ .header-area, header, nav, .navbar, [class*="header"] { background: #21333e !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; transition: background 0.3s ease, box-shadow 0.3s ease !important; position: sticky !important; top: 0 !important; z-index: 9999 !important; } /* Add subtle shadow when page is scrolled — JS adds .scrolled class */ header.scrolled, .header-area.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,0.18) !important; } /* Nav links — cleaner, smaller */ nav a, .navbar a, .main-menu a, [class*="nav"] > ul > li > a { font-family: 'Source Sans 3', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; transition: color 0.2s ease, opacity 0.2s ease !important; } nav a:hover, .main-menu a:hover { opacity: 0.75 !important; } /* Top info bar — reduce font to feel less chunky */ .header-top, [class*="top-bar"], [class*="topbar"] { font-size: 12px !important; padding: 6px 0 !important; font-family: 'Source Sans 3', sans-serif !important; letter-spacing: 0.3px !important; } /* ============================================================ STEP 5: BUTTONS — More prominent, more professional ============================================================ */ /* Primary CTA buttons */ a.btn, .btn, button, [class*="btn-primary"], a[class*="btn"], input[type="submit"], input[type="button"] { font-family: 'Source Sans 3', sans-serif !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; padding: 14px 28px !important; border-radius: 3px !important; transition: all 0.25s ease !important; cursor: pointer !important; } /* Primary button hover — lifts slightly */ a.btn:hover, .btn:hover, button:hover, input[type="submit"]:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.2) !important; } /* Gold/warm accent for the main CTA buttons */ .btn-primary, a.btn-primary, [class*="btn-primary"] { background: #c9a84c !important; border-color: #c9a84c !important; color: #fff !important; } .btn-primary:hover, a.btn-primary:hover { background: #b5923e !important; border-color: #b5923e !important; } /* ============================================================ STEP 6: FEATURE / SERVICE CARDS — More breathing room ============================================================ */ /* Increase padding on all card-like elements */ [class*="service"], [class*="feature"], [class*="advantage"], [class*="icon-box"], [class*="info-box"], .single-service, .single-feature { padding: 32px 28px !important; border-radius: 4px !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important; border-left: 3px solid transparent !important; } /* Card hover — lifts and highlights border */ [class*="service"]:hover, [class*="feature"]:hover, [class*="icon-box"]:hover, .single-service:hover, .single-feature:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 32px rgba(0,0,0,0.10) !important; border-left-color: #c9a84c !important; } /* ============================================================ STEP 7: STATISTICS SECTION (15+ Years, 250+ Clients) ============================================================ */ /* Make the numbers BIG and impactful */ [class*="counter"], [class*="stat"], [class*="fact"] { text-align: center !important; } [class*="counter"] h4, [class*="counter"] h3, [class*="counter"] .count, [class*="stat"] h4, [class*="fact"] h4 { font-family: 'Playfair Display', serif !important; font-size: 64px !important; font-weight: 700 !important; color: #c9a84c !important; line-height: 1 !important; margin-bottom: 6px !important; } [class*="counter"] p, [class*="counter"] h5, [class*="stat"] p, [class*="fact"] p { font-family: 'Source Sans 3', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: #21333e !important; opacity: 0.7 !important; } /* ============================================================ STEP 8: TESTIMONIALS — More visual weight ============================================================ */ [class*="testimonial"], [class*="review"], .single-testimonial { padding: 36px 32px !important; border-radius: 8px !important; position: relative !important; } /* Giant decorative quote mark */ [class*="testimonial"]:before { content: "\201C" !important; font-family: 'Playfair Display', serif !important; font-size: 120px !important; color: #c9a84c !important; opacity: 0.15 !important; position: absolute !important; top: -10px !important; left: 20px !important; line-height: 1 !important; pointer-events: none !important; } [class*="testimonial"] p, .testimonial-text, [class*="testimonial"] blockquote { font-family: 'Playfair Display', serif !important; font-size: 18px !important; font-style: italic !important; line-height: 1.65 !important; color: #21333e !important; } /* Reviewer name */ [class*="testimonial"] cite, [class*="testimonial"] .name, [class*="testimonial"] strong { font-family: 'Source Sans 3', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: #c9a84c !important; font-style: normal !important; } /* ============================================================ STEP 9: FOOTER — Refinement & breathing room ============================================================ */ footer, [class*="footer"] { border-top: 3px solid #c9a84c !important; } /* Footer heading labels */ footer h4, footer h5, [class*="footer"] h4, [class*="footer"] h5 { font-family: 'Source Sans 3', sans-serif !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; margin-bottom: 16px !important; color: #c9a84c !important; } /* Footer links — more space between them */ footer ul li, [class*="footer"] ul li { margin-bottom: 10px !important; line-height: 1.5 !important; } footer a, [class*="footer"] a { font-family: 'Source Sans 3', sans-serif !important; font-size: 13px !important; transition: color 0.2s ease !important; } /* ============================================================ STEP 10: SCROLL FADE-IN ANIMATIONS Sections gently fade up when you scroll to them ============================================================ */ .fade-in-up { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-in-up.visible { opacity: 1; transform: translateY(0); } /* Staggered delay for cards in a row */ .fade-in-up:nth-child(2) { transition-delay: 0.1s; } .fade-in-up:nth-child(3) { transition-delay: 0.2s; } .fade-in-up:nth-child(4) { transition-delay: 0.3s; } /* ============================================================ STEP 11: SECTION SPACING — More breathing room overall ============================================================ */ section, [class*="section"], .section-padding { padding-top: 90px !important; padding-bottom: 90px !important; } @media (max-width: 768px) { section, [class*="section"], .section-padding { padding-top: 60px !important; padding-bottom: 60px !important; } } /* Section intro subtitles — smaller, refined */ [class*="section-title"] p, [class*="section-subtitle"], .section p.subtitle { font-family: 'Source Sans 3', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0.3px !important; opacity: 0.75 !important; max-width: 560px !important; margin-left: auto !important; margin-right: auto !important; } /* ============================================================ STEP 12: SMOOTH SCROLL ============================================================ */ html { scroll-behavior: smooth !important; }