/* Base */
body {
backdrop-filter: blur(0);
-webkit-backdrop-filter: blur(0);
}
#home {
margin: 50px 0 0 0;
background: linear-gradient(to bottom, rgba(238, 242, 247, 0) 88%, #0000009c 100%);
min-width: 100vw;
}
#banner {
display: flex;
visibility: visible;
animation-delay: 0.1s;
animation-name: fadeInUp;
align-content: flex-start;
min-height: 70vh !important;
color: black;
width: 95%;
max-width: 1200px;
margin: auto;
}
.glossy {
width: 95%;
max-width: 1200px;
min-height: 300px;
display: flex;
margin-top: 60px;
}
.gloss { background: rgba(255, 255, 255, .28); }
.anItem { max-width: 98%; margin: auto; }
.xx { justify-content: center; margin: auto; }
/* Banner layout */
.my-banner {
display: flex;
width: 100%;
max-width: 1200px;
margin: 40px auto 20px;
border-radius: 24px;
overflow: hidden;
min-height: 340px;
align-items: stretch;
box-shadow: 0 7px 7px rgba(0,0,0,0.17);
}
.banner-text-area {
flex: 2 1 0;
max-width: 60%;
padding: 48px 36px 48px 38px;
color: #23262d;
background: rgba(255,255,255,0.5);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border-radius: 22px 0 0 22px;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.banner-img-area {
flex: 1 1 0;
max-width: 40%;
position: relative;
overflow: hidden;
border-radius: 0 22px 22px 0;
display: flex;
align-items: stretch;
}
.banner-img-main {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
border-radius: 0 22px 22px 0;
}
/* === Price Estimator CTA === */
.estimator-cta {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(12px, 3vw, 28px);
padding: clamp(18px, 3.6vw, 40px);
border-radius: 24px;
background: rgba(255,255,255,0.55);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
box-shadow: 0 10px 28px rgba(0,0,0,0.15);
overflow: hidden;
isolation: isolate;
}
/* Animated gradient edge */
.estimator-cta .cta-glow {
content: "";
position: absolute;
inset: -2px;
border-radius: inherit;
background: conic-gradient(from 0deg,
#6ea8fe, #94f0ff, #b0ffda, #ffd6a5, #f8a1ff, #6ea8fe);
filter: blur(16px);
opacity: .35;
animation: spin 10s linear infinite;
z-index: 0;
pointer-events: none;
mask: radial-gradient(circle at center, rgba(0,0,0,.15) 60%, rgba(0,0,0,1) 62%);
}
/* Content */
.estimator-cta .cta-content {
position: relative;
z-index: 1;
max-width: 900px;
}
.cta-title {
margin: 0 0 6px 0;
font-weight: 800;
font-size: clamp(22px, 3.2vw, 34px);
letter-spacing: .2px;
color: #11151a;
}
.cta-sub {
margin: 0 0 14px 0;
font-size: clamp(16px, 1.4vw, 18px);
color: #273039;
opacity: .95;
font-weight: bold;
}
.cta-highlights {
margin: 0 0 18px 0;
padding: 0;
list-style: none;
display: grid;
gap: 8px;
justify-items: center; /* keep items centered when text-align center */
text-align: center;
}
.cta-highlights li {
position: relative;
display: inline-flex; /* keeps icon + text together */
align-items: center;
gap: 8px; /* space between icon and text */
color: #1e2a33;
font-size: clamp(15px, 1.3vw, 17px);
}
.cta-highlights li::before {
content: "";
flex-shrink: 0;
width: 16px; height: 16px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #9cf1ff, #6ea8fe 60%, #4f7bff);
box-shadow: 0 0 10px rgba(110,168,254,.6);
}
/* Button */
.btn-cta {
display: inline-block;
padding: 12px 20px;
border-radius: 14px;
font-weight: 700;
text-decoration: none;
border: 1px solid rgba(0,0,0,.06);
background:
linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7)) padding-box,
linear-gradient(120deg, #6ea8fe, #89ffd6, #f8a1ff) border-box;
color: #0d2233;
box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
will-change: transform;
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.16); }
.btn-cta:active { transform: translateY(0); }
/* Floating orbs */
.orb {
position: absolute;
border-radius: 50%;
filter: blur(4px);
opacity: .28;
z-index: 0;
pointer-events: none;
animation: float 8s ease-in-out infinite;
}
.orb-a { width: 140px; height: 140px; right: -20px; bottom: -30px; background: radial-gradient(#b0ffda, transparent 70%); animation-delay: .2s; }
.orb-b { width: 180px; height: 180px; left: -40px; top: -30px; background: radial-gradient(#94f0ff, transparent 70%); animation-delay: .6s; }
.orb-c { width: 120px; height: 120px; right: 35%; top: -20px; background: radial-gradient(#f8a1ff, transparent 70%); animation-delay: 1s; opacity: .22; }
/* Animations */
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes float {
0%, 100% { transform: translateY(0) translateX(0); }
50% { transform: translateY(-8px) translateX(6px); }
}
/* ---------- Yelp Reviews (scoped) ---------- */
.yr { --yr-card-gap: 18px; --yr-star:#f7b500; --yr-muted:#6b7280;
width: 100%;
}
.yr * { box-sizing: border-box; }
.yr-head {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
.yr-brand { display: inline-flex; align-items: center; gap: 10px; text-transform: capitalize; }
.yr-logo svg { width: 92px; height: 46px; display: block; }
.yr-logo img { width: 92px; height: 46px; display: block; }
.yr-title { font-size: 28px; font-weight: 700; }
.yr-rating { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.yr-score { font-size: 28px; }
.yr-stars { display: inline-flex; gap: 2px; }
.yr-stars i {
width: 20px; height: 20px; display: inline-block;
background: conic-gradient(from 0deg, var(--yr-star) 0 360deg);
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.yr-count { color: var(--yr-muted); }
.yr-cta {
justify-self: end;
background: #0a63ff; color: #fff; text-decoration: none;
padding: 12px 18px; border-radius: 999px; font-weight: 700;
box-shadow: 0 4px 10px rgba(10,99,255,.22);
}
.yr-cta:hover { filter: brightness(.95); }
.yr-track { position: relative; }
.yr-viewport { overflow: hidden; }
.yr-slides {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc(50% - var(--yr-card-gap));
gap: var(--yr-card-gap);
padding: 0; margin: 0;
list-style: none;
transition: transform .35s ease;
}
.yr-card {
background: #f7f7f9;
border-radius: 14px;
box-shadow: 0 6px 18px rgba(0,0,0,.08);
padding: 20px;
height: 100%;
text-align: left;
}
}
.yr-card .yr-row1 { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.yr-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: #e6e6eb;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.yr-avatar .avatar{
width: 30px;
height: 30px;
display: inline-block;
background: url("data:image/svg+xml;utf8,") no-repeat center/contain;
}
.yr-burst {
position:absolute; right:-2px; bottom:-2px;;
background:#ff1a1a; border-radius:50%;
width: 24px;
height: 24px;
display: inline-block;
background: url("data:image/svg+xml;utf8,") no-repeat center/contain;
}
.yr-name { font-weight:700; }
.yr-date { color: var(--yr-muted); font-size: 14px; }
.yr-stars-sm { margin: 6px 0; }
.yr-stars-sm i { width: 18px; height: 18px; display:inline-block;
background: conic-gradient(from 0deg, var(--yr-star) 0 360deg);
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.yr-text {
color:#111; line-height:1.6;
display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
.yr-readmore { display:inline-block; margin-top:8px; font-weight:600; }
.yr-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 42px;
border: none;
border-radius: 50%;
background: #fff;
box-shadow: 0 4px 12px rgba(0,0,0,.15);
cursor: pointer;
font-size: 26px;
display: flex;
justify-content: center; /* perfect centering */
padding: 0;
}
.yr-prev { left: -10px; z-index: 99;}
.yr-next { right: -10px; }
.yr-nav.yr-next {
display: flex;
align-items: center;
justify-content: center;
}
.yr-nav.yr-next::before {
content: '\203A';
font-size: 32px;
position: relative;
left: 2px;
top: -2px;
}
.yr-nav.yr-prev {
display: flex;
align-items: center;
justify-content: center;
}
.yr-nav.yr-prev::before {
content: '\2039';
font-size: 32px;
position: relative;
left: 0px;
top: -2px;
}
@media (max-width: 900px) {
.yr-slides { grid-auto-columns: 100%; }
.yr-prev { left:-40px; } .yr-next { right:-40px; }
.yr-head { grid-template-columns: 1fr; justify-items: center; row-gap: 10px; }
.yr-cta { justify-self: center; }
}
/* Height-based tweaks */
@media (min-height: 900px) {
#banner { min-height: 50vh !important; }
}
@media (min-height: 1200px) {
#banner { min-height: 30vh !important; }
}
/* Mobile/tablet */
@media (max-width: 900px) {
.my-banner {
flex-direction: column-reverse; /* Image on top, text below */
min-height: unset;
max-width: 98vw;
border-radius: 22px; /* unify radius on mobile stack */
}
.banner-text-area,
.banner-img-area {
max-width: 100%;
border-radius: 22px;
padding: 18px 4vw;
}
.banner-img-main {
width: 100%;
max-width: 98vw;
min-height: 220px;
height: 300px;
border-radius: 22px 22px 0 0; /* rounded top when stacked */
}
.banner-img-area {
padding: 0;
min-height: 300px;
border-radius: 20px 20px 0 0;
}
.banner-text-area {
border-radius: 0 0 20px 20px;
}
.estimator-cta {
flex-direction: column;
padding: 18px 16px 20px;
border-radius: 22px;
}
.cta-highlights {
gap: 6px;
}
.btn-cta { width: 100%; text-align: center; }
}
/* Narrow phones: main background gradient tweak */
@media (max-width: 768px) {
main {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 98%, #0000009c 100%) !important;
}
}