/* ========================================================================== ICE CLIM — Responsive v1.1.2 (WordPress plugin) PURPOSE: additive tablet / laptop / desktop / wide-desktop layers. STRATEGY: wrapper-scoped ONLY. Zero body selectors. Zero body_class. The shell becomes the responsive stage; the ambient panel is a pseudo-element of the shell (.iceclim-landing-shell::before). LOADS AFTER: landing.css + variant.css. MOBILE PROTECTION: every rule starts at min-width: 431px. Nothing under 431 px is affected → mobile v1.1.1 is byte-identical. ========================================================================== */ /* -------------------------------------------------------------------------- Shared 431+ override: the interactive card sheds its mobile fixed-height model so it can flow naturally inside the tablet/desktop stage. -------------------------------------------------------------------------- */ @media (min-width: 431px) { .iceclim-landing-shell > .page { height: auto !important; min-height: 0 !important; max-height: none !important; } } /* -------------------------------------------------------------------------- 431 – 767 Large mobile / foldable / small tablet portrait Single-column card, centered on a soft grey backdrop. Safe sizing: max-width: min(430px, calc(100vw - 24px)). -------------------------------------------------------------------------- */ @media (min-width: 431px) and (max-width: 767px) { .iceclim-landing-shell { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 24px 12px !important; background: #EEF2F7 !important; box-sizing: border-box !important; min-height: 100dvh !important; } .iceclim-landing-shell > .page { width: 100% !important; max-width: min(430px, calc(100vw - 24px)) !important; margin: 0 auto !important; box-sizing: border-box !important; border-radius: 28px !important; overflow: hidden !important; box-shadow: 0 22px 56px rgba(6, 24, 39, 0.12) !important; } .iceclim-landing-shell > .iceclim-bottom-contact { width: 100% !important; max-width: min(430px, calc(100vw - 24px)) !important; margin: 0 auto !important; box-sizing: border-box !important; } } /* -------------------------------------------------------------------------- 768 – 1023 Tablet portrait / small landscape Wider card (up to 460), roomier margins. -------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) { .iceclim-landing-shell { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 40px 24px !important; background: #EEF2F7 !important; box-sizing: border-box !important; min-height: 100dvh !important; } .iceclim-landing-shell > .page { width: 100% !important; max-width: min(460px, calc(100vw - 48px)) !important; margin: 0 auto !important; box-sizing: border-box !important; border-radius: 32px !important; overflow: hidden !important; box-shadow: 0 26px 66px rgba(6, 24, 39, 0.14) !important; } .iceclim-landing-shell > .iceclim-bottom-contact { width: 100% !important; max-width: min(460px, calc(100vw - 48px)) !important; margin: 0 auto !important; box-sizing: border-box !important; } } /* -------------------------------------------------------------------------- 1024+ Tablet landscape / laptop / desktop — 2-column composition Ambient panel LEFT (::before, decorative, pointer-events:none) — card RIGHT. Shell is a full-width backdrop; content centered via padding-inline. -------------------------------------------------------------------------- */ @media (min-width: 1024px) { .iceclim-landing-shell { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 60px max(40px, calc((100% - 1180px) / 2)) !important; background: #EEF2F7 !important; box-sizing: border-box !important; min-height: 100dvh !important; display: grid !important; grid-template-columns: minmax(360px, 1fr) minmax(420px, 460px) !important; grid-template-rows: auto auto !important; gap: 20px 48px !important; align-items: start !important; } .iceclim-landing-shell::before { content: "" !important; display: block !important; grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: stretch !important; width: 100% !important; min-height: 720px !important; border-radius: 32px !important; background: linear-gradient(135deg, rgba(6, 24, 39, 0.86) 0%, rgba(6, 24, 39, 0.50) 55%, rgba(6, 24, 39, 0.30) 100%), url('../images/iceclim-hero-mobile-crop-860x480.jpg') center center / cover !important; background-color: #061827 !important; box-shadow: 0 30px 80px rgba(6, 24, 39, 0.20) !important; pointer-events: none !important; } .iceclim-landing-shell > .page { grid-column: 2 !important; grid-row: 1 !important; width: 100% !important; max-width: 460px !important; margin: 0 !important; justify-self: end !important; box-shadow: 0 30px 80px rgba(6, 24, 39, 0.18) !important; border-radius: 32px !important; overflow: hidden !important; box-sizing: border-box !important; } .iceclim-landing-shell > .iceclim-bottom-contact { grid-column: 2 !important; grid-row: 2 !important; width: 100% !important; max-width: 460px !important; margin: 0 !important; justify-self: end !important; box-sizing: border-box !important; } } /* -------------------------------------------------------------------------- 1440+ Desktop — wider container, slightly larger card. -------------------------------------------------------------------------- */ @media (min-width: 1440px) { .iceclim-landing-shell { padding: 80px max(48px, calc((100% - 1240px) / 2)) !important; grid-template-columns: minmax(400px, 1fr) minmax(460px, 500px) !important; gap: 24px 64px !important; } .iceclim-landing-shell::before { min-height: 780px !important; border-radius: 36px !important; } .iceclim-landing-shell > .page, .iceclim-landing-shell > .iceclim-bottom-contact { max-width: 500px !important; border-radius: 36px !important; } } /* -------------------------------------------------------------------------- 1920+ Wide desktop — container capped; excess width goes to backdrop. -------------------------------------------------------------------------- */ @media (min-width: 1920px) { .iceclim-landing-shell { padding: 100px max(56px, calc((100% - 1360px) / 2)) !important; grid-template-columns: minmax(420px, 1fr) minmax(480px, 520px) !important; gap: 24px 80px !important; } .iceclim-landing-shell::before { min-height: 820px !important; border-radius: 40px !important; } .iceclim-landing-shell > .page, .iceclim-landing-shell > .iceclim-bottom-contact { max-width: 520px !important; border-radius: 40px !important; } }