/** * FRONTEND COLOR SCHEME SYSTEM (3 BRIGHTER ADMIN-CONTROLLED THEMES) * Applied strictly to public frontend pages via data-theme attribute on . * Does NOT alter Admin panel CSS or admin pages. */ /* ========================================================================== 1. THEME VARIABLES DEFINITION ========================================================================== */ /* Default / Theme 1: Royal Blue & Saffron (नील एवं केसरिया) */ :root, [data-theme="royal_blue"] { --color-primary: #1565C0; --color-primary-dark: #0D47A1; --color-secondary: #FF8F00; --color-accent: #FFC107; --color-bright-accent: #FFB300; --color-bg: #F7FAFF; --color-bg-alt: #EAF2FF; --color-surface: #FFFFFF; --color-text: #172033; --color-text-muted: #5E6B7A; --color-border: #D6E4F5; --color-success: #2E7D32; --color-danger: #D32F2F; } /* Theme 2: Emerald Green & Sunshine (हरित एवं सुनहरा) */ [data-theme="emerald_sunshine"] { --color-primary: #00897B; --color-primary-dark: #00695C; --color-secondary: #F9A825; --color-accent: #FFD54F; --color-bright-accent: #26A69A; --color-bg: #F6FFFC; --color-bg-alt: #E6F7F2; --color-surface: #FFFFFF; --color-text: #17352F; --color-text-muted: #61736F; --color-border: #CFE9E2; --color-success: #2E7D32; --color-danger: #D32F2F; } /* Theme 3: Violet & Coral (बैंगनी एवं प्रवाल) */ [data-theme="violet_coral"] { --color-primary: #6A1B9A; --color-primary-dark: #4A148C; --color-secondary: #F4511E; --color-accent: #FFB300; --color-bright-accent: #EC407A; --color-bg: #FCF8FF; --color-bg-alt: #F2E8FA; --color-surface: #FFFFFF; --color-text: #2B2133; --color-text-muted: #6F6375; --color-border: #E5D8EC; --color-success: #388E3C; --color-danger: #D32F2F; } /* ========================================================================== 2. PUBLIC FRONTEND THEME OVERRIDES ========================================================================== */ /* Base Page & Backgrounds */ html[data-theme] body, [data-theme] body { background-color: var(--color-bg) !important; color: var(--color-text); } [data-theme] .bg-cream, [data-theme] .bg-page-bg, [data-theme] [class*="bg-page-bg"], [data-theme] .bg-background, [data-theme] [class*="bg-background"], [data-theme] .bg-\[\#FFF8F2\], [data-theme] .bg-\[\#fff8f8\], [data-theme] .bg-\[\#fff0f3\] { background-color: var(--color-bg) !important; } [data-theme] .bg-section-alt, [data-theme] [class*="bg-section-alt"], [data-theme] .bg-warm-beige, [data-theme] [class*="bg-warm-beige"], [data-theme] .bg-warm-cream, [data-theme] .bg-warm-peach, [data-theme] .bg-surface-container-low, [data-theme] [class*="bg-surface-container-low"], [data-theme] .bg-surface-container, [data-theme] [class*="bg-surface-container"], [data-theme] .bg-surface-container-high, [data-theme] [class*="bg-surface-container-high"], [data-theme] .bg-surface-container-highest, [data-theme] [class*="bg-surface-container-highest"], [data-theme] .bg-surface-variant, [data-theme] .bg-surface-dim, [data-theme] .bg-\[\#F3E6DA\], [data-theme] .bg-\[\#F9EFE7\], [data-theme] .bg-\[\#FAECE4\], [data-theme] .bg-\[\#fff0f3\], [data-theme] .bg-\[\#fce9ed\], [data-theme] .bg-\[\#f6e4e8\], [data-theme] .bg-\[\#f0dee2\], [data-theme] .bg-\[\#e7d6da\] { background-color: var(--color-bg-alt) !important; } [data-theme] .bg-surface, [data-theme] .bg-surface-container-lowest, [data-theme] [class*="bg-surface-container-lowest"], [data-theme] .bg-surface-bright, [data-theme] .bg-white, [data-theme] .bg-\[\#FFFFFF\] { background-color: var(--color-surface) !important; } /* Primary Backgrounds */ [data-theme] .bg-primary, [data-theme] .bg-burgundy, [data-theme] .bg-primary-container, [data-theme] .bg-\[\#7A1F3D\] { background-color: var(--color-primary) !important; } /* Primary Dark Backgrounds (Header, Footer, Overlays) */ [data-theme] .bg-primary-dark, [data-theme] .bg-wine, [data-theme] .bg-\[\#4B1530\] { background-color: var(--color-primary-dark) !important; } /* Gradient Overlays & Banners Dynamic Theme Adaptation */ [data-theme] .from-surface-container-low, [data-theme] [class*="from-surface-container-low"], [data-theme] .from-surface-container, [data-theme] [class*="from-surface-container"], [data-theme] .from-warm-beige, [data-theme] [class*="from-warm-beige"] { --tw-gradient-from: var(--color-bg-alt) !important; --tw-gradient-to: rgba(234, 242, 255, 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } [data-theme] .via-surface, [data-theme] [class*="via-surface"] { --tw-gradient-via: var(--color-bg) !important; } [data-theme] .to-background, [data-theme] [class*="to-background"], [data-theme] .to-surface, [data-theme] [class*="to-surface"] { --tw-gradient-to: var(--color-bg) !important; } [data-theme] .from-wine, [data-theme] .from-wine\/70, [data-theme] .from-wine\/80 { --tw-gradient-from: var(--color-primary-dark) !important; } [data-theme] .via-burgundy { --tw-gradient-via: var(--color-primary) !important; } [data-theme] .to-burgundy, [data-theme] .to-wine { --tw-gradient-to: var(--color-primary-dark) !important; } [data-theme] .bg-gradient-to-br, [data-theme] .bg-gradient-to-r, [data-theme] .bg-gradient-to-t, [data-theme] .bg-gradient-to-b, [data-theme] .bg-gradient-to-bl, [data-theme] .bg-gradient-to-tr, [data-theme] .bg-gradient-to-tl { --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } [data-theme] .bg-gradient-to-br.from-wine.to-burgundy, [data-theme] .bg-gradient-to-r.from-wine.via-burgundy.to-wine, [data-theme] .bg-gradient-to-b.from-wine.via-burgundy.to-wine, [data-theme] .bg-gradient-to-b.from-wine, [data-theme] .bg-gradient-to-br.from-wine { background-image: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%) !important; } /* Secondary Backgrounds (Saffron / Sunshine / Coral) */ [data-theme] .bg-secondary, [data-theme] .bg-terracotta, [data-theme] .bg-\[\#C56A4A\] { background-color: var(--color-secondary) !important; } /* Accent Backgrounds */ [data-theme] .bg-accent, [data-theme] .bg-gold, [data-theme] .bg-\[\#D6A84F\] { background-color: var(--color-accent) !important; } /* Text Colors */ [data-theme] .text-charcoal, [data-theme] .text-\[\#2D2326\], [data-theme] .prose-trust { color: var(--color-text) !important; } [data-theme] .text-muted-text, [data-theme] .text-\[\#74666A\] { color: var(--color-text-muted) !important; } [data-theme] .text-primary, [data-theme] [class*="text-primary"], [data-theme] .text-burgundy, [data-theme] [class*="text-burgundy"], [data-theme] .text-wine, [data-theme] [class*="text-wine"], [data-theme] .text-\[\#7A1F3D\] { color: var(--color-primary) !important; } [data-theme] .text-primary-dark, [data-theme] .text-\[\#4B1530\] { color: var(--color-primary-dark) !important; } [data-theme] .text-secondary, [data-theme] [class*="text-secondary"], [data-theme] .text-terracotta, [data-theme] [class*="text-terracotta"], [data-theme] .text-\[\#C56A4A\] { color: var(--color-secondary) !important; } [data-theme] .text-gold, [data-theme] .text-gold-accent, [data-theme] .text-accent, [data-theme] .text-\[\#D6A84F\] { color: var(--color-secondary) !important; } /* Border Colors */ [data-theme] .border-card-border, [data-theme] [class*="border-card-border"], [data-theme] .border-warm-border, [data-theme] [class*="border-warm-border"], [data-theme] .border-\[\#E8D8CF\] { border-color: var(--color-border) !important; } [data-theme] .border-primary, [data-theme] [class*="border-primary"], [data-theme] .border-burgundy, [data-theme] [class*="border-burgundy"], [data-theme] .border-\[\#7A1F3D\] { border-color: var(--color-primary) !important; } [data-theme] .border-secondary, [data-theme] [class*="border-secondary"], [data-theme] .border-terracotta, [data-theme] [class*="border-terracotta"], [data-theme] .border-\[\#C56A4A\] { border-color: var(--color-secondary) !important; } [data-theme] .border-gold, [data-theme] .border-accent, [data-theme] .border-\[\#D6A84F\] { border-color: var(--color-secondary) !important; } /* Selection Highlight */ [data-theme] ::selection { background-color: var(--color-bg-alt); color: var(--color-primary-dark); } /* Focus Ring */ [data-theme] :focus-visible { outline-color: var(--color-primary) !important; } /* Headings & Links */ [data-theme] h1, [data-theme] h2, [data-theme] h3, [data-theme] h4 { color: inherit; } [data-theme] a.text-burgundy:hover, [data-theme] a.text-primary:hover, [data-theme] .prose-trust a { color: var(--color-primary); } /* Responsive Header Navigation display & spacing rules */ @media (min-width: 1024px) { header nav[aria-label="मुख्य नेविगेशन"] { display: flex !important; align-items: center !important; margin-right: auto !important; } header button[data-drawer-open] { display: none !important; } } /* Medium Screen Laptops (1024px to 1279px) */ @media (min-width: 1024px) and (max-width: 1279.98px) { header nav[aria-label="मुख्य नेविगेशन"] { gap: 0.35rem !important; margin-left: 0.75rem !important; } header nav[aria-label="मुख्य नेविगेशन"] a, header nav[aria-label="मुख्य नेविगेशन"] button[data-dropdown-trigger] { padding: 0.3rem 0.45rem !important; font-size: 0.8125rem !important; } header a[href*="volunteer"] { display: none !important; } } /* Large Screens & Standard Laptops (1280px to 1535px) */ @media (min-width: 1280px) and (max-width: 1535.98px) { header nav[aria-label="मुख्य नेविगेशन"] { gap: 0.75rem !important; margin-left: 1.25rem !important; } header nav[aria-label="मुख्य नेविगेशन"] a, header nav[aria-label="मुख्य नेविगेशन"] button[data-dropdown-trigger] { padding: 0.35rem 0.55rem !important; font-size: 0.875rem !important; } header a[href*="volunteer"] { display: inline-flex !important; } } /* Ultra-Wide Screens (1536px+) */ @media (min-width: 1536px) { header nav[aria-label="मुख्य नेविगेशन"] { gap: 1.25rem !important; margin-left: 2rem !important; } header nav[aria-label="मुख्य नेविगेशन"] a, header nav[aria-label="मुख्य नेविगेशन"] button[data-dropdown-trigger] { padding: 0.4rem 0.65rem !important; font-size: 0.9375rem !important; } header a[href*="volunteer"] { display: inline-flex !important; } } @media (max-width: 1023.98px) { header nav[aria-label="मुख्य नेविगेशन"] { display: none !important; } header button[data-drawer-open] { display: inline-flex !important; } header a[href*="volunteer"] { display: none !important; } } /* Navigation Link Styling & Spacing Base */ header nav[aria-label="मुख्य नेविगेशन"] a, header nav[aria-label="मुख्य नेविगेशन"] button[data-dropdown-trigger] { font-weight: 600 !important; border-radius: 0.5rem !important; white-space: nowrap !important; flex-shrink: 0 !important; transition: all 0.2s ease-in-out !important; } header nav[aria-label="मुख्य नेविगेशन"] a:hover, header nav[aria-label="मुख्य नेविगेशन"] button[data-dropdown-trigger]:hover { background-color: rgba(21, 101, 192, 0.07) !important; } [data-theme="emerald_sunshine"] header nav[aria-label="मुख्य नेविगेशन"] a:hover, [data-theme="emerald_sunshine"] header nav[aria-label="मुख्य नेविगेशन"] button[data-dropdown-trigger]:hover { background-color: rgba(0, 137, 123, 0.07) !important; } [data-theme="violet_coral"] header nav[aria-label="मुख्य नेविगेशन"] a:hover, [data-theme="violet_coral"] header nav[aria-label="मुख्य नेविगेशन"] button[data-dropdown-trigger]:hover { background-color: rgba(106, 27, 154, 0.07) !important; } [data-theme] header nav a.border-burgundy, [data-theme] header nav button.border-burgundy { border-color: var(--color-primary) !important; color: var(--color-primary) !important; } [data-theme] header nav a:hover, [data-theme] header nav button:hover { color: var(--color-primary) !important; } [data-theme] .nav-dropdown { border-color: var(--color-border) !important; background-color: var(--color-surface) !important; } [data-theme] .drawer-panel { background-color: var(--color-bg) !important; } /* Buttons */ [data-theme] .btn-primary, [data-theme] button.bg-primary, [data-theme] a.bg-primary, [data-theme] button.bg-burgundy, [data-theme] a.bg-burgundy { background-color: var(--color-primary) !important; color: #ffffff !important; } [data-theme] .btn-primary:hover, [data-theme] button.bg-primary:hover, [data-theme] a.bg-primary:hover, [data-theme] button.bg-burgundy:hover, [data-theme] a.bg-burgundy:hover { background-color: var(--color-primary-dark) !important; } [data-theme] .btn-secondary, [data-theme] button.bg-secondary, [data-theme] a.bg-secondary { background-color: var(--color-secondary) !important; color: #ffffff !important; } [data-theme] .btn-accent, [data-theme] button.bg-gold, [data-theme] a.bg-gold { background-color: var(--color-secondary) !important; color: #ffffff !important; } /* Form Inputs Focus & Borders */ [data-theme] input:focus, [data-theme] select:focus, [data-theme] textarea:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.12) !important; } /* Form Input Icon Positioning & Padding Fixes */ .relative > .material-symbols-outlined:first-child, .input-icon-left { position: absolute !important; left: 0.85rem !important; top: 50% !important; transform: translateY(-50%) !important; pointer-events: none !important; font-size: 1.25rem !important; color: var(--color-text-muted) !important; z-index: 10 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 1.5rem !important; height: 1.5rem !important; } .relative > input[class*="pl-"], .relative > select[class*="pl-"], .input-with-icon-left, input.pl-11, select.pl-11, .pl-11 { padding-left: 2.85rem !important; } .relative > select.pr-10, select.pr-10, .pr-10 { padding-right: 2.5rem !important; } /* Blockquotes */ [data-theme] .prose-trust blockquote { border-left-color: var(--color-secondary) !important; background-color: var(--color-bg-alt) !important; color: var(--color-primary-dark) !important; } /* Active Pagination & Filters */ [data-theme] .pagination .is-active, [data-theme] .filter-btn.is-active { background-color: var(--color-primary) !important; color: #ffffff !important; border-color: var(--color-primary) !important; } /* Footer Theme Adaptation */ [data-theme] footer, [data-theme] .site-footer { background-color: var(--color-primary-dark) !important; color: rgba(255, 255, 255, 0.9); } [data-theme] footer a:hover { color: var(--color-accent) !important; } /* Semantic Status Colors (Retained across all themes) */ [data-theme] .bg-success-green { background-color: var(--color-success) !important; } [data-theme] .text-success-green { color: var(--color-success) !important; } [data-theme] .border-success-green { border-color: var(--color-success) !important; }