/* ========================================================================== Global Easyway Shipping Company — shared UI polish & animation layer Loaded on every page. Progressive enhancement: nothing is hidden unless has the .fce-anim class (added by fce-ui.js only when motion is OK), so the site degrades gracefully without JS or with reduced-motion. ========================================================================== */ :root{ --fce-navy-900:#091831; --fce-navy-800:#0d2143; --fce-navy-700:#132d54; --fce-navy-600:#1b3c6e; --fce-navy-500:#2f568f; --fce-red-600:#bb1722; --fce-red-500:#d81f2a; --fce-red-400:#e63a44; --fce-ease:cubic-bezier(.16,.84,.44,1); } /* Nicer base type rendering */ body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* -------------------------------------------------------------------------- Scroll-reveal -------------------------------------------------------------------------- */ html.fce-anim .fce-reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--fce-ease), transform .7s var(--fce-ease); transition-delay:var(--fce-delay,0ms); will-change:opacity, transform; } html.fce-anim .fce-reveal[data-anim="left"]{ transform:translateX(-40px); } html.fce-anim .fce-reveal[data-anim="right"]{ transform:translateX(40px); } html.fce-anim .fce-reveal[data-anim="scale"]{ transform:scale(.94); } html.fce-anim .fce-reveal[data-anim="fade"]{ transform:none; } html.fce-anim .fce-reveal.is-visible{ opacity:1; transform:none; } /* -------------------------------------------------------------------------- Hover / interaction polish (applies to existing Tailwind markup) -------------------------------------------------------------------------- */ a, button{ transition:color .2s var(--fce-ease), background-color .25s var(--fce-ease), box-shadow .25s var(--fce-ease), transform .2s var(--fce-ease); } /* Lift + deepen shadow on cards (rounded + shadow combos used across the site) */ .fce-lift{ transition:transform .35s var(--fce-ease), box-shadow .35s var(--fce-ease); } .fce-lift:hover{ transform:translateY(-6px); box-shadow:0 24px 40px -18px rgba(9,24,49,.45); } /* Primary buttons: subtle sheen sweep on hover */ .fce-btn{ position:relative; overflow:hidden; } .fce-btn::after{ content:""; position:absolute; inset:0; left:-120%; background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.35) 50%,transparent 80%); transition:left .6s var(--fce-ease); } .fce-btn:hover::after{ left:120%; } .fce-btn:hover{ transform:translateY(-2px); } .fce-btn:active{ transform:translateY(0); } /* Animated underline for top-nav links */ header nav a{ position:relative; } header nav a::after{ content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:var(--fce-red-500); transition:width .3s var(--fce-ease); } header nav a:hover::after{ width:100%; } /* Image zoom-on-hover helper */ .fce-zoom{ overflow:hidden; } .fce-zoom img{ transition:transform .6s var(--fce-ease); } .fce-zoom:hover img{ transform:scale(1.06); } /* -------------------------------------------------------------------------- Sticky header: shadow + slight compaction once scrolled -------------------------------------------------------------------------- */ header.fce-scrolled{ box-shadow:0 10px 30px -12px rgba(9,24,49,.55) !important; backdrop-filter:saturate(1.2); } header{ transition:box-shadow .3s var(--fce-ease); } /* -------------------------------------------------------------------------- Scroll progress bar (top of viewport) -------------------------------------------------------------------------- */ #fce-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--fce-red-500),var(--fce-red-400)); z-index:9999; transition:width .1s linear; pointer-events:none; } /* -------------------------------------------------------------------------- Back-to-top button -------------------------------------------------------------------------- */ #fce-top{ position:fixed; right:20px; bottom:20px; width:46px; height:46px; z-index:9998; display:flex; align-items:center; justify-content:center; background:var(--fce-navy-700); color:#fff; border-radius:9999px; cursor:pointer; box-shadow:0 10px 25px -8px rgba(9,24,49,.6); opacity:0; transform:translateY(16px) scale(.9); pointer-events:none; transition:opacity .3s var(--fce-ease), transform .3s var(--fce-ease), background-color .2s; } #fce-top.show{ opacity:1; transform:none; pointer-events:auto; } #fce-top:hover{ background:var(--fce-red-500); transform:translateY(-3px); } /* Floating idle motion used on hero badges / icons (opt-in) */ .fce-float{ animation:fceFloat 6s ease-in-out infinite; } @keyframes fceFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } } /* Soft pulsing ring (opt-in) */ .fce-pulse{ animation:fcePulse 2.4s var(--fce-ease) infinite; } @keyframes fcePulse{ 0%{ box-shadow:0 0 0 0 rgba(216,31,42,.5);} 70%{ box-shadow:0 0 0 16px rgba(216,31,42,0);} 100%{ box-shadow:0 0 0 0 rgba(216,31,42,0);} } /* -------------------------------------------------------------------------- Respect reduced-motion: drop all entrance/idle animation -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ html.fce-anim .fce-reveal{ opacity:1 !important; transform:none !important; transition:none !important; } .fce-float, .fce-pulse, .fce-btn::after, .progress-bar::after{ animation:none !important; } } /* -------------------------------------------------------------------------- Google Translate — hide Google's top banner & artifacts, keep our own styled language dropdown. (Do NOT hide generic .skiptranslate elements.) -------------------------------------------------------------------------- */ .goog-te-banner-frame, .goog-te-banner-frame.skiptranslate, iframe.goog-te-banner-frame, .VIpgJd-ZVi9od-ORHb-OEVmcd, /* newer top banner */ .VIpgJd-ZVi9od-l4eHX-hSRGPd { display:none !important; visibility:hidden !important; height:0 !important; } body { top:0 !important; } /* undo the offset Google adds */ #google_translate_element { position:absolute !important; left:-9999px !important; top:-9999px !important; height:0; overflow:hidden; } .goog-te-gadget-icon { display:none !important; } #goog-gt-tt, .goog-te-balloon-frame { display:none !important; } .goog-text-highlight { background:none !important; box-shadow:none !important; } .goog-tooltip { display:none !important; }