.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================ MERITAGE FINANCIAL GROUP — Elementor-Ready Stylesheet Ported from: meritage-gamma.vercel.app (Next.js/React) Usage: Enqueue in child theme or paste into Elementor Custom CSS ============================================================ */ /* ------------------------------------------------------- 1. FONTS Option A: Google Fonts (recommended — no files to host) Add this to your or enqueue via functions.php: Option B: Self-host the woff2 files from the React build and update the src URLs below. ------------------------------------------------------- */ /* Google Fonts fallback definitions (keep for CLS prevention) */ @font-face { font-family: "Fraunces Fallback"; src: local("Times New Roman"); ascent-override: 84.71%; descent-override: 22.09%; line-gap-override: 0%; size-adjust: 115.45%; } @font-face { font-family: "Inter Fallback"; src: local("Arial"); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%; } /* ------------------------------------------------------- 2. DESIGN TOKENS (CSS Custom Properties) Reference these throughout Elementor's custom CSS fields. e.g. color: var(--brand-navy); ------------------------------------------------------- */ :root { /* Brand Colors */ --brand-navy: #0A1629; --brand-charcoal: #1A202C; --brand-gold: #C5A059; --brand-gold-dark: #A98745; --brand-gold-light: #E2D1AC; --brand-gold-pale: #E2CFA0; --brand-bg: #F9F9F7; --brand-white: #FFFFFF; /* Neutral Grays */ --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DC; --gray-400: #99A1AF; --gray-500: #6A7282; --gray-600: #4A5565; --gray-700: #364153; --gray-800: #1E2939; /* Typography */ --font-sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif; --font-serif: "Fraunces", "Fraunces Fallback", "Playfair Display", serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Font Scale */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --text-7xl: 4.5rem; /* 72px */ /* Spacing Scale (reference) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* Container Widths */ --container-md: 28rem; /* 448px */ --container-3xl: 48rem; /* 768px */ --container-4xl: 56rem; /* 896px */ --container-6xl: 72rem; /* 1152px */ --container-7xl: 80rem; /* 1280px */ /* Transitions */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-bento: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-fast: 0.15s; --duration-med: 0.3s; --duration-slow: 0.7s; } /* ------------------------------------------------------- 3. BASE RESET Minimal reset — keeps things clean without fighting Elementor's own reset. Remove if conflicts arise. ------------------------------------------------------- */ *, *::after, *::before { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; -webkit-text-size-adjust: 100%; } body { color: var(--brand-charcoal); background-color: var(--brand-bg); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; padding: 0; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } /* ------------------------------------------------------- 4. TYPOGRAPHY SYSTEM Apply via Elementor widget settings or custom classes. ------------------------------------------------------- */ /* Serif headings */ .meritage-heading, .elementor-widget-heading .elementor-heading-title { font-family: var(--font-serif); color: var(--brand-charcoal); letter-spacing: -0.025em; line-height: 1.1; } /* Sans body text */ .meritage-body, .elementor-widget-text-editor { font-family: var(--font-sans); color: var(--gray-500); line-height: 1.6; letter-spacing: -0.01em; } /* Uppercase label style (used for nav, section labels, tags) */ .meritage-label { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-500); } /* Section overline — e.g. "PRINCIPLE 01", "Our Practice" */ .meritage-overline { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--brand-gold); } /* Large serif display text */ .meritage-display { font-family: var(--font-serif); font-weight: 300; line-height: 1.1; letter-spacing: -0.025em; color: var(--brand-charcoal); } /* ------------------------------------------------------- 5. COMPONENT STYLES These replicate the custom React components. ------------------------------------------------------- */ /* --- Bento Card --- */ .bento-card { transition: all 0.4s var(--ease-bento); border: 1px solid var(--gray-200); background-color: var(--brand-white); } .bento-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06); border-color: var(--brand-gold) !important; } /* --- Navigation Link --- */ .nav-link { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-500); transition: color 0.2s var(--ease-default); } .nav-link:hover { color: var(--brand-navy); } /* --- Gold CTA Button --- */ .meritage-btn-gold { display: inline-flex; align-items: center; background-color: var(--brand-gold); color: var(--brand-white); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.875rem 2rem; border: none; cursor: pointer; transition: opacity 0.15s var(--ease-default); } .meritage-btn-gold:hover { opacity: 0.9; } /* --- Outline Button (Navy border) --- */ .meritage-btn-outline { display: inline-flex; align-items: center; background-color: transparent; color: var(--brand-charcoal); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.75rem 1.5rem; border: 1px solid var(--brand-navy); cursor: pointer; transition: all 0.15s var(--ease-default); } .meritage-btn-outline:hover { border-color: rgba(197, 160, 89, 0.3); } /* --- Section Divider (gold thin line) --- */ .meritage-divider { width: 100%; height: 1px; background-color: var(--gray-200); } .meritage-divider--gold { background-color: var(--brand-gold-light); } /* --- Dark Section (footer, dark panels) --- */ .meritage-dark-section { background-color: var(--brand-navy); color: var(--brand-white); } .meritage-dark-section p, .meritage-dark-section .elementor-widget-text-editor { color: var(--gray-400); } /* --- Team Card --- */ .meritage-team-card { border: 1px solid var(--gray-200); transition: all 0.4s var(--ease-bento); } .meritage-team-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06); border-color: var(--brand-gold) !important; } .meritage-team-card img { filter: grayscale(100%) contrast(1.1); object-fit: cover; } /* --- Pillar Card (numbered service cards) --- */ .meritage-pillar-number { font-family: var(--font-sans); font-size: 9px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--brand-gold); } /* ------------------------------------------------------- 6. FORM STYLING For Elementor form widget or contact forms. ------------------------------------------------------- */ .meritage-form input[type="text"], .meritage-form input[type="email"], .meritage-form textarea, .elementor-field-textual { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--brand-charcoal); background-color: transparent; border: none; border-bottom: 1px solid var(--gray-300); border-radius: 0 !important; box-shadow: none !important; padding: 0.75rem 0; width: 100%; transition: border-color 0.2s var(--ease-default); } .meritage-form input:focus, .meritage-form textarea:focus, .elementor-field-textual:focus { border-color: var(--brand-gold); outline: none; box-shadow: none; } .meritage-form input::placeholder, .meritage-form textarea::placeholder { color: var(--gray-400); opacity: 1; } /* ------------------------------------------------------- 7. SCROLLBAR ------------------------------------------------------- */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); } /* ------------------------------------------------------- 8. UTILITY HELPERS Reusable classes for Elementor's Custom CSS fields. ------------------------------------------------------- */ /* Gold accent text */ .text-gold { color: var(--brand-gold); } .text-navy { color: var(--brand-navy); } .text-charcoal { color: var(--brand-charcoal); } /* Background helpers */ .bg-navy { background-color: var(--brand-navy); } .bg-charcoal { background-color: var(--brand-charcoal); } .bg-gold { background-color: var(--brand-gold); } .bg-offwhite { background-color: var(--brand-bg); } /* Border helpers */ .border-gold { border-color: var(--brand-gold-light); } .border-navy { border-color: var(--brand-navy); } /* Serif / Sans toggle */ .font-serif { font-family: var(--font-serif); } .font-sans { font-family: var(--font-sans); } /* Editorial body copy style */ .editorial-text { letter-spacing: -0.01em; line-height: 1.6; } /* Disable mobile tap highlight */ @media (pointer: coarse) { button, a { -webkit-tap-highlight-color: transparent; } } /* ------------------------------------------------------- 9. ELEMENTOR OVERRIDES Fixes common Elementor defaults that clash with this design. ------------------------------------------------------- */ /* Remove default Elementor section padding if needed */ .elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--container-7xl); } /* Ensure Elementor headings use our serif font */ .elementor-widget-heading .elementor-heading-title { font-family: var(--font-serif); } /* Fix Elementor button defaults */ .elementor-widget-button .elementor-button { font-family: var(--font-sans); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; border-radius: 0; } /* Prevent Elementor image widget from adding unwanted margins */ .elementor-widget-image img { vertical-align: middle; }/* End custom CSS */