:root {
--primary: #2188ff;
--primary-hover: #0366d6;
--secondary: #2ea043;
--dark: #ffffff;
--dark-alt: #f6f8fa;
--dark-component: #ffffff;
--border-color: #d0d7de;
--text: #24292f;
--text-secondary: #656d76;
--logo-text: #24292f;
--logo-brand-text: #5E5E5E;
--hero-title-color: #334f74;
--hero-decoration-color: rgba(0, 0, 0, 0.05);
--hero-svg-gradient-start: #1a1a1a;
--hero-svg-gradient-mid: #2d2d2d;
--hero-svg-gradient-end: #1a1a1a;
--hero-decoration-opacity: 0.15;
--success: #238636;
--glass-bg: rgba(255, 255, 255, 0.8);
--glass-border: rgba(208, 215, 222, 0.5);
--shadow-light: rgba(0, 0, 0, 0.05);
--gradient-primary: linear-gradient(135deg, #2188ff 0%, #0366d6 100%);
--gradient-secondary: linear-gradient(135deg, #2ea043 0%, #238636 100%);
--gradient-accent: linear-gradient(135deg, #f85149 0%, #da3633 100%);
--warning: #f85149;
--danger: #f85149;
--guide-primary: #2188ff;
--guide-primary-hover: #0366d6;
--guide-secondary: #ffa28b;
--guide-dark: #ffffff;
--guide-dark-alt: #f6f8fa;
--guide-dark-component: #ffffff;
--guide-border-color: #d0d7de;
--guide-text: #24292f;
--guide-text-secondary: #656d76;
--guide-success: #238636;
--guide-warning: #d1a243;
--guide-danger: #da3633;
}
.dark-theme {
--primary: #2188ff;
--primary-hover: #0366d6;
--secondary: #2ea043;
--dark: #0d1117;
--dark-alt: #161b22;
--dark-component: #21262d;
--border-color: #30363d;
--text: #c9d1d9;
--text-secondary: #8b949e;
--logo-text: #ffffff;
--logo-brand-text: #ffffff;
--hero-title-color: #ffffff;
--hero-decoration-color: rgba(255, 255, 255, 0.05);
--hero-svg-gradient-start: #E8F4FD;
--hero-svg-gradient-mid: #F0F8FF;
--hero-svg-gradient-end: #E8F4FD;
--success: #238636;
--glass-bg: rgba(33, 38, 45, 0.8);
--glass-border: rgba(48, 54, 61, 0.5);
--shadow-light: rgba(255, 255, 255, 0.05);
--gradient-primary: linear-gradient(135deg, #2188ff 0%, #0366d6 100%);
--gradient-secondary: linear-gradient(135deg, #2ea043 0%, #238636 100%);
--gradient-accent: linear-gradient(135deg, #f85149 0%, #da3633 100%);
--warning: #f85149;
--danger: #f85149;
--guide-primary: #2188ff;
--guide-primary-hover: #0366d6;
--guide-secondary: #ffa28b;
--guide-dark: #0d1117;
--guide-dark-alt: #161b22;
--guide-dark-component: #21262d;
--guide-border-color: #30363d;
--guide-text: #c9d1d9;
--guide-text-secondary: #8b949e;
--guide-success: #238636;
--guide-warning: #d1a243;
--guide-danger: #da3633;
}
.light-theme {
--primary: #2188ff;
--primary-hover: #0366d6;
--secondary: #2ea043;
--dark: #ffffff;
--dark-alt: #f6f8fa;
--dark-component: #ffffff;
--border-color: #d0d7de;
--text: #24292f;
--text-secondary: #656d76;
--logo-text: #24292f;
--logo-brand-text: #5E5E5E;
--hero-title-color: #334f74;
--hero-decoration-color: rgba(0, 0, 0, 0.05);
--hero-svg-gradient-start: #1a1a1a;
--hero-svg-gradient-mid: #2d2d2d;
--hero-svg-gradient-end: #1a1a1a;
--hero-decoration-opacity: 0.15;
--success: #238636;
--glass-bg: rgba(255, 255, 255, 0.8);
--glass-border: rgba(208, 215, 222, 0.5);
--shadow-light: rgba(0, 0, 0, 0.05);
--gradient-primary: linear-gradient(135deg, #2188ff 0%, #0366d6 100%);
--gradient-secondary: linear-gradient(135deg, #2ea043 0%, #238636 100%);
--gradient-accent: linear-gradient(135deg, #f85149 0%, #da3633 100%);
--warning: #f85149;
--danger: #f85149;
--guide-primary: #2188ff;
--guide-primary-hover: #0366d6;
--guide-secondary: #ffa28b;
--guide-dark: #ffffff;
--guide-dark-alt: #f6f8fa;
--guide-dark-component: #ffffff;
--guide-border-color: #d0d7de;
--guide-text: #24292f;
--guide-text-secondary: #656d76;
--guide-success: #238636;
--guide-warning: #d1a243;
--guide-danger: #da3633;
}
.light-theme .hero h1,
.light-theme .typing-text {
color: var(--hero-title-color) !important;
}
.light-theme .hero:has(.hero-content) .hero-content h1 {
color: var(--hero-title-color) !important;
}
.light-theme .logo {
color: #334f74 !important;
}
.light-theme .footer-logo {
color: #334f74 !important;
}
.light-theme .stat-values {
color: #334f74 !important;
}
.light-theme .section-title-about {
color: #334f74 !important;
}
.light-theme .mission-content h2 {
color: #334f74 !important;
}
.light-theme .section-title-career {
color: #334f74 !important;
}
.light-theme .section-title {
color: #334f74 !important;
}
.light-theme .cta-content-about h2 {
color: #334f74 !important;
}
.light-theme .footer-section h4 {
color: var(--logo-text) !important;
}
.light-theme .social-link:hover {
color: var(--logo-text) !important;
}
.light-theme .nav-item {
color: #334f74 !important;
}
.light-theme .nav-item:hover {
color: #334f74 !important;
}
.light-theme .nav-item.active {
color: #334f74 !important;
}
.light-theme .nav-item i {
color: #334f74 !important;
}
.light-theme .nav-item:hover i {
color: #334f74 !important;
}
.light-theme .hero-content::before {
display: none;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
body {
background-color: var(--dark);
color: var(--text);
line-height: 1.5;
font-size: 16px;
overflow-x: hidden;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
header {
background: var(--dark-alt);
border-bottom: 1px solid var(--border-color);
position: relative;
z-index: 1001;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
max-width: 1400px;
margin: 0 auto;
min-height: 70px;
gap: 1rem;
}
.logo {
font-family: 'Orbitron', 'Space Grotesk', sans-serif;
font-size: 1.5rem;
font-weight: 900;
color: var(--logo-brand-text);
text-decoration: none;
display: flex;
align-items: center;
gap: 0.15rem;
transition: transform 0.3s ease;
flex-shrink: 0;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.logo:hover {
transform: scale(1.05);
}
.logo-img {
height: 30px;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
transition: filter 0.3s ease;
}
.logo:hover .logo-img {
filter: drop-shadow(0 4px 8px rgba(33, 136, 255, 0.3));
}
.search-container {
flex: 1;
max-width: 500px;
margin: 0 2rem;
position: relative;
}
.search-containers {
position: relative;
width: 100%;
}
.search-form {
display: flex;
position: relative;
background: var(--glass-bg);
border: 1px solid var(--border-color);
border-radius: 25px;
overflow: hidden;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.search-form:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(33, 136, 255, 0.1);
}
@media (max-width: 768px) {
.search-form:focus-within {
box-shadow: none;
}
}
.search-input {
flex: 1;
background: transparent;
border: none;
padding: 0.8rem 1rem;
color: var(--text);
font-size: 0.9rem;
outline: none;
min-width: 0;
}
@media (max-width: 768px) {
.search-input {
font-size: 16px !important;
}
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
textarea,
select {
font-size: 16px !important;
}
.sector-search-box input,
.data-search-box input,
.page-header-data input,
.page-header-sector input {
font-size: 16px !important;
}
.search-mobile .search-date-range input,
input[name="year_start_mobile"],
input[name="year_end_mobile"] {
font-size: 16px !important;
}
}
.search-input::placeholder {
color: var(--text-secondary);
}
.search-btn {
background: var(--primary);
border: none;
color: white;
padding: 0.8rem 1.2rem;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.search-btn:hover {
background: var(--primary-hover);
}
.search-btn:active {
transform: scale(0.98);
}
.header-actions {
display: flex;
align-items: center;
gap: 1rem;
flex-shrink: 0;
}
.language-selector {
position: relative;
}
.theme-toggle {
background: var(--glass-bg);
border: 1px solid var(--border-color);
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
padding: 0.6rem 1rem;
border-radius: 8px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.theme-toggle:hover {
background: var(--shadow-light);
border-color: var(--primary);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.theme-toggle:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.theme-icon {
transition: all 0.3s ease;
color: var(--primary);
}
.theme-toggle:hover .theme-icon {
transform: rotate(15deg) scale(1.1);
}
.theme-toggle.dark .theme-icon {
transform: rotate(180deg);
}
.language-toggle {
background: var(--glass-bg);
border: 1px solid var(--border-color);
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
padding: 0.6rem 1rem;
border-radius: 8px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.language-toggle:hover {
background: var(--shadow-light);
border-color: var(--primary);
transform: translateY(-1px);
}
.language-toggle i {
color: var(--primary);
}
.language-dropdown {
display: none;
position: absolute;
background: var(--glass-bg);
backdrop-filter: blur(15px);
min-width: 180px;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
z-index: 2000;
top: calc(100% + 0.5rem);
right: 0;
border: 1px solid var(--border-color);
border-radius: 12px;
overflow: hidden;
}
.language-selector.active .language-dropdown {
display: block;
animation: fadeInUp 0.3s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.language-option {
color: var(--text);
padding: 0.8rem 1rem;
text-decoration: none;
display: block;
font-size: 0.9rem;
transition: all 0.3s ease;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
white-space: nowrap;
}
.language-option:last-child {
border-bottom: none;
}
.language-option:hover {
background: var(--shadow-light);
color: var(--logo-text);
padding-left: 1.5rem;
}
.mobile-menu-toggle {
display: none;
background: var(--glass-bg);
border: 1px solid var(--border-color);
color: var(--text);
font-size: 1.2rem;
cursor: pointer;
padding: 0.7rem;
border-radius: 8px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.mobile-menu-toggle:hover {
background: var(--shadow-light);
border-color: var(--primary);
color: var(--logo-text);
}
.nav {
background: var(--dark-component);
border-bottom: 1px solid var(--border-color);
position: sticky;
top: 0;
z-index: 1000;
will-change: transform;
contain: layout style;
}
.nav-container {
display: flex;
justify-content: center;
max-width: 1400px;
margin: 0 auto;
flex-wrap: wrap;
padding: 0 1rem;
}
.nav-item {
color: var(--text);
text-decoration: none;
padding: 1.2rem 1.5rem;
font-weight: 500;
font-size: 0.95rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.6rem;
position: relative;
border-radius: 8px;
margin: 0.2rem;
}
.nav-item::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
transition: all 0.3s ease;
transform: translateX(-50%);
}
.nav-item:hover {
background: var(--shadow-light);
color: var(--logo-text);
transform: translateY(-2px);
}
.nav-item:hover::before {
width: 80%;
}
.nav-item.active {
color: var(--logo-text);
background: var(--glass-bg);
backdrop-filter: blur(10px);
}
.nav-item.active::before {
width: 80%;
}
.nav-item i {
font-size: 1rem;
transition: transform 0.3s ease;
}
.nav-item:hover i {
transform: scale(1.1);
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background: var(--glass-bg);
backdrop-filter: blur(15px);
min-width: 220px;
box-shadow: 0 12px 40px rgba(0,0,0,0.5);
z-index: 1001;
top: calc(100% + 0.0rem);
left: 50%;
transform: translateX(-50%);
border: 1px solid var(--border-color);
border-radius: 12px;
overflow: visible;
}
.dropdown:hover .dropdown-content {
display: block;
animation: fadeInDown 0.3s ease;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateX(-50%) translateY(-10px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
.dropdown-item {
color: var(--text);
padding: 0.9rem 1.2rem;
text-decoration: none;
display: flex;
align-items: center;
gap: 0.7rem;
font-size: 0.9rem;
transition: all 0.3s ease;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.dropdown-item:last-child {
border-bottom: none;
}
.dropdown-item:hover {
background: var(--shadow-light);
color: var(--text);
padding-left: 1.8rem;
}
.dropdown-divider {
height: 1px;
background: linear-gradient(90deg, transparent, var(--border-color), transparent);
margin: 0.3rem 0;
}
.dropdown-header {
padding: 0.8rem 1.2rem;
font-size: 0.75rem;
color: var(--text-secondary);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
background: rgba(255, 255, 255, 0.02);
}
@media (max-width: 1366px) {
.navbar {
padding: 1rem 0.8rem;
}
.search-container {
max-width: 350px;
margin: 0 1rem;
}
.nav-item {
padding: 1rem 1rem;
font-size: 0.9rem;
}
}
@media (max-width: 1200px) {
.navbar {
padding: 1rem 0.5rem;
}
.search-container {
max-width: 280px;
margin: 0 0.8rem;
}
.nav-container {
padding: 0 0.3rem;
}
.nav-item {
padding: 1rem 0.7rem;
font-size: 0.85rem;
}
}
@media (max-width: 1024px) {
.navbar {
padding: 1rem 0.3rem;
}
.search-container {
max-width: 220px;
margin: 0 0.5rem;
}
.nav-item {
padding: 1rem 0.5rem;
font-size: 0.8rem;
}
}
@media (max-width: 1024px) {
.navbar {
padding: 0.7rem 0.8rem;
min-height: 58px;
flex-wrap: nowrap;
gap: 0.5rem;
}
.logo {
font-size: 1.1rem;
flex-shrink: 0;
min-width: fit-content;
}
.logo-img {
height: 24px;
}
.search-container {
flex: 1;
min-width: 0;
margin: 0 0.5rem;
max-width: none;
}
.search-form {
border-radius: 18px;
min-width: 0;
}
.search-input {
font-size: 16px !important;
padding: 0.55rem 0.7rem;
min-width: 0;
flex: 1;
}
.search-input::placeholder {
font-size: 0.8rem;
}
.search-btn {
padding: 0.55rem 0.8rem;
font-size: 0.8rem;
flex-shrink: 0;
}
.search-btn span {
display: none;
}
.header-actions {
gap: 0.4rem;
flex-shrink: 0;
min-width: fit-content;
}
.theme-toggle {
padding: 0.45rem 0.6rem;
font-size: 0.8rem;
gap: 0.3rem;
}
.language-toggle {
padding: 0.45rem 0.6rem;
font-size: 0.8rem;
gap: 0.3rem;
}
.language-toggle span:not(.fas) {
display: none;
}
.language-dropdown {
position: fixed;
top: 65px;
right: 0.8rem;
z-index: 9999;
will-change: transform;
contain: layout style paint;
background: var(--dark-alt);
border: 1px solid var(--border-color);
box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.mobile-menu-toggle {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
font-size: 1rem;
flex-shrink: 0;
}
.nav {
display: none;
background: var(--dark-alt);
border-top: 1px solid var(--border-color);
}
.nav.active {
display: block;
animation: slideDown 0.3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.nav-container {
flex-direction: column;
width: 100%;
padding: 0;
overflow-x: visible;
}
.nav-item {
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding: 1rem 1.5rem;
margin: 0;
border-radius: 0;
justify-content: flex-start;
pointer-events: auto !important;
cursor: pointer !important;
}
.nav-item:last-child {
border-bottom: none;
}
.nav-item::before {
display: none;
}
.nav-item.active {
background: var(--glass-bg);
border-left: 3px solid var(--primary);
}
.dropdown:hover .dropdown-content,
.dropdown.active .dropdown-content {
display: none !important;
}
.dropdown-content {
display: none !important;
}
.dropdown .nav-item {
pointer-events: auto !important;
cursor: pointer !important;
}
.dropdown a.nav-item {
pointer-events: auto !important;
cursor: pointer !important;
z-index: 1000 !important;
position: relative !important;
}
.dropdown {
pointer-events: auto !important;
}
.dropdown > a.nav-item {
display: flex !important;
pointer-events: auto !important;
cursor: pointer !important;
z-index: 1001 !important;
}
}
@media (max-width: 600px) {
.navbar {
padding: 0.6rem;
gap: 0.4rem;
}
.logo {
font-size: 1rem;
}
.logo-img {
height: 20px;
}
.search-container {
margin: 0 0.4rem;
}
.search-input {
font-size: 16px !important;
padding: 0.5rem 0.6rem;
}
.search-btn {
padding: 0.5rem 0.7rem;
font-size: 0.75rem;
}
.theme-toggle {
padding: 0.4rem 0.5rem;
font-size: 0.75rem;
}
.language-toggle {
padding: 0.4rem 0.5rem;
font-size: 0.75rem;
}
.mobile-menu-toggle {
padding: 0.45rem;
font-size: 0.9rem;
}
}
@media (max-width: 375px) {
.navbar {
padding: 0.5rem;
gap: 0.3rem;
min-height: 52px;
}
.logo {
font-size: 0.9rem;
}
.logo-img {
height: 18px;
}
.search-container {
margin: 0 0.3rem;
}
.search-input {
font-size: 16px !important;
padding: 0.45rem 0.5rem;
}
.search-btn {
padding: 0.45rem 0.6rem;
font-size: 0.7rem;
}
.theme-toggle {
padding: 0.35rem 0.4rem;
font-size: 0.7rem;
}
.language-toggle {
padding: 0.35rem 0.4rem;
font-size: 0.7rem;
}
.mobile-menu-toggle {
padding: 0.4rem;
font-size: 0.85rem;
}
.nav-item {
padding: 0.9rem 1rem;
font-size: 0.9rem;
}
.dropdown-item {
padding: 0.7rem 1rem;
font-size: 0.85rem;
}
}
@media (max-width: 360px) {
.navbar {
padding: 0.4rem;
gap: 0.25rem;
}
.logo {
font-size: 0.85rem;
}
.search-input {
font-size: 16px !important;
padding: 0.4rem 0.45rem;
}
.search-btn {
padding: 0.4rem 0.5rem;
font-size: 0.65rem;
}
.theme-toggle {
padding: 0.3rem;
font-size: 0.65rem;
}
.language-toggle {
padding: 0.3rem;
}
.mobile-menu-toggle {
padding: 0.35rem;
}
}
.nav-item,
.theme-toggle,
.language-toggle,
.mobile-menu-toggle,
.search-btn {
position: relative;
overflow: hidden;
}
.nav-item::after,
.theme-toggle::after,
.language-toggle::after,
.mobile-menu-toggle::after,
.search-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
transition: all 0.3s ease;
border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.nav-item:active::after,
.theme-toggle:active::after,
.language-toggle:active::after,
.mobile-menu-toggle:active::after,
.search-btn:active::after {
width: 300px;
height: 300px;
}
footer {
background-color: var(--dark-alt);
border-top: 1px solid var(--border-color);
padding: 2.5rem 0 1.5rem;
margin-top: auto;
}
.footer-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 2rem;
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
.footer-brand {
max-width: 300px;
}
.footer-logo {
font-family: 'Orbitron', 'Space Grotesk', sans-serif;
display: flex;
align-items: center;
gap: 0.15rem;
margin-bottom: 1rem;
font-size: 1.25rem;
font-weight: 900;
color: var(--logo-brand-text);
text-decoration: none;
transition: transform 0.3s ease;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.footer-logo:hover {
transform: scale(1.05);
}
.footer-logo-img {
height: 30px;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
transition: filter 0.3s ease;
}
.footer-logo:hover .footer-logo-img {
filter: drop-shadow(0 4px 8px rgba(33, 136, 255, 0.3));
}
.footer-description {
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.social-links {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
background-color: transparent;
color: var(--text-secondary);
text-decoration: none;
transition: all 0.2s ease;
border: 1px solid transparent;
}
.social-link:hover {
color: var(--logo-text);
background-color: rgba(255, 255, 255, 0.05);
border-color: var(--border-color);
transform: translateY(-1px);
}
.footer-section h4 {
color: var(--logo-text);
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 0.2rem;
}
.footer-links a {
color: var(--text-secondary);
text-decoration: none;
font-size: 0.85rem;
transition: color 0.2s ease;
display: block;
padding: 0.1rem 0;
}
.footer-links a:hover {
color: var(--primary);
}
.footer-bottom {
border-top: 1px solid var(--border-color);
padding-top: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer-copyright {
color: var(--text-secondary);
font-size: 0.8rem;
}
.footer-legal {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.footer-legal a {
color: var(--text-secondary);
text-decoration: none;
font-size: 0.8rem;
transition: color 0.2s ease;
}
.footer-legal a:hover {
color: var(--primary);
}
@media (max-width: 1024px) {
.footer-content {
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 1.5rem;
}
}
@media (max-width: 768px) {
.footer-container {
padding: 0 1.5rem;
}
.footer-content {
grid-template-columns: 1fr 1fr;
gap: 1rem 2rem;
}
.footer-brand {
grid-column: 1 / -1;
max-width: 100%;
text-align: left;
margin-bottom: 1rem;
}
.footer-logo {
justify-content: flex-start;
}
.footer-logo-img {
height: 24px;
}
.social-links {
justify-content: flex-start;
}
.footer-section {
text-align: left;
}
.footer-section h4 {
font-size: 0.85rem;
margin-bottom: 0.5rem;
}
.footer-links li {
margin-bottom: 0.15rem;
}
.footer-links a {
font-size: 0.8rem;
padding: 0.05rem 0;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.footer-legal {
order: 1;
justify-content: flex-start;
gap: 1rem;
}
.footer-copyright {
order: 2;
}
}
@media (max-width: 480px) {
footer {
padding: 2rem 0 1.5rem;
}
.footer-container {
padding: 0 1rem;
}
.footer-content {
grid-template-columns: 1fr 1fr;
gap: 1rem 1.5rem;
}
.footer-brand {
margin-bottom: 0.8rem;
text-align: left;
}
.footer-logo {
justify-content: flex-start;
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.footer-logo-img {
height: 20px;
}
.footer-description {
font-size: 0.85rem;
margin-bottom: 0.8rem;
line-height: 1.4;
}
.social-links {
justify-content: flex-start;
gap: 0.75rem;
}
.social-link {
width: 32px;
height: 32px;
}
.footer-section {
text-align: left;
}
.footer-section h4 {
font-size: 0.8rem;
margin-bottom: 0.4rem;
color: var(--text);
}
.footer-links li {
margin-bottom: 0.1rem;
}
.footer-links a {
font-size: 0.75rem;
padding: 0.05rem 0;
color: var(--text-secondary);
}
.footer-bottom {
border-top: 1px solid var(--border-color);
padding-top: 1rem;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.footer-copyright {
font-size: 0.75rem;
order: 2;
}
.footer-legal {
order: 1;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.footer-legal a {
font-size: 0.75rem;
}
}
@media (max-width: 320px) {
.footer-container {
padding: 0 0.75rem;
}
.footer-content {
grid-template-columns: 1fr 1fr;
gap: 0.8rem 1.25rem;
}
.footer-logo {
font-size: 1rem;
}
.footer-logo-img {
height: 18px;
}
.footer-description {
font-size: 0.8rem;
}
.social-links {
gap: 0.5rem;
}
.social-link {
width: 30px;
height: 30px;
}
.footer-section h4 {
font-size: 0.75rem;
margin-bottom: 0.3rem;
}
.footer-links li {
margin-bottom: 0.05rem;
}
.footer-links a {
font-size: 0.7rem;
padding: 0.02rem 0;
}
.footer-legal {
flex-wrap: wrap;
gap: 0.5rem;
}
}
@keyframes pulse {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}
.social-link:hover i {
animation: pulse 1.5s ease-in-out infinite;
}
.mobile-menu-toggle {
display: none;
background: none;
border: none;
color: var(--text);
font-size: 1.5rem;
cursor: pointer;
}
@media (max-width: 1024px) {
.mobile-menu-toggle {
display: block;
margin-left: auto;
}
.nav {
display: none;
}
.nav.active {
display: block;
}
}
.cta-section {
padding: 4rem 2rem;
text-align: center;
background: linear-gradient(135deg, var(--dark) 0%, var(--dark-alt) 100%);
}
.cta-content {
max-width: 800px;
margin: 0 auto;
}
.cta-title {
font-size: 2.5rem;
margin-bottom: 1.5rem;
color: var(--text);
}
.light-theme .cta-title {
color: #334f74;
}
.cta-description {
color: var(--text-secondary);
margin-bottom: 2rem;
font-size: 1.1rem;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
}
.cta-primary {
background: var(--primary);
color: white;
padding: 0.75rem 2rem;
border-radius: 9999px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.cta-primary:hover {
background: var(--primary-hover);
transform: translateY(-2px);
}
.cta-secondary {
background: transparent;
color: var(--text);
padding: 0.75rem 2rem;
border-radius: 9999px;
text-decoration: none;
font-weight: 600;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.cta-secondary:hover {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-2px);
}
.main-content {
margin-top: 160px;
padding: 2rem;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
.demo-section {
margin: 3rem 0;
padding: 2rem;
background: rgba(33, 39, 46, 0.3);
border-radius: 12px;
border: 1px solid var(--glass-border);
}
.demo-section h2 {
color: var(--text);
margin-bottom: 1.5rem;
font-size: 1.8rem;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.stat-card {
background: rgba(33, 39, 46, 0.5);
padding: 1.5rem;
border-radius: 12px;
border: 1px solid var(--glass-border);
text-align: center;
}
.stat-number {
font-size: 2.5rem;
font-weight: bold;
color: var(--primary);
margin: 0.5rem 0;
}
.stat-desc {
color: var(--text-secondary);
font-size: 0.9rem;
}
.content-block {
background: rgba(33, 39, 46, 0.5);
padding: 1.5rem;
border-radius: 12px;
border: 1px solid var(--glass-border);
margin-top: 1rem;
}
.indicator-list {
list-style: none;
padding: 0;
}
.indicator-list li {
padding: 0.8rem 0;
border-bottom: 1px solid var(--glass-border);
color: var(--text);
}
.indicator-list li:last-child {
border-bottom: none;
}
.age-structure {
display: flex;
flex-direction: column;
gap: 1rem;
}
.age-group {
display: flex;
align-items: center;
gap: 1rem;
}
.age-bar {
background: var(--primary);
padding: 0.5rem;
border-radius: 4px;
color: white;
text-align: right;
min-width: 60px;
}
.hero-section {
margin-top: 100px;
padding: 2rem;
text-align: center;
}
.hero-title {
font-family: 'Orbitron', 'Space Grotesk', sans-serif;
font-size: 2.5rem;
font-weight: 900;
color: var(--text);
margin-bottom: 1rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.hero-subtitle {
font-size: 1.5rem !important;
color: var(--text-secondary);
max-width: 800px;
margin: 0 auto 3rem;
line-height: 1.6;
font-weight: 400;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-content::before {
display: none;
}
.hero-content .typing-text,
.hero-content .hero-subtitle {
position: relative;
z-index: 2;
}
.hero-content::after {
display: none;
}
.section-main-title {
font-family: 'Orbitron', 'Space Grotesk', sans-serif;
font-size: 2.5rem;
font-weight: 900;
color: #334f74;
margin-bottom: 1rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.dark-theme .section-main-title {
color: var(--text);
}
.section-main-subtitle {
font-size: 1.5rem !important;
color: var(--text-secondary);
max-width: 800px;
margin: 0 auto 3rem;
line-height: 1.6;
font-weight: 400;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
}
.stat-card {
background: rgba(33, 39, 46, 0.5);
border: 1px solid var(--glass-border);
border-radius: 16px;
padding: 1.5rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.stat-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.stat-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
}
.stat-title {
font-size: 1.2rem;
color: var(--text);
font-weight: 600;
}
.chart-container {
position: relative;
height: 250px;
margin-top: 1rem;
}
.stat-footer {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--glass-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.stat-value {
font-size: 1.5rem;
font-weight: bold;
color: var(--primary);
}
.stat-change {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
}
.stat-change.positive {
color: var(--success);
}
.stat-change.negative {
color: #dc3545;
}
@media (max-width: 768px) {
.hero-section {
margin-top: 80px;
padding: 1rem;
}
.hero-title {
font-family: 'Orbitron', 'Space Grotesk', sans-serif;
font-size: 2rem;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
}
.hero-subtitle {
font-size: 1.0rem !important;
padding: 0 1rem;
line-height: 1.5;
}
.section-main-title {
font-size: 2rem;
margin-bottom: 1rem;
}
.section-main-subtitle {
font-size: 1.0rem !important;
padding: 0 1rem;
line-height: 1.5;
}
.typing-text {
font-size: 2.2rem !important;
text-align: left !important;
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.hero-subtitle {
font-size: 1.1rem !important;
text-align: left !important;
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.hero-content::before,
.hero-content::after {
display: none;
}
.stats-grid {
grid-template-columns: 1fr;
padding: 1rem;
}
.stat-card {
padding: 1rem;
}
.chart-container {
height: 280px;
}
.hero-stats {
gap: 1.5rem;
margin-top: 1rem;
}
.hero-stats-content {
gap: 1.5rem;
animation-duration: 8s;
width: max-content;
}
.hero-stat-item {
min-width: auto;
padding: 0;
}
.hero-stat-number {
font-size: 1.2rem;
}
.hero-stat-label {
font-size: 0.7rem;
}
}
.hero {
padding: 4rem 2rem 4rem;
text-align: center;
background: linear-gradient(135deg, var(--dark) 0%, var(--dark-alt) 100%);
position: relative;
overflow: hidden;
}
.hero-alt::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
pointer-events: none;
z-index: 1;
}
.hero-background-image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('../images/202102041054.svg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 0.5s ease-in-out;
pointer-events: none;
z-index: 0;
display: block;
}
.hero-background-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, var(--dark) 0%, var(--dark-alt) 100%);
opacity: 0.85;
transition: opacity 0.5s ease-in-out, background 0.5s ease-in-out;
pointer-events: none;
z-index: 1;
}
.dark-theme .hero-background-image {
display: none;
}
.dark-theme .hero-background-overlay {
display: none;
}
.light-theme .hero {
background: transparent;
}
.light-theme .hero-background-image {
display: block;
opacity: 1;
}
.light-theme .hero-background-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.4);
pointer-events: none;
z-index: 1;
}
.light-theme .hero-background-overlay {
display: none;
}
@media (max-width: 768px) {
.light-theme .hero-background-image {
background-image: url('../images/29591562e5.svg');
background-position: right center;
background-size: cover;
background-repeat: no-repeat;
opacity: 0.4
}
.light-theme .hero-background-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.75);
pointer-events: none;
z-index: 1;
}
}
@media (max-width: 480px) {
.light-theme .hero-background-image::after {
background: rgba(255, 255, 255, 0.75);
}
}
.hero h1,
.typing-text {
font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
margin-bottom: 2rem !important;
color: var(--hero-title-color) !important;
font-weight: 700 !important;
}
.dark-theme .hero h1,
.dark-theme .typing-text,
.dark-theme .hero-content .typing-text,
.dark-theme #typingTitle {
color: var(--text-secondary) !important;
}
.hero p:not(.hero-subtitle) {
font-size: 1.2rem;
color: var(--text-secondary);
max-width: 800px;
margin: 0 auto 2rem;
}
.hero-buttons {
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.hero-buttons .btn-outline {
border-radius: 9999px;
padding: 0.75rem 2rem;
font-size: 1rem;
background: transparent;
color: var(--text);
border: 1px solid var(--border-color);
}
.hero-buttons .btn-outline:hover {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-2px);
}
@media (max-width: 768px) {
.hero-buttons {
flex-direction: column;
gap: 1rem;
}
.hero-buttons .cta-primary,
.hero-buttons .cta-secondary {
width: 100%;
}
}
.stats-section {
padding: 4rem 2rem;
background: var(--dark-alt);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.stat-card {
background: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 2rem;
text-align: center;
transition: transform 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 0.5rem;
}
.stat-label {
color: var(--text-secondary);
font-size: 1.1rem;
}
.features {
padding: 4rem 2rem;
background: var(--dark);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.feature-card {
background: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 2rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') no-repeat;
background-size: cover;
background-position: center;
opacity: 0.05;
z-index: 0;
}
.feature-card > * {
position: relative;
z-index: 1;
}
.feature-card:hover {
transform: translateY(-5px);
border-color: var(--primary);
}
.feature-icon {
font-size: 2rem;
color: var(--primary);
margin-bottom: 1rem;
}
.feature-icon .viz-icon {
width: 3.5rem !important;
height: 3.5rem !important;
color: var(--primary);
}
@media (max-width: 768px) {
.features-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 1rem;
}
.feature-card {
padding: 1.5rem;
}
.feature-icon {
font-size: 1.5rem;
margin-bottom: 0.75rem;
}
.feature-icon .viz-icon {
width: 4rem !important;
height: 4rem !important;
}
.feature-icon .data-quality-icon {
width: 3rem !important;
height: 3rem !important;
}
.feature-icon .converter-icon {
width: 3rem !important;
height: 3rem !important;
}
}
@media (max-width: 480px) {
.features-grid {
gap: 1rem;
padding: 0 0.5rem;
}
.feature-card {
padding: 1.25rem;
}
.feature-icon {
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
.feature-icon .viz-icon {
width: 3.5rem !important;
height: 3.5rem !important;
}
.feature-icon .data-quality-icon {
width: 2.5rem !important;
height: 2.5rem !important;
}
.feature-icon .converter-icon {
width: 2.5rem !important;
height: 2.5rem !important;
}
}
.feature-icon .data-quality-icon {
width: 3.5rem !important;
height: 3.5rem !important;
color: var(--primary);
}
.feature-icon .converter-icon {
width: 3.5rem !important;
height: 3.5rem !important;
color: var(--primary);
}
.feature-title {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--text);
}
.feature-description {
color: var(--text-secondary);
line-height: 1.6;
}
.hero:has(.hero-content) {
display: flex;
align-items: center;
justify-content: center;
gap: 3rem;
padding: 4rem 4rem;
text-align: left;
}
.hero-content {
flex: 0 0 50%;
max-width: 50%;
}
.hero-image {
flex: 0 0 45%;
max-width: 45%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
}
.hero:has(.hero-content) .hero-content h1 {
font-size: clamp(2.5rem, 3.5vw, 3rem) !important;
font-weight: 700 !important;
line-height: 1.2;
margin-bottom: 2rem !important;
color: var(--hero-title-color) !important;
}
.hero:has(.hero-content) .hero-content p:not(.hero-subtitle) {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 2.5rem;
max-width: 550px;
margin-left: 0;
}
.hero-image .svg-illustration {
width: 100%;
height: auto;
}
.dark-theme .hero-image .svg-illustration {
filter: drop-shadow(0px 10px 30px rgba(33, 136, 255, 0.2));
}
.hero-image .svg-illustration path {
fill: var(--dark-component);
stroke: var(--primary);
stroke-width: 1.5;
transition: all 0.4s ease;
opacity: 0.8;
cursor: pointer;
}
.dark-theme .hero-image .svg-illustration path {
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.hero-image .svg-illustration path:hover {
fill: var(--primary);
opacity: 0.5;
filter: none;
stroke-width: 2;
transform: scale(1.01);
}
.hero-image .svg-illustration circle {
fill: var(--secondary);
stroke: var(--primary);
stroke-width: 2;
}
.dark-theme .hero-image .svg-illustration circle {
filter: drop-shadow(0 0 8px rgba(46, 160, 67, 0.6));
}
.hero-image .svg-illustration line {
stroke: var(--primary);
stroke-width: 2;
opacity: 0.6;
}
.dark-theme .hero-image .svg-illustration line {
filter: drop-shadow(0 0 6px rgba(33, 136, 255, 0.4));
}
.hero-image .svg-illustration text {
fill: var(--text-secondary);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 500;
}
.hero-image .svg-illustration circle[fill="#ffa28b"] {
fill: var(--primary);
opacity: 0.7;
}
.hero-image .svg-illustration circle[stroke="#30363d"] {
stroke: var(--border-color);
fill: none;
opacity: 0.3;
}
.hero-image .svg-illustration line[stroke="#30363d"] {
stroke: var(--border-color);
opacity: 0.2;
}
@keyframes rotateGlow {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotateGlowDark {
0% {
transform: rotate(0deg);
filter: drop-shadow(0 0 4px rgba(33, 136, 255, 0.3));
}
50% {
filter: drop-shadow(0 0 8px rgba(33, 136, 255, 0.6));
}
100% {
transform: rotate(360deg);
filter: drop-shadow(0 0 4px rgba(33, 136, 255, 0.3));
}
}
.hero-image .svg-illustration circle[stroke="#30363d"] {
animation: rotateGlow 20s linear infinite;
}
.dark-theme .hero-image .svg-illustration circle[stroke="#30363d"] {
animation: rotateGlowDark 20s linear infinite;
}
@keyframes departmentGlow {
0%, 100% {
stroke-width: 1.5;
}
50% {
stroke-width: 2;
}
}
@keyframes departmentGlowDark {
0%, 100% {
filter: drop-shadow(0 0 0px rgba(33, 136, 255, 0));
stroke-width: 1.5;
}
50% {
filter: drop-shadow(0 0 10px rgba(33, 136, 255, 0.5));
stroke-width: 2;
}
}
.hero-image .svg-illustration path[id^="HT-"] {
animation: departmentGlow 4s ease-in-out infinite;
}
.dark-theme .hero-image .svg-illustration path[id^="HT-"] {
animation: departmentGlowDark 4s ease-in-out infinite;
}
.hero-image .svg-illustration path[id^="HT-"]:nth-child(1) { animation-delay: 0s; }
.hero-image .svg-illustration path[id^="HT-"]:nth-child(2) { animation-delay: 0.5s; }
.hero-image .svg-illustration path[id^="HT-"]:nth-child(3) { animation-delay: 1s; }
.hero-image .svg-illustration path[id^="HT-"]:nth-child(4) { animation-delay: 1.5s; }
.hero-image .svg-illustration path[id^="HT-"]:nth-child(5) { animation-delay: 2s; }
.hero-image .svg-illustration path[id^="HT-"]:nth-child(6) { animation-delay: 2.5s; }
.hero-image .svg-illustration path[id^="HT-"]:nth-child(7) { animation-delay: 3s; }
.hero-image .svg-illustration path[id^="HT-"]:nth-child(8) { animation-delay: 3.5s; }
.hero-image .svg-illustration path[id^="HT-"]:nth-child(9) { animation-delay: 4s; }
.hero-image .svg-illustration path[id^="HT-"]:nth-child(10) { animation-delay: 4.5s; }
@keyframes labelFade {
0% {
opacity: 0;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.hero-image .svg-illustration text {
animation: labelFade 2s ease-out forwards;
animation-delay: 1s;
}
@keyframes gridPulse {
0%, 100% {
opacity: 0.1;
}
50% {
opacity: 0.3;
}
}
.hero-image .svg-illustration line[stroke="#30363d"] {
animation: gridPulse 6s ease-in-out infinite;
}
.hero-image .svg-illustration path[id^="HT-"] {
background: linear-gradient(45deg, var(--primary), var(--secondary));
background-size: 200% 200%;
animation: departmentGlow 4s ease-in-out infinite, gradientShift 8s ease-in-out infinite;
}
.dark-theme .hero-image .svg-illustration path[id^="HT-"] {
animation: departmentGlowDark 4s ease-in-out infinite, gradientShift 8s ease-in-out infinite;
}
@keyframes gradientShift {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes mapBreathe {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
}
.hero-image .svg-illustration {
animation: mapBreathe 10s ease-in-out infinite;
}
.hero-image .svg-illustration::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 20%, rgba(33, 136, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(46, 160, 67, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(33, 136, 255, 0.05) 0%, transparent 50%);
animation: dataFlow 15s ease-in-out infinite;
pointer-events: none;
}
@keyframes dataFlow {
0%, 100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 0.6;
transform: scale(1.1);
}
}
.hero-image .svg-illustration::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(33, 136, 255, 0.1) 50%,
transparent 100%);
animation: scanLine 8s ease-in-out infinite;
pointer-events: none;
}
@keyframes scanLine {
0% {
left: -100%;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@keyframes modernPulse {
0%, 100% {
transform: scale(1);
}
25% {
transform: scale(1.01);
}
50% {
transform: scale(1.02);
}
75% {
transform: scale(1.01);
}
}
@keyframes modernPulseDark {
0%, 100% {
transform: scale(1);
filter: drop-shadow(0 0 0px rgba(33, 136, 255, 0));
}
25% {
transform: scale(1.01);
filter: drop-shadow(0 0 5px rgba(33, 136, 255, 0.3));
}
50% {
transform: scale(1.02);
filter: drop-shadow(0 0 8px rgba(33, 136, 255, 0.5));
}
75% {
transform: scale(1.01);
filter: drop-shadow(0 0 5px rgba(33, 136, 255, 0.3));
}
}
.hero-image .svg-illustration path[id^="HT-"] {
animation: modernPulse 6s ease-in-out infinite;
}
.dark-theme .hero-image .svg-illustration path[id^="HT-"] {
animation: modernPulseDark 6s ease-in-out infinite;
}
@keyframes connectionFlow {
0% {
stroke-dasharray: 0 100;
opacity: 0;
}
50% {
opacity: 0.8;
}
100% {
stroke-dasharray: 100 0;
opacity: 0.4;
}
}
.hero-image .svg-illustration path:focus {
outline: none;
transform: scale(1.05);
}
.dark-theme .hero-image .svg-illustration path:focus {
filter: drop-shadow(0 0 15px rgba(33, 136, 255, 0.8));
}
@keyframes progressiveLoad {
0% {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.hero-image .svg-illustration path[id^="HT-"]:nth-child(1) { animation-delay: 0.1s; }
.hero-image .svg-illustration path[id^="HT-"]:nth-child(2) { animation-delay: 0.2s; }
.hero-image .svg-illustration path[id^="HT-"]:nth-child(3) { animation-delay: 0.3s; }
.hero-image .svg-illustration path[id^="HT-"]:nth-child(4) { animation-delay: 0.4s; }
.hero-image .svg-illustration path[id^="HT-"]:nth-child(5) { animation-delay: 0.5s; }
.hero-image .svg-illustration path[id^="HT-"]:nth-child(6) { animation-delay: 0.6s; }
.hero-image .svg-illustration path[id^="HT-"]:nth-child(7) { animation-delay: 0.7s; }
.hero-image .svg-illustration path[id^="HT-"]:nth-child(8) { animation-delay: 0.8s; }
.hero-image .svg-illustration path[id^="HT-"]:nth-child(9) { animation-delay: 0.9s; }
.hero-image .svg-illustration path[id^="HT-"]:nth-child(10) { animation-delay: 1s; }
.hero-image .svg-illustration {
perspective: 1000px;
transform-style: preserve-3d;
}
.hero-image .svg-illustration path {
transform: translateZ(0);
transition: transform 0.3s ease, filter 0.3s ease;
}
.hero-image .svg-illustration path:hover {
transform: translateZ(10px) scale(1.02);
}
@keyframes modernBreathe {
0%, 100% {
transform: scale(1) rotateX(0deg);
}
50% {
transform: scale(1.01) rotateX(1deg);
}
}
.hero-image .svg-illustration {
animation: modernBreathe 12s ease-in-out infinite;
}
.hero-map-tooltip {
position: fixed;
z-index: 10000;
pointer-events: auto;
background: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 6px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
min-width: 210px;
max-width: 250px;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease;
overflow: visible;
padding-bottom: 10px;
}
.hero-map-tooltip::after {
content: '';
position: absolute;
bottom: -10px;
left: var(--pointer-left, 50%);
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid var(--dark-component);
z-index: 1;
}
.hero-map-tooltip::before {
content: '';
position: absolute;
bottom: -11px;
left: var(--pointer-left, 50%);
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-top: 11px solid var(--border-color);
z-index: 0;
}
.hero-map-tooltip.pointer-left::before {
border-left: none;
border-right: 10px solid var(--border-color);
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
left: -11px;
top: var(--pointer-top, 50%);
bottom: auto;
transform: translateY(-50%);
}
.hero-map-tooltip.pointer-left::after {
border-left: none;
border-right: 10px solid var(--dark-component);
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
left: -10px;
top: var(--pointer-top, 50%);
bottom: auto;
transform: translateY(-50%);
}
.hero-map-tooltip.pointer-right::before {
border-right: none;
border-left: 10px solid var(--border-color);
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
right: -11px;
left: auto;
top: var(--pointer-top, 50%);
bottom: auto;
transform: translateY(-50%);
}
.hero-map-tooltip.pointer-right::after {
border-right: none;
border-left: 10px solid var(--dark-component);
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
right: -10px;
left: auto;
top: var(--pointer-top, 50%);
bottom: auto;
transform: translateY(-50%);
}
.hero-map-tooltip.visible {
opacity: 1;
transform: translateY(0);
}
.tooltip-icon-wrapper {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
width: 28px;
height: 28px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(33, 136, 255, 0.4);
z-index: 1;
}
.tooltip-icon {
color: white;
font-size: 12px;
}
.tooltip-content {
padding: 1.25rem 1rem 0.75rem;
padding-top: 1.55rem;
}
.tooltip-header {
text-align: center;
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-color);
background: rgba(33, 136, 255, 0.03);
border-radius: 4px 4px 0 0;
margin: -1.25rem -1rem 0.5rem -1rem;
margin-top: -1.75rem;
padding: 0.5rem;
padding-top: 1.35rem;
}
.tooltip-department-name {
font-size: 0.875rem;
font-weight: 700;
color: var(--text);
margin-bottom: 0.15rem;
}
.tooltip-department-label {
font-size: 0.65rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.tooltip-body {
margin-bottom: 0.5rem;
}
.tooltip-info-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.35rem;
}
.tooltip-info-item:last-child {
margin-bottom: 0;
}
.tooltip-label {
font-size: 0.65rem;
color: var(--text-secondary);
}
.tooltip-value {
font-size: 0.75rem;
font-weight: 600;
color: var(--text);
}
.tooltip-footer {
display: flex;
align-items: center;
justify-content: center;
padding-top: 0.5rem;
border-top: 1px solid var(--border-color);
font-size: 0.65rem;
color: var(--text-secondary);
font-weight: 500;
}
.hero .search-box {
position: relative;
background: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 12px;
transition: all 0.3s ease;
max-width: 500px;
overflow: hidden;
}
.hero .search-box:hover,
.hero .search-box:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(33, 136, 255, 0.1);
}
@media (max-width: 768px) {
.hero .search-box:focus-within {
box-shadow: none;
}
}
.hero .search-box input {
width: 100%;
background: transparent;
border: none;
outline: none;
color: var(--text);
font-size: 1rem;
padding: 1rem 5rem 1rem 1.25rem;
}
.hero .search-box input::placeholder {
color: var(--text-secondary);
}
.hero .search-box button {
position: absolute;
right: 0;
top: 0;
height: 100%;
background: var(--primary);
color: white;
border: none;
border-radius: 0;
padding: 0 1.5rem;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.hero .search-box button:hover {
background: var(--primary-hover);
}
.hero .search-box button i {
font-size: 1.1rem;
}
.hero-stats {
display: flex;
justify-content: center;
align-items: center;
gap: 3rem;
margin-top: 2rem;
flex-wrap: nowrap;
overflow: hidden;
padding: 0.5rem 0;
position: relative;
}
.hero-stats-content {
display: flex;
gap: 3rem;
animation: scrollStats 12s linear infinite;
white-space: nowrap;
width: max-content;
}
@keyframes scrollStats {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-33.333%);
}
}
.hero-stat-item {
text-align: center;
padding: 0;
background: none;
border: none;
backdrop-filter: none;
transition: none;
min-width: auto;
flex-shrink: 0;
}
.hero-stat-item:hover {
background: none;
transform: none;
box-shadow: none;
}
.hero-stat-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 0.25rem;
line-height: 1;
}
.hero-stat-label {
font-size: 1rem;
color: var(--text-secondary);
font-weight: 500;
line-height: 1.2;
}
@media (max-width: 992px) {
.hero:has(.hero-content) {
flex-direction: column;
text-align: center;
padding: 4rem 2rem;
}
.hero-content, .hero-image {
flex: 1 1 100%;
max-width: 100%;
}
.hero:has(.hero-content) .hero-content p {
margin: 0 auto 2.5rem;
}
.hero .search-box {
margin: 0 auto;
}
.hero-image {
margin-top: 2rem;
max-width: 450px;
}
.hero-stats {
gap: 2rem;
margin-top: 1.5rem;
}
.hero-stats-content {
gap: 2rem;
animation-duration: 10s;
width: max-content;
}
.hero-stat-item {
min-width: auto;
padding: 0;
}
.hero-stat-number {
font-size: 2rem;
}
.hero-stat-label {
font-size: 0.9rem;
}
}
@media (max-width: 768px) {
.hero-stats {
gap: 1.5rem;
margin-top: 1rem;
}
.hero-stats-content {
gap: 1.5rem;
animation-duration: 8s;
}
.hero-stat-number {
font-size: 1.8rem;
}
.hero-stat-label {
font-size: 0.85rem;
}
}
@media (max-width: 480px) {
.hero-stats {
gap: 1rem;
margin-top: 0.75rem;
}
.hero-stats-content {
gap: 1rem;
animation-duration: 6s;
}
.hero-stat-number {
font-size: 1.5rem;
}
.hero-stat-label {
font-size: 0.8rem;
}
}
.charts-section {
padding: 3rem 2rem;
background: var(--bg);
}
.charts-container {
max-width: 1200px;
margin: 0 auto;
}
.charts-header {
text-align: center;
margin-bottom: 2.5rem;
}
.charts-title {
font-size: 2rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 0.75rem;
}
.dark-theme .charts-title {
color: var(--text);
}
.charts-subtitle {
color: var(--text-secondary);
font-size: 1rem;
max-width: 600px;
margin: 0 auto;
line-height: 1.5;
}
.chart-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.chart-card {
background: var(--dark);
border-radius: 12px;
box-shadow: none;
padding: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid rgba(17, 24, 39, 0.06);
position: relative;
overflow: hidden;
}
.chart-card.scroll-fade {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
transition-delay: var(--scroll-fade-delay, 0ms);
}
.chart-card.scroll-fade.scroll-fade-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.chart-card.scroll-fade,
.chart-card.scroll-fade.scroll-fade-visible {
opacity: 1;
transform: none;
transition: none;
}
}
.chart-card:hover {
transform: none;
box-shadow: none;
}
@media (max-width: 768px) {
.chart-card canvas {
image-rendering: -webkit-optimize-contrast !important;
image-rendering: crisp-edges !important;
image-rendering: pixelated !important;
image-rendering: high-quality !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
filter: contrast(1.2) brightness(1.1) saturate(1.15) !important;
transform: translateZ(0) !important;
backface-visibility: hidden !important;
-webkit-backface-visibility: hidden !important;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.chart-card canvas {
image-rendering: -webkit-optimize-contrast !important;
image-rendering: crisp-edges !important;
filter: contrast(1.25) brightness(1.12) saturate(1.2) !important;
}
}
.dark-theme .chart-card canvas {
filter: contrast(1.3) brightness(1.15) saturate(1.2) !important;
}
.pie-canvas {
image-rendering: -webkit-optimize-contrast !important;
image-rendering: crisp-edges !important;
image-rendering: high-quality !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
filter: contrast(1.2) brightness(1.1) saturate(1.15) !important;
transform: translateZ(0) !important;
backface-visibility: hidden !important;
-webkit-backface-visibility: hidden !important;
}
@media screen and (-webkit-min-device-pixel-ratio: 1) {
.chart-card canvas,
.pie-canvas {
image-rendering: -webkit-optimize-contrast !important;
image-rendering: crisp-edges !important;
image-rendering: pixelated !important;
image-rendering: high-quality !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
filter: contrast(1.3) brightness(1.15) saturate(1.25) !important;
transform: translateZ(0) !important;
backface-visibility: hidden !important;
-webkit-backface-visibility: hidden !important;
-webkit-transform: translateZ(0) !important;
will-change: transform !important;
}
}
@supports (-webkit-appearance: none) {
.chart-card canvas,
.pie-canvas {
image-rendering: -webkit-optimize-contrast !important;
image-rendering: crisp-edges !important;
image-rendering: high-quality !important;
-webkit-font-smoothing: antialiased !important;
filter: contrast(1.25) brightness(1.12) saturate(1.2) !important;
transform: translate3d(0, 0, 0) !important;
-webkit-transform: translate3d(0, 0, 0) !important;
backface-visibility: hidden !important;
-webkit-backface-visibility: hidden !important;
perspective: 1000px !important;
-webkit-perspective: 1000px !important;
}
}
}
.chart-card.exporting {
border: none !important;
box-shadow: none !important;
}
.dark-theme .chart-card {
background: var(--dark);
border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
@media (min-width: 769px) {
.light-theme .chart-card {
border: 1px solid rgba(17, 24, 39, 0.06) !important;
background: var(--dark);
box-shadow: none;
}
}
.chart-card canvas {
max-height: 220px !important;
width: 100% !important;
height: auto !important;
border-radius: 4px;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
image-rendering: pixelated;
image-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
filter: contrast(1.1) brightness(1.02);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.chart-card canvas {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
filter: contrast(1.15) brightness(1.05) saturate(1.1);
}
}
.chart-card.exporting canvas {
image-rendering: auto;
filter: contrast(1.2) brightness(1.08) saturate(1.15);
}
@media (max-width: 600px) {
.pie-canvas {
width: 100% !important;
max-width: 100vw;
min-width: 120px;
aspect-ratio: 1 / 1 !important;
height: auto !important;
border-radius: 12px;
padding: 0 !important;
margin: 0 auto !important;
background: transparent !important;
box-shadow: none !important;
display: block;
}
.chart-card:has(.pie-canvas) {
border-radius: 20px;
padding: 0.5rem 0.5rem 1rem 0.5rem;
box-shadow: none;
border: 1px solid rgba(17, 24, 39, 0.08);
}
.dark-theme .chart-card:has(.pie-canvas) {
border: 1px solid rgba(255, 255, 255, 0.08);
background: var(--dark);
}
.chart-card canvas:not(.pie-canvas) {
width: 100% !important;
min-width: 120px;
max-width: 100vw;
height: 240px !important;
border-radius: 12px;
padding: 0.2rem;
display: block;
margin: 0 auto;
}
}
.key-data-section {
padding: 4rem 2rem 0;
background: var(--dark);
}
.key-data-container {
max-width: 1200px;
margin: 0 auto;
}
.key-data-header {
text-align: center;
margin-bottom: 3rem;
}
.key-data-title {
font-size: 2.5rem;
color: var(--text);
margin-bottom: 1rem;
}
.key-data-subtitle {
color: var(--text-secondary);
font-size: 1.2rem;
max-width: 800px;
margin: 0 auto;
}
.key-data-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2.5rem 3rem;
margin-top: 2rem;
justify-items: center;
}
.key-data-card {
background: none;
border: none;
border-radius: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.4rem;
width: 100%;
max-width: 320px;
}
.key-data-card::before {
content: none;
}
.key-data-card:hover {
transform: none;
border-color: transparent;
box-shadow: none;
}
.light-theme .key-data-card::before {
background: url('data:image/svg+xml;utf8,') no-repeat;
background-size: cover;
background-position: center;
}
.key-data-card:hover::before {
opacity: 0.1;
}
.key-data-card > * {
position: static;
z-index: auto;
}
.key-data-icon {
display: none;
}
.key-data-value {
font-family: 'Palanquin', sans-serif;
font-size: clamp(2.2rem, 4vw, 2.8rem);
font-weight: 500;
color: #334f74;
line-height: 1.1;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.key-data-value .prefix,
.key-data-value .suffix,
.key-data-value .counter {
font-family: inherit;
font-weight: inherit;
letter-spacing: inherit;
}
.key-data-trend {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.95rem;
padding: 0.2rem 0.6rem;
border-radius: 999px;
margin-top: 0.2rem;
font-family: 'Palanquin', sans-serif;
font-weight: 500;
background: rgba(46, 160, 67, 0.12);
color: var(--success);
justify-content: center;
}
.key-data-trend i {
font-size: 0.85rem;
}
.trend-up {
color: var(--success);
}
.trend-down {
color: #f85149;
background: rgba(248, 81, 73, 0.12);
}
.key-data-label {
font-family: 'Palanquin', sans-serif;
font-size: 1.05rem;
color: var(--text);
letter-spacing: 0.01em;
}
.key-data-description {
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.6;
max-width: 22rem;
}
.dark-theme .key-data-value,
.dark-theme .key-data-label {
color: #ffffff;
}
@media (max-width: 1024px) {
.key-data-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
}
.key-data-value {
font-size: clamp(2rem, 4vw, 2.4rem);
}
.key-data-description {
font-size: 0.9rem;
}
}
@media (max-width: 768px) {
.key-data-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
}
.key-data-value {
font-size: clamp(1.8rem, 5vw, 2.2rem);
}
}
@media (max-width: 480px) {
.key-data-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
justify-items: center;
gap: 1.25rem;
}
.key-data-value {
font-size: 1.9rem;
}
}
.subsection-title {
font-size: 1.7rem;
color: var(--hero-title-color);
margin-bottom: 2.5rem;
margin-top: 2rem;
text-align: left;
}
@media (max-width: 768px) {
.subsection-title {
font-size: 1.4rem;
margin-bottom: 2rem;
margin-top: 1.5rem;
}
}
@media (max-width: 480px) {
.subsection-title {
font-size: 1.2rem;
margin-bottom: 1.5rem;
margin-top: 1rem;
}
}
.pie-canvas {
width: 280px !important;
height: 280px !important;
max-width: 100%;
max-height: 280px;
display: block;
margin: 0 auto;
}
.btn-primary {
background: var(--primary);
color: #fff;
border: none;
border-radius: 9999px;
font-weight: 600;
font-size: 1rem;
padding: 0.75rem 2rem;
transition: background 0.3s, transform 0.2s;
cursor: pointer;
}
.btn-primary:hover {
background: var(--primary-hover);
color: #fff;
transform: translateY(-2px);
}
a.btn,
a.btn-primary {
text-decoration: none;
}
@media (max-width: 600px) {
.chart-grid {
grid-template-columns: 1fr;
gap: 1rem;
overflow-x: auto;
padding-bottom: 1rem;
-webkit-overflow-scrolling: touch;
}
.chart-card {
min-width: 260px;
max-width: 100vw;
padding: 0.5rem;
}
.pie-canvas, .chart-card canvas {
width: 100% !important;
height: 240px !important;
max-width: 100vw;
min-width: 180px;
display: block;
margin: 0 auto;
}
}
.chart-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
flex-wrap: wrap;
gap: 0.5rem;
}
.chart-header-left {
display: flex;
align-items: center;
flex: 1;
}
.chart-icon {
width: 32px;
height: 32px;
background: rgba(33, 136, 255, 0.1);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
font-size: 1rem;
flex-shrink: 0;
margin-right: 0.75rem;
}
.light-theme .chart-icon {
color: var(--text-secondary);
background: rgba(107, 114, 128, 0.1);
}
.dark-theme .chart-icon {
color: var(--primary);
}
.chart-title {
font-size: 1.1rem;
color: var(--text-secondary);
font-weight: 600;
margin: 0;
letter-spacing: 0.02em;
line-height: 1.3;
}
.dark-theme .chart-title {
color: var(--text);
}
.chart-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.chart-download-btn {
width: 32px;
height: 32px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text-secondary);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.875rem;
}
.chart-download-btn:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
transform: translateY(-1px);
}
.chart-download-btn:active {
transform: translateY(0);
}
.chart-download-btn.csv {
background: var(--bg);
border-color: var(--border);
color: var(--text-secondary);
}
.chart-download-btn.csv:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
transform: translateY(-1px);
}
.chart-download-btn.share {
background: var(--bg);
border-color: var(--border);
color: var(--text-secondary);
}
.chart-download-btn.share:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
transform: translateY(-1px);
}
.share-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(13, 17, 23, 0.7);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
border-radius: 12px;
}
.light-theme .share-modal-overlay {
background-color: rgba(51, 79, 116, 0.4);
}
.share-modal-overlay.show {
opacity: 1;
visibility: visible;
}
.share-modal {
background: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2);
max-width: 200px;
width: auto;
min-width: 180px;
overflow: hidden;
transform: scale(0.9);
transition: transform 0.3s ease;
z-index: 1001;
}
.share-modal-overlay.show .share-modal {
transform: scale(1);
}
.share-modal-header {
padding: 0 16px;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: center;
align-items: center;
background: var(--dark-alt);
height: 28px;
}
.share-modal-title {
font-size: 16px;
font-weight: 700;
color: var(--primary);
margin: 0;
}
.light-theme .share-modal-title {
color: var(--text-secondary);
}
.share-modal-content {
padding: 0;
background: var(--dark-component);
}
.share-option {
display: flex;
align-items: center;
padding: 12px 16px;
text-decoration: none;
color: var(--text-primary);
transition: all 0.2s ease;
border: none;
background: none;
width: 100%;
text-align: left;
font-size: 13px;
cursor: pointer;
border-bottom: 1px solid var(--border-color);
}
.share-option:last-child {
border-bottom: none;
}
.share-option:hover {
background-color: var(--dark-alt);
color: white;
}
.light-theme .share-option:hover {
background-color: var(--border-color);
color: var(--text);
transform: translateX(2px);
}
.share-option:active {
background-color: var(--primary);
color: white;
}
.share-option-icon {
width: 16px;
height: 16px;
margin-right: 12px;
flex-shrink: 0;
color: var(--text-secondary);
transition: color 0.2s ease;
}
.share-option:hover .share-option-icon {
color: var(--primary);
}
.light-theme .share-option:hover .share-option-icon {
color: var(--text);
transform: scale(1.1);
}
.share-option:active .share-option-icon {
color: white;
}
.share-option-text {
flex: 1;
font-weight: 500;
}
@media (max-width: 480px) {
.share-modal {
max-width: 180px;
min-width: 160px;
}
.share-modal-header {
padding: 0 12px;
}
.share-option {
padding: 10px 12px;
}
}
.chart-description {
margin-bottom: 0.5rem;
padding: 0.5rem;
background: var(--bg);
border-radius: 6px;
}
.chart-description p {
margin: 0;
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.5;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
word-spacing: 0.02em;
letter-spacing: 0.01em;
}
.chart-footer {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid var(--border);
font-size: 0.75rem;
color: var(--text-secondary);
letter-spacing: 0.01em;
line-height: 1.4;
}
.chart-source {
font-weight: 500;
}
.chart-last-update {
opacity: 0.8;
}
.about-data-modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
z-index: 1050;
}
.dark-theme .about-data-modal-overlay {
background: rgba(8, 11, 17, 0.65);
}
.about-data-modal-overlay.show {
opacity: 1;
visibility: visible;
}
.about-data-modal {
position: relative;
width: min(640px, 100%);
max-height: 70vh;
display: flex;
flex-direction: column;
background: var(--dark-component);
border-radius: 18px;
padding: 1.75rem;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
color: var(--text);
transform: translateY(12px);
opacity: 0;
transition: transform 0.25s ease, opacity 0.25s ease;
border: 1px solid var(--border-color);
}
.about-data-modal-overlay.show .about-data-modal {
transform: translateY(0);
opacity: 1;
}
.about-data-close {
position: absolute;
top: 12px;
right: 12px;
border: none;
background: transparent;
color: var(--text-secondary);
font-size: 1.25rem;
cursor: pointer;
padding: 0.25rem;
line-height: 1;
transition: color 0.2s ease, transform 0.2s ease;
}
.about-data-close:hover,
.about-data-close:focus-visible {
color: var(--primary);
transform: scale(1.05);
outline: none;
}
.about-data-header {
margin-bottom: 1.25rem;
flex-shrink: 0;
}
.about-data-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0;
color: var(--text);
}
.about-data-dataset {
margin: 0.35rem 0 0;
color: var(--text-secondary);
font-size: 0.875rem;
line-height: 1.4;
flex-shrink: 0;
}
.about-data-sections {
display: flex;
flex-direction: column;
gap: 1rem;
overflow-y: auto;
padding-right: 0.5rem;
scrollbar-width: thin;
scrollbar-color: var(--border-color) transparent;
}
.about-data-sections::-webkit-scrollbar {
width: 8px;
}
.about-data-sections::-webkit-scrollbar-track {
background: transparent;
border-radius: 4px;
}
.about-data-sections::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 4px;
}
.about-data-sections::-webkit-scrollbar-thumb:hover {
background: var(--text-secondary);
}
.about-data-section {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.about-data-label {
font-size: 0.675rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
color: var(--text-secondary);
}
.about-data-value {
font-size: 0.9rem;
color: var(--text);
line-height: 1.5;
}
.about-data-value a {
color: var(--primary);
font-weight: 600;
text-decoration: none;
word-break: break-word;
}
.about-data-value a:hover,
.about-data-value a:focus-visible {
text-decoration: underline;
outline: none;
}
.about-data-note {
margin-top: 1.25rem;
font-size: 0.8rem;
color: var(--text-secondary);
line-height: 1.5;
border-top: 1px solid var(--border-color);
padding-top: 1rem;
}
@media (max-width: 600px) {
.about-data-modal {
padding: 1.25rem;
border-radius: 14px;
max-height: 70vh;
}
.about-data-title {
font-size: 1.125rem;
}
.about-data-sections {
scrollbar-width: none;
padding-right: 0.25rem;
}
.about-data-sections::-webkit-scrollbar {
display: none;
}
}
.modal-open {
overflow: hidden;
}
.modal-open #backToTop {
pointer-events: none;
}
.pie-canvas {
border-radius: 16px;
padding: 0 !important;
margin: 0 auto !important;
background: transparent !important;
box-shadow: none !important;
display: block;
}
.chart-card:has(.pie-canvas) {
border-radius: 22px;
padding: 1.2rem 1.2rem 2rem 1.2rem;
box-shadow: none;
border: 1px solid rgba(17, 24, 39, 0.08);
}
.dark-theme .chart-card:has(.pie-canvas) {
border: 1px solid rgba(255, 255, 255, 0.08);
background: var(--dark);
}
.education-highlight,
.geography-highlight,
.energy-highlight,
.health-highlight,
.demography-highlight {
display: flex;
gap: 2.5rem;
align-items: stretch;
margin-bottom: 2.5rem;
}
#energy .energy-highlight:last-of-type {
margin-bottom: 0;
}
.education-highlight-info,
.geography-highlight-info,
.energy-highlight-info,
.health-highlight-info,
.demography-highlight-info {
flex: 0 0 410px;
max-width: 410px;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.education-highlight-title,
.geography-highlight-title,
.energy-highlight-title,
.health-highlight-title,
.demography-highlight-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-secondary);
}
.dark-theme .education-highlight-title,
.dark-theme .geography-highlight-title,
.dark-theme .energy-highlight-title,
.dark-theme .health-highlight-title,
.dark-theme .demography-highlight-title {
color: var(--text);
}
.education-highlight-subtitle,
.geography-highlight-subtitle,
.energy-highlight-subtitle,
.health-highlight-subtitle,
.demography-highlight-subtitle {
font-size: 0.95rem;
color: var(--text-secondary, #4b5563);
line-height: 1.6;
}
.education-stat-group,
.geography-stat-group,
.energy-stat-group,
.health-stat-group,
.demography-stat-group {
display: flex;
gap: 1.5rem;
}
.education-stat,
.geography-stat,
.energy-stat,
.health-stat,
.demography-stat {
display: flex;
flex-direction: column;
gap: 0.25rem;
font-family: 'Palanquin', sans-serif;
}
.education-stat-value,
.geography-stat-value,
.energy-stat-value,
.health-stat-value,
.demography-stat-value {
font-size: 2.25rem;
font-weight: 400;
color: #334f74;
font-family: 'Palanquin', sans-serif;
}
.dark-theme .education-stat-value,
.dark-theme .geography-stat-value,
.dark-theme .energy-stat-value,
.dark-theme .health-stat-value,
.dark-theme .demography-stat-value {
color: #ffffff;
}
.education-stat-meta,
.geography-stat-meta,
.energy-stat-meta,
.health-stat-meta,
.demography-stat-meta {
font-size: 0.85rem;
color: var(--text-secondary, #4b5563);
display: flex;
flex-direction: column;
line-height: 1.3;
}
.education-highlight-description,
.geography-highlight-description,
.energy-highlight-description,
.health-highlight-description,
.demography-highlight-description {
font-size: 0.95rem;
line-height: 1.7;
color: var(--text-secondary);
}
.education-highlight-source,
.geography-highlight-source,
.energy-highlight-source,
.health-highlight-source,
.demography-highlight-source {
font-size: 0.85rem;
color: var(--text-secondary, #6b7280);
}
.education-highlight-source a,
.geography-highlight-source a,
.energy-highlight-source a,
.health-highlight-source a,
.demography-highlight-source a {
color: var(--primary, #1f64ff);
text-decoration: none;
}
.education-highlight-source a:hover,
.geography-highlight-source a:hover,
.energy-highlight-source a:hover,
.health-highlight-source a:hover,
.demography-highlight-source a:hover {
text-decoration: underline;
}
.education-highlight-chart,
.geography-highlight-chart,
.energy-highlight-chart,
.health-highlight-chart,
.demography-highlight-chart {
flex: 1;
min-width: 0;
}
.education-chart-card,
.geography-chart-card,
.energy-chart-card,
.health-chart-card,
.demography-chart-card {
height: 100%;
}
.geography-chart-card,
.energy-chart-card,
.health-chart-card,
.demography-chart-card {
position: relative;
}
.treemap-placeholder {
width: 100%;
height: 240px;
max-width: 100%;
}
.treemap-tooltip {
position: absolute;
background: rgba(248, 250, 252, 0.95);
color: #111827;
padding: 10px 12px;
border-radius: 8px;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
font-size: 0.85rem;
z-index: 20;
backdrop-filter: blur(6px);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.25);
max-width: 220px;
}
.dark-theme .treemap-tooltip {
background: rgba(13, 17, 23, 0.95);
color: #f9fafb;
}
.treemap-tooltip.visible {
opacity: 1;
}
.treemap-tooltip-title {
display: block;
font-weight: 600;
margin-bottom: 4px;
font-size: 0.95rem;
}
.treemap-tooltip-value {
display: block;
font-weight: 500;
margin-bottom: 2px;
}
.treemap-tooltip-extra {
display: block;
font-size: 0.75rem;
opacity: 0.85;
}
@media (max-width: 900px) {
.charts-section {
padding-bottom: 0.50rem;
}
.education-highlight,
.geography-highlight,
.energy-highlight,
.health-highlight,
.demography-highlight {
flex-direction: column;
}
.education-highlight-info,
.geography-highlight-info,
.energy-highlight-info,
.health-highlight-info,
.demography-highlight-info {
flex: initial;
max-width: 100%;
}
.education-stat-group,
.geography-stat-group,
.energy-stat-group,
.health-stat-group,
.demography-stat-group {
flex-direction: row;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
text-align: center;
}
.education-stat-group .education-stat,
.geography-stat-group .geography-stat,
.energy-stat-group .energy-stat,
.health-stat-group .health-stat,
.demography-stat-group .demography-stat {
flex: 1 1 calc(50% - 1rem);
min-width: 140px;
align-items: center;
}
}
.back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 44px;
height: 44px;
background-color: var(--primary);
will-change: transform;
contain: layout style paint;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
opacity: 0;
transition: opacity 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 9999;
}
.back-to-top.visible {
opacity: 1;
}
.back-to-top:hover {
background-color: var(--primary-hover);
}
@media (max-width: 768px) {
.back-to-top {
width: 48px;
height: 48px;
bottom: 1.5rem;
right: 1.5rem;
z-index: 9999;
padding: 8px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
pointer-events: auto;
touch-action: manipulation;
}
.back-to-top i {
font-size: 1.2rem;
}
}
@media (max-width: 480px) {
.back-to-top {
width: 50px;
height: 50px;
bottom: 1rem;
right: 1rem;
padding: 10px;
}
.back-to-top i {
font-size: 1.3rem;
}
}
.content-wrapper {
max-width: 1000px;
margin: 0 auto;
padding: 3rem 2rem;
}
.page-header-cookies {
margin-bottom: 3rem;
position: relative;
}
.page-title-cookies {
font-size: 2.5rem;
color: var(--text);
margin-bottom: 1.5rem;
font-weight: 600;
position: relative;
}
.page-title-cookies:after {
content: "";
position: absolute;
left: 0;
bottom: -0.5rem;
height: 3px;
width: 50px;
background-color: var(--primary);
border-radius: 2px;
}
.page-description-cookies {
font-size: clamp(1rem, 2.5vw, 1.1rem);
color: var(--text-secondary);
max-width: 100%;
line-height: 1.6;
}
.content-section {
margin-bottom: 2rem;
padding: 1.5rem;
background-color: var(--dark-alt);
border: 1px solid var(--border-color);
border-radius: 8px;
width: 100%;
box-sizing: border-box;
}
.content-section h2,
.content-section h3 {
color: var(--text);
}
.section-title {
font-size: clamp(1.2rem, 3vw, 1.5rem);
color: var(--text);
margin-bottom: 1.25rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.section-title i {
color: var(--primary);
font-size: 1.2em;
}
.content-text {
color: var(--text);
margin-bottom: 1.25rem;
line-height: 1.7;
font-size: clamp(0.9rem, 2vw, 1rem);
}
.content-list {
list-style: none;
margin-bottom: 1.25rem;
padding-left: 0;
}
.content-list li {
margin-bottom: 0.75rem;
padding-left: 1.25rem;
position: relative;
font-size: clamp(0.9rem, 2vw, 1rem);
line-height: 1.6;
}
.content-list li:before {
content: "•";
color: var(--primary);
font-weight: bold;
position: absolute;
left: 0;
}
.cookie-types {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
margin: 1.5rem 0;
}
.cookie-card {
background-color: var(--dark);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 1.25rem;
width: 100%;
box-sizing: border-box;
}
.cookie-card h4 {
font-size: clamp(1.1rem, 2.5vw, 1.2rem);
color: var(--text);
margin-bottom: 0.75rem;
font-weight: 600;
line-height: 1.3;
}
.cookie-card p {
color: var(--text-secondary);
font-size: clamp(0.85rem, 2vw, 0.95rem);
margin-bottom: 0.75rem;
line-height: 1.5;
}
.cookie-card .badge {
display: inline-flex;
padding: 0.25rem 0.6rem;
background-color: rgba(33, 136, 255, 0.1);
color: var(--primary);
border-radius: 2rem;
font-size: clamp(0.7rem, 1.8vw, 0.8rem);
font-weight: 600;
margin-bottom: 0.5rem;
}
.preferences-section {
background-color: var(--dark);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1.25rem;
margin: 1.5rem 0;
width: 100%;
box-sizing: border-box;
}
.preference-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 1rem 0;
border-bottom: 1px solid var(--border-color);
gap: 1rem;
}
.preference-item:last-child {
border-bottom: none;
}
.preference-item .preference-info {
flex: 1;
min-width: 0;
}
.preference-item h4 {
font-size: clamp(1rem, 2.2vw, 1.1rem);
color: var(--text);
margin-bottom: 0.5rem;
line-height: 1.3;
}
.preference-item p {
color: var(--text-secondary);
font-size: clamp(0.8rem, 2vw, 0.9rem);
line-height: 1.4;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 50px;
height: 26px;
flex-shrink: 0;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--dark-component);
transition: .4s;
border-radius: 34px;
border: 1px solid var(--border-color);
}
.toggle-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: var(--text-secondary);
transition: .4s;
border-radius: 50%;
}
input:checked + .toggle-slider {
background-color: var(--success);
}
input:checked + .toggle-slider:before {
transform: translateX(24px);
background-color: white;
}
.cta-button {
display: inline-block;
background-color: var(--primary);
border: var(--primary);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
font-size: clamp(0.9rem, 2vw, 1rem);
transition: background-color 0.2s ease;
text-align: center;
cursor: pointer;
width: 100%;
box-sizing: border-box;;
}
.cta-button:hover {
background-color: var(--primary-hover);
}
.consent-buttons {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.5rem;
}
.consent-buttons .btn-secondary {
background-color: transparent;
border: 1px solid var(--border-color);
color: var(--text);
padding: 0.75rem 1.5rem;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
font-size: clamp(0.9rem, 2vw, 1rem);
transition: background-color 0.2s ease;
text-align: center;
cursor: pointer;
width: 100%;
box-sizing: border-box;
}
.consent-buttons .btn-secondary:hover {
background-color: var(--border-color);
}
@media (max-width: 360px) {
.content-wrapper {
padding: 1.5rem 0.75rem;
}
.content-section {
padding: 1rem;
}
.preferences-section {
padding: 1rem;
}
.cookie-card {
padding: 1rem;
}
.preference-item {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.toggle-switch {
align-self: flex-end;
}
.page-title:after {
width: 40px;
height: 2px;
}
}
@media (min-width: 361px) and (max-width: 480px) {
.content-wrapper {
padding: 2rem 1rem;
}
.cookie-types {
grid-template-columns: 1fr;
}
.consent-buttons {
flex-direction: column;
}
}
@media (min-width: 481px) and (max-width: 768px) {
.content-wrapper {
padding: 2.5rem 1.5rem;
}
.cookie-types {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.consent-buttons {
flex-direction: row;
justify-content: center;
}
.cta-button {
width: auto;
min-width: 200px;
}
.consent-buttons .btn-secondary {
width: auto;
min-width: 200px;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.content-wrapper {
padding: 3rem 2rem;
}
.cookie-types {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.preference-item {
align-items: center;
}
.toggle-switch {
width: 60px;
height: 30px;
}
.toggle-slider:before {
height: 22px;
width: 22px;
left: 4px;
bottom: 3px;
}
input:checked + .toggle-slider:before {
transform: translateX(29px);
}
}
@media (min-width: 1025px) {
.content-wrapper {
padding: 3rem 2rem;
}
.cookie-types {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.consent-buttons {
flex-direction: row;
justify-content: flex-start;
}
.cta-button {
width: auto;
}
.consent-buttons .btn-secondary {
width: auto;
}
}
@media (max-width: 375px) {
.guide-list, .tools-grid {
grid-template-columns: 1fr !important;
}
.guide-item-link, .tool-card-link {
padding-left: 0.5rem;
padding-right: 0.5rem;
min-width: 0;
box-sizing: border-box;
}
}
@media (max-width: 320px) {
.guide-list, .tools-grid {
grid-template-columns: 1fr !important;
}
.guide-item-link, .tool-card-link {
padding-left: 0.2rem;
padding-right: 0.2rem;
min-width: 0;
box-sizing: border-box;
}
}
@media (max-height: 500px) and (orientation: landscape) {
.content-wrapper {
padding: 1rem;
}
.page-header {
margin-bottom: 1rem;
}
.content-section {
margin-bottom: 1rem;
padding: 1rem;
}
.page-title {
margin-bottom: 0.5rem;
}
.page-description {
font-size: 0.9rem;
}
}
@media (hover: none) and (pointer: coarse) {
.toggle-switch {
min-width: 50px;
min-height: 30px;
}
.cta-button,
.consent-buttons .btn-secondary {
min-height: 44px;
padding: 0.8rem 1.5rem;
}
}
.page-title-legal {
background-color: var(--dark-alt);
padding: 3rem 2rem;
border-bottom: 1px solid var(--border-color);
text-align: center;
}
.page-title-legal h1 {
font-size: 2.5rem;
font-weight: 600;
color: var(--text);
margin-bottom: 1rem;
}
.page-title-legal p {
color: var(--text-secondary);
font-size: 1.1rem;
max-width: 800px;
margin: 0 auto;
}
.legal-content {
max-width: 1000px;
margin: 0 auto;
padding: 3rem 2rem;
}
.content-wrapper .legal-content {
padding-top: 0.25rem;
}
.legal-section {
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border-color);
}
.legal-section:last-child {
border-bottom: none;
}
.legal-section h2 {
font-size: 1.75rem;
font-weight: 600;
color: var(--text);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.legal-section h2 i {
color: var(--primary);
}
.legal-section h3 {
font-size: 1.3rem;
font-weight: 600;
color: var(--text);
margin: 1.5rem 0 1rem;
}
.legal-section p {
margin-bottom: 1rem;
line-height: 1.6;
}
.legal-section ul, .legal-section ol {
margin: 1rem 0 1.5rem 1.5rem;
}
.legal-section li {
margin-bottom: 0.5rem;
}
.legal-card {
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 1.5rem;
margin: 1.5rem 0;
}
.legal-card h4 {
font-size: 1.1rem;
font-weight: 600;
color: var(--text);
margin-bottom: 1rem;
}
.legal-card p:last-child {
margin-bottom: 0;
}
.highlight-box-legal {
background-color: rgba(33, 136, 255, 0.1);
border-left: 4px solid var(--primary);
padding: 1.5rem;
margin: 1.5rem 0;
border-radius: 0 6px 6px 0;
}
.highlight-box-legal p:last-child {
margin-bottom: 0;
}
.contact-info-legal {
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin: 1.5rem 0;
}
.contact-item-legal {
flex: 1;
min-width: 250px;
}
.contact-item-legal h4 {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.1rem;
color: var(--text);
margin-bottom: 0.75rem;
}
.contact-item-legal h4 i {
color: var(--primary);
}
.contact-item-legal p {
margin-bottom: 0.5rem;
}
.main-content-policy {
max-width: 1000px;
margin: 0 auto;
padding: 3rem 2rem;
}
.page-header-policy {
text-align: center;
margin-bottom: 3rem;
}
.page-header-policy h1 {
font-size: 2.5rem;
color: white;
margin-bottom: 1rem;
}
.page-header-policy p {
color: var(--text-secondary);
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
}
.policy-section {
margin-bottom: 3rem;
background-color: var(--dark-alt);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 2rem;
}
.policy-section h2 {
color: var(--text);
font-size: 1.5rem;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-color);
}
.policy-section h3 {
color: var(--primary);
font-size: 1.25rem;
margin: 1.5rem 0 1rem;
}
.policy-section p {
margin-bottom: 1rem;
line-height: 1.6;
}
.policy-section ul {
margin: 1rem 0 1.5rem 1.5rem;
}
.policy-section li {
margin-bottom: 0.5rem;
}
.highlight-box-policy {
background-color: rgba(33, 136, 255, 0.1);
border-left: 4px solid var(--primary);
padding: 1.5rem;
margin: 1.5rem 0;
border-radius: 0 4px 4px 0;
}
.highlight-box-policy p {
margin-bottom: 0;
}
.last-update-policy {
font-style: italic;
color: var(--text-secondary);
text-align: center;
margin-top: 3rem;
}
.info-icon-policy {
color: var(--primary);
margin-right: 0.5rem;
}
.conditions-page {
max-width: 1000px;
margin: 0 auto;
padding: 3rem 2rem 5rem;
}
.page-header-conditions {
margin-bottom: 3rem;
position: relative;
}
.page-header-conditions h1 {
font-size: 2.5rem;
color: var(--text);
margin-bottom: 1rem;
font-weight: 600;
}
.page-header-conditions .subtitle {
font-size: 1.1rem;
color: var(--text-secondary);
max-width: 700px;
}
.page-header-conditions .updated-date-conditions {
position: absolute;
top: 10px;
right: 0;
background-color: var(--dark-component);
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 0.9rem;
color: var(--text-secondary);
}
.page-header-conditions .mobile-date {
display: none;
position: static;
margin: 1rem 0;
text-align: center;
}
.page-header-conditions .desktop-date {
display: block;
}
@media (max-width: 768px) {
.page-header-conditions .mobile-date {
display: block;
}
.page-header-conditions .desktop-date {
display: none;
}
}
.conditions-content {
background-color: var(--dark-alt);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 2rem;
margin-bottom: 2rem;
}
.toc-conditions {
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 2rem;
}
.toc-conditions h2 {
font-size: 1.2rem;
margin-bottom: 1rem;
color: var(--text);
}
.toc-conditions ul {
list-style: none;
}
.toc-conditions li {
margin-bottom: 0.8rem;
}
.toc-conditions a {
color: var(--primary);
text-decoration: none;
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.toc-conditions a:hover {
text-decoration: underline;
color: var(--primary-hover);
}
.section-conditions {
margin-bottom: 3rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border-color);
}
.section-conditions:last-child {
border-bottom: none;
}
.section-conditions h2 {
font-size: 1.6rem;
color: var(--text);
margin-bottom: 1.5rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.75rem;
}
.section-conditions h2 i {
color: var(--primary);
font-size: 1.4rem;
}
.section-conditions h3 {
font-size: 1.25rem;
color: var(--text);
margin: 1.5rem 0 1rem;
font-weight: 500;
}
.section-conditions p {
margin-bottom: 1rem;
line-height: 1.6;
}
.section-conditions ul, .section-conditions ol {
margin: 1rem 0 1.5rem 1.5rem;
}
.section-conditions li {
margin-bottom: 0.5rem;
}
.section-conditions .highlight-conditions {
background-color: rgba(33, 136, 255, 0.1);
border-left: 4px solid var(--primary);
padding: 1rem;
border-radius: 0 4px 4px 0;
margin: 1.5rem 0;
}
.section-conditions .warning-conditions {
background-color: rgba(255, 162, 139, 0.1);
border-left: 4px solid var(--secondary);
padding: 1rem;
border-radius: 0 4px 4px 0;
margin: 1.5rem 0;
}
.contact-box-conditions {
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1.5rem;
margin-top: 2rem;
text-align: center;
}
.contact-box-conditions h3 {
font-size: 1.3rem;
margin-bottom: 1rem;
color: var(--text);
}
.contact-box-conditions p {
margin-bottom: 1.5rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.contact-box-conditions .contact-btn-conditions {
display: inline-block;
background-color: var(--primary);
color: white;
padding: 0.75rem 1.5rem;
font-weight: 500;
border-radius: 6px;
text-decoration: none;
transition: background-color 0.2s ease;
}
.contact-box-conditions .contact-btn-conditions:hover {
background-color: var(--primary-hover);
}
.page-title-contact {
background-color: var(--dark-alt);
border-bottom: 1px solid var(--border-color);
padding: 3rem 2rem;
text-align: center;
}
.page-title-container-contact {
max-width: 1280px;
margin: 0 auto;
}
.page-title-contact h1 {
font-size: clamp(2.5rem, 4.5vw, 3.5rem);
margin-bottom: 2rem;
color: var(--text);
font-weight: 700;
}
.dark-theme .page-title-contact h1 {
color: var(--text-secondary);
}
.light-theme .page-title-contact h1 {
color: #334f74;
}
.page-title-contact p {
font-size: clamp(1.1rem, 2vw, 1.4rem);
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
}
.contact-section {
padding: 4rem 2rem;
max-width: 1280px;
margin: 0 auto;
}
.contact-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
}
.contact-form-container {
background-color: var(--dark-alt);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 2rem;
}
.contact-info-container {
background-color: var(--dark-alt);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 2rem;
}
.section-title-contact {
font-size: 1.5rem;
font-weight: 600;
color: var(--text);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
}
.section-title-contact i {
margin-right: 0.75rem;
color: var(--secondary);
}
.form-group-contact {
margin-bottom: 1.5rem;
}
.form-label-contact {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--text);
}
.form-control-contact {
width: 100%;
padding: 0.75rem;
border-radius: 6px;
border: 1px solid var(--border-color);
background-color: var(--dark);
color: var(--text);
font-size: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control-contact:focus {
border-color: var(--primary);
outline: none;
box-shadow: 0 0 0 3px rgba(33, 136, 255, 0.3);
}
.form-select-contact {
width: 100%;
padding: 0.75rem;
border-radius: 6px;
border: 1px solid var(--border-color);
background-color: var(--dark);
color: var(--text);
font-size: 1rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238b949e' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 12px;
}
.form-checkbox-contact {
display: flex;
align-items: flex-start;
margin-bottom: 1.5rem;
}
.form-checkbox-contact input {
margin-top: 0.25rem;
margin-right: 0.75rem;
}
.form-checkbox-contact label {
font-size: 0.9rem;
color: var(--text-secondary);
}
.contact-item {
margin-bottom: 2rem;
}
.contact-item-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--text);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
}
.contact-item-title i {
width: 1.5rem;
margin-right: 0.75rem;
color: var(--primary);
}
.contact-item-content {
padding-left: 2.25rem;
color: var(--text-secondary);
}
.contact-link {
display: block;
color: var(--primary);
text-decoration: none;
margin-bottom: 0.25rem;
transition: color 0.2s ease;
}
.contact-link:hover {
color: var(--primary-hover);
text-decoration: underline;
}
.contact-hours {
font-size: 0.9rem;
margin-top: 0.5rem;
color: var(--text-secondary);
}
.map-container {
margin-top: 2rem;
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
height: 250px;
background-color: var(--dark-component);
position: relative;
}
.map-placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--text-secondary);
font-size: 0.9rem;
}
.map-placeholder i {
font-size: 2rem;
margin-bottom: 1rem;
color: var(--primary);
}
.btn-contact {
background-color: var(--primary);
color: white;
padding: 0.4rem 1rem;
border: 1px solid rgba(240, 246, 252, 0.1);
border-radius: 9999px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s ease;
text-decoration: none;
}
.btn-contact:hover {
background: var(--primary-hover);
transform: translateY(-2px);
}
@media (max-width: 768px) {
.page-title-contact h1 {
font-size: 2rem;
}
.contact-container {
grid-template-columns: 1fr;
}
.contact-form-container {
order: 2;
}
.contact-info-container {
order: 1;
}
}
.btn-about {
background: var(--gradient-secondary);
color: white;
padding: 0.5rem 1.25rem;
border: none;
border-radius: 9999px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
box-shadow: 0 4px 12px rgba(46, 160, 67, 0.3);
}
.btn-about:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(46, 160, 67, 0.4);
}
.about-header {
background-color: var(--dark-alt);
padding: 3rem 2rem;
text-align: center;
border-bottom: 1px solid var(--border-color);
}
.about-header-content {
max-width: 1280px;
margin: 0 auto;
}
.about-header h1 {
font-size: clamp(2.5rem, 4.5vw, 3.5rem);
margin-bottom: 2rem;
color: var(--text);
font-weight: 700;
animation: fadeInScale 0.8s ease-out;
}
.dark-theme .about-header h1 {
color: var(--text-secondary);
}
.light-theme .about-header h1 {
color: #334f74;
}
.about-header p {
font-size: clamp(1.1rem, 2vw, 1.4rem);
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
animation: fadeInScale 0.8s ease-out 0.2s both;
}
.about-section {
padding: 6rem 2rem;
max-width: 1400px;
margin: 0 auto;
margin-bottom: 2rem;
}
.section-title-about {
font-size: clamp(2rem, 4vw, 2.5rem);
margin-bottom: 3rem;
color: var(--text);
font-weight: 700;
text-align: center;
}
.mission-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
margin-bottom: 2.5rem;
}
.mission-content {
animation: slideInLeft 1s ease-out;
}
.mission-image {
display: flex;
align-items: center;
justify-content: center;
min-height: 500px;
position: relative;
animation: slideInRight 1s ease-out;
overflow: hidden;
}
.mission-image svg,
.mission-image img {
width: 100%;
height: auto;
max-width: 650px;
max-height: 500px;
}
.mission-image:hover {
transition: all 0.3s ease;
}
.mission-image:hover svg,
.mission-image:hover img {
transition: transform 0.3s ease;
}
.mission-content h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
margin-bottom: 2rem;
color: var(--text);
font-weight: 700;
}
.mission-content p {
color: var(--text);
margin-bottom: 1.5rem;
font-size: clamp(1rem, 1.5vw, 1.1rem);
line-height: 1.8;
}
.values-grid-about {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
margin-bottom: 2rem;
}
.value-card-about {
background: var(--dark-component);
backdrop-filter: blur(15px);
border: 1px solid var(--border-color);
border-radius: 20px;
padding: 2.5rem;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.value-card-about:hover {
transform: translateY(-10px);
border-color: var(--primary);
box-shadow: 0 20px 40px rgba(33, 136, 255, 0.2);
}
.value-icon-about {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 1.5rem;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
position: relative;
z-index: 1;
}
.value-card-about:hover .value-icon {
background: var(--gradient-primary);
color: white;
transform: scale(1.1);
animation: pulse 2s infinite;
}
.value-card-about h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--text);
font-weight: 600;
position: relative;
z-index: 1;
}
.value-card-about p {
color: var(--text-secondary);
line-height: 1.7;
position: relative;
z-index: 1;
}
.timeline-section-about {
margin-bottom: 2rem;
}
.timeline-about {
position: relative;
padding-left: 35px;
max-width: 800px;
margin: 0 auto;
}
.timeline-about::before {
content: '';
position: absolute;
left: 30px;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(to bottom, var(--primary, #2188ff), rgba(33, 136, 255, 0.2));
border-radius: 2px;
}
.timeline-item-about {
position: relative;
margin-bottom: 50px;
padding-left: 45px;
}
.timeline-item-about:last-child {
margin-bottom: 0;
}
.timeline-item-about::before {
content: '';
position: absolute;
left: -16px;
top: 12px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
border: 4px solid var(--primary, #2188ff);
box-shadow: 0 0 0 4px var(--primary, #2188ff), 0 4px 12px rgba(33,136,255,0.18);
z-index: 1;
}
.timeline-date-about {
display: inline-block;
background: rgba(33, 136, 255, 0.08);
color: var(--primary, #2188ff);
padding: 8px 16px;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 12px;
border: 1px solid rgba(33, 136, 255, 0.15);
}
.timeline-content-about {
background: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 1.5rem 2rem;
margin-left: 0;
box-shadow: 0 2px 8px rgba(33,136,255,0.07);
position: relative;
overflow: hidden;
}
.timeline-content-about h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--text, #c9d1d9);
margin-bottom: 8px;
line-height: 1.3;
}
.timeline-content-about p {
color: #8b949e;
line-height: 1.7;
margin-bottom: 18px;
font-size: 1.05rem;
}
@media (max-width: 768px) {
.timeline-about {
padding-left: 16px;
}
.timeline-about::before {
left: 8px;
width: 2px;
}
.timeline-item-about {
padding-left: 32px;
}
.timeline-item-about::before {
left: -10px;
top: 8px;
width: 14px;
height: 14px;
}
.timeline-content-about h3 {
font-size: 1.15rem;
}
.timeline-content-about p {
font-size: 0.98rem;
}
}
@media (max-width: 900px) {
.timeline-item-about {
padding-right: 2rem;
padding-left: 2rem;
}
}
@media (max-width: 768px) {
.timeline-about::before {
left: 24px;
width: 4px;
transform: none;
}
.timeline-item-about {
width: 100%;
left: 0 !important;
padding-left: 3.5rem;
padding-right: 0;
text-align: left;
}
.timeline-item-about::after {
left: 24px;
top: 40px;
width: 20px;
height: 20px;
transform: translate(-50%, 0);
}
}
@media (max-width: 480px) {
.timeline-about::before {
left: 12px;
width: 2px;
}
.timeline-item-about {
padding-left: 2.2rem;
}
.timeline-item-about::after {
left: 12px;
width: 14px;
height: 14px;
}
}
.timeline-content-about {
background: var(--dark-component);
backdrop-filter: blur(15px);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 2rem;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.timeline-content-about:hover {
transform: translateY(-5px);
border-color: var(--primary);
box-shadow: 0 15px 30px rgba(33, 136, 255, 0.2);
}
.timeline-date-about {
font-size: 0.9rem;
color: var(--primary);
margin-bottom: 0.5rem;
font-weight: 600;
display: inline-block;
background: rgba(33, 136, 255, 0.1);
padding: 0.3rem 0.8rem;
border-radius: 20px;
position: relative;
z-index: 1;
}
.timeline-content-about h3 {
font-size: 1.25rem;
color: var(--text);
margin-bottom: 1rem;
font-weight: 600;
position: relative;
z-index: 1;
}
.timeline-content-about p {
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.6;
position: relative;
z-index: 1;
}
.cta-section-about {
padding: 6rem 2rem;
text-align: center;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
position: relative;
}
.cta-content-about {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.cta-section-about h2 {
font-size: clamp(2rem, 4vw, 3rem);
margin-bottom: 2rem;
color: var(--text);
font-weight: 700;
}
.cta-section-about p {
font-size: clamp(1.1rem, 2vw, 1.3rem);
margin-bottom: 3rem;
color: var(--text-secondary);
line-height: 1.6;
}
.cta-buttons-about {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.cta-buttons-about .btn-about {
padding: 1rem 2rem;
font-size: 1.1rem;
border-radius: 9999px;
min-width: 200px;
background: var(--gradient-primary) !important;
color: white !important;
border: none !important;
box-shadow: 0 4px 12px rgba(33, 136, 255, 0.3);
transition: all 0.3s ease;
}
.cta-buttons-about .btn-about:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(33, 136, 255, 0.4);
}
@media (max-width: 768px) {
.about-header {
padding: 6rem 1rem;
}
.about-header h1 {
font-size: 2rem;
}
.about-section {
padding: 4rem 1rem;
}
.mission-section {
display: flex;
flex-direction: column;
gap: 2rem;
align-items: stretch;
margin-bottom: 1.5rem;
}
.mission-content {
padding: 0 0.5rem 0.5rem 0.5rem;
text-align: left;
}
.mission-image {
display: none !important;
}
.values-grid-about {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.cta-buttons-about {
flex-direction: column;
align-items: center;
}
}
@media (max-width: 480px) {
.timeline-about::before {
left: 14px;
width: 2px;
}
.timeline-item-about {
padding-left: 2.2rem;
}
.timeline-item-about::after {
left: 15px;
width: 18px;
height: 18px;
top: calc(50% - 9px);
}
.timeline-content-about {
padding: 1.2rem;
font-size: 0.95rem;
}
.timeline-date-about {
font-size: 0.8rem;
padding: 0.2rem 0.6rem;
}
}
@media (max-width: 350px) {
.timeline-about {
padding-left: 6px;
}
.timeline-about::before {
left: 4px;
width: 2px;
}
.timeline-item-about {
padding-left: 20px;
}
.timeline-item-about::before {
left: -9px;
top: 6px;
width: 10px;
height: 10px;
border-width: 2px;
box-shadow: 0 0 0 1.5px var(--primary, #2188ff);
}
.timeline-content-about {
padding: 0.7rem 0.5rem;
font-size: 0.92rem;
}
.timeline-date-about {
font-size: 0.75rem;
padding: 4px 8px;
}
}
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: all 0.8s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
html {
scroll-behavior: smooth;
}
.loading {
opacity: 0.7;
pointer-events: none;
}
.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid var(--primary);
border-top: 2px solid transparent;
border-radius: 50%;
animation: rotate 1s linear infinite;
}
.section-separator-about {
border: none;
border-top: 2px solid var(--border-color);
margin: 2.5rem 0;
width: 100%;
opacity: 0.7;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animate-on-scroll {
opacity: 0;
animation: slideInUp 0.8s ease-out forwards;
}
.animate-on-scroll.animate-left {
animation: slideInLeft 0.8s ease-out forwards;
}
.animate-on-scroll.animate-right {
animation: slideInRight 0.8s ease-out forwards;
}
.sponsors-hero {
padding: 4rem 2rem;
max-width: 1280px;
margin: 0 auto;
text-align: center;
}
.sponsors-hero h1 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
font-weight: 600;
line-height: 1.2;
color: white;
}
.sponsors-hero p {
font-size: 1.25rem;
margin-bottom: 2rem;
color: var(--text-secondary);
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.support-content {
background-color: var(--dark-alt);
padding: 3rem 2rem;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.support-container {
max-width: 1000px;
margin: 0 auto;
}
.donation-methods {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.donation-method {
background-color: var(--dark);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 2rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: flex;
flex-direction: column;
align-items: center;
}
.donation-method-link {
text-decoration: none;
color: inherit;
cursor: pointer;
}
.donation-method-link:hover {
text-decoration: none;
color: inherit;
}
.donation-method:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
border-color: var(--primary);
}
.method-icon {
font-size: 2.5rem;
margin-bottom: 1.5rem;
color: var(--primary);
}
.donation-method h3 {
font-size: 1.25rem;
margin-bottom: 1rem;
color: var(--text);
}
.donation-method p {
color: var(--text-secondary);
margin-bottom: 1.5rem;
text-align: center;
}
.btn-donate {
background-color: var(--primary);
padding: 0.6rem 1.5rem;
border-radius: 9999px;
color: white;
font-weight: 600;
text-decoration: none;
transition: background-color 0.2s ease;
display: inline-block;
margin-top: auto;
}
.donation-method-link .btn-donate {
pointer-events: none;
}
.btn-donate:hover {
background-color: var(--primary-hover);
}
.bank-info {
background-color: var(--dark);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 2rem;
margin-top: 2rem;
}
.bank-info h3 {
font-size: 1.25rem;
margin-bottom: 1.5rem;
color: white;
text-align: center;
}
.bank-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
}
.bank-account {
padding: 1.5rem;
background-color: rgba(33, 136, 255, 0.1);
border-radius: 8px;
border: 1px solid var(--border-color);
}
.bank-account h4 {
margin-bottom: 1rem;
color: white;
font-size: 1.1rem;
}
.bank-account p {
margin-bottom: 0.5rem;
color: var(--text-secondary);
}
.bank-account p strong {
color: var(--text);
font-weight: 600;
}
.impact-section {
padding: 4rem 2rem;
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.impact-section h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
color: var(--text);
}
.impact-section p {
color: var(--text-secondary);
margin-bottom: 2rem;
font-size: 1.1rem;
}
.impact-items {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2rem;
margin-top: 2rem;
}
.impact-item {
max-width: 280px;
text-align: center;
}
.impact-icon {
font-size: 2rem;
color: var(--primary);
margin-bottom: 1rem;
}
.impact-item h3 {
color: var(--text);
margin-bottom: 0.5rem;
font-size: 1.2rem;
}
.impact-item p {
color: var(--text-secondary);
font-size: 0.9rem;
}
.contact-info-donate {
padding: 3rem 2rem;
text-align: center;
border-top: 1px solid var(--border-color);
}
.contact-info-donate h2 {
font-size: 1.8rem;
color: var(--text);
margin-bottom: 1.5rem;
}
.contact-info-donate p {
color: var(--text-secondary);
margin-bottom: 1.5rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.contact-email-donate {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--primary);
font-size: 1.2rem;
text-decoration: none;
}
.contact-email-donate:hover {
text-decoration: underline;
}
@media (max-width: 992px) {
.bank-details {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.sponsors-hero h1 {
font-size: 2rem;
}
.sponsors-hero p {
font-size: 1.1rem;
}
.donation-method {
padding: 1.5rem;
}
}
.modal-overlay {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(13,17,23,0.85);
z-index: 2000;
will-change: transform;
contain: layout style paint;
justify-content: center;
align-items: center;
}
.modal-overlay.active {
display: flex;
}
.modal {
background: var(--dark-component);
border-radius: 14px;
box-shadow: 0 8px 32px rgba(33,136,255,0.15);
max-width: 500px;
width: 420px;
padding: 2rem 1.2rem 1.2rem 1.2rem;
position: relative;
color: var(--text);
animation: slideInUp 0.3s cubic-bezier(0.23,1,0.32,1);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.2rem;
}
.modal-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--text);
}
.modal-close {
background: none;
border: none;
color: var(--text-secondary);
font-size: 1.5rem;
cursor: pointer;
transition: color 0.2s;
}
.modal-close:hover {
color: var(--primary);
}
.mobile-services-list {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.mobile-service {
background: var(--dark-alt);
border-radius: 8px;
padding: 1rem;
display: flex;
align-items: center;
gap: 1rem;
border: 1px solid var(--border-color);
}
.mobile-service-icon {
font-size: 2rem;
color: var(--primary);
min-width: 2.2rem;
text-align: center;
}
.mobile-service-info {
flex: 1;
}
.mobile-service-title {
font-weight: 600;
color: var(--text);
margin-bottom: 0.2rem;
}
.mobile-service-detail {
color: var(--text-secondary);
font-size: 0.97rem;
word-break: break-all;
}
@media (max-width: 480px) {
.modal {
width: 98vw;
padding: 1.2rem 0.5rem 0.7rem 0.5rem;
}
.modal-title {
font-size: 1.05rem;
}
.mobile-service {
padding: 0.7rem;
font-size: 0.97rem;
}
}
.page-header {
background-color: var(--dark-alt);
padding: 4rem 2rem;
text-align: center;
border-bottom: 1px solid var(--border-color);
margin-bottom: 5px;
}
.page-header-content {
max-width: 900px;
margin: 0 auto;
}
.page-header h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: white;
font-weight: 600;
}
.page-header p {
font-size: 1.2rem;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
}
.form-section {
max-width: 1000px;
margin: 0 auto;
padding: 3rem 2rem;
}
.form-container {
background-color: var(--dark-alt);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 3rem;
}
.form-header {
margin-bottom: 2rem;
text-align: center;
}
.form-header h2 {
color: var(--text);
font-size: 1.75rem;
margin-bottom: 0.5rem;
}
.form-header p {
color: var(--text-secondary);
font-size: 1rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.75rem;
color: var(--text);
font-weight: 600;
font-size: 1rem;
}
.required {
color: var(--warning);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 1rem;
border: 1px solid var(--border-color);
border-radius: 8px;
background-color: var(--dark);
color: var(--text);
font-size: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
@media (max-width: 768px) {
.form-group input,
.form-group select,
.form-group textarea {
font-size: 16px !important;
}
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(33, 136, 255, 0.2);
}
.form-group textarea {
resize: vertical;
min-height: 100px;
}
.form-group .help-text {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
color: var(--text-secondary);
margin-top: 0.25rem;
}
.char-counter {
font-size: 0.875rem;
color: var(--text-secondary);
margin-left: auto;
padding-left: 1rem;
font-weight: 500;
}
@media (max-width: 768px) {
.char-counter {
display: none;
}
}
.form-group input[type="date"] {
width: 100%;
max-width: 100%;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 3.5rem;
min-height: 3.5rem;
line-height: 1.5;
}
@media (max-width: 768px) {
.form-group input[type="date"] {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding: 1rem 0.75rem;
font-size: 16px;
box-sizing: border-box;
height: 3.5rem !important;
min-height: 3.5rem !important;
line-height: 1.5;
}
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.checkbox-group {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
}
.checkbox-group input[type="checkbox"] {
width: auto;
margin: 0;
}
.checkbox-group label {
margin: 0;
font-size: 0.9rem;
color: var(--text-secondary);
}
.form-actions {
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--border-color);
}
.btn-submit {
background-color: var(--primary);
color: white;
padding: 0.75rem 2rem;
border: none;
border-radius: 6px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.2s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.btn-submit:hover {
background-color: var(--primary-hover);
}
.btn-submit:disabled {
background-color: var(--text-secondary);
cursor: not-allowed;
}
.btn-cancel {
background-color: var(--dark-component);
color: var(--text);
padding: 0.75rem 2rem;
border: 1px solid var(--border-color);
border-radius: 6px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.2s ease;
text-decoration: none;
}
.btn-cancel:hover {
background-color: var(--border-color);
}
#message-container {
opacity: 0;
transform: translateY(-20px);
transition: all 0.3s ease;
}
#message-container.show {
opacity: 1;
transform: translateY(0);
}
#message-container.fade-out {
opacity: 0;
transform: translateY(-20px);
}
.message {
padding: 1rem;
border-radius: 6px;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
animation: slideIn 0.3s ease;
}
.message.success {
background-color: rgba(33, 136, 255, 0.1);
border: 1px solid rgba(33, 136, 255, 0.3);
color: #2188ff;
}
.message.error {
background-color: rgba(248, 81, 73, 0.05) !important;
border: 1px solid rgba(248, 81, 73, 0.2) !important;
color: #f85149;
}
.message.info {
background-color: rgba(33, 136, 255, 0.1);
border: 1px solid var(--primary);
color: #79c0ff;
}
.message i {
font-size: 1.2em;
flex-shrink: 0;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fa-spinner.fa-spin {
animation: spin 1s linear infinite;
}
.spinner {
display: inline-block;
animation: spin 1s linear infinite;
font-size: 1.2em;
}
.css-spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top: 2px solid #fff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.btn-submit:disabled {
opacity: 0.7;
cursor: not-allowed;
position: relative;
}
.btn-submit:disabled::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
pointer-events: none;
}
.guidelines-section {
background-color: var(--dark-alt);
padding: 3rem 2rem;
border-top: 1px solid var(--border-color);
}
.guidelines-container {
max-width: 1000px;
margin: 0 auto;
}
.guidelines-header {
text-align: center;
margin-bottom: 2rem;
}
.guidelines-header h2 {
color: var(--text);
font-size: 1.75rem;
margin-bottom: 0.5rem;
}
.guidelines-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.guideline-card {
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1.5rem;
}
.guideline-card h3 {
color: var(--text);
font-size: 1.25rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.guideline-card ul {
list-style: none;
padding-left: 0;
}
.guideline-card li {
color: var(--text-secondary);
margin-bottom: 0.5rem;
padding-left: 1.5rem;
position: relative;
}
.guideline-card li:before {
content: "•";
color: var(--primary);
font-weight: bold;
position: absolute;
left: 0;
}
@media (max-width: 768px) {
.page-header {
padding: 2rem 1rem;
}
.page-header h1 {
font-size: 1.8rem;
}
.page-header p {
font-size: 1rem;
}
.form-section {
padding: 2rem 1rem;
}
.form-container {
padding: 1.5rem;
}
.form-row {
grid-template-columns: 1fr;
}
.form-actions {
flex-direction: column;
gap: 0.75rem;
}
.btn-submit,
.btn-cancel {
width: 100%;
text-align: center;
justify-content: center;
}
.guidelines-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.guideline-card {
padding: 1.25rem;
}
}
@media (max-width: 320px) {
.page-header {
padding: 1.5rem 0.75rem;
}
.page-header h1 {
font-size: 1.5rem;
}
.form-section {
padding: 1.5rem 0.75rem;
}
.form-container {
padding: 1.25rem;
}
.form-header h2 {
font-size: 1.5rem;
}
.guidelines-section {
padding: 2rem 0.75rem;
}
.guidelines-header h2 {
font-size: 1.5rem;
}
}
.custom-select {
position: relative;
user-select: none;
width: 100%;
}
.custom-select-trigger {
padding: 0.75rem 2.5rem 0.75rem 0.75rem;
border: 1.5px solid var(--border-color);
border-radius: 8px;
background-color: var(--dark);
color: var(--text);
font-size: 1rem;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s;
box-shadow: 0 2px 8px rgba(33,136,255,0.04);
position: relative;
display: flex;
align-items: center;
min-height: 48px;
}
.custom-select-trigger:after {
content: '';
display: block;
position: absolute;
right: 1rem;
top: 50%;
width: 16px;
height: 16px;
pointer-events: none;
background: url('data:image/svg+xml;utf8,') no-repeat center/contain;
transform: translateY(-50%) rotate(0deg);
transition: transform 0.3s cubic-bezier(.4,2,.6,1), filter 0.2s;
filter: drop-shadow(0 1px 1px rgba(33,136,255,0.08));
}
.custom-select.open .custom-select-trigger:after {
transform: translateY(-50%) rotate(180deg);
filter: drop-shadow(0 2px 4px rgba(33,136,255,0.12));
}
.custom-select.open .custom-select-trigger {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(33, 136, 255, 0.13);
}
.custom-options {
display: block;
opacity: 0;
pointer-events: none;
position: absolute;
top: 110%;
left: 0;
width: 100%;
background: var(--dark-component);
border: 1.5px solid var(--border-color);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(33,136,255,0.10);
z-index: 1002;
max-height: 220px;
overflow-y: auto;
transform: translateY(-10px) scaleY(0.98);
transition: opacity 0.28s cubic-bezier(.4,2,.6,1), transform 0.28s cubic-bezier(.4,2,.6,1);
will-change: opacity, transform;
}
.custom-select.open .custom-options {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scaleY(1);
}
.custom-option {
padding: 0.75rem 1rem;
color: var(--text);
cursor: pointer;
font-size: 1rem;
border-radius: 4px;
margin: 2px 6px;
transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.custom-option:hover, .custom-option.selected {
background-color: rgba(33, 136, 255, 0.1);
color: #2188ff;
box-shadow: none;
padding-left: 1.5rem;
}
.custom-select.open .custom-select-trigger {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
@media (max-width: 768px) {
.custom-options {
max-height: 160px;
font-size: 1rem;
}
}
.custom-checkbox-label {
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
font-size: 1rem;
user-select: none;
}
.custom-checkbox-label input[type="checkbox"] {
display: none;
}
.custom-checkbox {
width: 28px;
height: 28px;
border: 2.5px solid var(--border-color);
border-radius: 7px;
background: var(--dark);
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.2s, box-shadow 0.2s;
position: relative;
}
.custom-checkbox-label input[type="checkbox"]:focus + .custom-checkbox {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(33,136,255,0.13);
}
.custom-checkbox:after {
content: '';
display: block;
width: 14px;
height: 14px;
border-radius: 3px;
background: var(--primary);
opacity: 0;
transform: scale(0.7);
transition: opacity 0.18s, transform 0.18s;
position: absolute;
left: 5px;
top: 5px;
}
.custom-checkbox-label input[type="checkbox"]:checked + .custom-checkbox:after {
opacity: 1;
transform: scale(1);
}
.custom-checkbox-label input[type="checkbox"]:checked + .custom-checkbox {
border-color: var(--primary);
}
@media (max-width: 768px) {
.custom-checkbox {
width: 24px;
height: 24px;
}
.custom-checkbox:after {
width: 12px;
height: 12px;
left: 4px;
top: 4px;
}
.custom-checkbox-label {
font-size: 0.98rem;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
.btns{
background-color: var(--primary);
color: white;
padding: 0.4rem 1rem;
border: 1px solid rgba(240, 246, 252, 0.1);
border-radius: 9999px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s ease;
text-decoration: none;
}
.btns:hover {
background-color: #0366d6;
}
.btns-primary {
background-color: var(--primary);
}
.btns-primary:hover {
background-color: var(--primary-hover);
}
.page-header-data {
background-color: var(--dark-alt);
padding: 3rem 2rem;
border-bottom: 1px solid var(--border-color);
}
.page-header-container {
max-width: 1280px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.data-page-header h1 {
font-size: 2.5rem;
color: var(--text);
margin-bottom: 1rem;
font-weight: 600;
}
.dark-theme .data-page-header h1 {
color: var(--text-secondary);
}
.light-theme .data-page-header h1 {
color: #334f74;
}
.page-header-data p {
font-size: 1.1rem;
color: var(--text-secondary);
max-width: 800px;
margin: 0 auto 1.5rem;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 2rem;
font-size: 0.9rem;
color: var(--text-secondary);
align-self: flex-start;
}
.breadcrumb a {
color: var(--text);
text-decoration: none;
transition: color 0.2s ease;
}
.breadcrumb a:hover {
color: var(--primary);
}
.breadcrumb i {
font-size: 0.8rem;
}
.search-section {
max-width: 1280px;
margin: 0 auto;
padding: 3rem 2rem;
}
.search-container-data {
background-color: var(--dark-alt);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 2rem;
margin-bottom: 3rem;
}
.desktop-only {
display: block;
}
.mobile-only {
display: none;
}
.search-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.search-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--text);
}
.search-box {
display: flex;
width: 100%;
margin-bottom: 1.5rem;
}
.search-box input {
flex: 1;
padding: 0.75rem 1rem;
border: 1px solid var(--border-color);
border-radius: 6px 0 0 6px;
background-color: var(--dark);
color: var(--text);
font-size: 1rem;
outline: none;
transition: border-color 0.3s ease;
}
.search-box input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(33, 136, 255, 0.1);
}
.search-box button {
background-color: var(--primary);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 0 6px 6px 0;
cursor: pointer;
font-weight: 600;
}
.search-box button:hover {
background-color: var(--primary-hover);
}
.search-advanced {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}
.search-group {
margin-bottom: 1rem;
}
.search-label {
display: block;
font-size: 0.9rem;
color: var(--text);
margin-bottom: 0.5rem;
font-weight: 500;
}
.search-select {
width: 100%;
padding: 0.6rem;
border-radius: 6px;
border: 1px solid var(--border-color);
background-color: var(--dark);
color: var(--text);
font-size: 0.9rem;
}
.search-date-range {
display: flex;
gap: 0.5rem;
}
.search-date-range input {
flex: 1;
padding: 0.6rem;
border-radius: 6px;
border: 1px solid var(--border-color);
background-color: var(--dark);
color: var(--text);
font-size: 16px;
}
.search-mobile.mobile-only .search-date-range input {
font-size: 16px !important;
}
input[name="year_start_mobile"],
input[name="year_end_mobile"] {
font-size: 16px !important;
}
.search-footer {
display: flex;
justify-content: space-between;
margin-top: 1.5rem;
align-items: center;
}
.search-tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.search-tag {
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 20px;
padding: 0.35rem 0.8rem;
font-size: 0.85rem;
color: var(--text);
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 0.4rem;
}
.search-tag:hover {
background-color: rgba(33, 136, 255, 0.1);
border-color: var(--primary);
color: white;
}
.search-tag i.remove {
font-size: 0.7rem;
}
.action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 4px;
color: var(--text);
transition: all 0.2s ease;
cursor: pointer;
}
.action-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
color: white;
}
.data-categories {
padding: 4rem 2rem;
background-color: var(--dark-alt);
border-top: 1px solid var(--border-color);
}
.categories-container {
max-width: 1280px;
margin: 0 auto;
}
.section-header {
text-align: center;
margin-bottom: 3rem;
}
.section-header h2 {
font-size: 2rem;
font-weight: 600;
color: var(--text);
margin-bottom: 1rem;
}
.light-theme .section-header h2 {
color: #334f74;
}
.section-header p {
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
font-size: 1.1rem;
}
.category-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
.category-card {
background-color: var(--dark);
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.category-card:hover {
transform: translateY(-4px);
border-color: var(--primary);
}
.category-image {
height: 160px;
background-color: var(--dark-component);
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: var(--primary);
}
.category-content {
padding: 1.5rem;
}
.category-card h3 {
font-size: 1.25rem;
font-weight: 600;
color: white;
margin-bottom: 0.75rem;
}
.category-card p {
color: var(--text-secondary);
font-size: 0.9rem;
margin-bottom: 1.5rem;
}
.category-stats {
display: flex;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.stat {
display: flex;
flex-direction: column;
align-items: center;
}
.stat-value {
font-size: 1.25rem;
font-weight: 600;
color: var(--text);
}
.stat-label {
font-size: 0.8rem;
color: var(--text-secondary);
}
.category-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.category-tag {
background-color: var(--dark-component);
color: var(--text-secondary);
border-radius: 20px;
padding: 0.3rem 0.8rem;
font-size: 0.8rem;
}
.category-card a {
color: var(--primary);
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 0.3rem;
}
.category-card a:hover {
color: var(--primary-hover);
text-decoration: underline;
}
.recent-data {
padding: 4rem 2rem;
background-color: var(--dark);
}
.recent-container {
max-width: 1280px;
margin: 0 auto;
}
.data-table-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.data-table-header h2 {
font-size: 1.8rem;
font-weight: 600;
color: var(--text);
}
.data-table-header a {
color: var(--primary);
text-decoration: none;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.3rem;
}
.data-table-header a:hover {
color: var(--primary-hover);
text-decoration: underline;
}
.table-header-actions {
display: flex;
align-items: center;
gap: 1rem;
}
.sort-link {
color: var(--primary);
text-decoration: none;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.8rem;
border-radius: 6px;
transition: all 0.3s ease;
background-color: rgba(33, 136, 255, 0.1);
border: 1px solid rgba(33, 136, 255, 0.2);
}
.sort-link:hover {
color: var(--primary-hover);
background-color: rgba(33, 136, 255, 0.15);
border-color: rgba(33, 136, 255, 0.3);
transform: translateY(-1px);
}
.sort-link i {
font-size: 0.9rem;
}
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table th {
text-align: left;
padding: 1rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--text-secondary);
border-bottom: 1px solid var(--border-color);
}
.data-table td {
padding: 1rem;
border-bottom: 1px solid var(--border-color);
font-size: 0.9rem;
color: var(--text);
}
.data-table tr:hover {
background-color: rgba(255, 255, 255, 0.02);
}
.data-table tr[onclick] {
cursor: pointer;
transition: background-color 0.2s ease;
}
.data-table tr[onclick]:hover {
background-color: rgba(255, 255, 255, 0.02);
}
.light-theme .data-table tr:hover {
background-color: rgba(33, 136, 255, 0.05);
}
.light-theme .data-table tr[onclick]:hover {
background-color: rgba(33, 136, 255, 0.05);
}
.document-title {
font-weight: 500;
color: var(--text);
}
.document-date {
color: var(--text-secondary);
}
.source-badge {
background-color: rgba(33, 136, 255, 0.1);
color: var(--primary);
padding: 0.3rem 0.6rem;
border-radius: 6px;
font-size: 0.8rem;
display: inline-block;
}
.status-badge {
padding: 0.3rem 0.6rem;
border-radius: 6px;
font-size: 0.8rem;
display: inline-block;
}
.status-verified {
background-color: rgba(35, 134, 54, 0.1);
color: var(--success);
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.85rem;
font-weight: 600;
display: inline-block;
}
.status-pending {
background-color: rgba(249, 197, 19, 0.1);
color: #f9c513;
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.85rem;
font-weight: 600;
display: inline-block;
white-space: nowrap;
}
.light-theme .status-verified {
background-color: rgba(35, 134, 54, 0.15);
color: #1e7e34;
border: 1px solid rgba(35, 134, 54, 0.2);
}
.light-theme .status-pending {
background-color: rgba(249, 197, 19, 0.15);
color: #b8860b;
border: 1px solid rgba(249, 197, 19, 0.3);
}
.action-button {
background-color: var(--dark-component);
border: 1px solid var(--border-color);
color: var(--text);
padding: 0.4rem 0.8rem;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.action-button:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.light-theme .action-button:hover {
background-color: rgba(33, 136, 255, 0.1);
border-color: var(--primary);
color: var(--primary);
}
.pagination {
display: flex;
justify-content: center;
margin-top: 2rem;
gap: 0.5rem;
}
.page-item {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text);
font-size: 0.9rem;
text-decoration: none;
}
.page-item.active {
background-color: var(--primary);
color: white;
border-color: var(--primary);
}
.page-item:hover:not(.active) {
background-color: var(--dark-component);
}
.featured-section {
background-color: var(--dark-alt);
padding: 4rem 2rem;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.featured-container {
max-width: 1280px;
margin: 0 auto;
}
.collection-section .section-title {
font-size: 1.75rem;
font-weight: 600;
color: var(--text);
margin-bottom: 2rem;
text-align: center;
}
.collection-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
}
.collection-card {
background-color: var(--dark);
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
transition: transform 0.3s ease;
}
.collection-card:hover {
transform: translateY(-5px);
}
.collection-image {
height: 150px;
background-color: var(--dark-component);
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid var(--border-color);
}
@media (max-width: 768px) {
.collection-image {
height: 150px !important;
background-color: var(--dark-component) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-bottom: 1px solid var(--border-color) !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
min-height: 150px !important;
}
.collection-card {
padding: 0 !important;
}
.collection-content {
padding: 1.5rem !important;
}
}
.collection-icon {
font-size: 3rem;
color: var(--primary);
}
.collection-content {
padding: 1.5rem;
}
.collection-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--text);
margin-bottom: 0.8rem;
}
.collection-desc {
color: var(--text-secondary);
font-size: 0.9rem;
margin-bottom: 1.2rem;
}
.collection-stats {
display: flex;
justify-content: space-between;
color: var(--text-secondary);
font-size: 0.85rem;
margin-bottom: 1.2rem;
}
.collection-stat {
display: flex;
align-items: center;
gap: 0.3rem;
}
.collection-footer {
text-align: center;
}
.btn-outline {
background-color: transparent;
border: 1px solid var(--primary);
color: var(--primary);
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
display: inline-block;
}
.btn-outline:hover {
background-color: var(--primary);
color: white;
}
.cta-section-data {
padding: 5rem 2rem;
background-color: var(--dark);
text-align: center;
}
.cta-container-data {
max-width: 900px;
margin: 0 auto;
background-color: var(--dark-alt);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 3rem 2rem;
}
.cta-section-data h2 {
font-size: 2.2rem;
font-weight: 600;
color: var(--text);
margin-bottom: 1rem;
}
.light-theme .cta-section-data h2 {
color: #334f74;
}
.cta-section-data p {
color: var(--text-secondary);
font-size: 1.1rem;
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-buttons-data {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.btn-large {
padding: 0.75rem 1.5rem;
font-size: 1rem;
}
.data-highlight-clickable {
display: block;
text-decoration: none;
color: inherit;
transition: all 0.2s ease;
}
.data-highlight-clickable:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.data-highlight-clickable:hover .data-highlight {
background-color: rgba(0, 0, 0, 0.05);
border-color: rgba(33, 136, 255, 0.3);
}
.data-highlight {
background-color: var(--dark-alt);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 2rem;
transition: all 0.3s ease;
}
.preferences-section {
background: var(--dark-alt);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 2rem;
margin: 2rem 0;
}
.preference-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 0;
border-bottom: 1px solid var(--border-color);
}
.preference-item:last-child {
border-bottom: none;
}
.preference-info h4 {
color: var(--text-primary);
margin: 0 0 0.5rem 0;
font-size: 1.1rem;
font-weight: 600;
}
.preference-info p {
color: var(--text-secondary);
margin: 0;
font-size: 0.9rem;
line-height: 1.4;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
.toggle-switch input:checked + .toggle-slider {
background-color: var(--primary);
}
.toggle-switch input:focus + .toggle-slider {
box-shadow: 0 0 1px var(--primary);
}
.toggle-switch input:checked + .toggle-slider:before {
transform: translateX(26px);
}
.toggle-switch input:disabled + .toggle-slider {
background-color: #666;
cursor: not-allowed;
}
.consent-buttons {
display: flex;
gap: 1rem;
margin-top: 2rem;
flex-wrap: wrap;
}
.consent-buttons .cta-button,
.consent-buttons .btn {
flex: 1;
min-width: 150px;
text-align: center;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 500;
transition: all 0.3s ease;
}
.consent-buttons .cta-button {
background: var(--primary);
color: white;
border: none;
transition: background 0.3s, transform 0.2s;
}
.consent-buttons .cta-button:hover {
background: var(--primary-hover);
transform: translateY(-2px);
}
.consent-buttons .btn-secondary {
background: transparent;
color: var(--text-primary);
border: 1px solid var(--border-color);
}
.consent-buttons .btn-secondary:hover {
background: var(--dark-alt);
border-color: var(--primary);
color: var(--primary);
}
@media (max-width: 768px) {
.preferences-section {
padding: 1.5rem;
margin: 1.5rem 0;
}
.preference-item {
flex-direction: row;
align-items: center;
gap: 1rem;
padding: 1rem 0;
}
.preference-info {
flex: 1;
}
.toggle-switch {
flex-shrink: 0;
}
.consent-buttons {
flex-direction: column;
gap: 0.75rem;
}
.consent-buttons .cta-button,
.consent-buttons .btn {
width: 100%;
min-width: auto;
}
}
.highlight-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.highlight-title {
font-size: 1.2rem;
color: var(--text);
font-weight: 600;
}
.highlight-info {
color: var(--text-secondary);
font-size: 0.9rem;
}
.highlight-body {
display: flex;
gap: 1.5rem;
align-items: center;
}
.highlight-icon {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
font-size: 1.5rem;
flex-shrink: 0;
}
.highlight-content {
flex: 1;
}
.highlight-desc {
color: var(--text);
margin-bottom: 1rem;
font-size: 0.95rem;
}
.highlight-meta {
display: flex;
justify-content: space-between;
align-items: center;
}
.highlight-tags {
display: flex;
gap: 0.5rem;
}
.data-summary {
background-color: var(--dark-alt);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 2rem;
}
.summary-title {
font-size: 1.2rem;
color: var(--text);
font-weight: 600;
margin-bottom: 1rem;
}
.summary-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.stat-cards {
background-color: var(--dark);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 1.2rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.stat-icons {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(--dark-component);
border: 1px solid var(--border-color);
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
margin-bottom: 1rem;
transition: all 0.3s ease;
}
.light-theme .stat-icons {
color: #334f74;
}
.stat-values {
font-size: 1.8rem;
font-weight: 700;
color: var(--text);
margin-bottom: 0.5rem;
}
.stat-labels {
color: var(--text-secondary);
font-size: 0.9rem;
}
.data-overview-container {
margin-bottom: 2rem;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
.data-overview-title {
text-align: left;
color: var(--text);
font-size: 2.25rem;
font-weight: 300;
margin-bottom: 2rem;
letter-spacing: 1px;
}
.light-theme .data-overview-title {
color: #334f74;
}
.data-overview-wrapper {
display: flex;
width: 100%;
gap: 60px;
align-items: flex-start;
}
.data-overview-left {
flex: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
align-content: start;
}
.data-stat-card {
display: flex;
align-items: center;
gap: 20px;
padding: 10px 0;
}
.data-stat-border {
width: 4px;
height: 80px;
border-radius: 2px;
flex-shrink: 0;
}
.data-stat-border-blue {
background: linear-gradient(180deg, #2196F3 0%, #1976D2 100%);
}
.data-stat-border-teal {
background: linear-gradient(180deg, #00BCD4 0%, #0097A7 100%);
}
.data-stat-border-red {
background: linear-gradient(180deg, #F44336 0%, #D32F2F 100%);
}
.data-stat-border-yellow {
background: linear-gradient(180deg, #90CAF9 0%, #64B5F6 100%);
}
.data-stat-border-purple {
background: linear-gradient(180deg, #5C9BD1 0%, #3F8BC2 100%);
}
.data-stat-icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: var(--text);
flex-shrink: 0;
}
.light-theme .data-stat-icon {
color: #334f74;
}
.data-stat-content h2.data-stat-value {
color: var(--text);
font-size: 2rem;
font-weight: 300;
margin-bottom: 5px;
line-height: 1.2;
}
.light-theme .data-stat-content h2.data-stat-value {
color: #334f74;
}
.data-stat-content p.data-stat-label {
color: var(--text-secondary);
font-size: 1rem;
font-weight: 300;
}
.data-overview-right-clickable {
display: block;
text-decoration: none;
color: inherit;
width: 350px;
flex-shrink: 0;
margin-top: -6.5rem;
align-self: flex-start;
}
.data-overview-right {
width: 100%;
background: white;
border-radius: 8px;
padding: 20px 30px 30px 30px;
height: fit-content;
cursor: pointer;
transition: all 0.2s ease;
}
.dark-theme .data-overview-right {
background: transparent;
border: none;
}
.data-featured-title {
font-size: 1.25rem;
color: #333;
margin-bottom: 20px;
font-weight: 600;
}
.dark-theme .data-featured-title {
color: var(--text);
}
.data-featured-item {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.dark-theme .data-featured-item {
border-bottom-color: var(--border-color);
}
.data-featured-item:last-child {
border-bottom: none;
}
.data-featured-label {
font-size: 0.75rem;
color: #777;
text-transform: uppercase;
margin-bottom: 5px;
}
.dark-theme .data-featured-label {
color: var(--text-secondary);
}
.data-featured-value {
font-size: 0.9375rem;
color: #333;
font-weight: 500;
}
.dark-theme .data-featured-value {
color: var(--text);
}
.data-featured-btn {
width: 100%;
padding: 12px;
background: #2196F3;
color: white;
border: none;
border-radius: 4px;
font-size: 0.9375rem;
cursor: pointer;
margin-top: 20px;
font-weight: 500;
text-align: center;
text-decoration: none;
display: block;
transition: background 0.3s ease;
}
.data-featured-btn:hover {
background: #1976D2;
}
@media (max-width: 1024px) {
.data-overview-wrapper {
flex-direction: column;
gap: 40px;
}
.data-overview-right-clickable {
width: 100%;
max-width: 600px;
margin: 0 auto;
margin-top: 0;
}
.data-overview-right {
width: 100%;
padding: 30px;
}
}
@media (max-width: 768px) {
.data-overview-title {
font-size: 1.5rem;
margin-bottom: 2rem;
text-align: left;
}
.data-overview-left {
grid-template-columns: 1fr;
gap: 25px;
}
.data-stat-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 20px;
border-radius: 12px;
}
.dark-theme .data-stat-card {
background: rgba(255, 255, 255, 0.05);
}
.light-theme .data-stat-card {
background: rgba(51, 79, 116, 0.05);
}
.data-stat-content h2.data-stat-value {
font-size: 1.75rem;
}
.data-stat-content p.data-stat-label {
font-size: 0.95rem;
}
.data-overview-right-clickable {
display: none;
}
.data-overview-right {
padding: 25px;
border: 1px solid var(--border-color);
}
.dark-theme .data-overview-right {
border: 1px solid var(--border-color);
}
.data-featured-title {
font-size: 1.125rem;
margin-bottom: 18px;
}
.data-featured-value {
font-size: 0.875rem;
}
}
@media (max-width: 480px) {
.data-overview-title {
font-size: 1.25rem;
margin-bottom: 1.5rem;
text-align: left;
}
.data-stat-card {
gap: 15px;
padding: 15px;
}
.data-stat-border {
height: 60px;
}
.data-stat-icon {
font-size: 24px;
width: 40px;
height: 40px;
}
.data-stat-content h2.data-stat-value {
font-size: 1.5rem;
}
.data-stat-content p.data-stat-label {
font-size: 0.875rem;
}
.data-overview-right {
padding: 20px;
border: 1px solid var(--border-color);
}
.dark-theme .data-overview-right {
border: 1px solid var(--border-color);
}
.data-featured-item {
margin-bottom: 12px;
padding-bottom: 12px;
}
}
@media (max-width: 992px) {
.page-header-data h1 {
font-size: 2rem;
}
.data-grid, .list-item {
grid-template-columns: 1fr;
}
.list-meta, .list-stats, .list-actions {
margin-top: 1rem;
}
.search-advanced {
grid-template-columns: 1fr;
}
.data-table {
display: block;
overflow-x: auto;
}
}
@media (max-width: 768px) {
.catalog-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.highlight-body {
flex-direction: column;
text-align: center;
}
.search-footer {
flex-direction: column;
gap: 1rem;
}
.social-links {
margin-top: 1rem;
justify-content: center;
}
.data-table-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.table-header-actions {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
width: 100%;
}
.sort-link {
width: 100%;
justify-content: center;
padding: 0.6rem 1rem;
}
}
@media (max-width: 768px) {
.page-header-data {
padding: 2rem 1rem;
}
.page-header-data h1 {
font-size: 1.8rem;
line-height: 1.2;
}
.page-header-data p {
font-size: 1rem;
line-height: 1.4;
}
.search-container-data {
padding: 1.5rem 1rem;
}
.desktop-only {
display: none;
}
.mobile-only {
display: block;
}
.search-mobile {
display: flex;
flex-direction: column;
gap: 1rem;
}
.search-mobile .search-group {
width: 100%;
}
.search-mobile .search-label {
font-size: 0.9rem;
margin-bottom: 0.5rem;
color: var(--text);
font-weight: 500;
}
.search-box-mobile {
display: flex;
gap: 0;
margin: 1rem 0;
min-width: 0;
width: 100%;
box-sizing: border-box;
}
.search-box-mobile input {
flex: 1;
padding: 0.75rem 1rem;
border: 1px solid var(--border-color);
border-radius: 6px 0 0 6px;
background-color: var(--dark);
color: var(--text);
font-size: 16px;
outline: none;
transition: border-color 0.3s ease;
border-right: none;
min-width: 0;
box-sizing: border-box;
}
.search-box-mobile input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(33, 136, 255, 0.1);
border-right: none;
}
.search-box-mobile button {
background-color: var(--primary);
color: white;
border: 1px solid var(--primary);
padding: 0.75rem 1rem;
border-radius: 0 6px 6px 0;
cursor: pointer;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
min-width: 50px;
min-height: 44px;
transition: background-color 0.3s ease;
box-sizing: border-box;
overflow: hidden;
}
.search-box-mobile button:hover {
background-color: var(--primary-hover);
}
.search-box-mobile button i {
font-size: 1rem;
max-width: 100%;
max-height: 100%;
}
@media (max-width: 375px) {
.search-box-mobile {
margin: 0.75rem 0;
}
.search-box-mobile input {
padding: 0.6rem 0.8rem;
font-size: 0.9rem;
}
.search-box-mobile button {
padding: 0.6rem 0.8rem;
min-width: 44px;
min-height: 44px;
}
.search-box-mobile button i {
font-size: 0.9rem;
}
}
@media (max-width: 320px) {
.search-box-mobile {
margin: 0.5rem 0;
}
.search-box-mobile input {
padding: 0.5rem 0.6rem;
font-size: 0.85rem;
}
.search-box-mobile button {
padding: 0.5rem 0.6rem;
min-width: 40px;
min-height: 40px;
}
.search-box-mobile button i {
font-size: 0.8rem;
}
}
.search-reset-mobile {
margin-top: 0.5rem;
}
.search-reset-mobile .btns {
width: 100%;
padding: 0.75rem 1rem;
font-size: 0.9rem;
border-radius: 6px;
background-color: var(--dark-component);
border: 1px solid var(--border-color);
color: var(--text);
text-decoration: none;
display: block;
text-align: center;
transition: all 0.3s ease;
}
.search-reset-mobile .btns:hover {
background-color: var(--border-color);
border-color: var(--primary);
}
.search-title {
font-size: 1.3rem;
margin-bottom: 1rem;
}
.search-box {
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.search-box input {
border-radius: 6px;
padding: 0.875rem 1rem;
font-size: 1rem;
width: 100%;
}
.search-box button {
border-radius: 6px;
padding: 0.875rem 1.5rem;
font-size: 1rem;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.search-box button i {
font-size: 1rem;
}
@media (max-width: 375px) {
.search-box {
flex-direction: column !important;
gap: 0.5rem;
align-items: stretch;
}
.search-box input {
border-radius: 6px !important;
width: 100% !important;
flex: none !important;
}
.search-box button {
border-radius: 6px !important;
width: 100% !important;
flex: none !important;
margin-top: 0.5rem;
}
}
.search-advanced {
grid-template-columns: 1fr;
gap: 1rem;
}
.search-group {
margin-bottom: 0;
}
.search-label {
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.search-select {
padding: 0.75rem;
font-size: 1rem;
width: 100%;
}
.search-date-range {
flex-direction: row;
gap: 0.5rem;
}
.search-date-range input {
padding: 0.75rem;
font-size: 16px;
width: 100%;
}
.search-footer {
flex-direction: column;
gap: 1rem;
align-items: stretch;
}
.search-tags {
justify-content: flex-start;
gap: 0.5rem;
}
.search-tag {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
}
.data-summary {
padding: 1.5rem 1rem;
}
.summary-title {
font-size: 1.2rem;
margin-bottom: 1rem;
}
.summary-stats {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.stat-cards {
padding: 1rem;
}
.stat-icons {
width: 40px;
height: 40px;
font-size: 1.1rem;
margin-bottom: 0.75rem;
}
.stat-values {
font-size: 1.5rem;
margin-bottom: 0.25rem;
}
.stat-labels {
font-size: 0.8rem;
}
.data-highlight {
padding: 1.5rem 1rem;
}
.highlight-header {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.highlight-title {
font-size: 1.1rem;
}
.highlight-info {
font-size: 0.85rem;
}
.data-highlight {
text-align: center;
padding: 1.5rem 1rem;
}
.highlight-header {
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.highlight-title {
font-size: 1.1rem;
text-align: center;
margin-bottom: 0.5rem;
}
.highlight-info {
font-size: 0.85rem;
text-align: center;
color: var(--text-secondary);
}
.highlight-body {
flex-direction: column;
text-align: center;
gap: 1rem;
align-items: center;
}
.highlight-icon {
width: 65px;
height: 65px;
font-size: 1.3rem;
}
.highlight-content {
text-align: center;
width: 100%;
}
.highlight-desc {
text-align: center;
margin-bottom: 1rem;
}
.highlight-meta {
flex-direction: column;
gap: 1rem;
align-items: center;
text-align: center;
}
.highlight-tags {
justify-content: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.data-tag {
text-align: center;
}
.recent-container {
padding: 1.5rem 1rem;
}
.data-table-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.data-table-header h2 {
font-size: 1.3rem;
}
.table-header-actions {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
width: 100%;
}
.sort-link {
width: 100%;
justify-content: center;
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
.data-table {
font-size: 0.85rem;
}
.data-table td.document-title,
.data-table th:first-child {
min-width: 320px;
white-space: wrap;
}
@media (max-width: 768px) {
.data-table td.document-title,
.data-table th:first-child {
min-width: 280px;
}
}
@media (max-width: 480px) {
.data-table td.document-title,
.data-table th:first-child {
min-width: 250px;
}
}
.data-table th,
.data-table td {
padding: 0.75rem 0.5rem;
}
.action-button {
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
}
.pagination {
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.page-item {
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
}
.featured-section {
padding: 2rem 1rem;
}
.featured-container {
padding: 0;
}
.section-title {
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.collection-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.collection-card {
padding: 1.5rem;
}
.collection-title {
font-size: 1.1rem;
}
.collection-desc {
font-size: 0.9rem;
}
.cta-section-data {
padding: 2rem 1rem;
}
.cta-container-data {
padding: 0 1rem;
text-align: center;
max-width: 100%;
}
.cta-section-data h2 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 1rem;
padding: 0 0.5rem;
line-height: 1.2;
}
.cta-section-data p {
font-size: 1rem;
margin-bottom: 1.5rem;
padding: 0 1rem;
line-height: 1.5;
}
.cta-buttons-data {
flex-direction: column;
gap: 1rem;
align-items: center;
}
.btn-large {
width: 100%;
max-width: 300px;
padding: 0.875rem 1.5rem;
font-size: 1rem;
}
.cta-buttons-data .cta-secondary {
margin-bottom: 1rem;
width: 100%;
max-width: 300px;
padding: 0.875rem 1.5rem;
font-size: 1rem;
}
}
@media (max-width: 600px) {
.page-header-data h1 {
font-size: 1.6rem;
}
.search-box button {
padding: 1rem 1.5rem;
}
.summary-stats {
grid-template-columns: 1fr;
gap: 1rem;
}
.data-table {
font-size: 0.8rem;
}
.data-table th,
.data-table td {
padding: 0.5rem 0.25rem;
}
.action-button {
padding: 0.4rem 0.6rem;
font-size: 0.75rem;
}
}
@media (max-width: 480px) {
.page-header-data {
padding: 1.5rem 0.75rem;
}
.page-header-data h1 {
font-size: 1.4rem;
}
.page-header-data p {
font-size: 0.9rem;
}
.search-container-data {
padding: 1rem 0.75rem;
}
.search-title {
font-size: 1.2rem;
}
.search-box input {
padding: 0.75rem;
font-size: 0.9rem;
}
.search-box button {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
.search-select,
.search-date-range input {
padding: 0.75rem;
font-size: 0.9rem;
}
.data-summary {
padding: 1rem 0.75rem;
}
.summary-title {
font-size: 1.1rem;
}
.stat-cards {
padding: 0.75rem;
}
.stat-icons {
width: 35px;
height: 35px;
font-size: 1rem;
}
.stat-values {
font-size: 1.3rem;
}
.stat-labels {
font-size: 0.75rem;
}
.data-highlight {
padding: 1rem 0.75rem;
}
.highlight-title {
font-size: 1rem;
}
.highlight-icon {
width: 55px;
height: 55px;
font-size: 1.2rem;
}
.recent-container {
padding: 1rem 0.75rem;
}
.data-table-header h2 {
font-size: 1.2rem;
}
.sort-link {
padding: 0.6rem 0.75rem;
font-size: 0.85rem;
}
.featured-section {
padding: 1.5rem 0.75rem;
}
.section-title {
font-size: 1.3rem;
}
.collection-card {
padding: 1rem;
}
.cta-section-data {
padding: 1.5rem 0.75rem;
}
.cta-container-data {
padding: 0 1.5rem;
}
.cta-section-data h2 {
font-size: 1.8rem;
font-weight: 700;
padding: 0 1rem;
line-height: 1.2;
}
.cta-section-data p {
font-size: 0.9rem;
padding: 0 1.5rem;
line-height: 1.6;
}
}
@media (max-width: 375px) {
.page-header-data h1 {
font-size: 1.3rem;
}
.page-header-data p {
font-size: 0.85rem;
}
.search-box button {
padding: 0.7rem 0.75rem;
font-size: 0.85rem;
}
.search-box button i {
font-size: 0.9rem;
}
.search-tag {
padding: 0.4rem 0.6rem;
font-size: 0.8rem;
}
.stat-cards {
padding: 0.6rem;
}
.stat-icons {
width: 30px;
height: 30px;
font-size: 0.9rem;
}
.stat-values {
font-size: 1.2rem;
}
.stat-labels {
font-size: 0.7rem;
}
.highlight-icon {
width: 50px;
height: 50px;
font-size: 1.1rem;
}
.data-table {
font-size: 0.75rem;
}
.data-table th,
.data-table td {
padding: 0.4rem 0.2rem;
}
.action-button {
padding: 0.3rem 0.5rem;
font-size: 0.7rem;
}
.page-item {
padding: 0.4rem 0.6rem;
font-size: 0.8rem;
}
}
@media (max-width: 320px) {
.page-header-data {
padding: 1rem 0.5rem;
}
.page-header-data h1 {
font-size: 1.2rem;
}
.page-header-data p {
font-size: 0.8rem;
}
.search-container-data {
padding: 0.75rem 0.5rem;
}
.search-title {
font-size: 1.1rem;
}
.search-box input {
padding: 0.6rem;
font-size: 0.85rem;
}
.search-box button {
padding: 0.6rem 0.5rem;
font-size: 0.8rem;
}
.search-select,
.search-date-range input {
padding: 0.6rem;
font-size: 16px;
}
.data-summary {
padding: 0.75rem 0.5rem;
}
.summary-title {
font-size: 1rem;
}
.stat-cards {
padding: 0.5rem;
}
.stat-icons {
width: 25px;
height: 25px;
font-size: 0.8rem;
}
.stat-values {
font-size: 1.1rem;
}
.stat-labels {
font-size: 0.65rem;
}
.data-highlight {
padding: 0.75rem 0.5rem;
}
.highlight-title {
font-size: 0.9rem;
}
.highlight-icon {
width: 45px;
height: 45px;
font-size: 1rem;
}
.recent-container {
padding: 0.75rem 0.5rem;
}
.data-table-header h2 {
font-size: 1.1rem;
}
.sort-link {
padding: 0.5rem 0.6rem;
font-size: 0.8rem;
}
.featured-section {
padding: 1rem 0.5rem;
}
.section-title {
font-size: 1.2rem;
}
.collection-card {
padding: 0.75rem;
}
.cta-section-data {
padding: 1rem 0.5rem;
}
.cta-section-data h2 {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.2;
}
.cta-section-data p {
font-size: 0.85rem;
}
}
@media (max-width: 768px) and (orientation: landscape) {
.page-header-data {
padding: 1rem;
}
.page-header-data h1 {
font-size: 1.5rem;
}
.search-container-data {
padding: 1rem;
}
.search-box {
flex-direction: row;
gap: 0.5rem;
}
.search-box input {
border-radius: 6px 0 0 6px;
}
.search-box button {
border-radius: 0 6px 6px 0;
width: auto;
}
.summary-stats {
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
}
.stat-cards {
padding: 0.75rem;
}
.stat-icons {
width: 30px;
height: 30px;
font-size: 0.9rem;
}
.stat-values {
font-size: 1.2rem;
}
.stat-labels {
font-size: 0.7rem;
}
}
@media (hover: none) and (pointer: coarse) {
.search-box button {
min-height: 44px;
}
.search-select,
.search-date-range input {
min-height: 44px;
}
.sort-link {
min-height: 44px;
}
.action-button {
min-height: 36px;
}
.page-item {
min-height: 44px;
min-width: 44px;
}
.search-tag {
min-height: 32px;
}
}
@media (max-width: 768px) {
.hero:has(.hero-content) .hero-content h1 {
font-size: 2.5rem !important;
}
}
@media (max-width: 768px) {
.hero-title,
.cta-title,
.cta-section h2 {
font-size: 2.6rem;
}
}
@media (max-width: 768px) {
.data-table-header h2 {
text-align: center;
width: 100%;
}
.table-header-actions {
justify-content: center;
align-items: center;
width: 100%;
}
.table-header-actions span {
display: block;
text-align: center;
margin: 0 auto;
width: 100%;
}
}
.btn-career {
background-color: var(--success);
color: white;
padding: 0.4rem 1rem;
border: 1px solid rgba(240, 246, 252, 0.1);
border-radius: 9999px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.btn-career:hover {
background-color: #2ea043;
}
.btn-career-primary {
background-color: var(--primary);
}
.btn-career-primary:hover {
background-color: var(--primary-hover);
}
.btn-career-secondary {
background-color: var(--dark-component);
border: 1px solid var(--border-color);
}
.btn-career-secondary:hover {
background-color: var(--border-color);
}
.page-hero-career {
background-color: var(--dark-alt);
border-bottom: 1px solid var(--border-color);
padding: 3rem 2rem;
text-align: center;
}
.page-hero-container-career {
max-width: 1280px;
margin: 0 auto;
}
.page-hero-career h1 {
font-size: clamp(2.5rem, 4.5vw, 3.5rem);
margin-bottom: 2rem;
color: var(--text);
font-weight: 700;
}
.dark-theme .page-hero-career h1 {
color: var(--text-secondary);
}
.light-theme .page-hero-career h1 {
color: #334f74;
}
.page-hero-career p {
font-size: clamp(1.1rem, 2vw, 1.4rem);
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
}
.section-career {
padding: 5rem 0;
position: relative;
}
.application-section {
padding-top: 3rem !important;
}
.section-career:nth-child(odd) {
background-color: var(--dark);
}
.section:nth-child(even) {
background-color: var(--section-bg-alt);
}
.section-container-career {
max-width: 1280px;
margin: 0 auto;
padding: 0 2rem;
}
.section-title-career {
font-size: 2.5rem;
font-weight: 700;
color: var(--text);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
text-align: center;
justify-content: center;
}
.section-title-career i {
color: var(--primary);
font-size: 2rem;
}
.section-subtitle-career {
font-size: 1.2rem;
color: var(--text-secondary);
margin-bottom: 3rem;
line-height: 1.6;
text-align: center;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.application-form-title {
color: var(--text);
}
.openings-section {
background-color: var(--dark);
}
.empty-state {
text-align: center;
padding: 4rem 2rem;
background-color: var(--dark-alt);
border: 1px solid var(--border-color);
border-radius: 16px;
margin: 2rem auto;
max-width: 800px;
}
.empty-state-icon {
font-size: 4rem;
color: var(--text-secondary);
margin-bottom: 1.5rem;
}
.empty-state h3 {
font-size: 1.8rem;
font-weight: 600;
color: var(--text);
margin-bottom: 1rem;
}
.empty-state p {
color: var(--text-secondary);
margin-bottom: 2rem;
font-size: 1.1rem;
line-height: 1.6;
}
.notifications-section {
background-color: var(--section-bg-alt);
}
.notification-form {
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 3rem;
margin: 2rem auto;
max-width: 800px;
}
.notification-form h3 {
color: var(--text);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.5rem;
font-weight: 600;
}
.notification-form h3 i {
color: var(--warning);
font-size: 1.25rem;
}
.application-section {
background-color: var(--dark);
padding-bottom: 0 !important;
}
.application-section .section-subtitle-career {
margin-bottom: 0.5rem !important;
}
.application-form {
background-color: var(--dark-alt);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 3rem;
margin: 2rem auto;
max-width: 900px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.form-row-career {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.form-group-career {
margin-bottom: 1.5rem;
}
.form-label-career {
display: block;
margin-bottom: 0.75rem;
font-weight: 600;
color: var(--text);
font-size: 1rem;
}
.form-control-career {
width: 100%;
padding: 1rem;
border-radius: 8px;
border: 1px solid var(--border-color);
background-color: var(--dark);
color: var(--text);
font-size: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control-career:focus {
border-color: var(--primary);
outline: none;
box-shadow: 0 0 0 3px rgba(33, 136, 255, 0.2);
}
.form-select-career {
width: 100%;
padding: 1rem;
border-radius: 8px;
border: 1px solid var(--border-color);
background-color: var(--dark);
color: var(--text);
font-size: 1rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238b949e' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 12px;
}
.form-select-career:focus {
border-color: var(--primary);
outline: none;
box-shadow: 0 0 0 3px rgba(33, 136, 255, 0.2);
}
.file-upload {
position: relative;
display: inline-block;
cursor: pointer;
width: 100%;
}
.file-upload input[type="file"] {
position: absolute;
left: -9999px;
opacity: 0;
width: 1px;
height: 1px;
}
.file-upload-label {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1rem;
border: 2px dashed var(--border-color);
border-radius: 8px;
background-color: var(--dark);
color: var(--text-secondary);
font-size: 1rem;
transition: all 0.2s ease;
}
.file-upload:hover .file-upload-label {
border-color: var(--primary);
color: var(--primary);
}
.file-upload.has-file .file-upload-label {
border-color: var(--secondary);
color: var(--secondary);
}
@media (max-width: 768px) {
.page-hero-career h1 {
font-size: 2rem;
}
.section-title-career {
font-size: 2rem;
flex-direction: column;
gap: 0.5rem;
}
.form-row-career {
grid-template-columns: 1fr;
}
.notification-form,
.application-form {
padding: 2rem;
}
}
@media (max-width: 600px) {
.file-upload-label {
padding: 0.5rem !important;
min-height: 40px !important;
font-size: 0.95rem !important;
width: 100% !important;
}
.file-upload-label i {
font-size: 1rem !important;
}
.file-upload-label input[type="url"] {
font-size: 0.95rem !important;
min-width: 0 !important;
width: 100% !important;
}
.file-upload input[type="file"] {
position: absolute;
left: -9999px;
opacity: 0;
width: 1px;
height: 1px;
}
.file-upload-label {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
}
.file-upload {
min-height: 50px;
display: flex;
align-items: center;
}
}
.custom-dropdown-career {
position: relative;
width: 100%;
}
.custom-dropdown-toggle-career {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--border-color);
border-radius: 8px;
background-color: var(--dark);
color: var(--text);
font-size: 0.9rem;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.custom-dropdown-toggle-career:hover {
background-color: rgba(255, 255, 255, 0.05);
border-color: var(--primary);
}
.custom-dropdown-toggle-career i {
color: var(--text-secondary);
font-size: 0.8rem;
}
.custom-dropdown-list-career {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1001;
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 8px;
margin-top: 0.25rem;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
list-style: none;
padding: 0.5rem 0;
max-height: 200px;
overflow-y: auto;
}
.custom-dropdown-item-career {
padding: 0.75rem 1rem;
color: var(--text);
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s ease;
}
.custom-dropdown-item-career:hover {
background-color: rgba(33, 136, 255, 0.1);
color: #2188ff;
}
.custom-dropdown-item-career.active {
background-color: rgba(33, 136, 255, 0.1);
color: var(--primary);
}
.fade-in {
opacity: 0;
transform: translateY(30px);
animation: fadeInMove 0.8s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes fadeInMove {
to {
opacity: 1;
transform: none;
}
}
.section-career, .page-hero, .application-form, .notification-form, .empty-state {
animation: fadeInMove 1s cubic-bezier(.4,0,.2,1) both;
}
.btn-career, .custom-dropdown-toggle-career {
transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.btn-career:hover, .custom-dropdown-toggle-career:hover {
box-shadow: 0 4px 24px 0 rgba(33,136,255,0.10);
transform: translateY(-2px) scale(1.03);
}
.custom-dropdown-list-career {
opacity: 0;
pointer-events: none;
transform: translateY(10px) scale(0.98);
transition: opacity 0.25s, transform 0.25s;
}
.custom-dropdown-career.open .custom-dropdown-list-career {
opacity: 1;
pointer-events: auto;
transform: none;
}
.custom-dropdown-item-career {
transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.custom-dropdown-item-career:hover {
padding-left: 1.5rem;
}
.section-title-career, .page-hero h1 {
animation: fadeInMove 1.2s cubic-bezier(.4,0,.2,1) both;
}
.section-separator-career {
border: none;
border-top: 1px solid var(--border-color);
margin: 0 0 3rem 0;
width: 100%;
opacity: 0.7;
}
.custom-dropdown-contact {
position: relative;
width: 100%;
}
.custom-dropdown-toggle-contact {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--border-color);
border-radius: 8px;
background-color: var(--dark);
color: var(--text);
font-size: 0.9rem;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.custom-dropdown-toggle-contact:hover {
background-color: rgba(255, 255, 255, 0.05);
border-color: var(--primary);
}
.custom-dropdown-toggle-contact i {
color: var(--text-secondary);
font-size: 0.8rem;
transition: transform 0.2s ease;
}
.custom-dropdown-contact.open .custom-dropdown-toggle-contact i {
transform: rotate(180deg);
}
.custom-dropdown-list-contact {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1001;
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 8px;
margin-top: 0.25rem;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
list-style: none;
padding: 0.5rem 0;
max-height: 200px;
overflow-y: auto;
opacity: 0;
pointer-events: none;
transform: translateY(10px) scale(0.98);
transition: opacity 0.25s, transform 0.25s;
}
.custom-dropdown-contact.open .custom-dropdown-list-contact {
opacity: 1;
pointer-events: auto;
transform: none;
}
.custom-dropdown-item-contact {
padding: 0.75rem 1rem;
color: var(--text);
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.custom-dropdown-item-contact:hover {
background-color: rgba(33, 136, 255, 0.1);
color: #2188ff;
padding-left: 1.5rem;
}
.custom-dropdown-item-contact.active {
background-color: rgba(33, 136, 255, 0.1);
color: var(--primary);
}
.btn-sector {
background-color: var(--primary);
color: white;
padding: 0.4rem 1rem;
border: 1px solid rgba(240, 246, 252, 0.1);
border-radius: 9999px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s ease;
text-decoration: none;
}
.btn-sector:hover {
background-color: var(--primary-hover);
}
.page-header-sector {
background: var(--dark-alt);
padding: 3rem 2rem;
border-bottom: 1px solid var(--border-color);
}
.page-header-sector-container {
max-width: 1280px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.page-header-sector h1 {
font-size: clamp(2.5rem, 4.5vw, 3.5rem);
margin-bottom: 2rem;
color: #334f74;
font-weight: 700;
}
.dark-theme .page-header-sector h1 {
color: var(--text-secondary);
}
.page-header-sector p {
font-size: clamp(1.1rem, 2vw, 1.4rem);
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto 2rem;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 2rem;
font-size: 0.9rem;
color: var(--text-secondary);
align-self: flex-start;
}
.breadcrumb a {
color: var(--text);
text-decoration: none;
transition: color 0.2s ease;
}
.breadcrumb a:hover {
color: var(--primary);
}
.breadcrumb i {
font-size: 0.8rem;
}
.sector-search {
max-width: 600px;
width: 100%;
margin: 0 auto 2rem;
}
.sector-search-box {
display: flex;
width: 100%;
}
.sector-search-box input {
flex: 1;
padding: 0.75rem 1rem;
border: 1px solid var(--border-color);
border-radius: 6px 0 0 6px;
background-color: var(--dark);
color: var(--text);
font-size: 1rem;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.sector-search-box input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(33, 136, 255, 0.1);
}
@media (max-width: 768px) {
.sector-search-box input:focus {
box-shadow: none;
}
}
.sector-search-box button {
background-color: var(--primary);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 0 6px 6px 0;
cursor: pointer;
font-weight: 600;
}
.sector-search-box button:hover {
background-color: var(--primary-hover);
}
.filter-tags-sector {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
justify-content: center;
}
.filter-tag-sector {
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 20px;
padding: 0.35rem 0.8rem;
font-size: 0.85rem;
color: var(--text);
cursor: pointer;
transition: all 0.2s ease;
}
.filter-tag-sector:hover {
background-color: rgba(33, 136, 255, 0.1);
border-color: var(--primary);
color: var(--text);
}
.filter-tag-sector.active {
background-color: rgba(33, 136, 255, 0.2);
border-color: var(--primary);
color: var(--text);
}
.sectors-grid {
max-width: 1280px;
margin: 0 auto;
padding: 3rem 2rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
}
.sector-card-link {
text-decoration: none;
color: inherit;
display: block;
height: 100%;
}
.sector-card-link:hover {
text-decoration: none;
}
.sector-card {
background-color: var(--dark-alt);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1.5rem;
transition: transform 0.3s ease, border-color 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.sector-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 150px;
height: 150px;
background-image: url("data:image/svg+xml,%3Csvg fill='rgba(33,136,255,0.15)' version='1.1' viewBox='0 0 150.817 150.817' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M58.263,64.946c3.58-8.537,9.834-16.039,18.456-21.02c6.644-3.842,14.225-5.876,21.902-5.876 c6.376,0,12.568,1.461,18.207,4.031V21.677C116.829,9.706,92.563,0,62.641,0C32.71,0,8.448,9.706,8.448,21.677v21.681 C8.436,54.75,30.372,64.061,58.263,64.946z M62.629,5.416c29.77,0,48.768,9.633,48.768,16.255c0,6.634-18.998,16.258-48.768,16.258 c-29.776,0-48.774-9.624-48.774-16.258C13.855,15.049,32.853,5.416,62.629,5.416z M8.429,75.883V54.202 c0,10.973,20.396,20.015,46.841,21.449c-1.053,7.21-0.311,14.699,2.375,21.799C30.055,96.445,8.436,87.184,8.429,75.883z M95.425,125.631c-9.109,2.771-20.457,4.445-32.796,4.445c-29.931,0-54.193-9.706-54.193-21.684V86.709 c0,11.983,24.256,21.684,54.193,21.684c0.341,0,0.673-0.018,1.014-0.018C71.214,118.373,82.827,124.656,95.425,125.631z M131.296,63.11c-10.388-17.987-33.466-24.174-51.46-13.785c-17.987,10.388-24.173,33.463-13.792,51.45 c10.388,17.993,33.478,24.174,51.465,13.798C135.51,104.191,141.684,81.102,131.296,63.11z M71.449,97.657 C62.778,82.66,67.945,63.394,82.955,54.72c15.01-8.662,34.275-3.504,42.946,11.509c8.672,15.013,3.502,34.279-11.508,42.943 C99.377,117.85,80.117,112.686,71.449,97.657z M139.456,133.852l-16.203,9.353l-12.477-21.598l16.209-9.359L139.456,133.852z M137.708,149.562c-4.488,2.582-10.199,1.06-12.794-3.429l16.216-9.353C143.718,141.268,142.184,146.979,137.708,149.562z'/%3E%3C/g%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.2;
z-index: 0;
pointer-events: none;
}
.light-theme .sector-card::before {
opacity: 0.35;
}
.sector-card > * {
position: relative;
z-index: 1;
}
.sector-card-link:hover .sector-card {
transform: translateY(-5px);
border-color: var(--primary);
}
.sector-card-link:hover .sector-card::before {
opacity: 0.4;
transform: scale(1.1);
}
.light-theme .sector-card-link:hover .sector-card::before {
opacity: 0.6;
}
.sector-card-header {
display: flex;
align-items: center;
margin-bottom: 1.2rem;
gap: 1rem;
}
.sector-icon {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: rgba(33, 136, 255, 0.1);
border-radius: 8px;
font-size: 1.5rem;
color: var(--primary);
}
.sector-name {
font-size: 1.25rem;
font-weight: 600;
color: var(--text);
}
.sector-description {
color: var(--text-secondary);
margin-bottom: 1.5rem;
flex: 1;
}
.light-theme .sector-description {
color: #4a5568;
}
.dark-theme .sector-description {
color: #c9d1d9;
}
.sector-stats {
display: flex;
justify-content: space-between;
padding: 1rem 0;
border-top: 1px solid var(--border-color);
margin-bottom: 1.2rem;
}
.stat-sectors {
text-align: center;
}
.stat-number-sectors {
font-size: 1.2rem;
font-weight: 600;
color: var(--text);
margin-bottom: 0.2rem;
}
.stat-label-sectors {
font-size: 0.8rem;
color: var(--text-secondary);
}
.sector-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.sector-footer a,
.sector-footer .view-data-text {
color: var(--primary);
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
.sector-footer a:hover,
.sector-card-link:hover .sector-footer .view-data-text {
color: var(--primary-hover);
text-decoration: underline;
}
.last-update {
font-size: 0.8rem;
color: var(--text-secondary);
}
.featured-section {
background-color: var(--dark-alt);
padding: 4rem 2rem;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.featured-container {
max-width: 1280px;
margin: 0 auto;
}
.section-title-sector {
font-size: 1.75rem;
font-weight: 600;
color: #334f74;
margin-bottom: 2rem;
text-align: center;
}
.dark-theme .section-title-sector {
color: white;
}
.featured-datasets {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
}
.dataset-card-link {
text-decoration: none;
color: inherit;
display: block;
}
.dataset-card-link:hover {
text-decoration: none;
}
.dataset-card {
background-color: var(--dark);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1.2rem;
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.dataset-card-link:hover .dataset-card {
transform: translateY(-5px);
border-color: var(--primary);
box-shadow: 0 8px 25px rgba(33, 136, 255, 0.15);
}
.dataset-tag {
display: inline-block;
background-color: var(--dark-component);
color: var(--primary);
font-size: 0.75rem;
padding: 0.2rem 0.5rem;
border-radius: 4px;
margin-bottom: 0.8rem;
width: fit-content;
}
.light-theme .dataset-tag {
background-color: rgba(33, 136, 255, 0.1);
color: var(--primary);
}
.dataset-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--text);
margin-bottom: 0.5rem;
}
.dataset-desc {
font-size: 0.9rem;
color: var(--text-secondary);
margin-bottom: 1rem;
flex: 1;
}
.dataset-meta {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
color: var(--text-secondary);
margin-top: auto;
}
.dataset-source {
display: flex;
align-items: center;
gap: 0.4rem;
}
.explore-more {
text-align: center;
margin-top: 3rem;
}
@media (max-width: 992px) {
.header-search {
order: 3;
max-width: 100%;
width: 100%;
margin: 0.75rem 0 0 0;
}
.sectors-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.featured-datasets {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
}
@media (max-width: 768px) {
.page-header-sector h1 {
font-size: 2rem;
}
.page-header-sector p {
font-size: 1rem;
}
.data-page-header h1 {
font-size: 2rem;
}
.page-header-res h1 {
font-size: 2rem;
}
.page-header-policy h1 {
font-size: 2rem;
}
.page-header-conditions h1 {
font-size: 2rem;
}
.page-header h1 {
font-size: 2rem;
}
.page-header-data h1 {
font-size: 2rem;
}
.sponsors-hero h1 {
font-size: 2rem;
}
.sectors-grid {
grid-template-columns: 1fr;
padding: 2rem 1rem;
}
.sector-card-header {
flex-direction: row;
align-items: center;
gap: 0.75rem;
}
.sector-stats {
flex-wrap: wrap;
gap: 1rem;
}
.stat-sectors {
flex: 1;
min-width: 80px;
}
}
.sectors-grid.single-sector {
display: flex;
justify-content: center;
align-items: center;
min-height: 40vh;
}
@keyframes sectorFadeInUp {
0% {
opacity: 0;
transform: translateY(40px) scale(0.98);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.sector-card-link {
animation: sectorFadeInUp 0.7s cubic-bezier(.23,1.02,.32,1) both;
}
.sectors-grid .sector-card-link {
animation-delay: 0.1s;
}
@media (max-width: 700px) {
.sectors-grid.single-sector {
display: block;
min-height: unset;
}
}
@media (max-width: 768px) {
.sector-search {
max-width: 100%;
padding: 0 1rem;
}
.sector-search-box {
display: flex;
flex-direction: row;
width: 100%;
max-width: 100%;
align-items: stretch;
justify-content: center;
gap: 0;
}
.sector-search-box input {
font-size: 16px !important;
padding: 0.6rem 0.7rem;
border-radius: 6px 0 0 6px;
min-width: 0;
width: 1%;
box-sizing: border-box;
}
.sector-search-box button {
font-size: 0.95rem;
padding: 0.6rem 1rem;
border-radius: 0 6px 6px 0;
min-width: 44px;
width: auto;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
}
@media (max-width: 480px) {
.sector-search {
padding: 0 0.5rem;
}
.sector-search-box input {
font-size: 16px !important;
padding: 0.5rem 0.5rem;
}
.sector-search-box button {
font-size: 0.85rem;
padding: 0.5rem 0.7rem;
}
}
@media (max-width: 375px) {
.sector-search-box input {
font-size: 16px !important;
padding: 0.4rem 0.4rem;
}
.sector-search-box button {
font-size: 0.8rem;
padding: 0.4rem 0.5rem;
}
}
@media (max-width: 320px) {
.sector-search-box input {
font-size: 16px !important;
padding: 0.3rem 0.3rem;
}
.sector-search-box button {
font-size: 0.7rem;
padding: 0.3rem 0.3rem;
}
}
.search-advanced .custom-select {
width: 100%;
min-width: 0;
}
.search-advanced .custom-select-trigger {
width: 100%;
padding: 0.6rem;
border-radius: 6px;
border: 1px solid var(--border-color);
background-color: var(--dark);
color: var(--text);
font-size: 0.9rem;
min-height: unset;
box-sizing: border-box;
transition: border-color 0.3s ease;
}
.search-advanced .custom-select-trigger:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(33, 136, 255, 0.1);
outline: none;
}
.search-advanced .custom-options {
width: 100%;
max-height: 220px;
overflow-y: auto;
border-radius: 0 0 6px 6px;
font-size: 0.9rem;
}
.search-advanced .search-date-range input[type="number"] {
width: 100%;
padding: 0.6rem;
border-radius: 6px;
border: 1px solid var(--border-color);
background-color: var(--dark);
color: var(--text);
font-size: 16px;
outline: none;
transition: border-color 0.3s ease;
}
.search-advanced .search-date-range input[type="number"]:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(33, 136, 255, 0.1);
}
.search-advanced .search-date-range {
display: flex;
gap: 0.5rem;
}
.search-tag {
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.search-tag:hover {
background: var(--primary);
color: #fff;
}
.search-tag:hover .fa-times {
color: #fff;
}
.search-tag.removing {
animation: tag-remove-flash 0.25s;
}
@keyframes tag-remove-flash {
0% { background: var(--primary); color: #fff; }
60% { background: #e74c3c; color: #fff; }
100% { background: var(--primary); color: #fff; opacity: 0; }
}
.btn-res {
background-color: var(--success);
color: white;
padding: 0.4rem 1rem;
border: 1px solid rgba(240, 246, 252, 0.1);
border-radius: 9999px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s ease;
text-decoration: none;
}
.btn-res:hover {
background-color: #2ea043;
}
.page-header-res {
background-color: var(--dark-alt);
padding: 3rem 2rem;
border-bottom: 1px solid var(--border-color);
text-align: center;
}
.page-header-container-res {
max-width: 1000px;
margin: 0 auto;
}
.page-header-res h1 {
font-size: clamp(2.5rem, 4.5vw, 3.5rem);
margin-bottom: 2rem;
color: var(--text);
font-weight: 700;
}
.dark-theme .page-header-res h1 {
color: var(--text-secondary);
}
.light-theme .page-header-res h1 {
color: #334f74;
}
.page-header-res p {
font-size: clamp(1.1rem, 2vw, 1.4rem);
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
}
.resources-container {
max-width: 1280px;
margin: 0 auto;
padding: 3rem 2rem;
}
@media (max-width: 768px) {
.resources-container {
padding: 2rem 1rem;
}
}
@media (max-width: 480px) {
.resources-container {
padding: 1.5rem 0.5rem;
}
}
.resources-tabs-wrapper {
position: relative;
margin-bottom: 2rem;
}
.resources-tabs {
display: flex;
gap: 4rem;
margin-bottom: 0;
border-bottom: 1px solid var(--border-color);
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.resources-tabs::-webkit-scrollbar {
display: none;
}
.tabs-scroll-arrow {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
background: rgba(33,136,255,0.12);
border: none;
color: var(--primary);
font-size: 1.5rem;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 8px rgba(33,136,255,0.08);
transition: background 0.2s;
}
.tabs-scroll-arrow:active {
background: rgba(33,136,255,0.22);
}
.tabs-scroll-arrow.left {
left: 0.2rem;
}
.tabs-scroll-arrow.right {
right: 0.2rem;
}
.tabs-gradient {
display: none;
position: absolute;
top: 0;
bottom: 0;
width: 32px;
z-index: 1;
pointer-events: none;
}
.tabs-gradient.left {
left: 0;
background: linear-gradient(to right, var(--dark) 80%, transparent);
}
.tabs-gradient.right {
right: 0;
background: linear-gradient(to left, var(--dark) 80%, transparent);
}
@media (max-width: 768px) {
.resources-tabs-wrapper {
margin-bottom: 2rem;
overflow: hidden;
}
.resources-tabs {
flex-wrap: nowrap;
gap: 1.2rem;
overflow-x: scroll;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
padding: 0 1rem;
justify-content: flex-start;
width: 100%;
scrollbar-width: none;
}
.resources-tabs::-webkit-scrollbar {
display: none;
}
.tabs-scroll-arrow {
display: block;
}
.tabs-gradient {
display: block;
}
.tab-button {
min-width: max-content;
max-width: none;
overflow: visible;
white-space: nowrap;
flex-shrink: 0;
padding: 1rem 1.5rem;
}
}
@media (max-width: 480px) {
.resources-tabs {
gap: 0.8rem;
padding: 0 0.5rem;
justify-content: flex-start;
overflow-x: scroll;
}
.tab-button {
padding: 0.75rem 1rem;
font-size: 0.9rem;
min-width: max-content;
max-width: none;
overflow: visible;
white-space: nowrap;
flex-shrink: 0;
}
}
.tab-button {
padding: 1rem 1.5rem;
background: transparent;
border: none;
color: var(--text);
font-size: 1rem;
font-weight: 500;
cursor: pointer;
position: relative;
white-space: nowrap;
}
.tab-button.active {
color: var(--text);
border-bottom: 2px solid var(--primary);
min-width: max-content;
max-width: 100%;
overflow: visible;
white-space: nowrap;
}
.tab-button:hover {
color: var(--text);
background-color: rgba(255, 255, 255, 0.05);
}
.light-theme .tab-button:hover {
background-color: rgba(33, 136, 255, 0.1);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.resources-grid-res {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.resource-card-res {
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.resource-card-res:hover {
transform: translateY(-5px);
border-color: var(--primary);
}
.resource-image-res {
height: 160px;
background-color: var(--dark-alt);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
font-size: 3rem;
}
.resource-content-res {
padding: 1.5rem;
}
.resource-content-res h3 {
font-size: 1.25rem;
margin-bottom: 0.75rem;
color: var(--text);
}
.resource-content-res p {
color: var(--text-secondary);
font-size: 0.9rem;
margin-bottom: 1.5rem;
line-height: 1.6;
}
.resource-meta-res {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
color: var(--text-secondary);
margin-bottom: 1rem;
}
.resource-type-res {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.resource-date-res {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.resource-actions-res {
display: flex;
gap: 0.5rem;
}
.resource-btn-res {
padding: 0.5rem 1rem;
border-radius: 6px;
text-decoration: none;
font-size: 0.85rem;
font-weight: 600;
flex: 1;
text-align: center;
transition: background-color 0.2s ease;
cursor: pointer;
}
.btn-primary-res {
background-color: var(--primary);
color: white;
}
.btn-primary-res:hover {
background-color: var(--primary-hover);
}
.btn-outline-res {
background-color: transparent;
border: 1px solid var(--border-color);
color: var(--text);
}
.btn-outline:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.faq-section {
background-color: var(--dark-alt);
padding: 4rem 2rem;
margin: 2rem 0;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.faq-container {
max-width: 900px;
margin: 0 auto;
}
.faq-item {
margin-bottom: 1.5rem;
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
background-color: var(--dark-component);
}
.faq-question {
padding: 1.25rem;
font-weight: 600;
color: var(--text);
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
user-select: none;
}
.faq-question::after {
content: "＋";
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.faq-item.active .faq-question::after {
content: "－";
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding: 0 1.25rem;
color: var(--text-secondary);
}
.faq-item.active .faq-answer {
max-height: 500px;
padding: 0 1.25rem 1.25rem;
}
.guides-section {
background-color: var(--dark);
text-align: center;
padding: 4rem 2rem;
}
.guide-content h3 {
font-size: 1.22rem;
margin-bottom: 1rem;
color: var(--text);
font-weight: 600;
letter-spacing: 0.01em;
text-align: center;
flex-grow: 0;
}
.tools-section {
background-color: var(--dark);
text-align: center;
padding: 4rem 2rem;
}
.tools-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin-top: 2rem;
}
.tool-card-link {
text-decoration: none;
color: inherit;
display: block;
height: 100%;
}
.tool-card-link:hover {
text-decoration: none;
color: inherit;
}
.tool-card {
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 2rem;
text-align: center;
transition: transform 0.2s ease, border-color 0.2s ease;
box-shadow: 0 2px 8px rgba(33,136,255,0.05);
position: relative;
height: 100%;
display: flex;
flex-direction: column;
}
.tool-card-link:hover .tool-card {
transform: translateY(-5px);
border-color: var(--primary);
}
.tool-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem auto;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(33, 136, 255, 0.12);
border-radius: 50%;
font-size: 2.5rem;
color: var(--primary);
box-shadow: 0 2px 8px rgba(33,136,255,0.08);
}
.tool-card h3 {
font-size: 1.22rem;
margin-bottom: 1rem;
color: var(--text);
font-weight: 600;
letter-spacing: 0.01em;
flex-grow: 0;
}
.tool-card p {
color: var(--text-secondary);
margin-bottom: 2.2rem;
font-size: 1rem;
line-height: 1.6;
flex-grow: 1;
}
.tool-card small {
display: block;
margin-bottom: 1.2rem;
color: var(--text-secondary);
font-size: 0.92rem;
}
.tool-card .btn-res {
margin-top: 0.5rem;
flex-grow: 0;
align-self: center;
width: auto;
min-width: auto;
}
@media (max-width: 768px) {
.tools-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.tool-card {
padding: 2rem 1.5rem 2rem 1.5rem;
}
.tool-icon {
width: 70px;
height: 70px;
margin: 0 auto 1.5rem auto;
font-size: 2.2rem;
}
.tool-card h3 {
font-size: 1.2rem;
margin-bottom: 1rem;
}
.tool-card p {
font-size: 1rem;
margin-bottom: 2rem;
line-height: 1.6;
}
}
@media (max-width: 480px) {
.tools-grid {
gap: 1rem;
}
.tool-card {
padding: 1.75rem 1.25rem 1.75rem 1.25rem;
}
.tool-icon {
width: 60px;
height: 60px;
margin: 0 auto 1.25rem auto;
font-size: 2rem;
}
.tool-card h3 {
font-size: 1.1rem;
margin-bottom: 0.75rem;
}
.tool-card p {
font-size: 0.95rem;
margin-bottom: 1.75rem;
line-height: 1.5;
}
}
.training-section {
background-color: var(--dark-alt);
padding: 4rem 2rem;
margin: 3rem 0;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.training-container {
max-width: 1280px;
margin: 0 auto;
}
.section-header {
text-align: center;
margin-bottom: 3rem;
}
.section-header h2 {
font-size: 2rem;
color: var(--text);
margin-bottom: 1rem;
}
.section-header p {
color: var(--text-secondary);
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
}
.training-tabs {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
margin-bottom: 2rem;
}
.training-tab {
padding: 0.75rem 1.5rem;
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text);
cursor: pointer;
font-weight: 500;
transition: all 0.2s ease;
}
.training-tab.active {
background-color: var(--primary);
color: white;
border-color: var(--primary);
}
.training-tab:hover:not(.active) {
background-color: rgba(255, 255, 255, 0.05);
color: white;
}
.training-content {
display: none;
}
.training-content.active {
display: block;
}
.training-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
}
.training-card {
background-color: var(--dark);
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.training-card:hover {
transform: translateY(-5px);
border-color: var(--primary);
}
.training-image {
height: 160px;
background-color: var(--dark-component);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
}
.training-details {
padding: 1.5rem;
}
.training-details h3 {
font-size: 1.2rem;
color: white;
margin-bottom: 0.75rem;
}
.training-details p {
color: var(--text-secondary);
font-size: 0.9rem;
margin-bottom: 1rem;
}
.training-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
color: var(--text-secondary);
margin-bottom: 1.5rem;
}
.training-level {
display: flex;
align-items: center;
gap: 0.4rem;
}
.training-duration {
display: flex;
align-items: center;
gap: 0.4rem;
}
.cta-section-res {
padding: 6rem 2rem;
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.cta-section-res h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
color: var(--text);
font-weight: 600;
}
.light-theme .cta-section-res h2 {
color: #334f74;
}
@media (max-width: 768px) {
.cta-section-res h2 {
font-size: 2rem;
margin-bottom: 1.2rem;
}
.cta-section-res p {
font-size: 1rem;
margin-bottom: 2rem;
}
}
@media (max-width: 480px) {
.cta-section {
padding: 1.5rem 0.75rem;
}
.cta-section-res h2 {
font-size: 1.8rem;
margin-bottom: 1rem;
}
.cta-section-res p {
font-size: 0.95rem;
margin-bottom: 1.5rem;
}
}
.cta-section-res p {
font-size: 1.1rem;
margin-bottom: 2.5rem;
color: var(--text-secondary);
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.cta-buttons-res {
display: flex;
justify-content: center;
gap: 1rem;
}
.btn-large-res {
padding: 0.75rem 1.5rem;
font-size: 1rem;
}
.btn-outline-res {
background-color: transparent;
border: 1px solid var(--border-color);
color: var(--text);
}
.btn-outline-res:hover {
background-color: var(--dark-component);
border-color: var(--text-secondary);
}
@media (max-width: 992px) {
.guide-item {
flex-direction: column;
gap: 1rem;
}
.guide-icon {
margin: 0 auto;
}
}
@media (max-width: 768px) {
.cta-buttons {
flex-direction: column;
gap: 1rem;
}
.resources-tabs {
flex-wrap: nowrap;
gap: 1.2rem;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.training-tabs {
flex-direction: column;
}
.page-header p {
font-size: 1rem;
margin-bottom: 1.2rem;
}
.cta-section {
padding: 2rem 1rem;
}
.cta-section h2 {
font-size: 1.3rem;
}
.cta-section p {
font-size: 0.98rem;
}
}
.support-section {
background-color: var(--dark);
text-align: center;
padding: 4rem 2rem;
}
.support-header {
max-width: 600px;
margin: 0 auto 2.5rem auto;
}
.support-header h2 {
font-size: 2rem;
color: var(--text);
margin-bottom: 1rem;
font-weight: 700;
letter-spacing: 0.01em;
}
.light-theme .support-header h2 {
color: #334f74;
}
.support-header p {
color: var(--text-secondary);
font-size: 1.1rem;
margin-bottom: 0;
}
.support-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 2rem;
}
.support-card-link {
text-decoration: none;
color: inherit;
display: block;
height: 100%;
}
.support-card-link:hover {
text-decoration: none;
color: inherit;
}
.support-card {
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 2rem;
text-align: center;
transition: transform 0.2s ease, border-color 0.2s ease;
box-shadow: 0 2px 8px rgba(33,136,255,0.05);
height: 100%;
display: flex;
flex-direction: column;
}
.support-card-link:hover .support-card {
transform: translateY(-5px);
border-color: var(--primary);
}
.support-card h3 {
flex-grow: 0;
margin-bottom: 0.75rem;
}
.support-card p {
flex-grow: 1;
margin-bottom: 1rem;
}
.support-card .btn-res {
flex-grow: 0;
align-self: center;
width: auto;
min-width: auto;
}
@media (max-width: 768px) {
.support-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.support-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.support-card-link.community-selected .support-card {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(33, 136, 255, 0.4);
border: 2px solid var(--primary);
animation: communityPulse 2s ease-in-out;
}
@keyframes communityPulse {
0% {
box-shadow: 0 8px 25px rgba(33, 136, 255, 0.4);
}
50% {
box-shadow: 0 8px 35px rgba(33, 136, 255, 0.6);
}
100% {
box-shadow: 0 8px 25px rgba(33, 136, 255, 0.4);
}
}
.support-icon {
width: 60px;
height: 60px;
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(33, 136, 255, 0.1);
border-radius: 50%;
font-size: 1.5rem;
color: var(--primary);
}
.support-card h3 {
font-size: 1.1rem;
margin-bottom: 0.75rem;
color: var(--text);
}
.support-card p {
color: var(--text-secondary);
font-size: 0.9rem;
margin-bottom: 1rem;
}
.btn-primary-res {
background-color: var(--primary);
color: white;
}
.btn-primary-res:hover {
background-color: var(--primary-hover);
}
.btn-outline-res {
background-color: transparent;
border: 1px solid var(--border-color);
color: var(--text);
}
.btn-outline-res:hover {
background-color: transparent;
border-color: var(--primary);
color: var(--primary);
transform: translateY(-2px);
}
.tools-header {
max-width: 600px;
margin: 0 auto 2.5rem auto;
text-align: center;
}
.tools-header h2 {
font-size: 2rem;
color: var(--text);
margin-bottom: 1rem;
font-weight: 700;
letter-spacing: 0.01em;
}
.light-theme .tools-header h2 {
color: #334f74;
}
.tools-header p {
color: var(--text-secondary);
font-size: 1.1rem;
margin-bottom: 0;
}
.guides-header {
max-width: 600px;
margin: 0 auto 2.5rem auto;
text-align: center;
}
.guides-header h2 {
font-size: 2rem;
color: var(--text);
margin-bottom: 1rem;
font-weight: 700;
letter-spacing: 0.01em;
}
.light-theme .guides-header h2 {
color: #334f74;
}
.guides-header p {
color: var(--text-secondary);
font-size: 1.1rem;
margin-bottom: 0;
}
.guide-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.guide-item-link {
text-decoration: none;
color: inherit;
display: block;
height: 100%;
}
.guide-item-link:hover {
text-decoration: none;
color: inherit;
}
@media (max-width: 768px) {
.guide-list {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.guide-item {
padding: 1.5rem 1rem 1.5rem 1rem;
}
.guide-icon {
width: 60px;
height: 60px;
margin-bottom: 1rem;
}
.guide-content h3 {
font-size: 1.1rem;
margin-bottom: 0.75rem;
}
.guide-content p {
font-size: 0.9rem;
margin-bottom: 1.5rem;
line-height: 1.5;
text-align: center;
}
}
@media (max-width: 480px) {
.guide-list {
gap: 1rem;
}
.guide-item {
padding: 1.25rem 0.75rem 1.25rem 0.75rem;
}
.guide-icon {
width: 50px;
height: 50px;
margin-bottom: 0.75rem;
}
.guide-content h3 {
font-size: 1rem;
margin-bottom: 0.5rem;
}
.guide-content p {
font-size: 0.85rem;
margin-bottom: 1.25rem;
line-height: 1.4;
text-align: center;
}
}
.guide-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(33,136,255,0.05);
transition: transform 0.2s ease, border-color 0.2s ease;
height: 100%;
}
.guide-item-link:hover .guide-item {
transform: translateY(-5px);
border-color: var(--primary);
}
.guide-icon {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(33, 136, 255, 0.12);
border-radius: 50%;
font-size: 2.5rem;
color: var(--primary);
box-shadow: 0 2px 8px rgba(33,136,255,0.08);
}
.guide-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.guide-content p {
color: var(--text-secondary);
margin-bottom: 1.2rem;
font-size: 1rem;
line-height: 1.6;
text-align: center;
flex-grow: 1;
}
.guide-content .btn-res {
flex-grow: 0;
align-self: center;
width: auto;
min-width: auto;
}
.guide-steps {
list-style: none;
margin-top: 1rem;
margin-bottom: 1.2rem;
padding-left: 0;
text-align: left;
width: 100%;
max-width: 340px;
margin-left: auto;
margin-right: auto;
}
.guide-steps li {
margin-bottom: 0.5rem;
display: flex;
align-items: flex-start;
gap: 0.75rem;
color: var(--text-secondary);
font-size: 0.97rem;
}
.step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background-color: var(--primary);
color: white;
border-radius: 50%;
font-size: 0.8rem;
font-weight: 600;
flex-shrink: 0;
}
.guide-content .btn-res {
margin-top: 0.5rem;
}
.news-btn {
background-color: var(--success);
color: white;
padding: 0.4rem 1rem;
border: 1px solid rgba(240, 246, 252, 0.1);
border-radius: 6px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s ease;
text-decoration: none;
}
.news-btn:hover {
background-color: #2ea043;
}
.news-page-header {
background: var(--dark-alt);
padding: 4rem 2rem;
text-align: center;
border-bottom: 1px solid var(--border-color);
}
.news-page-title {
font-size: clamp(2.5rem, 4.5vw, 3.5rem);
margin-bottom: 2rem;
color: #334f74;
font-weight: 700;
}
.dark-theme .news-page-title {
color: var(--text-secondary);
}
.news-page-description {
font-size: clamp(1.1rem, 2vw, 1.4rem);
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
}
.news-content-container {
max-width: 1280px;
margin: 0 auto;
padding: 3rem 2rem;
}
.news-filter {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 2.5rem;
justify-content: center;
}
.news-filter-btn {
background-color: var(--dark-component);
color: var(--text);
border: 1px solid var(--border-color);
border-radius: 30px;
padding: 0.5rem 1.25rem;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
}
.news-filter-btn:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.news-filter-btn.active {
background-color: var(--primary);
color: white;
border-color: var(--primary);
}
.news-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2.5rem;
}
.news-main-news {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.news-featured-news-link {
text-decoration: none;
color: inherit;
display: block;
}
.news-featured-news {
background-color: var(--dark-alt);
border: 1px solid var(--border-color);
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
opacity: 1;
transform: translateY(0);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.news-featured-news-link:hover .news-featured-news {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
border-color: var(--primary);
}
.news-featured-image {
position: relative;
height: 300px;
background-color: var(--dark-component);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.news-featured-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') no-repeat;
background-size: 80%;
background-position: center;
opacity: 0.05;
z-index: 0;
}
.light-theme .news-featured-image::before {
opacity: 0.15;
}
.light-theme .news-item-image::before {
opacity: 0.15;
}
.news-featured-image i {
font-size: 6rem;
color: var(--primary);
animation: gentle-float 3s ease-in-out infinite;
position: relative;
z-index: 1;
}
.news-featured-image-has-img::before {
display: none;
}
.news-featured-image-has-img i {
display: none;
}
.news-featured-image-img {
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
z-index: 1;
}
@media (min-width: 1024px) {
.news-featured-image i {
font-size: 8rem;
}
}
@keyframes gentle-float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
}
.news-featured-category {
position: absolute;
top: 1rem;
left: 1rem;
background-color: var(--primary);
color: white;
padding: 0.4rem 1rem;
border-radius: 30px;
font-size: 0.8rem;
font-weight: 600;
}
.news-featured-content {
padding: 1.5rem;
}
.news-featured-date {
font-size: 0.85rem;
color: var(--text-secondary);
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.news-featured-source {
margin-left: 1rem;
padding-left: 1rem;
border-left: 1px solid var(--border-color);
color: var(--primary);
font-weight: 500;
}
.news-featured-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--text);
}
.news-featured-excerpt {
color: var(--text-secondary);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.news-read-more {
color: var(--primary);
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
pointer-events: none;
}
.news-item-link {
text-decoration: none;
color: inherit;
display: block;
}
.news-item {
display: flex;
gap: 1.5rem;
padding: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid var(--border-color);
border-radius: 12px;
background-color: var(--dark-alt);
transition: all 0.5s ease;
opacity: 1;
transform: translateY(0);
cursor: pointer;
}
.news-item-link:hover .news-item {
border-color: var(--primary);
box-shadow: 0 8px 25px rgba(33, 136, 255, 0.1);
transform: translateY(-2px);
}
.news-item.news-featured-style {
flex-direction: column;
padding: 0;
border-radius: 12px;
overflow: hidden;
margin-bottom: 2rem;
}
.news-item.news-featured-style .news-item-image {
flex: 0 0 300px;
height: 200px;
border-radius: 0;
margin-bottom: 0;
position: relative;
}
.news-item.news-featured-style .news-item-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') no-repeat;
background-size: cover;
background-position: center;
opacity: 0.05;
z-index: 0;
}
.news-item.news-featured-style .news-item-image i {
font-size: 7rem;
position: relative;
z-index: 1;
}
.news-item.news-featured-style .news-item-image-has-img::before {
display: none;
}
.news-item.news-featured-style .news-item-image-has-img i {
display: none;
}
.news-item.news-featured-style .news-item-image-img {
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
z-index: 1;
}
@media (min-width: 1024px) {
.news-item.news-featured-style .news-item-image i {
font-size: 9rem;
}
}
.news-item.news-featured-style .news-item-content {
padding: 1.5rem;
}
.news-item.news-featured-style .news-item-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.news-item.news-featured-style .news-item-excerpt {
font-size: 1rem;
line-height: 1.6;
}
@media (max-width: 768px) {
.news-item.news-featured-style {
flex-direction: row;
padding: 1.5rem;
}
.news-item.news-featured-style .news-item-image {
flex: 0 0 180px;
height: 120px;
border-radius: 8px;
margin-bottom: 0;
}
.news-item.news-featured-style .news-item-image i {
font-size: 2.5rem;
}
.news-item.news-featured-style .news-item-content {
padding: 0;
}
.news-item.news-featured-style .news-item-title {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.news-item.news-featured-style .news-item-excerpt {
font-size: 0.9rem;
}
}
.news-item:last-child {
margin-bottom: 0;
}
.news-item-image {
flex: 0 0 180px;
height: 120px;
background-color: var(--dark-component);
border-radius: 8px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
position: relative;
}
.news-item-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') no-repeat;
background-size: cover;
background-position: center;
opacity: 0.05;
z-index: 0;
}
.news-item:hover .news-item-image {
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(33, 136, 255, 0.2);
}
.news-item-image i {
font-size: 2.5rem;
color: var(--primary);
animation: subtle-pulse 2s ease-in-out infinite;
position: relative;
z-index: 1;
}
.news-item-image-has-img::before {
display: none;
}
.news-item-image-has-img i {
display: none;
}
.news-item-image-img {
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
.news-item-image i {
font-size: 4rem;
}
}
@keyframes subtle-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.news-item-content {
flex: 1;
}
.news-item-category {
display: inline-block;
background: linear-gradient(135deg, var(--primary), #4193e0);
color: white;
padding: 0.4rem 1rem;
border-radius: 20px;
font-size: 0.75rem;
margin-bottom: 0.75rem;
font-weight: 600;
box-shadow: 0 2px 8px rgba(33, 136, 255, 0.3);
}
.news-item-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--text);
}
.news-item-date {
font-size: 0.8rem;
color: var(--text-secondary);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.news-item-source {
margin-left: 0.75rem;
padding-left: 0.75rem;
border-left: 1px solid var(--border-color);
color: var(--primary);
font-weight: 500;
}
@media (max-width: 768px) {
.news-item-date {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.news-date-info {
display: flex;
align-items: center;
gap: 0.5rem;
}
.news-item-source {
margin-left: 0;
padding-left: 0;
border-left: none;
margin-top: 0.25rem;
}
.news-featured-date {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.news-featured-source {
margin-left: 0;
padding-left: 0;
border-left: none;
margin-top: 0.25rem;
}
}
.news-item-excerpt {
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.5;
}
.news-load-more {
display: block;
width: 100%;
padding: 1rem;
text-align: center;
background: linear-gradient(135deg, var(--primary), #4193e0);
color: white;
border: none;
border-radius: 12px;
font-weight: 600;
cursor: pointer;
margin-top: 2rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(33, 136, 255, 0.3);
}
.news-load-more:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(33, 136, 255, 0.4);
}
.news-sidebar {
display: flex;
flex-direction: column;
gap: 2rem;
}
.news-sidebar-widget {
background-color: var(--dark-alt);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1.5rem;
transition: all 0.3s ease;
}
.news-sidebar-widget:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
border-color: var(--primary);
}
.news-widget-title {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1.25rem;
color: var(--text);
position: relative;
padding-bottom: 0.75rem;
}
.news-widget-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background-color: var(--primary);
}
.news-popular-posts {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.news-popular-post-link {
text-decoration: none;
color: inherit;
display: block;
}
.news-popular-post {
display: flex;
gap: 1rem;
cursor: pointer;
transition: all 0.3s ease;
}
.news-popular-post-link:hover .news-popular-post {
background-color: rgba(33, 136, 255, 0.1);
border-radius: 8px;
padding: 0.5rem;
margin: -0.5rem;
border: 1px solid rgba(33, 136, 255, 0.3);
}
.news-popular-post-image {
flex: 0 0 70px;
height: 70px;
background-color: var(--dark-component);
border-radius: 6px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.news-popular-post-image i {
font-size: 1.8rem;
color: var(--primary);
animation: gentle-bounce 2.5s ease-in-out infinite;
}
.news-popular-post-image-has-img i {
display: none;
}
.news-popular-post-image-img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes gentle-bounce {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-3px); }
}
.news-popular-post-content {
flex: 1;
}
.news-popular-post-title {
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.35rem;
color: var(--text);
line-height: 1.4;
}
.news-popular-post-date {
font-size: 0.75rem;
color: var(--text-secondary);
}
.news-categories-list {
list-style: none;
}
.news-categories-list li {
margin-bottom: 0.75rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border-color);
}
.news-categories-list li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.news-categories-list a {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--text);
text-decoration: none;
transition: color 0.2s ease;
}
.news-categories-list a:hover {
color: var(--primary);
}
.news-category-count {
background-color: var(--dark-component);
color: var(--text-secondary);
padding: 0.2rem 0.6rem;
border-radius: 30px;
font-size: 0.75rem;
}
.news-newsletter-form {
margin-top: 1rem;
}
.news-form-group {
margin-bottom: 1rem;
}
.news-form-group input {
width: 100%;
padding: 0.75rem;
border-radius: 6px;
border: 1px solid var(--border-color);
background-color: var(--dark);
color: var(--text);
font-size: 0.9rem;
outline: none;
transition: border-color 0.2s ease;
}
.news-form-group input:focus {
border-color: var(--primary);
box-shadow: none;
outline: none;
transform: none;
}
.news-subscribe-btn {
width: 100%;
background-color: var(--primary);
color: white;
border: none;
padding: 0.75rem;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease;
}
.news-subscribe-btn:hover {
background-color: var(--primary-hover);
}
@media (max-width: 768px) {
body {
overflow-x: hidden;
max-width: 100vw;
}
.news-page {
overflow-x: hidden;
width: 100%;
max-width: 100vw;
}
.news-sidebar {
overflow-x: hidden;
width: 100%;
max-width: 100%;
}
.news-sidebar-widget {
overflow-x: hidden;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.news-newsletter-form {
overflow-x: hidden;
width: 100%;
max-width: 100%;
}
.news-form-group {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.news-form-group input {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow-x: hidden;
font-size: 16px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.news-subscribe-btn {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
font-size: 1rem;
}
}
.news-newsletter-message {
display: none;
margin-top: 1rem;
padding: 1rem;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 500;
line-height: 1.4;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.news-newsletter-message.success {
background-color: rgba(33, 136, 255, 0.1);
color: #2188ff;
border: 1px solid rgba(33, 136, 255, 0.3);
}
.news-newsletter-message.error {
background-color: rgba(248, 81, 73, 0.05) !important;
color: #f85149;
border: 1px solid rgba(248, 81, 73, 0.2) !important;
}
.index-message {
margin: 1.5rem 0;
padding: 1rem 1.5rem;
border-radius: 8px;
font-size: 1.1rem;
display: flex;
align-items: center;
gap: 0.7rem;
animation: slideInMessage 0.3s ease-out;
}
.index-message.success {
background-color: rgba(33, 136, 255, 0.1);
color: #2188ff;
border: 1px solid rgba(33, 136, 255, 0.3);
}
.index-message.error {
background-color: rgba(248, 81, 73, 0.05) !important;
color: #f85149;
border: 1px solid rgba(248, 81, 73, 0.2) !important;
}
.download-notification {
background: rgba(33, 136, 255, 0.1) !important;
color: #2188ff !important;
border: 1px solid rgba(33, 136, 255, 0.3) !important;
box-shadow: 0 8px 32px rgba(33, 136, 255, 0.2) !important;
}
.light-theme .download-notification i {
color: #334f74 !important;
}
.share-notification.success {
background: rgba(33, 136, 255, 0.1) !important;
color: #2188ff !important;
border: 1px solid rgba(33, 136, 255, 0.3) !important;
box-shadow: 0 8px 32px rgba(33, 136, 255, 0.2) !important;
}
.light-theme .share-notification.success i {
color: #334f74 !important;
}
.download-error-notification {
background: rgba(248, 81, 73, 0.05) !important;
color: #f85149 !important;
border: 1px solid rgba(248, 81, 73, 0.2) !important;
box-shadow: 0 8px 32px rgba(248, 81, 73, 0.2) !important;
}
.light-theme .download-error-notification i {
color: #334f74 !important;
}
.share-notification.error {
background: rgba(248, 81, 73, 0.05) !important;
color: #f85149 !important;
border: 1px solid rgba(248, 81, 73, 0.2) !important;
box-shadow: 0 8px 32px rgba(248, 81, 73, 0.2) !important;
}
.light-theme .share-notification.error i {
color: #334f74 !important;
}
.news-newsletter-message::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background-color: currentColor;
}
.news-newsletter-message.show {
display: block;
animation: slideInMessage 0.3s ease-out;
}
.news-newsletter-message.fade-out {
animation: slideOutMessage 0.3s ease-in;
}
@keyframes slideInMessage {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideOutMessage {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-10px);
}
}
@media (max-width: 768px) {
.news-newsletter-message {
padding: 0.875rem;
font-size: 0.85rem;
margin-top: 0.875rem;
}
.index-message {
padding: 0.875rem;
font-size: 1rem;
margin: 1rem 0;
}
}
@media (max-width: 480px) {
.news-newsletter-message {
padding: 0.75rem;
font-size: 0.8rem;
margin-top: 0.75rem;
}
.index-message {
padding: 0.75rem;
font-size: 0.9rem;
margin: 0.75rem 0;
}
}
@media (max-width: 992px) {
.news-navbar {
flex-wrap: wrap;
padding: 0.75rem 1rem;
}
.news-header-search {
order: 3;
max-width: 100%;
width: 100%;
margin: 0.75rem 0 0 0;
}
.news-nav-container {
justify-content: flex-start;
overflow-x: auto;
}
.news-dropdown-content {
position: static;
box-shadow: none;
border: none;
border-left: 2px solid var(--primary);
border-radius: 0;
margin: 0;
background-color: var(--dark);
}
.news-layout {
grid-template-columns: 1fr;
}
.news-featured-image {
height: 250px;
}
}
@media (max-width: 768px) {
.news-navbar {
flex-direction: column;
align-items: flex-start;
}
.news-action-buttons {
margin-top: 0.75rem;
width: 100%;
justify-content: space-between;
}
.news-nav-container {
flex-direction: column;
width: 100%;
}
.news-nav-item {
border-bottom: 1px solid var(--border-color);
padding: 0.75rem 1rem;
}
.news-nav-item.active {
border-left: 2px solid var(--primary);
border-bottom: 1px solid var(--border-color);
}
.news-dropdown:hover .news-dropdown-content {
display: none;
}
.news-dropdown.active .news-dropdown-content {
display: block;
}
.news-mobile-menu-toggle {
display: block;
margin-left: auto;
}
.news-nav {
display: none;
}
.news-nav.active {
display: block;
}
.news-item {
flex-direction: column;
gap: 1rem;
}
.news-item-image {
flex: 0 0 auto;
height: 180px;
}
.news-page-title {
font-size: 2rem;
}
.news-filter {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--border-color) transparent;
gap: 0.5rem;
margin-bottom: 1.5rem;
margin-left: -1rem;
margin-right: -1rem;
padding: 0.5rem 1rem 0.5rem 1rem;
justify-content: flex-start;
}
.news-filter::-webkit-scrollbar {
height: 4px;
}
.news-filter::-webkit-scrollbar-track {
background: transparent;
}
.news-filter::-webkit-scrollbar-thumb {
background-color: var(--border-color);
border-radius: 2px;
}
.news-filter::-webkit-scrollbar-thumb:hover {
background-color: var(--primary);
}
.news-filter-btn {
font-size: 0.8rem;
padding: 0.45rem 0.9rem;
white-space: nowrap;
flex-shrink: 0;
}
}
}
@media (max-width: 480px) {
.news-featured-image {
height: 200px;
}
.news-featured-title {
font-size: 1.25rem;
}
.news-filter {
gap: 0.5rem;
margin-bottom: 1.25rem;
margin-left: -1rem;
margin-right: -1rem;
padding: 0.5rem 1rem 0.5rem 1rem;
}
.news-filter-btn {
font-size: 0.75rem;
padding: 0.4rem 0.85rem;
}
.news-page-header {
padding: 3rem 1rem;
}
.news-content-container {
padding: 2rem 1rem;
}
}
@keyframes slideInFromLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInFromRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.news-featured-news {
animation: slideInFromLeft 0.8s ease-out;
}
.news-item {
animation: slideInFromRight 0.8s ease-out;
}
.news-item:nth-child(2) { animation-delay: 0.1s; }
.news-item:nth-child(3) { animation-delay: 0.2s; }
.news-item:nth-child(4) { animation-delay: 0.3s; }
.news-item:nth-child(5) { animation-delay: 0.4s; }
.news-sidebar-widget {
animation: fadeInUp 0.8s ease-out;
}
.news-sidebar-widget:nth-child(2) { animation-delay: 0.1s; }
.news-sidebar-widget:nth-child(3) { animation-delay: 0.2s; }
.news-sidebar-widget:nth-child(4) { animation-delay: 0.3s; }
.news-filter-btn {
animation: fadeInUp 0.6s ease-out;
}
.news-filter-btn:nth-child(2) { animation-delay: 0.1s; }
.news-filter-btn:nth-child(3) { animation-delay: 0.2s; }
.news-filter-btn:nth-child(4) { animation-delay: 0.3s; }
.news-filter-btn:nth-child(5) { animation-delay: 0.4s; }
.news-filter-btn:nth-child(6) { animation-delay: 0.5s; }
.news-filter-btn:nth-child(7) { animation-delay: 0.6s; }
.carte-btn {
background-color: var(--success);
color: white;
padding: 0.4rem 1rem;
border: 1px solid rgba(240, 246, 252, 0.1);
border-radius: 6px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s ease;
text-decoration: none;
}
.carte-btn:hover {
background-color: #2ea043;
}
.carte-page-header {
background: var(--dark-alt);
padding: 3rem 2rem;
border-bottom: 1px solid var(--border-color);
text-align: center;
position: relative;
}
.carte-page-header-container {
max-width: 1000px;
margin: 0 auto;
}
.carte-page-header h1 {
font-size: clamp(2.5rem, 4.5vw, 3.5rem);
margin-bottom: 2rem;
color: #334f74;
font-weight: 700;
}
.dark-theme .carte-page-header h1 {
color: var(--text-secondary);
}
.carte-page-header p {
font-size: clamp(1.1rem, 2vw, 1.4rem);
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
}
.carte-container {
display: flex;
position: relative;
max-width: 100vw;
overflow-x: hidden;
background-color: var(--dark);
min-height: 100vh;
}
.carte-main {
flex: 1;
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
transition: margin-right 0.3s ease;
max-width: 100%;
overflow-x: hidden;
min-height: calc(100vh - 200px);
}
.carte-container:has(.carte-sidebar.open) .carte-main {
margin-right: 500px;
}
.carte-svg-container {
max-width: 1200px;
width: 100%;
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 12px;
box-shadow: 0 8px 16px rgba(0,0,0,0.3);
transition: max-width 0.3s ease;
overflow: hidden;
max-width: min(1200px, calc(100vw - 4rem));
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.light-theme .carte-svg-container {
background-color: #f8fafc;
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
.carte-svg-header {
background-color: rgba(33, 136, 255, 0.1);
padding: 1.5rem 2rem;
text-align: center;
border-bottom: 1px solid var(--border-color);
}
.light-theme .carte-svg-header {
background-color: rgba(33, 136, 255, 0.05);
}
.carte-svg-header h2 {
color: var(--text);
font-size: 1.5rem;
font-weight: 600;
margin: 0;
}
.carte-svg-header p {
color: var(--text-secondary);
font-size: 0.9rem;
margin: 0.5rem 0 0 0;
font-weight: 400;
}
.carte-svg-content {
padding: 2rem;
}
.carte-container:has(.carte-sidebar.open) .carte-svg-container {
max-width: min(800px, calc(100vw - 4rem));
}
.carte-svg {
width: 100%;
height: auto;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.carte-department {
fill: var(--dark-component);
stroke: var(--border-color);
stroke-width: 2;
transition: all 0.3s ease;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.light-theme .carte-department {
stroke: var(--primary);
}
.carte-department:hover,
.carte-department:focus {
fill: rgba(33, 136, 255, 0.7);
stroke: var(--primary);
stroke-width: 3;
outline: none;
}
.carte-department.selected {
fill: rgba(33, 136, 255, 0.5);
stroke: var(--primary);
stroke-width: 4;
}
.carte-tooltip {
position: fixed;
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 6px;
will-change: transform;
padding: 0;
color: var(--text);
font-size: 0.9rem;
pointer-events: none;
z-index: 1000;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.2s ease, transform 0.2s ease;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
max-width: 320px;
min-width: 220px;
overflow: visible;
padding-bottom: 10px;
}
.carte-tooltip::before {
content: '';
position: absolute;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid var(--border-color);
bottom: -11px;
left: var(--pointer-left, 50%);
transform: translateX(-50%);
z-index: 0;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}
.carte-tooltip::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid var(--dark-component);
bottom: -10px;
left: var(--pointer-left, 50%);
transform: translateX(-50%);
z-index: 1;
}
.carte-tooltip.pointer-left::before {
border-left: none;
border-right: 10px solid var(--border-color);
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
left: -11px;
top: var(--pointer-top, 50%);
bottom: auto;
transform: translateY(-50%);
}
.carte-tooltip.pointer-left::after {
border-left: none;
border-right: 10px solid var(--dark-component);
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
left: -10px;
top: var(--pointer-top, 50%);
bottom: auto;
transform: translateY(-50%);
}
.carte-tooltip.pointer-right::before {
border-right: none;
border-left: 10px solid var(--border-color);
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
right: -11px;
left: auto;
top: var(--pointer-top, 50%);
bottom: auto;
transform: translateY(-50%);
}
.carte-tooltip.pointer-right::after {
border-right: none;
border-left: 10px solid var(--dark-component);
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
right: -10px;
left: auto;
top: var(--pointer-top, 50%);
bottom: auto;
transform: translateY(-50%);
}
.carte-tooltip.visible {
opacity: 1;
transform: translateY(0);
}
.carte-tooltip .tooltip-icon-wrapper {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
width: 28px;
height: 28px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(33, 136, 255, 0.4);
z-index: 10;
}
.carte-tooltip h3 {
margin-bottom: 0.5rem;
color: var(--text);
font-size: 1rem;
font-weight: 600;
}
.carte-tooltip-item {
display: flex;
justify-content: space-between;
margin-bottom: 0.25rem;
font-size: 0.85rem;
}
.carte-tooltip-item strong {
color: var(--primary);
}
.carte-sidebar {
width: 500px;
background-color: var(--dark-alt);
border-left: 1px solid var(--border-color);
overflow-y: auto;
z-index: 100;
position: absolute;
top: 0;
right: 0;
height: 100%;
opacity: 0;
transform: translateX(100%);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
visibility: hidden;
}
.carte-sidebar.open {
opacity: 1;
transform: translateX(0);
visibility: visible;
}
.carte-sidebar-header {
padding: 1.5rem;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
background-color: var(--dark-alt);
z-index: 10;
will-change: transform;
contain: layout style paint;
opacity: 0;
transform: translateY(-20px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.1s;
}
.carte-sidebar.open .carte-sidebar-header {
opacity: 1;
transform: translateY(0);
}
.carte-sidebar-header h2 {
color: #334f74;
font-size: 1.5rem;
font-weight: 600;
}
.dark-theme .carte-sidebar-header h2 {
color: white;
}
.carte-close-btn {
background: none;
border: none;
color: var(--text-secondary);
font-size: 1.5rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 6px;
transition: background-color 0.2s ease;
}
.carte-close-btn:hover {
background-color: var(--dark-component);
color: var(--text);
}
.carte-sidebar-content {
padding: 1.5rem;
opacity: 0;
transform: translateY(20px);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.1s;
}
.carte-sidebar.open .carte-sidebar-content {
opacity: 1;
transform: translateY(0);
}
.carte-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.carte-stat-card {
opacity: 0;
transform: scale(0.9);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.carte-sidebar.open .carte-stat-card {
opacity: 1;
transform: scale(1);
}
.carte-sidebar.open .carte-stat-card:nth-child(1) { transition-delay: 0.2s; }
.carte-sidebar.open .carte-stat-card:nth-child(2) { transition-delay: 0.3s; }
.carte-sidebar.open .carte-stat-card:nth-child(3) { transition-delay: 0.4s; }
.carte-sidebar.open .carte-stat-card:nth-child(4) { transition-delay: 0.5s; }
.carte-sidebar.open .carte-stat-card:nth-child(5) { transition-delay: 0.6s; }
.carte-sidebar.open .carte-stat-card:nth-child(6) { transition-delay: 0.7s; }
.carte-stat-card {
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 1rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.light-theme .carte-stat-card {
background-color: #f8fafc;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.carte-stat-card:hover {
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
transform: translateY(-2px);
}
.carte-stat-card h4 {
color: var(--text-secondary);
font-size: 0.8rem;
text-transform: uppercase;
margin-bottom: 0.5rem;
font-weight: 500;
}
.carte-stat-card .value {
color: white;
font-size: 1.5rem;
font-weight: 600;
}
.light-theme .carte-stat-card .value {
color: #334f74;
}
.carte-chart-container {
margin-bottom: 2rem;
opacity: 0;
transform: translateY(30px);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.carte-sidebar.open .carte-chart-container {
opacity: 1;
transform: translateY(0);
}
.carte-sidebar.open .carte-chart-container:nth-of-type(1) { transition-delay: 0.3s; }
.carte-sidebar.open .carte-chart-container:nth-of-type(2) { transition-delay: 0.4s; }
.carte-chart-container h3 {
color: var(--text-secondary);
margin-bottom: 1rem;
font-size: 1.25rem;
font-weight: 600;
text-align: center;
}
.dark-theme .carte-chart-container h3 {
color: var(--text);
}
.carte-chart-wrapper {
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 1rem;
height: 300px;
position: relative;
}
.carte-chart-source {
position: absolute;
bottom: 8px;
left: 12px;
font-size: 0.75rem;
color: var(--text-secondary);
font-weight: 500;
margin-top: 12px;
}
.carte-description {
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 1.5rem;
margin-bottom: 2rem;
opacity: 0;
transform: translateY(30px);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.5s;
}
.carte-sidebar.open .carte-description {
opacity: 1;
transform: translateY(0);
}
.carte-description h3 {
color: var(--text);
margin-bottom: 1rem;
font-size: 1.25rem;
font-weight: 600;
}
.carte-description p {
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 1rem;
}
.carte-indicators {
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 1.5rem;
opacity: 0;
transform: translateY(30px);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.6s;
}
.light-theme .carte-indicators {
background-color: #f8fafc;
}
.carte-sidebar.open .carte-indicators {
opacity: 1;
transform: translateY(0);
}
.carte-indicators h3 {
color: var(--text);
margin-bottom: 1rem;
font-size: 1.25rem;
font-weight: 600;
}
.carte-indicator-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid var(--border-color);
opacity: 0;
transform: translateX(-20px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.carte-sidebar.open .carte-indicator-row {
opacity: 1;
transform: translateX(0);
}
.carte-sidebar.open .carte-indicator-row:nth-child(1) { transition-delay: 0.7s; }
.carte-sidebar.open .carte-indicator-row:nth-child(2) { transition-delay: 0.8s; }
.carte-sidebar.open .carte-indicator-row:nth-child(3) { transition-delay: 0.9s; }
.carte-sidebar.open .carte-indicator-row:nth-child(4) { transition-delay: 1.0s; }
.carte-sidebar.open .carte-indicator-row:nth-child(5) { transition-delay: 1.1s; }
.carte-sidebar.open .carte-indicator-row:nth-child(6) { transition-delay: 1.2s; }
.carte-sidebar.open .carte-indicator-row:nth-child(7) { transition-delay: 1.3s; }
.carte-sidebar.open .carte-indicator-row:nth-child(8) { transition-delay: 1.4s; }
.carte-sidebar.open .carte-indicator-row:nth-child(9) { transition-delay: 1.5s; }
.carte-indicator-row:last-child {
border-bottom: none;
}
.carte-indicator-label {
color: var(--text);
display: flex;
align-items: center;
gap: 0.5rem;
}
.carte-indicator-value {
color: var(--primary);
font-weight: 600;
}
.light-theme .carte-indicator-value {
color: #334f74;
}
.carte-legend {
margin-top: 2rem;
padding: 1rem;
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 6px;
}
.light-theme .carte-legend {
background-color: #f8fafc;
}
.carte-legend h3 {
color: var(--text);
margin-bottom: 1rem;
font-size: 1rem;
font-weight: 600;
}
.carte-legend-item {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
font-size: 0.9rem;
color: var(--text);
}
.carte-legend-color {
width: 16px;
height: 16px;
border-radius: 2px;
}
.carte-legend-hover {
background-color: #30363d;
}
.light-theme .carte-legend-hover {
background-color: white;
border: 1px solid var(--primary);
}
.carte-legend-click {
background-color: rgba(33, 136, 255, 0.3);
}
@media (max-width: 1024px) {
.carte-container {
flex-direction: column;
position: sticky;
top: 0;
z-index: 100;
will-change: transform;
contain: layout style paint;
}
.carte-page-header {
position: sticky;
top: 0;
z-index: 200;
will-change: transform;
contain: layout style paint;
}
.carte-sidebar {
width: 100%;
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 2000;
will-change: transform;
contain: layout style paint;
opacity: 0;
transform: translateX(100%);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
visibility: hidden;
}
.carte-sidebar.open {
opacity: 1;
transform: translateX(0);
visibility: visible;
}
.carte-main {
padding: 1rem;
min-height: auto;
}
.carte-svg-container {
max-width: calc(100vw - 2rem);
}
.carte-sidebar .carte-sidebar-content {
opacity: 0;
transform: translateY(30px);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.2s;
}
.carte-sidebar.open .carte-sidebar-content {
opacity: 1;
transform: translateY(0);
}
.carte-sidebar .carte-stat-card {
opacity: 0;
transform: scale(0.9) translateY(20px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.carte-sidebar.open .carte-stat-card {
opacity: 1;
transform: scale(1) translateY(0);
}
.carte-sidebar.open .carte-stat-card:nth-child(1) { transition-delay: 0.3s; }
.carte-sidebar.open .carte-stat-card:nth-child(2) { transition-delay: 0.4s; }
.carte-sidebar.open .carte-stat-card:nth-child(3) { transition-delay: 0.5s; }
.carte-sidebar.open .carte-stat-card:nth-child(4) { transition-delay: 0.6s; }
.carte-sidebar.open .carte-stat-card:nth-child(5) { transition-delay: 0.7s; }
.carte-sidebar.open .carte-stat-card:nth-child(6) { transition-delay: 0.8s; }
.carte-sidebar .carte-chart-container,
.carte-sidebar .carte-description,
.carte-sidebar .carte-indicators {
opacity: 0;
transform: translateY(40px);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.carte-sidebar.open .carte-chart-container,
.carte-sidebar.open .carte-description,
.carte-sidebar.open .carte-indicators {
opacity: 1;
transform: translateY(0);
}
.carte-sidebar.open .carte-chart-container:nth-of-type(1) { transition-delay: 0.4s; }
.carte-sidebar.open .carte-chart-container:nth-of-type(2) { transition-delay: 0.5s; }
.carte-sidebar.open .carte-description { transition-delay: 0.6s; }
.carte-sidebar.open .carte-indicators { transition-delay: 0.7s; }
.carte-sidebar .carte-indicator-row {
opacity: 0;
transform: translateX(-30px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.carte-sidebar.open .carte-indicator-row {
opacity: 1;
transform: translateX(0);
}
.carte-sidebar.open .carte-indicator-row:nth-child(1) { transition-delay: 0.8s; }
.carte-sidebar.open .carte-indicator-row:nth-child(2) { transition-delay: 0.9s; }
.carte-sidebar.open .carte-indicator-row:nth-child(3) { transition-delay: 1.0s; }
.carte-sidebar.open .carte-indicator-row:nth-child(4) { transition-delay: 1.1s; }
.carte-sidebar.open .carte-indicator-row:nth-child(5) { transition-delay: 1.2s; }
.carte-sidebar.open .carte-indicator-row:nth-child(6) { transition-delay: 1.3s; }
.carte-sidebar.open .carte-indicator-row:nth-child(7) { transition-delay: 1.4s; }
.carte-sidebar.open .carte-indicator-row:nth-child(8) { transition-delay: 1.5s; }
.carte-sidebar.open .carte-indicator-row:nth-child(9) { transition-delay: 1.6s; }
.carte-stats-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.carte-page-header {
padding: 2rem 1rem;
position: relative;
top: auto;
}
.carte-container {
position: relative;
top: auto;
}
.carte-department:hover,
.carte-department:focus {
fill: var(--primary);
opacity: 0.5;
stroke: var(--primary);
stroke-width: 3;
outline: none;
}
.carte-page-header h1 {
font-size: 2rem;
}
.carte-page-header p {
font-size: 1rem;
}
body:has(.carte-sidebar.open) .carte-page-header,
body:has(.carte-sidebar.open) .carte-main,
body:has(.carte-sidebar.open) .carte-legend,
body:has(.carte-sidebar.open) header,
body:has(.carte-sidebar.open) footer,
body:has(.carte-sidebar.open) .back-to-top {
display: none !important;
}
body:has(.carte-sidebar.open) {
overflow: hidden !important;
position: fixed !important;
width: 100% !important;
height: 100% !important;
will-change: transform !important;
contain: layout style paint !important;
}
body:has(.carte-sidebar.open) .carte-sidebar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 9999 !important;
will-change: transform !important;
contain: layout style paint !important;
background-color: var(--dark-alt) !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
overflow-y: auto !important;
opacity: 1 !important;
transform: translateX(0) !important;
visibility: visible !important;
}
body:has(.carte-sidebar.open) .carte-sidebar .carte-sidebar-header,
body:has(.carte-sidebar.open) .carte-sidebar .carte-sidebar-content {
opacity: 1 !important;
transform: translateY(0) !important;
visibility: visible !important;
}
body:has(.carte-sidebar.open) .carte-sidebar .carte-sidebar-content {
background-color: transparent !important;
min-height: calc(100vh - 80px) !important;
padding-bottom: 2rem !important;
}
body:has(.carte-sidebar.open) .carte-sidebar * {
background-color: transparent !important;
}
body:has(.carte-sidebar.open) .carte-sidebar .carte-sidebar-header {
background-color: var(--dark-alt) !important;
}
body:has(.carte-sidebar.open) .carte-sidebar .carte-stat-card,
body:has(.carte-sidebar.open) .carte-sidebar .carte-chart-wrapper,
body:has(.carte-sidebar.open) .carte-sidebar .carte-description,
body:has(.carte-sidebar.open) .carte-sidebar .carte-indicators {
background-color: var(--dark-component) !important;
}
}
@media (max-width: 768px) {
.carte-svg-header {
padding: 1.5rem 2rem;
}
.carte-svg-header h2 {
font-size: 1.5rem;
}
.carte-svg-header p {
font-size: 0.9rem;
}
.carte-svg-content {
padding: 1rem;
}
.carte-tooltip {
max-width: 220px;
min-width: 180px;
font-size: 0.8rem;
padding: 0.75rem;
}
.carte-tooltip h3 {
font-size: 0.9rem;
margin-bottom: 0.4rem;
}
.carte-tooltip-item {
font-size: 0.75rem;
margin-bottom: 0.2rem;
}
.carte-chart-wrapper {
height: 280px;
padding-bottom: 1rem;
}
.carte-chart-source {
bottom: 12px;
}
}
@media (max-width: 480px) {
.carte-tooltip {
max-width: 200px;
min-width: 160px;
font-size: 0.75rem;
padding: 0.6rem;
}
.carte-tooltip h3 {
font-size: 0.85rem;
margin-bottom: 0.3rem;
}
.carte-tooltip-item {
font-size: 0.7rem;
margin-bottom: 0.15rem;
}
}
@keyframes carte-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
.carte-loading {
animation: carte-pulse 2s infinite;
}
.carte-department:focus {
outline: none;
}
.carte-container *,
.carte-container svg,
.carte-container path,
.carte-container g {
-webkit-tap-highlight-color: transparent !important;
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
-khtml-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.cvter-dropdown {
position: relative;
}
.cvter-dropdown-content {
display: none;
position: absolute;
background-color: var(--dark-component);
min-width: 200px;
box-shadow: 0 8px 16px rgba(0,0,0,0.3);
z-index: 1001;
top: 100%;
left: 0;
border: 1px solid var(--border-color);
border-radius: 6px;
margin-top: 0.25rem;
}
.cvter-dropdown:hover .dropdown-content {
display: block;
}
.cvter-dropdown-item {
color: var(--text);
padding: 0.75rem 1rem;
text-decoration: none;
display: block;
font-size: 0.9rem;
transition: background-color 0.2s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.cvter-dropdown-item:hover {
background-color: rgba(255, 255, 255, 0.05);
color: white;
}
.cvter-dropdown-divider {
height: 1px;
background-color: var(--border-color);
margin: 0.25rem 0;
}
.cvter-dropdown-header {
padding: 0.75rem 1rem;
font-size: 0.8rem;
color: var(--text-secondary);
font-weight: 600;
text-transform: uppercase;
}
.cvter-page-header {
background: var(--dark-alt);
border-bottom: 1px solid var(--border-color);
padding: 3rem 0;
}
.cvter-page-header-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 2rem;
text-align: center;
}
.cvter-page-header h1 {
font-size: clamp(2.5rem, 4.5vw, 3.5rem);
margin-bottom: 2rem;
color: #334f74;
font-weight: 700;
}
.cvter-page-header p {
font-size: clamp(1.1rem, 2vw, 1.4rem);
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
}
.dark-theme .cvter-page-header h1 {
color: var(--text-secondary);
}
.cvter-container {
max-width: 1300px;
margin: 0 auto;
padding: 2rem;
}
@media (max-width: 768px) {
.cvter-container {
max-width: none;
padding: 1rem 0.5rem;
}
}
.cvter-header {
text-align: center;
margin-bottom: 3rem;
}
.cvter-header h1 {
font-size: 2.5rem;
color: var(--text);
margin-bottom: 1rem;
}
.cvter-header p {
color: var(--text-secondary);
font-size: 1.1rem;
}
.cvter-converter-container {
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 2rem;
margin-bottom: 2rem;
}
.cvter-converter-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.cvter-converter-section {
background-color: var(--dark-alt);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 1.5rem;
}
.cvter-converter-section h2 {
font-size: 1.25rem;
color: var(--text);
margin-bottom: 1rem;
}
.cvter-file-input-container {
margin-bottom: 1.5rem;
}
.cvter-file-input-label {
display: block;
padding: 1rem;
border: 2px dashed var(--border-color);
border-radius: 6px;
text-align: center;
cursor: pointer;
transition: border-color 0.2s ease;
}
.cvter-file-input-label:hover {
border-color: var(--primary);
}
.cvter-file-input {
display: none;
}
.cvter-format-selector {
margin-bottom: 1.5rem;
}
.cvter-format-selector label {
display: block;
margin-bottom: 0.5rem;
color: var(--text-secondary);
}
.cvter-custom-dropdown {
position: relative;
width: 100%;
user-select: none;
}
.cvter-dropdown-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 2.5rem 0.75rem 0.75rem;
border: 1.5px solid var(--border-color);
border-radius: 8px;
background-color: var(--dark);
color: var(--text);
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
font-size: 0.9rem;
min-height: 48px;
position: relative;
}
.cvter-dropdown-header:after {
content: '';
display: block;
position: absolute;
right: 1rem;
top: 50%;
width: 16px;
height: 16px;
pointer-events: none;
background: url('data:image/svg+xml;utf8,') no-repeat center/contain;
transform: translateY(-50%) rotate(0deg);
transition: transform 0.3s cubic-bezier(.4,2,.6,1), filter 0.2s;
filter: drop-shadow(0 1px 1px rgba(33,136,255,0.08));
}
.cvter-dropdown-header.active {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(33, 136, 255, 0.13);
border-radius: 8px 8px 0 0;
border-bottom: none;
}
.cvter-dropdown-header.active:after {
transform: translateY(-50%) rotate(180deg);
filter: drop-shadow(0 2px 4px rgba(33,136,255,0.12));
}
.cvter-dropdown-header:hover {
border-color: var(--primary);
background-color: rgba(33, 136, 255, 0.05);
}
.cvter-dropdown-options {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--dark-component);
border: 1.5px solid var(--border-color);
border-top: none;
border-radius: 0 0 8px 8px;
box-shadow: 0 8px 24px rgba(33,136,255,0.10);
z-index: 1000;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
margin-top: 0;
scrollbar-width: thin;
scrollbar-color: var(--border-color) var(--dark-component);
transform: translateY(-10px) scaleY(0.98);
transition: max-height 0.3s ease, opacity 0.28s cubic-bezier(.4,2,.6,1), transform 0.28s cubic-bezier(.4,2,.6,1);
will-change: opacity, transform;
opacity: 0;
pointer-events: none;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.cvter-dropdown-options::-webkit-scrollbar {
width: 6px;
}
.cvter-dropdown-options::-webkit-scrollbar-track {
background: var(--dark-component);
border-radius: 3px;
}
.cvter-dropdown-options::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 3px;
}
.cvter-dropdown-options::-webkit-scrollbar-thumb:hover {
background: var(--text-secondary);
}
.cvter-dropdown-options.active {
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
opacity: 1;
pointer-events: auto;
transform: translateY(0) scaleY(1);
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.cvter-dropdown-option {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
cursor: pointer;
transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
color: var(--text);
font-size: 0.9rem;
border: none;
border-radius: 4px;
margin: 2px 6px;
}
.cvter-dropdown-option:last-child {
margin-bottom: 6px;
}
.cvter-dropdown-option:hover {
background-color: rgba(33, 136, 255, 0.1);
color: #2188ff;
}
.cvter-dropdown-option:hover i {
color: #2188ff;
}
.cvter-dropdown-option.selected {
background-color: rgba(33, 136, 255, 0.1);
color: #2188ff;
}
.cvter-dropdown-option i {
width: 16px;
text-align: center;
color: var(--text-secondary);
transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.cvter-dropdown-option.selected i {
color: #2188ff;
}
.cvter-dropdown-option.disabled {
opacity: 0.5;
cursor: not-allowed;
color: var(--text-secondary);
}
.cvter-dropdown-option.disabled:hover {
background: none;
color: var(--text-secondary);
box-shadow: none;
}
.cvter-dropdown-option.disabled i {
color: var(--text-secondary);
}
.cvter-preview-container {
margin-top: 1.5rem;
height: 300px;
display: flex;
flex-direction: column;
position: relative;
}
.cvter-preview-container h3 {
font-size: 1rem;
color: var(--text-secondary);
margin-bottom: 0.75rem;
flex-shrink: 0;
}
.cvter-preview-content {
background-color: var(--dark);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 1rem;
flex: 1;
overflow-y: auto;
font-family: monospace;
font-size: 0.9rem;
white-space: pre-wrap;
word-wrap: break-word;
position: absolute;
top: 2rem;
left: 0;
right: 0;
bottom: 0;
}
.cvter-preview-content::-webkit-scrollbar {
width: 8px;
}
.cvter-preview-content::-webkit-scrollbar-track {
background: var(--dark-alt);
border-radius: 4px;
}
.cvter-preview-content::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 4px;
}
.cvter-preview-content::-webkit-scrollbar-thumb:hover {
background: var(--text-secondary);
}
.cvter-btn {
background-color: var(--success);
color: white;
padding: 0.4rem 1rem;
border: 1px solid rgba(240, 246, 252, 0.1);
border-radius: 6px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s ease;
text-decoration: none;
}
.cvter-btn:hover {
background-color: #2ea043;
}
.cvter-btn-primary {
background-color: #2188ff;
color: white;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 9999px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.cvter-btn-primary:hover {
background-color: #0366d6;
}
.cvter-btn-primary:disabled {
background-color: #30363d;
cursor: not-allowed;
}
.light-theme .cvter-btn-primary:disabled {
background-color: #d1d5db;
color: #9ca3af;
}
.cvter-actions {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 2rem;
}
.cvter-error-message {
color: #f85149;
margin-top: 0.5rem;
font-size: 0.9rem;
}
.cvter-success-message {
color: var(--success);
margin-top: 0.5rem;
font-size: 0.9rem;
}
@media (max-width: 768px) {
.cvter-converter-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
body {
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.cvter-custom-dropdown {
position: relative;
z-index: 100;
}
.cvter-converter-section {
position: relative;
z-index: 50;
}
.cvter-dropdown-options {
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
z-index: 1001;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
max-height: 200px;
}
.cvter-dropdown-options.active {
max-height: 200px;
opacity: 1;
pointer-events: auto;
transform: translateY(0) scaleY(1);
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
border: 1.5px solid var(--border-color);
}
.cvter-navbar {
padding: 1rem;
flex-wrap: wrap;
gap: 1rem;
}
.cvter-header-search {
order: 3;
width: 100%;
}
.cvter-header-search input {
width: 100%;
}
.cvter-action-buttons {
gap: 0.5rem;
}
.cvter-language-toggle {
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
}
.cvter-mobile-menu-toggle {
display: block;
}
.cvter-nav-container {
flex-direction: column;
display: none;
}
.cvter-nav-container.active {
display: flex;
}
.cvter-nav-item {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border-color);
}
.cvter-dropdown-content {
position: static;
box-shadow: none;
border: none;
margin-top: 0;
}
.cvter-converter-container {
padding: 1rem;
}
.cvter-page-header {
padding: 2rem 0;
}
.cvter-page-header h1 {
font-size: 2rem;
}
.cvter-page-header p {
font-size: 1rem;
}
}
@media (max-width: 414px) {
.cvter-navbar {
padding: 0.75rem;
gap: 0.75rem;
}
.cvter-logo {
font-size: 1.25rem;
}
.cvter-logo-img {
height: 40px;
}
.cvter-header-search input {
font-size: 0.85rem;
padding: 0.4rem 0.75rem;
}
.cvter-language-toggle {
padding: 0.3rem 0.6rem;
font-size: 0.75rem;
}
.cvter-btn {
padding: 0.3rem 0.6rem;
font-size: 0.75rem;
}
.cvter-page-header {
padding: 1.5rem 0;
}
.cvter-page-header h1 {
font-size: 1.75rem;
}
.cvter-page-header p {
font-size: 0.9rem;
}
}
.cvter-converter-header {
padding: 1.5rem 1rem;
}
.cvter-converter-header h1 {
font-size: 1.5rem;
}
.cvter-converter-header p {
font-size: 0.9rem;
}
.cvter-converter-content {
flex-direction: column;
gap: 1rem;
}
.cvter-format-selectors {
flex-direction: column;
gap: 1rem;
}
.cvter-format-selector {
width: 100%;
}
.cvter-format-selector select {
width: 100%;
font-size: 0.9rem;
}
.cvter-drop-zone {
padding: 1.5rem;
min-height: 120px;
}
.cvter-drop-zone p {
font-size: 0.9rem;
}
.cvter-drop-zone i {
font-size: 2rem;
}
.cvter-preview-container {
flex-direction: column;
gap: 1rem;
}
.cvter-preview-section {
width: 100%;
}
.cvter-preview-section h3 {
font-size: 1rem;
}
.cvter-preview-content {
height: 200px;
font-size: 0.8rem;
padding: 0.75rem;
line-height: 1.4;
}
.cvter-action-buttons {
flex-direction: column;
gap: 0.5rem;
}
.cvter-action-buttons button {
width: 100%;
padding: 0.75rem;
font-size: 0.9rem;
}
.cvter-format-selector select,
.cvter-action-buttons button {
min-height: 44px;
}
.cvter-error-message {
font-size: 0.9rem;
padding: 0.75rem;
position: fixed;
bottom: 1rem;
left: 1rem;
right: 1rem;
z-index: 1000;
}
@media (max-width: 480px) {
.cvter-converter-header {
padding: 1rem;
}
.cvter-converter-header h1 {
font-size: 1.25rem;
}
.cvter-drop-zone {
padding: 1rem;
min-height: 100px;
}
.cvter-preview-content {
height: 150px;
}
.cvter-preview-content table {
font-size: 0.75rem;
border-collapse: collapse;
width: 100%;
min-width: 300px;
}
.cvter-preview-content table th,
.cvter-preview-content table td {
padding: 6px 10px;
border: 1px solid #484f58;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
}
.cvter-preview-content table th {
background-color: #30363d;
color: white;
font-weight: bold;
font-size: 0.7rem;
padding: 8px 6px;
}
.cvter-preview-content table td {
font-size: 0.7rem;
padding: 6px 5px;
}
.cvter-actions {
flex-direction: column;
gap: 0.75rem;
padding: 0 1rem;
}
.cvter-btn-primary {
width: 100%;
padding: 0.75rem 1rem;
font-size: 0.9rem;
justify-content: center;
min-height: 44px;
}
.cvter-btn-primary i {
font-size: 0.9rem;
}
}
@media (max-width: 375px) {
.cvter-container {
padding: 0.75rem 0.25rem;
}
.cvter-converter-container {
padding: 1rem;
}
.cvter-converter-grid {
gap: 1rem;
}
.cvter-converter-section {
padding: 1rem;
}
.cvter-actions {
gap: 0.5rem;
margin-top: 1.5rem;
}
.cvter-btn-primary {
padding: 0.8rem 1rem;
font-size: 0.85rem;
min-height: 48px;
}
.cvter-btn-primary i {
font-size: 0.85rem;
}
.cvter-preview-container {
height: 200px;
}
.cvter-preview-content {
height: 120px;
font-size: 0.75rem;
}
.cvter-preview-content table {
font-size: 0.7rem;
border-collapse: collapse;
width: 100%;
min-width: 250px;
}
.cvter-preview-content table th,
.cvter-preview-content table td {
padding: 5px 8px;
border: 1px solid #484f58;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}
.cvter-preview-content table th {
background-color: #30363d;
color: white;
font-weight: bold;
font-size: 0.65rem;
padding: 7px 5px;
}
.cvter-preview-content table td {
font-size: 0.65rem;
padding: 5px 4px;
}
}
@media (max-width: 320px) {
.cvter-container {
padding: 0.5rem 0.25rem;
}
.cvter-converter-container {
padding: 0.75rem;
}
.cvter-converter-section {
padding: 0.75rem;
}
.cvter-converter-section h2 {
font-size: 1.1rem;
}
.cvter-actions {
gap: 0.5rem;
margin-top: 1rem;
}
.cvter-btn-primary {
padding: 0.7rem 0.75rem;
font-size: 0.8rem;
min-height: 44px;
}
.cvter-btn-primary i {
font-size: 0.8rem;
}
.cvter-preview-container {
height: 180px;
}
.cvter-preview-content {
height: 100px;
font-size: 0.7rem;
}
.cvter-preview-content table {
font-size: 0.65rem;
border-collapse: collapse;
width: 100%;
min-width: 200px;
}
.cvter-preview-content table th,
.cvter-preview-content table td {
padding: 4px 6px;
border: 1px solid #484f58;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 80px;
}
.cvter-preview-content table th {
background-color: #30363d;
color: white;
font-weight: bold;
font-size: 0.6rem;
padding: 6px 4px;
}
.cvter-preview-content table td {
font-size: 0.6rem;
padding: 4px 3px;
}
.cvter-dropdown-header {
font-size: 0.85rem;
padding: 0.6rem 2rem 0.6rem 0.6rem;
min-height: 40px;
}
.cvter-dropdown-option {
font-size: 0.8rem;
padding: 0.6rem 0.75rem;
background-color: var(--dark-component);
border: 1px solid transparent;
}
.cvter-dropdown-option:hover {
background: linear-gradient(90deg, var(--primary) 60%, #1a5bb8 100%);
color: #fff;
box-shadow: 0 2px 8px rgba(33,136,255,0.10);
border-color: var(--primary);
}
.cvter-file-input-label {
padding: 0.75rem;
font-size: 0.85rem;
}
.cvter-file-input-label i {
font-size: 1.5rem;
}
}
@media (max-width: 768px) and (orientation: landscape) {
.cvter-converter-content {
flex-direction: row;
flex-wrap: wrap;
}
.cvter-format-selectors {
flex-direction: row;
width: 100%;
}
.cvter-preview-container {
flex-direction: row;
width: 100%;
}
.cvter-preview-section {
width: 50%;
}
.cvter-preview-content {
height: 250px;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.cvter-converter-container {
padding: 1.5rem;
}
.cvter-preview-content {
height: 300px;
}
.cvter-format-selectors {
gap: 1.5rem;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
.cvter-notification-container {
position: relative;
margin: 0 auto;
padding: 1rem 2rem;
z-index: 10;
display: flex;
flex-direction: column;
gap: 0.75rem;
max-width: 1300px;
width: 100%;
}
.cvter-notification {
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1rem 1.25rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.95rem;
font-weight: 500;
transition: all 0.3s ease;
opacity: 0;
transform: translateY(-20px);
animation: slideIn 0.3s ease forwards;
}
.cvter-notification.success {
border-left: 4px solid var(--primary);
background: linear-gradient(135deg, rgba(33, 136, 255, 0.1) 0%, rgba(33, 136, 255, 0.05) 100%);
}
.cvter-notification.error {
border-left: 4px solid #dc3545;
background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%);
}
.cvter-notification i {
font-size: 1.1rem;
flex-shrink: 0;
}
.cvter-notification.success i {
color: var(--primary);
}
.cvter-notification.error i {
color: #dc3545;
}
.light-theme .cvter-notification.success i {
color: #334f74;
}
.light-theme .cvter-notification.error i {
color: #334f74;
}
.cvter-notification .cvter-message {
flex: 1;
color: var(--text);
line-height: 1.4;
}
.cvter-notification .cvter-close-btn {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 0.25rem;
border-radius: 4px;
transition: color 0.2s ease;
flex-shrink: 0;
}
.cvter-notification .cvter-close-btn:hover {
color: var(--text);
background-color: rgba(255, 255, 255, 0.1);
}
@keyframes slideIn {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideOut {
to {
opacity: 0;
transform: translateY(-20px);
}
}
.cvter-notification.removing {
animation: slideOut 0.3s ease forwards;
}
@media (max-width: 768px) {
.cvter-notification-container {
padding: 1rem;
}
.cvter-notification {
padding: 0.875rem 1rem;
font-size: 0.9rem;
}
}
.gnrt-btn {
background-color: var(--success);
color: white;
padding: 0.4rem 1rem;
border: 1px solid rgba(240, 246, 252, 0.1);
border-radius: 6px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s ease;
text-decoration: none;
}
.gnrt-btn:hover {
background-color: #2ea043;
}
.gnrt-btn-primary {
background-color: var(--primary);
color: white;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 6px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.gnrt-btn-primary:hover {
background-color: var(--primary-hover);
}
.gnrt-btn-secondary {
background-color: var(--secondary);
color: white;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 6px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.gnrt-btn-secondary:hover {
background-color: #238636;
}
.gnrt-btn-outline {
background-color: transparent;
border: 1px solid var(--border-color);
color: var(--text);
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.gnrt-btn-outline:hover {
background-color: var(--dark-component);
}
.gnrt-btn-small {
padding: 0.5rem 1rem;
font-size: 0.8rem;
background-color: var(--primary);
color: white;
border: none;
border-radius: 9999px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.gnrt-btn-small:hover {
background-color: var(--primary-hover);
}
.gnrt-page-header {
background: var(--dark-alt);
padding: 3rem 2rem;
border-bottom: 1px solid var(--border-color);
text-align: center;
}
.gnrt-page-header-container {
max-width: 1000px;
margin: 0 auto;
}
.gnrt-page-header h1 {
font-size: clamp(2.5rem, 4.5vw, 3.5rem);
margin-bottom: 2rem;
color: #334f74;
font-weight: 700;
}
.gnrt-page-header p {
font-size: clamp(1.1rem, 2vw, 1.4rem);
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
}
.dark-theme .gnrt-page-header h1 {
color: var(--text-secondary);
}
.gnrt-main-container {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
display: grid;
grid-template-columns: 350px 1fr;
gap: 2rem;
min-height: calc(100vh - 100px);
}
.gnrt-sidebar {
background-color: var(--dark-alt);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1.5rem;
height: fit-content;
position: sticky;
top: 2rem;
will-change: transform;
contain: layout style paint;
}
.gnrt-main-content {
background-color: var(--dark-alt);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 2rem;
min-height: 600px;
width: 100%;
box-sizing: border-box;
}
.gnrt-section-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--text);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.gnrt-export-section .gnrt-section-title {
font-size: 1.5rem;
justify-content: center;
}
.light-theme .gnrt-export-section .gnrt-section-title {
color: #334f74;
}
.gnrt-chart-options-section .gnrt-section-title {
justify-content: center;
}
@media (min-width: 769px) {
.gnrt-export-section .gnrt-section-title {
font-size: 2.2rem;
}
}
.gnrt-form-group {
margin-bottom: 1.5rem;
}
.gnrt-form-label {
display: block;
font-weight: 500;
color: var(--text);
margin-bottom: 0.5rem;
font-size: 1.1rem;
}
.gnrt-form-input {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border-color);
border-radius: 6px;
background-color: var(--dark);
color: var(--text);
font-size: 0.9rem;
outline: none;
transition: border-color 0.2s ease;
}
.gnrt-form-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(33, 136, 255, 0.1);
}
.gnrt-form-select {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border-color);
border-radius: 6px;
background-color: var(--dark);
color: var(--text);
font-size: 0.9rem;
outline: none;
cursor: pointer;
}
.gnrt-custom-dropdown {
position: relative;
width: 100%;
user-select: none;
}
.gnrt-dropdown-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 2.5rem 0.75rem 0.75rem;
border: 1.5px solid var(--border-color);
border-radius: 8px;
background-color: var(--dark);
color: var(--text);
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
font-size: 0.9rem;
min-height: 48px;
position: relative;
}
.gnrt-dropdown-header:after {
content: '';
display: block;
position: absolute;
right: 1rem;
top: 50%;
width: 16px;
height: 16px;
pointer-events: none;
background: url('data:image/svg+xml;utf8,') no-repeat center/contain;
transform: translateY(-50%) rotate(0deg);
transition: transform 0.3s cubic-bezier(.4,2,.6,1), filter 0.2s;
filter: drop-shadow(0 1px 1px rgba(33,136,255,0.08));
}
.gnrt-dropdown-header.active {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(33, 136, 255, 0.13);
border-radius: 8px 8px 0 0;
border-bottom: none;
}
.gnrt-dropdown-header.active:after {
transform: translateY(-50%) rotate(180deg);
filter: drop-shadow(0 2px 4px rgba(33,136,255,0.12));
}
.gnrt-dropdown-header:hover {
border-color: var(--primary);
background-color: rgba(33, 136, 255, 0.05);
}
.gnrt-dropdown-header i {
display: none;
}
.gnrt-dropdown-options {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--dark-component);
border: 1.5px solid var(--border-color);
border-top: none;
border-radius: 0 0 8px 8px;
box-shadow: 0 8px 24px rgba(33,136,255,0.10);
z-index: 1000;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
margin-top: 0;
scrollbar-width: thin;
scrollbar-color: var(--border-color) var(--dark-component);
transform: translateY(-10px) scaleY(0.98);
transition: max-height 0.3s ease, opacity 0.28s cubic-bezier(.4,2,.6,1), transform 0.28s cubic-bezier(.4,2,.6,1);
will-change: opacity, transform;
opacity: 0;
pointer-events: none;
}
.gnrt-dropdown-options::-webkit-scrollbar {
width: 6px;
}
.gnrt-dropdown-options::-webkit-scrollbar-track {
background: var(--dark-component);
border-radius: 3px;
}
.gnrt-dropdown-options::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 3px;
}
.gnrt-dropdown-options::-webkit-scrollbar-thumb:hover {
background: var(--text-secondary);
}
.gnrt-dropdown-options.active {
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
opacity: 1;
pointer-events: auto;
transform: translateY(0) scaleY(1);
}
#groupingMethodOptions.active {
max-height: 135px;
overflow-y: auto;
overflow-x: hidden;
}
#groupingMethodOptions .gnrt-dropdown-option {
font-size: 0.65rem;
padding: 0.4rem 0.6rem;
}
#numberFormattingOptions.active {
max-height: 135px;
overflow-y: auto;
overflow-x: hidden;
}
#numberFormattingOptions .gnrt-dropdown-option {
font-size: 0.65rem;
padding: 0.4rem 0.6rem;
}
.gnrt-options-row .gnrt-dropdown-options .gnrt-dropdown-option {
font-size: 0.65rem;
padding: 0.4rem 0.6rem;
}
.gnrt-slider-container {
display: flex;
align-items: center;
gap: 0.3rem;
width: 100%;
}
.gnrt-slider {
flex: 1;
height: 6px;
border-radius: 3px;
background: var(--border-color);
outline: none;
-webkit-appearance: none;
appearance: none;
}
.gnrt-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--primary);
cursor: pointer;
box-shadow: 0 2px 6px rgba(33, 136, 255, 0.3);
transition: transform 0.2s ease;
}
.gnrt-slider::-webkit-slider-thumb:hover {
transform: scale(1.1);
box-shadow: 0 3px 8px rgba(33, 136, 255, 0.4);
}
.gnrt-slider::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--primary);
cursor: pointer;
border: none;
box-shadow: 0 2px 6px rgba(33, 136, 255, 0.3);
transition: transform 0.2s ease;
}
.gnrt-slider::-moz-range-thumb:hover {
transform: scale(1.1);
box-shadow: 0 3px 8px rgba(33, 136, 255, 0.4);
}
.gnrt-slider-value {
min-width: 45px;
text-align: center;
font-size: 0.85rem;
color: var(--text);
font-weight: 500;
}
.gnrt-dropdown-option {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
cursor: pointer;
transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
color: var(--text);
font-size: 0.9rem;
border: none;
border-radius: 4px;
margin: 2px 6px;
}
.gnrt-dropdown-option:last-child {
margin-bottom: 6px;
}
.gnrt-dropdown-option:hover {
background-color: rgba(33, 136, 255, 0.1);
color: #2188ff;
}
.gnrt-dropdown-option:hover i {
color: #2188ff;
}
.gnrt-dropdown-option.selected {
background-color: rgba(33, 136, 255, 0.1);
color: #2188ff;
}
.gnrt-dropdown-option i {
width: 16px;
text-align: center;
color: var(--text-secondary);
transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.gnrt-dropdown-option.selected i {
color: #2188ff;
}
.gnrt-file-upload {
border: 2px dashed var(--border-color);
border-radius: 6px;
padding: 2rem;
text-align: center;
transition: all 0.2s ease;
cursor: pointer;
position: relative;
min-height: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
user-select: none;
}
.gnrt-file-upload:hover {
border-color: var(--primary);
background-color: rgba(33, 136, 255, 0.05);
transform: translateY(-1px);
}
.gnrt-file-upload:active {
transform: translateY(0);
background-color: rgba(33, 136, 255, 0.1);
}
.gnrt-file-upload.dragover {
border-color: var(--primary);
background-color: rgba(33, 136, 255, 0.1);
transform: scale(1.02);
}
.gnrt-file-upload input {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
top: 0;
left: 0;
z-index: 10;
}
.gnrt-upload-icon {
font-size: 2rem;
color: var(--text-secondary);
margin-bottom: 1rem;
}
.gnrt-upload-text {
color: var(--text-secondary);
font-size: 1rem;
}
.gnrt-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.gnrt-chart-container {
background-color: var(--dark);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 2rem;
margin-top: 1rem;
min-height: 400px;
max-height: 600px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
width: 100%;
box-sizing: border-box;
}
@media (min-width: 1200px) {
.gnrt-chart-container {
min-height: 500px;
max-height: 700px;
padding: 2.5rem;
}
}
.gnrt-chart-container canvas,
.gnrt-chart-container #gnrt-chartCanvas,
.gnrt-chart-container #gnrt-plotlyChart {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
image-rendering: pixelated;
image-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
filter: contrast(1.1) brightness(1.02);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.gnrt-chart-container canvas,
.gnrt-chart-container #gnrt-chartCanvas,
.gnrt-chart-container #gnrt-plotlyChart {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
filter: contrast(1.15) brightness(1.05) saturate(1.1);
}
}
.gnrt-chart-container.exporting canvas,
.gnrt-chart-container.exporting #gnrt-chartCanvas,
.gnrt-chart-container.exporting #gnrt-plotlyChart {
image-rendering: auto;
filter: contrast(1.2) brightness(1.08) saturate(1.15);
}
.gnrt-chart-placeholder {
text-align: center;
color: var(--text-secondary);
}
.gnrt-chart-placeholder h3 {
color: var(--text-secondary);
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
}
.dark-theme .gnrt-chart-placeholder h3 {
color: var(--text);
}
.gnrt-chart-placeholder i {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.3;
color: var(--text-secondary);
}
.light-theme .gnrt-chart-placeholder i {
color: var(--text-secondary);
}
.dark-theme .gnrt-chart-placeholder i {
color: var(--primary);
}
.gnrt-chart-placeholder .chart-placeholder-icon {
width: 12rem;
height: 12rem;
margin-bottom: 1rem;
opacity: 0.3;
color: var(--text-secondary);
}
.light-theme .gnrt-chart-placeholder .chart-placeholder-icon {
color: var(--text-secondary);
}
.dark-theme .gnrt-chart-placeholder .chart-placeholder-icon {
color: var(--text-secondary);
}
#gnrt-chartCanvas {
max-width: 100%;
max-height: 100%;
}
#gnrt-plotlyChart {
width: 100%;
height: 400px;
background-color: transparent;
}
.gnrt-data-preview {
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid var(--border-color);
border-radius: 6px;
margin-top: 1rem;
scrollbar-width: thin;
scrollbar-color: var(--border-color) var(--dark-component);
width: 100%;
box-sizing: border-box;
}
.gnrt-data-preview::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.gnrt-data-preview::-webkit-scrollbar-track {
background: var(--dark-component);
border-radius: 3px;
}
.gnrt-data-preview::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 3px;
}
.gnrt-data-preview::-webkit-scrollbar-thumb:hover {
background: var(--text-secondary);
}
.gnrt-data-table {
width: 100%;
border-collapse: collapse;
font-size: 1rem;
}
.gnrt-data-table th,
.gnrt-data-table td {
padding: 0.5rem;
text-align: left;
border-bottom: 1px solid var(--border-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: none;
width: auto;
}
.gnrt-data-table th {
background-color: var(--dark-component);
font-weight: 600;
position: sticky;
top: 0;
z-index: 10;
will-change: transform;
contain: layout style paint;
}
.gnrt-data-table td {
position: relative;
}
.gnrt-data-table td:hover::after {
content: attr(title);
position: absolute;
left: 0;
top: 100%;
background: var(--dark-component);
color: var(--text);
padding: 0.5rem;
border-radius: 4px;
border: 1px solid var(--border-color);
z-index: 1000;
white-space: normal;
max-width: 300px;
word-wrap: break-word;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.gnrt-column-selector {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-top: 1rem;
}
.gnrt-column-group {
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 1rem;
max-height: 300px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.gnrt-column-group h4 {
font-size: 1.1rem;
margin-bottom: 0.75rem;
color: var(--text);
flex-shrink: 0;
}
.gnrt-column-options-container {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding-right: 0.5rem;
scrollbar-width: thin;
scrollbar-color: var(--border-color) var(--dark-component);
}
.gnrt-column-options-container::-webkit-scrollbar {
width: 6px;
}
.gnrt-column-options-container::-webkit-scrollbar-track {
background: var(--dark-component);
border-radius: 3px;
}
.gnrt-column-options-container::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 3px;
}
.gnrt-column-options-container::-webkit-scrollbar-thumb:hover {
background: var(--text-secondary);
}
.gnrt-column-option {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
padding: 0.5rem;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease;
min-height: 40px;
}
.gnrt-column-option:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.gnrt-column-option input {
margin: 0;
flex-shrink: 0;
}
.gnrt-column-option label {
font-size: 0.9rem;
cursor: pointer;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.2;
}
.gnrt-column-option.selected {
background-color: rgba(33, 136, 255, 0.1);
border: 1px solid var(--primary);
}
.gnrt-column-option.selected label {
color: var(--primary);
font-weight: 500;
}
.gnrt-column-count {
font-size: 0.8rem;
color: var(--text-secondary);
margin-top: 0.5rem;
text-align: center;
flex-shrink: 0;
}
.gnrt-chart-controls {
display: flex;
gap: 1rem;
margin-top: 2rem;
flex-wrap: wrap;
}
.gnrt-control-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.gnrt-control-group label {
font-size: 0.8rem;
color: var(--text-secondary);
}
.gnrt-color-input {
width: 40px;
height: 30px;
border: 1px solid var(--border-color);
border-radius: 4px;
background: none;
cursor: pointer;
position: relative;
}
.gnrt-custom-color-picker {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 1.5rem;
max-width: 380px;
width: 95%;
max-height: 90vh;
z-index: 10000;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
display: none;
flex-direction: column;
gap: 1.25rem;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.gnrt-custom-color-picker::-webkit-scrollbar {
display: none;
}
.gnrt-custom-color-picker.active {
display: flex;
}
.gnrt-color-picker-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-color);
}
.gnrt-color-picker-title {
color: var(--text);
font-size: 1.1rem;
font-weight: 600;
margin: 0;
}
.gnrt-color-picker-close {
background: none;
border: none;
color: var(--text-secondary);
font-size: 1.4rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 6px;
transition: all 0.2s ease;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.gnrt-color-picker-close:hover {
background-color: var(--border-color);
color: var(--text);
}
.gnrt-color-picker-main {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.gnrt-color-preview {
width: 100%;
height: 80px;
border-radius: 12px;
background: #ff6b6b;
cursor: pointer;
transition: all 0.3s ease;
border: 3px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
margin-bottom: 0.5rem;
}
.gnrt-color-preview::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg,
transparent 25%, rgba(255,255,255,0.1) 25%,
rgba(255,255,255,0.1) 50%, transparent 50%,
transparent 75%, rgba(255,255,255,0.1) 75%);
background-size: 20px 20px;
animation: shimmer 2s linear infinite;
}
@keyframes shimmer {
0% { transform: translateX(-20px); }
100% { transform: translateX(20px); }
}
.gnrt-saturation-lightness {
width: 100%;
height: 180px;
position: relative;
border-radius: 12px;
cursor: crosshair;
margin-bottom: 1rem;
border: 2px solid var(--border-color);
}
.gnrt-saturation-lightness::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to right, white, transparent);
border-radius: 10px;
}
.gnrt-saturation-lightness::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to top, black, transparent);
border-radius: 10px;
}
.gnrt-sl-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
border: 3px solid white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
position: absolute;
cursor: grab;
transform: translate(-50%, -50%);
transition: transform 0.1s ease;
z-index: 10;
}
.gnrt-sl-thumb:active {
cursor: grabbing;
transform: translate(-50%, -50%) scale(1.2);
}
.gnrt-hue-slider {
width: 100%;
height: 30px;
border-radius: 15px;
background: linear-gradient(to right,
#ff0000, #ff8000, #ffff00, #80ff00,
#00ff00, #00ff80, #00ffff, #0080ff,
#0000ff, #8000ff, #ff00ff, #ff0080);
position: relative;
cursor: pointer;
margin-bottom: 1rem;
border: 2px solid var(--border-color);
}
.gnrt-hue-thumb {
width: 24px;
height: 24px;
border-radius: 50%;
background: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
position: absolute;
top: 3px;
left: 0;
cursor: grab;
transition: transform 0.1s ease;
}
.gnrt-hue-thumb:active {
cursor: grabbing;
transform: scale(1.2);
}
.gnrt-alpha-slider {
width: 100%;
height: 30px;
border-radius: 15px;
position: relative;
cursor: pointer;
background: linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 10px 10px;
background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
margin-bottom: 1rem;
border: 2px solid var(--border-color);
}
.gnrt-alpha-gradient {
width: 100%;
height: 100%;
border-radius: 13px;
position: absolute;
top: 0;
left: 0;
}
.gnrt-alpha-thumb {
width: 24px;
height: 24px;
border-radius: 50%;
background: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
position: absolute;
top: 3px;
left: 0;
cursor: grab;
transition: transform 0.1s ease;
}
.gnrt-alpha-thumb:active {
cursor: grabbing;
transform: scale(1.2);
}
.gnrt-color-inputs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-bottom: 1rem;
}
.gnrt-input-group {
display: flex;
flex-direction: column;
}
.gnrt-input-label {
font-size: 0.8rem;
color: var(--text-secondary);
margin-bottom: 0.25rem;
font-weight: 500;
}
.gnrt-color-input {
padding: 0.75rem 1rem;
border: 2px solid var(--border-color);
border-radius: 6px;
font-size: 0.95rem;
font-family: 'Courier New', monospace;
background: var(--dark);
color: var(--text);
transition: border-color 0.2s ease;
min-width: 120px;
width: 100%;
}
.gnrt-color-input:focus {
outline: none;
border-color: var(--primary);
}
.gnrt-color-picker-presets {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0.5rem;
margin-bottom: 1rem;
}
.gnrt-color-preset {
width: 100%;
aspect-ratio: 1;
border: 2px solid var(--border-color);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.gnrt-color-preset:hover {
transform: scale(1.1);
border-color: var(--primary);
}
.gnrt-color-preset:active {
transform: scale(0.95);
}
.gnrt-color-preset.active {
border-color: var(--primary);
box-shadow: 0 0 0 2px var(--primary);
}
.gnrt-color-picker-actions {
display: flex;
gap: 0.75rem;
margin-top: 0.5rem;
}
.gnrt-color-picker-btn {
flex: 1;
padding: 0.75rem 1rem;
border: none;
border-radius: 9999px;
cursor: pointer;
font-weight: 500;
font-size: 0.9rem;
transition: all 0.2s ease;
}
.gnrt-color-picker-btn.confirm {
background-color: var(--primary);
color: white;
}
.gnrt-color-picker-btn.confirm:hover {
background-color: #1a5bb8;
}
.gnrt-color-picker-btn.cancel {
background-color: var(--border-color);
color: var(--text);
}
.gnrt-color-picker-btn.cancel:hover {
background-color: var(--text-secondary);
}
.gnrt-color-picker-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9999;
display: none;
backdrop-filter: blur(4px);
}
.gnrt-color-picker-overlay.active {
display: block;
}
@media (min-width: 769px) {
.gnrt-custom-color-picker {
max-width: 500px;
padding: 2rem;
gap: 1.5rem;
}
.gnrt-color-preview {
height: 100px;
}
.gnrt-saturation-lightness {
height: 220px;
}
.gnrt-color-picker-title {
font-size: 1.2rem;
}
.gnrt-color-inputs {
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.gnrt-color-picker-presets {
grid-template-columns: repeat(6, 1fr);
gap: 0.75rem;
}
.gnrt-color-picker-actions {
gap: 1rem;
}
.gnrt-color-picker-btn {
padding: 1rem 1.5rem;
font-size: 1rem;
}
.gnrt-chart-controls {
display: flex !important;
flex-direction: row !important;
gap: 1rem;
margin-top: 2rem;
flex-wrap: wrap;
}
.gnrt-control-group {
display: flex !important;
flex-direction: column !important;
gap: 0.5rem;
min-width: 120px;
}
.gnrt-control-group label {
font-size: 0.9rem;
color: var(--text-secondary);
font-weight: 500;
}
.gnrt-color-input {
width: 60px !important;
height: 50px !important;
border: 2px solid var(--border-color);
border-radius: 6px;
background: none;
cursor: pointer;
position: relative;
transition: border-color 0.2s ease;
}
.gnrt-color-input:hover {
border-color: var(--primary);
}
}
.gnrt-export-section {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--border-color);
text-align: center;
}
.gnrt-export-options {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 1rem;
justify-content: center;
}
.gnrt-chart-options-section {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--border-color);
text-align: center;
}
.gnrt-chart-options {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 1rem;
}
@media (min-width: 769px) {
.gnrt-chart-options.bar-options {
display: block;
max-width: 800px;
margin: 1rem auto;
}
.gnrt-options-row {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
gap: 0.75rem;
flex-wrap: wrap;
}
.gnrt-options-row .gnrt-option-group {
margin-bottom: 0;
flex: none;
width: auto;
}
.gnrt-options-row .gnrt-option-label {
display: flex;
align-items: center;
gap: 0.3rem;
white-space: nowrap;
min-width: fit-content;
flex-shrink: 0;
}
.gnrt-options-row .gnrt-option-text {
white-space: nowrap;
margin-right: 0;
font-size: 0.85rem;
min-width: fit-content;
flex-shrink: 0;
}
.gnrt-options-row .gnrt-option-group.transparency .gnrt-option-label {
gap: 0.3rem;
align-items: center;
flex-wrap: nowrap;
}
.gnrt-options-row .gnrt-option-group.transparency .gnrt-option-text {
white-space: nowrap;
min-width: fit-content;
}
.gnrt-options-row .gnrt-option-group.transparency .gnrt-slider-container {
width: 100px;
}
.gnrt-options-row .gnrt-option-group#pointSizeOptionGroup .gnrt-option-label {
gap: 0.3rem;
align-items: center;
flex-wrap: nowrap;
}
.gnrt-options-row .gnrt-option-group#pointSizeOptionGroup .gnrt-option-text {
white-space: nowrap;
min-width: fit-content;
}
.gnrt-options-row .gnrt-option-group#pointSizeOptionGroup .gnrt-slider-container {
width: 100px;
}
.gnrt-options-row .gnrt-option-group .gnrt-custom-dropdown {
min-width: 95px;
max-width: 110px;
}
.gnrt-options-row .gnrt-option-group .gnrt-dropdown-header {
padding: 0.2rem 0.35rem;
font-size: 0.65rem;
line-height: 1.1;
border-radius: 3px;
height: auto;
min-height: 1.8rem;
}
.gnrt-options-row .gnrt-dropdown-header::after {
font-size: 0.6rem;
}
.gnrt-options-row .gnrt-option-group.grouping .gnrt-custom-dropdown {
min-width: 100px;
max-width: 115px;
}
.gnrt-options-row .gnrt-option-group.formatting .gnrt-custom-dropdown {
min-width: 100px;
max-width: 115px;
}
.gnrt-options-row#pieFirstRowOptions .gnrt-option-group .gnrt-custom-dropdown {
min-width: 95px;
max-width: 110px;
}
.gnrt-options-row#pieFirstRowOptions .gnrt-option-group .gnrt-dropdown-header {
padding: 0.2rem 0.35rem;
font-size: 0.65rem;
line-height: 1.1;
border-radius: 3px;
min-height: 1.8rem;
}
.gnrt-options-row#pieSecondRowOptions .gnrt-option-group .gnrt-slider-container {
width: 100px;
}
.gnrt-options-row#pieSecondRowOptions .gnrt-option-group .gnrt-option-label {
gap: 0.3rem;
align-items: center;
flex-wrap: nowrap;
}
.gnrt-options-row#pieSecondRowOptions .gnrt-option-group .gnrt-option-text {
white-space: nowrap;
min-width: fit-content;
}
.gnrt-options-row#pieFirstRowOptions .gnrt-option-group.transparency .gnrt-option-label {
gap: 0.3rem;
align-items: center;
flex-wrap: nowrap;
}
.gnrt-options-row#pieFirstRowOptions .gnrt-option-group.transparency .gnrt-option-text {
white-space: nowrap;
min-width: fit-content;
}
.gnrt-options-row#pieFirstRowOptions .gnrt-option-group.transparency .gnrt-slider-container {
width: 100px;
}
.gnrt-option-group#pieGroupingOptionGroup .gnrt-custom-dropdown:disabled {
opacity: 0.5;
pointer-events: none;
}
.gnrt-option-group#pieGroupingOptionGroup .gnrt-dropdown-header:disabled {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
.gnrt-options-row#radarFirstRowOptions .gnrt-option-group .gnrt-custom-dropdown {
min-width: 95px;
max-width: 110px;
}
.gnrt-options-row#radarFirstRowOptions .gnrt-option-group .gnrt-dropdown-header {
padding: 0.2rem 0.35rem;
font-size: 0.65rem;
line-height: 1.1;
border-radius: 3px;
min-height: 1.8rem;
}
.gnrt-options-row#radarFirstRowOptions .gnrt-dropdown-header::after {
font-size: 0.6rem;
}
.gnrt-options-row#radarFirstRowOptions .gnrt-option-group.grouping .gnrt-custom-dropdown {
min-width: 100px;
max-width: 115px;
}
.gnrt-options-row#radarFirstRowOptions .gnrt-option-group.transparency .gnrt-option-label {
gap: 0.3rem;
align-items: center;
flex-wrap: nowrap;
}
.gnrt-options-row#radarFirstRowOptions .gnrt-option-group.transparency .gnrt-option-text {
white-space: nowrap;
min-width: fit-content;
}
.gnrt-options-row#radarFirstRowOptions .gnrt-option-group.transparency .gnrt-slider-container {
width: 100px;
}
.gnrt-options-row#radarSecondRowOptions .gnrt-option-group .gnrt-slider-container {
width: 100px;
}
.gnrt-options-row#radarSecondRowOptions .gnrt-option-group .gnrt-option-label {
gap: 0.3rem;
align-items: center;
flex-wrap: nowrap;
}
.gnrt-options-row#radarSecondRowOptions .gnrt-option-group .gnrt-option-text {
white-space: nowrap;
min-width: fit-content;
}
.gnrt-option-group#radarGroupingOptionGroup .gnrt-custom-dropdown:disabled {
opacity: 0.5;
pointer-events: none;
}
.gnrt-option-group#radarGroupingOptionGroup .gnrt-dropdown-header:disabled {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
.gnrt-options-row#boxplotFirstRowOptions .gnrt-option-group .gnrt-custom-dropdown {
min-width: 95px;
max-width: 110px;
}
.gnrt-options-row#boxplotFirstRowOptions .gnrt-option-group .gnrt-dropdown-header {
padding: 0.2rem 0.35rem;
font-size: 0.65rem;
line-height: 1.1;
border-radius: 3px;
min-height: 1.8rem;
}
.gnrt-options-row#boxplotFirstRowOptions .gnrt-dropdown-header::after {
font-size: 0.6rem;
}
.gnrt-options-row#boxplotSecondRowOptions .gnrt-option-group .gnrt-slider-container {
width: 100px;
}
.gnrt-options-row#boxplotSecondRowOptions .gnrt-option-group .gnrt-option-label {
gap: 0.3rem;
align-items: center;
flex-wrap: nowrap;
}
.gnrt-options-row#boxplotSecondRowOptions .gnrt-option-group {
margin-right: 1.2rem;
margin-left: 1.2rem;
}
.gnrt-options-row#boxplotSecondRowOptions .gnrt-option-group#boxplotTransparencyOptionGroup,
.gnrt-options-row#boxplotSecondRowOptions .gnrt-option-group#boxplotOutlierSizeOptionGroup {
margin-right: 1.2rem;
margin-left: 1.2rem;
}
.gnrt-options-row#boxplotSecondRowOptions .gnrt-option-group .gnrt-option-text {
white-space: nowrap;
min-width: fit-content;
}
.gnrt-options-row .gnrt-option-group#histogramBinsOptionGroup .gnrt-slider-container {
width: 100px;
}
.gnrt-options-row .gnrt-option-group#histogramBinsOptionGroup .gnrt-option-label {
gap: 0.3rem;
align-items: center;
flex-wrap: nowrap;
}
.gnrt-options-row .gnrt-option-group#histogramBinsOptionGroup .gnrt-option-text {
white-space: nowrap;
min-width: fit-content;
}
.gnrt-options-row .gnrt-option-group#boxplotOutlierSizeOptionGroup .gnrt-slider-container {
width: 100px;
}
.gnrt-options-row .gnrt-option-group#boxplotOutlierSizeOptionGroup .gnrt-option-label {
gap: 0.3rem;
align-items: center;
flex-wrap: nowrap;
}
.gnrt-options-row .gnrt-option-group#boxplotOutlierSizeOptionGroup .gnrt-option-text {
white-space: nowrap;
min-width: fit-content;
}
.gnrt-options-row .gnrt-option-group#pointTransparencyOptionGroup .gnrt-slider-container {
width: 100px;
}
.gnrt-options-row .gnrt-option-group#pointTransparencyOptionGroup .gnrt-option-label {
gap: 0.3rem;
align-items: center;
flex-wrap: nowrap;
}
.gnrt-options-row .gnrt-option-group#pointTransparencyOptionGroup .gnrt-option-text {
white-space: nowrap;
min-width: fit-content;
}
.gnrt-options-row .gnrt-option-group#pieSliceSpacingOptionGroup .gnrt-slider-container {
width: 100px;
}
.gnrt-options-row .gnrt-option-group#pieSliceSpacingOptionGroup .gnrt-option-label {
gap: 0.3rem;
align-items: center;
flex-wrap: nowrap;
}
.gnrt-options-row .gnrt-option-group#pieSliceSpacingOptionGroup .gnrt-option-text {
white-space: nowrap;
min-width: fit-content;
}
.gnrt-options-row .gnrt-option-group#boxplotTransparencyOptionGroup .gnrt-slider-container {
width: 100px;
}
.gnrt-options-row .gnrt-option-group#boxplotTransparencyOptionGroup .gnrt-option-label {
gap: 0.3rem;
align-items: center;
flex-wrap: nowrap;
}
.gnrt-options-row .gnrt-option-group#boxplotTransparencyOptionGroup .gnrt-option-text {
white-space: nowrap;
min-width: fit-content;
}
.gnrt-options-row .gnrt-option-group#barTransparencyOptionGroup .gnrt-slider-container {
width: 100px;
}
.gnrt-options-row .gnrt-option-group#barTransparencyOptionGroup .gnrt-option-label {
gap: 0.3rem;
align-items: center;
flex-wrap: nowrap;
}
.gnrt-options-row .gnrt-option-group#barTransparencyOptionGroup .gnrt-option-text {
white-space: nowrap;
min-width: fit-content;
}
.gnrt-options-row#secondRowOptions,
.gnrt-options-row#scatterSecondRowOptions,
.gnrt-options-row#pieSecondRowOptions,
.gnrt-options-row#radarSecondRowOptions,
.gnrt-options-row#boxplotSecondRowOptions {
gap: 1rem;
}
.gnrt-options-row .gnrt-option-group.transparency,
.gnrt-options-row .gnrt-option-group#pointSizeOptionGroup,
.gnrt-options-row .gnrt-option-group#histogramBinsOptionGroup,
.gnrt-options-row .gnrt-option-group#boxplotOutlierSizeOptionGroup,
.gnrt-options-row .gnrt-option-group#pointTransparencyOptionGroup,
.gnrt-options-row .gnrt-option-group#pieSliceSpacingOptionGroup,
.gnrt-options-row .gnrt-option-group#boxplotTransparencyOptionGroup,
.gnrt-options-row .gnrt-option-group#barTransparencyOptionGroup {
margin-right: 0.3rem;
margin-left: 0.3rem;
order: 999;
}
}
.gnrt-option-group {
display: block;
margin-bottom: 1rem;
}
@media (max-width: 768px) {
.gnrt-chart-options.bar-options {
display: block !important;
}
.gnrt-options-row {
flex-direction: column !important;
flex-wrap: nowrap !important;
justify-content: center !important;
align-items: center !important;
gap: 0.75rem !important;
margin-bottom: 1rem !important;
}
.gnrt-options-row .gnrt-option-group {
flex: 0 1 auto !important;
margin-bottom: 0 !important;
min-width: fit-content !important;
}
.gnrt-options-row .gnrt-option-label {
justify-content: center !important;
gap: 0.4rem !important;
white-space: nowrap !important;
}
.gnrt-options-row .gnrt-option-text {
font-size: 0.8rem !important;
}
.gnrt-options-row .gnrt-option-group .gnrt-custom-dropdown {
min-width: 90px !important;
max-width: 105px !important;
}
.gnrt-options-row .gnrt-option-group .gnrt-dropdown-header {
padding: 0.2rem 0.3rem !important;
font-size: 0.65rem !important;
line-height: 1.2 !important;
min-height: 1.6rem !important;
}
.gnrt-options-row .gnrt-dropdown-header::after {
font-size: 0.55rem !important;
}
.gnrt-options-row .gnrt-dropdown-options .gnrt-dropdown-option {
font-size: 0.6rem !important;
padding: 0.3rem 0.4rem !important;
}
.gnrt-options-row .gnrt-option-group.transparency .gnrt-slider-container {
width: 100px !important;
}
.gnrt-options-row .gnrt-option-group.transparency .gnrt-slider-value {
display: none !important;
}
.gnrt-options-row .gnrt-option-group#pointSizeOptionGroup .gnrt-slider-value {
display: none !important;
}
.gnrt-options-row#firstRowOptions .gnrt-option-group {
flex: 0 1 100% !important;
max-width: 100% !important;
margin-bottom: 0.75rem !important;
}
.gnrt-options-row#secondRowOptions .gnrt-option-group {
flex: 0 1 100% !important;
max-width: 100% !important;
margin-bottom: 0.75rem !important;
}
}
.gnrt-option-label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-size: 0.95rem;
color: var(--text);
user-select: none;
}
.gnrt-option-label input[type="checkbox"] {
display: none;
}
.gnrt-option-label input[type="checkbox"]:checked + .gnrt-checkbox-custom {
background-color: var(--primary);
border-color: var(--primary);
}
.gnrt-option-label input[type="checkbox"]:checked + .gnrt-checkbox-custom::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 12px;
font-weight: bold;
}
.gnrt-option-label:hover .gnrt-checkbox-custom {
border-color: var(--primary);
}
.gnrt-checkbox-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.gnrt-checkbox-label {
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
font-weight: 500;
color: var(--text);
transition: color 0.2s ease;
}
.gnrt-checkbox-label:hover {
color: white;
}
.gnrt-checkbox-custom {
width: 18px;
height: 18px;
border: 2px solid var(--border-color);
border-radius: 4px;
background-color: transparent;
position: relative;
transition: all 0.2s ease;
flex-shrink: 0;
}
.gnrt-checkbox-label input[type="checkbox"] {
display: none;
}
.gnrt-checkbox-label input[type="checkbox"]:checked + .gnrt-checkbox-custom {
background-color: var(--primary);
border-color: var(--primary);
}
.gnrt-checkbox-label input[type="checkbox"]:checked + .gnrt-checkbox-custom::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 12px;
font-weight: bold;
}
.gnrt-checkbox-label:hover .gnrt-checkbox-custom {
border-color: var(--primary);
}
.gnrt-help-text {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--text-secondary);
margin-left: 2.25rem;
font-style: italic;
}
.gnrt-help-text i {
color: var(--primary);
font-size: 0.875rem;
}
.gnrt-option-text {
margin-right: 1rem;
font-weight: 500;
color: var(--text);
}
.gnrt-grouping-selector {
display: flex;
align-items: center;
}
.gnrt-form-select {
background-color: var(--dark-component);
border: 1px solid var(--border-color);
color: var(--text);
padding: 0.5rem 0.75rem;
border-radius: 6px;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s ease;
min-width: 120px;
}
.gnrt-form-select:hover {
border-color: var(--primary);
}
.gnrt-form-select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(33, 136, 255, 0.2);
}
.gnrt-status-message {
padding: 0.75rem 1rem;
border-radius: 6px;
margin-bottom: 1rem;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.gnrt-status-success {
background-color: rgba(35, 134, 54, 0.2);
border: 1px solid var(--success);
color: var(--success);
}
.gnrt-status-error {
background-color: rgba(248, 81, 73, 0.05) !important;
border: 1px solid rgba(248, 81, 73, 0.2) !important;
color: #f85149;
}
.gnrt-status-info {
background-color: rgba(33, 136, 255, 0.2);
border: 1px solid var(--primary);
color: var(--primary);
}
.gnrt-tab-container {
border-bottom: 1px solid var(--border-color);
margin-bottom: 1.5rem;
}
.gnrt-tab-nav {
display: flex;
gap: 0.5rem;
}
.gnrt-tab-button {
padding: 0.75rem 1rem;
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.2s ease;
font-size: 0.9rem;
}
.gnrt-tab-button.active {
color: var(--primary);
border-bottom-color: var(--primary);
}
.gnrt-tab-content {
display: none;
}
.gnrt-tab-content.active {
display: block;
}
@media (max-width: 1024px) {
.gnrt-main-container {
grid-template-columns: 1fr;
gap: 1rem;
}
.gnrt-sidebar {
position: relative;
top: 0;
}
}
@media (max-width: 768px) {
.gnrt-mobile-menu-toggle {
display: block;
}
.gnrt-navbar {
padding: 0.75rem 1rem;
flex-wrap: wrap;
gap: 0.5rem;
}
.gnrt-logo {
font-size: 1.25rem;
}
.gnrt-logo-img {
height: 40px;
}
.gnrt-header-search {
order: 3;
max-width: 100%;
margin: 0.5rem 0 0 0;
width: 100%;
}
.gnrt-action-buttons {
gap: 0.5rem;
}
.gnrt-language-selector {
margin-right: 0;
}
.gnrt-nav-container {
flex-direction: column;
align-items: stretch;
}
.gnrt-nav-item {
padding: 0.75rem 1rem;
justify-content: space-between;
}
.gnrt-dropdown-content {
position: static;
box-shadow: none;
border: none;
margin-top: 0;
background-color: var(--dark);
}
.gnrt-dropdown:hover .gnrt-dropdown-content {
display: none;
}
.gnrt-dropdown.active .gnrt-dropdown-content {
display: block;
}
.gnrt-nav.mobile-active {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--dark);
z-index: 1000;
padding: 1rem;
overflow-y: auto;
}
.gnrt-nav.mobile-active .gnrt-nav-container {
flex-direction: column;
gap: 0;
}
.gnrt-nav.mobile-active .gnrt-nav-item {
padding: 1rem;
border-bottom: 1px solid var(--border-color);
justify-content: space-between;
}
.gnrt-nav.mobile-active .gnrt-dropdown-content {
position: static;
box-shadow: none;
border: none;
margin: 0;
background-color: var(--dark-alt);
border-radius: 0;
}
.gnrt-nav.mobile-active .gnrt-dropdown-item {
padding: 0.75rem 1rem 0.75rem 2rem;
border-bottom: 1px solid var(--border-color);
}
.gnrt-nav.mobile-active .gnrt-dropdown-item:last-child {
border-bottom: none;
}
.gnrt-page-header {
padding: 2rem 1rem;
}
.gnrt-page-header h1 {
font-size: 2rem;
}
.gnrt-page-header p {
font-size: 1rem;
}
.gnrt-main-container {
padding: 1rem;
gap: 1rem;
}
.gnrt-sidebar, .gnrt-main-content {
padding: 1rem;
}
.gnrt-main-content {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
}
.gnrt-tab-nav {
flex-direction: column;
gap: 0.25rem;
}
.gnrt-tab-button {
padding: 0.75rem;
text-align: left;
border-bottom: none;
border-left: 3px solid transparent;
}
.gnrt-tab-button.active {
border-left-color: var(--primary);
background-color: rgba(33, 136, 255, 0.1);
}
.gnrt-form-group {
margin-bottom: 1rem;
}
.gnrt-form-input, .gnrt-form-select {
padding: 0.875rem;
font-size: 16px;
}
.gnrt-dropdown-header {
padding: 0.875rem 2.5rem 0.875rem 0.875rem;
font-size: 16px;
min-height: 52px;
}
.gnrt-dropdown-options {
max-height: 160px;
font-size: 1rem;
}
.gnrt-dropdown-option {
padding: 0.875rem 1rem;
font-size: 16px;
}
.gnrt-dropdown-option {
padding: 0.875rem;
font-size: 16px;
}
.gnrt-file-upload {
padding: 1.5rem;
min-height: 100px;
}
.gnrt-upload-icon {
font-size: 1.5rem;
margin-bottom: 0.75rem;
}
.gnrt-upload-text {
font-size: 0.9rem;
line-height: 1.3;
}
.gnrt-file-upload {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.gnrt-column-selector {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.gnrt-column-group {
padding: 0.75rem;
max-height: 250px;
}
.gnrt-column-option {
padding: 0.5rem;
margin-bottom: 0.25rem;
min-height: 35px;
}
.gnrt-column-option label {
font-size: 0.85rem;
}
.gnrt-column-count {
font-size: 0.75rem;
margin-top: 0.25rem;
}
.gnrt-chart-controls {
flex-direction: column;
gap: 0.75rem;
}
.gnrt-control-group {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.gnrt-color-input {
width: 50px;
height: 40px;
position: relative;
}
.gnrt-custom-color-picker {
padding: 1rem;
max-width: 320px;
width: calc(100vw - 1.5rem);
max-height: calc(100vh - 1.5rem);
border-radius: 12px;
}
.gnrt-color-picker-title {
font-size: 1rem;
}
.gnrt-color-preview {
height: 60px;
}
.gnrt-saturation-lightness {
height: 140px;
}
.gnrt-color-inputs {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.gnrt-color-input {
padding: 0.625rem 0.875rem;
font-size: 0.9rem;
min-width: 100px;
}
.gnrt-color-picker-presets {
grid-template-columns: repeat(5, 1fr);
gap: 0.375rem;
}
.gnrt-color-picker-actions {
gap: 0.5rem;
}
.gnrt-color-picker-btn {
padding: 0.625rem 0.875rem;
font-size: 0.85rem;
}
.gnrt-btn-primary, .gnrt-btn-secondary, .gnrt-btn-outline, .gnrt-btn-small {
padding: 0.875rem 1rem;
font-size: 1rem;
width: 100%;
justify-content: center;
}
.gnrt-data-preview {
max-height: 150px;
font-size: 0.9rem;
overflow-x: hidden !important;
width: 100% !important;
max-width: 100% !important;
}
.gnrt-data-table {
font-size: 0.9rem;
width: 100%;
table-layout: fixed;
}
.gnrt-data-table th, .gnrt-data-table td {
padding: 0.375rem;
max-width: none;
width: auto;
overflow: hidden;
text-overflow: ellipsis;
}
.gnrt-chart-container {
padding: 1rem;
min-height: 300px;
max-height: 400px;
height: 400px !important;
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
}
#gnrt-chartCanvas, #gnrt-plotlyChart {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
}
.gnrt-chart-container {
padding: 1rem;
min-height: 300px;
}
.gnrt-chart-placeholder i {
font-size: 3rem;
}
.gnrt-chart-placeholder .chart-placeholder-icon {
width: 9rem;
height: 9rem;
}
.gnrt-chart-placeholder h3 {
font-size: 1.25rem;
}
.gnrt-export-options {
flex-direction: column;
gap: 0.75rem;
}
.gnrt-export-options button {
width: 100%;
}
.gnrt-status-message {
padding: 0.875rem;
font-size: 1rem;
}
}
@media (max-width: 480px) {
.gnrt-navbar {
padding: 0.5rem;
}
.gnrt-custom-color-picker {
padding: 0.875rem;
max-width: 280px;
width: calc(100vw - 1.25rem);
max-height: calc(100vh - 1.25rem);
border-radius: 10px;
}
.gnrt-color-picker-title {
font-size: 0.95rem;
}
.gnrt-color-preview {
height: 50px;
}
.gnrt-saturation-lightness {
height: 120px;
}
.gnrt-color-inputs {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.gnrt-color-input {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
min-width: 90px;
}
.gnrt-color-picker-presets {
grid-template-columns: repeat(4, 1fr);
gap: 0.25rem;
}
.gnrt-color-picker-actions {
gap: 0.375rem;
}
.gnrt-color-picker-btn {
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
}
.gnrt-logo {
font-size: 1.1rem;
}
.gnrt-logo-img {
height: 35px;
}
.gnrt-page-header {
padding: 1.5rem 0.75rem;
}
.gnrt-page-header h1 {
font-size: 2rem;
}
.gnrt-main-container {
padding: 0.75rem;
}
.gnrt-sidebar, .gnrt-main-content {
padding: 0.75rem;
}
.gnrt-section-title {
font-size: 1.5rem;
}
.gnrt-form-input, .gnrt-form-select {
padding: 0.75rem;
font-size: 16px;
}
.gnrt-dropdown-header {
padding: 0.75rem 2.5rem 0.75rem 0.75rem;
font-size: 16px;
min-height: 48px;
}
.gnrt-dropdown-options {
max-height: 140px;
}
.gnrt-dropdown-option {
padding: 0.75rem 1rem;
font-size: 16px;
}
.gnrt-dropdown-option {
padding: 0.75rem;
font-size: 16px;
}
.gnrt-file-upload {
padding: 1rem;
min-height: 80px;
}
.gnrt-upload-text {
font-size: 0.9rem;
}
.gnrt-upload-icon {
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
.gnrt-chart-container {
padding: 0.75rem;
min-height: 250px;
}
.gnrt-chart-placeholder i {
font-size: 2.5rem;
}
.gnrt-chart-placeholder .chart-placeholder-icon {
width: 7rem;
height: 7rem;
}
.gnrt-chart-placeholder h3 {
font-size: 1.1rem;
}
.gnrt-btn-primary, .gnrt-btn-secondary, .gnrt-btn-outline, .gnrt-btn-small {
padding: 0.75rem;
font-size: 1rem;
}
.gnrt-data-table {
font-size: 0.8rem;
width: 100%;
table-layout: fixed;
}
.gnrt-data-table th, .gnrt-data-table td {
padding: 0.25rem;
max-width: none;
width: auto;
overflow: hidden;
text-overflow: ellipsis;
}
.gnrt-chart-container {
padding: 0.75rem;
min-height: 250px;
max-height: 350px;
height: 350px !important;
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
}
#gnrt-chartCanvas, #gnrt-plotlyChart {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
}
.gnrt-data-preview {
overflow-x: hidden !important;
width: 100% !important;
max-width: 100% !important;
}
}
@media (max-width: 375px) {
.gnrt-custom-color-picker {
padding: 0.75rem;
max-width: 260px;
width: calc(100vw - 1rem);
max-height: calc(100vh - 1rem);
border-radius: 8px;
}
.gnrt-color-picker-title {
font-size: 0.9rem;
}
.gnrt-color-preview {
height: 45px;
}
.gnrt-saturation-lightness {
height: 100px;
}
.gnrt-color-inputs {
grid-template-columns: 1fr;
gap: 0.375rem;
}
.gnrt-color-input {
padding: 0.375rem 0.625rem;
font-size: 0.8rem;
min-width: 80px;
}
.gnrt-color-picker-presets {
grid-template-columns: repeat(3, 1fr);
gap: 0.25rem;
}
.gnrt-color-picker-actions {
gap: 0.25rem;
}
.gnrt-color-picker-btn {
padding: 0.375rem 0.625rem;
font-size: 0.75rem;
}
}
@media (max-width: 320px) {
.gnrt-custom-color-picker {
padding: 0.625rem;
max-width: 240px;
width: calc(100vw - 0.75rem);
max-height: calc(100vh - 0.75rem);
border-radius: 6px;
}
.gnrt-color-picker-title {
font-size: 0.85rem;
}
.gnrt-color-preview {
height: 40px;
}
.gnrt-saturation-lightness {
height: 80px;
}
.gnrt-color-inputs {
grid-template-columns: 1fr;
gap: 0.25rem;
}
.gnrt-color-input {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
min-width: 70px;
}
.gnrt-color-picker-presets {
grid-template-columns: repeat(3, 1fr);
gap: 0.125rem;
}
.gnrt-color-picker-actions {
gap: 0.25rem;
}
.gnrt-color-picker-btn {
padding: 0.25rem 0.5rem;
font-size: 0.7rem;
}
}
@media (max-width: 768px) and (orientation: landscape) {
.gnrt-custom-color-picker {
max-width: 450px;
padding: 1.25rem;
max-height: calc(100vh - 1rem);
}
.gnrt-color-picker-title {
font-size: 1rem;
}
.gnrt-color-preview {
height: 60px;
}
.gnrt-saturation-lightness {
height: 120px;
}
.gnrt-color-inputs {
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.gnrt-color-picker-presets {
grid-template-columns: repeat(6, 1fr);
gap: 0.5rem;
}
.gnrt-color-picker-actions {
gap: 0.75rem;
}
.gnrt-color-picker-btn {
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
}
.gnrt-mobile-menu-toggle {
display: none;
background: none;
border: none;
color: var(--text);
font-size: 1.2rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.gnrt-mobile-menu-toggle:hover {
background-color: var(--dark-component);
}
.gnrt-mobile-menu-toggle.active {
background-color: var(--primary);
color: white;
}
@media (max-width: 768px) and (orientation: landscape) {
.gnrt-main-container {
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.gnrt-sidebar {
position: sticky;
top: 1rem;
max-height: calc(100vh - 2rem);
overflow-y: auto;
will-change: transform;
contain: layout style paint;
}
.gnrt-page-header {
padding: 1rem;
}
.gnrt-page-header h1 {
font-size: 2rem;
}
}
#guides:focus,
#faq:focus,
#support:focus {
outline: none !important;
box-shadow: none !important;
}
[id]:focus {
outline: none !important;
box-shadow: none !important;
}
.guides-header:focus,
.faq-section:focus,
.support-section:focus {
outline: none !important;
box-shadow: none !important;
}
.team-header {
background-color: var(--dark-alt);
padding: 5rem 2rem;
text-align: center;
border-bottom: 1px solid var(--border-color);
}
.team-header-content {
max-width: 900px;
margin: 0 auto;
}
.team-header h1 {
font-size: 3rem;
margin-bottom: 1.5rem;
color: var(--text);
font-weight: 600;
}
.team-header p {
font-size: 1.25rem;
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
}
.team-section {
padding: 5rem 2rem;
max-width: 1280px;
margin: 0 auto;
}
.team-section-title {
font-size: 2rem;
margin-bottom: 2rem;
color: var(--text);
font-weight: 600;
text-align: center;
animation: fadeInSlideUp 0.6s ease-out 0.3s both;
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.team-member {
animation: fadeInSlideUp 0.5s ease-out both;
}
.team-member:nth-child(1) { animation-delay: 0.4s; }
.team-member:nth-child(2) { animation-delay: 0.5s; }
.team-member:nth-child(3) { animation-delay: 0.6s; }
.team-member:nth-child(4) { animation-delay: 0.7s; }
.team-member {
background-color: var(--dark-component);
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border-color);
transition: transform 0.2s ease;
}
.team-member:hover {
transform: translateY(-5px);
}
.team-member-image {
width: 100%;
height: 250px;
background-color: var(--dark-alt);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.team-member-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
transition: transform 0.3s ease;
}
.team-member-image:hover img {
transform: scale(1.05);
}
.team-member-image i {
font-size: 5rem;
color: var(--text-secondary);
}
.team-member-info {
padding: 1.5rem;
}
.team-member-info h3 {
font-size: 1.25rem;
color: var(--text);
margin-bottom: 0.5rem;
font-weight: 600;
}
.team-member-info h4 {
font-size: 1rem;
color: var(--primary);
margin-bottom: 1rem;
font-weight: 500;
}
.team-member-info p {
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.6;
}
.team-member-socials {
margin-top: 1rem;
display: flex;
gap: 0.75rem;
}
.team-member-socials a {
color: var(--text-secondary);
font-size: 1.2rem;
transition: color 0.2s ease;
}
.team-member-socials a:hover {
color: var(--primary);
}
@media (max-width: 768px) {
.team-header h1 {
font-size: 2.5rem;
}
.team-header p {
font-size: 1.1rem;
}
.team-section-title {
font-size: 1.75rem;
}
}
.gnrt-page-header h1 {
animation: fadeInScale 0.8s ease-out;
}
.gnrt-page-header p {
animation: fadeInScale 0.8s ease-out 0.2s both;
}
.gnrt-main-container {
animation: fadeInSlideUp 0.8s ease-out 0.4s both;
}
.gnrt-sidebar {
animation: fadeInSlideLeft 0.6s ease-out 0.6s both;
}
.gnrt-main-content {
animation: fadeInSlideRight 0.6s ease-out 0.6s both;
}
.cvter-page-header h1 {
animation: fadeInScale 0.8s ease-out;
}
.cvter-page-header p {
animation: fadeInScale 0.8s ease-out 0.2s both;
}
.cvter-container {
animation: fadeInSlideUp 0.8s ease-out 0.4s both;
}
.cvter-converter-container {
animation: fadeInScale 0.6s ease-out 0.6s both;
}
.cvter-converter-section:first-child {
animation: fadeInSlideLeft 0.5s ease-out 0.8s both;
}
.cvter-converter-section:last-child {
animation: fadeInSlideRight 0.5s ease-out 0.8s both;
}
.cvter-actions {
animation: fadeInSlideUp 0.5s ease-out 1.0s both;
}
@keyframes fadeInSlideUp {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInSlideLeft {
0% {
opacity: 0;
transform: translateX(-30px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInSlideRight {
0% {
opacity: 0;
transform: translateX(30px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0.95);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.gnrt-form-group:nth-child(1) { animation-delay: 0.5s; }
.gnrt-form-group:nth-child(2) { animation-delay: 0.6s; }
.gnrt-form-group:nth-child(3) { animation-delay: 0.7s; }
.gnrt-form-group:nth-child(4) { animation-delay: 0.8s; }
.gnrt-form-group:nth-child(5) { animation-delay: 0.9s; }
.gnrt-form-group:nth-child(6) { animation-delay: 1.0s; }
.gnrt-btn-primary,
.gnrt-btn-outline,
.cvter-btn-primary {
animation: fadeInScale 0.4s ease-out 1.1s both;
}
.gnrt-chart-container,
.gnrt-export-section,
.gnrt-chart-options-section {
animation: fadeInSlideUp 0.5s ease-out 0.8s both;
}
.cvter-notification-container {
animation: fadeInSlideDown 0.5s ease-out 0.3s both;
}
@keyframes fadeInSlideDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.gnrt-page-header h1,
.gnrt-page-header p,
.gnrt-main-container,
.gnrt-sidebar,
.gnrt-main-content,
.cvter-page-header h1,
.cvter-page-header p,
.cvter-container,
.cvter-converter-container,
.cvter-converter-section,
.cvter-actions,
.gnrt-form-group,
.gnrt-btn-primary,
.gnrt-btn-outline,
.cvter-btn-primary,
.gnrt-chart-container,
.gnrt-export-section,
.gnrt-chart-options-section,
.cvter-notification-container,
.carte-page-header h1,
.carte-page-header p,
.carte-container,
.carte-main,
.carte-sidebar,
.carte-svg-container,
.carte-legend,
.page-title-contact h1,
.page-title-contact p,
.contact-section,
.contact-form-container,
.contact-info-container,
.contact-item,
.map-container,
.page-header-res h1,
.page-header-res p,
.resources-container,
.resources-tabs-wrapper,
.tab-content,
.guide-item-link,
.tool-card-link,
.support-card,
.faq-item,
.page-hero-career h1,
.page-hero-career p,
.section-career,
.empty-state,
.notification-form,
.form-row-career,
.form-group-career,
.btn-career,
.application-form,
.form-section-career,
.section-separator-career,
.news-page-header h1,
.news-page-header p,
.news-content-container,
.news-filter,
.news-layout,
.news-main-news,
.news-sidebar,
.news-sidebar-widget,
.news-filter-btn,
.data-page-header h1,
.data-page-header p,
.data-container,
.stats-container,
.search-container-data,
.recent-container,
.stats-card,
.search-box,
.search-advanced,
.data-table-header,
.page-header-sector h1,
.page-header-sector p,
.sector-search,
.filter-tags-sector,
.sectors-grid,
.sector-card,
.filter-tag-sector,
.about-header h1,
.about-header p,
.don-page-header h1,
.don-page-header p,
.equipe-page-header h1,
.equipe-page-header p,
.soumettre-page-header h1,
.soumettre-page-header p,
.form-section,
.form-container,
.form-header,
.form-header h2,
.form-header p,
#dataSubmissionForm,
.form-group,
.checkbox-group,
.form-actions,
.guide-page-header,
.guide-page-header h1,
.guide-page-header p,
.guide-docs-container,
.guide-docs-sidebar,
.guide-docs-main,
.guide-docs-content,
.guide-docs-title,
.guide-docs-subtitle,
.guide-docs-section,
.guide-docs-section h2,
.guide-docs-section p,
.guide-docs-section li,
.guide-docs-code-inline,
.guide-docs-code-block,
.guide-docs-alert-info,
.guide-docs-sidebar-title,
.guide-docs-sidebar-item,
.guide-docs-sidebar-link {
animation: none;
}
}
.carte-page-header h1 {
animation: fadeInScale 0.8s ease-out;
}
.carte-page-header p {
animation: fadeInScale 0.8s ease-out 0.2s both;
}
.carte-sidebar {
animation: fadeInSlideRight 0.6s ease-out 0.6s both;
}
.carte-svg-container {
animation: fadeInScale 0.7s ease-out 0.8s both;
}
.carte-legend {
animation: fadeInSlideUp 0.5s ease-out 1.0s both;
}
.page-title-contact h1 {
animation: fadeInScale 0.8s ease-out;
}
.page-title-contact p {
animation: fadeInScale 0.8s ease-out 0.2s both;
}
.contact-section {
animation: fadeInSlideUp 0.8s ease-out 0.4s both;
}
.contact-form-container {
animation: fadeInSlideLeft 0.6s ease-out 0.6s both;
}
.contact-info-container {
animation: fadeInSlideRight 0.6s ease-out 0.6s both;
}
.contact-item {
animation: fadeInSlideUp 0.4s ease-out both;
}
.contact-item:nth-child(1) { animation-delay: 0.6s; }
.contact-item:nth-child(2) { animation-delay: 0.7s; }
.contact-item:nth-child(3) { animation-delay: 0.8s; }
.form-group-contact:nth-child(1) { animation-delay: 0.5s; }
.form-group-contact:nth-child(2) { animation-delay: 0.6s; }
.form-group-contact:nth-child(3) { animation-delay: 0.7s; }
.form-group-contact:nth-child(4) { animation-delay: 0.8s; }
.form-checkbox-contact {
animation: fadeInSlideUp 0.4s ease-out 0.9s both;
}
.btn-contact {
animation: fadeInScale 0.4s ease-out 1.0s both;
}
.page-header-res h1 {
animation: fadeInScale 0.4s ease-out;
}
.page-header-res p {
animation: fadeInScale 0.4s ease-out 0.1s both;
}
.resources-container {
animation: fadeInSlideUp 0.4s ease-out 0.2s both;
}
.resources-tabs-wrapper {
animation: fadeInSlideUp 0.3s ease-out 0.3s both;
}
.tab-content {
animation: fadeInSlideUp 0.3s ease-out 0.4s both;
}
.guide-item-link {
animation: fadeInSlideUp 0.3s ease-out both;
}
.guide-item-link:nth-child(1) { animation-delay: 0.5s; }
.guide-item-link:nth-child(2) { animation-delay: 0.6s; }
.guide-item-link:nth-child(3) { animation-delay: 0.7s; }
.tool-card-link {
animation: fadeInSlideUp 0.3s ease-out both;
}
.tool-card-link:nth-child(1) { animation-delay: 0.5s; }
.tool-card-link:nth-child(2) { animation-delay: 0.6s; }
.support-card-link {
animation: fadeInSlideUp 0.3s ease-out both;
}
.support-card-link:nth-child(1) { animation-delay: 0.5s; }
.support-card-link:nth-child(2) { animation-delay: 0.6s; }
.support-card-link:nth-child(3) { animation-delay: 0.7s; }
.faq-item {
animation: fadeInSlideUp 0.3s ease-out both;
}
.faq-item:nth-child(1) { animation-delay: 0.6s; }
.faq-item:nth-child(2) { animation-delay: 0.65s; }
.faq-item:nth-child(3) { animation-delay: 0.7s; }
.faq-item:nth-child(4) { animation-delay: 0.75s; }
.faq-item:nth-child(5) { animation-delay: 0.8s; }
.faq-item:nth-child(6) { animation-delay: 0.85s; }
.page-hero-career h1 {
animation: fadeInScale 0.8s ease-out;
}
.page-hero-career p {
animation: fadeInScale 0.8s ease-out 0.2s both;
}
.section-career {
animation: fadeInSlideUp 0.8s ease-out 0.2s both;
}
.section-career:nth-child(3) {
animation-delay: 0.4s;
}
.section-career:nth-child(5) {
animation-delay: 0.6s;
}
.section-career:nth-child(7) {
animation-delay: 0.8s;
}
.empty-state {
animation: fadeInScale 0.6s ease-out 0.4s both;
}
.notification-form {
animation: fadeInSlideUp 0.6s ease-out 0.6s both;
}
.form-group-career:nth-child(1) { animation-delay: 0.9s; }
.form-group-career:nth-child(2) { animation-delay: 1.0s; }
.btn-career {
animation: fadeInScale 0.4s ease-out 1.1s both;
}
.application-form {
animation: fadeInSlideUp 0.6s ease-out 0.8s both;
}
.form-section-career {
animation: fadeInSlideUp 0.5s ease-out both;
}
.form-section-career:nth-child(1) { animation-delay: 0.9s; }
.form-section-career:nth-child(2) { animation-delay: 1.0s; }
.form-section-career:nth-child(3) { animation-delay: 1.1s; }
.form-section-career:nth-child(4) { animation-delay: 1.2s; }
.section-separator-career {
animation: fadeInSlideUp 0.4s ease-out both;
}
.section-separator-career:nth-child(2) { animation-delay: 0.3s; }
.section-separator-career:nth-child(4) { animation-delay: 0.5s; }
.section-separator-career:nth-child(6) { animation-delay: 0.7s; }
.news-page-header h1 {
animation: fadeInScale 0.8s ease-out;
}
.news-page-header p {
animation: fadeInScale 0.8s ease-out 0.2s both;
}
.news-content-container {
animation: fadeInSlideUp 0.8s ease-out 0.4s both;
}
.news-filter {
animation: fadeInSlideUp 0.6s ease-out 0.6s both;
}
.news-layout {
animation: fadeInSlideUp 0.6s ease-out 0.8s both;
}
.news-main-news {
animation: fadeInSlideLeft 0.6s ease-out 1.0s both;
}
.news-sidebar {
animation: fadeInSlideRight 0.6s ease-out 1.0s both;
}
.news-sidebar-widget {
animation: fadeInSlideUp 0.5s ease-out both;
}
.news-sidebar-widget:nth-child(1) { animation-delay: 1.2s; }
.news-sidebar-widget:nth-child(2) { animation-delay: 1.3s; }
.news-sidebar-widget:nth-child(3) { animation-delay: 1.4s; }
.news-filter-btn {
animation: fadeInScale 0.4s ease-out both;
}
.news-filter-btn:nth-child(1) { animation-delay: 0.8s; }
.news-filter-btn:nth-child(2) { animation-delay: 0.85s; }
.news-filter-btn:nth-child(3) { animation-delay: 0.9s; }
.news-filter-btn:nth-child(4) { animation-delay: 0.95s; }
.news-filter-btn:nth-child(5) { animation-delay: 1.0s; }
.news-filter-btn:nth-child(6) { animation-delay: 1.05s; }
.news-filter-btn:nth-child(7) { animation-delay: 1.1s; }
.data-page-header {
background-color: var(--dark-alt);
border-bottom: 1px solid var(--border-color);
padding: 3rem 2rem;
text-align: center;
}
.data-page-header h1 {
font-size: clamp(2.5rem, 4.5vw, 3.5rem);
margin-bottom: 2rem;
color: var(--text);
font-weight: 700;
animation: fadeInScale 0.8s ease-out;
}
.data-page-header p {
font-size: clamp(1.1rem, 2vw, 1.4rem);
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
animation: fadeInScale 0.8s ease-out 0.2s both;
}
.don-page-header {
background-color: var(--dark-alt);
border-bottom: 1px solid var(--border-color);
padding: 3rem 2rem;
text-align: center;
}
.don-page-header h1 {
font-size: clamp(2.5rem, 4.5vw, 3.5rem);
margin-bottom: 2rem;
color: var(--text);
font-weight: 700;
animation: fadeInScale 0.8s ease-out;
}
.dark-theme .don-page-header h1 {
color: var(--text-secondary);
}
.light-theme .don-page-header h1 {
color: #334f74;
}
.don-page-header p {
font-size: clamp(1.1rem, 2vw, 1.4rem);
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
animation: fadeInScale 0.8s ease-out 0.2s both;
}
.equipe-page-header {
background-color: var(--dark-alt);
border-bottom: 1px solid var(--border-color);
padding: 3rem 2rem;
text-align: center;
}
.equipe-page-header h1 {
font-size: clamp(2.5rem, 4.5vw, 3.5rem);
margin-bottom: 2rem;
color: var(--text);
font-weight: 700;
animation: fadeInScale 0.8s ease-out;
}
.dark-theme .equipe-page-header h1 {
color: var(--text-secondary);
}
.light-theme .equipe-page-header h1 {
color: #334f74;
}
.equipe-page-header p {
font-size: clamp(1.1rem, 2vw, 1.4rem);
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
animation: fadeInScale 0.8s ease-out 0.2s both;
}
.soumettre-page-header {
background-color: var(--dark-alt);
border-bottom: 1px solid var(--border-color);
padding: 3rem 2rem;
text-align: center;
}
.soumettre-page-header h1 {
font-size: clamp(2.5rem, 4.5vw, 3.5rem);
margin-bottom: 2rem;
color: var(--text);
font-weight: 700;
animation: fadeInScale 0.8s ease-out;
}
.dark-theme .soumettre-page-header h1 {
color: var(--text-secondary);
}
.light-theme .soumettre-page-header h1 {
color: #334f74;
}
.soumettre-page-header p {
font-size: clamp(1.1rem, 2vw, 1.4rem);
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
animation: fadeInScale 0.8s ease-out 0.2s both;
}
.form-section {
animation: fadeInSlideUp 0.8s ease-out 0.4s both;
}
.form-container {
animation: fadeInSlideUp 0.8s ease-out 0.6s both;
}
.form-header {
animation: fadeInSlideUp 0.8s ease-out 0.8s both;
}
.form-header h2 {
animation: fadeInSlideLeft 0.8s ease-out 1s both;
}
.form-header p {
animation: fadeInSlideRight 0.8s ease-out 1.2s both;
}
#dataSubmissionForm {
animation: fadeInSlideUp 0.8s ease-out 1.4s both;
}
.progress-bar-container {
background-color: transparent;
border-bottom: 1px solid var(--border-color);
padding: 0;
margin-top: 1rem;
margin-bottom: 2rem;
}
.progress-title-container {
max-width: 900px;
margin: 0 auto;
padding: 24px 24px 12px 24px;
text-align: center;
}
.progress-title {
font-size: 28px;
font-weight: 600;
color: var(--text);
margin: 0;
}
.dark-theme .progress-title {
color: white;
}
.light-theme .progress-title {
color: #334f74;
}
.progress-content {
max-width: 900px;
margin: 0 auto;
padding: 12px 24px 64px 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.progress-step {
display: flex;
align-items: center;
flex: 1;
}
.step-wrapper {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.step-number {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
background-color: var(--border-color);
color: var(--text-secondary);
transition: all 0.3s;
}
.step-number.active {
background-color: var(--primary);
color: white;
}
.step-label {
font-size: 11px;
margin-top: 6px;
color: var(--text-secondary);
text-align: center;
white-space: nowrap;
}
.step-label.active {
color: var(--primary);
font-weight: 600;
}
.step-line {
height: 2px;
background-color: var(--border-color);
flex: 1;
margin: 0 8px;
transition: all 0.3s;
}
.step-line.completed {
background-color: var(--primary);
}
.form-section-step {
display: none;
}
.form-section-step.active {
display: block;
animation: fadeInSlideUp 0.4s ease-out;
}
.section-title {
font-size: 22px;
font-weight: 600;
color: var(--text);
margin-bottom: 32px;
}
.form-navigation {
display: flex;
justify-content: space-between;
margin-top: 48px;
padding-top: 40px;
padding-bottom: 24px;
border-top: 1px solid var(--border-color);
}
.btn-nav {
padding: 12px 32px;
border: none;
border-radius: 9999px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 8px;
}
.btn-prev {
background-color: var(--dark-component);
color: var(--text);
border: 1px solid var(--border-color);
}
.btn-prev:hover:not(:disabled) {
background-color: var(--dark-alt);
border-color: var(--primary);
}
.btn-next {
background-color: var(--primary);
color: white;
}
.btn-next:hover:not(:disabled) {
background-color: var(--primary-hover);
}
.btn-nav:disabled {
opacity: 0.5;
cursor: not-allowed;
}
@media (max-width: 768px) {
.step-label {
display: none;
}
.form-navigation {
flex-direction: column;
gap: 12px;
}
.btn-nav {
width: 100%;
justify-content: center;
}
}
.form-section-career {
max-width: 1000px;
margin: 0 auto;
padding: 0 2rem 4rem 2rem;
}
.form-container-career {
background-color: var(--dark-alt);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 3rem;
}
.form-section-career .form-section-step {
display: none;
}
.form-section-career .form-section-step.active {
display: block;
animation: fadeInSlideUp 0.4s ease-out;
}
.form-section-career .section-title {
font-size: 22px;
font-weight: 600;
color: var(--text);
margin-bottom: 32px;
}
.form-section-career .form-group {
margin-bottom: 28px;
}
.form-section-career .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.form-section-career label {
display: block;
font-size: 14px;
font-weight: 500;
color: var(--text);
margin-bottom: 8px;
}
.form-section-career input[type="text"],
.form-section-career input[type="email"],
.form-section-career input[type="tel"],
.form-section-career input[type="date"],
.form-section-career input[type="url"],
.form-section-career textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: 14px;
font-family: inherit;
background-color: var(--dark);
color: var(--text);
transition: all 0.2s;
}
.form-section-career input:focus,
.form-section-career textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(33, 136, 255, 0.1);
}
.form-section-career textarea {
resize: vertical;
min-height: 120px;
}
.form-section-career .file-upload {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 32px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
background-color: var(--dark);
}
.form-section-career .file-upload:hover {
border-color: var(--primary);
background-color: var(--dark-component);
}
.form-section-career .file-upload input {
display: none;
}
.form-section-career .upload-icon {
width: 48px;
height: 48px;
margin: 0 auto 12px;
opacity: 0.4;
color: var(--text-secondary);
}
.form-section-career .upload-text {
font-size: 14px;
font-weight: 500;
color: var(--text);
margin-bottom: 4px;
}
.form-section-career .upload-subtext {
font-size: 12px;
color: var(--text-secondary);
}
.form-section-career .file-name {
font-size: 14px;
color: var(--primary);
font-weight: 500;
}
.form-section-career .radio-group {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 12px;
}
.form-section-career .radio-option {
display: flex;
align-items: center;
}
.form-section-career .radio-option input[type="radio"] {
width: 18px;
height: 18px;
margin-right: 12px;
cursor: pointer;
accent-color: var(--primary);
}
.form-section-career .radio-option label {
margin: 0;
cursor: pointer;
font-weight: 400;
}
.form-section-career .checkbox-group {
display: flex;
align-items: flex-start;
gap: 0;
margin-top: 1.5rem;
}
.form-section-career .custom-checkbox-label {
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
font-size: 0.9rem;
line-height: 1.5;
color: var(--text-secondary);
user-select: none;
}
.form-section-career .custom-checkbox {
flex-shrink: 0;
margin-top: 2px;
}
.form-section-career .custom-options {
max-height: 10.5rem;
overflow-y: auto;
}
@media (max-width: 768px) {
.form-section-career .form-row {
grid-template-columns: 1fr;
gap: 0;
}
.form-container-career {
padding: 24px;
}
}
.page-header-sector h1 {
animation: fadeInScale 0.4s ease-out;
}
.page-header-sector p {
animation: fadeInScale 0.4s ease-out 0.1s both;
}
.sector-search {
animation: fadeInSlideUp 0.3s ease-out 0.3s both;
}
.filter-tags-sector {
animation: fadeInSlideUp 0.3s ease-out 0.4s both;
}
.sectors-grid {
animation: fadeInSlideUp 0.3s ease-out 0.5s both;
}
.sector-card-link {
animation: fadeInScale 0.3s ease-out both;
}
.sector-card-link:nth-child(1) { animation-delay: 0.6s; }
.sector-card-link:nth-child(2) { animation-delay: 0.65s; }
.sector-card-link:nth-child(3) { animation-delay: 0.7s; }
.sector-card-link:nth-child(4) { animation-delay: 0.75s; }
.sector-card-link:nth-child(5) { animation-delay: 0.8s; }
.sector-card-link:nth-child(6) { animation-delay: 0.85s; }
.sector-card-link:nth-child(7) { animation-delay: 0.9s; }
.sector-card-link:nth-child(8) { animation-delay: 0.95s; }
.sector-card-link:nth-child(9) { animation-delay: 1.0s; }
.filter-tag-sector {
animation: fadeInScale 0.3s ease-out both;
}
.filter-tag-sector:nth-child(1) { animation-delay: 0.5s; }
.filter-tag-sector:nth-child(2) { animation-delay: 0.55s; }
.filter-tag-sector:nth-child(3) { animation-delay: 0.6s; }
.filter-tag-sector:nth-child(4) { animation-delay: 0.65s; }
.filter-tag-sector:nth-child(5) { animation-delay: 0.7s; }
.filter-tag-sector:nth-child(6) { animation-delay: 0.75s; }
.filter-tag-sector:nth-child(7) { animation-delay: 0.8s; }
.filter-tag-sector:nth-child(8) { animation-delay: 0.85s; }
.filter-tag-sector:nth-child(9) { animation-delay: 0.9s; }
.filter-tag-sector:nth-child(10) { animation-delay: 0.95s; }
.guide-action-buttons {
display: flex;
align-items: center;
gap: 0.75rem;
}
.guide-btn {
background-color: var(--primary);
color: white;
padding: 0.4rem 1rem;
border: 1px solid rgba(240, 246, 252, 0.1);
border-radius: 6px;
font-weight: 500;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s ease;
text-decoration: none;
}
.guide-btn:hover {
background-color: var(--primary-hover);
}
.guide-btn-outline {
background-color: transparent;
border: 1px solid var(--border-color);
color: var(--text);
}
.guide-btn-outline:hover {
background-color: var(--dark-component);
border-color: var(--text-secondary);
}
.guide-page-header {
background: var(--dark-alt);
padding: 3rem 2rem;
border-bottom: 1px solid var(--border-color);
text-align: center;
}
.guide-page-header-container {
max-width: 1000px;
margin: 0 auto;
}
.guide-page-header h1 {
font-size: clamp(2.5rem, 4.5vw, 3.5rem);
font-weight: 700;
color: #334f74;
margin-bottom: 1rem;
animation: fadeInSlideUp 0.4s ease-out 0.1s both;
}
.dark-theme .guide-page-header h1 {
color: var(--text-secondary);
}
.guide-page-header p {
font-size: 1.2rem;
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
animation: fadeInSlideUp 0.4s ease-out 0.2s both;
}
.guide-docs-container {
width: 100%;
display: flex;
min-height: 100vh;
}
.guide-docs-sidebar {
width: 300px;
background-color: var(--dark-alt);
border-right: 1px solid var(--border-color);
padding: 0;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
will-change: transform;
contain: layout style paint;
}
.guide-docs-sidebar-section {
margin-bottom: 2.5rem;
}
.guide-docs-sidebar-section:first-child {
padding-top: 2rem;
}
.guide-docs-sidebar-title {
font-size: 0.75rem;
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 1px;
padding: 0 1.5rem;
margin-bottom: 1rem;
animation: fadeInSlideLeft 0.4s ease-out 0.1s both;
}
.guide-docs-sidebar-nav {
list-style: none;
}
.guide-docs-sidebar-item {
margin-bottom: 0.25rem;
}
.guide-docs-sidebar-link {
display: flex;
align-items: center;
padding: 0.75rem 1.5rem;
color: var(--text);
text-decoration: none;
font-size: 0.9rem;
transition: all 0.2s ease;
border-left: 3px solid transparent;
position: relative;
animation: fadeInSlideLeft 0.4s ease-out 0.2s both;
}
.guide-docs-sidebar-link:nth-child(1) { animation-delay: 0.2s; }
.guide-docs-sidebar-link:nth-child(2) { animation-delay: 0.25s; }
.guide-docs-sidebar-link:nth-child(3) { animation-delay: 0.3s; }
.guide-docs-sidebar-link:nth-child(4) { animation-delay: 0.35s; }
.guide-docs-sidebar-link:nth-child(5) { animation-delay: 0.4s; }
.guide-docs-sidebar-link:nth-child(6) { animation-delay: 0.45s; }
.guide-docs-sidebar-link:nth-child(7) { animation-delay: 0.5s; }
.guide-docs-sidebar-link:nth-child(8) { animation-delay: 0.55s; }
.guide-docs-sidebar-link:nth-child(9) { animation-delay: 0.6s; }
.guide-docs-sidebar-link:nth-child(10) { animation-delay: 0.65s; }
.guide-docs-sidebar-link:hover {
background-color: rgba(255, 255, 255, 0.05);
color: white;
}
.light-theme .guide-docs-sidebar-link:hover {
background-color: rgba(0, 0, 0, 0.05);
color: var(--text);
}
.guide-docs-sidebar-link.active {
background-color: rgba(33, 136, 255, 0.1);
border-left-color: var(--primary);
color: var(--primary);
font-weight: 500;
}
.guide-docs-sidebar-link i {
margin-right: 0.75rem;
width: 16px;
text-align: center;
font-size: 0.85rem;
}
.guide-docs-sidebar-link:focus {
outline: none;
box-shadow: none;
}
.guide-docs-sidebar-link:focus-visible {
outline: none;
box-shadow: none;
}
.guide-docs-sidebar-link:active {
outline: none !important;
box-shadow: none !important;
}
.guide-docs-sidebar-link:focus {
outline: none !important;
box-shadow: none !important;
border: none !important;
}
.guide-docs-sidebar-link:focus-visible {
outline: none !important;
box-shadow: none !important;
border: none !important;
}
.guide-docs-sidebar-link:visited {
outline: none !important;
box-shadow: none !important;
}
.guide-docs-sidebar-link * {
outline: none !important;
box-shadow: none !important;
}
.guide-docs-main {
flex: 1;
padding: 3rem;
max-width: calc(100% - 300px - 280px);
display: flex;
justify-content: center;
animation: fadeInSlideRight 0.4s ease-out 0.1s both;
}
.guide-docs-content {
max-width: 800px;
width: 100%;
animation: fadeInSlideUp 0.4s ease-out 0.2s both;
}
.guide-docs-title {
font-size: 2.5rem;
font-weight: 600;
color: #334f74;
margin-bottom: 1rem;
line-height: 1.2;
animation: fadeInSlideUp 0.4s ease-out 0.2s both;
}
.dark-theme .guide-docs-title {
color: white;
}
.guide-docs-subtitle {
font-size: 1.2rem;
color: var(--text-secondary);
margin-bottom: 2rem;
line-height: 1.4;
animation: fadeInSlideUp 0.4s ease-out 0.2s both;
}
.light-theme .guide-docs-subtitle {
color: #000000;
}
.guide-docs-section {
margin-bottom: 3rem;
}
.guide-docs-section h2 {
font-size: 1.8rem;
font-weight: 600;
color: #334f74;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-color);
}
.dark-theme .guide-docs-section h2 {
color: white;
}
.guide-docs-section h3 {
font-size: 1.4rem;
font-weight: 600;
color: var(--text);
margin: 2rem 0 1rem 0;
}
.guide-docs-section h4 {
font-size: 1.2rem;
font-weight: 600;
color: #334f74;
margin: 1.5rem 0 0.75rem 0;
}
.dark-theme .guide-docs-section h4 {
color: white;
}
.guide-docs-section p {
margin-bottom: 1.5rem;
color: var(--text);
}
.guide-docs-section ul, .guide-docs-section ol {
margin-bottom: 1.5rem;
padding-left: 2rem;
}
.guide-docs-section li {
margin-bottom: 0.5rem;
color: var(--text);
}
.guide-docs-section li strong {
font-weight: normal;
}
.guide-docs-code-inline {
background-color: var(--dark-component);
color: var(--text);
padding: 0.2rem 0.4rem;
border-radius: 4px;
font-size: 0.9em;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
border: 1px solid var(--border-color);
}
@media (max-width: 768px) {
.guide-docs-code-inline {
font-size: 0.75rem;
padding: 0.15rem 0.3rem;
word-break: break-all;
white-space: normal;
line-height: 1.3;
}
.guide-docs-table .guide-docs-code-inline {
word-break: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
@media (max-width: 480px) {
.guide-docs-code-inline {
font-size: 0.7rem;
padding: 0.1rem 0.25rem;
word-break: break-all;
white-space: normal;
line-height: 1.2;
}
.guide-docs-table .guide-docs-code-inline {
word-break: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.cookie-preferences-overlay {
z-index: 20930940;
position: fixed;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.cookie-preferences-button {
position: absolute;
left: 18px;
bottom: 2rem;
border: none;
user-select: none;
text-decoration: none;
text-overflow: unset;
background: none;
box-shadow: none;
overflow: unset;
z-index: 1000;
display: inline-flex;
justify-content: center;
min-width: auto;
width: auto;
min-height: auto;
height: auto;
margin: 0;
padding: 0;
font-family: 'Rubik', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.25;
white-space: nowrap;
cursor: pointer;
transition: transform 0.2s ease;
pointer-events: auto;
}
.cookie-preferences-button::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -18px;
width: 40px;
height: 40px;
border-radius: 44px 18px 40px 25px;
}
.cookie-preferences-button:hover {
transform: scale(1.1);
}
.cookie-icon-wrapper {
display: flex;
z-index: 100;
position: relative;
}
.cookie-icon {
position: relative;
width: 48px;
height: 48px;
display: inline-flex;
}
.cookie-icon svg {
z-index: 0;
position: relative;
width: 48px;
height: 48px;
max-width: none;
max-height: none;
}
.cookie-icon svg path {
transition: 0.15s ease;
}
.cookie-icon svg path:first-child {
fill: var(--primary);
}
.cookie-icon svg path:last-child {
fill: white !important;
}
.cookie-icon svg path:first-child {
fill: var(--primary);
}
.cookie-icon svg path:last-child {
fill: white !important;
}
.cookie-banner {
position: fixed;
bottom: 80px;
left: 20px;
width: 420px;
max-width: calc(100vw - 40px);
background: var(--dark-alt);
border-radius: 16px !important;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.05);
z-index: 2147483647;
font-family: 'Rubik', sans-serif;
animation: cookieBannerSlideIn 0.4s ease-out;
}
.cookie-banner,
.cookie-banner * {
border-radius: 16px !important;
}
@keyframes cookieBannerSlideIn {
0% {
opacity: 0;
transform: translate3d(-200px, 0, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.cookie-banner-content {
padding: 20px 20px 0;
color: var(--text);
background: var(--dark-alt);
}
.cookie-banner-header {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
padding-top: 4px;
gap: 15px;
position: relative;
}
.cookie-close-button {
position: absolute;
top: 0;
right: 0;
background: none;
border: none;
color: var(--text-secondary);
font-size: 18px;
cursor: pointer;
padding: 8px;
border-radius: 50%;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
/* Amélioration pour mobile */
min-width: 44px;
min-height: 44px;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.cookie-close-button:hover {
background: var(--shadow-light);
color: var(--text);
}
.cookie-close-button:active {
transform: scale(0.95);
background: var(--shadow-light);
}
@media (min-width: 769px) {
.cookie-close-button {
display: none;
}
}
.cookie-banner-icon {
float: right;
margin-left: 20px;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
.cookie-banner-icon i {
font-size: 48px;
color: var(--primary);
animation: cookieIconPulse 2s ease-in-out infinite;
}
@keyframes cookieIconPulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.cookie-banner-title {
display: block;
margin: 0 0 8px 0;
font-family: 'SofiaProLight', sans-serif;
font-size: 24px;
line-height: 1.25;
font-weight: 700;
text-align: left;
color: var(--text);
flex: 1;
}
.cookie-banner-title small {
display: block;
font-size: 70%;
font-weight: 400;
margin-bottom: 8px;
}
.cookie-banner-title span {
display: block;
line-height: 1.25;
}
.cookie-banner-text {
margin: 0 0 10px;
font-family: 'Rubik', sans-serif;
color: var(--text-secondary);
font-size: 13px;
line-height: 1.5;
}
.cookie-banner-actions {
display: flex;
justify-content: center;
align-items: stretch;
width: 100%;
border-top: 1px solid var(--border-color);
margin-left: -20px;
margin-right: -20px;
width: calc(100% + 40px);
z-index: 200;
position: relative;
}
.cookie-banner-actions > .cookie-btn {
flex: 1 1 100%;
}
.cookie-banner-actions > .cookie-btn:first-of-type {
border-bottom-left-radius: 16px !important;
}
.cookie-banner-actions > .cookie-btn:last-of-type {
border-bottom-right-radius: 16px !important;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.cookie-banner-actions > .cookie-btn:not(:last-child) {
border-right: 1px solid var(--border-color);
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
box-shadow: none;
}
.cookie-btn {
border: none;
user-select: none;
text-decoration: none;
text-transform: none;
text-overflow: unset;
background: var(--dark-alt);
overflow: unset;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
min-width: auto;
min-height: auto;
margin: 0;
padding: 12px 8px;
font-family: 'Rubik', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.25;
white-space: normal;
letter-spacing: 0;
border-radius: 0;
cursor: pointer;
transition: all 0.15s ease;
box-shadow: none;
outline: none;
min-height: 44px;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.cookie-btn:hover {
color: var(--primary);
background-color: inherit;
transform: none;
box-shadow: none;
}
.cookie-btn:active {
transform: scale(0.98);
background-color: var(--shadow-light);
}
.cookie-btn:active,
.cookie-btn:focus {
z-index: 1000;
box-shadow: none;
outline: none;
}
.cookie-btn:disabled {
cursor: default;
box-shadow: none;
}
.cookie-btn-primary {
font-weight: 700;
color: var(--primary);
background-color: var(--dark-alt);
}
.cookie-btn-primary:hover {
color: var(--primary);
background-color: inherit;
}
.cookie-btn-primary:active,
.cookie-btn-primary:focus {
box-shadow: none;
outline: none;
}
.cookie-btn-secondary {
color: var(--text-secondary);
background-color: var(--dark-alt);
}
.cookie-banner-configuring {
width: 420px !important;
max-width: calc(100vw - 40px) !important;
border-radius: 16px !important;
animation: cookieBannerExpand 0.4s ease-out;
}
@keyframes cookieBannerExpand {
0% {
height: auto;
opacity: 0.8;
}
100% {
height: auto;
opacity: 1;
}
}
.cookie-preferences-options {
padding: 0 20px;
margin-bottom: 20px;
}
.cookie-select-all {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
margin-bottom: 16px;
background: var(--dark-component);
border-radius: 6px;
border: 1px solid var(--border-color);
}
.cookie-select-all-label {
margin: 0;
font-weight: 600;
color: var(--text);
font-size: 14px;
}
.cookie-vendor-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.cookie-vendor-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 8px;
gap: 16px;
}
.cookie-vendor-info {
flex: 1;
display: flex;
gap: 0;
}
.cookie-vendor-brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.cookie-vendor-favicon {
width: 32px;
height: 32px;
background: var(--primary);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
}
.cookie-vendor-policy {
color: var(--text-secondary);
text-decoration: none;
font-size: 12px;
transition: color 0.2s ease;
}
.cookie-vendor-policy:hover {
color: var(--primary);
}
.cookie-vendor-details {
flex: 1;
}
.cookie-vendor-title {
font-weight: 600;
color: var(--text);
font-size: 13px;
margin-bottom: 2px;
}
.cookie-vendor-description {
margin: 0;
font-size: 11px;
color: var(--text-secondary);
line-height: 1.3;
}
.cookie-preferences-actions {
display: flex;
justify-content: center;
align-items: stretch;
width: 100%;
border-top: 1px solid var(--border-color);
margin-left: -20px;
margin-right: -20px;
width: calc(100% + 40px);
z-index: 200;
position: relative;
}
.cookie-preferences-actions > .cookie-btn {
flex: 1 1 100%;
}
.cookie-preferences-actions > .cookie-btn:first-of-type {
border-bottom-left-radius: 16px !important;
}
.cookie-preferences-actions > .cookie-btn:last-of-type {
border-bottom-right-radius: 16px !important;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.cookie-preferences-actions > .cookie-btn:not(:last-child) {
border-right: 1px solid var(--border-color);
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
box-shadow: none;
}
.cookie-preference-toggle {
flex-shrink: 0;
}
.cookie-toggle-slider {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
background: var(--border-color);
border-radius: 24px;
cursor: pointer;
transition: all 0.3s ease;
}
.cookie-toggle-slider:before {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: #FFFFFF;
border-radius: 50%;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
input[type="checkbox"]:checked + .cookie-toggle-slider {
background: var(--primary);
}
input[type="checkbox"]:checked + .cookie-toggle-slider:before {
transform: translateX(20px);
}
input[type="checkbox"]:disabled + .cookie-toggle-slider {
background: var(--border-color);
cursor: not-allowed;
}
input[type="checkbox"]:disabled + .cookie-toggle-slider:before {
background: #CCCCCC;
}
.cookie-preference-toggle input[type="checkbox"] {
display: none;
}
@media (max-width: 768px) {
.cookie-banner {
left: 10px;
right: 10px;
width: auto;
max-width: none;
bottom: 6rem;
}
.cookie-banner-configuring {
width: auto !important;
max-width: none !important;
}
.cookie-banner-content {
padding: 16px 16px 0;
}
.cookie-banner-title {
font-size: 20px;
}
.cookie-banner-text {
font-size: 12px;
}
.cookie-banner-actions,
.cookie-preferences-actions {
flex-direction: row;
margin-left: 0;
margin-right: 0;
width: 100%;
gap: 0;
}
.cookie-banner-actions > .cookie-btn,
.cookie-preferences-actions > .cookie-btn {
flex: 1 1 33.333%;
min-width: 0;
border-right: 1px solid var(--border-color);
border-bottom: none;
padding: 14px 6px;
font-size: 13px;
min-height: 46px;
font-weight: 500;
}
.cookie-banner-actions > .cookie-btn:first-of-type,
.cookie-preferences-actions > .cookie-btn:first-of-type {
border-bottom-left-radius: 16px !important;
border-top-left-radius: 0 !important;
}
.cookie-banner-actions > .cookie-btn:last-of-type,
.cookie-preferences-actions > .cookie-btn:last-of-type {
border-bottom-right-radius: 16px !important;
border-top-right-radius: 0 !important;
border-bottom: none;
border-right: none;
}
.cookie-preferences-options {
padding: 0 16px;
}
.cookie-preferences-button {
left: 1.5rem;
right: auto;
bottom: 1.5rem;
}
.cookie-vendor-item {
flex-direction: row;
gap: 16px;
align-items: center;
}
.cookie-vendor-info {
flex-direction: row;
gap: 0;
flex: 1;
}
.cookie-preference-toggle {
align-self: center;
}
}
@media (max-width: 480px) {
.cookie-banner {
left: 5px;
right: 5px;
bottom: 5px;
}
.cookie-banner-content {
padding: 12px 12px 0;
}
.cookie-banner-title {
font-size: 18px;
}
.cookie-banner-text {
font-size: 11px;
}
.cookie-btn {
padding: 14px 8px;
font-size: 13px;
min-height: 48px;
font-weight: 600;
}
.cookie-banner-actions {
gap: 0;
}
.cookie-banner-actions > .cookie-btn {
flex: 1 1 33.333%;
min-width: 0;
padding: 14px 4px;
font-size: 12px;
line-height: 1.2;
}
.cookie-banner-actions > .cookie-btn:not(:last-child) {
border-right: 1px solid var(--border-color);
}
.cookie-close-button {
width: 36px;
height: 36px;
font-size: 16px;
}
.cookie-preferences-button {
left: 1rem;
right: auto;
bottom: 1rem;
}
}
@media (prefers-reduced-motion: reduce) {
.cookie-banner,
.cookie-preferences-modal {
animation: none;
}
.cookie-toggle-slider,
.cookie-toggle-slider:before {
transition: none;
}
}
.cookie-preferences-link {
background: none;
border: none;
color: var(--text-muted);
text-decoration: none;
font-size: 14px;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: inherit;
}
.cookie-preferences-link:hover {
color: var(--primary);
background: var(--dark-component);
text-decoration: none;
}
.cookie-preferences-link i {
font-size: 12px;
}
.guide-docs-code-block {
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 1rem;
margin: 1.5rem 0;
overflow-x: auto;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 0.9rem;
line-height: 1.4;
}
.light-theme .guide-docs-code-block {
background-color: #f8fafc;
border: 1px solid #e2e8f0;
}
.guide-docs-code-block pre {
margin: 0;
color: var(--text);
}
.guide-docs-code-block .comment {
color: var(--text-secondary);
font-style: italic;
}
.guide-docs-code-block .url {
color: var(--primary);
}
.guide-docs-code-block .number {
color: var(--primary);
}
.guide-docs-code-block .string {
color: var(--text);
}
.guide-docs-alert {
padding: 1rem 1.5rem;
margin: 1.5rem 0;
border-left: 4px solid;
border-radius: 0 6px 6px 0;
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.guide-docs-alert-info {
background-color: rgba(33, 136, 255, 0.1);
border-left-color: var(--primary);
color: var(--text);
}
.guide-docs-alert-success {
background-color: rgba(35, 134, 54, 0.1);
border-left-color: var(--success);
color: var(--text);
}
.guide-docs-alert-warning {
background-color: rgba(209, 162, 67, 0.1);
border-left-color: var(--warning);
color: var(--text);
}
.guide-docs-alert-danger {
background-color: rgba(218, 54, 51, 0.1);
border-left-color: var(--danger);
color: var(--text);
}
.guide-docs-alert-icon {
color: inherit;
margin-top: 0.1rem;
}
.guide-docs-toc {
width: 280px;
padding: 2rem 0 2rem 2rem;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
will-change: transform;
contain: layout style paint;
animation: fadeInSlideRight 0.4s ease-out 0.1s both;
}
.guide-docs-toc-title {
font-size: 0.75rem;
font-weight: 700;
color: var(--guide-text-secondary);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1.5rem;
animation: fadeInSlideUp 0.4s ease-out 0.2s both;
}
.guide-docs-toc-nav {
list-style: none;
}
.guide-docs-toc-item {
margin-bottom: 0.5rem;
}
.guide-docs-toc-link {
display: block;
padding: 0.5rem 0.75rem;
color: var(--guide-text-secondary);
text-decoration: none;
font-size: 0.85rem;
transition: all 0.2s ease;
border-left: 2px solid transparent;
border-radius: 0 4px 4px 0;
animation: fadeInSlideUp 0.4s ease-out 0.3s both;
}
.guide-docs-toc-link:hover {
color: var(--guide-text);
background-color: rgba(255, 255, 255, 0.05);
}
.guide-docs-toc-link.active {
color: var(--guide-primary);
border-left-color: var(--guide-primary);
background-color: rgba(33, 136, 255, 0.1);
font-weight: 500;
}
.guide-docs-toc-link:active {
border-left-color: var(--guide-primary);
}
.guide-docs-toc-link.level-2 {
padding-left: 1.5rem;
font-size: 0.8rem;
}
.guide-docs-toc-link.level-3 {
padding-left: 2.25rem;
font-size: 0.75rem;
}
.guide-docs-toc-link:focus {
outline: none !important;
box-shadow: none !important;
}
.guide-docs-toc-link:focus-visible {
outline: none !important;
box-shadow: none !important;
}
.guide-docs-toc-link:active {
outline: none !important;
box-shadow: none !important;
}
.guide-docs-toc-link:visited {
outline: none !important;
box-shadow: none !important;
}
.guide-docs-toc-link * {
outline: none !important;
box-shadow: none !important;
}
.guide-docs-toc-link:focus,
.guide-docs-toc-link:focus-visible,
.guide-docs-toc-link:active,
.guide-docs-toc-link:visited {
outline: none !important;
box-shadow: none !important;
border-right: none !important;
border-top: none !important;
border-bottom: none !important;
}
.guide-docs-toc a:focus,
.guide-docs-toc a:focus-visible,
.guide-docs-toc a:active,
.guide-docs-toc a:visited {
outline: none !important;
box-shadow: none !important;
}
.guide-docs-toc *:focus,
.guide-docs-toc *:focus-visible,
.guide-docs-toc *:active {
outline: none !important;
box-shadow: none !important;
}
.guide-docs-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 1.5rem 0;
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 6px;
overflow: hidden;
}
.guide-docs-table th,
.guide-docs-table td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
.guide-docs-table th {
background-color: var(--dark-alt);
font-weight: 600;
color: var(--text);
}
.guide-docs-table td {
color: var(--text);
}
.guide-docs-table tr:last-child td {
border-bottom: none;
}
.guide-docs-pagination {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 4rem;
padding-top: 2rem;
border-top: 1px solid var(--guide-border-color);
}
.guide-docs-pagination.single-next {
justify-content: flex-end;
}
.guide-docs-pagination.single-prev {
justify-content: flex-start;
}
.guide-docs-separator {
height: 1px;
background-color: var(--guide-border-color);
margin: 4rem 0 0 0;
}
.guide-docs-pagination-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
background-color: var(--guide-dark-component);
border: 1px solid var(--guide-border-color);
border-radius: 6px;
text-decoration: none;
color: var(--guide-text);
transition: all 0.2s ease;
max-width: 250px;
}
.guide-docs-pagination-item:hover {
border-color: var(--guide-primary);
background-color: rgba(33, 136, 255, 0.05);
}
.guide-docs-pagination-item-content {
display: flex;
flex-direction: column;
}
.guide-docs-pagination-label {
font-size: 0.8rem;
color: var(--guide-text-secondary);
}
.guide-docs-pagination-title {
font-weight: 500;
color: white;
}
@media (max-width: 1200px) {
.guide-docs-toc {
display: none;
}
.guide-docs-main {
max-width: calc(100% - 300px);
}
}
@media (max-width: 768px) {
.guide-docs-container {
flex-direction: column;
}
.guide-docs-sidebar {
width: 100%;
height: auto;
position: static;
border-right: none;
border-bottom: 1px solid var(--guide-border-color);
}
.guide-docs-sidebar-section {
border-bottom: 1px solid var(--guide-border-color);
}
.guide-docs-sidebar-section:last-child {
border-bottom: none;
}
.guide-docs-sidebar-title {
cursor: pointer;
user-select: none;
position: relative;
padding: 1rem 1.5rem;
margin-bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.2s ease;
}
.guide-docs-sidebar-title:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.guide-docs-sidebar-title::after {
content: '\f107';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
transition: transform 0.3s ease;
color: var(--guide-text-secondary);
}
.guide-docs-sidebar-section.collapsed .guide-docs-sidebar-title::after {
transform: rotate(-90deg);
}
.guide-docs-sidebar-nav {
max-height: 500px;
overflow: hidden;
transition: max-height 0.3s ease;
}
.guide-docs-sidebar-section.collapsed .guide-docs-sidebar-nav {
max-height: 0;
}
.guide-docs-main {
max-width: 100%;
padding: 2rem 1rem;
justify-content: flex-start;
}
.guide-docs-content {
margin: 0;
text-align: left;
}
.guide-docs-table {
margin: 1.5rem 0;
max-width: 100%;
overflow-x: auto;
display: block;
}
.guide-docs-table th,
.guide-docs-table td {
text-align: left;
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
}
.guide-navbar {
flex-wrap: wrap;
padding: 0.75rem 1rem;
}
.guide-header-search {
order: 3;
max-width: 100%;
width: 100%;
margin: 0.75rem 0 0 0;
}
.guide-action-buttons {
margin-top: 0.75rem;
width: 100%;
justify-content: space-between;
}
.guide-page-header h1 {
font-size: 2rem;
}
.guide-docs-title {
font-size: 2rem;
}
}
.guide-stars {
color: #2188ff;
}
.guide-stars .star-empty {
color: #6e7681;
}
.code-block {
background-color: var(--dark-component);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 16px;
margin: 16px 0;
overflow-x: auto;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 14px;
line-height: 1.45;
color: var(--text);
text-align: left;
}
.light-theme .code-block {
background-color: #f8fafc;
border: 1px solid #e2e8f0;
}
.yaml-comment {
color: var(--text-secondary);
display: block;
margin-bottom: 0;
}
.example-block {
margin-bottom: 16px;
}
.example-block:last-child {
margin-bottom: 0;
}
.social-media-section {
margin-top: 40px;
}
.social-media-title {
color: var(--text-primary);
margin-bottom: 20px;
font-size: 1.3rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.social-media-title i {
color: var(--primary);
}
.social-media-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.social-card {
display: flex;
align-items: center;
padding: 10px;
background: rgba(88, 166, 255, 0.05);
border: 1px solid rgba(88, 166, 255, 0.1);
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
color: var(--text-color);
}
.social-card:hover {
background: rgba(88, 166, 255, 0.1);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(88, 166, 255, 0.2);
}
.social-icon {
font-size: 1.1rem;
margin-right: 8px;
width: 24px;
text-align: center;
}
.social-info h5 {
font-size: 0.9rem;
font-weight: 600;
margin: 0 0 0.15rem 0;
color: var(--text-primary);
}
.social-info p {
font-size: 0.75rem;
margin: 0;
color: var(--text-secondary);
opacity: 0.8;
}
.social-card.facebook .social-icon { color: #4193e0; }
.social-card.twitter .social-icon { color: #4193e0; }
.social-card.linkedin .social-icon { color: #4193e0; }
.social-card.instagram .social-icon { color: #4193e0; }
.social-card.youtube .social-icon { color: #4193e0; }
.social-card.github .social-icon { color: #4193e0; }
@media (max-width: 768px) {
.social-media-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.social-card {
padding: 8px;
}
.social-icon {
font-size: 1rem;
margin-right: 6px;
width: 20px;
}
.social-info h5 {
font-size: 0.8rem;
}
.social-info p {
font-size: 0.7rem;
}
}
@media (max-width: 480px) {
.social-media-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.social-card {
padding: 6px;
}
.social-icon {
font-size: 0.9rem;
margin-right: 4px;
width: 18px;
}
.social-info h5 {
font-size: 0.75rem;
margin: 0 0 0.1rem 0;
}
.social-info p {
font-size: 0.65rem;
}
}
@media (max-width: 360px) {
.social-media-grid {
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
.social-card {
padding: 4px;
}
.social-icon {
font-size: 0.8rem;
margin-right: 3px;
width: 16px;
}
.social-info h5 {
font-size: 0.7rem;
}
.social-info p {
font-size: 0.6rem;
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideOut {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-20px);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.contact-loading {
position: relative;
overflow: hidden;
}
.contact-loading::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(33, 134, 255, 0.2), transparent);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
.portfolio-input-container {
position: relative;
display: flex;
align-items: center;
width: 100%;
min-height: 60px;
border: 2px dashed var(--border-color, #30363d);
border-radius: 8px;
background: var(--dark, #0d1117);
transition: all 0.3s ease;
cursor: text;
}
.portfolio-input-container:hover {
border-color: var(--primary, #2188ff);
background: rgba(33, 136, 255, 0.05);
}
.portfolio-input-container:focus-within {
border-color: var(--primary, #2188ff);
border-style: solid;
box-shadow: 0 0 0 3px rgba(33, 136, 255, 0.1);
}
.portfolio-icon {
position: absolute;
left: 1rem;
color: var(--text-secondary, #8b949e);
z-index: 2;
pointer-events: none;
font-size: 1.1rem;
}
.portfolio-input {
padding-left: 3rem !important;
padding-right: 1rem !important;
width: 100% !important;
border: none !important;
background: transparent !important;
color: var(--text, #c9d1d9) !important;
font-size: 1rem !important;
height: 100% !important;
min-height: 56px !important;
outline: none !important;
margin: 0 !important;
}
.portfolio-input::placeholder {
color: var(--text-secondary, #8b949e) !important;
}
@media (max-width: 768px) {
.portfolio-input-container {
margin-bottom: 1rem;
min-height: 56px;
}
.portfolio-input {
padding-left: 2.5rem !important;
padding-right: 0.875rem !important;
font-size: 16px !important;
min-height: 52px !important;
}
.portfolio-icon {
left: 0.875rem;
font-size: 1rem;
}
}
.carte-description p {
margin-bottom: 1rem;
line-height: 1.6;
}
.carte-description p:last-child {
margin-bottom: 0;
}
.carte-chart-source {
margin-top: 20px !important;
}
#seasonal-cycle-chart {
margin-bottom: 10px;
}
#temperature-timeseries-chart {
margin-bottom: 15px;
}
.tool-icon .chart-generator-icon {
width: 3.5rem !important;
height: 3.5rem !important;
color: var(--primary);
}
.tool-icon .converter-icon {
width: 3.5rem !important;
height: 3.5rem !important;
color: var(--primary);
}
.guide-icon .data-quality-guide-icon {
width: 4.5rem !important;
height: 4.5rem !important;
color: var(--primary);
}
.guide-icon .search-techniques-icon {
width: 4.5rem !important;
height: 4.5rem !important;
color: var(--primary);
}
.guide-icon .export-citation-icon {
width: 4.5rem !important;
height: 4.5rem !important;
color: var(--primary);
}
.guide-docs-sidebar-link .data-quality-guide-icon,
.guide-docs-sidebar-link .search-techniques-icon,
.guide-docs-sidebar-link .export-citation-icon {
width: 1.6rem !important;
height: 1.6rem !important;
color: var(--text);
margin-right: 0.75rem;
opacity: 2.0;
font-weight: bold;
}
.guide-docs-sidebar-link .introduction-icon {
width: 1rem !important;
height: 1rem !important;
color: var(--text);
margin-right: 0.75rem;
margin-left: 0.2rem;
opacity: 0.8;
}
.guide-docs-sidebar-link.active .data-quality-guide-icon,
.guide-docs-sidebar-link.active .search-techniques-icon,
.guide-docs-sidebar-link.active .export-citation-icon,
.guide-docs-sidebar-link.active .introduction-icon {
color: var(--primary) !important;
fill: var(--primary) !important;
}
.collection-icon.pdf-icon {
width: 7rem !important;
height: 7rem !important;
color: var(--primary);
fill: var(--primary);
}
.collection-icon.spreadsheet-icon {
width: 5rem !important;
height: 5rem !important;
color: var(--primary);
fill: var(--primary);
}
.collection-icon.geospatial-icon {
width: 5rem !important;
height: 5rem !important;
color: var(--primary);
fill: var(--primary);
}
.collection-card-link {
text-decoration: none;
color: inherit;
display: block;
transition: all 0.3s ease;
}
.collection-card-link:hover {
text-decoration: none;
color: inherit;
}
.collection-card-link:hover .collection-card {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
border: 2px solid var(--primary) !important;
transform: scale(1.02);
}
.collection-card-link:hover .collection-icon {
transform: scale(1.1);
transition: transform 0.3s ease;
}
.error-illustration {
max-width: 300px;
width: 100%;
margin: 1rem auto;
}
.error-illustration svg {
width: 100%;
height: auto;
max-width: 300px;
}
@media (max-width: 768px) {
.error-illustration {
max-width: 250px;
}
.error-illustration svg {
max-width: 250px;
}
}
@media (max-width: 480px) {
.error-illustration {
max-width: 200px;
}
.error-illustration svg {
max-width: 200px;
}
}
.error-message {
text-align: center;
margin: 1rem 0;
}
.error-message p {
font-size: 1.1rem;
color: var(--text-secondary);
margin: 0;
line-height: 1.6;
}
.error-actions {
text-align: center;
margin-top: 1.5rem;
margin-bottom: 3rem;
}
.error-actions .btn {
display: inline-flex;
align-items: center;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
border-radius: 8px;
transition: all 0.3s ease;
}
.error-actions .btn-primary {
background-color: var(--primary);
color: white;
border: 2px solid var(--primary);
}
.error-actions .btn-primary:hover {
background-color: var(--primary-hover);
border-color: var(--primary-hover);
transform: translateY(-2px);
}
@media (max-width: 768px) {
.error-message p {
font-size: 1rem;
}
.error-actions .btn {
padding: 0.625rem 1.25rem;
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.error-message {
margin: 0.75rem 0;
}
.error-actions {
margin-top: 1rem;
margin-bottom: 2rem;
}
}
.section-filters {
display: flex;
justify-content: center;
gap: 1rem;
margin: 2rem 0 3rem 0;
flex-wrap: wrap;
}
.filter-btn {
background: rgba(33, 136, 255, 0.08);
color: rgb(33, 136, 255);
border: 1px solid rgba(33, 136, 255, 0.25);
padding: 0.55rem 1.25rem;
border-radius: 6px;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: all 0.25s ease;
text-decoration: none;
display: inline-block;
line-height: 1;
}
.filter-btn:hover {
background: rgba(33, 136, 255, 0.16);
border-color: rgba(33, 136, 255, 0.45);
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(33, 136, 255, 0.18);
}
.filter-btn:active {
transform: translateY(0);
}
@media (max-width: 768px) {
.section-filters {
gap: 0.75rem;
margin: 1.5rem 0 2rem 0;
}
.filter-btn {
padding: 0.5rem 1.1rem;
font-size: 0.88rem;
}
}
@media (max-width: 480px) {
.section-filters {
gap: 0.5rem;
margin: 1rem 0 1.5rem 0;
}
.filter-btn {
padding: 0.45rem 0.9rem;
font-size: 0.82rem;
}
}