468 lines
8.4 KiB
CSS
468 lines
8.4 KiB
CSS
/* ==========================================
|
|
Phantom Protocol - Адаптивные стили
|
|
Дополнительные responsive breakpoints
|
|
© NeroWorld AI, 2025
|
|
========================================== */
|
|
|
|
/* === Extra Large Devices (1400px+) === */
|
|
@media (min-width: 1400px) {
|
|
.container {
|
|
max-width: 1320px;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 4.5rem;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 3.5rem;
|
|
}
|
|
}
|
|
|
|
/* === Large Devices (992px - 1199px) === */
|
|
@media (max-width: 1199px) {
|
|
.hero-title {
|
|
font-size: 3.5rem;
|
|
}
|
|
|
|
.feature-card,
|
|
.doc-card,
|
|
.community-card {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.comparison-table {
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|
|
|
|
/* === Medium Devices (768px - 991px) === */
|
|
@media (max-width: 991px) {
|
|
/* Навигация */
|
|
.navbar-collapse {
|
|
background: rgba(10, 10, 15, 0.98);
|
|
backdrop-filter: blur(20px);
|
|
padding: 1.5rem;
|
|
border-radius: var(--border-radius);
|
|
margin-top: 1rem;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.nav-link {
|
|
padding: 0.75rem 1rem !important;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.nav-link:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Hero */
|
|
.hero-title {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.hero-cta {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.hero-cta .btn {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Секции */
|
|
.section-padding {
|
|
padding: 4rem 0;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
/* Архитектура */
|
|
.arch-layer {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.layer-icon {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/* Демо */
|
|
.demo-container {
|
|
padding: 2rem 1.5rem;
|
|
}
|
|
|
|
#demoCanvas {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* Статистика */
|
|
.hero-stats .col-md-4,
|
|
.demo-stats .col-md-3 {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer .col-lg-4,
|
|
.footer .col-lg-2,
|
|
.footer .col-md-6 {
|
|
margin-bottom: 2rem;
|
|
}
|
|
}
|
|
|
|
/* === Small Devices (576px - 767px) === */
|
|
@media (max-width: 767px) {
|
|
/* Типографика */
|
|
h1 { font-size: 2rem; }
|
|
h2 { font-size: 1.75rem; }
|
|
h3 { font-size: 1.5rem; }
|
|
h4 { font-size: 1.25rem; }
|
|
|
|
/* Hero */
|
|
.hero-title {
|
|
font-size: 2rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.badge-container {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.badge-pill {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
/* Кнопки */
|
|
.btn {
|
|
padding: 0.65rem 1.5rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.btn-lg {
|
|
padding: 0.75rem 2rem;
|
|
}
|
|
|
|
/* Карточки */
|
|
.feature-icon,
|
|
.doc-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.glass-card {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
/* Таблица сравнения */
|
|
.comparison-table {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.comparison-table th,
|
|
.comparison-table td {
|
|
padding: 0.75rem 0.5rem;
|
|
}
|
|
|
|
/* Код */
|
|
.code-block {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.code-block pre {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.copy-btn {
|
|
position: static;
|
|
width: 100%;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/* Демо */
|
|
.demo-visualization {
|
|
min-height: 350px;
|
|
padding: 1rem;
|
|
}
|
|
|
|
#demoCanvas {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
|
|
.demo-stat .stat-value {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
/* Testimonials */
|
|
.testimonial-text {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.quote-icon {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
/* Recognition badges */
|
|
.recognition-badges {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.recognition-badge {
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer-bottom .col-md-6 {
|
|
text-align: center !important;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.social-links {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* === Extra Small Devices (< 576px) === */
|
|
@media (max-width: 575px) {
|
|
/* Hero */
|
|
.hero-section {
|
|
min-height: auto;
|
|
padding: 100px 0 50px;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.hero-stats {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.stat-item {
|
|
padding: 1rem;
|
|
}
|
|
|
|
/* Секции */
|
|
.section-padding {
|
|
padding: 3rem 0;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.75rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.section-subtitle {
|
|
font-size: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
/* Навигация */
|
|
.navbar-brand {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.navbar-brand i {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
/* Архитектура */
|
|
.arch-layer {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.layer-number {
|
|
width: 50px;
|
|
height: 50px;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.layer-content h4 {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.layer-content p {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* Демо */
|
|
.demo-container {
|
|
padding: 1.5rem 1rem;
|
|
}
|
|
|
|
.demo-controls .btn {
|
|
width: 100%;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.demo-controls .btn-lg {
|
|
font-size: 0.9rem;
|
|
padding: 0.65rem 1.5rem;
|
|
}
|
|
|
|
#demoCanvas {
|
|
height: 250px;
|
|
}
|
|
|
|
/* Платформы */
|
|
.platform-card i {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.platform-card h5 {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.platform-card p {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
padding: 3rem 0 1.5rem;
|
|
}
|
|
|
|
.footer-brand {
|
|
font-size: 1.2rem;
|
|
}
|
|
}
|
|
|
|
/* === Touch Devices === */
|
|
@media (hover: none) and (pointer: coarse) {
|
|
/* Убираем hover-эффекты на touch устройствах */
|
|
.glass-card:hover {
|
|
transform: none;
|
|
}
|
|
|
|
.feature-card:hover,
|
|
.doc-card:hover,
|
|
.community-card:hover {
|
|
transform: none;
|
|
}
|
|
|
|
.stat-item:hover {
|
|
transform: none;
|
|
}
|
|
|
|
/* Увеличиваем область нажатия */
|
|
.btn {
|
|
min-height: 44px;
|
|
}
|
|
|
|
.nav-link {
|
|
min-height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.copy-btn {
|
|
min-height: 44px;
|
|
}
|
|
}
|
|
|
|
/* === Print Styles === */
|
|
@media print {
|
|
/* Скрываем ненужные элементы */
|
|
.navbar,
|
|
.scroll-indicator,
|
|
.demo-controls,
|
|
#heroBackground,
|
|
.theme-toggle,
|
|
.social-links {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Оптимизация для печати */
|
|
body {
|
|
background: white;
|
|
color: black;
|
|
}
|
|
|
|
.glass-card {
|
|
background: white;
|
|
border: 1px solid #ddd;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
page-break-after: avoid;
|
|
}
|
|
|
|
/* Показываем ссылки */
|
|
a[href]:after {
|
|
content: " (" attr(href) ")";
|
|
}
|
|
}
|
|
|
|
/* === High Contrast Mode === */
|
|
@media (prefers-contrast: high) {
|
|
:root {
|
|
--color-bg: #000000;
|
|
--color-text: #ffffff;
|
|
--color-accent: #00ffff;
|
|
}
|
|
|
|
.glass-card {
|
|
border: 2px solid var(--color-accent);
|
|
}
|
|
}
|
|
|
|
/* === Reduced Motion === */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
|
|
.scroll-indicator {
|
|
animation: none;
|
|
}
|
|
|
|
.pulse-btn {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* === Landscape Orientation (Mobile) === */
|
|
@media (max-width: 991px) and (orientation: landscape) {
|
|
.hero-section {
|
|
min-height: auto;
|
|
padding: 120px 0 40px;
|
|
}
|
|
|
|
.hero-stats {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.section-padding {
|
|
padding: 3rem 0;
|
|
}
|
|
} |