/* jules-responsive-fix.css */ /* Responsive fixes for The-Jules.html page */ /* Align Description tag with Model Info tag */ .property-intro-section .w-layout-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } #w-node-_271ce805-76d8-e074-864b-58fdb6789dae-bd7278de { grid-row: 1; width: 100%; margin-bottom: 0; } #w-node-_3c71d515-9c7d-4b44-a3e3-bc151b668e54-bd7278de { grid-row: 2; } @media screen and (min-width: 768px) { .property-intro-section .w-layout-grid { grid-template-columns: 1fr 2fr; align-items: start; } #w-node-_271ce805-76d8-e074-864b-58fdb6789dae-bd7278de { position: sticky; top: 2rem; } #w-node-_3c71d515-9c7d-4b44-a3e3-bc151b668e54-bd7278de { grid-column: 2; grid-row: 1 / span 2; } } /* Base styles for all screen sizes */ .property-hero-section, .property-gallery-section, .property-info-section, .property-comment-section, .optional-section { width: 100%; overflow: hidden; } /* Fix for screens wider than 990px */ @media screen and (min-width: 991px) { /* Ensure consistent container width */ .default-wrap { max-width: 1440px; margin: 0 auto; width: 100%; padding-left: 2rem; padding-right: 2rem; box-sizing: border-box; } /* Fix for 12-column grid layout */ ._12-cols-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 2rem; box-sizing: border-box; } /* Fix for property item layouts */ .property-item-cms { max-width: 100%; margin: 0 auto; } /* Ensure images scale properly */ .img-cover, .img-cover-absolute { max-width: 100%; height: auto; object-fit: cover; } /* Fix for gallery grid */ .property-gallery-imgs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; width: 100%; } /* Fix for content sections */ .property-info-section .default-wrap, .property-comment-section .default-wrap, .optional-section .default-wrap { padding-top: 4rem; padding-bottom: 4rem; } /* Fix for text content */ .text-content { max-width: 800px; margin: 0 auto; } /* Ensure hero image scales correctly */ .property-hero-img-wrap .img-cover { width: 100%; height: auto; object-fit: cover; } /* Force Webflow grids back to CSS grid on large screens */ .property-intro-section .w-layout-grid, .property-infos-section .w-layout-grid, .property-gallery-section .w-layout-grid, .property-comment-section .w-layout-grid, .optional-section .w-layout-grid { display: grid !important; } /* Ensure 12-col grid really has 12 columns */ .property-intro-section ._12-cols-grid, .property-infos-section ._12-cols-grid, .property-gallery-section ._12-cols-grid, .property-comment-section ._12-cols-grid, .optional-section ._12-cols-grid { /* Use minmax(0,1fr) to avoid min-content sizing that can create tiny columns */ grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 2rem !important; } /* If grid still broken, fall back to normal block layout */ /* Enable the fallback only when the page explicitly opts in via .grid-fallback on */ .grid-fallback .property-intro-section ._12-cols-grid, .grid-fallback .property-infos-section ._12-cols-grid, .grid-fallback .property-gallery-section ._12-cols-grid, .grid-fallback .property-comment-section ._12-cols-grid, .grid-fallback .optional-section ._12-cols-grid { display: block !important; } /* Fix overly narrow intro paragraph */ #w-node-_3c71d515-9c7d-4b44-a3e3-bc151b668e54-bd7278de .intro-text-style { max-width: 60ch; /* comfortable reading width */ text-align: left; margin-left: 0; /* align with left grid edge */ } /* Stronger intro paragraph fix */ .property-intro-section .intro-text-style { max-width: 65ch !important; text-align: left !important; white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere; margin-top: 0 !important; /* ensure top aligns flush with tag */ } /* Improve model info grid distribution */ .property-infos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem 2rem; } /* Ensure tag-chip columns don't collapse */ .property-infos-grid .property-info-item { display: flex; flex-direction: column; gap: 0.25rem; } /* General paragraph/text fix inside property sections */ .property-comment-wrap .intro-text-style { max-width: 60ch; text-align: left; } /* Restore hero grid so heading positions correctly */ .property-hero-section ._12-cols-grid { display: grid !important; grid-template-columns: repeat(12, 1fr) !important; } /* Intro section: ensure description gets ample width, tag chip to the right */ .property-intro-section ._12-cols-grid { align-items: start; } /* Apply spans to the direct grid children (IDs from theJules.html) */ #w-node-_3c71d515-9c7d-4b44-a3e3-bc151b668e54-bd7278de { /* text column wrapper */ grid-column: 3 / span 9; /* start at col 3 for left-side tag chip */ align-self: start; } #w-node-_271ce805-76d8-e074-864b-58fdb6789dae-bd7278de { /* tag chip wrapper */ grid-column: 1 / span 2; /* move tag to left */ justify-self: start; align-self: start; /* align top */ } /* ===== Photo Gallery Styles ===== */ .property-gallery-section { padding: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; background-color: inherit !important; } /* Grid container */ .property-gallery-section .default-wrap { max-width: 1800px !important; margin: 0 auto !important; padding: 0 2rem 3rem 2rem !important; width: 100% !important; background: inherit !important; } .property-gallery-section ._12-cols-grid { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: inherit !important; } /* Gallery items */ .property-gallery-section .property-gallery-imgs-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 1.5rem !important; margin: 0 auto !important; max-width: 1400px !important; padding: 0 0 2rem 0 !important; width: 100% !important; } .property-gallery-section .property-gallery-img-item { position: relative !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; } /* Image container */ .property-gallery-section .gallery-img-wrap { position: relative !important; width: 100% !important; max-width: 100% !important; height: 0 !important; padding-bottom: 56.25% !important; /* 16:9 aspect ratio */ margin: 0 !important; overflow: hidden !important; background: transparent !important; border-radius: 8px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important; border: 1px solid rgba(0,0,0,0.05) !important; } /* Images */ .property-gallery-section .gallery-img-wrap img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; padding: 1rem !important; margin: 0 !important; background: white !important; transition: transform 0.3s ease !important; border-radius: 4px !important; } /* Hover effects */ .property-gallery-section .property-gallery-img-item:hover { transform: none !important; box-shadow: none !important; } .property-gallery-section .property-gallery-img-item:hover .gallery-img-wrap img { transform: none !important; } /* Image info */ .property-gallery-section .gallery-img-infos-wrap { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); color: white; padding: 2rem 1.5rem 1.5rem; opacity: 0; transition: opacity 0.3s ease; } .property-gallery-section .property-gallery-img-item:hover .gallery-img-infos-wrap { opacity: 1; } /* Responsive adjustments */ @media (min-width: 992px) { .property-gallery-section .property-gallery-imgs-grid { gap: 2rem !important; padding: 0 0 4rem 0 !important; } .property-gallery-section .gallery-img-wrap { border-radius: 12px !important; } /* Make portrait images taller */ .property-gallery-section .gallery-img-wrap[style*="aspect-ratio: 3/4"], .property-gallery-section .gallery-img-wrap[style*="aspect-ratio: 2/3"] { padding-bottom: 133.33% !important; } /* Make square images square */ .property-gallery-section .gallery-img-wrap[style*="aspect-ratio: 1/1"] { padding-bottom: 100% !important; } /* Hover effects for desktop */ .property-gallery-section .property-gallery-img-item:hover .gallery-img-wrap img { transform: none !important; } } @media (max-width: 991px) { .property-gallery-section { padding: 1.5rem 0 !important; } .property-gallery-section .default-wrap { padding: 0 1rem !important; } .property-gallery-section .property-gallery-imgs-grid { gap: 3rem !important; padding: 0 0 3rem 0 !important; } .property-gallery-section .gallery-img-wrap { padding-bottom: 75% !important; border-radius: 8px !important; } .property-gallery-section .gallery-img-wrap img { padding: 0.75rem !important; } } /* Force clear any floats that might be breaking the layout */ .property-gallery-section:after { content: ""; display: table; clear: both; } /* Ensure images maintain their aspect ratio */ .property-gallery-section .gallery-img-wrap img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; position: absolute !important; top: 0 !important; left: 0 !important; } /* Keep the debug styles but commented out for future reference */ /* .property-gallery-section { border: 2px solid red !important; } .property-gallery-section ._12-cols-grid { border: 2px solid blue !important; } .property-gallery-section .property-gallery-img-item { border: 2px solid green !important; } .property-gallery-section .gallery-img-wrap { border: 2px solid purple !important; } .property-gallery-section .img-parallax { border: 2px solid orange !important; } */ /* ===== Photo Gallery section: left tag, right items ===== */ .property-gallery-section ._12-cols-grid { align-items: start; } /* Tag chip (first child in grid) */ .property-gallery-section ._12-cols-grid > div:first-child { grid-column: 1 / span 2; justify-self: start; align-self: start; } /* Force single column layout for gallery items (desktop) */ .property-gallery-section ._12-cols-grid > .property-gallery-img-item { align-self: start !important; grid-column: 3 / span 8 !important; margin-bottom: 3rem !important; width: 100% !important; max-width: none !important; } /* Force images to fill their container */ .property-gallery-img-item .gallery-img-wrap { width: 100% !important; max-width: 100% !important; overflow: hidden !important; display: block !important; } /* Force larger images with maintained aspect ratio */ .property-gallery-section .property-gallery-img-item .gallery-img-wrap img { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: 80vh !important; object-fit: contain !important; object-position: center !important; display: block !important; margin: 0 auto !important; transition: transform 0.3s ease !important; } /* Add hover effect for better interaction */ .property-gallery-img-item:hover .gallery-img-wrap img { transform: scale(1.02); } .property-gallery-section .gallery-img-infos-wrap { width: 100%; } /* Remove decorative backdrop inside gallery items */ .property-gallery-section .text-color-background { display: none !important; } /* Remove the fixed gallery callout panel entirely */ .fixed-callout-panel { display: none !important; } /* Explicitly hide the provided Webflow node id */ #w-node-a838b4be-dc78-36d9-518f-d830f749a609-bd7278de { display: none !important; } /* ===== Model Info section: left tag, right grid ===== */ .property-infos-section ._12-cols-grid { align-items: start; } /* Tag: "Model Info" */ #w-node-_34f0891c-f826-3d74-4569-5c3b63172fe5-bd7278de { grid-column: 1 / span 2; justify-self: start; align-self: start; } /* Content grid of specs */ #w-node-_0f027b5a-ebfb-2a66-fbb9-ca96e377b8ad-bd7278de { grid-column: 3 / span 9; align-self: start; } /* ===== Founder Comment section: left tag, right content ===== */ .property-comment-section ._12-cols-grid { align-items: start; } /* Tag: "Words from our Founder" */ #w-node-_1aeb1252-2262-6c1d-fbdb-4420c3ed998a-bd7278de { grid-column: 1 / span 2; justify-self: start; align-self: start; } /* Comment content wrapper */ #w-node-_0cd44a44-3407-1822-8fe3-4c5143d2f705-bd7278de { grid-column: 3 / span 9; align-self: start; } /* Hide the green icon column next to the tag chip */ .property-comment-icon-wrap { display: none !important; } /* Remove left padding that reserved space for the icon */ .property-comment-btm-wrap { padding-left: 0 !important; } /* hero heading + scroll icon inline */ .property-hero-section ._12-cols-grid.div-hide { display: flex !important; align-items: flex-end; gap: 2rem; } /* refine hero row spacing */ .property-hero-section ._12-cols-grid.div-hide { gap: 3rem; padding-top: 2rem; } .property-hero-section h1 { margin: 0 !important; } /* tidy 2-line heading */ .property-hero-section h1 { max-width: 14ch; white-space: normal; } /* Minimal tweak: keep hero grid block but give heading some left margin */ .property-hero-section h1 { color: #000 !important; position: relative !important; z-index: 5 !important; } /* scale & align scroll icon */ /* …if you only want the icon bottom-aligned, leave the row at center and do it per-element instead: */ .property-hero-section .button-icon{ align-self:flex-end; /* sits on the row's bottom */ } /* ensure wrappers don't clip heading */ .property-hero-section .div-hide { overflow: visible !important; } } /* Additional responsive fixes for very large screens */ @media screen and (min-width: 1600px) { .default-wrap { max-width: 1600px; } .property-hero-section h1 { font-size: 8rem; } } /* Fix for menu and navigation */ .menu { position: relative; z-index: 1000; } /* Ensure proper spacing for fixed elements */ body { padding-top: 0; /* Header is not fixed on this page; remove extra top whitespace */ } /* Fix for footer positioning */ .footer { margin-top: auto; } /* ===== Spacing cleanup: consistent vertical rhythm ===== */ /* Desktop defaults (exclude gallery to avoid large gap) */ .property-hero-section, .property-intro-section, .property-infos-section, /* .property-gallery-section, */ .property-comment-section, .optional-section { padding-top: 4rem; padding-bottom: 4rem; } /* Slightly larger bottom space after hero for visual separation */ .property-hero-section { padding-bottom: 6rem; } /* Tighten grid gaps a touch on desktop for cleaner look */ @media screen and (min-width: 991px) { ._12-cols-grid { gap: 1.5rem; } } /* Tablet spacing (exclude gallery) */ @media screen and (min-width: 768px) and (max-width: 990px) { .property-hero-section, .property-intro-section, .property-infos-section, .property-comment-section, .optional-section { padding-top: 3rem; padding-bottom: 3rem; } ._12-cols-grid { gap: 1.25rem; } /* Stack intro section columns on tablet */ #w-node-_3c71d515-9c7d-4b44-a3e3-bc151b668e54-bd7278de, #w-node-_271ce805-76d8-e074-864b-58fdb6789dae-bd7278de, /* Stack Model Info section */ #w-node-_34f0891c-f826-3d74-4569-5c3b63172fe5-bd7278de, #w-node-_0f027b5a-ebfb-2a66-fbb9-ca96e377b8ad-bd7278de, /* Stack Founder Comment section */ #w-node-_1aeb1252-2262-6c1d-fbdb-4420c3ed998a-bd7278de, #w-node-_0cd44a44-3407-1822-8fe3-4c5143d2f705-bd7278de { grid-column: 1 / -1; } /* Photo Gallery: stack items full width on tablet */ .property-gallery-section ._12-cols-grid > .property-gallery-img-item { grid-column: 1 / -1 !important; margin-bottom: 2rem; } /* Adjust image size on tablet */ .property-gallery-section .property-gallery-img-item .img-parallax { max-height: 70vh; } } /* Mobile spacing (exclude gallery) */ @media screen and (max-width: 767px) { .property-hero-section, .property-intro-section, .property-infos-section, .property-comment-section, .optional-section { padding-top: 2rem; padding-bottom: 2rem; } ._12-cols-grid { gap: 1rem; } /* Stack intro section columns on mobile */ #w-node-_3c71d515-9c7d-4b44-a3e3-bc151b668e54-bd7278de, #w-node-_271ce805-76d8-e074-864b-58fdb6789dae-bd7278de, /* Stack Model Info section */ #w-node-_34f0891c-f826-3d74-4569-5c3b63172fe5-bd7278de, #w-node-_0f027b5a-ebfb-2a66-fbb9-ca96e377b8ad-bd7278de, /* Stack Founder Comment section */ #w-node-_1aeb1252-2262-6c1d-fbdb-4420c3ed998a-bd7278de, #w-node-_0cd44a44-3407-1822-8fe3-4c5143d2f705-bd7278de { grid-column: 1 / -1; } }