/* * MyFoodExplorer — discovery.css (v3.2) * Horizontal scrolling recipe discovery sections for single-recipe pages. * * v3.2 Enhancements: * - Mobile discovery cards significantly larger (Pinterest-style visual weight) * - CSS custom properties for card dimensions (controlled via Customizer) * - Infinite discovery: loading spinner & load-more state styles * - All existing layout fixes from v3.1 preserved * * CSS custom properties controlled by Customizer: * --mfe-disc-card-w-mobile (default: 260px) * --mfe-disc-card-h-mobile (default: 340px) * --mfe-disc-card-w-tablet (default: 220px) * --mfe-disc-card-h-tablet (default: auto — no forced height) * --mfe-disc-card-w-desktop (default: 240px) * --mfe-disc-card-h-desktop (default: auto) * --mfe-disc-img-ratio (default: 4/3) * * Design principles (preserved from v3.1): * - Inherits all CSS custom properties from main.css (:root) * - Cards visually identical to .mfe-recipe-card — no new design language * - No layout shifts (explicit dimensions / aspect-ratio reserved) * - Touch-friendly swipe on mobile, arrow navigation on desktop * - Zero overflow bugs: everything contained within parent */ /* ── CSS variable defaults (overridden by Customizer output in ) ──────── */ :root { --mfe-disc-card-w-mobile: 260px; --mfe-disc-card-h-mobile: auto; --mfe-disc-card-w-tablet: 220px; --mfe-disc-card-h-tablet: auto; --mfe-disc-card-w-desktop: 240px; --mfe-disc-card-h-desktop: auto; --mfe-disc-img-ratio: 4/3; } /* ── Discovery Section Wrapper ─────────────────────────────────────────────── */ .mfe-discovery-section { margin-block: 2.25rem; overflow: hidden; border-radius: var(--mfe-radius); background: var(--mfe-bg-alt); padding: 1.5rem 1.25rem 1.25rem; border: 1.5px solid rgba(255, 107, 53, 0.12); width: 100%; box-sizing: border-box; max-width: 100%; } /* ── Header Row ─────────────────────────────────────────────────────────────── */ .mfe-discovery-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; gap: 0.75rem; flex-wrap: wrap; } .mfe-discovery-title { font-family: var(--mfe-font-heading); font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 700; color: var(--mfe-text); display: flex; align-items: center; gap: 0.4rem; margin: 0; line-height: 1.25; } .mfe-discovery-title::after { content: ''; display: inline-block; width: 28px; height: 3px; background: var(--mfe-primary); border-radius: 2px; margin-left: 0.2rem; flex-shrink: 0; } .mfe-discovery-icon { font-size: 1.1em; line-height: 1; } /* ── Slider Wrapper (positions arrows) ──────────────────────────────────────── */ .mfe-discovery-slider-wrap { position: relative; overflow: hidden; } /* ── The scrollable track ───────────────────────────────────────────────────── */ .mfe-discovery-slider { display: flex; gap: 1rem; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding-block: 0.5rem; padding-inline: 0.25rem 1rem; width: 100%; box-sizing: border-box; /* Align items to top so variable-height cards don't stretch */ align-items: flex-start; } .mfe-discovery-slider::-webkit-scrollbar { display: none; } /* Added with the drag-vs-click fix: only applied once an actual drag is confirmed (see discovery.js), so plain taps/clicks are never affected. */ .mfe-discovery-slider.is-dragging { scroll-snap-type: none; user-select: none; } /* ── Discovery Card ────────────────────────────────────────────────────────── * BASE (mobile-first): uses --mfe-disc-card-w-mobile / h-mobile CSS vars * so the Customizer can resize without CSS file edits. ─────────────────────────────────────────────────────────────────────────── */ .mfe-discovery-card { background: var(--mfe-bg-card); border-radius: var(--mfe-card-radius); overflow: hidden; box-shadow: var(--mfe-shadow); transition: transform var(--mfe-transition), box-shadow var(--mfe-transition); display: flex; flex-direction: column; /* Mobile: use CSS variable — larger for visual impact */ flex: 0 0 var(--mfe-disc-card-w-mobile); width: var(--mfe-disc-card-w-mobile); min-height: var(--mfe-disc-card-h-mobile); min-width: 0; scroll-snap-align: start; contain: layout style; } .mfe-discovery-card:hover { transform: translateY(-4px); box-shadow: var(--mfe-shadow-md); } /* Tablet: switch to tablet vars */ @media (min-width: 600px) { .mfe-discovery-card { flex: 0 0 var(--mfe-disc-card-w-tablet); width: var(--mfe-disc-card-w-tablet); min-height: var(--mfe-disc-card-h-tablet); } } /* Desktop: switch to desktop vars */ @media (min-width: 1024px) { .mfe-discovery-card { flex: 0 0 var(--mfe-disc-card-w-desktop); width: var(--mfe-disc-card-w-desktop); min-height: var(--mfe-disc-card-h-desktop); } } /* ── Card Image ─────────────────────────────────────────────────────────────── */ .mfe-discovery-card-image-wrap { position: relative; overflow: hidden; /* Use discovery-specific ratio var, falls back to recipe ratio */ aspect-ratio: var(--mfe-disc-img-ratio, var(--mfe-recipe-img-ratio, 4/3)); background: var(--mfe-bg-alt); flex-shrink: 0; } .mfe-discovery-card-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; display: block; } .mfe-discovery-card:hover .mfe-discovery-card-image-wrap img { transform: scale(1.04); } /* Pinterest + time badge — same as card.php */ .mfe-discovery-card-image-wrap .mfe-card-pin-save { position: absolute; top: 0.6rem; right: 0.6rem; width: 30px; height: 30px; border-radius: 50%; background: #E60023; color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity var(--mfe-transition); } @media (hover: none) { .mfe-discovery-card-image-wrap .mfe-card-pin-save { opacity: 1; } } .mfe-discovery-card:hover .mfe-discovery-card-image-wrap .mfe-card-pin-save { opacity: 1; } .mfe-discovery-card-image-wrap .mfe-card-pin-save svg { width: 14px; height: 14px; } .mfe-discovery-card-image-wrap .mfe-card-time-badge { position: absolute; bottom: 0.6rem; right: 0.6rem; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(4px); color: #fff; font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 50px; display: flex; align-items: center; gap: 0.25rem; } .mfe-discovery-card-image-wrap .mfe-card-time-badge svg { width: 11px; height: 11px; } /* ── Card Body ──────────────────────────────────────────────────────────────── */ .mfe-discovery-card-body { padding: 0.7rem 0.85rem 0.85rem; flex: 1; display: flex; flex-direction: column; gap: 0.3rem; } /* Card title — 2-line clamp */ .mfe-discovery-card .mfe-card-title { font-size: 0.9rem; margin-bottom: 0; -webkit-line-clamp: 2; } /* Larger title on mobile to aid readability */ @media (max-width: 599px) { .mfe-discovery-card .mfe-card-title { font-size: 0.95rem; } .mfe-discovery-card-body { padding: 0.8rem 0.9rem 0.9rem; gap: 0.4rem; } } .mfe-discovery-card-time { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--mfe-text-muted); margin: 0; margin-top: auto; padding-top: 0.35rem; } /* ── Navigation Arrows ──────────────────────────────────────────────────────── */ .mfe-discovery-arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--mfe-bg); box-shadow: var(--mfe-shadow-md); cursor: pointer; align-items: center; justify-content: center; z-index: 2; transition: background var(--mfe-transition), box-shadow var(--mfe-transition); color: var(--mfe-text); padding: 0; flex-shrink: 0; } .mfe-discovery-arrow:hover { background: var(--mfe-primary); color: #fff; box-shadow: var(--mfe-shadow-lg); } .mfe-discovery-arrow svg { width: 18px; height: 18px; pointer-events: none; } .mfe-discovery-arrow-prev { left: 4px; } .mfe-discovery-arrow-next { right: 4px; } .mfe-discovery-arrow.is-hidden { opacity: 0; pointer-events: none; } /* Show arrows on desktop */ @media (min-width: 768px) { .mfe-discovery-arrow { display: flex; } } /* ── Mobile: extra-large cards for Pinterest-style impact ───────────────────── */ /* These breakpoints only affect mobile (max-width: 599px) and are separate from the CSS variable system so they act as sensible defaults when the Customizer hasn't been touched. */ @media (max-width: 599px) { .mfe-discovery-section { padding: 1.25rem 1rem 1.1rem; /* Slightly more breathing room on mobile */ margin-block: 1.75rem; } /* The CSS variable default (260px) is set in :root above. We increase the image area naturally by the wider card + a taller aspect ratio via the image wrap override below. */ .mfe-discovery-card-image-wrap { /* Portrait-leaning ratio on mobile = more food photography visible */ aspect-ratio: var(--mfe-disc-img-ratio, 3/4); } /* Ensure the slider shows ~1.5 cards, hinting that more are available */ .mfe-discovery-slider { gap: 0.75rem; padding-inline: 0.25rem 0.75rem; } } /* Very narrow screens (< 380px): slightly narrower card to prevent clip */ @media (max-width: 379px) { .mfe-discovery-card { flex: 0 0 calc(var(--mfe-disc-card-w-mobile) - 20px); width: calc(var(--mfe-disc-card-w-mobile) - 20px); } } /* ── Infinite Discovery: Loading Spinner ─────────────────────────────────────── */ .mfe-discovery-loading { display: none; /* hidden; JS shows it during fetch */ flex: 0 0 60px; width: 60px; align-self: center; align-items: center; justify-content: center; padding: 1rem 0.5rem; } .mfe-discovery-loading.is-active { display: flex; } .mfe-discovery-spinner { width: 28px; height: 28px; border: 3px solid rgba(255, 107, 53, 0.25); border-top-color: var(--mfe-primary); border-radius: 50%; animation: mfeDiscSpin 0.7s linear infinite; flex-shrink: 0; } @keyframes mfeDiscSpin { to { transform: rotate(360deg); } } /* ── Dark-mode compatibility ─────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { .mfe-discovery-section { background: rgba(255, 107, 53, 0.05); border-color: rgba(255, 107, 53, 0.15); } } /* ── Continued Steps List (unchanged from v3.1) ──────────────────────────────── */ .mfe-steps-list-continued { list-style: none; padding-left: 0; margin-top: 0; display: flex; flex-direction: column; gap: 1.5rem; } .mfe-instructions-section .mfe-discovery-section { margin-top: 1.5rem; margin-bottom: 1.5rem; }