/* ===================================================================== 37-pp-global-mobile-fixes.css Global UI/UX fixes for mobile and core pages: - Reveal animations disabled on mobile so content is never invisible - Blog card images and lazy-load skeleton - Contact page layout resilience - FAQ accordion larger tap targets - General mobile readability improvements ===================================================================== */ /* ------------------------------------------------------------------- 0. ROOT HORIZONTAL OVERFLOW GUARD The off-canvas mobile nav (.pp-mobile-nav) is position:fixed and sits at translateX(100%), i.e. fully off the right edge. A fixed element is NOT clipped by `overflow-x:hidden` on , which is why the document width doubled (horizontal scroll / blank space) on every page at all sizes. Fix: clip on the ROOT (propagates to the viewport and DOES clip fixed descendants). Switch from hidden->clip as well so it does not become a scroll container (which would break the sticky header). `clip` (unlike `hidden`) never creates a scroll container, so sticky positioning and vertical page scroll keep working. ------------------------------------------------------------------- */ html{ overflow-x:clip; } body{ overflow-x:clip !important; } /* ------------------------------------------------------------------- 1. REVEAL ANIMATIONS — disable on mobile to prevent invisible content ------------------------------------------------------------------- */ @media(max-width:768px){ .reveal, .reveal.d1,.reveal.d2,.reveal.d3, .reveal.d4,.reveal.d5,.reveal.d6{ opacity:1 !important; transform:none !important; transition:none !important; visibility:visible !important; } } /* ------------------------------------------------------------------- 2. BLOG PAGE — image sizing, lazy-load skeleton, card spacing ------------------------------------------------------------------- */ .pp-blog{ padding-top:24px; padding-bottom:48px; } .pp-blog-head{ text-align:center; margin-bottom:36px; } .pp-blog-head h1{ font-size:clamp(1.6rem,4vw,2.4rem) !important; margin-bottom:10px; } .pp-blog-head .pp-lead{ color:var(--muted); font-size:1rem; max-width:560px; margin:0 auto; line-height:1.6; } .pp-blog-section{ margin-bottom:48px; } .pp-blog-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; } .pp-blog-section-head h2{ font-size:clamp(1.25rem,2.5vw,1.7rem) !important; margin-bottom:4px; } .pp-blog-section-desc{ color:var(--muted); font-size:.9rem; max-width:520px; line-height:1.55; margin:0; } .pp-blog-section-link{ color:var(--clay); font-weight:700; font-size:.85rem; white-space:nowrap; } .pp-blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .pp-blog-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; transition:transform .25s var(--ease),box-shadow .25s var(--ease); } .pp-blog-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); } .pp-blog-thumb{ display:block !important; aspect-ratio:3/2 !important; overflow:hidden !important; background:linear-gradient(135deg,#F6ECE2,#EAD9CC) !important; position:relative !important; } .pp-blog-thumb::before{ content:"🐾"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2.2rem; opacity:.35; pointer-events:none; z-index:0; } .pp-blog-thumb img{ width:100%; height:100%; object-fit:cover; transition:opacity .4s var(--ease),transform .4s var(--ease); position:relative; z-index:1; } .pp-blog-card:hover .pp-blog-thumb img{ transform:scale(1.04); } /* While the real image is still lazy-loaded, hide the transparent gif so the gradient + paw icon placeholder shows through. */ .pp-blog-thumb img[data-src]{ opacity:0 !important; } @keyframes pp-skeleton{ 0%{background-position:200% 0} 100%{background-position:-200% 0} } .pp-blog-card-body{ padding:18px; display:flex; flex-direction:column; flex:1; } .pp-blog-cat{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--clay); margin-bottom:6px; } .pp-blog-card h3{ font-size:1.05rem !important; margin-bottom:8px; line-height:1.35; } .pp-blog-card h3 a{ color:var(--charcoal); } .pp-blog-card h3 a:hover{ color:var(--clay); } .pp-blog-card-body > p:not(.pp-blog-cat){ font-size:.88rem; color:var(--muted); line-height:1.6; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .pp-blog-meta{ display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:14px; font-size:.76rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; } @media(max-width:991px){ .pp-blog-grid{ grid-template-columns:repeat(2,1fr); gap:20px; } } @media(max-width:560px){ .pp-blog-grid{ grid-template-columns:1fr; gap:18px; } .pp-blog-section-head{ flex-direction:column; align-items:flex-start; gap:8px; } .pp-blog-section-link{ align-self:flex-start; } .pp-blog-card h3{ font-size:1rem !important; } .pp-blog-card-body > p:not(.pp-blog-cat){ font-size:.86rem; } } /* ------------------------------------------------------------------- 3. CONTACT PAGE — resilient layout for both cached and DB content ------------------------------------------------------------------- */ .pp-contact-page{ padding:48px 0 64px; } .pp-contact-hero{ text-align:center; margin-bottom:40px; } .pp-contact-hero .pp-eyebrow{ font-size:.75rem; margin-bottom:8px; } .pp-contact-hero h1{ font-size:clamp(1.7rem,3vw,2.4rem) !important; margin-bottom:12px; } .pp-contact-hero p{ max-width:560px; margin:0 auto; color:var(--muted); font-size:1.03rem; line-height:1.6; } .pp-contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:960px; margin:0 auto 48px; } .pp-contact-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px; transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease); } .pp-contact-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:var(--clay-soft); } .pp-contact-card h3{ font-size:1rem !important; font-weight:700 !important; margin-bottom:8px !important; display:flex !important; align-items:center !important; gap:8px !important; color:var(--charcoal) !important; text-align:left !important; } .pp-contact-card h3::before{ content:""; display:inline-block; width:4px; height:18px; background:var(--clay); border-radius:2px; flex-shrink:0; } .pp-contact-card p{ font-size:.88rem; color:var(--muted); line-height:1.6; margin:0; } .pp-contact-card a{ color:var(--clay) !important; font-weight:600; border-bottom:1px solid transparent; transition:border-color .2s; } .pp-contact-card a:hover{ border-bottom-color:var(--clay); } .pp-contact-faq{ max-width:800px; margin:0 auto 48px; } .pp-contact-faq>h2{ text-align:center; font-size:clamp(1.3rem,2.5vw,1.8rem) !important; margin-bottom:24px; } .pp-contact-cta{ text-align:center; max-width:680px; margin:0 auto 40px; } .pp-contact-cta h2{ font-size:clamp(1.3rem,2.5vw,1.8rem) !important; margin-bottom:10px; } .pp-contact-cta p{ color:var(--muted); font-size:.95rem; line-height:1.6; } .pp-contact-strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 24px; padding:18px 20px; background:var(--charcoal); border-radius:var(--radius-sm); max-width:800px; margin:0 auto; } .pp-contact-strip a{ color:#fff; font-size:.88rem; font-weight:600; } .pp-contact-strip a:hover{ color:var(--gold); } @media(max-width:991px){ .pp-contact-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .pp-contact-page{ padding:28px 0 36px; } .pp-contact-hero{ padding:0 16px; margin-bottom:28px; } .pp-contact-hero h1{ font-size:1.45rem !important; } .pp-contact-hero p{ font-size:.88rem; } .pp-contact-grid{ display:grid !important; grid-template-columns:1fr !important; gap:16px !important; padding:0 16px !important; margin-bottom:36px; overflow-x:visible !important; overflow-y:visible !important; scroll-snap-type:none !important; } .pp-contact-grid > *{ width:auto !important; min-width:auto !important; max-width:none !important; flex:none !important; scroll-snap-align:none !important; } .pp-contact-grid::after{ display:none !important; } .pp-contact-card{ padding:20px 18px; } .pp-contact-faq{ padding:0 16px; margin-bottom:36px; } .pp-contact-faq>h2{ font-size:1.2rem !important; margin-bottom:18px; } .pp-contact-cta{ padding:0 16px; margin-bottom:32px; } .pp-contact-strip{ flex-direction:column; gap:12px; padding:18px 16px; text-align:center; margin:0 16px; } } /* ------------------------------------------------------------------- 4. FAQ ACCORDION — larger tap targets, clearer open state ------------------------------------------------------------------- */ .pp-faq-item, .pp-fq-item{ background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:box-shadow .25s var(--ease); margin-bottom:10px; } .pp-faq-item:hover, .pp-fq-item:hover, .pp-faq-item[open], .pp-fq-item[open]{ box-shadow:var(--shadow-sm); } .pp-faq-q, summary.pp-faq-q{ font-family:var(--sans); font-size:.92rem; font-weight:700; padding:16px 18px; cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--charcoal); transition:color .2s; -webkit-tap-highlight-color:transparent; } .pp-faq-q:hover{ color:var(--clay); } .pp-faq-q::-webkit-details-marker{ display:none; } .pp-faq-toggle{ font-size:1.3rem; font-weight:300; color:var(--muted); transition:transform .3s var(--ease); flex-shrink:0; width:24px; height:24px; display:flex; align-items:center; justify-content:center; } .pp-faq-item[open] .pp-faq-toggle, .pp-fq-item[open] .pp-faq-toggle{ transform:rotate(45deg); color:var(--clay); } .pp-faq-a, .pp-faq-a-inner{ padding:0 18px 16px; } .pp-faq-a p, .pp-faq-a-inner p{ font-size:.86rem; line-height:1.65; color:var(--muted); margin:0; } .pp-faq-a a, .pp-faq-a-inner a{ color:var(--clay); font-weight:600; text-decoration:underline; text-underline-offset:3px; } @media(max-width:768px){ .pp-faq-q, summary.pp-faq-q{ padding:16px !important; font-size:.9rem !important; min-height:56px; } .pp-faq-a, .pp-faq-a-inner{ padding:0 16px 16px !important; } .pp-faq-a p, .pp-faq-a-inner p{ font-size:.85rem !important; } } /* ------------------------------------------------------------------- 5. GENERAL MOBILE READABILITY ------------------------------------------------------------------- */ @media(max-width:768px){ body{ font-size:16px; } .pp-container{ padding-left:18px; padding-right:18px; } .pp-section{ padding:40px 0; } }