/* ========================================= leadgen-themes.css (attach one of these to ) ========================================= */ /* ===== SurePLUS ===== */ .theme-sureplus{ /* Brand */ --brand-primary: #aa1f2e; --brand-primary-2: #ac1a2d; --brand-accent: #b0c1dc; /* Hero artwork (desktop/tablet) */ --hero-bg: url(../images/sureplus-bg.jpg?2); --hero-bg-color: #9a6ac7; --hero-bg-size: cover; --hero-bg-position: bottom right; /* PNG layers (desktop defaults) */ /* Layer 1 (id="heroImage") */ --hero-img-height: 70vh; --hero-img-padding-top: 10vh; /* Layer 2 (id="heroImage-layer2") */ --sp-layer2-height: 25vh; --sp-layer2-top: 12vh; /* ------- MOBILE CONTROLS (SurePLUS) ------- */ --sp-layer1-height-mobile: 40vh; /* main KV height */ --sp-layer2-height-mobile: 22vh; /* back PNG height */ --sp-layer2-top-mobile: 0vh; /* pinned at very top */ --sp-footer-bottom-mobile: 15vh;/* footer lift from bottom */ } /* Layered KV structure */ .theme-sureplus #heroImageContainerInner{ position: relative; } /* Foreground PNG (layer 1) – desktop */ .theme-sureplus #heroImage{ position: relative; z-index: 2; } /* Back PNG (layer 2) – desktop (centered by default) */ .theme-sureplus #heroImage-layer2{ position: absolute; left: 0; top:0; height: var(--sp-layer2-height); width: auto; z-index: 1; } .theme-sureplus #heroImageContainerInner .footer{ margin-top: 5vh; } /* ===== Asli ===== */ .theme-asli{ /* Brand */ --brand-primary: #aa1f2e; --brand-primary-2: #ac1a2d; --brand-accent: #b0c1dc; /* Hero artwork (desktop/tablet) */ --hero-bg: url(../images/dugro-asli-bg_v2.jpg?9); --hero-bg-color: #4dae4c; --hero-bg-size: 100% auto; --hero-bg-position: bottom center; /* Hero image sizing (desktop/tablet) */ --hero-img-height: 70vh; --hero-img-padding-top: 10vh; /* Hero footer block (desktop/tablet) */ --hero-footer-width: 40%; --hero-footer-ml: 20%; /* Mobile tuning */ --hero-mobile-height: 64vh; --hero-mobile-bg-shift: 8vh; /* only used if reverting to desktop bg */ --hero-mobile-img-pt: 14vh; /* base top padding for #heroImage */ --hero-mobile-footer-bottom: 1.5vh; /* footer gap on mobile */ /* Optional small nudge for mobile PNG */ --kv-shift-mobile: 1vh; } /* Ensure footer can be absolutely placed inside the hero */ .theme-asli #heroImageContainerInner{ position: relative; } /* Footer: black text and placed below the CTA */ .theme-asli #heroImageContainerInner .footer{ color:#000; position:absolute; left:0; right:0; bottom:2vh; /* desktop/tablet default */ width:60%; margin:0 auto; text-align:center; line-height:1.2; font-size:10px; } /* ================================ Mobile overrides ================================ */ @media (max-width: 767px){ /* ---------- SUREPLUS ---------- */ /* Expand hero by +20vh for breathing room */ .theme-sureplus #heroImageContainerInner{ position: relative; height: calc(85vh); background-image: var(--hero-bg); background-size: var(--hero-bg-size); background-position: var(--hero-bg-position); } /* Layer 1: center both axes, height = 40vh */ .theme-sureplus #heroImage{ position: absolute; top:43%; left: 50%; height: var(--sp-layer1-height-mobile); width: auto; padding-top: 0 !important; transform: translate(-50%, -50%) !important; z-index: 2; } /* Layer 2: pin to top-left, height = 20vh */ .theme-sureplus #heroImage-layer2{ position: absolute; top: var(--sp-layer2-top-mobile); left: 0; /* << top-left */ right: auto !important; transform: none !important; height: var(--sp-layer2-height-mobile); width: auto; z-index: 1; pointer-events: none; } /* Footer: 20vh above bottom, centered */ .theme-sureplus #heroImageContainerInner .footer{ position: absolute; left: 50%; bottom:10vh; transform: translateX(-50%); bottom: var(--sp-footer-bottom-mobile); width: 70%; text-align: center; } /* ---------- ASLI ---------- */ .theme-asli #heroImageContainerInner{ height: var(--hero-mobile-height); background-image: url(../images/dugro-asli-bg_mobile_v2.jpg); background-size: cover; background-position: center bottom; position: relative; } /* Optional nudge of the PNG upward */ .theme-asli #heroImage{ width:100%; padding-top: 0 !important; transform: translateY(calc(-1 * var(--kv-shift-mobile))); } /* Ensure container remains tall enough after the nudge */ .theme-asli #heroImageContainerInner{ height: calc(var(--hero-mobile-height) + var(--kv-shift-mobile)); } /* Footer sits just under the CTA area */ .theme-asli #heroImageContainerInner .footer{ bottom: var(--hero-mobile-footer-bottom); width: 70%; margin: 0 auto; } } /* Optional retina source for the Asli mobile bg */ @media (max-width: 767px){ @supports (background-image: image-set(url("") 1x)){ .theme-asli #heroImageContainerInner{ background-image: image-set( url(../images/dugro-asli-bg_mobile_v2.jpg) 1x, url(../images/dugro-asli-bg_mobile_v2@2x.jpg) 2x ); } } }