/** * Theme Variants CSS * Structural style overrides controlled by data-* attributes on * Applied by theme-loader.js based on the active template's styles config */ /* ============================================ Button Style Variants ============================================ */ [data-btn-style="pill"] .tw-btn, [data-btn-style="pill"] .booking-btn, [data-btn-style="pill"] .btn-primary, [data-btn-style="pill"] .book-now-btn, [data-btn-style="pill"] .booking-submit-btn { border-radius: 50px !important; } [data-btn-style="square"] .tw-btn, [data-btn-style="square"] .booking-btn, [data-btn-style="square"] .btn-primary, [data-btn-style="square"] .book-now-btn, [data-btn-style="square"] .booking-submit-btn { border-radius: 0 !important; } /* rounded is default — no override needed */ /* ============================================ Card Style Variants ============================================ */ [data-card-style="bordered"] .service-item, [data-card-style="bordered"] .staff-card, [data-card-style="bordered"] .review-item, [data-card-style="bordered"] .booking-card, [data-card-style="bordered"] .sidebar-card { box-shadow: none !important; border: 1px solid var(--tw-gray-200) !important; } [data-card-style="flat"] .service-item, [data-card-style="flat"] .staff-card, [data-card-style="flat"] .review-item, [data-card-style="flat"] .booking-card, [data-card-style="flat"] .sidebar-card { box-shadow: none !important; border: none !important; background: var(--tw-gray-100) !important; } /* shadow is default — no override needed */ /* ============================================ Header Style Variants ============================================ */ [data-header-style="sticky-transparent"] .tw-header { background: transparent !important; box-shadow: none !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-header-style="sticky-transparent"] .tw-header.scrolled { background: var(--tw-header-bg, rgba(255,255,255,0.95)) !important; box-shadow: var(--tw-shadow) !important; } [data-header-style="static"] .tw-header { position: relative !important; } /* sticky-solid is default — no override needed */ /* ============================================ Hero Style Variants ============================================ */ [data-hero-style="gradient"] .tw-hero-slider, [data-hero-style="gradient"] .slider-container { display: none !important; } [data-hero-style="gradient"] .tw-hero-section { position: relative; min-height: 350px; } [data-hero-style="gradient"] .tw-hero-section::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--tw-primary), var(--tw-accent)); border-radius: var(--tw-radius-lg); z-index: 0; } [data-hero-style="gradient"] .tw-hero-section > * { position: relative; z-index: 1; } [data-hero-style="static"] .slider-prev, [data-hero-style="static"] .slider-next, [data-hero-style="static"] .slider-dots, [data-hero-style="static"] .slider-counter { display: none !important; } /* slider is default — no override needed */ /* ============================================ Heading Font Override ============================================ */ h1, h2, h3, h4, .section-title, .booking-card h2, .tw-hero-section h1 { font-family: var(--tw-font-heading, inherit); } /* ============================================ Footer Theme Colors ============================================ */ .tw-footer, footer { background: var(--tw-footer-bg, var(--tw-gray-900)) !important; color: var(--tw-footer-text, #ffffff) !important; } .tw-footer a, footer a { color: var(--tw-footer-text, #ffffff) !important; opacity: 0.8; } .tw-footer a:hover, footer a:hover { opacity: 1; } /* ============================================ Section Transition for Reordering ============================================ */ [data-section] { transition: opacity 0.3s ease; } [data-section].section-hidden { display: none !important; }