:root{ --bg:#0b0c10; --text:#f4f5f7; --muted:#b7bcc7; --border:rgba(255,255,255,.15); } /* Smooth scrolling for anchor/navigation jumps */ html{ scroll-behavior: smooth; } body{ margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--text); } /* Utility: disable page scrolling when applied to or */ .no-scroll, html.no-scroll, body.no-scroll{ overflow: hidden !important; height: 100% !important; } a{ color:inherit; text-decoration:none; } .container{ max-width:1100px; margin:auto; padding:20px; } /* Featured (first) section: lighter background and dark text like the sample */ .section.featured{ /* brighter white so it reads as white rather than grey */ background:rgba(255,255,255,0.95); color:#111; padding:40px 0; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); } .section.featured h2{ color:#111; } .section.featured .muted{ color:#666; } .section.featured a{ color:inherit; } /* Featured grid: book image left, copy centered on larger screens */ .featured-grid{ display:flex; gap:12px; align-items:center; } .featured-image img{ max-width:640px; width:100%; height:auto; display:block; box-shadow:0 20px 40px rgba(0,0,0,0.35); } .featured-copy{ max-width:640px; } .featured-copy h3{ margin:0 0 10px 0; font-size:32px; color:#111; } .product-desc{ color:#333; line-height:1.6; } .cta-row{ margin-top:22px; } .btn-buy{ display:inline-block; padding:12px 26px; border:3px solid #c7a86b; color:#c7a86b; background:transparent; text-transform:uppercase; font-weight:700; border-radius:4px; } /* Other Devotionals grid */ .others .other-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap:20px; align-items:stretch; margin-top:18px; } .section.others{ background:#0b0b0b; color:#fff; } .section.others h2{ color:#fff; } .others .other-item{ background: #111; /* dark card so images pop on black section */ border-radius:6px; box-shadow:0 8px 20px rgba(0,0,0,0.3); display:flex; align-items:center; justify-content:center; padding:8px; } .others .other-item img{ max-width:100%; max-height:160px; width:auto; height:auto; object-fit:contain; display:block; } .others h2{ margin-top:0; } @media (max-width:700px){ .hero-image{ min-height:50vh; background-position: center top; } } @media (max-width:900px){ .featured-grid{ flex-direction:column; text-align:center; gap:18px; } .featured-image img{ max-width:1040px; width:60%; margin:0 auto 18px; } .featured-copy h3{ font-size:24px; } /* Mobile hero adjustments: reduce height and avoid absolute hero image causing crop/overflow */ .hero-image{ min-height:55vh; background-position: center top; } .hero-image .hero-img-el{ display:none !important; } /* Reset soccer-specific desktop transform on small screens */ .featured-copy--soccer{ transform:none; } /* Slightly tighter global container padding on small screens */ .container{ padding:16px; } } /* Mobile-specific fixes to keep layout tidy on narrow phones */ @media (max-width:600px){ .about-row{ flex-direction:column; align-items:center; text-align:left; gap:12px; padding:12px 0; } .about-image{ flex:0 0 auto; } .author-img{ width:200px; max-width:100%; height:auto; border-radius:0; } .about-text{ max-width:none; padding:0 8px; } .featured-image img{ width:100%; max-width:420px; } .featured-copy{ width:100%; padding:0 8px; } .featured-copy h3{ font-size:20px; } .container{ padding:12px; } } .site-header{ border-bottom:1px solid var(--border); } /* Make the header sit on top of the hero (transparent) and respect safe-area insets */ .site-header{ position: absolute; top: 0; left: 0; right: 0; background: transparent; z-index: 4; } .site-header .container{ padding-top: calc(env(safe-area-inset-top, 12px) + 8px); padding-bottom:8px; } /* Ensure hero content doesn't sit under the header when header overlays the hero */ .hero-image{ padding-top: calc(env(safe-area-inset-top, 12px)); } .header-row{ display:flex; justify-content:space-between; align-items:center; } .nav{ display:flex; gap:16px; } .hero-image{ min-height:60vh; /* use the hero image as a simple background so the section scrolls normally */ background: url("../assets/hero-new.jpg") center/cover no-repeat; position:relative; display:flex; align-items:center; overflow:hidden; /* contain the absolute image during parallax */ } .hero-image .hero-img-el{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transform:translateY(0); will-change:transform; z-index:0; display:block !important; pointer-events:none; } .hero-overlay{ z-index:1; } .hero-content{ position:relative; z-index:2; } /* When .hero-fixed is present, keep hero background fixed while scrolling */ /* disable fixed hero behavior so the hero image scrolls naturally */ .hero-image.hero-fixed{ background-attachment: scroll; } .hero-overlay{ position:absolute; inset:0; /* subtle dark overlay to improve contrast on top of hero image */ background:rgba(0,0,0,0.36); } /* Lighten the overlay on larger viewports so desktop logo/text stay visible */ @media (min-width:900px){ .hero-overlay{ background: rgba(0,0,0,0.12); } } @media (min-width:1200px){ .hero-overlay{ background: rgba(0,0,0,0.06); } } .hero-content{ position:relative; /* remove experimental background swap elements -- hero now handles the background */ } .about-section{ position:relative; background:rgba(255,255,255,0.95); color:#111; padding:40px 0; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); } /* Make the signup / free-sample area fully opaque so the hero does not show through */ .section.alt, #signup{ background: #0b0b0b; color: #ffffff; position:relative; z-index:2; } .section.alt .form input[type="email"]{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.18); } .section.alt .btn{ background:#ffffff; color:#111; border:none; } .about-row{ display:flex; gap:20px; align-items:center; position:relative; z-index:2; } .about-image{ flex:0 0 auto; } .about-image img{ display:block; } .author-img{ width:288px; height:288px; max-width:none; border-radius:0; object-fit:cover; } .about-text{ max-width:720px; padding:12px; } .about-text h2{ margin-top:0; } .about-text p{ color:inherit; line-height:1.6; } /* About section overlay (disabled for white background) */ .about-section::before{ content:""; position:absolute; inset:0; background:transparent; z-index:1; } .about-section a{ color:inherit; } .container.signup{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; } .container.signup .form{ margin-left:0; } .container.signup .form input[type="email"]{ min-width:260px; padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text); } /* Mobile navigation toggle behavior */ .nav-toggle{ display:block; background:none; border:none; color:inherit; font-size:20px; } .nav-toggle{ cursor:pointer; } @media (max-width:700px){ .nav{ display:none; width:100%; } body.nav-open .nav{ display:flex; flex-direction:column; gap:8px; } .container.signup{ flex-direction:column; align-items:stretch; } .container.signup .form{ margin-left:0; } /* Mobile devices: avoid fixed backgrounds for performance and layout */ .hero-image{ background-attachment:scroll; } /* Respect notches and browser UI on small phones */ .site-header{ position:relative; z-index:3; padding-top: calc(env(safe-area-inset-top, 6px) + 8px); padding-bottom:8px; } .hero-image{ min-height:50vh; /* ensure the focal point stays centered and below status bar */ background-position: center center; padding-top: calc(env(safe-area-inset-top, 0) + 6px); } /* make sure hero content isn't pushed under browser controls */ .hero-content{ padding-bottom: calc(env(safe-area-inset-bottom, 0) + 12px); } .hero-image.hero-fixed{ background-attachment:scroll !important; } } /* Remove modal styles (modal removed) */ /* Fixed site-wide background that remains while scrolling */ .site-bg{ /* fixed background layer behind the page so translucent sections can show it through */ position:fixed; inset:0; display:block; background: url("../assets/hero-new.jpg") center/cover no-repeat; z-index:-1; pointer-events:none; will-change:background-position, transform; } .site-bg::after{ /* subtle overlay if needed */ content:""; position:absolute; inset:0; background:rgba(0,0,0,0.02); } /* Shift Soccer featured copy slightly left on desktop to reduce gap to image */ @media (min-width:1200px){ .featured-copy--soccer{ /* smaller offset only on very wide layouts to tighten spacing without overlapping */ transform: translateX(-18px); } .featured-grid{ gap:48px; } .featured-copy{ padding-left:20px; } } /* Testimonials section: translucent white like about */ .section.testimonials{ background: rgba(255,255,255,0.95); color: #111; padding: 40px 0; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); } .testimonial-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:20px; margin-top:18px; } .testimonial-card{ background: rgba(255,255,255,0.9); border-radius:8px; padding:18px; box-shadow:0 8px 18px rgba(0,0,0,0.06); } .testimonial-card blockquote{ margin:0 0 12px 0; font-style:italic; color:#222; } .testimonial-card .author{ margin:0; font-weight:700; color:#333; } /* When toggled, allow the site background to scroll instead of staying fixed */ .site-bg.bg-scroll{ /* Let the background participate in document flow so it scrolls naturally */ background-attachment: scroll !important; position:absolute; top:0; } /* hero-top shows the original hero image (with words) only at the top; it will be hidden after scrolling */ .hero-top{ position:relative; width:100%; height:70vh; /* hide the duplicate top background so only the main hero image appears */ display:none !important; pointer-events:none; } /* body state when background is swapped: site-bg fades in, hero-top fades out */ /* removed bg-swapped rules — no crossfade behavior */ /* sentinel used to trigger background swap: ensure it has a small height so IntersectionObserver can detect it */ #featured-sentinel{ display:block; height:1px; width:100%; } /* Mobile-tight hero rules: keep desktop unchanged but limit hero height and avoid absolute, full-viewport image overflow on narrow screens. */ @media (max-width:780px){ .hero-image{ /* smaller, clamped height so very tall phones don't show an oversized hero */ min-height: clamp(180px, 35vh, 300px); max-height: 360px; background-position: center center; /* Zoom the hero background on small screens so the image appears larger/cropped */ background-size: 160% !important; padding-top: calc(env(safe-area-inset-top, 6px)); } /* Stronger zoom for very narrow phones so hero appears more 'zoomed in' like the screenshot */ @media (max-width:420px){ /* Reduce the extreme zoom and center the focal point to avoid awkward cropping */ .hero-image{ background-size:150%; background-position: center center; } } /* Hide the inline on small screens to avoid a double image effect */ .hero-image .hero-img-el{ display:none !important; } /* Keep header relative so it doesn't overlap content unexpectedly */ .site-header{ position:relative; } /* Ensure the hero content sits below the header and has breathing room */ .hero-content{ padding:10px 0 18px 0; } /* Reduce container padding a touch to avoid extra horizontal scroll */ .container{ padding-left:12px; padding-right:12px; } } /* Tweak mobile nav visibility and overlay lightness so buttons are usable */ @media (max-width:780px){ /* Force nav visible on narrow screens (no hamburger present) */ .nav{ display:flex !important; gap:10px; align-items:center; } /* Make header slightly translucent so buttons read against the hero */ .site-header{ background: rgba(0,0,0,0.14); } /* Lighten hero overlay so image shows through more on phones */ .hero-overlay{ background: rgba(0,0,0,0.12); } .nav .btn{ background: rgba(255,255,255,0.06); padding:8px 10px; border-radius:6px; border:1px solid rgba(255,255,255,0.06); } }