:root {
--white: #ffffff;
--white-rgb: 255, 255, 255;
--light-soft: #f6f9fc;
--light: #cccccc;
--dark: #212121;
--theme-white: #ffffff;
--theme-white-dm: #121b24;
--theme-white-rgb: 255, 255, 255;
--theme-white-rgb-dm: 18, 27, 36;
--theme-dark: #212121;
--theme-dark-dm: #ffffff;
--theme-dark-rgb: 25, 25, 25;
--theme-dark-rgb-dm: 255, 255, 255;
/*===== Color With Dark Mode =======*/
--body-bg: #f1f7fb;
--body-bg-dm: #0a1117;
--theme-base: #ffffff;
--theme-base-dm: #0f1720;
--theme-primary-dark: #0b2d45;
--theme-primary-dark-hard: #072235;
--theme-primary-dark-dm: #163a52;
--theme-primary-dark-rgb: 9, 40, 60;
--theme-primary-light: #0f5e92;
--theme-primary-light-hard: #0b4d78;
--theme-primary-light-dm: #8fb7d3;
--theme-primary-light-soft-dm: #c6dbeb;
--theme-primary-light-hard-dm: #6f93ac;
--theme-primary-light-rgb: 15, 94, 146;
--theme-primary-light-rgb-dm: 143, 183, 211;
--theme-secondary: #EBCA43;
--theme-secondary-dm: #EBCA43;
--theme-secondary-soft: #fffbcc;
--theme-green: #28A013;
--theme-green-dm: #5fd766;
--theme-green-rgb: 40, 160, 19;
--theme-green-soft: #ddffd9;
--theme-green-rgb-dm: 61, 202, 37;
--theme-soft-green: #f0fbee;
--theme-teal: #149677;
--theme-teal-dm: #4ad6bd;
--theme-orange: #F97316;
--theme-orange-dm: #ff9b59;
--gradient-primary: linear-gradient(to right, #0b2d45 0%, #0f5e92 100%);
--gradient-secondary: linear-gradient(to right, #EBCA43 0%, #28A013 100%);
--neutral-dark: #1E2123;
--neutral-dark-dm: #e5edf4;
--neutral-dark-1: #5f7485;
--neutral-dark-1-dm: #b3c2cf;
--neutral-dark-2: #425a6b;
--neutral-dark-2-dm: #91a5b5;
--neutral-dark-3: #1d3547;
--neutral-dark-3-dm: #d2dfeb;
--neutral-dark-4: #1E2123;
--neutral-dark-4-dm: #617789;
--neutral-white: #ffffff;
--neutral-white-dm: #121b24;
--neutral-white-1: #f3f8fb;
--neutral-white-1-dm: #17222d;
--neutral-white-2: #e8f0f6;
--neutral-white-2-dm: #1d2a36;
--neutral-white-3: #d1e0ea;
--neutral-white-3-dm: #2a3947;
--neutral-white-4: #bfd2df;
--neutral-white-4-dm: #344656;
/*======= Foundation blue ============*/
--foundation-blue-1: #ffffff;
--foundation-blue-2: #FDFDFE;
--foundation-blue-3: #F5F8FA;
--foundation-blue-4: #F1F5F7;
--foundation-blue-rgb-4: 241, 245, 247;
--foundation-blue-5: #DBE5EB;
--foundation-blue-rgb-5: 219, 229, 235;
--foundation-blue-6: #C4D3DD;
--foundation-blue-7: #94B0C2;
--foundation-blue-8: #648DA7;
--foundation-blue-9: #517F9C;
--foundation-blue-10: #356A8B;
--foundation-blue-11: #2E6587;
--foundation-blue-12: #245E82;
--foundation-blue-13: #115077;
--border: #cfdee8;
--border-dm: #2a3a47;
--muted: #667b8d;
--muted-dm: #8ea2b2;
--theme-light: #e7eff5;
--theme-light-dm: #415667;
--light-muted: #7e91a0;
--surface-0-lm: #f1f7fb;
--surface-1-lm: #fbfdff;
--surface-2-lm: #f3f8fb;
--surface-3-lm: #e7eff5;
--surface-4-lm: #dce8f0;
--surface-border-lm: #cfdee8;
--surface-border-strong-lm: #b3cbda;
--surface-shadow-lm: 0 18px 44px rgba(11, 45, 69, 0.1);
--surface-shadow-strong-lm: 0 24px 56px rgba(11, 45, 69, 0.14);
--surface-tint-lm: rgba(15, 94, 146, 0.08);
--surface-tint-soft-lm: rgba(235, 202, 67, 0.16);
--light-muted-dm: #7c92a4;
--surface-0-dm: #0a1117;
--surface-1-dm: #0f1720;
--surface-2-dm: #121b24;
--surface-3-dm: #17222d;
--surface-4-dm: #1d2a36;
--surface-overlay-dm: rgba(12, 18, 25, 0.84);
--surface-border-dm: #2a3a47;
--surface-border-strong-dm: #344656;
--surface-ring-dm: rgba(143, 183, 211, 0.18);
--surface-shadow-dm: 0 22px 60px rgba(0, 0, 0, 0.28);
/*========== Shadow ==============*/
--shadow-t1: 0 20px 60px 0 rgba(46, 33, 61, 0.08);
--shadow-t1-dm: 0 22px 60px 0 rgba(0, 0, 0, 0.28);
/*======== Alert Color ================*/
--alert-primary: #0D67CF;
--alert-secondary: #7E8189;
--alert-success: #40BF63;
--alert-warning: #EE9500;
--alert-error: #EB4029;
--action-font-size-xs: 11px;
--action-font-size-sm: 12px;
--action-font-size-md: 14px;
--action-font-size-lg: 16px;
--action-font-size-xl: 20px;
--paragraph-xs: 13px;
--paragraph-s: 14px;
--paragraph-m: 15px;
--paragraph-l: 20px;
--paragraph-xl: 24px;
--paragraph-xxl: 30px;
--heading-1: 68px;
--heading-2: 54px;
--heading-3: 36px;
--heading-4: 22px;
--heading-5: 18px;
--heading-6: 14px;
}
@media screen and (max-width: 1600px) {
:root {
--heading-1: 48px;
--heading-2: 36px;
--heading-3: 28px;
--heading-4: 22px;
--heading-5: 18px;
--heading-6: 14px;
}
}
@media screen and (max-width: 991px) {
:root {
--heading-1: 40px;
--heading-2: 32px;
--heading-3: 24px;
--heading-4: 18px;
--heading-5: 16px;
--heading-6: 13px;
}
}
@media screen and (max-width: 576px) {
:root {
--heading-1: 32px;
--heading-2: 28px;
--heading-3: 24px;
--heading-4: 20px;
--heading-5: 17px;
--heading-6: 14px;
}
}
[data-theme="dark"] {
--theme-white: var(--theme-white-dm);
--theme-white-rgb: var(--theme-white-rgb-dm);
--body-bg: var(--body-bg-dm);
--theme-base: var(--theme-base-dm);
/*--theme-primary-light: var(--theme-primary-light-dm);*/
--theme-primary-light-rgb: var(--theme-primary-light-rgb-dm);
--theme-secondary: var(--theme-secondary-dm);
--theme-green: var(--theme-green-dm);
--theme-green-rgb: var(--theme-green-rgb-dm);
--theme-teal: var(--theme-teal-dm);
--theme-orange: var(--theme-orange-dm);
/*--gradient-primary: var(--gradient-primary-dm);*/
/*--gradient-secondary: var(--gradient-secondary-dm);*/
--neutral-dark: var(--neutral-dark-dm);
--neutral-dark-1: var(--neutral-dark-1-dm);
--neutral-dark-2: var(--neutral-dark-2-dm);
--neutral-dark-3: var(--neutral-dark-3-dm);
--neutral-dark-4: var(--neutral-dark-4-dm);
--neutral-white: var(--neutral-white-dm);
--neutral-white-1: var(--neutral-white-1-dm);
--neutral-white-2: var(--neutral-white-2-dm);
--neutral-white-3: var(--neutral-white-3-dm);
--neutral-white-4: var(--neutral-white-4-dm);
--border: var(--border-dm);
--muted: var(--muted-dm);
--theme-light: var(--theme-light-dm);
--light-muted: var(--light-muted-dm);
--shadow-t1: var(--shadow-t1-dm);
}
.full-page-bg-img {
background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url("../assets/tree-bottom-bg.png");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: bottom center;
}
[data-theme="dark"] {
.full-page-bg-img {
background-image: none;
}
}
body {
font-family: "Inter", sans-serif;
color: var(--neutral-dark);
/*font-family: "Poppins", sans-serif;*/
background-color: var(--body-bg);
}
[data-theme="dark"] {
body {
color: var(--neutral-white);
}
}
.dark-mode-toggler {
position: relative;
border: none;
background-color: transparent;
padding: 8px 12px 2px 12px;
margin-left: 1rem;
border-left: 1px solid #dddddd;
}
@media screen and (max-width: 991px) {
.dark-mode-toggler {
border-left: none;
}
}
.dark-mode-toggler::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: url('data:image/svg+xml;utf8,');
/*background: url("data:image/svg+xml;utf8,");*/
background-size: contain;
background-repeat: no-repeat;
opacity: .75;
}
[data-theme="dark"] {
.dark-mode-toggler {
border-left-color: #444444;
}
.dark-mode-toggler::before {
background: url('data:image/svg+xml;utf8,');
}
}
a {
text-decoration: none;
color: var(--theme-primary-light);
}
[data-theme="dark"] {
a {
color: var(--theme-primary-light-dm);
}
}
.shadow-t1 {
box-shadow: var(--shadow-t1);
}
.paragraph-xs {
font-size: var(--paragraph-xs)
}
.paragraph-s {
font-size: var(--paragraph-s)
}
.paragraph-m {
font-size: var(--paragraph-m)
}
.paragraph-l {
font-size: var(--paragraph-l)
}
.paragraph-xl {
font-size: var(--paragraph-xl)
}
.paragraph-xxl {
font-size: var(--paragraph-xxl)
}
.action-fs-xs {
font-size: var(--action-font-size-xs)
}
.action-fs-s {
font-size: var(--action-font-size-sm)
}
.action-fs-m {
font-size: var(--action-font-size-md)
}
.action-fs-l {
font-size: var(--action-font-size-lg)
}
.action-fs-xl {
font-size: var(--action-font-size-xl)
}
.heading-1, h1 {
font-size: var(--heading-1)
}
.heading-2, h2 {
font-size: var(--heading-2)
}
.heading-3, h3 {
font-size: var(--heading-3)
}
.heading-4, h4 {
font-size: var(--heading-4)
}
.heading-5, h5 {
font-size: var(--heading-5)
}
.heading-6, h6 {
font-size: var(--heading-6)
}
/*============= text color ===============*/
[data-theme="dark"] {
.text-dark {
color: var(--theme-primary-light-soft-dm) !important;
}
.text-secondary {
color: var(--muted) !important;
}
}
.text-neutral-dark {
color: var(--neutral-dark) !important;
}
.text-neutral-dark-1 {
color: var(--neutral-dark-1) !important;
}
.text-neutral-dark-2 {
color: var(--neutral-dark-2) !important;
}
.text-neutral-dark-3 {
color: var(--neutral-dark-3) !important;
}
.text-neutral-dark-4 {
color: var(--neutral-dark-4) !important;
}
.text-neutral-white {
color: var(--neutral-white) !important;
}
.text-neutral-white-1 {
color: var(--neutral-white-1) !important;
}
.text-neutral-white-2 {
color: var(--neutral-white-2) !important;
}
.text-neutral-white-3 {
color: var(--neutral-white-3) !important;
}
.text-neutral-white-4 {
color: var(--neutral-white-4) !important;
}
.text-theme-primary {
color: var(--theme-primary-light) !important;
}
[data-theme="dark"] {
.text-theme-primary {
color: var(--theme-primary-light-dm) !important;
}
}
a.text-theme-primary:hover {
color: var(--theme-primary-dark);
}
.text-theme-primary-dark {
color: var(--theme-primary-dark) !important;
}
[data-theme="dark"] {
.text-theme-primary-dark {
color: var(--theme-primary-light-dm) !important;
}
}
.text-theme-secondary {
color: var(--theme-secondary) !important;
}
.text-theme-green {
color: var(--theme-green) !important;
}
.text-theme-teal {
color: var(--theme-teal) !important;
}
.text-theme-orange {
color: var(--theme-orange) !important;
}
.text-muted {
color: var(--muted) !important;
}
.text-light-muted {
color: var(--light-muted) !important;
}
.text-muted-to-green {
color: var(--muted) !important;
}
.text-muted-to-green:hover {
color: var(--theme-green) !important;
}
[data-theme="dark"] {
.text-light {
color: #dddddd !important;
}
}
.text-overflow-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block; /* or inline-block */
min-width: 0;
}
/*=============== Background Color ==============*/
.bg-glassmorphism-light {
background-color: rgba(255, 255, 255, .15);
backdrop-filter: blur(8px);
color: #FFFFFF;
}
[data-theme="dark"] {
.bg-glassmorphism-light {
background-color: rgba(0, 0, 0, .15);
color: #eeeeee;
}
}
.bg-theme-light {
background-color: var(--theme-light);
}
.bg-theme-primary {
background-color: var(--theme-primary-light);
}
.bg-theme-primary-soft {
background-color: var(--theme-primary-light-soft-dm);
}
[data-theme="dark"] {
.bg-theme-primary-soft {
background-color: var(--neutral-white-4);
}
}
.bg-theme-primary-dark {
background-color: var(--theme-primary-dark);
}
.bg-theme-secondary {
background-color: var(--theme-secondary);
}
.bg-theme-secondary-soft {
background-color: var(--theme-secondary-soft);
}
[data-theme="dark"] {
.bg-theme-secondary-soft {
background-color: rgba(235, 202, 37, .2);
color: rgba(235, 202, 37, 1) !important;
}
}
.bg-theme-green {
background-color: var(--theme-green);
}
.bg-theme-green-soft {
background-color: var(--theme-green-soft);
}
[data-theme="dark"] {
.bg-theme-green-soft {
background-color: rgba(40, 160, 19, .2);
color: rgba(40, 160, 19, 1) !important;
}
}
.bg-theme-teal {
background-color: var(--theme-teal);
}
.bg-gradient-primary {
background: var(--theme-primary-light);
background-image: var(--gradient-primary);
}
.bg-gradient-secondary {
background: var(--theme-secondary);
background-image: var(--gradient-secondary);
}
.background-clip-text {
background-clip: text;
}
.bg-neutral-white {
background-color: var(--neutral-white)
}
.bg-neutral-white-1 {
background-color: var(--neutral-white-1)
}
.bg-neutral-white-2 {
background-color: var(--neutral-white-2)
}
[data-theme="dark"] {
.bg-neutral-white-2-hard {
background-color: var(--neutral-white-3) !important;
}
}
.bg-neutral-white-3 {
background-color: var(--neutral-white-3)
}
.bg-neutral-white-4 {
background-color: var(--neutral-white-4)
}
.bg-transparent-15 {
background-color: rgba(0, 0, 0, .15);
}
.bg-transparent-20 {
background-color: rgba(0, 0, 0, .20);
}
.bg-white-transparent-20 {
background-color: rgba(224, 216, 216, .20);
}
/*===== Foundation blue ==========*/
.bg-foundation-blue-3 {
background-color: var(--foundation-blue-3) !important;
}
[data-theme="dark"] {
.bg-foundation-blue-3 {
background-color: var(--theme-base) !important;
}
}
.bg-foundation-blue-4 {
background-color: var(--foundation-blue-4) !important;
}
.bg-foundation-blue-7 {
background-color: var(--foundation-blue-7) !important;
}
.bg-foundation-blue-4-transparent-90 {
background-color: rgba(var(--foundation-blue-rgb-4), .90) !important;
}
.bg-foundation-blue-4-transparent-50 {
background-color: rgba(var(--foundation-blue-rgb-4), .50) !important;
}
.bg-foundation-blue-4-transparent-25 {
background-color: rgba(var(--foundation-blue-rgb-4), .25) !important;
}
[data-theme="dark"] {
.bg-foundation-blue-4-transparent-90 {
background-color: rgba(var(--foundation-blue-rgb-4), .025) !important;
}
.bg-foundation-blue-4 {
background-color: var(--foundation-blue-11) !important;
}
.bg-foundation-blue-7 {
background-color: var(--foundation-blue-13) !important;
}
.bg-foundation-blue-4-transparent-25 {
background-color: transparent !important;
}
.bg-white {
background-color: var(--theme-white-dm) !important;
}
.bg-light {
background-color: #313131 !important;
}
}
/*============= Border style ===============*/
[data-theme="dark"] {
.border {
border-color: var(--neutral-white-3-dm) !important;
}
.border-light {
border-color: var(--neutral-dark-4) !important;
}
}
.border-theme-primary {
border-color: var(--theme-primary-light);
}
.border-theme-primary-dark {
border-color: var(--theme-primary-dark);
}
.border-theme-secondary {
border-color: var(--theme-secondary);
}
.border-theme-green {
border-color: var(--theme-green);
}
.border-theme-teal {
border-color: var(--theme-teal);
}
.border-neutral-white {
border-color: var(--neutral-white) !important;
}
.border-neutral-white-1 {
border-color: var(--neutral-white-1) !important;
}
.border-neutral-white-2 {
border-color: var(--neutral-white-2) !important;
}
.border-neutral-white-3 {
border-color: var(--neutral-white-3) !important;
}
.border-neutral-white-4 {
border-color: var(--neutral-white-4) !important;
}
.border-foundation-blue-1 {
border-color: var(--foundation-blue-1) !important;
}
.border-foundation-blue-2 {
border-color: var(--foundation-blue-2) !important;
}
.border-foundation-blue-3 {
border-color: var(--foundation-blue-3) !important;
}
.border-foundation-blue-4 {
border-color: var(--foundation-blue-4) !important;
}
.border-foundation-blue-5 {
border-color: var(--foundation-blue-5) !important;
}
.border-foundation-blue-6 {
border-color: var(--foundation-blue-6) !important;
}
.border-foundation-blue-7 {
border-color: var(--foundation-blue-7) !important;
}
[data-theme="dark"] {
.border-foundation-blue-4 {
border-color: var(--foundation-blue-11) !important;
}
.border-foundation-blue-7 {
border-color: var(--foundation-blue-13) !important;
}
}
.border-6 {
border-width: 6px !important;
}
.border-7 {
border-width: 7px !important;
}
/*============= Button Color ===============*/
.btn {
position: relative;
padding: 8px 20px;
font-size: var(--action-font-size-md);
border-radius: 4px;
display: inline-flex;
display: -webkit-inline-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
}
.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
/*color: initial !important;*/
background-color: initial !important;
border-color: initial !important;
}
.btn-theme-primary-dark {
background-color: var(--theme-primary-dark);
border-color: var(--theme-primary-dark);
color: #ffffff;
}
.btn.btn-theme-primary-dark:active,
.btn-theme-primary-dark.btn:first-child:active,
.btn-theme-primary-dark:hover {
background-color: var(--theme-primary-dark-hard) !important;
border-color: var(--theme-primary-dark-hard) !important;
color: #ffffff !important;
}
.btn-theme-primary {
background-color: var(--theme-primary-light);
border-color: var(--theme-primary-light);
color: #ffffff;
}
.btn.btn-theme-primary:active,
.btn-theme-primary.btn:first-child:active,
.btn-theme-primary:hover {
background-color: var(--theme-primary-dark) !important;
border-color: var(--theme-primary-dark) !important;
color: #ffffff !important;
}
[data-theme="dark"] {
.btn.btn-theme-primary:active,
.btn-theme-primary.btn:first-child:active,
.btn-theme-primary:hover {
background-color: var(--theme-primary-dark-dm) !important;
border-color: var(--theme-primary-dark-dm) !important;
color: #ffffff !important;
}
}
.btn-outline-theme-primary {
background-color: transparent;
border-color: var(--theme-primary-light);
color: var(--theme-primary-light);
}
.btn.btn-outline-theme-primary:active,
.btn-outline-theme-primary.btn:first-child:active,
.btn-outline-theme-primary:hover {
background-color: var(--theme-primary-light) !important;
border-color: var(--theme-primary-light) !important;
color: #ffffff !important;
}
.btn-theme-light-to-primary {
background-color: var(--theme-light);
border-color: var(--foundation-blue-6);
}
[data-theme="dark"] {
.btn-theme-light-to-primary {
background-color: var(--theme-primary-light-dm);
border-color: var(--foundation-blue-6);
}
}
.btn.btn-theme-light-to-primary:active,
.btn-theme-light-to-primary.btn:first-child:active,
.btn-theme-light-to-primary:hover {
background-color: var(--theme-primary-light) !important;
border-color: var(--theme-primary-light) !important;
color: #FFFFFF !important;
}
.btn-theme-secondary {
background-color: var(--theme-secondary);
border-color: var(--theme-secondary);
color: var(--theme-primary-dark) !important;
}
.btn.btn-theme-secondary:active,
.btn-theme-secondary.btn:first-child:active,
.btn-theme-secondary:hover {
background-color: var(--theme-primary-light) !important;
border-color: var(--theme-primary-light) !important;
color: #ffffff !important;
}
.btn-theme-green {
border-color: var(--theme-green);
background-color: var(--theme-green);
color: #ffffff;
}
.btn.btn-theme-green:active,
.btn-theme-green.btn:first-child:active,
.btn-theme-green:hover {
background-color: var(--theme-primary-light) !important;
color: #ffffff !important;
}
[data-theme="dark"] {
.btn-theme-green {
color: #ffffff;
}
}
.btn-outline-theme-green {
background-color: transparent;
border-color: var(--theme-green);
color: var(--theme-green);
}
[data-theme="dark"] .btn-outline-theme-green {
border-color: var(--theme-green);
color: var(--theme-green);
}
.btn.btn-outline-theme-green:active,
.btn-outline-theme-green.btn:first-child:active,
.btn-outline-theme-green:hover {
background-color: var(--theme-green) !important;
border-color: var(--theme-green) !important;
color: #ffffff !important;
}
[data-theme="dark"] .btn.btn-outline-theme-green:active,
[data-theme="dark"] .btn-outline-theme-green.btn:first-child:active,
[data-theme="dark"] .btn-outline-theme-green:hover {
background-color: var(--theme-green) !important;
border-color: var(--theme-green) !important;
color: #0a1117 !important;
}
.btn-neutral-white-3 {
background-color: var(--neutral-white-3);
border-color: var(--neutral-white-3);
color: var(--theme-primary-dark);
}
[data-theme="dark"] {
.btn-neutral-white-3 {
background-color: var(--neutral-dark-2);
border-color: var(--neutral-white-1);
color: var(--theme-primary-dark);
}
}
.btn.btn-neutral-white-3:active,
.btn-neutral-white-3.btn:first-child:active,
.btn-neutral-white-3:hover {
background-color: var(--theme-primary-light) !important;
border-color: var(--theme-primary-light) !important;
color: #ffffff !important;
}
/*======== Shadow style =================*/
.custom-btn-shadow {
box-shadow: 0 10px 15px -3px rgba(var(--theme-primary-light));
}
/*=========== Button Sizing =============*/
.btn-xs {
padding: 3px 6px;
font-size: var(--action-font-size-xs);
border-radius: 4px;
}
.btn-sm {
padding: 8px 16px;
font-size: var(--action-font-size-sm);
}
.btn-md {
padding: 10px 20px;
font-size: var(--action-font-size-md);
}
.btn-lg {
padding: 10px 24px;
font-size: var(--action-font-size-lg);
}
.btn-xl {
padding: 14px 28px;
font-size: var(--action-font-size-xl);
border-radius: 8px !important;
}
/*========== Tailing ===============*/
.tailing-icon {
position: relative;
transform: scale(1.5) translateY(2px);
display: inline-block;
padding: 0 16px;
}
.btn-sm .tailing-icon {
padding: 0 12px 0 8px;
transform: scale(1.5) translateY(1px);
}
.btn.tailing {
padding-right: 0;
}
.btn-lg.tailing {
padding-right: 8px;
}
.btn-lg .tailing-icon {
padding: 0 16px;
transform: scale(1.5) translateY(4px);
}
/*========== leading ===============*/
.leading-icon {
position: relative;
transform: scale(1.75);
display: inline-block;
margin-top: 4px;
padding: 0 16px;
}
.btn-sm .leading-icon {
padding: 0 8px 0 12px;
}
.btn.leading {
padding-left: 0;
}
.btn-lg.leading {
padding-left: 8px;
}
.btn-lg .leading-icon {
padding: 0 16px;
margin-top: 6px;
}
/*========== Alert ================*/
.alert-bg-primary {
background-color: var(--alert-primary);
}
.alert-bg-secondary {
background-color: var(--alert-secondary);
}
.alert-bg-success {
background-color: var(--alert-success);
}
.alert-bg-warning {
background-color: var(--alert-warning);
}
.alert-bg-error, .alert-bg-danger {
background-color: var(--alert-error);
}
.alert-text-primary {
color: var(--alert-primary);
}
.alert-text-secondary {
color: var(--alert-secondary);
}
.alert-text-success {
color: var(--alert-success);
}
.alert-text-warning {
color: var(--alert-warning);
}
.alert-text-error, .alert-text-danger {
color: var(--alert-error);
}
/*============= Badge style ================*/
.custom-badge {
display: inline-flex;
display: -webkit-inline-flex;
align-items: center;
-webkit-align-items: center;
border-radius: 4px;
--webkit-border-radius: 4px;
border: 1px solid rgba(var(--theme-green-rgb), .20);
background-color: rgba(var(--theme-green-rgb), .05);
padding: 2px 7px;
color: var(--theme-green);
font-family: Poppins, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 15px */
}
/*======== Form Style ===============*/
[data-theme="dark"] {
select option {
background-color: #3B3F42 !important;
}
.form-select, .form-control {
background-color: var(--theme-white);
color: var(--theme-primary-light-dm);
}
}
/*===== Animation ================*/
@keyframes fadeIn {
from {
opacity: 0;
}
}
@keyframes fadeInUp {
from {
margin-top: 1rem;
opacity: 0;
}
}
/*========= Main ==============*/
main {
min-height: 60vh;
}
/*=========== Customize Container ===================*/
/* Use full-width containers through mobile and tablet ranges, then reintroduce
a fixed desktop measure only once there is enough horizontal space. This
avoids the narrow Bootstrap tablet caps that were leaving oversized side
gutters across the public frontend. */
.container {
width: 100%;
max-width: 100%;
padding-left: 16px;
padding-right: 16px;
}
@media screen and (min-width: 576px) {
.container {
padding-left: 20px;
padding-right: 20px;
}
}
@media screen and (min-width: 768px) {
.container {
padding-left: 24px;
padding-right: 24px;
}
}
@media screen and (min-width: 1366px) {
.container {
max-width: 1248px;
padding-left: 16px;
padding-right: 16px;
}
.row:not(.g-0):not(.g-1):not(.g-2):not(.g-3):not(.g-4):not(.g-5):not(.g-6):not(.g-7):not(.g-8):not(.g-9):not(.g-10) {
--bs-gutter-x: 32px;
}
.gy-32px.row {
--bs-gutter-y: 32px;
}
}
.row.g-6px {
--bs-gutter-x: 6px !important;
--bs-gutter-y: 6px !important;
}
.row.g-12px {
--bs-gutter-x: 12px !important;
--bs-gutter-y: 12px !important;
}
.d-flex.gap-6px {
--bs-gutter-x: 6px !important;
--bs-gutter-y: 6px !important;
}
.flex-content-center {
flex-direction: column;
-webkit-flex-direction: column;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
}
.img-fit-center,
.object-fit-center {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.img-fit-cover {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.overlay-content {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 1;
top: 0;
left: 0;
}
.overlay-link {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 2;
top: 0;
left: 0;
}
/*============ Square, rectangle box =================*/
.square-box {
position: relative;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
width: 36px;
height: 36px;
}
.square-box-36 {
width: 36px !important;
height: 36px !important;
}
.square-box-40 {
width: 40px !important;
height: 40px !important;
}
.square-box-55 {
width: 55px !important;
height: 55px !important;
}
.square-box-60 {
width: 60px !important;
height: 60px !important;
}
.square-box-70 {
width: 70px !important;
height: 70px !important;
}
.square-box-80 {
width: 80px;
height: 80px;
}
.square-box-120 {
width: 120px !important;
height: 120px !important;
}
@media screen and (min-width: 992px) {
.square-box-lg-120 {
width: 120px !important;
height: 120px !important;
}
}
/*=============== Animated Hamburger ================*/
.animated-hamburger {
border: none;
}
.animated-hamburger:focus {
box-shadow: none;
outline: none;
}
.animated-hamburger .animated-icon {
display: inline-block;
width: 30px;
height: 20px;
position: relative;
transform: rotate(0deg);
transition: 0.5s;
cursor: pointer;
}
.animated-hamburger .animated-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: var(--theme-primary-light);
border-radius: 3px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: 0.25s ease-in-out;
}
.animated-hamburger .animated-icon span:nth-child(1) {
top: 0;
}
.animated-hamburger .animated-icon span:nth-child(2),
.animated-hamburger .animated-icon span:nth-child(3) {
top: 8.5px;
}
.animated-hamburger .animated-icon span:nth-child(4) {
top: 17px;
}
[aria-expanded="true"] .animated-icon span:nth-child(1) {
top: 8.5px;
width: 0%;
left: 50%;
}
[aria-expanded="true"] .animated-icon span:nth-child(2) {
transform: rotate(45deg);
}
[aria-expanded="true"] .animated-icon span:nth-child(3) {
transform: rotate(-45deg);
}
[aria-expanded="true"] .animated-icon span:nth-child(4) {
top: 8.5px;
width: 0%;
left: 50%;
}
/*=============== main navbar =============*/
.main-navbar {
background-color: rgba(var(--theme-white-rgb), .85);
backdrop-filter: blur(5px);
padding: 16px 0;
position: sticky;
top: 0;
z-index: 3;
}
@media screen and (max-width: 1600px) {
.main-navbar {
padding: 8px 0;
}
}
.scroll-effect {
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
}
.navbar-brand {
padding-top: 6px;
padding-bottom: 8px;
}
.brand-logo, .brand-logo-dm {
width: 174px;
height: auto;
}
.brand-logo-dm {
display: none;
}
[data-theme="dark"] {
.main-navbar .brand-logo {
display: none;
}
.brand-logo-dm {
display: block;
}
}
.main-nav-menu > .nav-item > .nav-link {
color: var(--neutral-dark);
font-weight: 500;
font-size: var(--action-font-size-lg);
padding: 10px 12px;
}
.main-nav-menu > .nav-item > .nav-link:hover {
color: var(--theme-primary-light);
}
@media screen and (max-width: 991px) {
.main-nav-menu > .nav-item > .nav-link {
display: flex;
justify-content: space-between;
}
}
[data-theme="dark"] {
.main-nav-menu > .nav-item > .nav-link {
color: var(--theme-primary-light-dm);
}
.main-nav-menu > .nav-item > .nav-link:hover {
color: var(--theme-primary-light-soft-dm);
}
}
/*========= Order ========*/
@media screen and (max-width: 767px) {
.order-md-down-last {
order: 12;
}
}
@media screen and (max-width: 991px) {
.main-navbar .navbar-collapse {
overflow: auto;
max-height: calc(100vh - 90px);
}
/*body:has(.main-navbar .navbar-collapse.show) {*/
/* overflow: hidden;*/
/*}*/
}
/*========= End Order ========*/
.nav-dropdown-menu {
border: none;
border-radius: 8px;
background-color: var(--theme-base);
box-shadow: 0 0 3px rgba(16, 24, 40, .1);
animation-name: fadeIn;
animation-duration: .5s;
animation-iteration-count: 1;
padding: 12px;
}
@media screen and (min-width: 992px) {
.nav-dropdown-menu {
min-width: 360px;
}
.nav-dropdown-menu-lg {
min-width: 692px;
}
}
.nav-dropdown-item {
display: flex;
display: -webkit-flex;
color: var(--neutral-dark);
padding: 8px 12px;
transition: all .5s ease;
border-radius: 4px;
}
.nav-dropdown-item-icon {
width: 24px;
min-width: 24px;
display: inline-flex;
justify-content: center;
color: inherit;
line-height: 1;
transform: translateY(2px);
}
.nav-dropdown-item-content {
min-width: 0;
}
.nav-dropdown-item:hover {
background-color: #FAFAFA;
color: var(--theme-primary-light);
padding-left: 16px;
}
[data-theme="dark"] {
.nav-dropdown-item {
color: var(--theme-primary-light-dm);
}
.nav-dropdown-item:hover {
background-color: rgba(255, 255, 255, .05);
}
}
.nav-dropdown-item-title {
font-weight: 500;
font-size: var(--action-font-size-lg);
display: block;
line-height: 1.25;
}
.nav-dropdown-item-subtitle {
/*font-size: var(--paragraph-s);*/
font-size: 12px;
display: block;
color: var(--muted);
font-weight: 400;
margin-top: 2px;
line-height: 1.35;
}
.nav-dropdown-menu.nav-dropdown-menu-lg .nav-dropdown-item {
margin-bottom: 2px;
}
@media screen and (min-width: 992px) {
.nav-dropdown-menu.nav-dropdown-menu-lg .row > [class*="col-"] + [class*="col-"] {
border-left: 1px solid rgba(16, 24, 40, .06);
}
}
[data-theme="dark"] {
.nav-dropdown-menu.nav-dropdown-menu-lg .row > [class*="col-"] + [class*="col-"] {
border-left-color: rgba(255, 255, 255, .08);
}
}
/*========= Scale ================*/
.scale-125 {
transform: scale(1.25);
}
.scale-150 {
transform: translateY(2px) scale(1.5);
}
.scale-175 {
transform: translateY(2px) scale(1.75);
}
.scale-200 {
transform: translateY(2px) scale(2);
}
.translate-y-2 {
transform: translateY(2px);
}
.translate-y-3 {
transform: translateY(3px);
}
.translate-y-4 {
transform: translateY(4px);
}
.hover-translate-y {
transition: all .3s ease;
}
.hover-translate-y:hover {
transform: translateY(-8px);
}
/*========== margin style ==============*/
.mt-05 {
margin-top: 2px !important;
}
.mt-20px {
margin-top: 20px;
}
.mt-32px {
margin-top: 32px;
}
.mt-40px {
margin-top: 40px;
}
.mt-50px {
margin-top: 50px;
}
.mt-60px {
margin-top: 60px;
}
.mb-12px {
margin-bottom: 12px !important;
}
.mb-20px {
margin-bottom: 20px;
}
.mb-30px {
margin-bottom: 30px;
}
@media screen and (min-width: 992px) {
.mb-lg-32px {
margin-bottom: 32px !important;
}
.mb-lg-36px {
margin-bottom: 36px !important;
}
}
.mb-28px {
margin-bottom: 28px;
}
.mb-40px {
margin-bottom: 40px;
}
.mb-60px {
margin-bottom: 60px;
}
.me-12px {
margin-right: 12px;
}
.mb-100px {
margin-bottom: 100px;
}
.mx-n2 {
margin-left: -.5rem;
margin-right: -.5rem;
}
.mx-n3 {
margin-left: -1rem;
margin-right: -1rem;
}
/*=========== Padding style ===============*/
.pt-05 {
padding-top: 2px !important;
}
.p-10px {
padding: 10px !important;
}
.p-12px {
padding: 12px !important;
}
.pb-20px {
padding-bottom: 20px !important;
}
.pt-20px {
padding-top: 20px !important;
}
.p-32px {
padding: 32px !important;
}
.ps-12px {
padding-left: 12px !important;
}
.px-12px {
padding-left: 12px !important;
padding-right: 12px !important;
}
.py-12px {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.py-36px {
padding-top: 36px !important;
padding-bottom: 36px !important;
}
@media screen and (min-width: 992px) {
.p-lg-32px {
padding: 32px !important;
}
.p-lg-36px {
padding: 36px !important;
}
.py-lg-36px {
padding-top: 36px !important;
padding-bottom: 36px !important;
}
.p-lg-40px {
padding: 40px !important;
}
.py-lg-100px {
padding-top: 100px !important;
padding-bottom: 100px !important;
}
}
@media screen and (min-width: 1200px) {
.py-xl-140px {
padding-top: 140px !important;
padding-bottom: 140px !important;
}
}
.px-44px {
padding-left: 44px;
padding-right: 44px !important;
}
.py-70px {
padding-top: 70px;
padding-bottom: 70px !important;
}
.pb-96px {
padding-bottom: 96px !important;
}
.pb-100px {
padding-bottom: 100px !important;
}
.ps-100px {
padding-left: 100px !important;
}
/*============ ratio =============*/
.ratio-4x2 {
--bs-aspect-ratio: 50%;
}
.ratio-1x1-skip-grid-gap {
--bs-aspect-ratio: calc(100% - 16px);
}
.ratio-1x1-add-grid-gap {
--bs-aspect-ratio: calc(100% + 16px);
}
.ratio-4x2-skip-grid-gap {
--bs-aspect-ratio: calc(50% - 16px);
}
@media screen and (min-width: 768px) {
.ratio-md-1x1-add-grid-gap {
--bs-aspect-ratio: calc(100% + 16px);
}
}
/*=========== height style ===========*/
.min-h-400px {
min-height: 400px;
}
.h-24px {
height: 24px !important;
}
/*=========== width style ===========*/
.w-30px {
width: 30px !important;
}
.w-45px {
width: 45px !important;
}
.cursor-pointer {
cursor: pointer;
}
/*============ Section With Bg ===============*/
.section {
margin-bottom: 100px;
}
.section-pt-100px {
padding-top: 100px;
}
@media screen and (max-width: 1600px) {
.section {
margin-bottom: 60px;
}
.section-pt-100px {
padding-top: 60px;
}
}
@media screen and (max-width: 1199px) {
.section {
margin-bottom: 64px;
}
.section-pt-100px {
padding-top: 64px;
}
}
.section-with-bg {
position: relative;
}
.home-section-bg-image {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.is-featured-card {
position: relative;
/*border-color: var(--theme-secondary, #d4a800) !important;*/
border: 2px solid var(--theme-secondary, #d4a800) !important;
}
.featured-badge {
position: absolute;
top: 12px;
left: 12px;
background: var(--theme-secondary, #d4a800);
color: #fff;
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: 4px;
display: inline-flex;
align-items: center;
z-index: 1;
}
.section-bg-image {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
/*filter: brightness(50%);*/
}
.section-bg-image-bottom {
position: absolute;
width: 100%;
height: auto;
bottom: 0;
left: 0;
z-index: 0;
opacity: .5;
}
[data-theme="dark"] {
.section-bg-image-bottom {
display: none;
}
}
.content-details {
color: var(--neutral-dark-2);
font-weight: 400;
line-height: 180%; /* 23.2px */
}
/*.section-bg-image-bottom {*/
/* position: absolute;*/
/* width: 100%;*/
/* height: 100%;*/
/* object-fit: cover;*/
/* object-position: bottom;*/
/*}*/
.object-top {
object-position: top !important;
}
.object-left {
object-position: left !important;
}
.object-right {
object-position: right !important;
}
.object-bottom {
object-position: bottom !important;
}
.object-center {
object-position: center !important;
}
.section-title {
font-size: var(--heading-3);
font-weight: 700;
color: var(--theme-primary-dark);
}
[data-theme="dark"] {
.section-title {
color: var(--theme-primary-light-dm);
}
}
.section-subtitle {
font-size: var(--heading-6);
font-weight: 600;
}
.section-content {
position: relative;
}
.banner-lead-title {
color: var(--theme-secondary);
font-weight: 900;
font-size: var(--heading-1);
}
.inside-banner-lead-title {
color: var(--theme-secondary);
font-weight: 900;
font-size: var(--heading-2);
}
.inside-lead-title {
color: var(--theme-primary-dark);
font-weight: 700;
font-size: var(--heading-2);
}
.banner-transparent-button {
display: inline-flex;
display: -webkit-inline-flex;
align-items: center;
-webkit-align-items: center;
background-color: rgba(255, 255, 255, .2);
color: #ffffff;
border: 1px solid rgb(255 255 255 / 0.72);
border-radius: 4px;
-webkit-border-radius: 4px;
padding: 7px 12px;
font-weight: 300;
font-size: 14px;
}
.banner-transparent-button:hover {
background-color: rgba(255, 255, 255, .2);
color: #ffffff;
border: 1px solid rgb(255 255 255 / 0.88);
}
[data-theme="dark"] {
.banner-transparent-button {
background-color: rgba(100, 100, 100, .2);
color: #f6f5f5;
}
.nav-dropdown-item:hover {
background-color: rgba(255, 255, 255, .05);
}
.inside-lead-title {
color: var(--theme-primary-light-dm);
}
}
.banner-transparent-button.banner-transparent-button-sm {
padding: 5px 11px;
font-size: 12px;
font-weight: 400;
}
@media screen and (min-width: 992px) {
.inside-banner-lg-min-h-400px {
min-height: 400px;
}
}
@media screen and (min-width: 576px) {
.inside-banner-lg-min-h-400px {
min-height: 300px;
}
}
@media screen and (max-width: 575px) {
.inside-banner-lg-min-h-400px {
min-height: 250px;
}
}
/*============== banner css ===============*/
.banner-form {
padding: 24px;
align-items: center;
border-radius: 8px;
border: 1px solid rgba(var(--theme-white-rgb), 0.50);
background: rgba(var(--theme-white-rgb), 0.88);
box-shadow: 0 25px 50px -12px rgba(var(--theme-dark-rgb), 0.25);
}
[data-theme="dark"] {
.banner-form {
box-shadow: 0 25px 50px -12px rgba(var(--theme-white-rgb), 0.25);
}
}
@media screen and (max-width: 1600px) {
.banner-form {
padding: 24px;
}
}
@media screen and (max-width: 992px) {
.banner-form {
padding: 16px;
}
}
.banner-form-label {
display: block;
margin-bottom: 8px;
color: var(--theme-primary-light);
font-size: var(--paragraph-s);
}
[data-theme="dark"] {
.banner-form-label {
color: var(--theme-primary-light-soft-dm);
}
}
.banner-form-input-group {
padding: 0;
background-color: var(--theme-white);
border: 1px solid var(--neutral-white-4);
border-radius: 4px;
--webkit-border-radius: 4px;
}
.inside-banner-search .banner-form-input-group {
border-radius: 4px;
--webkit-border-radius: 4px;
}
.banner-form-input-group .form-control,
.banner-form-input-group .form-select,
.banner-form-input-group .form-textarea {
font-size: var(--paragraph-m);
background-color: transparent;
border: none;
color: var(--neutral-dark-3);
box-shadow: none;
}
.banner-form-input-group ::placeholder {
color: var(--neutral-dark-1);
font-size: 13px;
}
[data-theme="dark"] {
.banner-form-label {
color: var(--theme-primary-light-soft-dm);
}
.banner-form-input-group {
border-color: var(--neutral-white-4);
}
.banner-form-input-group ::placeholder {
color: var(--neutral-dark-3);
}
.banner-form-input-group select {
background-color: var(--theme-white) !important;
}
}
.banner-form-input-group:has(input:focus),
.banner-form-input-group:has(select:focus),
.banner-form-input-group:has(textarea:focus) {
border-color: var(--neutral-dark-1);
}
.banner-form-input-group .input-group-text {
background-color: transparent;
border: none;
color: var(--light-muted);
}
.banner-form-input-group .form-control,
.banner-form-input-group .form-select,
.banner-form-input-group .form-textarea,
.banner-form-input-group .input-group-text {
padding: 11px 12px;
}
.banner-form-input-group > :first-child {
padding-right: 0;
}
.banner-form [type="submit"] {
padding: 12px;
font-size: 16px;
border-radius: 4px;
--webkit-border-radius: 4px;
background: var(--theme-primary-light);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
}
[data-theme="dark"] {
.banner-form [type="submit"] {
background: var(--theme-primary-light);
}
}
@media screen and (max-width: 1600px) {
.banner-form [type="submit"],
.inside-banner-search [type="submit"] {
padding: 8px 12px;
}
.banner-form-input-group .form-control,
.banner-form-input-group .form-select,
.banner-form-input-group .form-textarea,
.banner-form-input-group .input-group-text {
padding: 8px 6px 8px 12px;
}
}
@media screen and (max-width: 575px) {
.banner-form-input-group .form-control,
.banner-form-input-group .form-select,
.banner-form-input-group .form-textarea,
.banner-form-input-group .input-group-text {
padding: 8px 12px;
font-size: 14px;
}
.banner-form [type="submit"],
.inside-banner-search [type="submit"] {
padding: 8px 12px;
font-size: 14px;
}
}
/*================= banner-s2: searchable state/category selects in hero form ==============*/
/* Wrapper: position:relative so the icon can be absolutely placed over select2 */
.banner-s2-wrap {
position: relative;
}
/* Icon floated absolutely — mirrors the input-group-text icon position in the text field */
.banner-s2-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
pointer-events: none;
color: var(--light-muted);
display: flex;
align-items: center;
line-height: 1;
}
/* Select2 container: block, full width — no flex fighting */
.banner-s2-wrap .select2-container {
display: block;
width: 100% !important;
}
/* ── Selection box: erase all select2 chrome, match form-control exactly ── */
/* Specificity (.banner-s2-wrap .select2-container--default = 0,3,0) */
/* beats select2's own (.select2-container--default = 0,2,0) */
.banner-s2-wrap .select2-container--default .select2-selection--single {
border: none;
border-radius: 0;
background-color: transparent;
box-shadow: none;
height: auto;
/* padding-left 44px = 12px (icon left) + 20px (icon width) + 12px (gap) */
padding: 11px 12px 11px 44px;
display: flex;
align-items: center;
}
.banner-s2-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
display: none;
}
.banner-s2-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
padding: 0;
color: var(--neutral-dark-3);
font-size: var(--paragraph-m);
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.banner-s2-wrap .select2-container--default .select2-selection--single .select2-selection__placeholder {
color: var(--neutral-dark-1);
font-size: 13px;
}
/* Focus ring when dropdown is open — mirrors :has(select:focus) rule */
.banner-s2-wrap:has(.select2-container--open),
.banner-s2-wrap:has(.select2-container--focus) {
border-color: var(--neutral-dark-1);
}
/* Responsive — matches existing banner-form padding breakpoints */
@media screen and (max-width: 1600px) {
.banner-s2-wrap .select2-container--default .select2-selection--single {
padding: 8px 6px 8px 40px;
}
}
@media screen and (max-width: 575px) {
.banner-s2-wrap .select2-container--default .select2-selection--single {
padding: 8px 12px 8px 40px;
font-size: 14px;
}
.banner-s2-wrap .select2-container--default .select2-selection--single .select2-selection__rendered,
.banner-s2-wrap .select2-container--default .select2-selection--single .select2-selection__placeholder {
font-size: 14px;
}
}
/* ── Dropdown panel (appended to , scoped via dropdownCssClass) ── */
.banner-s2-dropdown.select2-dropdown {
border: 1px solid var(--neutral-white-4);
border-radius: 4px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .10), 0 4px 6px -4px rgba(0, 0, 0, .10);
background-color: var(--theme-white);
}
.banner-s2-dropdown .select2-search--dropdown {
padding: 8px;
}
.banner-s2-dropdown .select2-search--dropdown .select2-search__field {
width: 100%;
border: 1px solid var(--neutral-white-4);
border-radius: 4px;
padding: 8px 12px;
font-size: 13px;
color: var(--neutral-dark-3);
background-color: var(--theme-white);
outline: none;
box-shadow: none;
}
.banner-s2-dropdown .select2-search--dropdown .select2-search__field:focus {
border-color: var(--neutral-dark-1);
}
.banner-s2-dropdown .select2-results__option {
padding: 8px 12px;
font-size: var(--paragraph-m);
color: var(--neutral-dark-3);
}
.banner-s2-dropdown .select2-results__option--highlighted[aria-selected] {
background-color: var(--theme-primary-light);
color: #fff;
}
.banner-s2-dropdown .select2-results__option[aria-selected="true"] {
background-color: rgba(0, 0, 0, .06);
}
/*================= custom-input-group ==============*/
.custom-input-group {
padding: 10px 16px;
border: 1px solid var(--neutral-white-2);
background-color: var(--neutral-white-1);
border-radius: 4px;
cursor: text;
}
@media screen and (max-width: 1600px) {
.custom-input-group {
padding: 6px 10px;
}
}
.custom-input-group:has(select) {
padding: 0;
}
.custom-input-group select {
padding: 10px 16px !important;
font-size: 15px;
}
.custom-input-group:has(.input-group-text) select {
padding: 10px 16px 10px 26px !important;
}
.custom-input-group:has(select) .input-group-text {
transform: translateX(16px);
z-index: 6 !important;
}
.custom-input-group ::placeholder {
font-size: 14px;
color: var(--muted);
}
[data-theme="dark"] {
.custom-input-group ::placeholder {
opacity: .5;
font-weight: 300;
}
.g-recaptcha {
filter: invert(1) hue-rotate(180deg); /* Flips black to white/light */
-webkit-filter: invert(1) hue-rotate(180deg);
}
.custom-input-group select {
background-color: var(--theme-white);
}
}
.custom-input-group * {
padding: 0;
border: 0;
background-color: transparent;
box-shadow: none !important;
outline: none !important;
color: var(--neutral-dark-3);
}
.custom-input-group *:focus,
.custom-input-group *:active {
background-color: transparent;
box-shadow: none !important;
outline: none !important;
}
.custom-input-group:has(*:focus),
.custom-input-group:has(*:active) {
background-color: var(--theme-white);
border-color: var(--neutral-dark-3);
}
[data-theme="dark"] {
.custom-input-group {
border-color: #555555;
background-color: var(--theme-white);
color: var(--neutral-dark-3);
}
.custom-input-group input,
.custom-input-group textarea,
.custom-input-group select {
color: var(--neutral-dark-1);
}
}
.custom-input-group > *:not(:first-child) {
padding-left: 8px;
}
.custom-input-group ::placeholder {
color: var(--light-muted);
}
/*================ Tag Button ================*/
.tag-btn {
transition: all .3s ease;
padding: 7px 16px;
border-radius: 4px;
display: inline-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
border: 1px solid var(--border);
color: var(--neutral-dark-2);
background-color: var(--theme-white);
font-size: var(--action-font-size-sm);
}
.tag-btn .icon {
color: var(--foundation-blue-7);
transition: all .3s ease;
}
.tag-btn:hover {
background-color: var(--neutral-white-1);
}
[data-theme="dark"] {
.tag-btn:hover {
background-color: var(--neutral-white-4);
}
}
.tag-btn:hover .icon {
color: var(--foundation-blue-10);
}
.tag-btn.tag-btn-sm {
padding: 3px 6px;
}
.tag-btn.tag-btn-md {
padding: 5px 8px;
}
.tag-btn-text-green {
color: var(--theme-green) !important;
}
.tag-btn img {
height: auto;
max-height: 12px;
width: auto;
}
/*=========== job list card ============*/
.job-list {
list-style-type: none;
padding: 0;
box-sizing: border-box;
}
.job-list-item {
margin-bottom: 24px;
}
.job-list-card, .job-grid-view-card {
background-color: var(--theme-white);
border: 1px solid var(--neutral-white-2);
border-radius: 4px;
transition: all .3s ease;
}
.job-list-card:hover,
.job-grid-view-card:hover {
box-shadow: 0 20px 60px rgba(46, 33, 61, .08);
}
.job-list-card-header {
position: relative;
display: block;
height: 100%;
overflow: hidden;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.job-list-card-header img {
transition: all .3s ease;
}
.job-list-card:hover .job-list-card-header img {
transform: scale(1.1);
}
.job-grid-view-card-header {
position: relative;
display: block;
overflow: hidden;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.job-grid-view-card-header::before {
content: '';
display: block;
padding-top: 56.25%;
background-color: #f5f5f5;
}
.job-grid-view-card-header img {
transition: all .3s ease;
top: 0;
left: 0;
position: absolute;
}
.job-grid-view-card:hover .job-grid-view-card-header img {
transform: scale(1.1);
}
.job-list-card-body {
padding: 16px;
}
.job-grid-view-card-body {
padding: 16px;
}
@media screen and (max-width: 991px) {
.job-list-item {
margin-bottom: 0;
}
.job-list-card-header {
border-bottom-left-radius: 0;
border-top-right-radius: 4px;
padding: 0;
}
.job-list-card-header::before {
content: '';
display: block;
padding-top: 75%;
background-color: #f5f5f5;
}
.job-list-card-header > img {
top: 0;
left: 0;
position: absolute;
}
.job-list-card-body {
padding: 1rem;
}
}
/*============== job-card =============*/
.job-card {
border-radius: 4px;
border: 1px solid var(--neutral-white-2);
transition: all .3s ease;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
height: 100%;
background-color: var(--theme-white);
}
.job-card:hover {
box-shadow: var(--shadow-t1);
border-color: var(--neutral-white-3);
}
.job-card > * {
background-color: transparent;
border: none;
padding: 0;
position: relative;
}
.job-card > *:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.job-card > *:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.job-card .job-card-header {
position: relative;
padding: 0;
overflow: hidden;
background-color: var(--neutral-white-2);
}
.job-card .job-card-header::before {
content: '';
display: block;
padding-top: 75%;
}
.job-card-testimonial {
border: 1px solid var(--neutral-white-4);
}
.job-card-testimonial .job-card-header::before {
padding-top: 42.8571428571%;
}
.job-card .job-card-header > * {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
top: 0;
}
.job-card .job-card-img {
transition: all .3s ease;
}
.job-card:hover .job-card-img {
transform: scale(1.1);
}
.job-card-header-content {
padding: 8px;
}
.job-card .job-card-body {
-webkit-flex-grow: 1;
flex-grow: 1;
padding: 48px 20px 20px 20px;
}
.job-card address {
color: var(--neutral-dark-1);
font-size: var(--action-font-size-sm);
}
.job-card-title {
font-size: var(--heading-5);
color: var(--theme-primary-dark);
}
[data-theme="dark"] {
.job-card-title {
color: var(--theme-primary-light-soft-dm);
}
}
.job-card-footer {
padding: 0 20px 20px 20px;
}
.job-card-testimonial .job-card-body {
padding: 24px;
}
.job-card-category .job-card-header::before {
padding-top: 66.78571%;
}
.job-card-category .job-card-body {
padding: 20px 20px 8px 20px;
}
.job-card-category .job-card-title {
font-weight: 600;
}
.job-card-category .job-card-footer {
padding: 0 20px 12px 20px;
color: var(--neutral-dark-2);
transition: all .3s ease;
}
.job-card-category:hover .job-card-footer {
color: var(--theme-green);
}
.job-card-hr {
width: calc(100% - 40px);
height: 1px;
background-color: var(--neutral-white-4);
margin: 8px auto 12px auto;
}
.job-card-logo {
position: absolute;
display: flex;
width: 70px;
height: 70px;
border-radius: 50%;
border: 4px solid var(--neutral-white-2);
background-color: var(--theme-white);
transform: translateX(-50%);
left: 50%;
top: -35px;
}
.job-card-testimonial .job-card-logo {
width: 50px;
height: 50px;
transform: none;
left: auto;
right: 14px;
background-color: transparent;
border-radius: 0;
border: 0;
top: -25px;
}
.job-card-category-btn {
display: inline-flex;
display: -webkit-inline-flex;
text-align: center;
justify-content: center;
align-items: center;
-webkit-align-items: center;
padding: 3px 6px;
background-color: var(--neutral-white-2);
font-size: var(--action-font-size-lg);
border-radius: 4px;
transition: all .3s ease;
}
.job-card-category:hover .job-card-category-btn {
background-color: var(--theme-green);
color: #FFFFFF;
}
.job-card-category-footer-text {
transition: all .3s ease;
font-size: var(--action-font-size-sm);
color: var(--neutral-dark-2);
}
.job-card-category:hover .job-card-footer .job-card-category-footer-text {
color: var(--theme-green);
}
[data-theme="dark"] {
.job-card .tag-btn {
background-color: rgba(0, 0, 0, .75);
}
.job-card .job-card-body .tag-btn {
background-color: rgba(23, 23, 23, .25);
}
}
/*============= Feature Employee card =================*/
.featured-employee-card {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
padding: 12px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid var(--neutral-white-2);
background-color: var(--theme-white);
color: var(--theme-primary-dark);
height: 100%;
transition: all .3s ease;
}
.featured-employee-card-vertical {
display: block;
padding: 1.5rem;
border-color: var(--neutral-white-3);
}
@keyframes cardAnimationDrop {
50% {
transform: translateY(-8px);
}
80% {
transform: translateY(-5px);
}
100% {
transform: translateY(-6px);
}
}
.featured-employee-card:hover {
border-color: var(--neutral-white-4);
box-shadow: 0 20px 60px 0 rgba(46, 33, 61, .08);
transform: translateY(-6px);
animation-name: cardAnimationDrop;
animation-iteration-count: 1;
animation-duration: .3s;
}
.featured-employee-card-vertical:hover {
animation: none;
}
.featured-employee-card:hover .featured-employee-title,
.featured-employee-card:focus-visible .featured-employee-title {
color: var(--theme-green);
}
.featured-employee-card:focus-visible {
outline: 3px solid var(--theme-green);
outline-offset: 3px;
}
.featured-employee-card .job-card-logo {
position: relative;
width: 60px;
height: 60px;
transform: translateX(0);
left: initial;
top: initial;
}
.featured-employee-card.featured-employee-card-vertical .job-card-logo {
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
}
.featured-employee-card-vertical .featured-employee-title {
line-height: 150%;
font-size: var(--action-font-size-lg);
transition: all .3s ease;
}
.featured-employee-title:hover {
color: var(--theme-green);
}
.featured-employee-card address {
color: var(--neutral-dark-1);
font-size: var(--action-font-size-sm);
margin-bottom: 0;
}
.featured-employee-card.featured-employee-card-vertical address {
margin-bottom: 12px !important;
}
.employee-card-subtitle {
margin-bottom: 4px;
font-size: var(--paragraph-s);
color: var(--light-muted);
}
.featured-employee-card:hover .text-muted-to-green {
color: var(--theme-green) !important;
}
.recruiting-time {
font-size: var(--paragraph-xs);
color: var(--muted);
}
/*=============== gallery-with-content ==================*/
.gallery-with-content {
border-radius: 4px;
--webkit-border-radius: 4px;
overflow: hidden;
}
.gallery-with-content .gallery-img {
width: 100%;
height: 100%;
object-position: center;
object-fit: cover;
transition: all .5s ease;
}
.gallery-with-content:hover .gallery-img {
transform: scale(1.15);
}
/*============== Owl Carousel ===============*/
.owl-stage {
display: flex;
display: -webkit-flex;
}
.owl-item {
}
.owl-dots {
text-align: center;
}
.owl-dots .owl-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
--webkit-border-radius: 50%;
background-color: var(--foundation-blue-5) !important;
margin-right: 12px;
}
.owl-dots .owl-dot:last-child {
margin-right: 0;
}
.owl-dots .owl-dot.active {
background-color: var(--theme-primary-light) !important;
}
.list-with-dot > * {
position: relative;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
}
.list-with-dot > *:before {
content: '';
width: 4px;
height: 4px;
display: block;
background-color: var(--foundation-blue-9);
--webkit-border-radius: 50%;
border-radius: 50%;
margin-right: 5px;
}
.fast-child-no-dot > *:first-child:before {
content: none;
}
/*========== Rounded style =================*/
.rounded-8px {
border-radius: 8px !important;
--webkit-border-radius: 8px !important;
}
.rounded-4px {
border-radius: 4px !important;
--webkit-border-radius: 4px !important;
}
/*========== End Rounded style =================*/
.before-hover-rotate {
transition: all .5s ease;
}
.before-hover-rotate:not(:hover) {
transform: rotate(1.792deg);
}
/*================ faq =================*/
.faq-item {
margin-bottom: 12px;
}
.faq {
position: relative;
border: 1px solid var(--neutral-white-3);
border-radius: 4px;
padding: 0 24px;
background-color: var(--theme-white);
}
.faq-question {
display: flex;
display: -webkit-flex;
justify-content: space-between;
-webkit-justify-content: space-between;
padding: 18px 0;
cursor: pointer;
}
.faq-content {
padding-bottom: 18px;
}
.faq-answer {
display: none;
}
.faq.open .faq-answer {
display: block;
}
.faq-icon {
transition: .3s ease;
color: var(--neutral-dark-3);
}
.faq.open .faq-icon {
transform: rotate(90deg);
}
[data-theme="dark"] .faq-icon {
color: var(--theme-primary-light-dm);
}
/*============== filterable-aside =========================*/
.filterable-aside {
position: relative;
border: 1px solid var(--neutral-white-3);
border-radius: 4px;
min-height: 400px;
background-color: var(--theme-white);
display: -webkit-flex;
display: flex;
flex-direction: column;
-webkit-flex-direction: column;
}
.filterable-aside > *:first-child {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.filterable-aside > *:last-child {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.filter-icon-box {
display: inline-flex;
display: -webkit-inline-flex;
-webkit-flex-direction: column;
flex-direction: column;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
width: 36px;
height: 36px;
border-radius: 4px;
--webkit-border-radius: 4px;
background-color: var(--foundation-blue-4);
border: 1px solid var(--foundation-blue-7);
margin-right: 12px;
}
[data-theme="dark"] {
.filter-icon-box {
background-color: rgba(var(--foundation-blue-rgb-4), .1);
border-color: var(--neutral-dark-4);
color: var(--theme-primary-light-dm) !important;
}
}
.filterable-aside-header {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: space-between;
--webkit-justify-content: space-between;
padding: 12px 16px;
color: var(--theme-primary-light);
border-bottom: 1px solid var(--neutral-white-3);
}
[data-theme="dark"] {
.filterable-aside-header {
color: var(--theme-primary-light-dm);
}
}
.filterable-aside-body {
flex-grow: 1;
-webkit-flex-grow: 1;
overflow: auto;
}
.filterable-aside-footer {
padding: 12px 16px;
}
.filter-group:not(:last-child) {
border-bottom: 1px solid var(--neutral-white-3);
}
.filter-group-header {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
padding: 16px;
font-weight: 600;
font-size: var(--heading-6);
}
.filter-header-icon {
transform: scale(1.5) translateY(2px);
color: var(--light-muted);
}
.filter-group-header > *:last-child {
margin-left: auto;
}
.aside-filter-list {
list-style-type: none;
margin: 0;
padding: 0 16px 16px 16px;
}
.aside-filter-item {
margin-bottom: 6px;
}
.aside-filter-list .custom-radio,
.aside-filter-list .custom-checkbox {
font-size: 14px;
color: var(--neutral-dark-3);
}
.aside-filter-list .aside-filter-item:nth-child(n+6) {
display: none;
}
.expanded-filter-list .aside-filter-list .aside-filter-item:nth-child(n+6) {
display: block;
}
/*============ Toggler ================*/
.content-toggleable {
display: none;
}
.content-togglable-group.show .content-toggleable {
display: block;
}
.toggle-filter-list-tem {
display: inline-block;
padding: 8px 0;
font-size: var(--action-font-size-sm);
transition: all .3s ease;
cursor: pointer;
color: var(--theme-primary-dark);
}
[data-theme="dark"] {
.toggle-filter-list-tem {
color: var(--theme-primary-light-dm);
}
}
.toggle-filter-list-tem span {
display: inline-block;
transform: translateY(1px) scale(1.75);
margin-right: 8px;
}
.toggle-filter-list-tem:hover {
color: var(--theme-green);
}
/*============== Input checkbox, radio customize =============*/
.custom-checkbox {
display: flex;
display: -webkit-flex;
position: relative;
padding-left: 8px;
}
.custom-checkbox input {
display: none;
}
.custom-checkbox::before {
content: '';
height: 16px;
width: 16px;
border: 1px solid var(--neutral-dark-1);
transform: translate(-8px, 2px);
transition: all .3s ease;
border-radius: 2px;
}
.checkbox-large::before {
height: 20px !important;
width: 20px !important;
border-radius: 4px !important;
}
.checkbox-white::before {
border-color: var(--theme-white) !important;
background-color: var(--theme-white) !important;
}
.custom-checkbox::after {
content: '';
position: absolute;
height: 9px;
width: 6px;
background-color: transparent;
border-bottom: 2px solid var(--theme-white);
border-right: 2px solid var(--theme-white);
transform: translate(-3px, 5px) rotate(45deg);
transition: all .3s ease;
display: none;
}
.checkbox-large.custom-checkbox::after {
height: 12px;
width: 7px;
transform: translate(-2px, 5px) rotate(45deg);
}
.checkbox-white.custom-checkbox::after {
border-color: var(--theme-primary-light);
}
.custom-checkbox:has(input:checked)::before {
background-color: var(--theme-primary-dark);
border-color: var(--theme-primary-dark);
}
.custom-checkbox:has(input:checked)::after {
display: block;
}
[data-theme="dark"] {
.checkbox-white::before {
border-color: var(--neutral-dark-3) !important;
background-color: var(--neutral-white-4) !important;
}
.checkbox-white.custom-checkbox:has(input:checked)::before {
background-color: var(--theme-primary-light-dm) !important;
border-color: var(--theme-primary-light-dm) !important;
}
.checkbox-white.custom-checkbox::after {
border-color: var(--theme-dark);
}
.custom-checkbox:has(input:checked)::before {
background-color: var(--theme-primary-light-dm);
border-color: var(--theme-primary-light-dm);
}
}
/*========== Custom Checkbox ===============*/
.custom-radio {
display: flex;
display: -webkit-flex;
position: relative;
padding-left: 8px;
}
.custom-radio input {
display: none;
}
.custom-radio::before {
content: '';
height: 16px;
width: 16px;
border: 1px solid var(--theme-primary-light);
--webkit-border-radius: 50%;
border-radius: 50%;
transform: translate(-8px, 2px);
transition: all .3s ease;
}
.custom-radio::after {
content: '';
position: absolute;
height: 8px;
width: 8px;
background-color: var(--theme-white);
--webkit-border-radius: 50%;
border-radius: 50%;
transform: translate(-4px, 6px);
transition: all .3s ease;
display: none;
}
.custom-radio:has(input:checked)::before {
background-color: var(--theme-primary-dark);
border-color: var(--theme-primary-dark);
}
.custom-radio:has(input:checked)::after {
display: block;
}
[data-theme="dark"] {
.custom-radio::before {
border-color: var(--neutral-dark-1);
}
.custom-radio:has(input:checked)::before {
background-color: var(--theme-primary-light-dm);
border-color: var(--theme-primary-light-dm);
}
}
/*=============== Custom Tab style ============*/
.nav-btn-tab {
border-bottom: none;
background: #f3f4ff;
padding: 10px;
border-radius: 8px;
}
@media screen and (max-width: 1600px) {
.nav-btn-tab {
padding: 8px;
}
}
[data-theme="dark"] {
.nav-btn-tab {
background: var(--theme-base);
}
}
.nav-btn-tab .nav-link {
border: none;
border-radius: 4px;
color: #555;
font-weight: 500;
padding: 8px 12px;
transition: all .3s ease;
}
@media screen and (max-width: 1600px) {
.nav-btn-tab .nav-link {
padding: 10px 10px;
}
.nav-btn-tab .nav-link .tailing-icon {
transform: scale(1.25) translateY(2px);
}
}
.nav-btn-tab .nav-link.active {
background-color: var(--theme-primary-light);
color: #fff;
}
.nav-btn-tab .nav-link:not(.active):hover {
background-color: var(--theme-white);
}
[data-theme="dark"] {
.nav-btn-tab .nav-link:not(.active):hover {
background-color: rgba(255, 255, 255, .05);
color: var(--theme-primary-light-dm);
}
}
/*============= grid-list-view-tab ================*/
.grid-list-view-tab {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
background-color: var(--neutral-white-2);
border-radius: 4px;
padding: 4px 8px;
}
.grid-list-view-tab-item {
padding: 0 8px;
}
.grid-list-view-tab-link {
display: inline-block;
color: var(--theme-primary-dark);
opacity: .25;
transition: all .3s ease;
}
.grid-list-view-tab-link.active,
.grid-list-view-tab-link:hover {
opacity: 1;
}
.grid-list-view-tab-link > * {
transform: translateY(3px) scale(1.25);
}
[data-theme="dark"] {
.grid-list-view-tab {
background-color: var(--neutral-white-4);
}
.grid-list-view-tab-link {
color: var(--theme-primary-light-soft-dm);
}
}
/*============ responsive-aside ====================*/
@media screen and (max-width: 991px) {
.responsive-aside {
position: fixed;
height: 100vh;
height: 100dvh;
width: 100%;
max-width: 768px;
top: 0;
left: 0;
z-index: 11;
display: none;
}
@keyframes fadeInLeft {
from {
opacity: 0;
left: -100%;
}
}
.responsive-aside.show {
display: flex;
display: -webkit-flex;
animation-name: fadeInLeft;
animation-duration: .3s;
animation-iteration-count: 1;
}
.filterable-aside-body {
flex-grow: 1;
overflow: auto;
}
}
/*================ pagination ==================*/
.pagination {
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: center;
}
.page-item {
padding: 3px;
}
.page-link {
display: inline-block;
color: var(--theme-primary-light);
font-size: var(--action-font-size-sm);
font-style: normal;
font-weight: 500;
line-height: normal;
padding: 6px 14px;
border-radius: 4px;
background-color: var(--theme-white);
border: none;
}
.page-item.active .page-link {
background-color: var(--theme-primary-light);
color: #FFFFFF;
}
/*========== border-bottom-tabs ==================*/
.border-bottom-tabs > .nav-item > .nav-link {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
background-color: transparent;
border-radius: 0 !important;
padding: 14px 0;
border: none;
border-bottom: 3px solid transparent;
color: var(--neutral-dark-3);
}
.border-bottom-tabs > .nav-item {
margin-right: 32px;
}
.border-bottom-tabs > .nav-item > .nav-link.active {
border-color: var(--theme-secondary) !important;
font-weight: 600;
}
/*====== Employee details ===============*/
.employee-details {
color: var(--neutral-dark-3);
font-size: 16px;
font-weight: 400;
line-height: 145%; /* 23.2px */
}
.employee-details h5 {
font-weight: 700;
margin-top: 20px;
}
.gallery-carousel-btn-group {
position: absolute;
bottom: 16px;
right: 16px;
background-color: rgba(255, 255, 255, .70);
display: inline-flex;
display: -webkit-inline-flex;
align-items: center;
-webkit-align-items: center;
padding: 4px 8px;
border-radius: 4px;
z-index: 1;
}
.gallery-carousel-btn-group * {
border: none;
background-color: transparent;
box-shadow: none;
}
/*============ Banner Over Btn Group =================*/
.banner-btn-group {
position: relative;
background-color: rgba(255, 255, 255, .70);
display: inline-flex;
display: -webkit-inline-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
padding: 0;
border-radius: 4px;
z-index: 1;
}
.banner-btn-group > * {
border: none;
background-color: transparent;
box-shadow: none;
padding: 4px 10px;
}
.banner-btn-group a {
color: var(--neutral-dark-3);
}
[data-theme="dark"] {
.banner-btn-group {
background-color: rgba(25, 25, 25, .7);
border: 1px solid #555555;
}
.banner-btn-group a {
color: var(--light);
}
}
.banner-btn-group .banner-btn-group-divider {
display: block;
width: 2px;
padding: 0;
background-color: rgba(255, 255, 255, .30);
}
/*=============== general-card =====================*/
.general-card {
border-color: var(--neutral-white-2);
border-radius: 4px;
background-color: var(--theme-white);
}
.general-card > * {
border-color: var(--neutral-white-2);
background-color: transparent;
padding: .75rem;
}
.general-card > .card-header {
color: var(--neutral-dark-3);
}
.general-card > .card-footer {
color: var(--neutral-dark-3);
}
.general-card > .card-header h1,
.general-card > .card-header h2,
.general-card > .card-header h3,
.general-card > .card-header h4,
.general-card > .card-header h5,
.general-card > .card-header h6 {
color: var(--theme-primary-light);
}
[data-theme="dark"] {
.general-card > .card-header h1,
.general-card > .card-header h2,
.general-card > .card-header h3,
.general-card > .card-header h4,
.general-card > .card-header h5,
.general-card > .card-header h6 {
color: var(--theme-primary-light-dm);
}
}
.general-card > *:first-child {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.general-card > *:last-child {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
[data-theme="dark"] {
.general-card {
border-color: var(--neutral-white-4);
}
.general-card > * {
border-color: var(--neutral-white-4);
}
.general-card > .card-body {
color: var(--theme-primary-light-dm);
}
.general-card > .card-body .square-box > * {
color: var(--light);
}
}
/*========== Modal ===============*/
.modal-content {
background-color: var(--body-bg);
}
.modal-content > * {
border-color: var(--neutral-white-3);
}
[data-theme="dark"] {
.btn-close {
--bs-btn-close-color: #999999;
--bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23999999' %3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
}
.modal-content {
border-color: var(--neutral-white-3);
box-shadow: 0 5px 15px rgba(255, 255, 255, .05);
}
}
/*============== auth-box ==============*/
.auth-section-content {
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.70) 13%, rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0.00) 100%);
}
.auth-box {
width: 100%;
max-width: 520px;
height: auto;
min-height: 360px;
margin-left: auto;
margin-right: auto;
background-color: rgba(255, 255, 255, .58);
backdrop-filter: blur(5px);
border-radius: 4px;
padding: 20px 12px;
}
.modal-auth-box {
background-color: transparent;
padding: 0 !important;
}
[data-theme="dark"] {
.auth-box {
background: rgba(var(--theme-white-rgb), 0.7);
box-shadow: 0 25px 50px -12px rgba(var(--theme-dark-rgb), 0.25);
border: 1px solid rgba(var(--theme-white-rgb), 0.50);
}
.modal-auth-box {
background: transparent;
box-shadow: none;
border: none;
}
}
@media screen and (min-width: 992px) {
.auth-box {
padding: 40px 32px;
}
.auth-register-box {
max-width: 600px !important;
}
.modal-auth-box.auth-register-box {
max-width: 100% !important;
}
}
.auth-box .banner-form-input-group {
border-color: var(--theme-white);
}
.auth-box .banner-form-input-group:has(input:focus),
.auth-box .banner-form-input-group:has(input:active) {
border-color: var(--theme-green);
}
[data-theme="dark"] {
.auth-box ::placeholder {
opacity: .5;
}
}
.auth-box ::placeholder {
color: var(--light-muted) !important;
font-size: 13px;
}
.auth-radio-with-label {
position: relative;
display: flex;
display: -webkit-flex;
padding: 18px 20px;
background-color: var(--theme-white);
border: 1px solid var(--neutral-white-3);
border-radius: 4px;
--webkit-border-radius: 4px;
color: var(--neutral-dark-1);
cursor: pointer;
transition: all .3s ease;
}
.auth-radio-with-label input {
visibility: hidden;
position: absolute;
}
.auth-radio-with-label:has(input:checked) {
border-color: var(--theme-green);
color: var(--theme-green) !important;
}
.auth-radio-icon {
display: none;
flex-direction: column;
-webkit-flex-direction: column;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
background-color: rgba(var(--theme-green-rgb), .10);
--webkit-border-radius: 50%;
border-radius: 50%;
font-size: 20px;
}
.auth-radio-with-label:has(input:checked) .auth-radio-icon {
display: inline-flex;
display: -webkit-inline-flex;
animation-name: fadeIn;
animation-duration: .3s;
animation-iteration-count: 1;
}
/*=============== Pricing ===================*/
/* Plan Cards */
.plan-card {
cursor: pointer;
position: relative;
border: 1px solid var(--neutral-white-3); /* Prepare for border change */
background-color: var(--theme-white);
transition: transform 0.2s, box-shadow 0.2s;
}
.plan-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.1);
}
.plan-card.selected {
border-color: var(--theme-primary-light);
outline: 1px solid var(--theme-primary-light);
background-color: #ffffff;
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
}
[data-theme="dark"] {
.plan-card {
border-color: var(--neutral-dark-4);
}
.plan-card.selected {
border-color: var(--theme-primary-light);
outline: 1px solid var(--theme-primary-dark);
background-color: var(--theme-primary-dark);
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
}
}
/* Addon Cards */
.addon-card {
border: 1px solid var(--neutral-white-3);
background-color: var(--theme-white);
border-left-width: 4px;
}
.addon-card > * {
background-color: transparent;
}
.addon-card.active-addon {
border-color: var(--neutral-white-4); /* Top/Right/Bottom */
border-left-color: var(--theme-primary-light) !important; /* Accent on left */
background-color: #fdfdff;
}
[data-theme="dark"] {
.addon-card > * {
background-color: rgba(var(--white-rgb), .02);
}
.addon-card.active-addon {
border-color: var(--neutral-white-4); /* Top/Right/Bottom */
border-left-color: var(--theme-primary-light) !important; /* Accent on left */
background-color: var(--theme-primary-dark);
}
}
/* Typography Overrides */
.display-price {
font-size: 2rem;
font-weight: 600;
letter-spacing: 1px;
color: var(--theme-primary-light);
line-height: 1;
}
[data-theme="dark"] {
.display-price {
color: var(--theme-primary-light-dm);
}
}
/* Sticky Sidebar */
.sticky-summary {
position: sticky !important;
top: 3rem;
}
@media screen and (min-width: 992px) {
.sticky-summary {
top: 110px;
}
}
/* =============== Table Styling ==================== */
.table-pricing {
color: var(--neutral-dark-3);
}
.table-pricing tr {
border: none;
}
.table-pricing thead th,
.table-pricing tbody td {
border: 1px solid var(--neutral-white-2);
padding: .5rem;
font-size: 14px;
color: var(--neutral-dark-3);
vertical-align: middle;
}
.table-pricing thead th {
color: var(--theme-primary-light);
background-color: rgba(var(--theme-primary-light-rgb), .05);
text-transform: uppercase;
}
@media screen and (min-width: 992px) {
.table-pricing thead th,
.table-pricing tbody td {
border-color: var(--neutral-white-2);
padding: 1rem;
}
.table-pricing thead th {
font-size: 16px;
}
}
.table-pricing tbody tr:nth-child(even) td,
.table-pricing tbody tr:hover td {
background-color: #fafafa;
}
.table-pricing thead tr th.table-primary,
.table-pricing tbody tr td.table-primary {
border-color: #c4d9f8;
background-color: #CFE2FF;
color: var(--dark);
}
.check-icon {
color: var(--theme-green);
transform: scale(1.25)
}
.cross-icon {
color: var(--alert-error);
transform: scale(1.25)
}
[data-theme="dark"] {
.table-pricing thead th {
color: var(--theme-primary-light-dm);
background-color: rgba(var(--theme-primary-light-rgb), .5);
}
.table-pricing tbody td {
color: var(--theme-primary-light-dm);
background-color: rgba(var(--theme-primary-light-rgb), .1);
}
.table-pricing tbody tr:nth-child(even) td {
color: var(--theme-primary-light-dm);
background-color: rgba(var(--theme-primary-light-rgb), .2);
}
.table-pricing thead tr th.table-primary,
.table-pricing tbody tr:nth-child(even) th.table-primary,
.table-pricing tbody tr td.table-primary {
color: var(--theme-primary-light-dm);
border-color: rgba(var(--theme-primary-light-rgb), .15);
!important;
background-color: rgba(var(--theme-primary-light-rgb), .25);
}
.table-pricing tbody tr:hover td {
background-color: rgba(var(--theme-primary-light-rgb), .2);
}
}
.table-text-muted td {
color: var(--muted);
}
.table-bg-transparent th,
.table-bg-transparent td {
background-color: transparent;
}
/* Custom Badges */
.badge-soft {
white-space: nowrap;
background-color: var(--theme-soft-green);
color: var(--theme-green);
font-weight: 600;
font-size: 0.7em;
padding: 4px 8px;
border-radius: 4px;
text-transform: uppercase;
}
/* Section Headers */
.step-header {
text-transform: uppercase;
color: var(--foundation-blue-10);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.05em;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.pricing-tab-btn-group .btn {
border: 1px solid var(--neutral-white-3);
}
.pricing-tab-btn-group .btn:hover,
.pricing-tab-btn-group .btn-check:checked + .btn {
border: 1px solid var(--theme-primary-light);
background-color: rgba(var(--theme-primary-light-rgb), .1);
}
.form-check-input:checked {
background-color: var(--theme-green);
border-color: var(--theme-green);
}
[data-theme="dark"] {
.step-header {
color: var(--theme-primary-light-dm);
}
.pricing-tab-btn-group .btn {
border: 1px solid var(--neutral-white-4);
color: var(--light);
}
.pricing-tab-btn-group .input-group-text {
border: 1px solid var(--neutral-dark-4);
color: var(--light);
}
.pricing-tab-btn-group .btn:hover,
.pricing-tab-btn-group .btn-check:checked + .btn {
border: 1px solid var(--theme-primary-light);
background-color: rgba(var(--theme-primary-light-rgb), .5);
}
.addon-card {
color: var(--light);
}
.addon-card .pricing-tab-btn-group .btn {
border: 1px solid var(--neutral-dark-4);
color: var(--white) !important;
}
.addon-card .pricing-tab-btn-group .btn:hover,
.addon-card .pricing-tab-btn-group .btn-check:checked + .btn {
border: 1px solid var(--theme-primary-light);
background-color: rgba(var(--theme-primary-light-rgb), .5);
}
.addon-card .form-check-label {
color: var(--light);
}
}
/*================= Blog ==============*/
/*.blog-banner {*/
/* background: var(--light-soft);*/
/*}*/
/*[data-theme="dark"] {*/
/* .blog-banner {*/
/* background-color: #212121;*/
/* }*/
/*}*/
.blog-banner {
/*background-image: linear-gradient(to right, rgba(255, 255, 255, .85) 40%, rgba(0, 0, 0, .1) 50%);*/
}
[data-theme="dark"] {
.blog-banner {
background-image: linear-gradient(to right, rgba(0, 0, 0, .75) 75%, rgba(0, 0, 0, .15));
}
}
.blog-card {
background-color: var(--theme-white);
border: 1px solid var(--neutral-white-3);
padding: 16px 12px;
border-radius: 4px;
--webkit-border-radius: 4px;
transition: all .3s ease;
}
.blog-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 35px rgba(100, 100, 100, .1);
}
.blog-card > * {
border: none;
padding: 0;
background-color: transparent;
}
.blog-card .card-header {
position: relative;
padding: 0;
}
.blog-card .card-header::before {
content: '';
display: block;
padding-top: 56.25%;
}
.blog-card .card-header > * {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
background-color: var(--theme-light);
border-radius: 4px;
--webkit-border-radius: 4px;
}
.blog-card .blog-card-img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: all .5s ease;
}
.blog-card:hover .blog-card-img {
transform: scale(1.1);
}
.blog-card .card-body {
padding: 1.5rem 0;
}
.blog-card-title, .blog-card-title-sm {
color: var(--theme-primary-dark);
font-size: var(--heading-4);
font-weight: 600;
transition: all .3s ease;
}
.blog-card-title-sm {
font-size: var(--heading-6);
display: inline-block;
}
.blog-card-title:hover {
color: var(--theme-green);
}
.blog-card-subtitle {
color: var(--muted);
font-size: var(--paragraph-s);
line-height: 180%;
}
.blog-card-time {
font-size: var(--paragraph-xs);
color: var(--light-muted);
}
.blog-card-read-more {
font-size: var(--action-font-size-md);
color: var(--theme-primary-light);
display: inline-flex;
display: -webkit-inline-flex;
align-items: center;
-webkit-align-items: center;
white-space: nowrap;
transition: all .3s ease;
}
.blog-card:hover .blog-card-read-more {
color: var(--theme-green);
}
.blog-card .card-footer {
display: flex;
display: -webkit-flex;
justify-content: space-between;
}
.blog-tag-btn {
display: inline-block;
margin-bottom: .75rem;
white-space: nowrap;
padding: .25rem 1rem;
font-size: var(--action-font-size-sm);
background-color: #fafafa;
color: var(--theme-green);
border-radius: 50rem;
-webkit-border-radius: 50rem;
}
.blog-details-title {
font-size: 2.5rem;
font-weight: 600;
color: var(--theme-primary-dark);
}
@media screen and (max-width: 991px) {
.blog-details-title {
font-size: 1.5rem;
}
}
[data-theme="dark"] {
.blog-tag-btn {
background-color: rgba(100, 100, 100, 0.2);
color: var(--theme-green);
}
.blog-details-title {
color: var(--theme-primary-light-dm);
}
}
.blog-subtitle {
line-height: 175%;
color: var(--neutral-dark-2);
font-weight: 400;
margin-bottom: 1rem;
}
.blog-details {
padding: 1rem;
border-radius: 4px;
border: 1px solid var(--neutral-white-2);
background-color: var(--theme-white);
}
[data-theme="dark"] {
.blog-details {
border: 1px solid var(--neutral-white-4);
}
}
.blog-details p {
color: var(--neutral-dark-3);
font-size: 16px;
font-weight: 400;
line-height: 180%;
}
@media screen and (min-width: 1200px) {
.blog-subtitle {
font-size: 18px;
}
.blog-details {
padding: 2rem;
}
}
.blog-item {
background-color: var(--theme-white);
padding: .5rem;
border-radius: 4px;
--webkit-border-radius: 4px;
border: 1px solid var(--neutral-white-3);
transition: all .3s ease;
}
.blog-item:hover {
box-shadow: 5px 5px 15px rgba(100, 100, 100, .1);
}
/*============= breadcrumb ==============*/
.breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.breadcrumb-item + .breadcrumb-item::before {
float: none !important;
}
.breadcrumb-item.active {
color: var(--neutral-dark-1);
}
.breadcrumb .breadcrumb-item a {
font-weight: 500;
color: var(--theme-primary-light);
}
.breadcrumb-item + .breadcrumb-item {
padding-left: 8px;
}
.breadcrumb-item + .breadcrumb-item::before {
content: '';
display: inline-block;
width: 16px;
height: 16px;
background: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
transform: translate(-4px, 4px);
}
.breadcrumb-sm .breadcrumb-item + .breadcrumb-item::before {
width: 16px;
height: 16px;
}
[data-theme="dark"] {
.breadcrumb .breadcrumb-item a {
color: var(--theme-primary-light-dm);
}
.breadcrumb-item + .breadcrumb-item::before {
background: url('data:image/svg+xml;utf8,');
content: '';
display: inline-block;
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
transform: translate(-4px, 3px);
}
}
/* Hero Banner */
.about-banner {
background: linear-gradient(135deg, rgba(0, 0, 0, .9) 20%, rgba(0, 0, 0, 0) 100%);
position: relative;
}
[data-theme="dark"] {
.about-banner {
background: linear-gradient(135deg, rgba(0, 0, 0, .9) 20%, rgba(0, 0, 0, 0) 100%);
}
}
.hero-img-wrapper {
position: relative;
}
.hero-img-wrapper img {
border-radius: 8px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.bg-over-right-gradient-dark {
position: absolute;
top: -50px;
right: -50px;
width: 200px;
height: 200px;
background: rgba(79, 70, 229, 0.1);
filter: blur(80px);
}
/*======= contact-form-group ========*/
.contact-form-group {
position: relative;
z-index: 1;
background-color: var(--theme-white);
/*box-shadow: 5px 0 5px rgba(0, 0, 0, .1);*/
}
/*=============== Footer ====================*/
.footer {
position: relative;
background-color: var(--theme-primary-dark);
color: var(--neutral-white-4);
}
.footer-bg-img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: bottom center;
filter: grayscale(100%) sepia(100%) hue-rotate(20deg) saturate(0);
opacity: .3;
}
.footer-content {
position: relative;
z-index: 1;
padding: 100px 0 20px 0;
}
@media screen and (max-width: 1600px) {
.footer-content {
padding: 56px 0 20px 0;
}
}
.footer-menu > .nav-item > .nav-link {
font-size: var(--paragraph-s);
}
[data-theme="dark"] {
.footer {
background-color: var(--theme-dark);
color: var(--light-muted);
}
.footer .text-neutral-white {
color: var(--light-muted) !important;
}
.footer .text-neutral-white:hover {
color: #FFFFFF !important;
}
.footer-menu > .nav-item > .nav-link:hover {
color: #FFFFFF;
}
}
/* Navbar dropdowns: hide Bootstrap generated caret */
.main-navbar .dropdown-toggle::after {
display: none !important;
}
/* ── Newsletter sidebar widget ─────────────────────────────────────────── */
.bm-newsletter-card {
background: var(--gradient-primary) !important;
border-color: transparent !important;
color: #fff;
text-align: center;
box-shadow: var(--bm-shadow-lg) !important;
position: relative;
overflow: hidden;
}
.bm-newsletter-card::before {
content: "";
position: absolute;
top: -55px;
right: -55px;
width: 190px;
height: 190px;
border-radius: 50%;
background: rgba(235, 202, 67, 0.1);
pointer-events: none;
}
.bm-newsletter-icon {
width: 52px;
height: 52px;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
color: #fff;
position: relative;
z-index: 1;
}
.bm-newsletter-title {
font-size: 16px;
font-weight: 800;
color: #fff;
margin-bottom: 0.4rem;
letter-spacing: -0.022em;
position: relative;
z-index: 1;
}
.bm-newsletter-text {
font-size: 13px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 1.25rem;
line-height: 1.65;
position: relative;
z-index: 1;
}
/* Form wrapper — left-aligned so roles + input + button all share one edge */
.bm-newsletter-form {
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
z-index: 1;
text-align: left;
}
/* Simple radio buttons */
.bm-newsletter-roles {
display: flex;
justify-content: space-between;
}
.bm-newsletter-role-label {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
color: rgba(255, 255, 255, 0.85);
cursor: pointer;
user-select: none;
}
.bm-newsletter-input {
border: 1.5px solid rgba(255, 255, 255, 0.25);
border-radius: var(--bm-r-sm, 6px);
padding: 10px 14px;
font-size: 13.5px;
background: rgba(255, 255, 255, 0.12);
color: #fff;
outline: none;
font-family: inherit;
width: 100%;
transition: border-color 0.25s ease, background 0.25s ease;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.bm-newsletter-input::placeholder {
color: rgba(255, 255, 255, 0.65);
}
.bm-newsletter-input:focus {
border-color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.2);
}
.bm-newsletter-btn {
display: inline-flex;
align-items: center;
gap: 6px;
border: none;
border-radius: var(--bm-r-sm, 6px);
padding: 11px 14px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
background: var(--theme-secondary);
color: var(--theme-primary-dark);
font-family: inherit;
letter-spacing: 0.01em;
transition: opacity 0.25s ease, transform 0.22s ease;
}
.bm-newsletter-btn:hover {
opacity: 0.9;
transform: translateY(-1px);
}
.bm-newsletter-feedback {
font-size: 12px;
font-weight: 600;
text-align: left;
}
.bm-newsletter-feedback.is-success {
display: block;
color: #a8f0b8;
}
.bm-newsletter-feedback.is-error {
display: block;
color: #f8a8b0;
}
/*================ Dark Mode Refresh =================*/
/* ── Dark Mode Token System ──────────────────────────────────────────────────
All dark-mode blue accents are replaced with the yellow/gold accent family.
Backgrounds: deep charcoal/graphite (no blue-heavy surfaces).
Accent: #FACC15 (yellow/gold) family — used for CTAs, active states, focus,
links, badges, highlights. Blue retained only for semantic "info".
─────────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
/* ── Backgrounds ── */
--dm-bg-1: #0F1115;
--dm-bg-2: #151922;
--dm-surface-1: #1B202B;
--dm-surface-2: #232937;
--dm-border: #343C4D;
/* ── Typography ── */
--dm-text-primary: #F3F4F6;
--dm-text-secondary: #D1D5DB;
--dm-text-muted: #9CA3AF;
/* ── Accent (yellow/gold) — replaces all blue accents in dark mode ── */
--dm-accent: #FACC15;
--dm-accent-hover: #EAB308;
--dm-accent-soft: #FDE68A;
--dm-accent-subtle: rgba(250, 204, 21, 0.12);
--dm-accent-subtle-hover: rgba(250, 204, 21, 0.20);
--dm-accent-border: rgba(250, 204, 21, 0.25);
--dm-accent-ring: rgba(250, 204, 21, 0.18);
--dm-focus: #FBBF24;
/* ── Semantic states (unchanged) ── */
--dm-success: #34D399;
--dm-warning: #FACC15;
--dm-danger: #F87171;
--dm-info: #60A5FA; /* blue kept only for semantic info state */
}
[data-theme="dark"] {
color-scheme: dark;
}
[data-theme="dark"] body {
background-color: var(--dm-bg-1);
background-image: radial-gradient(ellipse 90% 55% at 50% -8%, rgba(250, 204, 21, 0.06), transparent 62%),
linear-gradient(180deg, var(--dm-bg-1) 0%, #0A0D12 100%);
}
[data-theme="dark"] hr,
[data-theme="dark"] .dropdown-divider {
border-color: var(--dm-border);
opacity: 1;
}
[data-theme="dark"] .main-navbar {
background-color: rgba(15, 17, 21, 0.90);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04),
0 20px 48px rgba(0, 0, 0, 0.34);
}
[data-theme="dark"] .scroll-effect {
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05),
0 22px 48px rgba(0, 0, 0, 0.38);
}
[data-theme="dark"] .main-nav-menu > .nav-item > .nav-link {
color: var(--dm-text-secondary);
}
[data-theme="dark"] .main-nav-menu > .nav-item > .nav-link:hover,
[data-theme="dark"] .main-nav-menu > .nav-item > .nav-link:focus {
color: var(--dm-text-primary);
}
[data-theme="dark"] .nav-dropdown-menu,
[data-theme="dark"] .dropdown-menu {
background: linear-gradient(180deg, rgba(27, 32, 43, 0.98) 0%, rgba(21, 25, 34, 0.98) 100%);
border: 1px solid var(--dm-border);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38),
0 1px 0 rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .nav-dropdown-item,
[data-theme="dark"] .dropdown-item {
color: var(--dm-text-secondary);
}
[data-theme="dark"] .nav-dropdown-item:hover,
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
background-color: var(--dm-accent-subtle);
color: var(--dm-accent);
}
[data-theme="dark"] .banner-form,
[data-theme="dark"] .auth-box {
background: linear-gradient(180deg, rgba(27, 32, 43, 0.94) 0%, rgba(21, 25, 34, 0.90) 100%);
border-color: var(--dm-border);
box-shadow: 0 28px 64px rgba(0, 0, 0, 0.42),
0 1px 0 rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .auth-section-content {
background-image: linear-gradient(180deg, rgba(7, 12, 18, 0.82) 13%, rgba(7, 12, 18, 0.42) 42%, rgba(7, 12, 18, 0.08) 100%);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea.form-control {
background-color: var(--dm-surface-2);
border-color: var(--dm-border);
color: var(--dm-text-primary);
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-select::placeholder,
[data-theme="dark"] textarea.form-control::placeholder,
[data-theme="dark"] .banner-form-input-group ::placeholder,
[data-theme="dark"] .custom-input-group ::placeholder {
color: var(--dm-text-muted);
opacity: 1;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] textarea.form-control:focus {
background-color: var(--dm-surface-2);
border-color: var(--dm-accent);
color: var(--dm-text-primary);
box-shadow: 0 0 0 0.2rem var(--dm-accent-ring);
}
[data-theme="dark"] .banner-form-input-group,
[data-theme="dark"] .custom-input-group,
[data-theme="dark"] .banner-s2-dropdown.select2-dropdown,
[data-theme="dark"] .select2-dropdown {
background-color: var(--dm-surface-2);
border-color: var(--dm-border);
}
[data-theme="dark"] .banner-s2-dropdown .select2-search--dropdown .select2-search__field,
[data-theme="dark"] .banner-s2-dropdown .select2-results__option,
[data-theme="dark"] .custom-input-group *,
[data-theme="dark"] .banner-form-input-group .form-control,
[data-theme="dark"] .banner-form-input-group .form-select,
[data-theme="dark"] .banner-form-input-group .form-textarea {
color: var(--dm-text-primary);
}
[data-theme="dark"] .banner-form-input-group:has(input:focus),
[data-theme="dark"] .banner-form-input-group:has(select:focus),
[data-theme="dark"] .banner-form-input-group:has(textarea:focus),
[data-theme="dark"] .custom-input-group:has(*:focus),
[data-theme="dark"] .custom-input-group:has(*:active),
[data-theme="dark"] .auth-box .banner-form-input-group:has(input:focus),
[data-theme="dark"] .auth-box .banner-form-input-group:has(input:active) {
background-color: var(--dm-surface-1);
border-color: var(--dm-accent);
box-shadow: 0 0 0 3px var(--dm-accent-ring);
}
[data-theme="dark"] .tag-btn,
[data-theme="dark"] .page-link,
[data-theme="dark"] .grid-list-view-tab,
[data-theme="dark"] .nav-btn-tab,
[data-theme="dark"] .gallery-carousel-btn-group,
[data-theme="dark"] .banner-btn-group {
background-color: var(--dm-surface-2);
border-color: var(--dm-border);
}
[data-theme="dark"] .tag-btn,
[data-theme="dark"] .page-link,
[data-theme="dark"] .grid-list-view-tab-link,
[data-theme="dark"] .border-bottom-tabs > .nav-item > .nav-link,
[data-theme="dark"] .nav-btn-tab .nav-link {
color: var(--dm-text-secondary);
}
[data-theme="dark"] .tag-btn:hover,
[data-theme="dark"] .page-link:hover,
[data-theme="dark"] .nav-btn-tab .nav-link:not(.active):hover,
[data-theme="dark"] .banner-btn-group > *:hover {
background-color: var(--dm-accent-subtle);
color: var(--dm-accent);
}
[data-theme="dark"] .page-link {
border: 1px solid var(--dm-border);
}
[data-theme="dark"] .page-item.active .page-link {
background-color: var(--dm-accent);
border-color: var(--dm-accent);
color: #0F1115;
box-shadow: 0 12px 28px rgba(250, 204, 21, 0.24);
}
[data-theme="dark"] .border-bottom-tabs > .nav-item > .nav-link:hover,
[data-theme="dark"] .border-bottom-tabs > .nav-item > .nav-link:focus,
[data-theme="dark"] .border-bottom-tabs > .nav-item > .nav-link.active {
color: var(--dm-text-primary);
}
[data-theme="dark"] .job-list-card,
[data-theme="dark"] .job-grid-view-card,
[data-theme="dark"] .job-card,
[data-theme="dark"] .featured-employee-card,
[data-theme="dark"] .filterable-aside,
[data-theme="dark"] .faq,
[data-theme="dark"] .general-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .blog-item,
[data-theme="dark"] .blog-details,
[data-theme="dark"] .plan-card,
[data-theme="dark"] .addon-card,
[data-theme="dark"] .contact-form-group {
background: linear-gradient(180deg, var(--dm-surface-1) 0%, var(--dm-bg-2) 100%);
border-color: var(--dm-border);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22),
0 1px 0 rgba(255, 255, 255, 0.03);
}
[data-theme="dark"] .job-list-card:hover,
[data-theme="dark"] .job-grid-view-card:hover,
[data-theme="dark"] .job-card:hover,
[data-theme="dark"] .featured-employee-card:hover,
[data-theme="dark"] .blog-card:hover,
[data-theme="dark"] .blog-item:hover,
[data-theme="dark"] .plan-card:hover {
border-color: var(--dm-accent-border);
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28),
0 0 0 1px var(--dm-accent-border),
0 1px 0 rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .general-card > *,
[data-theme="dark"] .modal-content > *,
[data-theme="dark"] .filterable-aside-header,
[data-theme="dark"] .filter-group:not(:last-child),
[data-theme="dark"] .job-card-hr,
[data-theme="dark"] .blog-card .card-footer,
[data-theme="dark"] .table-pricing thead th,
[data-theme="dark"] .table-pricing tbody td {
border-color: var(--dm-border);
}
[data-theme="dark"] .filter-icon-box,
[data-theme="dark"] .job-card-category-btn {
background-color: var(--dm-accent-subtle);
border-color: var(--dm-accent-border);
color: var(--dm-accent);
}
[data-theme="dark"] .filterable-aside-header,
[data-theme="dark"] .general-card > .card-header h1,
[data-theme="dark"] .general-card > .card-header h2,
[data-theme="dark"] .general-card > .card-header h3,
[data-theme="dark"] .general-card > .card-header h4,
[data-theme="dark"] .general-card > .card-header h5,
[data-theme="dark"] .general-card > .card-header h6,
[data-theme="dark"] .job-card-title,
[data-theme="dark"] .featured-employee-title,
[data-theme="dark"] .blog-card-title,
[data-theme="dark"] .blog-card-title-sm,
[data-theme="dark"] .blog-details-title {
color: var(--dm-text-primary);
}
[data-theme="dark"] .employee-details,
[data-theme="dark"] .content-details,
[data-theme="dark"] .blog-subtitle,
[data-theme="dark"] .blog-details p,
[data-theme="dark"] .featured-employee-card address,
[data-theme="dark"] .job-card address,
[data-theme="dark"] .aside-filter-list .custom-radio,
[data-theme="dark"] .aside-filter-list .custom-checkbox {
color: var(--dm-text-secondary);
}
/* Rich text editor (Quill) output fix — Quill wraps content in sibling tags
and may inject inline style="color:..." which beats class-based rules.
Target all
elements and their descendants inside the card, plus
.employee-details for the employer detail page. */
[data-theme="dark"] .employee-card-subtitle {
color: var(--dm-text-secondary);
}
[data-theme="dark"] .featured-employee-card p,
[data-theme="dark"] .featured-employee-card p *,
[data-theme="dark"] .job-card p,
[data-theme="dark"] .job-card p * {
color: var(--dm-text-primary) !important;
background-color: transparent !important;
}
[data-theme="dark"] .employee-details,
[data-theme="dark"] .employee-details * {
color: var(--dm-text-secondary) !important;
background-color: transparent !important;
}
.featured-employee-card p *,
.job-card p *,
.employee-details * {
background-color: transparent !important;
}
[data-theme="dark"] .auth-radio-with-label {
background: linear-gradient(180deg, rgba(27, 32, 43, 0.92) 0%, rgba(21, 25, 34, 0.92) 100%);
border-color: var(--dm-border);
color: var(--dm-text-secondary);
}
[data-theme="dark"] .auth-radio-with-label:has(input:checked) {
background: rgba(var(--theme-green-rgb), 0.08);
border-color: rgba(var(--theme-green-rgb), 0.4);
box-shadow: inset 0 0 0 1px rgba(var(--theme-green-rgb), 0.16);
}
[data-theme="dark"] .plan-card.selected {
border-color: var(--dm-accent-border);
outline-color: var(--dm-accent-border);
background: linear-gradient(180deg, rgba(250, 204, 21, 0.08) 0%, rgba(35, 41, 55, 0.92) 100%);
box-shadow: 0 20px 44px rgba(0, 0, 0, 0.32);
}
[data-theme="dark"] .addon-card.active-addon {
border-color: rgba(250, 204, 21, 0.30);
background: linear-gradient(180deg, rgba(250, 204, 21, 0.06) 0%, var(--dm-surface-1) 100%);
}
[data-theme="dark"] .table {
--bs-table-bg: transparent;
--bs-table-color: var(--dm-text-secondary);
--bs-table-border-color: var(--dm-border);
--bs-table-striped-bg: rgba(255, 255, 255, 0.02);
--bs-table-hover-bg: var(--dm-accent-subtle);
}
[data-theme="dark"] .table-pricing thead th {
background-color: var(--dm-accent-subtle);
color: var(--dm-text-primary);
}
[data-theme="dark"] .table-pricing tbody td {
background-color: rgba(255, 255, 255, 0.02);
color: var(--dm-text-secondary);
}
[data-theme="dark"] .table-pricing tbody tr:nth-child(even) td,
[data-theme="dark"] .table-pricing tbody tr:hover td {
background-color: var(--dm-accent-subtle);
}
[data-theme="dark"] .table-pricing thead tr th.table-primary,
[data-theme="dark"] .table-pricing tbody tr:nth-child(even) th.table-primary,
[data-theme="dark"] .table-pricing tbody tr td.table-primary {
background-color: rgba(250, 204, 21, 0.10);
border-color: rgba(250, 204, 21, 0.20) !important;
color: var(--dm-text-primary);
}
[data-theme="dark"] .btn-outline-theme-primary {
background-color: transparent;
border-color: var(--dm-accent);
color: var(--dm-accent);
}
[data-theme="dark"] .btn-outline-theme-primary:hover,
[data-theme="dark"] .btn-outline-theme-primary:active {
background-color: var(--dm-accent) !important;
border-color: var(--dm-accent) !important;
color: #0F1115 !important;
}
[data-theme="dark"] .btn-neutral-white-3 {
background-color: var(--dm-surface-2);
border-color: var(--dm-border);
color: var(--dm-text-primary);
}
[data-theme="dark"] .modal-content,
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .popover {
background-color: var(--dm-surface-1);
border-color: var(--dm-border);
}
[data-theme="dark"] .offcanvas-header,
[data-theme="dark"] .offcanvas-body,
[data-theme="dark"] .popover-header,
[data-theme="dark"] .popover-body {
border-color: var(--dm-border);
color: var(--dm-text-secondary);
}
[data-theme="dark"] .accordion-item {
background-color: var(--dm-surface-1);
border-color: var(--dm-border);
}
[data-theme="dark"] .accordion-button {
background-color: var(--dm-surface-1);
color: var(--dm-text-primary);
}
[data-theme="dark"] .accordion-button:not(.collapsed) {
background-color: var(--dm-accent-subtle);
color: var(--dm-text-primary);
box-shadow: inset 0 -1px 0 var(--dm-border);
}
[data-theme="dark"] .accordion-button::after {
filter: brightness(0) invert(1) opacity(0.72);
}
[data-theme="dark"] .footer {
background: linear-gradient(180deg, #13171F 0%, #0F1115 100%);
border-top: 1px solid var(--dm-border);
}
[data-theme="dark"] .footer-bg-img {
opacity: 0.18;
}
/*================ Light Mode Refresh =================*/
html[data-theme="light"] {
color-scheme: light;
}
html[data-theme="light"] body {
background-color: var(--surface-0-lm);
background-image: radial-gradient(ellipse 75% 45% at 30% -5%, rgba(var(--theme-primary-light-rgb), 0.06), transparent),
radial-gradient(ellipse 45% 35% at 88% 112%, rgba(240, 195, 50, 0.05), transparent);
}
html[data-theme="light"] .main-navbar {
background-color: rgba(255, 255, 255, 0.72);
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.90),
0 14px 36px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .scroll-effect {
box-shadow: 0 16px 38px rgba(11, 45, 69, 0.08);
}
html[data-theme="light"] .nav-dropdown-menu,
html[data-theme="light"] .dropdown-menu {
border: 1px solid var(--surface-border-lm);
background: linear-gradient(180deg, rgba(251, 253, 255, 0.98) 0%, rgba(243, 248, 251, 0.98) 100%);
box-shadow: var(--surface-shadow-lm);
}
html[data-theme="light"] .nav-dropdown-item:hover,
html[data-theme="light"] .dropdown-item:hover,
html[data-theme="light"] .dropdown-item:focus {
background-color: var(--surface-tint-lm);
color: var(--theme-primary-light);
}
html[data-theme="light"] .bg-glassmorphism-light {
/*background-color: rgba(244, 249, 252, 0.78);*/
/*color: var(--theme-primary-dark);*/
backdrop-filter: blur(10px);
}
html[data-theme="light"] .banner-form,
html[data-theme="light"] .auth-box {
background: linear-gradient(180deg, rgba(251, 253, 255, 0.92) 0%, rgba(241, 247, 251, 0.96) 100%);
border-color: rgba(219, 231, 239, 0.92);
box-shadow: 0 28px 56px rgba(11, 45, 69, 0.14),
0 1px 0 rgba(255, 255, 255, 0.9);
}
html[data-theme="light"] .auth-section-content {
background-image: linear-gradient(180deg, rgba(6, 20, 31, 0.78) 12%, rgba(6, 20, 31, 0.26) 42%, rgba(6, 20, 31, 0.04) 100%);
}
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select,
html[data-theme="light"] textarea.form-control {
background-color: var(--surface-1-lm);
border-color: var(--surface-border-lm);
color: var(--neutral-dark-3);
}
html[data-theme="light"] .form-control:focus,
html[data-theme="light"] .form-select:focus,
html[data-theme="light"] textarea.form-control:focus {
border-color: rgba(var(--theme-primary-light-rgb), 0.36);
box-shadow: 0 0 0 0.2rem rgba(var(--theme-primary-light-rgb), 0.12);
}
html[data-theme="light"] .banner-form-input-group,
html[data-theme="light"] .custom-input-group,
html[data-theme="light"] .banner-s2-dropdown.select2-dropdown,
html[data-theme="light"] .select2-dropdown {
background-color: var(--surface-1-lm);
border-color: var(--surface-border-lm);
}
html[data-theme="light"] .banner-form-input-group:has(input:focus),
html[data-theme="light"] .banner-form-input-group:has(select:focus),
html[data-theme="light"] .banner-form-input-group:has(textarea:focus),
html[data-theme="light"] .custom-input-group:has(*:focus),
html[data-theme="light"] .custom-input-group:has(*:active),
html[data-theme="light"] .auth-box .banner-form-input-group:has(input:focus),
html[data-theme="light"] .auth-box .banner-form-input-group:has(input:active) {
border-color: rgba(var(--theme-primary-light-rgb), 0.32);
box-shadow: 0 0 0 3px rgba(var(--theme-primary-light-rgb), 0.1);
}
html[data-theme="light"] .tag-btn,
html[data-theme="light"] .page-link,
html[data-theme="light"] .nav-btn-tab,
html[data-theme="light"] .grid-list-view-tab,
html[data-theme="light"] .banner-btn-group {
border-color: var(--surface-border-lm);
}
html[data-theme="light"] .tag-btn,
html[data-theme="light"] .page-link,
html[data-theme="light"] .banner-btn-group {
/*background-color: var(--surface-2-lm);*/
}
html[data-theme="light"] .tag-btn:hover,
html[data-theme="light"] .page-link:hover,
html[data-theme="light"] .nav-btn-tab .nav-link:not(.active):hover,
html[data-theme="light"] .banner-btn-group > *:hover {
/*background-color: var(--surface-3-lm);*/
}
html[data-theme="light"] .banner-btn-group {
background-color: rgba(244, 249, 252, 0.92);
box-shadow: 0 16px 34px rgba(11, 45, 69, 0.14);
}
html[data-theme="light"] .banner-btn-group a,
html[data-theme="light"] .banner-btn-group button {
color: var(--theme-primary-dark);
}
html[data-theme="light"] .banner-btn-group iconify-icon,
html[data-theme="light"] .banner-btn-group svg {
color: var(--theme-primary-dark);
opacity: 0.9;
}
html[data-theme="light"] .banner-btn-group .banner-btn-group-divider {
background-color: rgba(11, 45, 69, 0.12);
}
html[data-theme="light"] .job-list-card,
html[data-theme="light"] .job-grid-view-card,
html[data-theme="light"] .job-card,
html[data-theme="light"] .featured-employee-card,
html[data-theme="light"] .filterable-aside,
html[data-theme="light"] .faq,
html[data-theme="light"] .general-card,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .blog-card,
html[data-theme="light"] .blog-item,
html[data-theme="light"] .blog-details,
html[data-theme="light"] .plan-card,
html[data-theme="light"] .addon-card,
html[data-theme="light"] .contact-form-group {
background: linear-gradient(180deg, rgba(251, 253, 255, 0.98) 0%, rgba(243, 248, 251, 0.98) 100%);
border-color: var(--surface-border-lm);
box-shadow: var(--surface-shadow-lm);
}
html[data-theme="light"] .job-list-card:hover,
html[data-theme="light"] .job-grid-view-card:hover,
html[data-theme="light"] .job-card:hover,
html[data-theme="light"] .featured-employee-card:hover,
html[data-theme="light"] .blog-card:hover,
html[data-theme="light"] .blog-item:hover,
html[data-theme="light"] .plan-card:hover {
border-color: var(--surface-border-strong-lm);
box-shadow: var(--surface-shadow-strong-lm);
}
html[data-theme="light"] .filterable-aside-header,
html[data-theme="light"] .general-card > .card-header h1,
html[data-theme="light"] .general-card > .card-header h2,
html[data-theme="light"] .general-card > .card-header h3,
html[data-theme="light"] .general-card > .card-header h4,
html[data-theme="light"] .general-card > .card-header h5,
html[data-theme="light"] .general-card > .card-header h6,
html[data-theme="light"] .job-card-title,
html[data-theme="light"] .featured-employee-title,
html[data-theme="light"] .blog-card-title,
html[data-theme="light"] .blog-card-title-sm,
html[data-theme="light"] .blog-details-title {
color: var(--theme-primary-dark);
}
html[data-theme="light"] .filter-icon-box,
html[data-theme="light"] .job-card-category-btn {
background-color: var(--surface-3-lm);
border-color: rgba(var(--theme-primary-light-rgb), 0.14);
color: var(--theme-primary-light);
}
html[data-theme="light"] .auth-radio-with-label {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 253, 0.98) 100%);
border-color: var(--surface-border-lm);
color: var(--neutral-dark-2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
html[data-theme="light"] .auth-radio-with-label:has(input:checked) {
background: rgba(var(--theme-green-rgb), 0.06);
border-color: rgba(var(--theme-green-rgb), 0.38);
box-shadow: inset 0 0 0 1px rgba(var(--theme-green-rgb), 0.12);
}
html[data-theme="light"] .plan-card.selected {
background: rgba(var(--theme-primary-light-rgb), 0.05);
border-color: rgba(var(--theme-primary-light-rgb), 0.32);
box-shadow: 0 20px 42px rgba(11, 45, 69, 0.12);
}
html[data-theme="light"] .addon-card.active-addon {
background: linear-gradient(180deg, rgba(var(--theme-primary-light-rgb), 0.05) 0%, rgba(255, 255, 255, 0.98) 100%);
border-color: var(--surface-border-strong-lm);
}
html[data-theme="light"] .table-pricing thead th {
background-color: rgba(var(--theme-primary-light-rgb), 0.06);
border-color: var(--surface-border-lm);
}
html[data-theme="light"] .table-pricing tbody td {
border-color: var(--surface-border-lm);
}
html[data-theme="light"] .table-pricing tbody tr:nth-child(even) td,
html[data-theme="light"] .table-pricing tbody tr:hover td {
background-color: rgba(var(--theme-primary-light-rgb), 0.035);
}
html[data-theme="light"] .section-bg-image-bottom {
opacity: 0.12;
}
/* ============================================================================
PREMIUM DESIGN SYSTEM v2 — Precision Depth
Font: Plus Jakarta Sans (display/UI) + Inter (body prose)
Color: Amplified azure primary, cinematic dark mode, crisp light mode
============================================================================ */
/* ── 1. Global Font Rendering ──────────────────────────────────────────────── */
html {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-feature-settings: 'cv01' 1, 'ss01' 1;
}
/* ── 2. Color Token Amplification ─────────────────────────────────────────── */
:root {
/* ── AMPLIFIED PRIMARY AZURE ── */
--theme-primary-light: #0d6eba;
--theme-primary-light-hard: #0b5a99;
--theme-primary-light-rgb: 13, 110, 186;
/* ── DARK-MODE ACCENT: yellow/gold family replaces blue ── */
--theme-primary-light-dm: #FACC15;
--theme-primary-light-soft-dm: #FDE68A;
--theme-primary-light-hard-dm: #EAB308;
--theme-primary-light-rgb-dm: 250, 204, 21;
/* ── DEEPER NAVY ── */
--theme-primary-dark: #062340;
--theme-primary-dark-hard: #041930;
--theme-primary-dark-dm: #0c3259;
--theme-primary-dark-rgb: 6, 35, 64;
/* ── VIVID GREEN ── */
--theme-green: #16a34a;
--theme-green-dm: #4ade80;
--theme-green-rgb: 22, 163, 74;
--theme-green-soft: #dcfce7;
--theme-soft-green: #f0fdf4;
/* ── VIVID TEAL ── */
--theme-teal: #0891b2;
--theme-teal-dm: #22d3ee;
/* ── RICHER GOLD ── */
--theme-secondary: #f0c332;
--theme-secondary-dm: #f0c332;
--theme-secondary-soft: #fef9c3;
/* ── VIVID GRADIENT ── */
--gradient-primary: linear-gradient(135deg, #062340 0%, #1580d6 100%);
/* ── ENERGIZED LIGHT MODE SURFACES ── */
--body-bg: #f4f5f6;
--theme-base: #ffffff;
--border: #d0d5dc;
--muted: #6b7280;
--surface-0-lm: #f4f5f6;
--surface-1-lm: #ffffff;
--surface-2-lm: #eef0f2;
--surface-3-lm: #e5e7ea;
--surface-4-lm: #d8dce1;
--surface-border-lm: #d0d5dc;
--surface-border-strong-lm: #b0b8c1;
--surface-tint-lm: rgba(13, 110, 186, 0.09);
--surface-shadow-lm: 0 2px 8px rgba(6, 35, 64, 0.07),
0 16px 48px rgba(6, 35, 64, 0.12);
--surface-shadow-strong-lm: 0 4px 14px rgba(6, 35, 64, 0.09),
0 28px 64px rgba(6, 35, 64, 0.16);
/* ── DARK MODE SURFACES (charcoal/graphite — no blue tint) ── */
--body-bg-dm: #0F1115;
--theme-base-dm: #151922;
--border-dm: #343C4D;
--muted-dm: #9CA3AF;
--surface-0-dm: #0F1115;
--surface-1-dm: #1B202B;
--surface-2-dm: #232937;
--surface-3-dm: #2C3342;
--surface-4-dm: #343C4D;
--surface-overlay-dm: rgba(15, 17, 21, 0.90);
--surface-border-dm: #343C4D;
--surface-border-strong-dm: #454E60;
--surface-ring-dm: rgba(250, 204, 21, 0.18);
--surface-shadow-dm: 0 4px 20px rgba(0, 0, 0, 0.32),
0 24px 64px rgba(0, 0, 0, 0.44);
/* ── STRONG BUTTON TOKENS ── */
--btn-primary-shadow: 0 1px 4px rgba(6, 35, 64, 0.22),
0 6px 20px rgba(13, 110, 186, 0.24);
--btn-primary-shadow-hover: 0 2px 8px rgba(6, 35, 64, 0.26),
0 10px 30px rgba(13, 110, 186, 0.32);
--btn-secondary-shadow: 0 1px 4px rgba(240, 195, 50, 0.30),
0 6px 18px rgba(240, 195, 50, 0.18);
--btn-green-shadow: 0 1px 4px rgba(22, 163, 74, 0.26),
0 6px 18px rgba(22, 163, 74, 0.16);
/* ── SHADOWS ── */
--shadow-t1: 0 2px 8px rgba(6, 35, 64, 0.07),
0 16px 48px rgba(6, 35, 64, 0.12);
--shadow-t1-dm: 0 4px 20px rgba(0, 0, 0, 0.32),
0 24px 64px rgba(0, 0, 0, 0.44);
/* ── PREMIUM RADIUS SCALE ── */
--r-xs: 3px;
--r-sm: 6px;
--r-md: 8px;
--r-lg: 10px;
--r-xl: 14px;
--r-pill: 50rem;
/* ── FONT SYSTEM ── */
--font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif;
/* ── TEXT COLORS — neutral, not blue-grey ── */
--neutral-dark: #171a1d;
--neutral-dark-1: #4b5563;
--neutral-dark-2: #374151;
--neutral-dark-3: #1f2937;
--neutral-dark-4: #111827;
}
/* ── 3. Display Typography — Plus Jakarta Sans, editorial tracking ─────────── */
h1, h2, h3, h4, h5, h6,
.heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6,
.section-title, .banner-lead-title, .inside-banner-lead-title, .inside-lead-title,
.job-card-title, .blog-card-title, .blog-details-title, .display-price,
.nav-dropdown-item-title, .step-header {
font-family: var(--font-display);
font-feature-settings: 'cv01' 1, 'cv02' 1, 'ss01' 1;
}
/* UI chrome gets Plus Jakarta Sans too */
.btn, .tag-btn, .page-link, .nav-link,
.nav-btn-tab .nav-link, .bm-filter-tab,
.section-subtitle, .custom-badge, .featured-badge,
.filter-group-header, .filterable-aside-header,
.blog-card-read-more, .blog-tag-btn {
font-family: var(--font-display);
}
/* Tracking system */
h1, .heading-1, .banner-lead-title {
letter-spacing: -0.040em;
line-height: 1.06;
font-weight: 900;
text-wrap: balance;
}
h2, .heading-2, .inside-banner-lead-title {
letter-spacing: -0.030em;
line-height: 1.11;
font-weight: 800;
text-wrap: balance;
}
h3, .heading-3 {
letter-spacing: -0.022em;
line-height: 1.19;
font-weight: 700;
text-wrap: balance;
}
h4, .heading-4 {
letter-spacing: -0.014em;
line-height: 1.30;
}
h5, .heading-5 {
letter-spacing: -0.008em;
line-height: 1.36;
font-weight: 600;
}
.section-title {
font-weight: 800;
letter-spacing: -0.026em;
line-height: 1.14;
text-wrap: balance;
}
.section-subtitle {
letter-spacing: 0.075em;
text-transform: uppercase;
font-weight: 700;
font-size: 11.5px;
}
.content-details {
line-height: 1.84;
}
.blog-card-title {
letter-spacing: -0.016em;
line-height: 1.27;
font-weight: 700;
}
.job-card-title {
letter-spacing: -0.012em;
line-height: 1.30;
font-weight: 700;
}
.faq-question {
font-weight: 700;
letter-spacing: -0.012em;
}
.display-price {
letter-spacing: -0.025em;
}
/* ── 4. Button Elevation — gradient depth + brand glow ─────────────────────── */
.btn {
border-radius: var(--r-md);
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.01em;
transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-xl {
border-radius: var(--r-lg) !important;
letter-spacing: -0.014em;
}
/* Primary — 3D-depth gradient + brand-shadow glow */
.btn-theme-primary {
background-image: linear-gradient(
180deg,
rgba(255, 255, 255, 0.11) 0%,
rgba(0, 0, 0, 0.00) 50%,
rgba(0, 0, 0, 0.07) 100%
);
box-shadow: var(--btn-primary-shadow);
}
.btn.btn-theme-primary:hover,
.btn-theme-primary.btn:first-child:active {
transform: translateY(-2px);
box-shadow: var(--btn-primary-shadow-hover) !important;
}
.btn.btn-theme-primary:active {
transform: translateY(0);
box-shadow: 0 1px 3px rgba(6, 35, 64, 0.2),
0 2px 8px rgba(13, 110, 186, 0.16) !important;
}
/* Secondary — gold glow */
.btn-theme-secondary {
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0.04) 100%);
box-shadow: var(--btn-secondary-shadow);
}
.btn.btn-theme-secondary:hover,
.btn-theme-secondary.btn:first-child:active {
transform: translateY(-2px);
box-shadow: 0 3px 10px rgba(240, 195, 50, 0.36),
0 10px 28px rgba(240, 195, 50, 0.24) !important;
}
/* Green — emerald glow */
.btn-theme-green {
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.04) 100%);
box-shadow: var(--btn-green-shadow);
}
.btn.btn-theme-green:hover,
.btn-theme-green.btn:first-child:active {
transform: translateY(-2px);
box-shadow: 0 3px 8px rgba(22, 163, 74, 0.30),
0 10px 24px rgba(22, 163, 74, 0.20) !important;
}
/* Banner submit */
.banner-form [type="submit"] {
border-radius: var(--r-md);
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.01em;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(0, 0, 0, 0.06) 100%);
box-shadow: var(--btn-primary-shadow);
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.banner-form [type="submit"]:hover {
transform: translateY(-2px);
box-shadow: var(--btn-primary-shadow-hover);
}
/* ── 5. Card Radius — 4 px → 10 px (premium container feel) ───────────────── */
.job-card,
.job-list-card,
.job-grid-view-card {
border-radius: var(--r-lg);
}
.job-card > *:first-child {
border-top-left-radius: var(--r-lg);
border-top-right-radius: var(--r-lg);
}
.job-card > *:last-child {
border-bottom-left-radius: var(--r-lg);
border-bottom-right-radius: var(--r-lg);
}
.job-card .job-card-header {
border-top-left-radius: var(--r-lg);
border-top-right-radius: var(--r-lg);
}
.job-card .job-card-logo {
border-width: 3px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.job-list-card-header {
border-top-left-radius: var(--r-lg) !important;
border-bottom-left-radius: var(--r-lg) !important;
}
@media screen and (max-width: 991px) {
.job-list-card-header {
border-bottom-left-radius: 0 !important;
border-top-right-radius: var(--r-lg) !important;
}
}
.job-grid-view-card-header {
border-top-left-radius: var(--r-lg);
border-top-right-radius: var(--r-lg);
}
.featured-employee-card {
border-radius: var(--r-lg);
}
.featured-employee-card .job-card-logo {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}
.general-card {
border-radius: var(--r-lg);
}
.general-card > *:first-child {
border-top-left-radius: var(--r-lg);
border-top-right-radius: var(--r-lg);
}
.general-card > *:last-child {
border-bottom-left-radius: var(--r-lg);
border-bottom-right-radius: var(--r-lg);
}
.blog-card {
border-radius: var(--r-lg);
}
.blog-card .card-header > * {
border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.faq {
border-radius: var(--r-lg);
}
.plan-card {
border-radius: var(--r-lg);
}
.addon-card {
border-radius: var(--r-sm);
}
.auth-box {
border-radius: var(--r-lg);
}
.modal-content {
border-radius: var(--r-xl);
}
.featured-badge {
border-radius: var(--r-sm);
letter-spacing: 0.02em;
font-family: var(--font-display);
font-weight: 700;
}
.custom-badge {
border-radius: var(--r-sm);
font-family: var(--font-display);
font-weight: 700;
}
.filterable-aside {
border-radius: var(--r-lg);
}
.filterable-aside > *:first-child {
border-top-left-radius: var(--r-lg);
border-top-right-radius: var(--r-lg);
}
.filterable-aside > *:last-child {
border-bottom-left-radius: var(--r-lg);
border-bottom-right-radius: var(--r-lg);
}
/* ── 6. Form + Container Radii ─────────────────────────────────────────────── */
.banner-form {
border-radius: var(--r-lg);
}
.banner-form-input-group {
border-radius: var(--r-sm);
}
.custom-input-group {
border-radius: var(--r-sm);
}
.nav-dropdown-menu {
border-radius: var(--r-xl);
}
.nav-dropdown-item {
border-radius: var(--r-sm);
}
/* ── 7. Navbar — maximum glassmorphism ─────────────────────────────────────── */
.main-navbar {
backdrop-filter: blur(24px) saturate(200%);
-webkit-backdrop-filter: blur(24px) saturate(200%);
}
.main-nav-menu > .nav-item > .nav-link {
border-radius: var(--r-sm);
transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Light mode navbar — translucent frosted white */
html[data-theme="light"] .main-navbar {
background-color: rgba(255, 255, 255, 0.72);
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.90),
0 14px 36px rgba(0, 0, 0, 0.06);
}
/* Dark mode navbar — charcoal overlay */
[data-theme="dark"] .main-navbar {
background-color: rgba(15, 17, 21, 0.90);
border-bottom: 1px solid var(--dm-border);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04),
0 20px 52px rgba(0, 0, 0, 0.38);
}
/* ── 8. Tags, Pagination & Tabs ────────────────────────────────────────────── */
.tag-btn {
border-radius: var(--r-sm);
font-family: var(--font-display);
font-weight: 500;
transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-link {
border-radius: var(--r-sm);
font-family: var(--font-display);
font-weight: 600;
transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-item.active .page-link {
box-shadow: 0 2px 8px rgba(13, 110, 186, 0.28),
0 6px 20px rgba(13, 110, 186, 0.20);
}
.nav-btn-tab {
border-radius: var(--r-lg);
}
.nav-btn-tab .nav-link {
border-radius: var(--r-sm);
font-family: var(--font-display);
font-weight: 500;
}
.nav-btn-tab .nav-link.active {
font-weight: 700;
}
/* ── 9. Nav link hover ───────────────────────────────────────────────────────── */
html[data-theme="light"] .main-nav-menu > .nav-item > .nav-link:hover {
background-color: rgba(13, 110, 186, 0.07);
color: var(--theme-primary-light);
}
[data-theme="dark"] .main-nav-menu > .nav-item > .nav-link:hover {
background-color: var(--dm-accent-subtle);
color: var(--dm-accent);
}
/* ── 10. Dark Mode — charcoal surfaces (no blue) ────────────────────────────── */
[data-theme="dark"] .job-list-card,
[data-theme="dark"] .job-grid-view-card,
[data-theme="dark"] .job-card,
[data-theme="dark"] .featured-employee-card,
[data-theme="dark"] .filterable-aside,
[data-theme="dark"] .faq,
[data-theme="dark"] .general-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .blog-item,
[data-theme="dark"] .blog-details,
[data-theme="dark"] .plan-card,
[data-theme="dark"] .addon-card,
[data-theme="dark"] .contact-form-group {
background: linear-gradient(
155deg,
var(--dm-surface-1) 0%,
var(--dm-bg-2) 100%
);
border-color: var(--dm-border);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24),
0 16px 44px rgba(0, 0, 0, 0.22),
0 1px 0 rgba(255, 255, 255, 0.03);
}
[data-theme="dark"] .job-list-card:hover,
[data-theme="dark"] .job-grid-view-card:hover,
[data-theme="dark"] .job-card:hover,
[data-theme="dark"] .featured-employee-card:hover,
[data-theme="dark"] .blog-card:hover,
[data-theme="dark"] .blog-item:hover,
[data-theme="dark"] .plan-card:hover {
border-color: var(--dm-accent-border);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28),
0 24px 56px rgba(0, 0, 0, 0.32),
0 0 0 1px var(--dm-accent-border),
0 1px 0 rgba(255, 255, 255, 0.04);
}
/* Dark form areas */
[data-theme="dark"] .banner-form,
[data-theme="dark"] .auth-box {
background: linear-gradient(
180deg,
rgba(27, 32, 43, 0.96) 0%,
rgba(21, 25, 34, 0.94) 100%
);
border-color: var(--dm-border);
box-shadow: 0 28px 64px rgba(0, 0, 0, 0.44),
0 1px 0 rgba(255, 255, 255, 0.04);
}
/* Dark nav dropdowns */
[data-theme="dark"] .nav-dropdown-menu,
[data-theme="dark"] .dropdown-menu {
background: linear-gradient(
180deg,
rgba(27, 32, 43, 0.99) 0%,
rgba(21, 25, 34, 0.99) 100%
);
border: 1px solid var(--dm-border);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.44),
0 1px 0 rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .nav-dropdown-item:hover,
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
background-color: var(--dm-accent-subtle);
color: var(--dm-accent);
}
/* ── 11. Light Mode — crisp white surfaces with strong hierarchy ────────────── */
html[data-theme="light"] .job-list-card,
html[data-theme="light"] .job-grid-view-card,
html[data-theme="light"] .job-card,
html[data-theme="light"] .featured-employee-card,
html[data-theme="light"] .filterable-aside,
html[data-theme="light"] .faq,
html[data-theme="light"] .general-card,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .blog-card,
html[data-theme="light"] .blog-item,
html[data-theme="light"] .blog-details,
html[data-theme="light"] .plan-card,
html[data-theme="light"] .addon-card,
html[data-theme="light"] .contact-form-group {
background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
border-color: rgba(208, 213, 220, 0.80);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06),
0 6px 22px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 1);
}
html[data-theme="light"] .job-list-card:hover,
html[data-theme="light"] .job-grid-view-card:hover,
html[data-theme="light"] .job-card:hover,
html[data-theme="light"] .featured-employee-card:hover,
html[data-theme="light"] .blog-card:hover,
html[data-theme="light"] .blog-item:hover,
html[data-theme="light"] .plan-card:hover {
border-color: rgba(156, 163, 175, 0.90);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08),
0 22px 56px rgba(0, 0, 0, 0.11),
inset 0 1px 0 rgba(255, 255, 255, 1);
}
/* Light mode banner form + auth box */
html[data-theme="light"] .banner-form,
html[data-theme="light"] .auth-box {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(248, 249, 250, 0.99) 100%
);
border-color: rgba(208, 213, 220, 0.90);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07),
0 32px 72px rgba(0, 0, 0, 0.11),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
/* Light mode nav dropdowns */
html[data-theme="light"] .nav-dropdown-menu,
html[data-theme="light"] .dropdown-menu {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.99) 0%,
rgba(249, 250, 251, 0.99) 100%
);
border: 1px solid rgba(208, 213, 220, 0.75);
box-shadow: 0 20px 52px rgba(0, 0, 0, 0.10),
0 1px 0 rgba(255, 255, 255, 0.90);
}
html[data-theme="light"] .nav-dropdown-item:hover,
html[data-theme="light"] .dropdown-item:hover {
background-color: rgba(13, 110, 186, 0.07);
color: var(--theme-primary-light);
}
/* ── 12. Custom Scrollbar ──────────────────────────────────────────────────── */
[data-theme="dark"] ::-webkit-scrollbar {
width: 8px;
height: 8px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
background: var(--dm-bg-2);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: rgba(250, 204, 21, 0.25);
border-radius: 4px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
background: rgba(250, 204, 21, 0.45);
}
html[data-theme="light"] ::-webkit-scrollbar {
width: 8px;
height: 8px;
}
html[data-theme="light"] ::-webkit-scrollbar-track {
background: var(--surface-2-lm);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb {
background: rgba(13, 110, 186, 0.22);
border-radius: 4px;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
background: rgba(13, 110, 186, 0.40);
}
/* ── 13. Text Selection ────────────────────────────────────────────────────── */
::selection {
background-color: rgba(13, 110, 186, 0.20);
color: var(--theme-primary-dark);
}
[data-theme="dark"] ::selection {
background-color: rgba(250, 204, 21, 0.30);
color: #0F1115;
}
/* ── 14. Focus Ring ────────────────────────────────────────────────────────── */
:focus-visible {
outline: 2.5px solid var(--theme-primary-light);
outline-offset: 3px;
border-radius: var(--r-xs);
}
[data-theme="dark"] :focus-visible {
outline-color: var(--dm-focus);
}
/* ── 15. Logo / Avatar polish ──────────────────────────────────────────────── */
.job-card-logo {
border-width: 3px;
}
[data-theme="dark"] .job-card-logo {
border-color: var(--dm-surface-2);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(250, 204, 21, 0.08);
}
/* ── 16. Footer — dark charcoal treatment ───────────────────────────────────── */
[data-theme="dark"] .footer {
background: linear-gradient(180deg, #13171F 0%, #0F1115 100%);
border-top: 1px solid var(--dm-border);
}
/* ── 17. Section title accent line ─────────────────────────────────────────── */
.section-subtitle {
color: var(--theme-primary-light);
font-family: var(--font-display);
}
[data-theme="dark"] .section-subtitle {
color: var(--dm-accent);
}
/* ── 18. Vivid active states ────────────────────────────────────────────────── */
html[data-theme="light"] .nav-btn-tab .nav-link.active {
background: linear-gradient(135deg, #0d6eba 0%, #1580d6 100%);
box-shadow: 0 2px 8px rgba(13, 110, 186, 0.28),
0 6px 18px rgba(13, 110, 186, 0.18);
}
[data-theme="dark"] .nav-btn-tab .nav-link.active {
background: linear-gradient(135deg, var(--dm-accent) 0%, var(--dm-accent-hover) 100%);
color: #0F1115;
box-shadow: 0 2px 12px rgba(250, 204, 21, 0.30);
}
/* ── 19. Active pagination — gold glow ──────────────────────────────────────── */
[data-theme="dark"] .page-item.active .page-link {
background-color: var(--dm-accent);
border-color: var(--dm-accent);
color: #0F1115;
box-shadow: 0 2px 8px rgba(250, 204, 21, 0.34),
0 6px 20px rgba(250, 204, 21, 0.22);
}
/* ── 20. Filter icon box — gold in dark ─────────────────────────────────────── */
[data-theme="dark"] .filter-icon-box {
background-color: var(--dm-accent-subtle);
border-color: var(--dm-accent-border);
color: var(--dm-accent);
}
/* ── 21. Job card category btn ──────────────────────────────────────────────── */
[data-theme="dark"] .job-card-category-btn {
background-color: var(--dm-accent-subtle);
border-color: var(--dm-accent-border);
color: var(--dm-accent);
}
/* ── 23. Job detail — amenity chips ─────────────────────────────────────────── */
.job-amenity-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
align-items: start;
}
@media (max-width: 767px) {
.job-amenity-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 400px) {
.job-amenity-grid {
grid-template-columns: 1fr;
}
}
.job-amenity-chip {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 10px;
padding: 11px 14px;
border-radius: 6px;
border: 1px solid var(--neutral-white-3);
background: #fff;
min-width: 0;
transition: border-color .2s, box-shadow .2s, background .2s;
}
.job-amenity-chip:hover {
border-color: var(--theme-primary-light, #0f5e92);
box-shadow: 0 3px 10px rgba(15, 94, 146, .08);
background: var(--foundation-blue-4, #f5f9fd);
}
.job-amenity-chip__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
min-width: 28px;
border-radius: 8px;
background: var(--foundation-blue-4, #eaf2f9);
color: var(--theme-primary, #1e4a8a);
flex-shrink: 0;
margin-top: 1px;
}
.job-amenity-chip__body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
width: 100%;
}
.job-amenity-chip__label {
font-weight: 700;
color: var(--neutral-dark-2, #7a8fa0);
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
white-space: nowrap;
}
.job-amenity-chip__value {
color: var(--neutral-dark, #1a2332);
font-weight: 600;
font-size: 13px;
line-height: 1.35;
}
[data-theme="dark"] .job-amenity-chip {
background: var(--dm-surface-1);
border-color: var(--dm-border);
}
[data-theme="dark"] .job-amenity-chip:hover {
background: var(--dm-surface-2, #1e2535);
border-color: var(--dm-accent-border);
box-shadow: 0 4px 14px rgba(250, 204, 21, 0.08);
}
[data-theme="dark"] .job-amenity-chip__icon {
background: var(--dm-accent-subtle);
color: var(--dm-accent);
}
[data-theme="dark"] .job-amenity-chip__label {
color: var(--dm-text-muted);
}
[data-theme="dark"] .job-amenity-chip__value {
color: var(--dm-text-primary);
}
/* ── 22. Dark mode — neutral text colors (warm grey, no blue-grey tint) ────── */
[data-theme="dark"] {
--neutral-dark: var(--dm-text-primary);
--neutral-dark-1: var(--dm-text-secondary);
--neutral-dark-2: var(--dm-text-muted);
--neutral-dark-3: #E5E7EB;
--neutral-dark-4: #CDD0D5;
--muted: var(--dm-text-muted);
--light-muted: #8B909A;
}
/* ── 24. Semantic Class Alignment Layer ───────────────────────────────────────
Additive aliases for the semantic Blade classes introduced during the view
refactor. These selectors intentionally use :where() to keep specificity low
and avoid disrupting the legacy cascade while still documenting the new
frontend structure in main.css.
──────────────────────────────────────────────────────────────────────────── */
/* Layout shell */
:where(.site-body, .frontend-site-body, .guest-site-body, .app-site-body) {
min-height: 100vh;
}
:where(.site-shell, .frontend-site-shell, .guest-site-shell, .app-site-shell) {
min-height: 100vh;
display: flex;
flex-direction: column;
}
:where(.site-main, .frontend-main, .guest-site-main, .app-site-main) {
flex: 1 1 auto;
display: block;
min-width: 0;
}
:where(.frontend-page-stage) {
position: relative;
}
/* Site navigation */
:where(.site-header.site-navigation) {
background-color: rgba(var(--theme-white-rgb), .85);
backdrop-filter: blur(5px);
padding: 16px 0;
position: sticky;
top: 0;
z-index: 3;
}
:where(.site-brand .brand-logo, .site-brand .brand-logo-dm) {
width: 174px;
height: auto;
}
:where(.site-primary-nav__link) {
color: var(--neutral-dark);
font-weight: 500;
font-size: var(--action-font-size-lg);
padding: 10px 12px;
}
:where(.site-primary-nav__link:hover) {
color: var(--theme-primary-light);
}
:where(.site-subnav) {
border: none;
border-radius: var(--r-xl, 14px);
background-color: var(--theme-base);
box-shadow: 0 0 3px rgba(16, 24, 40, .1);
animation-name: fadeIn;
animation-duration: .5s;
animation-iteration-count: 1;
padding: 12px;
}
:where(.site-subnav__link) {
display: flex;
color: var(--neutral-dark);
padding: 8px 12px;
transition: all .5s ease;
border-radius: var(--r-sm, 6px);
}
:where(.site-subnav__link:hover) {
background-color: #FAFAFA;
color: var(--theme-primary-light);
padding-left: 16px;
}
[data-theme="dark"] :where(.site-primary-nav__link:hover) {
color: var(--theme-primary-light-soft-dm);
}
[data-theme="dark"] :where(.site-subnav__link:hover) {
background-color: rgba(255, 255, 255, .05);
}
/* Footer structure */
:where(.site-footer, .frontend-footer, .app-site-footer, .guest-site-footer) {
position: relative;
background-color: var(--theme-primary-dark);
color: var(--neutral-white-4);
}
:where(.site-footer__background) {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: bottom center;
filter: grayscale(100%) sepia(100%) hue-rotate(20deg) saturate(0);
opacity: .3;
}
:where(.site-footer__content) {
position: relative;
z-index: 1;
padding: 100px 0 20px 0;
}
:where(.site-footer-menu__link) {
font-size: var(--paragraph-s);
}
[data-theme="dark"] :where(.site-footer) {
background-color: var(--theme-dark);
color: var(--light-muted);
}
[data-theme="dark"] :where(.site-footer .text-neutral-white) {
color: var(--light-muted) !important;
}
[data-theme="dark"] :where(.site-footer-menu__link:hover, .site-footer .text-neutral-white:hover) {
color: #FFFFFF !important;
}
/* Semantic section wrappers */
:where(
.homepage-hero-section,
.homepage-featured-employers,
.homepage-values-section,
.homepage-category-gallery,
.homepage-testimonials,
.feature-content-section,
.faq-section,
.about-page-hero,
.about-page-features,
.about-page-story,
.about-page-cta,
.page-header-banner,
.contact-page-section,
.categories-page-hero,
.categories-page-job-section,
.categories-page-featured-employers,
.categories-page-quick-links,
.jobs-page-hero,
.jobs-listing-page,
.job-detail-hero,
.job-detail-page,
.employers-page-hero,
.employers-listing-page,
.employer-detail-hero,
.employer-detail-page,
.blog-index-hero,
.blog-listing-page,
.blog-article-hero-section,
.blog-article-page,
.pricing-page-hero,
.pricing-builder-section,
.pricing-compare-section,
.pricing-checkout-page,
.related-jobs-section,
.related-employers-section,
.related-posts-section,
.job-tag-page-hero,
.job-tag-results-section,
.payment-status-page
) {
position: relative;
}
:where(
.homepage-hero__content,
.homepage-featured-employers__content,
.homepage-values-section__content,
.about-page-hero__content,
.page-header-banner__content,
.contact-page-section__content,
.categories-page-hero__content,
.categories-page-job-section__content,
.categories-page-featured-employers__content,
.categories-page-quick-links__content,
.jobs-listing-page__content,
.job-detail-hero__content,
.job-detail-page__content,
.employers-listing-page__content,
.employer-detail-hero__content,
.employer-detail-page__content,
.pricing-page-hero__content,
.pricing-builder-section__content,
.pricing-compare-section__content,
.pricing-checkout-page__content,
.job-tag-page-hero__content,
.job-tag-results-section__content,
.payment-status-page__content
) {
position: relative;
}
:where(.homepage-hero__background) {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Banner and search surfaces */
:where(.homepage-hero__search-panel, .page-header-banner__search-form) {
border-radius: var(--r-lg, 10px);
}
:where(.jobs-results-list, .jobs-results-grid, .employers-results-grid, .employer-jobs-grid, .job-tag-results-grid, .employer-card-grid) {
list-style-type: none;
padding-left: 0;
box-sizing: border-box;
}
:where(.jobs-results-list__item) {
margin-bottom: 24px;
}
:where(.job-filter-sidebar__panel, .employer-filter-sidebar__panel) {
position: relative;
border: 1px solid var(--neutral-white-3);
border-radius: var(--r-lg, 10px);
min-height: 400px;
background-color: var(--theme-white);
display: flex;
flex-direction: column;
}
:where(.job-filter-sidebar__panel > :first-child, .employer-filter-sidebar__panel > :first-child) {
border-top-left-radius: var(--r-lg, 10px);
border-top-right-radius: var(--r-lg, 10px);
}
:where(.job-filter-sidebar__panel > :last-child, .employer-filter-sidebar__panel > :last-child) {
border-bottom-left-radius: var(--r-lg, 10px);
border-bottom-right-radius: var(--r-lg, 10px);
}
:where(.job-filter-sidebar__body, .employer-filter-sidebar__body) {
flex-grow: 1;
overflow: auto;
}
:where(.job-filter-sidebar__footer, .employer-filter-sidebar__footer) {
padding: 12px 16px;
}
:where(.jobs-results-toolbar, .employers-results-toolbar, .employer-jobs-summary) {
border-radius: var(--r-lg, 10px);
background-color: var(--theme-white);
border: 1px solid var(--neutral-white-3);
}
/* Listing and detail card aliases */
:where(.job-listing-card, .job-grid-card, .job-tag-card, .employer-directory-card, .employer-card, .employer-job-card) {
background-color: var(--theme-white);
border: 1px solid var(--neutral-white-2);
border-radius: var(--r-lg, 10px);
transition: all .3s ease;
}
:where(.job-listing-card:hover, .job-grid-card:hover, .job-tag-card:hover, .employer-directory-card:hover, .employer-card:hover, .employer-job-card:hover) {
box-shadow: var(--shadow-t1);
}
:where(.company-cover-frame) {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
pointer-events: none;
background: #eef2f7;
}
:where(.company-cover-frame__bg) {
display: none;
}
:where(.company-cover-frame__image) {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform .3s ease;
}
:where(.job-listing-card__cover) {
position: relative;
display: block;
height: 100%;
overflow: hidden;
border-top-left-radius: var(--r-lg, 10px);
border-bottom-left-radius: var(--r-lg, 10px);
}
:where(.job-grid-card__cover) {
position: relative;
display: block;
overflow: hidden;
border-top-left-radius: var(--r-lg, 10px);
border-top-right-radius: var(--r-lg, 10px);
}
:where(.job-grid-card__cover)::before {
content: '';
display: block;
padding-top: 56.25%;
background-color: #f5f5f5;
}
:where(.job-listing-card__cover img, .job-grid-card__cover img) {
transition: all .3s ease;
}
:where(.job-grid-card__cover > img) {
top: 0;
left: 0;
position: absolute;
}
:where(.job-listing-card:hover .job-listing-card__cover img, .job-grid-card:hover .job-grid-card__cover img) {
transform: scale(1.1);
}
:where(.job-listing-card:hover .job-listing-card__cover .company-cover-frame__image,
.job-grid-card:hover .job-grid-card__cover .company-cover-frame__image,
.employer-card:hover .company-cover-frame__image,
.employer-directory-card:hover .company-cover-frame__image) {
transform: scale(1.08);
}
:where(.job-listing-card__body, .job-grid-card__body, .job-tag-card__body, .employer-job-card__body) {
padding: 16px;
}
:where(.employer-directory-card__header, .employer-card__header) {
z-index: 0;
}
:where(.employer-directory-card__body, .employer-card__body) {
position: relative;
z-index: 1;
overflow: visible;
}
:where(.employer-directory-card__logo, .employer-card__body .job-card-logo) {
z-index: 3;
}
/* Shared semantic card surfaces */
:where(
.about-page-feature-card,
.about-page-story__card,
.about-page-cta__card,
.contact-page-form-panel,
.contact-page-support-panel__card,
.job-detail-sidebar__card,
.employer-detail-sidebar__card,
.employer-profile-card,
.employer-contact-card,
.employer-lifestyle-card,
.employer-gallery-card,
.employer-video-card,
.employer-jobs-intro-card,
.employer-jobs-empty-state,
.employer-profile-empty-state,
.pricing-builder-card,
.pricing-addon-card,
.pricing-summary-card,
.pricing-renewal-card,
.pricing-compare-section__card,
.pricing-checkout-panel,
.pricing-checkout-summary-card,
.pricing-checkout-page__state,
.payment-status-page__details,
.payment-status-page__notice,
.payment-status-page__next-steps,
.payment-status-page__reasons,
.payment-status-page__support,
.cart-line-items-panel,
.cart-summary-card,
.auth-login-card,
.auth-recovery-card,
.auth-reset-card,
.blog-sidebar-card,
.related-post-card
) {
background-color: var(--theme-white);
border: 1px solid var(--neutral-white-2);
border-radius: var(--r-lg, 10px);
}
:where(.pricing-addon-card) {
border-left-width: 4px;
border-radius: var(--r-sm, 6px);
}
:where(.pricing-builder-section__summary-sticky, .pricing-checkout-form__summary-sticky) {
position: sticky !important;
top: 3rem;
}
/* Pricing compare table alias */
:where(.pricing-compare-table) {
color: var(--neutral-dark-3);
}
:where(.pricing-compare-table tr) {
border: none;
}
:where(.pricing-compare-table thead th, .pricing-compare-table tbody td) {
border: 1px solid var(--neutral-white-2);
padding: .5rem;
font-size: 14px;
color: var(--neutral-dark-3);
vertical-align: middle;
}
:where(.pricing-compare-table thead th) {
color: var(--theme-primary-light);
background-color: rgba(var(--theme-primary-light-rgb), .05);
text-transform: uppercase;
}
:where(.pricing-compare-table tbody tr:nth-child(even) td, .pricing-compare-table tbody tr:hover td) {
background-color: #fafafa;
}
[data-theme="dark"] :where(.pricing-compare-table thead th) {
color: var(--theme-primary-light-dm);
background-color: rgba(var(--theme-primary-light-rgb), .5);
}
[data-theme="dark"] :where(.pricing-compare-table tbody td) {
color: var(--theme-primary-light-dm);
background-color: rgba(var(--theme-primary-light-rgb), .1);
}
[data-theme="dark"] :where(.pricing-compare-table tbody tr:nth-child(even) td, .pricing-compare-table tbody tr:hover td) {
background-color: rgba(var(--theme-primary-light-rgb), .2);
}
/* Responsive semantic aliases */
@media screen and (max-width: 1600px) {
:where(.site-header.site-navigation) {
padding: 8px 0;
}
:where(.site-footer__content) {
padding: 56px 0 20px 0;
}
}
@media screen and (min-width: 992px) {
:where(.pricing-builder-section__summary-sticky, .pricing-checkout-form__summary-sticky) {
top: 110px;
}
:where(.pricing-compare-table thead th, .pricing-compare-table tbody td) {
padding: 1rem;
}
:where(.pricing-compare-table thead th) {
font-size: 16px;
}
}
@media screen and (max-width: 991px) {
:where(.site-header.site-navigation .navbar-collapse) {
overflow: auto;
max-height: calc(100vh - 90px);
}
:where(.site-primary-nav__link) {
display: flex;
justify-content: space-between;
}
:where(.jobs-results-list__item) {
margin-bottom: 0;
}
:where(.job-listing-card__cover) {
border-bottom-left-radius: 0;
border-top-right-radius: var(--r-lg, 10px);
padding: 0;
}
:where(.job-listing-card__cover)::before {
content: '';
display: block;
padding-top: 75%;
background-color: #f5f5f5;
}
:where(.job-listing-card__cover > img) {
top: 0;
left: 0;
position: absolute;
}
:where(.job-listing-card__body, .job-grid-card__body, .job-tag-card__body, .employer-job-card__body) {
padding: 1rem;
}
}
@media screen and (max-width: 992px) {
:where(.homepage-hero__search-panel, .auth-login-card, .auth-recovery-card, .auth-reset-card) {
padding: 16px;
}
}
/* ══════════════════════════════════════════════════════════════════════════════
EMPLOYER FILTER SIDEBAR — V2
══════════════════════════════════════════════════════════════════════════════ */
/* ─── Sidebar card ────────────────────────────────────────────────────────── */
:where(.job-filter-sidebar__panel.filterable-aside, .employer-filter-sidebar__panel.filterable-aside) {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(11, 45, 69, 0.04);
border-color: var(--neutral-white-3);
}
/* ─── Sidebar header ─────────────────────────────────────────────────────── */
.filterable-aside-header {
padding: 14px 16px;
gap: 6px;
}
.filter-header-title {
font-size: 14px;
font-weight: 700;
color: var(--theme-primary-dark);
letter-spacing: -0.01em;
line-height: 1.2;
}
.filter-active-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 5px;
background-color: var(--theme-primary-light);
color: #fff;
border-radius: 5px;
font-size: 11px;
font-weight: 700;
line-height: 1;
margin-left: 7px;
flex-shrink: 0;
}
.filter-clear-all {
font-size: 12px;
font-weight: 600;
color: var(--theme-primary-light);
text-decoration: none;
margin-left: auto;
white-space: nowrap;
transition: color 0.15s ease;
flex-shrink: 0;
}
.filter-clear-all:hover {
color: var(--theme-primary-dark);
text-decoration: none;
}
.filter-header-icon {
color: var(--theme-green);
}
/* ─── Filter group headers ───────────────────────────────────────────────── */
.filter-group-header {
display: flex;
align-items: center;
padding: 11px 16px;
gap: 0;
text-decoration: none;
transition: background-color 0.12s ease;
}
.filter-group-header:hover {
background-color: rgba(var(--theme-primary-light-rgb), 0.04);
text-decoration: none;
}
.filter-group-icon {
display: inline-flex;
align-items: center;
font-size: 14px;
color: var(--theme-green);
margin-right: 7px;
flex-shrink: 0;
opacity: 1;
transition: color 0.12s ease, transform 0.12s ease;
}
.filter-group-header:hover .filter-group-icon {
color: color-mix(in srgb, var(--theme-green) 82%, #0b2d45 18%);
transform: translateX(1px);
}
.filter-group-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--neutral-dark-2);
flex: 1;
transition: color 0.12s ease;
}
.filter-group-header:hover .filter-group-title {
color: var(--theme-primary-dark);
}
.filter-group-count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
background-color: var(--theme-primary-light);
color: #fff;
border-radius: 5px;
font-size: 10px;
font-weight: 700;
line-height: 1;
margin-right: 8px;
flex-shrink: 0;
}
.filter-chevron {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
color: var(--neutral-dark-1);
transition: transform 0.2s ease;
transform: rotate(0deg);
flex-shrink: 0;
font-size: 12px;
}
.content-togglable-group.show .filter-chevron {
transform: rotate(180deg);
}
/* ─── Checkbox list items ────────────────────────────────────────────────── */
.aside-filter-list {
padding: 2px 10px 10px 10px;
margin: 0;
list-style: none;
}
.aside-filter-item {
margin-bottom: 0;
}
/* Full-row hover */
.aside-filter-list .custom-checkbox {
padding: 7px 8px 7px 8px; /* 8px left so hover extends past the checkbox edge */
align-items: center;
gap: 9px;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.12s ease;
}
.aside-filter-list .custom-checkbox:hover {
background-color: rgba(var(--theme-primary-light-rgb), 0.06);
}
/* Input stays hidden */
.aside-filter-list .custom-checkbox input {
display: none;
}
/* Visual checkbox box — cancel the translate, let gap handle spacing */
.aside-filter-list .custom-checkbox::before {
width: 16px;
height: 16px;
flex-shrink: 0;
align-self: center;
transform: none; /* cancel translate(-8px, 2px) — gap replaces it */
border: 1.5px solid var(--neutral-white-3);
border-radius: 3px;
background-color: var(--theme-white);
background-repeat: no-repeat;
background-position: center;
background-size: 10px 10px;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
/* Suppress the original ::after tick — we use SVG background on ::before instead */
.aside-filter-list .custom-checkbox::after,
.aside-filter-list .custom-checkbox:has(input:checked)::after {
display: none !important;
}
/* Checked: brand blue + perfectly centred SVG checkmark */
.aside-filter-list .custom-checkbox:has(input:checked)::before {
background-color: var(--theme-primary-light) !important;
border-color: var(--theme-primary-light) !important;
background-image: url("data:image/svg+xml,") !important;
}
/* Focus ring */
.aside-filter-list .custom-checkbox:focus-within::before {
box-shadow: 0 0 0 2px rgba(var(--theme-primary-light-rgb), 0.3);
}
/* Option label text */
.filter-option-label {
font-size: 13.5px;
color: var(--neutral-dark-3);
line-height: 1.35;
}
/* Select All item — visually distinct */
.aside-filter-item--select-all {
border-bottom: 1px solid var(--neutral-white-3);
margin-bottom: 4px;
padding-bottom: 2px;
}
.filter-option-label--select-all {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--neutral-dark-1) !important;
}
/* ─── Show more / less button ────────────────────────────────────────────── */
.toggle-filter-list-tem {
display: inline-flex;
align-items: center;
padding: 5px 6px;
font-size: 12px;
font-weight: 600;
color: var(--theme-primary-light);
cursor: pointer;
margin-left: 6px;
transition: color 0.15s ease;
border-radius: 4px;
}
.toggle-filter-list-tem:hover {
color: var(--theme-primary-dark);
background-color: rgba(var(--theme-primary-light-rgb), 0.06);
}
.toggle-filter-list-tem span {
display: inline-flex;
align-items: center;
margin-right: 5px;
transform: none;
font-size: 13px;
}
/* ─── Footer / Apply button ──────────────────────────────────────────────── */
:where(.job-filter-sidebar__footer.filterable-aside-footer, .employer-filter-sidebar__footer.filterable-aside-footer) {
padding: 12px 16px 16px;
border-top: 1px solid var(--neutral-white-3);
background-color: var(--theme-white);
border-bottom-left-radius: var(--r-lg, 10px);
border-bottom-right-radius: var(--r-lg, 10px);
}
/* ─── Mobile trigger bar ─────────────────────────────────────────────────── */
:where(.job-filter-sidebar__mobile-toggle, .employer-filter-sidebar__mobile-toggle) {
background-color: var(--theme-white) !important;
border: 1px solid var(--neutral-white-3) !important;
box-shadow: 0 2px 8px rgba(11, 45, 69, 0.07);
border-radius: var(--r-md, 8px) !important;
}
.filter-mobile-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 5px;
background-color: var(--theme-primary-light);
color: #fff;
border-radius: 10px;
font-size: 11px;
font-weight: 700;
line-height: 1;
margin-left: 8px;
flex-shrink: 0;
}
:where(.job-filter-sidebar__mobile-toggle, .employer-filter-sidebar__mobile-toggle) .responsive-aside-toggler {
color: var(--theme-green) !important;
}
.filter-mobile-floating-trigger {
display: none;
}
@media screen and (max-width: 991px) {
.filter-mobile-floating-trigger {
position: fixed;
left: 16px;
right: 16px;
bottom: calc(18px + env(safe-area-inset-bottom, 0px));
z-index: 9;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 12px 18px;
border-radius: 8px;
background-color: var(--theme-primary-light);
color: #fff !important;
font-size: 15px;
font-weight: 700;
line-height: 1;
text-decoration: none;
box-shadow: 0 12px 28px rgba(11, 45, 69, 0.22);
}
.filter-mobile-floating-trigger:hover,
.filter-mobile-floating-trigger:focus {
color: #fff !important;
background-color: var(--theme-primary-dark);
text-decoration: none;
}
.filter-mobile-floating-trigger .filter-mobile-badge {
background-color: #fff;
color: var(--theme-primary-light);
margin-left: 2px;
}
:where(.job-filter-sidebar__footer.filterable-aside-footer, .employer-filter-sidebar__footer.filterable-aside-footer) {
padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
}
/* ─── Mobile backdrop ────────────────────────────────────────────────────── */
:where(.job-filter-backdrop, .employer-filter-backdrop) {
display: none;
position: fixed;
inset: 0;
background-color: rgba(11, 45, 69, 0.45);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 10; /* below aside z-index:11 so panel stays interactive */
animation-name: fadeIn;
animation-duration: 0.2s;
}
:where(.job-filter-backdrop, .employer-filter-backdrop).show {
display: block;
}
/* ─── Desktop: sticky + scroll ───────────────────────────────────────────── */
@media screen and (min-width: 992px) {
:where(.job-filter-sidebar, .employer-filter-sidebar) {
position: sticky;
top: 24px;
align-self: flex-start;
max-height: calc(100vh - 48px);
}
:where(.job-filter-sidebar__panel.filterable-aside, .employer-filter-sidebar__panel.filterable-aside) {
max-height: calc(100vh - 80px);
overflow: hidden;
display: flex;
flex-direction: column;
}
:where(.job-filter-sidebar__body.filterable-aside-body, .employer-filter-sidebar__body.filterable-aside-body) {
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--neutral-white-3) transparent;
}
:where(.job-filter-sidebar__body.filterable-aside-body, .employer-filter-sidebar__body.filterable-aside-body)::-webkit-scrollbar {
width: 3px;
}
:where(.job-filter-sidebar__body.filterable-aside-body, .employer-filter-sidebar__body.filterable-aside-body)::-webkit-scrollbar-track {
background: transparent;
}
:where(.job-filter-sidebar__body.filterable-aside-body, .employer-filter-sidebar__body.filterable-aside-body)::-webkit-scrollbar-thumb {
background-color: var(--neutral-white-4);
border-radius: 2px;
}
}
/* ─── Dark mode ──────────────────────────────────────────────────────────── */
[data-theme="dark"] .filter-header-title {
color: var(--dm-text-primary);
}
[data-theme="dark"] .filter-active-badge,
[data-theme="dark"] .filter-group-count-badge,
[data-theme="dark"] .filter-mobile-badge {
background-color: var(--dm-accent);
color: #0F1115;
}
[data-theme="dark"] .filter-clear-all {
color: var(--dm-accent);
}
[data-theme="dark"] .filter-clear-all:hover {
color: var(--dm-accent-soft);
}
[data-theme="dark"] .filter-header-icon {
color: var(--dm-accent);
}
[data-theme="dark"] .filter-group-header:hover {
background-color: rgba(var(--theme-primary-light-rgb), 0.06);
}
[data-theme="dark"] .filter-group-icon {
color: var(--dm-accent);
}
[data-theme="dark"] .filter-group-header:hover .filter-group-icon {
color: var(--dm-accent-soft);
}
[data-theme="dark"] .filter-group-title {
color: var(--dm-text-muted);
}
[data-theme="dark"] .filter-group-header:hover .filter-group-title {
color: var(--dm-text-secondary);
}
[data-theme="dark"] .filter-chevron {
color: var(--dm-text-muted);
}
[data-theme="dark"] .aside-filter-list .custom-checkbox:hover {
background-color: rgba(var(--theme-primary-light-rgb), 0.08);
}
[data-theme="dark"] .aside-filter-list .custom-checkbox::before {
border-color: var(--dm-border);
background-color: var(--dm-surface-2);
}
[data-theme="dark"] .aside-filter-list .custom-checkbox:has(input:checked)::before {
background-color: var(--dm-accent);
border-color: var(--dm-accent);
background-image: url("data:image/svg+xml,") !important;
}
[data-theme="dark"] .filter-option-label {
color: var(--dm-text-secondary);
}
[data-theme="dark"] .filter-option-label--select-all {
color: var(--dm-text-muted) !important;
}
[data-theme="dark"] .aside-filter-item--select-all {
border-color: var(--dm-border);
}
[data-theme="dark"] .toggle-filter-list-tem {
color: var(--dm-accent);
}
[data-theme="dark"] .toggle-filter-list-tem:hover {
color: var(--dm-accent-soft);
background-color: var(--dm-accent-subtle);
}
[data-theme="dark"] :where(.job-filter-sidebar__footer.filterable-aside-footer, .employer-filter-sidebar__footer.filterable-aside-footer) {
background-color: var(--dm-surface-1);
border-color: var(--dm-border);
}
[data-theme="dark"] :where(.job-filter-sidebar__mobile-toggle, .employer-filter-sidebar__mobile-toggle) {
background-color: var(--dm-surface-2) !important;
border-color: var(--dm-border) !important;
}
[data-theme="dark"] :where(.job-filter-sidebar__mobile-toggle, .employer-filter-sidebar__mobile-toggle) .responsive-aside-toggler {
color: var(--dm-accent) !important;
}