/* ============================================================ HOMEPAGE STYLES — scottmarlowe.com ============================================================ Applied when has the .home-page class. Sections: 1. Layout overrides (full-width, no sidebar) 2. Hero 3. Latest Release 4. Series Showcase 5. Free Fiction 6. Newsletter 7. World of Uhl 8. Blog Preview 9. YouTube 10. Shared components (buttons, headings) 11. Responsive ============================================================ */ /* ---------------------------------------- 1. LAYOUT OVERRIDES ---------------------------------------- */ /* Full-width content, no sidebar on homepage */ .home-page .blog-content { -ms-flex: 0 0 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } .home-page .blog-sidebar { display: none !important; } /* Remove default post max-width constraint */ .home-page .blog-post { max-width: none; } /* Reduce top margin since hero fills the space */ .home-page .blog-body { margin-top: 0; padding: 0; } /* Override container max-width for full-bleed sections */ .home-page .blog-body > .row { margin: 0; max-width: none; } /* ---------------------------------------- 10. SHARED COMPONENTS ---------------------------------------- */ /* Section spacing */ .hp-section { padding: 4rem 2rem; max-width: 72rem; margin: 0 auto; } /* Section headings — matches theme's well-global-title style */ .hp-section-heading { font-family: "Titillium Web", sans-serif; font-size: 1rem; text-transform: uppercase; font-weight: 300; color: #a2aab5; letter-spacing: 2px; line-height: 1; margin-bottom: 2rem; } .hp-section-heading-light { color: rgba(255, 255, 255, 0.7); } /* Buttons */ .hp-btn { display: inline-block; padding: 0.75rem 1.5rem; font-family: "Titillium Web", sans-serif; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; border-radius: 0.25rem; transition: all ease 0.25s; cursor: pointer; } .hp-btn-primary { background-color: #111; color: #fff; border: 2px solid #111; } .hp-btn-primary:hover { background-color: #3040ee; border-color: #3040ee; color: #fff; } .hp-btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.6); } .hp-btn-outline:hover { background: rgba(255, 255, 255, 0.15); border-color: #fff; color: #fff; } .hp-btn-light { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.5); } .hp-btn-light:hover { background: #fff; color: #111; border-color: #fff; } .hp-btn-subtle { background: none; color: #444; border: 2px solid #ddd; } .hp-btn-subtle:hover { color: #3040ee; border-color: #3040ee; } .hp-btn-youtube { background: #c00; color: #fff; border: 2px solid #c00; } .hp-btn-youtube:hover { background: #a00; border-color: #a00; color: #fff; } .hp-btn-youtube i { margin-right: 0.5rem; } /* ---------------------------------------- 2. HERO ---------------------------------------- */ .hp-hero { position: relative; min-height: 32rem; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; /* Replace with your hero image */ background: url('/content/images/homepage/hero-bg.jpg') center center / cover no-repeat; background-color: #111; /* fallback */ } .hp-hero-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.65) 100% ); } .hp-hero-content { position: relative; z-index: 2; max-width: 44rem; padding: 3rem 2rem; } .hp-hero-tagline { font-family: "Open Sans", sans-serif; font-size: 1rem; text-transform: uppercase; letter-spacing: 3px; color: rgba(255, 255, 255, 0.75); margin-bottom: 1rem; } .hp-hero-headline { font-family: "Titillium Web", sans-serif; font-size: 3.5rem; font-weight: 700; letter-spacing: -1px; line-height: 1.15; margin-bottom: 1.25rem; color: #fff; } .hp-hero-sub { font-size: 1.125rem; line-height: 1.7; color: rgba(255, 255, 255, 0.85); margin-bottom: 2rem; max-width: 36rem; margin-left: auto; margin-right: auto; } .hp-hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ---------------------------------------- 3. LATEST RELEASE ---------------------------------------- */ .hp-latest-release { background: #fff; } .hp-latest-release-inner { display: flex; gap: 3rem; align-items: flex-start; } .hp-latest-release-cover { flex: 0 0 auto; width: 16rem; } .hp-latest-release-cover img { width: 100%; height: auto; border-radius: 0.25rem; box-shadow: 0 4px 2rem rgba(0, 0, 0, 0.15); transition: transform 0.25s ease; } .hp-latest-release-cover a:hover img { transform: scale(1.02); } .hp-latest-release-info { flex: 1; min-width: 0; } .hp-latest-release-title { font-family: "Titillium Web", sans-serif; font-size: 2rem; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 0.25rem; color: #000; } .hp-latest-release-series { font-size: 0.875rem; color: #a2aab5; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 1.25rem; } .hp-latest-release-desc { font-size: 1.05rem; line-height: 1.8; color: #505050; margin-bottom: 1.5rem; } .hp-latest-release-cta { display: flex; gap: 1rem; flex-wrap: wrap; } /* ---------------------------------------- 4. SERIES SHOWCASE ---------------------------------------- */ .hp-series { background: #f8f9fa; padding-top: 4rem; padding-bottom: 4rem; } .hp-series-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; } .hp-series-card { background: #fff; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 0 4rem rgba(0, 0, 0, 0.075); transition: box-shadow 0.25s ease; } .hp-series-card:hover { box-shadow: 0 0 4rem rgba(0, 0, 0, 0.15); } .hp-series-card-img { display: block; overflow: hidden; height: 14rem; } .hp-series-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .hp-series-card:hover .hp-series-card-img img { transform: scale(1.03); } .hp-series-card-body { padding: 1.75rem; } .hp-series-card-body h3 { font-family: "Titillium Web", sans-serif; font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem; color: #000; } .hp-series-card-count { font-size: 0.8rem; color: #a2aab5; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 1rem; } .hp-series-card-body p { font-size: 0.95rem; line-height: 1.7; color: #505050; margin-bottom: 1rem; } .hp-series-link { font-family: "Titillium Web", sans-serif; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #3040ee; text-decoration: none; } .hp-series-link:hover { color: #111; } /* Secondary series (Assassin Tales, Standalone) */ .hp-series-secondary { display: flex; gap: 1.5rem; } .hp-series-pill { flex: 1; display: block; background: #fff; border-radius: 0.5rem; padding: 1.25rem 1.75rem; box-shadow: 0 0 4rem rgba(0, 0, 0, 0.075); text-decoration: none; transition: all 0.25s ease; } .hp-series-pill:hover { box-shadow: 0 0 4rem rgba(0, 0, 0, 0.15); color: #3040ee; } .hp-series-pill strong { display: block; font-family: "Titillium Web", sans-serif; font-size: 1.1rem; font-weight: 700; color: #000; margin-bottom: 0.25rem; } .hp-series-pill:hover strong { color: #3040ee; } .hp-series-pill span { font-size: 0.85rem; color: #888; } /* ---------------------------------------- 5. FREE FICTION ---------------------------------------- */ .hp-free-fiction { background: #f8f9fa; } .hp-free-fiction-inner { display: flex; gap: 3rem; align-items: center; } .hp-free-fiction-text { flex: 1; } .hp-free-fiction-text p { font-size: 1.05rem; line-height: 1.8; color: #505050; margin-bottom: 1.5rem; } .hp-free-fiction-img { flex: 0 0 auto; width: 22rem; } .hp-free-fiction-img img { width: 100%; height: auto; border-radius: 0.5rem; box-shadow: 0 4px 2rem rgba(0, 0, 0, 0.1); } /* ---------------------------------------- 6. NEWSLETTER ---------------------------------------- */ .hp-newsletter { background: #fff; } .hp-newsletter-inner { display: flex; gap: 3rem; align-items: flex-start; } .hp-newsletter-text { flex: 1; } .hp-newsletter-text p { font-size: 1.05rem; line-height: 1.8; color: #505050; } .hp-newsletter-form { flex: 0 0 auto; width: 22rem; } /* ---------------------------------------- 7. WORLD OF UHL ---------------------------------------- */ .hp-world { position: relative; padding: 5rem 2rem; text-align: center; color: #fff; overflow: hidden; /* Replace with your map image */ background: url('/content/images/homepage/uhl-map.jpg') center center / cover no-repeat; background-color: #1a1a2e; /* fallback */ } .hp-world-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(10, 10, 30, 0.75) 0%, rgba(10, 10, 30, 0.85) 100% ); } .hp-world-content { position: relative; z-index: 2; max-width: 48rem; margin: 0 auto; } .hp-world-desc { font-size: 1.125rem; line-height: 1.8; color: rgba(255, 255, 255, 0.85); margin-bottom: 2rem; max-width: 40rem; margin-left: auto; margin-right: auto; } .hp-world-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; } .hp-world-links a { display: inline-block; padding: 0.4rem 1rem; background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 2rem; font-size: 0.85rem; font-weight: 600; font-family: "Titillium Web", sans-serif; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; transition: all 0.2s ease; } .hp-world-links a:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.5); } /* ---------------------------------------- 8. BLOG PREVIEW ---------------------------------------- */ .hp-blog-preview { background: #fff; } .hp-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 2rem; } .hp-blog-card { background: #fff; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 0 4rem rgba(0, 0, 0, 0.075); transition: box-shadow 0.25s ease; } .hp-blog-card:hover { box-shadow: 0 0 4rem rgba(0, 0, 0, 0.15); } .hp-blog-card-img { display: block; overflow: hidden; height: 10rem; } .hp-blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .hp-blog-card:hover .hp-blog-card-img img { transform: scale(1.03); } .hp-blog-card-body { padding: 1.25rem; } .hp-blog-card-date { font-size: 0.75rem; text-transform: uppercase; color: #a2aab5; display: block; margin-bottom: 0.5rem; } .hp-blog-card-body h3 { font-family: "Titillium Web", sans-serif; font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; line-height: 1.35; } .hp-blog-card-body h3 a { color: #000; text-decoration: none; } .hp-blog-card-body h3 a:hover { color: #3040ee; } .hp-blog-card-body p { font-size: 0.85rem; line-height: 1.6; color: #666; margin-bottom: 0; } .hp-blog-more { text-align: center; } /* ---------------------------------------- 9. YOUTUBE ---------------------------------------- */ .hp-youtube { background: #fff; /*#f8f9fa;*/ } .hp-youtube-inner { display: flex; gap: 2.5rem; align-items: flex-start; } .hp-youtube-embed { flex: 0 0 auto; width: 28rem; } .hp-youtube-aspect { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; border-radius: 0.5rem; box-shadow: 0 4px 2rem rgba(0, 0, 0, 0.1); } .hp-youtube-aspect iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .hp-youtube-info { flex: 1; min-width: 0; } .hp-youtube-info h3 { font-family: "Titillium Web", sans-serif; font-size: 1.75rem; font-weight: 700; color: #000; margin-bottom: 0.25rem; } .hp-youtube-subtitle { font-size: 0.85rem; color: #a2aab5; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 1rem; } .hp-youtube-info p { font-size: 0.95rem; line-height: 1.7; color: #505050; margin-bottom: 1.25rem; } /* ---------------------------------------- 11. RESPONSIVE ---------------------------------------- */ @media screen and (max-width: 991px) { /* Hero */ .hp-hero { min-height: 24rem; } .hp-hero-headline { font-size: 2.25rem; } .hp-hero-sub { font-size: 1rem; } /* Latest Release */ .hp-latest-release-inner { flex-direction: column; align-items: center; text-align: center; } .hp-latest-release-cover { width: 12rem; } .hp-latest-release-cta { justify-content: center; } /* Series */ .hp-series-grid { grid-template-columns: 1fr; } .hp-series-secondary { flex-direction: column; } /* Free Fiction */ .hp-free-fiction-inner { flex-direction: column; } .hp-free-fiction-img { width: 100%; max-width: 22rem; } /* Newsletter */ .hp-newsletter-inner { flex-direction: column; } .hp-newsletter-form { width: 100%; } /* Blog */ .hp-blog-grid { grid-template-columns: 1fr; } /* YouTube */ .hp-youtube-inner { flex-direction: column; } .hp-youtube-embed { width: 100%; } } @media screen and (max-width: 575px) { .hp-section { padding: 3rem 1.25rem; } .hp-hero { min-height: 20rem; } .hp-hero-headline { font-size: 1.75rem; } .hp-hero-tagline { font-size: 0.8rem; letter-spacing: 2px; } .hp-hero-cta { flex-direction: column; align-items: center; } .hp-latest-release-title { font-size: 1.5rem; } .hp-world { padding: 3rem 1.25rem; } .hp-world-links { gap: 0.4rem; } .hp-world-links a { font-size: 0.75rem; padding: 0.35rem 0.75rem; } .hp-series-card-body h3 { font-size: 1.25rem; } }