2211 lines
42 KiB
CSS
2211 lines
42 KiB
CSS
/* Design System - Complete Variables */
|
|
:root {
|
|
/* Primary Colors - Blue System */
|
|
--primary-50: #eff6ff;
|
|
--primary-100: #dbeafe;
|
|
--primary-200: #bfdbfe;
|
|
--primary-300: #93c5fd;
|
|
--primary-400: #60a5fa;
|
|
--primary-500: #3b82f6;
|
|
--primary-600: #2563eb;
|
|
--primary-700: #1d4ed8;
|
|
--primary-800: #1e40af;
|
|
--primary-900: #1e3a8a;
|
|
|
|
/* Neutral Colors - Gray System */
|
|
--gray-50: #f8fafc;
|
|
--gray-100: #f1f5f9;
|
|
--gray-200: #e2e8f0;
|
|
--gray-300: #cbd5e1;
|
|
--gray-400: #94a3b8;
|
|
--gray-500: #64748b;
|
|
--gray-600: #475569;
|
|
--gray-700: #334155;
|
|
--gray-800: #1e293b;
|
|
--gray-900: #0f172a;
|
|
|
|
/* Semantic Colors */
|
|
--success: #10b981;
|
|
--warning: #f59e0b;
|
|
--error: #ef4444;
|
|
--info: var(--primary-500);
|
|
|
|
/* Typography */
|
|
--font-family: 'Montserrat', 'Microsoft YaHei', '微软雅黑', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
|
|
|
|
/* Spacing Scale */
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1rem;
|
|
--space-5: 1.25rem;
|
|
--space-6: 1.5rem;
|
|
--space-8: 2rem;
|
|
--space-10: 2.5rem;
|
|
--space-12: 3rem;
|
|
--space-16: 4rem;
|
|
--space-20: 5rem;
|
|
|
|
/* Border Radius */
|
|
--radius-sm: 0.375rem;
|
|
--radius-md: 0.5rem;
|
|
--radius-lg: 0.75rem;
|
|
--radius-xl: 1rem;
|
|
--radius-2xl: 1.5rem;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
--shadow-primary: 0 10px 15px -3px rgba(59, 130, 246, 0.1), 0 4px 6px -2px rgba(59, 130, 246, 0.05);
|
|
|
|
/* Transitions */
|
|
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
/* Legacy Variables for Compatibility */
|
|
--primary-color: var(--primary-500);
|
|
--primary-hover: var(--primary-600);
|
|
--primary-light: var(--primary-400);
|
|
--primary-dark: var(--primary-700);
|
|
--secondary-color: var(--gray-800);
|
|
--text-color: var(--gray-900);
|
|
--text-light: var(--gray-600);
|
|
--text-muted: var(--gray-400);
|
|
--background-dark: var(--gray-900);
|
|
--background-card: var(--gray-800);
|
|
--border-color: rgba(255,255,255,0.1);
|
|
--shadow-primary-hover: 0 20px 25px -5px rgba(59, 130, 246, 0.15), 0 10px 10px -5px rgba(59, 130, 246, 0.1);
|
|
--gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
|
|
--gradient-secondary: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-900) 100%);
|
|
}
|
|
|
|
header {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: block;
|
|
}
|
|
|
|
section {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Force no gap between header and first section */
|
|
header + section,
|
|
header + * {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.main-header + .hero-section {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
-webkit-text-size-adjust: 100%;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body, html {
|
|
font-family: var(--font-family);
|
|
font-weight: 400;
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
color: var(--gray-900);
|
|
background: white;
|
|
overflow-x: hidden;
|
|
text-rendering: optimizeLegibility;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Improved focus styles */
|
|
:focus {
|
|
outline: 2px solid var(--primary-500);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
:focus:not(:focus-visible) {
|
|
outline: none;
|
|
}
|
|
|
|
/* Better text selection */
|
|
::selection {
|
|
background: var(--primary-100);
|
|
color: var(--primary-900);
|
|
}
|
|
|
|
/* ===== BUTTON SYSTEM ===== */
|
|
.btn-base {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-2);
|
|
font-family: var(--font-family);
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
white-space: nowrap;
|
|
user-select: none;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn-base:focus {
|
|
outline: 2px solid var(--primary-500);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.btn-base:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Button Sizes */
|
|
.btn-sm {
|
|
height: 2rem;
|
|
padding: 0 var(--space-3);
|
|
font-size: 0.875rem;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.btn-md {
|
|
height: 2.5rem;
|
|
padding: 0 var(--space-4);
|
|
font-size: 0.875rem;
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.btn-lg {
|
|
height: 3rem;
|
|
padding: 0 var(--space-6);
|
|
font-size: 1rem;
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.btn-xl {
|
|
height: 3.5rem;
|
|
padding: 0 var(--space-8);
|
|
font-size: 1.125rem;
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
/* Button Variants */
|
|
.btn-primary {
|
|
background: var(--primary-500);
|
|
color: white;
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--primary-500);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--primary-600);
|
|
border-color: var(--primary-600);
|
|
box-shadow: var(--shadow-md);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-primary:active {
|
|
background: var(--primary-700);
|
|
transform: translateY(0);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--gray-100);
|
|
color: var(--gray-900);
|
|
border-color: var(--gray-200);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--gray-200);
|
|
border-color: var(--gray-300);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-outline {
|
|
background: transparent;
|
|
color: var(--primary-500);
|
|
border-color: var(--primary-500);
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
background: var(--primary-50);
|
|
color: var(--primary-600);
|
|
border-color: var(--primary-600);
|
|
}
|
|
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--gray-600);
|
|
}
|
|
|
|
.btn-ghost:hover {
|
|
background: var(--gray-100);
|
|
color: var(--gray-900);
|
|
}
|
|
|
|
/* Dark theme variants */
|
|
.btn-dark {
|
|
background: var(--gray-800);
|
|
color: white;
|
|
}
|
|
|
|
.btn-dark:hover {
|
|
background: var(--gray-900);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
/* Legacy Button Support */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 2.5rem;
|
|
padding: 0 var(--space-4);
|
|
font-size: 0.875rem;
|
|
border-radius: var(--radius-md);
|
|
font-family: var(--font-family);
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
/* ===== LINK SYSTEM ===== */
|
|
.link {
|
|
color: var(--primary-500);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: all var(--transition-fast);
|
|
position: relative;
|
|
}
|
|
|
|
.link:hover {
|
|
color: var(--primary-600);
|
|
}
|
|
|
|
.link:focus {
|
|
outline: 2px solid var(--primary-500);
|
|
outline-offset: 2px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
/* Link with underline animation */
|
|
.link-underline {
|
|
position: relative;
|
|
}
|
|
|
|
.link-underline::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
width: 0;
|
|
height: 2px;
|
|
background: var(--primary-500);
|
|
transition: width var(--transition-normal);
|
|
}
|
|
|
|
.link-underline:hover::after {
|
|
width: 100%;
|
|
}
|
|
|
|
/* External link with icon */
|
|
.link-external::after {
|
|
content: '↗';
|
|
margin-left: var(--space-1);
|
|
font-size: 0.75em;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Muted links */
|
|
.link-muted {
|
|
color: var(--gray-500);
|
|
}
|
|
|
|
.link-muted:hover {
|
|
color: var(--gray-700);
|
|
}
|
|
|
|
/* Dark theme links */
|
|
.link-dark {
|
|
color: var(--gray-300);
|
|
}
|
|
|
|
.link-dark:hover {
|
|
color: white;
|
|
}
|
|
|
|
/* ===== CONTAINER SYSTEM ===== */
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 var(--space-4);
|
|
}
|
|
|
|
.container-sm {
|
|
max-width: 640px;
|
|
}
|
|
|
|
.container-md {
|
|
max-width: 768px;
|
|
}
|
|
|
|
.container-lg {
|
|
max-width: 1024px;
|
|
}
|
|
|
|
.container-xl {
|
|
max-width: 1280px;
|
|
}
|
|
|
|
.container-2xl {
|
|
max-width: 1536px;
|
|
}
|
|
|
|
/* ===== FORM SYSTEM ===== */
|
|
.input {
|
|
width: 100%;
|
|
height: 2.5rem;
|
|
padding: 0 var(--space-3);
|
|
font-family: var(--font-family);
|
|
font-size: 0.875rem;
|
|
background: white;
|
|
border: 1px solid var(--gray-300);
|
|
border-radius: var(--radius-md);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.input:focus {
|
|
outline: none;
|
|
border-color: var(--primary-500);
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
.input:disabled {
|
|
background: var(--gray-100);
|
|
color: var(--gray-400);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.input-error {
|
|
border-color: var(--error);
|
|
}
|
|
|
|
.input-error:focus {
|
|
border-color: var(--error);
|
|
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
|
|
}
|
|
|
|
.textarea {
|
|
min-height: 6rem;
|
|
padding: var(--space-3);
|
|
resize: vertical;
|
|
}
|
|
|
|
.select {
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
|
|
background-position: right 0.5rem center;
|
|
background-repeat: no-repeat;
|
|
background-size: 1.5em 1.5em;
|
|
padding-right: 2.5rem;
|
|
}
|
|
|
|
/* Form groups */
|
|
.form-group {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.label {
|
|
display: block;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: var(--gray-700);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.help-text {
|
|
font-size: 0.75rem;
|
|
color: var(--gray-500);
|
|
margin-top: var(--space-1);
|
|
}
|
|
|
|
.error-text {
|
|
font-size: 0.75rem;
|
|
color: var(--error);
|
|
margin-top: var(--space-1);
|
|
}
|
|
|
|
/* ===== TYPOGRAPHY SYSTEM ===== */
|
|
.text-xs { font-size: 0.75rem; line-height: 1rem; }
|
|
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
|
|
.text-base { font-size: 1rem; line-height: 1.5rem; }
|
|
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
|
|
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
|
|
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
|
|
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
|
|
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
|
|
.text-5xl { font-size: 3rem; line-height: 1; }
|
|
.text-6xl { font-size: 3.75rem; line-height: 1; }
|
|
|
|
/* Font weights */
|
|
.font-thin { font-weight: 100; }
|
|
.font-light { font-weight: 300; }
|
|
.font-normal { font-weight: 400; }
|
|
.font-medium { font-weight: 500; }
|
|
.font-semibold { font-weight: 600; }
|
|
.font-bold { font-weight: 700; }
|
|
.font-extrabold { font-weight: 800; }
|
|
.font-black { font-weight: 900; }
|
|
|
|
/* Text colors */
|
|
.text-primary { color: var(--primary-500); }
|
|
.text-secondary { color: var(--gray-600); }
|
|
.text-muted { color: var(--gray-400); }
|
|
.text-success { color: var(--success); }
|
|
.text-warning { color: var(--warning); }
|
|
.text-error { color: var(--error); }
|
|
.text-white { color: white; }
|
|
.text-black { color: var(--gray-900); }
|
|
|
|
/* Headings */
|
|
.heading {
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
color: var(--gray-900);
|
|
margin: 0;
|
|
}
|
|
|
|
.h1 {
|
|
font-size: 2.25rem;
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.h2 {
|
|
font-size: 1.875rem;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.h3 {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.h4 {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.h5 {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.h6 {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ===== UTILITY CLASSES ===== */
|
|
/* Spacing utilities */
|
|
.m-0 { margin: 0; }
|
|
.m-1 { margin: var(--space-1); }
|
|
.m-2 { margin: var(--space-2); }
|
|
.m-3 { margin: var(--space-3); }
|
|
.m-4 { margin: var(--space-4); }
|
|
.m-6 { margin: var(--space-6); }
|
|
.m-8 { margin: var(--space-8); }
|
|
|
|
.p-0 { padding: 0; }
|
|
.p-1 { padding: var(--space-1); }
|
|
.p-2 { padding: var(--space-2); }
|
|
.p-3 { padding: var(--space-3); }
|
|
.p-4 { padding: var(--space-4); }
|
|
.p-6 { padding: var(--space-6); }
|
|
.p-8 { padding: var(--space-8); }
|
|
|
|
/* Flexbox utilities */
|
|
.flex { display: flex; }
|
|
.inline-flex { display: inline-flex; }
|
|
.flex-col { flex-direction: column; }
|
|
.flex-row { flex-direction: row; }
|
|
.items-center { align-items: center; }
|
|
.items-start { align-items: flex-start; }
|
|
.items-end { align-items: flex-end; }
|
|
.justify-center { justify-content: center; }
|
|
.justify-between { justify-content: space-between; }
|
|
.justify-start { justify-content: flex-start; }
|
|
.justify-end { justify-content: flex-end; }
|
|
.flex-1 { flex: 1; }
|
|
.flex-auto { flex: auto; }
|
|
.flex-none { flex: none; }
|
|
|
|
/* Grid utilities */
|
|
.grid { display: grid; }
|
|
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
|
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
.gap-1 { gap: var(--space-1); }
|
|
.gap-2 { gap: var(--space-2); }
|
|
.gap-3 { gap: var(--space-3); }
|
|
.gap-4 { gap: var(--space-4); }
|
|
.gap-6 { gap: var(--space-6); }
|
|
.gap-8 { gap: var(--space-8); }
|
|
|
|
/* Border utilities */
|
|
.border { border: 1px solid var(--gray-200); }
|
|
.border-t { border-top: 1px solid var(--gray-200); }
|
|
.border-b { border-bottom: 1px solid var(--gray-200); }
|
|
.border-l { border-left: 1px solid var(--gray-200); }
|
|
.border-r { border-right: 1px solid var(--gray-200); }
|
|
.border-none { border: none; }
|
|
|
|
.rounded { border-radius: var(--radius-md); }
|
|
.rounded-sm { border-radius: var(--radius-sm); }
|
|
.rounded-lg { border-radius: var(--radius-lg); }
|
|
.rounded-xl { border-radius: var(--radius-xl); }
|
|
.rounded-full { border-radius: 9999px; }
|
|
|
|
/* Background utilities */
|
|
.bg-white { background-color: white; }
|
|
.bg-gray-50 { background-color: var(--gray-50); }
|
|
.bg-gray-100 { background-color: var(--gray-100); }
|
|
.bg-primary { background-color: var(--primary-500); }
|
|
.bg-transparent { background-color: transparent; }
|
|
|
|
/* ===== RESPONSIVE BREAKPOINTS ===== */
|
|
@media (max-width: 640px) {
|
|
.container { padding: 0 var(--space-4); }
|
|
.text-4xl { font-size: 1.875rem; line-height: 2.25rem; }
|
|
.text-3xl { font-size: 1.5rem; line-height: 2rem; }
|
|
.btn-xl { height: 3rem; padding: 0 var(--space-6); font-size: 1rem; }
|
|
.btn-lg { height: 2.5rem; padding: 0 var(--space-5); font-size: 0.875rem; }
|
|
.grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.grid-cols-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
|
.grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container { padding: 0 var(--space-5); }
|
|
.grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.container { padding: 0 var(--space-6); }
|
|
}
|
|
|
|
/* ===== COMPONENT STATES ===== */
|
|
.loading {
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
cursor: wait;
|
|
}
|
|
|
|
.disabled {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.hidden {
|
|
display: 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;
|
|
}
|
|
.btn-primary {
|
|
background: var(--primary-500);
|
|
color: white;
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--primary-500);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--primary-600);
|
|
border-color: var(--primary-600);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--gray-100);
|
|
color: var(--gray-900);
|
|
border: 1px solid var(--gray-200);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--gray-200);
|
|
border-color: var(--gray-300);
|
|
transform: translateY(-1px);
|
|
}
|
|
.card-button {
|
|
background: var(--primary-500);
|
|
color: white;
|
|
border: 1px solid var(--primary-500);
|
|
padding: var(--space-3) var(--space-6);
|
|
border-radius: var(--radius-md);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
font-family: var(--font-family);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.card-button:hover {
|
|
background: var(--primary-600);
|
|
border-color: var(--primary-600);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
.learn-more-btn {
|
|
background: var(--primary-500);
|
|
color: white;
|
|
padding: var(--space-3) var(--space-6);
|
|
border-radius: var(--radius-md);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
font-family: var(--font-family);
|
|
transition: all var(--transition-fast);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--primary-500);
|
|
}
|
|
|
|
.learn-more-btn:hover {
|
|
background: var(--primary-600);
|
|
border-color: var(--primary-600);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.register-btn {
|
|
background: var(--primary-500);
|
|
color: white;
|
|
padding: var(--space-4) var(--space-8);
|
|
border-radius: var(--radius-lg);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
font-size: 1rem;
|
|
font-family: var(--font-family);
|
|
transition: all var(--transition-fast);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--primary-500);
|
|
}
|
|
|
|
.register-btn:hover {
|
|
background: var(--primary-600);
|
|
border-color: var(--primary-600);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-md);
|
|
color: white;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.featured-card .card-title {
|
|
color: #1e293b;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Card Descriptions - System Style */
|
|
.card-description {
|
|
font-size: 0.875rem;
|
|
color: var(--gray-600);
|
|
line-height: 1.5;
|
|
margin-bottom: var(--space-5);
|
|
flex-grow: 1;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 4;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
font-family: var(--font-family);
|
|
}
|
|
|
|
.featured-card .card-description {
|
|
color: #64748b;
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Card Buttons - CTG Style (Black) */
|
|
.card-button {
|
|
background: #333;
|
|
color: #fff;
|
|
border: none;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
text-align: center;
|
|
align-self: flex-start;
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.card-button:hover {
|
|
background: #1f2937;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
/* Featured card button - CTG black style */
|
|
.featured-card .card-button {
|
|
background: #1e293b;
|
|
color: #ffffff;
|
|
border: none;
|
|
font-weight: 600;
|
|
border-radius: 8px;
|
|
padding: 12px 24px;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.featured-card .card-button:hover {
|
|
background: #0f172a;
|
|
color: #ffffff;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(30, 41, 59, 0.4);
|
|
}
|
|
|
|
/* Pagination - CTG Exact Style */
|
|
.services-swiper .swiper-pagination {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 20px; /* Align to left like CTG */
|
|
width: auto;
|
|
text-align: left;
|
|
z-index: 10;
|
|
}
|
|
|
|
.services-swiper .swiper-pagination-bullet {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: rgba(255,255,255,0.3);
|
|
border-radius: 50%;
|
|
opacity: 1;
|
|
cursor: pointer;
|
|
margin: 0 4px;
|
|
transition: all 0.3s ease;
|
|
border: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Active pagination bullet - CTG style */
|
|
.services-swiper .swiper-pagination-bullet-active {
|
|
background: rgba(255,255,255,0.8);
|
|
transform: scale(1.2);
|
|
}
|
|
/* Certifications Section - CTG Style */
|
|
.certifications-section {
|
|
background: #23272e;
|
|
padding: 80px 0;
|
|
position: relative;
|
|
}
|
|
|
|
.certifications-section .section-title h2 {
|
|
color: #fff;
|
|
}
|
|
|
|
.certifications-section .section-desc {
|
|
color: #9ca3af;
|
|
}
|
|
|
|
/* Certifications section specific link colors */
|
|
.certifications-section a {
|
|
color: #60a5fa;
|
|
}
|
|
|
|
.certifications-section a:hover {
|
|
color: #93c5fd;
|
|
}
|
|
|
|
.certifications-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 24px;
|
|
margin-top: 48px;
|
|
}
|
|
|
|
.cert-card {
|
|
background: rgba(255,255,255,0.05);
|
|
border-radius: 12px;
|
|
padding: 32px 24px;
|
|
text-align: center;
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
|
|
transition: all 0.3s ease;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cert-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, #3b82f6, #1d4ed8);
|
|
transform: scaleX(0);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.cert-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
|
|
background: rgba(255,255,255,0.08);
|
|
border-color: rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.cert-card:hover::before {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.cert-image {
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 80px;
|
|
}
|
|
|
|
.cert-image img {
|
|
max-width: 100%;
|
|
max-height: 80px;
|
|
object-fit: contain;
|
|
filter: grayscale(0.3);
|
|
transition: filter 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cert-card:hover .cert-image img {
|
|
filter: grayscale(0);
|
|
}
|
|
|
|
.cert-content {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.cert-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
margin: 0;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.certifications-grid {
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 16px;
|
|
margin-top: 32px;
|
|
}
|
|
|
|
.cert-card {
|
|
padding: 24px 16px;
|
|
}
|
|
|
|
.cert-image {
|
|
height: 60px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.cert-image img {
|
|
max-height: 60px;
|
|
}
|
|
|
|
.cert-title {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
/* Data Center Section */
|
|
.datacenter-section {
|
|
background: #f8fafc;
|
|
padding: 80px 0;
|
|
}
|
|
.datacenter-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 60px;
|
|
}
|
|
.section-title {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
margin-bottom: 16px;
|
|
}
|
|
.section-subtitle {
|
|
font-size: 18px;
|
|
color: #6b7280;
|
|
margin-bottom: 24px;
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
line-height: 1.6;
|
|
}
|
|
.datacenter-content {
|
|
display: flex;
|
|
gap: 60px;
|
|
align-items: flex-start;
|
|
}
|
|
.datacenter-info {
|
|
flex: 1;
|
|
max-width: 500px;
|
|
}
|
|
.info-block {
|
|
margin-bottom: 40px;
|
|
}
|
|
.info-block h3 {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin-bottom: 16px;
|
|
}
|
|
.info-block p {
|
|
font-size: 16px;
|
|
color: #6b7280;
|
|
line-height: 1.6;
|
|
}
|
|
.features-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.features-list li {
|
|
font-size: 16px;
|
|
color: #6b7280;
|
|
margin-bottom: 12px;
|
|
padding-left: 20px;
|
|
position: relative;
|
|
}
|
|
.datacenter-map {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.datacenter-map img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
filter: drop-shadow(0 8px 32px rgba(0,0,0,0.2));
|
|
}
|
|
|
|
.services-features {
|
|
text-align: center;
|
|
margin-top: 60px;
|
|
margin-bottom: 60px;
|
|
}
|
|
.services-features .features-list {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
flex-wrap: nowrap;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.services-features .features-list li {
|
|
font-size: 16px;
|
|
color: #000000;
|
|
padding: 0;
|
|
position: relative;
|
|
}
|
|
.services-features .features-list li:before {
|
|
content: "✓";
|
|
color: var(--primary-color);
|
|
font-weight: bold;
|
|
margin-right: 8px;
|
|
}
|
|
.services-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 24px;
|
|
}
|
|
.service-item {
|
|
background: #23272e;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
.service-item:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
|
|
}
|
|
.service-icon {
|
|
margin-bottom: 16px;
|
|
}
|
|
.service-icon img {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
.service-item h3 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
margin: 0 0 12px 0;
|
|
}
|
|
.service-item p {
|
|
font-size: 14px;
|
|
color: #bfc4cc;
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Control Panel Section */
|
|
.control-panel-section {
|
|
background: #f8fafc;
|
|
padding: 80px 0;
|
|
}
|
|
.panel-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
.panel-content {
|
|
display: flex;
|
|
gap: 60px;
|
|
align-items: center;
|
|
}
|
|
.panel-info {
|
|
flex: 1;
|
|
max-width: 500px;
|
|
}
|
|
.panel-icon {
|
|
background: var(--primary-color);
|
|
color: #fff;
|
|
padding: 8px 16px;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
display: inline-block;
|
|
margin-bottom: 24px;
|
|
}
|
|
.panel-title {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
margin-bottom: 16px;
|
|
}
|
|
.panel-description {
|
|
font-size: 18px;
|
|
color: #6b7280;
|
|
margin-bottom: 40px;
|
|
line-height: 1.6;
|
|
}
|
|
.panel-features {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
.feature-item {
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
border: 1px solid rgba(0,0,0,0.1);
|
|
background: rgba(0,0,0,0.02);
|
|
}
|
|
.feature-item:hover,
|
|
.feature-item.active {
|
|
background: rgba(79, 70, 229, 0.1);
|
|
border-color: var(--primary-color);
|
|
}
|
|
.feature-item h3 {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin: 0 0 8px 0;
|
|
}
|
|
.feature-item p {
|
|
font-size: 14px;
|
|
color: #6b7280;
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
}
|
|
.panel-visual {
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
.panel-image {
|
|
display: none;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
|
|
}
|
|
.panel-image.active {
|
|
display: block;
|
|
}
|
|
.panel-image img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
|
|
|
|
/* ===== ANNOUNCEMENTS SECTION - CTG Style ===== */
|
|
.news {
|
|
background: #f8fafc;
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.news .section-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.news .section-title {
|
|
text-align: center;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.news .section-title h2 {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
margin: 0 0 16px 0;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.news .section-desc {
|
|
font-size: 18px;
|
|
color: #6b7280;
|
|
margin: 0;
|
|
}
|
|
|
|
.news-content {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 60px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.news-cont {
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
padding: 32px;
|
|
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
|
|
border: 1px solid rgba(0,0,0,0.04);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.news-cont:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 40px rgba(0,0,0,0.12);
|
|
}
|
|
|
|
.news-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
padding-bottom: 16px;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.news-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin: 0;
|
|
position: relative;
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.news-title::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 4px;
|
|
height: 20px;
|
|
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.news-more {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #6b7280;
|
|
font-size: 14px;
|
|
text-decoration: none;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.news-more:hover {
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.news-more a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.news-more .iconfont {
|
|
font-size: 12px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.news-more:hover .iconfont {
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.news-list {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* News Items */
|
|
.news-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
padding: 16px 0;
|
|
border-bottom: 1px solid #f3f4f6;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.news-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.news-item:hover {
|
|
background: #f9fafb;
|
|
margin: 0 -16px;
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.news-item-title {
|
|
flex: 1;
|
|
margin: 0 16px 0 0;
|
|
}
|
|
|
|
.news-item-title a {
|
|
color: #374151;
|
|
text-decoration: none;
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
font-weight: 500;
|
|
transition: color 0.3s ease;
|
|
display: block;
|
|
}
|
|
|
|
.news-item-title a:hover {
|
|
color: #1d4ed8; /* Darker blue for better contrast on white */
|
|
}
|
|
|
|
.news-item-date {
|
|
color: #9ca3af;
|
|
font-size: 13px;
|
|
white-space: nowrap;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Empty State */
|
|
.news-empty {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.news-empty-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin: 0 auto 16px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.news-empty-text {
|
|
font-size: 16px;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Loading State */
|
|
.news-loading {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.news-loading-spinner {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: 3px solid #f3f4f6;
|
|
border-top: 3px solid #3b82f6;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin: 0 auto 16px;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.news-loading-text {
|
|
font-size: 14px;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Hover Effects */
|
|
.news-cont:hover .news-title::before {
|
|
background: linear-gradient(135deg, #1d4ed8, #3b82f6);
|
|
}
|
|
|
|
.news-item:hover .news-item-title a {
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
/* ===== PARTNERS SECTION - CTG Style ===== */
|
|
.practice {
|
|
background: #23272e;
|
|
padding: 80px 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.practice .section-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.practice .section-title {
|
|
text-align: center;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.practice .section-title h2 {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
margin: 0 0 16px 0;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.practice .section-desc {
|
|
font-size: 18px;
|
|
color: #9ca3af;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Featured Partners Grid */
|
|
.practice-content {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
gap: 32px;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.practice-box {
|
|
background: rgba(255,255,255,0.05);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
border-radius: 16px;
|
|
padding: 32px;
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
backdrop-filter: blur(10px);
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
animation: fadeInUp 0.6s ease forwards;
|
|
}
|
|
|
|
/* Staggered animation for multiple boxes */
|
|
.practice-box:nth-child(1) { animation-delay: 0.1s; }
|
|
.practice-box:nth-child(2) { animation-delay: 0.2s; }
|
|
.practice-box:nth-child(3) { animation-delay: 0.3s; }
|
|
.practice-box:nth-child(4) { animation-delay: 0.4s; }
|
|
.practice-box:nth-child(5) { animation-delay: 0.5s; }
|
|
.practice-box:nth-child(6) { animation-delay: 0.6s; }
|
|
|
|
@keyframes fadeInUp {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.practice-box:hover {
|
|
transform: translateY(-8px);
|
|
background: rgba(255,255,255,0.08);
|
|
border-color: rgba(255,255,255,0.2);
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.practice-box img {
|
|
width: 120px;
|
|
height: 80px;
|
|
object-fit: contain;
|
|
margin-bottom: 24px;
|
|
filter: brightness(0.9) contrast(1.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.practice-box:hover img {
|
|
filter: brightness(1) contrast(1.2);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Special highlight effect for first partner */
|
|
.practice-box:first-child {
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
|
|
border-color: rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.practice-box:first-child:hover {
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.15));
|
|
border-color: rgba(59, 130, 246, 0.4);
|
|
}
|
|
|
|
.practice-box .partner-name {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
margin: 0 0 16px 0;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.practice-box .partner-description {
|
|
font-size: 14px;
|
|
color: #bfc4cc;
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Additional Partners Brand Strip */
|
|
.brand-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 40px;
|
|
padding: 40px 0;
|
|
border-top: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.brand-box {
|
|
opacity: 0.6;
|
|
transition: all 0.3s ease;
|
|
filter: grayscale(100%);
|
|
}
|
|
|
|
.brand-box:hover {
|
|
opacity: 1;
|
|
filter: grayscale(0%);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.brand-box img {
|
|
width: 100px;
|
|
height: 60px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
/* Background Pattern */
|
|
.practice::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Empty State */
|
|
.partners-empty {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.partners-empty-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin: 0 auto 24px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.partners-empty-text {
|
|
font-size: 18px;
|
|
margin: 0 0 8px 0;
|
|
color: #bfc4cc;
|
|
}
|
|
|
|
.partners-empty-desc {
|
|
font-size: 14px;
|
|
margin: 0;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.practice-box img[src=""] {
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: -200% 0;
|
|
}
|
|
100% {
|
|
background-position: 200% 0;
|
|
}
|
|
}
|
|
|
|
/* Customer Reviews Section */
|
|
.reviews-section {
|
|
background: #23272e;
|
|
padding: 80px 0;
|
|
}
|
|
.reviews-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
.reviews-swiper {
|
|
overflow: hidden;
|
|
}
|
|
.review-item {
|
|
background: #181a20;
|
|
border-radius: 12px;
|
|
padding: 32px;
|
|
text-align: center;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
.review-text {
|
|
font-size: 18px;
|
|
color: #fff;
|
|
line-height: 1.6;
|
|
margin-bottom: 24px;
|
|
font-style: italic;
|
|
}
|
|
.reviewer-info {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
}
|
|
.reviewer-avatar {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
.reviewer-details h4 {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
margin: 0 0 4px 0;
|
|
}
|
|
.reviewer-details p {
|
|
font-size: 14px;
|
|
color: #bfc4cc;
|
|
margin: 0;
|
|
}
|
|
.reviews-swiper .swiper-pagination {
|
|
bottom: -40px;
|
|
text-align: center;
|
|
}
|
|
.reviews-swiper .swiper-pagination-bullet {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #666;
|
|
opacity: 0.3;
|
|
border-radius: 50%;
|
|
margin: 0 4px;
|
|
transition: all 0.3s;
|
|
}
|
|
.reviews-swiper .swiper-pagination-bullet-active {
|
|
background: var(--primary-color);
|
|
opacity: 1;
|
|
transform: scale(1.3);
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 1200px) {
|
|
.hero-container,
|
|
.datacenter-content,
|
|
.panel-content {
|
|
flex-direction: column;
|
|
gap: 40px;
|
|
}
|
|
.hero-visual,
|
|
.datacenter-map,
|
|
.panel-visual {
|
|
order: -1;
|
|
}
|
|
.services-features .features-list {
|
|
gap: 20px;
|
|
}
|
|
|
|
/* Announcements responsive */
|
|
.news-content {
|
|
gap: 40px;
|
|
}
|
|
|
|
.news .section-title h2 {
|
|
font-size: 32px;
|
|
}
|
|
|
|
/* Partners responsive */
|
|
.practice .section-title h2 {
|
|
font-size: 32px;
|
|
}
|
|
|
|
.practice-content {
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 24px;
|
|
}
|
|
|
|
.practice-box {
|
|
padding: 24px;
|
|
}
|
|
|
|
.brand-group {
|
|
gap: 32px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hero-section {
|
|
min-height: auto;
|
|
padding: 60px 0 40px 0;
|
|
}
|
|
|
|
.hero-container {
|
|
flex-direction: column;
|
|
gap: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-content {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 36px;
|
|
}
|
|
.hero-subtitle {
|
|
font-size: 28px;
|
|
}
|
|
.hero-actions {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 12px;
|
|
}
|
|
|
|
.hero-btn {
|
|
justify-content: center;
|
|
min-width: auto;
|
|
width: 100%;
|
|
padding: 14px 24px;
|
|
}
|
|
|
|
.hero-visual {
|
|
min-width: auto;
|
|
}
|
|
|
|
.hero-3d-graphic {
|
|
height: 300px;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.hero-main-image {
|
|
width: 300px;
|
|
}
|
|
|
|
.btn {
|
|
justify-content: center;
|
|
}
|
|
.section-title {
|
|
font-size: 28px;
|
|
}
|
|
.services-title,
|
|
.panel-title {
|
|
font-size: 28px;
|
|
}
|
|
.services-features .features-list {
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
.services-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
|
|
/* Announcements mobile */
|
|
.news {
|
|
padding: 60px 0;
|
|
}
|
|
|
|
.news .section-content {
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.news .section-title {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.news .section-title h2 {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.news-content {
|
|
grid-template-columns: 1fr;
|
|
gap: 32px;
|
|
}
|
|
|
|
.news-cont {
|
|
padding: 24px;
|
|
}
|
|
|
|
.news-title {
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* Partners mobile */
|
|
.practice {
|
|
padding: 60px 0;
|
|
}
|
|
|
|
.practice .section-content {
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.practice .section-title {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.practice .section-title h2 {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.practice-content {
|
|
grid-template-columns: 1fr;
|
|
gap: 24px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.practice-box {
|
|
padding: 24px 20px;
|
|
}
|
|
|
|
.practice-box img {
|
|
width: 100px;
|
|
height: 60px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.practice-box .partner-name {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.brand-group {
|
|
gap: 24px;
|
|
padding: 32px 0;
|
|
}
|
|
|
|
.brand-box img {
|
|
width: 80px;
|
|
height: 48px;
|
|
}
|
|
.hero-services .services-swiper .swiper-slide:first-child {
|
|
min-width: 320px;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.hero-services .services-swiper .swiper-slide:not(:first-child) {
|
|
min-width: 280px;
|
|
max-width: 300px;
|
|
}
|
|
|
|
/* Hero services mobile adjustments */
|
|
.hero-services {
|
|
margin-top: 20px;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.service-card {
|
|
padding: 20px 16px;
|
|
height: 220px; /* Reduced height for mobile */
|
|
}
|
|
|
|
.featured-card .card-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
}
|
|
|
|
.featured-card .card-content {
|
|
padding-right: 100px; /* Reduced space for mobile */
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.card-server-image {
|
|
width: 90px;
|
|
height: 60px;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.featured-card .card-title {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.card-description {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.hero-container,
|
|
.datacenter-container,
|
|
.services-container,
|
|
.panel-container,
|
|
.reviews-container {
|
|
padding: 0 16px;
|
|
}
|
|
|
|
/* Hero small screen adjustments */
|
|
.hero-title {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.hero-description {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.hero-3d-graphic {
|
|
height: 250px;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.hero-main-image {
|
|
width: 250px;
|
|
}
|
|
|
|
.hero-btn {
|
|
padding: 12px 20px;
|
|
font-size: 14px;
|
|
min-width: 120px;
|
|
}
|
|
|
|
|
|
|
|
/* Announcements small screens */
|
|
.news {
|
|
padding: 40px 0;
|
|
}
|
|
|
|
.news .section-content {
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.news .section-title h2 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.news .section-desc {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.news-content {
|
|
gap: 24px;
|
|
}
|
|
|
|
.news-cont {
|
|
padding: 20px;
|
|
}
|
|
|
|
.news-title {
|
|
font-size: 16px;
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.news-title::before {
|
|
width: 3px;
|
|
height: 16px;
|
|
}
|
|
|
|
.news-item-title a {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.news-item-date {
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Partners small screens */
|
|
.practice {
|
|
padding: 40px 0;
|
|
}
|
|
|
|
.practice .section-content {
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.practice .section-title h2 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.practice .section-desc {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.practice-content {
|
|
gap: 20px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.practice-box {
|
|
padding: 20px 16px;
|
|
}
|
|
|
|
.practice-box img {
|
|
width: 80px;
|
|
height: 48px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.practice-box .partner-name {
|
|
font-size: 16px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.practice-box .partner-description {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.brand-group {
|
|
gap: 20px;
|
|
padding: 24px 0;
|
|
}
|
|
|
|
.brand-box img {
|
|
width: 70px;
|
|
height: 42px;
|
|
}
|
|
.hero-services .services-swiper .swiper-slide {
|
|
min-width: 260px;
|
|
max-width: 280px;
|
|
}
|
|
|
|
.hero-services .services-swiper .swiper-slide:first-child {
|
|
min-width: 280px;
|
|
max-width: 300px;
|
|
}
|
|
|
|
/* Small screen hero services adjustments */
|
|
.hero-services {
|
|
margin-top: 15px;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.service-card {
|
|
padding: 18px 14px;
|
|
height: 200px; /* Reduced height for small screens */
|
|
}
|
|
|
|
.featured-card .card-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
.card-icon img,
|
|
.card-icon svg {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.featured-card .card-icon img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.featured-card .card-content {
|
|
padding-right: 80px; /* Further reduced for small screens */
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.card-server-image {
|
|
width: 70px;
|
|
height: 45px;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.featured-card .card-title {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.card-description {
|
|
font-size: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.card-button {
|
|
padding: 10px 20px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
|
|
/* Ensure button-like links never show underline on hover/focus/active */
|
|
.hero-btn:hover,
|
|
.hero-btn:focus,
|
|
.hero-btn:active,
|
|
.register-btn:hover,
|
|
.register-btn:focus,
|
|
.register-btn:active,
|
|
.learn-more-btn:hover,
|
|
.learn-more-btn:focus,
|
|
.learn-more-btn:active,
|
|
.card-button:hover,
|
|
.card-button:focus,
|
|
.card-button:active,
|
|
.btn:hover,
|
|
.btn-base:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* ===== CTG exact style override for Hero services cards ===== */
|
|
/* Scope strictly to the hero services slider to avoid side effects elsewhere */
|
|
.hero-services .service-card {
|
|
background: #2a2f38; /* CTG dark card */
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
color: #e5e7eb;
|
|
position: relative;
|
|
}
|
|
.hero-services .service-card:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
|
|
border-color: rgba(255, 255, 255, 0.12);
|
|
}
|
|
.hero-services .service-card .card-content {
|
|
padding-right: 96px; /* leave space for bottom-right icon */
|
|
padding-bottom: 28px;
|
|
}
|
|
.hero-services .service-card .card-title {
|
|
color: #f3f4f6; /* bright title */
|
|
font-weight: 600;
|
|
}
|
|
.hero-services .service-card .card-description {
|
|
color: #cbd5e1;
|
|
}
|
|
/* Icon container bottom-right (CTG) */
|
|
.hero-services .service-card .card-icon {
|
|
position: absolute !important;
|
|
bottom: 18px;
|
|
right: 18px;
|
|
width: 56px;
|
|
height: 56px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border-radius: 12px;
|
|
margin: 0; /* cancel generic spacing */
|
|
opacity: 0.9;
|
|
}
|
|
.hero-services .service-card .card-icon svg {
|
|
width: 28px;
|
|
height: 28px;
|
|
fill: #9aa4b2;
|
|
}
|
|
.hero-services .service-card:hover .card-icon {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
.hero-services .service-card:hover .card-icon svg {
|
|
fill: #d1d5db;
|
|
}
|
|
/* Featured (Physical Server) stays light-blue; ensure contrast vs dark cards */
|
|
.hero-services .featured-card {
|
|
background: linear-gradient(135deg, #e0f2fe 0%, #b3e5fc 100%);
|
|
border: 1px solid rgba(59, 130, 246, 0.24);
|
|
}
|
|
.hero-services .featured-card .card-title { color: #0f172a; }
|
|
.hero-services .featured-card .card-description { color: #334155; }
|
|
.hero-services .featured-card .card-button {
|
|
background: #0f172a;
|
|
color: #fff;
|
|
}
|
|
.hero-services .featured-card .card-button:hover { background: #0b1220; }
|
|
/* Pagination bullets: lighten to match CTG visual density on dark bg */
|
|
.hero-services .services-swiper .swiper-pagination-bullet {
|
|
background: rgba(255, 255, 255, 0.35);
|
|
}
|
|
.hero-services .services-swiper .swiper-pagination-bullet-active {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
}
|