427 lines
10 KiB
CSS
427 lines
10 KiB
CSS
/**
|
||
* Vendor Prefixes for Cross-Browser Compatibility
|
||
* Phantom Protocol
|
||
*
|
||
* Этот файл содержит vendor prefixes для поддержки старых браузеров
|
||
* Safari, Firefox, Chrome, Edge
|
||
*/
|
||
|
||
/* ========================================
|
||
BACKDROP FILTER (Safari требует -webkit-)
|
||
======================================== */
|
||
|
||
.navbar.glass-nav {
|
||
-webkit-backdrop-filter: blur(20px);
|
||
backdrop-filter: blur(20px);
|
||
}
|
||
|
||
.glass-card,
|
||
.card.glass-card {
|
||
-webkit-backdrop-filter: blur(20px);
|
||
backdrop-filter: blur(20px);
|
||
}
|
||
|
||
.modal-content {
|
||
-webkit-backdrop-filter: blur(30px);
|
||
backdrop-filter: blur(30px);
|
||
}
|
||
|
||
/* ========================================
|
||
USER SELECT (предотвращение выделения)
|
||
======================================== */
|
||
|
||
.btn,
|
||
button {
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
user-select: none;
|
||
}
|
||
|
||
/* ========================================
|
||
TRANSFORM (трансформации)
|
||
======================================== */
|
||
|
||
.card:hover,
|
||
.glass-card:hover {
|
||
-webkit-transform: translateY(-10px);
|
||
-moz-transform: translateY(-10px);
|
||
-ms-transform: translateY(-10px);
|
||
-o-transform: translateY(-10px);
|
||
transform: translateY(-10px);
|
||
}
|
||
|
||
.hover-lift:hover {
|
||
-webkit-transform: translateY(-5px);
|
||
-moz-transform: translateY(-5px);
|
||
-ms-transform: translateY(-5px);
|
||
-o-transform: translateY(-5px);
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
/* ========================================
|
||
TRANSITION (плавные переходы)
|
||
======================================== */
|
||
|
||
.navbar,
|
||
.nav-link,
|
||
.btn,
|
||
.card,
|
||
a {
|
||
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
/* ========================================
|
||
ANIMATION (анимации)
|
||
======================================== */
|
||
|
||
@-webkit-keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
@-moz-keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
@-o-keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
@-webkit-keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.5; }
|
||
}
|
||
|
||
@-moz-keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.5; }
|
||
}
|
||
|
||
@-o-keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.5; }
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.5; }
|
||
}
|
||
|
||
.pulse-dot {
|
||
-webkit-animation: pulse 2s infinite;
|
||
-moz-animation: pulse 2s infinite;
|
||
-o-animation: pulse 2s infinite;
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
/* ========================================
|
||
FLEXBOX (старые браузеры)
|
||
======================================== */
|
||
|
||
.d-flex,
|
||
.navbar-brand,
|
||
.nav {
|
||
display: -webkit-box;
|
||
display: -moz-box;
|
||
display: -ms-flexbox;
|
||
display: -webkit-flex;
|
||
display: flex;
|
||
}
|
||
|
||
.flex-column {
|
||
-webkit-flex-direction: column;
|
||
-moz-flex-direction: column;
|
||
-ms-flex-direction: column;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.justify-content-center {
|
||
-webkit-justify-content: center;
|
||
-moz-justify-content: center;
|
||
-ms-justify-content: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.align-items-center {
|
||
-webkit-align-items: center;
|
||
-moz-align-items: center;
|
||
-ms-align-items: center;
|
||
align-items: center;
|
||
}
|
||
|
||
/* ========================================
|
||
BOX-SHADOW (тени с цветным свечением)
|
||
======================================== */
|
||
|
||
.card:hover,
|
||
.glass-card:hover {
|
||
-webkit-box-shadow: 0 20px 60px rgba(0, 240, 255, 0.3);
|
||
-moz-box-shadow: 0 20px 60px rgba(0, 240, 255, 0.3);
|
||
box-shadow: 0 20px 60px rgba(0, 240, 255, 0.3);
|
||
}
|
||
|
||
.btn-gradient {
|
||
-webkit-box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
|
||
-moz-box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
|
||
box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
|
||
}
|
||
|
||
/* ========================================
|
||
GRADIENT (градиенты)
|
||
======================================== */
|
||
|
||
.btn-gradient {
|
||
background: -webkit-linear-gradient(135deg, #00f0ff 0%, #7a3eff 100%);
|
||
background: -moz-linear-gradient(135deg, #00f0ff 0%, #7a3eff 100%);
|
||
background: -o-linear-gradient(135deg, #00f0ff 0%, #7a3eff 100%);
|
||
background: linear-gradient(135deg, #00f0ff 0%, #7a3eff 100%);
|
||
}
|
||
|
||
.text-gradient {
|
||
background: -webkit-linear-gradient(90deg, #00f0ff, #7a3eff, #ff2a6d);
|
||
background: -moz-linear-gradient(90deg, #00f0ff, #7a3eff, #ff2a6d);
|
||
background: -o-linear-gradient(90deg, #00f0ff, #7a3eff, #ff2a6d);
|
||
background: linear-gradient(90deg, #00f0ff, #7a3eff, #ff2a6d);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
/* ========================================
|
||
BORDER-RADIUS (скругленные углы)
|
||
======================================== */
|
||
|
||
.card,
|
||
.btn,
|
||
.form-control,
|
||
input,
|
||
textarea {
|
||
-webkit-border-radius: 8px;
|
||
-moz-border-radius: 8px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.glass-card {
|
||
-webkit-border-radius: 16px;
|
||
-moz-border-radius: 16px;
|
||
border-radius: 16px;
|
||
}
|
||
|
||
/* ========================================
|
||
APPEARANCE (удаление нативных стилей)
|
||
======================================== */
|
||
|
||
input,
|
||
textarea,
|
||
select,
|
||
button {
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
appearance: none;
|
||
}
|
||
|
||
/* ========================================
|
||
SCROLLBAR (кастомный скроллбар - только WebKit)
|
||
======================================== */
|
||
|
||
::-webkit-scrollbar {
|
||
width: 10px;
|
||
height: 10px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: var(--color-accent);
|
||
border-radius: 5px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: var(--color-accent-secondary);
|
||
}
|
||
|
||
/* ========================================
|
||
PLACEHOLDER (placeholder стили)
|
||
======================================== */
|
||
|
||
::-webkit-input-placeholder {
|
||
color: var(--color-text-muted);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
::-moz-placeholder {
|
||
color: var(--color-text-muted);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
:-ms-input-placeholder {
|
||
color: var(--color-text-muted);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
::placeholder {
|
||
color: var(--color-text-muted);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* ========================================
|
||
OBJECT-FIT (изображения)
|
||
======================================== */
|
||
|
||
img {
|
||
-o-object-fit: cover;
|
||
object-fit: cover;
|
||
}
|
||
|
||
/* ========================================
|
||
FILTER (фильтры изображений)
|
||
======================================== */
|
||
|
||
img:hover {
|
||
-webkit-filter: brightness(1.1);
|
||
-moz-filter: brightness(1.1);
|
||
-o-filter: brightness(1.1);
|
||
filter: brightness(1.1);
|
||
}
|
||
|
||
/* ========================================
|
||
POSITION: STICKY (липкие элементы)
|
||
======================================== */
|
||
|
||
.sticky-top {
|
||
position: -webkit-sticky;
|
||
position: sticky;
|
||
top: 0;
|
||
}
|
||
|
||
/* ========================================
|
||
CALC (математические вычисления)
|
||
======================================== */
|
||
|
||
.full-height {
|
||
height: -webkit-calc(100vh - 80px);
|
||
height: -moz-calc(100vh - 80px);
|
||
height: calc(100vh - 80px);
|
||
}
|
||
|
||
/* ========================================
|
||
POINTER-EVENTS (взаимодействие с элементами)
|
||
======================================== */
|
||
|
||
.disabled {
|
||
pointer-events: none;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/* ========================================
|
||
BOX-SIZING (модель блока)
|
||
======================================== */
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* ========================================
|
||
WILL-CHANGE (оптимизация производительности)
|
||
======================================== */
|
||
|
||
.card,
|
||
.btn,
|
||
.nav-link {
|
||
will-change: transform;
|
||
}
|
||
|
||
/* ========================================
|
||
OPACITY (прозрачность с анимацией)
|
||
======================================== */
|
||
|
||
.fade-in {
|
||
-webkit-animation: fadeIn 0.5s ease-in-out;
|
||
-moz-animation: fadeIn 0.5s ease-in-out;
|
||
-o-animation: fadeIn 0.5s ease-in-out;
|
||
animation: fadeIn 0.5s ease-in-out;
|
||
}
|
||
|
||
/* ========================================
|
||
TEXT-SHADOW (тени текста для cyberpunk стиля)
|
||
======================================== */
|
||
|
||
h1,
|
||
h2,
|
||
.display-3,
|
||
.display-4 {
|
||
text-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
|
||
}
|
||
|
||
/* ========================================
|
||
CLIP-PATH (обрезка элементов - современные браузеры)
|
||
======================================== */
|
||
|
||
.hero-background::before {
|
||
-webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
|
||
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
|
||
}
|
||
|
||
/* ========================================
|
||
GRID LAYOUT (сетка - старые браузеры)
|
||
======================================== */
|
||
|
||
.container,
|
||
.row {
|
||
display: -ms-grid;
|
||
display: grid;
|
||
}
|
||
|
||
/* ========================================
|
||
MEDIA QUERIES для ПОДДЕРЖКИ
|
||
======================================== */
|
||
|
||
/* IE 10-11 */
|
||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||
.glass-card {
|
||
background: rgba(15, 15, 30, 0.9);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
}
|
||
|
||
/* Edge 12-18 */
|
||
@supports (-ms-ime-align:auto) {
|
||
.glass-card {
|
||
background: rgba(15, 15, 30, 0.9);
|
||
}
|
||
}
|
||
|
||
/* Firefox Fallback для backdrop-filter */
|
||
@-moz-document url-prefix() {
|
||
.glass-card,
|
||
.navbar.glass-nav {
|
||
background: rgba(15, 15, 30, 0.95);
|
||
}
|
||
}
|
||
|
||
/* Safari 9+ */
|
||
@media not all and (min-resolution:.001dpcm) {
|
||
@supports (-webkit-appearance:none) {
|
||
.glass-card {
|
||
-webkit-backdrop-filter: blur(20px);
|
||
}
|
||
}
|
||
} |