/* ========================================================================== RetroBoard — лендинг. Полная таблица стилей. Критические правила (reset, header, hero, кнопки) продублированы инлайн в index.html для быстрого первого экрана. Здесь — полный набор. ========================================================================== */ *,*::before,*::after{box-sizing:border-box} :root{ --c-primary:#1e88e5; --c-primary-dark:#1565c0; --c-accent:#42a5f5; --c-ink:#0f172a; --c-muted:#64748b; --c-bg:#ffffff; --c-bg-soft:#f8fafc; --c-border:#e2e8f0; --radius:14px; --container:1120px; --grad:linear-gradient(135deg,#1e88e5 0%,#42a5f5 100%); --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif; --shadow-sm:0 1px 2px rgba(15,23,42,.06),0 2px 8px rgba(15,23,42,.05); --shadow-md:0 10px 30px rgba(15,23,42,.10); } html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;font-family:var(--font);color:var(--c-ink);background:var(--c-bg); line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg{max-width:100%;height:auto;display:block} a{color:var(--c-primary-dark);text-decoration:none} h1,h2,h3{margin:0 0 .4em;line-height:1.2;letter-spacing:-.02em} p{margin:0 0 1em} ul,ol{margin:0;padding:0;list-style:none} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* --- Скип-ссылка для доступности --- */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--c-ink);color:#fff;padding:10px 16px;border-radius:0 0 10px 0; } .skip-link:focus{left:0} /* --- Контейнер --- */ .container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px} /* --- Кнопки --- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-weight:600;font-size:16px;line-height:1;padding:13px 22px;border-radius:10px; border:1px solid transparent;cursor:pointer; transition:transform .12s ease,box-shadow .12s ease,background .12s ease; white-space:nowrap;text-align:center; } .btn-primary{background:var(--grad);color:#fff;box-shadow:0 6px 18px rgba(30, 136, 229,.35)} .btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(30, 136, 229,.45)} .btn-ghost{background:transparent;color:var(--c-ink);border-color:var(--c-border)} .btn-ghost:hover{background:var(--c-bg-soft)} .btn-lg{padding:16px 30px;font-size:18px} .btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid rgba(30, 136, 229,.5);outline-offset:2px} /* --- Шапка --- */ .site-header{ position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(10px); -webkit-backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--c-border); } .header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px} .logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px;color:var(--c-ink);letter-spacing:-.02em} .logo-mark{width:30px;height:30px;border-radius:8px;background:var(--grad);flex:none;display:inline-flex;align-items:center;justify-content:center} .nav{display:flex;align-items:center;gap:26px} .nav a{color:var(--c-muted);font-weight:500;font-size:15px;transition:color .12s ease} .nav a:hover{color:var(--c-ink)} .header-actions{display:flex;align-items:center;gap:10px} .nav-toggle{display:none;padding:9px 11px} /* Мобильное меню */ .mobile-menu{border-bottom:1px solid var(--c-border);background:#fff} .mobile-menu[hidden]{display:none} .mobile-menu .container{display:flex;flex-direction:column;gap:6px;padding-top:12px;padding-bottom:16px} .mobile-menu a:not(.btn){padding:10px 4px;color:var(--c-ink);font-weight:500;border-bottom:1px solid var(--c-border)} .mobile-menu .btn{margin-top:6px} /* --- Hero --- */ .hero{ padding:64px 0 40px; background: radial-gradient(1100px 500px at 80% -10%,rgba(66, 165, 245,.12),transparent 60%), radial-gradient(900px 500px at 0% 0%,rgba(30, 136, 229,.10),transparent 55%); } .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} .hero h1{font-size:clamp(32px,5vw,52px);line-height:1.08;letter-spacing:-.025em;margin:0 0 18px;font-weight:800} .hero h1 .accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .hero-sub{font-size:clamp(17px,2.2vw,20px);color:var(--c-muted);margin:0 0 28px;max-width:34ch} .hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .hero-note{font-size:14px;color:var(--c-muted);margin:16px 0 0} .hero-media img{ width:100%;border-radius:18px;box-shadow:var(--shadow-md); border:1px solid var(--c-border);background:#fff; } /* --- Живой счётчик созданных досок --- */ .counter-band{padding:32px 0;border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);background:var(--c-bg-soft);text-align:center;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease} .counter-band.is-visible{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){.counter-band{transition:none}} .counter-value{margin:0;font-size:clamp(40px,7vw,64px);font-weight:800;line-height:1;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums} .counter-label{margin:8px 0 0;color:var(--c-muted);font-size:17px} /* --- Секции --- */ .section{padding:72px 0} .section-soft{background:var(--c-bg-soft)} .section-head{max-width:680px;margin:0 auto 44px;text-align:center} .section-head h2{font-size:clamp(26px,3.6vw,38px);font-weight:800} .section-head p{color:var(--c-muted);font-size:18px;margin:0} .eyebrow{display:inline-block;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-primary);margin-bottom:10px} /* --- Шаги --- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step} .step{ background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius); padding:24px;box-shadow:var(--shadow-sm); } .step-num{ display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px; border-radius:10px;background:var(--grad);color:#fff;font-weight:800;font-size:18px;margin-bottom:14px; } .step h3{font-size:19px} .step p{color:var(--c-muted);margin:0;font-size:15.5px} /* --- Сетка возможностей --- */ .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .feature-card{ background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius); padding:26px;box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease; } .feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} .feature-icon{ display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px; border-radius:12px;background:rgba(30, 136, 229,.10);color:var(--c-primary-dark);margin-bottom:16px; } .feature-card h3{font-size:20px} .feature-card p{color:var(--c-muted);margin:0} /* --- Сплит-секции (текст + медиа) --- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center} .split-media img{width:100%;border-radius:18px;box-shadow:var(--shadow-md);border:1px solid var(--c-border);background:#fff} .split-copy h2{font-size:clamp(24px,3.2vw,34px);font-weight:800} .split-copy>p{color:var(--c-muted);font-size:18px} .checklist{display:grid;gap:12px;margin:0 0 28px} .checklist li{position:relative;padding-left:34px;color:var(--c-ink);font-size:16.5px} .checklist li::before{ content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%; background:rgba(30, 136, 229,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231565c0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px 12px no-repeat; } /* --- Отзывы --- */ .reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:48px} .review-card{background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm)} .review-text{font-size:16.5px;margin:0 0 20px} .review-author{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--c-muted)} .review-author strong{color:var(--c-ink)} .avatar{ display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex:none; border-radius:50%;background:var(--grad);color:#fff;font-weight:700;font-size:15px; } /* --- Показатели --- */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:center} .stats li{background:var(--c-bg-soft);border:1px solid var(--c-border);border-radius:var(--radius);padding:26px} .stats strong{display:block;font-size:32px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .stats span{color:var(--c-muted);font-size:15px} /* --- Цены --- */ .pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,360px));gap:24px;justify-content:center} .price-card{ position:relative;background:var(--c-bg);border:1px solid var(--c-border);border-radius:18px; padding:30px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column; } .price-card--featured{border-color:var(--c-primary);box-shadow:var(--shadow-md)} .price-badge{ position:absolute;top:-12px;right:22px;background:var(--grad);color:#fff; font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;letter-spacing:.04em; } .price-card h3{font-size:22px} .price{margin:6px 0 18px} .price strong{font-size:40px;font-weight:800;display:inline-block;margin-right:6px} .price span{color:var(--c-muted);font-size:15px} .price-feat{display:grid;gap:10px;margin:0 0 24px;flex:1} .price-feat li{position:relative;padding-left:26px;font-size:15.5px} .price-feat li::before{content:"✓";position:absolute;left:0;color:var(--c-primary-dark);font-weight:800} .price-card .btn{width:100%} /* --- Финальный CTA --- */ .cta-final{ margin:0;padding:80px 0;text-align:center;color:#fff; background:var(--grad); } .cta-final h2{font-size:clamp(28px,4vw,42px);font-weight:800;color:#fff} .cta-final p{font-size:19px;max-width:46ch;margin:0 auto 28px;color:rgba(255,255,255,.92)} .cta-final-btn{background:#fff;color:var(--c-primary-dark);box-shadow:0 10px 30px rgba(0,0,0,.18)} .cta-final-btn:hover{transform:translateY(-1px);box-shadow:0 14px 36px rgba(0,0,0,.24)} /* --- Footer --- */ .site-footer{background:#0b1020;color:#cbd5e1;padding:56px 0 28px} .site-footer .logo{color:#fff} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:32px} .footer-brand p{color:#94a3b8;margin:14px 0 0;max-width:30ch;font-size:15px} .footer-col h3{font-size:15px;color:#fff;margin:0 0 14px;text-transform:uppercase;letter-spacing:.06em} .footer-col a{display:block;color:#cbd5e1;padding:6px 0;font-size:15px;transition:color .12s ease} .footer-col a:hover{color:#fff} .footer-bottom{border-top:1px solid rgba(255,255,255,.10);margin-top:36px;padding-top:24px} .footer-bottom p{margin:0;color:#94a3b8;font-size:14px} /* ========================================================================== Адаптив ========================================================================== */ @media(max-width:960px){ .steps{grid-template-columns:repeat(2,1fr)} .features-grid{grid-template-columns:repeat(2,1fr)} .reviews-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr;gap:28px} } @media(max-width:860px){ .nav,.header-actions .btn-login{display:none} .nav-toggle{display:inline-flex} .hero-grid{grid-template-columns:1fr;gap:32px} .hero{padding:40px 0 24px} .hero-sub{max-width:none} .split{grid-template-columns:1fr;gap:28px} .split-reverse .split-copy{order:2} .split-reverse .split-media{order:1} .section{padding:54px 0} } @media(max-width:560px){ body{font-size:16px} .steps{grid-template-columns:1fr} .features-grid{grid-template-columns:1fr} .stats{grid-template-columns:1fr} .pricing-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} .hero-cta .btn{width:100%} .cta-final{padding:60px 0} }