/* ========================================================================== Public job offers page themes Defines CSS custom properties per theme and utility classes that consume them. The active theme is set via data-theme on . ========================================================================== */ /* Default theme (blue-pink) — matches the original hardcoded colors */ [data-theme="default"] { --theme-hero-from: #1d4ed8; --theme-hero-via: #3b82f6; --theme-hero-to: #ec4899; --theme-accent: #ec4899; --theme-accent-dark: #db2777; --theme-blob-1: #ec4899; --theme-blob-2: #60a5fa; --theme-blob-1-light: #f9a8d4; --theme-blob-2-light: #bfdbfe; --theme-blob-3-light: #fce7f3; --theme-badge-bg: #dbeafe; --theme-badge-text: #1d4ed8; --theme-bg-from: #eff6ff; --theme-bg-to: #fce7f3; --theme-focus: #3b82f6; --theme-icon-from: #dbeafe; --theme-icon-to: #fce7f3; --theme-icon-hover-from: #3b82f6; --theme-icon-hover-to: #ec4899; --theme-card-hover-border: #bfdbfe; --theme-title-hover: #1d4ed8; --theme-form-header-from: #eff6ff; --theme-form-header-to: #fce7f3; --theme-section-icon: #3b82f6; --theme-icon-text: #2563eb; } /* Corporate theme (navy-slate) */ [data-theme="corporate"] { --theme-hero-from: #1e293b; --theme-hero-via: #334155; --theme-hero-to: #475569; --theme-accent: #475569; --theme-accent-dark: #334155; --theme-blob-1: #475569; --theme-blob-2: #64748b; --theme-blob-1-light: #cbd5e1; --theme-blob-2-light: #e2e8f0; --theme-blob-3-light: #f1f5f9; --theme-badge-bg: #e2e8f0; --theme-badge-text: #1e293b; --theme-bg-from: #f8fafc; --theme-bg-to: #f1f5f9; --theme-focus: #475569; --theme-icon-from: #e2e8f0; --theme-icon-to: #f1f5f9; --theme-icon-hover-from: #334155; --theme-icon-hover-to: #475569; --theme-card-hover-border: #cbd5e1; --theme-title-hover: #1e293b; --theme-form-header-from: #f8fafc; --theme-form-header-to: #f1f5f9; --theme-section-icon: #475569; --theme-icon-text: #334155; } /* Nature theme (green-teal) */ [data-theme="nature"] { --theme-hero-from: #065f46; --theme-hero-via: #059669; --theme-hero-to: #0d9488; --theme-accent: #0d9488; --theme-accent-dark: #0f766e; --theme-blob-1: #0d9488; --theme-blob-2: #34d399; --theme-blob-1-light: #99f6e4; --theme-blob-2-light: #d1fae5; --theme-blob-3-light: #ecfdf5; --theme-badge-bg: #d1fae5; --theme-badge-text: #065f46; --theme-bg-from: #ecfdf5; --theme-bg-to: #f0fdfa; --theme-focus: #059669; --theme-icon-from: #d1fae5; --theme-icon-to: #ccfbf1; --theme-icon-hover-from: #059669; --theme-icon-hover-to: #0d9488; --theme-card-hover-border: #a7f3d0; --theme-title-hover: #065f46; --theme-form-header-from: #ecfdf5; --theme-form-header-to: #f0fdfa; --theme-section-icon: #059669; --theme-icon-text: #047857; } /* Warm theme (orange-amber) */ [data-theme="warm"] { --theme-hero-from: #c2410c; --theme-hero-via: #ea580c; --theme-hero-to: #d97706; --theme-accent: #ea580c; --theme-accent-dark: #c2410c; --theme-blob-1: #f59e0b; --theme-blob-2: #fb923c; --theme-blob-1-light: #fde68a; --theme-blob-2-light: #fed7aa; --theme-blob-3-light: #fff7ed; --theme-badge-bg: #ffedd5; --theme-badge-text: #c2410c; --theme-bg-from: #fff7ed; --theme-bg-to: #fffbeb; --theme-focus: #ea580c; --theme-icon-from: #ffedd5; --theme-icon-to: #fef3c7; --theme-icon-hover-from: #ea580c; --theme-icon-hover-to: #d97706; --theme-card-hover-border: #fed7aa; --theme-title-hover: #c2410c; --theme-form-header-from: #fff7ed; --theme-form-header-to: #fffbeb; --theme-section-icon: #ea580c; --theme-icon-text: #c2410c; } /* Royal theme (violet) */ [data-theme="royal"] { --theme-hero-from: #6d28d9; --theme-hero-via: #8b5cf6; --theme-hero-to: #a78bfa; --theme-accent: #8b5cf6; --theme-accent-dark: #7c3aed; --theme-blob-1: #a78bfa; --theme-blob-2: #8b5cf6; --theme-blob-1-light: #ddd6fe; --theme-blob-2-light: #ede9fe; --theme-blob-3-light: #f5f3ff; --theme-badge-bg: #ede9fe; --theme-badge-text: #6d28d9; --theme-bg-from: #f5f3ff; --theme-bg-to: #ede9fe; --theme-focus: #8b5cf6; --theme-icon-from: #ede9fe; --theme-icon-to: #f5f3ff; --theme-icon-hover-from: #8b5cf6; --theme-icon-hover-to: #a78bfa; --theme-card-hover-border: #ddd6fe; --theme-title-hover: #6d28d9; --theme-form-header-from: #f5f3ff; --theme-form-header-to: #ede9fe; --theme-section-icon: #8b5cf6; --theme-icon-text: #7c3aed; } /* Ocean theme (indigo) */ [data-theme="ocean"] { --theme-hero-from: #312e81; --theme-hero-via: #4338ca; --theme-hero-to: #6366f1; --theme-accent: #4f46e5; --theme-accent-dark: #4338ca; --theme-blob-1: #6366f1; --theme-blob-2: #4f46e5; --theme-blob-1-light: #c7d2fe; --theme-blob-2-light: #e0e7ff; --theme-blob-3-light: #eef2ff; --theme-badge-bg: #e0e7ff; --theme-badge-text: #312e81; --theme-bg-from: #eef2ff; --theme-bg-to: #e0e7ff; --theme-focus: #4f46e5; --theme-icon-from: #e0e7ff; --theme-icon-to: #eef2ff; --theme-icon-hover-from: #4338ca; --theme-icon-hover-to: #6366f1; --theme-card-hover-border: #c7d2fe; --theme-title-hover: #312e81; --theme-form-header-from: #eef2ff; --theme-form-header-to: #e0e7ff; --theme-section-icon: #4f46e5; --theme-icon-text: #4338ca; } /* Crimson theme (rose) */ [data-theme="crimson"] { --theme-hero-from: #9f1239; --theme-hero-via: #e11d48; --theme-hero-to: #fb7185; --theme-accent: #e11d48; --theme-accent-dark: #be123c; --theme-blob-1: #fb7185; --theme-blob-2: #e11d48; --theme-blob-1-light: #fecdd3; --theme-blob-2-light: #ffe4e6; --theme-blob-3-light: #fff1f2; --theme-badge-bg: #ffe4e6; --theme-badge-text: #9f1239; --theme-bg-from: #fff1f2; --theme-bg-to: #ffe4e6; --theme-focus: #e11d48; --theme-icon-from: #ffe4e6; --theme-icon-to: #fff1f2; --theme-icon-hover-from: #e11d48; --theme-icon-hover-to: #fb7185; --theme-card-hover-border: #fecdd3; --theme-title-hover: #9f1239; --theme-form-header-from: #fff1f2; --theme-form-header-to: #ffe4e6; --theme-section-icon: #e11d48; --theme-icon-text: #be123c; } /* Sky theme (cyan) */ [data-theme="sky"] { --theme-hero-from: #0e7490; --theme-hero-via: #0891b2; --theme-hero-to: #22d3ee; --theme-accent: #0891b2; --theme-accent-dark: #0e7490; --theme-blob-1: #22d3ee; --theme-blob-2: #0891b2; --theme-blob-1-light: #a5f3fc; --theme-blob-2-light: #cffafe; --theme-blob-3-light: #ecfeff; --theme-badge-bg: #cffafe; --theme-badge-text: #0e7490; --theme-bg-from: #ecfeff; --theme-bg-to: #cffafe; --theme-focus: #0891b2; --theme-icon-from: #cffafe; --theme-icon-to: #ecfeff; --theme-icon-hover-from: #0891b2; --theme-icon-hover-to: #22d3ee; --theme-card-hover-border: #a5f3fc; --theme-title-hover: #0e7490; --theme-form-header-from: #ecfeff; --theme-form-header-to: #cffafe; --theme-section-icon: #0891b2; --theme-icon-text: #0e7490; } /* --- Utility classes --- */ .theme-hero-gradient { background: linear-gradient(to bottom right, var(--theme-hero-from), var(--theme-hero-via), var(--theme-hero-to)); } .theme-accent-gradient { background: linear-gradient(to right, var(--theme-accent), var(--theme-accent-dark)); } .theme-accent-gradient-r { background: linear-gradient(to right, var(--theme-hero-via), var(--theme-hero-to)); } .theme-body-bg { background: linear-gradient(to bottom right, var(--theme-bg-from), white, var(--theme-bg-to)); } .theme-badge { background-color: var(--theme-badge-bg); color: var(--theme-badge-text); } .theme-icon-gradient { background: linear-gradient(to bottom right, var(--theme-icon-from), var(--theme-icon-to)); } .theme-filter-icon-gradient { background: linear-gradient(to bottom right, var(--theme-hero-via), var(--theme-hero-to)); } .theme-form-header-bg { background: linear-gradient(to right, var(--theme-form-header-from), var(--theme-form-header-to)); } .theme-section-icon-gradient { background: linear-gradient(to bottom right, var(--theme-hero-via), var(--theme-hero-to)); } /* --- Job card hover states --- */ .theme-card:hover { border-color: var(--theme-card-hover-border); } .theme-card-title { color: #111827; /* gray-900 */ } .group:hover .theme-card-title { color: var(--theme-title-hover); } .theme-card-icon { background: linear-gradient(to bottom right, var(--theme-icon-from), var(--theme-icon-to)); } .group:hover .theme-card-icon { background: linear-gradient(to bottom right, var(--theme-icon-hover-from), var(--theme-icon-hover-to)); } .theme-card-icon-svg { color: var(--theme-icon-text); } .group:hover .theme-card-icon-svg { color: white; } /* --- Focus ring for form inputs --- */ .theme-focus-ring:focus { border-color: var(--theme-focus); --tw-ring-color: var(--theme-focus); } /* --- Section icon color --- */ .theme-section-icon { color: var(--theme-section-icon); }