/** * Standard Pages — SMC * Файл: /wp-content/themes/smc/assets/css/page.css * Версия: 1.0.0 * Author: NUVREN * * Назначение: * - Универсальный фирменный стиль для обычных страниц (page.php). * - Gutenberg-ready: большие тексты, изображения, галереи, видео, embeds, * таблицы, цитаты, списки, кнопки, код, адаптация под все устройства. */ /* ============================================================ 0) PAGE BACKGROUND + LAYOUT ============================================================ */ .smc-page--standard { background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.16), transparent 55%), radial-gradient(circle at bottom right, rgba(129, 140, 248, 0.12), transparent 55%), #f9fafb; } .smc-page-hero { padding: 80px 0 34px; } @media (max-width: 768px) { .smc-page-hero { padding: 64px 0 28px; } } @media (max-width: 480px) { .smc-page-hero { padding: 56px 0 24px; } } /* Center + readable line length */ .smc-page-panel { padding: 24px 24px 22px; max-width: 900px; /* comfortable for long reads */ margin: 0 auto; } @media (max-width: 640px) { .smc-page-panel { padding: 20px 18px 18px; } } /* ============================================================ 1) TYPOGRAPHY ============================================================ */ .smc-page-title { margin: 0 0 12px; font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: #020617; } .smc-page-content { font-size: 14px; line-height: 1.75; color: #4b5563; } /* Improve long-form readability */ .smc-page-content p { margin: 0 0 12px; } .smc-page-content strong { color: #0f172a; } .smc-page-content a { color: #0ea5e9; font-weight: 600; text-decoration: none; word-break: break-word; } .smc-page-content a:hover { text-decoration: underline; } /* Headings inside content (Gutenberg) */ .smc-page-content h2, .smc-page-content h3, .smc-page-content h4 { margin: 18px 0 10px; color: #0f172a; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; } .smc-page-content h2 { font-size: 20px; } .smc-page-content h3 { font-size: 16px; } .smc-page-content h4 { font-size: 14px; } /* Lists */ .smc-page-content ul, .smc-page-content ol { margin: 10px 0 14px; padding-left: 18px; color: #0f172a; } .smc-page-content li { margin-bottom: 6px; } /* ============================================================ 2) GUTENBERG SPACING ============================================================ */ .smc-page-content > *:first-child { margin-top: 0; } .smc-page-content > *:last-child { margin-bottom: 0; } .smc-page-content .wp-block-group, .smc-page-content .wp-block-columns, .smc-page-content .wp-block-column, .smc-page-content .wp-block-cover, .smc-page-content .wp-block-media-text, .smc-page-content .wp-block-image, .smc-page-content .wp-block-gallery, .smc-page-content .wp-block-embed, .smc-page-content .wp-block-table, .smc-page-content .wp-block-buttons, .smc-page-content .wp-block-separator, .smc-page-content .wp-block-quote, .smc-page-content .wp-block-pullquote { margin: 0 0 14px; } /* ============================================================ 3) IMAGES + GALLERIES (responsive, safe for any size) ============================================================ */ .smc-page-content img { max-width: 100%; height: auto; border-radius: 16px; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14); } /* Captions */ .smc-page-content figcaption { margin-top: 8px; font-size: 12px; line-height: 1.5; color: #6b7280; } /* Align wide/full should not break layout */ .smc-page-content .alignwide, .smc-page-content .alignfull { max-width: 100%; } /* ============================================================ 4) VIDEO / EMBEDS (YouTube, maps, etc.) ============================================================ */ /* Gutenberg embeds are already responsive-ish, but enforce safety */ .smc-page-content .wp-block-embed__wrapper, .smc-page-content .wp-block-video video, .smc-page-content iframe { max-width: 100%; } .smc-page-content iframe { border: 0; border-radius: 16px; } /* If editor outputs fixed iframe sizes, this keeps it usable */ .smc-page-content .wp-block-embed { overflow: hidden; border-radius: 16px; } /* ============================================================ 5) BUTTONS (Gutenberg) ============================================================ */ .smc-page-content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; } .smc-page-content .wp-block-button__link { border-radius: 999px; padding: 12px 18px; font-weight: 800; text-decoration: none; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12); } /* ============================================================ 6) CALLOUT / GROUP WITH BACKGROUND (promo blocks) ============================================================ */ .smc-page-content .wp-block-group.has-background { padding: 16px 16px 14px; border-radius: 18px; box-shadow: 0 22px 60px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(148, 163, 184, 0.16); } /* ============================================================ 7) QUOTES ============================================================ */ .smc-page-content blockquote, .smc-page-content .wp-block-quote { border-left: 3px solid rgba(56, 189, 248, 0.55); padding: 10px 14px; margin: 0 0 14px; border-radius: 14px; background: rgba(56, 189, 248, 0.06); color: #0f172a; } .smc-page-content blockquote p, .smc-page-content .wp-block-quote p { margin: 0; } /* ============================================================ 8) TABLES (responsive) ============================================================ */ .smc-page-content .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } .smc-page-content table { width: 100%; border-collapse: collapse; background: #ffffff; border-radius: 14px; overflow: hidden; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(148, 163, 184, 0.14); } .smc-page-content th, .smc-page-content td { padding: 10px 12px; border-bottom: 1px solid rgba(148, 163, 184, 0.18); text-align: left; font-size: 13px; } .smc-page-content th { color: #0f172a; font-weight: 800; background: rgba(56, 189, 248, 0.06); } .smc-page-content tr:last-child td { border-bottom: 0; } /* ============================================================ 9) CODE (safe for long lines) ============================================================ */ .smc-page-content code { font-size: 12.5px; background: rgba(15, 23, 42, 0.06); padding: 2px 6px; border-radius: 8px; } .smc-page-content pre { margin: 0 0 14px; padding: 14px; border-radius: 16px; background: #0b1220; color: #e5e7eb; overflow: auto; } /* ============================================================ 10) SEPARATORS ============================================================ */ .smc-page-content hr, .smc-page-content .wp-block-separator { margin: 18px 0; opacity: 0.25; } /* ============================================================ 11) SMALL DEVICES: keep content comfortable ============================================================ */ @media (max-width: 480px) { .smc-page-title { font-size: 24px; } .smc-page-content { font-size: 14px; } }