:root{--oviyas-blue:#006ab8;--oviyas-red:#f80100;--oviyas-orange:#fea201;--oviyas-green:#3bad4c;--oviyas-cyan:#00bee9} body > nav.fixed{padding-block:clamp(12px,1vw,20px);background:rgba(255,249,240,.78);-webkit-backdrop-filter:blur(18px) saturate(120%);backdrop-filter:blur(18px) saturate(120%)} /* Shared header spec: keep in sync with .ov-nav / .ov-menu-btn in service-page.css. */ body > nav.fixed>div>button{display:inline-flex;align-items:center;height:48px;padding:0 clamp(18px,2vw,30px);border-radius:6px;font-size:clamp(18px,1.5vw,24px);line-height:1} nav a[aria-label="Home"]{width:auto!important;height:auto!important;justify-content:flex-start!important} .oviyas-brand-logo{display:inline-block;height:2.2vw;min-height:30px} .oviyas-brand-logo svg{display:block;height:100%;width:auto} /* Loader mark: the round logo whose petals swirl in one by one (driven from brand-marks.js). */ #loader .oviyas-loader-mark{position:absolute;left:50%;top:50%;width:max(10vw,115px);transform:translate(-50%,-50%);z-index:20;pointer-events:none} #loader .oviyas-loader-logo{display:block;width:100%;height:auto;clip-path:circle(50% at 50% 50%)} #loader .oviyas-loader-petal{transform-box:view-box;transform-origin:50% 50%} #loader>div.relative.z-10{visibility:hidden} .oviyas-hero-logo{position:absolute;left:54%;top:22%;width:23vw;height:23vw;z-index:3;will-change:transform,opacity;pointer-events:none;filter:drop-shadow(0 2vw 2vw rgba(70,55,33,.08))} .oviyas-hero-logo img{display:block;width:100%;height:100%;object-fit:contain} #Hero h1,#Hero>div:last-child{z-index:5} #Hero .oviyas-logo-ghost{position:absolute;right:-4vw;top:3vw;width:32vw;height:32vw;background:var(--beige);opacity:.65;mask:url('/oviyas/logo.svg') center/contain no-repeat;transform:rotate(-18deg);z-index:0} #Hero>div.size-\[30vw\]{opacity:0!important} /* Leftover decorative wedge illustration doodles, not part of the studio's visual language. */ div[class*="pointer-events-none max-md:size-[30vw] size-[10vw] top-[10vw]"], div[class*="text-light-beige size-[16vw] max-md:bottom-[60vw]"], div[class*="pointer-events-none max-md:size-[35vw] size-[15vw] top-[9vw]"]{display:none!important} #flavours [class*="grid"],#flavours [class*="flex"]{--oviyas-service-count:3} /* Four service cans in two rows of two (the bundle lays them out as one flex row). */ @media(min-width:768px){ /* Row explicitly: the bundle's md breakpoint is 1025px, so tablets get its flex-col. */ #flavours div:has(>.group.cursor-pointer){flex-direction:row;align-items:stretch;flex-wrap:wrap;gap:1.4vw} #flavours div:has(>.group.cursor-pointer)>.group{flex:0 0 calc((100% - 1.4vw)/2);width:calc((100% - 1.4vw)/2)} }#reviews .oviyas-work-tag{font-family:var(--font-patrick-hand);color:var(--gold);margin-bottom:.5rem;text-transform:uppercase} @media(max-width:768px){.oviyas-brand-logo{height:28px;min-height:0}.oviyas-hero-logo{left:20%;top:35%;width:60vw;height:60vw}#Hero .oviyas-logo-ghost{right:-27vw;top:8vh;width:70vw;height:70vw;opacity:.45}#loader .oviyas-loader-mark{width:32vw}} @media(prefers-reduced-motion:reduce){.oviyas-hero-logo{transform:none!important}} /* Project thumbnails sourced from oviyas.com, retaining the draggable track. */ #reviews [data-card]{height:auto;min-height:0;width:clamp(290px,31vw,540px);padding:16px 16px 24px;align-items:stretch;justify-content:flex-start;text-align:left;gap:0;border-width:2px;border-radius:26px;overflow:hidden} #reviews [data-card]>span{display:none} #reviews .oviyas-work-thumb{display:block;aspect-ratio:4/3;width:100%;overflow:hidden;border-radius:14px;background:#EAF4F1;margin-bottom:22px} #reviews .oviyas-work-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease} #reviews .oviyas-work-thumb:hover img{transform:scale(1.035)} #reviews [data-card] h3{font-size:clamp(28px,2.5vw,44px);line-height:1.08;padding:0 8px} #reviews [data-card] h3 a{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;color:inherit} #reviews [data-card] h3 a span{font-family:Arial,sans-serif;font-size:24px;font-weight:400} #reviews [data-card] p{font-size:clamp(18px,1.45vw,24px);line-height:1.2;margin-top:8px;padding:0 8px} #reviews [data-card] a:focus-visible{outline:3px solid #F6BE4F;outline-offset:3px} @media(max-width:768px){#reviews [data-card]{width:78vw;max-width:420px;padding:12px 12px 20px;border-radius:22px}#reviews .oviyas-work-thumb{margin-bottom:18px;border-radius:12px}} @media(prefers-reduced-motion:reduce){#reviews .oviyas-work-thumb img{transition:none}} /* Oviyas services catalogue */ .oviyas-services section[data-nav-dark="7"]{display:none!important} aside[aria-label="Cookie consent banner"]{display:none!important} .oviyas-service-link{white-space:nowrap} .oviyas-service-details{position:relative;z-index:21;background:#202A44;color:#FFF9F0;padding:90px var(--site-gutter) 65px;border-radius:48px 48px 0 0} .oviyas-service-intro{text-align:center;max-width:800px;margin:0 auto 55px}.oviyas-kicker{font-family:var(--font-patrick-hand);font-size:20px;letter-spacing:.035em} .oviyas-service-intro h2{font-family:var(--font-khand);font-size:clamp(54px,7vw,110px);font-weight:600;line-height:.95;margin:20px 0}.oviyas-service-intro>p:last-child{font-size:18px;line-height:1.6;max-width:520px;margin:24px auto} .oviyas-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1250px;margin:auto} .oviyas-service-grid article{scroll-margin-top:110px;background:#FFF9F0;color:#202A44;padding:36px;border-radius:24px;border-top:7px solid var(--service-accent)} .oviyas-service-grid .oviyas-kicker{color:var(--service-accent);font-size:17px}.oviyas-service-grid h3{font-family:var(--font-khand);font-size:clamp(36px,4vw,60px);font-weight:600;line-height:1.1;margin:14px 0} .oviyas-service-grid article>p:not(.oviyas-kicker){max-width:440px;font-size:17px;line-height:1.65;min-height:84px}.oviyas-service-grid ul{list-style:none;padding:0;margin:24px 0 30px}.oviyas-service-grid li{padding:12px 0;border-bottom:1px solid #202A4426;font-size:16px}.oviyas-service-grid li:before{content:'↗';margin-right:12px;color:var(--service-accent)} .oviyas-service-grid a{display:flex;justify-content:space-between;gap:16px;align-items:center;font-family:var(--font-patrick-hand);font-size:23px;text-decoration:none}.oviyas-service-grid a:hover{color:var(--service-accent)}.oviyas-services-note{text-align:center;font-family:var(--font-patrick-hand);font-size:22px;margin:36px 0 0} .oviyas-enquiry-actions{flex-wrap:wrap} .oviyas-services a:focus-visible{outline:3px solid #F6BE4F;outline-offset:5px} @media(max-width:768px){.oviyas-service-details{padding:60px var(--site-gutter) 40px;border-radius:28px 28px 0 0}.oviyas-service-grid{grid-template-columns:1fr;gap:18px}.oviyas-service-grid article{padding:26px}.oviyas-service-grid article>p:not(.oviyas-kicker){min-height:0}.oviyas-service-intro{margin-bottom:32px}.oviyas-service-link{font-size:17px}} .oviyas-services main>section:nth-of-type(2)>div.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.oviyas-services main>section:nth-of-type(2){max-width:1400px;margin:auto} .oviyas-services main>section:nth-of-type(2){max-width:none}@media(max-width:768px){.oviyas-services main>section:nth-of-type(2)>div.grid{grid-template-columns:1fr}.oviyas-services main>section:nth-of-type(2) [style*="--flavour"]{height:115vw;max-height:550px}} /* Benefits remains on the page but is removed from navigation. */ nav a[href="/#benefits"]{display:none!important} /* OVIYAS base palette */ :root{--background:#FFF9F0;--foreground:#202A44;--beige:#D7EDE5;--gold:#F6BE4F} /* Zigzag section dividers, replacing the original scalloped-circle edges. Two bugs fixed here: 1) One row sits inside a section whose overflow-x-hidden utility makes the browser auto-clip the Y axis too, which silently ate any content positioned outside the row's own box - so everything below stays strictly inside the row's own box (no bridge escaping via ::before). 2) The clip-path "teeth" only cut a hole down to whatever sits behind the row in the page - for the row whose next section is also navy, that hole revealed more navy, so the zigzag was invisible despite rendering correctly. ::after now paints an explicit backdrop colour behind the teeth so the pattern shows regardless of what's actually behind it. */ .oviyas-zigzag{position:relative!important;z-index:15!important;height:clamp(60px,12vw,160px)!important;background:none!important} .oviyas-zigzag::after{content:'';position:absolute;left:0;right:0;bottom:0;height:65%;background-color:var(--oviyas-zigzag-behind);z-index:1} .oviyas-zigzag::before{content:'';position:absolute;inset:0;z-index:2;background-color:var(--oviyas-zigzag-fill);clip-path:polygon(0% 0%,100% 0%,100% 35%,90% 100%,80% 35%,70% 100%,60% 35%,50% 100%,40% 35%,30% 100%,20% 35%,10% 100%,0% 35%,0% 0%)} /* Only the divider right after the hero flips: teeth up, solid edge at the bottom. */ /* No backdrop here: it painted opaque cream over the can sinking behind the divider. Instead the navy block below (mt-[-10vw]) is pulled up only as far as the teeth's solid base, so the gaps reveal the cream hero + can behind. */ .oviyas-zigzag.oviyas-zigzag-flip::after{display:none} .oviyas-zigzag.oviyas-zigzag-flip+div{margin-top:calc(clamp(60px,12vw,160px)*-.35)!important} .oviyas-zigzag.oviyas-zigzag-flip::before{clip-path:polygon(0% 100%,100% 100%,100% 65%,90% 0%,80% 65%,70% 0%,60% 65%,50% 0%,40% 65%,30% 0%,20% 65%,10% 0%,0% 65%,0% 100%)} .oviyas-zigzag>div{display:none!important} .oviyas-zigzag[data-zigzag-color="foreground"]{--oviyas-zigzag-fill:var(--foreground);--oviyas-zigzag-behind:var(--background)} .oviyas-zigzag[data-zigzag-color="background"]{--oviyas-zigzag-fill:var(--background);--oviyas-zigzag-behind:var(--foreground)} .oviyas-zigzag-wrap{transform:translateY(4px)!important} /* Hero layout: headline + bullets on the left, the WebGL 3D logo untouched in the centre, intro copy + pill CTA on the right. Pure CSS so hydration and the bundle's reveal animations keep working on the same elements. */ #Hero ul{list-style:none!important;padding-left:0;font-family:var(--font-inter),sans-serif!important;font-weight:400;color:var(--foreground)!important;font-size:clamp(16px,1.5vw,28px)!important;line-height:1.35!important;letter-spacing:-.01em} #Hero ul>li{display:flex;align-items:center;gap:.9em;margin-top:0!important} #Hero ul>li+li{margin-top:.55em!important} #Hero ul>li::before{content:'';width:.62em;height:.62em;flex-shrink:0;border-radius:50%;background:currentColor} #Hero>.contents>div>div:first-child{display:none} #Hero>div[class*="bottom-[6vw]"] p{font-weight:400!important;font-size:clamp(16px,1.55vw,30px)!important;line-height:1.42!important;letter-spacing:-.01em!important;color:var(--foreground)} @media(max-width:767.98px){#Hero .oviyas-br-desktop{display:none}#Hero ul{font-size:15px!important;column-gap:18px}#Hero ul>li{gap:.55em}#Hero ul>li+li{margin-top:0!important}} @media(min-width:768px){ #Hero{display:grid!important;grid-template-columns:minmax(0,36vw) minmax(0,1fr) minmax(0,26vw);grid-template-rows:minmax(0,1.5fr) auto auto minmax(0,1fr);padding-block:0!important;padding-inline:var(--site-gutter)!important} #Hero>.contents>h1{grid-column:1;grid-row:2;width:auto!important;margin:0!important;font-weight:700!important;font-size:min(9vw,16vh)!important;line-height:.8!important;letter-spacing:-.03em!important} #Hero>.contents>div{position:static!important;grid-column:1;grid-row:3;margin-top:min(3.5vw,6.5vh)} #Hero ul{margin-top:0!important;translate:none!important} #Hero>div[class*="bottom-[6vw]"]{position:static!important;grid-column:3;grid-row:2/span 2;align-self:center;margin-top:8vh} #Hero>div[class*="bottom-[6vw]"] p{width:auto!important;margin-bottom:3vw} /* Orbit arcs, sparkle and multicolour floor glow framing the 3D logo, sized in vh because the canvas scales the logo with viewport height. */ #Hero::before{content:'';position:absolute;left:50%;top:50%;width:70vh;height:70vh;transform:translate(-50%,-50%);pointer-events:none;z-index:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke-linecap='round'%3E%3Cpath d='M35.33 9.7A42.9 42.9 0 0 0 12.85 28.55M90.93 62.9A42.9 42.9 0 0 1 74.6 85.1' stroke='%23202A44' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M73.9 21.8 77.4 16.2M78 25.2 84.1 22M79.8 29.2 84.1 29.5' stroke='%23CFA52B' stroke-width='2.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/contain no-repeat} #Hero::after{content:'';position:absolute;left:50%;top:calc(50% + 27vh);width:52vh;height:7vh;transform:translate(-50%,-50%);pointer-events:none;z-index:0;border-radius:50%;background:linear-gradient(90deg,#00bee9,#f80100 38%,#fea201 64%,#3bad4c);opacity:.22;filter:blur(3.2vh)} } /* "The real source of every idea" (second section): headline split around the pinned 3D logo, copy + bullets bottom-left, pill CTA bottom-right. Laid out in vh so it frames the canvas logo when the section top meets the viewport. */ #benefits .heading-waves{display:none!important} #benefits>p{text-transform:none!important;font-weight:400!important;font-size:clamp(16px,1.45vw,28px)!important;line-height:1.42!important;letter-spacing:-.01em!important} .oviyas-benefits-list{list-style:none;padding:0;margin:0;font-family:var(--font-inter),sans-serif;font-size:clamp(16px,1.45vw,28px);line-height:1.35;letter-spacing:-.01em;color:var(--foreground)} .oviyas-benefits-list>li{display:flex;align-items:center;gap:.9em} .oviyas-benefits-list>li+li{margin-top:.55em} .oviyas-benefits-list>li::before{content:'';width:.62em;height:.62em;flex-shrink:0;border-radius:50%;background:currentColor} .oviyas-benefits-cta{white-space:nowrap;transition:opacity .7s ease,transform .7s ease} .oviyas-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease,background-color .3s ease} .oviyas-reveal.is-in{opacity:1;transform:none} .oviyas-benefits-list.oviyas-reveal.is-in{transition-delay:.15s} .oviyas-benefits-cta.oviyas-reveal.is-in{transition-delay:.3s} @media(prefers-reduced-motion:reduce){.oviyas-reveal{opacity:1;transform:none;transition:none}} @media(min-width:768px){ #benefits>h2{display:grid!important;grid-template-columns:minmax(0,1fr) min(56vh,33vw) minmax(0,1fr);row-gap:2.2vh;padding-top:33vh!important;font-size:min(7.6vw,15vh)!important;font-weight:700!important;line-height:.8!important;letter-spacing:-.03em!important} #benefits>h2>span:first-child{display:contents!important} #benefits>h2>span:first-child>span:first-child{grid-column:1;grid-row:1;text-align:left!important} #benefits>h2>span:first-child>span:last-child{grid-column:3;grid-row:1;text-align:left!important} #benefits>h2>span:last-child{grid-column:3;grid-row:2;margin:0!important;text-align:left!important} #benefits>p{left:var(--site-gutter)!important;top:calc(33vh + min(7.6vw,15vh) * .8 + 4vh)!important;width:min(28vw,540px)!important;font-size:clamp(15px,1.2vw,23px)!important} .oviyas-benefits-list{position:absolute;left:var(--site-gutter);top:77vh} .oviyas-benefits-cta{position:absolute;right:var(--site-gutter);top:75.5vh} #benefits::before{content:'';position:absolute;left:50%;top:50vh;width:74vh;height:74vh;transform:translate(-50%,-50%);pointer-events:none;z-index:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke-linecap='round'%3E%3Cpath d='M35.33 9.7A42.9 42.9 0 0 0 12.85 28.55M90.93 62.9A42.9 42.9 0 0 1 74.6 85.1' stroke='%23202A44' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M73.9 21.8 77.4 16.2M78 25.2 84.1 22M79.8 29.2 84.1 29.5' stroke='%23CFA52B' stroke-width='2.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/contain no-repeat} #benefits::after{content:'';position:absolute;left:50%;top:calc(50vh + 29vh);width:54vh;height:7vh;transform:translate(-50%,-50%);pointer-events:none;z-index:0;border-radius:50%;background:linear-gradient(90deg,#00bee9,#f80100 38%,#fea201 64%,#3bad4c);opacity:.22;filter:blur(3.2vh)} } @media(max-width:767.98px){ #benefits>p{margin-top:34vh!important} .oviyas-benefits-list{width:fit-content;max-width:85%;margin:22px auto 0;font-size:15px;text-align:left} .oviyas-benefits-cta{display:flex;width:fit-content;margin:22px auto 0;padding:6px 6px 6px 20px;gap:14px} } /* Process section ("UX/UI — OUR BEST FLAVOUR."): headline split around the 3D can, copy + coloured bullets on the left, supporting line + the hand-drawn Explore Services button bottom-right. The bundle's own char/line reveal still drives the headline and both paragraphs. */ #sequence-animation .oviyas-proc-a,#sequence-animation .oviyas-proc-b{display:inline-block} #sequence-animation .sticky>div>div:first-child>p{font-weight:400!important;letter-spacing:-.01em!important} #sequence-animation .sticky>div>div.text-right>p{font-weight:400!important;letter-spacing:-.01em!important} .oviyas-process-list{list-style:none;padding:0;margin:0;font-family:var(--font-inter),sans-serif;font-weight:500;font-size:clamp(16px,1.6vw,30px);line-height:1.3;letter-spacing:-.01em;color:var(--foreground)} .oviyas-process-list>li{display:flex;align-items:center;gap:1.35em} .oviyas-process-list>li+li{margin-top:.95em} .oviyas-process-list>li::before{content:'';width:.72em;height:.72em;flex-shrink:0;border-radius:50%;background:var(--dot,currentColor)} .oviyas-process-list.oviyas-reveal.is-in{transition-delay:.35s} @media(min-width:768px){ #sequence-animation .sticky>div>div:first-child{top:23vh!important;left:var(--site-gutter)!important;right:var(--site-gutter)} #sequence-animation h2{display:flex;justify-content:space-between;align-items:baseline;width:100%;font-weight:700!important;line-height:.8!important;letter-spacing:-.03em!important} #sequence-animation .oviyas-proc-a{font-size:min(13vw,23.5vh)} #sequence-animation .oviyas-proc-b{font-size:min(8.2vw,14.6vh)} #sequence-animation .sticky>div>div:first-child>p{width:min(28vw,560px)!important;margin-top:5.5vh!important;font-size:clamp(16px,1.6vw,30px)!important;line-height:1.3!important} .oviyas-process-list{position:absolute;left:var(--site-gutter);top:77vh} /* The idea→can counter makes way for the bullets on desktop. */ #sequence-animation .sticky>div>div[class*="bottom-[3vw]"][class*="left-[3vw]"]{display:none!important} #sequence-animation .sticky>div>div.text-right{bottom:9vh!important;right:var(--site-gutter)!important;width:min(24vw,480px)!important;text-align:left!important} #sequence-animation .sticky>div>div.text-right>p{font-size:clamp(16px,1.5vw,28px)!important;line-height:1.3!important} #sequence-animation .sticky>div>div.text-right>a{display:block!important;width:fit-content;margin:3.2vh 0 0 auto!important} /* Soft floor shadow under the can, kept under the canvas. */ #sequence-animation>.sticky::after{content:'';position:absolute;left:50%;top:83vh;width:30vh;height:4.5vh;transform:translate(-50%,-50%);z-index:0;pointer-events:none;border-radius:50%;background:rgba(32,42,68,.28);filter:blur(1.6vh)} } @media(max-width:767.98px){ #sequence-animation h2{font-size:15vw!important;font-weight:700!important} #sequence-animation .oviyas-proc-a{margin-right:.22em} .oviyas-process-list{order:1;display:flex;flex-wrap:wrap;justify-content:center;column-gap:20px;row-gap:6px;width:100%;margin:0 0 16px;font-size:15px} .oviyas-process-list>li+li{margin-top:0} .oviyas-process-list>li{gap:.55em} #sequence-animation .sticky>div>div[class*="bottom-[3vw]"][class*="left-[3vw]"]{order:2} } /* "Our Process" conveyor section (replaces the old three-photo collage): headline + intro top-left, hand-drawn Start A Project top-right, and the transparent conveyor render running edge to edge underneath. */ .oviyas-conveyor-head{display:flex;justify-content:space-between;align-items:flex-start;gap:4vw} .oviyas-conveyor-intro h2{font-weight:700!important;line-height:.85!important;letter-spacing:-.03em!important} .oviyas-conveyor-intro p{max-width:min(42vw,820px);margin-top:1.6vw;font-weight:400!important;font-size:clamp(16px,1.5vw,28px)!important;line-height:1.3!important;letter-spacing:-.01em!important} .oviyas-conveyor-cta{flex-shrink:0;margin-top:2.6vw} .oviyas-conveyor{margin:2.5vw calc(var(--site-gutter) * -1) 0} .oviyas-conveyor-img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none} /* 3D conveyor (process-conveyor.js) drawn over the picture, which fades out once the model is on screen. */ .oviyas-conveyor{position:relative} .oviyas-conveyor-img{transition:opacity .6s ease} /* Once the 3D view mounts, the canvas sets the height and the picture sits under it as the loading placeholder. */ .oviyas-conveyor[data-conveyor3d] .oviyas-conveyor-img{position:absolute;left:0;top:50%;transform:translateY(-50%)} .oviyas-conveyor-canvas{position:relative;display:block;pointer-events:none;opacity:0;transition:opacity .6s ease} .oviyas-conveyor[data-conveyor3d="ready"] .oviyas-conveyor-canvas{opacity:1} .oviyas-conveyor[data-conveyor3d="ready"] .oviyas-conveyor-img{opacity:0} /* Tablets: the section drops its padding below 1025px (bundle's max-md:px-0!). */ @media(min-width:768px) and (max-width:1024.98px){ .oviyas-conveyor-head{padding-inline:var(--site-gutter)} .oviyas-conveyor-intro p{max-width:min(60vw,560px)} .oviyas-conveyor{margin:4vw 0 0} } @media(max-width:767.98px){ .oviyas-conveyor-head{flex-direction:column;align-items:center;text-align:center;gap:20px;padding-inline:var(--site-gutter)} .oviyas-conveyor-intro p{max-width:none;margin-top:14px} .oviyas-conveyor-cta{margin-top:0} /* Swipe along the line on phones instead of shrinking it to a sliver. */ .oviyas-conveyor{margin:28px 0 0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .oviyas-conveyor::-webkit-scrollbar{display:none} .oviyas-conveyor-img{width:220vw;max-width:none} } /* Catalogue cards on /services: link through to each service's own page. */ .oviyas-service-grid a.oviyas-service-page-link{justify-content:flex-start;margin-bottom:14px;font-family:var(--font-inter),sans-serif;font-size:17px;font-weight:600;text-decoration:underline;text-decoration-color:var(--service-accent);text-decoration-thickness:2px;text-underline-offset:5px} /* Home "approach" orbit circles (#benefits .curved-scroll-box): visual restyle only. Size, position and the bundle's scroll-driven transform are untouched; copy-overrides.js adds data-orbit-step so each step gets a logo colour. */ #benefits .curved-scroll-box[data-orbit-step]{--orbit-bg:var(--oviyas-blue);--orbit-ink:#FFF9F0;--orbit-glow:rgba(255,255,255,.28);position:absolute;justify-content:center;align-items:center;gap:.35vw;text-align:center;padding:1.6vw;border:.32vw solid #FFF9F0!important;background:radial-gradient(circle at 30% 24%,var(--orbit-glow),transparent 58%),var(--orbit-bg)!important;color:var(--orbit-ink)!important;box-shadow:0 1.6vw 3.2vw -1.4vw rgba(32,42,68,.45),inset 0 0 0 .5vw rgba(255,255,255,.12)} #benefits .curved-scroll-box[data-orbit-step="01"]{--orbit-bg:var(--oviyas-blue)} #benefits .curved-scroll-box[data-orbit-step="02"]{--orbit-bg:var(--oviyas-orange);--orbit-ink:#202A44;--orbit-glow:rgba(255,255,255,.4)} #benefits .curved-scroll-box[data-orbit-step="03"]{--orbit-bg:var(--oviyas-green)} #benefits .curved-scroll-box[data-orbit-step="04"]{--orbit-bg:var(--oviyas-red)} #benefits .curved-scroll-box[data-orbit-step]::before{content:'Step ' attr(data-orbit-step);font-family:var(--font-patrick-hand),'Caveat',cursive;font-size:1.15vw;line-height:1;letter-spacing:.02em;opacity:.85} #benefits .curved-scroll-box[data-orbit-step]>.font-khand{font-size:2.9vw!important;font-weight:700!important;line-height:.9!important;letter-spacing:-.02em!important;text-transform:uppercase;white-space:nowrap;color:inherit!important} #benefits .curved-scroll-box[data-orbit-step]>.font-khand>span{font-size:inherit!important} #benefits .curved-scroll-box[data-orbit-step]>p{margin:0!important;font-family:var(--font-patrick-hand),'Caveat',cursive!important;font-weight:400!important;font-size:1.55vw!important;line-height:1.1!important;letter-spacing:0!important;color:inherit!important;opacity:.95} @media(max-width:767.98px){ #benefits .curved-scroll-box[data-orbit-step]{gap:.8vw;padding:3vw;border-width:.8vw!important} #benefits .curved-scroll-box[data-orbit-step]::before{font-size:2.6vw} #benefits .curved-scroll-box[data-orbit-step]>.font-khand{font-size:5.8vw!important} #benefits .curved-scroll-box[data-orbit-step]>p{font-size:3.3vw!important} } /* "Explore all flavours" now follows "KEEP SIPPING.." directly (the statement moved below "Our process"), so it gets the navy zigzag teeth on its top edge that the statement used to carry. Drawn above the section, so the cream and the can show through the gaps and the can sinks behind the teeth. */ @media(min-width:768px){ #flavours>.paddx:first-child{padding-top:3.5vw!important} } @media(max-width:767.98px){ #flavours>.paddx:first-child{padding-top:4vw!important} } #flavours::before{content:'';position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:calc(clamp(60px,12vw,160px)*.65);background:var(--foreground);clip-path:polygon(0% 100%,10% 0%,20% 100%,30% 0%,40% 100%,50% 0%,60% 100%,70% 0%,80% 100%,90% 0%,100% 100%);pointer-events:none} /* "UX/UI — OUR BEST FLAVOUR.": the second part is longer than the old "SPECIALISTS.", so it stays on one line but is sized to fit between the can and the right edge on desktop (it must not wrap: the bundle char-splits it), and drops onto its own centred line on phones. */ @media(min-width:768px){ #sequence-animation .oviyas-proc-b{font-size:min(5.6vw,10vh)} } @media(max-width:767.98px){ #sequence-animation .oviyas-proc-b{display:block;max-width:100%;margin:.12em 0 0!important;font-size:min(8.8vw,64px);letter-spacing:0;white-space:nowrap} } /* Home colour accents, About-page style: solid logo colours on one detail per section (markers and a key word), never more gradient text. Palette: brand.css. */ #Hero ul>li:nth-child(1)::before{background:var(--ov-blue)} #Hero ul>li:nth-child(2)::before{background:var(--ov-orange)} #benefits h2>span:last-child>span{color:var(--ov-blue)} .oviyas-benefits-list>li:nth-child(1)::before{background:var(--ov-green)} .oviyas-benefits-list>li:nth-child(2)::before{background:var(--ov-red)} #sequence-animation .oviyas-proc-b{color:var(--ov-red)} #flavours h2>span:last-child{color:var(--ov-orange)} #cta p.font-patrick-hand{color:var(--ov-blue)} /* Home "PoC projects" section (inserted by copy-overrides.js before #cta). */ .oviyas-poc{position:relative;z-index:10;background:var(--background);color:var(--foreground);margin-top:-3vw;padding:0 var(--site-gutter) clamp(40px,5vw,90px)} .oviyas-poc-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);align-items:end;gap:2vw 4vw;margin-bottom:clamp(28px,3vw,56px)} .oviyas-poc-eyebrow{grid-column:1/-1;margin:0;font-family:var(--font-patrick-hand),'Caveat',cursive;font-size:clamp(18px,1.5vw,26px);color:var(--ov-green)} .oviyas-poc h2{margin:0;font-family:var(--font-khand),'Bebas Neue',sans-serif;font-weight:700;font-size:clamp(56px,8vw,160px);line-height:.85;letter-spacing:-.03em;text-transform:uppercase} .oviyas-poc h2 span{color:var(--ov-green)} .oviyas-poc-intro{margin:0;max-width:34rem;justify-self:end;font-family:var(--font-inter),'Inter',sans-serif;font-size:clamp(17px,1.4vw,26px);line-height:1.35;letter-spacing:-.01em} .oviyas-poc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.4vw,26px)} /* Cards mirror the Selected Work cards: outlined cream card, tinted image panel, name. */ .oviyas-poc-card{display:flex;flex-direction:column;gap:clamp(14px,1.3vw,24px);background:var(--background);border:2px solid rgba(32,42,68,.6);border-radius:clamp(18px,1.8vw,34px);padding:clamp(12px,.85vw,16px) clamp(12px,.85vw,16px) clamp(18px,1.3vw,24px)} .oviyas-poc-thumb{display:grid;place-items:center;aspect-ratio:4/3;border-radius:14px;background:var(--tint);overflow:hidden} .oviyas-poc-thumb img{width:100%;height:100%;object-fit:contain;transition:transform .5s ease} .oviyas-poc-card:hover .oviyas-poc-thumb img{transform:scale(1.04)} .oviyas-poc-soon{font-family:var(--font-khand),'Bebas Neue',sans-serif;font-size:clamp(34px,3.4vw,64px);line-height:1;letter-spacing:.02em;text-transform:uppercase;color:#202A44} .oviyas-poc-card h3{margin:0;padding:0 8px;font-family:var(--font-khand),'Bebas Neue',sans-serif;font-weight:600;font-size:clamp(28px,2.3vw,44px);line-height:.95;letter-spacing:-.02em;text-transform:uppercase} .oviyas-poc .oviyas-reveal.is-in:nth-child(2){transition-delay:.1s} .oviyas-poc .oviyas-reveal.is-in:nth-child(3){transition-delay:.2s} @media(max-width:900px){ .oviyas-poc-head{grid-template-columns:1fr} .oviyas-poc-intro{justify-self:start} .oviyas-poc-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:600px){.oviyas-poc-grid{grid-template-columns:1fr}} @media(max-width:767.98px){ .oviyas-poc{margin-top:-4vw;padding:0 var(--site-gutter) 12vw} } /* Home content refresh: hero lead-in, "Refresh Your…" copy on the cans, services chooser. */ #Hero .oviyas-hero-lead{display:block;font-weight:700;margin-bottom:.35em} .group:has(>.oviyas-can-copy){height:auto;align-self:stretch;display:flex;flex-direction:column} .group>.oviyas-can-copy+.relative{height:34vw} .group:has(>.oviyas-can-copy)>div:last-child{height:auto;min-height:64px;margin-top:auto;display:flex;align-items:center;gap:12px;padding:8px clamp(12px,1vw,18px)} .group:has(>.oviyas-can-copy)>div:last-child>p{min-width:0;margin:0;font-family:var(--font-khand),"Bebas Neue",sans-serif!important;font-size:clamp(24px,2vw,34px)!important;line-height:1.05!important;overflow:visible} .group:has(>.oviyas-can-copy)>div:last-child>.oviyas-service-link{margin-left:auto} @media(max-width:520px){.group:has(>.oviyas-can-copy)>div:last-child{flex-wrap:wrap}.group:has(>.oviyas-can-copy)>div:last-child>p{width:100%}.group:has(>.oviyas-can-copy)>div:last-child>.oviyas-service-link{margin-left:0}} .oviyas-can-copy{padding:.9vw .6vw 1.2vw;color:var(--foreground)} .oviyas-can-copy .oviyas-can-kicker{margin:0;font-family:var(--font-patrick-hand),'Caveat',cursive;font-size:clamp(14px,1.15vw,20px);letter-spacing:.04em;text-transform:uppercase;opacity:.8} .oviyas-can-copy h3{margin:.15em 0 .3em;font-family:var(--font-khand),sans-serif;font-weight:600;font-size:clamp(24px,2.3vw,42px);line-height:1;text-transform:uppercase} .oviyas-can-copy h3+p{margin:0;max-width:24em;font-size:clamp(13px,.95vw,16px);line-height:1.35;font-weight:500} #flavours .oviyas-service-link{font-size:clamp(14px,1.1vw,20px)} .oviyas-chooser{margin-top:6vw;max-width:1100px;margin-inline:auto} .oviyas-chooser h2{margin:0 0 1.2em;text-align:center;font-family:var(--font-khand),sans-serif;font-weight:600;font-size:clamp(32px,3.6vw,64px);line-height:1;text-transform:uppercase;color:var(--foreground)} .oviyas-chooser ul{list-style:none;margin:0;padding:0;border-top:2px solid color-mix(in srgb,var(--foreground) 18%,transparent)} .oviyas-chooser li{border-bottom:2px solid color-mix(in srgb,var(--foreground) 18%,transparent)} .oviyas-chooser a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(16px,1.6vw,26px) 4px;color:var(--foreground);text-decoration:none;font-family:var(--font-khand),sans-serif;font-weight:500;font-size:clamp(20px,2vw,34px);line-height:1.1;transition:padding .35s ease,color .35s ease} .oviyas-chooser-to{font-family:var(--font-patrick-hand),'Caveat',cursive;font-size:clamp(16px,1.35vw,24px);white-space:nowrap;opacity:.75} .oviyas-chooser a:hover,.oviyas-chooser a:focus-visible{padding-inline:16px;color:var(--oviyas-blue)} .oviyas-chooser a:focus-visible{outline:3px solid #F6BE4F;outline-offset:2px} @media(max-width:768px){.group>.oviyas-can-copy+.relative{height:68vw}.oviyas-can-copy{padding:2vw 1vw 4vw}.max-md\:bg-foreground>.oviyas-can-copy{color:var(--light-beige)}.oviyas-chooser{margin-top:14vw}.oviyas-chooser a{flex-direction:column;align-items:flex-start;gap:4px}} /* Heading swapped: "What we do / From idea" sits small on the left; "All the way / to live product, built for your business." takes the big right-hand rows and wraps. */ #benefits>h2>span:first-child>span:last-child,#benefits>h2>span:last-child,#benefits>h2>span:last-child>span{white-space:normal!important} #benefits .oviyas-benefits-lead{display:block;white-space:normal} @media(min-width:768px){ #benefits>h2>span:first-child>span.oviyas-benefits-lead{align-self:start;width:6.2em;font-size:min(3.2vw,6.4vh);line-height:.98;letter-spacing:0} #benefits>h2>span:first-child>span:last-child,#benefits>h2>span:last-child{font-size:min(4.6vw,9vh);line-height:.9;letter-spacing:-.01em} } @media(max-width:767.98px){#benefits .oviyas-benefits-lead{font-size:9vw;margin-bottom:.3em}#benefits>h2>span:first-child>span:last-child,#benefits>h2>span:last-child{font-size:11vw;line-height:.9}} /* Keep the two opening scenes on the same type scale. The artwork is pinned to the viewport centre, so reserve a real middle column for it and let the copy fit its own columns instead of relying on text-sized viewport offsets. */ @media(min-width:1101px){ #Hero{grid-template-columns:minmax(0,31%) minmax(0,38%) minmax(0,31%);column-gap:0;padding-inline:var(--site-gutter)!important} #Hero>.contents>h1{max-width:100%;font-size:min(7.2vw,14vh)!important;line-height:.92!important;letter-spacing:0!important} #Hero>.contents>div{margin-top:clamp(22px,3.2vh,42px)} #Hero ul{font-size:clamp(17px,1.3vw,25px)!important} #Hero>div[class*="bottom-[6vw]"]{min-width:0;margin-top:0;align-self:center} #Hero>div[class*="bottom-[6vw]"] p{max-width:22em;margin-bottom:clamp(26px,4vh,44px);font-size:clamp(17px,1.3vw,25px)!important;line-height:1.45!important} #Hero a>button>span[aria-hidden="true"]{font-size:clamp(17px,1.3vw,25px)!important} #benefits>h2{grid-template-columns:minmax(0,32%) minmax(0,33%) minmax(0,35%);padding-top:30vh!important;row-gap:clamp(12px,2vh,24px);line-height:.98!important} #benefits>h2>span:first-child>span.oviyas-benefits-lead{width:100%;font-size:min(2.8vw,5.7vh);line-height:1.06} #benefits>h2>span:first-child>span:last-child,#benefits>h2>span:last-child{font-size:min(4vw,7.7vh);line-height:1;letter-spacing:0} #benefits>p{left:var(--site-gutter)!important;top:43vh!important;width:29vw!important;max-width:550px;font-size:clamp(17px,1.3vw,25px)!important;line-height:1.45!important} .oviyas-benefits-list{left:var(--site-gutter);top:70vh;font-size:clamp(17px,1.3vw,25px)} /* Match the button's left edge to the heading's right-hand grid column. */ .oviyas-benefits-cta{left:64.1vw;right:auto;top:70vh;font-size:clamp(17px,1.3vw,25px)} } @media(min-width:1101px) and (max-height:760px){ #benefits>h2{padding-top:21vh!important} #benefits>p{top:41vh!important;font-size:clamp(16px,1.15vw,22px)!important} .oviyas-benefits-list{top:77vh} .oviyas-benefits-cta{top:70vh} } @media(min-width:768px) and (max-width:1100px){ #Hero{display:flex!important;flex-direction:column;align-items:center;gap:24px;padding:100px var(--site-gutter) 55px!important;min-height:100svh;height:auto!important;overflow:visible} #Hero>.contents{display:block!important;position:relative;z-index:2;width:100%;text-align:center} #Hero>.contents>h1{width:auto!important;max-width:12ch;margin:0 auto!important;font-size:clamp(60px,6.8vw,76px)!important;letter-spacing:0!important} #Hero>.contents>div{position:static!important;margin-top:clamp(245px,calc(420px - 16vw),300px)} #Hero ul{display:grid;justify-content:center;margin:0!important;translate:none!important;font-size:clamp(16px,1.7vw,20px)!important;text-align:left} #Hero>div[class*="bottom-[6vw]"]{position:relative!important;z-index:2;align-self:center;width:min(100%,620px);margin:0;text-align:center} #Hero>div[class*="bottom-[6vw]"] p{width:auto!important;font-size:clamp(16px,1.7vw,20px)!important;line-height:1.45!important;margin-bottom:28px} #Hero::before,#Hero::after{display:none} #benefits>h2{display:block!important;padding-top:110px!important;max-width:100%;line-height:1!important;text-align:center} #benefits>h2>span:first-child{display:block!important} #benefits>h2>span:first-child>span.oviyas-benefits-lead{display:block;width:auto;font-size:clamp(32px,3.8vw,42px);line-height:1.05} #benefits>h2>span:first-child>span:last-child,#benefits>h2>span:last-child{display:block;font-size:clamp(44px,5vw,56px);line-height:1!important;margin:10px 0 0!important;text-align:center!important} #benefits>p{position:relative!important;left:auto!important;top:auto!important;width:min(85%,620px)!important;margin:clamp(220px,30vw,290px) auto 0!important;text-align:center!important;font-size:clamp(17px,1.7vw,21px)!important} .oviyas-benefits-list{position:relative;left:auto;top:auto;width:fit-content;margin:24px auto 0;font-size:clamp(17px,1.7vw,21px)} .oviyas-benefits-cta{position:relative;right:auto;top:auto;display:flex;width:fit-content;margin:28px auto 0;font-size:clamp(17px,1.7vw,21px)} #benefits::before,#benefits::after{display:none} } @media(max-width:767.98px){ #Hero{min-height:100svh;height:auto!important;padding:110px var(--site-gutter) 55px!important;gap:24px;overflow:visible} #Hero>.contents{flex:none} #Hero>.contents>h1{font-size:clamp(56px,14vw,100px)!important;line-height:.94!important;letter-spacing:0!important} #Hero>.contents>div{margin-top:clamp(315px,82vw,430px)!important} #Hero ul{display:grid;justify-content:center;gap:8px;font-size:clamp(15px,3.8vw,19px)!important;text-align:left} #Hero>div[class*="bottom-[6vw]"]{margin-top:20px;gap:20px} #Hero>div[class*="bottom-[6vw]"] p{max-width:34em;font-size:clamp(16px,4vw,20px)!important;line-height:1.45!important} #Hero a>button>span[aria-hidden="true"]{font-size:clamp(16px,4vw,20px)!important} #benefits>h2{padding-top:110px!important;line-height:1!important} #benefits .oviyas-benefits-lead{font-size:clamp(32px,8vw,54px);line-height:1.05;margin-bottom:16px} #benefits>h2>span:first-child>span:last-child,#benefits>h2>span:last-child{font-size:clamp(44px,10vw,70px);line-height:1!important} #benefits>p{width:90%!important;margin-top:clamp(250px,65vw,370px)!important;font-size:clamp(16px,4vw,20px)!important;line-height:1.45!important} .oviyas-benefits-list{max-width:90%;font-size:clamp(15px,3.8vw,19px)} .oviyas-benefits-cta{font-size:clamp(16px,4vw,20px)} } /* Bebas Neue needs a taller line box than the original display font. */ #Hero>.contents>h1{line-height:1.08!important} #sequence-animation h2,#flavours h2,#our-process h2,#reviews h2{line-height:1.1!important} #flavours h3{line-height:1.18!important} .oviyas-poc h2{line-height:1.08} /* Opening scenes matched to the approved mockups (desktop). Layout only: the pinned 3D logo/can, scroll timelines and text reveals are untouched. */ #benefits .oviyas-benefits-lead::before,#benefits>h2>span:first-child>span:last-child::before{display:block;margin-bottom:.55em;font-family:var(--font-inter),sans-serif;font-weight:400;font-size:clamp(13px,1.45vw,26px);line-height:1;letter-spacing:.32em;text-transform:uppercase;color:var(--foreground)} #benefits .oviyas-benefits-lead::before{content:'What we do'} #benefits>h2>span:first-child>span:last-child::before{content:'All the way'} #sequence-animation .oviyas-proc-b1{margin-right:.25em} @media(min-width:1101px){#sequence-animation .oviyas-proc-b1{margin-right:0}} @media(min-width:1101px){ /* Hero */ #Hero>.contents>h1{font-size:min(9.3vw,16.5vh)!important;line-height:.9!important} #Hero .oviyas-hero-lead{font-weight:500;font-size:clamp(24px,2.55vw,46px);line-height:1.2;letter-spacing:-.01em;margin-bottom:.6em} #Hero>div[class*="bottom-[6vw]"] p{font-size:clamp(17px,1.65vw,30px)!important} /* "From idea" heading */ #benefits>h2{padding-top:25vh!important} /* Arcs + sparkle mirrored so the sparkle sits top-left, clear of the right-hand heading. */ #benefits::before{transform:translate(-50%,-50%) scale(-.88,.88)} #benefits>h2>span:first-child>span.oviyas-benefits-lead{font-size:min(6.2vw,11vh);line-height:.95} #benefits>h2>span:first-child>span:last-child,#benefits>h2>span:last-child{font-size:min(5.3vw,9.4vh);line-height:.95} #benefits>h2>span:last-child{max-width:6.3em} /* Right-hand block (both heading rows + button) hugs the right edge, so its outer margin mirrors the left column's 3vw. 5.4em fits "TO LIVE PRODUCT,". */ #benefits>h2>span:first-child>span:last-child,#benefits>h2>span:last-child{justify-self:end;width:5.4em;max-width:none} #benefits>p{top:43vh!important;width:26vw!important} .oviyas-benefits-list{top:74vh} .oviyas-benefits-cta{top:64vh;left:calc(100% - var(--site-gutter) - 5.4 * min(5.3vw,9.4vh))} /* UX/UI: "OUR BEST" over a red "FLAVOUR." in the right-hand column, copy + button under it. */ #sequence-animation h2{position:relative} #sequence-animation .oviyas-proc-a{font-size:min(14vw,25vh)} #sequence-animation .oviyas-proc-b{position:absolute;left:65.5vw;top:.06em;font-size:min(8.9vw,15.7vh);line-height:.88!important} #sequence-animation .oviyas-proc-b1,#sequence-animation .oviyas-proc-b2{display:block} #sequence-animation .oviyas-proc-b1{color:var(--foreground)} #sequence-animation .sticky>div>div.text-right{top:56vh!important;bottom:auto!important;left:68.5vw!important;right:auto!important;width:26vw!important} #sequence-animation .sticky>div>div.text-right>p{font-size:clamp(16px,1.7vw,30px)!important;line-height:1.45!important} #sequence-animation .sticky>div>div.text-right>a{margin:3.6vh 0 0!important} /* Tighter gap under the big "UX/UI" (its 1.1 line-height already adds space below). */ #sequence-animation .sticky>div>div:first-child>p{margin-top:0!important} .oviyas-process-list{top:73vh} } /* "KEEP SIPPING.." was centred behind the 3D can, which hid the middle of it. Widen the single space so the words sit either side of the can (the can scales with viewport height), and shift the line right by half the width difference between "SIPPING.." and "KEEP" so the gap is centred on the can. Word spacing works both while the letters are split for the reveal and after it reverts. */ @media(min-width:1025px){#section-break>h2{white-space:nowrap;word-spacing:max(34vh,20vw);padding-left:.95em}} /* Statement section ("GOOD DESIGN, SERVED…", now between "Our process" and "Selected work"): sized to its copy instead of 100vh+10vw, with navy zigzag teeth cut into its bottom edge to mirror the ones on top. #introduction clips overflow, so the teeth are a clip-path on the block itself rather than an element hanging below it. */ #introduction>div[data-nav-dark]{--zz-teeth:calc(clamp(60px,12vw,160px)*.65);height:auto!important;padding-top:8vw;padding-bottom:calc(var(--zz-teeth) + 9vw);clip-path:polygon(0% 0%,100% 0%,100% calc(100% - var(--zz-teeth)),90% 100%,80% calc(100% - var(--zz-teeth)),70% 100%,60% calc(100% - var(--zz-teeth)),50% 100%,40% calc(100% - var(--zz-teeth)),30% 100%,20% calc(100% - var(--zz-teeth)),10% 100%,0% calc(100% - var(--zz-teeth)))} #introduction>div[data-nav-dark]>[class*="bottom-[13.5vw]"]{bottom:calc(var(--zz-teeth) + 1.5vw)!important} /* The can used to stay pinned while the navy statement slid up over it, because that statement sat inside #brand-sequence and made it a screen taller. With the statement moved down the page, add that screen back as empty runway (the sequence height is measured from this wrapper) and pull "Explore all flavours" up over it, so the pinned can sinks behind the zigzag again. */ #brand-sequence>div:has(>#section-break){padding-bottom:100vh} #flavours{margin-top:calc(-100vh - 2vw)!important} @media(max-width:767.98px){#flavours{margin-top:calc(-100vh - 14vw)!important}} /* Space between the service cards and the bottom zigzag matches the space above the "Explore all flavours" heading (~4.9vw from the zigzag line to the letters). The bottom zigzag row is H=clamp(60px,12vw,160px) tall, pushed down 7.5vw+4px, with its teeth starting at .35H, so gap = padding + 7.5vw + 4px - .65H; solved for 4.9vw. */ @media(min-width:768px){ #flavours>.paddx:first-child{padding-bottom:0!important} #flavours{padding-bottom:calc(clamp(60px,12vw,160px)*.65 - 2.6vw - 4px)!important} } /* Landing page type scale (desktop). Sizes are in rem because the root size scales with the viewport, same as the bundle's text180 titles (9rem): - section titles 9rem (PoC was the odd one out at ~8vw) - body copy + bullets one size, weight and line height (was 25-30px, 1.2-1.45) - card titles one size across the services and PoC cards. */ @media(min-width:1101px){ :root{--ov-body:1.4rem;--ov-body-lh:1.4} #Hero>div[class*="bottom-[6vw]"] p, #benefits>p, #sequence-animation .sticky>div>div:first-child>p, #sequence-animation .sticky>div>div.text-right>p, #our-process .oviyas-conveyor-intro>p, #cta h2+p{font-size:var(--ov-body)!important;line-height:var(--ov-body-lh)!important;font-weight:400!important} #Hero ul, .oviyas-benefits-list, .oviyas-process-list{font-size:var(--ov-body)!important;font-weight:400!important} .oviyas-poc h2{font-size:9rem} #flavours h3,.oviyas-poc-card h3{font-size:clamp(28px,2.2rem,44px)!important} } /* Services page: one card per service. Label + title, the can, then what we do, what's included and the actions. Two per row on desktop, one on mobile. */ .oviyas-svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(16px,1.6vw,28px)!important;align-items:stretch} @media(max-width:767.98px){.oviyas-svc-grid{grid-template-columns:1fr!important}} .oviyas-svc-card{height:auto!important;display:flex!important;flex-direction:column;padding:clamp(14px,1.2vw,22px)!important;background:var(--background)!important;color:var(--foreground);border:2px solid rgba(32,42,68,.12);border-radius:clamp(18px,1.6vw,28px)} .oviyas-svc-card>.oviyas-can-copy{padding:clamp(4px,.4vw,8px) clamp(6px,.6vw,12px) clamp(12px,1vw,18px);color:var(--foreground)!important} .oviyas-svc-card .oviyas-can-kicker{color:var(--service-accent)!important;opacity:1} .oviyas-svc-title{margin:.2em 0 0;font-family:var(--font-khand),'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(32px,3rem,56px);line-height:.95;text-transform:uppercase;color:var(--foreground)} .oviyas-svc-card>.oviyas-can-copy+.relative{height:clamp(240px,24vw,440px)!important;flex:none} /* The bundle's small "Web Design · Explore ↗" row is replaced by the actions below. */ .oviyas-svc-card>div.flex:has(>.oviyas-service-link){display:none!important} .oviyas-svc-body{display:flex;flex-direction:column;flex:1;padding:clamp(16px,1.4vw,26px) clamp(6px,.6vw,12px) clamp(4px,.4vw,8px)} .oviyas-svc-body>p{margin:0;max-width:38em;font-family:var(--font-inter),Inter,sans-serif;font-size:clamp(16px,1.15rem,21px);line-height:1.5;color:var(--foreground)} .oviyas-svc-body ul{list-style:none;margin:clamp(14px,1.3vw,24px) 0 0;padding:0} .oviyas-svc-body li{display:flex;gap:.75em;align-items:baseline;padding:.7em 0;border-bottom:1px solid rgba(32,42,68,.14);font-family:var(--font-inter),Inter,sans-serif;font-size:clamp(15px,1.05rem,19px);line-height:1.4} .oviyas-svc-body li::before{content:'↗';flex:none;color:var(--service-accent);font-weight:600} .oviyas-svc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:auto;padding-top:clamp(18px,1.6vw,30px)} .oviyas-svc-talk{font-family:var(--font-patrick-hand),'Caveat',cursive;font-size:clamp(20px,1.5rem,28px);color:var(--foreground);text-decoration:none;border-bottom:2px solid var(--service-accent);line-height:1.1} .oviyas-svc-talk:hover{color:var(--service-accent)} .oviyas-chooser-intro{max-width:40em;margin:.6em 0 1.2em;font-family:var(--font-inter),Inter,sans-serif;font-size:clamp(16px,1.15rem,21px);line-height:1.5;color:var(--foreground);opacity:.85} /* The home teaser's ".group > div:last-child" title-row rules would otherwise hit the details block, now the card's last child: undo them here. */ .oviyas-svc-card>.oviyas-svc-body{display:flex!important;flex-direction:column!important;align-items:stretch!important;flex-wrap:nowrap!important;gap:0!important;height:auto!important;min-height:0!important;margin-top:0!important} .oviyas-svc-card>.oviyas-svc-body>p{width:auto!important;font-family:var(--font-inter),Inter,sans-serif!important;font-size:clamp(16px,1.15rem,21px)!important;font-weight:400!important;line-height:1.5!important;text-transform:none!important;letter-spacing:-.005em!important} .oviyas-svc-card>.oviyas-svc-body>.oviyas-svc-actions{margin-left:0!important} /* Same overrides with enough specificity to beat ".group:has(>.oviyas-can-copy)>div:last-child>p". */ .group.oviyas-svc-card.oviyas-svc-card{height:auto!important;max-height:none!important;overflow:visible!important} .group.oviyas-svc-card>div.oviyas-svc-body.oviyas-svc-body:last-child{display:flex!important;flex-direction:column!important;align-items:stretch!important;flex-wrap:nowrap!important;height:auto!important;min-height:0!important;margin-top:0!important;padding:clamp(16px,1.4vw,26px) clamp(6px,.6vw,12px) clamp(4px,.4vw,8px)!important} .group.oviyas-svc-card>div.oviyas-svc-body.oviyas-svc-body:last-child>p{width:auto!important;font-family:var(--font-inter),Inter,sans-serif!important;font-size:clamp(16px,1.15rem,21px)!important;font-weight:400!important;line-height:1.5!important;text-transform:none!important;letter-spacing:-.005em!important;overflow:visible} /* Services overview, redesigned for scanning (the full details live on each service page): what's included as tags, and on desktop one full-width row per service with the can and the copy side by side, alternating sides. */ .oviyas-svc-body ul{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(16px,1.4vw,24px) 0 0} .group.oviyas-svc-card .oviyas-svc-body li{display:inline-flex;align-items:center;gap:.45em;padding:.45em .95em;border:1.5px solid var(--service-accent);border-bottom:1.5px solid var(--service-accent);border-radius:999px;font-size:clamp(14px,.95rem,17px);font-weight:500;line-height:1.2;color:var(--foreground);background:color-mix(in srgb,var(--service-accent) 8%,transparent)} .group.oviyas-svc-card .oviyas-svc-body li::before{content:'';width:.45em;height:.45em;border-radius:50%;background:var(--service-accent)} @media(min-width:900px){ .oviyas-svc-grid{grid-template-columns:1fr!important;gap:clamp(18px,1.8vw,32px)!important} .group.oviyas-svc-card.oviyas-svc-card{display:grid!important;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"can head" "can body";column-gap:clamp(24px,3vw,56px);padding:clamp(14px,1.2vw,22px)!important} .group.oviyas-svc-card:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,.95fr);grid-template-areas:"head can" "body can"} .group.oviyas-svc-card>.oviyas-can-copy{grid-area:head;align-self:end;padding:clamp(24px,2.4vw,44px) 0 0!important} .group.oviyas-svc-card>.oviyas-can-copy+.relative{grid-area:can;height:auto!important;min-height:clamp(320px,30vw,520px)} .group.oviyas-svc-card>div.oviyas-svc-body.oviyas-svc-body:last-child{grid-area:body;justify-content:flex-start;padding:clamp(12px,1vw,18px) 0 clamp(24px,2.4vw,44px)!important} .oviyas-svc-title{font-size:clamp(40px,4rem,76px)} .oviyas-svc-actions{margin-top:clamp(22px,2vw,36px)!important;padding-top:0!important} } /* Services page spacing: the bundle forces pt-[20vw] on #cta and pb-[12vw] on the card section, which left ~600px of empty cream after the chooser. */ .oviyas-services main>section:has(.oviyas-svc-grid){padding-bottom:clamp(40px,4vw,80px)!important} .oviyas-services #cta{padding-top:clamp(40px,4vw,80px)!important} /* "What do you need?" as a grid of tiles: the need in the client's words, the matching service in search terms, coloured like that service. */ .oviyas-chooser.oviyas-chooser{max-width:none;margin-top:clamp(56px,6vw,110px)} .oviyas-chooser.oviyas-chooser h2{margin:0;text-align:left;font-weight:400;font-size:clamp(40px,4.5rem,88px);line-height:.95} .oviyas-chooser.oviyas-chooser .oviyas-chooser-intro{margin:.7em 0 clamp(22px,2vw,36px)} .oviyas-chooser.oviyas-chooser ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.2vw,20px);border:0} .oviyas-chooser.oviyas-chooser li{border:0} .oviyas-chooser.oviyas-chooser a{position:relative;height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.5em;padding:clamp(20px,1.8vw,32px) clamp(20px,1.8vw,32px) clamp(48px,4vw,64px);border:2px solid color-mix(in srgb,var(--service-accent) 35%,transparent);border-radius:clamp(16px,1.4vw,24px);background:color-mix(in srgb,var(--service-accent) 6%,var(--background));transition:transform .3s ease,border-color .3s ease,background-color .3s ease,box-shadow .3s ease} .oviyas-chooser-need{font-family:var(--font-khand),'Bebas Neue',sans-serif;font-size:clamp(26px,2.2rem,42px);line-height:1;text-transform:uppercase;color:var(--foreground)} .oviyas-chooser.oviyas-chooser .oviyas-chooser-to{font-family:var(--font-inter),Inter,sans-serif;font-size:clamp(15px,1.05rem,19px);font-weight:500;line-height:1.35;white-space:normal;opacity:1;color:var(--service-accent)} .oviyas-chooser-arrow{position:absolute;right:clamp(18px,1.6vw,28px);bottom:clamp(16px,1.4vw,24px);display:grid;place-items:center;width:clamp(34px,2.6vw,44px);height:clamp(34px,2.6vw,44px);border-radius:50%;border:2px solid var(--service-accent);color:var(--service-accent);font-size:1.1em;transition:transform .3s ease,background-color .3s ease,color .3s ease} .oviyas-chooser.oviyas-chooser a:hover,.oviyas-chooser.oviyas-chooser a:focus-visible{padding-inline:clamp(20px,1.8vw,32px);transform:translateY(-4px);border-color:var(--service-accent);background:color-mix(in srgb,var(--service-accent) 12%,var(--background));box-shadow:0 14px 30px -18px color-mix(in srgb,var(--service-accent) 70%,transparent);color:inherit} .oviyas-chooser a:hover .oviyas-chooser-arrow,.oviyas-chooser a:focus-visible .oviyas-chooser-arrow{transform:rotate(-45deg);background:var(--service-accent);color:#FFF9F0} @media(max-width:1024px){.oviyas-chooser.oviyas-chooser ul{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.oviyas-chooser.oviyas-chooser ul{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){.oviyas-chooser.oviyas-chooser a,.oviyas-chooser-arrow{transition:none}.oviyas-chooser.oviyas-chooser a:hover{transform:none}} /* Home service cards: sub-services fizz out of the can as bubbles on hover (copy-overrides.js addSubBubbles). Each bubble starts at the can and springs to its own spot; the inner span keeps a gentle float while hovered. */ .oviyas-subs{position:absolute;inset:0;z-index:5;pointer-events:none} .oviyas-sub{position:absolute;left:50%;top:52%;width:var(--s);height:var(--s);min-width:64px;min-height:64px;transform:translate(-50%,-50%) scale(.2);opacity:0; transition:left .7s cubic-bezier(.34,1.56,.64,1),top .7s cubic-bezier(.34,1.56,.64,1),transform .7s cubic-bezier(.34,1.56,.64,1),opacity .25s ease;transition-delay:calc(var(--i)*70ms)} .oviyas-sub-in{position:relative;display:grid;place-items:center;width:100%;height:100%;box-sizing:border-box;padding:10%;border-radius:50%;background:#FFF9F0;border:3px solid var(--flavour); box-shadow:0 10px 24px rgba(32,42,68,.22),inset 0 -6px 0 color-mix(in srgb,var(--flavour) 18%,transparent); color:#202A44;text-align:center;font-family:"Bebas Neue",Impact,sans-serif;font-size:clamp(15px,1.45vw,24px);line-height:.95;letter-spacing:.02em;text-transform:uppercase} /* a small highlight, like light on a bubble */ .oviyas-sub-in::before{content:'';position:absolute;top:16%;left:22%;width:18%;height:12%;border-radius:50%;background:#fff;opacity:.9;transform:rotate(-30deg)} .group:hover .oviyas-sub,.group:focus-within .oviyas-sub{left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(1);opacity:1} .group:hover .oviyas-sub-in,.group:focus-within .oviyas-sub-in{animation:oviyas-fizz 2.6s ease-in-out calc(.7s + var(--i)*.25s) infinite alternate} @keyframes oviyas-fizz{from{transform:translateY(0) rotate(0)}to{transform:translateY(-8px) rotate(3deg)}} /* leaving: bubbles sink back into the can quickly, without the stagger */ .group:not(:hover):not(:focus-within) .oviyas-sub{transition-duration:.35s;transition-delay:0s} @media(max-width:767.98px),(hover:none){.oviyas-subs{display:none}} @media(prefers-reduced-motion:reduce){.oviyas-sub{transition:opacity .2s ease}.group:hover .oviyas-sub-in{animation:none}} /* Services page: UX/UI Design (01) leads, Web Design (02) second. The bundle renders Web Design first, so the visual order is set here. */ .oviyas-svc-grid>:has(a.oviyas-service-link[href="/services/ux-ui-design"]){order:-2} .oviyas-svc-grid>:has(a.oviyas-service-link[href="/services/web-design-development"]){order:-1} /* Hero redesign (copy-overrides.js enhanceHeroLayout): "Today's menu" board, bold intro with a hand-drawn underline. The bundle's tagline, bullets and paragraph are hidden, not removed; the 3D logo and scroll timelines are untouched. Lists are
    /
    , not