Fix navbar across all pages: add nav include, fonts, active state, spacing, stats, error pages
- Add nav.php include to 5 missing pages (cost-calculator, thank-you, 403, 404, 500) - Add ErrorDocument directives to .htaccess for custom 403/404/500 pages - Fix bogus accuracy stats (homepage, web-scraping, location pages) - Fix invisible CTA buttons on property and financial service pages - Add Google Fonts (Roboto Slab + Lato) to all pages missing it (tools, blog articles, error pages) - Add active nav link highlighting (teal underline for current page) - Improve footer contrast to WCAG AA, equal-height cards, mobile text scaling - Consistent navbar-to-content spacing across all pages - Bump cache version to v1.1.3
This commit is contained in:
root
@@ -149,6 +149,7 @@ body {
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-link.active { color: #148069; font-weight: 600; border-bottom: 2px solid #148069; padding-bottom: 2px;}
|
||||
.nav-link:hover {
|
||||
color: #144784;
|
||||
}
|
||||
@@ -3599,41 +3600,55 @@ aside.related-articles {
|
||||
}
|
||||
}
|
||||
|
||||
/* Fix for navbar overlap on content pages */
|
||||
/* ===== NAVBAR SPACING FIX (consistent across all pages) ===== */
|
||||
/* Navbar is position:fixed, height 70px */
|
||||
|
||||
/* Hero pages: all hero variants get 120px top padding (70px navbar + 50px space) */
|
||||
.hero,
|
||||
.page-hero,
|
||||
.about-hero,
|
||||
.faq-hero,
|
||||
.service-hero,
|
||||
.project-types-hero,
|
||||
.tools-hero,
|
||||
.quote-hero {
|
||||
padding-top: 120px !important;
|
||||
}
|
||||
|
||||
/* Non-hero pages with <main>: push content below navbar */
|
||||
main {
|
||||
padding-top: 90px; /* Add padding to account for fixed navbar (70px + 20px buffer) */
|
||||
padding-top: 90px; /* 70px navbar + 20px breathing room */
|
||||
}
|
||||
|
||||
/* Specific fix for legal content pages */
|
||||
/* But if main contains a hero, don't double-pad */
|
||||
main > .hero:first-child,
|
||||
main > .page-hero:first-child,
|
||||
main > .about-hero:first-child,
|
||||
main > .faq-hero:first-child,
|
||||
main > .service-hero:first-child,
|
||||
main > .project-types-hero:first-child {
|
||||
margin-top: -90px; /* Cancel out the main padding */
|
||||
}
|
||||
|
||||
/* Legal content pages (no hero, text-heavy) */
|
||||
.legal-content {
|
||||
padding-top: 120px !important; /* Override inline styles for legal pages */
|
||||
padding-top: 100px !important; /* 70px navbar + 30px breathing room */
|
||||
}
|
||||
|
||||
/* Also ensure any page sections that might be affected have proper spacing */
|
||||
/* Tool sub-pages and standalone pages (no <main>, no hero) */
|
||||
.calculator-container,
|
||||
.analyzer-container,
|
||||
.converter-container,
|
||||
.checker-container,
|
||||
.thank-you-container {
|
||||
padding-top: 100px !important; /* 70px navbar + 30px breathing room */
|
||||
}
|
||||
|
||||
/* Generic page-content class */
|
||||
.page-content {
|
||||
padding-top: 90px;
|
||||
}
|
||||
|
||||
/* For hero sections that should start right under navbar */
|
||||
.hero {
|
||||
padding-top: 140px; /* 120px base + 20px for navbar */
|
||||
}
|
||||
|
||||
/* For about page hero */
|
||||
.about-hero {
|
||||
padding-top: 140px; /* 120px base + 20px for navbar */
|
||||
}
|
||||
|
||||
/* For FAQ page hero */
|
||||
.faq-hero {
|
||||
padding-top: 140px; /* 120px base + 20px for navbar */
|
||||
}
|
||||
|
||||
/* For project types and other page heroes */
|
||||
.page-hero {
|
||||
padding-top: 140px; /* 120px base + 20px for navbar */
|
||||
}
|
||||
|
||||
/* Hide reCAPTCHA badge */
|
||||
.grecaptcha-badge {
|
||||
visibility: hidden !important;
|
||||
@@ -4370,3 +4385,124 @@ body { font-size: 17px; }
|
||||
}
|
||||
|
||||
/* ===== END VISUAL FIXES ===== */
|
||||
|
||||
|
||||
/* ===== VISUAL FIXES 2026-02-11 ===== */
|
||||
|
||||
/* 1. Equal-height capability cards on project-types page */
|
||||
.capabilities-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
align-items: stretch;
|
||||
}
|
||||
.capability-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.capability-card p {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* 2. Footer contrast improvements — WCAG AA */
|
||||
.footer-section p,
|
||||
.footer-section li,
|
||||
.footer-bottom p,
|
||||
.footer-bottom .company-details,
|
||||
.trust-badge-text span {
|
||||
color: #d1d5db; /* ~9:1 on #151f25 */
|
||||
}
|
||||
.footer-section a {
|
||||
color: #93c5fd; /* light blue — ~7.5:1 on #151f25 */
|
||||
}
|
||||
.footer-section a:hover {
|
||||
color: #bfdbfe;
|
||||
}
|
||||
.footer-section h3 {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
.footer-bottom p,
|
||||
.footer-bottom .company-details {
|
||||
color: #9ca3af; /* muted but still 4.6:1 */
|
||||
}
|
||||
.footer-logo img {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
/* 3. Mobile text sizing & layout */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Project-types hero */
|
||||
.project-types-hero h1 {
|
||||
font-size: 1.8rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.project-types-hero p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Capability cards single column on mobile */
|
||||
.capabilities-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Industry grid single column */
|
||||
.industry-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Project category headings */
|
||||
.project-category h2 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.project-category h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.project-description {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Footer content single column (already done but ensure) */
|
||||
.footer-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Footer bottom stack */
|
||||
.footer-bottom,
|
||||
.footer-bottom .footer-bottom-content {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.project-types-hero h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.project-types-hero {
|
||||
padding: 100px 0 40px;
|
||||
}
|
||||
.project-category {
|
||||
padding: 40px 0;
|
||||
}
|
||||
.project-category h2 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4. General polish */
|
||||
/* project-types-hero padding now in unified block above */
|
||||
|
||||
/* Tech tags wrapping fix */
|
||||
.tech-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ===== END VISUAL FIXES 2026-02-11 ===== */
|
||||
|
||||
4496
assets/css/main.css.bak.20260211
Normal file
4496
assets/css/main.css.bak.20260211
Normal file
File diff suppressed because it is too large
Load Diff
186
assets/css/main.min.css
vendored
186
assets/css/main.min.css
vendored
@@ -149,6 +149,7 @@ body {
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-link.active { color: #148069; font-weight: 600; border-bottom: 2px solid #148069; padding-bottom: 2px;}
|
||||
.nav-link:hover {
|
||||
color: #144784;
|
||||
}
|
||||
@@ -3599,41 +3600,55 @@ aside.related-articles {
|
||||
}
|
||||
}
|
||||
|
||||
/* Fix for navbar overlap on content pages */
|
||||
/* ===== NAVBAR SPACING FIX (consistent across all pages) ===== */
|
||||
/* Navbar is position:fixed, height 70px */
|
||||
|
||||
/* Hero pages: all hero variants get 120px top padding (70px navbar + 50px space) */
|
||||
.hero,
|
||||
.page-hero,
|
||||
.about-hero,
|
||||
.faq-hero,
|
||||
.service-hero,
|
||||
.project-types-hero,
|
||||
.tools-hero,
|
||||
.quote-hero {
|
||||
padding-top: 120px !important;
|
||||
}
|
||||
|
||||
/* Non-hero pages with <main>: push content below navbar */
|
||||
main {
|
||||
padding-top: 90px; /* Add padding to account for fixed navbar (70px + 20px buffer) */
|
||||
padding-top: 90px; /* 70px navbar + 20px breathing room */
|
||||
}
|
||||
|
||||
/* Specific fix for legal content pages */
|
||||
/* But if main contains a hero, don't double-pad */
|
||||
main > .hero:first-child,
|
||||
main > .page-hero:first-child,
|
||||
main > .about-hero:first-child,
|
||||
main > .faq-hero:first-child,
|
||||
main > .service-hero:first-child,
|
||||
main > .project-types-hero:first-child {
|
||||
margin-top: -90px; /* Cancel out the main padding */
|
||||
}
|
||||
|
||||
/* Legal content pages (no hero, text-heavy) */
|
||||
.legal-content {
|
||||
padding-top: 120px !important; /* Override inline styles for legal pages */
|
||||
padding-top: 100px !important; /* 70px navbar + 30px breathing room */
|
||||
}
|
||||
|
||||
/* Also ensure any page sections that might be affected have proper spacing */
|
||||
/* Tool sub-pages and standalone pages (no <main>, no hero) */
|
||||
.calculator-container,
|
||||
.analyzer-container,
|
||||
.converter-container,
|
||||
.checker-container,
|
||||
.thank-you-container {
|
||||
padding-top: 100px !important; /* 70px navbar + 30px breathing room */
|
||||
}
|
||||
|
||||
/* Generic page-content class */
|
||||
.page-content {
|
||||
padding-top: 90px;
|
||||
}
|
||||
|
||||
/* For hero sections that should start right under navbar */
|
||||
.hero {
|
||||
padding-top: 140px; /* 120px base + 20px for navbar */
|
||||
}
|
||||
|
||||
/* For about page hero */
|
||||
.about-hero {
|
||||
padding-top: 140px; /* 120px base + 20px for navbar */
|
||||
}
|
||||
|
||||
/* For FAQ page hero */
|
||||
.faq-hero {
|
||||
padding-top: 140px; /* 120px base + 20px for navbar */
|
||||
}
|
||||
|
||||
/* For project types and other page heroes */
|
||||
.page-hero {
|
||||
padding-top: 140px; /* 120px base + 20px for navbar */
|
||||
}
|
||||
|
||||
/* Hide reCAPTCHA badge */
|
||||
.grecaptcha-badge {
|
||||
visibility: hidden !important;
|
||||
@@ -4370,3 +4385,124 @@ body { font-size: 17px; }
|
||||
}
|
||||
|
||||
/* ===== END VISUAL FIXES ===== */
|
||||
|
||||
|
||||
/* ===== VISUAL FIXES 2026-02-11 ===== */
|
||||
|
||||
/* 1. Equal-height capability cards on project-types page */
|
||||
.capabilities-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
align-items: stretch;
|
||||
}
|
||||
.capability-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.capability-card p {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* 2. Footer contrast improvements — WCAG AA */
|
||||
.footer-section p,
|
||||
.footer-section li,
|
||||
.footer-bottom p,
|
||||
.footer-bottom .company-details,
|
||||
.trust-badge-text span {
|
||||
color: #d1d5db; /* ~9:1 on #151f25 */
|
||||
}
|
||||
.footer-section a {
|
||||
color: #93c5fd; /* light blue — ~7.5:1 on #151f25 */
|
||||
}
|
||||
.footer-section a:hover {
|
||||
color: #bfdbfe;
|
||||
}
|
||||
.footer-section h3 {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
.footer-bottom p,
|
||||
.footer-bottom .company-details {
|
||||
color: #9ca3af; /* muted but still 4.6:1 */
|
||||
}
|
||||
.footer-logo img {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
/* 3. Mobile text sizing & layout */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Project-types hero */
|
||||
.project-types-hero h1 {
|
||||
font-size: 1.8rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.project-types-hero p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Capability cards single column on mobile */
|
||||
.capabilities-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Industry grid single column */
|
||||
.industry-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Project category headings */
|
||||
.project-category h2 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.project-category h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.project-description {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Footer content single column (already done but ensure) */
|
||||
.footer-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Footer bottom stack */
|
||||
.footer-bottom,
|
||||
.footer-bottom .footer-bottom-content {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.project-types-hero h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.project-types-hero {
|
||||
padding: 100px 0 40px;
|
||||
}
|
||||
.project-category {
|
||||
padding: 40px 0;
|
||||
}
|
||||
.project-category h2 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4. General polish */
|
||||
/* project-types-hero padding now in unified block above */
|
||||
|
||||
/* Tech tags wrapping fix */
|
||||
.tech-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ===== END VISUAL FIXES 2026-02-11 ===== */
|
||||
|
||||
Reference in New Issue
Block a user