@media (max-width: 800px) {
html,body{max-width:100%;overflow-x:hidden}
html body :is(#venclo-home-proof,#venclo-home-start,#venclo-home-one,#venclo-home-move){position:relative!important;inset:auto!important;display:block!important;width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;margin:0!important;clear:both!important;overflow:visible!important;transform:none!important;translate:none!important}
html body #venclo-home-proof{padding:3.5rem 1rem 2.75rem!important;background:#fff!important}
html body #venclo-home-proof .venclo-home-proof{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important}
html body .venclo-home-proof__header{position:static!important;width:100%!important;max-width:38rem!important;margin:0 0 1.5rem!important;transform:none!important}
html body .venclo-home-proof__eyebrow{display:block!important;margin:0 0 .65rem!important;font-size:.65rem!important;line-height:1!important;letter-spacing:.18em!important}
html body .venclo-home-proof__title{display:block!important;width:100%!important;max-width:100%!important;margin:0!important;font-size:clamp(2.25rem,9vw,3.8rem)!important;line-height:.98!important;letter-spacing:-.055em!important;white-space:normal!important;text-wrap:balance!important}
html body .venclo-home-proof__intro{display:block!important;width:100%!important;max-width:34rem!important;margin:.85rem 0 0!important;font-size:clamp(1.15rem,4.8vw,1.6rem)!important;line-height:1.25!important;letter-spacing:-.03em!important;white-space:normal!important}
html body .venclo-home-proof__grid{position:static!important;display:grid!important;grid-template-columns:1fr!important;gap:.75rem!important;width:100%!important;height:auto!important;margin:0!important;transform:none!important}
html body .venclo-home-proof-card{position:relative!important;inset:auto!important;display:block!important;width:100%!important;min-height:0!important;height:auto!important;margin:0!important;overflow:hidden!important;border:1px solid rgba(39,45,45,.09)!important;border-radius:1.25rem!important;background:#f8f8f8!important;transform:none!important;translate:none!important;box-shadow:none!important}
html body .venclo-home-proof-card__inner{position:static!important;display:block!important;height:auto!important;min-height:0!important;padding:1.25rem!important;transform:none!important}
html body .venclo-home-proof-card__kicker{display:block!important;min-height:0!important;margin:0 0 .85rem!important;font-size:.66rem!important;line-height:1.2!important}
html body .venclo-home-proof-card h3{display:block!important;width:100%!important;margin:0!important;font-size:1.3rem!important;line-height:1.1!important;white-space:normal!important}
html body .venclo-home-proof-card p{display:block!important;width:100%!important;max-width:40rem!important;margin:.65rem 0 0!important;font-size:.94rem!important;line-height:1.5!important;white-space:normal!important}
html body #venclo-home-start{padding:3.75rem 1rem!important;background:#fffee9!important}
html body #venclo-home-start .venclo-home-start{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important}
html body .venclo-home-start__header{position:static!important;display:grid!important;grid-template-columns:1fr!important;gap:1rem!important;width:100%!important;margin:0 0 1.5rem!important;transform:none!important}
html body .venclo-home-start__header h2{width:100%!important;max-width:100%!important;margin:0!important;font-size:clamp(2.7rem,11vw,4.2rem)!important;line-height:.92!important;letter-spacing:-.06em!important;white-space:normal!important}
html body .venclo-home-start__intro{position:static!important;width:100%!important;max-width:34rem!important;margin:0!important;padding:0!important;transform:none!important}
html body .venclo-home-start__grid{position:static!important;display:grid!important;grid-template-columns:1fr!important;gap:1rem!important;width:100%!important;height:auto!important;margin:0!important;transform:none!important}
html body .venclo-home-start__card{position:relative!important;inset:auto!important;display:flex!important;flex-direction:column!important;width:100%!important;min-height:0!important;height:auto!important;margin:0!important;padding:1.35rem!important;overflow:hidden!important;transform:none!important;translate:none!important}
html body .venclo-home-start__copy{position:static!important;width:100%!important;max-width:100%!important;transform:none!important}
html body .venclo-home-start__copy h3{font-size:clamp(2rem,8vw,3rem)!important;line-height:.96!important;white-space:normal!important}
html body .venclo-home-start__visual{position:relative!important;inset:auto!important;width:100%!important;max-width:100%!important;min-height:220px!important;margin:1.5rem 0 0!important;transform:none!important}
html body .venclo-home-start__link{position:static!important;margin-top:1.25rem!important;transform:none!important}
html body .venclo-home-start__help{position:static!important;display:grid!important;grid-template-columns:1fr!important;gap:.6rem!important;width:100%!important;margin:1rem 0 0!important;transform:none!important}
}
@media (max-width: 480px) {
html body #venclo-home-proof,html body #venclo-home-start{padding-left:.85rem!important;padding-right:.85rem!important}
html body .venclo-home-proof__title{font-size:2.45rem!important}
html body .venclo-home-start__header h2{font-size:3rem!important}
html body .venclo-home-start__visual{min-height:190px!important}
}
/* The goal cards read as choices, not a numbered sequence. */
html body #venclo-home-start .venclo-home-start__number {
display: none !important;
}
/* Offer-led homepage hero: inspired by the clarity of category leaders, built in Venclo's own visual language. */
html body .salient-home-hero[data-venclo-original-hero="true"] { display: none !important; }
html body .venclo-offer-hero { box-sizing: border-box; width: 100%; max-width: 100%; padding: 1rem 1.5rem 4.5rem; overflow: hidden; background: #f8f8f8 !important; }
html body .venclo-offer-hero * { box-sizing: border-box; }
html body .venclo-offer-hero__shell { width: min(1280px,100%); margin: 0 auto; padding: clamp(2rem,4vw,4.5rem); overflow: hidden; border: 1px solid rgba(39,45,45,.1); border-radius: 1.75rem; background: #fffbb4 !important; }
html body .venclo-offer-hero__grid { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(420px,.98fr); gap: clamp(2.5rem,5vw,5.5rem); align-items: center; }
html body .venclo-offer-hero__eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; color: #111 !important; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
html body .venclo-offer-hero__eyebrow::before { width: .55rem; height: .55rem; border-radius: 50%; background: #111; content: ""; }
html body .venclo-offer-hero h1 { max-width: 720px; margin: 0; color: #111 !important; font-size: clamp(3.25rem,6.1vw,6.35rem); font-weight: 790; line-height: .91; letter-spacing: -.065em; text-wrap: balance; }
html body .venclo-offer-hero__lead { max-width: 620px; margin: 1.4rem 0 0; color: #272d2d !important; font-size: clamp(1rem,1.35vw,1.18rem); line-height: 1.55; }
html body .venclo-offer-hero__benefits { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem 1.25rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
html body .venclo-offer-hero__benefits li { display: flex; gap: .6rem; align-items: center; color: #272d2d !important; font-size: .9rem; font-weight: 650; }
html body .venclo-offer-hero__benefits li::before { display: grid; width: 1.25rem; height: 1.25rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #111; color: #fffbb4; content: "✓"; font-size: .68rem; }
html body .venclo-offer-hero__offer { display: flex; gap: 1.2rem; align-items: flex-end; margin-top: 1.8rem; }
html body .venclo-offer-hero__price-label { display: block; color: #272d2d !important; font-size: .76rem; font-weight: 650; }
html body .venclo-offer-hero__price { display: flex; align-items: baseline; color: #111 !important; font-size: clamp(2.5rem,4vw,4rem); font-weight: 820; line-height: 1; letter-spacing: -.05em; }
html body .venclo-offer-hero__price small { margin-left: .3rem; color: #272d2d !important; font-size: .28em; font-weight: 700; letter-spacing: 0; }
html body .venclo-offer-hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.35rem; }
html body .venclo-offer-hero__primary,html body .venclo-offer-hero__secondary { display: inline-flex; min-height: 3.1rem; align-items: center; justify-content: center; border-radius: .75rem; padding: 0 1.25rem; font-size: .9rem; font-weight: 760; text-decoration: none; }
html body .venclo-offer-hero__primary { border: 1px solid #111; background: #111 !important; color: #fff !important; }
html body .venclo-offer-hero__secondary { border: 1px solid rgba(39,45,45,.18); background: rgba(255,255,255,.6) !important; color: #111 !important; }
html body .venclo-offer-hero__note { margin: .9rem 0 0; color: #272d2d !important; font-size: .75rem; }
html body .venclo-offer-hero__visual { position: relative; min-height: 510px; display: grid; place-items: center; border: 1px solid rgba(39,45,45,.1); border-radius: 1.4rem; background: rgba(255,255,255,.52) !important; }
html body .venclo-offer-hero__visual img { width: min(90%,500px); height: auto; }
html body .venclo-offer-hero__status { position: absolute; right: 1.2rem; top: 1.2rem; display: flex; align-items: center; gap: .55rem; border: 1px solid rgba(39,45,45,.1); border-radius: 999px; padding: .65rem .85rem; background: #fff !important; color: #111 !important; font-size: .72rem; font-weight: 750; box-shadow: 0 14px 35px rgba(39,45,45,.08); }
html body .venclo-offer-hero__status::before { width: .55rem; height: .55rem; border-radius: 50%; background: #272d2d; content: ""; }
html body .venclo-offer-hero__mini { position: absolute; left: 1.2rem; bottom: 1.2rem; width: min(250px,72%); border: 1px solid rgba(39,45,45,.1); border-radius: 1rem; padding: 1rem; background: #fff !important; box-shadow: 0 18px 42px rgba(39,45,45,.1); }
html body .venclo-offer-hero__mini span { display: block; color: #272d2d !important; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
html body .venclo-offer-hero__mini strong { display: block; margin-top: .3rem; color: #111 !important; font-size: 1rem; }
html body .venclo-offer-hero__mini i { display: block; height: .38rem; margin-top: .8rem; overflow: hidden; border-radius: 999px; background: #fffee9; }
html body .venclo-offer-hero__mini i::after { display: block; width: 88%; height: 100%; border-radius: inherit; background: #111; content: ""; }
@media (max-width: 920px) { html body .venclo-offer-hero { padding: .75rem 1rem 3.25rem; } html body .venclo-offer-hero__grid { grid-template-columns: 1fr; } html body .venclo-offer-hero__visual { min-height: 420px; } }
@media (max-width: 560px) { html body .venclo-offer-hero { padding-left: .75rem; padding-right: .75rem; } html body .venclo-offer-hero__shell { width: 100%; max-width: 100%; padding: 1.5rem; border-radius: 1.25rem; } html body .venclo-offer-hero__grid,html body .venclo-offer-hero__grid > div { min-width: 0; max-width: 100%; } html body .venclo-offer-hero__eyebrow { max-width: 100%; white-space: normal !important; overflow-wrap: anywhere; line-height: 1.35; } html body .venclo-offer-hero h1 { max-width: 100%; font-size: clamp(2.65rem,13vw,3.6rem); overflow-wrap: anywhere; } html body .venclo-offer-hero__lead { width: 100%; max-width: 100%; white-space: normal !important; overflow-wrap: anywhere; } html body .venclo-offer-hero__benefits { grid-template-columns: 1fr; } html body .venclo-offer-hero__actions { display: grid; } html body .venclo-offer-hero__primary,html body .venclo-offer-hero__secondary { width: 100%; } html body .venclo-offer-hero__visual { width: 100%; min-width: 0; min-height: 330px; } }
/* Minimal commercial treatment: one message, one action, quieter supporting art. */
html body .venclo-offer-hero { padding-top: .75rem; padding-bottom: 3.5rem; }
html body .venclo-offer-hero__shell { padding: clamp(2.5rem,5vw,5.25rem); border-color: rgba(39,45,45,.08); border-radius: 1.5rem; }
html body .venclo-offer-hero__grid { grid-template-columns: minmax(0,1.08fr) minmax(360px,.92fr); gap: clamp(2rem,5vw,5rem); }
html body .venclo-offer-hero__eyebrow { margin-bottom: 1rem; font-size: 0; letter-spacing: .11em; }
html body .venclo-offer-hero__eyebrow::after { content: "Fast, secure web hosting"; font-size: .68rem; }
html body .venclo-offer-hero h1 { max-width: 700px; font-size: 0; line-height: .94; letter-spacing: -.06em; }
html body .venclo-offer-hero h1::after { display: block; content: "One partner.\A Everything you need\A to grow online."; color: #111; white-space: pre; font-size: clamp(3.35rem,5.15vw,5.2rem); font-weight: 790; line-height: .94; letter-spacing: -.06em; }
html body .venclo-offer-hero__lead { max-width: 560px; margin-top: 1.25rem; font-size: 0; line-height: 1.55; }
html body .venclo-offer-hero__lead::after { content: "From hosting and domains to websites and marketing, Venclo brings your digital essentials together with one dependable team."; font-size: clamp(.98rem,1.2vw,1.1rem); line-height: 1.55; }
html body .venclo-offer-hero__benefits { display: flex; flex-wrap: wrap; gap: .65rem 1.25rem; margin-top: 1.4rem; }
html body .venclo-offer-hero__benefits li { font-size: .84rem; font-weight: 680; }
html body .venclo-offer-hero__benefits li::before { width: 1.05rem; height: 1.05rem; font-size: .58rem; }
html body .venclo-offer-hero__benefits li:nth-child(4) { display: none; }
html body .venclo-offer-hero__offer { margin-top: 1.7rem; }
html body .venclo-offer-hero__price { font-size: clamp(2.35rem,3.4vw,3.35rem); }
html body .venclo-offer-hero__actions { margin-top: 1rem; }
html body .venclo-offer-hero__primary { min-width: 11.5rem; }
html body .venclo-offer-hero__secondary,html body .venclo-offer-hero__note,html body .venclo-offer-hero__status,html body .venclo-offer-hero__mini { display: none !important; }
html body .venclo-offer-hero__visual { min-height: 440px; border: 0; background: transparent !important; }
html body .venclo-offer-hero__visual img { width: min(100%,500px); filter: saturate(.88); }
@media (max-width: 920px) { html body .venclo-offer-hero__grid { grid-template-columns: 1fr; } html body .venclo-offer-hero h1::after { white-space: pre-line; } html body .venclo-offer-hero__visual { min-height: 340px; } }
@media (max-width: 560px) { html body .venclo-offer-hero { padding-bottom: 2.5rem; } html body .venclo-offer-hero__shell { padding: 2rem 1.5rem; } html body .venclo-offer-hero h1::after { font-size: clamp(2.75rem,13vw,3.65rem); } html body .venclo-offer-hero__benefits { display: grid; grid-template-columns: 1fr; } html body .venclo-offer-hero__visual { min-height: 285px; margin-top: .5rem; } }
/* Full-bleed hero with contrast behind the yellow details in the illustration. */
html,body { max-width: 100%; overflow-x: hidden; }
html body .venclo-offer-hero {
width: 100%;
max-width: none;
margin: 0;
padding: 0 0 3.5rem;
background: linear-gradient(112deg,#fffbb4 0%,#fffbb4 43%,#fffee9 67%,#f8f8f8 100%) !important;
}
html body .venclo-offer-hero__shell {
width: 100%;
max-width: none;
margin: 0;
padding: clamp(5.7rem,8vw,7.5rem) clamp(1.5rem,6vw,5.5rem) clamp(3rem,5vw,5rem);
border: 0;
border-radius: 0;
background: transparent !important;
}
html body .venclo-offer-hero__grid {
width: min(1280px,100%);
margin: 0 auto;
}
html body .venclo-offer-hero__visual {
position: relative;
}
html body .venclo-offer-hero__visual::before {
position: absolute;
inset: 8% 2% 6% 10%;
z-index: 0;
border-radius: 50%;
background: radial-gradient(circle at center,rgba(255,255,255,.72) 0%,rgba(255,255,255,.34) 42%,rgba(255,255,255,0) 72%);
content: "";
pointer-events: none;
}
html body .venclo-offer-hero__visual img {
position: relative;
z-index: 1;
}
@media (max-width: 920px) {
html body .venclo-offer-hero { padding-bottom: 2.75rem; }
html body .venclo-offer-hero__shell { padding-top: 5.5rem; }
}
/* Deliberately bolder hero direction: unmistakable colour and abstract geometry. */
html body .venclo-offer-hero {
background:
radial-gradient(circle at 5% 4%,rgba(255,255,255,.92) 0 9%,rgba(255,255,255,0) 27%),
radial-gradient(circle at 38% 92%,rgba(255,251,180,.72) 0 16%,rgba(255,251,180,0) 38%),
radial-gradient(circle at 79% 9%,rgba(255,251,180,.86) 0 13%,rgba(255,251,180,0) 36%),
radial-gradient(circle at 98% 70%,rgba(255,255,255,.9) 0 14%,rgba(255,255,255,0) 38%),
linear-gradient(122deg,#fffbb4 0%,#fffbb4 36%,#fffee9 55%,#f8f8f8 100%) !important;
}
html body .venclo-offer-hero::before {
opacity: 1;
background:
radial-gradient(circle at 74% 42%,transparent 0 20%,rgba(39,45,45,.085) 20.15% 20.45%,transparent 20.65% 28%,rgba(39,45,45,.06) 28.15% 28.4%,transparent 28.65% 36%,rgba(39,45,45,.04) 36.15% 36.35%,transparent 36.6%),
radial-gradient(circle at 16% 30%,rgba(39,45,45,.075) 0 1.25px,transparent 1.8px) 0 0/24px 24px,
linear-gradient(115deg,transparent 0 53%,rgba(255,255,255,.32) 53.2% 61%,transparent 61.2%);
-webkit-mask-image: linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,.08) 42%,rgba(0,0,0,1) 63%,rgba(0,0,0,.58));
mask-image: linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,.08) 42%,rgba(0,0,0,1) 63%,rgba(0,0,0,.58));
}
html body .venclo-offer-hero__visual::before {
inset: 2% -5% 0 0;
border-radius: 46% 54% 58% 42% / 42% 40% 60% 58%;
background:
radial-gradient(circle at 42% 42%,rgba(255,255,255,.94) 0%,rgba(255,255,255,.64) 46%,rgba(255,255,255,0) 72%);
}
html body .venclo-offer-hero::after {
background:
linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.08) 14%,rgba(255,255,255,.22) 30%,rgba(255,255,255,.44) 50%,rgba(255,255,255,.7) 70%,rgba(255,255,255,.9) 86%,#ffffff 100%),
linear-gradient(122deg,#fffbb4 0%,#fffbb4 36%,#fffee9 55%,#f8f8f8 100%);
}
/* Professional homepage hero: one promise, one action and concise proof. */
html body .venclo-offer-hero {
padding-bottom: 3.25rem !important;
background:
linear-gradient(to bottom,rgba(248,248,248,0) 76%,#f8f8f8 100%),
radial-gradient(circle at 78% 28%,rgba(255,255,255,.78),transparent 30%),
linear-gradient(112deg,#fffbb4 0%,#fffbb4 46%,#fffee9 72%,#f8f8f8 100%) !important;
}
html body .venclo-offer-hero::after {
display: none !important;
width: 0 !important;
height: 0 !important;
content: none !important;
}
html body .venclo-offer-hero::before {
opacity: .32 !important;
background: radial-gradient(circle at 77% 43%,transparent 0 24%,rgba(39,45,45,.07) 24.2% 24.45%,transparent 24.7% 34%,rgba(39,45,45,.045) 34.2% 34.4%,transparent 34.65%) !important;
-webkit-mask-image: linear-gradient(90deg,transparent 0 48%,#000 68%,rgba(0,0,0,.45)) !important;
mask-image: linear-gradient(90deg,transparent 0 48%,#000 68%,rgba(0,0,0,.45)) !important;
}
html body .venclo-offer-hero__shell {
padding-top: clamp(5.25rem,7vw,6.75rem) !important;
padding-bottom: clamp(2.75rem,4.5vw,4.25rem) !important;
}
html body .venclo-offer-hero__grid {
grid-template-columns: minmax(0,1.08fr) minmax(390px,.92fr) !important;
gap: clamp(2.5rem,5vw,5.75rem) !important;
}
html body .venclo-offer-hero__eyebrow {
display: inline-flex !important;
grid-column: 1/-1;
width: max-content;
margin: 0 0 1.15rem !important;
color: #272d2d !important;
font-size: .7rem !important;
letter-spacing: .14em !important;
}
html body .venclo-offer-hero__eyebrow::before,
html body .venclo-offer-hero__eyebrow::after { content: none !important; }
html body .venclo-offer-hero h1 {
font-size: clamp(3.7rem,5.7vw,6rem) !important;
line-height: .92 !important;
letter-spacing: -.065em !important;
text-wrap: balance !important;
}
html body .venclo-offer-hero h1::after { display: none !important; content: none !important; }
html body .venclo-offer-hero__lead {
max-width: 620px !important;
margin-top: 1.35rem !important;
color: #272d2d !important;
font-size: clamp(1rem,1.25vw,1.12rem) !important;
line-height: 1.58 !important;
}
html body .venclo-offer-hero__lead::after { display: none !important; content: none !important; }
html body .venclo-offer-hero__benefits {
display: grid !important;
grid-template-columns: repeat(3,minmax(0,1fr)) !important;
gap: 0 !important;
margin-top: 1.75rem !important;
padding: 1rem 0 0 !important;
border-top: 1px solid rgba(39,45,45,.14) !important;
}
html body .venclo-offer-hero__benefits li {
display: grid !important;
gap: .25rem !important;
align-items: start !important;
padding-right: 1rem !important;
}
html body .venclo-offer-hero__benefits li::before { display: none !important; content: none !important; }
html body .venclo-offer-hero__benefits li:nth-child(4) { display: none !important; }
html body .venclo-offer-hero__benefits span {
color: #272d2d !important;
font-size: .66rem !important;
font-weight: 720 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
}
html body .venclo-offer-hero__benefits strong {
color: #111 !important;
font-size: .9rem !important;
font-weight: 760 !important;
line-height: 1.25 !important;
}
html body .venclo-offer-hero__offer { margin-top: 1.75rem !important; }
html body .venclo-offer-hero__actions { margin-bottom: .1rem !important; }
html body .venclo-offer-hero__primary {
min-height: 3.2rem !important;
border-radius: .8rem !important;
background: #111 !important;
background-image: none !important;
box-shadow: none !important;
animation: none !important;
}
html body .venclo-offer-hero__primary:hover,
html body .venclo-offer-hero__primary:focus-visible {
background: #272d2d !important;
box-shadow: none !important;
}
html body .venclo-offer-hero__visual { min-height: 430px !important; }
html body .venclo-offer-hero__visual::before {
inset: 7% 0 5% 4% !important;
border-radius: 50% !important;
background: radial-gradient(circle,rgba(255,255,255,.82),rgba(255,255,255,.38) 48%,transparent 72%) !important;
}
html body .venclo-offer-hero__visual img {
width: min(100%,510px) !important;
filter: none !important;
transform: translateY(-.5rem) !important;
}
@media (max-width:920px) {
html body .venclo-offer-hero__grid { grid-template-columns:1fr !important; }
html body .venclo-offer-hero__visual { min-height:340px !important; }
}
@media (max-width:560px) {
html body .venclo-offer-hero { padding-bottom:2.25rem !important; }
html body .venclo-offer-hero__shell { padding-top:4.75rem !important; }
html body .venclo-offer-hero h1 { font-size:clamp(3rem,13.5vw,4rem) !important; }
html body .venclo-offer-hero__benefits { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
html body .venclo-offer-hero__benefits li { padding-right:.45rem !important; }
html body .venclo-offer-hero__benefits strong { font-size:.76rem !important; }
}
@media (max-width: 920px) {
html body .venclo-offer-hero::before { opacity: .7; }
}
@media (max-width: 560px) {
html body .venclo-offer-hero { padding: 0 0 2rem; }
html body .venclo-offer-hero__shell { padding: 5rem 1.25rem 2.25rem; }
html body .venclo-offer-hero__visual::before { inset: 8% 0 4%; }
}
/* Keep the price and its single purchase action together. */
html body .venclo-offer-hero__eyebrow { display: none !important; }
html body .venclo-offer-hero__grid > div:first-child {
display: grid;
grid-template-columns: auto minmax(0,1fr);
column-gap: 1.15rem;
align-items: end;
}
html body .venclo-offer-hero__grid > div:first-child > h1,
html body .venclo-offer-hero__grid > div:first-child > .venclo-offer-hero__lead,
html body .venclo-offer-hero__grid > div:first-child > .venclo-offer-hero__benefits {
grid-column: 1 / -1;
}
html body .venclo-offer-hero__offer {
grid-column: 1;
margin-top: 1.7rem;
}
html body .venclo-offer-hero__actions {
grid-column: 2;
display: flex;
align-items: flex-end;
margin: 0 0 .05rem;
}
html body .venclo-offer-hero__primary { width: auto; white-space: nowrap; }
@media (max-width: 560px) {
html body .venclo-offer-hero__grid > div:first-child { column-gap: .75rem; }
html body .venclo-offer-hero__price { font-size: 2.35rem; }
html body .venclo-offer-hero__price small { font-size: .25em; }
html body .venclo-offer-hero__primary { min-width: 0; min-height: 2.85rem; padding: 0 .9rem; font-size: .78rem; }
}
/* Fade the full-bleed hero into the page and give the primary action restrained motion. */
html body .venclo-offer-hero {
background:
linear-gradient(to bottom,rgba(255,255,255,0) 58%,rgba(255,255,255,.42) 76%,#ffffff 100%),
linear-gradient(112deg,#fffbb4 0%,#fffbb4 43%,#fffee9 67%,#f8f8f8 100%) !important;
}
html body .venclo-offer-hero__primary {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: 0 !important;
gap: 0;
font-size: 0;
background: #111 !important;
background-size: auto !important;
animation: none !important;
box-shadow: 0 6px 16px rgba(39,45,45,.13) !important;
transition: background-color 220ms ease,box-shadow 260ms ease,transform 260ms cubic-bezier(.22,1,.36,1) !important;
}
html body .venclo-offer-hero__primary::before {
content: "View hosting plans";
color: #fff;
font-size: .9rem;
font-weight: 760;
}
html body .venclo-offer-hero__primary::after {
content: none;
display: none;
}
html body .venclo-offer-hero__primary:hover,
html body .venclo-offer-hero__primary:focus-visible {
background: #272d2d !important;
box-shadow: 0 9px 22px rgba(39,45,45,.18) !important;
transform: translateY(-1px);
}
@keyframes venclo-hero-cta-sheen {
0%,64%,100% { background-position: 100% 0; }
78% { background-position: 0 0; }
}
@media (max-width: 560px) {
html body .venclo-offer-hero__primary::before { font-size: .78rem; }
html body .venclo-offer-hero__primary::after { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
html body .venclo-offer-hero__primary { animation: none; }
html body .venclo-offer-hero__primary::after { transition: none; }
}
/* A useful domain action lives with the illustration, keeping the offer column focused. */
html body .venclo-hero-domain-search { position: absolute; right: clamp(.25rem,2vw,1.5rem); bottom: clamp(.5rem,3vw,2rem); z-index: 3; width: min(430px,92%); margin: 0; padding: .85rem; border: 1px solid rgba(39,45,45,.11); border-radius: 1rem; background: rgba(255,255,255,.9) !important; box-shadow: 0 18px 45px rgba(39,45,45,.12); backdrop-filter: blur(14px); }
html body .venclo-hero-domain-search label { display: block; margin: 0 0 .5rem .15rem; color: #272d2d !important; font-size: .68rem; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; }
html body .venclo-hero-domain-search > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .5rem; }
html body .venclo-hero-domain-search input { width: 100%; min-width: 0; height: 2.85rem; border: 1px solid rgba(39,45,45,.12); border-radius: .7rem; outline: 0; background: #fff !important; color: #111 !important; padding: 0 .9rem; font: inherit; font-size: .88rem; }
html body .venclo-hero-domain-search input:focus { border-color: #111; box-shadow: 0 0 0 3px rgba(39,45,45,.08); }
html body .venclo-hero-domain-search button { display: inline-flex; height: 2.85rem; align-items: center; gap: .45rem; border: 1px solid #111; border-radius: .7rem; background: #111 !important; color: #fff !important; padding: 0 1rem; font-size: .82rem; font-weight: 760; cursor: pointer; }
html body .venclo-hero-domain-search button span { color: #fff !important; transition: transform 250ms ease; }
html body .venclo-hero-domain-search button:hover span,html body .venclo-hero-domain-search button:focus-visible span { transform: translateX(3px); }
@media (max-width: 920px) { html body .venclo-hero-domain-search { right: 50%; bottom: 0; transform: translateX(50%); } }
@media (max-width: 560px) { html body .venclo-hero-domain-search { width: 100%; padding: .7rem; } html body .venclo-hero-domain-search > div { grid-template-columns: 1fr; } html body .venclo-hero-domain-search button { justify-content: center; } }
/* Give the search control breathing room beneath the illustration. */
html body .venclo-offer-hero__visual { margin-bottom: 1.5rem; }
html body .venclo-offer-hero__visual img { transform: translateY(-2rem); }
html body .venclo-hero-domain-search { bottom: -.75rem; }
@media (max-width: 920px) {
html body .venclo-offer-hero__visual { margin-bottom: 2rem; }
html body .venclo-offer-hero__visual img { transform: translateY(-1.5rem); }
html body .venclo-hero-domain-search { bottom: -1rem; }
}
/* Final position: a centred secondary action below the main hero grid. */
html body .venclo-offer-hero__visual { margin-bottom: 0; }
html body .venclo-offer-hero__visual img { transform: none; }
html body .venclo-hero-domain-search {
position: relative;
right: auto;
bottom: auto;
width: min(720px,100%);
margin: clamp(1.5rem,3vw,2.5rem) auto 0;
padding: .7rem;
transform: none;
display: grid;
grid-template-columns: auto minmax(0,1fr);
gap: .8rem;
align-items: center;
border-radius: .9rem;
box-shadow: 0 12px 34px rgba(39,45,45,.09);
}
html body .venclo-hero-domain-search label { margin: 0 0 0 .25rem; white-space: nowrap; }
@media (max-width: 920px) {
html body .venclo-offer-hero__visual { margin-bottom: 0; }
html body .venclo-offer-hero__visual img { transform: none; }
html body .venclo-hero-domain-search { right: auto; bottom: auto; transform: none; }
}
@media (max-width: 560px) {
html body .venclo-hero-domain-search { grid-template-columns: 1fr; gap: .55rem; }
html body .venclo-hero-domain-search label { margin-left: .15rem; }
}
/* Wider, quieter domain search with more separation from the hero content. */
html body .venclo-hero-domain-search {
width: min(920px,100%);
margin-top: clamp(3rem,5vw,4.5rem);
padding: .45rem;
display: block;
border-color: rgba(39,45,45,.09);
border-radius: .8rem;
background: rgba(255,255,255,.82) !important;
box-shadow: 0 8px 24px rgba(39,45,45,.06);
}
html body .venclo-hero-domain-search label { display: none; }
html body .venclo-hero-domain-search > div { gap: .4rem; }
html body .venclo-hero-domain-search input { height: 3.15rem; border: 0; background: transparent !important; padding-left: 1rem; }
html body .venclo-hero-domain-search button { height: 3.15rem; min-width: 7.5rem; justify-content: center; }
@media (max-width: 560px) {
html body .venclo-hero-domain-search { margin-top: 2.5rem; }
html body .venclo-hero-domain-search > div { grid-template-columns: minmax(0,1fr) auto; }
html body .venclo-hero-domain-search button { min-width: 5.8rem; padding: 0 .75rem; }
}
/* The domain finder now sits on the main page background, outside the hero gradient. */
html body .venclo-offer-hero + .venclo-hero-domain-search {
width: min(920px,calc(100% - 2rem));
margin: 2.5rem auto 4rem;
background: #fff !important;
}
@media (max-width: 560px) {
html body .venclo-offer-hero + .venclo-hero-domain-search { margin-top: 1.75rem; margin-bottom: 3rem; }
}
/* Domain search is now the dedicated search action, so the header stays uncluttered. */
html body header.site-main-header div:has(> input[aria-label="Search site"]),
html body header.site-main-header input[aria-label="Search site"] {
display: none !important;
}
/* More tactile domain search states without adding visual clutter. */
html body .venclo-hero-domain-search input {
border: 2px solid rgba(39,45,45,.12);
background: #fff !important;
transition: border-color 240ms ease,box-shadow 240ms ease,background-color 240ms ease;
}
html body .venclo-hero-domain-search input:hover {
border-color: rgba(39,45,45,.45);
box-shadow: 0 0 0 3px rgba(39,45,45,.035);
}
html body .venclo-hero-domain-search input:focus,
html body .venclo-hero-domain-search input:active {
border-color: #111;
background: #fff !important;
box-shadow: 0 0 0 4px rgba(39,45,45,.09);
}
html body .venclo-hero-domain-search button {
position: relative;
overflow: hidden;
background: linear-gradient(110deg,#111 0%,#111 42%,#272d2d 50%,#111 58%,#111 100%) !important;
background-size: 240% 100% !important;
animation: venclo-domain-search-sheen 4.8s ease-in-out infinite;
box-shadow: 0 7px 18px rgba(39,45,45,.14);
transition: box-shadow 240ms ease,border-color 240ms ease !important;
}
html body .venclo-hero-domain-search button:hover,
html body .venclo-hero-domain-search button:focus-visible {
box-shadow: 0 11px 26px rgba(39,45,45,.23) !important;
}
@keyframes venclo-domain-search-sheen {
0%,64%,100% { background-position: 100% 0; }
78% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
html body .venclo-hero-domain-search button { animation: none; }
}
/* Minimal domain finder: one clean row with motion reserved for interaction. */
html body .venclo-offer-hero + .venclo-hero-domain-search {
position: relative;
padding: 0;
border: 0;
border-radius: .8rem;
background: transparent !important;
box-shadow: none;
backdrop-filter: none;
}
@property --venclo-domain-border-sweep {
syntax: "";
inherits: false;
initial-value: 0deg;
}
html body .venclo-hero-domain-search::after {
position: absolute;
inset: 0;
z-index: 2;
padding: 2px;
border: 0;
border-radius: .8rem;
background: conic-gradient(from 90deg,#111 0deg,#111 var(--venclo-domain-border-sweep),transparent var(--venclo-domain-border-sweep),transparent 360deg);
content: "";
pointer-events: none;
-webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
transition: --venclo-domain-border-sweep 650ms cubic-bezier(.22,1,.36,1);
}
html body .venclo-hero-domain-search:hover::after,
html body .venclo-hero-domain-search:focus-within::after { --venclo-domain-border-sweep: 360deg; }
html body .venclo-hero-domain-search > div {
overflow: hidden;
gap: 0;
border: 1px solid rgba(39,45,45,.14);
border-radius: .8rem;
background: #fff;
box-shadow: 0 5px 18px rgba(39,45,45,.045);
transition: border-color 240ms ease,box-shadow 240ms ease;
}
html body .venclo-hero-domain-search:hover > div { border-color: rgba(39,45,45,.35); }
html body .venclo-hero-domain-search:focus-within > div {
border-color: #111;
box-shadow: 0 8px 24px rgba(39,45,45,.09);
}
html body .venclo-hero-domain-search input,
html body .venclo-hero-domain-search input:hover,
html body .venclo-hero-domain-search input:focus,
html body .venclo-hero-domain-search input:active {
border: 0 !important;
border-radius: 0;
box-shadow: none !important;
}
html body .venclo-hero-domain-search button {
height: 3.25rem;
border: 0;
border-radius: 0;
box-shadow: none !important;
}
html body .venclo-hero-domain-search button:hover,
html body .venclo-hero-domain-search button:focus-visible { box-shadow: none !important; }
@media (prefers-reduced-motion: reduce) {
html body .venclo-hero-domain-search::after { transition: none; }
}
/* Final border interaction: retain the same colour and gently increase its visual weight. */
html body .venclo-hero-domain-search::after { display: none; }
html body .venclo-hero-domain-search > div,
html body .venclo-hero-domain-search:hover > div,
html body .venclo-hero-domain-search:focus-within > div {
border-color: rgba(39,45,45,.14) !important;
transition: box-shadow 620ms cubic-bezier(.22,1,.36,1),border-color 620ms ease !important;
}
html body .venclo-hero-domain-search > div {
box-shadow: inset 0 0 0 0 rgba(39,45,45,.14),0 5px 18px rgba(39,45,45,.045) !important;
}
html body .venclo-hero-domain-search:hover > div,
html body .venclo-hero-domain-search:focus-within > div {
box-shadow: inset 0 0 0 2px rgba(39,45,45,.14),0 8px 24px rgba(39,45,45,.07) !important;
}
html body .venclo-hero-domain-search label {
display: block;
margin: 0 0 .8rem .1rem;
color: #111 !important;
font-size: 1rem;
font-weight: 760;
line-height: 1.2;
letter-spacing: -.015em;
text-transform: none;
}
/* Final homepage position: after the reassurance cards, before deeper content. */
html body .venclo-hero-domain-search {
position: relative;
right: auto;
bottom: auto;
width: min(1180px,calc(100% - 3rem));
margin: clamp(3.5rem,5vw,5rem) auto;
padding: 0;
border: 0;
background: transparent !important;
box-shadow: none;
transform: none;
backdrop-filter: none;
}
html body .venclo-hero-domain-search label {
margin-bottom: 1rem;
font-size: clamp(1.1rem,1.5vw,1.3rem);
}
html body .venclo-hero-domain-search input { height: 3.55rem; font-size: .95rem; }
html body .venclo-hero-domain-search button { height: 3.55rem; min-width: 8.5rem; }
@media (max-width: 560px) {
html body .venclo-hero-domain-search { width: calc(100% - 2rem); margin-top: 3rem; margin-bottom: 3.5rem; }
html body .venclo-hero-domain-search input,html body .venclo-hero-domain-search button { height: 3.2rem; }
html body .venclo-hero-domain-search button { min-width: 6rem; }
}
/* Give the reassurance cards a clean pause after the hero gradient. */
html body .salient-home-hero[data-venclo-original-hero="true"] + section {
margin-top: 0 !important;
padding-top: clamp(1.25rem,2.2vw,2rem) !important;
background-color: #fff !important;
}
@media (max-width: 560px) {
html body .salient-home-hero[data-venclo-original-hero="true"] + section { padding-top: 1.25rem !important; }
}
/* Finish the colour transition sooner, then keep the next section close. */
html body .venclo-offer-hero {
padding-bottom: 0;
background: linear-gradient(112deg,#fffbb4 0%,#fffbb4 43%,#fffee9 67%,#f8f8f8 100%) !important;
}
html body .venclo-offer-hero__shell { padding-bottom: clamp(1.5rem,3vw,2.5rem); }
html body .venclo-offer-hero__visual { min-height: 360px; }
@media (max-width: 920px) { html body .venclo-offer-hero__visual { min-height: 310px; } }
html body .venclo-offer-hero::after {
display: block;
width: 100%;
height: clamp(5rem,7vw,6.5rem);
background:
linear-gradient(to bottom,rgba(248,248,248,0) 0%,rgba(248,248,248,.16) 22%,rgba(248,248,248,.52) 58%,rgba(248,248,248,.86) 82%,#fffee9 100%),
linear-gradient(112deg,#fffbb4 0%,#fffbb4 43%,#fffee9 67%,#f8f8f8 100%);
content: "";
pointer-events: none;
}
/* Compact, expandable header search placed immediately before Sign in. */
html body header.site-main-header .venclo-header-search-toggle {
display: inline-grid !important;
width: 2.75rem;
height: 2.75rem;
flex: 0 0 auto;
place-items: center;
margin-right: .5rem;
border: 1px solid rgba(39,45,45,.12);
border-radius: .75rem;
background: rgba(255,255,255,.76) !important;
color: #111 !important;
cursor: pointer;
box-shadow: 0 4px 12px rgba(39,45,45,.04);
transition: border-color 220ms ease,background-color 220ms ease,box-shadow 220ms ease !important;
}
html body header.site-main-header .venclo-header-search-toggle svg {
width: 1.1rem;
height: 1.1rem;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
}
html body header.site-main-header .venclo-header-search-toggle:hover,
html body header.site-main-header .venclo-header-search-toggle:focus-visible,
html body header.site-main-header[data-venclo-header-search-open] .venclo-header-search-toggle {
border-color: rgba(39,45,45,.35);
background: #fff !important;
box-shadow: 0 7px 18px rgba(39,45,45,.08);
}
html body header.site-main-header[data-venclo-header-search-open] div:has(> input[aria-label="Search site"]) {
display: block !important;
width: min(18rem,30vw);
margin-right: .5rem;
animation: venclo-header-search-in 260ms cubic-bezier(.22,1,.36,1) both;
}
html body header.site-main-header[data-venclo-header-search-open] input[aria-label="Search site"] {
display: block !important;
width: 100% !important;
}
@keyframes venclo-header-search-in {
from { opacity: 0; transform: translateX(8px) scaleX(.94); }
to { opacity: 1; transform: translateX(0) scaleX(1); }
}
@media (max-width: 760px) {
html body header.site-main-header .venclo-header-search-toggle { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
html body header.site-main-header[data-venclo-header-search-open] div:has(> input[aria-label="Search site"]) { animation: none; }
}
/* The search field replaces the icon visually and overlays the header without moving other controls. */
html body header.site-main-header[data-venclo-header-search-open] .venclo-header-search-toggle {
opacity: 0;
pointer-events: none;
}
html body header.site-main-header[data-venclo-header-search-open] div:has(> input[aria-label="Search site"]) {
position: fixed !important;
z-index: 120 !important;
width: 18rem !important;
max-width: calc(100vw - 2rem);
height: 2.75rem;
margin: 0 !important;
transform-origin: right center;
box-shadow: 0 10px 28px rgba(39,45,45,.12);
}
html body header.site-main-header[data-venclo-header-search-open] input[aria-label="Search site"] {
height: 2.75rem !important;
background: #fff !important;
}
@keyframes venclo-header-search-in {
from { opacity: 0; transform: scaleX(.14); }
to { opacity: 1; transform: scaleX(1); }
}
/* Clear header action hierarchy: quiet utility, secondary access, primary conversion. */
html body header.site-main-header .venclo-header-search-toggle {
border-color: rgba(39,45,45,.1);
background: rgba(255,255,255,.48) !important;
color: #111 !important;
box-shadow: none;
}
html body header.site-main-header .venclo-header-search-toggle:hover,
html body header.site-main-header .venclo-header-search-toggle:focus-visible {
border-color: rgba(39,45,45,.26);
background: rgba(255,255,255,.82) !important;
box-shadow: 0 6px 16px rgba(39,45,45,.07);
}
html body header.site-main-header .venclo-header-signin {
border-color: rgba(39,45,45,.13) !important;
background: rgba(255,255,255,.68) !important;
color: #111 !important;
box-shadow: none !important;
}
html body header.site-main-header .venclo-header-signin:hover,
html body header.site-main-header .venclo-header-signin:focus-visible {
border-color: rgba(39,45,45,.28) !important;
background: #fff !important;
box-shadow: 0 6px 16px rgba(39,45,45,.07) !important;
}
html body header.site-main-header .venclo-header-create-account {
border-color: rgba(39,45,45,.12) !important;
background: #fffbb4 !important;
color: #111 !important;
-webkit-text-fill-color: #111 !important;
box-shadow: none !important;
}
html body header.site-main-header .venclo-header-create-account * { color: #111 !important; -webkit-text-fill-color: #111 !important; }
html body header.site-main-header .venclo-header-create-account:hover,
html body header.site-main-header .venclo-header-create-account:focus-visible {
border-color: rgba(39,45,45,.22) !important;
background: #fffbb4 !important;
color: #111 !important;
-webkit-text-fill-color: #111 !important;
box-shadow: none !important;
}
html body header.site-main-header .venclo-header-create-account:hover *,
html body header.site-main-header .venclo-header-create-account:focus-visible * {
color: #111 !important;
-webkit-text-fill-color: #111 !important;
}
/* Match the final navigation on first paint. The enhancement script then adds
behaviour without visibly rebuilding an older header in front of visitors. */
html body header.site-main-header:not([data-venclo-header-ready]) input[aria-label="Search site"] {
width: 44px !important;
min-width: 44px !important;
padding: 0 !important;
color: transparent !important;
caret-color: transparent !important;
cursor: pointer !important;
}
html body header.site-main-header:not([data-venclo-header-ready]) input[aria-label="Search site"]::placeholder {
color: transparent !important;
opacity: 0 !important;
}
html body header.site-main-header:not([data-venclo-header-ready]) .header-get-started-btn {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
order: 20 !important;
width: 4.75rem !important;
min-width: 4.75rem !important;
overflow: hidden !important;
font-size: 0 !important;
}
html body header.site-main-header:not([data-venclo-header-ready]) .header-get-started-btn::after {
content: "Register";
font-size: .875rem;
line-height: 1;
}
html body header.site-main-header:not([data-venclo-header-ready]) .header-signin-btn {
border-color: #111 !important;
background: #111 !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
order: 30 !important;
width: 8.15rem !important;
min-width: 8.15rem !important;
overflow: hidden !important;
font-size: 0 !important;
}
html body header.site-main-header:not([data-venclo-header-ready]) .header-signin-btn::before {
content: "My Venclo";
font-size: .875rem;
line-height: 1;
}
html body header.site-main-header:not([data-venclo-header-ready]) *:has(> .header-signin-btn) > div:has(> button[aria-label="Select currency"]) {
order: 40 !important;
}
/* Prevent retired route markup from painting while its modern replacement is
mounted synchronously. The replacement scripts remove the old nodes. */
html.venclo-route-home body .salient-home-hero { visibility: hidden !important; }
html.venclo-route-home body .venclo-offer-hero { visibility: visible !important; }
html.venclo-route-domains body #domains-section:not([data-venclo-domains-redesign="true"]),
html.venclo-route-vps body #vps-section:not([data-venclo-vps-v2="true"]),
html.venclo-route-marketing:not(.vm-marketing-ready) body #marketing-section,
html.venclo-route-websites:not(.vw-websites-ready) body #websites-section,
html.venclo-route-wordpress-hosting body .hero-yellow-card:not([data-venclo-product-editorial-hero="true"]) {
visibility: hidden !important;
}
/* Keep domain search visually connected to the reassurance cards above it. */
html body .venclo-hero-domain-search {
margin-top: clamp(1.5rem,2.5vw,2.25rem);
margin-bottom: clamp(3.5rem,5vw,5rem);
}
html body .venclo-home-proof-strip {
margin-bottom: 0 !important;
padding-bottom: clamp(.25rem,1vw,.75rem) !important;
background: #f8f8f8 !important;
background-color: #f8f8f8 !important;
}
/* The hero already carries the hard metrics. This band describes the service. */
html body .venclo-home-proof-strip .venclo-home-promises {
width: min(1180px, calc(100% - clamp(2rem, 7vw, 7rem))) !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 0 !important;
padding: clamp(1.4rem, 2.3vw, 2rem) 0 !important;
border-top: 0 !important;
border-bottom: 1px solid rgba(39,45,45,.13) !important;
}
html body .venclo-home-proof-strip .venclo-home-promise {
min-width: 0 !important;
margin: 0 !important;
padding: .15rem clamp(1.5rem, 3vw, 2.8rem) .25rem !important;
border: 0 !important;
border-left: 1px solid rgba(39,45,45,.12) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
html body .venclo-home-proof-strip .venclo-home-promise:first-child {
padding-left: 0 !important;
border-left: 0 !important;
}
html body .venclo-home-proof-strip .venclo-home-promise:last-child { padding-right: 0 !important; }
html body .venclo-home-proof-strip .venclo-home-promise__label {
display: block !important;
margin: 0 0 .7rem !important;
color: #272d2d !important;
font-size: .7rem !important;
font-weight: 700 !important;
letter-spacing: .14em !important;
line-height: 1.2 !important;
text-transform: uppercase !important;
}
html body .venclo-home-proof-strip .venclo-home-promise h2 {
margin: 0 0 .55rem !important;
color: #111 !important;
font-size: clamp(1.18rem, 1.6vw, 1.48rem) !important;
font-weight: 700 !important;
letter-spacing: -.035em !important;
line-height: 1.08 !important;
}
html body .venclo-home-proof-strip .venclo-home-promise p {
max-width: 32rem !important;
margin: 0 !important;
color: #272d2d !important;
font-size: .94rem !important;
line-height: 1.55 !important;
}
@media (max-width: 760px) {
html body .venclo-home-proof-strip .venclo-home-promises {
grid-template-columns: 1fr !important;
padding: .35rem 0 !important;
}
html body .venclo-home-proof-strip .venclo-home-promise,
html body .venclo-home-proof-strip .venclo-home-promise:first-child,
html body .venclo-home-proof-strip .venclo-home-promise:last-child {
padding: 1.35rem 0 !important;
border-left: 0 !important;
border-top: 1px solid rgba(39,45,45,.12) !important;
}
html body .venclo-home-proof-strip .venclo-home-promise:first-child { border-top: 0 !important; }
}
html body .salient-home-hero[data-venclo-original-hero="true"] + section.venclo-home-proof-strip,
html body section.venclo-home-proof-strip {
padding-top: clamp(1.5rem,2.5vw,2.25rem) !important;
padding-bottom: clamp(.25rem,1vw,.75rem) !important;
background: #f8f8f8 !important;
background-color: #f8f8f8 !important;
background-image: none !important;
}
html body .venclo-home-domain-zone,
html body .salient-home-hero[data-venclo-original-hero="true"] + section.venclo-home-domain-zone,
html body .venclo-offer-hero + section.venclo-home-domain-zone {
position: relative;
margin: 0 !important;
padding: 0 0 clamp(.5rem,1vw,1rem) !important;
background: #f8f8f8 !important;
background-color: #f8f8f8 !important;
background-image: none !important;
}
html body .venclo-home-domain-zone .venclo-hero-domain-search {
margin-top: clamp(1.5rem,2.5vw,2.25rem);
}
@media (max-width: 560px) {
html body .venclo-hero-domain-search { margin-top: 1.25rem; margin-bottom: 3.5rem; }
}
/* Keep the full hero composition balanced across laptop and desktop widths. */
@media (min-width: 921px) and (max-width: 1199px) {
html body .venclo-offer-hero__shell {
padding: clamp(4.75rem,7vw,5.6rem) clamp(2rem,4vw,3rem) clamp(1.5rem,3vw,2.25rem);
}
html body .venclo-offer-hero__grid {
grid-template-columns: minmax(0,1.16fr) minmax(330px,.84fr);
gap: clamp(1.5rem,3vw,2.25rem);
}
html body .venclo-offer-hero h1::after {
white-space: pre;
font-size: clamp(3.65rem,6vw,4.35rem);
}
html body .venclo-offer-hero__lead { max-width: 520px; }
html body .venclo-offer-hero__visual { min-height: 340px; }
html body .venclo-offer-hero__visual img { width: min(100%,440px); }
}
@media (min-width: 1200px) and (max-width: 1439px) {
html body .venclo-offer-hero__shell {
padding-left: clamp(3.5rem,5.2vw,4.7rem);
padding-right: clamp(3.5rem,5.2vw,4.7rem);
}
html body .venclo-offer-hero__grid {
grid-template-columns: minmax(0,1.14fr) minmax(390px,.86fr);
gap: clamp(2rem,4vw,3.5rem);
}
html body .venclo-offer-hero h1::after {
white-space: pre;
font-size: clamp(4.35rem,5.45vw,4.9rem);
}
html body .venclo-offer-hero__visual img { width: min(100%,480px); }
}
@media (min-width: 1440px) {
html body .venclo-offer-hero__grid {
grid-template-columns: minmax(0,1.12fr) minmax(430px,.88fr);
gap: clamp(3rem,4.5vw,5rem);
}
html body .venclo-offer-hero h1::after { white-space: pre; }
}
/* Full-width desktop navigation with controlled viewport gutters. */
@media (min-width: 921px) {
html body header.site-main-header {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: clamp(1.25rem,2vw,2.25rem) !important;
padding-right: clamp(1.25rem,2vw,2.25rem) !important;
box-sizing: border-box !important;
}
html body header.site-main-header > div,
html body header.site-main-header > nav,
html body header.site-main-header .site-main-header__inner {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* Site search results stay flat at rest and on interaction. */
html body header.site-main-header .site-search-menu :where(li,a,button,div,.site-search-result),
html body header.site-main-header .site-search-menu :where(li,a,button,div,.site-search-result):hover,
html body header.site-main-header .site-search-menu :where(li,a,button,div,.site-search-result):focus,
html body header.site-main-header .site-search-menu :where(li,a,button,div,.site-search-result):focus-visible,
html body header.site-main-header .site-search-menu :where(li,a,button,div,.site-search-result):active {
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
}
html body header.site-main-header .site-search-menu :where(li,a,button,div,.site-search-result)::before,
html body header.site-main-header .site-search-menu :where(li,a,button,div,.site-search-result)::after {
box-shadow: none !important;
filter: none !important;
}
@media (min-width: 1600px) {
html body header.site-main-header {
padding-left: clamp(1.5rem,2.25vw,3rem) !important;
padding-right: clamp(1.5rem,2.25vw,3rem) !important;
}
}
/* Desktop hero uses the available screen rather than reading like a centred card. */
@media (min-width: 921px) {
html body .venclo-offer-hero {
width: 100vw;
min-height: calc(100svh - 4.5rem);
}
html body .venclo-offer-hero__shell {
display: flex;
width: 100%;
min-height: calc(100svh - 10rem);
align-items: center;
}
html body .venclo-offer-hero__grid {
width: min(1560px,100%);
max-width: none;
}
html body .venclo-offer-hero__visual {
min-height: clamp(360px,48vh,560px);
}
}
@media (min-width: 1600px) {
html body .venclo-offer-hero__grid { width: min(1680px,100%); }
html body .venclo-offer-hero__visual img { width: min(100%,560px); }
}
@media (min-width: 921px) and (max-height: 720px) {
html body .venclo-offer-hero__shell {
min-height: 0;
padding-top: 4.5rem;
}
html body .venclo-offer-hero__visual { min-height: 330px; }
}
/* A longer, softer handoff from the hero gradient into the page surface. */
html body .venclo-offer-hero::after {
height: clamp(9rem,12vw,13rem);
margin-top: -1px;
background:
linear-gradient(
to bottom,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.06) 14%,
rgba(255,255,255,.18) 30%,
rgba(255,255,255,.38) 48%,
rgba(255,255,255,.62) 66%,
rgba(255,255,255,.82) 80%,
rgba(255,255,255,.95) 92%,
#ffffff 100%
),
linear-gradient(112deg,#fffbb4 0%,#fffbb4 43%,#fffee9 67%,#f8f8f8 100%);
}
@media (max-width: 920px) {
html body .venclo-offer-hero::after { height: clamp(7rem,20vw,10rem); }
}
/* Layered abstract hero atmosphere: branded, soft, and intentionally restrained. */
html body .venclo-offer-hero {
position: relative;
isolation: isolate;
background:
radial-gradient(ellipse at 8% 8%,rgba(255,255,255,.74) 0%,rgba(255,255,255,0) 32%),
radial-gradient(ellipse at 38% 88%,rgba(255,251,180,.5) 0%,rgba(255,251,180,0) 38%),
radial-gradient(ellipse at 84% 14%,rgba(255,251,180,.82) 0%,rgba(255,251,180,0) 38%),
radial-gradient(ellipse at 92% 76%,rgba(255,255,255,.66) 0%,rgba(255,255,255,0) 34%),
linear-gradient(118deg,#fffbb4 0%,#fffbb4 34%,#fffee9 58%,#f8f8f8 100%) !important;
}
html body .venclo-offer-hero::before {
content: "";
position: absolute;
inset: 0 0 clamp(9rem,12vw,13rem);
z-index: 0;
pointer-events: none;
opacity: .58;
background:
radial-gradient(circle at 16% 30%,rgba(39,45,45,.032) 0 1px,transparent 1.5px) 0 0/22px 22px,
radial-gradient(ellipse at 72% 40%,transparent 0 26%,rgba(39,45,45,.035) 26.2% 26.45%,transparent 26.7% 34%,rgba(39,45,45,.025) 34.2% 34.45%,transparent 34.7%);
-webkit-mask-image: linear-gradient(100deg,rgba(0,0,0,.22),transparent 42%,rgba(0,0,0,.8) 68%,transparent 96%);
mask-image: linear-gradient(100deg,rgba(0,0,0,.22),transparent 42%,rgba(0,0,0,.8) 68%,transparent 96%);
}
html body .venclo-offer-hero__shell {
position: relative;
z-index: 1;
}
html body .venclo-offer-hero::after {
position: relative;
z-index: 1;
background:
linear-gradient(
to bottom,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.06) 14%,
rgba(255,255,255,.18) 30%,
rgba(255,255,255,.38) 48%,
rgba(255,255,255,.62) 66%,
rgba(255,255,255,.82) 80%,
rgba(255,255,255,.95) 92%,
#ffffff 100%
),
linear-gradient(118deg,#fffbb4 0%,#fffbb4 34%,#fffee9 58%,#f8f8f8 100%);
}
@media (max-width: 920px) {
html body .venclo-offer-hero::before {
bottom: clamp(7rem,20vw,10rem);
opacity: .35;
}
}
/* Final dramatic hero palette override. */
html body .venclo-offer-hero {
background:
radial-gradient(circle at 5% 4%,rgba(255,255,255,.92) 0 9%,rgba(255,255,255,0) 27%),
radial-gradient(circle at 38% 92%,rgba(255,251,180,.9) 0 16%,rgba(255,251,180,0) 38%),
radial-gradient(circle at 79% 9%,rgba(255,251,180,.86) 0 13%,rgba(255,251,180,0) 36%),
radial-gradient(circle at 98% 70%,rgba(255,255,255,.9) 0 14%,rgba(255,255,255,0) 38%),
linear-gradient(122deg,#fffbb4 0%,#fffbb4 36%,#fffee9 55%,#f8f8f8 100%) !important;
}
html body .venclo-offer-hero::before {
opacity: 1;
background:
radial-gradient(circle at 74% 42%,transparent 0 20%,rgba(39,45,45,.085) 20.15% 20.45%,transparent 20.65% 28%,rgba(39,45,45,.06) 28.15% 28.4%,transparent 28.65% 36%,rgba(39,45,45,.04) 36.15% 36.35%,transparent 36.6%),
radial-gradient(circle at 16% 30%,rgba(39,45,45,.075) 0 1.25px,transparent 1.8px) 0 0/24px 24px,
linear-gradient(115deg,transparent 0 53%,rgba(255,255,255,.32) 53.2% 61%,transparent 61.2%);
-webkit-mask-image: linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,.08) 42%,rgba(0,0,0,1) 63%,rgba(0,0,0,.58));
mask-image: linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,.08) 42%,rgba(0,0,0,1) 63%,rgba(0,0,0,.58));
}
html body .venclo-offer-hero__visual::before {
inset: 2% -5% 0 0;
border-radius: 46% 54% 58% 42% / 42% 40% 60% 58%;
background: radial-gradient(circle at 42% 42%,rgba(255,255,255,.94) 0%,rgba(255,255,255,.64) 46%,rgba(255,255,255,0) 72%);
}
html body .venclo-offer-hero::after {
background:
linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.08) 14%,rgba(255,255,255,.22) 30%,rgba(255,255,255,.44) 50%,rgba(255,255,255,.7) 70%,rgba(255,255,255,.9) 86%,#fff 100%);
}
/* Alternative hero concept: bold editorial fields and oversized line geometry. */
html body .venclo-offer-hero {
background:
radial-gradient(ellipse at 13% 4%,rgba(255,255,255,.88) 0 11%,rgba(255,255,255,0) 34%),
radial-gradient(ellipse at 80% 43%,rgba(255,255,255,.9) 0 19%,rgba(255,255,255,.32) 36%,rgba(255,255,255,0) 57%),
linear-gradient(108deg,#fffbb4 0%,#fffbb4 46%,#fffee9 46.2%,#fffee9 72%,#f8f8f8 100%) !important;
}
html body .venclo-offer-hero::before {
opacity: 1;
background:
radial-gradient(circle at 79% 42%,transparent 0 24%,rgba(39,45,45,.08) 24.15% 24.4%,transparent 24.65% 33%,rgba(39,45,45,.055) 33.15% 33.4%,transparent 33.65% 42%,rgba(39,45,45,.035) 42.15% 42.35%,transparent 42.6%),
linear-gradient(108deg,transparent 0 45.7%,rgba(39,45,45,.065) 45.85% 46%,transparent 46.15%),
linear-gradient(162deg,transparent 0 68%,rgba(255,255,255,.46) 68.2% 77%,transparent 77.2%);
-webkit-mask-image: none;
mask-image: none;
}
html body .venclo-offer-hero__visual::before {
inset: -2% -8% -4% -2%;
border-radius: 50%;
background:
radial-gradient(circle at center,rgba(255,255,255,.96) 0%,rgba(255,255,255,.7) 45%,rgba(255,255,255,0) 72%);
}
html body .venclo-offer-hero::after {
background: linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.06) 16%,rgba(255,255,255,.18) 32%,rgba(255,255,255,.4) 52%,rgba(255,255,255,.68) 72%,rgba(255,255,255,.9) 88%,#fff 100%);
}
@media (max-width: 920px) {
html body .venclo-offer-hero {
background:
radial-gradient(ellipse at 82% 68%,rgba(255,255,255,.86) 0 17%,rgba(255,255,255,0) 48%),
linear-gradient(145deg,#fffbb4 0%,#fffbb4 58%,#fffee9 82%,#f8f8f8 100%) !important;
}
html body .venclo-offer-hero::before { opacity: .52; }
}
/* Keep recovered homepage sections in normal document flow after a live resize. */
@media (min-width: 801px) {
html body :is(#venclo-home-proof,#venclo-home-start,#venclo-home-one,#venclo-home-move) {
position: relative !important;
inset: auto !important;
display: block !important;
width: min(1280px,calc(100% - 4rem)) !important;
max-width: 1280px !important;
height: auto !important;
min-height: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
clear: both !important;
overflow: visible !important;
transform: none !important;
translate: none !important;
}
html body #venclo-home-proof {
padding: clamp(4rem,7vw,7rem) 0 clamp(3.5rem,6vw,6rem) !important;
}
html body .venclo-home-proof__header {
position: static !important;
display: grid !important;
grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr) !important;
gap: 1rem 3rem !important;
align-items: end !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
margin: 0 0 clamp(2rem,4vw,3.5rem) !important;
transform: none !important;
}
html body .venclo-home-proof__eyebrow {
grid-column: 1 / -1 !important;
}
html body .venclo-home-proof__title,
html body .venclo-home-proof__intro {
position: static !important;
width: auto !important;
margin: 0 !important;
transform: none !important;
}
html body .venclo-home-proof__grid {
position: static !important;
display: grid !important;
grid-template-columns: repeat(4,minmax(0,1fr)) !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
transform: none !important;
}
html body .venclo-home-proof-card,
html body .venclo-home-proof-card__inner {
position: relative !important;
inset: auto !important;
height: auto !important;
min-height: 0 !important;
transform: none !important;
translate: none !important;
}
html body .venclo-home-start__header,
html body .venclo-home-start__grid,
html body .venclo-home-start__help {
position: static !important;
width: 100% !important;
height: auto !important;
transform: none !important;
translate: none !important;
}
html body .venclo-home-start__header {
display: grid !important;
grid-template-columns: minmax(0,1.35fr) minmax(260px,.65fr) !important;
}
html body .venclo-home-start__grid {
display: grid !important;
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}
html body .venclo-home-start__card {
position: relative !important;
inset: auto !important;
width: auto !important;
height: auto !important;
min-height: 560px !important;
margin: 0 !important;
transform: none !important;
translate: none !important;
}
}
@media (min-width: 801px) and (max-width: 1040px) {
html body .venclo-home-proof__grid {
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}
}
/* Mobile goal cards: a deliberate text-first composition with no colliding artwork. */
@media (max-width: 1184px) {
html body #venclo-home-one {
display: none !important;
}
html body #venclo-home-start .venclo-home-start__card--stack {
display: none !important;
}
}
@media (max-width: 800px) {
html,
html body,
html body #root {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
html body #root :where(main,section,article,aside,div,form) {
min-width: 0 !important;
max-width: 100% !important;
}
html body #root :where(h1,h2,h3,h4) {
max-width: 100% !important;
white-space: normal !important;
overflow-wrap: break-word !important;
text-wrap: balance !important;
}
html body #root :where(img,svg,video,canvas) {
max-width: 100% !important;
}
html body #root :where(.overflow-x-auto,[class*="overflow-x-auto"]) {
max-width: 100% !important;
overflow-x: auto !important;
overscroll-behavior-inline: contain !important;
}
html body #root [role="dialog"].fixed {
left: 1rem !important;
right: 1rem !important;
width: auto !important;
max-width: calc(100vw - 2rem) !important;
}
html body #venclo-home-start {
overflow: hidden !important;
}
html body .venclo-home-start__grid {
gap: .85rem !important;
}
html body .venclo-home-start__card {
display: flex !important;
flex-direction: column !important;
min-height: 0 !important;
height: auto !important;
padding: 1.4rem 1.25rem 1.15rem !important;
border-radius: 1.25rem !important;
}
html body .venclo-home-start__copy {
position: relative !important;
z-index: 2 !important;
display: block !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
transform: none !important;
}
html body .venclo-home-start__copy small {
display: block !important;
max-width: calc(100% - 7rem) !important;
margin: 0 0 1.2rem !important;
font-size: .64rem !important;
line-height: 1.2 !important;
}
html body .venclo-home-start__copy h3 {
position: static !important;
display: block !important;
width: 100% !important;
max-width: 19rem !important;
margin: 0 !important;
font-size: clamp(2.35rem,11.5vw,3.15rem) !important;
line-height: .94 !important;
letter-spacing: -.055em !important;
white-space: normal !important;
text-wrap: balance !important;
transform: none !important;
}
html body .venclo-home-start__copy p {
position: static !important;
display: block !important;
width: 100% !important;
max-width: 31rem !important;
margin: .9rem 0 0 !important;
font-size: .94rem !important;
line-height: 1.5 !important;
white-space: normal !important;
transform: none !important;
}
html body .venclo-home-start__copy ul {
position: static !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 0 !important;
width: 100% !important;
margin: 1.15rem 0 0 !important;
padding: 0 !important;
transform: none !important;
}
html body .venclo-home-start__copy li {
position: relative !important;
display: inline-flex !important;
width: auto !important;
margin: 0 !important;
padding: 0 1rem !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
font-size: .72rem !important;
line-height: 1.45 !important;
white-space: normal !important;
transform: none !important;
}
html body .venclo-home-start__copy li:first-child {
padding-left: 0 !important;
}
html body .venclo-home-start__copy li + li::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: .12rem !important;
width: 1px !important;
height: 1rem !important;
background: rgba(39,45,45,.22) !important;
}
html body .venclo-home-start__visual {
display: none !important;
}
html body .venclo-home-start__popular {
z-index: 3 !important;
top: 1.15rem !important;
right: 1.15rem !important;
max-width: 7rem !important;
white-space: nowrap !important;
}
html body .venclo-home-start__link {
position: static !important;
z-index: 2 !important;
display: flex !important;
width: 100% !important;
margin: 1.25rem 0 0 !important;
padding: 1rem 0 0 !important;
transform: none !important;
}
html body #venclo-home-one {
display: none !important;
}
html body .venclo-home-one__panel,
html body .venclo-home-one__grid,
html body .venclo-home-one__copy {
position: relative !important;
inset: auto !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
transform: none !important;
translate: none !important;
}
html body .venclo-home-one__panel {
padding: 1.5rem !important;
border-radius: 1.35rem !important;
}
html body .venclo-home-one__eyebrow {
position: static !important;
display: block !important;
margin: 0 0 1rem !important;
transform: none !important;
}
html body .venclo-home-one__title {
position: static !important;
display: block !important;
width: 100% !important;
max-width: 19rem !important;
margin: 0 !important;
font-size: clamp(2.5rem,12vw,3.3rem) !important;
line-height: .94 !important;
letter-spacing: -.055em !important;
white-space: normal !important;
text-wrap: balance !important;
transform: none !important;
}
html body .venclo-home-one__intro,
html body .venclo-home-one__terms {
position: static !important;
display: block !important;
width: 100% !important;
margin: 1rem 0 0 !important;
font-size: .92rem !important;
line-height: 1.5 !important;
white-space: normal !important;
transform: none !important;
}
html body .venclo-home-one__benefits {
position: static !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
width: 100% !important;
height: auto !important;
margin: 1.4rem 0 0 !important;
padding: 0 !important;
transform: none !important;
}
html body .venclo-home-one__benefits li {
position: static !important;
display: grid !important;
grid-template-columns: 1.75rem 1fr !important;
gap: .65rem !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: .9rem 0 !important;
transform: none !important;
}
html body .venclo-home-one__benefits li > span,
html body .venclo-home-one__benefits strong,
html body .venclo-home-one__benefits small {
position: static !important;
display: block !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
white-space: normal !important;
transform: none !important;
}
html body .venclo-home-one__benefits small {
margin-top: .25rem !important;
line-height: 1.45 !important;
}
html body .venclo-home-one__actions {
position: static !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: .65rem !important;
width: 100% !important;
margin: 1.25rem 0 0 !important;
transform: none !important;
}
html body .venclo-home-one__showcase {
display: none !important;
}
}
/* Final homepage handoff: hero colour flows directly into the domain-zone grey. */
html body .venclo-offer-hero::after {
background:
linear-gradient(
to bottom,
rgba(248,248,248,0) 0%,
rgba(248,248,248,.12) 16%,
rgba(248,248,248,.3) 32%,
rgba(248,248,248,.56) 52%,
rgba(248,248,248,.78) 72%,
rgba(248,248,248,.94) 88%,
#f8f8f8 100%
) !important;
}
/* Final hero interaction and handoff: solid CTA, seamless off-white finish. */
html body .venclo-offer-hero {
margin-bottom: 0 !important;
}
html body .venclo-offer-hero::after {
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
content: none !important;
}
html body .venclo-offer-hero__primary,
html body .venclo-offer-hero__primary:hover,
html body .venclo-offer-hero__primary:focus-visible,
html body .venclo-offer-hero__primary:active {
background: #111 !important;
background-color: #111 !important;
background-image: none !important;
background-size: auto !important;
background-position: 0 0 !important;
box-shadow: none !important;
filter: none !important;
opacity: 1 !important;
animation: none !important;
transition: background-color 220ms ease,border-color 220ms ease !important;
}
html body .venclo-offer-hero__primary::before {
opacity: 1 !important;
animation: none !important;
transition: none !important;
}
/* A soft descending horizon lets the hero curve into the next section. */
html body .venclo-offer-hero {
overflow: visible !important;
}
html body .venclo-offer-hero::after {
position: absolute !important;
right: auto !important;
bottom: clamp(-4rem,-4vw,-2.75rem) !important;
left: -5% !important;
z-index: 0 !important;
display: block !important;
width: 110% !important;
height: clamp(3.25rem,5vw,4.75rem) !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 0 48% 52% / 0 0 100% 100% !important;
background: linear-gradient(108deg,#fffbb4 0%,#fffbb4 46%,#fffee9 46.2%,#fffee9 72%,#f8f8f8 100%) !important;
box-shadow: none !important;
content: "" !important;
pointer-events: none !important;
}
html body section.venclo-home-proof-strip {
padding-top: clamp(4.75rem,6vw,6rem) !important;
}
@media (max-width:560px) {
html body .venclo-offer-hero::after {
left: -12% !important;
width: 124% !important;
height: 2.75rem !important;
bottom: -2.35rem !important;
}
html body section.venclo-home-proof-strip { padding-top:4rem !important; }
}
/* True inverted separator: the hero's own edge bows down into the page. */
html body .venclo-offer-hero {
min-height: calc(100svh + clamp(3rem,5vw,5rem)) !important;
overflow: hidden !important;
border-radius: 0 0 50% 50% / 0 0 clamp(3rem,5vw,5rem) clamp(3rem,5vw,5rem) !important;
}
html body .venclo-offer-hero__shell {
display: block !important;
min-height: 0 !important;
align-items: initial !important;
}
html body .venclo-offer-hero::after {
display: none !important;
width: 0 !important;
height: 0 !important;
content: none !important;
}
html body section.venclo-home-proof-strip {
padding-top: clamp(2.75rem,4vw,4rem) !important;
}
@media (max-width:560px) {
html body .venclo-offer-hero {
min-height: calc(100svh + 2.25rem) !important;
border-radius: 0 0 50% 50% / 0 0 2.25rem 2.25rem !important;
}
html body .venclo-offer-hero__shell {
min-height: 0 !important;
}
html body section.venclo-home-proof-strip { padding-top:2.75rem !important; }
}
/* Prioritise the homepage hero. The browser can postpone layout and paint for
lower, off-screen sections while keeping stable placeholder dimensions. */
html.venclo-route-home body .salient-home-shell > section:not(.venclo-offer-hero),
html.venclo-route-home body .salient-home-shell > div:not(.venclo-offer-hero) {
content-visibility: auto;
contain-intrinsic-block-size: auto 720px;
}
html.venclo-route-home body .venclo-offer-hero,
html.venclo-route-home body .venclo-offer-hero * {
content-visibility: visible;
}
/* Refreshed homepage colour field. It keeps the established Venclo yellow,
ivory and warm grey palette while replacing the old straight split with a
quieter layered-light composition. The existing curved edge is untouched. */
html.venclo-route-home body .venclo-offer-hero {
background:
radial-gradient(ellipse 54% 70% at 76% 28%, rgba(255,255,255,.82) 0%, rgba(255,255,255,.38) 38%, transparent 72%),
radial-gradient(ellipse 46% 56% at 8% 10%, rgba(255,255,255,.52) 0%, transparent 70%),
linear-gradient(126deg, transparent 0 42%, rgba(255,255,255,.2) 42.2% 58%, transparent 58.2%),
linear-gradient(108deg, #fffbb4 0%, #fffbb4 38%, #fffee9 67%, #f8f8f8 100%) !important;
}
/* Prevent the legacy home hero and interim headline copy from flashing before
the rebuilt hero is ready. */
html.venclo-route-home body .salient-home-hero{
display:none!important;
}
html.venclo-route-home body .venclo-offer-hero h1:not([data-home-copy-ready="true"]){
visibility:hidden!important;
}
/* Centre the desktop composition within the usable viewport below the nav. */
@media(min-width:921px){
html.venclo-route-home body #root .venclo-offer-hero__grid{
transform:translateY(clamp(2rem,5.25vh,2.6rem))!important;
}
}
@media(min-width:921px) and (max-height:720px){
html.venclo-route-home body #root .venclo-offer-hero__grid{
transform:translateY(1.5rem)!important;
}
}
html.venclo-route-home body .venclo-offer-hero::before {
opacity: .55 !important;
background:
radial-gradient(circle at 82% 24%, transparent 0 19%, rgba(39,45,45,.075) 19.15% 19.3%, transparent 19.5% 29%, rgba(39,45,45,.045) 29.15% 29.3%, transparent 29.5%),
radial-gradient(ellipse at 58% 92%, rgba(255,251,180,.58) 0%, rgba(255,251,180,0) 48%) !important;
-webkit-mask-image: linear-gradient(90deg, transparent 0 42%, rgba(0,0,0,.32) 56%, #000 72%, rgba(0,0,0,.5) 100%) !important;
mask-image: linear-gradient(90deg, transparent 0 42%, rgba(0,0,0,.32) 56%, #000 72%, rgba(0,0,0,.5) 100%) !important;
}
/* Home hero headline uses the same display type system as Web Hosting. */
html.venclo-route-home body #root .venclo-offer-hero h1 {
max-width:1120px!important;
font-family:inherit!important;
font-size:clamp(70px,8.5vw,132px)!important;
font-weight:600!important;
line-height:.85!important;
letter-spacing:-.025em!important;
text-wrap:balance!important;
}
@media(min-width:901px) and (max-height:900px){
html.venclo-route-home body #root .venclo-offer-hero h1 {
font-size:clamp(70px,7.5vw,112px)!important;
line-height:.86!important;
}
}
@media(min-width:901px) and (max-height:760px){
html.venclo-route-home body #root .venclo-offer-hero h1 {
font-size:clamp(66px,7vw,102px)!important;
}
}
@media(max-width:650px){
html.venclo-route-home body #root .venclo-offer-hero h1 {
width:100%!important;
max-width:100%!important;
font-size:clamp(52px,15vw,66px)!important;
line-height:.88!important;
white-space:normal!important;
text-wrap:wrap!important;
}
}
/* Launch guard: keep the rebuilt hero and consent panel inside narrow phones. */
@media (max-width: 560px) {
html,
html body,
html body #root {
width: 100% !important;
max-width: 100% !important;
overflow-x: clip !important;
}
html body .venclo-offer-hero,
html body .venclo-offer-hero__shell,
html body .venclo-offer-hero__grid,
html body .venclo-offer-hero__grid > div {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
html body .venclo-offer-hero__shell {
padding-right: 1.25rem !important;
padding-left: 1.25rem !important;
}
html body .venclo-offer-hero__grid > div:first-child {
display: block !important;
}
html body .venclo-offer-hero h1 {
max-width: 100% !important;
font-size: clamp(2.65rem, 12.5vw, 3.05rem) !important;
line-height: .94 !important;
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
html body .venclo-offer-hero__lead,
html body .venclo-offer-hero__note {
inline-size: 100% !important;
max-inline-size: 100% !important;
white-space: normal !important;
overflow-wrap: break-word !important;
}
html body .venclo-offer-hero__benefits {
grid-template-columns: 1fr !important;
gap: .75rem !important;
}
html body .venclo-offer-hero__offer,
html body .venclo-offer-hero__actions {
width: 100% !important;
margin-top: 1.15rem !important;
}
html body .venclo-offer-hero__primary {
width: 100% !important;
}
html body [role="dialog"][aria-label="Cookie consent"] {
width: calc(100vw - 2rem) !important;
max-width: calc(100vw - 2rem) !important;
overflow: hidden !important;
}
html body [role="dialog"][aria-label="Cookie consent"] :where(div, p, li, a, button) {
max-width: 100% !important;
white-space: normal !important;
overflow-wrap: break-word !important;
}
}
html body .venclo-offer-hero__lead{max-width:36rem!important;text-wrap:balance!important}
html body .venclo-offer-hero__lead{
max-width:40rem!important;
font-family:"Archivo",Arial,sans-serif!important;
font-size:clamp(1.08rem,1.35vw,1.22rem)!important;
font-weight:500!important;
line-height:1.43!important;
letter-spacing:-.018em!important;
text-wrap:pretty!important;
}