/* ============================================================ Modern Minimal theme — scoped preview Applied via the .theme-modern class on (homepage only). Redefines the global --belabri-* variables so the whole page inherits the new palette + typography without affecting other pages. To roll out site-wide, add the class to every page. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&display=swap'); .theme-modern { --belabri-primary-color: #5F6B4C; /* deepened sage — readable on white/stone (WCAG AA) */ --belabri-secondary-color: #041C40; /* navy (kept for depth) */ --belabri-text-color: #05152d; /* deep navy headings */ --belabri-body-color: #555555; /* readable gray body text */ --belabri-bg-dark-color: #041C40; /* navy dark sections / hero overlay */ --belabri-bg-light-color: #ECE9E4; /* warm stone light sections */ --belabri-border-light-color: #E3DED6; --belabri-typography-body-font-family: 'Jost', sans-serif; --belabri-typography-secondary-font-family: 'Jost', sans-serif; } /* Lighter, more refined headings */ .theme-modern h1, .theme-modern h2, .theme-modern h3 { font-weight: 400; letter-spacing: -0.01em; } .theme-modern h4, .theme-modern h5, .theme-modern h6 { font-weight: 500; } .theme-modern .banner-content h1 { font-weight: 500; letter-spacing: -0.01em; } .theme-modern .banner-content p { font-weight: 300; } /* Refined uppercase eyebrow label in the sage accent */ .theme-modern .theme-title h6 { letter-spacing: 0.18em; font-weight: 500; color: var(--belabri-primary-color); } /* Buttons: lighter weight, wider tracking */ .theme-modern .belabri-btn { font-weight: 500; letter-spacing: 0.08em; } /* Service icons picked up in the sage accent */ .theme-modern .featured-item.style-2 .featured-icon { color: var(--belabri-primary-color); } /* Even vertical rhythm: don't glue the heading to the paragraph, and reduce the oversized gap before following content */ .theme-modern .theme-title { margin-bottom: 32px; } .theme-modern .theme-title h2 { margin-bottom: 16px; } .theme-modern .list-icon li { margin-bottom: 14px; align-items: flex-start; } .theme-modern .list-icon li i { margin-top: 4px; } /* Primary CTA: a richer green with white text so it doesn't wash out (the muted sage + navy text was too low-contrast on the hero) */ .theme-modern .primary-btn, .theme-modern a.primary-btn { background: #B08D57; color: #ffffff; } .theme-modern .belabri-btn.primary-btn:hover, .theme-modern a.primary-btn:hover { background: #9A7A48; color: #ffffff; } .theme-modern .belabri-btn.primary-btn svg line { stroke: #ffffff; } /* Secondary CTA: invert to navy + white on hover (the sage hover read as greyed-out/inactive) */ .theme-modern .white-btn:hover, .theme-modern a.white-btn:hover { background: var(--belabri-secondary-color); color: #ffffff; } .theme-modern .belabri-btn.white-btn:hover svg line { stroke: #ffffff; } /* Dark CTA (Get a Quote, Contact Us, Explore...): bronze on hover instead of the dim sage, so it never reads as inactive */ .theme-modern .dark-btn:hover, .theme-modern a.dark-btn:hover { background: #B08D57; color: #ffffff; } .theme-modern .belabri-btn.dark-btn:hover svg line { stroke: #ffffff; } /* Contact form: required-field markers + spacing for the status message */ .theme-modern .navbar-toggler { background: #B08D57; } .theme-modern .ht-toggler .line { stroke: #ffffff; } .theme-modern .contact-media i { background: #B08D57; color: #ffffff; } .theme-modern .form-required { color: #B08D57; } .theme-modern .messages:not(:empty) { margin-bottom: 24px; } /* Active page indicator in the main nav */ .theme-modern .navbar-nav .nav-link.active, .theme-modern .dropdown-menu a.active { color: var(--belabri-primary-color); font-weight: 600; } /* Uniform project-card images on the listing (whole card clickable via the stretched title link) */ .portfolio-item.style-2 .portfolio-image { aspect-ratio: 4 / 3; overflow: hidden; } .portfolio-item.style-2 .portfolio-image img { width: 100%; height: 100%; object-fit: cover; } .portfolio-item.style-2 .portfolio-title a:hover { color: var(--belabri-primary-color); } /* Project detail gallery: uniform tiles + process-story captions */ .project-gallery-figure .img-fluid { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; } .project-gallery-figure figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--belabri-body-color); }