.elementor-kit-310{--e-global-color-primary:#427CAF;--e-global-color-secondary:#C13336;--e-global-color-text:#3E383A;--e-global-color-accent:#C30014;--e-global-color-48348f9:#427CAF;--e-global-color-0fa0869:#C13336;--e-global-color-a358a54:#B5D0CE;--e-global-color-130cb52:#E2E2E6;--e-global-color-13a70d1:#F3F6FF;--e-global-color-92c7033:#FFFFFF;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-size:24px;--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-size:20px;--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Barlow Condensed";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-family:"Barlow Condensed";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-line-height:1.5em;--e-global-typography-heading-xl-font-family:"Montserrat";--e-global-typography-heading-xl-font-size:56px;--e-global-typography-heading-xl-font-weight:600;--e-global-typography-heading-xl-line-height:1.2em;--e-global-typography-heading-l-font-family:"Montserrat";--e-global-typography-heading-l-font-size:48px;--e-global-typography-heading-l-font-weight:600;--e-global-typography-heading-l-line-height:1.2em;--e-global-typography-heading-m-font-family:"Montserrat";--e-global-typography-heading-m-font-size:40px;--e-global-typography-heading-m-font-weight:600;--e-global-typography-heading-m-line-height:1.2em;--e-global-typography-heading-s-font-family:"Montserrat";--e-global-typography-heading-s-font-size:18px;--e-global-typography-heading-s-font-weight:500;--e-global-typography-body-s-font-family:"Barlow Condensed";--e-global-typography-body-s-font-size:14px;--e-global-typography-body-s-font-weight:400;--e-global-typography-body-s-line-height:1.5em;}.elementor-kit-310 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:0%;}.elementor-element{--widgets-spacing:0% 0%;--widgets-spacing-row:0%;--widgets-spacing-column:0%;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-310{--e-global-typography-primary-font-size:22px;--e-global-typography-secondary-font-size:18px;--e-global-typography-heading-xl-font-size:48px;--e-global-typography-heading-l-font-size:40px;--e-global-typography-heading-m-font-size:32px;--e-global-typography-heading-s-font-size:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-310{--e-global-typography-primary-font-size:18px;--e-global-typography-secondary-font-size:16px;--e-global-typography-heading-xl-font-size:40px;--e-global-typography-heading-l-font-size:32px;--e-global-typography-heading-m-font-size:32px;--e-global-typography-heading-s-font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ========================================================================== ELEMENTOR CUSTOM CSS Village of Bradner — Site-Specific Design Components HOW THIS FILE WORKS: - All color values use var(--palette-*) or var(--color-*) — never hardcoded hex - All spacing uses var(--spacing-*) - All typography uses var(--font-family-*) and var(--font-size-*) - Upload changes: wp-content/themes/bradner-child/elementor-custom.css - Paste into: Elementor → Settings → Advanced → Custom CSS --- Key rules to keep the file clean: - Never hardcode a hex value — always var(--palette-*) or var(--color-*) - If a style would be useful on any client site → it belongs in style.css, not here - If a style is client-specific → it belongs here - Keep Section 12 from growing too large — if a page-specific block gets complex, consider whether it should be promoted to its own section Table of Contents: 1. Global Overrides 2. Header — Top Bar 3. Header — Main Navigation 4. Header — Mobile Navigation 5. Buttons 6. Hero Sections 7. Content Sections & Cards 8. Typography Overrides 9. Forms 10. Footer 11. Utility Classes 12. Page-Specific Overrides ========================================================================== */ /* Table of Contents: 1. Global Overrides 2. Header — Top Bar 3. Header — Main Navigation 4. Header — Mobile Navigation 5. Buttons 6. Hero / Welcome Banner 7. Quick Links Icon Row 8. Feature / Split Content Section 9. Events Cards 10. News & Announcements Section 11. Help / Search Section 12. Footer 13. Utility Classes 14. Page-Specific Overrides ========================================================================== */ /* ========================================================================== 1. Global Overrides ========================================================================== */ a { color: var(--color-text-link); transition: color var(--transition-fast, 0.2s ease); } a:hover { color: var(--color-text-link-hover); } /* ========================================================================== 2. Header — Top Bar Slim utility bar above the main nav. Uses Barlow Condensed. Apply class "top-bar" to the Elementor section/container. ========================================================================== */ .top-bar { background: var(--palette-light-1) !important; padding: 6px 0 !important; } .top-bar, .top-bar a, .top-bar .elementor-nav-menu a, .top-bar .elementor-widget-text-editor { font-family: var(--font-family-alt) !important; /* Barlow Condensed */ font-size: 20px !important; color: var(--palette-accent) !important; letter-spacing: 0.4px; } .top-bar a:hover { color: var(--palette-brand) !important; text-decoration: none; } .top-bar .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li > a { padding: 2px 12px !important; font-family: var(--font-family-alt) !important; font-size: 20px !important; color: var(--palette-accent) !important; } /* Right-align top bar nav to match main nav below */ .top-bar .elementor-widget-nav-menu { margin-left: auto; } /* ========================================================================== 3. Header — Main Navigation Primary nav bar with logo. Uses Montserrat (--font-family-nav). ========================================================================== */ .site-header { background: var(--color-surface-dark) !important; box-shadow: var(--shadow-md); } .elementor-nav-menu a, .elementor-nav-menu--main .elementor-item { font-family: var(--font-family-nav) !important; font-size: 14px !important; font-weight: var(--font-weight-bold) !important; text-transform: uppercase !important; letter-spacing: 0.7px !important; color: var(--color-text-inverse) !important; } .elementor-nav-menu a:hover, .elementor-nav-menu--main .elementor-item:hover, .elementor-nav-menu--main .elementor-item.elementor-item-active { color: var(--palette-highlight) !important; } /* Dropdown menu */ .elementor-nav-menu .sub-menu { background: var(--color-surface-dark) !important; border-top: 3px solid var(--palette-brand) !important; box-shadow: var(--shadow-lg); } .elementor-nav-menu .sub-menu a { font-size: 13px !important; text-transform: none !important; letter-spacing: 0.3px !important; padding: 10px 20px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .elementor-nav-menu .sub-menu a:hover { background: var(--palette-brand) !important; color: var(--palette-accent) !important; } /* ========================================================================== 4. Header — Mobile Navigation ========================================================================== */ .elementor-nav-menu--toggle .elementor-nav-menu-toggle { color: var(--color-text-inverse) !important; } @media (max-width: 768px) { .elementor-nav-menu--dropdown .elementor-nav-menu { background: var(--color-surface-dark) !important; } .elementor-nav-menu--dropdown .elementor-nav-menu a { color: var(--color-text-inverse) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 12px 20px !important; } } /* ========================================================================== 5. Buttons All button variants. Use by adding CSS class to Elementor Button widget. ========================================================================== */ /* Primary — solid brand fill */ .btn-primary, .elementor-button.btn-primary { background: var(--palette-brand) !important; color: var(--color-text-inverse) !important; border: 2px solid var(--palette-brand) !important; font-family: var(--font-family-nav) !important; font-weight: var(--font-weight-bold) !important; text-transform: uppercase !important; letter-spacing: 0.7px !important; transition: all var(--transition-base, 0.3s ease) !important; } .btn-primary:hover, .elementor-button.btn-primary:hover { background: var(--palette-accent) !important; border-color: var(--palette-accent) !important; transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Secondary — accent fill (civic blue) */ .btn-secondary, .elementor-button.btn-secondary { background: var(--palette-accent) !important; color: var(--color-text-inverse) !important; border: 2px solid var(--palette-accent) !important; font-family: var(--font-family-nav) !important; font-weight: var(--font-weight-bold) !important; text-transform: uppercase !important; letter-spacing: 0.7px !important; transition: all var(--transition-base, 0.3s ease) !important; } .btn-secondary:hover, .elementor-button.btn-secondary:hover { background: var(--palette-brand) !important; border-color: var(--palette-brand) !important; transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Outlined — transparent with brand border */ .btn-outlined, .elementor-button.btn-outlined { background: transparent !important; color: var(--palette-brand) !important; border: 2px solid var(--palette-brand) !important; font-family: var(--font-family-nav) !important; font-weight: var(--font-weight-bold) !important; text-transform: uppercase !important; letter-spacing: 0.7px !important; transition: all var(--transition-base, 0.3s ease) !important; } .btn-outlined:hover, .elementor-button.btn-outlined:hover { background: var(--palette-brand) !important; color: var(--color-text-inverse) !important; transform: translateY(-2px); } /* White outline — for use on dark/colored backgrounds */ .btn-white-outline, .elementor-button.btn-white-outline { background: transparent !important; color: var(--color-text-inverse) !important; border: 2px solid var(--palette-light-2) !important; font-family: var(--font-family-nav) !important; font-weight: var(--font-weight-bold) !important; text-transform: uppercase !important; letter-spacing: 0.7px !important; transition: all var(--transition-base, 0.3s ease) !important; } .btn-white-outline:hover, .elementor-button.btn-white-outline:hover { background: var(--palette-light-2) !important; color: var(--palette-dark-1) !important; transform: translateY(-2px); } /* ========================================================================== 6. Hero / Welcome Banner Full-width welcome section at the top of the home page. Apply class "hero-welcome" to the Elementor section/container. ========================================================================== */ .hero-welcome { background: var(--palette-accent) !important; padding: clamp(3rem, 6vw, 5rem) 0 !important; } .hero-welcome h1, .hero-welcome h2, .hero-welcome .elementor-heading-title { color: var(--color-text-inverse) !important; font-family: var(--font-family-heading) !important; } .hero-welcome p, .hero-welcome .elementor-widget-text-editor { color: var(--color-text-inverse) !important; } .hero-welcome .elementor-star-rating__star { color: var(--palette-highlight) !important; } /* Move nav circles up */ .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {bottom:5rem!important;} /* ========================================================================== 7. Quick Links Icon Row Four-column icon row below the hero. Apply class "quick-links" to section. ========================================================================== */ .quick-links { background: var(--color-surface-alt) !important; padding: clamp(1.5rem, 3vw, 2.5rem) 0 !important; border-bottom: 3px solid var(--palette-brand); } .quick-links .elementor-icon-box-wrapper { text-align: center; padding: clamp(1rem, 2vw, 1.5rem); border-radius: var(--radius-md); transition: all var(--transition-base, 0.3s ease); } .quick-links .elementor-icon-box-wrapper:hover { background: var(--palette-brand); transform: translateY(-3px); box-shadow: var(--shadow-md); } .quick-links .elementor-icon { color: var(--palette-brand) !important; transition: color var(--transition-base, 0.3s ease); } .quick-links .elementor-icon-box-wrapper:hover .elementor-icon { color: var(--color-text-inverse) !important; } .quick-links .elementor-icon-box-title { color: var(--color-text-default) !important; font-family: var(--font-family-heading) !important; font-weight: var(--font-weight-bold) !important; font-size: 14px !important; text-transform: uppercase; letter-spacing: 0.5px; margin-top: var(--spacing-sm); transition: color var(--transition-base, 0.3s ease); } .quick-links .elementor-icon-box-wrapper:hover .elementor-icon-box-title { color: var(--color-text-inverse) !important; } /* ========================================================================== 8. Feature / Split Content Section Two-column layout: text on one side, image on the other. Apply class "feature-split" to section. ========================================================================== */ .feature-split { padding: clamp(3rem, 5vw, 5rem) 0 !important; background: var(--color-surface-page) !important; } .feature-split h2, .feature-split .elementor-heading-title { color: var(--color-text-default) !important; font-family: var(--font-family-heading) !important; } .feature-split h2 span, .feature-split .elementor-heading-title span { color: var(--palette-brand) !important; } .feature-split p { color: var(--color-text-secondary) !important; line-height: 1.7; } .feature-split.feature-split--alt { background: var(--color-surface-alt) !important; } /* ========================================================================== 9. Events Cards "Latest Events" grid section. Apply class "events-section" to the section container. ========================================================================== */ .events-section { background: var(--color-surface-page) !important; padding: clamp(3rem, 5vw, 5rem) 0 !important; } .events-section .elementor-heading-title { color: var(--color-text-default) !important; font-family: var(--font-family-heading) !important; } .event-card { background: var(--color-surface-page); border: 1px solid var(--palette-light-1); border-radius: var(--radius-md); overflow: hidden; transition: all var(--transition-base, 0.3s ease); box-shadow: var(--shadow-sm); } .event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--palette-brand); } .event-card .event-date { background: var(--palette-brand); color: var(--color-text-inverse); font-family: var(--font-family-heading); font-weight: var(--font-weight-bold); text-align: center; padding: 8px 12px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; } .event-card .event-title { color: var(--color-text-default); font-family: var(--font-family-heading); font-weight: var(--font-weight-bold); padding: var(--spacing-sm) var(--spacing-md); } .event-card .event-meta { color: var(--color-text-secondary); font-size: 13px; padding: 0 var(--spacing-md) var(--spacing-sm); } .events-section .elementor-post__card { border: 1px solid var(--palette-light-1); border-radius: var(--radius-md); overflow: hidden; transition: all var(--transition-base, 0.3s ease); box-shadow: var(--shadow-sm); } .events-section .elementor-post__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--palette-brand); } .events-section .elementor-post__title a { color: var(--color-text-default) !important; font-family: var(--font-family-heading) !important; font-weight: var(--font-weight-bold) !important; } .events-section .elementor-post__title a:hover { color: var(--palette-brand) !important; } .events-section .elementor-post__meta-data { color: var(--color-text-secondary) !important; font-size: 13px !important; } /* ========================================================================== 10. News & Announcements Section Dark brick-red section with post cards. Apply class "news-section" to the section container. ========================================================================== */ .news-section { background: var(--palette-brand) !important; padding: clamp(3rem, 5vw, 5rem) 0 !important; } .news-section .elementor-heading-title, .news-section h2 { color: var(--color-text-inverse) !important; font-family: var(--font-family-heading) !important; } .news-section .elementor-post__card { background: var(--color-surface-page) !important; border-radius: var(--radius-md); overflow: hidden; border: none; transition: all var(--transition-base, 0.3s ease); box-shadow: var(--shadow-md); } .news-section .elementor-post__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .news-section .elementor-post__title a { color: var(--color-text-default) !important; font-family: var(--font-family-heading) !important; font-weight: var(--font-weight-bold) !important; } .news-section .elementor-post__title a:hover { color: var(--palette-brand) !important; } .news-section .elementor-post__meta-data { color: var(--color-text-secondary) !important; font-size: 13px !important; } .news-section .elementor-post__excerpt p { color: var(--color-text-secondary) !important; } .news-section .elementor-button, .news-section .btn-white-outline { background: transparent !important; color: var(--color-text-inverse) !important; border: 2px solid var(--color-text-inverse) !important; font-family: var(--font-family-nav) !important; font-weight: var(--font-weight-bold) !important; text-transform: uppercase !important; letter-spacing: 0.7px !important; } .news-section .elementor-button:hover, .news-section .btn-white-outline:hover { background: var(--color-text-inverse) !important; color: var(--palette-brand) !important; } /* ========================================================================== Circular Section Divider Sits on the boundary between two sections. Add an empty div with class "circle-divider" between sections, OR use it as a ::before on the section below. ========================================================================== */ .circle-divider { display: flex; justify-content: center; position: relative; height: 0; z-index: 10; } .circle-divider::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90px; height: 90px; background: var(--color-surface-page); border-radius: 50%; /* Double ring — outer brand color, inner white gap */ box-shadow: 0 0 0 4px var(--color-surface-page), 0 0 0 7px var(--palette-brand), 0 0 0 10px var(--color-surface-page), 0 0 0 12px var(--palette-brand); } /* If you have the seal image, swap the content for a background-image */ .circle-divider.has-seal::after { background-image: url('/wp-content/uploads/2026/03/VOB-Official-Seal.webp'); background-size: cover; background-position: center; } /* ========================================================================== Circular Watermark Background Texture Faded concentric-circle pattern overlay — use on the News section. Add class "has-watermark" to the section. ========================================================================== */ .has-watermark { position: relative; overflow: hidden; } .has-watermark::before { content: ''; position: absolute; bottom: -100px; right: -100px; width: 500px; height: 500px; border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0.08; /* Concentric rings built from box-shadow */ background: transparent; border: 2px solid var(--palette-light-2); box-shadow: 0 0 0 30px transparent, 0 0 0 32px rgba(255, 255, 255, 0.6), 0 0 0 62px transparent, 0 0 0 64px rgba(255, 255, 255, 0.5), 0 0 0 94px transparent, 0 0 0 96px rgba(255, 255, 255, 0.4), 0 0 0 126px transparent, 0 0 0 128px rgba(255, 255, 255, 0.3), 0 0 0 158px transparent, 0 0 0 160px rgba(255, 255, 255, 0.2); } /* Make sure content sits above the watermark */ .has-watermark > * { position: relative; z-index: 1; } /* circle pattern */ .pattern-bg { background-color: var(--color-surface-page); background-image: radial-gradient(circle at 0 0, transparent 12px, rgba(180, 210, 220, 0.5) 12px, rgba(180, 210, 220, 0.5) 14px, transparent 14px, transparent 20px, rgba(180, 210, 220, 0.4) 20px, rgba(180, 210, 220, 0.4) 22px, transparent 22px, transparent 28px, rgba(180, 210, 220, 0.3) 28px, rgba(180, 210, 220, 0.3) 30px, transparent 30px ), radial-gradient(circle at 30px 30px, transparent 12px, rgba(180, 210, 220, 0.5) 12px, rgba(180, 210, 220, 0.5) 14px, transparent 14px, transparent 20px, rgba(180, 210, 220, 0.4) 20px, rgba(180, 210, 220, 0.4) 22px, transparent 22px, transparent 28px, rgba(180, 210, 220, 0.3) 28px, rgba(180, 210, 220, 0.3) 30px, transparent 30px ); background-size: 60px 60px; } /* Applying it to a section as an overlay (most flexible): */ .has-circle-pattern { position: relative; } .has-circle-pattern::before { content: ''; position: absolute; inset: 0; background-image: url('/wp-content/uploads/2026/03/pattern01.png'); background-repeat: repeat; background-size: 200px auto; opacity: 0.15; pointer-events: none; z-index: 0; } .has-circle-pattern > * { position: relative; z-index: 1; } /* ========================================================================== 11. Help / Search Section "We are here to help" utility section with search bar. Apply class "help-section" to the section container. ========================================================================== */ .help-section { background: var(--color-surface-alt) !important; padding: clamp(2.5rem, 4vw, 4rem) 0 !important; border-top: 4px solid var(--palette-brand); } .help-section .elementor-heading-title, .help-section h2 { color: var(--color-text-default) !important; font-family: var(--font-family-heading) !important; } .help-section .elementor-search-form__input { border: 2px solid var(--palette-dark-2) !important; border-radius: var(--radius-md) !important; font-family: var(--font-family-body) !important; padding: 12px 16px !important; font-size: 16px !important; } .help-section .elementor-search-form__input:focus { border-color: var(--palette-brand) !important; box-shadow: 0 0 0 3px rgba(var(--palette-brand-rgb), 0.15) !important; outline: none !important; } .help-section .elementor-search-form__submit { background: var(--palette-brand) !important; color: var(--color-text-inverse) !important; font-family: var(--font-family-nav) !important; font-weight: var(--font-weight-bold) !important; text-transform: uppercase !important; letter-spacing: 0.7px !important; border: none !important; padding: 12px 24px !important; border-radius: var(--radius-md) !important; transition: background var(--transition-base, 0.3s ease) !important; } .help-section .elementor-search-form__submit:hover { background: var(--palette-accent) !important; } /* ========================================================================== 12. Footer Dark footer with links and legal bar. Apply class "site-footer" to the footer section. ========================================================================== */ .site-footer { background: var(--color-surface-dark) !important; padding: clamp(3rem, 5vw, 5rem) 0 clamp(1.5rem, 3vw, 2rem) !important; } .site-footer, .site-footer p, .site-footer .elementor-widget-text-editor { color: rgba(255, 255, 255, 0.75) !important; font-size: 14px !important; } .site-footer h3, .site-footer h4, .site-footer .elementor-heading-title { color: var(--color-text-inverse) !important; font-family: var(--font-family-heading) !important; font-weight: var(--font-weight-bold) !important; font-size: 15px !important; text-transform: uppercase !important; letter-spacing: 0.7px !important; margin-bottom: var(--spacing-md) !important; padding-bottom: var(--spacing-xs) !important; border-bottom: 2px solid var(--palette-brand) !important; } .site-footer a { color: rgba(255, 255, 255, 0.75) !important; text-decoration: none !important; transition: color var(--transition-fast, 0.2s ease) !important; } .site-footer a:hover { color: var(--palette-highlight) !important; } .site-footer .elementor-icon-list-item a { color: rgba(255, 255, 255, 0.75) !important; font-size: 14px !important; } .site-footer .elementor-icon-list-item a:hover { color: var(--palette-highlight) !important; } .footer-legal { border-top: 1px solid rgba(255, 255, 255, 0.15) !important; padding-top: var(--spacing-md) !important; margin-top: var(--spacing-lg) !important; } .footer-legal, .footer-legal p, .footer-legal a { font-size: 12px !important; color: rgba(255, 255, 255, 0.5) !important; } .footer-legal a:hover { color: var(--palette-highlight) !important; } /* ========================================================================== 13. Utility Classes Single-purpose helpers applied via Elementor Advanced → CSS Classes. ========================================================================== */ .bg-brand { background: var(--palette-brand) !important; } .bg-accent { background: var(--palette-accent) !important; } .bg-dark { background: var(--color-surface-dark) !important; } .bg-light { background: var(--color-surface-alt) !important; } .bg-white { background: var(--color-surface-page) !important; } .text-brand { color: var(--palette-brand) !important; } .text-accent { color: var(--palette-accent) !important; } .text-white { color: var(--color-text-inverse) !important; } .text-muted { color: var(--color-text-muted) !important; } .border-top-brand { border-top: 4px solid var(--palette-brand) !important; } .border-bottom-brand { border-bottom: 4px solid var(--palette-brand) !important; } @media (max-width: 768px) { .hide-mobile { display: none !important; } } @media (min-width: 769px) { .hide-desktop { display: none !important; } } /* ========================================================================== 14. Page-Specific Overrides ========================================================================== */ /* Home Page */ /* Utilities Page */ /* Contact Page */ /* Mayor's Court Page *//* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Montserrat'; font-display: auto; src: url('https://webdvmt.com/wp-content/uploads/2026/03/Montserrat-VariableFont_wght.ttf') format('truetype'); } /* End Custom Fonts CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: normal; font-display: auto; src: url('https://webdvmt.com/wp-content/uploads/2026/03/BarlowCondensed-Regular.ttf') format('truetype'); } /* End Custom Fonts CSS */