/* ============================================================ WASHYFI — Homepage (live) Fourart Designs Pvt. Ltd. Summary blocks that each hand off to a detail page. Single file, no build step. Fluid from 320px up. All motion is opt-out via prefers-reduced-motion. ============================================================ */ :root{ --teal-900:#053039; --teal-800:#07454F; --teal-700:#0C6C7C; --teal-600:#12808F; --teal-500:#1A9AA8; --teal-400:#3BB8C4; --aqua:#5FD3DC; --mist:#F3FAFB; --mist-2:#E4F2F4; --paper:#FFFFFF; --ink:#0E262C; --body-c:#41595F; --muted:#6C8288; --line:#E3EBED; --line-dk:rgba(255,255,255,.14); --on-dark:#CDE6EA; --on-dark-mute:#8FB4BB; --display:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --gutter:clamp(1.15rem,4.5vw,4rem); --maxw:1240px; --sec-y:clamp(3.5rem,7vw,6rem); --radius:16px; --shadow:0 1px 2px rgba(14,38,44,.05),0 12px 30px -14px rgba(14,38,44,.16); --shadow-lg:0 2px 4px rgba(14,38,44,.05),0 30px 60px -24px rgba(14,38,44,.34); --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px} body{ margin:0;background:var(--paper);color:var(--body-c); font-family:var(--body);font-size:clamp(15.5px,.35vw + 15px,17px);line-height:1.65; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg{display:block;max-width:100%} img{height:auto} a{color:inherit;text-decoration:none} button{cursor:pointer;border:0;background:none;font:inherit;color:inherit} ul{margin:0;padding:0;list-style:none} p{margin:0} h1,h2,h3,h4{font-family:var(--display);margin:0;color:var(--ink);line-height:1.14;letter-spacing:-.024em;font-weight:800;text-wrap:balance} h2{font-size:clamp(1.65rem,3.4vw,2.6rem)} h3{font-size:clamp(1.08rem,1.4vw,1.25rem);font-weight:700;letter-spacing:-.015em} :focus-visible{outline:3px solid var(--teal-500);outline-offset:3px;border-radius:6px} .skip{ position:absolute;left:-9999px;top:0;z-index:200;background:var(--teal-700);color:#fff; padding:.85rem 1.25rem;font-family:var(--display);font-weight:700;border-radius:0 0 8px 0; } .skip:focus{left:0} .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .sec{padding-block:var(--sec-y)} .sec--mist{background:var(--mist)} .sec--dark{background:var(--teal-800);color:var(--on-dark)} .sec--dark h2,.sec--dark h3{color:#fff} .eyebrow{ display:inline-flex;align-items:center;gap:.6rem; font-family:var(--display);font-size:.72rem;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--teal-600); } .eyebrow::before{content:'';width:24px;height:2px;background:currentColor;flex:none} .sec--dark .eyebrow{color:var(--aqua)} .head{max-width:62ch} .head h2{margin-top:.9rem} .head p{margin-top:.95rem;font-size:clamp(1rem,.35vw + .95rem,1.08rem)} .sec--dark .head p{color:var(--on-dark)} .head + *{margin-top:clamp(1.9rem,3.6vw,2.9rem)} /* ---------- read-more ---------- */ .more{ display:inline-flex;align-items:center;gap:.55rem;margin-top:1.6rem; font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--teal-700); min-height:44px;position:relative; } .more span{position:relative} .more span::after{ content:'';position:absolute;left:0;right:0;bottom:-3px;height:1.5px; background:currentColor;transform:scaleX(0);transform-origin:right; transition:transform .35s var(--ease); } .more:hover span::after{transform:scaleX(1);transform-origin:left} .more svg{transition:transform .35s var(--ease);flex:none} .more:hover svg{transform:translateX(5px)} .sec--dark .more{color:var(--aqua)} .sec--dark .more:hover{color:#fff} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; font-family:var(--display);font-weight:700;font-size:.93rem;letter-spacing:-.01em; min-height:50px;padding:.82rem 1.5rem;border-radius:10px;text-align:center; position:relative;overflow:hidden; transition:background .22s,color .22s,border-color .22s,transform .22s var(--ease),box-shadow .22s; } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn--primary{background:var(--teal-600);color:#fff;box-shadow:0 12px 26px -14px rgba(18,128,143,.95)} .btn--primary:hover{background:var(--teal-700);box-shadow:0 18px 34px -16px rgba(18,128,143,.95)} .btn--light{background:#fff;color:var(--teal-800)} .btn--light:hover{background:var(--mist-2)} .btn--outline{border:1.5px solid var(--line);color:var(--ink);background:#fff} .btn--outline:hover{border-color:var(--teal-500);color:var(--teal-700)} .btn--ghost{border:1.5px solid rgba(255,255,255,.42);color:#fff} .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.12)} /* ---------- utility bar ---------- */ .util{background:var(--teal-900);color:var(--on-dark-mute);font-size:.8rem} .util__in{ max-width:var(--maxw);margin-inline:auto;padding:.5rem var(--gutter); display:flex;align-items:center;justify-content:space-between;gap:1.5rem; } .util a{color:var(--on-dark);white-space:nowrap} .util a:hover{color:#fff} .util__l,.util__r{display:flex;align-items:center;gap:1.4rem;min-width:0} .util__sep{color:rgba(255,255,255,.2)} /* ---------- header ---------- */ .hdr{ position:sticky;top:0;z-index:80;background:rgba(255,255,255,.92); -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent; transition:border-color .3s,box-shadow .3s,background .3s; } .hdr.is-stuck{border-bottom-color:var(--line);box-shadow:0 8px 26px -20px rgba(14,38,44,.5)} .hdr__in{ max-width:var(--maxw);margin-inline:auto;padding:.65rem var(--gutter); display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.5rem); transition:padding .3s var(--ease); } .hdr.is-stuck .hdr__in{padding-block:.4rem} .brand{display:flex;align-items:center;flex:none} .brand img{height:clamp(42px,5.2vw,58px);width:auto;transition:height .3s var(--ease)} .hdr.is-stuck .brand img{height:clamp(38px,4.4vw,48px)} .nav{display:flex;align-items:center;gap:clamp(1rem,1.9vw,2rem);margin-left:auto} .nav a{ font-family:var(--display);font-weight:600;font-size:.94rem;color:var(--ink); padding:.55rem 0;position:relative;white-space:nowrap; } .nav a::after{ content:'';position:absolute;left:0;right:0;bottom:0;height:2px; background:var(--teal-500);transform:scaleX(0);transform-origin:right; transition:transform .3s var(--ease); } .nav a:hover::after{transform:scaleX(1);transform-origin:left} .hdr__cta{display:flex;align-items:center;gap:.6rem;flex:none} .hdr__cta .btn{min-height:44px;padding:.62rem 1.1rem;font-size:.88rem} .burger{ display:none;width:46px;height:46px;margin-left:auto;flex:none; align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--line); } .burger i{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:.28s var(--ease)} .burger i::before,.burger i::after{ content:'';position:absolute;left:0;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.28s var(--ease); } .burger i::before{top:-6.5px} .burger i::after{top:6.5px} .burger[aria-expanded="true"] i{background:transparent} .burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)} .burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)} .drawer{ display:none;background:#fff;border-bottom:1px solid var(--line); padding:.25rem var(--gutter) 1.5rem;max-height:calc(100dvh - 70px);overflow-y:auto; } .drawer.is-open{display:block} .drawer a:not(.btn){ display:block;padding:.95rem .25rem;font-family:var(--display);font-weight:600; color:var(--ink);border-bottom:1px solid var(--line); } .drawer .btn{display:flex;margin-top:.85rem} .drawer__call{margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)} /* ---------- hero ---------- */ .hero{position:relative;isolation:isolate;background:var(--teal-900);overflow:hidden} .hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden} .hero__bg img{ width:100%;height:100%;object-fit:cover;object-position:center; transform:scale(1.08); animation:pushin 18s var(--ease) forwards; } @keyframes pushin{to{transform:scale(1)}} .hero__bg::after{ content:'';position:absolute;inset:0; background: linear-gradient(180deg,rgba(5,48,57,.58) 0%,rgba(5,48,57,.34) 40%,rgba(5,48,57,.88) 100%), linear-gradient(96deg,rgba(5,48,57,.95) 0%,rgba(6,58,68,.80) 46%,rgba(12,108,124,.36) 100%); } .hero__in{ position:relative;max-width:var(--maxw);margin-inline:auto; padding:clamp(3.25rem,8vw,7rem) var(--gutter) clamp(3rem,7vw,6rem); } .hero__badge{ display:inline-flex;align-items:center;gap:.6rem; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24); padding:.44rem .95rem .44rem .72rem;border-radius:100px; font-family:var(--display);font-size:.74rem;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:#fff; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } .hero__badge i{ width:7px;height:7px;border-radius:50%;background:var(--aqua);flex:none; box-shadow:0 0 0 0 rgba(95,211,220,.85);animation:pulse 2.6s infinite; } @keyframes pulse{70%{box-shadow:0 0 0 11px rgba(95,211,220,0)}100%{box-shadow:0 0 0 0 rgba(95,211,220,0)}} .hero h1{ color:#fff;font-size:clamp(2.15rem,5.8vw,4.3rem);font-weight:800; letter-spacing:-.038em;line-height:1.04;max-width:17ch;margin-top:1.5rem; } .hero h1 em{font-style:normal;color:var(--aqua)} .hero__sub{ color:var(--on-dark);margin-top:1.35rem;max-width:50ch; font-size:clamp(1rem,.5vw + .9rem,1.18rem);line-height:1.6; } .hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.1rem} .hero__marks{ display:flex;flex-wrap:wrap;gap:.65rem 2rem;margin-top:2.4rem; padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.16); } .hero__marks li{display:flex;align-items:center;gap:.55rem;color:var(--on-dark);font-size:.89rem;font-weight:500} .hero__marks svg{flex:none;color:var(--aqua)} /* staggered hero entrance */ .hero__badge,.hero h1,.hero__sub,.hero__cta,.hero__marks{ opacity:0;transform:translateY(18px); animation:riseIn .85s var(--ease) forwards; } .hero__badge{animation-delay:.10s} .hero h1{animation-delay:.22s} .hero__sub{animation-delay:.36s} .hero__cta{animation-delay:.48s} .hero__marks{animation-delay:.60s} @keyframes riseIn{to{opacity:1;transform:none}} .hero__scroll{ position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:2; display:flex;flex-direction:column;align-items:center;gap:.45rem; font-family:var(--display);font-size:.64rem;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:rgba(205,230,234,.7); } .hero__scroll i{ display:block;width:1px;height:34px;background:linear-gradient(rgba(95,211,220,0),var(--aqua)); animation:drop 2.2s var(--ease) infinite; } @keyframes drop{0%{transform:scaleY(.3);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} @media (max-width:720px){.hero__scroll{display:none}} /* ---------- stat band ---------- */ .stats{background:var(--paper);border-bottom:1px solid var(--line)} .stats__grid{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;background:var(--line);border-inline:1px solid var(--line); } @media (max-width:960px){.stats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}} .stat{background:#fff;padding:clamp(1.5rem,3vw,2.4rem) clamp(1.1rem,2vw,1.9rem);transition:background .3s} .stat:hover{background:var(--mist)} .stat b{ display:block;font-family:var(--display);font-weight:800;color:var(--teal-700); font-size:clamp(1.8rem,3.2vw,2.6rem);letter-spacing:-.03em;line-height:1; font-variant-numeric:tabular-nums; } .stat b sup{font-size:.44em;font-weight:800;top:-.62em;position:relative;letter-spacing:0} .stat > span{display:block;margin-top:.6rem;font-size:.88rem;color:var(--muted);line-height:1.45} /* ---------- split ---------- */ .split{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,4.5vw,4.5rem);align-items:center; } .split--flip .split__media{order:2} .split__media{ position:relative;width:100%;padding-top:74%;border-radius:var(--radius); overflow:hidden;background:var(--teal-900);box-shadow:var(--shadow-lg); } .split__media img{ position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover; transition:transform .8s var(--ease); } .split__media:hover img{transform:scale(1.045)} @media (max-width:900px){ .split{grid-template-columns:1fr;gap:2rem} .split--flip .split__media{order:0} } /* ---------- services ---------- */ .svc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem} @media (max-width:1080px){.svc{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:480px){.svc{grid-template-columns:1fr}} .svc__c{ display:flex;align-items:center;gap:.95rem; background:#fff;border:1px solid var(--line);border-radius:13px; padding:1rem 1.15rem;min-height:74px;position:relative;overflow:hidden; transition:border-color .25s,box-shadow .25s,transform .25s var(--ease); } .svc__c::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:3px; background:var(--teal-500);transform:scaleY(0);transform-origin:bottom; transition:transform .3s var(--ease); } .svc__c:hover{border-color:var(--teal-400);box-shadow:var(--shadow);transform:translateY(-2px)} .svc__c:hover::before{transform:scaleY(1);transform-origin:top} .svc__ic{ width:42px;height:42px;border-radius:11px;flex:none; background:var(--mist-2);color:var(--teal-700); display:flex;align-items:center;justify-content:center; transition:background .25s,color .25s,transform .3s var(--ease); } .svc__c:hover .svc__ic{background:var(--teal-600);color:#fff;transform:scale(1.06)} .svc__c h3{font-size:.99rem;line-height:1.3} .gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem;margin-top:.9rem} @media (max-width:900px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}} .gallery figure{margin:0;position:relative;border-radius:13px;overflow:hidden;background:var(--teal-900)} .gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s var(--ease)} .gallery figure:hover img{transform:scale(1.07)} .gallery figcaption{ position:absolute;left:0;right:0;bottom:0;padding:1.6rem .95rem .8rem; font-family:var(--display);font-weight:700;font-size:.86rem;color:#fff; background:linear-gradient(180deg,rgba(5,48,57,0),rgba(5,48,57,.88)); } /* ---------- live studio: the process line ---------- */ .proc{position:relative} .proc__line{ position:absolute;left:0;right:0;top:26px;height:2px; background:rgba(255,255,255,.14);overflow:hidden; } .proc__line i{ display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--aqua),var(--teal-400)); transform-origin:left;transition:transform 1.5s var(--ease); } @media (max-width:1000px){.proc__line{display:none}} .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem;position:relative} @media (max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.steps{grid-template-columns:1fr}} .step{padding-top:0} .step__dot{ display:block; /* it is a : without this, w/h are ignored */ width:14px;height:14px;border-radius:50%;background:var(--teal-800); border:2px solid var(--aqua);margin-bottom:1.5rem;position:relative;z-index:2; transition:transform .5s var(--ease); } .js-anim .proc.is-in .step:nth-child(2) .step__dot{transition-delay:.28s} .js-anim .proc.is-in .step:nth-child(3) .step__dot{transition-delay:.56s} .js-anim .proc.is-in .step:nth-child(4) .step__dot{transition-delay:.84s} @media (max-width:1000px){.step__dot{margin-bottom:1rem}} .step b{display:block;font-family:var(--display);font-weight:800;font-size:.76rem;letter-spacing:.14em;color:var(--aqua);margin-bottom:.65rem} .step h3{font-size:1.08rem;margin-bottom:.4rem} .step p{font-size:.91rem;color:var(--on-dark-mute)} /* ---------- franchise ---------- */ .fmt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem} @media (max-width:880px){.fmt{grid-template-columns:1fr}} .fmt__c{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column; transition:transform .3s var(--ease),box-shadow .3s; } .fmt__c:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)} .fmt__media{position:relative;flex:none;width:100%;padding-top:64%;background:var(--teal-900);overflow:hidden} .fmt__media img{ position:absolute;top:0;left:0;width:100%;height:100%; object-fit:cover;object-position:center 38%;transition:transform .8s var(--ease); } .fmt__c:hover .fmt__media img{transform:scale(1.06)} .fmt__b{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1} .fmt__tag{ display:inline-block;align-self:flex-start;background:var(--mist-2);color:var(--teal-700); font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.12em; text-transform:uppercase;padding:.32rem .68rem;border-radius:6px; } .fmt__b h3{font-size:1.38rem;font-weight:800;margin:.78rem 0 .42rem} .fmt__b p{font-size:.93rem} .fmt__amt{margin-top:auto;padding-top:1.2rem} .fmt__amt::before{content:'';display:block;height:1px;background:var(--line);margin-bottom:1.15rem} .fmt__amt span{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600} .fmt__amt b{display:block;font-family:var(--display);font-weight:800;color:var(--teal-700);font-size:1.55rem;letter-spacing:-.02em;margin-top:.22rem;font-variant-numeric:tabular-nums} .fmt__meta{margin-top:.52rem;font-size:.86rem;color:var(--muted)} .fmt__note{margin-top:1.4rem;font-size:.84rem;color:var(--muted)} /* ---------- chips ---------- */ .chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem} .chip{ border:1px solid var(--line);border-radius:100px;padding:.48rem 1rem; font-size:.86rem;font-weight:600;font-family:var(--display);color:var(--ink);background:#fff; transition:border-color .22s,color .22s,transform .22s var(--ease); } .chip:hover{border-color:var(--teal-400);color:var(--teal-700);transform:translateY(-1px)} /* ---------- closing CTA ---------- */ .cta{background:linear-gradient(122deg,var(--teal-800),var(--teal-600));color:#fff;position:relative;overflow:hidden} .cta::before{ content:'';position:absolute;top:-40%;right:-10%;width:520px;height:520px;border-radius:50%; background:radial-gradient(circle,rgba(95,211,220,.22),transparent 70%);pointer-events:none; } .cta__in{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,4vw,3.5rem);align-items:center} @media (max-width:900px){.cta__in{grid-template-columns:1fr}} .cta h2{color:#fff} .cta p{color:rgba(255,255,255,.87);margin-top:.95rem;max-width:46ch} .cta__btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem} @media (max-width:560px){.cta__btns .btn{flex:1 1 100%}} .cta__info{ display:grid;gap:1.05rem;background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);border-radius:var(--radius); padding:clamp(1.4rem,2.5vw,1.9rem); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } .cta__r{display:flex;gap:.9rem;align-items:flex-start} .cta__r svg{flex:none;color:var(--aqua);margin-top:.2rem} .cta__r b{display:block;font-family:var(--display);font-weight:700;color:#fff;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase} .cta__r p,.cta__r a{font-size:.94rem;line-height:1.55;color:rgba(255,255,255,.88);margin-top:.2rem} .cta__r a:hover{color:#fff} /* ---------- footer ---------- */ .ftr{background:var(--teal-900);color:var(--on-dark-mute);padding-top:clamp(3rem,6vw,4.5rem)} .ftr__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(auto-fit,minmax(150px,1fr));gap:clamp(2rem,4vw,3rem)} .ftr__logo{background:#fff;border-radius:10px;padding:.45rem .7rem;display:inline-block;margin-bottom:1.15rem} .ftr__logo img{height:46px;width:auto} .ftr p{font-size:.9rem;line-height:1.65;max-width:38ch} .ftr h4{font-family:var(--display);font-size:.82rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin-bottom:1.1rem} .ftr ul{display:grid;gap:.65rem} .ftr ul a{font-size:.9rem;transition:color .2s,padding-left .25s var(--ease)} .ftr ul a:hover{color:#fff;padding-left:4px} .ftr__tel{display:inline-block;margin-top:1.2rem;font-family:var(--display);font-weight:800;font-size:1.15rem;color:#fff} .ftr__base{ margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid rgba(255,255,255,.12); padding:1.4rem 0 clamp(1.5rem,3vw,2rem); display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.82rem; } /* ---------- whatsapp float ---------- */ .wa{ position:fixed;right:clamp(.9rem,2.5vw,1.5rem);bottom:clamp(.9rem,2.5vw,1.5rem);z-index:70; width:56px;height:56px;border-radius:50%;background:#25D366; display:flex;align-items:center;justify-content:center; box-shadow:0 12px 30px -8px rgba(5,48,57,.55); transition:transform .25s var(--ease),box-shadow .25s; } .wa:hover{transform:scale(1.08);box-shadow:0 16px 36px -10px rgba(5,48,57,.6)} /* ---------- scroll reveal ---------- Content is VISIBLE by default. The hidden start state is applied only once the script has confirmed it can animate, so a JS or IntersectionObserver failure can never leave the page blank. */ .reveal{opacity:1;transform:none} /* used for a single frame when reverting, so nothing animates backwards */ .no-transition *,.no-transition *::before,.no-transition *::after{transition:none!important} .js-anim .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .js-anim .reveal.is-in{opacity:1;transform:none} .js-anim .reveal-d1{transition-delay:.09s} .js-anim .reveal-d2{transition-delay:.18s} .js-anim .reveal-d3{transition-delay:.27s} /* the process line and its dots follow the same rule */ .proc__line i{transform:scaleX(1)} .js-anim .proc__line i{transform:scaleX(0)} .js-anim .proc.is-in .proc__line i{transform:scaleX(1)} .step__dot{transform:scale(1)} .js-anim .step__dot{transform:scale(0)} .js-anim .proc.is-in .step__dot{transform:scale(1)} /* ---------- responsive: header ---------- */ @media (max-width:1080px){ .nav,.hdr__cta{display:none} .burger{display:flex} } @media (max-width:900px){ .util__l span:nth-child(n+3),.util__sep:nth-of-type(n+2){display:none} } @media (max-width:720px){ html{scroll-padding-top:78px} .util{display:none} .hero__cta .btn{flex:1 1 100%} .ftr__grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))} .ftr__grid > :first-child{grid-column:1/-1} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important; } .hero__badge,.hero h1,.hero__sub,.hero__cta,.hero__marks{opacity:1;transform:none} .hero__bg img{transform:none} } @media print{ .hdr,.util,.wa,.drawer,.hero__cta,.hero__scroll{display:none} body{color:#000} .js-anim .reveal{opacity:1;transform:none} } /* ============================================================ PAGE-LEVEL COMPONENTS (detail pages) ============================================================ */ /* ---------- page hero (shorter than the homepage hero) ---------- */ .phero{position:relative;isolation:isolate;background:var(--teal-900);overflow:hidden} .phero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden} .phero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%} .phero__bg::after{ content:'';position:absolute;inset:0; background: linear-gradient(180deg,rgba(5,48,57,.72) 0%,rgba(5,48,57,.60) 50%,rgba(5,48,57,.92) 100%), linear-gradient(96deg,rgba(5,48,57,.94) 0%,rgba(6,58,68,.80) 55%,rgba(12,108,124,.42) 100%); } .phero__in{ position:relative;max-width:var(--maxw);margin-inline:auto; padding:clamp(2.5rem,6vw,4.5rem) var(--gutter) clamp(2.5rem,5.5vw,4rem); } .phero h1{ color:#fff;font-size:clamp(1.95rem,4.6vw,3.35rem);font-weight:800; letter-spacing:-.036em;line-height:1.05;max-width:20ch;margin-top:1.1rem; } .phero h1 em{font-style:normal;color:var(--aqua)} .phero p{color:var(--on-dark);margin-top:1.15rem;max-width:56ch;font-size:clamp(1rem,.45vw + .9rem,1.14rem)} .phero .eyebrow{color:var(--aqua)} /* ---------- breadcrumb ---------- */ .crumb{ display:flex;flex-wrap:wrap;align-items:center;gap:.5rem; font-size:.83rem;color:var(--on-dark-mute); } .crumb a:hover{color:#fff} .crumb span[aria-current]{color:#fff;font-weight:600} .crumb i{font-style:normal;opacity:.5} /* ---------- prose ---------- */ .prose{max-width:70ch} .prose p + p{margin-top:1rem} .prose h3{margin-top:2rem;margin-bottom:.6rem} /* ---------- vision / mission cards ---------- */ .vm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem} @media (max-width:900px){.vm{grid-template-columns:1fr}} .vm__c{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:clamp(1.5rem,2.6vw,2.1rem);border-top:3px solid var(--teal-500); box-shadow:var(--shadow); } .vm__c h3{margin-bottom:.7rem} .vm__c p{font-size:.97rem} /* ---------- full service cards (services page) ---------- */ .svcfull{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem} @media (max-width:820px){.svcfull{grid-template-columns:1fr}} .svcfull__c{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:clamp(1.5rem,2.6vw,2rem);display:flex;gap:1.2rem; transition:border-color .25s,box-shadow .25s,transform .25s var(--ease); } .svcfull__c:hover{border-color:var(--teal-400);box-shadow:var(--shadow-lg);transform:translateY(-3px)} .svcfull__ic{ width:52px;height:52px;border-radius:13px;flex:none; background:var(--mist-2);color:var(--teal-700); display:flex;align-items:center;justify-content:center; } .svcfull__c h3{margin-bottom:.5rem} .svcfull__c p{font-size:.95rem} /* ---------- numbered lists ---------- */ .num{display:grid;gap:.85rem} .num li{display:flex;gap:.9rem;align-items:flex-start;font-size:.97rem} .num li b{ flex:none;width:30px;height:30px;border-radius:9px;background:var(--mist-2);color:var(--teal-700); display:flex;align-items:center;justify-content:center; font-family:var(--display);font-weight:800;font-size:.84rem;margin-top:.1rem; } .sec--dark .num li{color:var(--on-dark)} .sec--dark .num li b{background:rgba(255,255,255,.13);color:#fff} .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,3.5rem)} @media (max-width:820px){.two{grid-template-columns:1fr;gap:2.25rem}} /* ---------- tick list ---------- */ .ticks{display:grid;gap:.7rem} .ticks li{display:flex;gap:.75rem;align-items:flex-start;font-size:.96rem} .ticks svg{flex:none;margin-top:.3rem;color:var(--teal-600)} .sec--dark .ticks svg{color:var(--aqua)} .sec--dark .ticks li{color:var(--on-dark)} .ticks--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem 1.8rem} @media (max-width:640px){.ticks--2{grid-template-columns:1fr}} /* ---------- franchise: at-a-glance comparison ---------- */ .cmpwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);background:#fff} .cmp{width:100%;border-collapse:collapse;min-width:660px} .cmp th,.cmp td{text-align:left;padding:1rem 1.15rem;border-bottom:1px solid var(--line);vertical-align:top} .cmp thead th{background:var(--mist);border-bottom:2px solid var(--teal-600)} .cmp thead th:first-child{background:#fff;border-bottom-color:var(--line)} .cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0} .cmp th[scope="row"]{ font-family:var(--display);font-size:.76rem;font-weight:800;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);white-space:nowrap;width:1%; } .cmp__name{font-family:var(--display);font-weight:800;color:var(--ink);font-size:1.15rem;letter-spacing:-.02em;display:block} .cmp__kind{display:block;font-family:var(--body);font-size:.78rem;font-weight:600;color:var(--teal-700);margin-top:.25rem;letter-spacing:.02em} .cmp td{font-size:.93rem;color:var(--body-c)} .cmp td b{font-family:var(--display);font-weight:700;color:var(--ink)} .cmp__go{ display:inline-flex;align-items:center;gap:.4rem;font-family:var(--display); font-weight:700;font-size:.86rem;color:var(--teal-700);min-height:40px; } .cmp__go:hover{color:var(--teal-600)} .cmpnote{margin-top:.9rem;font-size:.83rem;color:var(--muted)} @media (max-width:620px){ /* give the data columns more of the screen; the table scrolls sideways in its own box */ .cmp{min-width:560px} .cmp th,.cmp td{padding:.75rem .8rem} .cmp th[scope="row"]{font-size:.66rem;letter-spacing:.07em} .cmp__name{font-size:1.02rem} .cmp td{font-size:.88rem} } /* ---------- franchise: one section per format ---------- */ .fmtsec{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,4.5vw,4rem);align-items:start} .fmtsec--flip .fmtsec__media{order:2} @media (max-width:900px){ .fmtsec{grid-template-columns:1fr;gap:2rem} .fmtsec--flip .fmtsec__media{order:0} } .fmtsec__media{position:sticky;top:110px} @media (max-width:900px){.fmtsec__media{position:static}} .fmtsec__fig{position:relative;width:100%;padding-top:74%;border-radius:var(--radius);overflow:hidden;background:var(--teal-900);box-shadow:var(--shadow-lg)} .fmtsec__fig img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center 42%} .fmtsec h2{font-size:clamp(1.6rem,3.2vw,2.35rem);margin:.85rem 0 .7rem} .fmtsec__lead{font-size:1.02rem} .fmtsec__sub{ font-family:var(--display);font-size:.8rem;font-weight:800;letter-spacing:.12em; text-transform:uppercase;color:var(--teal-700);margin:1.9rem 0 .85rem; } .sec--dark .fmtsec__sub{color:var(--aqua)} .model__tag{ display:inline-block;background:var(--mist-2);color:var(--teal-700); font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.13em; text-transform:uppercase;padding:.34rem .7rem;border-radius:6px; } .sec--dark .model__tag{background:rgba(255,255,255,.12);color:#fff} /* spec strip inside a format section */ .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:1.6rem} @media (max-width:480px){.facts{grid-template-columns:1fr}} .fact{background:#fff;padding:.95rem 1.1rem} .fact span{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700} .fact b{display:block;font-family:var(--display);font-weight:800;color:var(--ink);font-size:.98rem;margin-top:.28rem;line-height:1.35} .sec--dark .facts{background:var(--line-dk);border-color:var(--line-dk)} .sec--dark .fact{background:rgba(255,255,255,.05)} .sec--dark .fact span{color:var(--on-dark-mute)} .sec--dark .fact b{color:#fff} /* ---------- market figures ---------- */ .mfigs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem} .mfig{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:13px;padding:1.4rem} .mfig b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.025em;line-height:1;color:#fff} .mfig span{display:block;font-size:.84rem;color:rgba(255,255,255,.82);margin-top:.5rem;line-height:1.45} /* ---------- steps (numbered, light) ---------- */ .stepgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem} @media (max-width:960px){.stepgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){.stepgrid{grid-template-columns:1fr}} .stp{background:#fff;border:1px solid var(--line);border-radius:13px;padding:1.45rem 1.5rem} .stp b{ display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px; background:var(--teal-700);color:#fff;font-family:var(--display);font-weight:800;font-size:.95rem;margin-bottom:.95rem; } .stp h3{font-size:1.04rem;margin-bottom:.35rem} .stp p{font-size:.91rem} /* ---------- FAQ ---------- */ .faq{max-width:840px;display:grid;gap:.7rem} .faq details{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden} .faq details[open]{border-color:var(--teal-400)} .faq summary{ list-style:none;cursor:pointer;padding:1.15rem 3.2rem 1.15rem 1.35rem;position:relative; font-family:var(--display);font-weight:700;color:var(--ink);font-size:1rem;min-height:58px; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:'';position:absolute;right:1.35rem;top:50%;width:10px;height:10px; border-right:2px solid var(--teal-600);border-bottom:2px solid var(--teal-600); transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease); } .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)} .faq .a{padding:0 1.35rem 1.35rem;font-size:.95rem} /* ---------- contact info rows ---------- */ .info{display:grid;gap:1.15rem} .info__r{display:flex;gap:.95rem;align-items:flex-start} .info__r svg{flex:none;color:var(--teal-600);margin-top:.2rem} .info__r b{display:block;font-family:var(--display);font-weight:700;color:var(--ink);font-size:.96rem} .info__r p,.info__r a{font-size:.93rem;line-height:1.55} .info__r a:hover{color:var(--teal-700)} /* ---------- enquiry form ---------- */ .form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} .form__tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--mist);border-bottom:1px solid var(--line)} @media (max-width:560px){.form__tabs{grid-template-columns:1fr}} .form__tab{ min-height:58px;padding:.95rem .75rem;font-family:var(--display);font-weight:700;font-size:.93rem; color:var(--muted);border-bottom:3px solid transparent;transition:background .2s,color .2s,border-color .2s; } .form__tab[aria-selected="true"]{background:#fff;color:var(--teal-700);border-bottom-color:var(--teal-600)} .form__body{padding:clamp(1.4rem,3vw,2rem)} .form__body[hidden]{display:none} .fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem} @media (max-width:560px){.fields{grid-template-columns:1fr}} .f{display:flex;flex-direction:column;gap:.38rem;min-width:0} .f--full{grid-column:1/-1} .f label{font-family:var(--display);font-size:.83rem;font-weight:700;color:var(--ink)} .f label i{font-style:normal;color:#C0392B} .f input,.f select,.f textarea{ width:100%;min-height:50px;padding:.72rem .9rem;background:#fff;color:var(--ink); border:1.5px solid var(--line);border-radius:9px;font-size:.95rem;font-family:var(--body); transition:border-color .18s,box-shadow .18s; } .f textarea{min-height:104px;resize:vertical} .f select{ appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236C8288' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.4rem; } .f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--teal-500);box-shadow:0 0 0 3px rgba(26,154,168,.16)} .f input[aria-invalid="true"],.f select[aria-invalid="true"],.f textarea[aria-invalid="true"]{border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.12)} .f .err{font-size:.79rem;color:#C0392B;font-weight:600;min-height:1em} .form__note{margin-top:1rem;font-size:.83rem;color:var(--muted);line-height:1.55} .form__done{padding:clamp(1.6rem,3vw,2.4rem);text-align:center} .form__done[hidden]{display:none} .form__tick{ width:58px;height:58px;border-radius:50%;background:var(--mist-2);color:var(--teal-700); display:flex;align-items:center;justify-content:center;margin:0 auto 1.15rem; } .form__done h3{font-size:1.2rem;margin-bottom:.55rem} .form__done p{font-size:.94rem} .form__done .btn{margin-top:1.35rem;width:100%} /* ---------- generic media block ---------- */ .figure{position:relative;width:100%;padding-top:62%;border-radius:var(--radius);overflow:hidden;background:var(--teal-900);box-shadow:var(--shadow-lg)} .figure img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover} /* ---------- active nav item ---------- */ .nav a[aria-current="page"]{color:var(--teal-700)} .nav a[aria-current="page"]::after{transform:scaleX(1)} .drawer a[aria-current="page"]{color:var(--teal-700)} /* top-align a split whose columns differ a lot in height (form pages) */ .split--top{align-items:start} /* visually hidden but available to screen readers */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ============================================================ VIDEO — click-to-load facade The poster is served from our own domain and YouTube is not contacted at all until the visitor presses play. Keeps the page fast and sets no third-party cookies on arrival. ============================================================ */ .video{ position:relative;width:100%;padding-top:56.25%; border-radius:var(--radius);overflow:hidden; background:var(--teal-900);box-shadow:var(--shadow-lg); } .video > img,.video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0} .video > img{object-fit:cover} .video__btn{ position:absolute;top:0;left:0;width:100%;height:100%; display:flex;align-items:center;justify-content:center; background:linear-gradient(180deg,rgba(5,48,57,.18),rgba(5,48,57,.46)); cursor:pointer;transition:background .3s var(--ease); } .video__btn:hover{background:linear-gradient(180deg,rgba(5,48,57,.10),rgba(5,48,57,.34))} .video__play{ display:flex;align-items:center;justify-content:center; width:clamp(64px,9vw,88px);height:clamp(64px,9vw,88px);border-radius:50%; background:rgba(255,255,255,.94);color:var(--teal-800); box-shadow:0 14px 40px -12px rgba(5,48,57,.7); transition:transform .3s var(--ease),background .3s; } .video__btn:hover .video__play{transform:scale(1.07);background:#fff} .video__play svg{margin-left:4px} .videocap{ margin-top:.95rem;font-size:.87rem;color:var(--muted); display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .7rem; } .videocap b{font-family:var(--display);font-weight:700;color:var(--ink)} .sec--dark .videocap{color:var(--on-dark-mute)} .sec--dark .videocap b{color:#fff} /* ---------- dark call to action, paired with .btn--primary ---------- */ .btn--dark{background:var(--teal-900);color:#fff;box-shadow:0 12px 26px -14px rgba(5,48,57,.9)} .btn--dark:hover{background:var(--teal-800)} .btn--wa{background:#25D366;color:#04310F;box-shadow:0 12px 26px -14px rgba(37,211,102,.95)} .btn--wa:hover{background:#1EB755;color:#03260C} /* ============================================================ WHATSAPP DIALOG The float opens this instead of jumping straight to WhatsApp, so the enquiry arrives with the details already filled in. The float keeps its wa.me href as a no-JS fallback. ============================================================ */ .wadlg{ border:0;padding:0;border-radius:18px; width:min(460px,calc(100vw - 2rem));max-height:calc(100dvh - 2.5rem); background:var(--paper);color:var(--body-c);overflow:auto; box-shadow:0 30px 80px -24px rgba(5,48,57,.6); } .wadlg::backdrop{background:rgba(5,48,57,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .wadlg[open]{animation:dlgIn .28s var(--ease)} @keyframes dlgIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}} .wadlg__x{ position:absolute;top:.85rem;right:.85rem;z-index:2; width:38px;height:38px;border-radius:10px; display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.16);color:#fff;transition:background .2s; } .wadlg__x:hover{background:rgba(255,255,255,.3)} .wadlg__hd{background:var(--teal-700);color:#fff;padding:1.35rem clamp(1.25rem,4vw,1.75rem)} .wadlg__hd h2{color:#fff;font-size:1.22rem;padding-right:2.5rem} .wadlg__hd p{font-size:.88rem;color:rgba(255,255,255,.86);margin-top:.35rem} .wadlg__body{padding:clamp(1.25rem,4vw,1.75rem)} .wadlg__body[hidden]{display:none} .wadlg__done{padding:clamp(1.6rem,5vw,2.25rem);text-align:center} .wadlg__done[hidden]{display:none} .wadlg__done h3{font-size:1.18rem;margin-bottom:.5rem} .wadlg__done p{font-size:.93rem} @media (prefers-reduced-motion:reduce){.wadlg[open]{animation:none}} /* ============================================================ WORDPRESS ADJUSTMENTS wp_nav_menu() outputs