/* ============================================ Website Templates for Huba Chiropractics Applied via data-template="classic|modern|minimalist|bold" on ============================================ */ /* ============================================ TEMPLATE: Classic (Default) Clean, professional, standard healthcare layout ============================================ */ /* Classic is the base style - no overrides needed */ /* ============================================ TEMPLATE: Modern Full-width sections, bold imagery, glass effects ============================================ */ /* -- Modern: Hero -- */ body[data-template="modern"] .hero-section { padding: 0; min-height: 85vh; display: flex; align-items: center; background: linear-gradient(135deg, rgba(0,128,128,0.03), rgba(0,128,128,0.08)); } body[data-template="modern"] .hero-row { gap: 0; } body[data-template="modern"] .hero-text { padding: 60px 0; } body[data-template="modern"] .hero-text h1 { font-size: 3.5rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; } body[data-template="modern"] .hero-image-wrapper { position: relative; } body[data-template="modern"] .hero-image { border-radius: 24px; box-shadow: 0 30px 60px rgba(0,0,0,0.15); } /* -- Modern: Sections -- */ body[data-template="modern"] .section { padding: 100px 0; } body[data-template="modern"] .section-header { text-align: center; max-width: 700px; margin: 0 auto 60px; } body[data-template="modern"] .section-header h2 { font-size: 2.8rem; font-weight: 800; letter-spacing: -0.02em; } body[data-template="modern"] .section-label { font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700; } /* -- Modern: Full-width colored sections -- */ body[data-template="modern"] .why-choose-section { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: #fff; padding: 100px 0; } body[data-template="modern"] .why-choose-section .section-header h2, body[data-template="modern"] .why-choose-section .section-header p { color: #fff; } body[data-template="modern"] .why-choose-section .section-label { color: rgba(255,255,255,0.7); } body[data-template="modern"] .why-choose-section .card { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.15); border-radius: 16px; } body[data-template="modern"] .why-choose-section .card-body { color: #fff; } body[data-template="modern"] .why-choose-section .card-title { color: #fff; } body[data-template="modern"] .why-choose-section .card-text { color: rgba(255,255,255,0.8); } /* -- Modern: Services -- */ body[data-template="modern"] .services-section { background: var(--color-bg-alt); } body[data-template="modern"] .services-grid { gap: 24px; } body[data-template="modern"] .service-card-new { border-radius: 20px; padding: 36px 28px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid var(--color-border-light); } body[data-template="modern"] .service-card-new:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.1); } /* -- Modern: Team -- */ body[data-template="modern"] .team-section { background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%); } body[data-template="modern"] .team-section .card { border-radius: 20px; overflow: hidden; transition: all 0.3s ease; } body[data-template="modern"] .team-section .card:hover { transform: translateY(-6px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); } /* -- Modern: Testimonials -- */ body[data-template="modern"] .testimonials-section { background: var(--color-bg-alt); padding: 100px 0; } body[data-template="modern"] .testimonial-card-new { border-radius: 20px; padding: 32px; border: 1px solid var(--color-border-light); background: var(--color-white); transition: all 0.3s ease; } body[data-template="modern"] .testimonial-card-new:hover { box-shadow: 0 15px 35px rgba(0,0,0,0.08); } /* -- Modern: CTA -- */ body[data-template="modern"] .office-cta-section { background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-soft) 100%); border-radius: 24px; margin: 0 var(--space-8); padding: 60px; } body[data-template="modern"] .office-cta-section h2, body[data-template="modern"] .office-cta-section h3 { color: #fff; } body[data-template="modern"] .office-cta-section .hours-item span { color: rgba(255,255,255,0.8); } body[data-template="modern"] .office-cta-section .hours-item { border-color: rgba(255,255,255,0.1); } /* -- Modern: Buttons -- */ body[data-template="modern"] .btn-primary { border-radius: 12px; padding: 14px 32px; font-weight: 700; letter-spacing: -0.01em; box-shadow: 0 4px 15px rgba(var(--color-primary-rgb), 0.3); } /* ============================================ TEMPLATE: Minimalist Clean, white space, subtle, refined ============================================ */ /* -- Minimalist: General -- */ body[data-template="minimalist"] { --color-primary: #2c3e50; --color-primary-light: #34495e; --color-primary-dark: #1a252f; --color-primary-rgb: 44, 62, 80; --color-accent: #e67e22; --color-accent-light: #f39c12; --color-accent-dark: #d35400; } body[data-template="minimalist"] .section { padding: 80px 0; } body[data-template="minimalist"] .section-header { text-align: center; max-width: 600px; margin: 0 auto 50px; } body[data-template="minimalist"] .section-header h2 { font-family: var(--font-body); font-size: 2rem; font-weight: 600; letter-spacing: 0; color: var(--color-gray-800); } body[data-template="minimalist"] .section-label { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); font-weight: 600; } /* -- Minimalist: Hero -- */ body[data-template="minimalist"] .hero-section { min-height: 80vh; display: flex; align-items: center; background: #fff; } body[data-template="minimalist"] .hero-badge { background: none; color: var(--color-accent); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.75rem; padding: 0; } body[data-template="minimalist"] .hero-text h1 { font-family: var(--font-body); font-size: 3rem; font-weight: 300; line-height: 1.15; color: var(--color-gray-800); letter-spacing: -0.02em; } body[data-template="minimalist"] .hero-text h1 strong { font-weight: 700; } body[data-template="minimalist"] .hero-image { border-radius: 8px; box-shadow: none; border: 1px solid var(--color-gray-200); } body[data-template="minimalist"] .hero-image-badge { background: var(--color-accent); border-radius: 8px; } /* -- Minimalist: Cards -- */ body[data-template="minimalist"] .card { border-radius: 8px; border: 1px solid var(--color-gray-200); box-shadow: none; transition: all 0.3s ease; } body[data-template="minimalist"] .card:hover { border-color: var(--color-gray-400); box-shadow: 0 4px 12px rgba(0,0,0,0.05); } /* -- Minimalist: Services -- */ body[data-template="minimalist"] .service-card-new { border: 1px solid var(--color-gray-200); border-radius: 8px; padding: 32px 24px; background: #fff; transition: all 0.3s ease; } body[data-template="minimalist"] .service-card-new:hover { border-color: var(--color-accent); } body[data-template="minimalist"] .service-card-new-icon { width: 48px; height: 48px; border-radius: 8px; background: var(--color-gray-100); } body[data-template="minimalist"] .service-card-new-icon i { color: var(--color-accent); } /* -- Minimalist: About -- */ body[data-template="minimalist"] .about-image { border-radius: 8px; box-shadow: none; border: 1px solid var(--color-gray-200); } body[data-template="minimalist"] .about-experience-badge { background: var(--color-accent); border-radius: 8px; } /* -- Minimalist: Team -- */ body[data-template="minimalist"] .team-section .card { border-radius: 8px; } /* -- Minimalist: Testimonials -- */ body[data-template="minimalist"] .testimonials-section { background: #fff; } body[data-template="minimalist"] .testimonial-card-new { border: 1px solid var(--color-gray-200); border-radius: 8px; padding: 28px; background: #fff; } body[data-template="minimalist"] .testimonial-stars { color: var(--color-accent); } body[data-template="minimalist"] .testimonial-avatar { background: var(--color-accent); border-radius: 8px; } /* -- Minimalist: CTA -- */ body[data-template="minimalist"] .office-cta-section { border: 1px solid var(--color-gray-200); border-radius: 8px; background: var(--color-bg-alt); } body[data-template="minimalist"] .office-cta-section h3 { font-family: var(--font-body); font-weight: 600; } /* -- Minimalist: Buttons -- */ body[data-template="minimalist"] .btn-primary { background: var(--color-accent); border-color: var(--color-accent); border-radius: 8px; font-weight: 600; letter-spacing: 0; box-shadow: none; } body[data-template="minimalist"] .btn-primary:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); box-shadow: 0 4px 12px rgba(230,126,34,0.3); } body[data-template="minimalist"] .btn-outline { border-color: var(--color-gray-400); border-radius: 8px; box-shadow: none; } /* ============================================ TEMPLATE: Bold Dark, dramatic, high-contrast, powerful ============================================ */ /* -- Bold: General -- */ body[data-template="bold"] { --color-primary: #1a1a2e; --color-primary-light: #16213e; --color-primary-dark: #0f0f23; --color-primary-rgb: 26, 26, 46; --color-secondary: #e94560; --color-secondary-light: #ff6b81; --color-secondary-dark: #c0392b; --color-secondary-rgb: 233, 69, 96; --color-accent: #e94560; --color-accent-light: #ff6b81; --color-accent-dark: #c0392b; --color-bg: #0f0f23; --color-bg-alt: #16213e; --color-bg-card: #1a1a2e; --color-border: #2d2d5e; --color-border-light: #232347; --color-dark: #ffffff; --color-dark-soft: #e0e0ff; --color-gray-800: #c8c8e8; --color-gray-700: #a0a0c8; --color-gray-600: #7878a8; --color-gray-500: #606088; --color-gray-400: #484878; --color-gray-300: #383868; --color-gray-200: #2d2d5e; --color-gray-100: #232347; --color-white: #1a1a2e; color: #c8c8e8; } body[data-template="bold"] .section { padding: 100px 0; } body[data-template="bold"] .section-header h2 { color: #fff; } body[data-template="bold"] .section-header p { color: #a0a0c8; } body[data-template="bold"] .section-label { color: var(--color-secondary); font-weight: 700; letter-spacing: 0.12em; } /* -- Bold: Hero -- */ body[data-template="bold"] .hero-section { min-height: 90vh; display: flex; align-items: center; background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%); position: relative; overflow: hidden; } body[data-template="bold"] .hero-section::before { content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(233,69,96,0.15), transparent 70%); border-radius: 50%; } body[data-template="bold"] .hero-text h1 { color: #fff; font-size: 4rem; font-weight: 900; letter-spacing: -0.03em; } body[data-template="bold"] .hero-text p { color: #a0a0c8; font-size: 1.15rem; } body[data-template="bold"] .hero-badge { background: rgba(233,69,96,0.15); color: var(--color-secondary); } body[data-template="bold"] .hero-image { border-radius: 16px; box-shadow: 0 30px 60px rgba(0,0,0,0.5); } body[data-template="bold"] .hero-trust-item { color: #a0a0c8; } body[data-template="bold"] .hero-trust-icon { background: rgba(233,69,96,0.2); color: var(--color-secondary); } /* -- Bold: About -- */ body[data-template="bold"] .about-section { background: var(--color-bg-alt); } body[data-template="bold"] .about-image { border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.3); } body[data-template="bold"] .about-experience-badge { background: var(--color-secondary); } body[data-template="bold"] .about-text-col h2 { color: #fff; } body[data-template="bold"] .about-text-col p { color: #a0a0c8; } /* -- Bold: Services -- */ body[data-template="bold"] .services-section { background: var(--color-bg); } body[data-template="bold"] .service-card-new { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 16px; padding: 36px 28px; transition: all 0.3s ease; } body[data-template="bold"] .service-card-new:hover { border-color: var(--color-secondary); box-shadow: 0 0 30px rgba(233,69,96,0.1); } body[data-template="bold"] .service-card-new h3 { color: #fff; } body[data-template="bold"] .service-card-new p { color: #a0a0c8; } body[data-template="bold"] .service-card-new-icon { background: rgba(233,69,96,0.1); } body[data-template="bold"] .service-card-new-icon i { color: var(--color-secondary); } body[data-template="bold"] .service-card-new-link { color: var(--color-secondary); } /* -- Bold: Why Choose Us -- */ body[data-template="bold"] .why-choose-section { background: linear-gradient(135deg, #16213e, #1a1a2e); } body[data-template="bold"] .why-choose-section .card { background: rgba(255,255,255,0.03); border: 1px solid var(--color-border); border-radius: 16px; } body[data-template="bold"] .why-choose-section .card:hover { border-color: var(--color-secondary); } body[data-template="bold"] .why-choose-section .card-title { color: #fff; } body[data-template="bold"] .why-choose-section .card-text { color: #a0a0c8; } /* -- Bold: Team -- */ body[data-template="bold"] .team-section { background: var(--color-bg-alt); } body[data-template="bold"] .team-section .card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 16px; } body[data-template="bold"] .team-section .card:hover { border-color: var(--color-secondary); } body[data-template="bold"] .team-section .card-title { color: #fff; } body[data-template="bold"] .team-section .card .text-primary { color: var(--color-secondary) !important; } /* -- Bold: Testimonials -- */ body[data-template="bold"] .testimonials-section { background: var(--color-bg); } body[data-template="bold"] .testimonial-card-new { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 16px; padding: 32px; } body[data-template="bold"] .testimonial-card-new:hover { border-color: var(--color-secondary); } body[data-template="bold"] .testimonial-stars { color: var(--color-secondary); } body[data-template="bold"] .testimonial-text { color: #c8c8e8; } body[data-template="bold"] .testimonial-author strong { color: #fff; } body[data-template="bold"] .testimonial-author span { color: #7878a8; } body[data-template="bold"] .testimonial-avatar { background: var(--color-secondary); color: #fff; } /* -- Bold: Conditions/Assessments -- */ body[data-template="bold"] .conditions-section { background: var(--color-bg-alt); } body[data-template="bold"] .conditions-section .card { background: var(--color-bg-card); border: 1px solid var(--color-border); } body[data-template="bold"] .conditions-section .card:hover { border-color: var(--color-secondary); } body[data-template="bold"] .conditions-section .card-title { color: #fff; } body[data-template="bold"] .conditions-section .badge { background: rgba(233,69,96,0.15) !important; color: var(--color-secondary) !important; } /* -- Bold: CTA -- */ body[data-template="bold"] .office-cta-section { background: linear-gradient(135deg, #16213e, #0f0f23); border: 1px solid var(--color-border); border-radius: 20px; } body[data-template="bold"] .office-cta-section h2, body[data-template="bold"] .office-cta-section h3 { color: #fff; } body[data-template="bold"] .hours-item { border-color: var(--color-border); } body[data-template="bold"] .hours-item span { color: #a0a0c8; } /* -- Bold: Buttons -- */ body[data-template="bold"] .btn-primary { background: var(--color-secondary); border-color: var(--color-secondary); border-radius: 12px; font-weight: 700; box-shadow: 0 4px 20px rgba(233,69,96,0.3); } body[data-template="bold"] .btn-primary:hover { background: var(--color-secondary-dark); border-color: var(--color-secondary-dark); box-shadow: 0 6px 25px rgba(233,69,96,0.4); } body[data-template="bold"] .btn-outline { border-color: var(--color-gray-400); color: #c8c8e8; border-radius: 12px; } /* -- Bold: Text overrides -- */ body[data-template="bold"] h1, body[data-template="bold"] h2, body[data-template="bold"] h3, body[data-template="bold"] h4, body[data-template="bold"] h5, body[data-template="bold"] h6 { color: #fff; } body[data-template="bold"] p { color: #a0a0c8; } body[data-template="bold"] a { color: var(--color-secondary); } body[data-template="bold"] a:hover { color: var(--color-secondary-light); } body[data-template="bold"] .text-dark { color: #fff !important; } body[data-template="bold"] .text-muted { color: #7878a8 !important; } body[data-template="bold"] .text-primary { color: var(--color-secondary) !important; } /* -- Bold: Scrollbar -- */ body[data-template="bold"] ::-webkit-scrollbar { width: 8px; } body[data-template="bold"] ::-webkit-scrollbar-track { background: #0f0f23; } body[data-template="bold"] ::-webkit-scrollbar-thumb { background: #e94560; border-radius: 4px; } body[data-template="bold"] ::-webkit-scrollbar-thumb:hover { background: #ff6b81; } /* -- Bold: Navbar -- */ body[data-template="bold"] .navbar-light { background: rgba(15,15,35,0.95) !important; backdrop-filter: blur(10px); } body[data-template="bold"] .navbar-light .navbar-nav .nav-link { color: #c8c8e8; } body[data-template="bold"] .navbar-light .navbar-nav .nav-link.active, body[data-template="bold"] .navbar-light .navbar-nav .nav-link:hover { color: var(--color-secondary); } /* -- Bold: Topbar -- */ body[data-template="bold"] .topbar-section { background: #0a0a1a !important; } /* -- Bold: Footer -- */ body[data-template="bold"] .footer { background: #0a0a1a; color: #a0a0c8; } body[data-template="bold"] .footer h5, body[data-template="bold"] .footer h6 { color: #fff; } body[data-template="bold"] .footer a { color: #a0a0c8; } body[data-template="bold"] .footer a:hover { color: var(--color-secondary); }