/* Theme Name: VitalNadi Theme URI: https://vitalnadi.com Author: SRScripts Author URI: https://vitalnadi.com Description: VitalNadi WordPress theme v2.0 — privacy-first family health & insurance companion. Phase 2 complete content architecture: 8 mandatory legal pages, 7 SEO content hub categories, dynamic feature registry (single source of truth for website + Android app), Elementor-compatible (Full Width + Canvas templates), built-in SEO (OG, Schema.org, breadcrumbs), 5 AdSense slot placements, enhanced blog (author box, reading time, related posts, social share), and auto-creation of all pages on activation. Version: 2.0.0 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: vitalnadi Tags: blog, news, two-columns, right-sidebar, custom-logo, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready */ /* ================================================================= VitalNadi Theme — Main Stylesheet Vanilla CSS that mirrors the Next.js Tailwind design. Design tokens are exposed as CSS variables so the Customizer can override them at runtime. ================================================================= */ /* ---------- 1. Design Tokens ---------- */ :root { /* Brand colors (Customizer-overridable via inline style on ) */ --vn-primary: #0d9488; /* teal-600 */ --vn-primary-dark: #0f766e; /* teal-700 */ --vn-accent: #059669; /* emerald-600 */ --vn-accent-dark: #047857; /* emerald-700 */ /* Surfaces */ --vn-bg: #ffffff; --vn-bg-muted: #f9fafb; /* gray-50 */ --vn-bg-card: #ffffff; --vn-border: #f3f4f6; /* gray-100 */ /* Text */ --vn-text: #1a1a1a; --vn-text-muted: rgba(26, 26, 26, 0.6); --vn-text-faint: rgba(26, 26, 26, 0.4); /* Status */ --vn-red: #dc2626; --vn-amber: #d97706; --vn-blue: #2563eb; --vn-purple: #9333ea; --vn-green: #16a34a; --vn-indigo: #4f46e5; /* Layout — Unified Design System */ --vn-container: 1280px; /* Outer container max-width */ --vn-content: 1140px; /* Standard content width */ --vn-content-narrow: 896px; /* Reading/narrow content width */ --vn-max-width: var(--vn-content); /* Back-compat alias */ /* Section spacing */ --vn-section-y: 80px; /* Desktop vertical section padding */ --vn-section-y-mobile: 48px; /* Mobile vertical section padding */ --vn-section-gap: 80px; /* Gap between stacked sections */ --vn-component-gap: 32px; /* Gap between components inside a section */ /* Card spacing */ --vn-card-gap: 24px; --vn-card-padding: 24px; --vn-card-padding-lg: 32px; /* Border radius system */ --vn-radius: 8px; --vn-radius-md: 12px; --vn-radius-lg: 16px; --vn-radius-xl: 24px; --vn-radius-2xl: 32px; --vn-radius-full: 9999px; /* Nav height */ --vn-nav-height: 64px; /* Typography scale (1.250 - Major Third) */ --vn-text-xs: 0.75rem; /* 12px */ --vn-text-sm: 0.875rem; /* 14px */ --vn-text-base: 1rem; /* 16px */ --vn-text-lg: 1.125rem; /* 18px */ --vn-text-xl: 1.25rem; /* 20px */ --vn-text-2xl: 1.5rem; /* 24px */ --vn-text-3xl: 1.875rem; /* 30px */ --vn-text-4xl: 2.25rem; /* 36px */ --vn-text-5xl: 3rem; /* 48px */ --vn-text-6xl: 3.75rem; /* 60px */ /* Fonts */ --vn-font-body: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --vn-font-mono: 'Geist Mono', 'SF Mono', Menlo, monospace; } /* Dark mode tokens */ html.dark { --vn-bg: #030712; /* gray-950 */ --vn-bg-muted: #111827; /* gray-900 */ --vn-bg-card: #1f2937; /* gray-800 */ --vn-border: #1f2937; /* gray-800 */ --vn-text: #f3f4f6; /* gray-100 */ --vn-text-muted: #9ca3af; /* gray-400 */ --vn-text-faint: #6b7280; /* gray-500 */ } /* ---------- 2. Reset & Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--vn-font-body); background: var(--vn-bg); color: var(--vn-text); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.3s ease, color 0.3s ease; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--vn-primary); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--vn-primary-dark); } h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; color: var(--vn-text); margin: 0 0 0.5em; } h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; } h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); } h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); } p { margin: 0 0 1em; } .container { max-width: var(--vn-container); margin: 0 auto; padding: 0 1.25rem; } @media (min-width: 768px) { .container { padding: 0 2rem; } } .text-center { text-align: center; } .text-left { text-align: left; } /* ---------- 3. Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1.25rem; border-radius: var(--vn-radius-lg); font-weight: 700; font-size: 0.875rem; border: none; cursor: pointer; transition: all 0.3s ease; text-decoration: none; line-height: 1.4; } .btn-primary { background: linear-gradient(to right, var(--vn-primary), var(--vn-accent)); color: #fff; box-shadow: 0 10px 15px -3px rgba(13, 148, 136, 0.2); } .btn-primary:hover { background: linear-gradient(to right, var(--vn-primary-dark), var(--vn-accent-dark)); color: #fff; box-shadow: 0 20px 25px -5px rgba(13, 148, 136, 0.3); transform: translateY(-1px); } .btn-outline { background: transparent; color: var(--vn-primary); border: 2px solid var(--vn-primary); } .btn-outline:hover { background: rgba(13, 148, 136, 0.1); } .btn-white { background: #fff; color: var(--vn-primary); } .btn-white:hover { background: #f0fdfa; color: var(--vn-primary-dark); } .btn-lg { padding: 1rem 2rem; font-size: 1.125rem; border-radius: var(--vn-radius-xl); } /* ---------- 4. Navbar ---------- */ .site-nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(16px); border-bottom: 1px solid var(--vn-border); } html.dark .site-nav { background: rgba(3, 7, 18, 0.9); } .site-nav .nav-inner { max-width: var(--vn-container); margin: 0 auto; padding: 0.75rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } @media (min-width: 768px) { .site-nav .nav-inner { padding: 0.75rem 2rem; } } .site-nav .nav-logo img { height: 32px; width: auto; object-fit: contain; } .site-nav .nav-logo img.dark-logo { display: none; } html.dark .site-nav .nav-logo img.light-logo { display: none; } html.dark .site-nav .nav-logo img.dark-logo { display: block; } .site-nav .nav-links { display: none; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; } .site-nav .nav-links li { margin: 0; } @media (min-width: 768px) { .site-nav .nav-links { display: flex; } } .site-nav .nav-links a { display: inline-flex; align-items: center; font-size: 0.9375rem; font-weight: 600; color: var(--vn-text-muted); padding: 0.5rem 0.875rem; border-radius: var(--vn-radius-md); transition: color 0.2s ease, background 0.2s ease; } .site-nav .nav-links a:hover, .site-nav .nav-links a:focus, .site-nav .nav-links .current-menu-item > a { color: var(--vn-primary); background: rgba(13, 148, 136, 0.08); } .theme-toggle { width: 36px; height: 36px; border-radius: var(--vn-radius); border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--vn-text-faint); transition: background 0.2s; } .theme-toggle:hover { background: var(--vn-bg-muted); } html.dark .theme-toggle .icon-sun { display: block; color: #eab308; } html.dark .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } .mobile-menu-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--vn-radius); border: none; background: transparent; cursor: pointer; color: var(--vn-text); } @media (min-width: 768px) { .mobile-menu-btn { display: none; } } .mobile-menu { display: none; border-top: 1px solid var(--vn-border); background: var(--vn-bg); padding: 0.75rem 1.25rem 1.5rem; } @media (min-width: 768px) { .mobile-menu { padding: 0.75rem 2rem 1.5rem; } } .mobile-menu.open { display: block; } .mobile-menu .mobile-menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; } .mobile-menu .mobile-menu-list a { display: block; padding: 0.75rem 0.875rem; font-size: 1rem; font-weight: 600; color: var(--vn-text); border-radius: var(--vn-radius-md); transition: background 0.15s ease, color 0.15s ease; } .mobile-menu .mobile-menu-list a:hover { background: var(--vn-bg-muted); color: var(--vn-primary); } .mobile-menu .mobile-menu-list .btn { display: inline-flex; margin-top: 0.5rem; } /* Nav CTA row (theme toggle + Download App + mobile menu btn) */ .site-nav .nav-cta-row { display: flex !important; align-items: center; gap: 0.375rem; } .site-nav .nav-cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem !important; font-size: 0.8125rem !important; font-weight: 700 !important; } .site-nav .nav-cta img { display: inline-block; width: 20px; height: 20px; border-radius: 6px; } .site-nav .nav-cta:hover { transform: translateY(-1px); color: #fff; } /* ---------- 5. Hero ---------- */ .hero { position: relative; overflow: hidden; background: linear-gradient(to bottom right, #f0fdfa, #fff, rgba(240, 253, 250, 0.3)); } html.dark .hero { background: linear-gradient(to bottom right, #030712, #030712, rgba(15, 118, 110, 0.1)); } .hero-blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .hero-blob { position: absolute; border-radius: 50%; filter: blur(60px); } .hero-blob-1 { top: -80px; left: -80px; width: 500px; height: 500px; background: rgba(45, 212, 191, 0.4); } html.dark .hero-blob-1 { background: rgba(15, 118, 110, 0.2); } .hero-blob-2 { top: 40px; right: -128px; width: 600px; height: 600px; background: rgba(167, 243, 208, 0.3); } html.dark .hero-blob-2 { background: rgba(6, 95, 70, 0.15); } .hero-blob-3 { bottom: -80px; left: 33%; width: 450px; height: 450px; background: rgba(165, 243, 252, 0.3); } html.dark .hero-blob-3 { background: rgba(8, 145, 178, 0.15); } .hero-inner { position: relative; max-width: var(--vn-container); margin: 0 auto; padding: 3.5rem 1.25rem; } @media (min-width: 768px) { .hero-inner { padding: 5rem 2rem; } } @media (min-width: 1024px) { .hero-inner { padding: 6rem 2rem; } } .hero-grid { display: grid; gap: 2.5rem; align-items: center; } @media (min-width: 1024px) { .hero-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: #ccfbf1; color: #0f766e; font-size: 0.75rem; font-weight: 700; padding: 0.375rem 1rem; border-radius: 9999px; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 0.05em; } html.dark .hero-badge { background: rgba(15, 118, 110, 0.3); color: #2dd4bf; } .hero h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 900; line-height: 1.1; margin-bottom: 1.5rem; } .hero h1 .accent { color: var(--vn-primary); } html.dark .hero h1 .accent { color: #2dd4bf; } .hero-subtitle { font-size: 1.125rem; color: var(--vn-text-muted); line-height: 1.7; margin-bottom: 2rem; max-width: 36rem; } @media (min-width: 640px) { .hero-subtitle { font-size: 1.25rem; } } .hero-cta-row { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; } @media (min-width: 640px) { .hero-cta-row { flex-direction: row; align-items: flex-start; } } .hero-trust-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.875rem; color: var(--vn-text-faint); } .hero-trust-row span { display: inline-flex; align-items: center; gap: 0.375rem; } .hero-trust-row svg { color: var(--vn-primary); } .hero-image { position: relative; display: flex; justify-content: center; max-width: 100%; } @media (min-width: 1024px) { .hero-image { justify-content: flex-end; } } .hero-image img { width: 100%; max-width: 28rem; height: auto; filter: drop-shadow(0 25px 50px rgba(0,0,0,0.15)); border-radius: var(--vn-radius-2xl); } /* ---------- 6. Sections ---------- */ .section { padding: var(--vn-section-y-mobile) 0; } @media (min-width: 768px) { .section { padding: var(--vn-section-y) 0; } } .section-muted { background: var(--vn-bg-muted); } html.dark .section-muted { background: rgba(17, 24, 39, 0.5); } .section-teal { background: rgba(240, 253, 250, 0.5); } html.dark .section-teal { background: rgba(15, 118, 110, 0.2); } .section-gradient { background: linear-gradient(to bottom, var(--vn-bg), rgba(240, 253, 250, 0.3), var(--vn-bg)); } html.dark .section-gradient { background: linear-gradient(to bottom, var(--vn-bg), rgba(15, 118, 110, 0.1), var(--vn-bg)); } .section-primary { background: var(--vn-primary); color: #fff; } html.dark .section-primary { background: #0f766e; } .section-primary h2, .section-primary h3, .section-primary p { color: inherit; } .section-inner { max-width: var(--vn-content); margin: 0 auto; padding: 0 1.25rem; } @media (min-width: 768px) { .section-inner { padding: 0 2rem; } } .section-inner.narrow { max-width: var(--vn-content-narrow); } .section-inner.wide { max-width: var(--vn-content); } .section-header { text-align: center; margin-bottom: 3rem; } .section-header h2 { margin-bottom: 1rem; } .section-header .subtitle { font-size: var(--vn-text-lg); color: var(--vn-text-muted); max-width: 42rem; margin: 0 auto; line-height: 1.6; } .section-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: #ccfbf1; color: #0f766e; font-size: 0.75rem; font-weight: 700; padding: 0.375rem 1rem; border-radius: 9999px; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.05em; } html.dark .section-badge { background: rgba(15, 118, 110, 0.3); color: #2dd4bf; } /* ---------- 7. Cards / Grids ---------- */ .grid { display: grid; gap: 1rem; } .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr; } @media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } } .card { background: var(--vn-bg-card); border-radius: var(--vn-radius-xl); padding: 1.25rem; border: 1px solid var(--vn-border); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); transition: box-shadow 0.3s ease, transform 0.3s ease; } .card:hover { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); } .card-pad-lg { padding: 2rem; } @media (min-width: 640px) { .card-pad-lg { padding: 2.5rem; } } .card-icon { width: 44px; height: 44px; border-radius: var(--vn-radius-lg); display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; } .card-icon.teal { background: #ccfbf1; color: #0d9488; } .card-icon.rose { background: #ffe4e6; color: #e11d48; } .card-icon.amber { background: #fef3c7; color: #d97706; } .card-icon.red { background: #fee2e2; color: #dc2626; } .card-icon.blue { background: #dbeafe; color: #2563eb; } .card-icon.purple { background: #f3e8ff; color: #9333ea; } .card-icon.green { background: #dcfce7; color: #16a34a; } .card-icon.indigo { background: #e0e7ff; color: #4f46e5; } html.dark .card-icon { opacity: 0.85; } .card-emoji { font-size: 1.875rem; display: block; margin-bottom: 0.75rem; } .card-title { font-weight: 700; font-size: 0.875rem; margin-bottom: 0.25rem; } .card-desc { font-size: 0.75rem; color: var(--vn-text-muted); } /* ---------- 8. Comparison Table ---------- */ .comparison-table { background: var(--vn-bg-card); border-radius: var(--vn-radius-xl); overflow: hidden; border: 1px solid var(--vn-border); box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .comparison-table .row { display: grid; grid-template-columns: 1fr 1fr 1fr; font-size: 0.875rem; border-top: 1px solid var(--vn-border); } .comparison-table .row.header { border-top: none; font-weight: 700; } .comparison-table .row > div { padding: 0.875rem 1rem; } .comparison-table .row > div:nth-child(1) { text-align: left; font-weight: 500; } .comparison-table .row > div:nth-child(2) { text-align: center; color: rgba(220, 38, 38, 0.85); background: rgba(254, 226, 226, 0.4); } .comparison-table .row > div:nth-child(3) { text-align: center; color: var(--vn-primary); font-weight: 600; background: rgba(240, 253, 250, 0.5); } html.dark .comparison-table .row > div:nth-child(2) { background: rgba(220, 38, 38, 0.15); color: #f87171; } html.dark .comparison-table .row > div:nth-child(3) { background: rgba(15, 118, 110, 0.2); color: #2dd4bf; } .comparison-table .row.header > div:nth-child(1) { background: var(--vn-bg-muted); color: var(--vn-text-muted); } .comparison-table .row.header > div:nth-child(2) { color: #dc2626; } html.dark .comparison-table .row.header > div:nth-child(2) { color: #f87171; } .comparison-table .row.header > div:nth-child(3) { color: var(--vn-primary); } /* ---------- 9. Footer ---------- */ .site-footer { border-top: 1px solid var(--vn-border); padding: 2.5rem 0; margin-top: 2rem; } .site-footer .footer-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; margin-bottom: 2rem; font-size: 0.75rem; font-weight: 600; color: var(--vn-text-faint); } .site-footer .footer-trust span { display: inline-flex; align-items: center; gap: 0.375rem; } .site-footer .footer-trust svg { color: var(--vn-primary); width: 14px; height: 14px; } .site-footer .footer-bottom { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem; } @media (min-width: 640px) { .site-footer .footer-bottom { flex-direction: row; } } .site-footer .footer-logo-row { display: flex; align-items: center; gap: 0.625rem; } .site-footer .footer-logo-row img { height: 24px; width: auto; } .site-footer .footer-logo-row img.dark-logo { display: none; } html.dark .site-footer .footer-logo-row img.light-logo { display: none; } html.dark .site-footer .footer-logo-row img.dark-logo { display: block; } .site-footer .footer-links { display: flex; gap: 1.5rem; font-size: 0.75rem; color: var(--vn-text-faint); flex-wrap: wrap; justify-content: center; } .site-footer .footer-links a:hover { color: var(--vn-primary); } .site-footer .footer-disclaimer { text-align: center; font-size: 0.75rem; color: var(--vn-text-faint); margin-top: 1.5rem; max-width: 36rem; margin-left: auto; margin-right: auto; } /* ---------- 10. AdSense Slots ---------- */ .vn-ad-slot { display: block; margin: 1.5rem auto; text-align: center; min-height: 90px; } .vn-ad-slot.vn-ad-header { max-width: 728px; } .vn-ad-slot.vn-ad-sidebar { min-height: 600px; max-width: 300px; position: sticky; top: 80px; } .vn-ad-slot.vn-ad-inarticle { max-width: 336px; min-height: 280px; } .vn-ad-slot.vn-ad-after-content { max-width: 336px; min-height: 280px; } .vn-ad-slot.vn-ad-between-related { max-width: 300px; min-height: 250px; } .vn-ad-label { display: block; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--vn-text-faint); margin-bottom: 0.5rem; } .vn-ad-slot:empty { display: none; } /* ---------- 11. Blog / Archive ---------- */ .blog-layout { display: grid; gap: 2rem; max-width: var(--vn-container); margin: 0 auto; padding: 2.5rem 1.25rem; } @media (min-width: 1024px) { .blog-layout { grid-template-columns: 1fr 320px; padding: 3rem 2rem; } } .blog-layout .main-content { min-width: 0; } .blog-layout .sidebar { min-width: 0; } @media (max-width: 1023px) { .blog-layout .sidebar { display: none; } } .post-card { background: var(--vn-bg-card); border-radius: var(--vn-radius-xl); overflow: hidden; border: 1px solid var(--vn-border); transition: box-shadow 0.3s ease, transform 0.3s ease; display: flex; flex-direction: column; } .post-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.08); transform: translateY(-2px); } .post-card .post-thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--vn-bg-muted); } .post-card .post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; } .post-card:hover .post-thumb img { transform: scale(1.05); } .post-card .post-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; } .post-card .post-category { display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--vn-primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; } .post-card .post-title { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.5rem; line-height: 1.3; } .post-card .post-title a { color: var(--vn-text); } .post-card .post-title a:hover { color: var(--vn-primary); } .post-card .post-excerpt { font-size: 0.875rem; color: var(--vn-text-muted); margin-bottom: 1rem; flex: 1; } .post-card .post-meta { font-size: 0.75rem; color: var(--vn-text-faint); display: flex; gap: 1rem; align-items: center; } .post-card .post-meta .author { display: flex; align-items: center; gap: 0.5rem; } .blog-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } /* Single post */ .single-post-layout { max-width: 48rem; margin: 0 auto; padding: 2rem 1rem; } @media (min-width: 640px) { .single-post-layout { padding: 3rem 1.5rem; } } .single-post-header { text-align: center; margin-bottom: 2rem; } .single-post-header .post-categories { margin-bottom: 1rem; } .single-post-header .post-categories a { display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--vn-primary); background: rgba(13, 148, 136, 0.1); padding: 0.25rem 0.75rem; border-radius: 9999px; margin: 0 0.25rem; text-transform: uppercase; letter-spacing: 0.05em; } .single-post-header h1 { font-size: clamp(1.875rem, 4vw, 2.5rem); margin-bottom: 1rem; } .single-post-header .post-meta { font-size: 0.875rem; color: var(--vn-text-muted); display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; } .single-post-thumb { border-radius: var(--vn-radius-xl); overflow: hidden; margin-bottom: 2rem; } .single-post-thumb img { width: 100%; height: auto; } .single-post-content { font-size: 1.0625rem; line-height: 1.8; } .single-post-content h2 { margin-top: 2em; } .single-post-content h3 { margin-top: 1.5em; } .single-post-content p { margin-bottom: 1.25em; } .single-post-content img { border-radius: var(--vn-radius); margin: 1.5em auto; } .single-post-content blockquote { border-left: 4px solid var(--vn-primary); padding: 0.5rem 0 0.5rem 1.5rem; margin: 1.5em 0; color: var(--vn-text-muted); font-style: italic; } .single-post-content code { background: var(--vn-bg-muted); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-family: var(--vn-font-mono); font-size: 0.875em; } .single-post-content pre { background: var(--vn-bg-muted); padding: 1rem; border-radius: var(--vn-radius); overflow-x: auto; font-family: var(--vn-font-mono); font-size: 0.875rem; } .single-post-content ul, .single-post-content ol { margin: 0 0 1.25em 1.5em; } .single-post-content li { margin-bottom: 0.5em; } /* Related posts */ .related-posts { max-width: 48rem; margin: 0 auto; padding: 2rem 1rem; } @media (min-width: 640px) { .related-posts { padding: 3rem 1.5rem; } } .related-posts h2 { text-align: center; margin-bottom: 2rem; } .related-posts .related-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .related-posts .related-grid { grid-template-columns: repeat(3, 1fr); } } .related-post-card { background: var(--vn-bg-card); border-radius: var(--vn-radius-lg); overflow: hidden; border: 1px solid var(--vn-border); } .related-post-card .post-thumb { aspect-ratio: 16/9; overflow: hidden; } .related-post-card .post-thumb img { width: 100%; height: 100%; object-fit: cover; } .related-post-card .post-body { padding: 1rem; } .related-post-card .post-title { font-size: 0.875rem; font-weight: 600; line-height: 1.3; } .related-post-card .post-title a { color: var(--vn-text); } /* ---------- 12. Pagination ---------- */ .vn-pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 3rem; flex-wrap: wrap; } .vn-pagination a, .vn-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 0.75rem; border-radius: var(--vn-radius); border: 1px solid var(--vn-border); font-size: 0.875rem; font-weight: 600; color: var(--vn-text); background: var(--vn-bg); text-decoration: none; transition: all 0.2s; } .vn-pagination a:hover, .vn-pagination .current { background: var(--vn-primary); color: #fff; border-color: var(--vn-primary); } /* ---------- 13. CF7 Form Styling ---------- */ .vn-cf7-form { display: grid; gap: 1.25rem; } .vn-cf7-form label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.375rem; color: var(--vn-text); } .vn-cf7-form .wpcf7-form-control-wrap { display: block; } .vn-cf7-form input[type="text"], .vn-cf7-form input[type="email"], .vn-cf7-form input[type="tel"], .vn-cf7-form input[type="url"], .vn-cf7-form input[type="subject"], .vn-cf7-form textarea, .vn-cf7-form select { width: 100%; padding: 0.75rem 1rem; border-radius: var(--vn-radius-lg); border: 1px solid var(--vn-border); background: var(--vn-bg); color: var(--vn-text); font-size: 0.9375rem; font-family: inherit; transition: border-color 0.2s, box-shadow 0.2s; } html.dark .vn-cf7-form input, html.dark .vn-cf7-form textarea, html.dark .vn-cf7-form select { border-color: #374151; background: var(--vn-bg-card); } .vn-cf7-form input:focus, .vn-cf7-form textarea:focus, .vn-cf7-form select:focus { outline: none; border-color: var(--vn-primary); box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2); } .vn-cf7-form textarea { resize: vertical; min-height: 120px; } .vn-cf7-form .wpcf7-submit { background: linear-gradient(to right, var(--vn-primary), var(--vn-accent)); color: #fff; border: none; padding: 0.875rem 1.5rem; border-radius: var(--vn-radius-lg); font-weight: 700; font-size: 0.875rem; cursor: pointer; transition: all 0.3s; box-shadow: 0 10px 15px -3px rgba(13, 148, 136, 0.2); } .vn-cf7-form .wpcf7-submit:hover { background: linear-gradient(to right, var(--vn-primary-dark), var(--vn-accent-dark)); box-shadow: 0 20px 25px -5px rgba(13, 148, 136, 0.3); transform: translateY(-1px); } .vn-cf7-form .wpcf7-response-output { border-radius: var(--vn-radius); padding: 0.75rem 1rem; font-size: 0.875rem; margin: 0; } /* ---------- 14. Page (generic) ---------- */ .page-layout { max-width: 48rem; margin: 0 auto; padding: 3rem 1rem; } @media (min-width: 640px) { .page-layout { padding: 4rem 1.5rem; } } .page-layout h1 { margin-bottom: 1.5rem; } .page-layout .page-content { font-size: 1.0625rem; line-height: 1.8; } .page-layout .page-content h2 { margin-top: 2em; } .page-layout .page-content h3 { margin-top: 1.5em; } .page-layout .page-content ul, .page-layout .page-content ol { margin: 0 0 1.25em 1.5em; } .page-layout .page-content li { margin-bottom: 0.5em; } /* ---------- 15. Contact Page ---------- */ .contact-layout { display: grid; gap: 2rem; max-width: var(--vn-container); margin: 0 auto; padding: 2.5rem 1.25rem; } @media (min-width: 1024px) { .contact-layout { grid-template-columns: 3fr 2fr; padding: 3rem 2rem; gap: 3rem; } } .contact-form-card { background: var(--vn-bg-card); border-radius: var(--vn-radius-xl); border: 1px solid var(--vn-border); padding: 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } @media (min-width: 640px) { .contact-form-card { padding: 2rem; } } .contact-info-card { background: linear-gradient(to bottom right, var(--vn-primary), var(--vn-accent-dark)); color: #fff; border-radius: var(--vn-radius-xl); padding: 2rem; position: relative; overflow: hidden; } .contact-info-card::before { content: ''; position: absolute; top: 0; right: 0; width: 8rem; height: 8rem; background: rgba(255,255,255,0.1); border-radius: 50%; transform: translate(50%, -50%); } .contact-info-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 6rem; height: 6rem; background: rgba(255,255,255,0.05); border-radius: 50%; transform: translate(-33%, 33%); } .contact-info-card > * { position: relative; } .contact-info-card .emoji { font-size: 2.5rem; display: block; margin-bottom: 1rem; } .contact-info-card h2 { color: #fff; font-size: 1.5rem; margin-bottom: 0.5rem; } .contact-info-card p { color: rgba(255,255,255,0.85); font-size: 0.875rem; line-height: 1.6; } .contact-info-side { display: grid; gap: 1.5rem; margin-top: 1.5rem; } .contact-info-tile { background: var(--vn-bg-card); border-radius: var(--vn-radius-xl); border: 1px solid var(--vn-border); padding: 1.5rem; display: flex; gap: 1rem; align-items: flex-start; } .contact-info-tile .icon-box { width: 48px; height: 48px; border-radius: var(--vn-radius-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-info-tile .icon-box.teal { background: #ccfbf1; color: var(--vn-primary); } .contact-info-tile .icon-box.emerald { background: #d1fae5; color: var(--vn-accent); } .contact-info-tile .icon-box.blue { background: #dbeafe; color: #2563eb; } html.dark .contact-info-tile .icon-box { opacity: 0.85; } .contact-info-tile h3 { font-size: 0.875rem; font-weight: 700; margin-bottom: 0.25rem; } .contact-info-tile p { font-size: 0.875rem; color: var(--vn-text-muted); margin: 0; } /* ---------- 16. Misc Utilities ---------- */ .vn-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 640px) { .vn-feature-grid { grid-template-columns: repeat(4, 1fr); } } .vn-feature-tile { background: rgba(240, 253, 250, 0.5); border-radius: var(--vn-radius-lg); padding: 1rem; text-align: center; } html.dark .vn-feature-tile { background: rgba(15, 118, 110, 0.2); } .vn-feature-tile .emoji { font-size: 1.5rem; display: block; margin-bottom: 0.375rem; } .vn-feature-tile .label { font-size: 0.75rem; font-weight: 700; color: var(--vn-primary); white-space: pre-line; line-height: 1.2; } html.dark .vn-feature-tile .label { color: #2dd4bf; } .vn-steps-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .vn-steps-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .vn-steps-grid { grid-template-columns: repeat(4, 1fr); } } .vn-step { text-align: center; } .vn-step-circle { width: 80px; height: 80px; border-radius: var(--vn-radius-xl); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: #fff; box-shadow: 0 10px 15px rgba(0,0,0,0.1); position: relative; } .vn-step-circle.blue { background: linear-gradient(to bottom right, #3b82f6, #4f46e5); box-shadow: 0 10px 15px rgba(59, 130, 246, 0.25); } .vn-step-circle.violet { background: linear-gradient(to bottom right, #8b5cf6, #9333ea); box-shadow: 0 10px 15px rgba(139, 92, 246, 0.25); } .vn-step-circle.rose { background: linear-gradient(to bottom right, #f43f5e, #db2777); box-shadow: 0 10px 15px rgba(244, 63, 94, 0.25); } .vn-step-circle.emerald { background: linear-gradient(to bottom right, #10b981, #0d9488); box-shadow: 0 10px 15px rgba(16, 185, 129, 0.25); } .vn-step-num { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; border-radius: 50%; background: var(--vn-bg); border: 2px solid var(--vn-border); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 900; color: var(--vn-text); } .vn-step h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; } .vn-step p { font-size: 0.875rem; color: var(--vn-text-muted); max-width: 220px; margin: 0 auto; } /* Family member chips */ .vn-chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .vn-chip { background: var(--vn-bg-card); border-radius: var(--vn-radius-xl); padding: 1rem 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; min-width: 100px; } .vn-chip .emoji { font-size: 1.875rem; } .vn-chip .label { font-size: 0.875rem; font-weight: 600; } /* Trust badges row */ .vn-trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--vn-border); } .vn-trust-row span { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--vn-primary); } html.dark .vn-trust-row span { color: #2dd4bf; } .vn-trust-row svg { width: 16px; height: 16px; } /* ---------- 17. Animations ---------- */ @keyframes pulseGlow { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } } @keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .vn-hero-cta { position: relative; overflow: hidden; background: linear-gradient(to right, var(--vn-primary), var(--vn-accent), var(--vn-primary)); background-size: 200% 100%; animation: gradientFlow 3s ease infinite; } .vn-hero-cta::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(to right, #5eead4, #6ee7b7, #5eead4); border-radius: inherit; opacity: 0.5; filter: blur(8px); animation: pulseGlow 2s ease-in-out infinite; z-index: -1; } /* ---------- 18. WordPress Core Classes ---------- */ .alignleft { float: left; margin-right: 1.5em; } .alignright { float: right; margin-left: 1.5em; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignwide { max-width: 100%; } .wp-caption { max-width: 100%; } .wp-caption-text, .gallery-caption { font-size: 0.875rem; color: var(--vn-text-muted); font-style: italic; text-align: center; margin-top: 0.5rem; } .sticky { display: block; } .bypostauthor { display: block; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } /* ---------- 19. Block Editor (Gutenberg) ---------- */ .entry-content .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .entry-content .alignwide { max-width: 80rem; } .wp-block-button .wp-block-button__link { background: var(--vn-primary); color: #fff; border-radius: var(--vn-radius-lg); padding: 0.625rem 1.25rem; font-weight: 700; } .wp-block-quote { border-left: 4px solid var(--vn-primary); padding-left: 1.5rem; margin: 1.5em 0; color: var(--vn-text-muted); font-style: italic; } .wp-block-pullquote { border-top: 4px solid var(--vn-primary); border-bottom: 4px solid var(--vn-primary); padding: 2rem 0; margin: 2rem 0; } .wp-block-separator { border: none; border-top: 1px solid var(--vn-border); margin: 2rem auto; max-width: 100px; } /* ---------- 20. Skip Link ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--vn-primary); color: #fff; padding: 0.5rem 1rem; border-radius: 0 0 var(--vn-radius) 0; z-index: 1000; font-weight: 600; } .skip-link:focus { left: 0; color: #fff; } /* ================================================================= 21. New Sections (Android-first redesign) ================================================================= */ /* ---------- 21a. Feature Categories (homepage + features page) ---------- */ .vn-feature-category { background: #fff; border: 1px solid var(--vn-border); border-radius: var(--vn-radius-2xl); padding: 2rem; margin-bottom: 1.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .dark .vn-feature-category { background: rgba(255, 255, 255, 0.02); border-color: rgba(255, 255, 255, 0.06); } .vn-feature-cat-header { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--vn-border); } .vn-feature-cat-header h2, .vn-feature-cat-header h3 { margin: 0 0 0.25rem 0; font-size: 1.5rem; font-weight: 800; color: var(--vn-text); } .vn-feature-cat-header p { margin: 0; font-size: 0.9375rem; color: var(--vn-text-muted); line-height: 1.55; } .vn-feature-cat-icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--vn-radius-lg); flex-shrink: 0; } .vn-feature-cat-icon.teal { background: rgba(13, 148, 136, 0.12); color: var(--vn-primary); } .vn-feature-cat-icon.blue { background: rgba(59, 130, 246, 0.12); color: #2563eb; } .vn-feature-cat-icon.violet { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; } .vn-feature-cat-icon.amber { background: rgba(217, 119, 6, 0.12); color: #d97706; } .vn-feature-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; } .vn-feature-modules-lg { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } .vn-feature-module { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; background: rgba(13, 148, 136, 0.04); border: 1px solid rgba(13, 148, 136, 0.08); border-radius: var(--vn-radius); font-size: 0.875rem; font-weight: 600; color: var(--vn-text); } .dark .vn-feature-module { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.06); } .vn-feature-module .emoji { font-size: 1.25rem; line-height: 1; flex-shrink: 0; } .vn-feature-modules-lg .vn-feature-module { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1.25rem; } .vn-feature-modules-lg .vn-feature-module strong { font-size: 0.9375rem; font-weight: 700; color: var(--vn-text); } .vn-feature-modules-lg .vn-feature-module p { font-size: 0.8125rem; color: var(--vn-text-muted); margin: 0; line-height: 1.5; font-weight: 400; } /* ---------- 21b. Screenshots Gallery ---------- */ .vn-screenshots-section { background: linear-gradient(180deg, transparent, rgba(13, 148, 136, 0.03), transparent); } .vn-screenshot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .vn-screenshot-card { background: #fff; border-radius: var(--vn-radius-2xl); overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); transition: transform 0.25s ease, box-shadow 0.25s ease; } .vn-screenshot-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); } .dark .vn-screenshot-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); } .vn-screenshot-frame { aspect-ratio: 16 / 9; background: linear-gradient(135deg, rgba(13, 148, 136, 0.08), rgba(5, 150, 105, 0.04)); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .vn-screenshot-frame img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; } html.dark .vn-screenshot-frame img { background: #0b1220; } .vn-screenshot-label { padding: 0.875rem 1rem; display: flex; flex-direction: column; gap: 0.125rem; } .vn-screenshot-label strong { font-size: 0.9375rem; font-weight: 700; color: var(--vn-text); } .vn-screenshot-label span { font-size: 0.75rem; color: var(--vn-text-muted); } /* ---------- 21c. Trust Section (Why Families Trust VitalNadi) ---------- */ .vn-trust-grid { margin-top: 2rem; } .vn-trust-card { padding: 1.75rem 1.25rem; } .vn-trust-emoji { font-size: 2.25rem; display: block; margin-bottom: 0.75rem; line-height: 1; } .vn-trust-card .card-title { font-size: 0.9375rem; font-weight: 700; margin: 0 0 0.5rem 0; } .vn-trust-card .card-desc { font-size: 0.8125rem; color: var(--vn-text-muted); line-height: 1.5; margin: 0; } /* 5-column grid on desktop */ @media (min-width: 1024px) { .grid.grid-5 { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 1023px) and (min-width: 640px) { .grid.grid-5 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639px) { .grid.grid-5 { grid-template-columns: 1fr; } } /* ---------- 21d. Download Section ---------- */ .vn-download-section { background: linear-gradient(135deg, var(--vn-primary) 0%, var(--vn-accent-dark) 100%); position: relative; overflow: hidden; } .vn-download-section::before { content: ''; position: absolute; top: 0; right: 0; width: 20rem; height: 20rem; background: rgba(255, 255, 255, 0.06); border-radius: 50%; transform: translate(40%, -40%); pointer-events: none; } .vn-download-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items: center; position: relative; z-index: 1; } @media (max-width: 768px) { .vn-download-grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; } } .vn-download-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; } @media (max-width: 768px) { .vn-download-cta { align-items: center; } } .vn-play-button { display: inline-flex; align-items: center; gap: 0.875rem; background: #000; color: #fff; padding: 0.875rem 1.75rem; border-radius: var(--vn-radius); text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid rgba(255, 255, 255, 0.1); } .vn-play-button:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); color: #fff; } .vn-play-button svg { flex-shrink: 0; } .vn-play-button-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; } .vn-play-button-text small { font-size: 0.6875rem; letter-spacing: 0.05em; opacity: 0.85; } .vn-play-button-text strong { font-size: 1.375rem; font-weight: 600; } .vn-download-badges { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; color: rgba(255, 255, 255, 0.9); font-size: 0.875rem; } .vn-download-badges span { display: inline-flex; align-items: center; gap: 0.4rem; } .vn-download-badges svg { color: #fff; } .vn-download-qr { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .vn-qr-img, .vn-qr-placeholder { width: 180px; height: 180px; background: #fff; border-radius: var(--vn-radius-lg); padding: 0.75rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); } .vn-qr-placeholder { color: rgba(13, 148, 136, 0.4); } .vn-qr-img { padding: 0; object-fit: contain; } .vn-qr-caption { font-size: 0.875rem; font-weight: 700; color: #fff; margin: 0; } .vn-qr-sub { font-size: 0.75rem; color: rgba(255, 255, 255, 0.7); margin: 0; } /* ---------- 21e. Footer Redesign ---------- */ .site-footer { background: var(--vn-bg-muted); border-top: 1px solid var(--vn-border); padding: 0; color: var(--vn-text); } .dark .site-footer { background: rgba(0, 0, 0, 0.3); } /* Footer CTA Bar */ .footer-cta-bar { background: linear-gradient(135deg, var(--vn-primary), var(--vn-accent-dark)); padding: 2.5rem 0; color: #fff; } .footer-cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; } .footer-cta-text h3 { margin: 0 0 0.25rem 0; font-size: 1.5rem; font-weight: 800; color: #fff; } .footer-cta-text p { margin: 0; color: rgba(255, 255, 255, 0.85); font-size: 0.9375rem; } /* Footer Grid */ .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr; gap: 2.5rem; padding: 3.5rem 0 2rem; } @media (max-width: 968px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } .footer-col-brand { grid-column: 1 / -1; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } .footer-col-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--vn-text-muted); margin: 0 0 1rem 0; } .footer-col-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; } .footer-col-links a { font-size: 0.875rem; color: var(--vn-text); text-decoration: none; transition: color 0.15s ease; } .footer-col-links a:hover { color: var(--vn-primary); } .footer-col-brand .footer-logo-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .footer-col-brand .footer-logo-row img { height: 36px; width: auto; } .footer-tagline { font-size: 0.875rem; color: var(--vn-text-muted); line-height: 1.6; margin: 0 0 1.25rem 0; max-width: 28rem; } .footer-social { display: flex; gap: 0.625rem; } .footer-social a { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--vn-radius); background: rgba(13, 148, 136, 0.08); color: var(--vn-primary); transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; } .footer-social a:hover { background: var(--vn-primary); color: #fff; transform: translateY(-2px); } /* Footer Play Button (smaller variant in column 5) */ .footer-play-btn { display: inline-flex; align-items: center; gap: 0.625rem; background: #000; color: #fff; padding: 0.625rem 1.25rem; border-radius: var(--vn-radius); text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.15s ease, box-shadow 0.15s ease; margin-bottom: 1rem; } .footer-play-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); color: #fff; } .footer-play-btn span { display: flex; flex-direction: column; line-height: 1.1; text-align: left; } .footer-play-btn small { font-size: 0.625rem; letter-spacing: 0.06em; opacity: 0.85; } .footer-play-btn strong { font-size: 1rem; font-weight: 600; } .footer-qr { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; margin-top: 0.5rem; } .footer-qr img { width: 96px; height: 96px; background: #fff; padding: 6px; border-radius: var(--vn-radius); object-fit: contain; } .footer-qr-caption { font-size: 0.6875rem; color: var(--vn-text-muted); } /* Footer Trust Badges */ .footer-trust { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: center; padding: 1.5rem 0; border-top: 1px solid var(--vn-border); margin-top: 1.5rem; } .footer-trust span { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--vn-text-muted); font-weight: 600; } .footer-trust svg { color: var(--vn-primary); } /* Footer Bottom Bar */ .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--vn-border); } .footer-bottom-left { display: flex; align-items: center; gap: 1rem; font-size: 0.8125rem; color: var(--vn-text-muted); } .footer-version { font-size: 0.6875rem; background: rgba(13, 148, 136, 0.1); color: var(--vn-primary); padding: 0.125rem 0.5rem; border-radius: 9999px; font-weight: 600; } .footer-bottom-links { display: flex; gap: 1.25rem; } .footer-bottom-links a { font-size: 0.8125rem; color: var(--vn-text-muted); text-decoration: none; } .footer-bottom-links a:hover { color: var(--vn-primary); } .site-footer .footer-disclaimer { font-size: 0.75rem; color: var(--vn-text-faint); text-align: center; margin: 0; padding: 1.25rem 0 2rem; border-top: 1px dashed var(--vn-border); line-height: 1.6; max-width: 50rem; margin-left: auto; margin-right: auto; }