/* ===================================================================== ClimbUp Career — Cinematic layer "The Ascent": upward motion, depth, restrained teal glow. Loader critical CSS lives inline in ; this file handles the rest. ===================================================================== */ :root{ --cu-ink:#061a23; --cu-teal:#0ea2bd; --cu-glow:#16cde8; --cu-ease:cubic-bezier(.22,1,.36,1); } /* Smooth, but never janky */ html{ scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } /* ---------- Scroll progress bar ---------- */ #cu-scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:1100; background:linear-gradient(90deg,var(--cu-teal),var(--cu-glow)); box-shadow:0 0 10px rgba(22,205,232,.6); transition:width .1s linear; } /* ---------- Hero: cinematic ambient + depth ---------- */ #hero{ position:relative; overflow:hidden; } #hero::before{ content:""; position:absolute; inset:-20% -10% auto -10%; height:130%; background: radial-gradient(40% 50% at 20% 25%, rgba(14,162,189,.16), transparent 70%), radial-gradient(45% 55% at 85% 70%, rgba(22,205,232,.14), transparent 70%); z-index:0; pointer-events:none; animation:cu-drift 16s ease-in-out infinite alternate; } @keyframes cu-drift{ from{ transform:translate3d(0,0,0) scale(1);} to{ transform:translate3d(0,-18px,0) scale(1.06);} } .hero-slider{ position:relative; z-index:1; } /* gentle float on the slide illustration */ .hero-slider .slide-img{ will-change:transform; animation:cu-float 6s ease-in-out infinite; filter:drop-shadow(0 24px 50px rgba(6,26,35,.18)); } @keyframes cu-float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} } /* ---------- Reveal-on-scroll (cinematic rise) ---------- */ .cu-reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--cu-ease), transform .9s var(--cu-ease); } .cu-reveal.cu-in{ opacity:1; transform:none; } .cu-reveal.d1{ transition-delay:.08s; } .cu-reveal.d2{ transition-delay:.16s; } .cu-reveal.d3{ transition-delay:.24s; } /* ---------- Refined buttons (light sweep) ---------- */ .btn-getstarted, .hero-slider .btn-1, .blog-card .read-more, .btn-acc{ position:relative; overflow:hidden; } .hero-slider .btn-1::after, .btn-getstarted::after{ content:""; position:absolute; top:0; left:-130%; width:60%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg); transition:left .6s var(--cu-ease); } .hero-slider .btn-1:hover::after, .btn-getstarted:hover::after{ left:140%; } /* ---------- Card depth & lift ---------- */ .blog-card, .portfolio-content, .custom-section .cs-img{ transition:transform .5s var(--cu-ease), box-shadow .5s var(--cu-ease); } .blog-card:hover{ box-shadow:0 22px 50px rgba(6,26,35,.16); } .service-item:hover, .feature-item:hover{ transform:translateY(-6px); } /* ---------- Section headings: subtle gradient accent ---------- */ .section-title h2{ position:relative; } .section-title h2::after{ content:""; display:block; width:54px; height:3px; margin:14px auto 0; background:linear-gradient(90deg,var(--cu-teal),var(--cu-glow)); border-radius:3px; } /* ---------- Image hover polish ---------- */ .portfolio-content img{ transition:transform .7s var(--cu-ease); } .portfolio-item:hover .portfolio-content img{ transform:scale(1.07); } /* ---------- Clients: tasteful greyscale -> colour on hover ---------- */ .clients .client-logo img{ transition:filter .4s ease, transform .4s var(--cu-ease), opacity .4s ease; } /* ---------- Respect reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ #hero::before, .hero-slider .slide-img{ animation:none; } .cu-reveal{ opacity:1; transform:none; transition:none; } #cu-scroll-progress{ display:none; } } /* ===================================================================== POPUP / ANNOUNCEMENT (achievements, awards, offers) ===================================================================== */ .cu-popup{position:fixed;inset:0;z-index:99990;display:flex;align-items:center;justify-content:center;padding:20px;} .cu-popup[hidden]{display:none;} .cu-popup__overlay{position:absolute;inset:0;background:rgba(6,26,35,.72);backdrop-filter:blur(4px); opacity:0;transition:opacity .45s ease;} .cu-popup.is-open .cu-popup__overlay{opacity:1;} .cu-popup__box{position:relative;display:flex;background:#fff;border-radius:18px;overflow:hidden; width:100%;max-width:860px;max-height:88vh;box-shadow:0 40px 90px rgba(6,26,35,.45); opacity:0;transform:translateY(26px) scale(.97); transition:opacity .55s var(--cu-ease),transform .55s var(--cu-ease);} .cu-popup.is-open .cu-popup__box{opacity:1;transform:none;} /* Close button */ .cu-popup__close{position:absolute;top:12px;right:14px;z-index:3;width:38px;height:38px;border:0; border-radius:50%;background:rgba(6,26,35,.55);color:#fff;font-size:26px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:background .25s ease,transform .25s ease;} .cu-popup__close:hover{background:var(--cu-teal);transform:rotate(90deg);} /* Media */ .cu-popup__media{flex:0 0 46%;background:#061a23;overflow:hidden;} .cu-popup__media img{width:100%;height:100%;object-fit:cover;display:block;} /* Body */ .cu-popup__body{flex:1;padding:38px 34px;overflow-y:auto;} .cu-popup__badge{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:50px; background:linear-gradient(90deg,var(--cu-teal),var(--cu-glow));color:#fff;font-size:.72rem; font-weight:700;letter-spacing:.08em;text-transform:uppercase;} .cu-popup__badge i{font-size:.85rem;} .cu-popup__title{margin:16px 0 10px;font-size:1.6rem;font-weight:700;color:#12212b;line-height:1.28;} .cu-popup__text{color:#5a6a75;font-size:1rem;line-height:1.7;} .cu-popup__text p:last-child{margin-bottom:0;} .cu-popup__btn{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:13px 30px; border-radius:50px;background:var(--cu-teal);color:#fff;font-weight:600;text-decoration:none; transition:background .3s ease,transform .3s var(--cu-ease),box-shadow .3s ease;} .cu-popup__btn:hover{background:#0b7c91;color:#fff;transform:translateY(-2px); box-shadow:0 12px 26px rgba(14,162,189,.35);} /* Layout: image on top */ .cu-popup.lay-top .cu-popup__box{flex-direction:column;max-width:560px;} .cu-popup.lay-top .cu-popup__media{flex:0 0 auto;max-height:300px;} .cu-popup.lay-top .cu-popup__media img{height:auto;max-height:300px;} /* Layout: image only (poster) */ .cu-popup.lay-image-only .cu-popup__box{max-width:600px;} .cu-popup.lay-image-only .cu-popup__media{flex:1 1 auto;background:transparent;} .cu-popup.lay-image-only .cu-popup__media img{height:auto;max-height:88vh;object-fit:contain;} .cu-popup__imglink{position:absolute;inset:0;z-index:2;} /* Mobile */ @media (max-width:767.98px){ .cu-popup{padding:14px;} .cu-popup__box{flex-direction:column;max-width:100%;max-height:90vh;} .cu-popup__media{flex:0 0 auto;max-height:210px;} .cu-popup__media img{height:auto;max-height:210px;} .cu-popup__body{padding:24px 20px;} .cu-popup__title{font-size:1.25rem;} .cu-popup__text{font-size:.95rem;} .cu-popup__btn{width:100%;justify-content:center;} } @media (prefers-reduced-motion:reduce){ .cu-popup__overlay,.cu-popup__box{transition:opacity .2s ease;transform:none;} .cu-popup__close:hover{transform:none;} }