:root {
--st-primary: #00ff9d;
--st-primary-rgb: 0, 255, 157;
--st-primary-dark: #00cc7d;
--st-primary-light: #33ffac;
--st-primary-darker: #00995f;
--st-primary-lighter: #66ffbc;
--st-green-neon: #00ff41;
--st-green-bright: #7fff00;
--st-green-forest: #228b22;
--st-green-emerald: #50c878;
--st-secondary: #8b5cf6;
--st-secondary-rgb: 139, 92, 246;
--st-secondary-dark: #6b5b95;
--st-secondary-light: #a78bfa;
--st-preview-bg: #ffb703;
--st-preview-bg-dark: #d68f00;
--st-preview-rgb: 255, 183, 3;
--st-preview-text: #1a1200;
--st-black: #000000;
--st-dark: #0a0a0a;
--st-dark-card: #111111;
--st-dark-surface: #1a1a1a;
--st-dark-elevated: #2d2d2d;
--st-white: #ffffff;
--st-light: #f8f9fa;
--st-light-gray: #e2e8f0;
--st-light-surface: #f7fafc;
--st-text-primary: #ffffff;
--st-text-secondary: #a0a0a0;
--st-text-muted: #666666;
--st-text-accent: #f0f6fc;
--st-text-dark: #1a202c;
--st-gradient-primary: linear-gradient(135deg, var(--st-primary) 0%, var(--st-primary-dark) 100%);
--st-gradient-primary-soft: linear-gradient(135deg, rgba(0, 255, 157, 0.1) 0%, rgba(0, 204, 125, 0.2) 100%);
--st-gradient-primary-intense: linear-gradient(135deg, var(--st-green-neon) 0%, var(--st-primary) 50%, var(--st-primary-light) 100%);
--st-gradient-dark: linear-gradient(135deg, var(--st-dark) 0%, var(--st-dark-elevated) 100%);
--st-gradient-dark-card: linear-gradient(135deg, var(--st-dark-card) 0%, var(--st-dark-surface) 100%);
--st-gradient-black: linear-gradient(135deg, var(--st-black) 0%, var(--st-dark) 50%, var(--st-dark-surface) 100%);
--st-gradient-secondary: linear-gradient(135deg, var(--st-secondary) 0%, var(--st-secondary-dark) 100%);
--st-gradient-hero: linear-gradient(135deg, var(--st-primary) 0%, var(--st-primary-dark) 25%, var(--st-primary-light) 50%, var(--st-green-neon) 100%);
--st-gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
--st-gradient-glass-dark: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
--st-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
--st-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
--st-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.2);
--st-shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.3);
--st-shadow-xl: 0 32px 128px rgba(0, 0, 0, 0.4);
--st-shadow-primary: 0 4px 6px rgba(0, 255, 157, 0.1);
--st-shadow-primary-lg: 0 10px 25px rgba(0, 255, 157, 0.15);
--st-shadow-glow: 0 0 40px rgba(0, 255, 157, 0.4);
--st-shadow-neon: 0 0 60px rgba(0, 255, 65, 0.5);
--st-shadow-intense: 0 0 80px rgba(0, 255, 136, 0.6);
--st-radius-xs: 4px;
--st-radius-sm: 8px;
--st-radius-md: 16px;
--st-radius-lg: 24px;
--st-radius-xl: 32px;
--st-radius-full: 50%;
--st-radius-button: 30px;  
--st-space-xs: 0.25rem;    
--st-space-sm: 0.5rem;     
--st-space-md: 1rem;       
--st-space-lg: 1.5rem;     
--st-space-xl: 2rem;       
--st-space-2xl: 3rem;      
--st-space-3xl: 4rem;      
--st-font-primary: 'Montserrat', sans-serif;
--st-font-secondary: 'Roboto', sans-serif;
--st-font-mono: 'Fira Code', 'Cascadia Code', monospace;
--st-font-light: 300;
--st-font-regular: 400;
--st-font-medium: 500;
--st-font-semibold: 600;
--st-font-bold: 700;
--st-font-black: 900;
--st-text-xs: 0.75rem;     
--st-text-sm: 0.875rem;    
--st-text-base: 1rem;      
--st-text-lg: 1.125rem;    
--st-text-xl: 1.25rem;     
--st-text-2xl: 1.5rem;     
--st-text-3xl: 1.875rem;   
--st-text-4xl: 2.25rem;    
--st-text-5xl: 3rem;       
--st-leading-tight: 1.25;
--st-leading-normal: 1.5;
--st-leading-relaxed: 1.75;
--st-transition-fast: 0.15s ease-out;
--st-transition-normal: 0.3s ease-out;
--st-transition-slow: 0.5s ease-out;
--st-transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
--st-z-dropdown: 1000;
--st-z-sticky: 1020;
--st-z-fixed: 1030;
--st-z-modal-backdrop: 1040;
--st-z-modal: 1050;
--st-z-popover: 1060;
--st-z-tooltip: 1070;
--st-z-max: 9999;
--st-chat-bg: var(--st-dark-card);
--st-chat-header-bg: var(--st-gradient-dark);
--st-chat-message-bg: var(--st-dark-surface);
--st-chat-border: rgba(0, 255, 157, 0.2);
--st-card-bg: var(--st-dark-card);
--st-card-border: rgba(255, 255, 255, 0.1);
--st-card-hover-shadow: var(--st-shadow-primary-lg);
--st-btn-primary-bg: var(--st-primary);
--st-btn-primary-color: var(--st-black);
--st-btn-primary-hover-bg: var(--st-primary-light);
--st-btn-radius: var(--st-radius-button);
--st-nav-bg: var(--st-gradient-dark);
--st-nav-link-color: rgba(255, 255, 255, 0.9);
--st-nav-link-hover-color: var(--st-primary);
--st-portfolio-card-bg: var(--st-gradient-dark-card);
--st-portfolio-overlay: rgba(0, 0, 0, 0.8);
--st-service-card-bg: var(--st-dark-surface);
--st-service-icon-bg: var(--st-gradient-primary);
--st-blog-card-bg: var(--st-dark-card);
--st-blog-meta-color: var(--st-text-muted);
}
.st-debug-vars::before {
content: "StChannel CSS Variables Loaded ✓";
position: fixed;
top: 0;
right: 0;
background: var(--st-primary);
color: var(--st-black);
padding: var(--st-space-xs) var(--st-space-sm);
font-size: var(--st-text-xs);
z-index: var(--st-z-max);
opacity: 0;
animation: debug-flash 2s ease-out;
}
@keyframes debug-flash {
0%, 90% { opacity: 0; }
10%, 80% { opacity: 1; }
}
:root {
--bs-primary: var(--st-primary);
--bs-primary-rgb: var(--st-primary-rgb);
--stchannel-primary: var(--st-primary);
--stchannel-primary-dark: var(--st-primary-dark);
--stchannel-primary-light: var(--st-primary-light);
--stchannel-primary-rgb: var(--st-primary-rgb);
--stchannel-gradient-primary: var(--st-gradient-primary);
--stchannel-gradient-dark: var(--st-gradient-dark);
--stchannel-gradient-hero: var(--st-gradient-hero);
--stchannel-dark: var(--st-dark-surface);
--stchannel-light: var(--st-white);
--stchannel-gray: var(--st-text-muted);
--stchannel-gray-light: var(--st-light-gray);
--stchannel-shadow: var(--st-shadow-primary);
--stchannel-shadow-lg: var(--st-shadow-primary-lg);
--primary-green: var(--st-primary);
--secondary-green: var(--st-primary-dark);
--accent-green: var(--st-primary-light);
--dark-green: var(--st-primary-darker);
--neon-green: var(--st-green-neon);
--bright-green: var(--st-green-bright);
--bg-primary: var(--st-black);
--bg-secondary: var(--st-dark);
--bg-card: var(--st-dark-card);
--bg-surface: var(--st-dark-surface);
--text-primary: var(--st-text-primary);
--text-secondary: var(--st-text-secondary);
--text-accent: var(--st-text-accent);
--text-muted: var(--st-text-muted);
--service-primary: var(--st-primary);
--service-secondary: var(--st-secondary);
--service-light: var(--st-light-gray);
--portfolio-primary-color: var(--st-primary);
--portfolio-primary-rgb: var(--st-primary-rgb);
--portfolio-bg-color: var(--st-dark-card);
--card-gradient-start: var(--st-primary);
--card-gradient-end: #ff4757;
}
:root, [data-bs-theme=light] {
--bs-primary: var(--st-primary);
--bs-primary-rgb: var(--st-primary-rgb);
--bs-primary-text-emphasis: var(--st-primary-darker);
--bs-primary-bg-subtle: rgba(var(--st-primary-rgb), 0.1);
--bs-primary-border-subtle: rgba(var(--st-primary-rgb), 0.3);
--bs-secondary: var(--st-secondary);
--bs-secondary-rgb: var(--st-secondary-rgb);
--bs-light: var(--st-white);
--bs-light-rgb: 255, 255, 255;
--bs-light-text-emphasis: var(--st-text-muted);
--bs-light-bg-subtle: var(--st-white);
--bs-light-border-subtle: var(--st-white);
--bs-dark: var(--st-dark-surface);
--bs-dark-rgb: 26, 26, 26;
--bs-body-font-family: var(--st-font-primary);
--bs-font-sans-serif: var(--st-font-primary);
--bs-border-radius: var(--st-radius-sm);
--bs-border-radius-sm: var(--st-radius-xs);
--bs-border-radius-lg: var(--st-radius-md);
--bs-border-radius-xl: var(--st-radius-lg);
--bs-border-radius-pill: var(--st-radius-full);
}
[data-bs-theme=dark] {
--bs-body-bg: var(--st-black);
--bs-body-color: var(--st-text-primary);
--bs-tertiary-bg: var(--st-dark-card);
--bs-border-color: rgba(255, 255, 255, 0.1);
}
.btn-primary {
--bs-btn-color: var(--st-btn-primary-color);
--bs-btn-bg: var(--st-btn-primary-bg);
--bs-btn-border-color: var(--st-btn-primary-bg);
--bs-btn-hover-color: var(--st-btn-primary-color);
--bs-btn-hover-bg: var(--st-btn-primary-hover-bg);
--bs-btn-hover-border-color: var(--st-btn-primary-hover-bg);
--bs-btn-focus-shadow-rgb: var(--st-primary-rgb);
--bs-btn-active-color: var(--st-btn-primary-color);
--bs-btn-active-bg: var(--st-primary-light);
--bs-btn-active-border-color: var(--st-primary-light);
--bs-btn-disabled-color: var(--st-btn-primary-color);
--bs-btn-disabled-bg: var(--st-primary);
--bs-btn-disabled-border-color: var(--st-primary);
border-radius: var(--st-btn-radius);
font-weight: var(--st-font-semibold);
transition: all var(--st-transition-normal);
box-shadow: var(--st-shadow-sm);
}
.btn-primary:hover {
box-shadow: var(--st-shadow-primary);
transform: translateY(-1px);
}
.btn-primary:active {
transform: translateY(0);
box-shadow: var(--st-shadow-xs);
}
.btn-outline-primary {
--bs-btn-color: var(--st-primary);
--bs-btn-border-color: var(--st-primary);
--bs-btn-focus-shadow-rgb: var(--st-primary-rgb);
--bs-btn-hover-color: var(--st-btn-primary-color);
--bs-btn-hover-bg: var(--st-primary);
--bs-btn-hover-border-color: var(--st-primary);
--bs-btn-active-color: var(--st-btn-primary-color);
--bs-btn-active-bg: var(--st-primary);
--bs-btn-active-border-color: var(--st-primary);
--bs-btn-disabled-color: var(--st-primary);
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: var(--st-primary);
border-radius: var(--st-btn-radius);
font-weight: var(--st-font-medium);
transition: all var(--st-transition-normal);
}
.btn-outline-primary:hover {
box-shadow: var(--st-shadow-primary);
transform: translateY(-1px);
}
.btn-light {
--bs-btn-color: var(--st-text-dark);
--bs-btn-bg: var(--st-white);
--bs-btn-border-color: var(--st-white);
--bs-btn-hover-color: var(--st-text-dark);
--bs-btn-hover-bg: var(--st-light-gray);
--bs-btn-hover-border-color: var(--st-light-gray);
--bs-btn-focus-shadow-rgb: 255, 255, 255;
--bs-btn-active-color: var(--st-text-dark);
--bs-btn-active-bg: var(--st-light-gray);
--bs-btn-active-border-color: var(--st-light-gray);
border-radius: var(--st-btn-radius);
font-weight: var(--st-font-medium);
transition: all var(--st-transition-normal);
}
.btn-dark {
--bs-btn-color: var(--st-white);
--bs-btn-bg: var(--st-dark-surface);
--bs-btn-border-color: var(--st-dark-surface);
--bs-btn-hover-color: var(--st-white);
--bs-btn-hover-bg: var(--st-dark-elevated);
--bs-btn-hover-border-color: var(--st-dark-elevated);
border-radius: var(--st-btn-radius);
font-weight: var(--st-font-medium);
transition: all var(--st-transition-normal);
}
.card {
background: var(--st-card-bg);
border: 1px solid var(--st-card-border);
border-radius: var(--st-radius-md);
transition: all var(--st-transition-normal);
box-shadow: var(--st-shadow-sm);
}
.card:hover {
box-shadow: var(--st-card-hover-shadow);
transform: translateY(-2px);
}
.card-header {
background: var(--st-gradient-dark);
border-bottom: 1px solid var(--st-card-border);
color: var(--st-text-primary);
}
.card-body {
color: var(--st-text-primary);
}
.card-footer {
background: var(--st-dark-surface);
border-top: 1px solid var(--st-card-border);
color: var(--st-text-secondary);
}
.form-control {
background-color: var(--st-dark-card);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--st-text-primary);
border-radius: var(--st-radius-sm);
transition: all var(--st-transition-fast);
}
.form-control:focus {
background-color: var(--st-dark-surface);
border-color: var(--st-primary);
box-shadow: 0 0 0 0.2rem rgba(var(--st-primary-rgb), 0.25);
}
.form-control::placeholder {
color: var(--st-text-muted);
}
.form-select {
background-color: var(--st-dark-card);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--st-text-primary);
border-radius: var(--st-radius-sm);
}
.form-select:focus {
border-color: var(--st-primary);
box-shadow: 0 0 0 0.2rem rgba(var(--st-primary-rgb), 0.25);
}
.navbar {
background: var(--st-nav-bg) !important;
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--st-chat-border);
}
.navbar-brand {
color: var(--st-text-primary) !important;
font-weight: var(--st-font-bold);
}
.navbar-nav .nav-link {
color: var(--st-nav-link-color) !important;
font-weight: var(--st-font-medium);
transition: all var(--st-transition-fast);
border-radius: var(--st-radius-sm);
margin: 0 var(--st-space-xs);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
color: var(--st-nav-link-hover-color) !important;
background-color: rgba(var(--st-primary-rgb), 0.1);
}
.navbar-nav .nav-link.active {
color: var(--st-primary) !important;
font-weight: var(--st-font-bold);
}
.navbar-toggler {
border-color: var(--st-primary);
color: var(--st-primary);
}
.navbar-toggler:focus {
box-shadow: 0 0 0 0.2rem rgba(var(--st-primary-rgb), 0.25);
}
.modal-content {
background-color: var(--st-dark-card);
border: 1px solid var(--st-card-border);
border-radius: var(--st-radius-lg);
color: var(--st-text-primary);
}
.modal-header {
border-bottom: 1px solid var(--st-card-border);
}
.modal-footer {
border-top: 1px solid var(--st-card-border);
}
.modal-backdrop {
background-color: var(--st-black);
}
.alert-primary {
color: var(--st-primary-darker);
background-color: rgba(var(--st-primary-rgb), 0.1);
border-color: rgba(var(--st-primary-rgb), 0.3);
}
.alert-dark {
color: var(--st-text-primary);
background-color: var(--st-dark-surface);
border-color: var(--st-card-border);
}
.dropdown-menu {
background-color: var(--st-dark-card);
border: 1px solid var(--st-card-border);
border-radius: var(--st-radius-md);
box-shadow: var(--st-shadow-lg);
}
.dropdown-item {
color: var(--st-text-primary);
transition: all var(--st-transition-fast);
}
.dropdown-item:hover,
.dropdown-item:focus {
color: var(--st-primary);
background-color: rgba(var(--st-primary-rgb), 0.1);
}
.dropdown-divider {
border-top: 1px solid var(--st-card-border);
}
.badge {
border-radius: var(--st-radius-full);
}
.badge.bg-primary {
background-color: var(--st-primary) !important;
color: var(--st-black) !important;
}
.progress {
background-color: var(--st-dark-surface);
border-radius: var(--st-radius-full);
}
.progress-bar {
background: var(--st-gradient-primary);
}
.tooltip-inner {
background-color: var(--st-dark-elevated);
color: var(--st-text-primary);
border-radius: var(--st-radius-sm);
}
.popover {
background-color: var(--st-dark-card);
border: 1px solid var(--st-card-border);
border-radius: var(--st-radius-md);
}
.popover-header {
background-color: var(--st-dark-surface);
border-bottom: 1px solid var(--st-card-border);
color: var(--st-text-primary);
}
.popover-body {
color: var(--st-text-primary);
}
.text-st-primary {
color: var(--st-primary) !important;
}
.bg-st-dark {
background-color: var(--st-dark-card) !important;
}
.shadow-st-primary {
box-shadow: var(--st-shadow-primary) !important;
}
.shadow-st-glow {
box-shadow: var(--st-shadow-glow) !important;
}
.bg-st-gradient-primary {
background: var(--st-gradient-primary) !important;
}
.bg-st-gradient-dark {
background: var(--st-gradient-dark) !important;
}
.site-footer {
margin-top: 4rem;
}
.stchannel-header {
background: var(--st-nav-bg);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--st-chat-border);
position: sticky;
top: 0;
z-index: var(--st-z-sticky);
transition: all var(--st-transition-fast);
}
.stchannel-navbar-brand img {
height: 40px;
width: auto;
transition: transform var(--st-transition-normal);
}
.stchannel-navbar-brand:hover img {
transform: scale(1.05);
}
.stchannel-nav-link {
color: var(--st-nav-link-color) !important;
font-weight: var(--st-font-medium);
padding: 0.75rem 1rem !important;
transition: all var(--st-transition-normal);
position: relative;
border-radius: var(--st-radius-sm);
margin: 0 var(--st-space-xs);
}
.stchannel-nav-link:hover {
color: var(--st-nav-link-hover-color) !important;
transform: translateY(-2px);
background-color: rgba(var(--st-primary-rgb), 0.1);
}
.stchannel-nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--st-gradient-primary);
transition: all var(--st-transition-normal);
transform: translateX(-50%);
border-radius: var(--st-radius-full);
}
.stchannel-nav-link:hover::after,
.stchannel-nav-link.active::after {
width: 80%;
}
.stchannel-nav-link.active {
color: var(--st-primary) !important;
font-weight: var(--st-font-semibold);
}
.stchannel-footer {
background: var(--st-nav-bg);
border-top: 1px solid var(--st-chat-border);
margin-top: auto;
padding: var(--st-space-2xl) 0 var(--st-space-xl) 0;
}
.stchannel-footer-title {
color: var(--st-primary);
font-weight: var(--st-font-semibold);
margin-bottom: var(--st-space-md);
font-size: var(--st-text-lg);
}
.stchannel-footer-link {
color: var(--st-nav-link-color);
text-decoration: none;
transition: all var(--st-transition-normal);
display: block;
padding: var(--st-space-xs) 0;
border-radius: var(--st-radius-sm);
}
.stchannel-footer-link:hover {
color: var(--st-primary);
transform: translateX(5px);
padding-left: var(--st-space-sm);
}
.stchannel-social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(var(--st-primary-rgb), 0.1);
border: 1px solid rgba(var(--st-primary-rgb), 0.3);
border-radius: var(--st-radius-full);
color: var(--st-primary);
text-decoration: none;
transition: all var(--st-transition-normal);
margin: 0 var(--st-space-sm);
}
.stchannel-social-link:hover {
background: var(--st-primary);
color: var(--st-black);
transform: translateY(-3px);
box-shadow: var(--st-shadow-primary);
}
.stchannel-hero {
background: var(--st-gradient-hero);
min-height: 60vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.stchannel-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: 
radial-gradient(circle at 20% 80%, rgba(var(--st-primary-rgb), 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(var(--st-primary-rgb), 0.1) 0%, transparent 50%);
z-index: 1;
}
.stchannel-hero-content {
position: relative;
z-index: 2;
}
.btn-stchannel-primary {
background: var(--st-gradient-primary);
border: none;
color: var(--st-btn-primary-color);
font-weight: var(--st-font-semibold);
padding: 0.75rem 2rem;
border-radius: var(--st-btn-radius);
transition: all var(--st-transition-normal);
box-shadow: var(--st-shadow-primary);
}
.btn-stchannel-primary:hover {
transform: translateY(-2px);
box-shadow: var(--st-shadow-primary-lg);
color: var(--st-btn-primary-color);
background: var(--st-gradient-primary-intense);
}
.btn-stchannel-outline {
background: transparent;
border: 2px solid var(--st-primary);
color: var(--st-primary);
font-weight: var(--st-font-semibold);
padding: 0.75rem 2rem;
border-radius: var(--st-btn-radius);
transition: all var(--st-transition-normal);
}
.btn-stchannel-outline:hover {
background: var(--st-primary);
color: var(--st-btn-primary-color);
transform: translateY(-2px);
box-shadow: var(--st-shadow-primary);
}
.stchannel-card {
background: var(--st-card-bg);
border-radius: var(--st-radius-lg);
box-shadow: var(--st-shadow-sm);
transition: all var(--st-transition-normal);
overflow: hidden;
border: 1px solid var(--st-card-border);
}
.stchannel-card:hover {
transform: translateY(-5px);
box-shadow: var(--st-card-hover-shadow);
border-color: var(--st-primary);
}
.stchannel-card-header {
background: var(--st-gradient-primary);
color: var(--st-btn-primary-color);
padding: var(--st-space-lg);
font-weight: var(--st-font-semibold);
}
.text-stchannel-primary {
color: var(--st-primary) !important;
}
.bg-stchannel-primary {
background: var(--st-primary) !important;
}
.bg-stchannel-gradient {
background: var(--st-gradient-primary) !important;
}
.bg-stchannel-dark {
background: var(--st-dark-card) !important;
}
.border-stchannel-primary {
border-color: var(--st-primary) !important;
}
@keyframes stchannel-pulse {
0% {
box-shadow: 0 0 0 0 rgba(var(--st-primary-rgb), 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(var(--st-primary-rgb), 0);
}
100% {
box-shadow: 0 0 0 0 rgba(var(--st-primary-rgb), 0);
}
}
.stchannel-pulse {
animation: stchannel-pulse 2s infinite;
}
@keyframes stchannel-glow {
0%, 100% {
box-shadow: var(--st-shadow-primary);
}
50% {
box-shadow: var(--st-shadow-glow);
}
}
.stchannel-glow {
animation: stchannel-glow 3s ease-in-out infinite;
}
@media (max-width: 768px) {
.stchannel-hero {
min-height: 50vh;
text-align: center;
}
.stchannel-navbar-brand img {
height: 32px;
}
.stchannel-social-link {
width: 35px;
height: 35px;
margin: 0 var(--st-space-xs);
}
.stchannel-footer {
padding: var(--st-space-xl) 0 var(--st-space-lg) 0;
}
.btn-stchannel-primary,
.btn-stchannel-outline {
padding: 0.6rem 1.5rem;
font-size: var(--st-text-sm);
}
}
@media (prefers-color-scheme: dark) {
.stchannel-card {
background: #2d2d2d;
color: #ffffff;
}
.stchannel-footer-link {
color: rgba(255, 255, 255, 0.9);
}
}
.skip-link:focus {
position: fixed;
top: 10px;
left: 10px;
z-index: 99999;
padding: 8px 16px;
background: var(--st-primary, #00ff9d);
color: var(--st-dark, #0a0a0a);
font-weight: bold;
text-decoration: none;
border-radius: 4px;
}
@media (max-width: 768px) {
#hero .cta-big-block p,
#cta-big-block p,
.hero-tagline,
.hero-subtitle,
[class*="tagline"],
[class*="subtitle"] {
font-size: max(14px, 3.5vw) !important;
}
.blog-card-category-v3,
.portfolio-card__category,
.portfolio-wall-card__category,
.category-badge,
[class*="category"][class*="badge"] {
font-size: 13px !important;
}
}
.site-footer{
padding: 0 !important;
}
.stchannel-footer {
background: linear-gradient(135deg, #0a0a0a 0%, #111111 50%, #1a1a1a 100%);
color: #ffffff;
padding: 60px 0 20px;
margin-top: auto;
position: relative;
overflow: hidden;
}
.stchannel-footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--st-primary, #00ff9d), transparent);
}
.footer-brand .brand-text {
background: var(--st-gradient-primary, linear-gradient(135deg, #00ff9d 0%, #00cc7d 100%));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
margin-bottom: 1rem;
}
.footer-description {
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
margin-bottom: 2rem;
}
.footer-title {
color: #ffffff;
font-weight: 600;
margin-bottom: 1.5rem;
font-size: 1.1rem;
position: relative;
padding-bottom: 0.5rem;
}
.footer-title::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 2px;
background: var(--st-gradient-primary, linear-gradient(135deg, #00ff9d 0%, #00cc7d 100%));
border-radius: 1px;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 0.75rem;
}
.footer-links a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: all 0.3s ease;
position: relative;
display: inline-flex;
align-items: center;
}
.footer-links a:hover {
color: var(--st-primary, #00ff9d);
transform: translateX(5px);
}
.footer-links a::before {
content: "";
position: absolute;
left: -15px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 1px;
background: var(--st-primary, #00ff9d);
transition: width 0.3s ease;
}
.footer-links a:hover::before {
width: 10px;
}
.stchannel-footer .footer-links a i {
display: inline-block !important;
color: inherit;
}
.stchannel-footer .footer-link-tutorial {
color: var(--st-primary, #00ff9d) !important;
animation: stFooterTutorialPulse 2.6s ease-in-out infinite;
}
.stchannel-footer .footer-link-tutorial i {
color: var(--st-primary, #00ff9d) !important;
}
.stchannel-footer .footer-link-tutorial:hover {
text-shadow: 0 0 12px rgba(0, 255, 157, 0.7);
}
@keyframes stFooterTutorialPulse {
0%, 100% { text-shadow: 0 0 0 rgba(0, 255, 157, 0); }
50%      { text-shadow: 0 0 10px rgba(0, 255, 157, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
.stchannel-footer .footer-link-tutorial { animation: none !important; }
}
.footer-ai-disclaimer {
font-size: .72rem;
color: rgba(255,255,255,.35);
line-height: 1.5;
margin-top: 1.75rem !important;
border-top: 1px solid rgba(255,255,255,.06);
padding-top: .6rem;
}
.footer-ai-disclaimer i {
color: rgba(0,255,157,.4);
margin-right: 5px;
font-size: .68rem;
}
.social-links {
display: flex;
flex-wrap: wrap;
gap: .75rem;
margin-top: 1.5rem;
max-width: 220px;
}
.stchannel-social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.stchannel-social-link i,
.stchannel-social-link svg {
transition: color 0.3s ease;
}
.stchannel-social-link:hover {
background: var(--st-gradient-primary, linear-gradient(135deg, #00ff9d 0%, #00cc7d 100%));
color: var(--st-dark, #0a0a0a) !important;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 255, 157, 0.4);
}
.stchannel-social-link:hover i,
.stchannel-social-link:hover svg {
color: var(--st-dark, #0a0a0a) !important;
}
.contact-info {
margin-bottom: 2rem;
}
.contact-item {
display: flex;
align-items: center;
margin-bottom: 1rem;
color: rgba(255, 255, 255, 0.8);
}
.contact-item i {
width: 20px;
margin-right: 1rem;
color: var(--st-primary, #00ff9d);
}
.contact-item a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color 0.3s ease;
}
.contact-item a:hover {
color: var(--st-primary, #00ff9d);
}
.newsletter-signup {
margin-top: 2rem;
}
.newsletter-signup h6 {
color: #ffffff;
font-weight: 600;
}
.newsletter-form .input-group {
border-radius: 25px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.newsletter-form .form-control {
border: none;
background: rgba(255, 255, 255, 0.1);
color: white;
border-radius: 25px 0 0 25px;
padding: 0.75rem 1rem;
backdrop-filter: blur(10px);
}
.newsletter-form .form-control::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.newsletter-form .form-control:focus {
background: rgba(255, 255, 255, 0.15);
box-shadow: none;
color: white;
}
.newsletter-form .btn {
background: var(--st-gradient-primary, linear-gradient(135deg, #00ff9d 0%, #00cc7d 100%));
border: none;
border-radius: 0 25px 25px 0;
padding: 0.75rem 1rem;
transition: all 0.3s ease;
color: var(--st-dark, #0a0a0a);
font-weight: 600;
}
.newsletter-form .btn:hover {
background: linear-gradient(135deg, #00cc7d 0%, #00ff9d 100%);
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(0, 255, 157, 0.4);
}
.footer-bottom {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.copyright {
color: rgba(255, 255, 255, 0.6);
margin: 0;
font-size: 0.9rem;
}
.footer-bottom-links {
text-align: right;
display: flex;
gap: 2rem;
justify-content: flex-end;
}
.footer-bottom-links a {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
font-size: 0.9rem;
transition: color 0.3s ease;
}
.footer-bottom-links a:hover {
color: var(--st-primary, #00ff9d);
}
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: var(--st-gradient-primary, linear-gradient(135deg, #00ff9d 0%, #00cc7d 100%));
border: none;
border-radius: 50%;
color: var(--st-dark, #0a0a0a);
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s ease;
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
background: linear-gradient(135deg, #00cc7d 0%, #00ff9d 100%);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 255, 157, 0.5);
}
@media (max-width: 768px) {
.stchannel-footer {
padding: 40px 0 20px;
}
.footer-bottom-links {
text-align: left;
justify-content: flex-start;
margin-top: 1rem;
flex-wrap: wrap;
gap: 1rem;
}
.social-links {
justify-content: flex-start;
}
.back-to-top {
bottom: 20px;
right: 20px;
width: 45px;
height: 45px;
}
}
.chat-container {
--chat-primary: var(--bs-success, #00FF9D);
--chat-primary-light: rgba(var(--bs-success-rgb, 0, 255, 157), 0.15);
--chat-primary-hover: var(--bs-success-dark, #00e68c);
--chat-bg: var(--bs-white, #FFFFFF);
--chat-bg-dark: var(--bs-light, #F0F0F0);
--chat-bg-light: var(--bs-gray-100, #FAFAFA);
--chat-bg-hover: rgba(var(--bs-dark-rgb, 0, 0, 0), 0.05);
--chat-bg-active: rgba(var(--bs-dark-rgb, 0, 0, 0), 0.08);
--chat-border: var(--bs-gray-300, #E5E7EB);
--chat-border-light: rgba(var(--bs-gray-300-rgb, 229, 231, 235), 0.5);
--chat-text: var(--bs-gray-800, #333333);
--chat-text-muted: var(--bs-gray-600, #6B7280);
--chat-shadow-color: rgba(var(--bs-dark-rgb, 0, 0, 0), 0.1);
--chat-container-height: 600px;
--chat-container-min-height: 400px;
--chat-header-height: 56px;
--chat-tabs-height: 40px;
--chat-tabs-content-height: 200px;
--chat-sidebar-width: 280px;
--chat-dropdown-width: 220px;
--chat-dropdown-mobile-width: 180px;
--chat-input-height: 30px;
--chat-height-component: calc(var(--chat-input-height) + (var(--chat-input-padding-y) * 2) + 1px);
--chat-spacing-xs: 4px;
--chat-spacing-sm: 8px;
--chat-spacing-md: 12px;
--chat-spacing-lg: 16px;
--chat-spacing-xl: 24px;
--chat-input-padding-x: 16px;
--chat-input-padding-y: 12px;
--chat-input-mobile-padding-x: 12px;
--chat-input-mobile-padding-y: 10px;
--chat-message-spacing: 15px;
--chat-message-gap: 15px;
--chat-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--chat-font-size: 14px;
--chat-font-size-xs: 11px;
--chat-font-size-sm: 12px;
--chat-font-size-lg: 16px;
--chat-font-size-xl: 18px;
--chat-border-radius: 6px;
--chat-border-radius-lg: 8px;
--chat-border-radius-xl: 12px;
--chat-button-radius: 6px;
--chat-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
--chat-box-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.05);
--chat-box-shadow-top: 0 -4px 12px rgba(0, 0, 0, 0.1);
--chat-box-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.12);
--chat-box-shadow-input: 0 1px 3px rgba(0, 0, 0, 0.08);
--chat-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.05);
--chat-transition: all 0.2s ease-out;
--chat-transition-fast: all 0.15s ease-out;
--chat-zindex-default: 1;
--chat-zindex-dropdown: 1000;
--chat-zindex-fixed: 1030;
--chat-zindex-popover: 1060;
--chat-zindex-modal: 1080;
--chat-zindex-fullscreen: 1100;
--chat-zindex-spinner: 9999;           
--chat-button-size: 38px;
--chat-button-mobile-size: 34px;
--chat-button-icon-size: 20px;
--chat-button-icon-mobile-size: 18px;
--chat-message-user-bg: var(--chat-primary-light);
--chat-message-user-text: var(--chat-text);
--chat-message-user-border: var(--chat-primary);
--chat-message-assistant-bg: var(--chat-bg-light);
--chat-message-assistant-text: var(--chat-text);
--chat-message-assistant-border: var(--chat-border);
--chat-message-system-bg: rgba(229, 231, 235, 0.15);
--chat-message-system-text: var(--chat-text-muted);
--chat-message-system-border: var(--chat-border-light);
--chat-spinner-size: 40px;                    
--chat-spinner-border-width: 4px;            
--chat-spinner-color: var(--bs-success, #00FF9D);      
--chat-spinner-overlay-bg: var(--bs-white, #FFFFFF);   
--chat-spinner-overlay-opacity: 0.85;        
}
.chat-container.chat-dark-mode {
--chat-primary: #00FF9D;
--chat-primary-light: rgba(0, 255, 157, 0.15);
--chat-primary-hover: #00e68c;
--chat-bg: #1F2937;
--chat-bg-dark: #111827;
--chat-bg-light: #2D3748;
--chat-bg-hover: rgba(255, 255, 255, 0.05);
--chat-bg-active: rgba(255, 255, 255, 0.08);
--chat-border: #374151;
--chat-border-light: rgba(55, 65, 81, 0.5);
--chat-text: #F3F4F6;
--chat-text-muted: #9CA3AF;
--chat-shadow-color: rgba(0, 0, 0, 0.3);
--chat-message-user-bg: rgba(0, 255, 157, 0.1);
--chat-message-user-text: #F3F4F6;
--chat-message-user-border: var(--chat-primary);
--chat-message-assistant-bg: #2D3748;
--chat-message-assistant-text: #F3F4F6;
--chat-message-assistant-border: #374151;
--chat-message-system-bg: rgba(55, 65, 81, 0.5);
--chat-message-system-text: #D1D5DB;
--chat-message-system-border: #4B5563;
--chat-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
--chat-box-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.2);
--chat-text: #ffffff;
--chat-text-muted: #888b90;
--chat-spinner-overlay-bg: var(--bs-gray-900, #111827);
}
@media (max-width: 767px) {
.chat-container {
--chat-sidebar-width: 260px;
}
}
@media (max-width: 480px) {
.chat-container {
--chat-font-size: 13px;
--chat-message-spacing: 10px;
--chat-message-gap: 10px;
}
}
@supports not (height: 100svh) {
.chat-container {
--chat-fullscreen-height: 100vh;
}
}
@supports (height: 100svh) {
.chat-container {
--chat-fullscreen-height: 100svh;
}
}
.blog-filters {
background: #f8f9fa;
padding: 2rem;
margin-bottom: 2rem;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.filters-form {
display: grid;
grid-template-columns: 1fr auto;
gap: 1.5rem;
align-items: end;
}
@media (max-width: 768px) {
.filters-form {
grid-template-columns: 1fr;
}
}
.search-box {
position: relative;
}
.search-input {
width: 100%;
padding: 1rem 3rem 1rem 1rem;
border: 2px solid #e9ecef;
border-radius: 25px;
font-size: 1rem;
transition: all 0.3s ease;
}
.search-input:focus {
border-color: #667eea;
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
outline: none;
}
.search-btn {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: #667eea;
border: none;
color: white;
padding: 0.6rem 1rem;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.search-btn:hover {
background: #5a67d8;
transform: translateY(-50%) scale(1.05);
}
.filter-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.filter-group label {
font-weight: 600;
color: #495057;
}
.filter-group select {
padding: 0.8rem;
border: 2px solid #e9ecef;
border-radius: 8px;
background: white;
font-size: 1rem;
cursor: pointer;
}
.active-filters {
background: #e3f2fd;
padding: 1rem;
border-radius: 10px;
margin-bottom: 2rem;
border-left: 4px solid #2196f3;
}
.filters-label {
font-weight: 600;
color: #1565c0;
margin-right: 1rem;
}
.filter-tag {
display: inline-block;
background: #2196f3;
color: white;
padding: 0.4rem 0.8rem;
border-radius: 15px;
margin: 0.2rem;
font-size: 0.9rem;
position: relative;
}
.remove-filter {
color: white;
text-decoration: none;
margin-left: 0.5rem;
font-weight: bold;
cursor: pointer;
}
.remove-filter:hover {
color: #ffeb3b;
}
.clear-filters {
color: #d32f2f;
text-decoration: none;
font-weight: 600;
margin-left: 1rem;
}
.clear-filters:hover {
text-decoration: underline;
}
.articles-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
@media (max-width: 768px) {
.articles-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.article-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
transition: all 0.3s ease;
border: 1px solid #e9ecef;
position: relative;
}
.article-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
.article-image {
position: relative;
overflow: hidden;
height: 200px;
}
.article-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.article-card:hover .article-image img {
transform: scale(1.1);
}
.article-content {
padding: 1.5rem;
}
.article-meta {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
margin-bottom: 1rem;
font-size: 0.9rem;
}
.article-category {
background: #667eea;
color: white;
padding: 0.3rem 0.8rem;
border-radius: 15px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
}
.article-category:hover {
background: #5a67d8;
color: white;
text-decoration: none;
}
.article-date {
color: #6c757d;
display: flex;
align-items: center;
gap: 0.3rem;
}
.reading-time {
background: #f8f9fa;
color: #495057;
padding: 0.3rem 0.6rem;
border-radius: 10px;
font-size: 0.8rem;
}
.article-title {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.3;
}
.article-title a {
color: #2d3748;
text-decoration: none;
transition: color 0.3s ease;
}
.article-title a:hover {
color: #667eea;
}
.article-excerpt {
color: #4a5568;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.article-tags {
margin-bottom: 1.5rem;
}
.tag {
display: inline-block;
background: #e9ecef;
color: #495057;
padding: 0.3rem 0.6rem;
border-radius: 12px;
text-decoration: none;
font-size: 0.8rem;
margin: 0.2rem;
transition: all 0.3s ease;
}
.tag:hover {
background: #667eea;
color: white;
text-decoration: none;
}
.article-footer {
padding-top: 1rem;
border-top: 1px solid #e9ecef;
}
.read-more {
color: #667eea;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
.read-more:hover {
color: #5a67d8;
text-decoration: none;
transform: translateX(5px);
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin: 3rem 0;
flex-wrap: wrap;
}
.pagination-link {
padding: 0.8rem 1.2rem;
border: 2px solid #667eea;
background: white;
color: #667eea;
text-decoration: none;
border-radius: 8px;
font-weight: 500;
transition: all 0.3s ease;
min-width: 44px;
text-align: center;
}
.pagination-link:hover {
background: #667eea;
color: white;
text-decoration: none;
transform: translateY(-2px);
}
.pagination-current {
background: #667eea;
color: white;
}
.pagination-numbers {
display: flex;
gap: 0.5rem;
}
.pagination-info {
text-align: center;
color: #6c757d;
font-size: 0.9rem;
margin-top: 1rem;
}
.empty-state {
text-align: center;
padding: 4rem 2rem;
color: #6c757d;
}
.empty-state h2 {
font-size: 2rem;
margin-bottom: 1rem;
color: #495057;
}
.empty-state p {
font-size: 1.1rem;
margin-bottom: 2rem;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.article-card {
animation: fadeInUp 0.6s ease-out;
}
.article-card:nth-child(2) { animation-delay: 0.1s; }
.article-card:nth-child(3) { animation-delay: 0.2s; }
.article-card:nth-child(4) { animation-delay: 0.3s; }
.article-card:nth-child(5) { animation-delay: 0.4s; }
.article-card:nth-child(6) { animation-delay: 0.5s; }
.loading-skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.article-card.loading .article-image {
height: 200px;
}
.article-card.loading .article-title,
.article-card.loading .article-excerpt,
.article-card.loading .article-meta > * {
border-radius: 4px;
margin-bottom: 0.5rem;
}
.article-card.loading .article-title {
height: 1.5rem;
}
.article-card.loading .article-excerpt {
height: 4rem;
}
.article-card.loading .article-meta > * {
height: 1rem;
width: 80px;
display: inline-block;
}
.blog-section-v3 {
position: relative;
padding: 60px 20px;
min-height: 500px;
overflow: visible;
}
.blog-section-v3-fullwidth {
margin-left: 0;
margin-right: 0;
width: 100%;
max-width: 100%;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
}
.blog-header-v3 {
text-align: center;
margin-bottom: 50px;
position: relative;
z-index: 2;
}
.blog-title-v3 {
font-size: 3rem;
font-weight: var(--st-font-bold);
color: var(--st-text-primary);
margin-bottom: 15px;
text-shadow: 0 0 30px rgba(var(--st-primary-rgb), 0.3);
background: linear-gradient(45deg, var(--st-primary), #ff4757, #7877c6, var(--st-primary));
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientShift 4s ease-in-out infinite;
}
.blog-title-v3 .highlight {
color: var(--st-primary);
text-shadow: 0 0 20px rgba(var(--st-primary-rgb), 0.6);
}
.blog-subtitle-v3 {
font-size: 1.2rem;
color: var(--st-text-secondary);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.blog-carousel-v3 {
position: relative;
max-width: none;
width: 100%;
margin: 0;
padding: 0;
overflow: visible;
}
.blog-carousel-track-v3 {
display: flex;
gap: 20px;
padding: 60px 120px; 
overflow-x: auto;
overflow-y: visible;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-snap-type: x proximity;
position: relative;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scroll-padding: 0;
}
.blog-carousel-track-v3::-webkit-scrollbar {
display: none;
}
.blog-card-v3 {
flex: 0 0 380px;
height: 420px;
background: rgba(255, 255, 255, 0.02);
border-radius: var(--st-radius-lg);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
cursor: pointer;
scroll-snap-align: center;
transition: all 0.3s ease-out;
transform-style: preserve-3d;
margin: 20px 10px;
touch-action: pan-x;
user-select: none;
}
.blog-card-header-v3 {
position: relative;
height: 200px;
overflow: hidden;
}
.blog-card-image-v3 {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
border-radius: var(--st-radius-lg) var(--st-radius-lg) 0 0;
}
.blog-card-v3:hover .blog-card-image-v3 {
transform: scale(1.05);
}
.blog-card-overlay-v3 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, var(--card-gradient-start), var(--card-gradient-end));
opacity: 0.7;
transition: opacity 0.3s ease;
z-index: 1;
}
.blog-card-v3:hover .blog-card-overlay-v3 {
opacity: 0.85;
}
.blog-card-category-v3 {
position: absolute;
top: 15px;
left: 15px;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 6px 12px;
border-radius: 20px;
font-weight: 600;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
backdrop-filter: blur(10px);
z-index: 2;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.blog-card-reading-time-v3 {
position: absolute;
top: 15px;
right: 15px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 6px 10px;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 500;
backdrop-filter: blur(10px);
z-index: 2;
display: flex;
align-items: center;
gap: 4px;
}
.blog-card-reading-time-v3::before {
content: '🕒';
font-size: 0.8rem;
}
.blog-card-v3:nth-child(4n+1) {
--card-gradient-start: rgba(var(--st-primary-rgb), 0.85);
--card-gradient-end: rgba(0, 212, 170, 0.90);
--card-shadow: rgba(var(--st-primary-rgb), 0.2); 
--card-glow: rgba(var(--st-primary-rgb), 0.35); 
--card-text-color: var(--st-text-primary);
--card-bg-color: var(--st-primary);
}
.blog-card-v3:nth-child(4n+2) {
--card-gradient-start: rgba(255, 71, 87, 0.85);
--card-gradient-end: rgba(255, 55, 66, 0.90);
--card-shadow: rgba(255, 71, 87, 0.2); 
--card-glow: rgba(255, 71, 87, 0.35); 
--card-text-color: var(--st-text-primary);
--card-bg-color: #ff4757;
}
.blog-card-v3:nth-child(4n+3) {
--card-gradient-start: rgba(120, 119, 198, 0.85);
--card-gradient-end: rgba(95, 95, 196, 0.90);
--card-shadow: rgba(120, 119, 198, 0.2); 
--card-glow: rgba(120, 119, 198, 0.35); 
--card-text-color: var(--st-text-primary);
--card-bg-color: #7877c6;
}
.blog-card-v3:nth-child(4n+4) {
--card-gradient-start: rgba(255, 167, 38, 0.85);
--card-gradient-end: rgba(255, 152, 0, 0.90);
--card-shadow: rgba(255, 167, 38, 0.2); 
--card-glow: rgba(255, 167, 38, 0.35); 
--card-text-color: var(--st-text-primary);
--card-bg-color: #ffa726;
}
.blog-card-v3:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 
0 15px 45px var(--card-shadow), 
0 0 30px var(--card-glow), 
inset 0 0 0 1px rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.3);
}
.blog-card-content-v3 {
position: relative;
z-index: 2;
height: calc(100% - 200px);
display: flex;
flex-direction: column;
padding: 25px;
color: white;
background: linear-gradient(180deg, 
rgba(0, 0, 0, 0.1) 0%, 
rgba(0, 0, 0, 0.4) 50%, 
rgba(0, 0, 0, 0.7) 100%);
backdrop-filter: none;
}
.blog-card-title-v3 {
font-size: 1.4rem;
font-weight: var(--st-font-bold);
line-height: 1.3;
margin: 0 0 15px 0;
color: var(--st-text-primary);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card-excerpt-v3 {
font-size: 0.95rem;
line-height: 1.6;
color: var(--st-text-secondary);
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 20px;
}
.blog-card-footer-v3 {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.blog-card-date-v3 {
font-size: 0.85rem;
color: var(--st-text-muted);
font-weight: var(--st-font-medium);
}
.blog-card-cta-v3 {
background: var(--card-gradient-start);
color: white;
padding: 8px 16px;
border-radius: 20px;
text-decoration: none;
font-weight: 600;
font-size: 0.85rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.blog-card-cta-v3::after {
content: '→';
transition: transform 0.3s ease;
}
.blog-card-v3:hover .blog-card-cta-v3 {
background: var(--card-gradient-end);
transform: translateX(3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.blog-card-v3:hover .blog-card-cta-v3::after {
transform: translateX(3px);
}
.blog-card-tags .tag-pill {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
padding:4px 10px;
border-radius: 999px;
line-height:1;
font-size:.65rem;
letter-spacing:.5px;
font-weight:500;
color: var(--st-text-secondary);
backdrop-filter: blur(6px);
transition:.25s;
}
.blog-card-tags .tag-pill.more { background:linear-gradient(135deg,var(--st-primary),#ff4757); color:#fff; border-color:rgba(255,255,255,0.3); }
.blog-card-tags .tag-pill:hover { color: var(--st-text-primary); border-color:rgba(var(--st-primary-rgb),0.6); }
.blog-card-wall.no-image .blog-card-header-v3 {
background: linear-gradient(135deg,var(--card-gradient-start),var(--card-gradient-end));
display:flex;
align-items:flex-start;
justify-content:space-between;
}
.blog-card-wall.no-image .blog-card-header-v3 img { display:none; }
.fade-in-observe { opacity:0; transform: translateY(25px); transition: opacity .6s ease, transform .6s cubic-bezier(.4,.2,.1,1); }
.fade-in-observe.in { opacity:1; transform:translateY(0); }
.blog-card-v3.blog-card-wall .blog-card-header-v3 {
border-top-left-radius: var(--st-radius-lg);
border-top-right-radius: var(--st-radius-lg);
overflow: hidden;
display: flex;
align-items: stretch;
position: relative;
aspect-ratio: 16/9;
}
@supports not (aspect-ratio: 16/9){
.blog-card-v3.blog-card-wall .blog-card-header-v3 { height:230px; }
}
.blog-card-v3.blog-card-wall .blog-card-image-v3 {
width:100%;
height:100%;
object-fit:cover;
object-position:center;
transform:scale(1.05);
transition:transform .8s cubic-bezier(.22,.61,.36,1), filter .6s;
filter:brightness(.9) saturate(1.05);
}
.blog-card-v3.blog-card-wall:hover .blog-card-image-v3,
.blog-card-v3.blog-card-wall:focus-visible .blog-card-image-v3 {
transform:scale(1.12);
filter:brightness(1) saturate(1.15);
}
.blog-card-v3.blog-card-wall .blog-card-overlay-v3 {
opacity:.55;
backdrop-filter:blur(2px);
transition:opacity .5s;
}
.blog-card-v3.blog-card-wall:hover .blog-card-overlay-v3 { opacity:.35; }
.blog-card-v3.blog-card-wall.no-image .blog-card-header-v3 {
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), rgba(0,0,0,.55)),
linear-gradient(135deg, var(--card-gradient-start, var(--st-primary)), var(--card-gradient-end, #ff4757));
}
.blog-card-v3.blog-card-wall.no-image .blog-card-image-v3 { display:none; }
.blog-card-v3.blog-card-wall .blog-card-content-v3 { 
padding-top:1.25rem;
display:flex;
flex-direction:column;
flex:1 1 auto;
}
.blog-card-v3.blog-card-wall .blog-card-content-v3 .blog-card-excerpt-v3 { flex:0 0 auto; }
.blog-card-v3.blog-card-wall .blog-card-footer-v3 { margin-top:auto; }
.blog-card-v3.blog-card-wall .blog-card-excerpt-v3 { -webkit-line-clamp:3; line-clamp:3; }
.blog-nav-v3 {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(20px);
z-index: 3;
opacity: 0.8;
}
.blog-nav-v3:hover {
background: rgba(var(--st-primary-rgb), 0.2);
border-color: rgba(var(--st-primary-rgb), 0.4);
box-shadow: 0 0 20px rgba(var(--st-primary-rgb), 0.3);
opacity: 1;
transform: translateY(-50%) scale(1.1);
}
.blog-nav-prev-v3 {
left: 20px;
}
.blog-nav-next-v3 {
right: 20px;
}
.blog-progress-v3 {
margin: 40px auto 0;
max-width: 300px;
background: rgba(255, 255, 255, 0.1);
height: 3px;
border-radius: 2px;
overflow: hidden;
backdrop-filter: blur(10px);
}
.blog-progress-bar-v3 {
height: 100%;
background: linear-gradient(90deg, var(--st-primary), #ff4757, #7877c6, #ffa726);
background-size: 300% 100%;
border-radius: 2px;
transition: width 0.3s ease;
animation: progressGlow 3s ease-in-out infinite;
}
@keyframes progressGlow {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.blog-index-wall {
min-height: 100vh;
position: relative;
}
.blog-wall-hero {
position: relative;
}
.blog-wall-layout {
position: relative;
z-index: 2;
}
.blog-wall-content {
position: relative;
z-index: 1;
}
.blog-wall-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 40px 30px;
}
.blog-card-wall.blog-card-v3 {
flex: initial;
width: auto;
height: auto;
min-height: 420px;
margin: 0;
display:flex;
flex-direction:column;
}
@media (max-width: 992px){ .blog-card-wall.blog-card-v3 { min-height:380px; } }
@media (max-width: 576px){ .blog-card-wall.blog-card-v3 { min-height:340px; } }
.blog-wall-sidebar .blog-filter-block {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
padding: 20px 18px;
border-radius: var(--st-radius-lg);
backdrop-filter: blur(12px);
}
.blog-filter-list li + li { margin-top: 6px; }
.blog-filter-list .filter-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 10px;
border-radius: 8px;
text-decoration: none;
color: var(--st-text-secondary);
background: rgba(255,255,255,0.02);
border: 1px solid transparent;
transition: .25s;
font-weight: 500;
}
.blog-filter-list .filter-item .count { font-size: .7rem; background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 12px; }
.blog-filter-list .filter-item:hover { color: var(--st-text-primary); border-color: rgba(var(--st-primary-rgb),0.4); }
.blog-filter-list .filter-item.active { background: linear-gradient(135deg,var(--st-primary),#ff4757); color:#fff; box-shadow: 0 0 0 1px rgba(255,255,255,0.15); }
.tag-chip {
--chip-bg: rgba(255,255,255,0.06);
display:inline-flex;
align-items:center;
padding:6px 12px;
border-radius:20px;
font-size:.75rem;
text-decoration:none;
background:var(--chip-bg);
color:var(--st-text-secondary);
border:1px solid rgba(255,255,255,0.1);
transition:.25s;
}
.tag-chip:hover { color: var(--st-text-primary); background: rgba(255,255,255,0.12); }
.tag-chip.active { background: linear-gradient(135deg,var(--st-primary),#ff4757); color:#fff; border-color: rgba(255,255,255,0.3); }
.blog-active-filters .badge { margin-right:6px; }
.blog-active-filters .filter-item {
background: linear-gradient(135deg,var(--st-primary),#ff4757);
color:#fff;
padding:6px 12px;
border-radius:8px;
display:inline-flex;
align-items:center;
gap:4px;
font-weight:600;
border:1px solid rgba(255,255,255,0.25);
box-shadow:0 4px 15px rgba(0,0,0,.25);
}
.blog-active-filters .filter-item:hover { filter:brightness(1.1); text-decoration:none; }
.blog-card-v3 .stretched-link::after { top:0; left:0; right:0; bottom:0; }
@media (max-width: 1200px) {
.blog-carousel-track-v3 {
gap: 18px;
padding: 50px 80px; 
}
.blog-card-v3 {
flex: 0 0 350px;
height: 400px;
margin: 15px 8px;
}
.blog-card-header-v3 {
height: 180px;
}
.blog-card-content-v3 {
height: calc(100% - 180px);
padding: 20px;
}
.blog-nav-prev-v3 {
left: 15px;
}
.blog-nav-next-v3 {
right: 15px;
}
}
@media (max-width: 768px) {
.blog-section-v3 {
padding: 40px 0;
}
.blog-carousel-track-v3 {
gap: 15px;
padding: 40px 60px; 
scroll-snap-type: none;
scroll-behavior: auto;
}
.blog-title-v3 {
font-size: 2.2rem;
}
.blog-card-v3 {
flex: 0 0 300px;
height: 360px;
margin: 10px 5px;
scroll-snap-align: none;
transition: transform 0.2s ease-out;
}
.blog-card-header-v3 {
height: 160px;
}
.blog-card-content-v3 {
height: calc(100% - 160px);
padding: 18px;
}
.blog-card-title-v3 {
font-size: 1.2rem;
}
.blog-card-excerpt-v3 {
font-size: 0.9rem;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.blog-nav-v3 {
width: 50px;
height: 50px;
font-size: 1rem;
}
.blog-nav-prev-v3 {
left: 10px;
}
.blog-nav-next-v3 {
right: 10px;
}
}
@media (max-width: 480px) {
.blog-carousel-track-v3 {
gap: 12px;
padding: 30px 40px; 
scroll-snap-type: none;
}
.blog-card-v3 {
flex: 0 0 280px;
height: 340px;
margin: 10px 3px;
scroll-snap-align: none;
}
.blog-card-header-v3 {
height: 140px;
}
.blog-card-content-v3 {
height: calc(100% - 140px);
padding: 15px;
}
.blog-nav-v3 {
display: none;
}
}
.blog-carousel-loading-v3 {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.blog-loading-spinner-v3 {
width: 40px;
height: 40px;
border: 3px solid rgba(255, 255, 255, 0.1);
border-top: 3px solid var(--st-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.blog-card-featured-v3 {
position: relative;
}
.blog-card-featured-v3::after {
content: '⭐';
position: absolute;
top: 15px;
right: 15px;
font-size: 1.2rem;
z-index: 10;
filter: drop-shadow(0 0 10px rgba(255, 255, 0, 0.6));
pointer-events: none;
}
.blog-card-featured-v3 .blog-card-reading-time-v3 {
right: 45px;
}
.blog-card-v3 * {
transition: all 0.3s ease;
}
.blog-card-v3:focus,
.blog-nav-v3:focus {
outline: 2px solid var(--st-primary);
outline-offset: 2px;
}
.blog-carousel-track-v3 {
will-change: scroll-position;
scroll-snap-stop: normal;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.blog-card-v3 {
will-change: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
@media (pointer: coarse) {
.blog-carousel-track-v3 {
scroll-snap-type: none;
overscroll-behavior-x: auto;
}
.blog-card-v3 {
scroll-snap-align: none;
transition: transform 0.2s ease-out;
}
.blog-card-v3:hover {
transform: translateY(-5px) scale(1.01);
}
}
ul.pagination {
gap: 0.5rem;
flex-wrap: wrap;
justify-content: center;
}
ul.pagination .page-item {
display: flex;
}
ul.pagination .page-item .page-link {
position: relative;
padding: 0.75rem 1rem;
min-width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
color: var(--st-primary, #00ff9d);
background: var(--st-dark-card, #111111);
border: 2px solid var(--st-primary, #00ff9d);
border-radius: 8px;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
overflow: hidden;
}
ul.pagination .page-item .page-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 255, 157, 0.3), transparent);
transition: left 0.5s ease;
pointer-events: none;
z-index: 1;
}
ul.pagination .page-item .page-link:hover::before {
left: 100%;
}
ul.pagination .page-item .page-link:hover {
color: var(--st-dark, #0a0a0a);
background: var(--st-primary, #00ff9d);
border-color: var(--st-primary-light, #33ffac);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 255, 157, 0.4);
}
ul.pagination .page-item.active .page-link {
position: relative;
color: var(--st-dark, #0a0a0a);
background: var(--st-gradient-primary, linear-gradient(135deg, #00ff9d 0%, #00cc7d 100%));
border-color: var(--st-primary-light, #33ffac);
box-shadow: 0 0 20px rgba(0, 255, 157, 0.5);
transform: scale(1.08);
}
ul.pagination .page-item.active .page-link::after {
content: '';
position: absolute;
bottom: -6px;
left: 20%;
right: 20%;
height: 2px;
background: var(--st-primary-light, #33ffac);
border-radius: 1px;
animation: blogPaginationSlideIn 0.3s ease-out;
}
@keyframes blogPaginationSlideIn {
from {
transform: scaleX(0);
opacity: 0;
}
to {
transform: scaleX(1);
opacity: 1;
}
}
ul.pagination .page-item.active .page-link:hover {
transform: scale(1.12) translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 255, 157, 0.6);
animation: blogPaginationGlitch 0.3s steps(2, end);
}
@keyframes blogPaginationGlitch {
0%, 100% { clip-path: inset(0 0 0 0); }
20% { clip-path: inset(20% 0 60% 0); transform: translate(-1px, 1px) scale(1.12) translateY(-2px); }
40% { clip-path: inset(60% 0 10% 0); transform: translate(1px, -1px) scale(1.12) translateY(-2px); }
60% { clip-path: inset(30% 0 40% 0); transform: translate(-1px, 0) scale(1.12) translateY(-2px); }
80% { clip-path: inset(10% 0 70% 0); transform: translate(1px, 0) scale(1.12) translateY(-2px); }
}
ul.pagination .page-item.disabled .page-link {
color: rgba(0, 255, 157, 0.3);
background: var(--st-dark-surface, #1a1a1a);
border-color: rgba(0, 255, 157, 0.2);
cursor: not-allowed;
box-shadow: none;
}
ul.pagination .page-item.disabled .page-link:hover {
transform: none;
box-shadow: none;
background: var(--st-dark-surface, #1a1a1a);
}
ul.pagination .page-item .page-link:focus {
outline: none;
box-shadow:
0 0 20px rgba(0, 255, 157, 0.5),
0 0 10px rgba(51, 255, 172, 0.3);
}
.form-select,
select {
position: relative;
padding: 0.75rem 2.5rem 0.75rem 1rem;
min-height: 44px;
color: var(--st-primary, #00ff9d);
background: var(--st-dark-card, #111111) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300ff9d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center / 1.5em 1.5em;
border: 2px solid rgba(0, 255, 157, 0.3);
border-radius: 8px;
font-family: var(--st-font-primary, 'Montserrat', sans-serif);
font-size: 0.95rem;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.form-select::-ms-expand {
display: none;
}
.form-select option {
background: var(--st-dark-elevated, #2d2d2d);
color: var(--st-primary, #00ff9d);
padding: 0.5rem 1rem;
}
.form-select option:hover {
background: var(--st-dark-surface, #1a1a1a);
}
.form-select option:checked {
background: var(--st-primary-dark, #00cc7d);
color: var(--st-dark, #0a0a0a);
}
.form-select:hover {
border-color: var(--st-primary, #00ff9d);
box-shadow: 0 0 10px rgba(0, 255, 157, 0.2);
}
.form-select:focus {
color: var(--st-primary, #00ff9d);
background: var(--st-dark-card, #111111) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300ff9d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center / 1.5em 1.5em;
border-color: var(--st-primary, #00ff9d);
outline: none;
box-shadow: 0 0 20px rgba(0, 255, 157, 0.4);
}
.form-select:disabled {
color: rgba(0, 255, 157, 0.3);
background: var(--st-dark-surface, #1a1a1a) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23555555' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center / 1.5em 1.5em;
border-color: rgba(0, 255, 157, 0.1);
cursor: not-allowed;
opacity: 0.65;
}
.form-select:disabled:hover {
border-color: rgba(0, 255, 157, 0.1);
box-shadow: none;
}
.form-select.is-valid {
border-color: #28a745;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300ff9d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-position: right calc(0.375em + 0.1875rem) center;
}
.form-select.is-valid:focus {
border-color: #28a745;
box-shadow: 0 0 20px rgba(40, 167, 69, 0.3);
}
.form-select.is-invalid {
border-color: #dc3545;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300ff9d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-position: right calc(0.375em + 0.1875rem) center;
}
.form-select.is-invalid:focus {
border-color: #dc3545;
box-shadow: 0 0 20px rgba(220, 53, 69, 0.3);
}
@media (min-width: 768px) {
ul.pagination .page-item .page-link {
padding: 0.75rem 1.25rem;
min-width: 48px;
font-size: 1rem;
}
.form-select {
padding: 0.75rem 2.5rem 0.75rem 1.25rem;
}
}
@media (max-width: 767.98px) {
ul.pagination {
gap: 0.35rem;
}
ul.pagination .page-item .page-link {
padding: 0.5rem 0.75rem;
min-width: 40px;
height: 40px;
font-size: 0.85rem;
}
.form-select {
padding: 0.65rem 2.25rem 0.65rem 0.75rem;
font-size: 0.9rem;
}
}
@media (max-width: 575.98px) {
ul.pagination .page-item .page-link {
padding: 0.4rem 0.6rem;
min-width: 36px;
height: 36px;
font-size: 0.8rem;
}
.form-select {
padding: 0.6rem 2rem 0.6rem 0.65rem;
font-size: 0.85rem;
}
}
@media (prefers-reduced-motion: reduce) {
ul.pagination .page-item .page-link,
.form-select {
transition: none;
}
ul.pagination .page-item .page-link::before {
display: none;
}
ul.pagination .page-item.active .page-link::after,
ul.pagination .page-item.active .page-link:hover {
animation: none;
}
}
@media (prefers-contrast: more) {
ul.pagination .page-item .page-link {
border-width: 3px;
}
.form-select {
border-width: 3px;
}
}
.pagination-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
gap: 0.5rem;
}
.pagination-single-page {
display: none;
}
.blog-filter-block {
padding: 1.5rem;
background: rgba(0, 255, 157, 0.03);
border: 1px solid rgba(0, 255, 157, 0.15);
border-radius: 12px;
transition: all 0.3s ease;
}
.blog-filter-block:hover {
border-color: rgba(0, 255, 157, 0.3);
background: rgba(0, 255, 157, 0.06);
}
.blog-filter-block h5,
.blog-filter-block h6 {
color: var(--st-primary, #00ff9d);
font-weight: 700;
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 0.05em;
margin-bottom: 1rem;
}
.blog-filter-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.blog-filter-list li {
list-style: none;
}
.filter-item {
position: relative;
display: inline-flex;
align-items: center;
justify-content: space-between;
padding: 0.65rem 1rem;
color: var(--st-primary, #00ff9d);
background: var(--st-dark-card, #111111);
border: 1px solid rgba(0, 255, 157, 0.2);
border-radius: 8px;
font-size: 0.95rem;
font-weight: 500;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
white-space: nowrap;
}
.filter-item:hover {
color: var(--st-dark, #0a0a0a);
background: var(--st-primary, #00ff9d);
border-color: var(--st-primary-light, #33ffac);
transform: translateX(4px);
box-shadow: 0 4px 12px rgba(0, 255, 157, 0.3);
}
.filter-item.active {
color: var(--st-dark, #0a0a0a);
background: var(--st-gradient-primary, linear-gradient(135deg, #00ff9d 0%, #00cc7d 100%));
border-color: var(--st-primary-light, #33ffac);
box-shadow: 0 0 15px rgba(0, 255, 157, 0.4);
font-weight: 700;
}
.filter-item.active:hover {
transform: translateX(4px);
box-shadow: 0 6px 20px rgba(0, 255, 157, 0.5);
}
.filter-item .count {
margin-left: 0.75rem;
padding: 0.2rem 0.6rem;
background: rgba(255, 255, 255, 0.15);
border-radius: 12px;
font-size: 0.85rem;
font-weight: 600;
}
.filter-item:hover .count {
background: rgba(0, 0, 0, 0.2);
}
.filter-item.active .count {
background: rgba(0, 0, 0, 0.25);
}
.filter-item small {
margin-left: 0.5rem;
opacity: 0.7;
transition: opacity 0.2s ease;
}
.filter-item:hover small {
opacity: 1;
}
.tag-chip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 1.25rem;
color: var(--st-primary, #00ff9d);
background: var(--st-dark-card, #111111);
border: 1px solid rgba(0, 255, 157, 0.2);
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.tag-chip:hover {
color: var(--st-dark, #0a0a0a);
background: var(--st-primary, #00ff9d);
border-color: var(--st-primary-light, #33ffac);
transform: scale(1.05) translateY(-2px);
box-shadow: 0 6px 15px rgba(0, 255, 157, 0.3);
}
.tag-chip.active {
color: var(--st-dark, #0a0a0a);
background: var(--st-gradient-primary, linear-gradient(135deg, #00ff9d 0%, #00cc7d 100%));
border-color: var(--st-primary-light, #33ffac);
box-shadow: 0 0 20px rgba(0, 255, 157, 0.4);
font-weight: 700;
}
.tag-chip.active:hover {
transform: scale(1.08) translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 255, 157, 0.5);
}
.tag-chip small {
opacity: 0.6;
transition: opacity 0.2s ease;
}
.tag-chip:hover small {
opacity: 1;
}
@media (max-width: 768px) {
.tag-chip {
padding: 0.5rem 1rem;
font-size: 0.85rem;
}
}
@media (max-width: 576px) {
.blog-filter-block {
padding: 1rem;
}
.filter-item {
padding: 0.55rem 0.85rem;
font-size: 0.9rem;
}
.tag-chip {
padding: 0.45rem 0.9rem;
font-size: 0.8rem;
}
.filter-item .count {
margin-left: 0.5rem;
padding: 0.15rem 0.5rem;
font-size: 0.75rem;
}
}
#hero {
margin-top: 0.7em;
}
@media (max-width: 767.98px) {
#hero {
margin-top: 0.5rem;
}
#hero .container {
padding-left: 1rem;
padding-right: 1rem;
}
#logo-hero-full-block-sm {
margin-bottom: 2rem !important;
}
#hero h1 {
font-size: 1.75rem !important;
margin-bottom: 1.5rem;
text-align: center;
}
#hero h1 span {
display: block;
line-height: 1.2;
}
#div-btn-custom-animate {
display: none !important;
}
#hero-cta-mobile {
display: block !important;
margin: 2rem auto;
text-align: center;
}
#hero-cta-mobile .btn {
font-size: 1.15rem !important;
padding: 1.25rem 2.5rem !important;
box-shadow: 0 4px 15px rgba(0, 255, 157, 0.3);
min-width: 250px;
}
}
@media (min-width: 768px) {
#hero-cta-mobile {
display: none !important;
}
}
#main_container {
opacity: 1;
}
#logo-hero {
background: url("../../assets/img/saintchannel_logo_ico_square_268.png") center / contain no-repeat;
width: 34px;
height: 40px;
}
.menu-hero-active {
color: var(--bs-primary) !important;
font-weight: bold;
}
#hero-navbar {
height: 50px;
}
.btn-custom-full {
border-radius: 30px;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 10px;
padding-left: 10px;
--bs-light-rgb: 255,255,255;
color: var(--bs-black) !important;
margin-left: 15px;
}
body {
height: 4000px;
}
#render-check {
position: absolute;
bottom: 0;
right: 0;
width: 1px;
height: 1px;
opacity: 0;
}
#header-image {
max-width: 100%;
left: 1%;
position: relative;
}
#cta-ida-big-div {
border-radius: 100px;
display: inline-block !important;
}
#cta-ida-big-btn {
border-radius: 100px;
padding: 20px;
}
#cta-big-block {
position: relative;
}
.p-around-cta-ida-big {
font-size: 0.7em;
}
@media (max-width: 767.98px) {
#cta-big-block {
display: none !important;
}
}
.logo-hero-full {
margin-top: -5%;
z-index: 3;
}
@media (max-width: 767px) {
#logo-hero-full-block {
display: none !important;
}
}
@media (min-width: 767px) {
#logo-hero-full-block-sm {
display: none !important;
}
}
#laser-div {
position: relative;
}
#laser-lamp {
width: max-content;
}
#laser-lamp::after {
content: '';
background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(0,103,213,1) 50%, rgba(0,212,255,0) 100%);
position: absolute;
width: 45vw;
height: 3px;
margin-top: 2.5em;
left: 50%;
transform: translateX(-50%);
z-index: -5;
}
@media (max-width: 575.98px) {
#laser-lamp {
width: 80vw;
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
#laser-lamp {
width: 70vw;
}
}
@media (min-width: 768px) {
#laser-lamp {
width: clamp(200px, 80%, 350px);
}
}
#space-to-header {
height: 9em;
}
h1 {
color: var(--st-text-primary, #ffffff);
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
}
h2 {
color: var(--st-text-primary, #ffffff);
font-weight: 600;
line-height: 1.3;
margin-bottom: 0.8rem;
}
h3 {
color: var(--st-text-accent, #f0f6fc);
font-weight: 600;
line-height: 1.4;
margin-bottom: 0.6rem;
}
h4 {
color: var(--st-text-accent, #f0f6fc);
font-weight: 500;
line-height: 1.4;
margin-bottom: 0.5rem;
}
h5 {
color: var(--st-text-secondary, #a0a0a0);
font-weight: 500;
line-height: 1.5;
margin-bottom: 0.4rem;
}
h6 {
color: var(--st-text-secondary, #a0a0a0);
font-weight: 500;
line-height: 1.5;
margin-bottom: 0.3rem;
text-transform: uppercase;
font-size: 0.875rem;
letter-spacing: 0.5px;
}
p {
color: var(--st-text-secondary, #a0a0a0);
line-height: 1.6;
margin-bottom: 1rem;
}
.lead {
color: var(--st-text-accent, #f0f6fc);
font-size: 1.125rem;
font-weight: 300;
line-height: 1.7;
}
small {
color: var(--st-text-muted, #666666);
font-size: 0.875rem;
}
strong, b {
color: var(--st-text-primary, #ffffff);
font-weight: 600;
}
em, i {
color: var(--st-text-accent, #f0f6fc);
}
a {
color: var(--st-primary, #00ff9d);
text-decoration: none;
transition: all 0.3s ease;
}
a:hover {
color: var(--st-primary-light, #33ffac);
text-shadow: 0 0 8px rgba(var(--st-primary-rgb), 0.3);
}
code {
color: var(--st-green-neon, #00ff41);
background-color: var(--st-dark-card, #111111);
padding: 0.2rem 0.4rem;
border-radius: 4px;
font-size: 0.875rem;
}
pre {
background-color: var(--st-dark-card, #111111);
color: var(--st-text-accent, #f0f6fc);
padding: 1rem;
border-radius: 8px;
border-left: 4px solid var(--st-primary, #00ff9d);
overflow-x: auto;
}
blockquote {
border-left: 4px solid var(--st-primary, #00ff9d);
padding-left: 1rem;
margin: 1rem 0;
color: var(--st-text-accent, #f0f6fc);
font-style: italic;
background-color: rgba(var(--st-primary-rgb), 0.05);
padding: 1rem;
border-radius: 0 8px 8px 0;
}
ul, ol {
color: var(--st-text-secondary, #a0a0a0);
line-height: 1.6;
}
li {
margin-bottom: 0.3rem;
}
ul li::marker {
color: var(--st-primary, #00ff9d);
}
ol li::marker {
color: var(--st-primary, #00ff9d);
font-weight: 600;
}
hr {
border: none;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--st-primary, #00ff9d) 50%,
transparent 100%);
margin: 2rem 0;
opacity: 0.3;
}
.text-primary {
color: var(--st-primary, #00ff9d) !important;
}
.text-secondary {
color: var(--st-text-secondary, #a0a0a0) !important;
}
.text-muted {
color: var(--st-text-muted, #666666) !important;
}
.text-white {
color: var(--st-text-primary, #ffffff) !important;
}
.text-glow {
text-shadow: 0 0 10px rgba(var(--st-primary-rgb), 0.5);
}
.text-neon {
color: var(--st-green-neon, #00ff41);
text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
}
.btn-stchannel-primary {
background: var(--st-gradient-primary, linear-gradient(135deg, #00ff9d 0%, #00cc7d 100%));
border: 2px solid var(--st-primary, #00ff9d);
color: var(--st-dark, #0a0a0a) !important;
font-weight: 600;
border-radius: 50px;
padding: 12px 24px;
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: none;
letter-spacing: 0.5px;
box-shadow: var(--st-shadow-primary, 0 4px 6px rgba(0, 255, 157, 0.1));
}
.btn-stchannel-primary:hover {
background: var(--st-gradient-primary-intense, linear-gradient(135deg, #00ff41 0%, #00ff9d 50%, #33ffac 100%));
border-color: var(--st-green-neon, #00ff41);
color: var(--st-dark, #0a0a0a) !important;
transform: translateY(-3px) scale(1.02);
box-shadow:
0 0 25px rgba(0, 255, 157, 0.8),
0 0 50px rgba(0, 255, 157, 0.6),
0 0 75px rgba(0, 255, 157, 0.4),
0 0 100px rgba(0, 255, 157, 0.2);
}
.btn-stchannel-primary:active {
transform: translateY(-1px) scale(1.01);
box-shadow:
0 0 15px rgba(0, 255, 157, 0.6),
0 0 30px rgba(0, 255, 157, 0.4);
}
.btn-stchannel-primary i,
.btn-stchannel-primary .fas,
.btn-stchannel-primary .fab,
.btn-stchannel-primary .bi {
color: var(--st-dark, #0a0a0a) !important;
opacity: 0.9;
transition: all 0.3s ease;
}
.btn-stchannel-primary:hover i,
.btn-stchannel-primary:hover .fas,
.btn-stchannel-primary:hover .fab,
.btn-stchannel-primary:hover .bi {
color: var(--st-dark, #0a0a0a) !important;
opacity: 1;
text-shadow: 0 0 5px rgba(10, 10, 10, 0.3);
}
.btn-stchannel-secondary {
background: transparent;
border: 2px solid var(--st-primary, #00ff9d);
color: var(--st-primary, #00ff9d) !important;
font-weight: 500;
border-radius: 50px;
padding: 12px 24px;
position: relative;
transition: all 0.3s ease;
letter-spacing: 0.5px;
box-shadow: inset 0 0 0 0 var(--st-primary, #00ff9d);
}
.btn-stchannel-secondary:hover {
color: var(--st-dark, #0a0a0a) !important;
box-shadow:
inset 0 0 0 50px var(--st-primary, #00ff9d),
0 0 25px rgba(0, 255, 157, 0.8),
0 0 50px rgba(0, 255, 157, 0.6),
0 0 75px rgba(0, 255, 157, 0.4),
0 0 100px rgba(0, 255, 157, 0.2);
border-color: var(--st-green-neon, #00ff41);
text-shadow: none;
transform: translateY(-3px) scale(1.02);
}
.btn-stchannel-ghost {
background: rgba(var(--st-primary-rgb), 0.1);
border: 1px solid rgba(var(--st-primary-rgb), 0.3);
color: var(--st-primary, #00ff9d) !important;
font-weight: 400;
border-radius: 25px;
padding: 8px 16px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.btn-stchannel-ghost:hover {
background: rgba(var(--st-primary-rgb), 0.2);
border-color: var(--st-primary, #00ff9d);
color: var(--st-primary-light, #33ffac) !important;
transform: translateY(-3px) scale(1.02);
box-shadow:
0 0 20px rgba(0, 255, 157, 0.6),
0 0 40px rgba(0, 255, 157, 0.4),
0 0 60px rgba(0, 255, 157, 0.3);
backdrop-filter: blur(15px);
}
.btn-stchannel-secondary:active {
transform: translateY(-1px) scale(1.01);
color: var(--st-dark, #0a0a0a) !important;
background: var(--st-primary, #00ff9d) !important;
border-color: var(--st-green-neon, #00ff41) !important;
box-shadow:
inset 0 0 0 2px var(--st-green-neon, #00ff41),
0 0 15px rgba(0, 255, 157, 0.6),
0 0 30px rgba(0, 255, 157, 0.4) !important;
}
.btn-stchannel-ghost:active {
transform: translateY(-1px) scale(1.01);
box-shadow:
0 0 10px rgba(0, 255, 157, 0.5),
0 0 20px rgba(0, 255, 157, 0.3);
}
.btn-stchannel-lg {
padding: 16px 32px;
font-size: 1.1rem;
border-radius: 60px;
}
.btn-stchannel-lg:hover {
transform: translateY(-4px) scale(1.03);
box-shadow:
0 0 30px rgba(0, 255, 157, 0.8),
0 0 60px rgba(0, 255, 157, 0.6),
0 0 90px rgba(0, 255, 157, 0.4),
0 0 120px rgba(0, 255, 157, 0.2);
}
.btn-stchannel-sm {
padding: 8px 16px;
font-size: 0.875rem;
border-radius: 30px;
}
.btn-stchannel-sm:hover {
transform: translateY(-2px) scale(1.01);
box-shadow:
0 0 15px rgba(0, 255, 157, 0.6),
0 0 30px rgba(0, 255, 157, 0.4),
0 0 45px rgba(0, 255, 157, 0.2);
}
.btn-stchannel-primary i,
.btn-stchannel-secondary i,
.btn-stchannel-ghost i {
transition: transform 0.3s ease, color 0.3s ease;
}
.btn-stchannel-primary:hover i,
.btn-stchannel-secondary:hover i,
.btn-stchannel-ghost:hover i {
transform: translateX(3px);
}
.btn-stchannel-secondary:hover i {
color: var(--st-dark, #0a0a0a) !important;
transform: translateX(3px);
}
.btn-stchannel-secondary:active i {
color: var(--st-dark, #0a0a0a) !important;
transform: translateX(3px);
}
.btn-stchannel-secondary:active:focus,
.btn-stchannel-secondary.pressed {
color: var(--st-dark, #0a0a0a) !important;
background: var(--st-primary, #00ff9d) !important;
border-color: var(--st-green-neon, #00ff41) !important;
box-shadow:
inset 0 0 0 2px var(--st-green-neon, #00ff41),
0 0 15px rgba(0, 255, 157, 0.6),
0 0 30px rgba(0, 255, 157, 0.4) !important;
}
.btn-stchannel-primary:focus,
.btn-stchannel-secondary:focus,
.btn-stchannel-ghost:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(var(--st-primary-rgb), 0.3);
}
.btn-stchannel-primary:disabled,
.btn-stchannel-secondary:disabled,
.btn-stchannel-ghost:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn-custom-animate {
animation: pulse-glow 2s ease-in-out infinite;
}
.btn-custom-animate.btn-stchannel-primary:hover,
.btn-custom-animate.btn-stchannel-secondary:hover,
.btn-custom-animate.btn-stchannel-ghost:hover {
animation: none;
}
.btn-custom-animate.btn-stchannel-primary:hover {
transform: translateY(-4px) scale(1.05);
box-shadow:
0 0 30px rgba(0, 255, 157, 0.9),
0 0 60px rgba(0, 255, 157, 0.7),
0 0 90px rgba(0, 255, 157, 0.5),
0 0 120px rgba(0, 255, 157, 0.3);
}
.portfolio-button.btn-stchannel-secondary {
position: relative;
overflow: hidden;
}
.portfolio-button.btn-stchannel-secondary:hover {
animation: none;
box-shadow:
inset 0 0 0 50px var(--st-primary, #00ff9d),
0 0 25px rgba(0, 255, 157, 0.8),
0 0 50px rgba(0, 255, 157, 0.6),
0 0 75px rgba(0, 255, 157, 0.4),
0 0 100px rgba(0, 255, 157, 0.2);
border-color: var(--st-green-neon, #00ff41);
text-shadow: none;
transform: translateY(-3px) scale(1.02);
}
.portfolio-button.btn-stchannel-secondary:active {
transform: translateY(-1px) scale(1.01);
color: var(--st-dark, #0a0a0a) !important;
background: var(--st-primary, #00ff9d) !important;
border-color: var(--st-green-neon, #00ff41) !important;
box-shadow:
inset 0 0 0 2px var(--st-green-neon, #00ff41),
0 0 15px rgba(0, 255, 157, 0.6),
0 0 30px rgba(0, 255, 157, 0.4) !important;
}
@keyframes pulse-glow {
0%, 100% {
box-shadow:
0 4px 6px rgba(0, 255, 157, 0.1),
0 0 10px rgba(0, 255, 157, 0.2);
}
50% {
box-shadow:
0 10px 25px rgba(0, 255, 157, 0.15),
0 0 20px rgba(0, 255, 157, 0.4),
0 0 40px rgba(0, 255, 157, 0.2);
}
}
:root {
--chat-input-wrapper-height: 150px; 
}
.chat-container * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.chat-container {
display: flex;
flex-direction: column;
width: 100%;
height: var(--chat-container-height);
background-color: var(--chat-bg);
border-radius: var(--chat-border-radius);
font-family: var(--chat-font-family);
font-size: var(--chat-font-size);
overflow: hidden;
position: relative;
border: 1px solid var(--chat-border);
box-shadow: var(--chat-box-shadow);
color: var(--chat-text);
}
.chat-container .chat-body {
display: flex;
flex: 1 1 auto;
overflow: hidden;
position: relative;
height: calc(100% - var(--chat-header-height));
min-height: var(--chat-container-min-height);
}
.chat-container .chat-main {
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
position: relative;
}
.chat-container .chat-messages-wrapper {
display: flex;
flex-direction: column;
flex: 1 1 auto;
overflow: hidden;
position: relative;
background-color: var(--chat-bg);
}
.chat-container .chat-tabs-container {
width: 100%;
flex: 0 0 auto;
border-top: 1px solid var(--chat-border);
}
.chat-container .chat-tabs-bottom {
background-color: var(--chat-bg-dark);
border: none;
display: flex;
flex-direction: column;
}
.chat-container .chat-tab-buttons {
display: flex;
align-items: center;
height: var(--chat-tabs-height);
padding: 0 0.5rem;
overflow-x: auto;
background-color: var(--chat-bg-dark);
border-bottom: none;
}
.chat-container .chat-tab-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: var(--chat-spacing-md) var(--chat-spacing-lg);
background: none;
color: var(--chat-text);
font-size: 0.9rem;
border: none;
border-bottom: 3px solid transparent;
white-space: nowrap;
cursor: pointer;
transition: var(--chat-transition);
justify-content: center;
position: relative;
font-weight: 500;
border-top-right-radius: var(--chat-border-radius-lg);
border-top-left-radius: var(--chat-border-radius-lg);
}
.chat-container .chat-tab-button.active {
color: var(--chat-bg-dark);
background-color: var(--chat-primary);
border-top-right-radius: var(--chat-border-radius-lg);
border-top-left-radius: var(--chat-border-radius-lg);
}
.chat-container .chat-tab-button:hover:not(.active) {
background-color: var(--chat-bg-hover);
}
.chat-container .chat-tab-button svg {
width: 16px;
height: 16px;
}
.chat-container .chat-tab-content {
height: var(--chat-tabs-content-height);
overflow-y: auto;
transition: height 0.3s ease;
flex: 1;
background-color: var(--chat-bg);
overflow: hidden;
}
.chat-container .chat-tab-pane {
display: none;
padding: var(--chat-spacing-md);
overflow-y: auto;
height: 100%;
}
.chat-container .chat-tab-pane.active {
display: block;
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.chat-container .chat-chat-preset-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--chat-spacing-sm);
}
.chat-container .chat-preset-button {
background-color: var(--chat-bg-light);
color: var(--chat-text);
border: 1px solid var(--chat-border);
border-radius: 20px;
padding: 6px 12px;
font-size: var(--chat-font-size-sm);
cursor: pointer;
transition: var(--chat-transition);
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200px;
}
.chat-container .chat-preset-button:hover {
background-color: var(--chat-bg-hover);
border-color: var(--chat-primary);
color: var(--chat-primary);
}
.chat-container .sct-chat-attachment {
display: flex;
background-color: var(--chat-bg-light);
border: 1px solid var(--chat-border);
border-radius: var(--chat-border-radius);
padding: var(--chat-spacing-md);
margin: var(--chat-spacing-sm) 0;
transition: var(--chat-transition);
max-width: 100%;
width: 100%;
}
.chat-container .sct-chat-attachment:hover {
background-color: var(--chat-bg-hover);
border-color: var(--chat-primary);
}
.chat-container .sct-chat-attachment-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--chat-primary-light);
border-radius: var(--chat-border-radius);
margin-right: var(--chat-spacing-md);
}
.chat-container .sct-chat-attachment-icon svg {
width: 24px;
height: 24px;
color: var(--chat-primary);
}
.chat-container .sct-chat-attachment-content {
flex: 1;
min-width: 0;
overflow: hidden;
}
.chat-container .sct-chat-attachment-title {
font-weight: 600;
margin-bottom: var(--chat-spacing-xs);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-container .sct-chat-attachment-meta {
font-size: var(--chat-font-size-xs);
color: var(--chat-text-muted);
}
.chat-container .sct-chat-attachment-actions {
display: flex;
align-items: center;
margin-left: var(--chat-spacing-md);
flex-shrink: 0;
}
.chat-container .sct-chat-attachment-btn {
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: var(--chat-text);
cursor: pointer;
transition: var(--chat-transition);
padding: 0;
margin-left: var(--chat-spacing-sm);
}
.chat-container .sct-chat-attachment-btn:hover {
background-color: var(--chat-bg-hover);
color: var(--chat-primary);
}
.chat-container .sct-chat-attachment-btn svg {
width: 18px;
height: 18px;
}
@media (max-width: 768px) {
.chat-container .chat-body {
flex-direction: column;
}
.chat-container .chat-tab-button span {
display: none;
}
.chat-container .chat-tab-button {
padding: var(--chat-spacing-sm) var(--chat-spacing-md);
}
.chat-container .chat-preset-button {
width: 100%;
}
}
.chat-container .chat-tab-pane::-webkit-scrollbar {
width: 6px;
}
.chat-container .chat-tab-pane::-webkit-scrollbar-track {
background: transparent;
}
.chat-container .chat-tab-pane::-webkit-scrollbar-thumb {
background-color: var(--chat-primary);
border-radius: 20px;
border: 2px solid var(--chat-bg-light);
}
.chat-container.chat-fullscreen {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: var(--chat-zindex-fullscreen);
width: 100% !important;
height: 100vh !important;
max-width: none !important;
max-height: none !important;
margin: 0;
border-radius: 0;
border: none;
}
.chat-fullscreen-active {
overflow: hidden;
}
.chat-position-embed {
position: relative;
height: 100%;
}
.chat-position-fixed {
position: fixed;
bottom: var(--chat-spacing-xl);
right: var(--chat-spacing-xl);
width: 380px;
height: 600px;
z-index: var(--chat-zindex-fixed);
box-shadow: var(--chat-box-shadow);
border-radius: var(--chat-border-radius);
overflow: hidden;
}
.chat-position-bottom {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 80vh;
max-height: 700px;
z-index: var(--chat-zindex-fixed);
border-radius: var(--chat-border-radius-lg) var(--chat-border-radius-lg) 0 0;
box-shadow: var(--chat-box-shadow-top);
overflow: hidden;
}
.chat-position-icon-left {
position: fixed;
bottom: var(--chat-spacing-xl);
left: var(--chat-spacing-xl);
z-index: var(--chat-zindex-fixed);
}
.chat-position-center {
position: relative;
margin-left: auto;
margin-right: auto;
display: block;
box-shadow: var(--chat-box-shadow);
border-radius: var(--chat-border-radius);
overflow: hidden;
}
.centered-chat-container {
display: flex;
justify-content: center;
align-items: center;
}
.chat-loading-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--chat-spinner-overlay-bg);
opacity: var(--chat-spinner-overlay-opacity);
z-index: var(--chat-zindex-spinner); 
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}
.chat-loading-overlay.hidden {
opacity: 0;
visibility: hidden;
}
.chat-spinner {
width: var(--chat-spinner-size);
height: var(--chat-spinner-size);
border: var(--chat-spinner-border-width) solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top-color: var(--chat-spinner-color);
animation: chat-spinner-rotation 1s linear infinite;
}
@keyframes chat-spinner-rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media (max-width: 768px) {
.chat-container.chat-fullscreen .chat-body {
padding-bottom: var(--chat-input-wrapper-height);
}
.chat-container.chat-fullscreen .chat-messages {
scroll-padding-bottom: calc(var(--chat-input-wrapper-height) + 20px);
}
}
.chat-container #chat-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--chat-spacing-lg);
background-color: var(--chat-bg-dark);
color: var(--chat-text);
height: var(--chat-header-height);
min-height: var(--chat-header-height);
max-height: var(--chat-header-height);
width: 100%;
border-bottom: 1px solid var(--chat-border);
flex: 0 0 auto;
z-index: var(--chat-zindex-fixed);
}
.chat-container #ida-logo {
flex-shrink: 0;
width: 50px;
height: 20px;
}
.chat-container #ida-logo svg {
width: 100%;
height: auto;
fill: var(--chat-text);
}
.chat-container #chat-token-display {
margin: 0 var(--chat-spacing-md);
font-size: var(--chat-font-size-sm);
color: var(--chat-text);
display: flex;
flex-direction: column;
align-items: center;
padding: var(--chat-spacing-xs) var(--chat-spacing-sm);
background-color: var(--chat-bg-light);
border-radius: var(--chat-border-radius);
min-width: 180px;
gap: var(--chat-spacing-xs);
opacity: 0.85;
}
.chat-container .token-counters {
display: flex;
gap: var(--chat-spacing-md);
align-items: center;
}
.chat-container .token-item {
display: flex;
gap: var(--chat-spacing-xs);
font-size: var(--chat-font-size-xs);
color: var(--chat-text);
}
.chat-container .token-label {
color: var(--chat-text-muted);
font-size: 0.9em;
}
.token-recalculate-btn {
background: transparent;
color: #666;
border: none;
border-radius: 50%;
width: 24px;
height: 24px;
padding: 3px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: var(--chat-spacing-xs);
transition: var(--chat-transition);
}
.token-recalculate-btn:hover {
background-color: rgba(0, 0, 0, 0.1);
color: #000;
transform: rotate(30deg);
}
.token-recalculate-btn svg {
width: 14px;
height: 14px;
}
.dark-mode .token-recalculate-btn {
color: #aaa;
}
.dark-mode .token-recalculate-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
color: #fff;
}
.chat-container #chat-options {
display: flex;
align-items: center;
gap: var(--chat-spacing-sm);
}
.chat-container .chat-provider-selector,
.chat-container .chat-model-selector {
position: relative;
}
.chat-container .chat-provider-select,
.chat-container .chat-model-select {
padding: 0.3rem 1rem 0.3rem 0.5rem;
border: 1px solid var(--chat-border);
border-radius: var(--chat-border-radius);
background-color: var(--chat-primary-light);
font-size: var(--chat-font-size-xs);
color: var(--chat-text);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
position: relative;
min-width: 120px;
}
.chat-container .chat-provider-select option,
.chat-container .chat-model-select option {
background-color: var(--chat-bg-dark);
color: var(--chat-text);
padding: var(--chat-spacing-sm);
}
.chat-container .chat-provider-select:focus,
.chat-container .chat-model-select:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}
.chat-container .chat-provider-selector::after,
.chat-container .chat-model-selector::after {
content: '';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
border: 5px solid transparent;
border-top-color: var(--chat-text);
pointer-events: none;
}
.chat-container .chat-icon-button {
width: var(--chat-button-size);
height: var(--chat-button-size);
background-color: transparent;
color: var(--chat-text);
border: none;
border-radius: 50%;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
transition: var(--chat-transition);
position: relative;
overflow: hidden;
}
.chat-container .chat-icon-button:hover {
background-color: var(--chat-bg-hover);
color: var(--chat-primary);
}
.chat-container .fullscreen-button {
position: relative;
}
.chat-container .fullscreen-button.active {
background-color: var(--chat-primary);
color: var(--chat-bg-dark);
transform: scale(1.05);
}
.chat-container .fullscreen-button::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, 0.5);
opacity: 0;
border-radius: 100%;
transform: scale(1, 1) translate(-50%, -50%);
transform-origin: 50% 50%;
}
.chat-container .fullscreen-button:active::after {
animation: ripple 0.5s ease-out;
}
.chat-container.fullscreen-transitioning {
transition: all 0.4s ease-out !important;
}
@keyframes ripple {
0% { transform: scale(0, 0); opacity: 0.7; }
20% { transform: scale(20, 20); opacity: 0.5; }
100% { opacity: 0; transform: scale(40, 40); }
}
.chat-container .chat-icon-button svg {
width: var(--chat-button-icon-size);
height: var(--chat-button-icon-size);
stroke: currentColor;
fill: none;
}
.chat-container .chat-menu {
position: absolute;
top: var(--chat-header-height);
right: 0;
background-color: var(--chat-bg-light);
border: 1px solid var(--chat-border);
border-radius: var(--chat-border-radius);
width: var(--chat-dropdown-width);
box-shadow: var(--chat-box-shadow-light);
z-index: var(--chat-zindex-dropdown);
overflow: hidden;
transform-origin: top right;
transition: var(--chat-transition);
}
.chat-container .chat-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--chat-spacing-md) var(--chat-spacing-lg);
border-bottom: 1px solid var(--chat-border);
}
.chat-container .chat-menu-title {
margin: 0;
font-size: var(--chat-font-size-lg);
font-weight: 500;
}
.chat-container .chat-menu-close {
background: none;
border: none;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
padding: 0;
}
.chat-container .chat-menu-body {
padding: var(--chat-spacing-md);
}
.chat-container .chat-menu-buttons {
display: flex;
flex-direction: column;
gap: var(--chat-spacing-sm);
}
.chat-container .chat-menu-button {
display: flex;
align-items: center;
gap: var(--chat-spacing-md);
background: none;
border: none;
padding: var(--chat-spacing-md);
text-align: left;
border-radius: var(--chat-border-radius);
cursor: pointer;
transition: var(--chat-transition);
font-size: 0.95rem;
color: var(--chat-text);
}
.chat-container .chat-menu-button:hover {
background-color: var(--chat-bg-hover);
}
@media (max-width: 768px) {
.chat-container #chat-header {
padding: 0 var(--chat-spacing-md);
}
.chat-container #chat-token-display {
position: absolute;
top: var(--chat-header-height);
right: var(--chat-spacing-md);
background-color: var(--chat-bg-dark);
border: 1px solid var(--chat-border);
z-index: var(--chat-zindex-dropdown);
transform: scale(0.8);
transform-origin: top right;
display: none;
}
.chat-container #chat-token-display.show-mobile {
display: flex;
}
.chat-container .chat-provider-select,
.chat-container .chat-model-select {
max-width: 100px;
min-width: auto;
font-size: var(--chat-font-size-sm);
padding: 5px 20px 5px 8px;
}
}
.chat-container .chat-messages {
flex: 1 1 auto;
overflow-y: auto;
padding: var(--chat-message-spacing);
display: flex;
flex-direction: column;
gap: var(--chat-message-gap);
scroll-behavior: smooth;
}
.chat-container .message {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
max-width: 80%;
position: relative;
padding: 0.75rem 1rem;
border-radius: var(--chat-border-radius);
animation: messageFadeIn 0.3s ease forwards;
}
.chat-container .message-content {
word-break: break-word;
line-height: 1.5;
white-space: pre-wrap;
}
.chat-container .message-timestamp {
font-size: var(--chat-font-size-xs);
color: var(--chat-text-muted);
margin-bottom: 0.25rem;
text-align: right;
}
.chat-container .message.user {
background-color: var(--chat-message-user-bg);
color: var(--chat-message-user-text);
border: 1px solid var(--chat-message-user-border);
border-radius: var(--chat-border-radius) 0 var(--chat-border-radius) var(--chat-border-radius);
align-self: flex-end;
margin-left: auto;
}
.chat-container .message.user p {
color: var(--chat-message-user-text);
}
.chat-container .message.assistant {
background-color: var(--chat-message-assistant-bg);
color: var(--chat-message-assistant-text);
border: 1px solid var(--chat-message-assistant-border);
border-radius: 0 var(--chat-border-radius) var(--chat-border-radius) var(--chat-border-radius);
align-self: flex-start;
margin-right: auto;
box-shadow: var(--chat-box-shadow-input);
}
.chat-container .message.assistant p {
color: var(--chat-message-assistant-text);
}
.chat-container .message.assistant .message-timestamp {
text-align: left;
}
.chat-container .message.system {
background-color: var(--chat-message-system-bg);
color: var(--chat-message-system-text);
border: 1px solid var(--chat-message-system-border);
max-width: 90%;
align-self: center;
text-align: center;
border-radius: var(--chat-border-radius);
}
.chat-container .message.notification {
max-width: 90%;
align-self: center;
border-radius: var(--chat-border-radius);
padding: 1rem 1.25rem;
margin: 1rem auto;
display: flex;
flex-direction: column;
gap: 0.75rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
animation: notificationSlideIn 0.4s ease-out forwards;
}
.chat-container .message.notification .notification-header {
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 600;
}
.chat-container .message.notification .notification-icon {
font-size: 1.25rem;
flex-shrink: 0;
}
.chat-container .message.notification .notification-body {
line-height: 1.6;
text-align: left;
}
.chat-container .message.notification .notification-actions {
display: flex;
gap: 0.5rem;
margin-top: 0.5rem;
flex-wrap: wrap;
}
.chat-container .message.notification .notification-btn {
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
display: inline-block;
}
.chat-container .message.notification .notification-btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.chat-container .message.notification.error {
background-color: #fee;
border: 2px solid #fcc;
color: #c33;
}
.chat-container .message.notification.error .notification-btn {
background-color: #c33;
color: white;
}
.chat-container .message.notification.error .notification-btn:hover {
background-color: #a22;
}
.chat-container .message.notification.warning {
background-color: #fff3cd;
border: 2px solid #ffc107;
color: #856404;
}
.chat-container .message.notification.warning .notification-btn {
background-color: #ffc107;
color: #212529;
}
.chat-container .message.notification.warning .notification-btn:hover {
background-color: #e0a800;
}
.chat-container .message.notification.info {
background-color: #d1ecf1;
border: 2px solid #17a2b8;
color: #0c5460;
}
.chat-container .message.notification.info .notification-btn {
background-color: #17a2b8;
color: white;
}
.chat-container .message.notification.info .notification-btn:hover {
background-color: #138496;
}
.chat-container .message.notification.success {
background-color: #d4edda;
border: 2px solid #28a745;
color: #155724;
}
.chat-container .message.notification.success .notification-btn {
background-color: #28a745;
color: white;
}
.chat-container .message.notification.success .notification-btn:hover {
background-color: #218838;
}
@keyframes notificationSlideIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.chat-container .chat-welcome {
text-align: center;
padding: 1.5rem;
color: var(--chat-text);
max-width: 90%;
width: 500px;
margin: auto;
background-color: var(--chat-bg-light);
border: 1px solid var(--chat-border);
border-radius: var(--chat-border-radius);
box-shadow: var(--chat-box-shadow-light);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.chat-container .chat-welcome h2 {
font-size: var(--chat-font-size-xl);
margin-bottom: var(--chat-spacing-md);
color: var(--chat-primary);
}
.chat-container .chat-welcome p {
margin-bottom: var(--chat-spacing-md);
line-height: 1.5;
}
.chat-container .chat-provider-info {
font-size: var(--chat-font-size-sm);
opacity: 0.7;
margin-top: var(--chat-spacing-md);
padding-top: 0.5rem;
border-top: 1px solid var(--chat-border);
}
.chat-container .typing-message {
padding-top: var(--chat-spacing-md) !important;
padding-bottom: var(--chat-spacing-md) !important;
}
.chat-container .typing-indicator {
display: flex;
align-items: center;
gap: 6px;
padding: var(--chat-spacing-xs);
}
.chat-container .typing-indicator .typing-indicator-label {
order: -1;
margin-right: 6px;
width: auto;
height: auto;
background: none;
border-radius: 0;
opacity: 1;
animation: none;
color: var(--chat-text-muted);
font-size: var(--chat-font-size-sm);
line-height: 1.3;
white-space: normal;
flex: 1 1 auto;
min-width: 0;
}
.chat-container .typing-indicator span {
display: inline-block;
width: 8px;
height: 8px;
background-color: var(--chat-primary);
border-radius: 50%;
opacity: 0.7;
animation: typingBounce 1.4s infinite ease-in-out;
}
.chat-container .typing-indicator span:nth-child(1) {
animation-delay: 0s;
}
.chat-container .typing-indicator span:nth-child(2) {
animation-delay: 0.2s;
}
.chat-container .typing-indicator span:nth-child(3) {
animation-delay: 0.4s;
}
.chat-container .typing-label {
margin-top: 0.35rem;
font-size: var(--chat-font-size-sm);
color: var(--chat-text-muted);
line-height: 1.3;
}
@keyframes typingBounce {
0%, 60%, 100% {
transform: translateY(0);
}
30% {
transform: translateY(-6px);
}
}
.streaming-dots-inline {
display: inline-flex;
align-items: center;
gap: 3px;
margin-left: 4px;
vertical-align: middle;
}
.streaming-dots-inline .dot {
display: inline-block;
width: 6px;
height: 6px;
background-color: var(--chat-primary, #007bff);
border-radius: 50%;
opacity: 0.7;
animation: typingBounce 1.4s infinite ease-in-out;
}
.streaming-dots-inline .dot:nth-child(1) {
animation-delay: 0s;
}
.streaming-dots-inline .dot:nth-child(2) {
animation-delay: 0.2s;
}
.streaming-dots-inline .dot:nth-child(3) {
animation-delay: 0.4s;
}
.streaming-blocked {
pointer-events: none;
user-select: none;
}
.streaming-blocked a,
.streaming-blocked button,
.streaming-blocked [role="button"],
.streaming-blocked .action-button {
cursor: not-allowed;
opacity: 0.7;
}
.chat-container .sct-chat-attachment.in-message {
max-width: 320px;
margin-top: 5px;
margin-bottom: 5px;
align-self: flex-start;
}
.chat-container .message.user .sct-chat-attachment.in-message {
align-self: flex-end;
margin-left: auto;
}
@keyframes messageFadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.chat-container .chat-fullscreen #chat-messages {
height: calc(100% - var(--chat-header-height) - var(--chat-height-component)) !important;
margin-bottom: var(--chat-height-component) !important;
padding-bottom: calc(var(--chat-height-component) + 20px) !important;
}
.chat-container .chat-messages::-webkit-scrollbar {
width: 8px;
}
.chat-container .chat-messages::-webkit-scrollbar-track {
background: transparent;
}
.chat-container .chat-messages::-webkit-scrollbar-thumb {
background-color: var(--chat-primary);
border-radius: 20px;
border: 2px solid var(--chat-bg);
}
@media (max-width: 768px) {
.chat-container .message {
max-width: 90%;
}
.chat-container .chat-welcome {
width: 90%;
padding: var(--chat-spacing-md);
}
.chat-container.chat-fullscreen #chat-messages {
padding-bottom: calc(var(--chat-input-wrapper-height, 80px) + 60px) !important;
}
}
.chat-container .message-gallery {
margin: 0 !important;
padding: 0 !important;
border-radius: var(--chat-border-radius);
overflow: hidden;
position: relative;
display: block;
white-space: normal;
}
.chat-container .message-content > .message-gallery {
margin-top: 20px !important;
margin-bottom: 0.5rem !important;
}
@media (max-width: 480px) {
.chat-container .message-content > .message-gallery {
margin-top: 8px !important;
margin-bottom: 0.25rem !important;
}
}
.chat-container .message-content > p:empty,
.chat-container .message-content > p:has(> .message-gallery:only-child) {
display: contents;
margin: 0;
padding: 0;
}
.chat-container .gallery-container {
position: relative;
width: 100%;
overflow: hidden;
border-radius: var(--chat-border-radius);
background-color: transparent;
min-height: min(250px, 70vw);
}
.chat-container .gallery-container.gallery-single {
aspect-ratio: 16 / 9;
min-height: auto;
max-width: 520px;
margin: 0 auto;
}
.chat-container .gallery-track {
display: flex;
align-items: flex-start;
transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
will-change: transform;
gap: 8px;
padding: 0;
white-space: normal;
}
.chat-container .gallery-container:not(.gallery-single) .gallery-slide {
flex: 0 0 auto;
width: min(250px, 70vw);
aspect-ratio: 1 / 1;
position: relative;
overflow: hidden;
}
.chat-container .gallery-container.gallery-single .gallery-track {
justify-content: center;
}
.chat-container .gallery-container.gallery-single .gallery-slide {
flex: 0 0 auto;
width: min(100%, 520px);
aspect-ratio: 16 / 9;
position: relative;
overflow: hidden;
}
.chat-container .gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
cursor: pointer;
transition: opacity 0.2s ease, transform 0.2s ease;
border-radius: 6px;
}
.chat-container .gallery-single .gallery-image {
border-radius: 0;
}
.chat-container .gallery-image:hover {
opacity: 0.95;
}
.chat-container .gallery-image-placeholder {
width: 100%;
height: 150px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: galleryShimmer 1.5s infinite;
display: flex;
align-items: center;
justify-content: center;
color: var(--chat-text-muted);
font-size: 0.85rem;
}
@keyframes galleryShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.chat-container .gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.95);
color: #333;
font-size: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
transition: all 0.25s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
opacity: 1;
pointer-events: auto;
}
.chat-container .gallery-nav::before {
content: '';
width: 10px;
height: 10px;
border-right: 2.5px solid #333;
border-bottom: 2.5px solid #333;
display: block;
}
.chat-container .gallery-prev::before {
transform: rotate(135deg);
margin-left: 3px;
}
.chat-container .gallery-next::before {
transform: rotate(-45deg);
margin-right: 3px;
}
.chat-container .gallery-nav:hover {
background-color: var(--chat-primary, #007bff);
transform: translateY(-50%) scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.chat-container .gallery-nav:hover::before {
border-color: white;
}
.chat-container .gallery-nav:active {
transform: translateY(-50%) scale(0.95);
}
.chat-container .gallery-nav:disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
background-color: rgba(200, 200, 200, 0.7);
}
.chat-container .gallery-prev {
left: 6px;
}
.chat-container .gallery-next {
right: 6px;
}
.chat-container .gallery-dots {
display: flex;
justify-content: center;
gap: 6px;
position: absolute;
bottom: 6px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.3);
border-radius: 12px;
padding: 3px 8px;
}
.chat-container .gallery-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
border: none;
cursor: pointer;
padding: 0;
transition: all 0.2s ease;
}
.chat-container .gallery-dot:hover {
background-color: rgba(255, 255, 255, 0.8);
}
.chat-container .gallery-dot.active {
background-color: white;
transform: scale(1.2);
}
.chat-container .gallery-single .gallery-nav,
.chat-container .gallery-single .gallery-dots {
display: none;
}
.chat-container .gallery-counter {
position: absolute;
top: 8px;
right: 8px;
background-color: rgba(0, 0, 0, 0.6);
color: white;
font-size: 0.75rem;
padding: 2px 8px;
border-radius: 10px;
z-index: 5;
}
.chat-container .gallery-skeleton {
margin: 12px 0;
}
.chat-container .gallery-skeleton .gallery-container {
position: relative;
width: min(250px, 70vw);
min-height: 250px;
background: #f5f5f5;
border-radius: var(--chat-border-radius);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.chat-container .gallery-skeleton .gallery-container.gallery-single {
width: min(100%, 520px);
min-height: auto;
aspect-ratio: 16 / 9;
}
.chat-container .gallery-skeleton-gif {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--chat-border-radius);
}
.chat-container .gallery-skeleton-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: var(--chat-border-radius);
color: #999;
font-size: 0.9rem;
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.chat-gallery-lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.chat-gallery-lightbox.active {
opacity: 1;
visibility: visible;
}
.chat-gallery-lightbox img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
border-radius: 4px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.chat-gallery-lightbox .lightbox-close {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.2);
color: white;
font-size: 1.5rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease;
}
.chat-gallery-lightbox .lightbox-close:hover {
background-color: rgba(255, 255, 255, 0.3);
}
.chat-container .gallery-skeleton-single {
position: relative;
width: 100%;
max-width: 520px;
margin: 0 auto;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--chat-border-radius);
background-color: transparent;
}
.chat-container .gallery-skeleton-single .gallery-skeleton-gif {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 480px) {
.chat-container .gallery-container:not(.gallery-single) .gallery-slide {
flex: 0 0 auto;
width: min(180px, 70vw);
aspect-ratio: 1 / 1;
}
.chat-container .gallery-container:not(.gallery-single) {
min-height: min(180px, 70vw);
}
.chat-container .gallery-skeleton-single {
max-width: 100%;
}
.chat-container .gallery-nav {
width: 30px;
height: 30px;
}
.chat-container .gallery-nav::before {
width: 8px;
height: 8px;
border-width: 2px;
}
.chat-container .gallery-dots {
padding: 3px 8px;
}
.chat-container .gallery-dot {
width: 6px;
height: 6px;
}
}
.chat-container .gallery-container {
transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
contain: paint;
}
.chat-container:not(.chat-fullscreen) .gallery-container {
isolation: isolate;
}
.chat-container:not(.chat-fullscreen) .gallery-track {
will-change: auto;
transform: translateZ(0);
}
@media (max-width: 400px), (max-height: 500px) {
.chat-container .gallery-container {
contain: paint;
}
.chat-container .gallery-track {
transition: transform 0.25s ease-out;
will-change: auto;
}
.chat-container .gallery-slide {
transform: translateZ(0);
}
.chat-container .gallery-image {
transition: none;
}
.chat-container .gallery-nav {
transition: opacity 0.15s ease;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.chat-container .gallery-nav:hover {
transform: translateY(-50%);
}
}
.chat-container[style*="width"][style*="height"] .gallery-container,
.chat-container.embedded .gallery-container {
contain: strict;
}
.chat-container[style*="width"][style*="height"] .gallery-track,
.chat-container.embedded .gallery-track {
will-change: auto;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.chat-container .chat-input-wrapper {
position: sticky;
bottom: 0;
z-index: var(--chat-zindex-fixed);
width: 100%;
background-color: var(--chat-bg);
border-top: 1px solid var(--chat-border);
box-shadow: var(--chat-box-shadow-top);
margin: 0;
padding: 0;
box-sizing: border-box;
flex: 0 0 auto;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
backface-visibility: hidden;
}
.chat-container .chat-input-flex-container {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
padding: var(--chat-input-padding-y) var(--chat-input-padding-x);
background-color: var(--chat-bg);
gap: var(--chat-spacing-md);
border-top: none !important;
box-sizing: border-box;
margin: 0;
position: relative;
}
.chat-container .sct-chat-input-container {
position: relative;
flex: 1 1 auto;
min-width: 0;
}
.chat-container .sct-chat-input {
width: 100%;
min-height: 40px;
max-height: 100px;
padding: var(--chat-input-padding-y) var(--chat-input-padding-x);
padding-right: 50px;
border: 1px solid var(--chat-border);
border-radius: var(--chat-border-radius-xl);
background-color: var(--chat-bg-light);
color: var(--chat-text);
font-family: var(--chat-font-family);
font-size: var(--chat-font-size);
line-height: 1.5;
resize: none;
overflow-y: auto;
transition: border-color 0.2s, box-shadow 0.2s;
box-shadow: var(--chat-box-shadow-inset);
}
.chat-container .sct-chat-input:focus {
outline: none;
border-color: var(--chat-primary);
box-shadow: 0 0 0 1px var(--chat-primary-light), var(--chat-box-shadow-inset);
}
.chat-container .sct-chat-input::placeholder {
color: var(--chat-text-muted);
}
.chat-container .sct-chat-char-counter {
position: absolute;
bottom: 8px;
right: 16px;
font-size: var(--chat-font-size-xs);
color: var(--chat-text-muted);
background-color: transparent;
padding: 2px 5px;
border-radius: 10px;
pointer-events: none;
}
.chat-container .sct-chat-input-actions {
display: flex;
flex: 0 0 auto;
gap: var(--chat-spacing-sm);
align-items: center;
justify-content: flex-end;
min-width: 88px;
margin-left: auto;
position: relative;
}
.chat-container .sct-chat-input-button {
width: var(--chat-button-size);
height: var(--chat-button-size);
min-width: var(--chat-button-size);
min-height: var(--chat-button-size);
border-radius: var(--chat-button-radius);
display: flex;
align-items: center;
justify-content: center;
background-color: var(--chat-bg-light);
color: var(--chat-text);
border: 1px solid var(--chat-border);
cursor: pointer;
transition: var(--chat-transition);
padding: 0;
margin: 0;
flex: 0 0 auto;
box-shadow: var(--chat-box-shadow-input);
position: relative;
overflow: visible;
}
.chat-container .sct-chat-input-button:hover {
background-color: var(--chat-bg-hover);
color: var(--chat-primary);
transform: translateY(-2px);
box-shadow: var(--chat-box-shadow-hover);
}
.chat-container .sct-chat-input-button:active {
transform: translateY(0);
}
.chat-container .sct-chat-send-button {
background-color: var(--chat-primary);
color: var(--chat-bg-dark);
border: none;
}
.chat-container .sct-chat-send-button:hover {
background-color: var(--chat-primary);
opacity: 0.9;
color: var(--chat-bg-dark);
}
.chat-container .sct-chat-attachment-button input[type="file"] {
display: none;
}
.chat-container .sct-chat-input-button svg,
.chat-container .sct-chat-input-button [data-chat-icon] {
width: var(--chat-button-icon-size);
height: var(--chat-button-icon-size);
display: block;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.chat-container .sct-chat-input-button i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
}
.chat-container .sct-chat-attachment-button:after,
.chat-container .sct-chat-emoji-button:after,
.chat-container .sct-chat-send-button:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: var(--chat-button-icon-size);
height: var(--chat-button-icon-size);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.chat-container .sct-chat-attachment-button:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-paperclip' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0z'/%3E%3C/svg%3E");
}
.chat-container .sct-chat-emoji-button:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-emoji-smile' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5m4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5'/%3E%3C/svg%3E");
}
.chat-container .sct-chat-send-button:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23001a1a' class='bi bi-send-fill' viewBox='0 0 16 16'%3E%3Cpath d='M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471z'/%3E%3C/svg%3E");
}
.chat-container .chat-main {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
overflow: hidden;
width: 100%;
box-sizing: border-box;
}
.chat-container .chat-messages-wrapper {
flex: 1 1 auto;
overflow: hidden;
position: relative;
padding: 0;
display: flex;
flex-direction: column;
}
.chat-container .chat-messages {
height: calc(100% - var(--chat-input-height));
overflow-y: auto !important;
box-sizing: content-box;
margin-right: 0;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
scrollbar-gutter: stable both-edges !important;
padding-right: var(--chat-message-spacing) !important;
padding-left: var(--chat-message-spacing) !important;
padding-top: var(--chat-message-spacing) !important;
padding-bottom: var(--chat-message-spacing) !important;
overscroll-behavior: contain !important;
margin-bottom: 0 !important;
display: flex;
flex-direction: column;
}
.chat-container .chat-messages:after {
content: '';
display: block;
height: var(--chat-spacing-md);
flex-shrink: 0;
}
.chat-container .chat-main .chat-messages-wrapper .chat-messages::-webkit-scrollbar {
width: 10px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.chat-container .chat-main .chat-messages-wrapper .chat-messages::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1) !important;
border-radius: 10px !important;
margin: 5px !important;
}
.chat-container .chat-main .chat-messages-wrapper .chat-messages::-webkit-scrollbar-thumb {
background: var(--chat-primary) !important;
border-radius: 10px !important;
border: 2px solid transparent !important;
background-clip: content-box !important;
min-height: 30px !important;
}
.chat-container .chat-main .chat-messages-wrapper .chat-messages::-webkit-scrollbar-thumb:hover {
background: var(--chat-primary-hover) !important;
}
.chat-container .chat-main .chat-messages-wrapper .chat-messages {
scrollbar-width: auto !important;
scrollbar-color: var(--chat-primary) rgba(0, 0, 0, 0.1);
}
.chat-container .chat-main .chat-messages-wrapper .chat-messages {
-ms-overflow-style: auto !important;
}
.chat-container .sct-chat-menu-toggle {
position: relative;
z-index: 50;
background-color: var(--chat-bg-light);
transition: background-color 0.2s ease;
}
.chat-container .sct-chat-menu-toggle:hover {
background-color: var(--chat-bg-hover);
}
.chat-container .sct-chat-menu-toggle.active {
background-color: var(--chat-primary);
color: #fff;
}
.chat-container .sct-chat-input-dropdown-menu {
position: absolute;
bottom: calc(100% + 5px);
right: 8px;
width: var(--chat-dropdown-width);
background-color: var(--chat-bg);
border: 1px solid var(--chat-border);
border-radius: var(--chat-border-radius);
box-shadow: var(--chat-box-shadow-light);
z-index: var(--chat-zindex-dropdown);
overflow: hidden;
display: none;
flex-direction: column;
padding: 4px 0;
transform-origin: bottom right;
transform: scale(0.95);
opacity: 0;
transition: var(--chat-transition-fast);
}
.chat-container .sct-chat-input-dropdown-menu.open {
display: flex;
opacity: 1;
transform: scale(1);
}
.chat-container .sct-chat-input-dropdown-item {
display: flex;
align-items: center;
padding: var(--chat-spacing-sm) var(--chat-spacing-md);
cursor: pointer;
color: var(--chat-text);
text-decoration: none;
border: none;
background: none;
width: 100%;
text-align: left;
font-size: var(--chat-font-size);
transition: background-color 0.2s;
}
.chat-container .sct-chat-input-dropdown-item:hover {
background-color: var(--chat-bg-hover);
}
.chat-container .sct-chat-input-dropdown-item:active {
background-color: var(--chat-bg-active);
}
.chat-container .sct-chat-input-dropdown-item [data-chat-icon],
.chat-container .sct-chat-input-dropdown-item svg {
width: 18px;
height: 18px;
margin-right: var(--chat-spacing-md);
flex-shrink: 0;
}
.chat-container .sct-chat-input-dropdown-item-text {
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-container .chat-fullscreen .chat-input-wrapper {
position: fixed !important;
bottom: 0;
background-color: var(--chat-bg);
width: 100%;
box-sizing: border-box;
z-index: var(--chat-zindex-fullscreen);
border-top: 1px solid var(--chat-border);
left: 0;
right: 0;
padding-bottom: env(safe-area-inset-bottom, var(--chat-spacing-md));
}
.chat-container .chat-input-container {
display: flex;
align-items: center;
padding: var(--chat-input-padding-y) var(--chat-input-padding-x);
background-color: var(--chat-bg);
border-top: 1px solid var(--chat-border);
position: sticky;
bottom: 0;
left: 0;
right: 0;
width: 100%;
box-sizing: border-box;
z-index: var(--chat-zindex-fixed);
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
backface-visibility: hidden;
margin-top: 0;
margin-bottom: 0;
}
.chat-container .chat-input-area {
position: relative;
flex: 1;
min-width: 0;
margin-right: var(--chat-spacing-md);
}
.chat-container .chat-action-button {
width: var(--chat-button-size);
height: var(--chat-button-size);
min-width: var(--chat-button-size);
min-height: var(--chat-button-size);
border-radius: var(--chat-button-radius);
background-color: var(--chat-bg-light);
color: var(--chat-text);
border: 1px solid var(--chat-border);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--chat-transition);
position: relative;
padding: 0;
margin: 0;
flex: 0 0 auto;
}
.chat-container .chat-buttons-container {
display: flex;
gap: var(--chat-spacing-sm);
align-items: center;
flex-shrink: 0;
z-index: 2;
}
.chat-container .chat-dropdown-menu {
position: absolute;
bottom: 55px;
right: 10px;
width: var(--chat-dropdown-width);
background-color: var(--chat-bg);
border: 1px solid var(--chat-border);
border-radius: var(--chat-border-radius-lg);
box-shadow: var(--chat-box-shadow-light);
z-index: var(--chat-zindex-popover);
overflow: hidden;
display: none;
transform-origin: bottom right;
transform: scale(0.95);
opacity: 0;
transition: var(--chat-transition-fast);
}
.chat-container .chat-dropdown-menu.visible {
display: block;
opacity: 1;
transform: scale(1);
}
.chat-container .chat-dropdown-item {
display: flex;
align-items: center;
padding: var(--chat-spacing-md) var(--chat-spacing-lg);
cursor: pointer;
transition: background-color 0.2s;
color: var(--chat-text);
text-decoration: none;
border: none;
background: none;
width: 100%;
text-align: left;
font-size: var(--chat-font-size);
}
@media (max-width: 767px) {
.chat-container .chat-input-flex-container {
padding: var(--chat-input-mobile-padding-y) var(--chat-input-mobile-padding-x);
gap: var(--chat-spacing-sm);
}
.chat-container .sct-chat-input {
padding: var(--chat-input-mobile-padding-y) var(--chat-input-mobile-padding-x);
min-height: 36px;
font-size: 16px;
}
.chat-container .sct-chat-input-button {
width: var(--chat-button-mobile-size);
height: var(--chat-button-mobile-size);
min-width: var(--chat-button-mobile-size);
min-height: var(--chat-button-mobile-size);
}
.chat-container .sct-chat-input-button svg,
.chat-container .sct-chat-input-button [data-chat-icon] {
width: var(--chat-button-icon-mobile-size);
height: var(--chat-button-icon-mobile-size);
}
.chat-container .sct-chat-input-dropdown-menu {
width: var(--chat-dropdown-mobile-width);
}
.chat-container .sct-chat-char-counter {
display: none;
}
.chat-container .chat-input-wrapper {
position: sticky;
bottom: 0;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
z-index: var(--chat-zindex-fixed);
}
.chat-container .chat-input-container {
padding: var(--chat-input-mobile-padding-y) var(--chat-input-mobile-padding-x);
}
.chat-container .chat-action-button {
width: var(--chat-button-mobile-size);
height: var(--chat-button-mobile-size);
min-width: var(--chat-button-mobile-size);
min-height: var(--chat-button-mobile-size);
}
.chat-container .chat-fullscreen .chat-input-container {
position: fixed !important;
padding-bottom: calc(var(--chat-input-mobile-padding-y) + env(safe-area-inset-bottom, 0px));
box-shadow: var(--chat-box-shadow-top);
}
.chat-container .chat-fullscreen .chat-messages {
padding-bottom: calc(var(--chat-message-spacing) + 60px) !important;
}
.chat-container.chat-fullscreen .chat-input-wrapper {
position: fixed !important;
bottom: env(safe-area-inset-bottom, 0);
left: 0;
right: 0;
z-index: calc(var(--chat-zindex-fixed) + 1);
}
.chat-container.chat-fullscreen .chat-messages-wrapper {
padding-bottom: calc(70px + env(safe-area-inset-bottom, 0));
}
}
@media screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 0) {
.chat-container .chat-input-wrapper {
bottom: 0;
margin-bottom: 0;
}
.chat-container .chat-input-wrapper.keyboard-active {
position: absolute;
}
}
.chat-container.keyboard-active .chat-input-wrapper {
position: absolute !important;
bottom: 0 !important;
}
.chat-container .message-content h1,
.chat-container .message-content h2,
.chat-container .message-content h3,
.chat-container .message-content h4,
.chat-container .message-content h5,
.chat-container .message-content h6 {
color: var(--chat-primary);
font-weight: 700;
margin: 0.6em 0 0.2em 0;
line-height: 1.2;
font-family: inherit;
}
.chat-container .message-content h1 { font-size: 1.6em; }
.chat-container .message-content h2 { font-size: 1.4em; }
.chat-container .message-content h3 { font-size: 1.2em; }
.chat-container .message-content h4 { font-size: 1.1em; }
.chat-container .message-content h5 { font-size: 1em; }
.chat-container .message-content h6 { font-size: 0.9em; }
.chat-container .message-content p {
margin: 0.3em 0;
line-height: 1.4;
}
.chat-container .message-content h1 + p,
.chat-container .message-content h2 + p,
.chat-container .message-content h3 + p,
.chat-container .message-content h4 + p,
.chat-container .message-content h5 + p,
.chat-container .message-content h6 + p {
margin-top: 0;
}
.chat-container .message-content strong {
color: var(--chat-primary);
font-weight: 700;
}
.chat-container .message-content em {
color: var(--chat-primary);
opacity: 0.8;
font-style: italic;
}
.chat-container .message-content ul,
.chat-container .message-content ol {
margin: 0.4em 0;
padding-left: 1.2em;
}
.chat-container .message-content li {
margin: 0.1em 0;
line-height: 1.3;
}
.chat-container .message-content ul:first-child,
.chat-container .message-content ol:first-child {
margin-top: 0;
}
.chat-container .message-content blockquote {
border-left: 3px solid var(--chat-primary);
background: var(--chat-primary-light, rgba(0, 123, 255, 0.1));
margin: 0.4em 0;
padding: 0.4em 0.8em;
border-radius: 4px;
font-style: italic;
}
.chat-container .message-content code {
background: var(--chat-bg-light, #f8f9fa);
color: var(--chat-text, inherit);
padding: 0.1em 0.3em;
border-radius: 3px;
font-family: 'Courier New', Monaco, monospace;
font-size: 0.85em;
border: 1px solid var(--chat-border, #e9ecef);
}
.chat-container .message-content pre {
background: var(--chat-bg-light, #f8f9fa);
border: 1px solid var(--chat-border, #e9ecef);
border-radius: 6px;
padding: 0.6em;
margin: 0.4em 0;
overflow-x: auto;
}
.chat-container .message-content pre code {
background: none;
padding: 0;
border: none;
border-radius: 0;
}
.chat-container .message-content a {
color: var(--chat-primary);
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease;
}
.chat-container .message-content a:hover {
color: var(--chat-primary-hover, var(--chat-primary));
text-decoration: underline;
}
@media (max-width: 768px) {
.chat-container .message-content h1 { font-size: 1.4em; }
.chat-container .message-content h2 { font-size: 1.2em; }
.chat-container .message-content h3 { font-size: 1.1em; }
}
:root {
--primary-green: #00ff88;
--secondary-green: #00cc6a;
--accent-green: #39ff8b;
--dark-green: #004d24;
--neon-green: #00ff41;
--bright-green: #7fff00;
--gradient-hero: linear-gradient(135deg, #00ff88 0%, #00cc6a 25%, #39ff8b 50%, #00ff41 100%);
--gradient-card: linear-gradient(145deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 204, 106, 0.08) 100%);
--gradient-hover: linear-gradient(135deg, #00ff41 0%, #00ff88 50%, #39ff8b 100%);
--gradient-dark: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0d1117 100%);
--gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
--gradient-border: linear-gradient(135deg, var(--primary-green), var(--accent-green));
--bg-primary: #000000;
--bg-secondary: #0a0a0a;
--bg-card: #111111;
--bg-surface: #1a1a1a;
--text-primary: #ffffff;
--text-secondary: #a0a0a0;
--text-accent: #f0f6fc;
--text-muted: #666666;
--border-radius-xs: 4px;
--border-radius-sm: 8px;
--border-radius-md: 16px;
--border-radius-lg: 24px;
--border-radius-xl: 32px;
--border-radius-full: 50%;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
--shadow-md: 0 8px 32px rgba(0, 0, 0, 0.2);
--shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.3);
--shadow-xl: 0 32px 128px rgba(0, 0, 0, 0.4);
--shadow-glow: 0 0 40px rgba(0, 255, 136, 0.4);
--shadow-neon: 0 0 60px rgba(0, 255, 65, 0.5);
--shadow-intense: 0 0 80px rgba(0, 255, 136, 0.6);
--transition-instant: 0.1s cubic-bezier(0.4, 0, 0.2, 1);
--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
--font-display: 'Inter', 'SF Pro Display', system-ui, sans-serif;
--font-body: 'Inter', 'SF Pro Text', system-ui, sans-serif;
--font-mono: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
}
* {
box-sizing: border-box;
}
.services-grid, 
.portfolio-gallery, 
.blog-carousel {
color: var(--text-primary);
background: var(--bg-primary);
font-family: var(--font-body);
position: relative;
overflow: hidden;
}
.animated-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: 
radial-gradient(circle at 20% 80%, rgba(0, 255, 136, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(0, 255, 65, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(57, 255, 139, 0.05) 0%, transparent 50%);
animation: backgroundShift 20s ease-in-out infinite;
pointer-events: none;
}
@keyframes backgroundShift {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(-20px, -10px) scale(1.05); }
66% { transform: translate(20px, 10px) scale(0.95); }
}
.ultra-title {
font-family: var(--font-display);
font-size: clamp(2.5rem, 8vw, 5rem);
font-weight: 900;
background: var(--gradient-hero);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-align: center;
margin-bottom: 1.5rem;
position: relative;
letter-spacing: -0.02em;
line-height: 1.1;
}
.ultra-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 6px;
background: var(--gradient-hero);
border-radius: 3px;
animation: glowPulse 2s ease-in-out infinite alternate;
}
@keyframes glowPulse {
0% { box-shadow: 0 0 20px rgba(0, 255, 136, 0.5); }
100% { box-shadow: 0 0 40px rgba(0, 255, 136, 0.8); }
}
.ultra-subtitle {
font-size: 1.4rem;
color: var(--text-secondary);
text-align: center;
margin-bottom: 4rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
font-weight: 400;
}
.services-grid {
padding: 6rem 0;
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
}
.service-card {
background: var(--bg-card);
border: 2px solid transparent;
border-radius: var(--border-radius-xl);
padding: 3rem;
position: relative;
overflow: hidden;
transition: all var(--transition-normal);
backdrop-filter: blur(20px);
height: 100%;
transform-style: preserve-3d;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--gradient-card);
opacity: 0;
transition: opacity var(--transition-normal);
pointer-events: none;
border-radius: inherit;
}
.service-card::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: var(--gradient-border);
border-radius: inherit;
z-index: -1;
opacity: 0;
transition: opacity var(--transition-normal);
}
.service-card:hover::before {
opacity: 1;
}
.service-card:hover::after {
opacity: 1;
}
.service-card:hover {
transform: translateY(-20px) rotateX(5deg) rotateY(5deg);
box-shadow: var(--shadow-intense), var(--shadow-xl);
}
.service-icon {
width: 100px;
height: 100px;
border-radius: var(--border-radius-lg);
background: var(--gradient-hero);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-glow);
}
.service-icon::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(transparent, rgba(255, 255, 255, 0.4), transparent);
animation: iconRotate 4s linear infinite;
}
@keyframes iconRotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.service-icon i {
font-size: 2.5rem;
color: var(--bg-primary);
z-index: 1;
position: relative;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.service-title {
font-family: var(--font-display);
font-size: 1.8rem;
font-weight: 800;
color: var(--text-primary);
margin-bottom: 1.5rem;
line-height: 1.3;
letter-spacing: -0.01em;
}
.service-description {
color: var(--text-secondary);
margin-bottom: 2rem;
line-height: 1.7;
font-size: 1.1rem;
}
.service-features {
list-style: none;
padding: 0;
margin-bottom: 2.5rem;
}
.service-features li {
color: var(--text-secondary);
margin-bottom: 0.8rem;
position: relative;
padding-left: 2rem;
font-size: 1rem;
line-height: 1.6;
}
.service-features li::before {
content: '✓';
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
background: var(--gradient-hero);
color: var(--bg-primary);
border-radius: var(--border-radius-full);
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 0.8rem;
box-shadow: var(--shadow-glow);
}
.service-cta {
background: var(--gradient-hero);
color: var(--bg-primary);
border: none;
padding: 1rem 2.5rem;
border-radius: var(--border-radius-lg);
font-weight: 700;
font-size: 1rem;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.75rem;
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: var(--shadow-md);
}
.service-cta::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left var(--transition-fast);
}
.service-cta:hover::before {
left: 100%;
}
.service-cta:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: var(--shadow-intense), var(--shadow-lg);
color: var(--bg-primary);
text-decoration: none;
}
.service-cta i {
transition: transform var(--transition-normal);
}
.service-cta:hover i {
transform: translateX(5px);
}
.services-grid .row {
--bs-gutter-x: 3rem;
--bs-gutter-y: 3rem;
}
@media (max-width: 1200px) {
.services-grid .row {
--bs-gutter-x: 2rem;
--bs-gutter-y: 2rem;
}
}
@media (max-width: 768px) {
.services-grid {
padding: 4rem 0;
}
.service-card {
padding: 2.5rem;
transform: none !important;
}
.service-card:hover {
transform: translateY(-10px) !important;
}
.service-icon {
width: 80px;
height: 80px;
}
.service-icon i {
font-size: 2rem;
}
.service-title {
font-size: 1.5rem;
}
.services-grid .row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 2rem;
}
}
.portfolio-gallery {
padding: 6rem 0;
position: relative;
}
.portfolio-filters {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 4rem;
}
.filter-btn {
background: var(--bg-card);
color: var(--text-secondary);
border: 2px solid transparent;
padding: 0.75rem 2rem;
border-radius: var(--border-radius-lg);
font-weight: 600;
transition: all var(--transition-normal);
cursor: pointer;
position: relative;
overflow: hidden;
}
.filter-btn::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: var(--gradient-border);
border-radius: inherit;
z-index: -1;
opacity: 0;
transition: opacity var(--transition-normal);
}
.filter-btn:hover::before,
.filter-btn.active::before {
opacity: 1;
}
.filter-btn:hover,
.filter-btn.active {
color: var(--text-primary);
transform: translateY(-2px);
box-shadow: var(--shadow-glow);
}
.portfolio-item {
margin-bottom: 3rem;
transition: all var(--transition-normal);
}
.project-card {
background: var(--bg-card);
border-radius: var(--border-radius-xl);
overflow: hidden;
position: relative;
height: 400px;
transition: all var(--transition-normal);
cursor: pointer;
}
.project-card::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: var(--gradient-border);
border-radius: inherit;
z-index: -1;
opacity: 0;
transition: opacity var(--transition-normal);
}
.project-card:hover::after {
opacity: 1;
}
.project-card:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: var(--shadow-intense), var(--shadow-xl);
}
.project-image {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.project-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.project-card:hover .project-image img {
transform: scale(1.1);
}
.project-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.3) 40%,
rgba(0, 0, 0, 0.9) 100%
);
display: flex;
align-items: flex-end;
padding: 2rem;
opacity: 0;
transition: opacity var(--transition-normal);
}
.project-card:hover .project-overlay {
opacity: 1;
}
.project-info {
color: var(--text-primary);
width: 100%;
}
.portfolio-title {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--text-primary);
}
.portfolio-category {
color: var(--primary-green);
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 1rem;
}
.portfolio-description {
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 1rem;
}
.portfolio-tech {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.portfolio-tech-tag {
background: rgba(0, 255, 136, 0.2);
color: var(--primary-green);
padding: 0.25rem 0.75rem;
border-radius: var(--border-radius-sm);
font-size: 0.8rem;
font-weight: 500;
}
.blog-carousel {
padding: 6rem 0;
position: relative;
}
.blog-card {
background: var(--bg-card);
border-radius: var(--border-radius-xl);
overflow: hidden;
height: 100%;
transition: all var(--transition-normal);
border: 2px solid transparent;
}
.blog-card::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: var(--gradient-border);
border-radius: inherit;
z-index: -1;
opacity: 0;
transition: opacity var(--transition-normal);
}
.blog-card:hover::after {
opacity: 1;
}
.blog-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-glow), var(--shadow-lg);
}
.blog-image {
height: 250px;
overflow: hidden;
position: relative;
}
.blog-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.blog-card:hover .blog-image img {
transform: scale(1.1);
}
.blog-content {
padding: 2rem;
}
.blog-category {
background: var(--gradient-hero);
color: var(--bg-primary);
padding: 0.5rem 1rem;
border-radius: var(--border-radius-md);
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
display: inline-block;
margin-bottom: 1rem;
}
.blog-title {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
line-height: 1.4;
}
.blog-excerpt {
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.blog-meta {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--text-muted);
font-size: 0.9rem;
}
.blog-author {
display: flex;
align-items: center;
gap: 0.5rem;
}
.blog-date {
font-weight: 500;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fadeInUp 0.6s ease-out;
}
.swiper-pagination-bullet {
background: var(--text-muted);
opacity: 0.5;
}
.swiper-pagination-bullet-active {
background: var(--primary-green);
opacity: 1;
}
.swiper-button-next,
.swiper-button-prev {
color: var(--primary-green);
}
@media (max-width: 992px) {
.portfolio-gallery,
.blog-carousel {
padding: 4rem 0;
}
.project-card {
height: 350px;
}
}
@media (max-width: 768px) {
.ultra-title {
font-size: 2.5rem;
}
.ultra-subtitle {
font-size: 1.2rem;
margin-bottom: 3rem;
}
.portfolio-filters {
gap: 0.5rem;
}
.filter-btn {
padding: 0.5rem 1.5rem;
font-size: 0.9rem;
}
.project-card {
height: 300px;
}
.project-overlay {
padding: 1.5rem;
}
.blog-content {
padding: 1.5rem;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media print {
.services-grid,
.portfolio-gallery,
.blog-carousel {
background: white !important;
color: black !important;
}
.service-card,
.project-card,
.blog-card {
break-inside: avoid;
box-shadow: none !important;
border: 1px solid #ccc !important;
}
}
.blog-carousel-wrapper {
position: relative;
padding: 2rem 0;
background: transparent !important;
}
.blog-swiper {
background: transparent !important;
padding: 0;
}
.blog-swiper .swiper-wrapper {
background: transparent !important;
}
.blog-swiper .swiper-slide {
height: 480px; 
display: flex;
background: transparent !important;
}
.blog-swiper .ultra-card {
height: 100%;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.02) !important;
border: 1px solid rgba(0, 255, 136, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.blog-swiper .ultra-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(0, 255, 136, 0.03) 0%,
rgba(0, 204, 106, 0.02) 50%,
rgba(57, 255, 139, 0.01) 100%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
}
.blog-swiper .ultra-card:hover {
transform: translateY(-8px) scale(1.02);
border-color: rgba(0, 255, 136, 0.3);
box-shadow:
0 10px 40px rgba(0, 255, 136, 0.15),
0 0 30px rgba(0, 255, 136, 0.1),
inset 0 1px 0 rgba(0, 255, 136, 0.2);
}
.blog-swiper .ultra-card:hover::before {
opacity: 1;
}
.blog-swiper .ultra-card-image {
height: 280px; 
position: relative;
z-index: 2;
overflow: hidden;
border-radius: 12px 12px 0 0;
}
.blog-swiper .ultra-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
display: block;
}
.blog-swiper .ultra-card:hover .ultra-card-image img {
transform: scale(1.05);
}
.blog-swiper .ultra-overlay {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 3;
}
.blog-swiper .ultra-badge {
background: rgba(0, 255, 136, 0.9);
color: #000;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: 0 2px 10px rgba(0, 255, 136, 0.3);
}
.blog-swiper .ultra-card-content {
flex: 1;
display: flex;
flex-direction: column;
padding: 1.5rem;
position: relative;
z-index: 2;
}
.blog-swiper .ultra-card-footer {
margin-top: auto;
padding-top: 1.25rem;
border-top: 1px solid rgba(0, 255, 136, 0.1);
}
.blog-swiper .meta-item {
display: inline-flex;
align-items: center;
font-size: 0.875rem;
color: rgba(0, 255, 136, 0.8);
margin-right: 1.25rem;
font-weight: 500;
}
.blog-swiper .meta-item:last-child {
margin-right: 0;
}
.blog-swiper .meta-item i {
color: rgba(0, 255, 136, 0.6);
margin-right: 0.5rem;
}
.blog-swiper .ultra-card-title a {
color: #ffffff;
text-decoration: none;
transition: all 0.3s ease;
font-weight: 600;
line-height: 1.3;
}
.blog-swiper .ultra-card-title a:hover {
color: rgba(0, 255, 136, 0.9);
text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}
.blog-swiper .ultra-card-text {
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
margin-bottom: 1rem;
}
.blog-swiper .author-info {
display: flex;
align-items: center;
font-size: 0.875rem;
color: rgba(0, 255, 136, 0.7);
margin-bottom: 1rem;
font-weight: 500;
}
.blog-swiper .author-info i {
color: rgba(0, 255, 136, 0.5);
}
.blog-swiper .ultra-btn {
border-color: rgba(0, 255, 136, 0.4);
color: rgba(0, 255, 136, 0.9);
transition: all 0.3s ease;
font-weight: 500;
}
.blog-swiper .ultra-btn:hover {
background: rgba(0, 255, 136, 0.1);
border-color: rgba(0, 255, 136, 0.6);
color: #ffffff;
transform: translateX(5px);
box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}
.blog-swiper .ultra-nav-btn {
width: 50px;
height: 50px;
background: linear-gradient(135deg, rgba(0, 255, 136, 0.8), rgba(0, 204, 106, 0.8));
border-radius: 50%;
color: #000;
box-shadow: 0 4px 20px rgba(0, 255, 136, 0.3);
transition: all 0.3s ease;
}
.blog-swiper .ultra-nav-btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 30px rgba(0, 255, 136, 0.5);
background: linear-gradient(135deg, rgba(0, 255, 136, 1), rgba(0, 204, 106, 1));
}
.blog-swiper .ultra-nav-btn::after {
font-size: 18px;
font-weight: bold;
color: #000;
}
.blog-swiper .ultra-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background: rgba(0, 255, 136, 0.3);
opacity: 1;
transition: all 0.3s ease;
}
.blog-swiper .ultra-pagination .swiper-pagination-bullet-active {
background: rgba(0, 255, 136, 0.8);
transform: scale(1.2);
box-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}
@media (max-width: 768px) {
.blog-carousel-wrapper {
padding: 1rem 0;
}
.blog-swiper .swiper-slide {
height: 420px; 
}
.blog-swiper .ultra-card-content {
padding: 1.25rem;
}
.blog-swiper .ultra-card-image {
height: 220px; 
}
.blog-swiper .ultra-nav-btn {
width: 40px;
height: 40px;
}
.blog-swiper .ultra-nav-btn::after {
font-size: 14px;
}
}
@media (max-width: 576px) {
.blog-swiper .swiper-slide {
height: 380px;
}
.blog-swiper .ultra-card-content {
padding: 1rem;
}
.blog-swiper .ultra-card-image {
height: 200px; 
}
}
.blog-carousel-gallery {
position: relative;
}
.blog-gallery-wrapper {
position: relative;
padding: 2rem 0;
background: transparent !important;
}
.blog-gallery-swiper {
background: transparent !important;
padding: 0;
}
.blog-gallery-swiper .swiper-wrapper {
background: transparent !important;
}
.blog-gallery-swiper .swiper-slide {
height: auto; 
display: flex;
background: transparent !important;
}
.blog-gallery-card {
height: 100%;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.02) !important;
border: 1px solid rgba(0, 255, 136, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
border-radius: 16px;
}
.blog-gallery-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(0, 255, 136, 0.03) 0%,
rgba(0, 204, 106, 0.02) 50%,
rgba(57, 255, 139, 0.01) 100%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
}
.blog-gallery-card:hover {
transform: translateY(-8px) scale(1.02);
border-color: rgba(0, 255, 136, 0.3);
box-shadow:
0 10px 40px rgba(0, 255, 136, 0.15),
0 0 30px rgba(0, 255, 136, 0.1),
inset 0 1px 0 rgba(0, 255, 136, 0.2);
}
.blog-gallery-card:hover::before {
opacity: 1;
}
.blog-gallery-image {
position: relative;
width: 100%;
aspect-ratio: 16 / 9; 
overflow: hidden;
border-radius: 12px 12px 0 0;
z-index: 2;
}
.blog-gallery-image img {
width: 100%;
height: 100%;
object-fit: contain; 
object-position: center;
transition: transform 0.3s ease;
display: block;
background: rgba(0, 0, 0, 0.1); 
}
.blog-gallery-card:hover .blog-gallery-image img {
transform: scale(1.05);
}
.blog-gallery-overlay {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 3;
}
.blog-gallery-content {
flex: 1;
display: flex;
flex-direction: column;
padding: 1.5rem;
position: relative;
z-index: 2;
}
.blog-gallery-footer {
margin-top: auto;
padding-top: 1.25rem;
border-top: 1px solid rgba(0, 255, 136, 0.1);
}
.blog-gallery-title a {
color: #ffffff;
text-decoration: none;
transition: all 0.3s ease;
font-weight: 600;
line-height: 1.3;
font-size: 1.1rem;
}
.blog-gallery-title a:hover {
color: rgba(0, 255, 136, 0.9);
text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}
.blog-gallery-text {
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
margin-bottom: 1rem;
font-size: 0.95rem;
}
.blog-gallery-nav-btn {
width: 50px;
height: 50px;
background: linear-gradient(135deg, rgba(0, 255, 136, 0.8), rgba(0, 204, 106, 0.8));
border-radius: 50%;
color: #000;
box-shadow: 0 4px 20px rgba(0, 255, 136, 0.3);
transition: all 0.3s ease;
}
.blog-gallery-nav-btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 30px rgba(0, 255, 136, 0.5);
background: linear-gradient(135deg, rgba(0, 255, 136, 1), rgba(0, 204, 106, 1));
}
.blog-gallery-nav-btn::after {
font-size: 18px;
font-weight: bold;
color: #000;
}
.blog-gallery-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background: rgba(0, 255, 136, 0.3);
opacity: 1;
transition: all 0.3s ease;
}
.blog-gallery-pagination .swiper-pagination-bullet-active {
background: rgba(0, 255, 136, 0.8);
transform: scale(1.2);
box-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}
@media (max-width: 768px) {
.blog-gallery-wrapper {
padding: 1rem 0;
}
.blog-gallery-content {
padding: 1.25rem;
}
.blog-gallery-nav-btn {
width: 40px;
height: 40px;
}
.blog-gallery-nav-btn::after {
font-size: 14px;
}
}
@media (max-width: 576px) {
.blog-gallery-content {
padding: 1rem;
}
.blog-gallery-title a {
font-size: 1rem;
}
.blog-gallery-text {
font-size: 0.9rem;
}
}
:root {
--st-modal-bg: var(--st-dark-surface);
--st-modal-border: var(--st-primary);
--st-modal-border-radius: var(--st-radius-md);
--st-modal-shadow: var(--st-shadow-primary-lg);
--st-modal-overlay: rgba(0, 0, 0, 0.8);
--st-modal-icon-bg: var(--st-gradient-primary);
--st-modal-header-bg: var(--st-gradient-dark);
}
.modal-backdrop {
background-color: var(--st-modal-overlay);
backdrop-filter: blur(5px);
}
.st-modal-content {
background: var(--st-modal-bg);
border: 2px solid var(--st-modal-border);
border-radius: var(--st-modal-border-radius);
box-shadow: var(--st-modal-shadow);
overflow: hidden;
position: relative;
}
.st-modal-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--st-primary), transparent);
animation: modalGlow 2s ease-in-out infinite alternate;
}
@keyframes modalGlow {
from { opacity: 0.5; }
to { opacity: 1; }
}
.st-modal-header {
background: var(--st-modal-header-bg);
border-bottom: 1px solid rgba(var(--st-primary-rgb), 0.2);
padding: var(--st-space-xl);
display: flex;
align-items: center;
gap: var(--st-space-md);
position: relative;
}
.st-modal-icon {
width: 50px;
height: 50px;
background: var(--st-modal-icon-bg);
border-radius: var(--st-radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--st-black);
flex-shrink: 0;
box-shadow: var(--st-shadow-primary);
}
.st-modal-title-wrapper {
flex: 1;
}
.st-modal-title {
color: var(--st-primary);
font-weight: var(--st-font-bold);
font-size: var(--st-text-xl);
margin: 0;
text-shadow: 0 0 10px rgba(var(--st-primary-rgb), 0.3);
}
.st-modal-subtitle {
color: var(--st-text-secondary);
font-size: var(--st-text-sm);
margin: var(--st-space-xs) 0 0 0;
font-style: italic;
}
.st-modal-close {
background: none;
border: none;
color: var(--st-text-secondary);
font-size: 1.2rem;
width: 40px;
height: 40px;
border-radius: var(--st-radius-full);
display: flex;
align-items: center;
justify-content: center;
transition: var(--st-transition-normal);
position: relative;
overflow: hidden;
}
.st-modal-close::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 69, 58, 0.1);
border-radius: var(--st-radius-full);
transition: var(--st-transition-normal);
transform: translate(-50%, -50%);
}
.st-modal-close:hover {
color: #ff453a;
transform: rotate(90deg);
}
.st-modal-close:hover::before {
width: 100%;
height: 100%;
}
.st-modal-body {
padding: var(--st-space-2xl);
color: var(--st-text-primary);
background: var(--st-gradient-dark-card);
}
.st-video-container {
width: 100%;
aspect-ratio: 16/9;
background: var(--st-black);
border-radius: var(--st-radius-sm);
border: 1px solid rgba(var(--st-primary-rgb), 0.3);
overflow: hidden;
position: relative;
}
.st-video-placeholder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: var(--st-text-secondary);
}
.st-video-play-icon {
font-size: 4rem;
color: var(--st-primary);
margin-bottom: var(--st-space-md);
display: block;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.st-video-text {
margin: 0;
font-size: var(--st-text-base);
}
.st-modal-footer {
background: var(--st-modal-header-bg);
border-top: 1px solid rgba(var(--st-primary-rgb), 0.2);
padding: var(--st-space-xl);
display: flex;
gap: var(--st-space-md);
justify-content: flex-end;
}
.st-btn-primary {
background: var(--st-gradient-primary);
border: none;
color: var(--st-black);
font-weight: var(--st-font-semibold);
padding: 0.75rem 1.5rem;
border-radius: var(--st-radius-sm);
transition: var(--st-transition-normal);
box-shadow: var(--st-shadow-primary);
position: relative;
overflow: hidden;
}
.st-btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.st-btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--st-shadow-glow);
color: var(--st-black);
background: linear-gradient(135deg, var(--st-green-neon) 0%, var(--st-primary) 100%);
}
.st-btn-primary:hover::before {
left: 100%;
}
.st-btn-secondary {
background: transparent;
border: 2px solid var(--st-text-muted);
color: var(--st-text-muted);
font-weight: var(--st-font-semibold);
padding: 0.75rem 1.5rem;
border-radius: var(--st-radius-sm);
transition: var(--st-transition-normal);
}
.st-btn-secondary:hover {
background: var(--st-text-muted);
color: var(--st-white);
transform: translateY(-2px);
box-shadow: var(--st-shadow-md);
}
.st-modal-success .st-modal-icon-success {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}
.st-success-animation {
margin-bottom: var(--st-space-xl);
}
.st-success-icon {
font-size: 4rem;
color: #28a745;
animation: successBounce 0.6s ease-out;
}
@keyframes successBounce {
0% { transform: scale(0); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.st-success-message {
font-size: var(--st-text-lg);
color: var(--st-text-primary);
margin: 0;
}
@media (max-width: 768px) {
.st-modal-header {
padding: var(--st-space-md);
flex-direction: column;
text-align: center;
gap: 0.75rem;
}
.st-modal-body {
padding: var(--st-space-xl);
}
.st-modal-footer {
padding: var(--st-space-md);
flex-direction: column;
}
.st-modal-footer .btn {
width: 100%;
margin-bottom: var(--st-space-sm);
}
.st-modal-footer .btn:last-child {
margin-bottom: 0;
}
.st-video-play-icon {
font-size: 3rem;
}
}
.st-modal-body .contact-form .form-control {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(var(--st-primary-rgb), 0.3);
color: var(--st-text-primary);
border-radius: var(--st-radius-sm);
padding: 0.75rem;
transition: var(--st-transition-normal);
}
.st-modal-body .contact-form .form-control:focus {
background: rgba(255, 255, 255, 0.08);
border-color: var(--st-primary);
box-shadow: 0 0 0 0.2rem rgba(var(--st-primary-rgb), 0.25);
color: var(--st-white);
}
.st-modal-body .contact-form .form-label {
color: var(--st-primary);
font-weight: var(--st-font-semibold);
margin-bottom: var(--st-space-sm);
}
.modal.fade .modal-dialog {
transition: transform var(--st-transition-slow), opacity var(--st-transition-slow);
transform: translate(0, -50px) scale(0.8);
}
.modal.show .modal-dialog {
transform: translate(0, 0) scale(1);
}
.blog-section-v3 {
position: relative;
padding: 60px 20px;
min-height: 500px;
overflow: visible;
}
.blog-section-v3-fullwidth {
margin-left: 0;
margin-right: 0;
width: 100%;
max-width: 100%;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
}
.blog-header-v3 {
text-align: center;
margin-bottom: 50px;
position: relative;
z-index: 2;
}
.blog-title-v3 {
font-size: 3rem;
font-weight: var(--st-font-bold);
color: var(--st-text-primary);
margin-bottom: 15px;
text-shadow: 0 0 30px rgba(var(--st-primary-rgb), 0.3);
background: linear-gradient(45deg, var(--st-primary), #ff4757, #7877c6, var(--st-primary));
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientShift 4s ease-in-out infinite;
}
.blog-title-v3 .highlight {
color: var(--st-primary);
text-shadow: 0 0 20px rgba(var(--st-primary-rgb), 0.6);
}
.blog-subtitle-v3 {
font-size: 1.2rem;
color: var(--st-text-secondary);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.blog-carousel-v3 {
position: relative;
max-width: none;
width: 100%;
margin: 0;
padding: 0;
overflow: visible;
}
.blog-carousel-track-v3 {
display: flex;
gap: 20px;
padding: 60px 120px; 
overflow-x: auto;
overflow-y: visible;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-snap-type: x proximity;
position: relative;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scroll-padding: 0;
}
.blog-carousel-track-v3::-webkit-scrollbar {
display: none;
}
.blog-card-v3 {
flex: 0 0 380px;
height: 420px;
background: rgba(255, 255, 255, 0.02);
border-radius: var(--st-radius-lg);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
cursor: pointer;
scroll-snap-align: center;
transition: all 0.3s ease-out;
transform-style: preserve-3d;
margin: 20px 10px;
touch-action: pan-x;
user-select: none;
}
.blog-card-header-v3 {
position: relative;
height: 200px;
overflow: hidden;
}
.blog-card-image-v3 {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
border-radius: var(--st-radius-lg) var(--st-radius-lg) 0 0;
}
.blog-card-v3:hover .blog-card-image-v3 {
transform: scale(1.05);
}
.blog-card-overlay-v3 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, var(--card-gradient-start), var(--card-gradient-end));
opacity: 0.7;
transition: opacity 0.3s ease;
z-index: 1;
}
.blog-card-v3:hover .blog-card-overlay-v3 {
opacity: 0.85;
}
.blog-card-category-v3 {
position: absolute;
top: 15px;
left: 15px;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 6px 12px;
border-radius: 20px;
font-weight: 600;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
backdrop-filter: blur(10px);
z-index: 2;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.blog-card-reading-time-v3 {
position: absolute;
top: 15px;
right: 15px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 6px 10px;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 500;
backdrop-filter: blur(10px);
z-index: 2;
display: flex;
align-items: center;
gap: 4px;
}
.blog-card-reading-time-v3::before {
content: '🕒';
font-size: 0.8rem;
}
.blog-card-v3:nth-child(4n+1) {
--card-gradient-start: rgba(var(--st-primary-rgb), 0.85);
--card-gradient-end: rgba(0, 212, 170, 0.90);
--card-shadow: rgba(var(--st-primary-rgb), 0.2); 
--card-glow: rgba(var(--st-primary-rgb), 0.35); 
--card-text-color: var(--st-text-primary);
--card-bg-color: var(--st-primary);
}
.blog-card-v3:nth-child(4n+2) {
--card-gradient-start: rgba(255, 71, 87, 0.85);
--card-gradient-end: rgba(255, 55, 66, 0.90);
--card-shadow: rgba(255, 71, 87, 0.2); 
--card-glow: rgba(255, 71, 87, 0.35); 
--card-text-color: var(--st-text-primary);
--card-bg-color: #ff4757;
}
.blog-card-v3:nth-child(4n+3) {
--card-gradient-start: rgba(120, 119, 198, 0.85);
--card-gradient-end: rgba(95, 95, 196, 0.90);
--card-shadow: rgba(120, 119, 198, 0.2); 
--card-glow: rgba(120, 119, 198, 0.35); 
--card-text-color: var(--st-text-primary);
--card-bg-color: #7877c6;
}
.blog-card-v3:nth-child(4n+4) {
--card-gradient-start: rgba(255, 167, 38, 0.85);
--card-gradient-end: rgba(255, 152, 0, 0.90);
--card-shadow: rgba(255, 167, 38, 0.2); 
--card-glow: rgba(255, 167, 38, 0.35); 
--card-text-color: var(--st-text-primary);
--card-bg-color: #ffa726;
}
.blog-card-v3:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 
0 15px 45px var(--card-shadow), 
0 0 30px var(--card-glow), 
inset 0 0 0 1px rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.3);
}
.blog-card-content-v3 {
position: relative;
z-index: 2;
height: calc(100% - 200px);
display: flex;
flex-direction: column;
padding: 25px;
color: white;
background: linear-gradient(180deg, 
rgba(0, 0, 0, 0.1) 0%, 
rgba(0, 0, 0, 0.4) 50%, 
rgba(0, 0, 0, 0.7) 100%);
backdrop-filter: none;
}
.blog-card-title-v3 {
font-size: 1.4rem;
font-weight: var(--st-font-bold);
line-height: 1.3;
margin: 0 0 15px 0;
color: var(--st-text-primary);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card-excerpt-v3 {
font-size: 0.95rem;
line-height: 1.6;
color: var(--st-text-secondary);
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 20px;
}
.blog-card-footer-v3 {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.blog-card-date-v3 {
font-size: 0.85rem;
color: var(--st-text-muted);
font-weight: var(--st-font-medium);
}
.blog-card-cta-v3 {
background: var(--card-gradient-start);
color: white;
padding: 8px 16px;
border-radius: 20px;
text-decoration: none;
font-weight: 600;
font-size: 0.85rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.blog-card-cta-v3::after {
content: '→';
transition: transform 0.3s ease;
}
.blog-card-v3:hover .blog-card-cta-v3 {
background: var(--card-gradient-end);
transform: translateX(3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.blog-card-v3:hover .blog-card-cta-v3::after {
transform: translateX(3px);
}
.blog-card-tags .tag-pill {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
padding:4px 10px;
border-radius: 999px;
line-height:1;
font-size:.65rem;
letter-spacing:.5px;
font-weight:500;
color: var(--st-text-secondary);
backdrop-filter: blur(6px);
transition:.25s;
}
.blog-card-tags .tag-pill.more { background:linear-gradient(135deg,var(--st-primary),#ff4757); color:#fff; border-color:rgba(255,255,255,0.3); }
.blog-card-tags .tag-pill:hover { color: var(--st-text-primary); border-color:rgba(var(--st-primary-rgb),0.6); }
.blog-card-wall.no-image .blog-card-header-v3 {
background: linear-gradient(135deg,var(--card-gradient-start),var(--card-gradient-end));
display:flex;
align-items:flex-start;
justify-content:space-between;
}
.blog-card-wall.no-image .blog-card-header-v3 img { display:none; }
.fade-in-observe { opacity:0; transform: translateY(25px); transition: opacity .6s ease, transform .6s cubic-bezier(.4,.2,.1,1); }
.fade-in-observe.in { opacity:1; transform:translateY(0); }
.blog-card-v3.blog-card-wall .blog-card-header-v3 {
border-top-left-radius: var(--st-radius-lg);
border-top-right-radius: var(--st-radius-lg);
overflow: hidden;
display: flex;
align-items: stretch;
position: relative;
aspect-ratio: 16/9;
}
@supports not (aspect-ratio: 16/9){
.blog-card-v3.blog-card-wall .blog-card-header-v3 { height:230px; }
}
.blog-card-v3.blog-card-wall .blog-card-image-v3 {
width:100%;
height:100%;
object-fit:cover;
object-position:center;
transform:scale(1.05);
transition:transform .8s cubic-bezier(.22,.61,.36,1), filter .6s;
filter:brightness(.9) saturate(1.05);
}
.blog-card-v3.blog-card-wall:hover .blog-card-image-v3,
.blog-card-v3.blog-card-wall:focus-visible .blog-card-image-v3 {
transform:scale(1.12);
filter:brightness(1) saturate(1.15);
}
.blog-card-v3.blog-card-wall .blog-card-overlay-v3 {
opacity:.55;
backdrop-filter:blur(2px);
transition:opacity .5s;
}
.blog-card-v3.blog-card-wall:hover .blog-card-overlay-v3 { opacity:.35; }
.blog-card-v3.blog-card-wall.no-image .blog-card-header-v3 {
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), rgba(0,0,0,.55)),
linear-gradient(135deg, var(--card-gradient-start, var(--st-primary)), var(--card-gradient-end, #ff4757));
}
.blog-card-v3.blog-card-wall.no-image .blog-card-image-v3 { display:none; }
.blog-card-v3.blog-card-wall .blog-card-content-v3 { 
padding-top:1.25rem;
display:flex;
flex-direction:column;
flex:1 1 auto;
}
.blog-card-v3.blog-card-wall .blog-card-content-v3 .blog-card-excerpt-v3 { flex:0 0 auto; }
.blog-card-v3.blog-card-wall .blog-card-footer-v3 { margin-top:auto; }
.blog-card-v3.blog-card-wall .blog-card-excerpt-v3 { -webkit-line-clamp:3; line-clamp:3; }
.blog-nav-v3 {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(20px);
z-index: 3;
opacity: 0.8;
}
.blog-nav-v3:hover {
background: rgba(var(--st-primary-rgb), 0.2);
border-color: rgba(var(--st-primary-rgb), 0.4);
box-shadow: 0 0 20px rgba(var(--st-primary-rgb), 0.3);
opacity: 1;
transform: translateY(-50%) scale(1.1);
}
.blog-nav-prev-v3 {
left: 20px;
}
.blog-nav-next-v3 {
right: 20px;
}
.blog-progress-v3 {
margin: 40px auto 0;
max-width: 300px;
background: rgba(255, 255, 255, 0.1);
height: 3px;
border-radius: 2px;
overflow: hidden;
backdrop-filter: blur(10px);
}
.blog-progress-bar-v3 {
height: 100%;
background: linear-gradient(90deg, var(--st-primary), #ff4757, #7877c6, #ffa726);
background-size: 300% 100%;
border-radius: 2px;
transition: width 0.3s ease;
animation: progressGlow 3s ease-in-out infinite;
}
@keyframes progressGlow {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.blog-index-wall {
min-height: 100vh;
position: relative;
}
.blog-wall-hero {
position: relative;
}
.blog-wall-layout {
position: relative;
z-index: 2;
}
.blog-wall-content {
position: relative;
z-index: 1;
}
.blog-wall-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 40px 30px;
}
.blog-card-wall.blog-card-v3 {
flex: initial;
width: auto;
height: auto;
min-height: 420px;
margin: 0;
display:flex;
flex-direction:column;
}
@media (max-width: 992px){ .blog-card-wall.blog-card-v3 { min-height:380px; } }
@media (max-width: 576px){ .blog-card-wall.blog-card-v3 { min-height:340px; } }
.blog-wall-sidebar .blog-filter-block {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
padding: 20px 18px;
border-radius: var(--st-radius-lg);
backdrop-filter: blur(12px);
}
.blog-filter-list li + li { margin-top: 6px; }
.blog-filter-list .filter-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 10px;
border-radius: 8px;
text-decoration: none;
color: var(--st-text-secondary);
background: rgba(255,255,255,0.02);
border: 1px solid transparent;
transition: .25s;
font-weight: 500;
}
.blog-filter-list .filter-item .count { font-size: .7rem; background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 12px; }
.blog-filter-list .filter-item:hover { color: var(--st-text-primary); border-color: rgba(var(--st-primary-rgb),0.4); }
.blog-filter-list .filter-item.active { background: linear-gradient(135deg,var(--st-primary),#ff4757); color:#fff; box-shadow: 0 0 0 1px rgba(255,255,255,0.15); }
.tag-chip {
--chip-bg: rgba(255,255,255,0.06);
display:inline-flex;
align-items:center;
padding:6px 12px;
border-radius:20px;
font-size:.75rem;
text-decoration:none;
background:var(--chip-bg);
color:var(--st-text-secondary);
border:1px solid rgba(255,255,255,0.1);
transition:.25s;
}
.tag-chip:hover { color: var(--st-text-primary); background: rgba(255,255,255,0.12); }
.tag-chip.active { background: linear-gradient(135deg,var(--st-primary),#ff4757); color:#fff; border-color: rgba(255,255,255,0.3); }
.blog-active-filters .badge { margin-right:6px; }
.blog-active-filters .filter-item {
background: linear-gradient(135deg,var(--st-primary),#ff4757);
color:#fff;
padding:6px 12px;
border-radius:8px;
display:inline-flex;
align-items:center;
gap:4px;
font-weight:600;
border:1px solid rgba(255,255,255,0.25);
box-shadow:0 4px 15px rgba(0,0,0,.25);
}
.blog-active-filters .filter-item:hover { filter:brightness(1.1); text-decoration:none; }
.blog-card-v3 .stretched-link::after { top:0; left:0; right:0; bottom:0; }
@media (max-width: 1200px) {
.blog-carousel-track-v3 {
gap: 18px;
padding: 50px 80px; 
}
.blog-card-v3 {
flex: 0 0 350px;
height: 400px;
margin: 15px 8px;
}
.blog-card-header-v3 {
height: 180px;
}
.blog-card-content-v3 {
height: calc(100% - 180px);
padding: 20px;
}
.blog-nav-prev-v3 {
left: 15px;
}
.blog-nav-next-v3 {
right: 15px;
}
}
@media (max-width: 768px) {
.blog-section-v3 {
padding: 40px 0;
}
.blog-carousel-track-v3 {
gap: 15px;
padding: 40px 60px; 
scroll-snap-type: none;
scroll-behavior: auto;
}
.blog-title-v3 {
font-size: 2.2rem;
}
.blog-card-v3 {
flex: 0 0 300px;
height: 360px;
margin: 10px 5px;
scroll-snap-align: none;
transition: transform 0.2s ease-out;
}
.blog-card-header-v3 {
height: 160px;
}
.blog-card-content-v3 {
height: calc(100% - 160px);
padding: 18px;
}
.blog-card-title-v3 {
font-size: 1.2rem;
}
.blog-card-excerpt-v3 {
font-size: 0.9rem;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.blog-nav-v3 {
width: 50px;
height: 50px;
font-size: 1rem;
}
.blog-nav-prev-v3 {
left: 10px;
}
.blog-nav-next-v3 {
right: 10px;
}
}
@media (max-width: 480px) {
.blog-carousel-track-v3 {
gap: 12px;
padding: 30px 40px; 
scroll-snap-type: none;
}
.blog-card-v3 {
flex: 0 0 280px;
height: 340px;
margin: 10px 3px;
scroll-snap-align: none;
}
.blog-card-header-v3 {
height: 140px;
}
.blog-card-content-v3 {
height: calc(100% - 140px);
padding: 15px;
}
.blog-nav-v3 {
display: none;
}
}
.blog-carousel-loading-v3 {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.blog-loading-spinner-v3 {
width: 40px;
height: 40px;
border: 3px solid rgba(255, 255, 255, 0.1);
border-top: 3px solid var(--st-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.blog-card-featured-v3 {
position: relative;
}
.blog-card-featured-v3::after {
content: '⭐';
position: absolute;
top: 15px;
right: 15px;
font-size: 1.2rem;
z-index: 10;
filter: drop-shadow(0 0 10px rgba(255, 255, 0, 0.6));
pointer-events: none;
}
.blog-card-featured-v3 .blog-card-reading-time-v3 {
right: 45px;
}
.blog-card-v3 * {
transition: all 0.3s ease;
}
.blog-card-v3:focus,
.blog-nav-v3:focus {
outline: 2px solid var(--st-primary);
outline-offset: 2px;
}
.blog-carousel-track-v3 {
will-change: scroll-position;
scroll-snap-stop: normal;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.blog-card-v3 {
will-change: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
@media (pointer: coarse) {
.blog-carousel-track-v3 {
scroll-snap-type: none;
overscroll-behavior-x: auto;
}
.blog-card-v3 {
scroll-snap-align: none;
transition: transform 0.2s ease-out;
}
.blog-card-v3:hover {
transform: translateY(-5px) scale(1.01);
}
}
.st-animated-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1000;
overflow: hidden;
background: var(--st-gradient-black);
pointer-events: none;
}
.st-bg-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
45deg,
var(--st-black) 0%,
var(--st-dark) 25%,
var(--st-dark-surface) 50%,
var(--st-dark) 75%,
var(--st-black) 100%
);
animation: gradientShift 20s ease-in-out infinite;
}
@keyframes gradientShift {
0%, 100% {
background-position: 0% 50%;
filter: hue-rotate(0deg);
}
25% {
background-position: 100% 50%;
filter: hue-rotate(5deg);
}
50% {
background-position: 50% 100%;
filter: hue-rotate(10deg);
}
75% {
background-position: 0% 100%;
filter: hue-rotate(5deg);
}
}
.st-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.st-particle {
position: absolute;
width: 2px;
height: 2px;
background: var(--st-primary);
border-radius: var(--st-radius-full);
opacity: 0;
animation: particleFloat linear infinite;
box-shadow: 0 0 6px var(--st-primary);
}
.st-particle:nth-child(odd) {
background: var(--st-green-neon);
box-shadow: 0 0 6px var(--st-green-neon);
animation-duration: 15s;
}
.st-particle:nth-child(even) {
background: var(--st-primary-light);
box-shadow: 0 0 4px var(--st-primary-light);
animation-duration: 20s;
}
.st-particle:nth-child(3n) {
width: 3px;
height: 3px;
animation-duration: 25s;
}
@keyframes particleFloat {
0% {
transform: translateY(100vh) translateX(0) scale(0);
opacity: 0;
}
10% {
opacity: 1;
transform: translateY(90vh) translateX(10px) scale(1);
}
90% {
opacity: 1;
transform: translateY(10vh) translateX(-10px) scale(1);
}
100% {
transform: translateY(-10vh) translateX(0) scale(0);
opacity: 0;
}
}
.st-particle-large {
width: 4px !important;
height: 4px !important;
opacity: 0.9;
box-shadow: 0 0 12px var(--st-primary);
}
.st-particle-trail {
width: 1px !important;
height: 15px !important;
background: linear-gradient(180deg, 
var(--st-primary) 0%, 
transparent 100%) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.st-scroll-particle {
position: absolute;
top: -20px;
width: 8px;
height: 8px;
background: var(--st-primary);
border-radius: 50%;
animation: scrollParticleFlow linear infinite;
opacity: 0.3; 
box-shadow: 0 0 8px rgba(var(--st-primary-rgb), 0.5);
border: 1px solid rgba(var(--st-primary-rgb), 0.3);
}
@keyframes scrollParticleFlow {
0% {
transform: translateY(-20px);
opacity: 0;
}
20% {
opacity: 0.3;
}
80% {
opacity: 0.3;
}
100% {
transform: translateY(calc(100vh + 20px));
opacity: 0;
}
}
.st-wave {
position: absolute;
width: 200%;
height: 200px;
background: linear-gradient(
90deg,
transparent,
rgba(var(--st-primary-rgb), 0.03),
transparent
);
animation: waveMove 30s linear infinite;
transform-origin: center;
}
.st-wave:nth-child(1) {
top: 20%;
animation-duration: 25s;
animation-delay: -5s;
}
.st-wave:nth-child(2) {
top: 60%;
animation-duration: 35s;
animation-delay: -15s;
background: linear-gradient(
90deg,
transparent,
rgba(var(--st-green-neon), 0.02),
transparent
);
}
@keyframes waveMove {
0% {
transform: translateX(-100%) rotate(0deg);
}
100% {
transform: translateX(100%) rotate(360deg);
}
}
.st-geometric {
position: absolute;
width: 40px;
height: 40px;
border: 1px solid rgba(var(--st-primary-rgb), 0.2);
border-radius: var(--st-radius-sm);
animation: geometricFloat 40s linear infinite;
opacity: 0;
}
.st-geometric:nth-child(1) {
top: 10%;
left: 10%;
animation-delay: -10s;
transform: rotate(45deg);
}
.st-geometric:nth-child(2) {
top: 70%;
right: 15%;
animation-delay: -25s;
border-radius: var(--st-radius-full);
width: 30px;
height: 30px;
}
.st-geometric:nth-child(3) {
top: 40%;
left: 80%;
animation-delay: -35s;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
border: none;
background: linear-gradient(45deg, transparent, rgba(var(--st-primary-rgb), 0.1));
}
@keyframes geometricFloat {
0%, 100% {
opacity: 0;
transform: translateY(0) rotate(0deg) scale(0.8);
}
25% {
opacity: 0.6;
transform: translateY(-30px) rotate(90deg) scale(1);
}
50% {
opacity: 0.3;
transform: translateY(-60px) rotate(180deg) scale(1.2);
}
75% {
opacity: 0.6;
transform: translateY(-30px) rotate(270deg) scale(1);
}
}
.st-scanlines {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(var(--st-primary-rgb), 0.01) 2px,
rgba(var(--st-primary-rgb), 0.01) 4px
);
animation: scanlineMove 3s linear infinite;
opacity: 0.3;
}
@keyframes scanlineMove {
0% {
transform: translateY(0);
}
100% {
transform: translateY(4px);
}
}
@media (max-width: 768px) {
.st-bg-gradient {
animation-duration: 30s; 
}
.st-particle {
animation-duration: 25s !important; 
}
.st-wave {
animation-duration: 40s !important; 
height: 100px; 
}
.st-geometric {
animation-duration: 50s; 
width: 25px; 
height: 25px;
}
.st-scanlines {
opacity: 0.1; 
}
.st-scroll-particle {
width: 6px;
height: 6px;
animation-duration: 10s; 
}
}
@media (max-width: 480px) {
.st-particles .st-particle:nth-child(n+6) {
display: none; 
}
.st-geometric:nth-child(n+3) {
display: none; 
}
.st-wave:nth-child(n+2) {
display: none; 
}
}
@media (prefers-reduced-motion: reduce) {
.st-animated-background * {
animation-duration: 60s !important;
animation-iteration-count: 1 !important;
}
.st-scanlines {
display: none;
}
.st-particles {
display: none;
}
}
.st-content-overlay {
position: relative;
z-index: 1;
background: linear-gradient(
180deg,
rgba(var(--st-black), 0.3) 0%,
rgba(var(--st-black), 0.1) 50%,
rgba(var(--st-black), 0.3) 100%
);
backdrop-filter: blur(0.5px);
}
body.st-animated-bg .st-animated-background {
display: block;
}
body:not(.st-animated-bg) .st-animated-background {
display: none;
}
body.st-animated-bg.st-reduced-motion .st-animated-background .st-particles,
body.st-animated-bg.st-reduced-motion .st-animated-background .st-scanlines {
display: none;
}
body.st-animated-bg.st-reduced-motion .st-animated-background * {
animation-duration: 60s !important;
}
.stchannel-header {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
backdrop-filter: blur(10px);
}
.stchannel-header .navbar {
padding: 1rem 0;
transition: all 0.3s ease;
}
.stchannel-header .navbar-nav {
align-items: center;
text-align: center;
}
.stchannel-header .navbar-nav .nav-item {
display: flex;
align-items: center;
align-self: center;
}
.stchannel-header .navbar-brand {
font-weight: 700;
font-size: 1.5rem;
transition: transform 0.3s ease;
}
.stchannel-header .navbar-brand:hover {
transform: scale(1.05);
}
.stchannel-header .brand-text {
background: linear-gradient(45deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
.stchannel-header .nav-link {
font-weight: 500;
margin: 0 0.5rem;
padding: 0.75rem 1rem !important;
border-radius: 8px;
transition: all 0.3s ease;
position: relative;
color: rgba(255, 255, 255, 0.9) !important;
}
.stchannel-header .nav-link:hover {
background: rgba(255, 255, 255, 0.1);
color: white !important;
transform: translateY(-2px);
}
.stchannel-header .nav-link.active {
background: linear-gradient(45deg, #667eea, #764ba2);
color: white !important;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.stchannel-header .nav-link i {
margin-right: 0.5rem;
font-size: 0.9rem;
}
.btn-cta {
background: linear-gradient(45deg, #667eea, #764ba2);
border: none;
padding: 0.75rem 1.5rem;
border-radius: 25px;
font-weight: 600;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.btn-cta::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.btn-cta:hover::before {
left: 100%;
}
@media (max-width: 991.98px) {
.stchannel-header .navbar-nav {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.stchannel-header .nav-link {
margin: 0.25rem 0;
}
.stchannel-header .ms-3,.stchannel-header .ms-2 {
margin-left: 0 !important;
margin-top: 1rem;
margin-bottom: 1rem;
display: flex;
}
.stchannel-header .btn, .stchannel-header .ms-2 .sc-auth-login-btn{
margin: auto;
}
.btn-cta {
width: 100%;
text-align: center;
}
}
.stchannel-header.scrolled {
background: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(20px);
}
.stchannel-header.scrolled .navbar {
padding: 0.5rem 0;
}
.stchannel-header .navbar-toggler {
width: 50px;
height: 50px;
position: relative;
border: 2px solid #00ff9d;
border-radius: 12px;
background: rgba(0, 255, 157, 0.05);
padding: 0;
transition: all 0.3s ease;
overflow: visible;
}
.stchannel-header .navbar-toggler:hover {
background: rgba(0, 255, 157, 0.1);
border-color: #00cc7d;
box-shadow: 0 0 20px rgba(0, 255, 157, 0.3);
}
.stchannel-header .navbar-toggler:focus {
box-shadow: 0 0 0 0.25rem rgba(0, 255, 157, 0.25);
outline: none;
}
.stchannel-header .hamburger-line {
display: block;
width: 26px;
height: 3px;
background-color: #00ff9d;
border-radius: 3px;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
position: absolute;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
}
.stchannel-header .hamburger-line:nth-child(1) {
top: 11px;
}
.sc-auth-login-btn {
display: flex;
align-items: center;
gap: 6px;
color: var(--st-primary, #00ff9d);
font-size: .82rem;
font-weight: 600;
text-decoration: none;
padding: 6px 14px;
border: 1.5px solid var(--st-primary, #00ff9d);
border-radius: 20px;
transition: background .2s, color .2s, box-shadow .2s;
white-space: nowrap;
line-height: 1;
}
.sc-auth-login-btn:hover {
background: var(--st-primary, #00ff9d);
color: #0a0a0a;
box-shadow: 0 0 12px rgba(0,255,157,.4);
text-decoration: none;
}
.sc-auth-login-btn i { font-size: .9rem; }
.sc-auth-menu {
position: relative;
}
.sc-auth-menu__trigger {
position: relative;
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid var(--st-primary, #00ff9d);
background: #1a1a2e;
padding: 0;
cursor: pointer;
overflow: hidden;
transition: box-shadow .2s, border-color .2s;
display: block;
flex-shrink: 0;
}
.sc-auth-menu__trigger:hover,
.sc-auth-menu__trigger[aria-expanded="true"] {
box-shadow: 0 0 0 3px rgba(0,255,157,.25);
border-color: var(--st-primary, #00ff9d);
}
.sc-auth-menu__trigger img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 50%;
}
.sc-auth-menu__trigger span {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: var(--st-primary, #00ff9d);
font-weight: 700;
font-size: .9rem;
}
.sc-auth-menu__premium-dot {
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background: #f59e0b;
border: 2px solid #0a0a0a;
pointer-events: none;
}
.sc-auth-menu__dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 220px;
background: #111;
border: 1px solid rgba(0,255,157,.2);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,.6);
z-index: 9999;
padding: 6px 0;
opacity: 0;
transform: translateY(-6px) scale(.98);
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
}
.sc-auth-menu__dropdown.is-open {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.sc-auth-menu__head {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px 8px;
}
.sc-auth-menu__head-pic {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 2px solid rgba(0,255,157,.4);
}
.sc-auth-menu__head > div {
display: flex;
flex-direction: column;
gap: 1px;
overflow: hidden;
}
.sc-auth-menu__head strong {
color: #fff;
font-size: .85rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sc-auth-menu__head small {
color: rgba(255,255,255,.4);
font-size: .72rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sc-auth-menu__badge {
margin-top: 2px;
display: inline-flex;
align-items: center;
gap: 3px;
font-size: .68rem;
color: #f59e0b;
font-weight: 600;
}
.sc-auth-menu__sep {
height: 1px;
background: rgba(255,255,255,.07);
margin: 4px 0;
}
.sc-auth-menu__item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
color: rgba(255,255,255,.75);
font-size: .83rem;
text-decoration: none;
transition: background .15s, color .15s;
}
.sc-auth-menu__item i {
width: 16px;
text-align: center;
color: var(--st-primary, #00ff9d);
font-size: .82rem;
flex-shrink: 0;
}
.sc-auth-menu__item:hover {
background: rgba(0,255,157,.07);
color: #fff;
text-decoration: none;
}
.sc-auth-menu__item--upgrade       { color: #f59e0b; }
.sc-auth-menu__item--upgrade i     { color: #f59e0b; }
.sc-auth-menu__item--logout i      { color: #ef4444; }
.sc-auth-menu__item--logout:hover  { background: rgba(239,68,68,.07); }
@media (max-width: 767.98px) {
.sc-auth-menu__dropdown { right: -8px; min-width: 200px; }
}
.stchannel-header .hamburger-line:nth-child(2) {
top: 22px;
}
.stchannel-header .hamburger-line:nth-child(3) {
top: 33px;
}
.stchannel-header .navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(1) {
top: 23.5px;
transform: translateX(-50%) rotate(45deg);
}
.stchannel-header .navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(2) {
opacity: 0;
transform: translateX(-100%);
}
.stchannel-header .navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(3) {
top: 23.5px;
transform: translateX(-50%) rotate(-45deg);
}
.stchannel-header .navbar-toggler[aria-expanded="true"] {
background: rgba(0, 255, 157, 0.15);
box-shadow: 0 0 25px rgba(0, 255, 157, 0.4);
}
@media (min-width: 992px) {
.stchannel-header .navbar-toggler { display: none !important; }
}
@media (max-width: 991.98px) {
.stchannel-header .navbar-toggler { display: block !important; }
}
.sc-auth-login-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
height: 46px !important;
padding: 0 18px !important;
border-radius: 12px !important;
border: 2px solid rgba(0,255,157,.55) !important;
background: rgba(0,255,157,.06) !important;
color: rgba(0,255,157,.9) !important;
font-size: .85rem !important;
font-weight: 700 !important;
line-height: 1 !important;
white-space: nowrap !important;
text-decoration: none !important;
transition: border-color .2s, color .2s, background .2s, box-shadow .2s !important;
cursor: pointer !important;
box-sizing: border-box !important;
}
.sc-auth-login-btn i { font-size: 1rem !important; }
.sc-auth-login-btn:hover {
border-color: #00ff9d !important;
color: #00ff9d !important;
background: rgba(0,255,157,.12) !important;
box-shadow: 0 0 0 3px rgba(0,255,157,.2) !important;
text-decoration: none !important;
}
.sc-auth-menu__trigger {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
overflow: visible !important;
align-items: center !important;
justify-content: center !important;
}
.sc-auth-menu__trigger img,
.sc-auth-menu__trigger span { border-radius: 50% !important; }
.sc-auth-menu__trigger span { overflow: hidden !important; }
.sc-auth-menu__premium-dot {
top: -4px !important;
right: -4px !important;
bottom: auto !important;
width: 18px !important;
height: 18px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 10 !important;
font-style: normal !important;
font-size: 8px !important;
color: #0a0a0a !important;
font-family: 'Font Awesome 6 Free' !important;
font-weight: 900 !important;
line-height: 1 !important;
}
.stchannel-header .nav-cta-btn {
height: 46px !important;
padding: 0 16px !important;
font-size: .8rem !important;
line-height: 1.05 !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
width: auto !important;
white-space: normal !important;
text-align: left !important;
box-sizing: border-box !important;
}
.stchannel-header .nav-cta-btn i { font-size: .95rem !important; margin: 0 !important; flex-shrink: 0; }
.stchannel-header .nav-cta-btn__label { display: inline-block; line-height: 1.05; }
.stchannel-header .nav-link-tutorial {
color: #00ff9d !important;
transition: color .25s ease, text-shadow .25s ease !important;
animation: stTutorialPulse 2.6s ease-in-out infinite !important;
}
.stchannel-header .nav-link-tutorial i {
color: #00ff9d !important;
transition: transform .50s ease !important;
}
.stchannel-header .nav-link-tutorial:hover {
color: #6effc6 !important;
text-shadow: 0 0 12px rgba(0,255,157,.75) !important;
}
.stchannel-header .nav-link-tutorial:hover i {
transform: translateY(-2px) scale(1.15) !important;
}
@keyframes stTutorialPulse {
0%, 100% { text-shadow: 0 0 0 rgba(0,255,157,0); }
50%      { text-shadow: 0 0 10px rgba(0,255,157,.65); }
}
@media (prefers-reduced-motion: reduce) {
.stchannel-header .nav-link-tutorial { animation: none !important; }
}
.sc-auth-trigger__name,
.sc-auth-trigger__chevron { display: none !important; }
@media (min-width: 992px) {
.sc-auth-menu__trigger .sc-auth-trigger__name,
.sc-auth-menu__trigger .sc-auth-trigger__chevron { display: none !important; }
.sc-auth-menu__trigger {
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
justify-content: center !important;
}
}
@media (max-width: 991.98px) {
.stchannel-header .sc-auth-widget {
width: 100%;
justify-content: center !important;
}
.sc-auth-menu { width: 100%; }
.sc-auth-menu__trigger {
width: 100% !important;
height: auto !important;
min-width: unset !important;
border-radius: 12px !important;
padding: 10px 16px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
overflow: visible !important;
}
.sc-auth-menu__trigger img {
width: 32px !important;
height: 32px !important;
flex-shrink: 0 !important;
}
.sc-auth-menu__trigger > span:not(.sc-auth-trigger__name) {
width: 32px !important;
height: 32px !important;
flex-shrink: 0 !important;
}
.sc-auth-menu__trigger .sc-auth-trigger__name {
display: block !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
flex: 1 1 auto !important;
border-radius: 0 !important;
text-align: left !important;
color: rgba(255,255,255,.85) !important;
font-size: .9rem !important;
font-weight: 600 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.2 !important;
align-items: initial !important;
justify-content: initial !important;
}
.sc-auth-menu__trigger .sc-auth-trigger__chevron {
display: inline-block !important;
font-size: .78rem !important;
color: rgba(255,255,255,.5) !important;
transition: transform .25s ease !important;
flex-shrink: 0 !important;
}
.sc-auth-menu__trigger[aria-expanded="true"] .sc-auth-trigger__chevron {
transform: rotate(180deg);
}
.sc-auth-menu__dropdown {
position: static !important;
top: auto !important;
right: auto !important;
transform: none !important;
opacity: 1 !important;
max-height: 0 !important;
overflow: hidden !important;
transition: max-height .35s ease !important;
width: 100% !important;
border-radius: 12px !important;
margin-top: 0 !important;
pointer-events: none !important;
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
.sc-auth-menu__dropdown.is-open {
max-height: 600px !important;
pointer-events: auto !important;
transform: none !important;
background: #111 !important;
border-color: rgba(0,255,157,.2) !important;
box-shadow: 0 8px 32px rgba(0,0,0,.6) !important;
margin-top: 6px !important;
}
}
:root {
--st-cookie-modal-bg: rgba(0, 0, 0, 0.95);
--st-cookie-content-bg: #1a1a1a;
--st-cookie-border: var(--st-primary);
--st-cookie-text: #ffffff;
--st-cookie-text-muted: #cccccc;
--st-cookie-accent: var(--st-primary);
--st-cookie-secondary: #6c757d;
--st-cookie-success: #28a745;
--st-cookie-warning: #ffc107;
--st-cookie-shadow: 0 10px 30px rgba(0, 255, 157, 0.3);
}
.st-cookies-banner {
position: fixed;
bottom: 20px;
left: 20px;
max-width: 400px;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
border: 2px solid var(--st-primary);
border-radius: 15px;
padding: 20px;
color: white;
z-index: 10000;
box-shadow: 0 10px 30px rgba(0, 255, 157, 0.4);
transform: translateX(-120%);
opacity: 0;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.st-cookies-banner.show {
transform: translateX(0);
opacity: 1;
}
.st-banner-header h6 {
color: var(--st-primary);
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.st-banner-text {
font-size: 0.85rem;
line-height: 1.4;
margin-bottom: 15px;
color: #e0e0e0;
}
.st-banner-buttons {
display: flex;
flex-direction: column;
gap: 8px;
}
.st-banner-buttons .btn {
padding: 8px 12px;
font-size: 0.8rem;
font-weight: 500;
border-radius: 8px;
transition: all 0.3s ease;
}
.st-cookies-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10001;
display: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.st-cookies-modal.show {
opacity: 1;
}
.st-cookies-modal .modal-content {
border: 2px solid var(--st-primary);
border-radius: 15px;
box-shadow: 0 20px 60px rgba(0, 255, 157, 0.3);
}
.st-cookies-modal .modal-header {
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
border-radius: 13px 13px 0 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.st-cookies-modal .modal-header #st-cookie-close {
margin-left: auto;
flex-shrink: 0;
}
.st-cookies-modal .modal-title {
font-weight: 600;
font-size: 1.2rem;
}
.st-cookies-modal .btn-close {
background-size: 1.2em;
opacity: 0.8;
}
.st-cookies-modal .btn-close:hover {
opacity: 1;
transform: scale(1.1);
}
.st-cookies-category {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(0, 255, 157, 0.3);
border-radius: 10px;
padding: 20px;
margin-bottom: 15px;
transition: all 0.3s ease;
}
.st-cookies-category:hover {
background: rgba(0, 255, 157, 0.1);
border-color: var(--st-primary);
}
.category-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.category-title {
color: var(--st-primary);
font-weight: 600;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}
.st-cookies-category .category-description {
color: #dbdbdb !important;
font-size: 0.9rem;
line-height: 1.5;
margin: 0 0 8px 0;
}
.st-cookies-category .category-cookies {
color: #dbdbdb !important;
font-size: 0.8rem;
font-style: italic;
margin: 0;
padding-top: 5px;
border-top: 1px solid rgba(0, 255, 157, 0.2);
}
.st-cookies-toggle {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
cursor: pointer;
}
.st-tag {
display: inline-block;
padding: 4px 8px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 4px;
border: 1px solid;
}
.st-tag-success {
background-color: var(--st-primary);
color: #1a1a1a;
border-color: var(--st-primary);
}
.st-cookies-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.st-cookies-slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #666;
border-radius: 24px;
transition: 0.3s;
}
.st-cookies-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
border-radius: 50%;
transition: 0.3s;
}
.st-cookies-toggle input:checked + .st-cookies-slider {
background-color: var(--st-primary);
}
.st-cookies-toggle input:checked + .st-cookies-slider:before {
transform: translateX(26px);
}
.st-cookies-toggle input:disabled + .st-cookies-slider {
background-color: var(--st-primary);
opacity: 0.7;
cursor: not-allowed;
}
.st-floating-buttons {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 1000;
}
.st-float-btn {
width: 50px;
height: 50px;
border: 2px solid var(--st-primary);
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
color: var(--st-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 255, 157, 0.3);
}
.st-float-btn:hover {
background: linear-gradient(135deg, var(--st-primary) 0%, #00cc7a 100%);
color: #1a1a1a;
transform: translateY(-3px) scale(1.1);
box-shadow: 0 8px 25px rgba(0, 255, 157, 0.5);
}
.st-float-btn i {
font-size: 1.1rem;
}
@keyframes cookieSlideIn {
from {
transform: translateX(-120%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes cookieModalSlideIn {
from {
transform: scale(0.8) translateY(-20px);
opacity: 0;
}
to {
transform: scale(1) translateY(0);
opacity: 1;
}
}
@media (max-width: 768px) {
.st-cookies-banner {
left: 10px;
right: 10px;
max-width: none;
bottom: 10px;
}
.st-floating-buttons {
bottom: 10px;
right: 10px;
}
.st-float-btn {
width: 45px;
height: 45px;
}
.st-cookies-modal .modal-dialog {
margin: 0.5rem;
}
.category-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
@media (max-width: 480px) {
.st-cookies-banner {
padding: 12px 14px;
border-radius: 10px;
}
.st-banner-header h6 {
font-size: 0.78rem;
margin-bottom: 6px;
letter-spacing: 0.3px;
}
.st-banner-text {
font-size: 0.78rem;
line-height: 1.35;
margin-bottom: 10px;
}
.st-banner-buttons {
gap: 6px;
}
.st-banner-buttons .btn {
padding: 7px 10px;
font-size: 0.75rem;
border-radius: 6px;
}
}
.st-cookies-modal .modal-body::-webkit-scrollbar {
width: 12px;
}
.st-cookies-modal .modal-body::-webkit-scrollbar-track {
background: #1a1a1a;
border-radius: 6px;
}
.st-cookies-modal .modal-body::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, var(--st-primary) 0%, #00cc7a 100%);
border-radius: 6px;
border: 2px solid #1a1a1a;
}
.st-cookies-modal .modal-body::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #00cc7a 0%, var(--st-primary) 100%);
}
.st-cookies-modal .modal-body::-webkit-scrollbar-corner {
background: #1a1a1a;
}
.st-cookies-modal .modal-body {
scrollbar-width: thin;
scrollbar-color: var(--st-primary) #1a1a1a;
}
.st-cookies-floating-buttons {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1060;
display: flex;
flex-direction: column;
gap: 10px;
}
.st-cookies-floating-btn {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid var(--st-primary, #00ff9d);
background: rgba(0, 0, 0, 0.7);
color: var(--st-primary, #00ff9d);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
font-size: 1.2rem;
position: relative;
}
.st-cookies-floating-btn:hover {
transform: scale(1.1);
background: rgba(0, 255, 157, 0.1);
box-shadow: 0 5px 20px rgba(0, 255, 157, 0.3);
}
.st-cookies-floating-btn.scroll-top {
background: rgba(22, 33, 62, 0.95);
}
.st-cookies-floating-btn::before {
content: attr(data-tooltip);
position: absolute;
right: 65px;
top: 50%;
transform: translateY(-50%);
background: rgba(15, 23, 42, 0.95);
color: var(--st-text, #ffffff);
padding: 8px 12px;
border-radius: 6px;
font-size: 0.8rem;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
border: 1px solid var(--st-border, #374151);
pointer-events: none;
z-index: 1070;
}
.st-cookies-floating-btn:hover::before {
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(-5px);
}
.st-cookies-banner {
position: fixed;
bottom: 20px;
right: 20px;
width: 320px;
background: rgba(26, 26, 46, 0.98);
backdrop-filter: blur(15px);
border: 2px solid var(--st-primary, #00ff9d);
border-radius: 12px;
padding: 1.5rem;
z-index: 9998;
transform: translateX(110%);
transition: transform 0.4s ease;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.st-cookies-banner.show {
transform: translateX(0);
}
.st-cookies-banner h6 {
color: var(--st-primary, #00ff9d);
font-weight: 600;
margin-bottom: 0.75rem;
display: flex;
align-items: center;
}
.st-cookies-banner p {
color: var(--st-text, #ffffff);
font-size: 0.85rem;
margin-bottom: 1rem;
line-height: 1.4;
}
.st-cookies-banner .btn-group {
display: flex;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.st-cookies-banner .btn {
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
border-radius: 6px;
transition: all 0.3s ease;
}
.st-cookies-banner .btn-outline-light {
color: var(--st-text, #ffffff);
border-color: var(--st-border, #374151);
background: transparent;
}
.st-cookies-banner .btn-outline-light:hover {
background: rgba(51, 65, 85, 0.3);
color: var(--st-text, #ffffff);
}
.st-cookies-banner .btn-primary {
background: var(--st-primary, #00ff9d);
border: none;
color: var(--st-darker, #0f172a);
font-weight: 600;
}
.st-cookies-banner .btn-success {
background: var(--st-primary, #00ff9d);
border: 2px solid var(--st-primary, #00ff9d);
color: var(--st-darker, #0f172a);
font-weight: 600;
}
.st-cookies-banner .btn-success:hover {
background: rgba(0, 255, 157, 0.9);
border-color: var(--st-primary, #00ff9d);
color: var(--st-darker, #0f172a);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 255, 157, 0.3);
}
.st-cookies-modal {
--bs-modal-bg: rgba(26, 26, 46, 0.98);
--bs-modal-border-color: var(--st-border, #374151);
}
.st-cookies-modal .modal-content {
background: rgba(26, 26, 46, 0.98) !important;
backdrop-filter: blur(20px);
border: 2px solid var(--st-primary, #00ff9d);
border-radius: 12px;
}
.st-cookies-modal .modal-header {
border-bottom: 1px solid var(--st-border, #374151);
background: rgba(0, 255, 157, 0.1);
}
.st-cookies-modal .modal-footer {
border-top: 1px solid var(--st-border, #374151);
background: rgba(15, 23, 42, 0.5);
}
.st-cookies-categories {
max-height: 400px;
overflow-y: auto;
padding-right: 10px;
}
.st-cookies-category {
background: rgba(15, 23, 42, 0.3);
border: 1px solid var(--st-border, #374151);
border-radius: 8px;
padding: 1rem;
margin-bottom: 1rem;
}
.st-cookies-category h6 {
color: var(--st-primary, #00ff9d);
font-weight: 600;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.st-cookies-category p {
color: var(--st-text-muted, #cbd5e1);
font-size: 0.85rem;
margin-bottom: 0.75rem;
}
.st-cookies-category small.text-muted {
color: #e2e8f0 !important;
font-size: 0.8rem;
opacity: 0.9;
}
.st-cookies-toggle {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.st-cookies-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.st-cookies-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--st-dark, #1e293b);
transition: 0.4s;
border-radius: 24px;
border: 1px solid var(--st-border, #374151);
}
.st-cookies-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 2px;
bottom: 2px;
background-color: var(--st-text-muted, #cbd5e1);
transition: 0.4s;
border-radius: 50%;
}
.st-cookies-toggle input:checked + .st-cookies-slider {
background-color: var(--st-primary, #00ff9d);
border-color: var(--st-primary, #00ff9d);
}
.st-cookies-toggle input:disabled + .st-cookies-slider {
background-color: var(--st-primary, #00ff9d);
opacity: 0.6;
cursor: not-allowed;
}
.st-cookies-toggle input:checked + .st-cookies-slider:before {
transform: translateX(26px);
background-color: var(--st-darker, #0f172a);
}
.st-cookies-toggle input:focus + .st-cookies-slider {
box-shadow: 0 0 0 2px rgba(0, 255, 157, 0.3);
}
@media (max-width: 768px) {
.st-cookies-banner {
width: calc(100vw - 40px);
right: 20px;
left: 20px;
bottom: 20px;
}
.st-cookies-floating-buttons {
bottom: 15px;
right: 15px;
}
.st-cookies-floating-btn {
width: 45px;
height: 45px;
font-size: 1rem;
}
.st-cookies-categories {
max-height: 300px;
}
}
.chat-contact-switch-container {
background: transparent;
position: relative;
width: 100%;
}
.switch-selector-container {
display: flex;
justify-content: center;
align-items: center;
padding: 1rem 0 1.5rem 0;
background: transparent;
margin-bottom: 1rem;
}
.switch-selector {
position: relative;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--st-border, rgba(255, 255, 255, 0.1));
border-radius: 2rem;
padding: 0.25rem;
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
}
.switch-selector:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
}
.switch-background {
position: absolute;
top: 0.25rem;
left: 0.25rem;
height: calc(100% - 0.5rem);
background: linear-gradient(135deg, var(--st-primary, #00ff9d), var(--st-secondary, #00ccff));
border-radius: 1.75rem;
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
box-shadow: 0 4px 12px rgba(0, 255, 157, 0.3);
z-index: 1;
}
.switch-option {
position: relative;
z-index: 2;
padding: 0.75rem 1.5rem;
border-radius: 1.75rem;
background: transparent;
border: none;
color: var(--st-text-muted, #9ca3af);
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
}
.switch-option:hover {
color: var(--st-text, #ffffff);
}
.switch-option.active {
color: var(--st-dark, #0a0a0a);
}
.switch-option i {
font-size: 1rem;
}
.switch-selector[data-active="chat"] .switch-background {
width: var(--chat-width);
left: 0.25rem;
}
.switch-selector[data-active="contact"] .switch-background {
width: var(--contact-width);
left: var(--contact-left);
}
.switch-views {
position: relative;
width: 100%;
}
.view {
width: 100%;
}
.panel-header {
margin-bottom: 0.5rem;
text-align: center;
opacity: 0;
transform: translateY(10px);
animation: fadeInUp 0.6s ease forwards;
padding: 0.25rem 0.5rem;
background: transparent;
border-radius: 0.25rem;
}
.panel-title {
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 0.125rem;
color: var(--st-text, #ffffff);
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
}
.panel-subtitle {
color: rgba(255, 255, 255, 0.8);
margin: 0;
font-size: 0.75rem;
line-height: 1.2;
opacity: 1;
}
.panel-content { position: relative; }
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-enter { opacity: 0; }
.fade-enter-active { transition: opacity .25s ease; opacity: 1; }
.loading-state {
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
flex-direction: column;
gap: 1rem;
}
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(255, 255, 255, 0.1);
border-top: 3px solid var(--st-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.error-state {
text-align: center;
padding: 2rem;
color: var(--st-text-muted);
}
.error-state i {
font-size: 2rem;
margin-bottom: 1rem;
color: #ff6b6b;
}
@media (max-width: 768px) {
.switch-selector-container {
padding: 1rem;
}
.switch-option {
padding: 0.625rem 1.25rem;
font-size: 0.85rem;
}
.switch-option i {
font-size: 0.9rem;
}
.view { padding: 1.5rem 0; }
.panel-title { font-size: 1rem; }
.panel-subtitle { font-size: 0.85rem; }
}
@media (max-width: 480px) {
.switch-option {
padding: 0.5rem 1rem;
font-size: 0.8rem;
gap: 0.25rem;
}
.view { padding: 1rem 0; }
}
.switch-option:focus {
outline: 2px solid var(--st-primary);
outline-offset: 2px;
}
.switch-selector:focus-within {
box-shadow: 0 0 0 3px rgba(0, 255, 157, 0.3);
}
@media (prefers-color-scheme: dark) {
.chat-contact-switch-container {
background: transparent;
}
}
@media print {
.chat-contact-switch-container {
display: none !important;
}
}
.chat-contact-switch-container .view.view-contact .panel-content.contact-content a,
.chat-contact-switch-container .view.view-contact .panel-content .contact-social-block .social-buttons a,
.chat-contact-switch-container .view.view-contact .panel-content .social-btn {
color: var(--st-primary, #00ff9d);
text-decoration: none !important;
border-bottom: 1px solid transparent !important;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.15rem 0.1rem;
margin: 0.125rem 0.75rem 0.125rem 0;
font-weight: 600;
transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.chat-contact-switch-container .view.view-contact .panel-content.contact-content a:hover,
.chat-contact-switch-container .view.view-contact .panel-content .contact-social-block .social-buttons a:hover,
.chat-contact-switch-container .view.view-contact .panel-content .social-btn:hover {
color: var(--st-primary, #00ff9d);
border-bottom-color: currentColor !important;
opacity: 0.9;
}
.chat-contact-switch-container .view.view-contact .panel-content.contact-content a i,
.chat-contact-switch-container .view.view-contact .panel-content.contact-content a svg,
.chat-contact-switch-container .view.view-contact .panel-content .social-btn i,
.chat-contact-switch-container .view.view-contact .panel-content .social-btn svg {
color: currentColor;
}
.chat-contact-switch-container .contact-social-block,
.chat-contact-switch-container .contact-buttons-section { margin-top: 1.25rem; }
.chat-contact-switch-container .social-buttons,
.chat-contact-switch-container .contact-buttons-section .social-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
}
.chat-contact-switch-container .social-btn,
.chat-contact-switch-container .view.view-contact .panel-content .social-buttons a,
.chat-contact-switch-container .contact-buttons-section .social-buttons a,
.chat-contact-switch-container .contact-buttons-section a.contact-action-btn {
--btn-bg: rgba(255,255,255,0.06);
--btn-bg-hover: rgba(255,255,255,0.1);
--btn-border: rgba(255,255,255,0.12);
color: var(--st-primary, #00ff9d) !important;
background: var(--btn-bg) !important;
border: 1px solid var(--btn-border) !important;
border-radius: 8px !important; 
height: 56px !important; 
padding: 0 1rem !important; 
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
font-weight: 700;
line-height: 1.15;
font-size: 1rem;
white-space: nowrap;
transition: background-color .2s ease, border-color .2s ease, opacity .2s ease, color .2s ease;
}
.chat-contact-switch-container .social-btn:hover,
.chat-contact-switch-container .view.view-contact .panel-content .social-buttons a:hover,
.chat-contact-switch-container .contact-buttons-section .social-buttons a:hover,
.chat-contact-switch-container .contact-buttons-section a.contact-action-btn:hover {
background: var(--btn-bg-hover) !important;
border-color: rgba(255,255,255,0.2) !important;
}
.chat-contact-switch-container .social-btn i,
.chat-contact-switch-container .social-btn svg,
.chat-contact-switch-container .view.view-contact .panel-content .social-buttons a i,
.chat-contact-switch-container .view.view-contact .panel-content .social-buttons a svg,
.chat-contact-switch-container .contact-buttons-section .social-buttons a i,
.chat-contact-switch-container .contact-buttons-section .social-buttons a svg,
.chat-contact-switch-container .contact-buttons-section a.contact-action-btn i,
.chat-contact-switch-container .contact-buttons-section a.contact-action-btn svg {
color: currentColor;
font-size: 0.95rem;
}
.chat-contact-switch-container .contact-social-block .social-buttons a,
.chat-contact-switch-container .contact-buttons-section .social-buttons a,
.chat-contact-switch-container .contact-buttons-section a.contact-action-btn {
text-decoration: none !important;
box-shadow: none !important;
background-image: none !important;
}
.contact-buttons-section a.contact-action-btn {
--btn-bg: rgba(255,255,255,0.06);
--btn-bg-hover: rgba(255,255,255,0.1);
--btn-border: rgba(255,255,255,0.12);
color: var(--st-primary, #00ff9d) !important;
background: var(--btn-bg) !important;
border: 1px solid var(--btn-border) !important;
border-radius: 8px !important; 
height: 56px !important; 
padding: 0 1rem !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.6rem !important;
font-weight: 700 !important;
line-height: 1.15 !important;
font-size: 1rem !important;
text-decoration: none !important;
}
.contact-buttons-section a.contact-action-btn:hover {
background: var(--btn-bg-hover) !important;
border-color: rgba(255,255,255,0.2) !important;
}
.contact-buttons-section a.contact-action-btn i,
.contact-buttons-section a.contact-action-btn svg {
color: currentColor !important;
font-size: 1.05rem !important;
}
.contact-buttons-section .col-md-3 .contact-action-btn,
.contact-buttons-section .col-sm-6 .contact-action-btn {
width: 100% !important;
}
.chat-contact-switch-container .social-buttons { justify-content: center; }
.chat-contact-switch-container .social-buttons a { width: 210px; }
@media (max-width: 576px) {
.chat-contact-switch-container .social-buttons a { width: 100%; }
}
.contact-section .text-center .text-muted {
color: rgba(255,255,255,0.6) !important;
font-weight: 400;
}
.contact-section .contact-buttons-section {
background: rgba(255,255,255,0.02);
border-radius: 16px;
padding: 2rem 1.5rem;
border: 1px solid rgba(255,255,255,0.08);
margin-top: 2rem !important;
position: relative;
z-index: 10;
}
.contact-section .contact-switch-wrapper + * {
clear: both;
margin-top: 3rem !important;
}
.contact-section .social-section-wrapper {
margin-top: 3rem !important;
padding-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.05);
position: relative;
z-index: 10;
}
.contact-section .contact-buttons-section .row {
justify-content: center;
}
.contact-section .contact-buttons-section a.contact-action-btn {
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.contact-section .contact-buttons-section a.contact-action-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0,255,157,0.15);
}
.contact-section .contact-buttons-section a.contact-action-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
transition: left 0.5s ease;
}
.contact-section .contact-buttons-section a.contact-action-btn:hover::before {
left: 100%;
}
.contact-section .email-btn:hover { border-color: #ff6b6b !important; }
.contact-section .linkedin-btn:hover { border-color: #0077b5 !important; }
.contact-section .github-btn:hover { border-color: #333 !important; }
.contact-section .website-btn:hover { border-color: #00ff9d !important; }
.contact-section .twitter-btn:hover { border-color: #1da1f2 !important; }
.contact-section .phone-btn:hover { border-color: #25d366 !important; }
.chat-contact-switch-container .social-section-wrapper {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.chat-contact-switch-container .contact-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
color: white;
text-decoration: none;
transition: all 0.3s ease;
font-size: 0.9rem;
font-weight: 500;
width: 100%;
min-height: 50px;
}
.chat-contact-switch-container .contact-action-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--st-primary, #00ff9d);
color: var(--st-primary, #00ff9d);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 255, 157, 0.2);
}
.chat-contact-switch-container .contact-action-btn i {
font-size: 1.2rem;
opacity: 0.8;
}
.chat-contact-switch-container .email-btn:hover { 
background: rgba(220, 53, 69, 0.1); 
border-color: #dc3545; 
color: #dc3545; 
}
.chat-contact-switch-container .linkedin-btn:hover { 
background: rgba(0, 119, 181, 0.1); 
border-color: #0077b5; 
color: #0077b5; 
}
.chat-contact-switch-container .github-btn:hover { 
background: rgba(36, 41, 47, 0.1); 
border-color: #24292f; 
color: #24292f; 
}
.chat-contact-switch-container .twitter-btn:hover { 
background: rgba(29, 161, 242, 0.1); 
border-color: #1da1f2; 
color: #1da1f2; 
}
.chat-contact-switch-container .website-btn:hover { 
background: rgba(0, 255, 157, 0.1); 
border-color: var(--st-primary, #00ff9d); 
color: var(--st-primary, #00ff9d); 
}
.chat-contact-switch-container .phone-btn:hover { 
background: rgba(40, 167, 69, 0.1); 
border-color: #28a745; 
color: #28a745; 
}
.chat-contact-switch-container .facebook-btn:hover { 
background: rgba(24, 119, 242, 0.1); 
border-color: #1877f2; 
color: #1877f2; 
}
.chat-contact-switch-container .instagram-btn:hover { 
background: rgba(225, 48, 108, 0.1); 
border-color: #e1306c; 
color: #e1306c; 
}
.chat-contact-switch-container .youtube-btn:hover { 
background: rgba(255, 0, 0, 0.1); 
border-color: #ff0000; 
color: #ff0000; 
}
.chat-contact-switch-container .tiktok-btn:hover { 
background: rgba(255, 0, 80, 0.1); 
border-color: #ff0050; 
color: #ff0050; 
}
.chat-contact-switch-container .telegram-btn:hover { 
background: rgba(0, 136, 204, 0.1); 
border-color: #0088cc; 
color: #0088cc; 
}
.chat-contact-switch-container .whatsapp-btn:hover { 
background: rgba(37, 211, 102, 0.1); 
border-color: #25d366; 
color: #25d366; 
}
.chat-contact-switch-container .behance-btn:hover { 
background: rgba(0, 101, 255, 0.1); 
border-color: #0065ff; 
color: #0065ff; 
}
.chat-contact-switch-container .dribbble-btn:hover { 
background: rgba(234, 76, 137, 0.1); 
border-color: #ea4c89; 
color: #ea4c89; 
}
.chat-contact-switch-container .stackoverflow-btn:hover { 
background: rgba(244, 128, 36, 0.1); 
border-color: #f48024; 
color: #f48024; 
}
.chat-contact-switch-container .devto-btn:hover { 
background: rgba(15, 23, 42, 0.1); 
border-color: #0f172a; 
color: #0f172a; 
}
.chat-contact-switch-container .medium-btn:hover { 
background: rgba(18, 18, 18, 0.1); 
border-color: #121212; 
color: #121212; 
}
@media (max-width: 576px) {
.chat-contact-switch-container .contact-buttons-section .row {
gap: 0.5rem;
}
.chat-contact-switch-container .contact-action-btn {
padding: 0.6rem 0.8rem;
font-size: 0.8rem;
min-height: 45px;
}
.chat-contact-switch-container .contact-action-btn i {
font-size: 1rem;
}
}