/* ========================================= FOOTER SECTION - TRUE FULL WIDTH OVERRIDE ========================================= */ @media (min-width: 1440px) { /* 1. LAYOUT: Obliterate the 1400px cage and force true full width */ div[data-element-id="elm_dvglq3xKWgzm9PrwdO2JNg"], /* Logo Row */ div[data-element-id="elm_1CRbZJKnAnEnmkTMTz5JBA"] /* Text Columns Row */ { width: 100% !important; max-width: 100% !important; /* CRITICAL: Deletes the 1400px cap */ padding-left: 2vw !important; /* Tiny safe margin from the monitor edges */ padding-right: 2vw !important; margin: 0 auto !important; } /* 2. THE EQUALIZER: Spread columns evenly across the massive screen */ div[data-element-id="elm_1CRbZJKnAnEnmkTMTz5JBA"] { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: flex-start !important; } /* Force each column to take exactly 1/3 of the newly stretched space */ div[data-element-id="elm_PDLB1WcxhR0Yh-uRjzys7g"], div[data-element-id="elm_VpYOCZaysLHXunfJL7NvHQ"], div[data-element-id="elm_UQmRkW1bHgn-5lQWMbmsMA"] { width: 33.33% !important; max-width: 33.33% !important; flex: 1 1 0px !important; } /* 3. LOGO SCALING */ div[data-element-id="elm_tXZzb7wRWspf2wZjqLT3aA"] img { width: clamp(200px, 15vw, 300px) !important; height: auto !important; max-width: none !important; display: block !important; margin: 0 auto !important; /* Keeps the logo dead center */ } /* 4. TEXT SCALING & ANTI-WORD-BREAK */ div[data-element-id="elm_ez7MhwyKscPCNeuagDh-4g"] span[style*="font-size"] { font-size: max(20px, 1.1vw) !important; line-height: 1.2 !important; display: block !important; margin-bottom: 10px !important; } div[data-element-id="elm_1CRbZJKnAnEnmkTMTz5JBA"] .zptext, div[data-element-id="elm_1CRbZJKnAnEnmkTMTz5JBA"] a, div[data-element-id="elm_1CRbZJKnAnEnmkTMTz5JBA"] .zptext div { font-size: max(16px, 1vw) !important; line-height: 1.8 !important; /* Overrides the aggressive line-breaking causing the email issue */ word-break: normal !important; overflow-wrap: normal !important; white-space: normal !important; } } /* ========================================= COLLECTIONS GALLERY (TABS) - REFINED 1:1 GRID ========================================= */ @media (min-width: 1440px) { /* 1. LAYOUT: Cap the maximum width so it doesn't endlessly stretch */ div[data-element-id="elm_gxfRY25xML-LtmhiEP72pQ"] .zpcontainer-fluid, div[data-element-id="elm_gxfRY25xML-LtmhiEP72pQ"] .zprow { max-width: 1400px !important; /* A comfortable, premium maximum width */ margin: 0 auto !important; /* Centers the whole block on your 39" screen */ } /* 2. TAB BUTTONS: Smoothly scale "Premium" and "Classic" */ div[data-element-id="elm_dWPTKHiWMwxAug4Jmgej0Q"] .zptab-name { font-size: clamp(18px, 1.5vw, 28px) !important; } /* 3. COLLECTION TITLES: Scale all H4 headings (e.g., "Gemma Collection") */ div[data-element-id="elm_gxfRY25xML-LtmhiEP72pQ"] h4 { font-size: max(22px, 1.2vw) !important; margin-top: 20px !important; } /* 4. THE PERFECT 1:1 SQUARE IMAGES */ /* Release all the invisible wrappers */ div[data-element-id="elm_gxfRY25xML-LtmhiEP72pQ"] .zpimage-container, div[data-element-id="elm_gxfRY25xML-LtmhiEP72pQ"] figure, div[data-element-id="elm_gxfRY25xML-LtmhiEP72pQ"] a, div[data-element-id="elm_gxfRY25xML-LtmhiEP72pQ"] picture { width: 100% !important; max-width: 100% !important; display: block !important; } /* Force the 1:1 Ratio on all 13 images */ div[data-element-id="elm_gxfRY25xML-LtmhiEP72pQ"] .zpimage-container figure img { width: 100% !important; max-width: 420px !important; /* Capped so the images never look cartoonishly large */ aspect-ratio: 1 / 1 !important; /* CRITICAL: Enforces a perfect mathematical square */ object-fit: cover !important; /* Guarantees the image fills the square without stretching or warping */ height: auto !important; margin: 0 auto !important; /* Centers the square inside its column */ } } /* ========================================= CONFIGURATOR SECTION - WIDESCREEN OPTIMIZATION ========================================= */ @media (min-width: 1440px) { /* 1. LAYOUT: Center the main block on massive monitors */ div[data-element-id="elm_bfJunZk-s-yu_jd5j6QScg"] { margin: 0 auto !important; display: block !important; } /* 2. TEXT SCALING: Locks to Zoho default, but grows dynamically on large screens */ /* Heading ("Try Out The Configurator") */ div[data-element-id="elm_rGYdHN2ijV6_sB5KyaIltw"] h2, div[data-element-id="elm_rGYdHN2ijV6_sB5KyaIltw"] span { font-size: max(48px, 3.3vw) !important; line-height: 1.2 !important; } /* Sub-text ("Configure Your Custom Created...") */ div[data-element-id="elm_L4zLqVjGy41ngDeYl8gYUw"] .zptext, div[data-element-id="elm_L4zLqVjGy41ngDeYl8gYUw"] span { font-size: max(16px, 1.1vw) !important; line-height: 1.6 !important; margin-top: 15px !important; /* Gives the text a little room to breathe below the giant heading */ } /* Button Text & Padding ("Try Now") */ div[data-element-id="elm_A9_i28NtpkQzSbWl_jhmRw"] .zpbutton { font-size: max(16px, 1.1vw) !important; padding: clamp(10px, 1vw, 20px) clamp(20px, 2vw, 40px) !important; } } /* ========================================= ZEN COLLECTION - WIDESCREEN OPTIMIZATION ========================================= */ @media (min-width: 1440px) { /* 1. LAYOUT & SPACING: Allow the row to breathe on massive monitors */ div[data-element-id="elm_1ZdntGHIjt2sGmqxi20ouw"] { max-width: 80vw !important; margin: 0 auto !important; } /* 2. TEXT SCALING: Locks to Zoho default, but grows dynamically on large screens */ /* Heading (Zoho Default: 48px) */ div[data-element-id="elm_gY71NJcMBF0Yo4BIr_gDGw"] span[style*="font-size"] { font-size: max(48px, 3.3vw) !important; line-height: 1.2 !important; } /* Paragraph Text (Zoho Default: 16px) */ div[data-element-id="elm_hGMRkeAHpc07sQnK6nkmzg"] p span { font-size: max(16px, 1.1vw) !important; line-height: 1.6 !important; } /* Button Text & Padding */ div[data-element-id="elm_AobN-JCIDFAWSo9c2hcSYg"] .zpbutton { font-size: max(16px, 1.1vw) !important; padding: clamp(10px, 1vw, 20px) clamp(20px, 2vw, 40px) !important; border-width: 3px !important; } /* 3. IMAGE SCALING FIX: THE SPECIFICITY TRAP */ /* Force the invisible wrapper boxes to let the image grow */ div[data-element-id="elm_pWIJwqaLKtnQaJnD7yZZSg"] .zpimage-container, div[data-element-id="elm_pWIJwqaLKtnQaJnD7yZZSg"] figure, div[data-element-id="elm_pWIJwqaLKtnQaJnD7yZZSg"] a, div[data-element-id="elm_pWIJwqaLKtnQaJnD7yZZSg"] picture { width: 100% !important; max-width: 100% !important; display: block !important; } /* Target Zoho's exact path and force the min-width to grow (Starts at 540px) */ div[data-element-id="elm_pWIJwqaLKtnQaJnD7yZZSg"] .zpimage-container figure img { width: clamp(540px, 35vw, 900px) !important; min-width: clamp(540px, 35vw, 900px) !important; max-width: none !important; height: auto !important; min-height: 10px !important; } } /* ------------------------------------------------------------------------ 2. POOL & HOME PROJECTS SECTION (WIDESCREEN OPTIMIZATION) ------------------------------------------------------------------------ */ @media (min-width: 1440px) { /* Allow the row to breathe on massive monitors */ div[data-element-id="elm_cKogWj-QKDHxDPdgTnNIwQ"] { max-width: 80vw !important; margin: 0 auto !important; } /* TEXT SCALING: Locks to Zoho default, but grows dynamically on 39" screens */ /* Heading (Zoho Default: 48px) */ div[data-element-id="elm_ezWQImlDRh0AvugAQJ438g"] span[style*="font-size"] { font-size: max(48px, 3.3vw) !important; line-height: 1.2 !important; } /* Paragraph Text (Zoho Default: 16px) */ div[data-element-id="elm_ixXqAqG4Q1ropK-UmKSp4Q"] p span { font-size: max(16px, 1.1vw) !important; line-height: 1.6 !important; } /* Button Text & Padding */ div[data-element-id="elm_GecWPnp_ViQKzDcYU-Vs0Q"] .zpbutton { font-size: max(16px, 1.1vw) !important; padding: clamp(10px, 1vw, 20px) clamp(20px, 2vw, 40px) !important; border-width: 3px !important; } /* ========================================= IMAGE SCALING FIX: THE SPECIFICITY TRAP ========================================= */ /* 1. Force the invisible wrapper boxes to let the image grow */ div[data-element-id="elm_BYNHf-NIgKBVa2nGurjT3A"] .zpimage-container, div[data-element-id="elm_BYNHf-NIgKBVa2nGurjT3A"] figure, div[data-element-id="elm_BYNHf-NIgKBVa2nGurjT3A"] a, div[data-element-id="elm_BYNHf-NIgKBVa2nGurjT3A"] picture { width: 100% !important; max-width: 100% !important; display: block !important; } /* 2. Target Zoho's exact path and force the min-width to grow */ div[data-element-id="elm_BYNHf-NIgKBVa2nGurjT3A"] .zpimage-container figure img { width: clamp(312px, 25vw, 700px) !important; min-width: clamp(312px, 25vw, 700px) !important; /* CRITICAL: This forces the breakout */ max-width: none !important; height: auto !important; min-height: 10px !important; /* Crushes Zoho's hardcoded 400px height */ } } /* ========================================= CONTACT INFO ROW - FLUID SCALER (Laptops + Widescreens) ========================================= */ @media (min-width: 1024px) { /* 1. THE LAYOUT: Group them together in the center of the massive screen */ div[data-element-id="elm_2VmK0oZaI3T9F2b0qajqDQ"] { max-width: 1400px !important; /* Stops them from drifting to the extreme edges */ width: 100% !important; margin: 0 auto !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: flex-start !important; gap: 40px !important; /* Adds a nice wide gap between the two columns */ } /* 2. THE COLUMNS: Enforce a strict 50/50 split */ div[data-element-id="elm_FqwSjxxLy2J3T8ejUc7csw"], div[data-element-id="elm_WgkqN3apjchfb6fGpFjC3Q"] { flex: 1 1 50% !important; max-width: 50% !important; padding: 0 20px !important; } /* 3. FLUID TEXT & EMAIL SQUISH PREVENTION */ div[data-element-id="elm_K9vQ7KbdPWwKWUFv7akkbQ"] .zptext, div[data-element-id="elm_LammjZJ55_rBt77BVdsNvw"] .zptext, div[data-element-id="elm_K9vQ7KbdPWwKWUFv7akkbQ"] .zptext div, div[data-element-id="elm_LammjZJ55_rBt77BVdsNvw"] .zptext div, div[data-element-id="elm_K9vQ7KbdPWwKWUFv7akkbQ"] .zptext a, div[data-element-id="elm_LammjZJ55_rBt77BVdsNvw"] .zptext a { /* Scales smoothly from 16px on laptops up to 24px on your 39" monitor */ font-size: clamp(16px, 1.2vw, 24px) !important; line-height: 1.8 !important; /* The ultimate defense against email addresses breaking onto multiple lines */ word-break: normal !important; overflow-wrap: normal !important; white-space: nowrap !important; /* Physically forbids the emails from wrapping */ } } /* ========================================= HIDE "POWERED BY ZOHO SITES" BADGE ========================================= */ /* Targets the exact ID and any future variations of it */ a[id^="zspow-"] { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; pointer-events: none !important; }