/** * TaskGon Marketing Site - 6 Responsive Themes * Apply by setting data-theme on : classic | ocean | sunset | forest | berry | midnight */ /* ========== Theme 1: Classic (default) ========== */ :root, [data-theme="classic"] { --st-primary: #0d6efd; --st-primary-rgb: 13, 110, 253; --st-primary-hover: #0b5ed7; --st-hero-bg: #ffffff; --st-section-bg: #ffffff; --st-section-alt-bg: #f8f9fa; --st-card-bg: #ffffff; --st-nav-bg: #ffffff; --st-nav-shadow: 0 1px 3px rgba(0,0,0,.08); --st-footer-bg: #f8f9fa; --st-text: #212529; --st-text-muted: #6c757d; --st-heading: #212529; --st-accent: #0d6efd; --st-cta-bg: #0d6efd; --st-cta-text: #ffffff; --st-border: #dee2e6; --st-card-border: #dee2e6; --st-badge-secondary: #6c757d; --st-badge-info: #0dcaf0; } /* ========== Theme 2: Ocean ========== */ [data-theme="ocean"] { --st-primary: #0d9488; --st-primary-rgb: 13, 148, 136; --st-primary-hover: #0f766e; --st-hero-bg: #f0fdfa; --st-section-bg: #ffffff; --st-section-alt-bg: #ccfbf1; --st-card-bg: #ffffff; --st-nav-bg: #f0fdfa; --st-nav-shadow: 0 1px 3px rgba(13,148,136,.12); --st-footer-bg: #ccfbf1; --st-text: #134e4a; --st-text-muted: #0f766e; --st-heading: #0f766e; --st-accent: #0d9488; --st-cta-bg: linear-gradient(135deg, #0d9488 0%, #0891b2 100%); --st-cta-text: #ffffff; --st-border: #99f6e4; --st-card-border: #5eead4; --st-badge-secondary: #0891b2; --st-badge-info: #22d3ee; } /* ========== Theme 3: Sunset ========== */ [data-theme="sunset"] { --st-primary: #ea580c; --st-primary-rgb: 234, 88, 12; --st-primary-hover: #c2410c; --st-hero-bg: #fff7ed; --st-section-bg: #ffffff; --st-section-alt-bg: #ffedd5; --st-card-bg: #ffffff; --st-nav-bg: #fff7ed; --st-nav-shadow: 0 1px 3px rgba(234,88,12,.12); --st-footer-bg: #ffedd5; --st-text: #431407; --st-text-muted: #9a3412; --st-heading: #c2410c; --st-accent: #ea580c; --st-cta-bg: linear-gradient(135deg, #ea580c 0%, #dc2626 100%); --st-cta-text: #ffffff; --st-border: #fed7aa; --st-card-border: #fdba74; --st-badge-secondary: #dc2626; --st-badge-info: #fb923c; } /* ========== Theme 4: Forest ========== */ [data-theme="forest"] { --st-primary: #059669; --st-primary-rgb: 5, 150, 105; --st-primary-hover: #047857; --st-hero-bg: #f0fdf4; --st-section-bg: #ffffff; --st-section-alt-bg: #dcfce7; --st-card-bg: #ffffff; --st-nav-bg: #f0fdf4; --st-nav-shadow: 0 1px 3px rgba(5,150,105,.12); --st-footer-bg: #dcfce7; --st-text: #14532d; --st-text-muted: #166534; --st-heading: #047857; --st-accent: #059669; --st-cta-bg: linear-gradient(135deg, #059669 0%, #047857 100%); --st-cta-text: #ffffff; --st-border: #bbf7d0; --st-card-border: #86efac; --st-badge-secondary: #15803d; --st-badge-info: #34d399; } /* ========== Theme 5: Berry ========== */ [data-theme="berry"] { --st-primary: #7c3aed; --st-primary-rgb: 124, 58, 237; --st-primary-hover: #6d28d9; --st-hero-bg: #faf5ff; --st-section-bg: #ffffff; --st-section-alt-bg: #ede9fe; --st-card-bg: #ffffff; --st-nav-bg: #faf5ff; --st-nav-shadow: 0 1px 3px rgba(124,58,237,.12); --st-footer-bg: #ede9fe; --st-text: #3b0764; --st-text-muted: #6b21a8; --st-heading: #6d28d9; --st-accent: #7c3aed; --st-cta-bg: linear-gradient(135deg, #7c3aed 0%, #db2777 100%); --st-cta-text: #ffffff; --st-border: #ddd6fe; --st-card-border: #c4b5fd; --st-badge-secondary: #a855f7; --st-badge-info: #e879f9; } /* ========== Theme 6: Midnight ========== */ [data-theme="midnight"] { --st-primary: #6366f1; --st-primary-rgb: 99, 102, 241; --st-primary-hover: #4f46e5; --st-hero-bg: #0f172a; --st-section-bg: #1e293b; --st-section-alt-bg: #334155; --st-card-bg: #1e293b; --st-nav-bg: #0f172a; --st-nav-shadow: 0 1px 3px rgba(0,0,0,.3); --st-footer-bg: #0f172a; --st-text: #f1f5f9; --st-text-muted: #94a3b8; --st-heading: #e2e8f0; --st-accent: #818cf8; --st-cta-bg: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); --st-cta-text: #ffffff; --st-border: #475569; --st-card-border: #475569; --st-badge-secondary: #64748b; --st-badge-info: #38bdf8; } /* ========== Global theme-aware styles (used by layout + index) ========== */ body.site-marketing { font-family: 'Inter', sans-serif; color: var(--st-text); background: var(--st-section-bg); } .site-marketing .site-nav { background: var(--st-nav-bg) !important; box-shadow: var(--st-nav-shadow); } .site-marketing .site-nav .nav-link { color: var(--st-text) !important; } .site-marketing .site-nav .nav-link:hover { color: var(--st-primary) !important; } .site-marketing .navbar-brand { color: var(--st-heading) !important; } .site-marketing .btn-primary { background-color: var(--st-primary); border-color: var(--st-primary); } .site-marketing .btn-primary:hover { background-color: var(--st-primary-hover); border-color: var(--st-primary-hover); } .site-marketing .btn-outline-primary { color: var(--st-primary); border-color: var(--st-primary); } .site-marketing .btn-outline-primary:hover { background-color: var(--st-primary); color: #fff; border-color: var(--st-primary); } .site-marketing .text-muted { color: var(--st-text-muted) !important; } .site-marketing .text-primary { color: var(--st-accent) !important; } .site-marketing .bg-primary { background: var(--st-cta-bg) !important; border: none !important; } .site-marketing footer.bg-light { background: var(--st-footer-bg) !important; border-color: var(--st-border) !important; } .site-marketing footer .text-muted { color: var(--st-text-muted) !important; } .site-marketing footer a.text-muted:hover { color: var(--st-primary) !important; } /* Theme switcher dropdown */ .site-marketing .theme-switcher .dropdown-menu { max-height: 70vh; overflow-y: auto; } .site-marketing .theme-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; } [data-theme="classic"] .theme-dot-classic { background: #0d6efd; } [data-theme="ocean"] .theme-dot-ocean { background: #0d9488; } [data-theme="sunset"] .theme-dot-sunset { background: #ea580c; } [data-theme="forest"] .theme-dot-forest { background: #059669; } [data-theme="berry"] .theme-dot-berry { background: #7c3aed; } [data-theme="midnight"] .theme-dot-midnight { background: #6366f1; } .theme-dot-classic { background: #0d6efd; } .theme-dot-ocean { background: #0d9488; } .theme-dot-sunset { background: #ea580c; } .theme-dot-forest { background: #059669; } .theme-dot-berry { background: #7c3aed; } .theme-dot-midnight { background: #6366f1; } /* Section backgrounds for homepage */ .site-marketing .st-hero { background: var(--st-hero-bg) !important; color: var(--st-text); } .site-marketing .st-hero .text-muted { color: var(--st-text-muted) !important; } .site-marketing .st-section { background: var(--st-section-bg) !important; color: var(--st-text); } .site-marketing .st-section-alt { background: var(--st-section-alt-bg) !important; color: var(--st-text); } .site-marketing .st-cta { background: var(--st-cta-bg) !important; color: var(--st-cta-text) !important; border: none !important; } .site-marketing .st-cta h2 { color: var(--st-cta-text) !important; } .site-marketing .st-cta .lead { color: var(--st-cta-text) !important; opacity: .95; } .site-marketing .st-cta .btn-light { background: rgba(255,255,255,.95) !important; color: var(--st-primary) !important; border: none !important; } .site-marketing .st-card { background: var(--st-card-bg) !important; border-color: var(--st-card-border) !important; color: var(--st-text); } .site-marketing .st-card .card-title { color: var(--st-heading); } .site-marketing .st-card .text-muted { color: var(--st-text-muted) !important; } .site-marketing .st-card-accent { background: var(--st-primary) !important; color: #fff !important; border: none !important; } .site-marketing .st-card-accent .card-title { color: #fff; } .site-marketing .st-card-accent .card-text { color: rgba(255,255,255,.9); } .site-marketing .st-box { background: var(--st-card-bg); border: 1px solid var(--st-card-border); color: var(--st-text); } .site-marketing .st-box .fw-bold { color: var(--st-heading); } .site-marketing .st-pricing-card { background: var(--st-card-bg) !important; border-color: var(--st-card-border) !important; } .site-marketing .st-pricing-card .card-title { color: var(--st-heading); } .site-marketing .st-pricing-card .text-muted { color: var(--st-text-muted) !important; } .site-marketing .badge.bg-primary { background: var(--st-primary) !important; } .site-marketing .badge.bg-secondary { background: var(--st-badge-secondary) !important; } .site-marketing .badge.bg-info { background: var(--st-badge-info) !important; color: #000 !important; } .site-marketing .badge.bg-info.text-dark { color: #000 !important; } @media (max-width: 991.98px) { .site-marketing .theme-switcher .dropdown-menu { max-height: 60vh; } }