/* Roof animation for logo */ .logo-animated #roof { transform-box: fill-box; transform-origin: 50% 0%; transform: translateY(220%); opacity: 0; will-change: transform, opacity; } .logo-animated.roof-in #roof { animation: roofDrop 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes roofDrop { 0% { transform: translateY(220%); opacity: 0; } 70% { transform: translateY(-8%); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } /* Leaves fade-in, staggered after roof lands */ .logo-animated #leaf-right { opacity: 0; transform: translateY(6px); will-change: opacity, transform; } .logo-animated #leaf-left { opacity: 1; transform: translateY(0); will-change: opacity, transform; } .logo-animated.roof-in #leaf-right { animation: leafIn 0.5s ease forwards; /* start 100ms after the roof animation ends (roof duration 1.4s) */ animation-delay: 1.5s; } @keyframes leafIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Inline header logo: animate immediately on first paint (no JS delay) */ .jd-logo.logo-inline { width: 48px; height: 48px; display: inline-block; vertical-align: middle; } /* Run roof drop and leaf fade automatically for inline (header) logo */ .jd-logo.logo-inline #roof { transform-box: fill-box; transform-origin: 50% 0%; animation: roofDrop 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .jd-logo.logo-inline #leaf-right { opacity: 0; transform: translateY(6px); will-change: opacity, transform; /* start 100ms after the roof animation ends (1.4s + 0.1s) */ animation: leafIn 0.5s ease forwards; animation-delay: 1.5s; } /* Respect user motion preferences */ @media (prefers-reduced-motion: reduce) { .jd-logo.logo-inline #roof, .jd-logo.logo-inline #leaf-right { animation: none !important; transform: none !important; opacity: 1 !important; } } /* Developer helper: disable logo animation by adding `.no-logo-animation` to the */ .no-logo-animation .jd-logo #roof, .no-logo-animation .jd-logo #leaf-right, .no-logo-animation .jd-logo.logo-inline #roof, .no-logo-animation .jd-logo.logo-inline #leaf-right, .no-logo-animation .logo-animated.roof-in #roof, .no-logo-animation .logo-animated #leaf-right { animation: none !important; transform: none !important; opacity: 1 !important; } /* ======================================== JD Smart Building - Main Stylesheet Mobile-First Responsive Design ======================================== */ /** * TABLE OF CONTENTS * ----------------- * 1. Logo Animation (lines 1-115) * 2. Progressive Image Loading * 3. Reset & Base Styles * 4. Utility Classes * 5. Buttons * 6. Header & Navigation * 7. Hero Section * 8. Promise Section * 9. Featured Section * 10. Services Section * 11. Portfolio Section * 12. Testimonials Section * 13. About Section * 14. Instagram Section * 15. Contact Section * 16. CTA Section * 17. Footer * 18. Modal Styles * 19. Media Queries / Responsive * * Page-specific styles are in separate files: * - css/pages-shared.css (page heroes, legal pages) * - css/pricing.css (pricing page) * - css/process.css (process page) * - css/services.css (services page) * - css/financing.css (financing page) * - css/chatbot.css (AI chatbot) * - css/logo-colors.css (logo color variables) */ /* ======================================== Progressive Image Loading (Blur-up effect) ======================================== */ .progressive-image { filter: blur(20px); transition: filter 0.4s ease-out; will-change: filter; background-color: var(--color-grey-200); } .progressive-image.loaded { filter: blur(0); } /* Ensure images don't shift layout during load */ .progressive-image-wrapper { position: relative; overflow: hidden; background-color: var(--color-grey-200); } .progressive-image-wrapper::before { content: ''; display: block; padding-top: 66.67%; /* 3:2 aspect ratio default */ } .progressive-image-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* Skeleton loading animation for slow connections */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .progressive-image:not(.loaded) { background: linear-gradient( 90deg, var(--color-grey-200) 25%, var(--color-grey-300) 50%, var(--color-grey-200) 75% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; } /* CSS Custom Properties (Variables) */ :root { /* Brand Colors */ --color-charcoal: #1a202c; --color-slate: #4a5568; --color-slate-light: #718096; --color-grey-100: #f7fafc; --color-grey-200: #edf2f7; --color-grey-300: #e2e8f0; /* Layout */ --header-height: 70px; --color-green: #68d391; --color-green-dark: #48bb78; --color-green-darker: #38a169; --color-orange: #ed8936; --color-orange-dark: #dd6b20; --color-white: #ffffff; --color-black: #000000; /* Typography */ --font-heading: 'Montserrat', sans-serif; --font-body: 'Inter', sans-serif; /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-full: 50%; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px rgba(0,0,0,0.1); --shadow-lg: 0 10px 25px rgba(0,0,0,0.15); --shadow-xl: 0 20px 40px rgba(0,0,0,0.2); /* Transitions */ --transition-fast: 150ms ease; --transition-base: 300ms ease; --transition-slow: 500ms ease; /* Z-index */ --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal: 400; --z-whatsapp: 500; } /* ======================================== Reset & Base Styles ======================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--color-charcoal); background-color: var(--color-white); overflow-x: hidden; position: relative; width: 100%; max-width: 100vw; } /* Section pattern handling is now done per-component or via .page-hero */ .section:not(.section--dark):not(.section--grey) > .container, .promise > .container, .services > .container, .testimonials > .container, .contact > .container { position: relative; z-index: 1; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; transition: color var(--transition-fast); } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } /* ======================================== Utility Classes ======================================== */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); } .section { padding: var(--space-3xl) 0; } /* Scroll offset for anchor links - ensures section tag is visible below nav */ [id] { scroll-margin-top: calc(var(--header-height, 80px) + 20px); } .section--dark { background-color: var(--color-charcoal); color: var(--color-white); } .section--grey { background-color: var(--color-grey-100); } .section__header { text-align: center; margin-bottom: var(--space-2xl); } .section__tag { display: inline-block; font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--color-green-dark); margin-bottom: var(--space-sm); } .section__tag--light { color: var(--color-green); } .section__title { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; color: var(--color-charcoal); margin-bottom: var(--space-md); line-height: 1.2; } .section--dark .section__title { color: var(--color-white); } .section__description { font-size: 1.1rem; color: var(--color-slate); max-width: 600px; margin: 0 auto; } .section--dark .section__description { color: var(--color-grey-300); } /* ======================================== Buttons ======================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); font-family: var(--font-heading); font-size: 0.9rem; font-weight: 600; padding: var(--space-md) var(--space-xl); border-radius: var(--radius-md); transition: all var(--transition-base); cursor: pointer; border: 2px solid transparent; } .btn svg { width: 20px; height: 20px; flex-shrink: 0; } .btn--primary { background-color: var(--color-green-dark); color: var(--color-white); border-color: var(--color-green-dark); } .btn--primary:hover { background-color: var(--color-green-darker); border-color: var(--color-green-darker); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn--outline { background-color: transparent; color: var(--color-charcoal); border-color: var(--color-charcoal); } .btn--outline:hover { background-color: var(--color-charcoal); color: var(--color-white); } .btn--outline-light { background-color: transparent; color: var(--color-white); border-color: var(--color-white); } .btn--outline-light:hover { background-color: var(--color-white); color: var(--color-charcoal); } .btn--full { width: 100%; } /* Button Press Animation */ .btn:active, .btn--primary:active, .btn--outline:active, .btn--outline-light:active { transform: scale(0.97); box-shadow: var(--shadow-sm); } /* ======================================== Header & Navigation ======================================== */ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: var(--z-fixed); background-color: transparent; transition: background-color var(--transition-base), box-shadow var(--transition-base), backdrop-filter var(--transition-base); } .header.scrolled { background-color: rgba(26, 32, 44, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-md); } /* When mobile menu is open - Keep header's existing state, just add overlay */ .header.nav-open::before { content: ''; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.4); z-index: -1; /* Behind the menu content but covers the page */ /* Instant appearance - no transition needed */ } .nav { display: flex; align-items: center; justify-content: space-between; height: 70px; } .nav__logo { display: flex; align-items: flex-end; gap: 0.5rem; text-decoration: none; } .nav__logo .jd-logo { width: 40px; height: 40px; flex-shrink: 0; } .nav__brand { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--color-white); letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; margin-bottom: -0.165rem; } .nav__menu { position: fixed; top: 0; right: 0; width: 300px; max-width: 85vw; height: 100vh; height: 100dvh; background-color: rgba(26, 32, 44, 0.85); padding: var(--space-4xl) var(--space-xl); z-index: var(--z-modal); overflow-y: auto; /* Reveal animation - only transform transitions */ transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.4s; visibility: hidden; pointer-events: none; /* Modern effects - pre-computed, no transition */ backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); box-shadow: -10px 0 30px rgba(0,0,0,0.5); /* Hint browser to prepare blur layer */ will-change: transform; } .nav__menu.active { transform: translateX(0) !important; visibility: visible !important; pointer-events: auto !important; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0s; } /* Close menu smoothly on scroll */ .nav__menu.closing { transform: translateX(100%); } .nav__list { display: flex; flex-direction: column; gap: var(--space-lg); } .nav__link { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; color: var(--color-white); /* Default white for desktop header on dark background */ transition: color var(--transition-fast); } .nav__link:hover { color: var(--color-green); } .nav__cta { display: inline-block; padding: var(--space-sm) var(--space-lg); background-color: var(--color-green-dark); color: var(--color-white) !important; border-radius: var(--radius-md); margin-top: var(--space-md); } /* Mobile menu links - white on blur background */ .nav__menu .nav__link { color: var(--color-white) !important; } .nav__menu .nav__link:hover { color: var(--color-green) !important; } .nav__cta:hover { background-color: var(--color-green-darker); } /* Mobile Menu Toggle */ .nav__toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 40px; height: 40px; flex-shrink: 0; z-index: calc(var(--z-modal) + 10); /* Ensure toggle is ALWAYS above the menu */ } .hamburger { position: relative; width: 24px; height: 2px; background-color: var(--color-white); transition: background-color var(--transition-fast); } .header.scrolled .hamburger { background-color: var(--color-white); } .hamburger::before, .hamburger::after { content: ''; position: absolute; left: 0; width: 24px; height: 2px; background-color: inherit; transition: transform var(--transition-base); } .hamburger::before { top: -7px; } .hamburger::after { top: 7px; } .nav__toggle.active .hamburger { background-color: transparent; } .nav__toggle.active .hamburger::before { top: 0; transform: rotate(45deg); background-color: var(--color-white); } .nav__toggle.active .hamburger::after { top: 0; transform: rotate(-45deg); background-color: var(--color-white); } /* Dropdown Menu */ .nav__dropdown { position: relative; } .dropdown-arrow { transition: transform var(--transition-fast); } .dropdown__menu { display: none; background-color: rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); padding: var(--space-md); margin-top: var(--space-sm); } .dropdown__menu.active { display: block; } .dropdown__title { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--color-grey-300); margin-bottom: var(--space-xs); margin-top: var(--space-sm); } .dropdown__title:first-child { margin-top: 0; } .dropdown__link { display: block; font-size: 0.95rem; color: var(--color-white); padding: var(--space-xs) 0; } .dropdown__link:hover { color: var(--color-green); } .dropdown__divider { height: 1px; background-color: var(--color-grey-300); margin: var(--space-sm) 0; } /* ======================================== Hero Section ======================================== */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero__background { position: absolute; inset: 0; z-index: -1; } .hero__image { width: 100%; height: 100%; object-fit: cover; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(26, 32, 44, 0.7) 0%, rgba(26, 32, 44, 0.5) 50%, rgba(26, 32, 44, 0.8) 100% ); } .hero__content { position: relative; z-index: 2; text-align: center; color: var(--color-white); padding: var(--space-4xl) var(--space-lg); max-width: 800px; } .hero__title { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 800; line-height: 1.1; margin-bottom: var(--space-lg); } .hero__subtitle { font-size: 1.1rem; color: var(--color-grey-200); margin-bottom: var(--space-xl); max-width: 500px; margin-left: auto; margin-right: auto; } .hero__scroll { position: absolute; bottom: var(--space-xl); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); color: var(--color-grey-300); font-size: 0.85rem; animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-10px); } 60% { transform: translateX(-50%) translateY(-5px); } } /* ======================================== Promise Section ======================================== */ .promise__grid { display: grid; gap: var(--space-xl); } .promise__card { text-align: center; padding: var(--space-xl); background-color: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transition: transform var(--transition-base), box-shadow var(--transition-base); } .promise__card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .promise__icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; background-color: var(--color-grey-100); border-radius: var(--radius-full); margin-bottom: var(--space-lg); color: var(--color-slate); } .promise__icon--green { background-color: rgba(104, 211, 145, 0.15); color: var(--color-green-dark); } .promise__icon--blue { background-color: rgba(59, 182, 229, 0.20); /* #3bb6e5 at 20% opacity */ color: #3bb6e5; } .promise__icon--orange { background-color: rgba(237, 137, 54, 0.15); color: var(--color-orange); } .promise__title { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; margin-bottom: var(--space-md); color: var(--color-charcoal); } .promise__text { font-size: 0.95rem; color: var(--color-slate); line-height: 1.7; } /* ======================================== Featured Section ======================================== */ .featured__wrapper { display: grid; gap: var(--space-2xl); align-items: center; } .featured__title { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 800; margin-bottom: var(--space-lg); color: var(--color-white); } .featured__text { font-size: 1rem; color: var(--color-grey-300); margin-bottom: var(--space-xl); line-height: 1.8; } .featured__stats { display: flex; flex-wrap: wrap; gap: var(--space-xl); margin-bottom: var(--space-xl); } .featured__stats li { text-align: center; } .featured__icon { height: 32px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-sm); } .featured__icon svg { width: 32px; height: 32px; display: block; } .stat__number { display: block; font-family: var(--font-heading); font-size: 2rem; font-weight: 800; color: var(--color-green); } .stat__label { font-size: 0.85rem; color: var(--color-grey-300); } .featured__slider { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); line-height: 0; } .featured__slider p { line-height: 1.5; } .before-after-slider { --divider-width: 3px; --divider-color: var(--color-green); --default-handle-width: 50px; --default-handle-color: var(--color-green); display: block; width: 100%; } .before-after-slider:focus, .before-after-slider:focus-visible { outline: none; } .before-after-slider img { width: 100%; height: auto; display: block; max-height: 80vh; object-fit: contain; } .slider__hint { text-align: center; font-size: 0.85rem; color: var(--color-grey-300); margin-top: var(--space-md); } /* ======================================== Services Section ======================================== */ .services__sections { display: flex; flex-direction: column; gap: var(--space-3xl); } .service-section { background: var(--color-grey-100); border-radius: var(--radius-lg); padding: var(--space-xl); } .service-section__header { margin-bottom: var(--space-xl); } .service-section__tag { display: inline-block; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--color-green-dark); margin-bottom: var(--space-xs); } .service-section__title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--color-charcoal); } .service-section__grid { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; } @media (min-width: 640px) { .service-section__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1025px) { .service-section__grid { grid-template-columns: repeat(3, 1fr); } /* Interior section: 2 cards, center them */ .service-section:last-child .service-section__grid { grid-template-columns: repeat(2, 1fr); max-width: 700px; } } .service-card { background-color: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base); } .service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .service-card__image { height: 200px; overflow: hidden; } .service-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .service-card:hover .service-card__image img { transform: scale(1.05); } .service-card__content { padding: var(--space-lg); } .service-card__content h4 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; margin-bottom: var(--space-sm); color: var(--color-charcoal); } .service-card__content p { font-size: 0.9rem; color: var(--color-slate); line-height: 1.6; } .service-card__link-text { display: inline-block; margin-top: var(--space-sm); font-size: 0.85rem; font-weight: 600; color: var(--color-green-dark); transition: color var(--transition-fast), transform var(--transition-fast); } .service-card-link:hover .service-card__link-text { color: var(--color-charcoal); transform: translateX(4px); } /* Service card as link - for portfolio teaser */ a.service-card--link { display: block; text-decoration: none; color: inherit; cursor: pointer; } a.service-card--link:hover .service-card__content h4 { color: var(--color-green-dark); } /* ======================================== Portfolio Section ======================================== */ .portfolio__filters { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; margin-bottom: var(--space-xl); } .filter-btn { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 600; padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-md); background-color: var(--color-white); color: var(--color-slate); border: 2px solid var(--color-grey-300); transition: all var(--transition-fast); } .filter-btn:hover, .filter-btn.active { background-color: var(--color-green-dark); color: var(--color-white); border-color: var(--color-green-dark); } .portfolio__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } @media (min-width: 640px) { .portfolio__grid { grid-template-columns: repeat(2, 1fr); } } .portfolio__item { position: relative; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; aspect-ratio: 4/3; display: block; } .portfolio__item.hidden { display: none !important; } /* Fade In Animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .portfolio__image { width: 100%; height: 100%; } .portfolio__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .portfolio__item:hover .portfolio__image img { transform: scale(1.1); } .portfolio__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26, 32, 44, 0.9) 0%, transparent 60%); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-lg); opacity: 0; transition: opacity var(--transition-base); } .portfolio__item:hover .portfolio__overlay { opacity: 1; } .portfolio__category { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--color-green); margin-bottom: var(--space-xs); } .portfolio__title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; color: var(--color-white); margin-bottom: var(--space-xs); } .portfolio__location { font-size: 0.85rem; color: var(--color-grey-300); } /* ======================================== Testimonials Section ======================================== */ .testimonials__grid { display: grid; gap: var(--space-xl); } .testimonial { background-color: var(--color-white); padding: var(--space-xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .testimonial__stars { color: var(--color-orange); font-size: 1.2rem; margin-bottom: var(--space-md); } .testimonial__text { font-size: 1rem; color: var(--color-charcoal); line-height: 1.8; margin-bottom: var(--space-lg); font-style: italic; } .testimonial__author { display: flex; align-items: center; gap: var(--space-md); } .testimonial__avatar { width: 50px; height: 50px; border-radius: var(--radius-full); background-color: var(--color-green-dark); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; } .testimonial__name { display: block; font-family: var(--font-heading); font-weight: 700; font-style: normal; color: var(--color-charcoal); } .testimonial__location { font-size: 0.85rem; color: var(--color-slate-light); } /* ======================================== Reviews Section (Google Integration) ======================================== */ .reviews { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); } .reviews__content { margin-top: var(--space-xl); } .reviews__cards { display: grid; gap: var(--space-lg); } @media (min-width: 640px) { .reviews__cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1025px) { .reviews__cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1280px) { .reviews__cards { grid-template-columns: repeat(4, 1fr); } } .review-card { background: var(--color-white); padding: var(--space-xl); border-radius: var(--radius-lg); box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; } .review-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.1); } /* CTA Card (Google Maps) */ .review-card--cta { background: linear-gradient(135deg, var(--color-charcoal) 0%, #2d3748 100%); color: var(--color-white); justify-content: center; text-align: center; } .review-card--cta .review-card__header { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); } .review-card__google-logo { width: 40px; height: 40px; } .review-card--cta .review-card__score { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--color-white); } .review-card--cta .review-card__stars { color: #fbbc04; } .review-card__cta-text { color: var(--color-grey-300); font-size: 0.9rem; line-height: 1.6; margin: var(--space-md) 0 var(--space-lg); } .review-card__buttons { display: flex; flex-direction: column; gap: var(--space-sm); } .review-card__buttons .btn--small { font-size: 0.85rem; padding: 0.6rem 1rem; } .review-card__header { margin-bottom: var(--space-md); } .review-card__rating { display: flex; align-items: center; gap: var(--space-sm); } .review-card__stars { color: #fbbc04; font-size: 1rem; text-align: center; letter-spacing: 1px; } .review-card__source { font-size: 0.75rem; color: var(--color-slate); text-transform: uppercase; letter-spacing: 0.5px; } .review-card__text { font-size: 0.95rem; color: var(--color-charcoal); line-height: 1.7; margin: 0 0 var(--space-lg); font-style: italic; } .review-card__author { display: flex; align-items: center; gap: var(--space-sm); } .review-card__avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--color-green) 0%, var(--color-green-dark) 100%); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; } .review-card__info { display: flex; flex-direction: column; } .review-card__name { font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; font-style: normal; color: var(--color-charcoal); } .review-card__location { font-size: 0.8rem; color: var(--color-slate); } /* Google Widget */ .google-widget { background: var(--color-white); padding: var(--space-xl); border-radius: var(--radius-lg); box-shadow: 0 2px 8px rgba(0,0,0,0.06); position: sticky; top: calc(var(--header-height) + var(--space-lg)); text-align: center; } .google-widget__header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); text-align: left; } .google-widget__logo { width: 40px; height: 40px; } .google-widget__info { flex: 1; } .google-widget__title { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; color: var(--color-charcoal); margin: 0 0 var(--space-xs); } .google-widget__rating { display: flex; align-items: center; gap: var(--space-xs); } .google-widget__score { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; color: var(--color-charcoal); } .google-widget__stars { color: #fbbc04; font-size: 0.9rem; letter-spacing: 1px; } .google-widget__count { font-size: 0.75rem; color: var(--color-slate); } .google-widget__btn { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); width: 100%; margin-top: var(--space-md); } .google-widget__btn svg { flex-shrink: 0; } /* ======================================== Process Preview Section ======================================== */ .process-preview { background-color: var(--color-grey-100); } .process-grid { display: grid; gap: var(--space-xl); margin-top: var(--space-2xl); } @media (min-width: 640px) { .process-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1025px) { .process-grid { grid-template-columns: repeat(4, 1fr); } } .process-card { background: var(--color-white); padding: var(--space-xl); border-radius: var(--radius-lg); box-shadow: 0 2px 8px rgba(0,0,0,0.05); position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid var(--color-grey-200); } .process-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); } .process-card__number { font-family: var(--font-heading); font-size: 3rem; font-weight: 900; color: var(--color-green); opacity: 0.15; line-height: 1; margin-bottom: var(--space-xs); } .process-card__title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; margin-bottom: var(--space-sm); color: var(--color-charcoal); } .process-card__text { font-size: 0.95rem; color: var(--color-slate); line-height: 1.7; } .process-cta { margin-top: var(--space-3xl); text-align: center; } /* ======================================== About Section ======================================== */ .about__wrapper { display: grid; gap: var(--space-2xl); align-items: center; margin-bottom: var(--space-3xl); } .about__title { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 800; margin-bottom: var(--space-lg); color: var(--color-white); } .about__text { font-size: 1rem; color: var(--color-grey-300); line-height: 1.8; margin-bottom: var(--space-md); } .about__values { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-xl); } .value { display: flex; align-items: center; gap: var(--space-md); font-size: 1rem; color: var(--color-white); } .value__icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background-color: var(--color-green); border-radius: var(--radius-full); color: var(--color-charcoal); font-weight: 700; font-size: 0.85rem; } .about__image { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); } .about__image img { width: 100%; height: auto; } /* Service Area */ .service-area { text-align: center; padding-top: var(--space-2xl); border-top: 1px solid rgba(255, 255, 255, 0.1); } .service-area__title { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; margin-bottom: var(--space-sm); color: var(--color-white); } .service-area__text { color: var(--color-grey-300); margin-bottom: var(--space-lg); } .service-area__boroughs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); } .service-area__boroughs span { background-color: rgba(255, 255, 255, 0.1); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-md); font-size: 0.9rem; color: var(--color-grey-200); } .service-area__note { margin-top: var(--space-md); font-size: 0.85rem; color: var(--color-grey-400); } .service-area__note a { color: var(--color-accent); text-decoration: underline; } /* ======================================== Instagram Section ======================================== */ .instagram__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); } .instagram__item { position: relative; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; } .instagram__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-base); } .instagram__item:hover img { transform: scale(1.1); } .instagram__overlay { position: absolute; inset: 0; background-color: rgba(26, 32, 44, 0.7); display: flex; align-items: center; justify-content: center; color: var(--color-white); opacity: 0; transition: opacity var(--transition-base); } .instagram__item:hover .instagram__overlay { opacity: 1; } /* ======================================== Contact Section ======================================== */ .contact__wrapper { display: grid; gap: var(--space-2xl); } .contact__title { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 800; margin-bottom: var(--space-md); color: var(--color-charcoal); } .contact__text { font-size: 1rem; color: var(--color-slate); margin-bottom: var(--space-xl); line-height: 1.7; } .contact__details { display: flex; flex-direction: column; gap: var(--space-md); } .contact__link { display: flex; align-items: center; gap: var(--space-md); font-size: 1rem; color: var(--color-charcoal); transition: color var(--transition-fast); } .contact__link svg { color: var(--color-green-dark); flex-shrink: 0; } .contact__link:hover { color: var(--color-green-dark); } /* Contact Form */ .contact__form { background-color: var(--color-grey-100); padding: var(--space-xl); border-radius: var(--radius-lg); } .form__group { margin-bottom: var(--space-lg); } .form__row { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-bottom: var(--space-lg); } @media (min-width: 768px) { .form__row { grid-template-columns: 1fr 1fr; } } .form__label { display: block; font-family: var(--font-heading); font-size: 0.9rem; font-weight: 600; margin-bottom: var(--space-sm); color: var(--color-charcoal); } .form__input { width: 100%; padding: var(--space-md); font-family: var(--font-body); font-size: 1rem; border: 2px solid var(--color-grey-300); border-radius: var(--radius-md); background-color: var(--color-white); transition: border-color var(--transition-fast); } .form__input:focus { outline: none; border-color: var(--color-green-dark); } .form__input::placeholder { color: var(--color-slate-light); } /* Error state for inputs */ .input--error { border-color: var(--color-orange) !important; box-shadow: 0 6px 18px rgba(237, 137, 54, 0.12); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px 18px; } /* Slight padding right so the icon doesn't overlap text */ .input--error[type="text"], .input--error[type="email"], .input--error[type="tel"], .input--error textarea { padding-right: 48px; } .form__select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-md) center; padding-right: var(--space-2xl); cursor: pointer; } .form__textarea { resize: vertical; min-height: 120px; } .form__disclaimer { font-size: 0.85rem; color: var(--color-slate-light); text-align: center; margin-top: var(--space-md); } /* ======================================== Footer ======================================== */ .footer { background-color: var(--color-charcoal); color: var(--color-grey-300); padding: var(--space-3xl) 0 var(--space-xl); position: relative; overflow: hidden; } .footer > * { position: relative; z-index: 1; } .footer__grid { display: grid; gap: var(--space-xl); margin-bottom: var(--space-2xl); } .footer__tagline { font-size: 0.95rem; line-height: 1.7; margin-top: var(--space-md); color: var(--color-grey-300); } .footer__links h4 { font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; color: var(--color-white); margin-bottom: var(--space-md); } .footer__links ul { display: flex; flex-direction: column; gap: var(--space-sm); } .footer__links a { font-size: 0.9rem; color: var(--color-grey-300); transition: color var(--transition-fast); } .footer__links a:hover { color: var(--color-green); } .footer__bottom { padding-top: var(--space-xl); border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; font-size: 0.85rem; } .footer__bottom p { margin-bottom: var(--space-sm); } .footer__privacy-notice { font-size: 0.8rem; color: var(--color-grey-400); margin-top: var(--space-sm); } .footer__privacy-notice a { color: var(--color-grey-300); text-decoration: underline; } .footer__privacy-notice a:hover { color: var(--color-green); } /* Compact 3-column footer grid */ .footer__grid--compact { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); max-width: 800px; margin: 0 auto var(--space-2xl); } /* ======================================== WhatsApp Floating Button ======================================== */ .whatsapp-float { position: fixed; bottom: var(--space-xl); right: var(--space-xl); width: 60px; height: 60px; background-color: #25D366; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: var(--color-white); box-shadow: var(--shadow-lg); z-index: var(--z-whatsapp); transition: transform var(--transition-base), box-shadow var(--transition-base); } .whatsapp-float:hover { transform: scale(1.1); box-shadow: var(--shadow-xl); } /* Pulse Animation */ .whatsapp-float::before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: var(--radius-full); background-color: #25D366; animation: pulse 2s ease-out infinite; z-index: -1; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.5); opacity: 0; } } /* ======================================== Responsive Design - Tablet ======================================== */ @media (min-width: 768px) { .section { padding: var(--space-4xl) 0; } .section__title { font-size: 2.5rem; } .hero__title { font-size: 3.5rem; } .hero__subtitle { font-size: 1.25rem; } .promise__grid { grid-template-columns: repeat(3, 1fr); } .featured__wrapper { grid-template-columns: 1fr 1fr; } .service-category__grid { grid-template-columns: repeat(3, 1fr); } .portfolio__grid { grid-template-columns: repeat(2, 1fr); } .testimonials__grid { grid-template-columns: repeat(3, 1fr); } .about__wrapper { grid-template-columns: 1fr 1fr; } .instagram__grid { grid-template-columns: repeat(6, 1fr); } .contact__wrapper { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); } .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } .footer__grid--compact { grid-template-columns: repeat(3, 1fr); } } /* ======================================== Responsive Design - Desktop ======================================== */ @media (min-width: 1025px) { /* Navigation Desktop - Reset mobile menu styles */ .nav__toggle { display: none; } .nav__menu { position: static; width: auto; max-width: none; height: auto; background-color: transparent !important; padding: 0; box-shadow: none; overflow-y: visible; z-index: auto; transform: none !important; visibility: visible !important; pointer-events: auto !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .nav__list { flex-direction: row; align-items: center; gap: var(--space-md); } .nav__link { font-size: 0.85rem; color: var(--color-white); white-space: nowrap; } .header.scrolled .nav__link { color: var(--color-white); } .nav__link:hover { color: var(--color-green); } .nav__cta { margin-top: 0; } .hero__title { font-size: 4rem; } .portfolio__grid { grid-template-columns: repeat(3, 1fr); } .section__title { font-size: 2.75rem; } } /* --- Desktop navigation menu background fix --- */ @media (min-width: 1025px) { .nav__menu { background-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: none !important; visibility: visible !important; pointer-events: auto !important; } .nav__menu.active { background-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: none !important; visibility: visible !important; pointer-events: auto !important; } } /* ======================================== Responsive Design - Large Desktop ======================================== */ @media (min-width: 1280px) { .container { padding: 0 var(--space-xl); } .hero__title { font-size: 4.5rem; } .nav__list { gap: var(--space-lg); } .nav__link { font-size: 0.9rem; } } /* ======================================== Accessibility & Reduced Motion ======================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* Focus Styles for Accessibility */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--color-green-dark); outline-offset: 2px; } /* Print Styles */ @media print { .header, .whatsapp-float, .hero__scroll { display: none; } .hero { min-height: auto; padding: var(--space-xl) 0; } .hero__background { display: none; } .hero__content { color: var(--color-charcoal); } } /* ======================================== Mobile Horizontal Scroll Fix Prevents zoom-in/zoom-out causing overflow ======================================== */ @media (max-width: 768px) { html, body { overflow-x: hidden; /* Removed !important to allow overrides */ max-width: 100vw; width: 100%; } /* Scroll padding to account for fixed header on input focus */ html { scroll-padding-top: calc(var(--header-height, 70px) + 20px); } /* Prevent iOS zoom on input focus */ input, select, textarea { font-size: 16px !important; } /* Ensure sections don't overflow */ .section, .hero, .footer { max-width: 100vw; overflow-x: hidden; } /* Fix for elements that commonly cause overflow */ img, video, iframe, embed, object { max-width: 100%; height: auto; } /* Prevent text/elements from extending beyond viewport */ * { max-width: 100vw; box-sizing: border-box; } /* Mobile footer - stack columns */ .footer__grid--compact { grid-template-columns: 1fr; text-align: center; gap: var(--space-lg); } .footer__grid--compact .footer__links ul { align-items: center; } } /* --- Prevent separate scroll for mobile header --- */ @media (max-width: 1024px) { .header.scrolled { overflow: visible; /* Ensure mobile menu is not clipped */ } } /* Service Card Link Wrapper */ .service-card-link { display: block; text-decoration: none; color: inherit; transition: transform var(--transition-base); } .service-card-link:hover { transform: translateY(-5px); } .service-card-link:hover .service-card { border-color: var(--color-green); box-shadow: var(--shadow-lg); } .service-card-link .service-card { transition: border-color var(--transition-base), box-shadow var(--transition-base); height: 100%; }