:root { --brand-50: #f0fdfa; --brand-100: #ccfbf1; --brand-200: #99f6e4; --brand-300: #5eead4; --brand-400: #2dd4bf; --brand-500: #14b8a6; --brand-600: #0d9488; --brand-700: #0f766e; --brand-800: #115e59; --brand-900: #134e4a; --accent-50: #eef2ff; --accent-100: #e0e7ff; --accent-300: #a5b4fc; --accent-400: #818cf8; --accent-500: #6366f1; --accent-600: #4f46e5; --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; --slate-950: #020617; --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-200: #fde68a; --amber-300: #fcd34d; --amber-400: #fbbf24; --amber-500: #f59e0b; --amber-600: #d97706; --amber-700: #b45309; --rose-50: #fff1f2; --rose-100: #ffe4e6; --rose-200: #fecdd3; --rose-400: #fb7185; --rose-500: #f43f5e; --rose-600: #e11d48; --blue-50: #eff6ff; --blue-100: #dbeafe; --blue-200: #bfdbfe; --blue-400: #60a5fa; --blue-500: #3b82f6; --blue-600: #2563eb; --purple-50: #faf5ff; --purple-100: #f3e8ff; --purple-200: #e9d5ff; --purple-400: #c084fc; --purple-500: #a855f7; --purple-600: #9333ea; --emerald-200: #a7f3d0; --emerald-400: #34d399; --emerald-500: #10b981; --bg-color: #fafaf9; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.07); --shadow-glass-dark: 0 8px 32px 0 rgba(0, 0, 0, 0.3); --shadow-float: 0 20px 40px -10px rgba(0,0,0,0.08); --shadow-float-dark: 0 20px 40px -10px rgba(0,0,0,0.4); --shadow-glow: 0 0 25px rgba(20, 184, 166, 0.4); --shadow-glow-accent: 0 0 25px rgba(99, 102, 241, 0.4); --glass-bg: rgba(255, 255, 255, 0.85); --glass-border: 1px solid rgba(255, 255, 255, 0.8); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } .jsjobs_scroll_smooth { scroll-behavior: smooth; } body.site { font-family: 'Plus Jakarta Sans', sans-serif !important; background-color: var(--bg-color) !important; color: var(--slate-800); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; line-height: 1.5; font-size: 16px !important; } body.site h1, body.site .h1, body.site h2, body.site .h2, body.site h3, body.site .h3, body.site h4, body.site .h4, body.site h5, body.site .h5, body.site h6, body.site .h6{ font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 800 !important; } body.site h2.jsnj-module-title, body.site h2.jsnr-module-title, body.site h2.jsgj-module-title, body.site h2.jsfj-module-title{font-size: 2.5em;} ::selection { background-color: var(--brand-500); color: white; } a { text-decoration: none; color: inherit; } ul, ol { list-style: none; } button, input, select { font-family: inherit; border: none; outline: none; background: transparent; } button { cursor: pointer; } img { max-width: 100%; height: auto; display: block; } /* Animations */ @keyframes jsjobs_float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } @keyframes jsjobs_blob { 0% { transform: translate(0px, 0px) scale(1); } 33% { transform: translate(30px, -50px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } 100% { transform: translate(0px, 0px) scale(1); } } @keyframes jsjobs_pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } @keyframes jsjobs_ping { 75%, 100% { transform: scale(2); opacity: 0; } } .jsjobs_anim_float_slow { animation: jsjobs_float 6s ease-in-out infinite; } .jsjobs_anim_blob { animation: jsjobs_blob 7s infinite; } .jsjobs_anim_blob_delay { animation: jsjobs_blob 7s infinite; animation-delay: 2s; } .jsjobs_anim_pulse_slow { animation: jsjobs_pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .jsjobs_anim_ping { animation: jsjobs_ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } /* Reveal Animation Classes */ .jsjobs_reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); } .jsjobs_reveal_left { opacity: 0; transform: translateX(-40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); } .jsjobs_reveal_right { opacity: 0; transform: translateX(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); } .jsjobs_reveal_scale { opacity: 0; transform: scale(0.9); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); } .jsjobs_reveal.jsjobs_active, .jsjobs_reveal_left.jsjobs_active, .jsjobs_reveal_right.jsjobs_active, .jsjobs_reveal_scale.jsjobs_active { opacity: 1; transform: translate(0) scale(1); } .jsjobs_delay_100 { transition-delay: 100ms; } .jsjobs_delay_200 { transition-delay: 200ms; } .jsjobs_delay_300 { transition-delay: 300ms; } .jsjobs_delay_400 { transition-delay: 400ms; } .jsjobs_mesh_bg_light { background-image: radial-gradient(at 10% 20%, hsla(171, 80%, 94%, 1) 0px, transparent 50%), radial-gradient(at 90% 10%, hsla(228, 89%, 95%, 1) 0px, transparent 50%), radial-gradient(at 50% 80%, hsla(190, 80%, 95%, 1) 0px, transparent 50%); } .jsjobs_text_clip { color: transparent; -webkit-background-clip: text; background-clip: text; } .jsjobs_glass_nav { background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.4); } .jsjobs_glass_nav.jsjobs_scrolled { background: rgba(255, 255, 255, 0.85); box-shadow: var(--shadow-glass); } .jsjobs_glass_card { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 6px 31px 12px rgba(0,0,0,0.07);text-align: start;} .jsjobs_glass_dark { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.05); } .jsjobs_shape_top { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } .jsjobs_shape_top svg { position: relative; display: block; width: calc(100% + 1.3px); height: 60px; } .jsjobs_shape_top .shape-fill { fill: #fafaf9; } /* Layout Containers */ .jsjobs_container { width: 100%; max-width: 80em; margin-left: auto; margin-right: auto; padding-left: 1em; padding-right: 1em; } @media (min-width: 640px) { .jsjobs_container { padding-left: 1.5em; padding-right: 1.5em; } } @media (min-width: 1024px) { .jsjobs_container { padding-left: 2em; padding-right: 2em; } } .jsjobs_max_w_6xl { max-width: 72em; margin-left: auto; margin-right: auto; } .jsjobs_max_w_5xl { max-width: 65em; margin-left: auto; margin-right: auto; } .jsjobs_max_w_4xl { max-width: 56em; margin-left: auto; margin-right: auto; } .jsjobs_max_w_3xl { max-width: 48em; margin-left: auto; margin-right: auto; } .jsjobs_max_w_2xl { max-width: 42em; margin-left: auto; margin-right: auto; } .jsjobs_header { position: fixed; width: 100%; z-index: 50; padding-left: 1em; padding-right: 1em; top: 1em; transition: all 0.3s; } @media (min-width: 640px) { .jsjobs_header { padding-left: 1.5em; padding-right: 1.5em; } } .jsjobs_nav { border-radius: 1em; transition: all 0.3s; box-shadow: var(--shadow-sm); } .jsjobs_nav_inner { padding-left: 1.5em; padding-right: 1.5em; } .jsjobs_nav_flex { display: flex; justify-content: space-between; align-items: center; height: 4em; } .jsjobs_logo_wrap { display: flex; align-items: center; gap: 0.75em; cursor: pointer; } .jsjobs_logo_icon { width: 2.5em; height: 2.5em; background: linear-gradient(to bottom right, var(--brand-400), var(--brand-600)); border-radius: 0.75em; display: flex; align-items: center; justify-content: center; color: white; box-shadow: var(--shadow-md); font-size: 1.5em; } .jsjobs_logo_text { font-weight: 800; font-size: 1.25em; color: var(--slate-900); letter-spacing: -0.025em; line-height: 1.75em; } .jsjobs_nav_links { display: none; align-items: center; gap: 2em; } @media (min-width: 768px) { .jsjobs_nav_links { display: flex; } } .jsjobs_nav_link { font-weight: 600; font-size: 0.875em; color: var(--slate-600); transition: color 0.3s; } .jsjobs_nav_link:hover { color: var(--brand-600); } .jsjobs_nav_btn_wrap { display: flex; align-items: center; gap: 1em; } .jsjobs_nav_btn { background-color: var(--slate-900); color: white; padding: 0.625em 1.25em; border-radius: 0.75em; font-weight: 700; font-size: 0.875em; transition: all 0.3s; box-shadow: var(--shadow-md); display: inline-block; } .jsjobs_nav_btn:hover { background-color: var(--brand-600); transform: translateY(-2px); } .jsjobs_hero { padding-top: 10em; padding-bottom: 8em; position: relative; overflow: hidden; } @media (min-width: 1024px) { .jsjobs_hero { padding-top: 13em; padding-bottom: 10em; } } .jsjobs_hero_blob_1 { position: absolute; top: 5em; left: 2.5em; width: 18em; height: 18em; background-color: rgba(94, 234, 212, 0.3); border-radius: 9999px; mix-blend-mode: multiply; filter: blur(64px); } .jsjobs_hero_blob_2 { position: absolute; top: 10em; right: 2.5em; width: 18em; height: 18em; background-color: rgba(165, 180, 252, 0.2); border-radius: 9999px; mix-blend-mode: multiply; filter: blur(64px); } .jsjobs_hero_content_wrap { position: relative; z-index: 10; } .jsjobs_hero_text_center { text-align: center; } .jsjobs_badge { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.5em 1em; border-radius: 9999px; background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(4px); color: var(--brand-700); font-weight: 700; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2em; border: 1px solid white; box-shadow: var(--shadow-sm); } .jsjobs_badge_dot_wrap { position: relative; display: flex; width: 0.5em; height: 0.5em; } .jsjobs_badge_dot_ping { position: absolute; display: inline-flex; width: 100%; height: 100%; border-radius: 9999px; background-color: var(--brand-400); opacity: 0.75; } .jsjobs_badge_dot { position: relative; display: inline-flex; width: 0.5em; height: 0.5em; border-radius: 9999px; background-color: var(--brand-500); } .jsjobs_hero_h1 { font-size: 3em; font-weight: 800; color: var(--slate-900); line-height: 1.1; margin-bottom: 15px; letter-spacing: -0.025em; } @media (min-width: 768px) { .jsjobs_hero_h1 { font-size: 3.75em; } } @media (min-width: 1024px) { .jsjobs_hero_h1 { font-size: 4.5em; } } .jsjobs_hero_gradient_text { background-image: linear-gradient(to right, var(--brand-600), var(--accent-500)); } .jsjobs_hero_p { font-size: 1.125em; color: var(--slate-600); font-weight: 500; line-height: 1.625; } .jsautoz_form .fieldwrapper{ display: flex;align-items: center;flex-wrap: wrap;} @media (min-width: 768px) { .jsjobs_hero_p { font-size: 1.25em; } } /* Search Form */ .jsjobs_search_wrapper { padding: 0.75em; border-radius: 1em; box-shadow: var(--shadow-float); transform: translateY(3em); position: relative; z-index: 20; } .jsjobs_search_flex { display: flex; flex-direction: column; gap: 0.75em; } @media (min-width: 768px) { .jsjobs_search_flex { flex-direction: row; } } .jsjobs_input_group { flex: 1; position: relative; } .jsjobs_input_group_hidden { display: none; } @media (min-width: 640px) { .jsjobs_input_group_hidden { display: block; } } .jsjobs_search_icon { position: absolute; left: 1em; top: 50%; transform: translateY(-50%); color: var(--slate-400); font-size: 1.25em; } .jsjobs_search_input { width: 100%; padding: 1em 1em 1em 3em; background-color: rgba(248, 250, 252, 0.5); border-radius: 0.75em; outline: none; border: 1px solid transparent; transition: all 0.3s; font-weight: 500; color: inherit; } .jsjobs_search_input:focus { background-color: white; border-color: transparent; box-shadow: 0 0 0 2px var(--brand-500); } .jsjobs_search_input::placeholder { color: #94a3b8; } .jsjobs_btn_search { background-image: linear-gradient(to right, var(--brand-500), var(--brand-600)); color: white; padding: 1em 2em; border-radius: 0.75em; font-weight: 700; transition: all 0.3s; box-shadow: var(--shadow-glow); white-space: nowrap; } .jsjobs_btn_search:hover { background-image: linear-gradient(to right, var(--brand-600), var(--brand-700)); } .jsjobs_stats { position: relative; z-index: 10; padding-bottom: 6em; padding-top: 2.5em; } .jsjobs_stats_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; } @media (min-width: 768px) { .jsjobs_stats_grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2em; } } .jsjobs_stat_item { border-radius: 1.5em; padding: 1.5em; text-align: center; transform: translateY(0); transition: transform 0.3s; } @media (min-width: 768px) { .jsjobs_stat_item { padding: 2em; } } .jsjobs_stat_item:hover { transform: translateY(-0.5em); } .jsjobs_stat_icon_box { width: 3em; height: 3em; margin-left: auto; margin-right: auto; border-radius: 9999px; display: flex; align-items: center; justify-content: center; margin-bottom: 1em; font-size: 1.5em; } .jsjobs_stat_icon_brand { background-color: var(--brand-50); color: var(--brand-600); } .jsjobs_stat_icon_accent { background-color: var(--accent-50); color: var(--accent-600); } .jsjobs_stat_icon_amber { background-color: var(--amber-50); color: var(--amber-600); } .jsjobs_stat_icon_rose { background-color: var(--rose-50); color: var(--rose-600); } .jsjobs_stat_num { font-size: 1.875em; font-weight: 800; margin-bottom: 0.25em; } @media (min-width: 768px) { .jsjobs_stat_num { font-size: 2.25em; } } .jsjobs_text_slate_900 { color: var(--slate-900); } .jsjobs_text_brand_500 { color: var(--brand-500); } .jsjobs_stat_title { font-size: 0.75em; font-weight: 700; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.1em; } .jsjobs_dark_section { padding-top: 8em; padding-bottom: 8em; position: relative; background-color: var(--slate-900); overflow: hidden; } .jsjobs_dark_glow_1 { position: absolute; top: 5em; right: 0; width: 24em; height: 24em; background-color: rgba(20, 184, 166, 0.1); border-radius: 9999px; filter: blur(120px); } .jsjobs_dark_glow_2 { position: absolute; bottom: 5em; left: 2.5em; width: 24em; height: 24em; background-color: rgba(99, 102, 241, 0.1); border-radius: 9999px; filter: blur(120px); } .jsjobs_section_head { text-align: center; margin-bottom: 5em; position: relative; z-index: 10; } .jsjobs_eyebrow { font-size: 0.875em; font-weight: 700; color: var(--brand-400); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.75em; } .jsjobs_h2 { font-size: 2.25em; font-weight: 800; color: white; } @media (min-width: 768px) { .jsjobs_h2 { font-size: 3em; } } .jsjobs_subtitle { margin-top: 1em; color: var(--slate-400); font-size: 1.125em; line-height: 1.75em; } .jsjobs_features_grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.5em; position: relative; z-index: 10; } @media (min-width: 768px) { .jsjobs_features_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2em; } } @media (min-width: 1024px) { .jsjobs_features_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .jsjobs_feature_box { padding: 2em; border-radius: 1.5em; border: 1px solid rgba(51, 65, 85, 0.5); transition: all 0.3s; cursor: default; } .jsjobs_feature_box:hover { background-color: rgba(30, 41, 59, 0.8); } .jsjobs_feature_box_brand:hover { border-color: rgba(20, 184, 166, 0.5); box-shadow: var(--shadow-glow); } .jsjobs_feature_box_accent:hover { border-color: rgba(99, 102, 241, 0.5); box-shadow: var(--shadow-glow-accent); } .jsjobs_feature_box_amber:hover { border-color: rgba(245, 158, 11, 0.5); box-shadow: var(--shadow-glow); } .jsjobs_feature_box_rose:hover { border-color: rgba(244, 63, 94, 0.5); box-shadow: var(--shadow-glow); } .jsjobs_feature_box_blue:hover { border-color: rgba(59, 130, 246, 0.5); box-shadow: var(--shadow-glow); } .jsjobs_feature_box_purple:hover { border-color: rgba(168, 85, 247, 0.5); box-shadow: var(--shadow-glow); } .jsjobs_fbox_icon { width: 3.5em; height: 3.5em; background-color: var(--slate-800); border-radius: 1em; display: flex; align-items: center; justify-content: center; font-size: 1.875em; margin-bottom: 1.5em; border: 1px solid var(--slate-700); transition: all 0.3s; } .jsjobs_feature_box_brand:hover .jsjobs_fbox_icon { transform: scale(1.1); background-color: rgba(20, 184, 166, 0.1); } .jsjobs_feature_box_accent:hover .jsjobs_fbox_icon { transform: scale(1.1); background-color: rgba(99, 102, 241, 0.1); } .jsjobs_feature_box_amber:hover .jsjobs_fbox_icon { transform: scale(1.1); background-color: rgba(245, 158, 11, 0.1); } .jsjobs_feature_box_rose:hover .jsjobs_fbox_icon { transform: scale(1.1); background-color: rgba(244, 63, 94, 0.1); } .jsjobs_feature_box_blue:hover .jsjobs_fbox_icon { transform: scale(1.1); background-color: rgba(59, 130, 246, 0.1); } .jsjobs_feature_box_purple:hover .jsjobs_fbox_icon { transform: scale(1.1); background-color: rgba(168, 85, 247, 0.1); } .jsjobs_ficon_brand { color: var(--brand-400); } .jsjobs_ficon_accent { color: var(--accent-400); } .jsjobs_ficon_amber { color: var(--amber-400); } .jsjobs_ficon_rose { color: var(--rose-400); } .jsjobs_ficon_blue { color: var(--blue-400); } .jsjobs_ficon_purple { color: var(--purple-400); } .jsjobs_f_title { font-weight: 700; font-size: 1.25em; color: white; margin-bottom: 0.75em; line-height: 1.75em; } .jsjobs_f_desc { color: var(--slate-400); line-height: 1.625; transition: color 0.3s; } .jsjobs_feature_box:hover .jsjobs_f_desc { color: var(--slate-300); } .jsjobs_main_jobs { padding-top: 6em; padding-bottom: 6em; background-color: white; position: relative; } .jsjobs_jobs_grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 2.5em; } @media (min-width: 1024px) { .jsjobs_jobs_grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .jsjobs_sidebar_col { grid-column: span 4 / span 4; } .jsjobs_list_col { grid-column: span 8 / span 8; } } @media (min-width: 1280px) { .jsjobs_sidebar_col { grid-column: span 3 / span 3; } .jsjobs_list_col { grid-column: span 9 / span 9; } } .jsjobs_filter_box { background-color: var(--slate-50); border: 1px solid var(--slate-100); border-radius: 1.5em; padding: 1.5em; position: sticky; top: 7em; box-shadow: var(--shadow-sm); } .jsjobs_filter_header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2em; } .jsjobs_filter_h3 { font-weight: 700; font-size: 1.25em; color: var(--slate-900); line-height: 1.75em; } .jsjobs_filter_reset { font-size: 0.75em; font-weight: 700; color: var(--brand-600); text-transform: uppercase; letter-spacing: 0.025em; transition: color 0.3s; } .jsjobs_filter_reset:hover { color: var(--brand-800); } .jsjobs_filter_group { margin-bottom: 2em; } .jsjobs_fg_title { font-weight: 700; font-size: 0.875em; color: var(--slate-400); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1em; } .jsjobs_fg_options { display: flex; flex-direction: column; gap: 0.75em; } .jsjobs_fg_label { display: flex; align-items: center; gap: 0.75em; cursor: pointer; } .jsjobs_fg_checkbox { width: 1.25em; height: 1.25em; border-radius: 0.375em; border: 1px solid var(--slate-300); color: var(--brand-500); accent-color: var(--brand-500); transition: all 0.3s; cursor: pointer; } .jsjobs_fg_text { color: var(--slate-700); font-weight: 500; transition: color 0.3s; } .jsjobs_fg_label:hover .jsjobs_fg_text { color: var(--brand-600); } .jsjobs_range { width: 100%; height: 0.5em; background-color: var(--slate-200); border-radius: 0.5em; appearance: none; outline: none; cursor: pointer; accent-color: var(--brand-500); } .jsjobs_range_text { display: flex; justify-content: space-between; font-size: 0.75em; font-weight: 700; color: var(--slate-400); margin-top: 0.75em; } .jsjobs_range_hl { color: var(--brand-600); } /* Job List Header & Cards */ .jsjobs_list_header { display: flex; flex-direction: column; gap: 1em; margin-bottom: 2em; align-items: flex-start; } @media (min-width: 640px) { .jsjobs_list_header { flex-direction: row; justify-content: space-between; align-items: center; } } .jsjobs_list_h2 { font-size: 1.875em; font-weight: 800; color: var(--slate-900); line-height: 2.25em; } .jsjobs_sort_wrap { display: flex; align-items: center; gap: 0.5em; background-color: white; padding: 0.5em 1em; border-radius: 9999px; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); } .jsjobs_sort_lbl { font-size: 0.875em; font-weight: 500; color: var(--slate-500); } .jsjobs_sort_sel { background: transparent; font-size: 0.875em; font-weight: 700; color: var(--slate-900); cursor: pointer; border: none; outline: none; } .jsjobs_list_cards { display: flex; flex-direction: column; gap: 1em; } .jsjobs_job_card { background-color: white; padding: 1.5em; border-radius: 1.5em; border: 1px solid var(--slate-100); box-shadow: var(--shadow-sm); transition: all 0.3s; display: flex; flex-direction: column; gap: 1.5em; cursor: pointer; } @media (min-width: 640px) { .jsjobs_job_card { flex-direction: row; align-items: center; } } .jsjobs_job_card:hover { box-shadow: var(--shadow-float); border-color: var(--brand-200); } .jsjobs_card_logo { width: 4em; height: 4em; border-radius: 1em; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 800; font-size: 1.5em; line-height: 2em; } .jsjobs_cl_blue { background-image: linear-gradient(to bottom right, var(--blue-50), var(--blue-100)); border: 1px solid var(--blue-200); color: var(--blue-600); } .jsjobs_cl_purple { background-image: linear-gradient(to bottom right, var(--purple-50), var(--purple-100)); border: 1px solid var(--purple-200); color: var(--purple-600); } .jsjobs_cl_rose { background-image: linear-gradient(to bottom right, var(--rose-50), var(--rose-100)); border: 1px solid var(--rose-200); color: var(--rose-600); } .jsjobs_card_content { flex: 1; width: 100%; } .jsjobs_card_title_row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75em; margin-bottom: 0.25em; } .jsjobs_card_h3 { font-size: 1.25em; font-weight: 700; color: var(--slate-900); line-height: 1.75em; transition: color 0.3s; } .jsjobs_job_card:hover .jsjobs_card_h3 { color: var(--brand-600); } .jsjobs_card_new { background-color: var(--brand-50); color: var(--brand-600); font-size: 0.75em; font-weight: 700; padding: 0.25em 0.75em; border-radius: 9999px; border: 1px solid var(--brand-100); } .jsjobs_card_comp { color: var(--slate-500); font-weight: 500; font-size: 0.875em; margin-bottom: 0.75em; } .jsjobs_card_meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75em; font-size: 0.875em; color: var(--slate-600); } .jsjobs_cm_item { display: flex; align-items: center; gap: 0.375em; background-color: var(--slate-50); padding: 0.25em 0.75em; border-radius: 0.5em; } .jsjobs_cm_icon { color: var(--slate-400); } .jsjobs_card_action { width: 100%; flex-shrink: 0; } @media (min-width: 640px) { .jsjobs_card_action { width: auto; } } .jsjobs_btn_apply { width: 100%; background-color: var(--slate-900); color: white; font-weight: 700; padding: 0.75em 1.5em; border-radius: 0.75em; transition: all 0.3s; box-shadow: var(--shadow-md); } @media (min-width: 640px) { .jsjobs_btn_apply { width: auto; } } .jsjobs_btn_apply:hover { background-color: var(--brand-500); } .jsjobs_load_more { padding-top: 1em; text-align: center; } .jsjobs_btn_load { display: inline-flex; align-items: center; gap: 0.5em; color: var(--brand-600); font-weight: 700; transition: color 0.3s; } .jsjobs_btn_load:hover { color: var(--brand-800); } .jsjobs_talent { padding-top: 6em; padding-bottom: 6em; background-color: var(--slate-50); position: relative; border-top: 1px solid var(--slate-200); } .jsjobs_tal_head { text-align: center; margin-bottom: 4em; } .jsjobs_tal_eyebrow { font-size: 0.875em; font-weight: 700; color: var(--brand-600); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5em; } .jsjobs_tal_h3 { font-size: 1.875em; font-weight: 800; color: var(--slate-900); line-height: 2.25em; } @media (min-width: 768px) { .jsjobs_tal_h3 { font-size: 2.25em; line-height: 2.5em; } } .jsjobs_tal_p { margin-top: 1em; font-size: 1.125em; color: var(--slate-500); line-height: 1.75em; } .jsjobs_tal_grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 2em; margin-bottom: 2.5em; } @media (min-width: 768px) { .jsjobs_tal_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .jsjobs_tal_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .jsjobs_res_card { background-color: white; border-radius: 2em; padding: 2em; border: 1px solid var(--slate-100); text-align: center; transition: all 0.3s; } .jsjobs_res_card:hover { box-shadow: var(--shadow-float); border-color: var(--brand-200); } .jsjobs_res_av_wrap { position: relative; width: 7em; height: 7em; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; } .jsjobs_res_glow { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 9999px; filter: blur(8px); opacity: 0.2; transition: opacity 0.3s; } .jsjobs_rg_brand { background-color: var(--brand-500); } .jsjobs_rg_accent { background-color: var(--accent-500); } .jsjobs_rg_amber { background-color: var(--amber-500); } .jsjobs_res_card:hover .jsjobs_res_glow { opacity: 0.4; } .jsjobs_res_img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 9999px; border: 4px solid white; box-shadow: var(--shadow-sm); } .jsjobs_res_name { font-size: 1.5em; font-weight: 700; color: var(--slate-900); margin-bottom: 0.25em; line-height: 2em; } .jsjobs_res_role { color: var(--brand-600); font-weight: 600; font-size: 0.875em; letter-spacing: 0.025em; text-transform: uppercase; margin-bottom: 1.25em; } .jsjobs_res_skills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5em; margin-bottom: 2em; } .jsjobs_skill { background-color: var(--slate-50); border: 1px solid var(--slate-100); color: var(--slate-600); font-size: 0.75em; padding: 0.375em 0.75em; border-radius: 0.5em; font-weight: 700; line-height: 1em; } .jsjobs_btn_prof { width: 100%; background-color: var(--slate-50); border: 1px solid var(--slate-200); color: var(--slate-700); font-weight: 700; padding: 0.75em; border-radius: 0.75em; transition: all 0.3s; box-shadow: var(--shadow-sm); } .jsjobs_btn_prof:hover { background-color: var(--brand-50); border-color: var(--brand-300); color: var(--brand-700); } .jsjobs_island { padding-top: 2em; padding-bottom: 8em; position: relative; z-index: 20; margin-left: 1em; margin-right: 1em; } @media (min-width: 640px) { .jsjobs_island { margin-left: 1.5em; margin-right: 1.5em; } } @media (min-width: 1024px) { .jsjobs_island { margin-left: 2em; margin-right: 2em; } } .jsjobs_isl_box { max-width: 72em; margin-left: auto; margin-right: auto; background-image: linear-gradient(to right, var(--brand-500), var(--brand-600), var(--accent-600)); border-radius: 3em; box-shadow: 0 25px 50px -12px rgba(20, 184, 166, 0.3); overflow: hidden; position: relative; border: 1px solid rgba(255, 255, 255, 0.2); } .jsjobs_isl_dec1 { position: absolute; top: 0; right: 0; width: 16em; height: 16em; background-color: rgba(255, 255, 255, 0.1); border-radius: 9999px; filter: blur(48px); transform: translateY(-50%) translateX(25%); } .jsjobs_isl_dec2 { position: absolute; bottom: 0; left: 0; width: 16em; height: 16em; background-color: rgba(0, 0, 0, 0.1); border-radius: 9999px; filter: blur(48px); transform: translateY(50%) translateX(-25%); } .jsjobs_isl_in { padding: 2.5em; text-align: center; position: relative; z-index: 10; } @media (min-width: 768px) { .jsjobs_isl_in { padding: 3.5em; } } .jsjobs_isl_h3 { font-size: 1.5em; font-weight: 800; color: white; margin-bottom: 2em; letter-spacing: -0.025em; line-height: 2em; } @media (min-width: 768px) { .jsjobs_isl_h3 { font-size: 1.875em; line-height: 2.25em; } } .jsjobs_isl_flex { display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; } @media (min-width: 768px) { .jsjobs_isl_flex { gap: 1.5em; } } .jsjobs_isl_tag { background-color: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.3); color: white; font-weight: 700; padding: 0.75em 1.5em; border-radius: 9999px; display: flex; align-items: center; gap: 0.5em; transition: all 0.3s; cursor: default; box-shadow: var(--shadow-sm); } .jsjobs_isl_tag:hover { background-color: rgba(255, 255, 255, 0.25); } .jsjobs_isl_icon { font-size: 1.125em; } .jsjobs_prem { padding-top: 6em; padding-bottom: 6em; background-color: white; position: relative;border-top: 1px solid var(--slate-200); } .jsjobs_prem_mb { margin-bottom: 8em; } .jsjobs_prem_head { display: flex; align-items: center; gap: 0.75em; margin-bottom: 2em; } .jsjobs_prem_icon { width: 3em; height: 3em; border-radius: 1em; color: white; display: flex; align-items: center; justify-content: center; font-size: 1.5em; box-shadow: var(--shadow-md); } .jsjobs_pi_gold { background-image: linear-gradient(to bottom right, var(--amber-300), var(--amber-500)); } .jsjobs_pi_feat { background-image: linear-gradient(to bottom right, var(--brand-400), var(--brand-600)); } .jsjobs_prem_h3 { font-size: 1.875em; font-weight: 800; color: var(--slate-900); line-height: 2.25em; } .jsjobs_prem_grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.5em; } @media (min-width: 768px) { .jsjobs_prem_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .jsjobs_prem_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Gold Cards */ .jsjobs_gcard { background-color: rgba(255, 251, 235, 0.3); border: 2px solid var(--amber-100); border-radius: 2em; padding: 2em; transition: all 0.3s; position: relative; overflow: hidden; } .jsjobs_gcard:hover { box-shadow: var(--shadow-float); transform: translateY(-0.25em); background-color: white; } .jsjobs_gcard_blur { position: absolute; right: -2.5em; top: -2.5em; width: 8em; height: 8em; background-color: rgba(254, 243, 199, 0.5); border-radius: 9999px; filter: blur(40px); } .jsjobs_gc_top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5em; position: relative; } .jsjobs_gc_logo { width: 3.5em; height: 3.5em; background-color: white; border-radius: 1em; display: flex; align-items: center; justify-content: center; color: var(--amber-600); font-weight: 800; font-size: 1.25em; border: 1px solid var(--amber-100); box-shadow: var(--shadow-sm); } .jsjobs_gc_badge { color: var(--amber-700); background-color: var(--amber-100); font-size: 0.75em; font-weight: 800; padding: 0.375em 0.75em; border-radius: 0.5em; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1em; } .jsjobs_gc_title { font-size: 1.25em; font-weight: 700; color: var(--slate-900); margin-bottom: 0.25em; position: relative; line-height: 1.75em; } .jsjobs_gc_comp { color: var(--slate-500); font-weight: 500; font-size: 0.875em; margin-bottom: 1.5em; position: relative; } .jsjobs_gc_foot { display: flex; align-items: center; gap: 1em; font-size: 0.875em; font-weight: 700; color: var(--slate-700); padding-top: 1.25em; border-top: 1px solid rgba(254, 243, 199, 0.5); position: relative; } /* Featured Cards */ .jsjobs_fcard { background-color: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 2em; padding: 2em; transition: all 0.3s; } .jsjobs_fcard:hover { box-shadow: var(--shadow-float); transform: translateY(-0.25em); border-color: var(--brand-300); background-color: white; } .jsjobs_fc_logo { width: 3.5em; height: 3.5em; background-color: white; border-radius: 1em; display: flex; align-items: center; justify-content: center; color: var(--slate-700); font-weight: 800; font-size: 1.25em; border: 1px solid var(--slate-100); box-shadow: var(--shadow-sm); } .jsjobs_fc_badge { color: var(--brand-600); background-color: var(--brand-50); font-size: 0.75em; font-weight: 800; padding: 0.375em 0.75em; border-radius: 0.5em; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid var(--brand-100); line-height: 1em; } .jsjobs_fc_foot { display: flex; align-items: center; gap: 1em; font-size: 0.875em; font-weight: 700; color: var(--slate-700); padding-top: 1.25em; border-top: 1px solid var(--slate-200); } .jsjobs_split { padding-top: 6em; padding-bottom: 6em; background-color: var(--slate-950); position: relative; overflow: hidden; } .jsjobs_split_bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background-image: radial-gradient(ellipse at top right, rgba(19, 78, 74, 0.4), var(--slate-950), var(--slate-950)); } .jsjobs_split_flex { display: flex; flex-direction: column; align-items: center; gap: 4em; position: relative; z-index: 10; } @media (min-width: 1024px) { .jsjobs_split_flex { flex-direction: row; } } .jsjobs_split_col { width: 100%; } @media (min-width: 1024px) { .jsjobs_split_col { width: 50%; } } .jsjobs_split_h3 { font-size: 2.25em; font-weight: 800; color: white; margin-bottom: .7em; line-height: 1.25; } @media (min-width: 768px) { .jsjobs_split_h3 { font-size: 3em; line-height: 1; } } .jsjobs_split_p { color: var(--slate-400); font-size: 1.125em; margin-bottom: 2em; line-height: 1.625; } .jsjobs_split_list { display: flex; flex-direction: column; gap: 1.5em; color: var(--slate-300); font-size: 1.125em; font-weight: 500; } .jsjobs_split_item { display: flex; align-items: flex-start; gap: 1em; } .jsjobs_split_icon { margin-top: 0.25em; flex-shrink: 0; width: 2em; height: 2em; border-radius: 9999px; background-color: rgba(20, 184, 166, 0.2); border: 1px solid rgba(20, 184, 166, 0.3); display: flex; align-items: center; justify-content: center; color: var(--brand-400); } .jsjobs_split_btns { margin-top: 2.5em; display: flex; gap: 1em; } .jsjobs_btn_brand { background-color: var(--brand-500); color: white; padding: 1em 2em; border-radius: 0.75em; font-weight: 700; transition: all 0.3s; box-shadow: var(--shadow-glow);text-decoration:none;} .jsjobs_btn_brand:hover { background-color: var(--brand-400);color:#fff;text-decoration: none; } .jsjobs_btn_darker { background-color: var(--slate-800); color: white; padding: 1em 2em; border-radius: 0.75em; font-weight: 700; border: 1px solid var(--slate-700); transition: all 0.3s; } .jsjobs_btn_darker:hover { background-color: var(--slate-700); } .jsjobs_split_img_wrap { position: relative; border-radius: 2.5em; overflow: hidden; box-shadow: var(--shadow-float-dark); border: 1px solid var(--slate-800); } .jsjobs_split_overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(15, 23, 42, 0.3); mix-blend-mode: multiply; z-index: 10; } .jsjobs_split_img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 0; } .jsjobs_split_float { position: absolute; bottom: -2em; left: -2em; padding: 1.5em; border-radius: 1.5em; box-shadow: var(--shadow-float-dark); z-index: 20; } .jsjobs_sf_in { display: flex; align-items: center; gap: 1em; margin-bottom: 0.5em; } .jsjobs_sf_icon { width: 2.5em; height: 2.5em; border-radius: 9999px; background-color: rgba(16, 185, 129, 0.2); border: 1px solid rgba(16, 185, 129, 0.3); display: flex; align-items: center; justify-content: center; color: var(--emerald-400); } .jsjobs_sf_lbl { font-size: 0.75em; font-weight: 700; color: var(--slate-400); text-transform: uppercase; letter-spacing: 0.05em; } .jsjobs_sf_val { font-weight: 800; color: white; font-size: 1.25em; line-height: 1.75em; } .jsjobs_cta { padding-top: 6em; padding-bottom: 6em; position: relative; border-bottom: 1px solid var(--slate-200); } .jsjobs_cta_bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.6; z-index: 0; } .jsjobs_cta_in { text-align: center; position: relative; z-index: 10; } .jsjobs_cta_h2 { font-size: 2.25em; font-weight: 800; color: var(--slate-900); margin-bottom: .5em; line-height: 2.5em; } @media (min-width: 768px) { .jsjobs_cta_h2 { font-size: 3em; line-height: 1; } } .jsjobs_cta_p { font-size: 1.25em; color: var(--slate-600); margin-bottom: 2.5em; font-weight: 500; line-height: 1.75em; } .jsjobs_cta_btns { display: flex; flex-direction: column; gap: 1em; justify-content: center; } @media (min-width: 640px) { .jsjobs_cta_btns { flex-direction: row; } } .jsjobs_btn_primary { background-color: var(--brand-500); color: white; padding: 1em 2em; border-radius: 0.75em; font-weight: 700; font-size: 1.125em; transition: background-color 0.3s; box-shadow: var(--shadow-glow);text-decoration: none;} .jsjobs_btn_primary:hover { background-color: var(--brand-600);color:#fff;text-decoration: none; } .jsjobs_btn_white { background-color: white; color: var(--slate-900); border: 1px solid var(--slate-200); padding: 1em 2em; border-radius: 0.75em; font-weight: 700; font-size: 1.125em; transition: all 0.3s; box-shadow: var(--shadow-sm);text-decoration: none;} .jsjobs_btn_white:hover { background-color: var(--slate-50);text-decoration: none;color: var(--slate-900);} footer.container-footer { background-color: var(--slate-950); color: var(--slate-400); padding-top: 0em; padding-bottom: 0em;background-image:none;margin-top: 0;} footer.container-footer .mod-custom{width: 100%;} .jsjobs_foot_flex { display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 1.5em; } @media (min-width: 768px) { .jsjobs_foot_flex { flex-direction: row; gap: 1.5em; } } .jsjobs_foot_logo { display: flex; align-items: center; gap: 0.5em; } .jsjobs_foot_icon { width: 2em; height: 2em; background-color: rgba(20, 184, 166, 0.2); border-radius: 0.5em; display: flex; align-items: center; justify-content: center; color: var(--brand-400); border: 1px solid rgba(20, 184, 166, 0.3); } .jsjobs_foot_text { font-weight: 800; font-size: 1.25em; color: white; letter-spacing: -0.025em; line-height: 1.75em; } .jsjobs_foot_links { display: flex; gap: 2em; font-size: 0.875em; font-weight: 600; line-height: 1.25em; } .jsjobs_foot_link:hover { color: var(--brand-400); transition: color 0.3s; } .jsjobs_foot_copy { font-size: 0.875em; font-weight: 500; } /* Toast Component */ .jsjobs_toast_wrap { position: fixed; bottom: 1.25em; right: 1.25em; z-index: 50; display: flex; flex-direction: column; gap: 0.75em; } .jsjobs_toast { transform: translateY(2.5em); opacity: 0; display: flex; align-items: center; gap: 0.75em; padding: 1em 1.5em; border-radius: 1em; box-shadow: var(--shadow-float); font-weight: 700; min-width: 300px; border: 1px solid transparent; transition: all 0.3s; } .jsjobs_toast_success { background-color: white; color: var(--slate-900); border-color: var(--slate-100); } .jsjobs_toast_info { background-color: var(--slate-900); color: white; border-color: var(--slate-800); } .jsjobs_ticon_success { font-size: 1.5em; color: var(--brand-500); } .jsjobs_ticon_info { font-size: 1.5em; color: var(--brand-400); } .jsjobs_toast_visible { transform: translateY(0); opacity: 1; } .jsjobs_toast_hidden { opacity: 0; transform: translateY(0.5em); } /* new */ body.wrapper-fluid .site-grid{gap: 0 !important;margin-top: -75px;} .container-component > :first-child, .container-sidebar-left > :first-child, .container-sidebar-right > :first-child, .container-component > * + *, .container-sidebar-left > * + *, .container-sidebar-right > * + *{margin-top: 0 !important;} /* feature page */ /* Animations */ @keyframes jsjobs_blob { 0% { transform: translate(0px, 0px) scale(1); } 33% { transform: translate(30px, -50px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } 100% { transform: translate(0px, 0px) scale(1); } } .jsjobs_anim_blob { animation: jsjobs_blob 7s infinite; } .jsjobs_reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); } .jsjobs_reveal_left { opacity: 0; transform: translateX(-40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); } .jsjobs_reveal_right { opacity: 0; transform: translateX(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); } .jsjobs_reveal.jsjobs_active, .jsjobs_reveal_left.jsjobs_active, .jsjobs_reveal_right.jsjobs_active { opacity: 1; transform: translate(0); } /* Typography Utilities */ .jsjobs_text_clip { color: transparent; -webkit-background-clip: text; background-clip: text; } .jsjobs_hero_gradient_text { background-image: linear-gradient(to right, var(--brand-600), var(--accent-500)); } /* Layout */ .jsjobs_container { width: 100%; max-width: 80em; margin-left: auto; margin-right: auto; padding-left: 1.5em; padding-right: 1.5em; } body.site div#js_jobs_main_wrapper{max-width: 80em; margin-left: auto; margin-right: auto;padding-left: 1.5em; padding-right: 1.5em;display:flex;flex-direction: column; margin-top: 100px;} .jsjobs_max_w_6xl { max-width: 72em; margin-left: auto; margin-right: auto; } .top-a .card-body{padding: 0;} /* Navbar */ .jsjobs_header { position: fixed; width: 100%; z-index: 50; padding-left: 1em; padding-right: 1em; top: 1em; transition: all 0.3s; } .jsjobs_nav { border-radius: 1em; transition: all 0.3s; box-shadow: var(--shadow-sm); background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.4); } .jsjobs_nav.jsjobs_scrolled { background: rgba(255, 255, 255, 0.85); box-shadow: var(--shadow-glass); } .jsjobs_nav_inner { padding-left: 1.5em; padding-right: 1.5em; display: flex; justify-content: space-between; align-items: center; height: 4em; } .jsjobs_logo_wrap { display: flex; align-items: center; gap: 0.75em; cursor: pointer; } .jsjobs_logo_icon { width: 2.5em; height: 2.5em; background: linear-gradient(to bottom right, var(--brand-400), var(--brand-600)); border-radius: 0.75em; display: flex; align-items: center; justify-content: center; color: white; box-shadow: var(--shadow-md); font-size: 1.5em; } .jsjobs_logo_text { font-weight: 800; font-size: 1.25em; color: var(--slate-900); letter-spacing: -0.025em; } .jsjobs_nav_links { display: none; align-items: center; gap: 2em; } @media (min-width: 768px) { .jsjobs_nav_links { display: flex; } } .jsjobs_nav_link { font-weight: 600; font-size: 0.875em; color: var(--slate-600); transition: color 0.3s; } .jsjobs_nav_link:hover { color: var(--brand-600); } .jsjobs_nav_btn { background-color: var(--slate-900); color: white; padding: 0.625em 1.25em; border-radius: 0.75em; font-weight: 700; font-size: 0.875em; transition: all 0.3s; box-shadow: var(--shadow-md); } .jsjobs_nav_btn:hover { background-color: var(--brand-600); transform: translateY(-2px); } /* Feature Hero */ .jsjobs_fhero { padding-top: 10em; padding-bottom:7em; position: relative; overflow: hidden; background-color: var(--bg-color); text-align: center; border-bottom: 1px solid var(--slate-200);background-image: radial-gradient(at 10% 20%, hsla(171, 80%, 94%, 1) 0px, transparent 50%), radial-gradient(at 90% 10%, hsla(228, 89%, 95%, 1) 0px, transparent 50%), radial-gradient(at 50% 80%, hsla(190, 80%, 95%, 1) 0px, transparent 50%); } .jsjobs_fhero_blob { position: absolute; top: 5em; left: 50%; transform: translateX(-50%); width: 24em; height: 24em; background-color: rgba(94, 234, 212, 0.2); border-radius: 9999px; filter: blur(64px); z-index: 0; } .jsjobs_fhero_content { position: relative; z-index: 10; max-width: 56em; margin: 0 auto;padding-left: 0;padding-right: 0; } .jsjobs_fhero_tag { display: inline-flex;align-items: center;gap: 0.5em;padding: 0.5em 1em;border-radius: 9999px;background-color: rgba(255, 255, 255, 0.8);backdrop-filter: blur(4px);color: var(--brand-700);font-weight: 700;font-size: 0.75em;text-transform: uppercase;letter-spacing: 0.05em;margin-bottom: 2em;border: 1px solid white;box-shadow: var(--shadow-sm);} .jsjobs_fhero_title { font-size: 3em; font-weight: 800; color: var(--slate-900); line-height: 1.1; margin-bottom: 15px; letter-spacing: -0.025em; } @media (min-width: 768px) { .jsjobs_fhero_title { font-size: 3.75em; } } .jsjobs_fhero_desc { font-size: 1.25em; color: var(--slate-500); line-height: 1.75em; } /* ZigZag Feature Rows */ .jsjobs_frow { padding: 6em 0; overflow: hidden; position: relative; } .jsjobs_frow_flex { display: flex; flex-direction: column; align-items: center; gap: 4em; } @media (min-width: 1024px) { .jsjobs_frow_flex { flex-direction: row; justify-content: space-between; align-items: stretch;} .jsjobs_frow_reverse .jsjobs_frow_flex { flex-direction: row-reverse; } .jsjobs_fhero_title { font-size: 4.5em; } } .jsjobs_frow_text { flex: 1; max-width: 32em; display: flex; flex-direction: column; justify-content: center;} .jsjobs_frow_media { flex: 1; width: 100%; display: flex; justify-content: center; align-items: center; position: relative; } .jsjobs_frow_h2 { font-size: 2.25em; font-weight: 800; margin-bottom: 1.25em; line-height: 1.2; letter-spacing: -0.025em; } .jsjobs_frow_p { font-size: 1.125em; line-height: 1.75em; font-weight: 500; margin-bottom: 2em; } .jsjobs_frow_list { display: flex; flex-direction: column; gap: 1em; } .jsjobs_frow_li { display: flex; align-items: flex-start; gap: 0.75em; font-size: 1em; font-weight: 600; } .jsjobs_frow_icon { margin-top: 0.25em; font-size: 1.25em; flex-shrink: 0;width: 20px;} /* Background Colors */ .jsjobs_bg_white { background-color: #ffffff; } .jsjobs_bg_light { background-color: var(--slate-50); } .jsjobs_bg_dark { background-color: var(--slate-900); color: white; } .jsjobs_bg_green { background-color: var(--emerald-500); color: white; } .jsjobs_bg_purple { background-color: var(--accent-600); color: white; } .jsjobs_bg_teal { background-color: var(--brand-500); color: white; } .jsjobs_bg_yellow { background-color: var(--amber-400); color: var(--slate-900); } .jsjobs_bg_red { background-color: var(--rose-600); color: white; } /* Text colors for specific backgrounds */ .jsjobs_bg_white .jsjobs_frow_h2, .jsjobs_bg_light .jsjobs_frow_h2 { color: var(--slate-900); } .jsjobs_bg_white .jsjobs_frow_p, .jsjobs_bg_light .jsjobs_frow_p { color: var(--slate-600); } .jsjobs_bg_white .jsjobs_frow_li, .jsjobs_bg_light .jsjobs_frow_li { color: var(--slate-700); } .jsjobs_bg_white .jsjobs_frow_icon, .jsjobs_bg_light .jsjobs_frow_icon { color: var(--brand-500);width: 20px;} .jsjobs_bg_dark .jsjobs_frow_h2, .jsjobs_bg_green .jsjobs_frow_h2, .jsjobs_bg_purple .jsjobs_frow_h2, .jsjobs_bg_teal .jsjobs_frow_h2, .jsjobs_bg_red .jsjobs_frow_h2 { color: white; } .jsjobs_bg_dark .jsjobs_frow_p, .jsjobs_bg_green .jsjobs_frow_p, .jsjobs_bg_purple .jsjobs_frow_p, .jsjobs_bg_teal .jsjobs_frow_p, .jsjobs_bg_red .jsjobs_frow_p { color: rgba(255,255,255,0.8); } .jsjobs_bg_dark .jsjobs_frow_li, .jsjobs_bg_green .jsjobs_frow_li, .jsjobs_bg_purple .jsjobs_frow_li, .jsjobs_bg_teal .jsjobs_frow_li, .jsjobs_bg_red .jsjobs_frow_li { color: rgba(255,255,255,0.95); } .jsjobs_bg_dark .jsjobs_frow_icon, .jsjobs_bg_green .jsjobs_frow_icon, .jsjobs_bg_purple .jsjobs_frow_icon, .jsjobs_bg_teal .jsjobs_frow_icon, .jsjobs_bg_red .jsjobs_frow_icon { color: rgba(255,255,255,0.6); } /* UI Mockups Base */ .jsjobs_mockup_browser { width: 100%; max-width: 38em; background: white; border-radius: 1em; box-shadow: var(--shadow-float); overflow: hidden; border: 1px solid var(--slate-200); } .jsjobs_bg_dark .jsjobs_mockup_browser, .jsjobs_bg_green .jsjobs_mockup_browser, .jsjobs_bg_purple .jsjobs_mockup_browser, .jsjobs_bg_teal .jsjobs_mockup_browser, .jsjobs_bg_red .jsjobs_mockup_browser { border: none; box-shadow: var(--shadow-float-dark); } .jsjobs_mockup_head { background: var(--slate-100); padding: 0.75em 1em; display: flex; gap: 0.375em; border-bottom: 1px solid var(--slate-200); } .jsjobs_mockup_dot { width: 0.75em; height: 0.75em; border-radius: 50%; } .jsjobs_dot_r { background: #ef4444; } .jsjobs_dot_y { background: #eab308; } .jsjobs_dot_g { background: #22c55e; } .jsjobs_mockup_body { padding: 1.5em; min-height: 20em; background: var(--slate-50); position: relative; display: flex; } .jsjobs_mockup_mobile { width: 18em; height: 36em; background: white; border-radius: 2.5em; box-shadow: var(--shadow-float); border: 8px solid var(--slate-900); position: relative; overflow: hidden; } .jsjobs_mockup_notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 8em; height: 1.5em; background: var(--slate-900); border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; z-index: 10;} .jsjobs_mockup_mbody { padding: 3em 1em 1em 1em; height: 100%; background: var(--slate-50); display: flex; flex-direction: column; gap: 0.75em; overflow-y: auto;} /* Realistic UI Components (Internal to Mockups) */ /* Mini Job Card */ .jsjobs_mk_jobcard { background: white; border: 1px solid var(--slate-200); border-radius: 0.75em; padding: 1em; display: flex; align-items: center; gap: 1em; box-shadow: var(--shadow-sm); } .jsjobs_mk_joblogo { width: 3em; height: 3em; border-radius: 0.5em; background: var(--brand-50); color: var(--brand-600); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.25em; flex-shrink:0;} .jsjobs_mk_jobtitle { font-weight: 700; font-size: 0.875em; color: var(--slate-900); margin-bottom: 0.25em; } .jsjobs_mk_jobmeta { font-size: 0.75em; color: var(--slate-500); display: flex; gap: 0.5em; align-items: center; } .jsjobs_mk_badge { font-size: 0.65em; font-weight: bold; padding: 0.125em 0.375em; border-radius: 0.25em; background: var(--emerald-100); color: var(--emerald-700); } /* Dashboard Sidebar & Topbar */ .jsjobs_mk_sidebar { width: 25%; background: var(--slate-800); border-right: 1px solid var(--slate-700); display: flex; flex-direction: column; padding: 1em 0; } .jsjobs_mk_sideitem { padding: 0.5em 1em; display: flex; align-items: center; gap: 0.5em; color: var(--slate-400); font-size: 0.75em; font-weight: 600; margin-bottom: 0.25em; } .jsjobs_mk_sideitem.active { color: white; background: var(--brand-600); border-left: 2px solid var(--brand-300); } .jsjobs_mk_dashmain { flex: 1; padding: 1.5em; display: flex; flex-direction: column; gap: 1em; } .jsjobs_mk_statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; } .jsjobs_mk_statcard { background: white; padding: 1em; border-radius: 0.5em; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); } .jsjobs_mk_statval { font-size: 1.25em; font-weight: 800; color: var(--slate-900); } .jsjobs_mk_statlbl { font-size: 0.65em; color: var(--slate-500); text-transform: uppercase; font-weight: 700; } .jsjobs_mk_chart { background: white; height: 8em; border-radius: 0.5em; border: 1px solid var(--slate-200); padding: 1em; display: flex; align-items: flex-end; gap: 0.5em; justify-content: space-between; } .jsjobs_mk_bar { background: var(--brand-100); width: 100%; border-radius: 0.25em; } .jsjobs_mk_bar.high { background: var(--brand-500); } /* Form / Custom Fields */ .jsjobs_mk_formgrp { display: flex; flex-direction: column; gap: 0.375em; margin-bottom: 1em; } .jsjobs_mk_label { font-size: 0.75em; font-weight: 600; color: var(--slate-700); } .jsjobs_mk_input { height: 2.5em; background: white; border: 1px solid var(--slate-300); border-radius: 0.375em; padding: 0 0.75em; display: flex; align-items: center; font-size: 0.875em; color: var(--slate-500); justify-content: space-between;} .jsjobs_mk_radio_wrap { display: flex; gap: 1em; } .jsjobs_mk_radio { display: flex; align-items: center; gap: 0.375em; font-size: 0.75em; color: var(--slate-600); } .jsjobs_mk_radio_dot { width: 1em; height: 1em; border-radius: 50%; border: 1px solid var(--slate-300); display: flex; align-items:center; justify-content:center;} .jsjobs_mk_radio_dot.checked { border-color: var(--brand-500); } .jsjobs_mk_radio_dot.checked::after { content: ''; width: 0.5em; height: 0.5em; background: var(--brand-500); border-radius: 50%; } /* Messaging */ .jsjobs_mk_chat_l { align-self: flex-start; background: var(--slate-200); padding: 0.75em 1em; border-radius: 1em; border-bottom-left-radius: 0; max-width: 85%; font-size: 0.875em; color: var(--slate-800); box-shadow: var(--shadow-sm);} .jsjobs_mk_chat_r { align-self: flex-end; background: var(--brand-500); padding: 0.75em 1em; border-radius: 1em; border-bottom-right-radius: 0; max-width: 85%; font-size: 0.875em; color: white; box-shadow: var(--shadow-sm);} /* Pricing / Monetize */ .jsjobs_mk_pricecard { flex: 1; background: white; border: 1px solid var(--slate-200); border-radius: 1em; padding: 1.5em; text-align: center; display: flex; flex-direction: column; gap: 0.75em; box-shadow: var(--shadow-sm);} .jsjobs_mk_pricecard.featured { border: 2px solid var(--brand-500); box-shadow: var(--shadow-md); position: relative;} .jsjobs_mk_pricebadge { position: absolute; top: -0.75em; left: 50%; transform: translateX(-50%); background: var(--brand-500); color: white; font-size: 0.65em; font-weight: bold; padding: 0.125em 0.5em; border-radius: 1em; } .jsjobs_mk_price_title { font-size: 1em; font-weight: 700; color: var(--slate-900); } .jsjobs_mk_price_val { font-size: 1.5em; font-weight: 800; color: var(--slate-900); } .jsjobs_mk_price_btn { background: var(--slate-100); color: var(--slate-700); font-size: 0.75em; font-weight: bold; padding: 0.5em; border-radius: 0.5em; margin-top: auto;} .jsjobs_mk_pricecard.featured .jsjobs_mk_price_btn { background: var(--brand-500); color: white; } /* Resume Search */ .jsjobs_mk_res_card { display: flex; align-items: center; gap: 1em; background: white; padding: 0.75em; border-radius: 0.5em; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm);} .jsjobs_mk_res_img { width: 2.5em; height: 2.5em; border-radius: 50%; background: var(--slate-200); overflow: hidden; } .jsjobs_mk_res_name { font-size: 0.875em; font-weight: 700; color: var(--slate-900); } .jsjobs_mk_res_skill { font-size: 0.65em; color: var(--brand-600); background: var(--brand-50); padding: 0.125em 0.375em; border-radius: 0.25em; font-weight:bold; } .jsjobs_frow_text { flex: 1; max-width: 32em; } .jsjobs_frow_media { flex: 1; width: 100%; display: flex; justify-content: center; position: relative; } .jsjobs_frow_h2 { font-size: 2.25em; font-weight: 800; margin-bottom: 1.25em; line-height: 1.2; letter-spacing: -0.025em; } .jsjobs_frow_p { font-size: 1.125em; line-height: 1.75em; font-weight: 500; margin-bottom: 2em; } .jsjobs_frow_list { display: flex; flex-direction: column; gap: 1em; } .jsjobs_frow_li { display: flex; align-items: flex-start; gap: 0.75em; font-size: 1em; font-weight: 600; } .jsjobs_frow_icon { margin-top: 0.25em; font-size: 1.25em; flex-shrink: 0; } /* Background Colors (Matching old image bands) */ .jsjobs_bg_white { background-color: #ffffff; } .jsjobs_bg_light { background-color: var(--slate-50); } .jsjobs_bg_dark { background-color: var(--slate-900); color: white; } .jsjobs_bg_green { background-color: var(--emerald-500); color: white; } .jsjobs_bg_purple { background-color: var(--accent-600); color: white; } .jsjobs_bg_teal { background-color: var(--brand-500); color: white; } .jsjobs_bg_yellow { background-color: var(--amber-400); color: var(--slate-900); } .jsjobs_bg_red { background-color: var(--rose-600); color: white; } /* Text colors for specific backgrounds */ .jsjobs_bg_white .jsjobs_frow_h2, .jsjobs_bg_light .jsjobs_frow_h2 { color: var(--slate-900); } .jsjobs_bg_white .jsjobs_frow_p, .jsjobs_bg_light .jsjobs_frow_p { color: var(--slate-600); } .jsjobs_bg_white .jsjobs_frow_li, .jsjobs_bg_light .jsjobs_frow_li { color: var(--slate-700); } .jsjobs_bg_white .jsjobs_frow_icon, .jsjobs_bg_light .jsjobs_frow_icon { color: var(--brand-500); } .jsjobs_bg_dark .jsjobs_frow_h2, .jsjobs_bg_green .jsjobs_frow_h2, .jsjobs_bg_purple .jsjobs_frow_h2, .jsjobs_bg_teal .jsjobs_frow_h2, .jsjobs_bg_red .jsjobs_frow_h2 { color: white; } .jsjobs_bg_dark .jsjobs_frow_p, .jsjobs_bg_green .jsjobs_frow_p, .jsjobs_bg_purple .jsjobs_frow_p, .jsjobs_bg_teal .jsjobs_frow_p, .jsjobs_bg_red .jsjobs_frow_p { color: rgba(255,255,255,0.8); } .jsjobs_bg_dark .jsjobs_frow_li, .jsjobs_bg_green .jsjobs_frow_li, .jsjobs_bg_purple .jsjobs_frow_li, .jsjobs_bg_teal .jsjobs_frow_li, .jsjobs_bg_red .jsjobs_frow_li { color: rgba(255,255,255,0.95); } .jsjobs_bg_dark .jsjobs_frow_icon, .jsjobs_bg_green .jsjobs_frow_icon, .jsjobs_bg_purple .jsjobs_frow_icon, .jsjobs_bg_teal .jsjobs_frow_icon, .jsjobs_bg_red .jsjobs_frow_icon { color: rgba(255,255,255,0.6); } /* UI Mockups for Images */ .jsjobs_mockup_browser { width: 100%; max-width: 36em; background: white; border-radius: 1em; box-shadow: var(--shadow-float); overflow: hidden; border: 1px solid var(--slate-200); } .jsjobs_bg_dark .jsjobs_mockup_browser, .jsjobs_bg_green .jsjobs_mockup_browser, .jsjobs_bg_purple .jsjobs_mockup_browser, .jsjobs_bg_teal .jsjobs_mockup_browser, .jsjobs_bg_red .jsjobs_mockup_browser { border: none; box-shadow: var(--shadow-float-dark); } .jsjobs_mockup_head { background: var(--slate-100); padding: 0.75em 1em; display: flex; gap: 0.375em; border-bottom: 1px solid var(--slate-200); } .jsjobs_mockup_dot { width: 0.75em; height: 0.75em; border-radius: 50%; } .jsjobs_dot_r { background: #ef4444; } .jsjobs_dot_y { background: #eab308; } .jsjobs_dot_g { background: #22c55e; } .jsjobs_mockup_body { padding: 2em; min-height: 20em; display: flex; align-items: center; justify-content: center; background: var(--slate-50); position: relative; } .jsjobs_mockup_mobile { width: 18em; height: 36em; background: white; border-radius: 2.5em; box-shadow: var(--shadow-float); border: 8px solid var(--slate-900); position: relative; overflow: hidden; } .jsjobs_mockup_notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 8em; height: 1.5em; background: var(--slate-900); border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; z-index: 10;} .jsjobs_mockup_mbody { padding: 3em 1.5em 1.5em 1.5em; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--slate-50); } /* ATS Kanban */ .jsjobs_mk_kanban_col { flex: 1; background: var(--slate-100); border-radius: 0.5em; padding: 0.5em; display: flex; flex-direction: column; gap: 0.5em; border: 1px solid var(--slate-200);} .jsjobs_mk_kanban_head { font-size: 0.75em; font-weight: 700; color: var(--slate-600); padding: 0.25em 0.5em; display: flex; justify-content: space-between; align-items: center;} .jsjobs_mk_kanban_count { background: var(--slate-200); padding: 0.125em 0.375em; border-radius: 1em; font-size: 0.65em; } .jsjobs_mk_kanban_card { background: white; border: 1px solid var(--slate-200); padding: 0.5em; border-radius: 0.25em; box-shadow: var(--shadow-sm); font-size: 0.75em; font-weight: 600; color: var(--slate-800);} .jsjobs_mk_kanban_sub { font-size: 0.65em; color: var(--slate-400); font-weight: normal; margin-top: 0.25em; display: flex; align-items:center; gap: 0.25em;} /* Multiple overlapping phones for Themes section */ .jsjobs_phones_wrap { display: flex; justify-content: center; gap: 1em; flex-wrap: wrap; } .jsjobs_mini_phone { width: 6em; height: 12em; border-radius: 1em; border: 4px solid var(--slate-900); box-shadow: var(--shadow-md); display: flex; flex-direction: column; } .jsjobs_mp_head { height: 2em; width: 100%; } .jsjobs_mp_body { flex: 1; background: white; padding: 0.5em; display: flex; flex-direction: column; gap: 0.25em; } /* Yellow Background Band for the section */ .jsjobs_bg_yellow { background-color: var(--amber-400); color: var(--slate-900); } /* nav bar */ /* ======================================================== MODERN JOOMLA HEADER CSS (Glassmorphism Floating Pill) ======================================================== */ /* 1. Main Header Wrapper (Floating Pill) */ header.header.container-header { position: sticky; top: 1em; z-index: 50; width: calc(100% - 2em) !important; /* Leaves gap on mobile */ max-width: 72em !important; /* Limits width on large screens */ margin-left: auto; margin-right: auto; padding-left: 1.5em; padding-right: 1.5em; display: flex; justify-content: space-between; align-items: center; height: 4em; border-radius: 1em; /* Glassmorphism Effect */ background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05)); transition: all 0.3s ease; } /* Optional: Scrolled state if you trigger a class via JS later */ header.header.container-header.scrolled { background: rgba(255, 255, 255, 0.85); box-shadow: var(--shadow-glass, 0 8px 32px 0 rgba(31, 38, 135, 0.07)); } /* 2. Logo Constraints */ .navbar-brand .brand-logo img { max-height: 2.5em; /* Scales your 86px logo down to fit the modern nav */ width: auto; display: block; } header .grid-child{width: 200px;margin: 0;} .grid-child img{max-width: 100%;} /* 3. Navigation List (Flexbox) */ header .grid-child.container-nav { display: flex; align-items: center; width: 80%; flex: 1 1 auto; } body .container-header .mod-menu>li>a, body .container-header .mod-menu>li>span{color: #020617;} body .container-header .mod-menu>li.current.active>a{ color: var(--brand-600, #0d9488); } ul.mod-menu.nav { display: flex; align-items: center; gap: 2.5em; list-style: none; margin: 0; padding: 0; } /* 4. Standard Nav Links */ .nav-item a { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 0.875em; color: var(--slate-600, #475569); text-decoration: none; transition: color 0.3s ease; display: inline-block; } .nav-item a:hover, .nav-item a:focus { color: var(--brand-600, #0d9488); } /* Active Menu Item */ .nav-item.active a, .nav-item.current a { color: var(--brand-500, #14b8a6); font-weight: 700; } /* 5. Turn the Login link :last-child) into a CTA Button automatically */ .container-header .mod-menu>li.nav-item:last-child { margin-left: auto; /* Extra space before button */ } .container-header .mod-menu>li.nav-item:first-child { margin-left: auto; /* Extra space before button */ } header.container-header .container-nav{ padding-top: 1em; padding-bottom: 1em; } .nav-item:last-child a { background-color: var(--slate-900, #0f172a); color: #ffffff !important; padding: 0.625em 1.25em; border-radius: 0.75em; font-weight: 700; box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)); transition: all 0.3s ease; } .nav-item:last-child a:hover { background-color: var(--brand-600, #0d9488); transform: translateY(-2px); box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1)); } /* Mobile Responsiveness (Hides standard links on small screens) */ @media (max-width: 768px) { ul.mod-menu.nav .nav-item:not(:last-child) { display: none; } .nav-item:last-child { margin-left: 0; } } /* home job search */ /* 2. Form Flexbox Layout (Overrides Inline Styles) */ /* login */ body.js_jobs_loginpge { background-color: #fafaf9; color: var(--slate-800); -webkit-font-smoothing: antialiased; margin: 0; min-height: 100vh; padding-top: 20px; background-image: radial-gradient(at 10% 20%, hsla(171, 80%, 94%, 1) 0px, transparent 50%), radial-gradient(at 90% 10%, hsla(228, 89%, 95%, 1) 0px, transparent 50%), radial-gradient(at 50% 80%, hsla(190, 80%, 95%, 1) 0px, transparent 50%); background-attachment: fixed; } /* Ambient floating blobs via pseudo-elements */ body.js_jobs_loginpge::before, body.js_jobs_loginpge::after { content: ''; position: fixed; border-radius: 50%; filter: blur(80px); opacity: 0.5; z-index: -1; animation: float 8s infinite ease-in-out; pointer-events: none; } body.js_jobs_loginpge::before { top: 10%; left: 10%; width: 300px; height: 300px; background: rgba(45, 212, 191, 0.3); } body.js_jobs_loginpge::after { bottom: 10%; right: 10%; width: 400px; height: 400px; background: rgba(99, 102, 241, 0.2); animation-delay: -4s; } .js_jobs_loginpge .site-grid { display: flex; flex-wrap: wrap; width: 100%; max-width: 1250px; margin:75px auto !important; background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: var(--glass-border); border-radius: 32px; box-shadow: var(--shadow-float); overflow: hidden; opacity: 0; transform: translateY(20px); animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes slideUp { to { opacity: 1; transform: translateY(0); } } .js_jobs_loginpge .grid-child.container-component { flex: 1; padding: 60px 50px; display: flex; flex-direction: column; justify-content: center; } /* Injecting headers via CSS since we can't edit HTML */ .js_jobs_loginpge .com-users-login::before { content: 'Welcome Back'; display: block; font-size: 32px; font-weight: 800; color: var(--slate-900); margin-bottom: 8px; letter-spacing: -0.5px; } .js_jobs_loginpge .com-users-login>form { position: relative; margin-top: 24px; } .js_jobs_loginpge .com-users-login>form::before { content: 'Enter your credentials to access your account.'; display: block; color: var(--slate-500); margin-bottom: 32px; font-weight: 500; font-size: 16px; margin-top: -24px; } .js_jobs_loginpge .com-users-login__form fieldset { border: none; padding: 0; margin: 0; } .js_jobs_loginpge .control-group { margin-bottom: 20px; } .js_jobs_loginpge .control-label label { display: block; font-size: 14px; font-weight: 700; color: var(--slate-800); margin-bottom: 8px; } .js_jobs_loginpge .control-label .star { color: #ef4444; margin-left: 4px; } /* Hiding redundant joomla text */ .js_jobs_loginpge .form-control-feedback { display: none !important; } .js_jobs_loginpge .form-control { width: 100%; padding: 14px 16px; background: var(--slate-50); border: 1px solid var(--brand-100); border-radius: 12px; box-sizing: border-box; font-family: inherit; font-size: 15px; font-weight: 500; color: var(--slate-900); transition: all 0.3s ease; } .js_jobs_loginpge .form-control:focus { outline: none; background: white; border: 1px solid var(--brand-400); box-shadow: 0 0 0 4px var(--brand-100); } /* Password field and SVG Eye Icon */ .js_jobs_loginpge .password-group .input-group { position: relative; display: flex; align-items: stretch; } .js_jobs_loginpge .password-group .input-group .btn-secondary{ left:0; } .js_jobs_loginpge .password-group .form-control { padding-right: 48px; } .js_jobs_loginpge .input-password-toggle { background: transparent; border: 1px solid var(--brand-100); cursor: default; display: flex; align-items: center; justify-content: center; opacity: 0.5; } /* Injecting SVG icon directly into the span background */ .js_jobs_loginpge .input-password-toggle .icon-eye { display: block; width: 20px; height: 20px; background-image: url("data:image/svg+xml;utf8,"); background-size: contain; background-repeat: no-repeat; background-position: center; } .js_jobs_loginpge .com-users-login__remember .form-check { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; } .js_jobs_loginpge .form-check-input { width: 18px; height: 18px; accent-color: var(--brand-500); cursor: pointer; margin: 0; } .js_jobs_loginpge .form-check-label { font-size: 14px; font-weight: 600; color: var(--slate-600); cursor: pointer; margin: 0; } .js_jobs_loginpge .btn-primary { width: 100%; padding: 16px; border: none; border-radius: 12px; background: linear-gradient(to right, var(--brand-500), var(--brand-600)); color: white; font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 12px rgba(20, 184, 166, 0.2); display: flex; justify-content: center; align-items: center; } .js_jobs_loginpge .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); } .js_jobs_loginpge .com-users-login__options { display: flex; flex-direction: column; gap: 12px; font-size: 14px; margin-top: 20px; } .js_jobs_loginpge .list-group-item { color: var(--brand-600); font-weight: 700; text-decoration: none; transition: color 0.3s; } .js_jobs_loginpge .list-group-item:hover { color: var(--brand-800); text-decoration: underline; } .js_jobs_loginpge .grid-child.container-sidebar-right { flex: 1; background: var(--slate-950); position: relative; } /* Overriding Joomla default card wrappers */ .js_jobs_loginpge .container-sidebar-right .card { border: none; background: transparent; height: 100%; margin: 0; box-shadow: none; border-radius: 0; } .js_jobs_loginpge .container-sidebar-right .card-header { display: none !important; } .js_jobs_loginpge .container-sidebar-right .card-body { padding: 0; height: 100%; } .js_jobs_loginpge .jsjbs_lgin_demo-section { padding: 60px 50px; display: flex; flex-direction: column; justify-content: center; height: 100%; position: relative; } /* Subtle glow inside the dark section */ .jsjbs_lgin_demo-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at top right, rgba(20, 184, 166, 0.15), transparent 40%), radial-gradient(circle at bottom left, rgba(99, 102, 241, 0.1), transparent 40%); } .jsjbs_lgin_demo-section h2 { color: white; font-size: 24px; font-weight: 800; margin: 0 0 8px 0; position: relative; z-index: 1; } .jsjbs_lgin_demo-section p { color: var(--slate-400); margin: 0 0 32px 0; font-weight: 500; position: relative; z-index: 1; } .jsjbs_lgin_demo-cards-wrapper { display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 1; } .jsjbs_lgin_demo-card { background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 20px; display: flex; align-items: center; gap: 16px; transition: all 0.3s ease; position: relative; overflow: hidden; cursor: pointer; } .jsjbs_lgin_demo-card:hover { background: rgba(30, 41, 59, 0.9); transform: translateX(5px); } .jsjbs_lgin_demo-card.jsjbs_lgin_admin:hover { border-color: rgba(20, 184, 166, 0.3); box-shadow: 0 0 20px rgba(20, 184, 166, 0.1); } .jsjbs_lgin_demo-card.jsjbs_lgin_employer:hover { border-color: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.1); } .jsjbs_lgin_demo-card.jsjbs_lgin_user:hover { border-color: rgba(245, 158, 11, 0.3); box-shadow: 0 0 20px rgba(245, 158, 11, 0.1); } .jsjbs_lgin_demo-icon { width: 48px; height: 48px; border-radius: 12px; display: block; background-color: var(--slate-900); border: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.3s; background-position: center; background-repeat: no-repeat; background-size: 24px; flex-shrink: 0; } /* Shield SVG for Admin */ .jsjbs_lgin_demo-card.jsjbs_lgin_admin .jsjbs_lgin_demo-icon { background-image: url("data:image/svg+xml;utf8,"); } /* Building SVG for Employer */ .jsjbs_lgin_demo-card.jsjbs_lgin_employer .jsjbs_lgin_demo-icon { background-image: url("data:image/svg+xml;utf8,"); } /* User SVG for Job Seeker */ .jsjbs_lgin_demo-card.jsjbs_lgin_user .jsjbs_lgin_demo-icon { background-image: url("data:image/svg+xml;utf8,"); } .jsjbs_lgin_demo-info { flex: 1; } .jsjbs_lgin_demo-info h4 { color: white; font-size: 16px; font-weight: 700; margin: 0 0 4px 0; } /* Styling the inline text string provided in your HTML */ .jsjbs_lgin_demo-creds { color: var(--slate-400); font-size: 13px; font-weight: 600; font-family: monospace; letter-spacing: 0.5px; background: rgba(0, 0, 0, 0.2); padding: 4px 8px; border-radius: 6px; display: inline-block; } /* Hide the "Filled!" badge entirely since we are purely CSS and cannot auto-fill */ .js_jobs_loginpge .jsjbs_lgin_copy-badge { display: none !important; } /* Styling the inline text string provided in your HTML */ .jsjbs_lgin_demo-creds { font-size: 13px; font-weight: 600; font-family: monospace; letter-spacing: 0.5px; background: rgba(0,0,0,0.2); padding: 8px 12px; border-radius: 6px; display: inline-flex; flex-direction: column; gap: 2px; } /* Specific classes for credential parts */ .jsjbs_user { color: var(--slate-400); /* Muted color for the label */ display: inline-block; } .jsjbs_userpswrd { color: var(--brand-400); /* Bright teal color for the actual credentials */ } /* ========================================================================= --- END OF NEW CSS ADDED FOR CREDENTIAL SPAN WRAPPERS --- ========================================================================= */ @media (max-width: 900px) { .js_jobs_loginpge .site-grid { flex-direction: column; max-width: 500px; margin: 40px auto; } .js_jobs_loginpge .grid-child.container-component, .js_jobs_loginpge .jsjbs_lgin_demo-section { padding: 40px 30px; } } /* demo counter */ .bento-timer-wrapper { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 24px; padding: 32px; max-width: 420px; margin: 0px auto; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01); text-align: center; } .bento-timer-header { color: #64748b; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 24px; } .bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .bento-box { background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px 10px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; } .bento-box:hover { transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); } .bento-value { color: #0f172a; font-size: 46px; font-weight: 800; line-height: 1; display: block; margin-bottom: 6px; font-variant-numeric: tabular-nums; } .bento-label { color: #94a3b8; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; display: block; } .grid-child.container-bottom-b .card-body{padding: 0;} .bottom-b.card {margin-top: 0;margin-bottom: 0;} .js_counter-wrp{width: 100%;padding: 40px 20px; background-image: radial-gradient(at 10% 20%, hsla(171, 80%, 94%, 1) 0px, transparent 50%), radial-gradient(at 90% 10%, hsla(228, 89%, 95%, 1) 0px, transparent 50%), radial-gradient(at 50% 80%, hsla(190, 80%, 95%, 1) 0px, transparent 50%); background-attachment: fixed;} .js_counter-wrp::before{top: 10%; left: 10%; width: 300px; height: 300px; background: rgba(45, 212, 191, 0.3);} .js_counter-wrp::before, .js_counter-wrp::after{ content: ''; position: fixed; border-radius: 50%; filter: blur(80px); opacity: 0.5; z-index: -1; animation: float 8s infinite ease-in-out; pointer-events: none; } .js_counter-wrp::after{ bottom: 10%; right: 10%; width: 400px; height: 400px; background: rgba(99, 102, 241, 0.2); animation-delay: -4s; } .js_jobs_loginpge .site-grid .grid-child.container-bottom-b{ width: 100vw; position: relative; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }