/* Paint Now USA — styles.css */ /* Fonts loaded via Google Fonts in each HTML */ /* ========================================= CSS Custom Properties ========================================= */ :root { --blue: #1A3FB8; --yellow: #FFC72C; --navy: #0F2872; --white-soft: #FAFAFA; --gray-warm: #E5E7EB; --charcoal: #1F2937; --slate: #6B7280; --white: #ffffff; --radius-card: 8px; --radius-btn: 6px; --radius-input: 4px; --shadow-card: 0 4px 12px rgba(0,0,0,0.08); --shadow-header: 0 2px 8px rgba(0,0,0,0.10); --font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --max-width: 1200px; --section-pad: 5rem 1.25rem; } /* ========================================= Reset & Base ========================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); color: var(--charcoal); background: var(--white-soft); line-height: 1.6; font-size: 1rem; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* ========================================= Accessibility ========================================= */ .skip-link { position: absolute; top: -9999px; left: 1rem; background: var(--blue); color: var(--white); padding: 0.5rem 1rem; border-radius: var(--radius-btn); font-size: 0.875rem; font-weight: 600; z-index: 9999; transition: top 0.1s; } .skip-link:focus { top: 1rem; } :focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; } /* ========================================= Typography ========================================= */ h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--navy); } h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; } h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); } h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); } p { margin-bottom: 1rem; color: var(--charcoal); } p:last-child { margin-bottom: 0; } .text-muted { color: var(--slate); } .text-center { text-align: center; } /* ========================================= Layout Utilities ========================================= */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem; } .section { padding: var(--section-pad); } .grid-2 { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } } .grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } /* ========================================= Buttons ========================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.75rem 1.5rem; border-radius: var(--radius-btn); font-family: var(--font-heading); font-weight: 700; font-size: 0.9375rem; cursor: pointer; border: 2px solid transparent; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.1s; text-decoration: none; white-space: nowrap; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--blue); color: var(--white); border-color: var(--blue); } .btn-primary:hover { background: var(--navy); border-color: var(--navy); } .btn-cta { background: var(--yellow); color: var(--navy); border-color: var(--yellow); } .btn-cta:hover { background: #e6b025; border-color: #e6b025; } .btn-outline-white { background: transparent; color: var(--white); border-color: var(--white); } .btn-outline-white:hover { background: var(--white); color: var(--navy); } /* ========================================= Header & Navigation ========================================= */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--white); box-shadow: none; transition: box-shadow 0.2s; } .site-header.scrolled { box-shadow: var(--shadow-header); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; max-width: var(--max-width); margin: 0 auto; } .logo-link { display: flex; align-items: center; } .logo-link img { max-height: 132px; width: auto; } .nav-desktop { display: none; align-items: center; gap: 1.5rem; } @media (min-width: 768px) { .nav-desktop { display: flex; } } .nav-desktop a { font-family: var(--font-heading); font-weight: 600; font-size: 0.9375rem; color: var(--charcoal); padding-bottom: 2px; border-bottom: 2px solid transparent; transition: border-color 0.2s, color 0.2s; } .nav-desktop a:hover { color: var(--blue); border-bottom-color: var(--yellow); } .nav-desktop a.active { border-bottom-color: var(--yellow); color: var(--blue); } .lang-toggle { display: flex; align-items: center; gap: 0.25rem; font-family: var(--font-heading); font-weight: 700; font-size: 0.8125rem; border: none; background: none; cursor: pointer; } .lang-toggle .lang-btn { padding: 0.2rem 0.4rem; border-radius: 3px; color: var(--slate); background: none; border: none; font-family: inherit; font-weight: 700; font-size: inherit; cursor: pointer; transition: background 0.15s, color 0.15s; } .lang-toggle .lang-btn.active { background: var(--blue); color: var(--white); } .lang-toggle .lang-sep { color: var(--gray-warm); } /* Hamburger */ .hamburger { display: flex; flex-direction: column; justify-content: space-between; width: 28px; height: 20px; background: none; border: none; cursor: pointer; padding: 0; } @media (min-width: 768px) { .hamburger { display: none; } } @media (min-width: 768px) { .mobile-header-extras { display: none !important; } } .hamburger span { display: block; height: 2px; background: var(--charcoal); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; } .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* Mobile nav */ .nav-mobile { display: none; flex-direction: column; background: var(--white); border-top: 1px solid var(--gray-warm); padding: 1rem 1.25rem 1.5rem; gap: 1rem; } .nav-mobile.open { display: flex; } .nav-mobile a { font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem; color: var(--charcoal); padding: 0.5rem 0; border-bottom: 1px solid var(--gray-warm); } .nav-mobile a:last-of-type { border-bottom: none; } .nav-mobile a.active { color: var(--blue); } .mobile-header-extras { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; } /* ========================================= Hero ========================================= */ .hero { position: relative; min-height: 90vh; display: flex; align-items: center; overflow: hidden; } .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(15,40,114,0.82) 0%, rgba(26,63,184,0.55) 100%); z-index: 1; } .hero-content { position: relative; z-index: 2; max-width: var(--max-width); margin: 0 auto; padding: 4rem 1.25rem; color: var(--white); } .hero-content h1 { color: var(--white); max-width: 700px; } .hero-content .hero-sub { font-size: clamp(1.0625rem, 2vw, 1.25rem); color: rgba(255,255,255,0.88); margin: 1.25rem 0 2rem; max-width: 560px; } .hero-buttons { display: flex; flex-wrap: wrap; gap: 1rem; } /* ========================================= Section Headings ========================================= */ .section-heading { text-align: center; margin-bottom: 3rem; } .section-heading h2 { margin-bottom: 0.75rem; } .section-heading p { color: var(--slate); max-width: 560px; margin: 0 auto; } /* ========================================= Feature Row (Why us) ========================================= */ .why-section { background: var(--white); } .feature-card { background: var(--white-soft); border-radius: var(--radius-card); padding: 2rem 1.5rem; box-shadow: var(--shadow-card); text-align: center; transition: transform 0.2s, box-shadow 0.2s; } .feature-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); } .feature-icon { font-size: 2.5rem; margin-bottom: 1rem; } .feature-card h3 { color: var(--navy); margin-bottom: 0.75rem; font-size: 1.25rem; } .feature-card p { color: var(--slate); font-size: 0.9375rem; } /* ========================================= Services Preview Cards ========================================= */ .services-section { background: var(--white-soft); } .service-card { background: var(--white); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); transition: transform 0.2s, box-shadow 0.2s; } .service-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.13); } .service-card img { width: 100%; height: 260px; object-fit: cover; } .service-card-body { padding: 1.5rem; } .service-card-body h3 { color: var(--navy); margin-bottom: 0.75rem; } .service-card-body p { color: var(--slate); font-size: 0.9375rem; margin-bottom: 1.25rem; } .service-card-body a { color: var(--blue); font-family: var(--font-heading); font-weight: 700; font-size: 0.9375rem; display: inline-flex; align-items: center; gap: 0.3rem; border-bottom: 2px solid var(--yellow); padding-bottom: 1px; transition: color 0.2s; } .service-card-body a:hover { color: var(--navy); } /* ========================================= Process Steps ========================================= */ .process-section { background: var(--white); } .process-steps { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 640px) { .process-steps { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .process-steps { grid-template-columns: repeat(4, 1fr); } } .process-step { text-align: center; } .step-circle { width: 72px; height: 72px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; } .step-number { font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; color: var(--yellow); } .process-step h3 { font-size: 1.125rem; color: var(--navy); margin-bottom: 0.5rem; } .process-step p { font-size: 0.9rem; color: var(--slate); } /* ========================================= Testimonials ========================================= */ .testimonials-section { background: var(--navy); color: var(--white); } .testimonials-section .section-heading h2 { color: var(--white); } .testimonials-section .section-heading p { color: rgba(255,255,255,0.7); } .testimonial-cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .testimonial-cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .testimonial-cards { grid-template-columns: repeat(3, 1fr); } } .testimonial-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-card); padding: 1.75rem 1.5rem; } .testimonial-card .stars { color: var(--yellow); font-size: 1.125rem; margin-bottom: 1rem; } .testimonial-card blockquote { font-size: 0.9375rem; line-height: 1.65; color: rgba(255,255,255,0.9); margin-bottom: 1.25rem; font-style: italic; } .testimonial-card cite { font-family: var(--font-heading); font-weight: 700; font-size: 0.875rem; color: var(--yellow); font-style: normal; } /* ========================================= CTA Band ========================================= */ .cta-band { background: var(--yellow); padding: 4rem 1.25rem; text-align: center; } .cta-band h2 { color: var(--navy); margin-bottom: 1rem; } .cta-band p { color: var(--navy); opacity: 0.8; margin-bottom: 1.75rem; max-width: 520px; margin-left: auto; margin-right: auto; } /* ========================================= Footer ========================================= */ .site-footer { background: var(--navy); color: var(--white); padding: 3.5rem 1.25rem 0; } .footer-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 768px) { .footer-inner { grid-template-columns: 2fr 1fr 1.5fr; } } .footer-brand .logo-link { display: inline-block; background: var(--white); border-radius: 8px; padding: 6px 10px; } .footer-brand .logo-link img { max-height: 68px; } .footer-brand .tagline { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--yellow); margin: 0.75rem 0 0.5rem; } .footer-brand p { color: rgba(255,255,255,0.7); font-size: 0.9rem; } .footer-links h4, .footer-contact h4 { color: var(--white); font-size: 0.9375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; font-family: var(--font-heading); } .footer-links ul { display: flex; flex-direction: column; gap: 0.5rem; } .footer-links a { color: rgba(255,255,255,0.7); font-size: 0.9375rem; transition: color 0.2s; } .footer-links a:hover { color: var(--yellow); } .footer-contact p { color: rgba(255,255,255,0.7); font-size: 0.9375rem; margin-bottom: 0.5rem; } .footer-contact a { color: rgba(255,255,255,0.7); transition: color 0.2s; } .footer-contact a:hover { color: var(--yellow); } .footer-contact strong { color: var(--white); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 2.5rem; padding: 1.25rem 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; max-width: var(--max-width); margin-left: auto; margin-right: auto; } .footer-bottom p { color: rgba(255,255,255,0.5); font-size: 0.8125rem; margin: 0; } /* ========================================= Page Hero (inner pages) ========================================= */ .page-hero { background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); padding: 4rem 1.25rem 3rem; text-align: center; color: var(--white); } .page-hero h1 { color: var(--white); } .page-hero p { color: rgba(255,255,255,0.8); margin-top: 0.75rem; font-size: 1.125rem; } /* ========================================= Services Page ========================================= */ .service-section-block { padding: 4rem 0; } .service-section-block:nth-child(even) { background: var(--white); } .service-section-block:nth-child(odd) { background: var(--white-soft); } .service-block-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem; } .service-block-photo { width: 100%; height: 380px; object-fit: cover; border-radius: var(--radius-card); box-shadow: var(--shadow-card); margin-bottom: 2.5rem; } .service-block-content h2 { color: var(--navy); margin-bottom: 1rem; } .service-block-content p { color: var(--slate); margin-bottom: 1.25rem; } .included-list { list-style: none; margin: 1.25rem 0 2rem; display: grid; grid-template-columns: 1fr; gap: 0.5rem; } @media (min-width: 640px) { .included-list { grid-template-columns: repeat(2, 1fr); } } .included-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9375rem; color: var(--charcoal); } .included-list li::before { content: '✓'; color: var(--blue); font-weight: 800; font-size: 1rem; flex-shrink: 0; margin-top: 1px; } .industries-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 1.5rem; } .industry-tag { background: var(--blue); color: var(--white); font-family: var(--font-heading); font-weight: 600; font-size: 0.8125rem; padding: 0.3rem 0.75rem; border-radius: 100px; } .timeline-note { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--gray-warm); border-radius: var(--radius-card); padding: 0.75rem 1.25rem; font-size: 0.9375rem; color: var(--charcoal); margin-bottom: 2rem; } /* ========================================= About Page ========================================= */ .about-story { background: var(--white); padding: 4rem 0; } .about-story .container { max-width: 800px; } .about-story h2 { color: var(--navy); margin-bottom: 1.25rem; } .about-story p { color: var(--charcoal); font-size: 1.0625rem; line-height: 1.75; margin-bottom: 1.25rem; } .promise-section { background: var(--navy); color: var(--white); padding: 4rem 1.25rem; } .promise-section .container { max-width: 800px; } .promise-section h2 { color: var(--white); margin-bottom: 1.5rem; } .promise-list { display: flex; flex-direction: column; gap: 1rem; } .promise-item { display: flex; align-items: flex-start; gap: 1rem; background: rgba(255,255,255,0.07); border-radius: var(--radius-card); padding: 1.25rem 1.5rem; } .promise-item .promise-icon { font-size: 1.5rem; flex-shrink: 0; } .promise-item h3 { color: var(--yellow); font-size: 1.125rem; margin-bottom: 0.25rem; } .promise-item p { color: rgba(255,255,255,0.8); font-size: 0.9375rem; margin: 0; } .service-area-section { background: var(--white-soft); padding: 4rem 1.25rem; } .service-area-section .container { max-width: 800px; } .service-area-section h2 { color: var(--navy); margin-bottom: 1.25rem; } .area-map-placeholder { width: 100%; height: 240px; background: linear-gradient(135deg, var(--gray-warm) 0%, #d1d5db 100%); border-radius: var(--radius-card); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; border: 2px dashed #c5c8cc; } .area-map-placeholder span { color: var(--slate); font-size: 0.9375rem; font-family: var(--font-heading); font-weight: 600; } .area-list { display: flex; flex-wrap: wrap; gap: 0.75rem; } .area-chip { background: var(--blue); color: var(--white); padding: 0.4rem 1rem; border-radius: 100px; font-family: var(--font-heading); font-weight: 600; font-size: 0.875rem; } /* ========================================= Contact Page ========================================= */ .contact-section { padding: 4rem 0; background: var(--white-soft); } .contact-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem; } @media (min-width: 900px) { .contact-grid { grid-template-columns: 3fr 2fr; } } /* Form */ .estimate-form { background: var(--white); border-radius: var(--radius-card); padding: 2rem 1.75rem; box-shadow: var(--shadow-card); } .estimate-form h2 { color: var(--navy); margin-bottom: 0.5rem; } .estimate-form > p { color: var(--slate); font-size: 0.9375rem; margin-bottom: 1.75rem; } .form-group { margin-bottom: 1.25rem; } .form-fieldset { border: none; padding: 0; min-width: 0; } .form-fieldset legend { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 0.875rem; color: var(--charcoal); margin-bottom: 0.4rem; padding: 0; width: 100%; } .form-group label { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 0.875rem; color: var(--charcoal); margin-bottom: 0.4rem; } .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="tel"], .form-group select, .form-group textarea { width: 100%; padding: 0.65rem 0.875rem; border: 1.5px solid var(--gray-warm); border-radius: var(--radius-input); font-family: var(--font-body); font-size: 1rem; color: var(--charcoal); background: var(--white); transition: border-color 0.2s, box-shadow 0.2s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,63,184,0.12); outline: none; } .form-group textarea { min-height: 110px; resize: vertical; } .radio-group { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; } .radio-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9375rem; cursor: pointer; padding: 0.4rem 0.75rem; border: 1.5px solid var(--gray-warm); border-radius: 4px; transition: border-color 0.2s, background 0.2s; } .radio-label:hover { border-color: var(--blue); } .radio-label input[type="radio"] { accent-color: var(--blue); } .radio-label input[type="radio"]:checked + span { color: var(--blue); font-weight: 600; } .form-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 560px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } } .form-submit-btn { width: 100%; padding: 0.9rem; font-size: 1rem; margin-top: 0.5rem; } .form-success { display: none; text-align: center; padding: 2.5rem 1.5rem; } .form-success.visible { display: block; } .form-success .success-icon { font-size: 3rem; margin-bottom: 1rem; } .form-success h3 { color: var(--navy); margin-bottom: 0.75rem; } .form-success p { color: var(--slate); } /* Contact info card */ .contact-info-card { background: var(--white); border-radius: var(--radius-card); padding: 2rem 1.75rem; box-shadow: var(--shadow-card); height: fit-content; } .contact-info-card h3 { color: var(--navy); margin-bottom: 1.25rem; font-size: 1.25rem; } .contact-info-item { display: flex; gap: 0.875rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--gray-warm); } .contact-info-item:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .contact-info-item .info-icon { font-size: 1.25rem; flex-shrink: 0; } .contact-info-item .info-label { font-family: var(--font-heading); font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate); margin-bottom: 0.2rem; } .contact-info-item .info-value { color: var(--charcoal); font-size: 0.9375rem; } .contact-info-item a { color: var(--blue); } .whats-next { background: var(--navy); border-radius: var(--radius-card); padding: 1.25rem 1.5rem; margin-top: 1.5rem; } .whats-next h4 { color: var(--yellow); font-size: 0.9375rem; margin-bottom: 0.875rem; font-family: var(--font-heading); } .whats-next ol { list-style: none; counter-reset: steps; display: flex; flex-direction: column; gap: 0.6rem; } .whats-next ol li { counter-increment: steps; display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.875rem; color: rgba(255,255,255,0.85); } .whats-next ol li::before { content: counter(steps); background: var(--yellow); color: var(--navy); font-family: var(--font-heading); font-weight: 800; font-size: 0.75rem; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } /* ========================================= Gallery (optional – for future use) ========================================= */ .gallery-section { background: var(--white); } .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } .gallery-grid img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--radius-card); transition: transform 0.2s; } .gallery-grid img:hover { transform: scale(1.02); } /* ========================================= Utility: Image placeholder ========================================= */ .img-placeholder { background: linear-gradient(135deg, var(--gray-warm) 0%, #d1d5db 100%); display: flex; align-items: center; justify-content: center; color: var(--slate); font-family: var(--font-heading); font-weight: 600; font-size: 0.875rem; text-align: center; padding: 1rem; } /* ========================================= Responsive fixes ========================================= */ @media (max-width: 480px) { .hero { min-height: 80vh; } .hero-buttons { flex-direction: column; } .hero-buttons .btn { width: 100%; text-align: center; } .footer-bottom { flex-direction: column; text-align: center; } } @media (min-width: 1200px) { body { font-size: 1.0625rem; } }