:root { --color-primary: #1E90FF; --color-secondary: #00CC99; --color-background: #F8F9FA; --color-white: #FFFFFF; --color-text-dark: #333333; --color-text-light: #666666; --color-border: #EEEEEE; --font-primary: 'Lato', 'Open Sans', sans-serif; } body { font-family: var(--font-primary); color: var(--color-text-dark); line-height: 1.6; background-color: var(--color-background); margin: 0; padding: 0; } h1, h2, h3 { color: var(--color-primary); line-height: 1.2; margin-bottom: 0.5em; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } .container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 20px 0; } section { padding: 60px 0; } #header-placeholder { min-height: 72px; } header { background-color: var(--color-white); padding: 15px 0; border-bottom: 1px solid var(--color-border); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; width: 90%; max-width: 1200px; margin: 0 auto; } .logo { font-size: 1.8rem; font-weight: bold; color: var(--color-primary); text-decoration: none; } nav a { color: var(--color-text-dark); text-decoration: none; margin-left: 20px; font-weight: 500; } nav a.active-page { color: #5cb85c; border-bottom: 2px solid #5cb85c; font-weight: 700; } .cta-primary { background-color: var(--color-secondary); color: var(--color-white); padding: 10px 20px; border-radius: 5px; text-decoration: none; font-weight: bold; transition: background-color 0.3s; border: none; cursor: pointer; margin-left: 15px; } .cta-primary:hover { background-color: #00B388; } .cta-outline { background: none; color: var(--color-primary); border: 2px solid var(--color-primary); padding: 10px 20px; border-radius: 5px; text-decoration: none; font-weight: bold; transition: all 0.3s; margin-left: 10px; } .cta-outline:hover { background-color: var(--color-primary); color: var(--color-white); } .lp-hero-cta { min-width: 180px; font-size: 1.15rem; } .lp-hero { background: linear-gradient(rgba(255,255,255,0.96),rgba(255,255,255,0.92)), url('../images/tumblerama-folding-tables.webp') center/cover no-repeat; padding: 48px 0 32px 0; text-align: center; } .lp-hero-title { font-size: 2.3rem; color: var(--color-primary); font-weight: 800; margin-bottom: 0.5em; } .lp-hero-subheadline { font-size: 1.2rem; color: var(--color-text-light); margin-bottom: 1.2em; } .lp-hero-img { max-width: 420px; width: 100%; height: auto; border-radius: 8px; margin: 0 auto 1.2em auto; display: block; } .lp-hero-cta-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 0; } .lp-hero-layout { display: flex; gap: 40px; align-items: flex-start; padding: 0 16px; } .lp-hero-content { flex: 1 1 45%; max-width: 50%; } .lp-hero-form { flex: 1 1 45%; max-width: 50%; } .lp-trust-bar { display: flex; justify-content: center; align-items: center; gap: 32px; background: #f7fafc; padding: 18px 0 10px 0; border-bottom: 1px solid #e0e0e0; font-size: 1.1em; } .lp-trust-bar .trust-badge { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #4caf50; } .lp-how-it-works { background: #fff; padding: 40px 0 24px 0; text-align: center; } .lp-how-steps { display: flex; justify-content: center; gap: 32px; margin-top: 24px; flex-wrap: wrap; } .lp-how-step { flex: 1 1 180px; max-width: 220px; background: #f8f9fa; border-radius: 8px; padding: 24px 16px 18px 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); margin: 0 8px; } .lp-how-step .step-icon { font-size: 2.2em; color: var(--color-secondary); margin-bottom: 10px; } .lp-how-step-title { font-weight: 700; color: var(--color-primary); margin-bottom: 0.3em; } .lp-how-step-desc { color: var(--color-text-light); font-size: 1em; } .lp-testimonials { background: #f7fafc; padding: 40px 0 24px 0; text-align: center; } .stable-grid-container { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; justify-content: center; margin-top: 32px; } .stable-grid-container > div { flex: 1 1 0; min-width: 0; max-width: 520px; } @media (max-width: 900px) { .stable-grid-container { flex-direction: column; gap: 32px; } .stable-grid-container > div { max-width: 100%; } } .lp-testimonial-list { display: flex; flex-wrap: wrap; gap: 24px; justify-content: flex-start; margin-top: 18px; } .lp-testimonial { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 20px 18px 16px 18px; max-width: 320px; flex: 1 1 220px; text-align: left; } .lp-testimonial .testimonial-rating { color: #ffb400; font-size: 1.1em; margin-bottom: 6px; } .lp-testimonial .testimonial-text { color: var(--color-text-dark); font-size: 1.05em; margin-bottom: 8px; } .lp-testimonial .testimonial-author { color: var(--color-text-light); font-size: 0.97em; font-style: italic; } .lp-secondary-cta { background: #e6f3ff; padding: 32px 0 24px 0; text-align: center; border-radius: 8px; margin: 32px auto 0 auto; max-width: 700px; } .lp-secondary-cta .cta-lg { font-size: 1.1em; padding: 13px 30px; border-radius: 6px; } .lp-faq { background: #fff; padding: 36px 0 18px 0; max-width: 700px; margin: 0 auto; } .lp-faq-title { font-size: 1.5em; color: var(--color-primary); font-weight: 700; margin-bottom: 18px; text-align: center; } .lp-faq-list { margin: 0; padding: 0; list-style: none; } .lp-faq-q { font-weight: 600; color: var(--color-secondary); margin-top: 14px; } .lp-faq-a { color: var(--color-text-light); margin-bottom: 10px; } .lp-mobile-sticky-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000; background: var(--color-primary); color: #fff; padding: 14px 0 10px 0; text-align: center; box-shadow: 0 -2px 8px rgba(0,0,0,0.08); } .lp-mobile-sticky-cta .cta-lg { font-size: 1.1em; padding: 13px 30px; border-radius: 6px; } .lp-mb-0 { margin-bottom: 0 !important; } .lp-mb-1 { margin-bottom: 8px !important; } .lp-mb-2 { margin-bottom: 16px !important; } .lp-mb-3 { margin-bottom: 24px !important; } .lp-mt-2 { margin-top: 16px !important; } .lp-mt-3 { margin-top: 24px !important; } .lp-text-center { text-align: center !important; } .lp-text-left { text-align: left !important; } .lp-fw-bold { font-weight: 700 !important; } .lp-fw-normal { font-weight: 400 !important; } @media (max-width: 1100px) { .lp-hero-layout { gap: 24px; padding: 0 8px; } } @media (max-width: 900px) { .lp-hero-layout { flex-direction: column; align-items: center; gap: 32px; padding: 0 4px; } .lp-hero-content, .lp-hero-form { max-width: 100%; text-align: center; } .lp-hero-form { padding: 1.5rem 0.5rem; } .lp-how-steps { flex-direction: column; gap: 18px; } .lp-testimonial-list { flex-direction: column; gap: 18px; } } @media (max-width: 700px) { .lp-hero-title { font-size: 1.5rem; } .lp-hero-subheadline { font-size: 1.05rem; } .lp-hero { padding: 32px 0 18px 0; } .lp-how-step { max-width: 100%; } .lp-secondary-cta { padding: 20px 0 12px 0; } .lp-faq { padding: 20px 0 8px 0; } } @media (max-width: 600px) { .lp-hero-cta-group { flex-direction: column; gap: 10px; } .lp-hero .cta-lg { width: 100%; } .lp-trust-bar { flex-direction: column; gap: 10px; font-size: 1em; } .lp-how-steps { flex-direction: column; gap: 12px; } .lp-testimonial-list { flex-direction: column; gap: 12px; } .lp-secondary-cta { margin: 18px auto 0 auto; } .lp-faq { padding: 10px 0 4px 0; } } @media (max-width: 500px) { .lp-hero-title { font-size: 1.1rem; } .lp-hero-subheadline { font-size: 0.97rem; } .lp-hero { padding: 18px 0 8px 0; } .lp-mobile-sticky-cta { display: block; } } .card-grid { display: flex; gap: 30px; margin-top: 40px; text-align: center; } .card { flex: 1; background-color: var(--color-white); padding: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s; } .card:hover { transform: translateY(-5px); } .card-icon { font-size: 3rem; color: var(--color-secondary); margin-bottom: 15px; } footer { background-color: var(--color-text-dark); color: var(--color-white); padding: 40px 0; text-align: center; margin-top: 40px; } footer a { color: var(--color-secondary); text-decoration: none; margin: 0 10px; } @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } nav { margin-top: 10px; } nav a { display: block; margin: 5px 0; } .cta-primary { margin-left: 0; margin-top: 10px; display: block; text-align: center; } .hero h1 { font-size: 2.5rem; } .card-grid { flex-direction: column; } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .pricing-table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 1.05em; } .pricing-table th, .pricing-table td { padding: 12px; border-bottom: 1px solid #eee; text-align: left; } .pricing-table th { background-color: #f2f2f2; color: #333; }