/* ============================================= YI SHIPPING — OVERRIDE & FIX STYLESHEET Add this AFTER style.css in your ============================================= */ /* ============================================= 1. ICON RING ANIMATION (replaces box-shadow glow) Two pulsing rings around all icons ============================================= */ @keyframes ringPulse1 { 0% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.45); opacity: 0; } 100% { transform: scale(1); opacity: 0.7; } } @keyframes ringPulse2 { 0% { transform: scale(1); opacity: 0.45; } 50% { transform: scale(1.75); opacity: 0; } 100% { transform: scale(1); opacity: 0.45; } } /* Remove old glow animation from all icons */ .warehouse-icon, .why-card-icon, .feature-icon, .service-icon, .icon-box, .about-feature-icon, .tracking-info-icon, .tracking-feature-icon, .track-icon-main { animation: none !important; position: relative; } /* Apply ring via ::before and ::after */ .warehouse-icon::before, .why-card-icon::before, .about-feature-icon::before, .tracking-info-icon::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(168, 21, 31, 0.55); animation: ringPulse1 2.4s ease-in-out infinite; pointer-events: none; z-index: 0; } .warehouse-icon::after, .why-card-icon::after, .about-feature-icon::after, .tracking-info-icon::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(168, 21, 31, 0.28); animation: ringPulse2 2.4s ease-in-out infinite 0.6s; pointer-events: none; z-index: 0; } /* Make sure icon content sits above rings */ .warehouse-icon > *, .why-card-icon > *, .about-feature-icon > *, .tracking-info-icon > * { position: relative; z-index: 1; } /* why-card::after is the hover overlay — rings need own approach */ .why-card-icon { overflow: visible !important; } /* track-icon-main ring */ .track-icon-main { display: inline-block; position: relative; } .track-icon-main::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(168, 21, 31, 0.55); animation: ringPulse1 2.4s ease-in-out infinite; pointer-events: none; } .track-icon-main::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(168, 21, 31, 0.25); animation: ringPulse2 2.4s ease-in-out infinite 0.7s; pointer-events: none; } /* ============================================= 2. MIRROR-WIPE COLOR EFFECT Services, Why Choose Us, Latest News sections ============================================= */ @keyframes mirrorWipeForward { 0% { transform: translateX(-110%) skewX(-12deg); opacity: 0.9; } 100% { transform: translateX(220%) skewX(-12deg); opacity: 0; } } @keyframes mirrorWipeReverse { 0% { transform: translateX(110%) skewX(12deg); opacity: 0.9; } 100% { transform: translateX(-220%) skewX(12deg); opacity: 0; } } /* Service cards */ .service-card { overflow: hidden; position: relative; } .service-card::after { content: ''; position: absolute; top: 0; left: 0; width: 60%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%); transform: translateX(-110%) skewX(-12deg); animation: mirrorWipeForward 3.2s ease-in-out infinite; pointer-events: none; z-index: 5; } .service-card:nth-child(2)::after { animation-delay: 0.8s; } .service-card:nth-child(3)::after { animation-delay: 1.6s; } .service-card:nth-child(4)::after { animation-delay: 0.4s; } .service-card:nth-child(5)::after { animation-delay: 1.2s; } .service-card:nth-child(6)::after { animation-delay: 2.0s; } /* Why-choose cards */ .why-card { overflow: hidden; position: relative; } /* Use a sibling-safe pseudo — why-card already uses ::after for overlay */ /* We'll inject the wipe via a child element with JS, OR use outline approach */ .why-card .why-wipe { position: absolute; top: 0; left: 0; width: 60%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%); transform: translateX(-110%) skewX(-12deg); animation: mirrorWipeForward 3.6s ease-in-out infinite; pointer-events: none; z-index: 3; } .why-card:nth-child(2) .why-wipe { animation-delay: 0.9s; animation-name: mirrorWipeReverse; } .why-card:nth-child(3) .why-wipe { animation-delay: 1.8s; } .why-card:nth-child(4) .why-wipe { animation-delay: 0.5s; animation-name: mirrorWipeReverse; } .why-card:nth-child(5) .why-wipe { animation-delay: 1.4s; } .why-card:nth-child(6) .why-wipe { animation-delay: 2.2s; animation-name: mirrorWipeReverse; } /* Blog cards */ .blog-card { overflow: hidden; position: relative; } .blog-card::after { content: ''; position: absolute; top: 0; left: 0; width: 55%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%); transform: translateX(-110%) skewX(-12deg); animation: mirrorWipeForward 4s ease-in-out infinite; pointer-events: none; z-index: 5; } .blog-card:nth-child(2)::after { animation-delay: 1.0s; animation-name: mirrorWipeReverse; } .blog-card:nth-child(3)::after { animation-delay: 2.0s; } /* ============================================= 3. CTA BANNER — match tracking-info-section bg ============================================= */ .cta-banner { background: var(--off-white) !important; position: relative; overflow: hidden; } .cta-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(7, 31, 56, 0.04) 0%, rgba(168, 21, 31, 0.03) 100% ); pointer-events: none; } .cta-banner .container { position: relative; z-index: 2; } .cta-banner .cta-text h2 { color: var(--primary) !important; } .cta-banner .cta-text p { color: var(--gray) !important; } /* Request Quote button — prominent shadow */ .btn-cta-primary { box-shadow: 0 8px 28px rgba(168, 21, 31, 0.38), 0 0 0 3px rgba(168, 21, 31, 0.12) !important; background: var(--red) !important; color: white !important; } .btn-cta-primary:hover { box-shadow: 0 12px 36px rgba(168, 21, 31, 0.5), 0 0 0 4px rgba(168, 21, 31, 0.18) !important; transform: translateY(-3px) !important; } /* Nav "Get a Quote" button — shadow to stand out */ .nav-cta { box-shadow: 0 4px 16px rgba(168, 21, 31, 0.35) !important; } .nav-cta:hover { box-shadow: 0 6px 22px rgba(168, 21, 31, 0.5) !important; } /* ============================================= 4. HERO SECTION — smaller on all screens Title: sentence case, not ALL CAPS ============================================= */ .hero { height: 80vh !important; min-height: 480px !important; } .hero-title { font-size: clamp(1.5rem, 4.5vw, 3rem) !important; font-weight: 400 !important; /* Bebas Neue looks bold at 400 */ text-transform: none !important; /* No ALL CAPS */ letter-spacing: 1px !important; } @media (max-width: 768px) { .hero { height: 65vh !important; min-height: 420px !important; } .hero-content { padding: 30px 18px !important; } .hero-title { font-size: clamp(1.35rem, 7vw, 2.1rem) !important; } .hero-subtitle { font-size: 0.84rem !important; margin-bottom: 24px !important; } } @media (max-width: 480px) { .hero { height: 60vh !important; min-height: 380px !important; } .hero-title { font-size: clamp(1.2rem, 8vw, 1.7rem) !important; } } /* ============================================= 5. FEATURES ROW — 2 columns on mobile ============================================= */ @media (max-width: 768px) { .features-row { grid-template-columns: repeat(2, 1fr) !important; padding: 0 12px !important; } .feature-item { border-right: 1px solid var(--border) !important; border-bottom: 1px solid var(--border) !important; } .feature-item:nth-child(2), .feature-item:nth-child(4) { border-right: none !important; } .feature-item:nth-child(3), .feature-item:nth-child(4) { border-bottom: none !important; } } /* ============================================= 6. WAREHOUSE GRID — 2 columns on mobile ============================================= */ @media (max-width: 600px) { .warehouse-grid { grid-template-columns: repeat(2, 1fr) !important; } .warehouse-stats { grid-template-columns: repeat(2, 1fr) !important; } } /* ============================================= 7. PROCESS — vertical timeline on mobile ============================================= */ @media (max-width: 768px) { .process-steps { display: flex !important; flex-direction: column !important; gap: 0 !important; position: relative !important; padding-left: 48px !important; } /* Remove horizontal line */ .process-steps::before { display: none !important; } /* Vertical growing line */ .process-steps::after { content: ''; position: absolute; left: 20px; top: 40px; width: 2px; bottom: 40px; background: linear-gradient(180deg, var(--red), rgba(7,31,56,0.25)); z-index: 0; animation: lineGrow 1.4s ease forwards; transform-origin: top; } @keyframes lineGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } } .process-step { display: flex !important; align-items: flex-start !important; gap: 18px !important; text-align: left !important; position: relative !important; padding-bottom: 32px !important; padding-left: 0 !important; } .process-step:last-child { padding-bottom: 0 !important; } /* Step number sits on the vertical line */ .step-number { width: 44px !important; height: 44px !important; min-width: 44px !important; font-size: 1.1rem !important; margin: 0 !important; box-shadow: 0 0 0 6px var(--white) !important; position: relative !important; z-index: 1 !important; flex-shrink: 0 !important; margin-left: -52px !important; } .process-step-content { flex: 1; } .process-step h3 { margin-bottom: 4px !important; font-size: 0.96rem !important; } .process-step p { text-align: left !important; max-width: 100% !important; font-size: 0.82rem !important; } } /* ============================================= 8. REVIEWS — stat numbers WHITE not red ============================================= */ .stat-num { color: #ffffff !important; } /* ============================================= 9. BLOG MODAL — single button only ============================================= */ .modal-cta-btn-wa { display: none !important; } .modal-cta-area .btn-primary-main { /* keep this one visible */ display: inline-flex !important; } /* ============================================= 10. MOBILE MENU CLOSE BUTTON FIX ============================================= */ .mobile-menu-close { /* ensure it's always clickable and styled */ display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; background: rgba(255,255,255,0.12) !important; border-radius: 50% !important; color: white !important; font-size: 1.2rem !important; cursor: pointer !important; z-index: 1000 !important; border: none !important; transition: background 0.2s ease !important; } .mobile-menu-close:hover { background: var(--red) !important; } /* ============================================= 11. ENHANCED SCROLL REVEAL ANIMATIONS More dramatic entrance effects ============================================= */ .reveal { opacity: 0; transform: translateY(60px) !important; transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1) !important; } .reveal.in-view { opacity: 1 !important; transform: translateY(0) !important; } .reveal-left { opacity: 0; transform: translateX(-70px) !important; transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1) !important; } .reveal-left.in-view { opacity: 1 !important; transform: translateX(0) !important; } .reveal-right { opacity: 0; transform: translateX(70px) !important; transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1) !important; } .reveal-right.in-view { opacity: 1 !important; transform: translateX(0) !important; } .stagger-item { opacity: 0; transform: translateY(50px) scale(0.95) !important; transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1) !important; } .stagger-item.in-view { opacity: 1 !important; transform: translateY(0) scale(1) !important; } /* Card hover — more pronounced lift + glow */ .service-card:hover, .blog-card:hover { transform: translateY(-10px) scale(1.02) !important; box-shadow: 0 24px 64px rgba(7,31,56,0.18) !important; } .why-card:hover, .warehouse-card:hover, .counter-card:hover { transform: translateY(-9px) !important; box-shadow: 0 20px 52px rgba(7,31,56,0.16) !important; } /* Counter cards — number pop on enter */ .counter-card.in-view .counter-number { animation: numPop 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; } @keyframes numPop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } /* Step number spin on hover */ .process-step:hover .step-number { animation: stepSpin 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards; } @keyframes stepSpin { 0% { transform: scale(1) rotate(0deg); background: var(--off-white); color: var(--primary); border-color: var(--gray-light); } 60% { transform: scale(1.2) rotate(-8deg); } 100% { transform: scale(1.12) rotate(-5deg); background: var(--red); color: white; border-color: var(--red); } } /* ============================================= 12. BLOG MODAL — center the single CTA button ============================================= */ .modal-cta-area { justify-content: center !important; text-align: center !important; } .modal-cta-btn-wa { display: none !important; } /* ============================================= 13. TRACKING VISUAL — square rounded icon box ============================================= */ .tracking-info-visual .track-icon-main { display: flex !important; align-items: center !important; justify-content: center !important; width: 80px !important; height: 80px !important; border-radius: 20px !important; background: var(--red-muted) !important; border: 2px solid rgba(168,21,31,0.18) !important; font-size: 2rem !important; margin: 0 auto 20px !important; color: var(--red) !important; position: relative !important; } /* rings still work on this square shape */ .tracking-info-visual .track-icon-main::before, .tracking-info-visual .track-icon-main::after { border-radius: 24px !important; } /* ============================================= 14. TICKER / MARQUEE — remove blue background Use off-white bg with deep-blue text ============================================= */ .ticker-section { background: var(--off-white) !important; border-top: 1px solid var(--border) !important; border-bottom: 1px solid var(--border) !important; } .ticker-item { color: var(--primary) !important; } .ticker-item span { color: var(--red) !important; } .ticker-dot { background: rgba(7,31,56,0.25) !important; } /* ============================================= 15. ANIMATIONS — slower, smoother transitions ============================================= */ /* Reveal animations — slower duration */ .reveal { transition: opacity 1.1s cubic-bezier(0.16,1,0.3,1), transform 1.1s cubic-bezier(0.16,1,0.3,1) !important; } .reveal-left, .reveal-right { transition: opacity 1.1s cubic-bezier(0.16,1,0.3,1), transform 1.1s cubic-bezier(0.16,1,0.3,1) !important; } .stagger-item { transition: opacity 0.95s cubic-bezier(0.16,1,0.3,1), transform 0.95s cubic-bezier(0.16,1,0.3,1) !important; } /* Wipe effects — slower loop */ .service-card::after { animation-duration: 5s !important; } .blog-card::after { animation-duration: 6s !important; } .why-card .why-wipe { animation-duration: 5.5s !important; } /* Ring pulses — slower */ .warehouse-icon::before, .why-card-icon::before, .about-feature-icon::before, .tracking-info-icon::before { animation-duration: 3.2s !important; } .warehouse-icon::after, .why-card-icon::after, .about-feature-icon::after, .tracking-info-icon::after { animation-duration: 3.2s !important; } .track-icon-main::before { animation-duration: 3.2s !important; } .track-icon-main::after { animation-duration: 3.2s !important; } /* Card hover transitions — smooth */ .service-card, .blog-card, .why-card, .warehouse-card, .counter-card { transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.45s ease !important; } /* ============================================= 16. COUNTER NUMBERS — all count-up targets ensure visibility before counting ============================================= */ .counter-num, .warehouse-stat .number, .stat-num { display: block; min-width: 1ch; } /* ============================================= 17. GENERAL POLISH ============================================= */ /* Ticker smooth loop */ .ticker-section { border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); } /* Section tags pop */ .section-tag { transition: transform 0.3s ease, box-shadow 0.3s ease; } .section-tag:hover { transform: scale(1.04); box-shadow: 0 4px 14px rgba(168,21,31,0.2); } /* Separator line grow animation */ .separator { width: 0; transition: width 1s cubic-bezier(0.16,1,0.3,1) !important; } .in-view .separator, .section-header.in-view .separator { width: 60px; } /* Footer social hover — ring effect */ .social-btn { position: relative; overflow: visible; } .social-btn::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.3); opacity: 0; transform: scale(1.1); transition: all 0.3s ease; } .social-btn:hover::after { opacity: 1; transform: scale(1.3); } /* ============================================= YI SHIPPING — SCROLL & RESPONSIVE PATCH Add this as: css/yi-scroll-fix.css Place AFTER yi-fix.css in ============================================= */ /* ── 1. KILL ALL HORIZONTAL OVERFLOW ── */ *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: hidden !important; max-width: 100vw !important; } /* Catch any element wider than viewport */ img, video, iframe, table { max-width: 100%; } .ticker-inner { /* Prevent ticker from causing overflow */ will-change: transform; } /* ── 2. MOBILE MENU — hamburger stays 3-bar ── */ /* Never transform hamburger into X via CSS */ .hamburger.open span:nth-child(1), .hamburger.open span:nth-child(2), .hamburger.open span:nth-child(3) { transform: none !important; opacity: 1 !important; } /* ── 3. MOBILE MENU CLOSE BUTTON — always visible & clickable ── */ .mobile-menu-close { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; background: rgba(255,255,255,0.15) !important; border-radius: 50% !important; color: white !important; font-size: 1.3rem !important; cursor: pointer !important; border: none !important; position: absolute !important; top: 18px !important; right: 18px !important; z-index: 10 !important; transition: background 0.25s ease !important; line-height: 1 !important; } .mobile-menu-close:hover { background: #A8151F !important; } /* ── 4. COUNTER NUMBERS — warehouse stats & step numbers ── */ /* These elements get counted by yi-fixes.js v4 */ .warehouse-stat .number { display: block; font-family: 'Bebas Neue', cursive; font-size: 2.2rem; color: var(--red); line-height: 1; min-width: 1ch; } .step-number { font-family: 'Bebas Neue', cursive; display: flex; align-items: center; justify-content: center; min-width: 1ch; } /* ── 5. GENERAL RESPONSIVE SAFETY ── */ .container { max-width: 1280px; width: 100%; padding-left: clamp(14px, 4vw, 30px); padding-right: clamp(14px, 4vw, 30px); } /* Feature row: prevent overflow on very narrow screens */ .features-row { overflow: hidden; } /* Ticker: clip to prevent overflow */ .ticker-section { overflow: hidden; } /* Shop carousel: no overflow */ .shop-carousel { overflow: hidden; } /* About grid image: never wider than container */ .about-image-wrap { overflow: hidden; max-width: 100%; } /* ── 6. SMALL SCREEN BREAKPOINT FIXES ── */ @media (max-width: 480px) { /* nav logo smaller */ .nav-logo-img { height: 32px !important; } /* hero buttons stack */ .hero-buttons { display: flex; flex-direction: column; align-items: center; gap: 10px; } /* process steps: single column */ .process-steps { grid-template-columns: 1fr !important; gap: 24px !important; } .process-steps::before { display: none !important; } /* counters 2-col */ .counters-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } /* warehouse 2-col */ .warehouse-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .warehouse-stats { grid-template-columns: repeat(2, 1fr) !important; } /* blog single col */ .blog-grid { grid-template-columns: 1fr !important; } /* why 1-col */ .why-grid { grid-template-columns: 1fr !important; } /* reviews stack */ .reviews-grid { grid-template-columns: 1fr !important; } /* quote modal padding */ .quote-modal { padding: 24px 16px 28px !important; } /* cta stack */ .cta-inner { flex-direction: column !important; text-align: center !important; } }