/* Кастомные стили поверх Tailwind */ /* ── ШРИФТ ── */ body { font-family: 'Inter', system-ui, sans-serif; } /* Перебивает text-stone-900 на — все без явного класса получают графит */ body.bg-white { color: #363d54; } /* ── ЯКОРЯ — отступ под sticky-меню ── */ [id] { scroll-margin-top: 80px; } figure[id] { scroll-margin-top: 80px; } /* ── ТИПОГРАФИКА ── */ html { font-size: 16px; } p { line-height: 1.75; } .section-intro-p { margin-top: 1rem; margin-bottom: 2.25rem; } h1 { font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; margin-top: 0; } h2 { scroll-margin-top: 80px; font-size: 1.875rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; margin-top: 0; color: #363d54; } @media(min-width: 768px) { h2 { font-size: 2.25rem; } } .hero-section h2 { font-weight: 400; letter-spacing: 0; } h3 { font-weight: 700; color: #363d54; letter-spacing: 0; margin-top: 0.5rem; line-height: 1.3; } /* Минимальные размеры текста — main и footer */ main .text-xs, footer .text-xs { font-size: 0.875rem; } main .text-sm, footer .text-sm { font-size: 1rem; } /* ── ЛЕЙБЛ СЕКЦИИ ── */ .section-label { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #3b5bdb; margin-bottom: 1.25rem; display: block; } /* ── АКЦЕНТ-ЛЕЙБЛ (внутри карточек) ── */ .accent-label { font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: #3b5bdb; line-height: 1.3; display: block; margin-bottom: 0.5rem; } /* ── ЗАГОЛОВОК ВНУТРИ КАРТОЧКИ ── */ .accent-heading { font-size: 1rem; font-weight: 700; letter-spacing: 0; color: #363d54; line-height: 1.3; margin-top: 0; margin-bottom: 0.5rem; } /* ── КАРТОЧКА С АКЦЕНТОМ ── */ .accent-card { border: 1px solid #e4e8f8; border-top: 4px solid #3b5bdb; border-radius: 10px; padding: 1.25rem; } /* ── БЕЙДЖ-ФАКТ ── */ .fact-badge { display: inline-block; background: #f0f3ff; color: #3b5bdb; font-size: 0.625rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 20px; letter-spacing: 0.02em; } /* ── БЛОК С КЛЮЧЕВОЙ ЦИФРОЙ ── */ .savings-bar { display: flex; align-items: center; gap: 1.25rem; background: #f0f3ff; border-left: 4px solid #3b5bdb; border-radius: 12px; padding: 1.25rem 1.5rem; margin-bottom: 1.75rem; } .savings-number { font-size: 1.5rem; font-weight: 700; color: #363d54; letter-spacing: -0.01em; white-space: nowrap; line-height: 1; } .savings-desc { font-size: 0.6875rem; color: #363d54; line-height: 1.5; font-weight: 500; } /* ── ЧЕКЛИСТ ── */ .benefits-list { list-style: none; padding: 0; margin: 0 0 2rem 0; display: flex; flex-direction: column; gap: 1rem; } .benefits-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.8125rem; color: #363d54; line-height: 1.65; font-weight: 500; } .benefits-list .check { width: 20px; height: 20px; background: #3b5bdb; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } /* ── ССЫЛКА-КАРТОЧКА (синий фон, рамка) ── */ .link-card-blue { background: #f0f3ff; border: 1px solid #c7d0f0; border-radius: 12px; text-decoration: none; display: block; } /* ── КАРТОЧКИ-ССЫЛКИ ── */ a.link-card-blue, a.accent-card { transition: border-color .2s, box-shadow .2s, transform .2s; display: block; } a.link-card-blue:hover, a.accent-card:hover { border-color: #3b5bdb !important; box-shadow: 0 4px 16px rgba(59,91,219,0.12); transform: translateY(-2px); } /* ── КНОПКИ ── */ .btn-dark { background: #3b5bdb; color: #fff; padding: 0.75rem 1.5rem; letter-spacing: 0.02em; transition: background .2s; display: inline-block; font-size: 0.8125rem; font-weight: 600; border-radius: 8px; text-decoration: none; cursor: pointer; } .btn-dark:hover { background: #2f4ac4; } .btn-outline { border: 1.5px solid #3b5bdb; color: #3b5bdb; padding: 0.75rem 1.5rem; letter-spacing: 0.02em; transition: all .2s; display: inline-block; font-size: 0.8125rem; font-weight: 600; border-radius: 8px; text-decoration: none; cursor: pointer; } .btn-outline:hover { background: #3b5bdb; color: #fff; } .btn-outline-white { border: 1.5px solid rgba(255,255,255,.7); color: #fff; padding: 0.75rem 1.5rem; letter-spacing: 0.02em; transition: all .2s; display: inline-block; font-size: 0.8125rem; font-weight: 600; border-radius: 8px; text-decoration: none; cursor: pointer; } .btn-outline-white:hover { background: rgba(255,255,255,.15); } /* ── ГАЛЕРЕЯ ── */ .gallery-masonry { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 12px; row-gap: 60px; grid-auto-rows: 160px; align-items: start; margin-bottom: 2.5rem; } @media (min-width: 768px) { .gallery-masonry { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .gallery-masonry { grid-template-columns: repeat(4, 1fr); } } .gallery-masonry figure { display: block; overflow: visible; } .gallery-masonry figure.portrait { grid-row: span 2; } .gallery-masonry img { width: 100%; height: 160px; object-fit: cover; display: block; border-radius: 0.5rem; } .gallery-masonry figure.portrait img { height: calc(320px + 60px); } /* ── ТАБЛЕТКИ В HERO ── */ .hero-pill { display: inline-flex; align-items: center; font-size: 14px; color: #fff; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.25); line-height: 1; } /* ── СИНИЙ INFO-БОКС ── */ .info-box-blue { background: #f0f3ff; border-radius: 12px; border-left: 4px solid #3b5bdb; padding: 1.5rem; } /* ── ССЫЛКА С ПУНКТИРНЫМ ПОДЧЁРКИВАНИЕМ ── */ .dotted-link { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .dotted-link strong { font-weight: 600; font-style: normal; color: #363d54; } /* ── КНОПКА «НАВЕРХ» ── */ #back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 2.75rem; height: 2.75rem; background: transparent; border: 1px solid #3b5bdb; border-radius: 8px; color: #3b5bdb; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s, color 0.2s; z-index: 50; } #back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } #back-to-top:hover { background: #3b5bdb; color: #fff; } /* ── FAQ АККОРДЕОН ── */ details summary::-webkit-details-marker { display: none; } details.group { border: 1px solid #e7e5e4; border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 6px; background: #fafaf9; } details.group[open] { background: #fff; border-color: #c7d0f0; } .faq-chevron { width: 16px; height: 16px; flex-shrink: 0; color: #a8a29e; transition: transform .2s; } details[open] summary .faq-chevron { transform: rotate(180deg); }