/* ========================================================================= MVP LANDING — SHARED STYLES (mobile-first) Один файл стилей на все сайты. Меняется только тема через CSS-переменные: на странице товара в добавляется: Всё остальное — общее. НЕ редактировать под конкретный товар. ========================================================================= */ /* ----------------------------- THEME TOKENS ----------------------------- */ :root{ /* Акцент (кнопки, цены, галочки) — переопределяется на странице товара */ --accent: #1f7a44; --accent-2: #15603a; /* hover / тёмный акцент */ --accent-soft: #e8f3ec; /* мягкая подложка акцента */ /* Тёмные зоны (шапка/подвал) — по умолчанию выводятся из акцента, но можно переопределить --header-bg / --footer-bg на странице товара */ --header-bg: #173b30; --footer-bg: #11261f; /* Цены и скидки */ --price: var(--accent); --old-price: #d23b3b; --discount: #d23b3b; /* Нейтральные */ --bg: #ffffff; --bg-alt: #f4f6f8; --bg-card: #ffffff; --text: #1c2430; --text-muted: #6b7785; --line: #e4e8ee; --shadow: 0 6px 24px rgba(20,30,45,.08); --shadow-lg: 0 14px 40px rgba(20,30,45,.14); --radius: 14px; --radius-sm: 10px; --maxw: 1140px; --gap: 22px; --ok: #1f9d57; --bad: #d23b3b; --font: "Inter", "Helvetica Neue", Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* ------------------------------- RESET ---------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; font-family:var(--font); color:var(--text); background:var(--bg); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; height:auto; display:block; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; } h1,h2,h3,h4{ margin:0 0 .4em; line-height:1.2; font-weight:800; letter-spacing:-.01em; } p{ margin:0 0 1em; } ul{ margin:0; padding:0; list-style:none; } /* ------------------------------ LAYOUT ---------------------------------- */ .container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 16px; } .section{ padding:44px 0; } .section--alt{ background:var(--bg-alt); } .section--dark{ background:var(--header-bg); color:#fff; } .section__head{ text-align:center; max-width:760px; margin:0 auto 28px; } .section__title{ font-size:26px; } .section__subtitle{ color:var(--text-muted); font-size:16px; margin:0; } .section--dark .section__subtitle{ color:rgba(255,255,255,.75); } .center{ text-align:center; } .mt-24{ margin-top:24px; } /* ------------------------------ BUTTONS --------------------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--accent); color:#fff; font-weight:700; font-size:16px; border:0; border-radius:12px; padding:14px 26px; line-height:1.1; transition:transform .08s ease, background .15s ease, box-shadow .15s ease; box-shadow:0 6px 16px rgba(31,122,68,.28); } .btn:hover{ background:var(--accent-2); } .btn:active{ transform:translateY(1px); } .btn--block{ display:flex; width:100%; } .btn--lg{ padding:17px 30px; font-size:18px; } .btn--ghost{ background:transparent; color:var(--accent); border:2px solid var(--accent); box-shadow:none; } .btn--ghost:hover{ background:var(--accent); color:#fff; } /* ------------------------------ HEADER ---------------------------------- */ .site-header{ background:var(--header-bg); color:#fff; position:sticky; top:0; z-index:60; } .site-header__row{ display:flex; align-items:center; justify-content:space-between; min-height:60px; gap:12px; padding:8px 0; } .brand{ display:flex; flex-direction:column; line-height:1.1; } .brand__name{ font-weight:800; font-size:18px; } .brand__tag{ font-size:11px; color:rgba(255,255,255,.7); display:none; } .site-nav{ display:none; gap:24px; } .site-nav a{ color:rgba(255,255,255,.85); font-size:15px; } .site-nav a:hover{ color:#fff; } .header-phone{ text-align:right; line-height:1.15; } .header-phone__num{ font-weight:800; font-size:16px; white-space:nowrap; } .header-phone__label{ font-size:11px; color:rgba(255,255,255,.7); display:none; } /* бургер + мобильное меню (быстрая навигация) */ .nav-toggle{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; background:none; border:0; padding:8px; flex:0 0 auto; } .nav-toggle span{ display:block; height:2px; width:100%; background:#fff; border-radius:2px; transition:.2s; } .nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2){ opacity:0; } .nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .mobile-menu{ display:none; flex-direction:column; background:#fff; box-shadow:var(--shadow-lg); } .mobile-menu.is-open{ display:flex; } .mobile-menu a{ padding:14px 18px; color:var(--text); border-bottom:1px solid var(--line); font-weight:600; } .mobile-menu a:last-child{ border-bottom:0; } .mobile-menu__cta{ color:var(--accent); } .mobile-menu__phone{ color:var(--accent); font-weight:800; } /* якорная навигация не уезжает под липкую шапку */ section[id]{ scroll-margin-top:70px; } /* -------------------------------- HERO ---------------------------------- */ .hero{ padding:22px 0 6px; } .hero__title{ font-size:26px; margin-bottom:6px; } .hero__subtitle{ color:var(--text-muted); font-size:16px; font-weight:600; margin:0; } /* мобайл-порядок: заголовок → фото → цена+CTA → УТП (трастом) */ .hero__inner{ display:grid; gap:16px; grid-template-areas:"head" "media" "cta" "utps"; } .hero__head{ grid-area:head; text-align:center; } .hero__media{ grid-area:media; } .hero__cta{ grid-area:cta; } .hero__utps{ grid-area:utps; display:grid; gap:14px; } .hero__media img{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow); } /* пункт УТП — карточка с подложкой и акцентом, чтобы текст не сливался */ .utp-check{ display:flex; gap:12px; align-items:flex-start; text-align:left; background:var(--bg-alt); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:12px; padding:13px 15px; } .utp-check__ic{ flex:0 0 26px; width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; margin-top:1px; } .utp-check__t{ font-weight:700; font-size:15px; } .utp-check__d{ color:var(--text-muted); font-size:13px; } .hero__cta{ background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center; } .hero__cta .btn{ width:100%; } .hero__cta-price{ font-size:16px; font-weight:700; } .hero__cta-price .old{ color:var(--old-price); text-decoration:line-through; font-weight:600; margin-right:8px; } .hero__cta-price .disc{ color:var(--discount); } /* ------------------------- BENEFITS (4 мелких УТП) ---------------------- */ .benefits{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; } .benefit{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 14px; text-align:center; } .benefit__ic{ font-size:24px; color:var(--accent); margin-bottom:8px; } .benefit__t{ font-weight:700; font-size:14px; margin-bottom:2px; } .benefit__d{ color:var(--text-muted); font-size:12px; } /* ------------------------------- VIDEO ---------------------------------- */ .video__frame{ position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:#000; box-shadow:var(--shadow); } .video__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } /* --------------------- FEATURES (раскрывающиеся УТП) -------------------- */ .features{ display:grid; gap:30px; } .feature{ display:grid; gap:16px; align-items:center; } .feature__media{ position:relative; } .feature__media img{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow); } .feature__num{ position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); } .feature__title{ font-size:20px; } .feature__subtitle{ color:var(--text-muted); font-style:italic; margin:-.2em 0 .8em; font-size:14px; } .feature__lead{ font-weight:700; margin:.6em 0 .4em; } .feature__text{ font-size:15px; } .feature__text.is-collapsed{ display:none; } .feature__more{ display:none; background:none; border:0; color:var(--accent); font-weight:700; padding:6px 0; font-size:14px; } .feature__more::after{ content:" ▾"; } .feature__more.is-open::after{ content:" ▴"; } /* галочный список */ .checklist li{ position:relative; padding-left:26px; margin-bottom:7px; font-size:14px; } .checklist li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-weight:800; } /* -------------------------------- MODELS -------------------------------- */ .models{ display:grid; gap:16px; } .model-card{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; position:relative; box-shadow:var(--shadow); } .model-card__badge{ position:absolute; top:12px; left:12px; background:var(--discount); color:#fff; font-weight:800; font-size:13px; padding:4px 10px; border-radius:20px; } .model-card__img{ border-radius:var(--radius-sm); margin-bottom:12px; } .model-card__title{ font-size:17px; } .model-card__list{ margin:6px 0 14px; } .model-card__prices{ margin-top:auto; margin-bottom:12px; } .price-old{ color:var(--old-price); text-decoration:line-through; font-weight:600; margin-right:8px; } .price-new{ color:var(--price); font-weight:800; font-size:22px; } /* ----------------------------- COMPARE ---------------------------------- */ .compare{ display:grid; gap:14px; } .compare__col{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); } .compare__col--us{ border-color:var(--accent); box-shadow:0 8px 24px rgba(31,122,68,.18); } .compare__label{ font-weight:800; text-align:center; margin-bottom:12px; font-size:16px; } .compare__col--us .compare__label{ color:var(--accent); } .compare__img{ border-radius:var(--radius-sm); margin-bottom:14px; } .compare__list li{ position:relative; padding-left:26px; margin-bottom:9px; font-size:14px; } .compare__col--them .compare__list li::before{ content:"✕"; position:absolute; left:0; color:var(--bad); font-weight:800; } .compare__col--us .compare__list li::before{ content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:800; } /* ----------------------------- CAROUSEL --------------------------------- */ /* бесконечная лента: скрины (3 в ряд) и текст-отзывы (1 в ряд) */ .carousel{ position:relative; padding:0 46px; } .carousel + .carousel{ margin-top:26px; } .carousel__viewport{ overflow:hidden; } .carousel__track{ display:flex; align-items:stretch; } .carousel__slide{ flex:0 0 auto; box-sizing:border-box; padding:0 8px; } .carousel__slide > .review-quote{ height:100%; } .review-screen{ width:100%; border-radius:var(--radius-sm); box-shadow:var(--shadow); cursor:zoom-in; display:block; } .carousel-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:42px; height:42px; border-radius:50%; border:0; background:var(--accent); color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); } .carousel-btn:hover{ background:var(--accent-2); } .carousel-btn--prev{ left:0; } .carousel-btn--next{ right:0; } /* текстовый отзыв — аватар слева, заголовок+цитата справа */ .review-quote{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); display:grid; gap:16px; } .review-quote__person{ display:flex; align-items:center; gap:12px; } .review-quote__avatar{ width:60px; height:60px; border-radius:50%; object-fit:cover; flex:0 0 60px; } .review-quote__name{ font-weight:700; font-size:15px; } .review-quote__loc{ color:var(--text-muted); font-size:13px; } .review-quote__title{ font-weight:800; font-size:17px; margin-bottom:8px; } .review-quote__body p{ font-style:italic; margin:0 0 .7em; font-size:15px; } .review-quote__body p:last-child{ margin-bottom:0; } /* ----------------------------- DELIVERY --------------------------------- */ /* секция доставки: фото склада — бледным фоном, контент сверху */ .delivery-section{ position:relative; overflow:hidden; } .delivery-section__bg{ position:absolute; inset:0; background-size:cover; background-position:center; } .delivery-section__bg::after{ content:""; position:absolute; inset:0; background:rgba(247,249,251,.70); } .delivery-section .container{ position:relative; z-index:1; } .delivery__logos{ display:inline-flex; flex-wrap:wrap; gap:30px; justify-content:center; align-items:center; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 36px; box-shadow:var(--shadow); margin:6px 0 18px; } .delivery__logos img{ height:46px; width:auto; } .delivery__text{ max-width:640px; margin:0 auto; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; box-shadow:var(--shadow); font-size:15px; } .delivery__text b{ color:var(--accent-2); } .delivery__note{ background:var(--bg-card); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--radius-sm); padding:14px 18px; font-size:14px; margin:14px auto 0; max-width:640px; box-shadow:var(--shadow); } .delivery__note b{ color:var(--accent-2); } /* ------------------------------ ADDONS ---------------------------------- */ .addons{ display:grid; gap:22px; } .addon{ display:grid; gap:14px; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); } .addon__media img{ border-radius:var(--radius-sm); } .addon__title{ font-size:18px; } .addon__subtitle{ color:var(--text-muted); font-style:italic; font-size:14px; margin:-.2em 0 .7em; } .addon__text{ font-size:14px; } .addon__prices{ margin:10px 0; } /* ------------------------------- ORDER ---------------------------------- */ .order__grid{ display:grid; gap:20px; } .order__media img{ border-radius:var(--radius); box-shadow:var(--shadow); } .order-card{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-lg); } .order-card__product{ font-weight:800; font-size:18px; margin-bottom:4px; } .order-card__label{ font-weight:600; font-size:15px; color:var(--text-muted); margin-bottom:2px; } .order-card__prices{ margin-bottom:16px; } .order-card__prices .price-new{ font-size:30px; } /* поля с иконкой */ .input-wrap{ position:relative; } .input-wrap__ic{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:18px; height:18px; stroke:var(--text-muted); fill:none; pointer-events:none; } .input-wrap .input{ padding-left:42px; } .field{ margin-bottom:12px; } .field__label{ display:block; font-size:13px; font-weight:600; margin-bottom:5px; color:var(--text-muted); } .input, .select{ width:100%; border:1px solid var(--line); border-radius:10px; padding:13px 14px; font-size:16px; background:#fff; color:var(--text); transition:border-color .15s; } .input:focus, .select:focus{ outline:none; border-color:var(--accent); } .input.is-error{ border-color:var(--bad); } .addon-checks{ display:grid; gap:8px; margin:6px 0 14px; } .addon-check{ display:flex; align-items:center; gap:10px; font-size:14px; cursor:pointer; padding:10px 12px; border:1px solid var(--line); border-radius:10px; } .addon-check input{ width:18px; height:18px; accent-color:var(--accent); } .addon-check__price{ margin-left:auto; font-weight:700; color:var(--price); } .order-total{ display:flex; align-items:center; justify-content:space-between; font-size:18px; font-weight:800; margin:14px 0; padding-top:14px; border-top:1px dashed var(--line); } .order-total__val{ color:var(--price); } .form-agree{ font-size:11px; color:var(--text-muted); text-align:center; margin-top:10px; } .form-agree a{ color:var(--accent); text-decoration:underline; } .form-success{ display:none; text-align:center; padding:22px 10px; } .form-success.is-on{ display:block; } .form-success__ic{ font-size:46px; color:var(--ok); } .form-success__t{ font-weight:800; font-size:20px; margin:8px 0 4px; } .is-submitted .order-form-fields{ display:none; } /* ------------------------------ GALLERY --------------------------------- */ .gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } .gallery__item{ position:relative; cursor:zoom-in; border-radius:var(--radius-sm); overflow:hidden; } .gallery__item img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .25s; } .gallery__item:hover img{ transform:scale(1.05); } .gallery__item::after{ content:"⤢"; position:absolute; bottom:8px; right:8px; width:30px; height:30px; background:rgba(0,0,0,.55); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; } /* ------------------------------- STEPS ---------------------------------- */ .steps{ display:grid; gap:12px; } .step{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 18px; text-align:center; box-shadow:var(--shadow); } .step__ic{ font-size:30px; color:var(--accent); margin-bottom:10px; } .step__t{ font-weight:700; font-size:15px; } /* ----------------------------- CALLBACK --------------------------------- */ .callback{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); max-width:760px; margin:0 auto; text-align:center; } .callback__phone{ font-weight:800; color:var(--accent); font-size:20px; white-space:nowrap; } .callback__row{ display:grid; gap:10px; margin-top:14px; } /* ------------------------------ FOOTER ---------------------------------- */ .site-footer{ background:var(--footer-bg); color:rgba(255,255,255,.85); padding:34px 0 26px; } .site-footer__top{ display:grid; gap:18px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.12); text-align:center; } .site-footer__brand .brand__name{ color:#fff; font-size:20px; } .site-footer__brand .brand__tag{ color:rgba(255,255,255,.6); } .site-footer__req{ font-size:13px; line-height:1.7; } .site-footer__contacts{ font-size:13px; line-height:1.7; } .site-footer__contacts .phone{ font-weight:800; font-size:18px; color:#fff; } .site-footer a{ color:var(--accent-soft); text-decoration:underline; } .site-footer__bottom{ text-align:center; font-size:12px; color:rgba(255,255,255,.55); padding-top:18px; line-height:1.8; } /* --------------------------- STICKY MOBILE CTA -------------------------- */ .sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:70; background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(0,0,0,.1); display:flex; align-items:center; gap:12px; padding:10px 14px; transform:translateY(120%); transition:transform .25s ease; } .sticky-cta.is-on{ transform:translateY(0); } .sticky-cta__price{ line-height:1.1; } .sticky-cta__price .new{ font-weight:800; font-size:18px; color:var(--price); } .sticky-cta__price .old{ font-size:12px; color:var(--old-price); text-decoration:line-through; display:block; } .sticky-cta .btn{ margin-left:auto; flex:0 0 auto; } /* ------------------------------ LIGHTBOX -------------------------------- */ .lightbox{ position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; padding:20px; } .lightbox.is-on{ display:flex; } .lightbox img{ max-width:100%; max-height:90vh; border-radius:8px; } .lightbox__close{ position:absolute; top:16px; right:18px; background:none; border:0; color:#fff; font-size:34px; line-height:1; } /* ============================== DESKTOP ================================= */ @media (min-width:768px){ body{ font-size:17px; } .section{ padding:64px 0; } .section__title{ font-size:34px; } .site-nav{ display:flex; } .brand__tag, .header-phone__label{ display:block; } .nav-toggle{ display:none; } .mobile-menu{ display:none !important; } .hero{ padding:44px 0 0; } .hero__title{ font-size:40px; } .hero__inner{ grid-template-columns:1.05fr 1fr; gap:20px 44px; align-items:start; grid-template-areas:"head media" "utps media" "cta cta"; } .hero__head{ text-align:left; } .hero__media{ align-self:stretch; } .hero__media img{ height:100%; object-fit:cover; } .hero__utps{ gap:16px; align-self:start; } .utp-check__t{ font-size:16px; } .utp-check__d{ font-size:14px; } .hero__cta{ flex-direction:row; justify-content:space-between; text-align:left; padding:18px 24px; margin-top:6px; } .hero__cta .btn{ flex:0 0 auto; width:auto; } .hero__cta-price{ font-size:18px; } .benefits{ grid-template-columns:repeat(4,1fr); gap:18px; } .benefit__ic{ font-size:28px; } .benefit__t{ font-size:15px; } .benefit__d{ font-size:13px; } .features{ gap:54px; } .feature{ grid-template-columns:1fr 1fr; gap:36px; } .feature--reverse .feature__media{ order:2; } .feature__title{ font-size:24px; } /* на десктопе текст всегда раскрыт */ .feature__text.is-collapsed{ display:block; } .models{ grid-template-columns:repeat(3,1fr); } .compare{ grid-template-columns:1fr 1fr; gap:22px; } .review-quote{ grid-template-columns:190px 1fr; gap:30px; align-items:center; padding:32px; } .review-quote__person{ flex-direction:column; text-align:center; gap:10px; } .review-quote__avatar{ width:88px; height:88px; flex-basis:88px; } .addons{ gap:30px; } .addon{ grid-template-columns:1fr 1.4fr; align-items:center; gap:24px; } .addon--reverse .addon__media{ order:2; } .order__grid{ grid-template-columns:2fr 1fr; align-items:start; gap:34px; } .order__media img{ width:100%; } .gallery{ grid-template-columns:repeat(3,1fr); gap:14px; } .steps{ grid-template-columns:repeat(3,1fr); gap:18px; } .callback__row{ grid-template-columns:1fr 1fr auto; } .site-footer__top{ grid-template-columns:1fr 1fr 1fr; align-items:start; text-align:left; } .site-footer__contacts{ text-align:right; } /* sticky CTA только на мобилке */ .sticky-cta{ display:none !important; } } @media (min-width:1024px){ .hero__title{ font-size:46px; } .section__title{ font-size:36px; } }