/** * base.css — design tokens, reset, keyframes and the component library. * * Component classes are authored in plain CSS against the CSS custom * properties that inc/customizer/customizer-css.php prints, so every colour, * radius, shadow, font and spacing value is admin-controlled and repaints live. * Tailwind utility classes used in markup are compiled separately to theme.css. */ /* ---- Fallback token defaults (overridden by the dynamic block) ---- */ :root{ --c-primary:#06b6d4;--c-primary-dark:#0891b2;--c-secondary:#ff8c42; --c-bg-dark:#0f172a;--c-surface-dark:#1e293b;--c-bg-light:#f8fafc; --c-text-light:#0f172a;--c-whatsapp:#25d366; --font-heading:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --container:1152px;--radius:16px;--radius-pill:9999px;--btn-radius:9999px; --shadow:0 18px 40px -14px rgba(2,6,23,.28); --space-section:7rem;--space-gap:1.5rem; --anim-duration:.8s;--anim-ease:cubic-bezier(0.22,1,0.36,1); } /* ---- Minimal reset (Tailwind preflight is disabled) ---------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:auto} body{margin:0;font-family:var(--font-body);line-height:1.6;background:var(--c-bg-light);color:var(--c-text-light);overflow-x:hidden;-webkit-font-smoothing:antialiased} .dark body{background:var(--c-bg-dark);color:#fff} h1,h2,h3,h4{font-family:var(--font-heading);line-height:1.1;margin:0;font-weight:800;letter-spacing:-.02em} p{margin:0} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:0;background:none} ul{list-style:none;margin:0;padding:0} ::selection{background:var(--c-primary);color:var(--c-bg-dark)} ::-webkit-scrollbar{width:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:linear-gradient(var(--c-primary),var(--c-secondary));border-radius:9999px} .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} .yp-skip-link{position:fixed;top:8px;left:8px;z-index:100;background:var(--c-primary);color:#fff;padding:.5rem 1rem;border-radius:8px;transform:translateY(-150%)} .yp-skip-link:focus{transform:none} :focus-visible{outline:2px solid var(--c-primary);outline-offset:3px;border-radius:4px} /* ---- Keyframes ----------------------------------------------------------- */ @keyframes yp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}} @keyframes yp-ping{75%,100%{transform:scale(2);opacity:0}} @keyframes yp-pulse{50%{opacity:.5}} @keyframes yp-bounce-down{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}} @keyframes yp-spin-fade{0%{opacity:0}100%{opacity:1}} /* ---- Layout primitives --------------------------------------------------- */ .yp-container{width:100%;max-width:var(--container);margin:0 auto;padding-left:1.5rem;padding-right:1.5rem} @media(min-width:768px){.yp-container{padding-left:2.5rem;padding-right:2.5rem}} .yp-section{padding-top:var(--space-section);padding-bottom:var(--space-section)} .yp-section--alt{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--c-primary) 4%,transparent),transparent)} .yp-prose{max-width:820px} .text-gradient{background:linear-gradient(90deg,var(--c-primary),var(--c-secondary));-webkit-background-clip:text;background-clip:text;color:transparent} .text-gradient-teal{color:var(--c-primary)} /* ---- Buttons ------------------------------------------------------------- */ .yp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 2rem;border-radius:var(--btn-radius);font-weight:600;transition:transform .3s var(--anim-ease),box-shadow .3s var(--anim-ease),background-color .3s;will-change:transform} .yp-btn i,.yp-btn svg{width:18px;height:18px} .yp-btn--sm{padding:.5rem 1rem;font-size:.85rem} .yp-btn--primary{background:linear-gradient(90deg,var(--c-primary),var(--c-secondary));color:#fff;box-shadow:0 12px 24px -10px color-mix(in srgb,var(--c-primary) 60%,transparent)} .yp-btn--primary:hover{transform:translateY(-4px) scale(1.03)} .yp-btn--outline{border:2px solid color-mix(in srgb,var(--c-primary) 45%,transparent);color:var(--c-primary)} .yp-btn--outline:hover{transform:translateY(-4px) scale(1.03);background:color-mix(in srgb,var(--c-primary) 10%,transparent)} .yp-btn--whatsapp{background:var(--c-whatsapp);color:#fff;box-shadow:0 4px 14px 0 rgba(37,211,102,.39)} .yp-btn--whatsapp:hover{transform:translateY(-4px);box-shadow:0 6px 20px 0 rgba(37,211,102,.5)} .yp-btn:active{transform:scale(.96)} .yp-buttons-rounded .yp-btn{border-radius:var(--radius)} .yp-link{display:inline-flex;align-items:center;gap:.4rem;color:var(--c-primary);font-weight:600} .yp-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:9999px;border:1px solid color-mix(in srgb,currentColor 12%,transparent);color:inherit;transition:color .3s,border-color .3s,transform .3s} .yp-icon-btn:hover{color:var(--c-primary);transform:translateY(-2px)} .yp-icon-btn i,.yp-icon-btn svg{width:18px;height:18px} /* ---- Header / nav -------------------------------------------------------- */ .yp-header{transition:background-color .3s,backdrop-filter .3s,box-shadow .3s,border-color .3s;border-bottom:1px solid transparent} .yp-header.is-scrolled{background:color-mix(in srgb,var(--c-bg-light) 72%,transparent);backdrop-filter:blur(16px);border-bottom-color:color-mix(in srgb,var(--c-text-light) 10%,transparent);box-shadow:0 4px 20px -12px rgba(2,6,23,.3)} .dark .yp-header.is-scrolled{background:color-mix(in srgb,var(--c-bg-dark) 72%,transparent);border-bottom-color:rgba(255,255,255,.1)} .yp-header-solid .yp-header{background:var(--c-bg-light)} .dark .yp-header-solid .yp-header{background:var(--c-bg-dark)} .yp-brand .custom-logo{max-height:44px;width:auto} .yp-nav__link{position:relative;display:inline-block;padding:.5rem .75rem;font-size:.9rem;font-weight:500;color:color-mix(in srgb,var(--c-text-light) 80%,transparent);transition:color .3s} .dark .yp-nav__link{color:rgba(255,255,255,.8)} .yp-nav__link:hover,.yp-nav__link.is-active{color:var(--c-primary)} .yp-nav__underline{position:absolute;left:.75rem;right:.75rem;bottom:-2px;height:2px;border-radius:9999px;background:linear-gradient(90deg,var(--c-primary),var(--c-secondary));transform:scaleX(0);transform-origin:left;transition:transform .3s var(--anim-ease)} .yp-nav__link:hover .yp-nav__underline,.yp-nav__link.is-active .yp-nav__underline{transform:scaleX(1)} .yp-icon-sun,.yp-menu-close{display:none} .dark .yp-icon-sun{display:inline-block} .dark .yp-icon-moon{display:none} [data-menu-open] .yp-menu-open{display:none} [data-menu-open] .yp-menu-close{display:inline-block} /* Mobile menu */ .yp-mobile-menu{position:fixed;inset:0;z-index:40;background:color-mix(in srgb,var(--c-bg-dark) 96%,transparent);backdrop-filter:blur(18px);opacity:0;pointer-events:none;transition:opacity .3s} .yp-mobile-menu.is-open{opacity:1;pointer-events:auto} .yp-mobile-menu__link{font-size:1.6rem;font-weight:700;color:rgba(255,255,255,.9);opacity:0;transform:translateY(24px);transition:opacity .4s var(--anim-ease),transform .4s var(--anim-ease),color .3s} .yp-mobile-menu.is-open .yp-mobile-menu__link{opacity:1;transform:none} .yp-mobile-menu__link.is-active{background:linear-gradient(90deg,var(--c-primary),var(--c-secondary));-webkit-background-clip:text;background-clip:text;color:transparent} /* ---- Section heading ----------------------------------------------------- */ .yp-heading{text-align:center;margin-bottom:3.5rem} .yp-heading--left{text-align:left} .yp-heading__title{font-size:clamp(1.9rem,4vw,3rem)} .yp-heading__bar{width:5rem;height:4px;border-radius:9999px;background:linear-gradient(90deg,var(--c-primary),var(--c-secondary));margin:1rem auto 0} .yp-heading--left .yp-heading__bar{margin-left:0} .yp-heading__subtitle{max-width:42rem;margin:1.25rem auto 0;color:color-mix(in srgb,var(--c-text-light) 70%,transparent)} .dark .yp-heading__subtitle{color:rgba(255,255,255,.7)} /* ---- Hero ---------------------------------------------------------------- */ .yp-hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:7rem 1.5rem 5rem;text-align:center} .yp-hero__bg{position:absolute;inset:0;z-index:-1} .yp-blob{position:absolute;border-radius:9999px;filter:blur(64px);animation:yp-float 7s ease-in-out infinite} .yp-blob--teal{left:8%;top:18%;width:18rem;height:18rem;background:color-mix(in srgb,var(--c-primary) 22%,transparent)} .yp-blob--orange{right:10%;top:30%;width:20rem;height:20rem;background:color-mix(in srgb,var(--c-secondary) 20%,transparent);animation-duration:9s} .yp-blob--teal2{bottom:12%;left:50%;width:18rem;height:18rem;transform:translateX(-50%);background:color-mix(in srgb,var(--c-primary) 12%,transparent)} .yp-hero__grid{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(15,23,42,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(15,23,42,.04) 1px,transparent 1px);background-size:64px 64px} .dark .yp-hero__grid{background-image:linear-gradient(to right,rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.03) 1px,transparent 1px)} .yp-hero__inner{display:flex;flex-direction:column;align-items:center} .yp-hero__badge{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.5rem;padding:.4rem 1rem;border-radius:9999px;border:1px solid color-mix(in srgb,var(--c-primary) 30%,transparent);background:color-mix(in srgb,var(--c-primary) 10%,transparent);color:var(--c-primary);font-size:.8rem;font-weight:500} .yp-hero__badge i,.yp-hero__badge svg{width:14px;height:14px} .yp-hero__name{font-size:clamp(2.5rem,7vw,4.5rem)} .yp-hero__tagline{margin-top:1.5rem;max-width:48rem;font-size:clamp(1.1rem,2.5vw,1.5rem);font-weight:600} .yp-hero__subtitle{margin-top:1rem;max-width:40rem;color:color-mix(in srgb,var(--c-text-light) 70%,transparent);font-weight:500} .dark .yp-hero__subtitle{color:rgba(255,255,255,.7)} .yp-hero__type{margin-top:1.5rem;min-height:2.5rem;font-size:clamp(1rem,2vw,1.25rem);font-weight:600;color:var(--c-primary)} .yp-type-caret{display:inline-block;width:2px;margin-left:2px;animation:yp-pulse 1s steps(1) infinite;color:var(--c-primary)} .yp-hero__cta{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2.25rem} .yp-ping{position:relative;display:inline-flex;width:8px;height:8px} .yp-ping>span{position:absolute;inset:0;border-radius:9999px;background:var(--c-primary);animation:yp-ping 1.4s cubic-bezier(0,0,.2,1) infinite} .yp-ping::after{content:"";position:relative;width:8px;height:8px;border-radius:9999px;background:var(--c-primary)} .yp-hero__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:4rem;width:100%;max-width:56rem} .yp-hero__scroll{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);width:24px;height:38px;border:2px solid color-mix(in srgb,var(--c-text-light) 30%,transparent);border-radius:9999px;display:flex;justify-content:center;padding-top:6px} .dark .yp-hero__scroll{border-color:rgba(255,255,255,.3)} .yp-hero__scroll span{width:4px;height:8px;border-radius:9999px;background:var(--c-primary);animation:yp-bounce-down 1.6s ease-in-out infinite} @media(min-width:768px){.yp-hero__stats{grid-template-columns:repeat(4,1fr);gap:1.5rem}} .yp-stat{padding:1.25rem;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--c-text-light) 10%,transparent);background:color-mix(in srgb,var(--c-bg-light) 60%,transparent);backdrop-filter:blur(4px)} .dark .yp-stat{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.05)} .yp-stat__icon{font-size:1.5rem;margin-bottom:.25rem} .yp-stat__value{font-size:clamp(1.5rem,3vw,1.9rem);font-weight:800} .yp-stat__label{margin-top:.25rem;font-size:.8rem;font-weight:500;color:color-mix(in srgb,var(--c-text-light) 70%,transparent)} .dark .yp-stat__label{color:rgba(255,255,255,.7)} /* ---- Cards / grids ------------------------------------------------------- */ .yp-grid{display:grid;gap:var(--space-gap)} .yp-grid--3{grid-template-columns:1fr} .yp-grid--4{grid-template-columns:1fr} @media(min-width:640px){.yp-grid--3,.yp-grid--4{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.yp-grid--3{grid-template-columns:repeat(3,1fr)}.yp-grid--4{grid-template-columns:repeat(4,1fr)}} .yp-card{position:relative;overflow:hidden;padding:1.75rem;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--c-text-light) 10%,transparent);background:var(--c-bg-light);box-shadow:var(--shadow);transition:transform .35s var(--anim-ease),box-shadow .35s var(--anim-ease)} .dark .yp-card{border-color:rgba(255,255,255,.1);background:color-mix(in srgb,var(--c-surface-dark) 60%,transparent)} .yp-card--hover:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 28px 60px -16px color-mix(in srgb,var(--c-primary) 30%,rgba(2,6,23,.4))} .yp-card__icon{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border-radius:14px;margin-bottom:1rem;font-size:1.6rem;background:linear-gradient(135deg,color-mix(in srgb,var(--c-primary) 15%,transparent),color-mix(in srgb,var(--c-secondary) 15%,transparent));transition:transform .3s} .yp-card--hover:hover .yp-card__icon{transform:scale(1.1)} .yp-card__icon--lg{width:3.5rem;height:3.5rem} .yp-card__title{font-size:1.2rem} .yp-card__subtitle{margin-top:.15rem;font-size:.72rem;font-weight:500;color:color-mix(in srgb,var(--c-text-light) 50%,transparent)} .dark .yp-card__subtitle{color:rgba(255,255,255,.5)} .yp-card__text{margin-top:.75rem;font-size:.9rem;color:color-mix(in srgb,var(--c-text-light) 75%,transparent)} .dark .yp-card__text{color:rgba(255,255,255,.75)} .yp-progress{margin-top:1rem;height:6px;border-radius:9999px;background:color-mix(in srgb,var(--c-text-light) 12%,transparent);overflow:hidden} .yp-progress__bar{display:block;height:100%;width:0;border-radius:9999px;background:linear-gradient(90deg,var(--c-primary),var(--c-secondary));transition:width 1.2s var(--anim-ease)} .yp-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .9rem;border-radius:9999px;background:color-mix(in srgb,var(--c-primary) 10%,transparent);color:var(--c-primary);font-size:.85rem;font-weight:500;margin-bottom:1rem} /* ---- About --------------------------------------------------------------- */ .yp-about__grid{display:grid;gap:3rem;align-items:center} @media(min-width:768px){.yp-about__grid{grid-template-columns:1fr 1fr;gap:4rem}} .yp-about__media{position:relative;max-width:24rem;margin:0 auto} .yp-about__frame{position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;border:1px solid color-mix(in srgb,var(--c-text-light) 10%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--c-primary) 15%,transparent),color-mix(in srgb,var(--c-secondary) 15%,transparent));display:flex;align-items:center;justify-content:center} .yp-about__frame img{width:100%;height:100%;object-fit:cover} .yp-about__frame::before{content:"";position:absolute;inset:-12px;z-index:-1;border-radius:28px;background:linear-gradient(135deg,var(--c-primary),var(--c-secondary));opacity:.3;filter:blur(28px)} .yp-about__placeholder{font-size:5rem;font-weight:900} .yp-about__badge{position:absolute;bottom:-1.25rem;right:-1rem;display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-radius:18px;background:var(--c-bg-light);box-shadow:var(--shadow);animation:yp-float 4s ease-in-out infinite} .dark .yp-about__badge{background:var(--c-surface-dark)} .yp-about__badge i,.yp-about__badge svg{color:var(--c-primary)} .yp-about__badge strong{display:block;font-size:.9rem} .yp-about__badge span{font-size:.72rem;color:color-mix(in srgb,var(--c-text-light) 60%,transparent)} .dark .yp-about__badge span{color:rgba(255,255,255,.6)} .yp-about__para{margin-bottom:1rem;color:color-mix(in srgb,var(--c-text-light) 75%,transparent)} .dark .yp-about__para{color:rgba(255,255,255,.75)} .yp-about__para--lead{font-size:1.15rem;font-weight:600;color:var(--c-text-light)} .dark .yp-about__para--lead{color:#fff} /* ---- Timeline ------------------------------------------------------------ */ .yp-timeline{position:relative} .yp-timeline__spine{position:absolute;left:1rem;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--c-primary),var(--c-secondary))} .yp-timeline__list{display:flex;flex-direction:column;gap:2rem} .yp-timeline__item{position:relative;padding-left:3rem} .yp-timeline__node{position:absolute;left:1rem;top:1.5rem;width:16px;height:16px;border-radius:9999px;transform:translateX(-50%);background:linear-gradient(135deg,var(--c-primary),var(--c-secondary));border:2px solid var(--c-bg-light)} .dark .yp-timeline__node{border-color:var(--c-bg-dark)} .yp-timeline__node.is-current::after{content:"";position:absolute;inset:-2px;border-radius:9999px;background:color-mix(in srgb,var(--c-primary) 50%,transparent);animation:yp-ping 1.6s cubic-bezier(0,0,.2,1) infinite} .yp-timeline__card{padding:1.5rem;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--c-text-light) 10%,transparent);background:var(--c-bg-light);box-shadow:var(--shadow);transition:box-shadow .3s} .dark .yp-timeline__card{border-color:rgba(255,255,255,.1);background:color-mix(in srgb,var(--c-surface-dark) 60%,transparent)} .yp-timeline__card:hover{box-shadow:0 24px 50px -18px color-mix(in srgb,var(--c-primary) 25%,rgba(2,6,23,.4))} .yp-timeline__meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem} .yp-timeline__role{display:flex;align-items:flex-start;gap:.5rem;font-size:1.1rem} .yp-timeline__role i,.yp-timeline__role svg{width:18px;height:18px;margin-top:3px;color:var(--c-secondary)} .yp-timeline__inst{margin-top:.25rem;font-size:.9rem;font-weight:500;color:color-mix(in srgb,var(--c-text-light) 70%,transparent)} .dark .yp-timeline__inst{color:rgba(255,255,255,.7)} .yp-timeline__highlight{margin-top:.75rem;padding:.5rem .75rem;border-radius:10px;font-size:.85rem;font-weight:500;background:linear-gradient(90deg,color-mix(in srgb,var(--c-primary) 10%,transparent),color-mix(in srgb,var(--c-secondary) 10%,transparent))} .yp-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .7rem;border-radius:9999px;font-size:.72rem;font-weight:600;background:color-mix(in srgb,var(--c-text-light) 6%,transparent)} .dark .yp-chip{background:rgba(255,255,255,.1)} .yp-chip i,.yp-chip svg{width:12px;height:12px} .yp-chip--teal{background:color-mix(in srgb,var(--c-primary) 12%,transparent);color:var(--c-primary)} .yp-chip--green{background:color-mix(in srgb,var(--c-whatsapp) 15%,transparent);color:var(--c-whatsapp)} @media(min-width:768px){ .yp-timeline__spine{left:50%} .yp-timeline__item{padding-left:0;width:calc(50% - 2.5rem)} .yp-timeline__item--left{margin-right:auto} .yp-timeline__item--right{margin-left:auto} .yp-timeline__node{left:auto} .yp-timeline__item--left .yp-timeline__node{right:-2.5rem;left:auto;transform:translateX(50%)} .yp-timeline__item--right .yp-timeline__node{left:-2.5rem;transform:translateX(-50%)} } /* ---- Philosophy / results ------------------------------------------------ */ .yp-quote{position:relative;max-width:48rem;margin:0 auto;padding:2rem;border-radius:24px;border:1px solid color-mix(in srgb,var(--c-primary) 20%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--c-primary) 5%,transparent),color-mix(in srgb,var(--c-secondary) 5%,transparent))} @media(min-width:768px){.yp-quote{padding:3rem}} .yp-quote__mark{color:color-mix(in srgb,var(--c-primary) 40%,transparent);width:48px;height:48px;margin-bottom:1rem} .yp-quote__viewport{position:relative;min-height:120px} .yp-quote__text{position:absolute;inset:0;opacity:0;transform:translateY(16px);transition:opacity .6s var(--anim-ease),transform .6s var(--anim-ease);font-size:clamp(1.05rem,2vw,1.3rem);font-weight:500} .yp-quote__text.is-active{position:relative;opacity:1;transform:none} .yp-quote__dots{display:flex;gap:.5rem;margin-top:2rem} .yp-quote__dot{width:8px;height:8px;border-radius:9999px;background:color-mix(in srgb,var(--c-text-light) 20%,transparent);transition:width .3s,background .3s} .dark .yp-quote__dot{background:rgba(255,255,255,.2)} .yp-quote__dot.is-active{width:2rem;background:linear-gradient(90deg,var(--c-primary),var(--c-secondary))} .yp-results{max-width:56rem;margin:3rem auto 0;padding:2rem;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--c-primary) 30%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--c-primary) 10%,transparent),color-mix(in srgb,var(--c-secondary) 10%,transparent))} .yp-results__title{text-align:center;color:var(--c-primary);font-size:1.4rem;margin-bottom:1.5rem} .yp-results__grid{display:grid;gap:1rem;grid-template-columns:1fr} @media(min-width:768px){.yp-results__grid{grid-template-columns:1fr 1fr}} .yp-results__item{display:flex;align-items:center;gap:.75rem;min-height:80px;padding:1rem;border-radius:12px;background:color-mix(in srgb,var(--c-bg-light) 60%,transparent)} .dark .yp-results__item{background:color-mix(in srgb,var(--c-bg-dark) 40%,transparent)} .yp-results__item i,.yp-results__item svg{flex-shrink:0;color:var(--c-secondary);fill:var(--c-secondary);width:22px;height:22px} .yp-results__item p{font-size:.9rem;font-weight:500} .yp-results__cta{text-align:center;margin-top:2rem} /* ---- Projects ------------------------------------------------------------ */ .yp-filter{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2.5rem} .yp-filter__btn{padding:.5rem 1.1rem;border-radius:9999px;font-size:.85rem;font-weight:600;border:1px solid color-mix(in srgb,var(--c-text-light) 12%,transparent);transition:all .3s} .dark .yp-filter__btn{border-color:rgba(255,255,255,.12)} .yp-filter__btn.is-active{background:linear-gradient(90deg,var(--c-primary),var(--c-secondary));color:#fff;border-color:transparent} .yp-project{overflow:hidden;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--c-text-light) 10%,transparent);background:var(--c-bg-light);box-shadow:var(--shadow);transition:transform .35s var(--anim-ease),box-shadow .35s var(--anim-ease)} .dark .yp-project{border-color:rgba(255,255,255,.1);background:color-mix(in srgb,var(--c-surface-dark) 60%,transparent)} .yp-project:hover{transform:translateY(-4px);box-shadow:0 28px 60px -16px color-mix(in srgb,var(--c-primary) 25%,rgba(2,6,23,.4))} .yp-project__media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden} .yp-project__img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--anim-ease)} .yp-project__img--ph{background:linear-gradient(135deg,color-mix(in srgb,var(--c-primary) 25%,transparent),color-mix(in srgb,var(--c-secondary) 25%,transparent))} .yp-project:hover .yp-project__img{transform:scale(1.06)} .yp-project__overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--c-bg-dark) 55%,transparent));opacity:0;transition:opacity .35s} .yp-project:hover .yp-project__overlay{opacity:1} .yp-project__body{padding:1.5rem} .yp-project__title{font-size:1.2rem} .yp-project__excerpt{margin-top:.5rem;font-size:.9rem;color:color-mix(in srgb,var(--c-text-light) 75%,transparent)} .dark .yp-project__excerpt{color:rgba(255,255,255,.75)} .yp-project__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem} .yp-project__tags li{padding:.2rem .65rem;border-radius:9999px;font-size:.72rem;font-weight:600;background:color-mix(in srgb,var(--c-primary) 10%,transparent);color:var(--c-primary)} .yp-project__tags--lg li{font-size:.8rem} .yp-project__actions{display:flex;gap:.6rem;margin-top:1.25rem} .yp-project__actions--lg{margin-top:2rem} .yp-section__more{text-align:center;margin-top:3rem} .yp-single-project__hero{margin:1.5rem 0;border-radius:var(--radius);overflow:hidden} .yp-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-top:2rem} .yp-gallery-grid figure{margin:0;border-radius:12px;overflow:hidden} /* ---- Contact ------------------------------------------------------------- */ .yp-contact__grid{display:grid;gap:2.5rem} @media(min-width:1024px){.yp-contact__grid{grid-template-columns:1fr 1fr}} .yp-contact__info{display:flex;flex-direction:column;gap:1rem} .yp-contact__card{display:flex;align-items:center;gap:1rem;padding:1.25rem;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--c-text-light) 10%,transparent);background:var(--c-bg-light);box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s} .dark .yp-contact__card{border-color:rgba(255,255,255,.1);background:color-mix(in srgb,var(--c-surface-dark) 60%,transparent)} a.yp-contact__card:hover{transform:translateY(-4px)} .yp-contact__icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:12px;flex-shrink:0;color:var(--c-primary);background:linear-gradient(135deg,color-mix(in srgb,var(--c-primary) 15%,transparent),color-mix(in srgb,var(--c-secondary) 15%,transparent))} .yp-contact__meta{display:flex;flex-direction:column;min-width:0} .yp-contact__label{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:color-mix(in srgb,var(--c-text-light) 50%,transparent)} .dark .yp-contact__label{color:rgba(255,255,255,.5)} .yp-contact__value{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .yp-contact__note{display:flex;gap:.6rem;padding:1.25rem;border-radius:var(--radius);font-size:.9rem;background:color-mix(in srgb,var(--c-primary) 10%,transparent)} .yp-contact__note i,.yp-contact__note svg{flex-shrink:0;color:var(--c-primary)} .yp-form{display:flex;flex-direction:column;gap:1.25rem;padding:1.75rem;border-radius:24px;border:1px solid color-mix(in srgb,var(--c-text-light) 10%,transparent);background:var(--c-bg-light);box-shadow:var(--shadow)} .dark .yp-form{border-color:rgba(255,255,255,.1);background:color-mix(in srgb,var(--c-surface-dark) 60%,transparent)} .yp-form__title{font-size:1.25rem} .yp-field{position:relative} .yp-field input,.yp-field textarea{width:100%;padding:1.4rem 1rem .6rem;border-radius:12px;border:1px solid color-mix(in srgb,var(--c-text-light) 15%,transparent);background:transparent;color:inherit;font-size:.95rem;transition:border-color .3s} .dark .yp-field input,.dark .yp-field textarea{border-color:rgba(255,255,255,.15)} .yp-field textarea{resize:vertical} .yp-field input:focus,.yp-field textarea:focus{outline:none;border-color:var(--c-primary)} .yp-field label{position:absolute;left:1rem;top:1rem;font-size:.95rem;color:color-mix(in srgb,var(--c-text-light) 50%,transparent);pointer-events:none;transition:all .3s var(--anim-ease)} .dark .yp-field label{color:rgba(255,255,255,.5)} .yp-field input:focus+label,.yp-field input:not(:placeholder-shown)+label,.yp-field textarea:focus+label,.yp-field textarea:not(:placeholder-shown)+label{top:.45rem;font-size:.72rem;font-weight:600;color:var(--c-primary)} .yp-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0} .yp-form__status{font-size:.85rem;min-height:1.2rem} .yp-form__status.is-error{color:#ef4444} .yp-form__status.is-success{color:var(--c-whatsapp)} .yp-form.is-sending .yp-form__submit{opacity:.7;pointer-events:none} /* ---- Footer / floating WhatsApp ----------------------------------------- */ .yp-footer{border-top:1px solid color-mix(in srgb,var(--c-text-light) 10%,transparent);padding:2.5rem 0;background:var(--c-bg-light)} .dark .yp-footer{border-top-color:rgba(255,255,255,.1);background:var(--c-bg-dark)} .yp-footer__widgets{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:2rem} .yp-footer__bar{display:flex;flex-direction:column;gap:1.5rem;align-items:center;justify-content:space-between} @media(min-width:768px){.yp-footer__bar{flex-direction:row}} .yp-footer__credit{font-size:.85rem;color:color-mix(in srgb,var(--c-text-light) 60%,transparent);text-align:center} .dark .yp-footer__credit{color:rgba(255,255,255,.6)} .yp-footer__social{display:flex;gap:.75rem} .yp-whatsapp-float{position:fixed;bottom:1.5rem;right:1.5rem;z-index:40;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:9999px;background:var(--c-whatsapp);color:#fff;box-shadow:0 4px 14px 0 rgba(37,211,102,.39);transition:transform .3s,box-shadow .3s} .yp-whatsapp-float:hover{transform:scale(1.08);box-shadow:0 6px 20px 0 rgba(37,211,102,.5)} .yp-whatsapp-float__ring{position:absolute;inset:0;border-radius:9999px;background:color-mix(in srgb,var(--c-whatsapp) 40%,transparent);animation:yp-ping 1.6s cubic-bezier(0,0,.2,1) infinite} .yp-whatsapp-float i,.yp-whatsapp-float svg{position:relative;width:26px;height:26px} /* ---- Misc ---------------------------------------------------------------- */ .yp-empty{text-align:center;padding:3rem 1rem;color:color-mix(in srgb,var(--c-text-light) 55%,transparent)} .yp-404__inner{text-align:center;margin:0 auto} .yp-404__code{font-size:6rem;font-weight:900;line-height:1} .yp-pagination{margin-top:3rem;text-align:center} .yp-pagination .page-numbers{display:inline-block;padding:.5rem .9rem;margin:0 .15rem;border-radius:10px;border:1px solid color-mix(in srgb,var(--c-text-light) 12%,transparent)} .yp-pagination .current{background:var(--c-primary);color:#fff;border-color:transparent} .yp-content{font-size:1.05rem} .yp-content :is(h2,h3){margin-top:2rem;margin-bottom:.75rem} .yp-content p{margin-bottom:1.1rem} .yp-content a{color:var(--c-primary);text-decoration:underline} /* ---- Reveal initial states (JS adds .is-visible) ------------------------- */ [data-reveal]{opacity:0;will-change:transform,opacity} [data-reveal="fade-up"]{transform:translateY(40px)} [data-reveal="fade"]{transform:none} [data-reveal="scale"]{transform:scale(.92)} [data-reveal="fade-left"]{transform:translateX(40px)} [data-reveal="fade-right"]{transform:translateX(-40px)} [data-reveal].is-visible{opacity:1;transform:none;transition:opacity var(--anim-duration) var(--anim-ease),transform var(--anim-duration) var(--anim-ease)} [data-stagger-item]{opacity:0;transform:translateY(40px)} [data-stagger-item].is-visible{opacity:1;transform:none;transition:opacity var(--anim-duration) var(--anim-ease),transform var(--anim-duration) var(--anim-ease)} /* Motion off (admin toggle or OS preference) */ .yp-no-motion [data-reveal], .yp-no-motion [data-stagger-item]{opacity:1!important;transform:none!important} .yp-no-motion .yp-blob, .yp-no-motion .yp-hero__scroll span, .yp-no-motion .yp-whatsapp-float__ring, .yp-no-motion .yp-about__badge{animation:none!important} @media(prefers-reduced-motion:reduce){ [data-reveal],[data-stagger-item]{opacity:1!important;transform:none!important;transition:none!important} .yp-blob,.yp-about__badge,.yp-hero__scroll span{animation:none!important} }