/* * Yuvau Digital — homepage responsive layer * Keep all viewport-specific rules here. */ /* ===== RESPONSIVE SOURCE: style.css ===== */ @media (max-width: 900px) { :root { --yu-space-section: 80px; } .yu-container { width: min(calc(100% - 36px), var(--yu-container)); } /* .yu-page-hero padding-top at 900px is handled by header.css (@media 1024px: 132px) */ } @media (max-width: 600px) { :root { --yu-space-section: 64px; } .yu-container { width: min(calc(100% - 28px), var(--yu-container)); } .yu-placeholder { padding: 28px 22px; border-radius: 20px; } /* .yu-page-hero padding-top and .yu-hero padding-top at 600px handled by header.css */ .yu-page-hero h1 { font-size: clamp(2.2rem, 12vw, 3.4rem); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } @media(max-width:620px){.yu-content-hero h1{font-size:clamp(38px,12vw,60px)}} /* ===== RESPONSIVE SOURCE: components.css ===== */ @media (max-width: 1024px) { .yu-footer-main { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width: 600px) { .yu-footer-main { grid-template-columns:1fr; gap:16px; padding:54px 0 38px; } .yu-footer-column { padding:20px; } .yu-footer-bottom { align-items:flex-start; flex-direction:column; } } @media (max-width: 1240px) { .yu-home-hero__inner { grid-template-columns:minmax(0,.91fr) minmax(510px,1.09fr); gap:18px; } .yu-home-hero__title { font-size:clamp(3.65rem,6vw,5.1rem); } } @media (max-width: 1040px) { .yu-home-hero { min-height:auto; padding:122px 0 64px; } .yu-home-hero__inner { min-height:auto; grid-template-columns:1fr; gap:10px; } .yu-home-hero__copy { padding-top:15px; } } @media (max-width: 700px) { .yu-home-hero { padding-top:112px; } .yu-home-hero__title { max-width:100%; margin-top:17px; font-size:clamp(3.2rem,13vw,4.3rem); line-height:1.08; } .yu-home-hero__lead { font-size:14px; min-height:4.2em; } .yu-home-hero__actions { flex-direction:column; align-items:stretch; } .yu-home-hero__primary,.yu-home-hero__secondary { width:100%; justify-content:center; } } @media (max-width: 520px) { .yu-home-hero__copy { padding-bottom:12px; } .yu-home-hero__proof-card strong { font-size:12px; } .yu-home-hero__proof-card small { font-size:8px; } } @media (prefers-reduced-motion: reduce) { .yu-home-hero__eyebrow-dot, .yu-home-hero__kicker::before, .yu-home-hero__title em::after, .yu-home-hero__signal-dot, .yu-home-hero__signal-line, .yu-home-hero__bars i, .yu-home-hero__mouse::after { animation:none!important; } .yu-home-hero__word { transition:none!important; } } @media (max-width:900px){ .yu-home-trust__intro{align-items:flex-start;flex-direction:column} .yu-home-trust__signal{margin-top:-16px} .yu-home-trust__stage{min-height:390px;padding-inline:20px} .yu-home-trust__logo-card{width:155px;height:94px;flex-basis:155px} .yu-home-trust__center{width:295px} } @media (max-width:600px){ .yu-home-trust{padding-block:70px 82px} .yu-home-trust__intro{margin-bottom:26px} .yu-home-trust__intro h2{font-size:clamp(2rem,10vw,3rem)} .yu-home-trust__lead{font-size:14px} .yu-home-trust__stage{min-height:360px;padding:48px 14px 70px;border-radius:24px} .yu-home-trust__logo-card{width:138px;height:84px;flex-basis:138px;padding:12px 14px} .yu-home-trust__logo-card img{max-width:116px;max-height:58px} .yu-home-trust__center{width:255px;padding:16px 18px} .yu-home-trust__center strong{font-size:17px} .yu-home-trust__rail{gap:10px} .yu-home-trust__rail + .yu-home-trust__rail{margin-top:10px} } @media (prefers-reduced-motion: reduce){ .yu-home-trust__signal-dot, .yu-home-trust__ambient, .yu-home-trust__rail--one, .yu-home-trust__rail--two{animation:none!important} } @media (max-width: 760px) { .yu-home-why__intro-copy h2 { font-size:clamp(2.4rem,12vw,4.2rem); } .yu-home-why__reason-content h4 { font-size:clamp(1.8rem,8.5vw,2.8rem); } .yu-home-why__reason-content > p:last-child { font-size:14px; line-height:1.62; } } @media (prefers-reduced-motion: reduce) { .yu-home-why__photo, .yu-home-why__photo img, .yu-home-why__reason-card { transition:none !important; } } @media (max-width: 760px) { .yu-home-why__reason-card.is-past, .yu-home-why__reason-card.is-next { opacity: 1 !important; visibility: visible !important; } .yu-home-why__intro-copy h2 { font-size: clamp(2.05rem, 10vw, 3.2rem); } } @media (max-width:1100px){ .yu-home-services__header{grid-template-columns:1fr 260px;gap:30px} .yu-home-services__card{min-height:430px;padding-inline:20px} .yu-home-services__card::after{left:20px} } @media (max-width:900px){ .yu-home-services{padding:105px 0 110px} .yu-home-services__header{grid-template-columns:1fr;gap:22px} .yu-home-services__header-note{max-width:410px} .yu-home-services__card,.yu-home-services__card--featured{min-height:420px} } @media (max-width:600px){ .yu-home-services{padding:84px 0 92px} .yu-home-services__eyebrow{font-size:9px} .yu-home-services__eyebrow span{font-size:8px} .yu-home-services__header h2{font-size:clamp(2.45rem,12vw,4rem)} .yu-home-services__lead{font-size:15px} .yu-home-services__card,.yu-home-services__card--featured{min-height:390px;padding:22px 20px 20px;border-radius:22px} .yu-home-services__visual{height:118px;margin:17px 0 22px} .yu-home-services__card h3{font-size:clamp(1.85rem,9vw,2.5rem)} .yu-home-services__card p{font-size:13px} .yu-home-services__footer-row{flex-wrap:wrap;gap:9px;margin-top:22px;line-height:1.5} } @media (prefers-reduced-motion:reduce){ .yu-home-services__card,.yu-home-services__learn span{transition:none!important} } @media (max-width: 620px) { .yu-home-results__intro h2 { font-size:clamp(2rem,10vw,3rem); } .yu-home-results__intro p { font-size:13px; } .yu-home-results__visual img { min-height:240px; object-fit:cover; object-position:center top; } } @media (max-width: 980px) { .yu-home-founder { padding:90px 0 100px; } .yu-home-founder__shell { padding:28px; } .yu-home-founder__grid { grid-template-columns:1fr; gap:36px; } .yu-home-founder__visual { min-height:520px; max-width:680px; width:100%; margin:0 auto; } .yu-home-founder__content h2 { font-size:clamp(3.2rem,10vw,5.5rem); } .yu-home-founder__stats { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width: 620px) { .yu-home-founder { padding:72px 0 78px; } .yu-home-founder__shell { padding:20px; border-radius:24px; } .yu-home-founder__shell::before { left:20px; right:20px; } .yu-home-founder__topline { align-items:flex-start; flex-direction:column; gap:12px; } .yu-home-founder__visual { min-height:410px; } .yu-home-founder__photo { border-radius:20px; } .yu-home-founder__photo--main { left:2%; width:66%; height:74%; } .yu-home-founder__photo--network { right:0; width:40%; height:42%; } .yu-home-founder__photo--recognition { right:2%; bottom:0; width:43%; height:40%; } .yu-home-founder__content h2 { font-size:clamp(3rem,15vw,4.8rem); } .yu-home-founder__lead { font-size:15px; } .yu-home-founder__content > p:not(.yu-home-founder__kicker):not(.yu-home-founder__role):not(.yu-home-founder__lead) { font-size:13px; } .yu-home-founder__expertise { gap:7px; } .yu-home-founder__expertise span { font-size:9px; } .yu-home-founder__stats { grid-template-columns:1fr; } } @media (prefers-reduced-motion: reduce) { .yu-home-faq__progress span, .yu-home-faq__icon, .yu-home-faq__icon b, .yu-home-faq__bridge a, .yu-home-faq__bridge a span { transition:none; } } @media (max-width: 900px) { .yu-home-faq { padding:90px 0 100px; } .yu-home-faq__shell { padding:28px; } .yu-home-faq__intro { grid-template-columns:1fr; gap:16px; } .yu-home-faq__intro-copy { margin:0; max-width:720px; } } @media (max-width: 620px) { .yu-home-faq { padding:72px 0 80px; } .yu-home-faq__shell { padding:20px; border-radius:24px; } .yu-home-faq__shell::before { left:20px; right:20px; } .yu-home-faq__intro h2 { font-size:clamp(2.2rem,11vw,3.55rem); } .yu-home-faq__intro-copy { font-size:13px; line-height:1.7; } .yu-home-faq__body { padding-left:13px; } .yu-home-faq__list { border-radius:18px; } .yu-home-faq__question { grid-template-columns:minmax(0,1fr) 34px; min-height:76px; padding:13px 12px; gap:7px; } .yu-home-faq__question-text { font-size:14px; line-height:1.35; } .yu-home-faq__icon { width:30px; height:30px; } .yu-home-faq__answer { padding:0 48px 18px 48px; } .yu-home-faq__answer p { font-size:12.5px; line-height:1.7; } .yu-home-faq__bridge { align-items:flex-start; flex-direction:column; gap:14px; } .yu-home-faq__bridge a { width:100%; justify-content:center; } } @media (max-width:760px){ .yu-home-why__client-note-head h3{font-size:1.45rem;} } @media (prefers-reduced-motion:reduce){ .yu-home-why__photo img{transition:none!important;} } @media(max-width:600px){.yu-home-services__focus h3{font-size:clamp(2rem,10vw,3rem)}.yu-home-services__focus-copy>p{font-size:13px}} @media(max-width:900px){.yu-home-results__slide-copy>p{max-width:none}.yu-home-results__slide figure{max-height:360px}.yu-home-results__slide figure img{object-fit:cover;object-position:center top}} @media(max-width:600px){.yu-home-results__controls button{font-size:8px}.yu-home-results__slide figure figcaption{left:10px;right:10px;max-width:none}} @media(prefers-reduced-motion:reduce){.yu-home-results__track,.yu-home-results__nav,.yu-home-results__controls button{transition:none!important}} @media(max-width:900px){.yu-home-founder__grid{grid-template-columns:1fr;gap:28px}.yu-home-founder__visual{min-height:520px}.yu-home-founder__content{max-width:820px}} @media(max-width:620px){.yu-home-founder__visual{min-height:430px}.yu-home-founder__photo--main{left:0;top:4%;width:58%;height:78%}.yu-home-founder__photo--network{right:0;top:0;width:35%;height:40%}.yu-home-founder__photo--recognition{left:auto;right:0;bottom:0;width:34%;height:31%}.yu-home-founder__content h2{font-size:clamp(3rem,15vw,4.8rem)}.yu-home-founder__belief{padding:16px 17px}.yu-home-founder__stats{grid-template-columns:1fr 1fr}} /* ===== RESPONSIVE SOURCE: header.css ===== */ @media (max-width: 1024px) { .yu-site-header { top:12px; width:calc(100% - 24px); border-radius:16px; } .yu-header-inner { min-height:64px; padding:8px 10px 8px 14px; } .yu-brand-logo { max-height:46px; max-width:155px; } .yu-menu-toggle { display:grid; } .yu-social-nav { display:none; } .yu-nav { position:absolute; top:calc(100% + 10px); left:0; right:0; display:none; flex-direction:column; padding:10px; background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); border:1px solid rgba(48,104,232,.14); border-radius:15px; box-shadow:0 18px 42px rgba(20,36,70,.13); } .yu-nav.is-open { display:flex; } .yu-primary-menu { width:100%; flex-direction:column; align-items:stretch; gap:2px; } .yu-primary-menu > li > a { justify-content:space-between; min-height:48px; } .yu-primary-menu > .menu-item-has-children > .sub-menu { position:static; display:none; width:100%; min-width:0; max-width:none; transform:none; opacity:1; visibility:visible; pointer-events:auto; box-shadow:none; border:0; border-radius:10px; padding:3px 7px 7px; background:rgba(48,104,232,.035); -webkit-backdrop-filter:none; backdrop-filter:none; } .yu-primary-menu > .menu-item-has-children > .sub-menu::before { display:none; } .yu-primary-menu > .menu-item-has-children::after { display:none; } .yu-primary-menu > .menu-item-has-children.is-open > .sub-menu { display:flex; } .yu-primary-menu > .menu-item-has-children > .sub-menu > li > a { min-height:44px; padding:9px 14px; } .yu-primary-menu > .menu-item-has-children { display:grid; grid-template-columns:minmax(0,1fr) 46px; align-items:stretch; } .yu-primary-menu > .menu-item-has-children > a { min-width:0; } .yu-primary-menu > .menu-item-has-children > a::after { display:none; } .yu-mobile-submenu-toggle { display:grid; place-items:center; width:46px; min-height:48px; padding:0; border:0; border-radius:10px; background:transparent; color:#2563EB; cursor:pointer; font:inherit; } .yu-mobile-submenu-toggle span { display:block; font-size:18px; line-height:1; transition:transform .2s ease; } .yu-primary-menu > .menu-item-has-children.is-open > .yu-mobile-submenu-toggle span { transform:rotate(180deg); } } @media (max-width: 600px) { .yu-site-header { top:9px; width:calc(100% - 18px); } .yu-header-inner { min-height:60px; } .yu-brand-logo { max-height:42px; max-width:142px; } } @media (prefers-reduced-motion: reduce) { .yu-site-header, .yu-primary-menu a, .yu-social-link, .yu-menu-toggle span { transition:none; } } @media (max-width: 1024px) { .yu-nav { background:#ffffff !important; opacity:1 !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; box-shadow:0 24px 60px rgba(20,36,70,.15); border-color:rgba(48,104,232,.14); } .yu-primary-menu > .menu-item-has-children > .sub-menu { background:#f8fbff !important; opacity:1 !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } } /* ===== RESPONSIVE SOURCE: faq.css ===== */ @media (max-width: 900px) { .yu-homepage .yu-home-faq { padding: 84px 0 100px; } .yu-homepage .yu-home-faq__shell { padding: 28px; } .yu-homepage .yu-home-faq__shell::before { left: 28px; right: 28px; } .yu-homepage .yu-home-faq__intro { grid-template-columns: 1fr; gap: 16px; } .yu-homepage .yu-home-faq__intro-copy { max-width: 720px; margin: 0; } } @media (max-width: 620px) { .yu-homepage .yu-home-faq { padding: 68px 0 80px; } .yu-homepage .yu-home-faq__shell { padding: 20px; border-radius: 24px; } .yu-homepage .yu-home-faq__shell::before { left: 20px; right: 20px; } .yu-homepage .yu-home-faq__topline { margin-bottom: 30px; } .yu-homepage .yu-home-faq__intro h2 { font-size: clamp(2.2rem, 11vw, 4rem); } .yu-homepage .yu-home-faq__intro-copy { font-size: 13px; line-height: 1.72; } .yu-homepage .yu-home-faq__body { padding-left: 13px; } .yu-homepage .yu-home-faq__list { border-radius: 18px; } .yu-homepage .yu-home-faq__question { grid-template-columns: 34px minmax(0,1fr) 34px; min-height: 74px; padding: 12px !important; gap: 7px; } .yu-homepage .yu-home-faq__question-text { font-size: 14px; line-height: 1.36; } .yu-homepage .yu-home-faq__icon { width: 30px; height: 30px; } .yu-homepage .yu-home-faq__answer { padding: 0 12px 18px 46px !important; } .yu-homepage .yu-home-faq__answer p { font-size: 12.5px; line-height: 1.72; } .yu-homepage .yu-home-faq__bridge { align-items: flex-start; flex-direction: column; gap: 14px; } .yu-homepage .yu-home-faq__bridge a { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .yu-homepage .yu-home-faq__progress span, .yu-homepage .yu-home-faq__icon, .yu-homepage .yu-home-faq__icon b, .yu-homepage .yu-home-faq__bridge a, .yu-homepage .yu-home-faq__bridge a span { transition: none; } } @media(max-width:900px){.yu-home-faq__intro{grid-template-columns:1fr;gap:18px}} @media(max-width:620px){.yu-home-faq__intro{gap:14px}.yu-home-faq__intro-copy{max-width:none}} /* ===== RESPONSIVE SOURCE: final-cta.css ===== */ @media (max-width: 1050px) { .yu-home-final-cta__grid { grid-template-columns:1fr; gap:20px; } .yu-home-final-cta__copy { max-width:820px; } .yu-home-final-cta__visual { min-height:420px; } .yu-home-final-cta__chip--one { left:12%; } .yu-home-final-cta__chip--two { right:10%; } .yu-home-final-cta__chip--three { left:14%; } .yu-home-final-cta__chip--four { right:14%; } } @media (max-width: 700px) { .yu-home-final-cta { padding:72px 0 82px; } .yu-home-final-cta__shell { padding:24px 20px 20px; border-radius:26px; } .yu-home-final-cta__topline { margin-bottom:30px; } .yu-home-final-cta__topline p span { display:none; } .yu-home-final-cta__grid { gap:16px; min-height:0; } .yu-home-final-cta__copy h2 { font-size:clamp(2.8rem, 12vw, 4.5rem); } .yu-home-final-cta__lead { font-size:13px; } .yu-home-final-cta__actions { align-items:stretch; flex-direction:column; } .yu-home-final-cta__primary { width:100%; justify-content:center; } .yu-home-final-cta__text-link { justify-content:center; } .yu-home-final-cta__visual { min-height:360px; } .yu-home-final-cta__orbit--outer { width:310px; height:310px; } .yu-home-final-cta__orbit--inner { width:222px; height:222px; } .yu-home-final-cta__core { width:182px; min-height:182px; padding:28px 22px; } .yu-home-final-cta__core strong { font-size:24px; } .yu-home-final-cta__chip { min-width:92px; padding:9px 11px; font-size:9px; } .yu-home-final-cta__chip--one { left:2px; top:62px; } .yu-home-final-cta__chip--two { right:0; top:52px; } .yu-home-final-cta__chip--three { left:7px; bottom:52px; } .yu-home-final-cta__chip--four { right:3px; bottom:64px; } .yu-home-final-cta__contact-strip { grid-template-columns:1fr; gap:15px; } } @media (prefers-reduced-motion: reduce) { .yu-home-final-cta__core, .yu-home-final-cta__text-link, .yu-home-final-cta__text-link span, .yu-home-final-cta__chip { transition:none; } } /* ===== RESPONSIVE SOURCE: google-ads.css ===== */ @media(max-width:720px){.yg-hero__copy h1{font-size:clamp(3.2rem,14vw,5rem)}.yg-hero-path button{padding:10px}} @media(max-width:460px){.yg-ad-result strong{font-size:18px}.yg-system-window strong{font-size:28px}.yg-industry-panel h3{font-size:34px}.yg-final__card h2{font-size:2.55rem}} /* ===== RESPONSIVE SOURCE: meta-ads.css ===== */ @media(max-width:650px){.yu-meta-hero h1{font-size:clamp(3rem,15vw,4.6rem)}.yu-meta-system-core strong{font-size:21px}.yu-meta-orbit small{font-size:8px}.yu-meta-cap-orb strong{font-size:18px}.yu-meta-target-core strong{font-size:18px}.yu-meta-final h2{font-size:clamp(2.3rem,11vw,3.6rem)}} /* ===== RESPONSIVE SOURCE: website-design.css ===== */ @media(max-width:1050px){.yw-head>p,.yw-proof-head>p{margin-top:14px}} @media(max-width:740px){.yw-hero__copy h1{font-size:clamp(48px,14vw,72px)}.yw-process-detail strong{font-size:26px}} @media(max-width:520px){.yw-browser-hero-block strong{font-size:32px}.yw-type-panel h3{font-size:36px}.yw-faq-list summary strong{font-size:14px}.yw-final-card h2{font-size:42px}} @media(prefers-reduced-motion:reduce){.yw-type,.yw-integration-node,.yw-device-frame{transition:none!important}} /* ===== RESPONSIVE SOURCE: seo.css ===== */ @media(max-width:1050px){.ys-head>p,.ys-trust-head>p{margin-top:14px}} @media(max-width:740px){.ys-hero__copy h1{font-size:clamp(48px,14vw,72px)}.ys-process-detail strong{font-size:26px}} @media(max-width:520px){.ys-intent-row strong{font-size:18px}.ys-local-panel h3{font-size:30px}.ys-faq-list summary strong{font-size:14px}.ys-final-card h2{font-size:42px}} /* ===== RESPONSIVE SOURCE: social-media.css ===== */ @media (max-width:760px){.yu-sm-page .ys-section-head>p{margin-top:14px}.yu-sm-page .ys-hero__copy h1{font-size:clamp(3rem,14vw,5rem)}.yu-sm-page .ys-post small{margin-left:42%}.yu-sm-page .ys-cta-card .yu-button{margin-top:10px}.yu-sm-page .ys-faq-list details p{padding-left:50px}} @media (max-width:480px){.yu-sm-page .ys-console-metric strong{font-size:34px}.yu-sm-page .ys-platform-center strong{font-size:17px}} /* ===== RESPONSIVE SOURCE: whatsapp-marketing.css ===== */ @media (max-width:760px){.yw-wa-hero__copy h1{font-size:clamp(3rem,14vw,5rem)}.yw-wa-final__core strong{font-size:20px}} @media (prefers-reduced-motion:reduce){.yw-wa-feature-card,.yw-wa-orbit,.yw-wa-tabs button,.yw-wa-usecase-tabs button,.yw-wa-industry-list button,.yw-wa-process-list button,.yw-faq-list summary span{transition:none}} /* ===== RESPONSIVE SOURCE: course.css ===== */ @media (max-width:780px){.yc-page h1{font-size:clamp(2.9rem,15vw,4.7rem)}.yc-page h2{font-size:clamp(2.1rem,10vw,3.4rem)}.yc-hero__metric strong{font-size:12px}.yc-video-card__copy strong{font-size:22px}} /* ===== RESPONSIVE SOURCE: about.css ===== */ @media (max-width:820px){.ya-founder__image img{height:500px}} @media (max-width:600px){.ya-hero h1{font-size:clamp(2.9rem,13vw,4.2rem)}.ya-hero__signal strong{font-size:11px}.ya-section-head--split>p{margin-top:16px}} /* ===== RESPONSIVE SOURCE: contact.css ===== */ @media (max-width: 680px) { .yc-hero h1 { font-size:clamp(2.7rem,12vw,4rem); } } /* ===== RESPONSIVE SOURCE: services-hub.css ===== */ @media(max-width:760px){.yu-services-hero h1{font-size:clamp(3rem,14vw,4.6rem)}.yu-services-actions .yu-button{justify-content:center}.yu-services-network__core strong{font-size:28px}.yu-services-head h2{font-size:clamp(2.5rem,11vw,4rem)}.yu-services-process__tabs button{border-right:0;border-bottom:1px solid rgba(48,104,232,.08)}.yu-services-process__tabs button:last-child{border-bottom:0}.yu-services-final h2{font-size:clamp(2.4rem,11vw,3.7rem)}} @media(prefers-reduced-motion:reduce){.yu-services-network__node,.yu-services-list__item,.yu-services-need,.yu-services-process__tabs button,.yu-services-industry,.yu-services-combo{transition:none!important}} /* ===== RESPONSIVE SOURCE: refinement.css ===== */ @media (max-width: 1080px) { :where( main.yu-services-page, main.yu-meta-page, main.yu-google-page, main.yu-web-page, main.yu-seo-page, main.yu-fb-page, main.yu-sm-page, main.yu-wa-page, main.yu-tm-page, main.yu-dm-page, main.yc-course-page, main.yc-contact-page, main.yu-archive-page, main.ya-page, main.yu-single-page ) .yu-container { width: min(calc(100% - 40px), var(--yu-container, 1240px)); } } @media (max-width: 780px) { html { scroll-padding-top: 88px; } :where( main.yu-services-page, main.yu-meta-page, main.yu-google-page, main.yu-web-page, main.yu-seo-page, main.yu-fb-page, main.yu-sm-page, main.yu-wa-page, main.yu-tm-page, main.yu-dm-page, main.yc-course-page, main.yc-contact-page, main.yu-archive-page, main.ya-page, main.yu-single-page ) .yu-container { width: min(calc(100% - 28px), var(--yu-container, 1240px)); } .yu-single-page .yu-single-content :where(p,li) { font-size: 16px; line-height: 1.74; } } @media (prefers-reduced-motion: reduce) { .yu-refine-section, .yu-blog-archive .yu-archive-card, .yu-blog-archive .yu-archive-thumb img, main.ya-page .ya-gallery-card, main.ya-page .ya-guide-card, main.ya-page .ya-capability, main.ya-page .ya-time-item, main.yc-contact-page .yc-info-card, main.yc-contact-page .yc-command__node { transition: none !important; transform: none !important; } } @media (max-width: 780px) { main.yu-services-page :where(.yu-services-head, .yu-services-trust__row), main.yu-meta-page :where(.yu-meta-proof-strip), main.yu-google-page :where(.yg-metric-strip), main.yu-web-page :where(.yw-proof-head), main.yu-seo-page :where(.ys-console-top), main.yu-fb-page :where(.yf-console-top), main.yu-sm-page :where(.ys-console-top), main.yu-wa-page :where(.yw-wa-dashboard__head), main.yu-tm-page :where(.yt-console-top) { gap: 16px; } main.yc-contact-page .yc-form__submit, main.yc-contact-page .yc-form__submit .yu-button { width: 100%; } } /* ===== RESPONSIVE SOURCE: home-refinement.css ===== */ @media (max-width:1180px) and (min-width:1041px){ .yu-homepage .yu-home-hero__inner{ grid-template-columns:minmax(0,.9fr) minmax(470px,1.1fr); gap:6px; } .yu-homepage .yu-home-hero__visual{ transform:translateX(12px); } } @media (max-width:1040px){ .yu-homepage .yu-home-hero__inner{ width:min(920px,calc(100% - 48px)); } .yu-homepage .yu-home-hero__copy{ max-width:760px; margin-inline:auto; } .yu-homepage .yu-home-hero__title, .yu-homepage .yu-home-hero__lead{ max-width:none; } .yu-homepage .yu-home-hero__actions, .yu-homepage .yu-home-hero__proof{ justify-content:flex-start; } } @media (max-width:700px){ .yu-homepage .yu-container{ width:min(100% - 32px,680px); } .yu-homepage .yu-home-hero{ padding-bottom:46px; } .yu-homepage .yu-home-hero__title{ font-size:clamp(3.05rem,13.4vw,4.2rem); letter-spacing:-.02em; } .yu-homepage .yu-home-hero__lead{ font-size:14px; line-height:1.7; } .yu-homepage .yu-home-hero__proof{ width:100%; } .yu-homepage .yu-home-hero__proof-card{ flex:1 1 calc(33.333% - 5px); min-height:60px; } .yu-homepage .yu-home-hero__proof-card strong{ font-size:12px; } .yu-homepage .yu-home-hero__proof-card small{ font-size:8px; } .yu-homepage .yu-home-hero__visual{ margin-top:2px; overflow:visible; } } @media (max-width:520px){ .yu-homepage .yu-home-hero__proof{ display:grid; grid-template-columns:1fr 1fr; } .yu-homepage .yu-home-hero__proof-card:last-child{ grid-column:1 / -1; } } @media (max-width:1100px){ .yu-homepage .yu-home-why__intro-grid{ grid-template-columns:1fr; gap:26px; } .yu-homepage .yu-home-why__intro-signals{ justify-content:flex-start; } } @media (max-width:760px){ .yu-homepage .yu-home-why{ padding-top:78px; padding-bottom:82px; } .yu-homepage .yu-home-why__stack-sticky{ min-height:0; } .yu-homepage .yu-home-why__stack{ min-height:0; } } @media (max-width:960px){ .yu-homepage .yu-home-services__header{ grid-template-columns:1fr; gap:20px; } } @media (max-width:720px){ .yu-homepage .yu-home-services{ padding-top:82px; padding-bottom:88px; } .yu-homepage .yu-home-services__header h2{ font-size:clamp(2.5rem,10vw,4rem); } .yu-homepage .yu-home-services__grid{ grid-template-columns:1fr; } .yu-homepage .yu-home-services__card, .yu-homepage .yu-home-services__card--featured{ min-height:0; } .yu-homepage .yu-home-services__focus-grid{ grid-template-columns:1fr; } } @media (max-width:720px){ .yu-homepage .yu-home-results{ padding-top:78px; padding-bottom:84px; } .yu-homepage .yu-home-results__shell{ padding:20px; border-radius:24px; } .yu-homepage .yu-home-results__proof{ min-height:0; padding:16px; } } @media (max-width:900px){ .yu-homepage .yu-home-founder__grid{ grid-template-columns:1fr; } .yu-homepage .yu-home-founder__visual{ min-height:520px; max-width:720px; } .yu-homepage .yu-home-founder__content{ max-width:none; } } @media (max-width:560px){ .yu-homepage .yu-home-founder{ padding-top:78px; padding-bottom:84px; } .yu-homepage .yu-home-founder__shell{ padding:22px 18px 20px; border-radius:24px; } .yu-homepage .yu-home-founder__shell::before{ left:20px; right:20px; } .yu-homepage .yu-home-founder__visual{ min-height:380px; } .yu-homepage .yu-home-founder__content h2{ font-size:clamp(3rem,15vw,4.7rem); } } @media (max-width:680px){ .yu-homepage .yu-home-faq__question{ grid-template-columns:minmax(0,1fr) 34px !important; min-height:72px !important; padding:14px 12px !important; } .yu-homepage .yu-home-faq__answer{ padding:0 52px 20px 46px !important; } } @media (max-width:900px){ .yu-homepage .yu-home-final-cta__topline{ align-items:flex-start; flex-direction:column; } } @media (prefers-reduced-motion:reduce){ html.yu-home-motion-ready .yu-homepage [data-home-reveal], html.yu-home-motion-ready .yu-homepage [data-home-reveal-item]{ opacity:1; transform:none; filter:none; transition:none; } .yu-homepage .yu-home-trust__ambient, .yu-homepage .yu-home-founder__ambient--blue, .yu-homepage .yu-home-founder__ambient--warm, .yu-homepage .yu-home-final-cta__ambient--blue, .yu-homepage .yu-home-final-cta__ambient--warm{ animation:none; } } @media (max-width:420px){ .yu-homepage .yu-home-hero__system{ transform:scale(.69); } .yu-homepage .yu-home-hero__visual{ height:510px; min-height:510px; } } @media (max-width:760px){ .yu-homepage .yu-home-why__stack-scroll{min-height:auto;} .yu-homepage .yu-home-why__stack{overflow:visible;} } @media (max-width:700px){ .yu-homepage .yu-home-results__autoplay{top:-40px;right:0;} } @media (prefers-reduced-motion:reduce){ .yu-homepage .yu-home-services__visual--lead .yu-service-bars i, .yu-homepage .yu-home-services__visual--lead .yu-service-pulse, .yu-homepage .yu-home-services__visual--web .yu-service-screen, .yu-homepage .yu-home-services__visual--web .yu-service-cursor, .yu-homepage .yu-home-services__visual--seo .yu-service-orbit, .yu-homepage .yu-home-services__visual--seo .yu-service-orbit--inner, .yu-homepage .yu-home-services__visual--seo .yu-service-magnify, .yu-homepage .yu-home-services__visual--meta .yu-service-message, .yu-homepage .yu-home-services__visual--meta .yu-service-message--two, .yu-homepage .yu-home-services__visual--meta .yu-service-connector, .yu-homepage .yu-home-services__visual--google .yu-service-search-dot, .yu-homepage .yu-home-services__visual--google .yu-service-searchline, .yu-homepage .yu-home-services__visual--social .yu-service-ring, .yu-homepage .yu-home-services__visual--social .yu-service-ring--two, .yu-homepage .yu-home-services__visual--social .yu-service-social-dot, .yu-homepage .yu-home-final-cta__orbit--outer, .yu-homepage .yu-home-final-cta__orbit--inner, .yu-homepage .yu-home-final-cta__core, .yu-homepage .yu-home-final-cta__beam--one, .yu-homepage .yu-home-final-cta__beam--two, .yu-homepage .yu-home-final-cta__status i{animation:none!important;} .yu-homepage .yu-home-results__track{transition:none;} } @media (max-width:720px){ .yu-homepage .yu-home-services__visual{height:152px;} .yu-homepage .yu-home-services__card{min-height:0;} } @media (prefers-reduced-motion:reduce){ .yu-homepage .yu-home-final-cta__orbit--outer::after, .yu-homepage .yu-home-final-cta__chip{animation:none!important;} } @media (prefers-reduced-motion:reduce){ .yu-homepage .yu-home-why__reason-card{transition:none!important;} } @media (max-width:700px){ html, body{ width:100%; max-width:100%; overflow-x:hidden; } .yu-homepage{ width:100%; max-width:100%; overflow-x:clip; } .yu-homepage .yu-container{ width:calc(100% - 28px); max-width:none; min-width:0; } /* HERO */ .yu-homepage .yu-home-hero{ width:100%; min-width:0; overflow:clip; } .yu-homepage .yu-home-hero__inner{ width:100%; max-width:none; min-width:0; grid-template-columns:minmax(0,1fr); } .yu-homepage .yu-home-hero__copy, .yu-homepage .yu-home-hero__title, .yu-homepage .yu-home-hero__lead, .yu-homepage .yu-home-hero__actions, .yu-homepage .yu-home-hero__proof{ width:100%; max-width:100%; min-width:0; } .yu-homepage .yu-home-hero__title{ font-size:clamp(42px,12.2vw,58px); line-height:1.08; letter-spacing:-.02em; overflow-wrap:normal; } .yu-homepage .yu-home-hero__title .yu-home-hero__word-slot{ width:9.2ch; max-width:100%; } .yu-homepage .yu-home-hero__lead{ font-size:15px; line-height:1.65; overflow-wrap:anywhere; } .yu-homepage .yu-home-hero__actions{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; } .yu-homepage .yu-home-hero__primary, .yu-homepage .yu-home-hero__secondary{ width:100%; max-width:100%; min-width:0; min-height:52px; box-sizing:border-box; transform:none !important; } .yu-homepage .yu-home-hero__proof{ display:grid; grid-template-columns:1fr; gap:8px; } .yu-homepage .yu-home-hero__proof-card{ width:100%; min-width:0; min-height:66px; box-sizing:border-box; } .yu-homepage .yu-home-hero__proof-card strong{ font-size:14px; } .yu-homepage .yu-home-hero__proof-card small{ font-size:9px; } .yu-homepage .yu-home-hero__signal{ width:100%; max-width:100%; margin-top:18px; overflow:hidden; white-space:normal; } .yu-homepage .yu-home-hero__visual{ width:100%; min-width:0; height:420px; min-height:420px; margin-top:6px; overflow:hidden; contain:layout paint; } .yu-homepage .yu-home-hero__system{ width:600px; height:500px; max-width:none; transform:scale(.60); transform-origin:center center; } .yu-homepage .yu-home-hero__visual-label{ top:8px; right:8px; max-width:calc(100% - 16px); } /* TRUST */ .yu-homepage .yu-home-trust__intro, .yu-homepage .yu-home-services__header, .yu-homepage .yu-home-results__intro, .yu-homepage .yu-home-founder__topline, .yu-homepage .yu-home-faq__topline, .yu-homepage .yu-home-final-cta__topline{ width:100%; min-width:0; } /* WHY */ .yu-homepage .yu-home-why__reason-heading{ width:100%; min-width:0; } .yu-homepage .yu-home-why__scroll-note{ max-width:100%; white-space:normal; } /* SERVICES */ .yu-homepage .yu-home-services__header-note, .yu-homepage .yu-home-services__focus, .yu-homepage .yu-home-services__card{ max-width:100%; min-width:0; } .yu-homepage .yu-home-services__focus-copy, .yu-homepage .yu-home-services__focus-visual{ min-width:0; } .yu-homepage .yu-home-services__focus-points{ max-width:100%; } .yu-homepage .yu-home-services__focus-link{ max-width:100%; } /* RESULTS */ .yu-homepage .yu-home-results__shell, .yu-homepage .yu-home-results__showcase, .yu-homepage .yu-home-results__viewport, .yu-homepage .yu-home-results__track, .yu-homepage .yu-home-results__slide{ width:100%; max-width:100%; min-width:0; box-sizing:border-box; } .yu-homepage .yu-home-results__slide-grid, .yu-homepage .yu-home-results__metric-row{ min-width:0; } .yu-homepage .yu-home-results__slide-copy, .yu-homepage .yu-home-results__slide-copy > p{ min-width:0; max-width:100%; overflow-wrap:anywhere; } .yu-homepage .yu-home-results__controls{ max-width:100%; overflow-x:auto; scrollbar-width:none; } .yu-homepage .yu-home-results__controls::-webkit-scrollbar{display:none} /* FOUNDER */ .yu-homepage .yu-home-founder__shell, .yu-homepage .yu-home-founder__grid, .yu-homepage .yu-home-founder__content, .yu-homepage .yu-home-founder__visual{ width:100%; max-width:100%; min-width:0; box-sizing:border-box; } .yu-homepage .yu-home-founder__visual{ overflow:hidden; } .yu-homepage .yu-home-founder__content p{ overflow-wrap:anywhere; } /* FAQ */ .yu-homepage .yu-home-faq__shell, .yu-homepage .yu-home-faq__body, .yu-homepage .yu-home-faq__list, .yu-homepage .yu-home-faq__item{ width:100%; max-width:100%; min-width:0; box-sizing:border-box; } .yu-homepage .yu-home-faq__question-text, .yu-homepage .yu-home-faq__answer p{ overflow-wrap:anywhere; } /* FINAL CTA */ .yu-homepage .yu-home-final-cta__shell, .yu-homepage .yu-home-final-cta__grid, .yu-homepage .yu-home-final-cta__copy, .yu-homepage .yu-home-final-cta__visual{ width:100%; max-width:100%; min-width:0; box-sizing:border-box; } .yu-homepage .yu-home-final-cta__visual{ overflow:hidden; } } @media (max-width:520px){ .yu-homepage .yu-home-hero__visual{ height:380px; min-height:380px; } .yu-homepage .yu-home-hero__system{ transform:scale(.55); } .yu-homepage .yu-home-services__visual{ height:150px; margin-bottom:22px; } .yu-homepage .yu-home-results__shell{ padding:16px; border-radius:22px; } .yu-homepage .yu-home-final-cta__visual{ min-height:330px; } } @media (max-width:390px){ .yu-homepage .yu-container{ width:calc(100% - 24px); } .yu-homepage .yu-home-hero__title{ font-size:clamp(39px,11.8vw,49px); } .yu-homepage .yu-home-hero__visual{ height:350px; min-height:350px; } .yu-homepage .yu-home-hero__system{ transform:scale(.50); } } /* ========================================================= HOMEPAGE SERVICES FOCUS — RESPONSIVE v0.8.1 ========================================================= */ @media (max-width: 900px){ .yu-homepage .yu-home-services__focus-visual[data-yu-services-visual]{ min-height:420px; grid-template-columns:1fr 1.35fr 1fr; } } @media (max-width: 640px){ .yu-homepage .yu-home-services__focus-visual[data-yu-services-visual]{ min-height:510px; padding:16px 14px 12px; grid-template-columns:1fr; grid-template-rows:30px auto 190px auto auto; gap:8px; } .yu-homepage .yu-focus-visual__signal{grid-column:1;grid-row:1;} .yu-homepage .yu-focus-visual__channels{ grid-column:1;grid-row:2; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; align-content:stretch; } .yu-homepage .yu-focus-visual__channel{min-height:32px;padding:6px 7px;font-size:7px;} .yu-homepage .yu-focus-visual__channel b{width:20px;height:20px;font-size:10px;} .yu-homepage .yu-focus-visual__funnel-area{ grid-column:1;grid-row:3; min-height:190px; } .yu-homepage .yu-focus-visual__funnel-ring--outer{width:220px;height:150px;} .yu-homepage .yu-focus-visual__funnel-ring--inner{width:154px;height:104px;} .yu-homepage .yu-focus-visual__funnel{transform:scale(.92);} .yu-homepage .yu-focus-visual__landing{grid-column:1;grid-row:4;position:relative;left:auto;bottom:auto;transform:none;justify-self:center;} .yu-homepage .yu-focus-visual__outcome{position:relative;right:auto;width:100%;padding:8px 10px;} .yu-homepage .yu-focus-visual__outcome--enquiry{grid-column:1;grid-row:5;top:auto;} .yu-homepage .yu-focus-visual__outcome--qualified{display:none;} .yu-homepage .yu-focus-visual__stats{grid-column:1;grid-row:6;grid-template-columns:repeat(3,minmax(0,1fr));} .yu-homepage .yu-focus-visual__stats span{padding:8px 7px;align-items:flex-start;flex-direction:column;gap:4px;} .yu-homepage .yu-focus-visual__stats b{font-size:16px;} .yu-homepage .yu-focus-visual__stats small{font-size:5.5px;} } @media (prefers-reduced-motion: reduce){ .yu-homepage .yu-focus-visual__signal i, .yu-homepage .yu-focus-visual__channel, .yu-homepage .yu-focus-visual__funnel-ring, .yu-homepage .yu-focus-visual__funnel-flow, .yu-homepage .yu-focus-visual__packet{animation:none!important;} } @media (max-width: 640px){ .yu-homepage .yu-home-services__focus-visual[data-yu-services-visual]{ min-height:560px; grid-template-rows:30px auto 180px auto auto auto 64px; } .yu-homepage .yu-home-services__focus-visual .yu-focus-visual__landing{grid-column:1;grid-row:4;} .yu-homepage .yu-home-services__focus-visual .yu-focus-visual__outcome--enquiry{grid-column:1;grid-row:5;} .yu-homepage .yu-home-services__focus-visual .yu-focus-visual__outcome--qualified{display:block;grid-column:1;grid-row:6;} .yu-homepage .yu-home-services__focus-visual .yu-focus-visual__stats{grid-column:1;grid-row:7;} } /* ========================================================= HOMEPAGE LEAD FOCUS — RESPONSIVE COMPOSITION Only the Lead Generation focus scene is changed here. ========================================================= */ @media (max-width:900px){ .yu-homepage .yu-home-services__focus-visual[data-service="lead"] .yu-focus-visual__lead-scene{ grid-template-columns:110px minmax(150px,1fr) 112px; gap:8px 10px; padding:14px 12px 11px; } } @media (max-width:640px){ .yu-homepage .yu-home-services__focus-visual[data-service="lead"] .yu-focus-visual__lead-scene{ grid-template-columns:1fr; grid-template-rows:24px auto 160px auto 50px; gap:7px; padding:12px 10px 9px; overflow:hidden; } .yu-homepage .yu-focus-lead__signal{grid-column:1;grid-row:1;font-size:6.5px} .yu-homepage .yu-focus-lead__channels{grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;align-content:stretch} .yu-homepage .yu-focus-lead__channel{min-height:28px;padding:5px 6px;font-size:7px} .yu-homepage .yu-focus-lead__channel b{width:18px;height:18px;font-size:9px} .yu-homepage .yu-focus-lead__funnel-wrap{grid-column:1;grid-row:3;min-height:160px} .yu-homepage .yu-focus-lead__ring--outer{width:180px;height:128px}.yu-homepage .yu-focus-lead__ring--inner{width:124px;height:88px} .yu-homepage .yu-focus-lead__funnel{transform:scale(.9)} .yu-homepage .yu-focus-lead__landing{bottom:0;font-size:7px;padding:5px 8px} .yu-homepage .yu-focus-lead__outcomes{grid-column:1;grid-row:4;display:grid;grid-template-columns:1fr 24px 1fr;align-items:center;gap:5px} .yu-homepage .yu-focus-lead__outcome{padding:7px;border-radius:9px;min-width:0} .yu-homepage .yu-focus-lead__outcome-icon{width:20px;height:20px;font-size:9px} .yu-homepage .yu-focus-lead__outcome strong{font-size:19px}.yu-homepage .yu-focus-lead__outcome em{font-size:5.5px}.yu-homepage .yu-focus-lead__outcome small{font-size:5.5px} .yu-homepage .yu-focus-lead__outcome-arrow{align-self:center} .yu-homepage .yu-focus-lead__stats{grid-column:1;grid-row:5;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px} .yu-homepage .yu-focus-lead__stats span{padding:7px 6px;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px} .yu-homepage .yu-focus-lead__stats b{font-size:14px}.yu-homepage .yu-focus-lead__stats em{font-size:5.5px;text-align:left} } @media (max-width:390px){ .yu-homepage .yu-home-services__focus-visual[data-service="lead"] .yu-focus-visual__lead-scene{grid-template-rows:22px auto 146px auto 47px} .yu-homepage .yu-focus-lead__channel{font-size:6.5px}.yu-homepage .yu-focus-lead__channel b{width:17px;height:17px;font-size:8px} .yu-homepage .yu-focus-lead__funnel-wrap{min-height:146px} .yu-homepage .yu-focus-lead__funnel{transform:scale(.82)} .yu-homepage .yu-focus-lead__ring--outer{width:164px;height:118px}.yu-homepage .yu-focus-lead__ring--inner{width:116px;height:82px} .yu-homepage .yu-focus-lead__outcome strong{font-size:17px}.yu-homepage .yu-focus-lead__stats b{font-size:13px} } /* Lead Generation service card: compact responsive system */ @media (max-width:720px){ .yu-homepage .yu-home-services__visual--lead .yu-lead-card-system{inset:10px 9px 9px;border-radius:12px} .yu-homepage .yu-lead-card-system__body{grid-template-columns:.98fr 1.12fr .74fr;gap:5px;padding:6px} .yu-homepage .yu-lead-card-system__channels{gap:3px} .yu-homepage .yu-lead-card-system__channels span{height:15px;font-size:5px;padding:2px 3px} .yu-homepage .yu-lead-card-system__channels b{width:11px;height:11px;font-size:5.5px} .yu-homepage .yu-lead-card-system__shape{width:58px;height:51px;transform:scale(.92);transform-origin:center} .yu-homepage .yu-lead-card-system__shape i:nth-child(1){width:53px} .yu-homepage .yu-lead-card-system__shape i:nth-child(2){width:39px} .yu-homepage .yu-lead-card-system__shape i:nth-child(3){width:25px} .yu-homepage .yu-lead-card-system__outcomes{gap:4px} .yu-homepage .yu-lead-card-system__outcomes span{min-height:29px;padding:4px 5px} .yu-homepage .yu-lead-card-system__outcomes b{font-size:11px} .yu-homepage .yu-lead-card-system__outcomes small{font-size:4px} } @media (max-width:430px){ .yu-homepage .yu-lead-card-system__head{padding:0 7px;font-size:5px} .yu-homepage .yu-lead-card-system__body{grid-template-columns:.95fr 1fr .76fr;gap:4px;padding:5px} .yu-homepage .yu-lead-card-system__channels span{font-size:4.6px;height:14px} .yu-homepage .yu-lead-card-system__channels b{width:10px;height:10px} .yu-homepage .yu-lead-card-system__shape{transform:scale(.84)} } @media (prefers-reduced-motion:reduce){ .yu-homepage .yu-lead-card-system__head i, .yu-homepage .yu-lead-card-system__channels span, .yu-homepage .yu-lead-card-system__shape em{animation:none!important} } /* ========================================================= HOMEPAGE SERVICE CARDS — v0.8.6 SIX-CARD RESPONSIVE ========================================================= */ @media (max-width: 900px){ .yu-homepage .yu-home-services__visual{height:142px;} .yu-homepage .yu-service-pro-web__browser{right:18px;} .yu-homepage .yu-service-pro-meta__audience,.yu-homepage .yu-service-pro-meta__reach{right:4px;width:58px;} } @media (max-width: 720px){ .yu-homepage .yu-home-services__visual{height:158px!important;margin-top:15px!important;margin-bottom:21px!important;} .yu-homepage .yu-service-pro-web{inset:9px 9px}.yu-homepage .yu-service-pro-web__browser{inset:5px 20px 5px 8px}.yu-homepage .yu-service-pro-web__nav{gap:5px}.yu-homepage .yu-service-pro-web__nav span:nth-child(3){display:none}.yu-homepage .yu-service-pro-web__hero{top:27px} .yu-homepage .yu-service-pro-seo{inset:10px 9px}.yu-homepage .yu-service-pro-seo__result{right:50px} .yu-homepage .yu-service-pro-meta{inset:8px 7px}.yu-homepage .yu-service-pro-meta__sidebar{width:49px}.yu-homepage .yu-service-pro-meta__ad{left:59px}.yu-homepage .yu-service-pro-meta__audience,.yu-homepage .yu-service-pro-meta__reach{width:56px}.yu-homepage .yu-service-pro-meta__lead{left:57px} .yu-homepage .yu-service-pro-google{inset:9px 8px}.yu-homepage .yu-service-pro-google__ad{right:60px}.yu-homepage .yu-service-pro-google__conversion{width:56px} .yu-homepage .yu-service-pro-social{inset:9px 8px} .yu-homepage .yu-home-services__visual--lead .yu-lead-card-system{inset:9px 8px 8px} } @media (max-width: 430px){ .yu-homepage .yu-home-services__visual{height:148px!important;} .yu-homepage .yu-service-pro-web__hero strong{font-size:10px}.yu-homepage .yu-service-pro-web__nav{font-size:4px}.yu-homepage .yu-service-pro-web__nav b{font-size:4px} .yu-homepage .yu-service-pro-meta__ad{width:86px}.yu-homepage .yu-service-pro-meta__reach,.yu-homepage .yu-service-pro-meta__audience{width:49px}.yu-homepage .yu-service-pro-meta__audience div{gap:2px} .yu-homepage .yu-service-pro-google__conversion{width:51px}.yu-homepage .yu-service-pro-google__ad{right:55px} .yu-homepage .yu-service-pro-social__tabs span{height:20px;font-size:7px}.yu-homepage .yu-service-pro-social__posts{top:31px;height:49px}.yu-homepage .yu-service-pro-social__stats strong{font-size:11px} } /* ========================================================= HOMEPAGE HERO — LIVE COPY RESPONSIVE OVERRIDES (v0.9.6) ========================================================= */ @media (max-width:1240px) and (min-width:1041px){ .yu-home-hero__inner{ grid-template-columns:minmax(0,1fr) minmax(500px,1fr); gap:28px; } .yu-home-hero__title--live{ max-width:600px; font-size:clamp(3rem,4.5vw,4rem); } .yu-home-hero__lead--live{max-width:560px;font-size:16px;} .yu-home-hero__proof-line{max-width:580px;font-size:11px;} } @media (max-width:1040px){ .yu-home-hero__copy{max-width:760px;padding-top:15px;padding-right:0;} .yu-home-hero__title--live{ max-width:760px; font-size:clamp(3rem,7vw,4.25rem); line-height:1.08; } .yu-home-hero__lead--live{max-width:680px;font-size:17px;} .yu-home-hero__proof-line{max-width:680px;font-size:12px;} } @media (max-width:760px){ .yu-home-hero{padding-top:104px;padding-bottom:48px;} .yu-home-hero__copy{padding-bottom:10px;} .yu-home-hero__eyebrow{margin-bottom:16px;font-size:11px;} .yu-home-hero__title--live{ max-width:100%; margin-bottom:17px; font-size:clamp(2.55rem,10.8vw,3.55rem); line-height:1.08; letter-spacing:-.02em; text-wrap:balance; } .yu-home-hero__lead--live{max-width:100%;font-size:15px;line-height:1.58;} .yu-home-hero__proof-line{ max-width:100%; margin-top:16px; font-size:9px; line-height:1.75; letter-spacing:.035em; } .yu-home-hero__proof-line b{padding:0 3px;} .yu-home-hero__actions--live{margin-top:18px;} .yu-home-hero__actions--live .yu-home-hero__primary{ width:100%; min-height:56px; justify-content:center; padding-inline:12px; font-size:10px; } .yu-home-hero__whatsapp{width:20px;height:20px;flex-basis:20px;} } @media (max-width:430px){ .yu-home-hero{padding-top:94px;} .yu-home-hero__title--live{font-size:clamp(2.35rem,10.8vw,3rem);} .yu-home-hero__lead--live{font-size:14px;} .yu-home-hero__proof-line{font-size:8.5px;line-height:1.7;} .yu-home-hero__actions--live .yu-home-hero__primary{font-size:9.5px;min-height:54px;} } /* ========================================================= YUVAU DIGITAL GLOBAL RESPONSIVE SYSTEM — v0.9.7 ========================================================= */ @media (min-width:1241px) { .yu-homepage .yu-home-hero__inner { grid-template-columns:minmax(0,1.04fr) minmax(560px,.96fr); gap:54px; } .yu-homepage .yu-home-hero__title--live { max-width:720px; } } @media (max-width:1240px) and (min-width:1041px) { .yu-homepage .yu-home-hero__inner { width:min(calc(100% - 48px),var(--yu-content-max)); grid-template-columns:minmax(0,1fr) minmax(500px,1fr); gap:28px; } .yu-homepage .yu-home-hero__title--live { max-width:620px; font-size:clamp(3.25rem,5vw,4.2rem); } .yu-homepage .yu-home-hero__lead--live { max-width:590px; font-size:16px; } .yu-homepage .yu-home-hero__proof-line { max-width:620px; } .yu-homepage .yu-home-hero__visual { transform:none; } } /* Tablet: stack before the text column becomes too narrow. */ @media (max-width:1040px) { .yu-homepage .yu-home-hero { padding:118px 0 64px; } .yu-homepage .yu-home-hero__inner { width:min(calc(100% - 48px),920px); min-height:auto; grid-template-columns:1fr; gap:36px; } .yu-homepage .yu-home-hero__copy { max-width:780px; margin-inline:auto; padding-bottom:0; } .yu-homepage .yu-home-hero__title--live { max-width:760px; font-size:clamp(3.2rem,7vw,4.5rem); } .yu-homepage .yu-home-hero__lead--live { max-width:700px; } .yu-homepage .yu-home-hero__proof-line { max-width:760px; } .yu-homepage .yu-home-hero__visual { position:relative; top:auto; width:100%; height:600px; min-height:600px; margin-top:0; } } @media (max-width:760px) { .yu-homepage .yu-home-hero { padding:104px 0 54px; } .yu-homepage .yu-home-hero__inner { width:min(calc(100% - 32px),680px); gap:28px; } .yu-homepage .yu-home-hero__eyebrow { margin-bottom:14px; font-size:10px; } .yu-homepage .yu-home-hero__title--live { max-width:100%; margin-bottom:17px; font-size:clamp(2.7rem,11.5vw,4rem); line-height:1.08; letter-spacing:-.02em; } .yu-homepage .yu-home-hero__lead--live { max-width:100%; font-size:15px; line-height:1.62; } .yu-homepage .yu-home-hero__proof-line { display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; margin-top:18px; font-size:9px; } .yu-homepage .yu-home-hero__proof-item { min-width:0; white-space:normal; align-items:center; } .yu-homepage .yu-home-hero__proof-item strong { font-size:10px; } .yu-homepage .yu-home-hero__proof-item small { font-size:8px; } .yu-homepage .yu-home-hero__proof-divider { display:none; } .yu-homepage .yu-home-hero__actions--live { margin-top:20px; } .yu-homepage .yu-home-hero__actions--live .yu-home-hero__primary { width:100%; min-height:56px; justify-content:center; padding-inline:14px; } .yu-homepage .yu-home-hero__visual { height:500px; min-height:500px; margin-top:0; overflow:visible; } .yu-homepage .yu-home-hero__system { width:600px; height:500px; transform:scale(.76); transform-origin:center center; } .yu-homepage .yu-home-hero__visual-label { right:2px; font-size:7px; } .yu-homepage .yu-home-hero__hint { display:none; } /* Keep the full interactive engine visible after scaling. */ .yu-homepage .yu-home-hero__visual { overflow:visible; contain:layout; } .yu-homepage .yu-home-hero__system { transform-origin:center center; } } @media (max-width:430px) { .yu-homepage .yu-home-hero { padding-top:92px; } .yu-homepage .yu-home-hero__inner { width:calc(100% - 28px); gap:22px; } .yu-homepage .yu-home-hero__title--live { font-size:clamp(2.35rem,10.8vw,3rem); line-height:1.08; } .yu-homepage .yu-home-hero__lead--live { font-size:14px; line-height:1.62; } .yu-homepage .yu-home-hero__proof-line { grid-template-columns:1fr 1fr; gap:8px 9px; } .yu-homepage .yu-home-hero__proof-item { gap:4px; } .yu-homepage .yu-home-hero__proof-item strong { font-size:9px; } .yu-homepage .yu-home-hero__proof-item small { font-size:7.5px; } .yu-homepage .yu-home-hero__actions--live .yu-home-hero__primary { font-size:10px; min-height:54px; } .yu-homepage .yu-home-hero__visual { height:420px; min-height:420px; overflow:visible; contain:layout; } .yu-homepage .yu-home-hero__system { width:600px; transform:scale(.62); transform-origin:center center; } } /* WHY YUVAU v0.10.0 responsive */ @media (max-width:1100px){ .yu-home-why-v2__top{grid-template-columns:1fr;gap:26px;margin-bottom:44px} .yu-home-why-v2__top h2{max-width:800px}.yu-home-why-v2__main{grid-template-columns:1fr;gap:46px}.yu-home-why-v2__visual{max-width:760px;width:100%;margin-inline:auto}.yu-home-why-v2__reasons{max-width:900px;width:100%;margin-inline:auto} .yu-home-why-v2__stats{grid-template-columns:repeat(2,1fr)}.yu-home-why-v2__stats article:nth-child(3){border-left:0;border-top:1px solid rgba(37,99,235,.10)}.yu-home-why-v2__stats article:nth-child(4){border-top:1px solid rgba(37,99,235,.10)} } @media (max-width:720px){ .yu-home-why-v2{padding-block:78px}.yu-home-why-v2__top h2{font-size:clamp(2.8rem,13vw,4.5rem);line-height:1.08}.yu-home-why-v2__subhead{font-size:17px}.yu-home-why-v2__intro-copy{font-size:16px}.yu-home-why-v2__visual{min-height:0;padding:22px 0 0}.yu-home-why-v2__photo{width:94%;margin-left:3%}.yu-home-why-v2__visual-footer{width:92%;margin-left:8%;grid-template-columns:1fr;padding:16px 18px}.yu-home-why-v2__growth{border-left:0;border-top:1px solid rgba(37,99,235,.12);padding:12px 0 0;margin-top:12px}.yu-home-why-v2__reason-grid{grid-template-columns:1fr}.yu-home-why-v2__reasons h3{font-size:clamp(2rem,9vw,3rem)}.yu-home-why-v2__reason{grid-template-columns:50px minmax(0,1fr);padding:19px}.yu-home-why-v2__icon{width:46px;height:46px}.yu-home-why-v2__stats{grid-template-columns:1fr;margin-top:42px}.yu-home-why-v2__stats article{padding:20px}.yu-home-why-v2__stats article+article,.yu-home-why-v2__stats article:nth-child(3){border-left:0;border-top:1px solid rgba(37,99,235,.10)} } @media (max-width:430px){ .yu-home-why-v2{padding-block:68px}.yu-home-why-v2__eyebrow{font-size:10px}.yu-home-why-v2__top h2{font-size:clamp(2.45rem,13vw,3.5rem)}.yu-home-why-v2__photo img{aspect-ratio:1.22}.yu-home-why-v2__since{left:10px;top:-18px;min-width:110px;padding:11px 14px}.yu-home-why-v2__since strong{font-size:25px}.yu-home-why-v2__visual-footer{margin-left:3%;width:94%}.yu-home-why-v2__stats strong{font-size:27px} } /* WHY YUVAU v0.10.1 — responsive alignment hardening */ @media (max-width:720px){ .yu-homepage .yu-home-why-v2{padding-block:72px} .yu-homepage .yu-home-why-v2__top{gap:20px;margin-bottom:36px} .yu-homepage .yu-home-why-v2__top h2{max-width:100%;font-size:clamp(2.75rem,13vw,4rem);line-height:1.08} .yu-homepage .yu-home-why-v2__subhead{font-size:16px;line-height:1.5} .yu-homepage .yu-home-why-v2__intro-copy{font-size:15px;line-height:1.62} .yu-homepage .yu-home-why-v2__main{gap:38px} .yu-homepage .yu-home-why-v2__visual{width:100%;padding:22px 0 0} .yu-homepage .yu-home-why-v2__photo{width:94%;margin-left:3%} .yu-homepage .yu-home-why-v2__visual-footer{width:92%;margin-left:8%;grid-template-columns:1fr;padding:15px 17px} .yu-homepage .yu-home-why-v2__reasons h3{font-size:clamp(2rem,9vw,3rem);margin-bottom:18px} .yu-homepage .yu-home-why-v2__reason-grid{grid-template-columns:1fr;gap:12px} .yu-homepage .yu-home-why-v2__reason{min-height:0;padding:18px} .yu-homepage .yu-home-why-v2__stats{margin-top:38px} } @media (max-width:430px){ .yu-homepage .yu-home-why-v2{padding-block:64px} .yu-homepage .yu-home-why-v2__eyebrow{font-size:10px;margin-bottom:14px} .yu-homepage .yu-home-why-v2__top h2{font-size:clamp(2.45rem,13.5vw,3.35rem)} .yu-homepage .yu-home-why-v2__photo img{aspect-ratio:1.28} .yu-homepage .yu-home-why-v2__since{left:8px;top:-16px;min-width:108px;padding:10px 13px} .yu-homepage .yu-home-why-v2__since strong{font-size:24px} .yu-homepage .yu-home-why-v2__visual-footer{margin-left:3%;width:94%} .yu-homepage .yu-home-why-v2__stats article{padding:18px} .yu-homepage .yu-home-why-v2__stats strong{font-size:26px} } /* WHY YUVAU v0.10.2 — prevent duplicate visual footer collapse */ .yu-homepage .yu-home-why-v2__visual-footer{display:none;} .yu-homepage .yu-home-why-v2__photo img{height:auto;aspect-ratio:auto;object-fit:contain;} @media (max-width:720px){ .yu-homepage .yu-home-why-v2__photo img{height:auto;aspect-ratio:auto;} } /* v0.10.5 — final responsive copy-label guards */ @media (max-width:760px){ .yu-home-services__header-note{width:100%} .yu-home-services__header-note small{margin-bottom:5px} .yu-home-faq__intro h2{max-width:100%} } /* ========================================================= HOMEPAGE HERO MOBILE STABILITY — v0.10.12 Replace the scaled desktop composition with a bounded mobile composition so cards cannot collapse into the next section. ========================================================= */ @media (max-width: 700px){ .yu-homepage .yu-home-hero__visual{ width:100%; height:500px; min-height:500px; margin-top:4px; overflow:hidden; contain:layout paint; } .yu-homepage .yu-home-hero__system{ width:360px; height:430px; max-width:360px; transform:none !important; transform-origin:center center; margin:0 auto; } .yu-homepage .yu-home-hero__network{ opacity:.55; } .yu-homepage .yu-home-hero__orbit--one{ width:300px; height:300px; } .yu-homepage .yu-home-hero__orbit--two{ width:340px; height:210px; } .yu-homepage .yu-home-hero__node{ width:142px; min-height:98px; padding:12px 12px 11px; border-radius:18px; box-shadow:0 16px 34px rgba(30,75,135,.11),inset 0 1px 0 #fff; } .yu-homepage .yu-home-hero__node--one{ left:5px; top:34px; transform:rotate(-3deg); } .yu-homepage .yu-home-hero__node--two{ right:5px; top:34px; transform:rotate(3deg); } .yu-homepage .yu-home-hero__node--three{ left:5px; bottom:67px; transform:rotate(3deg); } .yu-homepage .yu-home-hero__node--four{ right:5px; bottom:67px; transform:rotate(-3deg); } .yu-homepage .yu-home-hero__node-top span{font-size:7px;} .yu-homepage .yu-home-hero__node-top b{font-size:6px;padding:4px 5px;} .yu-homepage .yu-home-hero__node strong{font-size:15px;margin-top:8px;} .yu-homepage .yu-home-hero__node p{max-width:108px;margin-top:5px;font-size:8px;line-height:1.35;} .yu-homepage .yu-home-hero__bars{right:12px;bottom:11px;width:54px;height:22px;gap:3px;} .yu-homepage .yu-home-hero__core{ width:190px; min-height:228px; padding:21px; border-radius:25px; } .yu-homepage .yu-home-hero__core::before{ inset:7px; border-radius:19px; } .yu-homepage .yu-home-hero__core-label{font-size:7px;} .yu-homepage .yu-home-hero__core h2{font-size:28px;margin:10px 0 6px;} .yu-homepage .yu-home-hero__core > p{font-size:9px;line-height:1.42;} .yu-homepage .yu-home-hero__core-progress{margin-top:16px;height:5px;} .yu-homepage .yu-home-hero__core-metric{margin-top:12px;} .yu-homepage .yu-home-hero__core-metric span{font-size:7px;} .yu-homepage .yu-home-hero__core-metric strong{font-size:21px;} .yu-homepage .yu-home-hero__flow{margin-top:13px;gap:4px;} .yu-homepage .yu-home-hero__flow span{padding:7px 2px;font-size:6px;} .yu-homepage .yu-home-hero__output{ width:238px; bottom:0; padding:11px 14px; border-radius:15px; } .yu-homepage .yu-home-hero__output small{font-size:6px;} .yu-homepage .yu-home-hero__output div{margin-top:5px;} .yu-homepage .yu-home-hero__output strong{font-size:20px;} .yu-homepage .yu-home-hero__output span{font-size:13px;} .yu-homepage .yu-home-hero__visual-label{ top:5px; right:5px; z-index:50; font-size:7px; padding:7px 9px; } } @media (max-width:430px){ .yu-homepage .yu-home-hero__visual{ height:500px; min-height:500px; } .yu-homepage .yu-home-hero__system{ width:350px; max-width:350px; height:430px; } .yu-homepage .yu-home-hero__node{ width:138px; } .yu-homepage .yu-home-hero__node--one{left:2px;} .yu-homepage .yu-home-hero__node--two{right:2px;} .yu-homepage .yu-home-hero__node--three{left:2px;} .yu-homepage .yu-home-hero__node--four{right:2px;} .yu-homepage .yu-home-hero__core{ width:184px; min-height:222px; padding:19px; } .yu-homepage .yu-home-hero__output{width:228px;} } /* ===== v0.10.22 RESPONSIVE: GOOGLE ADS CONCISE REDESIGN ===== */ @media (max-width:760px) { .yg22-hero__copy h1 { font-size:clamp(3rem,13.5vw,4.7rem); } .yg22-actions .yu-button { justify-content:center; } .yg22-final-card .yu-button { justify-content:center; } } @media (max-width:460px) { .yg22-section-head h2,.yg22-simple h2,.yg22-fit h2,.yg22-faq h2 { font-size:clamp(2.25rem,11vw,3.3rem); } } /* v0.10.69 — About gallery clean image responsive handling */ @media (max-width: 820px) { main.ya-page .ya-gallery-card--large img { object-position: center center !important; } } @media (max-width: 600px) { main.ya-page .ya-gallery-card--large img { object-position: center center !important; } } /* FOUNDER DEPLOYMENT FINAL — responsive layout override */ @media (max-width: 980px){ .yu-homepage .yu-home-founder__grid{grid-template-columns:1fr;gap:36px;} .yu-homepage .yu-home-founder__visual{max-width:760px;width:100%;margin:0 auto;min-height:560px;} .yu-homepage .yu-home-founder__content{max-width:760px;width:100%;margin:0 auto;padding-top:0;} .yu-homepage .yu-home-founder__content h2{font-size:clamp(3.4rem,9vw,5.6rem);} .yu-homepage .yu-home-founder__stats{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width: 620px){ .yu-homepage .yu-home-founder__shell{padding:22px 18px 20px;} .yu-homepage .yu-home-founder__visual{grid-template-columns:minmax(0,1.42fr) minmax(105px,.78fr);grid-template-rows:1fr 1fr;gap:10px;min-height:430px;padding:4px 2px 0 26px;} .yu-homepage .yu-home-founder__photo--main{min-height:430px;border-radius:22px;} .yu-homepage .yu-home-founder__photo--network,.yu-homepage .yu-home-founder__photo--recognition{min-height:205px;border-radius:18px;} .yu-homepage .yu-home-founder__photo-badge{top:12px;right:12px;padding:8px 10px;font-size:17px;border-radius:13px;} .yu-homepage .yu-home-founder__photo-badge small{font-size:7px;} .yu-homepage .yu-home-founder__visual-note{left:-2px;width:64px;font-size:8px;} .yu-homepage .yu-home-founder__photo-label{left:8px;right:8px;bottom:8px;padding:8px 9px;font-size:7px;} .yu-homepage .yu-home-founder__content h2{font-size:clamp(3rem,14vw,4.6rem);} .yu-homepage .yu-home-founder__lead{font-size:15px;} .yu-homepage .yu-home-founder__expertise{gap:7px;} .yu-homepage .yu-home-founder__expertise-item{min-height:38px;padding:6px 9px;font-size:8.5px;} .yu-homepage .yu-home-founder__stats{grid-template-columns:1fr 1fr;gap:9px;} .yu-homepage .yu-home-founder__stats article{min-height:100px;padding:15px 13px;} .yu-homepage .yu-home-founder__stats article strong{font-size:26px;} .yu-homepage .yu-home-founder__stats article:last-child{grid-column:1 / -1;} .yu-homepage .yu-home-founder__stats article:last-child strong{font-size:23px;} } @media (prefers-reduced-motion: reduce){ .yu-homepage .yu-home-founder__photo,.yu-homepage .yu-home-founder__photo img{transition:none!important;} } /* Stage 1 migration: homepage responsive geometry moved from the legacy global stack. */ /* ========================================================= * Batch 02 — Homepage alignment + compact desktop header * Keep the existing visual language; correct geometry only. * ========================================================= */ @media (min-width: 1025px) { /* One horizontal alignment rail across the homepage. */ .yu-homepage { --yu-home-max: var(--yu-content-max); } .yu-homepage .yu-container, .yu-homepage .yu-home-hero__inner { width: min(var(--yu-home-max), calc(100% - 116px)); max-width: var(--yu-home-max); margin-inline: auto; } .yu-header-inner { gap: 10px; padding-inline: 10px; } .yu-brand-logo { max-width: 136px; max-height: 42px; } .yu-primary-menu a { padding-inline: 7px; font-size: 12px; } } @media (min-width: 601px) { .yu-homepage #yu-home-hero.yu-home-hero--video { height: auto; min-height: min(900px, 100svh); padding: 0; display: flex; align-items: center; } .yu-homepage #yu-home-hero.yu-home-hero--video .yu-home-hero__inner { height: auto; min-height: 0; padding-block: clamp(104px, 17svh, 150px) clamp(44px, 8svh, 84px); } .yu-homepage #yu-home-hero .yu-home-hero__title--live, .yu-homepage #yu-home-hero .yu-home-hero__title { font-size: clamp(2.4rem, min(4.55vw, 8.6svh), 4.25rem) !important; } } @media (min-width: 601px) and (max-width: 900px) { .yu-homepage #yu-home-hero .yu-home-hero__title--live, .yu-homepage #yu-home-hero .yu-home-hero__title { font-size: clamp(2.4rem, min(8vw, 8.6svh), 4.2rem) !important; } } @media (min-width: 601px) and (max-height: 720px) { .yu-homepage #yu-home-hero.yu-home-hero--video .yu-home-hero__inner { padding-block: 92px 30px; } .yu-homepage #yu-home-hero .yu-home-hero__title--live, .yu-homepage #yu-home-hero .yu-home-hero__title { font-size: clamp(2.2rem, min(4.2vw, 7.4svh), 4rem) !important; margin-block: 14px; } .yu-homepage #yu-home-hero .yu-home-hero__eyebrow { margin-bottom: 0; } .yu-homepage #yu-home-hero .yu-home-hero__lead--live { font-size: 15px; line-height: 1.5; } .yu-homepage #yu-home-hero .yu-home-hero__proof-line { margin-top: 12px; } .yu-homepage #yu-home-hero .yu-home-hero__actions--live { margin-top: 14px; } .yu-homepage #yu-home-hero .yu-home-hero__actions--live .yu-home-hero__primary { min-height: 50px; } }