/*
IMPORTANT: Add this meta tag to your HTML for proper mobile display:
*/
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden; /* Prevent horizontal scroll */
}
/* Mobile-Friendly Images */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Mobile-Friendly Forms */
input,
textarea,
select {
font-size: 16px; /* Prevents auto-zoom on iOS */
max-width: 100%;
}
/* Improve touch targets for all links */
a {
-webkit-tap-highlight-color: rgba(74, 144, 226, 0.3);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
width: 100%; /* Ensure container respects viewport width */
}
/* Navigation */
.navbar {
background-color: #1a1a2e;
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Mobile Menu Toggle */
.menu-toggle {
display: none;
background: none;
border: none;
color: #fff;
font-size: 1.5rem;
cursor: pointer;
padding: 0.5rem;
margin: 0;
-webkit-tap-highlight-color: transparent;
}
.menu-toggle:focus {
outline: 2px solid #4a90e2;
outline-offset: 2px;
}
.logo h1 {
color: #4a90e2;
font-size: 1.8rem;
font-weight: 700;
}
.logo .tagline {
color: #b0b0b0;
font-size: 0.9rem;
margin-top: 0.25rem;
}
.nav-menu {
display: flex;
list-style: none;
gap: 2rem;
align-items: center;
}
.nav-menu a {
color: #fff;
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
}
.nav-menu a:hover {
color: #4a90e2;
}
/* Buttons */
.btn-primary {
background-color: #4a90e2;
color: #fff;
padding: 0.75rem 1.5rem; /* Increased for better touch target */
border-radius: 5px;
text-decoration: none;
font-weight: 600;
transition: background-color 0.3s;
display: inline-block;
min-height: 44px; /* iOS touch target minimum */
line-height: 1.5;
-webkit-tap-highlight-color: transparent;
}
.btn-primary:hover {
background-color: #357abd;
}
.btn-large {
background-color: #4a90e2;
color: #fff;
padding: 1rem 2.5rem;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
transition: background-color 0.3s, transform 0.2s;
display: inline-block;
min-height: 48px; /* Larger touch target for primary CTA */
line-height: 1.5;
-webkit-tap-highlight-color: transparent;
}
.btn-large:hover {
background-color: #357abd;
transform: translateY(-2px);
}
.btn-secondary-large {
background-color: transparent;
color: #4a90e2;
padding: 1rem 2.5rem;
border: 2px solid #4a90e2;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s;
display: inline-block;
min-height: 48px;
line-height: 1.5;
-webkit-tap-highlight-color: transparent;
}
.btn-secondary-large:hover {
background-color: #4a90e2;
color: #fff;
transform: translateY(-2px);
}
.btn-small {
background-color: #4a90e2;
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
transition: background-color 0.3s;
display: inline-block;
min-height: 44px;
line-height: 1.5;
-webkit-tap-highlight-color: transparent;
}
.btn-small:hover {
background-color: #357abd;
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
color: #fff;
padding: 5rem 0;
text-align: center;
}
.hero-content h2 {
font-size: 3rem;
margin-bottom: 1rem;
font-weight: 700;
}
.hero-subtitle {
font-size: 1.3rem;
margin-bottom: 2.5rem;
color: #e0e0e0;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.hero-cta {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
}
/* Section Styling */
section {
padding: 4rem 0;
}
.section-title {
font-size: 2.5rem;
text-align: center;
margin-bottom: 1rem;
color: #1a1a2e;
font-weight: 700;
}
.section-intro {
text-align: center;
font-size: 1.2rem;
color: #666;
max-width: 800px;
margin: 0 auto 3rem;
}
/* Testimonials */
.testimonials {
background-color: #f8f9fa;
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.testimonial-card {
background: #fff;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0,0,0,0.15);
}
.quote {
font-style: italic;
line-height: 1.8;
margin-bottom: 1.5rem;
color: #444;
}
.author {
font-weight: 600;
color: #4a90e2;
}
/* Featured Series */
.featured-series {
background-color: #fff;
}
.books-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.book-card {
background: #f8f9fa;
padding: 2rem;
border-radius: 10px;
border-left: 4px solid #4a90e2;
transition: transform 0.3s, box-shadow 0.3s;
}
.book-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(74, 144, 226, 0.2);
}
.book-number {
background-color: #4a90e2;
color: #fff;
display: inline-block;
padding: 0.4rem 1rem;
border-radius: 20px;
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 1rem;
}
.book-card h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: #1a1a2e;
}
.book-card p {
color: #666;
margin-bottom: 1.5rem;
line-height: 1.7;
}
/* CTA Section */
.cta-section {
background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
color: #fff;
text-align: center;
padding: 4rem 0;
}
.cta-section h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.cta-section p {
font-size: 1.2rem;
margin-bottom: 2rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
/* Why Choose Section */
.why-choose {
background-color: #f8f9fa;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.feature {
background: #fff;
padding: 2rem;
border-radius: 10px;
text-align: center;
transition: transform 0.3s;
}
.feature:hover {
transform: translateY(-5px);
}
.feature h3 {
font-size: 1.3rem;
margin-bottom: 1rem;
color: #1a1a2e;
}
.feature p {
color: #666;
line-height: 1.7;
}
/* Daily Insights Blog Section */
.daily-insights {
background-color: #fff;
padding: 4rem 0;
}
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.blog-post {
background: #f8f9fa;
padding: 2rem;
border-radius: 10px;
border-left: 4px solid #4a90e2;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
}
.blog-post:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(74, 144, 226, 0.2);
}
.featured-post {
grid-column: span 2;
background: linear-gradient(135deg, #f8f9fa 0%, #e8eef3 100%);
border-left: 6px solid #4a90e2;
}
.post-badge {
background-color: #4a90e2;
color: #fff;
display: inline-block;
padding: 0.4rem 1rem;
border-radius: 20px;
font-weight: 600;
font-size: 0.85rem;
margin-bottom: 1rem;
}
.post-meta {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.post-date {
color: #666;
font-size: 0.9rem;
}
.post-category {
background-color: #e8eef3;
color: #4a90e2;
padding: 0.2rem 0.8rem;
border-radius: 15px;
font-size: 0.85rem;
font-weight: 600;
}
.post-title {
font-size: 1.4rem;
color: #1a1a2e;
margin-bottom: 1rem;
line-height: 1.4;
}
.featured-post .post-title {
font-size: 1.6rem;
}
.post-excerpt {
color: #444;
line-height: 1.7;
margin-bottom: 1.5rem;
}
.read-more {
color: #4a90e2;
font-weight: 600;
text-decoration: none;
transition: color 0.3s;
display: inline-block;
}
.read-more:hover {
color: #357abd;
}
/* Newsletter Signup Section */
.newsletter-signup {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
color: #fff;
padding: 4rem 0;
}
.newsletter-signup input[type="email"] {
border: 2px solid transparent;
transition: border-color 0.3s;
}
.newsletter-signup input[type="email"]:focus {
outline: none;
border-color: #4a90e2;
}
.newsletter-signup .btn-large {
margin: 0;
}
/* Book Hero Layout - Book Detail Pages */
.book-hero-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
.book-cover-column {
text-align: center;
}
.book-info-column {
/* Info column styles */
}
/* Blog Layout - Simple 2 Column with Frame */
.blog-layout-simple {
display: grid;
grid-template-columns: 70% 30%;
gap: 2rem;
align-items: start;
}
/* Blog Post Frame - Like LogicLink Solutions */
.blog-post-frame {
background: #fff;
border: 3px solid #4a90e2;
border-radius: 15px;
padding: 3rem;
box-shadow: 0 4px 15px rgba(74, 144, 226, 0.15);
}
.blog-frame-title {
font-size: 2rem;
color: #1a1a2e;
margin-bottom: 1.5rem;
line-height: 1.3;
}
.blog-meta {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
padding-bottom: 1.5rem;
margin-bottom: 1.5rem;
border-bottom: 2px solid #f0f0f0;
font-size: 0.9rem;
color: #666;
}
.blog-subtitle {
font-size: 1.4rem;
color: #4a90e2;
margin-bottom: 1.5rem;
font-weight: 600;
}
.blog-body p {
line-height: 1.8;
margin-bottom: 1.5rem;
color: #333;
font-size: 1.05rem;
}
.blog-body h3 {
color: #1a1a2e;
font-size: 1.3rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.blog-body strong {
color: #1a1a2e;
}
/* Sidebar Simple Style */
.sidebar-simple {
position: sticky;
top: 2rem;
}
.sidebar-box {
background: #fff;
border: 2px solid #e0e0e0;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 2rem;
}
.sidebar-box h3 {
color: #1a1a2e;
font-size: 1.1rem;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid #4a90e2;
}
.recent-posts-simple {
list-style: none;
padding: 0;
}
.recent-posts-simple li {
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #f0f0f0;
}
.recent-posts-simple li:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.recent-posts-simple a {
color: #333;
text-decoration: none;
font-size: 0.95rem;
line-height: 1.5;
transition: color 0.3s;
}
.recent-posts-simple a:hover {
color: #4a90e2;
}
.archive-list,
.category-list {
list-style: none;
padding: 0;
}
.archive-list li,
.category-list li {
margin-bottom: 0.75rem;
}
.archive-list a,
.category-list a {
color: #666;
text-decoration: none;
font-size: 0.95rem;
transition: color 0.3s;
}
.archive-list a:hover,
.category-list a:hover {
color: #4a90e2;
}
/* Footer */
footer {
background-color: #1a1a2e;
color: #fff;
padding: 3rem 0 1rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-col h4 {
color: #4a90e2;
margin-bottom: 1rem;
font-size: 1.2rem;
}
.footer-col p,
.footer-col ul li {
color: #b0b0b0;
margin-bottom: 0.5rem;
}
.footer-col ul {
list-style: none;
}
.footer-col a {
color: #b0b0b0;
text-decoration: none;
transition: color 0.3s;
}
.footer-col a:hover {
color: #4a90e2;
}
.footer-bottom {
border-top: 1px solid #333;
padding-top: 1.5rem;
text-align: center;
color: #888;
}
/* Responsive Design */
/* Tablet Landscape and Below (1024px) */
@media (max-width: 1024px) {
.container {
padding: 0 15px;
}
.hero-content h2 {
font-size: 2.5rem;
}
.section-title {
font-size: 2.2rem;
}
.books-grid,
.testimonial-grid,
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.blog-grid {
grid-template-columns: repeat(2, 1fr);
}
.featured-post {
grid-column: span 2;
}
}
/* Tablet Portrait (768px) */
@media (max-width: 768px) {
/* Books Page - Mobile Optimization */
/* Override inline grid styles for book sections */
section[id^="book"] > .container > div[style*="grid-template-columns"] {
display: block !important;
grid-template-columns: 1fr !important;
}
section[id^="book"] > .container > div[style*="grid-template-columns"] > div:first-child {
margin-bottom: 2rem;
padding: 1.5rem !important;
}
section[id^="book"] img {
max-width: 250px !important;
margin: 0 auto 1rem !important;
}
/* Stack buttons vertically on books page */
section[id^="book"] .btn-primary,
section[id^="book"] .btn-small {
display: block !important;
margin: 0.5rem auto !important;
width: 100%;
max-width: 280px;
}
/* Adjust section padding for books page */
section[id^="book"] {
padding: 2rem 0 !important;
}
/* Better list spacing on books page */
section[id^="book"] ul {
padding-left: 1.5rem !important;
}
section[id^="book"] ul li {
margin-bottom: 0.75rem;
}
/* Series overview section mobile */
section div[style*="max-width: 900px"] {
padding: 0 1rem;
}
section div[style*="max-width: 900px"] h2 {
font-size: 1.5rem !important;
}
section div[style*="max-width: 900px"] p {
font-size: 1rem !important;
}
/* Bundle pricing box mobile */
div[style*="background: linear-gradient"] {
padding: 1.5rem 1rem !important;
font-size: 0.95rem !important;
}
/* Mobile Menu Toggle */
.menu-toggle {
display: block;
order: 2;
}
.navbar .container {
flex-wrap: wrap;
padding: 0.5rem 15px;
}
.logo {
order: 1;
flex: 1;
}
.nav-menu {
order: 3;
flex-basis: 100%;
flex-direction: column;
gap: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
background-color: #16213e;
margin: 0 -15px;
padding: 0;
}
/* When menu is active (add .active class via JavaScript) */
.nav-menu.active {
max-height: 400px;
padding: 1rem 0;
}
.nav-menu li {
width: 100%;
text-align: center;
padding: 0.75rem 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nav-menu li:last-child {
border-bottom: none;
}
.nav-menu a {
display: block;
padding: 0.5rem 1rem;
min-height: 44px; /* Touch target */
line-height: 2;
}
/* Hero Section */
.hero {
padding: 3rem 0;
}
.hero-content h2 {
font-size: 2rem;
line-height: 1.2;
}
.hero-subtitle {
font-size: 1.1rem;
padding: 0 10px;
}
.hero-cta {
flex-direction: column;
align-items: center;
padding: 0 15px;
}
.hero-cta .btn-large,
.hero-cta .btn-secondary-large {
width: 100%;
max-width: 300px;
}
/* Section Spacing */
section {
padding: 3rem 0;
}
/* Book Hero Layout - Mobile */
.book-hero-layout {
grid-template-columns: 1fr !important;
gap: 2rem !important;
}
.book-cover-column {
order: 1;
}
.book-info-column {
order: 2;
}
.section-title {
font-size: 1.8rem;
padding: 0 10px;
}
.section-intro {
font-size: 1.05rem;
padding: 0 10px;
}
/* Grids - Single Column */
.books-grid,
.testimonial-grid,
.features-grid,
.blog-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.featured-post {
grid-column: span 1;
}
/* Cards - Better Mobile Spacing */
.book-card,
.testimonial-card,
.feature,
.blog-post {
padding: 1.5rem;
}
.post-title {
font-size: 1.2rem;
}
.featured-post .post-title {
font-size: 1.4rem;
}
/* Blog Frame Layout Mobile */
.blog-layout-simple {
grid-template-columns: 1fr;
gap: 2rem;
}
.blog-post-frame {
padding: 1.5rem;
border-width: 2px;
}
.blog-frame-title {
font-size: 1.5rem;
line-height: 1.3;
}
.blog-subtitle {
font-size: 1.2rem;
}
.blog-body p {
font-size: 1rem;
}
.blog-meta {
flex-direction: column;
gap: 0.5rem;
}
.sidebar-simple {
position: static;
order: 2;
}
/* CTA Section */
.cta-section h2 {
font-size: 2rem;
padding: 0 10px;
}
.cta-section p {
font-size: 1.05rem;
padding: 0 10px;
}
/* Newsletter Signup */
.newsletter-signup form {
flex-direction: column;
gap: 1rem;
}
.newsletter-signup input[type="email"] {
min-width: 100%;
max-width: 100%;
font-size: 16px; /* Prevents zoom on iOS */
}
.newsletter-signup .btn-large {
width: 100%;
}
/* Footer */
.footer-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.footer-col {
text-align: center;
}
}
/* Small Mobile (480px) */
@media (max-width: 480px) {
.container {
padding: 0 10px;
}
.logo h1 {
font-size: 1.5rem;
}
.logo .tagline {
font-size: 0.8rem;
}
.hero-content h2 {
font-size: 1.6rem;
}
.hero-subtitle {
font-size: 1rem;
}
.section-title {
font-size: 1.5rem;
}
.section-intro {
font-size: 0.95rem;
}
.book-card h3,
.feature h3 {
font-size: 1.2rem;
}
.blog-frame-title {
font-size: 1.3rem;
}
.blog-post-frame {
padding: 1rem;
}
.cta-section h2 {
font-size: 1.6rem;
}
.cta-section p {
font-size: 1rem;
}
/* Make buttons full width on very small screens */
.btn-large,
.btn-secondary-large {
width: 100%;
text-align: center;
}
}
/* Extra Small Mobile (320px) */
@media (max-width: 375px) {
.hero-content h2 {
font-size: 1.4rem;
}
.section-title {
font-size: 1.3rem;
}
.book-card,
.testimonial-card,
.feature,
.blog-post,
.blog-post-frame {
padding: 1rem;
}
}