/* ================================================================ responsive.css v4 — SDB+D mobile layer, HOMEPAGE ONLY 10-photo Ken Burns rotation, 9s per photo (90s cycle). Pure CSS, no JavaScript. Desktop/tablet (768px+) unaffected. v4 FIX: v3 shipped corrupted animation delays (duplicates plus three dead windows) which let the base image show through between slides. Delays are now generated as an exact arithmetic sequence, and each slide HOLDS at full opacity until the next has finished fading in on top of it — so the base is never exposed mid-cycle. ================================================================ */ @media only screen and (max-width: 767px) { /* ---- Hero stage ---- */ .slider_bg { top: 0 !important; height: 55vw !important; max-height: 280px; background: url(../images/slider_1.jpg) center center / cover no-repeat !important; overflow: hidden !important; position: relative !important; } .slider_bg .slider, .slider_bg #nav, .slider_bg .banner { display: none !important; } /* ---- Ken Burns layers ---- */ .kb { display: block !important; position: absolute; top:0; right:0; bottom:0; left:0; } .kb-s { position: absolute; top:0; right:0; bottom:0; left:0; background-position: center center; background-size: cover; background-repeat: no-repeat; opacity: 0; animation-duration: 90s, 90s; -webkit-animation-duration: 90s, 90s; animation-timing-function: linear, linear; -webkit-animation-timing-function: linear, linear; animation-iteration-count: infinite, infinite; -webkit-animation-iteration-count: infinite, infinite; animation-fill-mode: both, both; -webkit-animation-fill-mode: both, both; will-change: opacity, transform; } .kb-s1 { background-image: url(../images/slider_1.jpg); animation-name: kbFade, kbZoomIn; animation-delay: 0s, 0s; } .kb-s2 { background-image: url(../images/slider_2.jpg); animation-name: kbFade, kbZoomOut; animation-delay: 9s, 9s; } .kb-s3 { background-image: url(../images/slider_3.jpg); animation-name: kbFade, kbZoomIn; animation-delay: 18s, 18s; } .kb-s4 { background-image: url(../images/slider_4.jpg); animation-name: kbFade, kbZoomOut; animation-delay: 27s, 27s; } .kb-s5 { background-image: url(../images/slider_5.jpg); animation-name: kbFade, kbZoomIn; animation-delay: 36s, 36s; } .kb-s6 { background-image: url(../images/slider_6.jpg); animation-name: kbFade, kbZoomOut; animation-delay: 45s, 45s; } .kb-s7 { background-image: url(../images/slider_7.jpg); animation-name: kbFade, kbZoomIn; animation-delay: 54s, 54s; } .kb-s8 { background-image: url(../images/slider_8.jpg); animation-name: kbFade, kbZoomOut; animation-delay: 63s, 63s; } .kb-s9 { background-image: url(../images/slider_9.jpg); animation-name: kbFade, kbZoomIn; animation-delay: 72s, 72s; } .kb-s10 { background-image: url(../images/slider_10.jpg); animation-name: kbFade, kbZoomOut; animation-delay: 81s, 81s; } /* Fade in over 2.0% (1.8s), hold through the NEXT slide's fade-in (10.0% + 2.0%), then fade out while fully covered. */ @keyframes kbFade { 0% { opacity: 0; } 2.0% { opacity: 1; } 12.0% { opacity: 1; } 14.0% { opacity: 0; } 100% { opacity: 0; } } @keyframes kbZoomIn { 0% { transform: scale(1) translateX(0); } 14.0% { transform: scale(1.12) translateX(-2%); } 100% { transform: scale(1.12) translateX(-2%); } } @keyframes kbZoomOut { 0% { transform: scale(1.12) translateX(2%); } 14.0% { transform: scale(1) translateX(0); } 100% { transform: scale(1) translateX(0); } } @media (prefers-reduced-motion: reduce) { .kb-s { animation-name: kbFade; transform: none; } } /* ---- Close the old slider's spacing gap ---- */ #page1 #content { padding-top: 24px !important; } /* ---- Fluid widths for modern phones ---- */ .main { width: 94% !important; } .container_12 { width: 100% !important; } .container_12 .grid_1, .container_12 .grid_2, .container_12 .grid_3, .container_12 .grid_4, .container_12 .grid_5, .container_12 .grid_6, .container_12 .grid_7, .container_12 .grid_8, .container_12 .grid_9, .container_12 .grid_10, .container_12 .grid_11, .container_12 .grid_12 { width: 100% !important; } #content img, footer img { max-width: 100%; height: auto; } /* ================= new homepage lead block ================= */ /* Template pushed content 230px down to clear the tall slider. With the short mobile hero that becomes dead space. */ /* Template pins the header to 755px for the old 604px desktop slider; on a phone that leaves ~140px of dead space below the short hero. Let the header size to its contents instead. */ #page1 header { height: auto !important; } #page1 #content { padding-top: 0 !important; } #page1 .bg-1 > div { padding-top: 0 !important; } /* reveal the mobile-only blocks — flex containers keep flex */ .sdb-lead, .sdb-ba-wrap { display:block !important; } .sdb-nums, .sdb-phases { display:flex !important; } .sdb-lead { padding: 20px 18px 2px; } .sdb-tag { color:#fff; font-size:19px; line-height:1.42; margin:0 0 9px; } .sdb-tag span { color:#C5A55A; } .sdb-sub { color:#c9c6bf; font-size:13px; line-height:1.62; margin:0; } .sdb-nums { display:flex; margin:18px 0 0; border-top:1px solid #4a4a4a; border-bottom:1px solid #4a4a4a; } .sdb-nums div { flex:1; text-align:center; padding:16px 4px; border-right:1px solid #4a4a4a; } .sdb-nums div:last-child { border-right:0; } .sdb-nums b { display:block; color:#D9BC72; font-size:30px; font-weight:700; line-height:1.15; letter-spacing:.5px; } .sdb-nums span { display:block; color:#b3afa7; font-size:11px; margin-top:5px; letter-spacing:.7px; text-transform:uppercase; } .sdb-phases { display:flex; align-items:center; justify-content:space-between; padding:15px 18px 4px; } .sdb-phases span { color:#e6e3dc; font-size:11.5px; letter-spacing:.7px; } .sdb-phases i { color:#C5A55A; font-style:normal; font-size:15px; } /* ================= raw land to finished home ================= */ .sdb-ba-wrap { padding:20px 18px 6px; } .sdb-ba-h { color:#fff; font-size:14px; margin:0 0 9px; letter-spacing:.3px; } .sdb-ba { position:relative; width:100%; overflow:hidden; border-radius:4px; cursor:ew-resize; -webkit-user-select:none; user-select:none; touch-action:pan-y; line-height:0; } .sdb-ba img { display:block; width:100%; height:auto; } /* soft blend: the "after" image dissolves across a band that travels with the line, instead of a hard cut */ .sdb-ba .sdb-ba-a { position:absolute; top:0; left:0; -webkit-mask-image:linear-gradient(to right, transparent 43%, #000 57%); mask-image:linear-gradient(to right, transparent 43%, #000 57%); } /* gold haze marking where the change is happening */ .sdb-ba-glow { position:absolute; top:-10%; bottom:-10%; left:50%; width:64px; transform:translateX(-50%); pointer-events:none; background:radial-gradient(ellipse at center, rgba(197,165,90,.55) 0%, rgba(197,165,90,.18) 45%, transparent 72%); -webkit-filter:blur(9px); filter:blur(9px); } /* residential / commercial tabs */ .sdb-tabs { display:flex; margin:0 0 10px; border-bottom:1px solid #3d3d3d; } .sdb-tab { flex:1; text-align:center; padding:9px 4px; font-size:11px; letter-spacing:.7px; color:#8a8a8a; background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; font-family:inherit; cursor:pointer; -webkit-appearance:none; } .sdb-tab.sdb-on { color:#C5A55A; border-bottom-color:#C5A55A; } .sdb-ba-line { position:absolute; top:0; bottom:0; width:2px; background:#C5A55A; left:50%; } .sdb-ba-knb { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%; background:#C5A55A; color:#1a1a1a; font-size:13px; line-height:30px; text-align:center; } .sdb-ba-tag { position:absolute; bottom:9px; font-size:9.5px; letter-spacing:1.1px; font-style:normal; font-weight:700; line-height:1.2; color:#fff; background:rgba(0,0,0,.58); padding:4px 9px; border-radius:3px; } .sdb-ba-l { left:9px; } .sdb-ba-r { right:9px; } .sdb-ba-n { color:#8a8a8a; font-size:11px; margin:8px 0 0; } /* below-grade link styled as a button: centred, 52px tap target, filled gold arrow circle. Arrow drifts to signal it navigates. */ .sdb-bg-link { position:relative; display:flex; align-items:center; justify-content:center; min-height:52px; margin:10px 0 2px; padding:12px 54px 12px 16px; border:1px solid #6a5a33; border-radius:4px; color:#D9BC72 !important; font-size:13px; font-weight:600; letter-spacing:.3px; line-height:1.35; text-align:center; text-decoration:none; background:rgba(197,165,90,.07); -webkit-tap-highlight-color:rgba(197,165,90,.2); } .sdb-bg-knb { position:absolute; right:11px; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:50%; background:#D9BC72; color:#1f1a10; font-size:15px; line-height:30px; text-align:center; font-weight:700; } .sdb-bg-knb > span { display:inline-block; animation:sdbNudge 2.2s ease-in-out infinite;-webkit-animation:sdbNudge 2.2s ease-in-out infinite; } @keyframes sdbNudge { 0%,100%{transform:translateX(0)} 50%{transform:translateX(4px)} } /* sheen: a soft gold highlight crossing the bar, then a long rest */ .sdb-bg-link { overflow:hidden; } .sdb-bg-sheen { position:absolute; top:0; bottom:0; left:0; width:110px; pointer-events:none; background:linear-gradient(90deg, transparent, rgba(217,188,114,.26), transparent); transform:skewX(-14deg) translateX(-160px); animation:sdbSheen 5.5s ease-in-out infinite;-webkit-animation:sdbSheen 5.5s ease-in-out infinite; -webkit-animation:sdbSheen 5.5s ease-in-out infinite;-webkit-animation:sdbSheen 5.5s ease-in-out infinite; } @-webkit-keyframes kbFade { 0% { opacity: 0; } 2.0% { opacity: 1; } 12.0% { opacity: 1; } 14.0% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes kbZoomIn { 0% { -webkit-transform: scale(1) translateX(0); } 14.0% { -webkit-transform: scale(1.12) translateX(-2%); } 100% { -webkit-transform: scale(1.12) translateX(-2%); } } @-webkit-keyframes kbZoomOut { 0% { -webkit-transform: scale(1.12) translateX(2%); } 14.0% { -webkit-transform: scale(1) translateX(0); } 100% { -webkit-transform: scale(1) translateX(0); } } @-webkit-keyframes sdbNudge { 0%,100%{-webkit-transform:translateX(0)} 50%{-webkit-transform:translateX(4px)} } @-webkit-keyframes sdbSheen { 0% { -webkit-transform:skewX(-14deg) translateX(-160px); } 38% { -webkit-transform:skewX(-14deg) translateX(430px); } 100% { -webkit-transform:skewX(-14deg) translateX(430px); } } @keyframes sdbSheen { 0% { transform:skewX(-14deg) translateX(-160px); } 38% { transform:skewX(-14deg) translateX(430px); } 100% { transform:skewX(-14deg) translateX(430px); } } @media (prefers-reduced-motion: reduce){ .sdb-bg-knb > span, .sdb-bg-sheen { animation:none; } .sdb-bg-sheen{ display:none; } } /* ================= fade-up on scroll (mobile only) ================= Sections start 30px low and transparent, then rise into place over 1s as they enter the viewport. The .fu-ready class is added by script only after IntersectionObserver is confirmed working, so if JS fails nothing is ever hidden. */ .fu-ready .fu { opacity:0; transform:translateY(30px); transition:opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1); -webkit-transition:opacity 1s cubic-bezier(.22,.61,.36,1), -webkit-transform 1s cubic-bezier(.22,.61,.36,1); } .fu-ready .fu.fu-in { opacity:1; transform:none; -webkit-transform:none; } /* Category tiles enter from alternating sides rather than straight up. Scoped to .homepage so the footer columns keep the plain fade. */ .fu-ready .homepage .grid_3.fu:nth-of-type(odd) { transform:translateX(-90px); -webkit-transform:translateX(-90px); } .fu-ready .homepage .grid_3.fu:nth-of-type(even) { transform:translateX(90px); -webkit-transform:translateX(90px); } .fu-ready .homepage .grid_3.fu.fu-in { transform:none !important; -webkit-transform:none !important; } /* a translated tile must not widen the page */ .homepage, .bg-1, #content { overflow-x:hidden; } @media (prefers-reduced-motion: reduce) { .fu-ready .fu { opacity:1 !important; transform:none !important; transition:none !important; } } /* ================= gold accents on the existing orange ================= */ .slider_bg { border-bottom:2px solid #C5A55A !important; } /* MORE buttons: table-cell + a border let the box stretch wider than tall. Force a square box that includes the border. */ .button-2 { display:inline-block !important; box-sizing:border-box !important; width:88px !important; height:88px !important; line-height:84px !important; padding:0 !important; border-radius:50% !important; border:2px solid #C5A55A !important; text-align:center; vertical-align:middle; } .homepage h3 { border-bottom:1px solid #C5A55A; display:inline-block; padding-bottom:4px; } /* Each tile opens with an empty spacer

; the rule above was drawing a stray gold dash on it. Collapse it. */ .homepage .aligncenter h3:first-child { border-bottom:0 !important; display:block !important; height:0; margin:0 !important; padding:0 !important; overflow:hidden; } /* Asymmetric spacing so each category title reads as belonging to the image below it, not to the MORE button above it. */ .homepage .grid_3 { margin-top:56px !important; } /* first tile keeps the same gap so it clears the below-grade button */ .homepage .aligncenter h3 { margin-bottom:8px !important; } /* ---- Category tiles: pin to original size ---- The template's mobile rule (figure img{width:100%}) sized the circles against the old 260px column; the fluid column let them balloon. Pin to the template's own 250px and center. */ .homepage .grid_3 .aligncenter { max-width: 250px; margin: 0 auto; } .homepage .grid_3 figure img, .aligncenter figure img { width: 250px !important; height: auto; } /* Center the orange MORE button under each circle (template left-padded it against the old fixed column) */ .homepage .button2_wr { padding-left: 0 !important; width: 88px; margin: -44px auto 0 !important; position: relative; } } @media only screen and (max-width: 479px) { .main { width: 94% !important; } .container_12, .container_12 .grid_1, .container_12 .grid_2, .container_12 .grid_3, .container_12 .grid_4, .container_12 .grid_5, .container_12 .grid_6, .container_12 .grid_7, .container_12 .grid_8, .container_12 .grid_9, .container_12 .grid_10, .container_12 .grid_11, .container_12 .grid_12 { width: 100% !important; } }