/* ========================================== FREEQUOTEPRO - PAGE BLOG PREMIUM GLASS IMAGE FRAME Same effect as Our Core Values ========================================== */ /* Independent animated reflection */ @property --blog-frame-angle { syntax: ""; inherits: false; initial-value: 225deg; } /* ========================================== 1. GLASS CARD FOUNDATION ========================================== */ .page-blog .post-item { --blog-frame-width: 5px; position: relative; isolation: isolate; /* Metallic depth */ box-shadow: 0 24px 48px -22px rgba(11, 49, 91, 0.38), 0 10px 24px -14px rgba(11, 49, 91, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.65); transition: box-shadow 400ms cubic-bezier(0.25, 1, 0.5, 1); } /* ========================================== 2. SOFT GLASS GLOW ========================================== */ .page-blog .post-item::before { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient( ellipse at 0% 15%, rgba(225, 237, 245, 0.18), transparent 48% ), radial-gradient( ellipse at 100% 75%, rgba(255, 130, 28, 0.12), transparent 48% ); opacity: 0.55; transition: opacity 600ms ease; } /* ========================================== 3. REFLECTIVE GLASS BORDER ========================================== */ .page-blog .post-item::after { content: ""; position: absolute; z-index: 5; inset: 0; border-radius: inherit; pointer-events: none; --blog-frame-angle: 225deg; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38), inset 0 2px 2px rgba(255, 255, 255, 0.25); } /* ========================================== 4. ADVANCED GLASS RIM ========================================== */ @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) { .page-blog .post-item::after { padding: var(--blog-frame-width); background: conic-gradient( from var(--blog-frame-angle), rgba(255, 255, 255, 0.12) 0%, rgba(225, 237, 245, 0.95) 12%, rgba(255, 255, 255, 0.45) 24%, transparent 42%, rgba(255, 130, 28, 0.95) 59%, rgba(255, 195, 130, 0.7) 65%, transparent 80%, rgba(255, 255, 255, 0.12) 100% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: --blog-frame-angle 900ms cubic-bezier(0.25, 1, 0.5, 1); } } /* ========================================== FREEQUOTEPRO - BLOG IMAGE SIZE FIX Preserve original image dimensions ========================================== */ /* Keep original image container behavior */ .page-blog .post-item .post-featured-image { z-index: 0; } /* Glass frame must not change image layout */ .page-blog .post-item::before, .page-blog .post-item::after { box-sizing: border-box; pointer-events: none; } /* Preserve original image sizing rules */ .page-blog .post-featured-image img { max-width: 100%; } /* Maintain original content stacking */ .page-blog .post-item .post-item-body { z-index: 1; } /* ========================================== 6. HOVER - MOVING REFLECTION ========================================== */ @media (hover: hover) and (pointer: fine) { .page-blog .post-item:hover::after, .page-blog .post-item:focus-within::after { --blog-frame-angle: 255deg; } .page-blog .post-item:hover::before, .page-blog .post-item:focus-within::before { opacity: 0.9; } .page-blog .post-item:hover, .page-blog .post-item:focus-within { box-shadow: 0 26px 52px -22px rgba(11, 49, 91, 0.42), 0 12px 26px -14px rgba(11, 49, 91, 0.25), 0 0 20px rgba(255, 130, 28, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.7); } } /* ========================================== 7. RESPONSIVE ========================================== */ @media (max-width: 991px) { .page-blog .post-item { --blog-frame-width: 4px; } } @media (max-width: 575px) { .page-blog .post-item { --blog-frame-width: 3px; } } /* ========================================== 8. REDUCED MOTION ========================================== */ @media (prefers-reduced-motion: reduce) { .page-blog .post-item, .page-blog .post-item::before, .page-blog .post-item::after { transition: none; } } /* ========================================== 9. PHOTOGRAPHIC CARD TEXT CONTRAST Refines the template overlay (custom.css: .post-featured-image figure::before) for blog.php only. Stack: photo -> overlay -> title/CTA (.post-item-body). ========================================== */ /* Cinematic navy gradient: the upper photo stays clear; the overlay is already protective where four-line titles begin (~44%). */ .page-blog .post-featured-image figure::before { pointer-events: none; background: linear-gradient( 180deg, rgba(11, 47, 88, 0) 0%, rgba(11, 47, 88, 0.05) 22%, rgba(11, 47, 88, 0.24) 34%, rgba(11, 47, 88, 0.52) 44%, rgba(10, 40, 74, 0.72) 57%, rgba(9, 34, 62, 0.85) 75%, rgba(8, 29, 52, 0.93) 100% ); } /* A soft shadow supports the overlay on busy highlights; it is not relied on for contrast. */ .page-blog .post-item-content h2 { text-shadow: 0 1px 2px rgba(6, 24, 43, 0.35); } .page-blog .post-item-btn .readmore-btn { text-shadow: 0 1px 2px rgba(6, 24, 43, 0.3); } /* Visible keyboard focus over the photography. */ .page-blog .post-item-content h2 a:focus-visible, .page-blog .post-item-btn .readmore-btn:focus-visible { outline: 2px solid var(--white-color); outline-offset: 4px; border-radius: 4px; } .page-blog .post-featured-image a:focus-visible { outline: 3px solid var(--white-color); outline-offset: -6px; border-radius: 16px; } @media (prefers-reduced-motion: reduce) { .page-blog .post-featured-image figure img { transition: none; } .page-blog .post-item:hover .post-featured-image img { transform: none; } }