/* ============================================================ footer.css — KeyFlow Footer Every rule is scoped under .kf-footer or .kf-* classes. Nothing here will affect your existing style.css. Add this as a separate in your . ============================================================ */ /* ── Footer shell ────────────────────────────────────────── */ .kf-footer { width: 100%; position: relative; border-radius: 18px; overflow: hidden; background: radial-gradient(ellipse 120% 120% at 50% 50%, #1d2535 0%, #151c28 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 48px rgba(0, 0, 0, 0.5); font-family: 'Inter', system-ui, sans-serif; } /* ── Floating key layer ──────────────────────────────────── */ .kf-key-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } /* ── Keycap base ─────────────────────────────────────────── */ .kf-key { position: absolute; border-radius: 8px; pointer-events: auto; cursor: default; display: flex; align-items: center; justify-content: center; transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.3s ease; } /* Tint variants */ .kf-key.kf-cream { background: linear-gradient(145deg, #d9d0be 0%, #c8bfad 100%); box-shadow: 0 5px 0 rgba(105, 95, 82, 0.9), 0 7px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35); } .kf-key.kf-white { background: linear-gradient(145deg, #e6e3dc 0%, #d4d0c8 100%); box-shadow: 0 5px 0 rgba(118, 113, 103, 0.9), 0 7px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .kf-key.kf-sage { background: linear-gradient(145deg, #c6cbb8 0%, #b6bbaa 100%); box-shadow: 0 5px 0 rgba(82, 87, 72, 0.9), 0 7px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3); } /* Hover lift */ .kf-key:hover { transform: translateY(-3px) scale(1.07) !important; filter: blur(0px) !important; opacity: 1 !important; } /* Letter label inside key */ .kf-key-label { font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 500; color: rgba(55, 47, 36, 0.75); letter-spacing: 0.03em; user-select: none; pointer-events: none; line-height: 1; transition: opacity 0.5s ease; } /* ── Key positions, sizes, blur, opacity ─────────────────── */ /* LEFT */ .kf-k1 { left: -12px; top: 8%; width: 72px; height: 68px; opacity: 0.82; filter: blur(2px); transform: rotate(-18deg); animation: kfFloat1 20s ease-in-out infinite alternate; } .kf-k2 { left: 18px; top: 22%; width: 60px; height: 56px; opacity: 0.90; filter: blur(0px); transform: rotate(12deg); animation: kfFloat2 17s ease-in-out infinite alternate; } .kf-k3 { left: -8px; top: 42%; width: 78px; height: 74px; opacity: 0.88; filter: blur(0px); transform: rotate(-7deg); animation: kfFloat3 22s ease-in-out infinite alternate; } .kf-k4 { left: 14px; top: 62%; width: 64px; height: 60px; opacity: 0.75; filter: blur(1.5px); transform: rotate(20deg); animation: kfFloat4 19s ease-in-out infinite alternate; } .kf-k5 { left: -6px; top: 80%; width: 68px; height: 64px; opacity: 0.62; filter: blur(3px); transform: rotate(-24deg); animation: kfFloat5 16s ease-in-out infinite alternate; } /* RIGHT */ .kf-k6 { right: -10px; top: 6%; width: 70px; height: 66px; opacity: 0.80; filter: blur(2.5px); transform: rotate(22deg); animation: kfFloat1r 21s ease-in-out infinite alternate; } .kf-k7 { right: 16px; top: 20%; width: 62px; height: 58px; opacity: 0.92; filter: blur(0px); transform: rotate(-14deg); animation: kfFloat2r 18s ease-in-out infinite alternate; } .kf-k8 { right: -6px; top: 40%; width: 76px; height: 72px; opacity: 0.86; filter: blur(0px); transform: rotate(9deg); animation: kfFloat3r 23s ease-in-out infinite alternate; } .kf-k9 { right: 12px; top: 60%; width: 60px; height: 56px; opacity: 0.72; filter: blur(1.8px); transform: rotate(-20deg); animation: kfFloat4r 20s ease-in-out infinite alternate; } .kf-k10 { right: -8px; top: 78%; width: 66px; height: 62px; opacity: 0.60; filter: blur(3.2px); transform: rotate(16deg); animation: kfFloat5r 17s ease-in-out infinite alternate; } /* ── Float keyframes — all prefixed kf ──────────────────── */ @keyframes kfFloat1 { from { transform: rotate(-18deg) translate(0, 0); } to { transform: rotate(-13deg) translate(6px, -14px); } } @keyframes kfFloat2 { from { transform: rotate(12deg) translate(0, 0); } to { transform: rotate(16deg) translate(-5px, -12px); } } @keyframes kfFloat3 { from { transform: rotate(-7deg) translate(0, 0); } to { transform: rotate(-3deg) translate(7px, -10px); } } @keyframes kfFloat4 { from { transform: rotate(20deg) translate(0, 0); } to { transform: rotate(15deg) translate(-6px, -9px); } } @keyframes kfFloat5 { from { transform: rotate(-24deg) translate(0, 0); } to { transform: rotate(-19deg) translate(5px, -8px); } } @keyframes kfFloat1r { from { transform: rotate(22deg) translate(0, 0); } to { transform: rotate(17deg) translate(-6px, -14px); } } @keyframes kfFloat2r { from { transform: rotate(-14deg) translate(0, 0); } to { transform: rotate(-9deg) translate(5px, -12px); } } @keyframes kfFloat3r { from { transform: rotate(9deg) translate(0, 0); } to { transform: rotate(13deg) translate(-7px, -10px); } } @keyframes kfFloat4r { from { transform: rotate(-20deg) translate(0, 0); } to { transform: rotate(-15deg) translate(6px, -9px); } } @keyframes kfFloat5r { from { transform: rotate(16deg) translate(0, 0); } to { transform: rotate(11deg) translate(-5px, -8px); } } /* ── Content grid ────────────────────────────────────────── */ .kf-footer-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 220px 1fr 1fr; padding: 52px 72px 44px; min-height: 210px; align-items: center; } .kf-brand-name { font-size: 20px; font-weight: 400; color: #ece9e3; letter-spacing: -0.02em; margin-bottom: 12px; } .kf-brand-sub { font-size: 13px; font-weight: 300; color: rgba(190, 188, 183, 0.48); line-height: 1.65; max-width: 160px; } .kf-nav-col ul { list-style: none; display: flex; flex-direction: column; gap: 16px; padding: 0; margin: 0; } .kf-nav-col ul li a { font-size: 13.5px; font-weight: 400; color: rgba(200, 198, 194, 0.62); text-decoration: none; letter-spacing: -0.01em; transition: color 0.18s; } .kf-nav-col ul li a:hover { color: #ece9e3; } /* ── Bottom bar ──────────────────────────────────────────── */ .kf-footer-bottom { position: relative; z-index: 2; padding: 14px 72px; border-top: 1px solid rgba(255, 255, 255, 0.05); } .kf-footer-bottom p { font-size: 11.5px; font-weight: 300; color: rgba(170, 168, 164, 0.32); letter-spacing: 0.01em; margin: 0; } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 660px) { .kf-footer-inner { grid-template-columns: 1fr 1fr; padding: 40px 36px 36px; gap: 32px; } .kf-brand { grid-column: 1 / -1; } .kf-footer-bottom { padding: 12px 36px; } .kf-k3, .kf-k4, .kf-k5, .kf-k8, .kf-k9, .kf-k10 { display: none; } }