/* ═══════════════════════════════════════════════════════════════ yutie-shared.css — Add to every page (place after your main styles so these layer on top) ═══════════════════════════════════════════════════════════════ */ /* ── SKIP TO CONTENT ────────────────────────────────────────── */ .yc-skip{position:fixed;top:-100%;left:24px;z-index:99999;background:#C9A84C;color:#0a0a0b;padding:10px 22px;border-radius:0 0 8px 8px;font-family:'League Spartan',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:top .2s;box-shadow:0 4px 20px rgba(201,168,76,.4);} .yc-skip:focus{top:0;} /* ── SCROLL PROGRESS BAR ────────────────────────────────────── */ #yc-progress{position:fixed;top:0;left:0;width:0%;height:2px;background:linear-gradient(90deg,#C9A84C,#E2C47A,#C9A84C);z-index:9997;pointer-events:none;transition:width .08s linear;} /* ── BACK TO TOP ────────────────────────────────────────────── */ #yc-top{position:fixed;bottom:32px;right:32px;width:44px;height:44px;border-radius:50%;background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.3);display:flex;align-items:center;justify-content:center;cursor:none;z-index:900;opacity:0;transform:translateY(16px);transition:opacity .35s,transform .4s cubic-bezier(0.34,1.56,0.64,1),background .2s,border-color .2s;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);} #yc-top.show{opacity:1;transform:translateY(0);} #yc-top:hover{background:rgba(201,168,76,.2);border-color:rgba(201,168,76,.65);} #yc-top svg{width:15px;height:15px;stroke:#C9A84C;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;} #yc-top:hover svg{transform:translateY(-2px);} /* ── WHATSAPP FLOAT ─────────────────────────────────────────── */ #yc-wa{position:fixed;bottom:88px;right:32px;width:44px;height:44px;border-radius:50%;background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.25);display:flex;align-items:center;justify-content:center;cursor:none;z-index:900;text-decoration:none;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .2s,border-color .2s,transform .35s cubic-bezier(0.34,1.56,0.64,1);} #yc-wa:hover{background:rgba(37,211,102,.2);border-color:rgba(37,211,102,.55);transform:scale(1.1);} #yc-wa svg{width:20px;height:20px;fill:rgba(37,211,102,.82);} .yc-wa-tip{position:absolute;right:52px;background:rgba(6,6,8,.96);border:1px solid rgba(37,211,102,.2);border-radius:6px;padding:6px 12px;font-family:'League Spartan',sans-serif;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(37,211,102,.8);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;} #yc-wa:hover .yc-wa-tip{opacity:1;} /* ── STICKY MOBILE CTA ──────────────────────────────────────── */ #yc-mcta{position:fixed;bottom:0;left:0;right:0;z-index:890;padding:10px 16px;background:rgba(6,6,8,.97);border-top:1px solid rgba(201,168,76,.2);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);display:none;gap:8px;transform:translateY(100%);transition:transform .45s cubic-bezier(0.4,0,0.2,1);} #yc-mcta.show{transform:translateY(0);} #yc-mcta a{flex:1;display:block;text-align:center;font-family:'League Spartan',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:13px 10px;border-radius:8px;} .ymc-primary{background:linear-gradient(135deg,#E2C47A,#C9A84C);color:#0a0a0b !important;} .ymc-secondary{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:rgba(237,234,228,.7) !important;} @media(max-width:768px){ #yc-mcta{display:flex;} #yc-top{display:none;} #yc-wa{bottom:94px;right:16px;} body{padding-bottom:0;} footer{padding-bottom:76px !important;} } /* ── COOKIE CONSENT BANNER ──────────────────────────────────── */ #yc-cookie{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(240%);width:min(560px,calc(100vw - 32px));z-index:9998;padding:22px 24px;background:rgba(6,6,8,.97);border:1px solid rgba(201,168,76,.22);border-radius:14px;backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);box-shadow:0 24px 64px rgba(0,0,0,.55),0 0 0 1px rgba(201,168,76,.06);transition:transform .55s cubic-bezier(0.34,1.56,0.64,1);} #yc-cookie.show{transform:translateX(-50%) translateY(0);} .yck-top{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;} .yck-icon{width:36px;height:36px;flex-shrink:0;background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.22);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:17px;} .yck-title{font-family:'League Spartan',sans-serif;font-size:14px;font-weight:700;color:#edeae4;letter-spacing:-.01em;margin-bottom:5px;} .yck-text{font-family:'Outfit',sans-serif;font-size:13px;font-weight:300;color:rgba(237,234,228,.48);line-height:1.65;} .yck-text a{color:rgba(201,168,76,.75);text-decoration:none;border-bottom:1px solid rgba(201,168,76,.2);} .yck-acts{display:flex;gap:9px;} .yck-btn{font-family:'League Spartan',sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:11px 18px;border-radius:7px;border:none;cursor:pointer;transition:all .2s;flex:1;font-size:10px;} .yck-accept{background:linear-gradient(135deg,#E2C47A,#C9A84C);color:#0a0a0b;} .yck-accept:hover{filter:brightness(1.09);} .yck-essential{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1) !important;color:rgba(237,234,228,.55);} .yck-essential:hover{border-color:rgba(201,168,76,.3) !important;color:rgba(201,168,76,.8);} /* ── PRELOADER ──────────────────────────────────────────────── */ #yc-pre{position:fixed;inset:0;z-index:99999;background:#080809;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .5s ease;} #yc-pre.out{opacity:0;pointer-events:none;} .yc-pre-ring{width:44px;height:44px;border-radius:50%;border:2px solid rgba(201,168,76,.12);border-top-color:#C9A84C;animation:ycSpin .85s linear infinite;} .yc-pre-word{font-family:'League Spartan',sans-serif;font-size:10px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:rgba(201,168,76,.4);} @keyframes ycSpin{to{transform:rotate(360deg);}} /* ── VIEW TRANSITIONS ───────────────────────────────────────── */ @view-transition{navigation:auto;} ::view-transition-old(root){animation:240ms ease both yc-vt-out;} ::view-transition-new(root){animation:300ms ease both yc-vt-in;} @keyframes yc-vt-out{to{opacity:0;transform:translateY(-5px);}} @keyframes yc-vt-in{from{opacity:0;transform:translateY(5px);}} /* ── PREFERS REDUCED MOTION ─────────────────────────────────── */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } ::view-transition-old(root),::view-transition-new(root){animation:none !important;} .yc-pre-ring{animation:none !important;border-top-color:#C9A84C;} } /* ── LINKEDIN + SOCIAL IN FOOTER ────────────────────────────── */ .yc-social{display:flex;gap:10px;margin-top:16px;} .yc-social a{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:background .2s,border-color .2s;} .yc-social a:hover{background:rgba(201,168,76,.1);border-color:rgba(201,168,76,.3);} .yc-social svg{width:15px;height:15px;fill:rgba(237,234,228,.4);transition:fill .2s;} .yc-social a:hover svg{fill:#C9A84C;}