/* ═══════════════════════════════════════ FF Category Grid — Styles v1.6.0 Desktop-only flyouts. Touch = straight links. ═══════════════════════════════════════ */ /* ─── Wrapper ─── */ .ff-cat-grid-wrapper { width: 100%; max-width: 1200px; margin: 0 auto; } /* ─── Header ─── */ .ff-cat-grid__header { text-align: center; margin-bottom: 30px; } .ff-cat-grid__title { font-size: 28px; font-weight: 700; color: #1e3a5f; margin: 0 0 10px; } .ff-cat-grid__divider { width: 60px; height: 3px; background: #3b4f6e; margin: 0 auto; border-radius: 2px; } /* ─── Grid ─── */ .ff-cat-grid { display: grid; gap: 20px; } .ff-cat-grid--cols-1 { grid-template-columns: 1fr; } .ff-cat-grid--cols-2 { grid-template-columns: repeat(2, 1fr); } .ff-cat-grid--cols-3 { grid-template-columns: repeat(3, 1fr); } .ff-cat-grid--cols-4 { grid-template-columns: repeat(4, 1fr); } .ff-cat-grid--cols-5 { grid-template-columns: repeat(5, 1fr); } /* ─── Card ─── */ .ff-cat-card { position: relative; border-radius: 10px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .ff-cat-card__link { display: block; position: relative; overflow: hidden; border-radius: inherit; text-decoration: none; } .ff-cat-card__image { height: 220px; overflow: hidden; border-radius: inherit; } .ff-cat-card__image img, .ff-cat-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } /* ─── Navy Overlay ─── */ .ff-cat-card__overlay { position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; transition: opacity 0.3s ease; } /* ─── Label ─── */ .ff-cat-card__label { position: absolute; bottom: 14px; left: 14px; background-color: rgba(59, 79, 110, 0.85); color: #ffffff; padding: 8px 20px; border-radius: 5px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; z-index: 2; transition: background-color 0.2s ease; } .ff-cat-card__flyout-icon { display: inline-flex; transition: transform 0.2s ease; } .ff-cat-card--has-flyout.ff-cat-flyout--active .ff-cat-card__flyout-icon { transform: rotate(180deg); } /* ─── Hover Effects ─── */ .ff-cat-grid--hover-zoom .ff-cat-card:hover .ff-cat-card__img, .ff-cat-grid--hover-zoom .ff-cat-card:hover .ff-cat-card__image img { transform: scale(1.08); } .ff-cat-grid--hover-lift .ff-cat-card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); } .ff-cat-grid--hover-darken .ff-cat-card__link::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background 0.3s ease; z-index: 1; border-radius: inherit; pointer-events: none; } .ff-cat-grid--hover-darken .ff-cat-card:hover .ff-cat-card__link::after { background: rgba(0, 0, 0, 0.25); } /* ═══════════════════════════════════════ Flyout Menu — Desktop Only Rendered on via JS. JS removes flyout DOM entirely on touch devices. ═══════════════════════════════════════ */ .ff-cat-flyout { position: fixed; z-index: 999999; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 0; box-shadow: 0 8px 30px -5px rgba(0, 0, 0, 0.2); max-height: 60vh; overflow-y: auto; /* Hidden by default */ opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; pointer-events: none; } /* Visible state — toggled by JS on desktop only */ .ff-cat-flyout--visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* ─── Flyout Header ─── */ .ff-cat-flyout__header { padding: 10px 16px 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #718096; border-bottom: 1px solid #e2e8f0; margin-bottom: 2px; } /* ─── Flyout Links ─── */ .ff-cat-flyout__link { display: block; padding: 10px 16px; color: #2d3748; text-decoration: none; font-size: 14px; font-weight: 500; transition: background-color 0.15s ease, color 0.15s ease; border-bottom: 1px solid transparent; } .ff-cat-flyout__link:hover { background-color: #edf2f7; color: #1e3a5f; } /* ─── View All Link ─── */ .ff-cat-flyout__view-all { display: block; padding: 10px 16px; color: #3b4f6e; text-decoration: none; font-size: 13px; font-weight: 700; border-top: 1px solid #e2e8f0; margin-top: 2px; transition: background-color 0.15s ease, color 0.15s ease; } .ff-cat-flyout__view-all:hover { background-color: #edf2f7; color: #1e3a5f; } /* ─── Scrollbar styling for long flyouts ─── */ .ff-cat-flyout::-webkit-scrollbar { width: 6px; } .ff-cat-flyout::-webkit-scrollbar-track { background: transparent; } .ff-cat-flyout::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 3px; } .ff-cat-flyout::-webkit-scrollbar-thumb:hover { background: #a0aec0; } /* ═══════════════════════════════════════ Responsive ═══════════════════════════════════════ */ @media (max-width: 1024px) { .ff-cat-grid--cols-4, .ff-cat-grid--cols-5 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .ff-cat-grid--cols-2, .ff-cat-grid--cols-3, .ff-cat-grid--cols-4, .ff-cat-grid--cols-5 { grid-template-columns: 1fr; } .ff-cat-card__image { height: 180px; } .ff-cat-grid__title { font-size: 22px; } }