body,
html {
width: 100%;
max-width: 100vw;
position: relative;
overflow-x: hidden;
}
.header-buttons .language-box,
.header-buttons .trust-line-box {
display: flex;
padding: 0 var(--spacing-sm);
gap: var(--spacing-sm);
}
.dropdown-menu .dropdown-item,
.dropdown-menu-sub .dropdown-submenu,
.dropdown-submenu,
.dropdown-submenu > .dropdown-item,
.hero .container,
.language-switcher,
.navbar-nav-list-items .nav-item,
body,
html {
position: relative;
}
.dropdown-menu-sub .dropdown-submenu .dropdown-menu-sub.submenu-flipped,
.dropdown-menu-sub.submenu-flipped {
left: auto !important;
right: calc(100% + 8px) !important;
}
.hero-caption,
.hero-nav {
backdrop-filter: saturate(120%) blur(5px);
}
body,
html {
overflow-x: hidden;
}
.header-logo:hover svg path,
.location-icon svg {
fill: var(--color-primary-light);
}
.news-detail-content a,
.orders-text strong {
text-decoration: underline;
text-decoration-color: var(--color-primary-dark);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
text-decoration-style: dotted;
}
@font-face {
font-family: Onest;
src: url("../fonts/Onest-Thin.ttf") format("truetype");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Onest;
src: url("../fonts/Onest-ExtraLight.ttf") format("truetype");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Onest;
src: url("../fonts/Onest-Light.ttf") format("truetype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Onest;
src: url("../fonts/Onest-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Onest;
src: url("../fonts/Onest-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Onest;
src: url("../fonts/Onest-SemiBold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Onest;
src: url("../fonts/Onest-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Onest;
src: url("../fonts/Onest-ExtraBold.ttf") format("truetype");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Onest;
src: url("../fonts/Onest-Black.ttf") format("truetype");
font-weight: 900;
font-style: normal;
font-display: swap;
}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
:root {
/* Design system colors */
--color-primary-light: #4E7FFF;
--color-primary-dark: #2F57D5;
--color-primary-50: #EDF3FF;
--color-primary-100: #DDE8FF;
--color-light-border: #E5E9F0;
--color-white: #ffffff;
--color-black: #131722;
--color-light-gray: #8A96AB;
--color-gray: #6E7687;
--color-neutral-50: #F7F8FA;
--color-neutral-100: #F0F2F5;
--color-neutral-200: #E5E9F0;
--color-neutral-700: #4B5568;
--color-neutral-800: #2E3645;
--color-neutral-900: #131722;
--color-canvas: #F5F6F8;
--color-surface: #FFFFFF;
/* Gradients */
--gradient-primary: linear-gradient(135deg, #4E7FFF 0%, #2F57D5 100%);
--gradient-primary-hover: linear-gradient(135deg, #5D8BFF 0%, #3660E5 100%);
--gradient-hero-glow: radial-gradient(90% 70% at 50% 0%, rgba(78,127,255,0.18) 0%, rgba(78,127,255,0) 100%);
--gradient-cta-band: linear-gradient(135deg, #4E7FFF 0%, #2F57D5 50%, #213B8C 100%);
--gradient-stat-solid: linear-gradient(155deg, #4E7FFF 15%, #2F57D5 60%, #213B8C 100%);
--gradient-report-card: linear-gradient(135deg, #4E7FFF 0%, #2F57D5 50%, #213B8C 100%);
--gradient-contests: linear-gradient(135deg, #4E7FFF 0%, #2F57D5 50%, #213B8C 100%);
/* Shadows */
--shadow-xs: 0 1px 2px rgba(18, 24, 40, 0.04);
--shadow-sm: 0 4px 14px rgba(18, 24, 40, 0.06);
--shadow-md: 0 10px 30px rgba(18, 24, 40, 0.08);
--shadow-lg: 0 20px 50px rgba(18, 24, 40, 0.12);
--shadow-card-hover: 0 4px 16px rgba(78, 127, 255, 0.12);
--font-family-base: "Onest", Inter, system-ui, -apple-system, sans-serif;
--font-size-base: 1rem;
--font-weight-normal: 500;
--font-weight-bold: 700;
--spacing-xs: 6px;
--spacing-sm: 12px;
--spacing-md: 24px;
--spacing-lg: 32px;
--spacing-xl: 62px;
--border-radius-sm: 10px;
--border-radius-md: 14px;
--border-radius-lg: 18px;
--border-radius-xl: 24px;
--border-radius-2xl: 30px;
--container-max-width: 1430px;
--transition-base: all 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
--font-size-xl: 28px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: var(--color-black);
}
.stat-card.stat-outline.stat-dotted .stat-value,
body {
color: var(--color-dark);
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: var(--font-family-base);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
background-color: var(--color-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body .container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 15px;
}
.container.content {
min-height: 100vh;
}
.header-top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 0;
}
.header-logo svg,
a.hero-slide {
cursor: pointer;
}
.contact-form-button svg path,
.header-logo svg path,
.site-footer li a {
transition: var(--transition-base);
}
.site-footer li a {
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
}
.site-footer li a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1px;
background: var(--color-primary-dark);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-base);
}
.contest-left,
.footer-column-contact .contact-info li,
.footer-content .social-icons,
.header-buttons {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.header-buttons .language-box,
.header-buttons .search-button,
.header-buttons .trust-line-box {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--color-primary-dark);
background-color: transparent;
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-md);
height: 50px;
cursor: pointer;
transition: var(--transition-base);
}
.header-buttons .language-box:hover,
.header-buttons .search-button:hover,
.header-buttons .trust-line-box:hover {
background-color: var(--color-primary-dark);
color: var(--color-white);
border-color: var(--color-primary-dark);
}
.filter-chip--datepicker svg path,
.footer-logo svg path,
.header-buttons .language-box:hover svg path,
.header-buttons .search-button:hover svg path,
.header-buttons .trust-line-box:hover svg path,
.location-card.active .contact-icon svg path,
.orders-apply-btn span svg path,
.orders-item:hover .orders-icon svg path,
.secondary-filters-row .filter-chip.selected .value-item.close svg path {
fill: var(--color-white);
}
.header-buttons .trust-line-box {
align-items: center;
}
.header-buttons .trust-line-text {
display: flex;
flex-direction: column;
}
.header-buttons .trust-line-text .label {
font-size: 12px;
color: var(--color-light-gray);
}
.header-buttons .search-button {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
}
.header-buttons .language-box {
align-items: center;
justify-content: center;
position: relative;
}
.dropdown-menu,
.language-dropdown {
position: absolute;
margin: 0;
list-style: none;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: 0.3s;
z-index: 1000;
}
.language-dropdown {
top: calc(100% + 8px);
right: 0;
background: var(--color-white);
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-md);
min-width: 140px;
padding: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.language-switcher.active .language-dropdown,
.nav-item.dropdown-open > .dropdown-menu,
.nav-item:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.language-dropdown .language-option {
padding: 0;
border-radius: var(--border-radius-sm);
transition: background-color 0.2s;
font-size: var(--font-size-sm);
}
.language-dropdown .language-option .language-link {
display: block;
padding: 10px 12px;
color: var(--color-primary-dark);
text-decoration: none;
cursor: pointer;
}
.language-dropdown .language-option:hover {
background-color: #f5f9ff;
}
.language-dropdown .language-option.active {
background-color: #e7f2ff;
}
.department-item.is-open .department-chevron,
.language-switcher.active .language-box svg,
.navbar-nav-list-items .nav-item:hover svg {
transform: rotate(180deg);
}
.language-box svg {
transition: transform 0.3s;
}
.navbar-container {
padding: 8px 0;
}
.contest-footer,
.job-bottom,
.navbar-nav-list {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar-nav-list {
position: relative;
z-index: 1;
gap: var(--spacing-md);
background: rgba(255, 255, 255, 0.86);
border: 1px solid rgba(229, 233, 240, 0.9);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-sm);
backdrop-filter: blur(6px);
padding: 10px 14px;
}
.navbar-nav-list-items {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.navbar-nav-list-items .nav-link {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-size: var(--font-size-sm);
color: var(--color-neutral-800);
font-weight: 500;
cursor: pointer;
transition: var(--transition-base);
}
.jobs-detail-contact-link:hover,
.navbar-nav-list-items .nav-link:hover {
color: var(--color-primary-dark);
}
.navbar-nav-list-items svg {
height: 6px;
transition: var(--transition-base);
}
.navbar-nav-list-items svg path {
fill: var(--color-neutral-800);
}
.dropdown-menu {
top: calc(100% + 12px);
left: 0;
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(229, 233, 240, 0.9);
border-radius: var(--border-radius-md);
min-width: 220px;
padding: 8px;
box-shadow: var(--shadow-sm);
backdrop-filter: blur(6px);
}
.dropdown-menu .dropdown-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
color: var(--color-neutral-800);
text-decoration: none;
font-size: var(--font-size-sm);
border-radius: var(--border-radius-sm);
transition: 0.2s;
}
.dropdown-menu .dropdown-item:hover {
background-color: var(--color-neutral-50);
color: var(--color-primary-dark);
}
.dropdown-menu .dropdown-item svg {
height: 6px;
width: 14px;
margin-left: auto;
margin-right: 0;
}
.dropdown-menu-sub .dropdown-submenu:hover .dropdown-menu-sub,
.dropdown-menu > .dropdown-submenu:hover > .dropdown-menu-sub,
.dropdown-submenu.submenu-open > .dropdown-menu-sub,
.dropdown-submenu:hover > .dropdown-menu-sub {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.dropdown-menu-sub,
.dropdown-menu-sub .dropdown-submenu .dropdown-menu-sub,
.dropdown-menu > .dropdown-submenu > .dropdown-menu-sub {
left: calc(100% + 8px);
background: var(--color-white);
min-width: 200px;
padding: 8px;
margin: 0;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
visibility: hidden;
transform: translateX(-8px);
transition: 0.3s;
position: absolute;
top: 0;
opacity: 0;
list-style: none;
}
.dropdown-menu-sub,
.dropdown-menu > .dropdown-submenu > .dropdown-menu-sub {
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-md);
z-index: 1001;
}
.dropdown-menu-sub .dropdown-submenu:hover .dropdown-menu-sub.submenu-flipped,
.dropdown-menu-sub.submenu-flipped,
.dropdown-menu > .dropdown-submenu:hover > .dropdown-menu-sub.submenu-flipped,
.dropdown-submenu:hover > .dropdown-menu-sub.submenu-flipped {
transform: translateX(8px);
}
.dropdown-menu-sub .dropdown-submenu .dropdown-menu-sub {
z-index: 1002;
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-md);
}
.dropdown-menu-sub .dropdown-submenu .dropdown-item svg,
.dropdown-submenu .dropdown-item svg {
transform: rotate(-90deg) !important;
}
.dropdown-menu-sub .dropdown-submenu:hover .dropdown-item svg,
.dropdown-submenu:hover .dropdown-item svg {
transform: rotate(90deg) !important;
}
.dropdown-submenu > .dropdown-item::after {
content: "";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
}
.footer-content .btn-old-version,
.navbar-nav-list .btn-contact {
background: var(--color-primary-dark);
color: var(--color-white);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius-md);
font-size: var(--font-size-sm);
cursor: pointer;
transition: var(--transition-base);
}
.contest-cta:hover,
.footer-content .btn-old-version:hover,
.footer-content .social-icons .social-icon:hover,
.job-cta:hover,
.navbar-nav-list .btn-contact:hover,
.orders-apply-btn:hover,
.report-button:hover {
background: var(--color-neutral-50);
color: var(--color-primary-dark);
box-shadow: var(--shadow-md);
}
.footer-content .btn-old-version,
.navbar-nav-list .btn-contact {
background: var(--color-primary-dark);
color: var(--color-white);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius-md);
font-size: var(--font-size-sm);
cursor: pointer;
transition: var(--transition-base);
}
.contest-cta:hover,
.job-cta:hover {
background: var(--gradient-primary-hover);
box-shadow: var(--shadow-md);
}
.site-footer {
position: relative;
color: var(--color-neutral-800);
overflow: hidden;
}
.footer-logo svg {
height: 80px;
width: auto;
}
.site-footer .footer-logo svg path {
fill: var(--color-neutral-900);
}
.footer-content {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: start;
gap: var(--spacing-lg);
background: rgba(255, 255, 255, 0.86);
border: 1px solid rgba(229, 233, 240, 0.9);
border-radius: var(--border-radius-2xl);
box-shadow: var(--shadow-sm);
backdrop-filter: blur(6px);
padding: var(--spacing-lg);
}
.footer-content .col-lg-4,
.network-row .network-card {
flex: 0 0 auto;
}
.departments-accordion,
.footer-content .footer-column-logo,
.jobs-detail-table-wrapper,
.network-grid,
.popular-articles-list,
.search-results-list,
.stats-grid--secondary {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.footer-content .col-lg-4 .row {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: var(--spacing-xl);
}
.footer-content .col-lg-4 .row .col-6 {
flex: 0 0 auto;
width: 50%;
}
.contact-form-field,
.footer-column-contact .contact-info,
.footer-content .col-lg-4 .row .col-6 .footer-links,
.jobs-col,
.orders-list {
flex-direction: column;
gap: var(--spacing-xs);
display: flex;
}
.footer-content .col-lg-4 .row .col-6 .footer-links {
align-items: flex-start;
flex: 1 0 0;
}
.footer-content .col-lg-4 .row .col-6 .footer-links li a,
.footer-description {
color: var(--color-neutral-700);
font-size: var(--font-size-sm);
font-weight: 400;
transition: var(--transition-base);
}
.footer-description {
max-width: 288px;
line-height: 1.6;
}
.footer-content .social-icons .social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--gradient-primary);
border: 1px solid rgba(47, 87, 213, 0.35);
box-shadow: var(--shadow-xs);
transition: var(--transition-base);
}
.footer-content .social-icons .social-icon svg path {
fill: #ffffff;
stroke: #ffffff;
}
.footer-content .social-icons .social-icon:hover {
background: var(--gradient-primary-hover);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.btn-old-version {
margin-top: var(--spacing-sm);
font-size: var(--font-size-sm);
font-weight: 500;
width: fit-content;
transition: var(--transition-base);
}
.footer-title {
font-size: 20px;
font-weight: 600;
color: var(--color-neutral-900);
margin-bottom: var(--spacing-sm);
letter-spacing: -0.01em;
}
.copyright-text,
.copyright-text a,
.footer-column-contact .contact-info li a {
color: var(--color-neutral-600);
font-size: var(--font-size-sm);
}
.footer-column-contact .footer-title:not(:first-child),
.news-results .orders-total {
margin-top: var(--spacing-md);
}
.copyright-text a:hover,
.site-footer li a:hover {
color: var(--color-primary-dark) !important;
transform: translateX(2px);
}
.site-footer li a:hover::after {
transform: scaleX(1);
}
.copyright-text,
.copyright-text a {
margin-top: var(--spacing-md);
font-weight: 400;
text-align: center;
transition: var(--transition-base);
}
.footer-content .footer-column-contact {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.contact-section,
.hero {
padding: var(--spacing-lg) 0 0;
}
.hero-slider {
position: relative;
height: 700px;
border-radius: var(--border-radius-xl);
overflow: hidden;
aspect-ratio: 2/1;
width: 100%;
}
.hero-caption,
.hero-dots,
.hero-nav,
.hero-slide,
.tooltip-pop {
position: absolute;
}
.hero-slide {
inset: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1.03);
transition: opacity 0.6s, transform 1.2s;
display: block;
}
.contest-cta,
.hero-nav,
.job-cta,
.network-card,
.news-card,
.see-all {
transition: var(--transition-base);
}
.hero-subtitle,
.hero-title {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.hero-slide.is-active {
z-index: 999;
opacity: 1;
transform: scale(1);
}
.hero-caption {
left: 20px;
bottom: 20px;
max-width: 720px;
color: var(--color-white);
background: rgba(0, 14, 34, 0.55);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: 20px;
}
.hero-title {
font-size: var(--font-size-lg);
font-weight: 700;
-webkit-line-clamp: 1;
line-clamp: 1;
white-space: nowrap;
}
.hero-subtitle {
margin-top: var(--spacing-xs);
font-size: var(--font-size-sm);
font-weight: 400;
color: #f1f5f9;
-webkit-line-clamp: 2;
line-clamp: 2;
white-space: normal;
}
.hero-nav {
right: 18px;
bottom: 18px;
z-index: 999;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
border: 0;
background: rgba(0, 0, 0, 0.35);
color: var(--color-white);
cursor: pointer;
}
.hero-dots button.is-active {
background: var(--color-white);
}
.hero-prev {
right: 70px;
}
.hero-nav:hover {
background: rgba(0, 0, 0, 0.55);
}
.hero-nav span {
font-size: 28px;
line-height: 1;
transform: translateY(-2px);
}
.hero-dots {
left: 50%;
bottom: 20px;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 999;
}
.hero-dots button {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
border: 0;
cursor: pointer;
}
.report-problem,
.stats {
padding: var(--spacing-xl) 0;
}
.contests-grid,
.news-grid {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
}
.contact-item {
flex: 1 1 calc(25% - var(--spacing-sm));
min-width: 240px;
}
.network-grid .network-card:hover,
.news-grid .news-card:hover,
.sponsors-track .sponsor-card:hover {
opacity: 1 !important;
filter: none !important;
transform: scale(1.05) !important;
}
.jobs-results-head strong {
color: var(--color-black);
font-weight: 600;
}
.news-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: var(--spacing-md);
}
.badge,
.see-all {
align-items: center;
}
.section-title {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--color-black);
}
.quick-access {
margin-top: var(--spacing-xl);
}
.quick-access-card {
background: rgba(255, 255, 255, 0.86);
border: 1px solid rgba(229, 233, 240, 0.9);
border-radius: var(--border-radius-2xl);
box-shadow: var(--shadow-sm);
backdrop-filter: blur(6px);
padding: var(--spacing-md);
}
.quick-access-head {
margin-bottom: var(--spacing-sm);
}
.quick-access-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--spacing-sm);
}
.quick-access-item {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 56px;
padding: 0 var(--spacing-md);
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-lg);
background: var(--color-white);
color: var(--color-neutral-800);
font-weight: 600;
transition: var(--transition-base);
}
.quick-access-item::after {
content: "→";
color: var(--color-primary-light);
font-size: 18px;
line-height: 1;
}
.quick-access-item:hover {
background: var(--color-neutral-50);
color: var(--color-primary-dark);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
@media (max-width: 992px) {
.quick-access-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.quick-access-grid {
grid-template-columns: 1fr;
}
}
.badge,
.date {
font-size: 12px;
}
.badge,
.news-link,
.see-all {
font-weight: 600;
}
.breadcrumb-separator,
.section-sub {
color: var(--color-gray);
}
.see-all {
color: var(--color-primary-light);
display: inline-flex;
gap: var(--spacing-xs);
white-space: nowrap;
}
.breadcrumb-current,
.breadcrumb-link:hover,
.location-card.active .location-icon,
.orders-total strong,
.search-results-view-all:hover,
.see-all--light:hover,
.see-all:hover {
color: var(--color-primary-dark);
}
.news-card {
min-width: 300px;
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-xl);
background: var(--color-white);
overflow: hidden;
padding: var(--spacing-sm);
}
.news-grid:has(.news-card:hover) .news-card {
opacity: 0.5;
filter: blur(1px);
transform: scale(0.98);
}
.news-thumb {
display: block;
border-radius: var(--border-radius-lg);
overflow: hidden;
height: 260px;
}
.news-thumb img {
width: 100%;
object-fit: cover;
height: 100%;
}
.news-body {
padding: var(--spacing-md) var(--spacing-sm) var(--spacing-sm);
}
.news-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-sm);
}
.badge {
display: inline-flex;
padding: 4px 10px;
border-radius: 999px;
}
.news-excerpt,
.news-title {
display: -webkit-box;
-webkit-box-orient: vertical;
white-space: normal;
overflow: hidden;
}
.badge-green {
background: #dcfce8;
color: #17a34a;
}
.badge-purple {
background: #f3e9ff;
color: #a454ef;
}
.badge-amber {
background: #ffedd5;
color: #ea580b;
}
.badge-blue {
background: #dbeafe;
color: var(--color-primary-light);
}
.badge-red {
background: #ffebeb;
color: #ef4444;
}
.badge-orange {
background: #ffe5b4;
color: #f59e0b;
}
.badge-yellow {
background: #fff3cd;
color: #ffc107;
}
.badge-brown {
background: linen;
color: #8b4513;
}
.badge-gray {
background: #f8f9fa;
color: #6c757d;
}
.badge-white {
background: #f8f8f8;
color: #000;
}
.badge-magenta {
background: #fde4f2;
color: #e68bbe;
}
.badge-cyan {
background: #e6f3ff;
color: #007bff;
}
.badge-black {
background: #000;
color: #fff;
}
.date {
color: var(--color-light-gray);
}
.news-title {
font-size: 18px;
line-height: 1.35;
margin-bottom: var(--spacing-xs);
-webkit-line-clamp: 2;
line-clamp: 2;
text-overflow: ellipsis;
}
.news-excerpt,
.tooltip-pop {
font-size: var(--font-size-sm);
}
.news-excerpt {
color: var(--color-gray);
-webkit-line-clamp: 3;
line-clamp: 3;
text-overflow: ellipsis;
}
.contest-desc,
.orders-text {
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}
.news-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: var(--spacing-sm);
color: var(--color-primary-light);
}
.section-title--light,
.see-all--light,
.tooltip-pop {
color: var(--color-white);
}
.tooltip-pop {
z-index: 9999;
max-width: 520px;
padding: 10px 12px;
border-radius: 10px;
background: rgba(0, 14, 34, 0.92);
line-height: 1.4;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
pointer-events: none;
}
.contests {
position: relative;
margin: var(--spacing-xl) 0;
background: var(--color-primary-dark);
padding: var(--spacing-xl) 0;
overflow: hidden;
}
.anticorruption-layout .contact-form-label,
.contests-head,
.educational-network .section-title,
.jobs-head {
margin-bottom: var(--spacing-sm);
}
.contests-head,
.jobs-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.contest-card {
flex: 1 1 calc(33.333% - var(--spacing-sm));
min-width: 300px;
background: var(--color-white);
border-radius: var(--border-radius-xl);
padding: var(--spacing-md);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
z-index: 10;
}
.contests-page-section .contest-card {
border: 1px solid var(--color-light-border);
box-shadow: none;
}
.contest-main,
.jobs-detail-table-head,
.location-card-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-sm);
}
.contest-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: #eef4ff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.contest-title {
font-size: 18px;
font-weight: 500;
}
.contest-sub,
.job-date,
.job-sub {
color: var(--color-light-gray);
font-size: var(--font-size-sm);
}
.contest-desc {
margin: var(--spacing-sm) 0 var(--spacing-md);
color: var(--color-black);
display: -webkit-box;
line-clamp: 2;
overflow: hidden;
white-space: normal;
}
.contest-deadline,
.video-interviu-date {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
color: var(--color-light-gray);
font-size: var(--font-size-sm);
}
.contest-cta,
.job-cta {
background: var(--color-primary-dark);
color: var(--color-white);
padding: 8px 14px;
border-radius: 10px;
font-weight: 600;
}
.job-card,
.network-card {
background: var(--color-white);
}
.looper-round {
position: absolute;
top: 0;
width: 100%;
height: 100%;
inset: 0;
pointer-events: none;
}
.looper-round svg {
position: absolute;
bottom: 0;
}
.looper-round svg path {
opacity: 0.18;
stroke-linecap: round;
stroke-dasharray: 420 240;
stroke-dashoffset: 0;
animation-name: looperPath, looperDash;
animation-duration: 10s, 26s;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1), linear;
animation-iteration-count: infinite, infinite;
animation-direction: alternate, normal;
animation-fill-mode: both;
will-change: opacity, stroke-dashoffset;
}
@keyframes looperPath {
0%,
100% {
opacity: 0.14;
}
50% {
opacity: 0.48;
}
}
@keyframes looperDash {
0% {
stroke-dashoffset: 300;
}
100% {
stroke-dashoffset: -500;
}
}
.looper-round svg path:first-child {
animation-delay: 0s, 0s;
}
.looper-round svg path:nth-child(2) {
animation-delay: -0.1s, -0.1s;
}
.looper-round svg path:nth-child(3) {
animation-delay: -0.2s, -0.2s;
}
.looper-round svg path:nth-child(4) {
animation-delay: -0.3s, -0.3s;
}
.looper-round svg path:nth-child(5) {
animation-delay: -0.4s, -0.4s;
}
.looper-round svg path:nth-child(6) {
animation-delay: -0.5s, -0.5s;
}
.looper-round svg path:nth-child(7) {
animation-delay: -0.6s, -0.6s;
}
.looper-round svg path:nth-child(8) {
animation-delay: -0.7s, -0.7s;
}
.looper-round svg path:nth-child(9) {
animation-delay: -0.8s, -0.8s;
}
.looper-round svg path:nth-child(10) {
animation-delay: -0.9s, -0.9s;
}
.looper-round svg path:nth-child(11) {
animation-delay: -1s, -1s;
}
.looper-round svg path:nth-child(12) {
animation-delay: -1.1s, -1.1s;
}
.looper-round svg path:nth-child(13) {
animation-delay: -1.2s, -1.2s;
}
.looper-round svg path:nth-child(14) {
animation-delay: -1.3s, -1.3s;
}
.looper-round svg path:nth-child(15) {
animation-delay: -1.4s, -1.4s;
}
.looper-round svg path:nth-child(16) {
animation-delay: -1.5s, -1.5s;
}
.looper-round svg path:nth-child(17) {
animation-delay: -1.6s, -1.6s;
}
.looper-round svg path:nth-child(18) {
animation-delay: -1.7s, -1.7s;
}
.looper-round svg path:nth-child(19) {
animation-delay: -1.8s, -1.8s;
}
.looper-round svg path:nth-child(20) {
animation-delay: -1.9s, -1.9s;
}
.looper-round svg path:nth-child(21) {
animation-delay: -2s, -2s;
}
@media (max-width: 992px) {
.contest-card {
flex-basis: calc(50% - var(--spacing-md));
}
}
.jobs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xs);
}
.job-header,
.job-top {
gap: var(--spacing-sm);
display: flex;
}
.job-card {
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-xl);
padding: var(--spacing-md);
}
.job-header {
width: 100%;
align-items: center;
justify-content: space-between;
}
.job-top {
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
}
.job-title {
font-size: 18px;
font-weight: 500;
color: var(--color-black);
}
.job-tags {
display: flex;
flex-wrap: wrap;
column-gap: var(--spacing-sm);
row-gap: var(--spacing-xs);
margin: var(--spacing-sm) 0;
}
.jobs-results-head {
margin: var(--spacing-xl) 0 var(--spacing-sm);
color: var(--color-gray);
}
.job-tag,
.network-text {
font-size: var(--font-size-sm);
color: var(--color-black);
}
.job-tag {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
}
.job-tag svg {
height: 12px;
width: auto;
}
.contact-form-button:hover svg path,
.job-tag svg path {
fill: var(--color-black);
}
.contact-form-icon svg path,
.contact-icon svg path,
.contact-phone-icon svg path,
.filter-chip--datepicker.selected svg path,
.location-card.active .location-icon svg path {
fill: var(--color-primary-dark);
}
.jobs-page-section .jobs-grid {
grid-template-columns: repeat(3, 1fr);
}
.jobs-page-section .jobs-col {
display: contents;
}
.stats-grid {
display: flex;
justify-content: space-between;
gap: var(--spacing-sm);
}
.stat-image,
.stats-grid--secondary {
flex-grow: 1;
width: 33.333%;
}
.stat-image {
position: relative;
aspect-ratio: 1/1;
padding: var(--spacing-lg);
}
.stat-image-overlay {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
object-fit: cover;
object-position: center;
z-index: 0;
}
.stat-image-bg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;
object-position: bottom;
z-index: 1;
}
.stat-card {
border-radius: var(--border-radius-lg);
overflow: hidden;
}
.stat-card.stat-outline {
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-lg);
}
.file-upload-label:hover .file-upload-button-text,
.main-filters-row .filter-chip.active .filter-chip__label,
.secondary-filters-row .filter-chip.selected .filter-chip__label,
.stat-card.stat-solid,
.stats-grid .stat-content--light .stat-value {
color: var(--color-white);
}
.stat-card.stat-outline.stat-dotted {
border: 1px dashed var(--color-light-border);
border-radius: var(--border-radius-lg);
}
.stat-card.stat-solid {
background: linear-gradient(155deg, #2D2E83 15.91%, #0A0A1D 99.01%);
border: none;
}
.stat-card .stat-content {
position: relative;
z-index: 20;
}
.stats-grid--secondary > * {
height: 50%;
}
.news-filters,
.stats-grid--secondary .stat-card-group {
display: flex;
flex-direction: row;
gap: var(--spacing-sm);
}
.stats-grid--secondary .stat-card {
padding: 24px;
}
.stats-grid--secondary .stat-card-group .stat-card {
flex-grow: 1;
aspect-ratio: 1/1;
flex: 1 0 0;
}
.stats-grid .stat-label {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--color-primary-dark);
}
.stats-grid--secondary .stat-card.stat-solid .stat-label {
color: #fff;
}
.stats-grid .stat-value {
font-size: 50px;
font-weight: 700;
}
.stats-grid .stat-value--dark {
color: var(--color-primary-dark-black);
}
.network-row {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
width: 100%;
}
.network-row.row-6 .network-card {
flex: 1 1 calc((100% - 5 * var(--spacing-sm)) / 6);
min-width: 0;
max-width: calc((100% - 5 * var(--spacing-sm)) / 6);
}
.network-row.row-5 .network-card {
flex: 1 1 calc((100% - 4 * var(--spacing-sm)) / 5);
min-width: 0;
max-width: calc((100% - 4 * var(--spacing-sm)) / 5);
}
.network-row.row-4 .network-card {
flex: 1 1 calc((100% - 3 * var(--spacing-sm)) / 4);
min-width: 0;
max-width: calc((100% - 3 * var(--spacing-sm)) / 4);
}
.network-card {
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-md);
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-md);
}
.network-grid:has(.network-card:hover) .network-card {
opacity: 0.5;
filter: blur(1px);
transform: scale(0.98);
}
.network-card img {
max-width: 160px;
max-height: 54px;
width: auto;
height: auto;
object-fit: contain;
}
.network-text {
flex: 1;
font-weight: 600;
line-height: 1.3;
}
.network-sub,
.network-sub-small {
font-weight: 400;
color: var(--color-gray);
}
.network-sub {
font-size: 12px;
margin-top: 2px;
}
.network-sub-small {
font-size: 11px;
margin-bottom: 4px;
}
.report-card {
position: relative;
background: var(--color-primary-dark);
padding: var(--spacing-xl) 0;
border-radius: var(--border-radius-xl);
overflow: hidden;
}
.report-input,
.report-row--with-button {
background: var(--color-white);
color: var(--color-black);
}
.report-card .section-title--light {
font-size: var(--font-size-xl);
text-align: center;
margin-bottom: var(--spacing-md);
}
.report-form {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
position: relative;
z-index: 1;
max-width: 900px;
margin: 0 auto;
}
.contact-form-row,
.map-container,
.news-detail-share-buttons,
.report-row,
.report-row--two {
display: flex;
gap: var(--spacing-sm);
}
.report-row--with-button {
display: flex;
flex-direction: row;
border-radius: 18px;
font-size: 16px;
overflow: hidden;
padding: var(--spacing-sm);
}
.report-button,
.report-input {
padding: var(--spacing-sm) var(--spacing-md);
font-size: 16px;
transition: var(--transition-base);
font-family: var(--font-family-base);
}
.report-problem textarea {
background: 0 0;
border: none;
font-size: 16px;
font-family: var(--font-family-base);
transition: var(--transition-base);
resize: none;
width: 100%;
height: 48px;
}
.report-input {
width: 100%;
border: none;
height: 72px;
border-radius: 18px;
}
.report-input::placeholder,
.report-textarea::placeholder {
color: var(--color-light-gray);
}
.report-input:focus,
.report-textarea:focus,
.search-overlay-input:focus {
outline: 0;
}
.report-button {
border: none;
border-radius: var(--border-radius-md);
background: var(--color-primary-dark);
color: var(--color-white);
font-weight: 600;
cursor: pointer;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 6px;
}
.sponsor-card,
.sponsors {
background: var(--color-white);
}
.report-problem .topology {
position: absolute;
z-index: 1;
}
.report-problem .topology--left {
left: 0;
bottom: 0;
height: 213px;
}
.report-problem .topology--right {
right: 0;
top: 0;
}
.sponsors {
padding: 0 0 var(--spacing-xl) 0;
}
.sponsors-track {
display: flex;
gap: var(--spacing-sm);
animation: 30s linear infinite sponsorScroll;
width: fit-content;
}
.sponsors .sponsors-track:hover {
animation-play-state: paused;
transition: var(--transition-base);
}
.sponsors-track:has(.sponsor-card:hover) .sponsor-card {
opacity: 0.5;
filter: blur(1px);
transform: scale(0.98);
}
.sponsors-slide {
display: flex;
gap: var(--spacing-sm);
flex-shrink: 0;
}
.sponsor-card {
flex: 0 0 auto;
width: 175px;
height: 75px;
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-xs) var(--spacing-sm);
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-md);
transition: var(--transition-base);
}
.sponsor-card img {
width: 100%;
height: 100%;
object-fit: contain;
}
@keyframes sponsorScroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-50% - var(--spacing-sm)));
}
}
.search-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-primary-light);
z-index: 9999;
display: none;
opacity: 0;
transition: opacity 0.3s;
overflow-y: auto;
}
.search-overlay.active {
display: block;
opacity: 1;
}
.search-overlay-close {
position: fixed;
top: var(--spacing-md);
right: var(--spacing-md);
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 8.4px;
cursor: pointer;
z-index: 10000;
transition: var(--transition-base);
color: var(--color-white);
}
.search-overlay-close:hover {
background-color: var(--color-primary-dark);
color: var(--color-white);
transform: scale(1.1);
}
.search-overlay-container {
max-width: 784px;
margin: 0 auto;
margin-top: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
max-height: calc(100vh - 2 * var(--spacing-lg));
display: flex;
flex-direction: column;
overflow: hidden;
}
.search-overlay-header {
margin-bottom: var(--spacing-sm);
text-align: center;
}
.search-overlay-title {
font-size: var(--font-size-xl);
color: var(--color-white);
font-weight: 600;
}
.search-overlay-subtitle {
font-size: var(--font-size-sm);
color: var(--color-white);
}
.search-overlay-input-wrapper {
position: relative;
margin-bottom: var(--spacing-sm);
}
.search-overlay-input {
width: 100%;
height: 50px;
padding: var(--spacing-md) 60px var(--spacing-md) var(--spacing-md);
font-size: var(--font-size-base);
font-family: var(--font-family-base);
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-md);
background-color: var(--color-white);
color: var(--color-black);
transition: var(--transition-base);
outline: 0;
}
.search-overlay-submit,
.search-result-action {
border: none;
cursor: pointer;
transition: var(--transition-base);
}
.search-overlay-input::placeholder {
color: var(--color-light-gray);
}
.search-overlay-submit {
position: absolute;
right: var(--spacing-sm);
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
color: var(--color-primary-dark);
}
.search-results-title,
.search-results-view-all {
font-size: var(--font-size-sm);
color: var(--color-light-gray);
}
.search-overlay-results {
display: flex;
flex-direction: column;
background: var(--color-white);
border-radius: var(--border-radius-md);
padding: var(--spacing-md);
gap: var(--spacing-sm);
max-height: 600px;
overflow-y: auto;
overflow-x: hidden;
flex-shrink: 1;
min-height: 0;
scrollbar-width: thin;
scrollbar-color: var(--color-light-border) #f5f7fa;
}
.search-overlay-results::-webkit-scrollbar {
width: 10px;
}
.search-overlay-results::-webkit-scrollbar-track {
background: #f5f7fa;
border-radius: var(--border-radius-sm);
margin: 4px 0;
}
.search-overlay-results::-webkit-scrollbar-thumb {
background: var(--color-light-border);
border-radius: var(--border-radius-sm);
border: 2px solid #f5f7fa;
transition: background 0.2s;
}
.search-overlay-results::-webkit-scrollbar-thumb:hover {
background: var(--color-primary-light);
border: 2px solid #f5f7fa;
}
.search-overlay-results::-webkit-scrollbar-thumb:active {
background: var(--color-primary-dark);
}
.search-results-header,
.search-results-section-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.search-results-title {
font-weight: 500;
}
.search-results-view-all {
text-decoration: none;
transition: var(--transition-base);
}
.search-results-section {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin: var(--spacing-sm) 0;
}
.search-results-section-title {
font-size: var(--font-size-md);
font-weight: 600;
color: var(--color-primary-dark);
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: var(--spacing-xs);
}
.search-results-count {
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-light-gray);
border-radius: 4px;
font-weight: 500;
font-size: var(--font-size-xs);
color: var(--color-white);
}
.search-result-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
transition: var(--transition-base);
}
.search-result-icon {
width: 45px;
height: 45px;
border-radius: var(--border-radius-sm);
border: 1px solid var(--color-light-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary-dark);
}
.search-result-icon svg {
height: 20px;
width: auto;
}
.search-result-image {
width: 45px;
height: 45px;
border-radius: var(--border-radius-sm);
overflow: hidden;
flex-shrink: 0;
}
.popular-article-image img,
.resource-media img,
.search-result-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.search-result-content {
flex: 1;
min-width: 0;
}
.search-result-title {
font-weight: 500;
color: var(--color-black);
margin-bottom: 4px;
-webkit-line-clamp: 1;
line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.breadcrumbs,
.contact-title {
margin-bottom: var(--spacing-sm);
}
.search-result-title-row {
display: flex;
align-items: center;
gap: var(--spacing-sm);
flex-wrap: wrap;
}
.breadcrumbs,
.resource-tags,
.search-result-meta,
.search-result-tags {
gap: var(--spacing-xs);
display: flex;
}
.search-result-meta {
font-size: var(--font-size-xs);
color: var(--color-gray);
align-items: center;
flex-wrap: wrap;
}
.search-result-label {
font-weight: 500;
}
.resource-tags,
.search-result-tags {
flex-wrap: wrap;
}
.search-result-tag {
color: 4F5E72;
text-decoration: none;
transition: var(--transition-base);
border-radius: 4px;
background-color: #dbeafe;
padding: 4px 8px;
}
.search-result-action {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
flex-shrink: 0;
border-radius: var(--border-radius-sm);
transform: var(--transition-base);
}
.location-card.active .contact-icon,
.search-result-button {
background-color: var(--color-primary-dark);
}
.popup-close,
.search-result-button {
border: none;
transition: var(--transition-base);
cursor: pointer;
}
.search-result-action:hover {
background-color: #a8d0ff2b;
}
.search-result-button {
padding: var(--spacing-sm);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-white);
border-radius: var(--border-radius-sm);
white-space: nowrap;
}
.search-result-button:hover {
background-color: var(--color-primary-light);
}
.breadcrumbs {
align-items: center;
font-size: var(--font-size-sm);
}
.contact-card,
.contact-form-header,
.contact-grid,
.locations-list {
gap: var(--spacing-sm);
}
.breadcrumb-link {
color: var(--color-gray);
text-decoration: none;
transition: var(--transition-base);
}
.contact-form-link:hover,
.contact-intro,
.contact-text,
.popup-close:hover {
color: var(--color-black);
}
.contact-title {
font-size: var(--font-size-xl);
font-weight: 700;
}
.contact-grid {
display: flex;
flex-wrap: wrap;
margin: var(--spacing-lg) 0;
}
.contact-card {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-md);
background: var(--color-white);
transition: var(--transition-base);
}
.contact-text {
font-weight: 500;
flex: 1;
}
.contact-icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
aspect-ratio: 1/1;
border-radius: 50%;
background: #e6f0ff;
color: var(--color-primary-dark);
}
.contact-map,
.map-wrapper {
border-radius: var(--border-radius-lg);
}
.contact-icon svg {
width: 22px;
height: 22px;
}
.contact-form-icon svg,
.location-icon svg {
width: 24px;
height: 24px;
}
@media (max-width: 992px) {
.jobs-grid {
grid-template-columns: 1fr;
}
.contact-item {
flex-basis: calc(50% - var(--spacing-sm));
}
}
.map-wrapper {
width: 75%;
overflow: hidden;
}
.contact-map {
display: flex;
flex: 1 0 0;
width: 100%;
height: 493px;
}
.marker-pin::before,
.popup-close {
width: 30px;
height: 30px;
position: absolute;
}
.locations-list {
flex: 1;
display: flex;
flex-direction: column;
align-self: stretch;
}
.location-card {
min-width: 260px;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--color-white);
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-md);
padding: 0 var(--spacing-md);
cursor: pointer;
transition: var(--transition-base);
}
.department-item:hover,
.location-card:hover {
border-color: var(--color-primary-light);
}
.location-card.active {
border-color: var(--color-primary-dark);
border-width: 2px;
}
.location-icon svg {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--transition-base);
}
.custom-popup .leaflet-popup-content-wrapper {
border-radius: var(--border-radius-md);
padding: 0;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.custom-popup .leaflet-popup-content {
margin: 0;
padding: 0;
}
.map-popup {
padding: var(--spacing-sm) var(--spacing-md);
position: relative;
min-width: 250px;
}
.popup-close {
top: var(--spacing-xs);
right: var(--spacing-xs);
background: 0 0;
font-size: 24px;
color: var(--color-gray);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius-sm);
line-height: 1;
}
.popup-address,
.popup-hours {
font-size: var(--font-size-sm);
}
.popup-close:hover {
background: #f0f0f0;
}
.popup-title {
font-weight: 700;
color: var(--color-primary-dark);
}
.jobs-page-intro,
.popup-address,
.popup-hours {
color: var(--color-gray);
}
.leaflet-popup-content p {
margin: var(--spacing-xs) 0 !important;
}
.popup-hours {
margin: 0;
}
.custom-marker {
background: 0 0;
border: none;
}
.marker-pin {
width: 30px;
height: 40px;
position: relative;
}
.marker-pin::before {
content: "";
background: var(--color-primary-light);
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
border: 3px solid var(--color-white);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.marker-pin::after {
content: "";
position: absolute;
top: 8px;
left: 8px;
width: 10px;
height: 10px;
background: var(--color-white);
border-radius: 50%;
}
.main-marker .marker-pin::before {
background: var(--color-primary-dark);
}
.jobs-page-section,
.news-detail-section,
.news-page-section,
.resources-page-section {
padding: var(--spacing-lg) 0;
background: var(--color-white);
}
.jobs-page-title,
.news-detail-title {
font-size: var(--font-size-xl);
font-weight: 600;
margin-bottom: var(--spacing-sm);
}
.contact-form-header,
.jobs-page-header {
margin-bottom: var(--spacing-lg);
}
.jobs-page-intro {
font-size: var(--font-size-base);
line-height: 1.6;
margin-top: var(--spacing-sm);
}
.contact-form-section {
padding: var(--spacing-lg) 0 var(--spacing-xl) 0;
background: var(--color-white);
}
.contact-form-card {
position: relative;
background: var(--color-primary-light);
padding: var(--spacing-lg);
border-radius: var(--border-radius-xl);
overflow: hidden;
}
.contact-form-header {
display: flex;
align-items: center;
position: relative;
z-index: 2;
}
.contact-form-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background: var(--color-white);
border-radius: 50%;
flex-shrink: 0;
}
.contact-form-title {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--color-white);
margin: 0;
}
.contact-form {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
position: relative;
z-index: 2;
max-width: 100%;
}
.contact-form-row--four {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-sm);
}
.contact-form-label {
font-size: var(--font-size-md);
font-weight: 500;
color: var(--color-white);
}
.contact-form-input,
.contact-form-input[type="file"],
.contact-form-input[type="file"]::-webkit-file-upload-button,
.contact-form-textarea {
width: 100%;
padding: var(--spacing-sm);
border: none;
border-radius: var(--border-radius-md);
background: var(--color-white);
color: var(--color-black);
font-size: var(--font-size-base);
font-family: var(--font-family-base);
transition: var(--transition-base);
}
.contact-form-input {
height: 48px;
}
.file-upload-wrapper {
font-family: var(--font-family-base);
position: relative;
width: 100%;
}
.file-upload-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
opacity: 0;
}
.file-upload-label,
.file-upload-preview-content {
padding: var(--spacing-md);
background: var(--color-white);
display: flex;
}
.file-upload-label {
align-items: center;
gap: var(--spacing-md);
width: 100%;
min-height: 120px;
border: 2px dashed var(--color-light-border);
border-radius: var(--border-radius-md);
cursor: pointer;
transition: var(--transition-base);
position: relative;
overflow: hidden;
}
.file-upload-label:hover {
border-color: var(--color-light-border);
background: 0 0;
}
.file-upload-label:active {
transform: scale(0.98);
}
.file-upload-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius-sm);
color: var(--color-primary-light);
transition: var(--transition-base);
}
.file-upload-label:hover .file-upload-icon {
background: var(--color-white);
transform: scale(1.05);
}
.anticorruption-contact-info,
.file-upload-text {
display: flex;
flex-direction: column;
gap: 0.25rem;
flex: 1;
}
.file-upload-button-text {
font-size: var(--font-size-base);
font-weight: 500;
color: var(--color-primary-dark);
transition: var(--transition-base);
}
.file-upload-hint,
.file-upload-preview-size {
font-size: var(--font-size-sm);
color: var(--color-light-gray);
}
.file-upload-preview {
margin-top: var(--spacing-sm);
animation: slideDown var(--transition-base);
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.file-upload-preview-content {
align-items: center;
gap: var(--spacing-md);
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-md);
}
.file-upload-preview-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 119, 255, 0.1);
border-radius: var(--border-radius-sm);
color: var(--color-primary-light);
}
.file-upload-preview-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
flex: 1;
min-width: 0;
}
.file-upload-preview-name {
font-size: var(--font-size-base);
font-weight: 500;
color: var(--color-primary-dark);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-upload-remove {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: 0 0;
border: none;
border-radius: var(--border-radius-sm);
cursor: pointer;
color: var(--color-light-gray);
transition: var(--transition-base);
padding: 0;
}
.file-upload-remove:hover {
background: rgba(255, 0, 0, 0.1);
color: #dc3545;
}
.file-upload-remove svg,
.orders-apply-btn span svg {
width: 16px;
height: 16px;
}
.file-upload-label.drag-over {
border-color: var(--color-primary-light);
background: rgba(0, 119, 255, 0.05);
border-style: solid;
}
.file-upload-label.drag-over .file-upload-icon {
background: rgba(0, 119, 255, 0.2);
transform: scale(1.1);
}
.anticorruption-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-lg);
margin-top: var(--spacing-lg);
}
@media (max-width: 1024px) {
.anticorruption-layout {
grid-template-columns: 1fr;
}
}
.anticorruption-info-content {
background: var(--color-white);
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-lg);
padding: var(--spacing-lg);
position: relative;
}
.anticorruption-info-title {
font-size: var(--font-size-lg);
font-weight: 700;
margin-bottom: var(--spacing-sm);
}
.anticorruption-info-text {
color: var(--color-black);
line-height: 1.8;
font-size: var(--font-size-base);
}
.anticorruption-info-text p {
margin-bottom: var(--spacing-md);
}
.anticorruption-info-text p:last-child,
.news-detail-content p:last-child {
margin-bottom: 0;
}
.anticorruption-signature {
margin-top: var(--spacing-lg);
padding-top: var(--spacing-md);
border-top: 1px solid var(--color-light-border);
}
.anticorruption-contact-blocks,
.anticorruption-right-side,
.jobs-detail-main {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.anticorruption-contact-block {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: var(--color-primary-light);
border-radius: var(--border-radius-lg);
text-decoration: none;
transition: var(--transition-base);
color: var(--color-white);
border: 1px solid transparent;
}
.anticorruption-contact-block:hover {
background: var(--color-primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 119, 255, 0.2);
}
.anticorruption-contact-icon {
flex-shrink: 0;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
}
.anticorruption-contact-icon svg {
width: 24px;
height: 24px;
fill: var(--color-white);
}
.anticorruption-contact-label {
font-size: var(--font-size-sm);
opacity: 0.9;
font-weight: 500;
}
.anticorruption-contact-value {
font-size: var(--font-size-md);
font-weight: 600;
}
.anticorruption-right-side .contact-form-card {
flex: 1;
}
.contact-form-button,
.contact-form-checkbox-label {
font-size: var(--font-size-sm);
color: var(--color-white);
}
select.contact-form-input {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23171c70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--spacing-sm) center;
padding-right: calc(var(--spacing-md) + 20px);
}
.contact-form-textarea {
min-height: 120px;
width: 100%;
resize: none;
}
.contact-form-input::placeholder,
.contact-form-textarea::placeholder {
color: var(--color-light-gray);
}
.contact-form-input:focus,
.contact-form-textarea:focus {
outline: 0;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}
.contact-form-footer {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: var(--spacing-lg);
margin-top: var(--spacing-sm);
}
.contact-form-checkbox-wrapper {
display: flex;
align-items: center;
gap: var(--spacing-xs);
flex: 1;
}
.contact-form-checkbox {
width: 20px;
height: 20px;
border: 2px solid var(--color-white);
border-radius: var(--border-radius-sm);
background: 0 0;
cursor: pointer;
appearance: none;
position: relative;
flex-shrink: 0;
transition: var(--transition-base);
}
.contact-form-button,
.departments-section .department-header {
align-items: center;
transition: var(--transition-base);
cursor: pointer;
}
.contact-form-checkbox:checked,
.orders-item:hover,
.secondary-filters-row .filter-chip.selected {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
}
.contact-form-checkbox:checked::after {
content: url('data:image/svg+xml;utf8,');
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--color-white);
}
.contact-form-checkbox-label {
cursor: pointer;
line-height: 1.5;
}
.contact-form-link {
color: var(--color-white);
font-weight: 700;
transition: var(--transition-base);
}
.contact-form-button {
padding: 0 var(--spacing-md);
border: none;
border-radius: var(--border-radius-md);
background: var(--color-primary-dark);
font-weight: 700;
line-height: 48px;
white-space: nowrap;
display: inline-flex;
gap: var(--spacing-xs);
}
.contact-form-button:hover {
background: var(--color-white);
color: var(--color-black);
}
.contact-form-decorative {
position: absolute;
bottom: 0;
right: 0;
pointer-events: none;
}
.contact-form-decorative svg {
width: 100%;
height: 100%;
transform: rotate(180deg) scaleX(-1) translateY(-5px);
}
@media (max-width: 992px) {
.contact-form-card {
padding: var(--spacing-lg) var(--spacing-md);
}
.contact-form-row--four {
grid-template-columns: repeat(2, 1fr);
}
.contact-form-footer {
flex-direction: column;
align-items: stretch;
}
.contact-form-button {
width: 100%;
justify-content: center;
}
}
@media (max-width: 576px) {
.contact-item,
.contest-card {
flex-basis: 100%;
}
.contact-form-row--four {
grid-template-columns: 1fr;
}
.contact-form-header {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-sm);
}
.contact-form-icon {
width: 50px;
height: 50px;
}
.contact-form-icon svg {
width: 28px;
height: 28px;
}
.contact-form-title {
font-size: var(--font-size-lg);
}
.contact-form-decorative {
width: 150px;
height: 220px;
}
}
.departments-section {
padding: 0 0 var(--spacing-xl) 0;
}
.section-title--departments {
text-align: center;
margin-bottom: var(--spacing-lg);
}
.department-item {
background: var(--color-white);
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-xl);
overflow: hidden;
transition: var(--transition-base);
padding: var(--spacing-md);
}
.department-item.is-open {
border-style: dashed;
border-color: var(--color-light-border);
}
.departments-section .department-header {
width: 100%;
display: flex;
justify-content: space-between;
background: var(--color-white) !important;
border: none;
text-align: left;
}
.department-header:hover {
background: rgba(0, 119, 255, 0.02);
}
.department-header-left {
display: flex;
align-items: center;
gap: var(--spacing-sm);
flex: 1;
}
.department-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: #dbeafe;
border-radius: 50%;
flex-shrink: 0;
}
.department-icon svg {
width: auto;
height: 20px;
}
.department-name {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--color-black);
}
.department-chevron {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
transition: var(--transition-base);
flex-shrink: 0;
}
.department-chevron svg {
width: 14px;
height: 8px;
transition: var(--transition-base);
}
.department-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.department-item.is-open .department-content {
max-height: 2000px;
}
.department-contacts {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--spacing-sm);
padding-top: var(--spacing-lg);
}
.department-contact-card {
min-width: 410px;
flex: 1 auto;
background: var(--color-white);
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-md);
padding: var(--spacing-md);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--spacing-xs);
transition: var(--transition-base);
}
.department-contact-card .contact-separator {
width: 1px;
height: 100%;
background: var(--color-light-border);
margin: 0 var(--spacing-xs);
}
.department-contact-card:hover {
border-color: var(--color-primary-light);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.contact-phone,
.secondary-filters-row .filter-chip.is-open .values-list.datepicker-container {
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.contact-phone-icon svg {
height: 12px !important;
width: 16px;
}
.contact-phone-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.contact-phone-number,
.secondary-filters-row .filter-chip__label {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-black);
}
.main-filters-row {
display: flex;
gap: var(--spacing-sm);
margin: var(--spacing-lg) 0 var(--spacing-sm);
}
.leadership-section,
.leadership-section:first-of-type,
.orders-results,
.orders-toolbar,
.resources-grid,
.video-container {
margin-top: var(--spacing-lg);
}
.main-filters-row .filter-chip {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm)
var(--spacing-md);
border-radius: 20px;
background: var(--color-white);
border: 1px solid var(--color-light-border);
cursor: pointer;
}
.main-filters-row .filter-chip.active {
background: var(--color-primary-dark);
color: var(--color-white);
border-color: var(--color-primary-dark);
}
.main-filters-row .filter-chip.active .filter-chip__badge,
.secondary-filters-row .filter-chip.selected .filter-chip__badge {
background: var(--color-white);
color: var(--color-primary-dark);
}
.main-filters-row .filter-chip__label {
text-align: left;
font-weight: 600;
color: var(--color-black);
}
.main-filters-row .filter-chip__badge {
width: 55px;
height: 55px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: var(--color-primary-dark);
color: var(--color-white);
font-size: var(--font-size-lg);
}
.secondary-filters-row {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
align-items: center;
}
.secondary-filters-row .filter-chip {
width: fit-content;
flex: 1 1 auto;
min-height: 44px;
padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs)
var(--spacing-sm);
border-radius: var(--border-radius-md);
background: var(--color-white);
border: 1px solid var(--color-light-border);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-xs);
transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.secondary-filters-row .filter-chip.is-open {
border: 1px dashed var(--color-light-border);
transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.secondary-filters-row .filter-chip.is-open .filter-chip__badge {
display: none;
opacity: 0;
transform: scale(0);
transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.secondary-filters-row .filter-chip .values-list {
display: none;
flex-direction: row;
gap: var(--spacing-xs);
max-width: 0;
opacity: 0;
overflow: hidden;
transition: max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
margin-left: 0;
flex-shrink: 0;
}
.secondary-filters-row .filter-chip .datepicker-input,
.secondary-filters-row .filter-chip.is-open .values-list .value-item {
height: 32px;
padding: 0 var(--spacing-sm);
transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
transform: translateX(-10px);
animation: 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards slideInRight;
background: var(--color-white);
cursor: pointer;
}
.secondary-filters-row .filter-chip.is-open .values-list {
display: flex;
max-width: 2000px;
opacity: 1;
margin-left: var(--spacing-xs);
transition: max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-filters-row button,
.secondary-filters-row button {
font-family: var(--font-family-base);
}
.secondary-filters-row .filter-chip.is-open .values-list .value-item {
width: auto;
border-radius: 6px;
border: 1px solid var(--color-light-border);
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
}
.secondary-filters-row
.filter-chip.is-open
.values-list
.value-item:first-child {
animation-delay: 50ms;
}
.secondary-filters-row
.filter-chip.is-open
.values-list
.value-item:nth-child(2) {
animation-delay: 0.1s;
}
.secondary-filters-row
.filter-chip.is-open
.values-list
.value-item:nth-child(3) {
animation-delay: 0.15s;
}
.secondary-filters-row
.filter-chip.is-open
.values-list
.value-item:nth-child(4) {
animation-delay: 0.2s;
}
.secondary-filters-row
.filter-chip.is-open
.values-list
.value-item:nth-child(5) {
animation-delay: 0.25s;
}
.secondary-filters-row
.filter-chip.is-open
.values-list
.value-item:nth-child(6) {
animation-delay: 0.3s;
}
.secondary-filters-row
.filter-chip.is-open
.values-list
.value-item:nth-child(n + 7) {
animation-delay: 0.35s;
}
.secondary-filters-row .filter-chip.is-open .values-list .value-item:hover {
background: var(--color-primary-dark);
color: var(--color-white);
border-color: var(--color-primary-dark);
transform: translateY(-2px);
}
.secondary-filters-row .filter-chip.is-open .values-list .value-item.selected {
background: var(--color-primary-dark);
color: var(--color-white);
border-color: var(--color-white);
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(-10px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.secondary-filters-row .filter-chip .value-item.close {
display: none !important;
width: 32px !important;
height: 32px !important;
padding: 8px !important;
}
.secondary-filters-row .filter-chip.selected .value-item.close {
display: inline-flex !important;
}
.secondary-filters-row .filter-chip__badge {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: var(--color-primary-dark);
color: var(--color-white);
}
.secondary-filters-row .filter-chip .datepicker-input {
min-width: 400px;
border-radius: 6px;
border: 1px solid var(--color-light-border);
font-family: var(--font-family-base);
font-size: var(--font-size-sm);
color: var(--color-black);
animation-delay: 0.1s;
}
.filter-chip--orders-dropdown .filter-chip__badge svg path,
.filter-chip--orders-search .filter-chip__badge-icon svg path,
.jobs-detail-meta-item svg path,
.video-interviu-date svg path {
fill: var(--color-light-gray);
}
.orders-item:hover .orders-arrow,
.secondary-filters-row .filter-chip.is-open .datepicker-input {
opacity: 1;
transform: translateX(0);
}
.secondary-filters-row .filter-chip .datepicker-input:focus {
outline: 0;
border-color: var(--color-light-border);
}
.secondary-filters-row
.filter-chip
.datepicker-input::-webkit-calendar-picker-indicator {
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s;
}
.secondary-filters-row
.filter-chip
.datepicker-input::-webkit-calendar-picker-indicator:hover {
opacity: 1;
}
.secondary-filters-row .filter-chip.filter-chip--search {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
height: 44px;
transition: 0.25s;
}
.secondary-filters-row .filter-chip.filter-chip--search.selected {
background: var(--color-white);
border-color: var(--color-primary-light);
}
.secondary-filters-row .filter-chip.filter-chip--search .search-input:focus {
outline: 0;
border: none;
}
.secondary-filters-row .filter-chip.filter-chip--search .search-input {
min-width: 520px;
width: 100%;
flex: 1;
border-radius: var(--border-radius-md);
background: var(--color-white);
border: none;
font-family: var(--font-family-base);
font-size: 14px;
color: var(--color-dark-gray);
}
.filter-chip__badge-icon {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-white);
}
.orders-actions,
.orders-toolbar {
display: flex;
gap: var(--spacing-sm);
align-items: center;
}
.audience-page-section,
.audience-page-section .news-detail-meta-item,
.contests-page-section,
.jobs-details-section,
.orders-page-section {
padding: var(--spacing-lg) 0;
}
.orders-toolbar {
justify-content: space-between;
flex-wrap: wrap;
}
.orders-filters-left {
display: flex;
gap: var(--spacing-sm);
flex: 1 1 auto;
min-width: 0;
}
.orders-actions {
flex-shrink: 0;
}
.filter-chip--orders-search {
max-width: 520px;
min-width: 200px;
width: 100%;
height: 40px;
padding: 0 var(--spacing-md);
border-radius: var(--border-radius-md);
background: var(--color-white);
border: 1px solid var(--color-light-border);
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
}
.orders-search-input {
flex: 1;
height: 100%;
padding: 0;
border: none;
background: 0 0;
font-family: var(--font-family-base);
font-size: var(--font-size-md);
color: var(--color-dark-gray);
outline: 0;
}
.filter-chip--orders-dropdown,
.filter-chip--refresh {
border-radius: var(--border-radius-md);
height: 40px;
display: inline-flex;
}
.orders-search-input::placeholder {
color: var(--color-gray);
}
.filter-chip--orders-search .filter-chip__badge-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.filter-chip--orders-search .filter-chip__badge-icon svg {
width: 100%;
height: 100%;
}
.filter-chip--orders-dropdown {
padding: 0 var(--spacing-sm);
background: var(--color-white);
border: 1px solid var(--color-light-border);
align-items: center;
justify-content: space-between;
gap: var(--spacing-xs);
cursor: pointer;
transition: 0.2s;
}
.filter-chip--orders-dropdown:hover {
border-color: var(--color-primary-light);
}
.filter-chip--orders-dropdown .filter-chip__label {
font-size: var(--font-size-md);
font-weight: 400;
color: var(--color-gray);
flex: 1;
text-align: left;
}
.filter-chip--orders-dropdown .filter-chip__badge {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.filter-chip--orders-dropdown .filter-chip__badge svg {
height: 16px;
width: auto;
}
.filter-chip--refresh .filter-chip__badge-icon svg path,
.jobs-detail-contact-icon svg path,
.news-detail-share-button svg path,
.orders-icon svg path,
.video-modal-close svg path {
fill: var(--color-primary-dark);
}
.orders-toolbar .filter-chip .values-list {
display: none;
}
.orders-toolbar .filter-chip.is-open .values-list.datepicker-container {
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.orders-toolbar .filter-chip .datepicker-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
border: none;
background: 0 0;
}
.orders-toolbar .filter-chip.filter-chip--date {
position: relative;
min-width: 150px;
}
.orders-toolbar
.filter-chip
.datepicker-input::-webkit-calendar-picker-indicator {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.orders-toolbar .filter-chip .datepicker-input:focus {
outline: 0;
}
.orders-toolbar .filter-chip.filter-chip--number {
position: relative;
}
.orders-toolbar .filter-chip .orders-number-input {
flex: 1;
height: 100%;
padding: 0;
border: none;
background: 0 0;
font-family: var(--font-family-base);
font-size: var(--font-size-md);
font-weight: 400;
color: var(--color-gray);
outline: 0;
text-align: left;
}
.orders-toolbar .filter-chip .orders-number-input::placeholder {
color: var(--color-gray);
}
.orders-toolbar .filter-chip .orders-number-input:focus,
.orders-toolbar .filter-chip.filter-chip--number.selected .orders-number-input {
color: var(--color-black);
}
.news-filters .filter-chip.selected .filter-chip__label,
.orders-apply-btn,
.orders-item:hover .orders-text {
color: var(--color-white);
}
.filter-chip--refresh {
width: 40px;
padding: 0;
background: #dbeafe;
border: none;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.2s;
}
.news-filters .filter-chip,
.orders-apply-btn {
border-radius: var(--border-radius-md);
transition: 0.2s;
cursor: pointer;
}
.filter-chip--refresh.jobs-reset-btn {
max-width: 44px;
min-width: 44px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.filter-chip--refresh:hover {
background: #c7d2fe;
}
.filter-chip--refresh .filter-chip__badge-icon {
width: 24px;
height: 24px;
background: 0 0;
}
.filter-chip--refresh .filter-chip__badge-icon svg {
width: 100%;
height: 100%;
}
/* About page – Despre noi
-------------------------------------------------- */
.about-page-section {
padding: var(--spacing-lg) 0 var(--spacing-xl);
}
.about-page-header {
margin-bottom: var(--spacing-lg);
max-width: 840px;
}
.about-page-title {
font-size: clamp(2rem, 2.6vw, 2.4rem);
font-weight: 700;
color: var(--color-primary-dark);
margin-bottom: var(--spacing-sm);
}
.about-page-subtitle {
font-size: var(--font-size-md);
color: var(--color-gray);
line-height: 1.6;
}
.about-layout {
display: flex;
flex-direction: column;
gap: var(--spacing-xl);
}
.about-section {
background: #f7f9ff;
border-radius: var(--border-radius-xl);
padding: var(--spacing-lg);
border: 1px solid rgba(168, 208, 255, 0.4);
}
.about-section--grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--spacing-lg);
}
.about-section-header {
margin-bottom: var(--spacing-md);
}
.about-section-title {
font-size: 1.4rem;
font-weight: 600;
color: var(--color-primary-dark);
margin-bottom: 4px;
}
.about-section-subtitle {
font-size: var(--font-size-sm);
color: var(--color-gray);
}
.about-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: var(--spacing-lg);
align-items: flex-start;
}
.about-hero-text {
font-size: var(--font-size-md);
color: var(--color-black);
line-height: 1.7;
}
.about-hero-meta {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.about-hero-meta img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--border-radius-lg);
}
.about-kpi {
background: var(--color-white);
border-radius: var(--border-radius-lg);
padding: 10px 14px;
border: 1px solid rgba(168, 208, 255, 0.6);
}
.about-kpi-label {
display: block;
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-light-gray);
margin-bottom: 2px;
}
.about-kpi-value {
display: block;
font-size: var(--font-size-sm);
color: var(--color-primary-dark);
font-weight: 600;
}
.about-card {
background: var(--color-white);
border-radius: var(--border-radius-xl);
padding: var(--spacing-lg);
border: 1px solid rgba(168, 208, 255, 0.6);
box-shadow: 0 12px 32px rgba(16, 24, 40, 0.06);
}
.about-card-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--color-primary-dark);
margin-bottom: var(--spacing-sm);
}
.about-card-intro {
font-size: var(--font-size-sm);
color: var(--color-gray);
margin-bottom: var(--spacing-sm);
}
.about-list {
list-style: disc;
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 6px;
font-size: var(--font-size-sm);
color: var(--color-black);
}
.about-values-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--spacing-sm);
}
.about-value-pill {
background: var(--color-white);
border-radius: var(--border-radius-md);
padding: 10px 16px;
border: 1px solid rgba(168, 208, 255, 0.7);
display: flex;
flex-direction: column;
gap: 2px;
}
.about-value-label {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-primary-dark);
}
.about-value-caption {
font-size: var(--font-size-xs);
color: var(--color-gray);
}
.about-timeline {
position: relative;
margin-top: var(--spacing-md);
padding-left: 18px;
}
.about-timeline::before {
content: "";
position: absolute;
left: 4px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, var(--color-primary-light), rgba(0, 119, 255, 0.05));
}
.about-timeline-item {
position: relative;
padding-left: var(--spacing-sm);
padding-bottom: var(--spacing-sm);
}
.about-timeline-item:last-child {
padding-bottom: 0;
}
.about-timeline-item::before {
content: "";
position: absolute;
left: -2px;
top: 4px;
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--color-primary-light);
box-shadow: 0 0 0 4px rgba(0, 119, 255, 0.15);
}
.about-timeline-year {
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-light-gray);
margin-bottom: 2px;
}
.about-timeline-content p {
font-size: var(--font-size-sm);
color: var(--color-black);
line-height: 1.6;
}
.about-history-description {
margin-top: var(--spacing-lg);
padding-top: var(--spacing-lg);
border-top: 1px solid var(--color-light-border);
}
.about-history-text {
font-size: var(--font-size-base);
color: var(--color-black);
line-height: 1.7;
max-width: 900px;
}
.about-graduate-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--spacing-md);
margin-top: var(--spacing-md);
}
.about-graduate-card {
background: var(--color-white);
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-md);
padding: var(--spacing-md);
transition: box-shadow 0.2s ease;
}
.about-graduate-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.about-graduate-title {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--color-primary-dark);
margin-bottom: var(--spacing-xs);
line-height: 1.4;
}
.about-graduate-text {
font-size: var(--font-size-sm);
color: var(--color-gray);
line-height: 1.6;
margin: 0;
}
@media (max-width: 768px) {
.about-graduate-grid {
grid-template-columns: 1fr;
}
}
.about-facility-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--spacing-md);
margin-top: var(--spacing-md);
}
.about-facility-card {
background: var(--color-white);
border-radius: var(--border-radius-lg);
padding: var(--spacing-md);
border: 1px solid rgba(168, 208, 255, 0.7);
transition: var(--transition-base);
}
.about-facility-card:hover {
transform: translateY(-2px);
box-shadow: 0 18px 40px rgba(1, 40, 102, 0.1);
border-color: var(--color-primary-light);
}
.about-facility-title {
font-size: var(--font-size-md);
font-weight: 600;
color: var(--color-primary-dark);
margin-bottom: 4px;
}
.about-facility-text {
font-size: var(--font-size-sm);
color: var(--color-gray);
line-height: 1.6;
}
/* About page gallery (infinite carousel) */
.about-gallery {
overflow: hidden;
}
.about-gallery-track {
display: flex;
gap: var(--spacing-sm);
width: fit-content;
}
.about-gallery-slide {
display: flex;
gap: var(--spacing-sm);
flex-shrink: 0;
}
.about-gallery-card {
flex: 0 0 auto;
width: 260px;
height: 180px;
border-radius: var(--border-radius-lg);
overflow: hidden;
border: 1px solid rgba(168, 208, 255, 0.7);
box-shadow: 0 10px 25px rgba(1, 40, 102, 0.12);
background: #000;
}
.about-gallery-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.about-gallery-modal-open {
overflow: hidden;
}
.about-gallery-modal {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
z-index: 10000;
}
.about-gallery-modal.is-open {
display: flex;
}
.about-gallery-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
}
.about-gallery-modal-content {
position: relative;
max-width: min(1100px, 96vw);
max-height: 90vh;
border-radius: var(--border-radius-xl);
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
z-index: 1;
background: #000;
}
.about-gallery-modal-image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
}
.about-gallery-modal-close {
position: absolute;
top: 10px;
right: 10px;
width: 36px;
height: 36px;
border-radius: 999px;
border: none;
background: rgba(0, 0, 0, 0.65);
color: #fff;
font-size: 24px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-base);
}
.about-gallery-modal-close:hover {
background: rgba(0, 0, 0, 0.9);
}
@media (max-width: 1024px) {
.about-section--grid {
grid-template-columns: minmax(0, 1fr);
}
.about-hero-grid {
grid-template-columns: minmax(0, 1fr);
}
.about-hero-meta {
grid-row: 2;
}
.about-values-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.about-facility-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.about-page-section {
padding-top: var(--spacing-md);
}
.about-section {
padding: var(--spacing-md);
border-radius: var(--border-radius-lg);
}
.about-values-grid,
.about-facility-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.orders-apply-btn {
height: 40px;
padding: 0 var(--spacing-md);
background: var(--color-primary-dark);
border: none;
font-family: var(--font-family-base);
font-size: var(--font-size-md);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 8px;
}
.orders-arrow,
.orders-arrow svg,
.orders-arrow svg path,
.orders-icon,
.orders-icon svg,
.orders-icon svg path,
.orders-item,
.orders-link,
.orders-text,
.orders-text strong,
.resource-card {
transition: var(--transition-base);
}
.orders-apply-btn span {
display: inline-flex;
align-items: center;
justify-content: center;
}
.orders-total {
color: var(--color-gray);
margin-bottom: var(--spacing-sm);
}
/* Circulars List Styles */
.circulars-list {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.circular-item {
background: var(--color-white);
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-md);
padding: var(--spacing-md);
transition: box-shadow 0.2s ease;
}
.circular-item:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.circular-header {
margin-bottom: var(--spacing-md);
padding-bottom: var(--spacing-sm);
border-bottom: 1px solid var(--color-light-border);
}
.circular-title {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--color-black);
margin-bottom: var(--spacing-xs);
}
.circular-subtitle {
font-size: var(--font-size-base);
font-weight: 500;
color: var(--color-gray);
margin: 0;
}
.circular-meta {
font-size: var(--font-size-sm);
color: var(--color-gray);
margin: var(--spacing-xs) 0 0 0;
}
.circular-content {
font-size: var(--font-size-base);
line-height: 1.7;
color: var(--color-black);
}
.circular-content p {
margin-bottom: var(--spacing-sm);
}
.circular-content p:last-child {
margin-bottom: 0;
}
.circular-content h1,
.circular-content h2,
.circular-content h3,
.circular-content h4,
.circular-content h5,
.circular-content h6 {
margin-top: var(--spacing-md);
margin-bottom: var(--spacing-sm);
font-weight: 600;
color: var(--color-black);
}
.circular-content ul,
.circular-content ol {
margin-bottom: var(--spacing-sm);
padding-left: var(--spacing-lg);
}
.circular-content li {
margin-bottom: var(--spacing-xs);
}
.circular-content img {
max-width: 100%;
height: auto;
border-radius: var(--border-radius-sm);
margin: var(--spacing-sm) 0;
}
.circular-content table {
width: 100%;
border-collapse: collapse;
margin: var(--spacing-sm) 0;
}
.circular-content table th,
.circular-content table td {
padding: var(--spacing-xs);
border: 1px solid var(--color-light-border);
}
.circular-content table th {
background: var(--color-light-bg);
font-weight: 600;
}
@media (max-width: 768px) {
.circular-item {
padding: var(--spacing-sm);
}
.circular-title {
font-size: var(--font-size-base);
}
.circular-subtitle {
font-size: var(--font-size-sm);
}
}
.orders-item {
background: var(--color-white);
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-md);
overflow: hidden;
}
.orders-link {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: 10px 14px;
}
.orders-icon {
width: 50px;
height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #dbeafe;
flex-shrink: 0;
}
.orders-icon svg {
width: 20px;
height: 20px;
}
.orders-text {
flex: 1;
color: var(--color-black);
display: -webkit-box;
line-clamp: 2;
overflow: hidden;
white-space: normal;
}
.resource-card,
.resources-grid {
display: grid;
gap: var(--spacing-sm);
}
.orders-arrow {
justify-self: end;
opacity: 0;
transform: translateX(-8px);
flex-shrink: 0;
}
.orders-arrow svg {
width: 16px;
height: 16px;
}
.orders-arrow svg path {
fill: var(--color-white);
}
.orders-item:hover strong {
text-decoration-color: var(--color-white);
}
.orders-item:hover .orders-icon {
background: rgba(255, 255, 255, 0.15);
}
.resources-grid {
grid-template-columns: 1fr 1fr;
}
.resource-card {
grid-template-columns: auto 1fr;
padding: var(--spacing-sm);
background: var(--color-white);
border: 1px solid var(--color-light-border);
border-radius: 20px;
}
.resources-grid:has(.resource-card:hover) .resource-card {
opacity: 0.5;
filter: blur(1px);
transform: scale(0.98);
}
.resources-grid .resource-card:hover,
.video-interviuri-grid .video-interviu-card:hover {
opacity: 1 !important;
filter: none !important;
transform: scale(1.02) !important;
border-color: var(--color-primary-light);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.resource-media {
max-width: 186px;
width: 100%;
height: auto;
aspect-ratio: 3/4;
border-radius: var(--border-radius-sm);
overflow: hidden;
background: var(--color-light-gray);
}
.resource-body {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--spacing-xs);
}
.resource-body .resource-title,
.resource-excerpt {
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
white-space: normal;
overflow: hidden;
}
.news-toolbar,
.resource-meta {
align-items: center;
margin-top: var(--spacing-sm);
}
.resource-body .resource-title {
font-size: 18px;
font-weight: 700;
margin-bottom: var(--spacing-sm);
-webkit-line-clamp: 2;
line-clamp: 2;
}
.resource-excerpt {
color: var(--color-gray);
-webkit-line-clamp: 7;
line-clamp: 7;
}
.resource-meta {
display: flex;
gap: var(--spacing-xs);
flex-wrap: wrap;
}
.resource-label {
font-weight: 500;
color: var(--color-gray);
}
.resource-tags .search-result-tag {
background-color: #dbeafe;
border-radius: 8px;
padding: 6px 10px;
font-size: var(--font-size-sm);
}
.news-toolbar {
display: flex;
justify-content: space-between;
gap: var(--spacing-md);
}
.news-filters .filter-chip p {
white-space: nowrap;
font-family: var(--font-family-base);
}
.news-filters .filter-chip {
padding: 8px var(--spacing-sm);
background: var(--color-white);
border: 1px solid var(--color-light-border);
display: inline-flex;
align-items: center;
}
.contain-pagination .page-link,
.jobs-detail-apply-btn,
.jobs-detail-contact-link,
.leadership-card,
.news-detail-content a,
.news-detail-share-button,
.popular-article-card,
.video-interviu-card,
.video-modal-close,
.video-play-button {
transition: var(--transition-base);
}
.news-filters .filter-chip:hover {
border-color: var(--color-primary-light);
}
.news-filters .filter-chip .filter-chip__label {
font-size: var(--font-size-md);
font-weight: 400;
color: var(--color-gray);
}
.news-filters .filter-chip.selected {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
color: var(--color-white);
}
.news-search {
display: flex;
flex: 1;
justify-content: flex-end;
}
.news-search .filter-chip.filter-chip--orders-search {
width: 100%;
}
.news-detail-layout {
display: grid;
grid-template-columns: 1fr 380px;
gap: var(--spacing-md);
}
.news-detail-main {
min-width: 0;
}
.news-detail-meta {
display: flex;
align-items: center;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-lg);
border-bottom: 1px solid #a0a9c95d;
}
.news-detail-meta-item {
display: flex;
align-items: center;
gap: var(--spacing-xs);
color: var(--color-gray);
font-size: var(--font-size-sm);
}
.news-detail-meta-item svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.news-detail-meta-item svg path {
fill: var(--color-gray);
}
.news-detail-tags {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs);
align-items: center;
}
.contain-pagination .page-item,
.news-detail-tags .badge {
margin: 0;
}
.news-detail-banner {
width: 100%;
margin-bottom: var(--spacing-lg);
border-radius: var(--border-radius-lg);
overflow: hidden;
position: relative;
aspect-ratio: 10/5;
background-color: var(--color-light-border);
}
.leadership-image img,
.news-detail-banner img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.news-detail-content {
color: var(--color-dark-gray);
line-height: 1.7;
font-size: var(--font-size-base);
}
.news-detail-content p {
margin-bottom: var(--spacing-xs);
}
.news-detail-content a {
color: var(--color-primary-dark);
word-break: break-all;
}
.news-detail-content a:hover {
color: var(--color-primary-light);
text-decoration-color: var(--color-primary-light);
}
.jobs-detail-richtext ol,
.jobs-detail-richtext ul,
.news-detail-content ol,
.news-detail-content ul {
margin: var(--spacing-xs) 0;
padding-left: var(--spacing-lg);
}
.news-detail-content h2,
.news-detail-content h3,
.news-detail-content h4 {
margin: var(--spacing-sm) 0 var(--spacing-xs);
color: var(--color-black);
}
.news-detail-content ul {
list-style: none;
padding-left: 0;
}
.news-detail-content ul li {
position: relative;
padding-left: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
margin-left: var(--spacing-lg);
line-height: 1.7;
}
.news-detail-content ul li::before {
content: "•";
position: absolute;
left: 0;
color: var(--color-primary-dark);
font-weight: 700;
font-size: 1.2em;
line-height: 1.4;
}
.news-detail-content ol {
counter-reset: list-counter;
}
.news-detail-content ol li {
counter-increment: list-counter;
position: relative;
padding-left: var(--spacing-lg);
margin-bottom: var(--spacing-sm);
line-height: 1.7;
list-style: none;
}
.news-detail-content ol li::before {
content: counter(list-counter) ".";
position: absolute;
left: 0;
color: var(--color-primary-dark);
font-weight: 600;
min-width: var(--spacing-md);
}
.news-detail-content h2 {
font-size: var(--font-size-lg);
font-weight: 700;
line-height: 1.3;
}
.news-detail-content h2:first-child {
margin-top: 0;
}
.news-detail-content h3 {
font-size: var(--font-size-md);
font-weight: 700;
line-height: 1.4;
}
.news-detail-content h4 {
font-size: var(--font-size-base);
font-weight: 600;
line-height: 1.5;
}
.news-detail-content b,
.news-detail-content strong {
font-weight: 700;
color: var(--color-black);
}
.news-detail-content em,
.news-detail-content i {
font-style: italic;
}
.news-detail-content img {
max-width: 100%;
height: auto;
border-radius: var(--border-radius-md);
margin: var(--spacing-lg) 0;
display: block;
}
.news-detail-content blockquote {
margin: var(--spacing-lg) 0;
padding: var(--spacing-md) var(--spacing-lg);
border-left: 4px solid var(--color-primary-light);
background: #f8fafc;
border-radius: var(--border-radius-sm);
font-style: italic;
color: var(--color-gray);
}
.news-detail-content hr {
border: none;
border-top: 1px solid var(--color-light-border);
margin: var(--spacing-xl) 0;
}
.news-detail-content table {
width: 100%;
border-collapse: collapse;
margin: var(--spacing-xs) 0;
}
.news-detail-content table td,
.news-detail-content table th {
padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid var(--color-light-border);
text-align: left;
}
.news-detail-content table th {
background: #dbeafe;
font-weight: 600;
color: var(--color-black);
}
.news-detail-content code {
background: #f1f5f9;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.9em;
font-family: "Courier New", monospace;
color: var(--color-primary-dark);
}
.news-detail-content pre {
background: #f1f5f9;
padding: var(--spacing-md);
border-radius: var(--border-radius-md);
overflow-x: auto;
margin: var(--spacing-lg) 0;
}
.news-detail-content pre code {
background: 0 0;
padding: 0;
}
.news-detail-share {
display: flex;
align-items: center;
gap: var(--spacing-md);
margin-top: var(--spacing-xl);
}
.news-detail-share-label {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-gray);
}
.news-detail-share-button {
width: 40px;
height: 40px;
border-radius: 50%;
background: #dbeafe;
color: var(--color-primary-dark);
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-weight: 600;
font-size: var(--font-size-sm);
flex-shrink: 0;
}
.jobs-detail-apply-btn:hover,
.news-detail-share-button:hover {
background: var(--color-primary-light);
color: var(--color-white);
}
.news-detail-share-button span {
line-height: 1;
}
.news-detail-sidebar {
min-width: 0;
align-self: start;
position: sticky;
top: var(--spacing-lg);
max-height: calc(100vh - var(--spacing-lg) * 2);
overflow-y: auto;
}
.news-detail-sidebar::-webkit-scrollbar {
width: 6px;
}
.news-detail-sidebar::-webkit-scrollbar-track {
background: 0 0;
}
.news-detail-sidebar::-webkit-scrollbar-thumb {
background: var(--color-light-border);
border-radius: 3px;
}
.news-detail-sidebar::-webkit-scrollbar-thumb:hover {
background: var(--color-gray);
}
.popular-articles-title {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-sm);
}
.popular-article-card {
display: flex;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm)
var(--spacing-sm);
border-radius: var(--border-radius-xl);
border: 1px solid var(--color-light-border);
text-decoration: none;
}
.popular-article-card:hover {
border-color: var(--color-primary-light);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.popular-article-image {
width: 120px;
height: 120px;
flex-shrink: 0;
border-radius: var(--border-radius-lg);
overflow: hidden;
background: var(--color-light-gray);
}
.popular-article-content {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
min-width: 0;
}
.popular-article-excerpt,
.popular-article-title {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
.popular-article-title {
font-size: var(--font-size-sm);
font-weight: 600;
line-height: 1.4;
color: var(--color-black);
-webkit-line-clamp: 2;
line-clamp: 2;
}
.popular-article-excerpt {
font-size: var(--font-size-xs);
color: var(--color-gray);
-webkit-line-clamp: 3;
line-clamp: 3;
}
.popular-article-date {
font-size: var(--font-size-xs);
color: var(--color-light-gray);
margin-top: auto;
align-self: flex-end;
}
@media (max-width: 1200px) {
.jobs-page-section .jobs-grid {
grid-template-columns: 1fr 1fr;
}
.news-detail-layout {
grid-template-columns: 1fr 320px;
gap: var(--spacing-lg);
}
}
@media (max-width: 992px) {
.news-detail-layout {
grid-template-columns: 1fr;
}
.news-detail-sidebar {
margin-top: var(--spacing-xl);
position: static;
max-height: none;
overflow-y: visible;
}
}
.contain-pagination {
margin-top: var(--spacing-lg);
display: flex;
justify-content: center;
}
.contain-pagination .pagination {
display: flex;
list-style: none;
padding: 0;
margin: 0;
gap: var(--spacing-xs);
justify-content: center;
align-items: center;
}
.contain-pagination .page-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 14px;
color: var(--color-primary-dark);
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-md);
text-decoration: none;
font-size: var(--font-size-sm);
font-weight: 500;
}
.contain-pagination .page-link:hover:not(.disabled) {
background: var(--color-primary-light);
border-color: var(--color-primary-light);
color: var(--color-white);
text-decoration: none;
}
.contain-pagination .page-item.active .page-link {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
color: var(--color-white);
cursor: default;
}
.contain-pagination .page-item.disabled .page-link {
color: var(--color-light-gray);
border-color: var(--color-light-border);
cursor: not-allowed;
opacity: 0.5;
}
.contain-pagination .page-item.disabled .page-link:hover {
background: 0 0;
border-color: var(--color-light-border);
color: var(--color-light-gray);
}
.jobs-detail-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: var(--spacing-md);
}
.jobs-detail-header {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
border-radius: var(--border-radius-xl);
background: var(--color-white);
}
.jobs-detail-title {
font-size: var(--font-size-xl);
font-weight: 600;
color: var(--color-black);
}
.jobs-detail-meta {
display: flex;
align-items: center;
gap: var(--spacing-lg);
color: var(--color-light-gray);
}
.jobs-detail-meta-item {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
font-size: var(--font-size-sm);
}
.jobs-detail-meta-item svg {
width: 18px;
height: 18px;
}
.jobs-detail-content-card,
.jobs-detail-info-card {
padding: var(--spacing-md);
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-xl);
}
.jobs-detail-subtitle {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--color-black);
margin-bottom: var(--spacing-sm);
}
.jobs-detail-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--spacing-sm);
}
.jobs-detail-info-item {
padding: var(--spacing-sm);
border: 1px solid rgba(168, 208, 255, 0.6);
border-radius: var(--border-radius-lg);
background: #f4f8ff;
display: flex;
flex-direction: column;
gap: 4px;
}
.jobs-detail-pricing-table,
.leadership-card {
border: 1px solid var(--color-light-border);
overflow: hidden;
}
.jobs-detail-contact-label,
.jobs-detail-info-label {
font-size: var(--font-size-xs);
color: var(--color-light-gray);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.jobs-detail-info-value {
font-size: var(--font-size-md);
color: var(--color-primary-dark);
font-weight: 600;
}
.jobs-detail-section-title {
font-size: 18px;
font-weight: 600;
color: var(--color-black);
}
.jobs-detail-list {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
color: var(--color-dark-gray);
padding-left: var(--spacing-md);
}
.jobs-detail-pricing-row,
.jobs-detail-table-meta {
gap: var(--spacing-sm);
font-size: var(--font-size-sm);
}
.jobs-detail-list li {
position: relative;
list-style: none;
}
.jobs-detail-list li::before {
content: "•";
position: absolute;
left: calc(-1 * var(--spacing-md));
color: var(--color-primary-light);
font-weight: 700;
}
.jobs-detail-table-meta {
display: grid;
grid-template-columns: repeat(2, 1fr);
min-width: 180px;
color: var(--color-gray);
}
.jobs-detail-table-label {
text-align: center;
font-weight: 500;
}
.jobs-detail-pricing-table {
display: flex;
flex-direction: column;
border-radius: var(--border-radius-lg);
}
.jobs-detail-contact-item,
.jobs-detail-pricing-row span {
align-items: center;
display: flex;
}
.jobs-detail-pricing-row {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
padding: var(--spacing-sm) var(--spacing-md);
background: var(--color-white);
color: var(--color-black);
}
.jobs-detail-pricing-row:nth-child(odd) {
background: #f5f9ff;
}
.jobs-detail-pricing-size {
font-weight: 600;
}
.jobs-detail-pricing-value {
justify-content: center;
font-weight: 500;
color: var(--color-primary-dark);
}
.jobs-detail-sidebar {
align-self: flex-start;
position: sticky;
top: var(--spacing-lg);
height: fit-content;
}
.jobs-detail-contact-card {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: #eef5ff;
border: 1px solid rgba(168, 208, 255, 0.6);
border-radius: var(--border-radius-xl);
}
.jobs-detail-contact-title {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--color-primary-dark);
}
.jobs-detail-contact-link,
.jobs-detail-contact-value {
font-size: var(--font-size-md);
color: var(--color-black);
}
.jobs-detail-contact-item {
gap: var(--spacing-sm);
border-radius: var(--border-radius-md);
}
.jobs-detail-contact-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--color-white);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.jobs-detail-contact-icon svg,
.video-modal-close svg {
width: 20px;
height: 20px;
}
.jobs-detail-contact-content {
display: flex;
flex-direction: column;
gap: 4px;
}
.jobs-detail-contact-link {
font-weight: 600;
}
.jobs-detail-contact-value {
font-weight: 600;
}
.jobs-detail-richtext {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
color: var(--color-dark-gray);
line-height: 1.7;
}
.jobs-detail-richtext ol li,
.jobs-detail-richtext ul li {
margin-bottom: var(--spacing-xs);
line-height: 1.7;
}
.jobs-detail-richtext ul li {
list-style: disc;
}
.jobs-detail-richtext ol {
list-style: decimal;
}
.jobs-detail-apply-btn {
margin-top: var(--spacing-md);
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 var(--spacing-md);
border-radius: var(--border-radius-md);
background: var(--color-primary-dark);
color: var(--color-white);
font-weight: 600;
font-size: var(--font-size-sm);
text-decoration: none;
}
.leadership-info,
.video-interviu-body {
padding: var(--spacing-md);
}
.organigrama-container {
width: 100%;
margin-top: var(--spacing-lg);
}
.organigrama-container svg {
width: 100%;
height: auto;
border: none;
}
.organigrama-container svg rect {
cursor: pointer;
transition: 0.3s;
}
.organigrama-container svg rect:hover {
fill: #e8f4fd;
stroke: #3dadff;
stroke-width: 5;
}
.organigrama-container svg path {
transition: 0.3s;
}
.organigrama-container svg rect:hover + path,
.organigrama-container svg rect:hover ~ path {
fill-opacity: 1;
}
.leadership-section .section-title {
margin-bottom: var(--spacing-md);
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--color-black);
}
.leadership-grid {
display: grid;
gap: var(--spacing-md);
}
.leadership-grid--single {
grid-template-columns: 1fr;
max-width: 400px;
}
.leadership-grid--deputies {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-lg);
}
.leadership-card {
background: var(--color-white);
border-radius: var(--border-radius-lg);
}
.leadership-card:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.leadership-card--main {
max-width: 100%;
}
.leadership-image {
width: 100%;
aspect-ratio: 1/1;
overflow: hidden;
background: var(--color-light-border);
}
.leadership-info {
text-align: center;
}
.leadership-name {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--color-primary-dark);
margin: 0;
}
.video-interviuri-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-md);
margin-top: var(--spacing-lg);
}
.video-interviu-card {
background: var(--color-white);
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-xl);
overflow: hidden;
cursor: pointer;
}
.video-interviuri-grid:has(.video-interviu-card:hover) .video-interviu-card {
opacity: 0.5;
filter: blur(1px);
transform: scale(0.98);
}
.video-interviu-thumbnail {
position: relative;
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
background: var(--color-light-border);
}
.video-interviu-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s;
}
.video-interviu-card:hover .video-interviu-thumbnail img {
transform: scale(1.05);
}
.video-play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
pointer-events: none;
}
.video-interviu-card:hover .video-play-button {
transform: translate(-50%, -50%) scale(1.1);
}
.video-interviu-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-sm);
gap: var(--spacing-sm);
}
.video-interviu-institution,
.video-interviu-name {
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
white-space: normal;
overflow: hidden;
}
.video-interviu-date svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.video-interviu-duration {
color: var(--color-light-gray);
font-size: var(--font-size-sm);
font-weight: 500;
}
.video-interviu-name {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--color-black);
margin: 0 0 var(--spacing-xs) 0;
line-height: 1.3;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.video-interviu-institution {
font-size: var(--font-size-sm);
color: var(--color-gray);
margin: 0;
line-height: 1.5;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.video-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-lg);
}
.video-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(4px);
}
.video-modal-content {
position: relative;
width: 100%;
max-width: 1200px;
z-index: 1;
background: var(--color-white);
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.video-modal-close {
position: absolute;
top: var(--spacing-sm);
right: var(--spacing-sm);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
cursor: pointer;
z-index: 2;
}
.video-modal-close:hover {
background: var(--color-white);
transform: scale(1.1);
}
.video-modal-iframe-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-modal-iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
@media (max-width: 1200px) {
.jobs-detail-layout {
grid-template-columns: minmax(0, 1fr);
}
.jobs-detail-sidebar {
position: static;
height: auto;
}
.jobs-detail-contact-card {
padding: var(--spacing-md);
}
.video-interviuri-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.anticorruption-info-content,
.jobs-detail-content-card,
.jobs-detail-header,
.jobs-detail-info-card {
padding: var(--spacing-md);
}
.anticorruption-info-title {
font-size: var(--font-size-md);
}
.anticorruption-contact-block,
.department-header {
padding: var(--spacing-sm) var(--spacing-md);
}
.anticorruption-contact-icon {
width: 40px;
height: 40px;
}
.anticorruption-contact-icon svg {
width: 20px;
height: 20px;
}
.departments-title {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-lg);
}
.department-contacts {
grid-template-columns: 1fr;
}
.department-header-left {
gap: var(--spacing-sm);
}
.department-icon {
width: 36px;
height: 36px;
}
.department-name {
font-size: var(--font-size-sm);
}
.orders-toolbar {
flex-direction: column;
align-items: stretch;
}
.orders-filters-left {
flex-direction: column;
}
.orders-actions {
justify-content: flex-end;
}
.jobs-detail-meta {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xs);
}
.jobs-detail-pricing-row {
grid-template-columns: 1fr;
gap: 10px;
text-align: left;
}
.jobs-detail-pricing-value {
justify-content: flex-start;
}
.jobs-detail-table-meta {
display: none;
}
.video-interviuri-grid {
grid-template-columns: 1fr;
gap: var(--spacing-sm);
}
.video-modal {
padding: var(--spacing-sm);
}
.video-modal-content {
border-radius: var(--border-radius-md);
}
.video-modal-close {
top: var(--spacing-xs);
right: var(--spacing-xs);
width: 36px;
height: 36px;
}
}
/* Team Page Styles */
.team-page-section {
padding: var(--spacing-lg) 0;
background: var(--color-white);
}
.team-page-title {
font-size: var(--font-size-xl);
font-weight: 600;
margin-bottom: var(--spacing-sm);
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.team-page-title--green {
color: #17a34a;
}
.team-page-title--black {
color: var(--color-black);
}
.team-tabs-wrapper {
display: flex;
justify-content: center;
margin-bottom: var(--spacing-lg);
}
.team-tabs {
display: flex;
gap: var(--spacing-xs);
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.team-tab {
padding: var(--spacing-sm) var(--spacing-md);
background: var(--color-white);
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-md);
color: var(--color-black);
text-decoration: none;
font-size: var(--font-size-sm);
font-weight: 500;
transition: all 0.2s ease;
position: relative;
white-space: nowrap;
}
.team-tab:hover {
background: var(--color-light-bg);
color: var(--color-black);
text-decoration: none;
}
.team-tab.active {
background: var(--color-primary-light);
color: var(--color-white);
border-color: var(--color-primary-light);
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--spacing-lg);
}
.team-card {
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-md);
overflow: hidden;
background: var(--color-white);
display: flex;
flex-direction: column;
transition: box-shadow 0.2s ease;
}
.team-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.team-card-image {
width: 100%;
/* aspect-ratio: 1; */
overflow: hidden;
background: var(--color-light-bg);
}
.team-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.team-card-image--placeholder {
display: flex;
align-items: center;
justify-content: center;
background: var(--color-light-bg);
}
.team-card-image--placeholder i {
font-size: 64px;
color: var(--color-gray);
}
.team-card-body {
padding: var(--spacing-md);
display: flex;
flex-direction: column;
flex-grow: 1;
}
.team-card-name {
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: var(--spacing-xs);
color: var(--color-black);
text-align: center;
line-height: 1.3;
}
.team-card-divider {
border-top: 1px dotted var(--color-light-border);
margin: var(--spacing-sm) 0;
padding-top: var(--spacing-sm);
}
.team-card-function {
font-size: var(--font-size-sm);
color: var(--color-gray);
line-height: 1.5;
text-align: center;
flex-grow: 1;
}
.team-card-footer {
background: var(--color-primary-light);
padding: var(--spacing-sm);
border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
margin: calc(-1 * var(--spacing-md)) calc(-1 * var(--spacing-md)) 0;
display: flex;
align-items: center;
justify-content: center;
}
.team-card-info-icon {
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.team-card-info-icon i {
color: var(--color-white);
font-size: 18px;
}
@media (max-width: 768px) {
.team-grid {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--spacing-md);
}
.team-tabs {
flex-direction: column;
align-items: stretch;
}
.team-tab {
width: 100%;
text-align: center;
}
.team-page-title {
flex-direction: column;
align-items: flex-start;
gap: 0;
}
}
/* Gallery Styles */
.gallery-image-count-badge {
position: absolute;
top: var(--spacing-xs);
right: var(--spacing-xs);
background: rgba(0, 0, 0, 0.7);
color: var(--color-white);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--border-radius-sm);
font-size: var(--font-size-xs);
display: flex;
align-items: center;
gap: 4px;
z-index: 1;
}
.news-thumb {
position: relative;
}
.gallery-events-list {
display: flex;
flex-direction: column;
gap: var(--spacing-xl);
}
.gallery-detail-header {
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-md);
border-bottom: 1px solid var(--color-light-border);
}
.gallery-detail-title {
font-size: var(--font-size-3xl);
font-weight: 700;
color: var(--color-black);
margin-bottom: var(--spacing-sm);
}
.gallery-detail-date {
font-size: var(--font-size-base);
color: var(--color-gray);
margin: 0;
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.gallery-detail-date i {
color: var(--color-primary);
}
.gallery-detail-description {
font-size: var(--font-size-base);
line-height: 1.7;
color: var(--color-black);
margin-bottom: var(--spacing-xl);
}
.gallery-detail-description p {
margin-bottom: var(--spacing-sm);
}
.gallery-detail-description p:last-child {
margin-bottom: 0;
}
.gallery-detail-images {
margin-bottom: var(--spacing-xl);
}
.gallery-detail-other-events {
margin-top: var(--spacing-xl);
padding-top: var(--spacing-xl);
border-top: 1px solid var(--color-light-border);
}
.gallery-detail-other-title {
font-size: var(--font-size-xl);
font-weight: 600;
color: var(--color-black);
margin-bottom: var(--spacing-lg);
}
.gallery-event-item {
background: var(--color-white);
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius-md);
padding: var(--spacing-lg);
transition: box-shadow 0.2s ease;
}
.gallery-event-item:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.gallery-event-header {
margin-bottom: var(--spacing-md);
padding-bottom: var(--spacing-md);
border-bottom: 1px solid var(--color-light-border);
}
.gallery-event-title {
font-size: var(--font-size-xl);
font-weight: 600;
color: var(--color-black);
margin-bottom: var(--spacing-xs);
}
.gallery-event-date {
font-size: var(--font-size-sm);
color: var(--color-gray);
margin: 0;
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.gallery-event-date i {
color: var(--color-primary);
}
.gallery-event-description {
font-size: var(--font-size-base);
line-height: 1.7;
color: var(--color-black);
margin-bottom: var(--spacing-md);
}
.gallery-event-description p {
margin-bottom: var(--spacing-sm);
}
.gallery-event-description p:last-child {
margin-bottom: 0;
}
.gallery-event-images {
margin-top: var(--spacing-md);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--spacing-md);
}
.gallery-image-item {
position: relative;
overflow: hidden;
border-radius: var(--border-radius-sm);
cursor: pointer;
aspect-ratio: 1;
background: var(--color-light-bg);
}
.gallery-image-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.gallery-image-item:hover img {
transform: scale(1.05);
}
/* Gallery Modal (Lightbox) */
.gallery-modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
align-items: center;
justify-content: center;
padding: var(--spacing-lg);
cursor: pointer;
}
.gallery-modal-content-wrapper {
position: relative;
max-width: 90%;
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: default;
}
.gallery-modal-content {
max-width: 100%;
max-height: 85vh;
object-fit: contain;
border-radius: var(--border-radius-sm);
cursor: grab;
user-select: none;
-webkit-user-drag: none;
transition: transform 0.3s ease;
}
.gallery-modal-content:active {
cursor: grabbing;
}
.gallery-modal-close {
position: absolute;
top: var(--spacing-md);
right: var(--spacing-lg);
color: var(--color-white);
font-size: 40px;
font-weight: bold;
cursor: pointer;
z-index: 10001;
line-height: 1;
transition: opacity 0.2s ease;
background: rgba(0, 0, 0, 0.5);
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: none;
}
.gallery-modal-close:hover {
opacity: 0.8;
background: rgba(0, 0, 0, 0.7);
}
.gallery-modal-left,
.gallery-modal-right {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
cursor: pointer;
z-index: 10000;
}
.gallery-modal-left {
left: 0;
}
.gallery-modal-right {
right: 0;
}
.gallery-modal-left:hover,
.gallery-modal-right:hover {
background: rgba(255, 255, 255, 0.05);
}
.gallery-modal-caption {
color: var(--color-white);
font-size: var(--font-size-base);
text-align: center;
background: rgba(0, 0, 0, 0.7);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius-sm);
margin-top: var(--spacing-md);
max-width: 90%;
}
.gallery-modal-counter {
color: rgba(255, 255, 255, 0.8);
font-size: var(--font-size-sm);
text-align: center;
margin-top: var(--spacing-xs);
}
@media (max-width: 768px) {
.gallery-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--spacing-sm);
}
.gallery-event-item {
padding: var(--spacing-md);
}
.gallery-event-title {
font-size: var(--font-size-lg);
}
.gallery-detail-title {
font-size: var(--font-size-2xl);
}
.gallery-modal-content-wrapper {
max-width: 95%;
}
.gallery-modal-content {
max-width: 100%;
max-height: 80vh;
}
.gallery-modal-close {
top: var(--spacing-sm);
right: var(--spacing-md);
width: 40px;
height: 40px;
font-size: 32px;
}
}