/* ========================================================================== ICE CLIM — Contact variant overrides Loaded AFTER assets/css/landing.css. Does not modify the approved base. ========================================================================== Goal: replace the current fixed .bottom-cta (inside .page) with a NEW in-flow .iceclim-bottom-contact block that lives OUTSIDE .page. Visibility controlled per container width, never covers main content, never pushes .btn--submit below the fold. ========================================================================== *//* Neutralize the base fixed bottom-cta — never used in this variant. */.iceclim-landing-shell .bottom-cta { display: none !important; }/* -------------------------------------------------------------------------- .iceclim-landing-shell — wraps
and the new
Also holds container queries used to reveal the contact block. -------------------------------------------------------------------------- */.iceclim-landing-shell { width: 100%; max-width: 430px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; background: #FFFFFF; container-type: inline-size; container-name: iceclim-landing-shell; }/* .page inside .iceclim-landing-shell drops its own centering / height caps so .iceclim-landing-shell owns them */.iceclim-landing-shell > .page { margin: 0 !important; max-width: none !important; flex: 0 0 100dvh; height: 100dvh; max-height: 100dvh; }/* -------------------------------------------------------------------------- .iceclim-bottom-contact — secondary, in-flow (not fixed). Sits BELOW .page (100dvh) so it never pushes main content up. Users may need a small scroll to see it on wider phones; that matches the spec: contact is a bonus, submit is the priority. -------------------------------------------------------------------------- */.iceclim-landing-shell .iceclim-bottom-contact { display: block; position: static; flex: 0 0 auto; padding: 16px 20px 20px; background: #061827; color: #FFFFFF; text-align: center; }.iceclim-landing-shell .iceclim-bottom-contact__lead { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: #CBD5E1; margin: 0 0 10px; text-transform: uppercase; }.iceclim-landing-shell .iceclim-bottom-contact__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.iceclim-landing-shell .iceclim-bottom-contact__btn { height: 52px; border-radius: 12px; color: #FFFFFF; display: flex; align-items: center; justify-content: center; gap: 8px; transition: filter 0.1s ease, transform 0.1s ease; text-decoration: none; }.iceclim-landing-shell .iceclim-bottom-contact__btn:active { transform: scale(0.98); filter: brightness(0.95); }.iceclim-landing-shell .iceclim-bottom-contact__btn--call { background: #FF5A0A; box-shadow: 0 4px 12px rgba(255,90,10,0.30); }.iceclim-landing-shell .iceclim-bottom-contact__btn--wa { background: #25D366; box-shadow: 0 4px 12px rgba(37,211,102,0.30); }.iceclim-landing-shell .iceclim-bottom-contact__btn svg { flex-shrink: 0; }.iceclim-landing-shell .iceclim-bottom-contact__btn span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }.iceclim-landing-shell .iceclim-bottom-contact__btn strong { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; }.iceclim-landing-shell .iceclim-bottom-contact__btn em { font-style: normal; font-size: 11px; font-weight: 500; opacity: 0.9; }.iceclim-landing-shell .iceclim-bottom-contact__btn--wa span { align-items: center; flex-direction: row; }.iceclim-landing-shell .iceclim-bottom-contact__btn--wa strong { font-size: 14px; }/* -------------------------------------------------------------------------- Visibility rules — VIEWPORT @media (immune to WP theme wrappers). Per new spec: contact is ALWAYS visible below .page, on all viewports (320/360/375 included). It is in-flow (not fixed), so it never pushes the submit button and never covers content — user reaches it by scroll. -------------------------------------------------------------------------- */.iceclim-landing-shell .iceclim-bottom-contact { display: block; }/* Compact styling for small phones (≤ 389px): smaller lead, tighter padding, shorter button height. Preserves colors, radius, layout — visual language unchanged. */@media (max-width: 389px) {.iceclim-landing-shell .iceclim-bottom-contact { padding: 12px 14px 16px; }.iceclim-landing-shell .iceclim-bottom-contact__lead { font-size: 11.5px; margin: 0 0 8px; letter-spacing: 0.03em; }.iceclim-landing-shell .iceclim-bottom-contact__buttons { gap: 8px; }.iceclim-landing-shell .iceclim-bottom-contact__btn { height: 46px; border-radius: 10px; gap: 6px; }.iceclim-landing-shell .iceclim-bottom-contact__btn strong { font-size: 12px; }.iceclim-landing-shell .iceclim-bottom-contact__btn em { font-size: 10px; }.iceclim-landing-shell .iceclim-bottom-contact__btn svg { width: 16px; height: 16px; }}/* Extra breathing room on the largest phones */@media (min-width: 414px) {.iceclim-landing-shell .iceclim-bottom-contact { padding: 18px 22px 24px; }.iceclim-landing-shell .iceclim-bottom-contact__btn { height: 56px; }.iceclim-landing-shell .iceclim-bottom-contact__lead { font-size: 14px; }}/* -------------------------------------------------------------------------- .lower — moved OUT of .page in the template so it flows in the shell, below the 100dvh conversion area. Visibility gated by viewport width, not container height (real Android/Chrome browser UI eats dvh height). -------------------------------------------------------------------------- */ /* rollback: .lower is back INSIDE .page — these rules are inert (kept for safety; the `.iceclim-landing-shell > .lower` selector no longer matches). *//* -------------------------------------------------------------------------- Desktop centering — .iceclim-landing-shell is the new centered card, not .page. Override the base landing.css rule so it doesn't apply to the inner .page. -------------------------------------------------------------------------- */@media (min-width: 431px) {/* dropped: body */ .iceclim-landing-shell { max-width: 430px; margin: 30px auto 40px !important; box-shadow: 0 20px 60px rgba(6, 24, 39, 0.12); border-radius: 24px; overflow: hidden; min-height: 0; }.iceclim-landing-shell > .page { box-shadow: none !important; border-radius: 0 !important; height: min(100dvh, 900px) !important; max-height: 900px !important; flex: 0 0 auto !important; }} /* -------------------------------------------------------------------------- Gap fix (v1.1.1) — remove the 100dvh height lock on .page so the contact block sits immediately below the form content on tall real phones. -------------------------------------------------------------------------- */ @media (max-width: 430px) { .iceclim-landing-shell > .page { flex: 0 0 auto !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; container-type: inline-size !important; } .iceclim-landing-shell .form-wrap { flex: 0 0 auto !important; overflow: visible !important; } .iceclim-landing-shell .form { flex: 0 0 auto !important; overflow: visible !important; } .iceclim-landing-shell .btn--submit { margin-top: 8px !important; } .iceclim-landing-shell .lower { display: none; } } @media (min-width: 390px) and (max-width: 430px) { .iceclim-landing-shell .lower { display: flex; } }