/* ============================================================ EI App — Content Thumbnails polish (Sprint 8) ============================================================ Added when we shipped AI-generated illustrations for bible stories, devotionals, sleep routines, affirmation backgrounds, bible book section heroes, saint portraits, and empty states. Goals: 1. When a card's `.thumb` has a background-image inline-style (set by JS from item.thumb_url), ensure the meta-row text underneath stays high-contrast. 2. Add a subtle ::before placeholder behind any thumb so the first-paint isn't jarring while the WebP loads from runtime cache or network. 3. Affirmation cards: when an image is loaded, overlay a dark gradient so the centered affirmation text stays legible on any background. 4. Subtle hover/active feedback for taps (haptic + visual). Imported AFTER app.css in index.html so these rules take precedence over the existing gradient defaults. ============================================================ */ /* 1. Loading placeholder visible under every thumb until image paints. Cheap "shimmer" via 2-stop gradient anchored on the brand palette. Pulses via the `prefers-reduced-motion` guard. */ .story-card .thumb { background-color: var(--ink-navy-3, #0d2846); position: relative; isolation: isolate; } .story-card .thumb::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 115deg, rgba(20, 45, 80, 0.95) 0%, rgba(30, 60, 100, 0.85) 50%, rgba(20, 45, 80, 0.95) 100% ); background-size: 250% 100%; z-index: -1; animation: ei-thumb-shimmer 2.4s ease-in-out infinite; } @keyframes ei-thumb-shimmer { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } } @media (prefers-reduced-motion: reduce) { .story-card .thumb::before { animation: none; } } /* When the thumbnail image is present (JS adds .has-img), kill the navy shimmer — with isolation:isolate the z-index:-1 ::before actually paints ABOVE the bg-image, which made the artwork imperceptible (very blue). Show only a soft bottom scrim so the image reads like a real thumbnail. */ /* Full-art display: the COMPLETE illustration (contain) floats over a soft navy gradient — so biblical characters' heads are NEVER cropped, whatever the composition. JS sets `--art:url(...)` + `.has-img`. NOTE: the backdrop is a GRADIENT, not a blurred copy of the image. In a grid of 30+ thumbnails a per-tile blur(18px) of a second image copy is very GPU-heavy and crashed the Android WebView (OOM, 2026-06-22). The gradient is visually almost identical at thumbnail size and costs nothing. Heroes (1 at a time, .ei-art) keep the real blur. */ .story-card .thumb.has-img { overflow: hidden; } .story-card .thumb.has-img::before { background: linear-gradient(150deg, rgba(20,45,80,0.96) 0%, rgba(13,30,50,0.92) 100%); filter: none; transform: none; opacity: 1; z-index: 0; animation: none; } .story-card .thumb.has-img::after { content: ''; position: absolute; inset: 0; background-image: var(--art); background-size: contain; background-position: center; background-repeat: no-repeat; z-index: 1; } /* Historias bíblicas: SQUARE thumbs so the square illustration fills the tile edge-to-edge — no navy side-bands, no cropped heads. The card grows taller (title sits below the square image). Scoped to this grid only so Sleep / Estudios / Afirmaciones keep their layout. (2026-06-22) */ #bibleStoriesGrid .story-card { aspect-ratio: auto; } #bibleStoriesGrid .story-card .thumb { aspect-ratio: 1; flex: 0 0 auto; } /* (2026-06-23) Headroom is now baked into the 10 tight source thumbs (figure lowered + matched-bg strip), so the contained image can fill the tile again — no CSS inset needed. */ /* Afirmaciones / Juegos / Estudios: same square-image-on-top layout as Historias bíblicas (image shows via --art). Titles get up to 3 lines (kids-area review 2026-07-22: line-clamp:1 butchered nearly every affirmation to a single word — "Soy hijo…", "Cuando…"). Cards in the same row stretch to equal height (grid default) and the meta absorbs the extra space, so rows stay flush while titles show fully. */ #affirmationsGrid .story-card, #gamesGrid .story-card, #bibleStudiesGrid .story-card { aspect-ratio: auto; } #affirmationsGrid .story-card .thumb, #gamesGrid .story-card .thumb, #bibleStudiesGrid .story-card .thumb { aspect-ratio: 1; flex: 0 0 auto; } #affirmationsGrid .story-card .meta { padding: 6px 9px 8px; } #bibleStoriesGrid .story-card .meta, #affirmationsGrid .story-card .meta, #gamesGrid .story-card .meta, #bibleStudiesGrid .story-card .meta { flex: 1 0 auto; } #bibleStoriesGrid .story-card .meta h4, #affirmationsGrid .story-card .meta h4, #gamesGrid .story-card .meta h4, #bibleStudiesGrid .story-card .meta h4 { -webkit-line-clamp: 3; font-size: 0.8rem; } #gamesGrid .story-card .meta p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Reusable full-art container for image-only heroes (saint detail, study detail) — child-div layers (avoids ::after conflicts with .ar-hero). */ .ei-art { position: relative; overflow: hidden; background-color: var(--ink-navy-3, #0d2846); } .ei-art__blur { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(20px) saturate(1.08); transform: scale(1.2); opacity: 0.5; } .ei-art__img { position: absolute; inset: 0; z-index: 1; background-size: contain; background-position: center; background-repeat: no-repeat; } /* 2. Image-loaded state — bottom-inset gradient hides the busy edge where the card meta-row joins, so the WHITE meta area visually lifts off the image without a hard border line. */ .story-card .thumb[style*="background-image"] { position: relative; } .story-card .thumb[style*="background-image"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient( to bottom, rgba(255, 253, 247, 0) 0%, rgba(255, 253, 247, 0.55) 100% ); pointer-events: none; } /* 3. Affirmation cards with image_url get a dark overlay so the centered text stays readable on ANY background palette. Only applies when an inline background-image is set. */ .affirmation-card .thumb[style*="background-image"] { background-size: cover !important; background-position: center !important; position: relative; } .affirmation-card .thumb[style*="background-image"]::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(13, 30, 50, 0.25) 0%, rgba(13, 30, 50, 0.55) 100% ); pointer-events: none; } /* Text in affirmation thumb sits ABOVE the overlay via z-index. */ .affirmation-card .thumb { isolation: isolate; } .affirmation-card .thumb > * { position: relative; z-index: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); } /* 4. Hover + active feedback (mobile + desktop). Subtle lift on hover, gentle press-down on tap (matches haptic). */ @media (hover: hover) { .story-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px -8px rgba(13, 40, 70, 0.35); transition: transform 0.18s ease-out, box-shadow 0.18s ease-out; } } .story-card:active { transform: scale(0.98); transition: transform 0.08s ease-out; } /* 5. Saints screen — extra-screens.js renders day cards with the same .story-card pattern. Add a soft frame so portraits feel "framed" like reverent devotional art. */ .saint-card .thumb[style*="background-image"] { box-shadow: inset 0 0 0 2px rgba(212, 169, 66, 0.35); /* gold inner ring */ } /* 6. Bible book hero — when wired into the book picker, give it a taller thumb to read as a "section header card" not a tile. */ .bible-section-card .thumb { height: 80%; background-size: cover !important; background-position: center !important; } /* 7. Empty-state illustrations — center, max-width, soft shadow. Used by extra-screens for "no churches near", "no downloads", etc. */ .empty-illust { display: block; max-width: 220px; width: 60%; margin: 0 auto 16px; opacity: 0.92; filter: drop-shadow(0 4px 12px rgba(13, 40, 70, 0.18)); } /* 8. Bible-study reader audio player — brand-match the native