unified: Phantom Protocol 2025 complete archive integration
This commit is contained in:
468
website/css/responsive.css
Normal file
468
website/css/responsive.css
Normal file
@@ -0,0 +1,468 @@
|
||||
/* ==========================================
|
||||
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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user