/* ========================================================================== Blog Theme System — UI-0983 through UI-0989 Four themes: classic, modern, bold, minimal Applied via [data-theme="..."] on Mobile-First & iPhone Safe Areas Support ========================================================================== */ /* -------------------------------------------------------------------------- Theme: Classic Sidebar layout, white bg, bordered cards, 720px article max-width -------------------------------------------------------------------------- */ [data-theme="classic"] { --blog-article-max-width: 720px; --blog-bg: var(--color-white); --blog-card-border: 1px solid var(--border-default); --blog-card-shadow: var(--shadow-sm); --blog-card-radius: var(--radius-lg); --blog-sidebar-width: 300px; background-color: var(--color-white); } [data-theme="classic"] .blog-post-card { border: var(--blog-card-border); box-shadow: var(--blog-card-shadow); } [data-theme="classic"] .blog-article-body { max-width: var(--blog-article-max-width); } /* -------------------------------------------------------------------------- Theme: Modern Single-column, #F7F8FA bg, borderless shadow cards, 800px container -------------------------------------------------------------------------- */ [data-theme="modern"] { --blog-article-max-width: 800px; --blog-bg: #F7F8FA; --blog-card-border: none; --blog-card-shadow: var(--shadow-md); --blog-card-radius: var(--radius-xl); background-color: #F7F8FA; } [data-theme="modern"] .blog-post-card { border: none; box-shadow: var(--blog-card-shadow); } [data-theme="modern"] .blog-container { max-width: var(--container-md); } [data-theme="modern"] .blog-article-body { max-width: var(--blog-article-max-width); margin: 0 auto; } [data-theme="modern"] .blog-hero { background: linear-gradient(135deg, var(--color-midnight) 0%, var(--color-navy) 100%); border-radius: 0 0 var(--radius-xl) var(--radius-xl); margin-bottom: var(--space-8); } [data-theme="modern"] .blog-post-card:hover { box-shadow: var(--shadow-xl); } /* -------------------------------------------------------------------------- Theme: Bold Dark #0A2540 bg, white cards, 320px hero, accent-driven -------------------------------------------------------------------------- */ [data-theme="bold"] { --blog-article-max-width: 720px; --blog-bg: var(--color-midnight); --blog-card-border: none; --blog-card-shadow: 0 4px 20px rgba(0,0,0,0.3); --blog-card-radius: var(--radius-xl); background-color: var(--color-midnight); } [data-theme="bold"] .blog-post-card { border: none; background: rgba(255,255,255,0.05); backdrop-filter: blur(4px); } [data-theme="bold"] .blog-post-card__title { color: var(--text-primary, var(--color-white)); } [data-theme="bold"] .blog-post-card__excerpt { color: var(--text-secondary, var(--text-inverse-muted)); } [data-theme="bold"] .blog-post-card__date { color: var(--text-inverse-muted); } [data-theme="bold"] .blog-header { background-color: var(--color-navy); border-bottom-color: rgba(255,255,255,0.1); } [data-theme="bold"] .blog-header__logo-text, [data-theme="bold"] .blog-header__nav-link { color: var(--color-white); } [data-theme="bold"] .blog-header__nav-link:hover { color: var(--client-accent, var(--color-electric)); } [data-theme="bold"] .blog-hero { background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-midnight) 50%); min-height: 320px; } [data-theme="bold"] .blog-sidebar__widget { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); } [data-theme="bold"] .blog-sidebar__widget-title, [data-theme="bold"] .blog-sidebar__category-link, [data-theme="bold"] .blog-sidebar__recent-link { color: var(--color-white); } [data-theme="bold"] .blog-post-title, [data-theme="bold"] .blog-related-posts__heading { color: var(--color-white); } [data-theme="bold"] .blog-article-body, [data-theme="bold"] .blog-prose p, [data-theme="bold"] .blog-prose li { color: var(--text-primary, rgba(255,255,255,0.85)); } [data-theme="bold"] .blog-prose h2, [data-theme="bold"] .blog-prose h3, [data-theme="bold"] .blog-prose h4 { color: var(--text-primary, var(--color-white)); } [data-theme="bold"] .blog-breadcrumbs__item, [data-theme="bold"] .blog-breadcrumbs__link { color: rgba(255,255,255,0.6); } [data-theme="bold"] .blog-ai-disclosure { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); } [data-theme="bold"] .blog-toc { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); } [data-theme="bold"] .blog-post-meta { color: var(--text-inverse-muted); } [data-theme="bold"] .blog-post-category-badge { background: rgba(47, 128, 237, 0.2); color: var(--client-accent, var(--color-electric)); } /* Bold theme: prose elements */ [data-theme="bold"] .blog-prose > p:first-of-type { color: var(--text-secondary, rgba(255, 255, 255, 0.7)); } [data-theme="bold"] .blog-prose strong { color: var(--text-primary, var(--color-white)); } [data-theme="bold"] .blog-prose a { color: var(--client-accent, var(--color-electric)); } [data-theme="bold"] .blog-prose blockquote { background: rgba(255, 255, 255, 0.04); border-left-color: var(--client-accent, var(--color-electric)); } [data-theme="bold"] .blog-prose blockquote p { color: rgba(255, 255, 255, 0.75); } [data-theme="bold"] .blog-prose code { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); color: var(--client-accent, #F59E0B); } [data-theme="bold"] .blog-prose .toc { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); } [data-theme="bold"] .blog-prose .toc a { color: rgba(255, 255, 255, 0.6); } [data-theme="bold"] .blog-prose .toc a:hover { color: var(--client-accent, var(--color-electric)); } [data-theme="bold"] .blog-prose .toc > .toctitle { color: rgba(255, 255, 255, 0.5); } [data-theme="bold"] .blog-prose thead { background: rgba(255, 255, 255, 0.06); } [data-theme="bold"] .blog-prose th { color: rgba(255, 255, 255, 0.7); border-bottom-color: rgba(255, 255, 255, 0.15); } [data-theme="bold"] .blog-prose td { color: rgba(255, 255, 255, 0.85); border-bottom-color: rgba(255, 255, 255, 0.08); } [data-theme="bold"] .blog-prose hr { border-top-color: rgba(255, 255, 255, 0.1); } [data-theme="bold"] .blog-prose figcaption { color: rgba(255, 255, 255, 0.5); } /* -------------------------------------------------------------------------- Theme: Minimal White everywhere, no shadows/borders, 640px container -------------------------------------------------------------------------- */ [data-theme="minimal"] { --blog-article-max-width: 640px; --blog-bg: var(--color-white); --blog-card-border: none; --blog-card-shadow: none; --blog-card-radius: 0; background-color: var(--color-white); } [data-theme="minimal"] .blog-post-card { border: none; box-shadow: none; border-bottom: 1px solid var(--border-muted); border-radius: 0; } [data-theme="minimal"] .blog-post-card:hover { box-shadow: none; transform: none; } [data-theme="minimal"] .blog-container { max-width: 640px; } [data-theme="minimal"] .blog-article-body { max-width: 640px; margin: 0 auto; } [data-theme="minimal"] .blog-hero { background: var(--color-white); border-bottom: 1px solid var(--border-default); } [data-theme="minimal"] .blog-hero__title { color: var(--text-primary); } [data-theme="minimal"] .blog-hero__tagline { color: var(--text-secondary); } [data-theme="minimal"] .blog-footer { background: var(--color-white); border-top: 1px solid var(--border-default); } [data-theme="minimal"] .blog-footer__name, [data-theme="minimal"] .blog-footer__tagline, [data-theme="minimal"] .blog-footer__address, [data-theme="minimal"] .blog-footer__phone, [data-theme="minimal"] .blog-footer__nav-link, [data-theme="minimal"] .blog-footer__copyright, [data-theme="minimal"] .blog-footer__powered-by { color: var(--text-secondary); } [data-theme="minimal"] .blog-footer__nav-link:hover, [data-theme="minimal"] .blog-footer__phone:hover { color: var(--text-primary); } [data-theme="minimal"] .blog-footer__bottom { border-top-color: var(--border-default); } [data-theme="minimal"] .blog-toc { background: var(--color-white); border: none; border-top: 2px solid var(--border-default); border-radius: 0; } [data-theme="minimal"] .blog-sidebar__widget { background: var(--color-white); border: none; border-bottom: 1px solid var(--border-default); border-radius: 0; padding: var(--space-6) 0; } [data-theme="minimal"] .blog-post-featured-image { border-radius: 0; } [data-theme="minimal"] .blog-header { box-shadow: none; border-bottom-width: 1px; } /* ========================================================================== MOBILE-FIRST RESPONSIVE DESIGN — All Themes Optimized for iPhone/mobile with safe areas, touch targets, and legibility ========================================================================== */ /* -------------------------------------------------------------------------- iPhone Safe Area Support — Notch/Dynamic Island -------------------------------------------------------------------------- */ body { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } .blog-header { padding-top: calc(env(safe-area-inset-top) + var(--space-2, 8px)); } .blog-cta-bar { padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-2, 8px)); } /* -------------------------------------------------------------------------- Mobile Typography (iOS zoom prevention + legibility) -------------------------------------------------------------------------- */ @media (max-width: 768px) { /* Base font sizes - minimum 16px to prevent iOS zoom */ body, .blog-prose p, .blog-prose li, .blog-article-body { font-size: 16px !important; line-height: 1.6; } /* Scale headings appropriately for mobile */ .blog-prose h1, .blog-post-title { font-size: 28px !important; line-height: 1.2; margin-bottom: 16px; } .blog-prose h2 { font-size: 24px !important; line-height: 1.3; margin-top: 32px; margin-bottom: 16px; } .blog-prose h3 { font-size: 20px !important; line-height: 1.3; margin-top: 28px; margin-bottom: 12px; } .blog-prose h4, .blog-prose h5, .blog-prose h6 { font-size: 18px !important; line-height: 1.4; margin-top: 24px; margin-bottom: 8px; } /* Form inputs minimum 16px (iOS zoom prevention) */ input, textarea, select { font-size: 16px !important; } } /* -------------------------------------------------------------------------- Mobile Touch Targets — Minimum 44x44px -------------------------------------------------------------------------- */ @media (max-width: 768px) { /* Navigation links */ .blog-header__nav-link, .blog-mobile-menu__link, .blog-footer__nav-link { min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; padding: 8px 16px; } /* Buttons */ .btn, .blog-header__cta, .blog-cta-bar__btn { min-height: 44px; min-width: 44px; font-size: 16px; padding: 12px 24px; } /* CTA Bar buttons full width for easy tapping */ .blog-cta-bar__btn { flex: 1; padding: 16px 8px; } /* Phone links */ .blog-header__phone, .blog-footer__phone { min-height: 44px; min-width: 44px; display: flex; align-items: center; gap: 8px; padding: 8px; } } /* -------------------------------------------------------------------------- Mobile Layout & Spacing — 16px side padding, efficient use of screen -------------------------------------------------------------------------- */ @media (max-width: 768px) { /* Container spacing */ .blog-container, .blog-header__inner { padding-left: 16px; padding-right: 16px; } /* Article max-width adjustments for mobile */ [data-theme="classic"] .blog-article-body, [data-theme="modern"] .blog-article-body, [data-theme="bold"] .blog-article-body, [data-theme="minimal"] .blog-article-body { max-width: 100%; margin: 0; padding: 0 16px; } /* Content spacing */ .blog-post-content, .blog-article-body { padding: 16px; margin-bottom: 24px; } /* Reduce excessive padding */ .blog-hero { padding: 40px 16px 32px; min-height: 200px; /* Smaller hero on mobile */ } .blog-footer { padding: 32px 16px 24px; } .blog-post-card { margin-bottom: 16px; padding: 16px; } } /* -------------------------------------------------------------------------- Mobile Navigation — Hamburger & slide-down menu -------------------------------------------------------------------------- */ @media (max-width: 1023px) { /* Hide desktop nav */ .blog-header__nav { display: none; } /* Show hamburger */ .blog-header__hamburger { display: flex; min-height: 44px; min-width: 44px; border: none; background: none; color: var(--text-primary); cursor: pointer; } /* Mobile menu */ .blog-mobile-menu { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-white); border-bottom: 1px solid var(--border-default); box-shadow: var(--shadow-md); z-index: 50; } .blog-mobile-menu__list { padding: 16px; margin: 0; list-style: none; } .blog-mobile-menu__list li { margin-bottom: 8px; } .blog-mobile-menu__link { display: block; padding: 12px 16px; font-size: 16px; color: var(--text-primary); text-decoration: none; border-radius: 8px; } .blog-mobile-menu__link:hover, .blog-mobile-menu__link--accent { background-color: var(--client-accent, var(--color-electric)); color: white; } } /* -------------------------------------------------------------------------- Mobile Forms — Full-width, easy to fill -------------------------------------------------------------------------- */ @media (max-width: 768px) { /* Form containers */ .blog-lead-form, .lead-form { padding: 24px 16px; } /* Input fields full-width with proper spacing */ .blog-lead-form input, .blog-lead-form textarea, .lead-form input, .lead-form textarea { width: 100%; font-size: 16px; padding: 16px; margin-bottom: 16px; border-radius: 8px; box-sizing: border-box; } /* Submit buttons full-width */ .blog-lead-form .btn, .lead-form .btn { width: 100%; padding: 16px; font-size: 16px; margin-top: 8px; } } /* -------------------------------------------------------------------------- Mobile Images — Responsive, no overflow -------------------------------------------------------------------------- */ @media (max-width: 768px) { /* All images responsive */ .blog-prose img, .blog-post-content img, img { max-width: 100% !important; height: auto !important; display: block; margin: 16px auto; border-radius: 8px; } /* Featured images */ .blog-post-featured-image, .blog-hero img { width: 100%; max-width: 100%; height: auto; } } /* -------------------------------------------------------------------------- Mobile Tables — Horizontal scroll wrapper -------------------------------------------------------------------------- */ @media (max-width: 768px) { /* Wrap tables in scroll container */ .blog-prose table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; border-collapse: collapse; } /* Alternative: Create wrapper for tables */ .table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .table-wrapper table { min-width: 600px; /* Force minimum width */ } } /* -------------------------------------------------------------------------- Mobile Code Blocks — Wrap or scroll, no overflow -------------------------------------------------------------------------- */ @media (max-width: 768px) { .blog-prose pre, .blog-prose code, pre, code { overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; max-width: 100%; font-size: 14px; border-radius: 8px; } .blog-prose pre { padding: 16px; margin: 16px 0; border-radius: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Inline code */ .blog-prose code:not(pre code) { word-break: break-word; white-space: normal; } } /* -------------------------------------------------------------------------- Mobile Footer — Stack vertically -------------------------------------------------------------------------- */ @media (max-width: 768px) { .blog-footer__inner { flex-direction: column; gap: 24px; text-align: center; } .blog-footer__brand { order: 1; } .blog-footer__nav { order: 2; } .blog-footer__nav-list { flex-direction: column; gap: 16px; } .blog-footer__bottom { flex-direction: column; gap: 12px; text-align: center; padding-top: 16px; } } /* -------------------------------------------------------------------------- Smooth Scroll with prefers-reduced-motion support -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Smooth scroll for anchor links */ a[href^="#"]:not([href="#"]) { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { a[href^="#"]:not([href="#"]) { scroll-behavior: auto; } } /* -------------------------------------------------------------------------- Theme-Specific Mobile Adjustments -------------------------------------------------------------------------- */ /* Classic Theme Mobile */ @media (max-width: 768px) { [data-theme="classic"] .blog-sidebar { display: none; /* Hide sidebar on mobile */ } [data-theme="classic"] .blog-main-content { width: 100%; max-width: 100%; } } /* Modern Theme Mobile */ @media (max-width: 768px) { [data-theme="modern"] { background-color: var(--color-white); /* Simpler background on mobile */ } [data-theme="modern"] .blog-hero { border-radius: 0; /* Remove hero border radius on mobile */ margin-bottom: 24px; } } /* Bold Theme Mobile */ @media (max-width: 768px) { [data-theme="bold"] .blog-post-card, [data-theme="bold"] .blog-prose, [data-theme="bold"] .blog-article-body { background: rgba(255,255,255,0.03); backdrop-filter: blur(2px); } [data-theme="bold"] .blog-mobile-menu { background: var(--color-navy); border-bottom-color: rgba(255,255,255,0.1); } [data-theme="bold"] .blog-mobile-menu__link { color: var(--color-white); } } /* Minimal Theme Mobile */ @media (max-width: 768px) { [data-theme="minimal"] .blog-post-card { border-left: none; border-right: none; border-radius: 0; margin-bottom: 0; border-bottom: 1px solid var(--border-muted); padding-bottom: 24px; padding-top: 24px; } } /* -------------------------------------------------------------------------- Small Mobile Devices (iPhone SE/Mini) — 375px and below -------------------------------------------------------------------------- */ @media (max-width: 375px) { /* Even tighter spacing for very small screens */ .blog-container, .blog-header__inner, .blog-article-body { padding-left: 12px; padding-right: 12px; } /* Smaller fonts for very small screens */ .blog-prose h1, .blog-post-title { font-size: 24px !important; } .blog-prose h2 { font-size: 20px !important; } .blog-prose h3 { font-size: 18px !important; } /* Stack CTA bar buttons vertically on very small screens */ .blog-cta-bar { flex-direction: column; gap: 8px; padding: 12px; } .blog-cta-bar__btn { width: 100%; } /* Compact header on small screens */ .blog-header__inner { gap: 8px; } .blog-header__logo-text { font-size: 16px; } }