/* No-JS fallback: if effects.js fails or is delayed, reveal classes stay visible. Inline script in swaps html.no-js → html.js immediately when JS runs. */ html.no-js .fade-up, html.no-js .word-reveal, html.no-js .middle-out > *, html.no-js .tilt-in > *, html.no-js .x-slide > *, html.no-js .stack-fan > *, html.no-js .elastic-pop, html.no-js .timeline-dot { opacity: 1 !important; transform: none !important; } /* ========================================================================== Rhyme Export — Master Effects & Design System ========================================================================== Bu dosya hem WordPress temasında hem de Claude Design prototiplerinde kullanılır. Yeni tasarım yaparken bu CSS class'larını aynen kullanın, yenilerini icat etmeyin. Yol: assets/css/effects.css ========================================================================== */ /* ────── 1. DESIGN TOKENS ────── */ :root { --cream: #F5F1EA; --cream-deep: #EFE8DB; --ink: #1A1A1A; --mute: #6B6B6B; --brand: #FF5F00; --brand-light: #FFB37C; --brand-soft: rgba(255, 95, 0, 0.10); --brand-border: rgba(255, 95, 0, 0.25); --whatsapp: #25D366; } /* ────── 2. BASE & TYPOGRAPHY ────── */ html, body { background: var(--cream); color: var(--ink); } body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; cursor: none; font-weight: 400; } @media (pointer: coarse) { body { cursor: auto; } .custom-cursor { display: none !important; } } h1, h2, h3 { letter-spacing: -0.02em; text-wrap: balance; color: var(--ink); } ::selection { background: rgba(255, 95, 0, 0.25); color: var(--ink); } .brand-text { color: var(--brand); } .italic-serif { font-family: 'EB Garamond', serif; font-style: italic; font-weight: 500; } /* ────── 3. GLASS / CARD / PILL / CTA ────── */ .gradient-pill { background: var(--brand-soft); border: 1px solid var(--brand-border); color: var(--brand); border-radius: 999px; padding: 0.05em 0.5em; font-style: italic; font-family: 'EB Garamond', serif; font-weight: 500; } .glass { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(0, 0, 0, 0.06); } .glass-strong { background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); } .card-hover { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.6s ease, box-shadow 0.6s ease, background 0.6s ease; will-change: transform; } .card-hover:hover { transform: translateY(-6px); border-color: rgba(255, 95, 0, 0.35); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 95, 0, 0.12) inset; } .arrow-cta { display: inline-flex; align-items: center; gap: 0.6rem; transition: gap 0.4s ease, color 0.4s ease; } .arrow-cta:hover { gap: 1rem; color: var(--brand); } /* ────── 4. REVEAL ANIMATIONS ────── */ .fade-up { opacity: 0; transform: translateY(40px); transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .fade-up.in { opacity: 1; transform: translateY(0); } .stagger > * { transition-delay: 0ms; } .stagger.in > *:nth-child(1) { transition-delay: 0ms; } .stagger.in > *:nth-child(2) { transition-delay: 120ms; } .stagger.in > *:nth-child(3) { transition-delay: 240ms; } .stagger.in > *:nth-child(4) { transition-delay: 360ms; } .stagger.in > *:nth-child(5) { transition-delay: 480ms; } .stagger.in > *:nth-child(6) { transition-delay: 600ms; } .stagger.in > *:nth-child(7) { transition-delay: 720ms; } .stagger.in > *:nth-child(8) { transition-delay: 840ms; } .word-reveal { display: inline-block; overflow: hidden; padding-bottom: 0.12em; vertical-align: baseline; } .word-reveal > span { display: inline-block; transform: translateY(110%); opacity: 0; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; } .word-reveal.in > span { transform: translateY(0); opacity: 1; } .word-reveal.accent > span { transform: translateY(110%) scale(0.94); transition-delay: 0.18s; } .word-reveal.accent.in > span { transform: translateY(0) scale(1); } .letter-reveal { display: inline-block; } .letter-reveal span { display: inline-block; opacity: 0; transform: translateY(0.5em); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .letter-reveal.in span { opacity: 1; transform: translateY(0); } /* ────── 5. CINEMATIC ANIMATIONS ────── */ .middle-out > * { opacity: 0; transform: translateY(60px) scale(0.96); transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .middle-out.in > *:nth-child(2) { transition-delay: 0ms; } .middle-out.in > *:nth-child(1) { transition-delay: 180ms; } .middle-out.in > *:nth-child(3) { transition-delay: 180ms; } .middle-out.in > * { opacity: 1; transform: translateY(0) scale(1); } .tilt-in > * { opacity: 0; transform: perspective(1200px) rotateX(18deg) translateY(50px); transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: 50% 100%; will-change: opacity, transform; } .tilt-in.in > *:nth-child(1) { transition-delay: 0ms; } .tilt-in.in > *:nth-child(2) { transition-delay: 150ms; } .tilt-in.in > *:nth-child(3) { transition-delay: 300ms; } .tilt-in.in > * { opacity: 1; transform: perspective(1200px) rotateX(0) translateY(0); } .x-slide > *:nth-child(1) { transform: translateX(-60px); } .x-slide > *:nth-child(2) { transform: translateX(60px); } .x-slide > *:nth-child(3) { transform: translateX(-60px); } .x-slide > *:nth-child(4) { transform: translateX(60px); } .x-slide > * { opacity: 0; transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .x-slide.in > *:nth-child(1), .x-slide.in > *:nth-child(2) { transition-delay: 0ms; } .x-slide.in > *:nth-child(3), .x-slide.in > *:nth-child(4) { transition-delay: 280ms; } .x-slide.in > * { opacity: 1; transform: translateX(0); } .stack-fan > *:nth-child(1) { transform: translate(30px, 20px) rotate(4deg) scale(0.94); } .stack-fan > *:nth-child(2) { transform: translate(0, 30px) scale(0.9); z-index: 2; } .stack-fan > *:nth-child(3) { transform: translate(-30px, 20px) rotate(-4deg) scale(0.94); } .stack-fan > * { opacity: 0; transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.34, 1.2, 0.64, 1); will-change: opacity, transform; } .stack-fan.in > * { opacity: 1; } .stack-fan.in > *:nth-child(1) { transform: rotate(-2deg) scale(1); transition-delay: 200ms; } .stack-fan.in > *:nth-child(2) { transform: translateY(-8px) scale(1.03); transition-delay: 350ms; } .stack-fan.in > *:nth-child(3) { transform: rotate(2deg) scale(1); transition-delay: 200ms; } .elastic-pop { opacity: 0; transform: translateY(24px) scale(0.96); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); will-change: opacity, transform; } .elastic-pop.in { opacity: 1; transform: translateY(0) scale(1); } .fade-up.middle-out, .fade-up.tilt-in, .fade-up.x-slide, .fade-up.stack-fan { transform: none; opacity: 1; } .fade-up.elastic-pop { transform: translateY(24px) scale(0.96); opacity: 0; } .fade-up.elastic-pop.in { transform: translateY(0) scale(1); opacity: 1; } /* ────── 6. BACKGROUND EFFECTS ────── */ @keyframes drift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, -40px) scale(1.08); } } @keyframes drift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-50px, 50px) scale(1.12); } } @keyframes drift3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 30px) scale(0.95); } } .blob { position: fixed; border-radius: 9999px; filter: blur(120px); pointer-events: none; z-index: 0; } #starfield { position: fixed; inset: 0; z-index: -1; opacity: 0.6; } .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; z-index: 100; background: linear-gradient(90deg, var(--brand) 0%, var(--brand-light) 100%); transform-origin: left; transform: scaleX(0); width: 100%; transition: transform 0.1s linear; will-change: transform; box-shadow: 0 0 12px rgba(255, 95, 0, 0.4); } .parallax-slow, .parallax-mid, .parallax-deco { will-change: transform; } .hero-title { transition: transform 0.1s linear, filter 0.1s linear; will-change: transform, filter; } /* ────── 7. INTERACTIVE ────── */ .custom-cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; mix-blend-mode: multiply; } .cc-ring { width: 36px; height: 36px; border: 1.5px solid var(--ink); border-radius: 999px; transform: translate(-50%, -50%); transition: width 0.25s ease, height 0.25s ease, background 0.25s ease; } .cc-dot { width: 6px; height: 6px; background: var(--ink); border-radius: 999px; transform: translate(-50%, -50%); } .custom-cursor.hover .cc-ring { width: 64px; height: 64px; background: rgba(26, 26, 26, 0.06); border-color: var(--brand); } .tilt-card { transform-style: preserve-3d; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } @media (pointer: coarse) { .tilt-card { transform: none !important; } } .magnetic { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } @media (pointer: coarse) { .magnetic { transform: none !important; } } .ripple-host { position: relative; overflow: hidden; } .ripple-dot { position: absolute; border-radius: 999px; pointer-events: none; background: rgba(255, 255, 255, 0.45); transform: translate(-50%, -50%) scale(0); animation: ripple 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes ripple { from { transform: translate(-50%, -50%) scale(0); opacity: 0.6; } to { transform: translate(-50%, -50%) scale(12); opacity: 0; } } /* ────── 8. FAQ ACCORDION ────── */ .faq-item { transition: border-color 0.5s ease, background-color 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease; } .faq-item[data-open="true"] { border-color: rgba(255, 95, 0, 0.35); background: rgba(255, 95, 0, 0.02); transform: translateY(-2px); box-shadow: 0 20px 40px -25px rgba(255, 95, 0, 0.3); } .faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s cubic-bezier(0.16, 1, 0.3, 1); } .faq-panel > div { overflow: hidden; } .faq-item[data-open="true"] .faq-panel { grid-template-rows: 1fr; } .faq-plus { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), color 0.45s ease; } .faq-item[data-open="true"] .faq-plus { transform: rotate(45deg); color: var(--brand); } /* ────── 9. TIMELINE DRAW ────── */ .timeline-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 2.2s cubic-bezier(0.16, 1, 0.3, 1); } .timeline-line.in { stroke-dashoffset: 0; } .timeline-dot { opacity: 0; transform: scale(0.4); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .timeline-dot.in { opacity: 1; transform: scale(1); } /* ────── 10. MARQUEE / FLOAT ────── */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-track { animation: marquee 48s linear infinite; } .marquee-track.slow { animation-duration: 120s; } @keyframes breathe1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes breathe2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .float-a { animation: breathe1 4s ease-in-out infinite; } .float-b { animation: breathe2 4.4s ease-in-out infinite 0.3s; } /* ────── 11. IMAGE PLACEHOLDER ────── */ .img-ph { position: relative; border: 1.5px dashed rgba(255, 95, 0, 0.35); background: linear-gradient(135deg, rgba(255, 95, 0, 0.05), rgba(255, 95, 0, 0.01)); border-radius: 20px; opacity: 0.7; transition: opacity 0.5s ease, border-color 0.5s ease, background 0.5s ease, transform 0.5s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; overflow: hidden; cursor: pointer; } .img-ph:hover { opacity: 1; border-style: solid; border-color: rgba(255, 95, 0, 0.55); background: linear-gradient(135deg, rgba(255, 95, 0, 0.08), rgba(255, 95, 0, 0.02)); } .img-ph-icon { color: rgba(255, 95, 0, 0.5); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.4s ease; } .img-ph:hover .img-ph-icon { transform: scale(1.12); color: rgba(255, 95, 0, 0.8); } .img-ph-label { margin-top: 0.8rem; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); text-align: center; line-height: 1.45; max-width: 90%; } .img-ph-hint { margin-top: 0.35rem; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 95, 0, 0.55); } .img-ph-corner { position: absolute; top: 10px; right: 10px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.18em; color: rgba(255, 95, 0, 0.55); background: rgba(255, 95, 0, 0.08); padding: 0.2rem 0.45rem; border-radius: 4px; } .img-ph.tilt-l { transform: rotate(-6deg); } .img-ph.tilt-r { transform: rotate(4deg); } .img-ph.tilt-l:hover { transform: rotate(-4deg) scale(1.01); } .img-ph.tilt-r:hover { transform: rotate(2deg) scale(1.01); } .img-ph-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; } .img-ph-split > div:not(.img-ph-split-handle) { padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; } .img-ph-split > div:not(.img-ph-split-handle):first-child { border-right: 1.5px solid rgba(255, 95, 0, 0.35); background: linear-gradient(135deg, rgba(120, 120, 120, 0.05), transparent); } .img-ph-split-handle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 999px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(255, 95, 0, 0.4); font-weight: 600; } .img-ph-bg { position: absolute; inset: 0; opacity: 0.18; border-radius: 0; border-style: dashed; border-width: 2px; border-color: rgba(255, 95, 0, 0.25); background: linear-gradient(135deg, rgba(255, 95, 0, 0.08), rgba(255, 180, 120, 0.04)); } @media (max-width: 768px) { .img-ph.tilt-l, .img-ph.tilt-r { transform: none; } } /* ────── 12. MISC ────── */ @keyframes countPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } [data-count].counting { animation: countPulse 1.5s ease-out; } @keyframes glowPulse { 0%, 100% { text-shadow: 0 0 0 rgba(255, 95, 0, 0); } 50% { text-shadow: 0 0 24px rgba(255, 95, 0, 0.45); } } .glow-pulse.in { animation: glowPulse 2.4s ease-in-out 0.8s 2; } @keyframes sweepShine { 0% { transform: translateX(-120%); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(120%); opacity: 0; } } .sweep-wrap { position: relative; overflow: hidden; } .sweep-wrap.in::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 95, 0, 0.12) 50%, transparent 70%); animation: sweepShine 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.8s 1 forwards; pointer-events: none; z-index: 5; } @keyframes bonus-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .bonus-card { opacity: 0; transform: translateY(14px); animation: bonus-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; transition: transform 0.5s ease, border-color 0.5s ease, background 0.5s ease; } .bonus-card:hover { transform: translateY(-3px); border-color: rgba(255, 95, 0, 0.45); background: rgba(255, 95, 0, 0.06); } /* ────── 13. REDUCED MOTION ────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; transition-duration: 0.001s !important; transition-delay: 0s !important; } .marquee-track { animation: none !important; } .parallax-slow, .parallax-mid, .parallax-deco { transform: none !important; } .hero-title { transform: none !important; filter: none !important; } } /* ═══════════════════════════════════════════════════ FOOTER — Stage 2 (footer.site + .foot-grid + .foot-col) ═══════════════════════════════════════════════════ */ .site-footer{ margin-top:64px; padding:64px 0 36px; border-top:1px solid var(--glassBorder); background:var(--creamDeep); position:relative; z-index:1; } .site-footer .wrap{ max-width:1240px; margin:0 auto; padding:0 32px; } @media(max-width:640px){ .site-footer .wrap{padding:0 20px} } .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; } @media(max-width:880px){ .foot-grid{grid-template-columns:1fr 1fr;gap:32px} } @media(max-width:520px){ .foot-grid{grid-template-columns:1fr;gap:28px} } .foot-col h4{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em; color:var(--mute); text-transform:uppercase; margin:0 0 16px; font-weight:500; } .foot-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; } .foot-col li{ font-size:14px; } .foot-col a{ font-size:14px; color:#333; transition:color .2s; text-decoration:none; } .foot-col a:hover{ color:var(--brand); } .foot-about{ font-size:13.5px; color:var(--mute); line-height:1.6; margin:0; max-width:34ch; } .foot-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid var(--glassBorder); display:flex; justify-content:space-between; font-size:12.5px; color:var(--mute); font-family:'JetBrains Mono',monospace; flex-wrap:wrap; gap:12px; } @media(max-width:640px){ .foot-bottom{flex-direction:column;gap:6px} } /* ========================================================================== FOUC FIX — Override stratejisi (2026-04-29) ========================================================================== Tailwind CDN head'de render-blocking → first paint ~2.3sn gecikiyor. Bu süre boyunca sayfanın boş kalmaması için reveal sınıfları opacity:1 !important ile her zaman görünür tutulur. effects.js viewport-içine .in ekler (no-op, görsel değişiklik yok). Scroll-triggered fade-up animasyonu bu trade-off ile kaybedilir; ama 2.3sn boş sayfa veya .pre-reveal flash'ı olmasından çok daha iyi UX. ========================================================================== */ .fade-up, .word-reveal, .middle-out > *, .tilt-in > *, .x-slide > *, .stack-fan > *, .elastic-pop, .timeline-dot { opacity: 1 !important; transform: none !important; } .fade-up, .word-reveal, .middle-out > *, .tilt-in > *, .x-slide > *, .stack-fan > *, .elastic-pop, .timeline-dot { transition: opacity 0.8s, transform 0.8s; } /* =================================================================== PERF FIX — Hero compositing yükünü düşür (2026-04-29) Sebep: 12 yerde kalıcı will-change + .hero-title filter:blur scroll = GPU layer thrash. Mouse hover state'lerinde her frame'de layer tree re-evaluation → mouse lag. NOT: .is-animating selector'leri ileri kullanım için. JS tarafı FOUC bloğu kaldırıldıktan sonra (yarın bakım modu kaldırma adımında) eklenecek — şu an animasyonlar FOUC fix tarafından opacity:1 ile sabit tutuluyor, dolayısıyla .is-animating ekleyecek JS'e gerek yok. =================================================================== */ /* 1. Kalıcı will-change'i kaldır — sadece animasyon SIRASINDA aktif olacak */ .fade-up, .word-reveal, .middle-out, .tilt-in, .x-slide, .stack-fan, .elastic-pop, .parallax-slow, .parallax-mid, .parallax-deco, .card-hover, .magnetic { will-change: auto !important; } /* 2. .is-animating helper — JS yarın aktive edecek */ .fade-up.is-animating, .word-reveal.is-animating, .middle-out.is-animating, .tilt-in.is-animating, .x-slide.is-animating, .stack-fan.is-animating, .elastic-pop.is-animating { will-change: transform, opacity; } /* 3. .scroll-progress için will-change kalsın — sürekli animate ediliyor. */ /* 4. .hero-title — kalıcı will-change ve filter transition'ı kaldır. JS scroll handler'ı zaten her event'te direkt set ediyor; CSS transition akıcılaştırmıyor, sadece her frame'de ekstra rasterize tetikliyor. */ .hero-title { will-change: auto !important; transition: none !important; } /* === HERO BLOB PERF — AŞAMA 1 (2026-04-30) === Eski will-change:auto override yerine: blur 120px→30px (Asama 2), mobil + reduced-motion için animasyonu kapat. */ .blob { filter: blur(60px) !important; } @media (max-width: 768px) { .blob { animation: none !important; opacity: 0.25 !important; filter: blur(30px) !important; z-index: 0 !important; } } @media (prefers-reduced-motion: reduce) { .blob { animation: none !important; } } /* =================================================================== MOBILE FIX — Hero animation softening (2026-04-29) Sebep: Hero'daki dekoratif SVG (turuncu eğriler + paket kareleri) 500x1763px boyutunda, mobilde metinle çakışıyor ve okunabilirliği bozuyor. Çözüm: 768px altında opacity düşür + arkaya it. Animasyon hala görünür, sadece dekoratif yoğunluğu azaltılır. =================================================================== */ @media (max-width: 768px) { section[class*="pt-36"] > div.absolute.inset-0.overflow-hidden.pointer-events-none { opacity: 0.25 !important; z-index: 0 !important; } } /* RHX-MAGNETIC-DISABLE-GLOBAL-START */ /* Magnetic hover efekti tum sayfalarda devre disi - buton hover'da kayma sorunu */ .magnetic { transform: none !important; transition: background-color 0.15s, color 0.15s !important; } /* RHX-MAGNETIC-DISABLE-GLOBAL-END */