/* ========================= Base & Typography (Alegreya) ========================= */ @import url("https://fonts.googleapis.com/css2?family=Alegreya:wght@400;600;700&display=swap"); :root { --cassiopeia-font-family-base:"Alegreya",serif; --brick:#8c4f32; --brick-dark:#6c3c22; --brick-shadow:#4a2b17; --latte:#a67b5b; --latte-dark:#8b6b50; --ink:#3a2e19; --clay:#5c4a2b; } body{font:400 1.05rem/1.65 var(--cassiopeia-font-family-base);} h1,h2,h3{font-weight:700;letter-spacing:.2px} h2{text-align:left!important} /* ========================= Cassiopeia Header / Spacing ========================= */ .header,.container-header{display:none!important} .site{padding-top:0!important} /* Keep article text left-aligned; don’t centre the block wrapper */ .page-header h1{ text-align:center; margin-bottom:.25rem } .page-header + p,.introtext,.lead{ text-align:left; max-width:72ch; margin-inline:0; line-height:1.6 } /* ========================= Full-width Hero (reusable) Place this block ABOVE the Cassiopeia grid so sidebars start at text ========================= */ .hero{position:relative; width:100vw; left:50%; transform:translateX(-50%); margin:0; background:#000; overflow:clip} .hero__img{display:block; width:100%; height:auto; object-fit:cover; filter:brightness(.85)} .hero__overlay{position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:#fff; padding:0 1rem} .hero__title{font-size:clamp(2rem,5vw,3rem); margin:.25rem 0} .hero__subtitle{font-size:1.15rem; opacity:.95} /* Per-page image via custom property */ .hero{ --hero-image:none } .hero__img{ content:var(--hero-image) } /* safe no-op in most browsers; keep <img> src for real */ /* Optional “painting” variant using background instead of <img> */ .hero--bg{min-height:66vh; isolation:isolate} .hero--bg::before{content:""; position:absolute; inset:0; background: linear-gradient(to bottom,rgba(10,16,30,.55),rgba(10,16,30,.35)), var(--hero-image); background-size:cover; background-position:center; z-index:-1} /* Buttons inside hero (uses Joomla .btn semantics) */ .hero .btn{padding:.6rem 1rem; border-radius:12px; line-height:1.1; transition:.15s} .hero .btn-primary{background:var(--latte); border:1px solid var(--latte-dark); color:#fff} .hero .btn-primary:hover{background:var(--brick); border-color:var(--brick-dark)} .hero .btn-secondary{background:transparent; border:2px solid rgba(255,255,255,.6); color:#fff} .hero .btn-secondary:hover{background:rgba(255,255,255,.14); border-color:#fff} /* ========================= In-article Anchor Navigation (sits directly under hero) ========================= */ .anchor-nav{display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin:0 auto 1.5rem; padding:.5rem} .anchor-nav a{display:inline-block; padding:.6rem 1.2rem; border-radius:.6rem; background:var(--brick); color:#fff!important; font-weight:600; text-decoration:none; transition:background .2s, transform .15s} .anchor-nav a:hover{background:var(--latte); color:#1a0d08!important; transform:translateY(-2px)} .anchor-nav a.active{background:var(--brick); color:#fff!important} /* Keep first content section clear of sticky headers when linked */ .hero + *{scroll-margin-top:80px} /* Optional sticky style */ .anchor-nav.sticky{position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid #eee; padding:.75rem 1.25rem} .anchor-nav.sticky a{color:#2a2a2a; border-bottom:2px solid transparent} .anchor-nav.sticky a:hover{border-bottom-color:var(--cassiopeia-color-primary,#0052cc)} /* ========================= “Explore” / Hobby Cards ========================= */ .wow-hobby-grid{min-height:100vh; display:flex; flex-direction:column; justify-content:center; background:#eae5d8; padding:4rem 1rem} .wow-hobby-grid h2{ text-align:center; font-size:2.2rem; margin-bottom:2rem; color:var(--ink) } .wow-card{display:flex; align-items:flex-start; gap:1rem; text-decoration:none; background:var(--brick); border-radius:8px; padding:1.2rem 1.4rem; box-shadow:4px 6px 0 var(--brick-shadow); transition:transform .25s, box-shadow .25s; color:#fff} .wow-card:hover{transform:translateY(-5px); box-shadow:6px 10px 0 #2e1a0f} .wow-icon{flex:0 0 auto; width:50px; height:50px; border-radius:50%; background:#fff; display:grid; place-content:center; font-size:22px; color:var(--brick); box-shadow:inset 0 0 0 2px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.15)} .wow-text h3{margin:0 0 .3rem; font-size:1.15rem; color:#fff} .wow-text p{margin:0; font-size:.95rem; color:#fdf4ef} /* ========================= Hobby Feature Sections (alternating) ========================= */ .hobby-section{width:100%; min-height:100vh; background:#eae5d8; display:flex; align-items:center; padding:4rem 2rem; box-sizing:border-box} .hobby-grid{display:flex; flex-wrap:wrap; gap:2rem; align-items:center; justify-content:space-between; width:100%} .hobby-image{flex:1 1 40%} .hobby-image img{width:100%; height:auto; border-radius:16px; box-shadow:0 4px 12px rgba(80,60,40,.2)} .hobby-text{flex:1 1 55%} .hobby-text h2{font-size:2rem; margin:.5rem 0; color:var(--ink)} .hobby-text p,.hobby-text li{color:var(--clay)} .hobby-text ul{list-style:disc; margin:0 0 1.5rem 1.2rem} .btn-hobby{background: #a14c36; color:#fff; padding:.7rem 1.3rem; border-radius:999px; font-weight:600; text-decoration:none; transition:background .3s} .btn-hobby:hover{background:#813b2b} /* Alternate theme + flipped layout */ .hobby-section:nth-of-type(even){background:var(--brick); color:#fff} .hobby-section:nth-of-type(even) .hobby-text h2, .hobby-section:nth-of-type(even) .hobby-text p, .hobby-section:nth-of-type(even) .hobby-text li{color:#fff} .hobby-section:nth-of-type(even) .btn-hobby{background:#fff; color:var(--brick)} .hobby-section:nth-of-type(even) .hobby-grid{flex-direction:row-reverse} /* Full-bleed utility */ .fullwidth{width:100vw; margin-left:calc(-50vw + 50%); position:relative} /* ========================= Product Grid / Cards ========================= */ .product-grid{display:grid; gap:1.5rem; margin:2rem 0; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .product-card{background:#fff; border:1px solid #ddd; border-radius:1rem; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.05); display:flex; flex-direction:column; justify-content:space-between; padding:1rem; text-align:left; transition:transform .2s} .product-card:hover{transform:translateY(-4px)} .product-card img{width:100%; height:auto; border-radius:.75rem; margin-bottom:1rem} .product-card h3{font-size:1.1rem; margin:.5rem 0} .product-card ul{padding-left:1.2rem; margin-bottom:1rem; font-size:.95rem; color:#444} .btn-amazon{display:inline-block; padding:.6rem 1rem; background:#232f3e; color:#fff; font-weight:700; text-decoration:none; border-radius:.5rem} /* ========================= Hobby Links (menu-like pills) ========================= */ .hobby-links{display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin:2rem auto; max-width:1000px} .hobby-btn{display:inline-flex; align-items:center; gap:.5rem; padding:.65rem 1.2rem; background:var(--cassiopeia-color-primary,#0052cc); color:#fff; font-weight:500; border-radius:.6rem; text-decoration:none; font-size:1rem; transition:background .2s, transform .15s} .hobby-btn:hover{background:#003d99; transform:translateY(-2px)} .hobby-links a.active,.hobby-links a.current,.mod-menu.hobby-buttons a.active,.mod-menu.hobby-buttons a.current{background:var(--latte)!important; color:#fff!important} /* ========================= Affiliate Disclosure (single, prominent) ========================= */ footer.affiliate-disclosure{background:var(--latte)!important; border-top:4px solid var(--latte-dark)!important; padding:1.8rem; margin-top:2rem; text-align:center; color:#fff!important; font-size:1rem} footer.affiliate-disclosure p{font-size:1.1rem; line-height:1.7; margin:0} footer.affiliate-disclosure strong{font-size:1.15rem; text-transform:uppercase; color:#fff} /* ========================= Utilities ========================= */ .sr-only{position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important} .dog-care-article p{text-align:left!important; margin-inline:0!important} /* Ensure nested articles inside cards don’t inherit Joomla article chrome */ .product-card article{all:unset} /* ========================= Page-specific: P.D. James (Itemid 7) ========================= */ body.itemid-7 .pdjames-hero{position:relative; height:33vh!important; min-height:220px; width:100vw!important; left:50%; transform:translateX(-50%); overflow:hidden!important; background:transparent!important; margin-bottom:0!important} body.itemid-7 .pdjames-hero .hero-breakout{height:100%!important; width:100%!important; overflow:hidden!important} body.itemid-7 .pdjames-hero img.hero-img{height:100%!important; width:100%!important; object-fit:cover!important; object-position:50% 40%} body.itemid-7 .pdjames-hero + *, body.itemid-7 .container-component, body.itemid-7 .item-page, body.itemid-7 .com-content-article, body.itemid-7 .com-content-article__body, body.itemid-7 .article-details, body.itemid-7 .page-header{background:transparent!important; border:0!important; margin-top:0!important; padding-top:0!important} body.itemid-7 .pdjames-hero + * h2:first-child, body.itemid-7 .com-content-article__body > h2:first-child{margin-top:0!important; padding-top:0!important} body.itemid-7 .pdjames-hero .hero-copy{position:absolute!important; inset:0!important; display:grid; place-items:center; padding:1rem .75rem; background:linear-gradient(0deg,rgba(5,22,40,.45),rgba(5,22,40,.2)); color:#fff} /* ========================= Responsive ========================= */ @media (max-width:768px){ .hero__title{font-size:clamp(1.6rem,5.2vw,2.1rem)} .hero__subtitle{font-size:1rem} .hero .btn{font-size:.95rem; padding:.6rem 1rem} .hobby-section .hobby-grid{flex-direction:column} .page-header{display:none} /* keep content clean under hero on mobiles */ } /* ===== Global Full-width Hero Fix ===== */ .fullwidth-hero{ position: relative; width: 100vw; left: 50%; transform: translateX(-50%); margin: 0; padding: 0; background: transparent !important; overflow: hidden; line-height: 0; /* remove inline image gap */ } .mod-custom.fullwidth-hero, .moduletable.fullwidth-hero{ margin: 0; padding: 0; } /* Neutralise Cassiopeia wrappers above hero */ #top-a, #banner, #top-b, #top-a .grid-child, #banner .grid-child, #top-b .grid-child, #top-a .container-top-a, #banner .container-banner, #top-b .container-top-b { background: transparent !important; padding: 0 !important; margin: 0 !important; } /* Hero image defaults: full width, natural aspect on desktop */ .fullwidth-hero .hero-img{ display: block; width: 100%; height: auto; object-fit: cover; object-position: center; } /* Mobile only: force a box height so image always covers */ @media (max-width: 768px){ .fullwidth-hero .hero-img{ height: 56vh; /* adjust 50–60vh if needed */ } } /* ===== Global Full-width Hero Fix ===== */ .fullwidth-hero.{ position: relative; width: 100vw; left: 50%; transform: translateX(-50%); margin: 0; padding: 0; background: transparent !important; overflow: hidden; line-height: 0; /* remove inline image gap */ } .mod-custom.fullwidth-hero, .moduletable.fullwidth-hero{ margin: 0; padding: 0; } /* Neutralise Cassiopeia wrappers above hero */ #top-a, #banner, #top-b, #top-a .grid-child, #banner .grid-child, #top-b .grid-child, #top-a .container-top-a, #banner .container-banner, #top-b .container-top-b { background: transparent !important; padding: 0 !important; margin: 0 !important; } /* Hero image defaults: full width, natural aspect on desktop */ .fullwidth-hero .hero-img{ display: block; width: 100%; height: auto; object-fit: cover; object-position: center; } } /* Mobile only: force a box height so image always covers */ @media (max-width: 768px){ .fullwidth-hero .hero-img{ height: 50vh; } } /* ✅ properly closed here */ /* ===== Explore Hobbies Section (fullwidth, responsive) ===== */ #explore hobby-section-nav.fullwidth { width: 100vw; /* span viewport */ margin-left: calc(-50vw + 50%); /* break out of Cassiopeia grid */ position: relative; padding: 4rem 2rem; background: #eae5d8; /* light cement background */ box-sizing: border-box; } #explore h2 { text-align: center; font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem); margin-bottom: 2.5rem; color: var(--ink); } /* === Responsive Grid === */ #explore .row.g-3 { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */ gap: 2rem; margin: 0 auto; max-width: 1400px; padding: 0 1rem; } @media (max-width: 991px) { #explore .row.g-3 { grid-template-columns: repeat(2, 1fr); /* 2 on tablets */ } } @media (max-width: 600px) { #explore .row.g-3 { grid-template-columns: 1fr; /* 1 on mobiles */ } } /* === Card Layout: Horizontal (Landscape) === */ .wow-card { display: flex; flex-direction: row; /* forces landscape layout */ align-items: center; gap: 1.2rem; text-decoration: none; background: var(--brick); border-radius: 10px; padding: 1.4rem; box-shadow: 4px 6px 0 var(--brick-shadow); transition: transform .25s ease, box-shadow .25s ease; color: #fff; height: 100%; /* allow full card height in grid */ box-sizing: border-box; } .wow-card:hover { transform: translateY(-5px); box-shadow: 6px 10px 0 var(--brick-shadow); } /* === Icon Circle === */ .wow-icon { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--brick); box-shadow: inset 0 0 0 2px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.15); } /* === Text Wrapper (Stays inline with icon) === */ .wow-text { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; /* Fix overflow */ } .wow-text h3 { margin: 0 0 .3rem; font-size: 1.2rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wow-text p { margin: 0; font-size: .95rem; color: #fdf4ef; line-height: 1.4; } #explore .row.g-3 { margin-bottom: 3rem; /* or 4rem for more breathing room */ } /* === Mobile Padding Tweaks === */ @media (max-width: 600px) { #explore.hobby-section.fullwidth { padding: 2.5rem 1rem; } #explore h2 { font-size: 1.6rem; margin-bottom: 1.5rem; } }